source: src/main/resources/templates/index.html

Last change on this file was 5ea00d7, checked in by Malek Alavi <malekalavi7@…>, 2 days ago

Initial project upload
  • Property mode set to 100644
File size: 5.7 KB
Line 
1<!DOCTYPE html>
2<html xmlns:th="http://www.thymeleaf.org">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1">
6 <title>Home - Course Platform</title>
7 <!-- Bootstrap CSS -->
8 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
9 <style>
10 .hero {
11 background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('https://source.unsplash.com/1600x600/?education,students') center/cover no-repeat;
12 color: white;
13 height: 60vh;
14 display: flex;
15 flex-direction: column;
16 justify-content: center;
17 align-items: center;
18 text-align: center;
19 }
20 .section-padding {
21 padding: 60px 0;
22 }
23 </style>
24</head>
25<body>
26<!-- Navbar -->
27<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
28 <div class="container">
29 <a class="navbar-brand" th:href="@{/}">CoursePlatform</a>
30 <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
31 aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
32 <span class="navbar-toggler-icon"></span>
33 </button>
34 <div class="collapse navbar-collapse" id="navbarNav">
35 <ul class="navbar-nav ms-auto">
36 <li class="nav-item">
37 <a class="nav-link" th:href="@{/}">Home</a>
38 </li>
39 <li class="nav-item" th:if="${loggedIn} and ${userRole} == 'ROLE_USER'">
40 <a class="nav-link" th:href="@{/course}">Course</a>
41 </li>
42 <li class="nav-item" th:if="${loggedIn} and ${userRole} == 'ROLE_INSTRUCTOR'">
43 <a class="nav-link" th:href="@{/instructor/course}">Manage Course</a>
44 </li>
45 <!-- Show if user NOT logged in -->
46 <li class="nav-item" th:if="${!loggedIn}">
47 <a class="nav-link" th:href="@{/register}">Register</a>
48 </li>
49 <li class="nav-item" th:if="${!loggedIn}">
50 <a class="nav-link" th:href="@{/login}">Login</a>
51 </li>
52 <!-- Show only if user role is ADMIN -->
53 <li class="nav-item" th:if="${loggedIn} and ${userRole} == 'ROLE_ADMIN'">
54 <a class="nav-link" th:href="@{/category}">Category</a>
55 </li>
56 <li class="nav-item" th:if="${loggedIn} and ${userRole} == 'ROLE_ADMIN'">
57 <a class="nav-link" th:href="@{/subscription-plans}">Subscription Plan</a>
58 </li>
59 <li class="nav-item" th:if="${loggedIn} and ${userRole} == 'ROLE_USER'">
60 <a class="nav-link" th:href="@{/user-subscription}">Subscription Plan</a>
61 </li>
62 <li class="nav-item" th:if="${loggedIn} and ${userRole} != 'ROLE_INSTRUCTOR'">
63 <a class="nav-link" th:href="@{/support-ticket}">Support Ticket</a>
64 </li>
65 <!-- Show if user IS logged in -->
66 <li class="nav-item" th:if="${loggedIn}">
67 <a class="nav-link" th:href="@{/logout}">Logout</a>
68 </li>
69 </ul>
70 </div>
71 </div>
72</nav>
73
74
75<!-- Hero Section -->
76<section class="hero">
77 <div class="container">
78 <h1 class="display-4">Learn and Grow with Our Courses</h1>
79 <p class="lead">Join expert instructors and enhance your skills at your own pace!</p>
80 <!-- Only show if NOT logged in -->
81 <a class="btn btn-warning btn-lg mt-3" th:href="@{/register}" th:if="${!loggedIn}">Get Started</a>
82 </div>
83</section>
84
85<!-- Features Section -->
86<section class="section-padding bg-light">
87 <div class="container">
88 <div class="row text-center">
89 <div class="col-md-4 mb-4">
90 <div class="card h-100 shadow">
91 <div class="card-body">
92 <h5 class="card-title">Wide Range of Courses</h5>
93 <p class="card-text">Explore courses across multiple subjects, tailored to your learning goals.</p>
94 </div>
95 </div>
96 </div>
97 <div class="col-md-4 mb-4">
98 <div class="card h-100 shadow">
99 <div class="card-body">
100 <h5 class="card-title">Expert Instructors</h5>
101 <p class="card-text">Learn from experienced professionals who guide you step by step.</p>
102 </div>
103 </div>
104 </div>
105 <div class="col-md-4 mb-4">
106 <div class="card h-100 shadow">
107 <div class="card-body">
108 <h5 class="card-title">Flexible Learning</h5>
109 <p class="card-text">Access courses anytime, anywhere, and learn at your own pace.</p>
110 </div>
111 </div>
112 </div>
113 </div>
114 </div>
115</section>
116
117<!-- Call to Action Section -->
118<section class="section-padding text-center">
119 <div class="container">
120 <h2>Ready to start learning?</h2>
121 <p>Join CoursePlatform today and unlock your potential!</p>
122 <!-- Only show if NOT logged in -->
123 <a class="btn btn-primary btn-lg mt-3" th:href="@{/register}" th:if="${!loggedIn}">Register Now</a>
124 </div>
125</section>
126
127<!-- Footer -->
128<footer class="bg-dark text-white py-4 text-center">
129 &copy; 2026 CoursePlatform. All rights reserved.
130</footer>
131
132<!-- Bootstrap JS -->
133<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
134</body>
135</html>
Note: See TracBrowser for help on using the repository browser.