Enable Thymeleaf, add homepage & CSS

Add spring-boot-starter-thymeleaf dependency and enable Thymeleaf properties in application.properties; adjust datasource configuration to use the MySQL 'attendance' DB. Add a new homepage template and stylesheet (homePage.html, homePage.css). Refactor auth.css, consolidate layout styles, and update header/footer/login templates to use the new CSS paths and correct Thymeleaf fragment references.

pom.xml

@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <project xmlns="http://maven.apache.org/POM/4.0.0"
-    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
-    xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
+         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
     <modelVersion>4.0.0</modelVersion>
     <parent>
         <groupId>org.springframework.boot</groupId>
@@ -95,7 +95,10 @@
             <artifactId>mysql-connector-j</artifactId>
             <scope>runtime</scope>
         </dependency>
-
+        <dependency>
+            <groupId>org.springframework.boot</groupId>
+            <artifactId>spring-boot-starter-thymeleaf</artifactId>
+        </dependency>
     </dependencies>
 
     <build>

src/main/resources/application.properties

@@ -6,11 +6,11 @@ spring.servlet.multipart.max-request-size=10MB
 spring.mvc.view.prefix=/WEB-INF/views/
 spring.mvc.view.suffix=.jsp
 # Thymeleaf Configuration
-# spring.thymeleaf.prefix=classpath:/templates/
-# spring.thymeleaf.suffix=.html
-# spring.thymeleaf.cache=false
-# spring.thymeleaf.encoding=UTF-8
-# spring.thymeleaf.mode=HTML
+spring.thymeleaf.prefix=classpath:/templates/
+spring.thymeleaf.suffix=.html
+spring.thymeleaf.cache=false
+spring.thymeleaf.encoding=UTF-8
+spring.thymeleaf.mode=HTML
 
 # Google OAuth2
 # spring.security.oauth2.client.registration.google.client-id=
@@ -23,14 +23,14 @@ spring.devtools.livereload.enabled=true
 server.servlet.jsp.init-parameters.development=true
 
 # DataSource Configuration for SQL Server
-spring.datasource.url=jdbc:mariadb://localhost:3306/ATTENDANCE
-spring.datasource.username=root
-spring.datasource.password=QQQewqwqa401!
-spring.datasource.driver-class-name=org.mariadb.jdbc.Driver
-
-# spring.datasource.url=jdbc:mysql://localhost:3306/game_promo_web
+# spring.datasource.url=jdbc:mariadb://localhost:3306/ATTENDANCE
 # spring.datasource.username=root
-# spring.datasource.password=annguyenthanh2k5
+# spring.datasource.password=QQQewqwqa401!
+# spring.datasource.driver-class-name=org.mariadb.jdbc.Driver
+
+spring.datasource.url=jdbc:mysql://localhost:3306/attendance
+spring.datasource.username=root
+spring.datasource.password=annguyenthanh2k5
 
 
 # SMPT EMAIL

src/main/resources/static/css/auth.css

@@ -1,281 +1,128 @@
-/* ==========================================
-   LOGIN PAGE
-========================================== */
+@import url("/css/layout/header.css");
+@import url("/css/layout/footer.css");
 
-.login-section {
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
     min-height: 100vh;
-    padding-top: 30px;
-    /* display: flex; */
-    align-items: center;
-    padding-bottom: 30px;
     background:
         radial-gradient(circle at top left,
-            rgba(37,99,235,.18),
+            rgba(37, 99, 235, .18),
             transparent 30%),
-
         radial-gradient(circle at bottom right,
-            rgba(239,68,68,.12),
+            rgba(239, 68, 68, .12),
             transparent 40%),
-
         #070b16;
+    font-family: Arial, Helvetica, sans-serif;
 }
 
-/* ==========================================
-   LEFT SIDE
-========================================== */
-
-.welcome-panel {
-    color: white;
-    padding-right: 60px;
-}
-
-.logo-circle {
-    width: 80px;
-    height: 80px;
-
-    border-radius: 24px;
-
-    background: rgba(37,99,235,.15);
-
+.layout {
+    margin-top: 60px;
+    min-height: calc(100vh - 140px);
     display: flex;
-    align-items: center;
     justify-content: center;
-
-    margin-bottom: 30px;
-}
-
-.logo-circle i {
-    color: #3b82f6;
-    font-size: 42px;
-}
-
-.left-title {
-    color: white;
-
-    font-size: 3.8rem;
-    font-weight: 700;
-
-    margin-bottom: 25px;
-
-    line-height: 1.1;
-}
-
-.left-description {
-    color: #94a3b8;
-
-    font-size: 1.1rem;
-
-    line-height: 1.8;
-}
-
-/* ==========================================
-   LOGIN CARD
-========================================== */
-
-
-.card-header{
-    display: flex;
     align-items: center;
-    gap: 20px;
-    margin-bottom: 20px;
+    padding: 40px 20px;
 }
 
-.login-card {
+.card {
+    width: 100%;
+    max-width: 480px;
     background: #111827;
-
-    border: 1px solid rgba(59,130,246,.2);
-
+    border: 1px solid rgba(59, 130, 246, .2);
     border-radius: 24px;
-
-    padding: 20px;
-    
-    max-width: 480px;
-
+    padding: 30px;
     box-shadow:
-        0 20px 60px rgba(0,0,0,.35),
-        0 0 0 1px rgba(59,130,246,.05);
+        0 20px 60px rgba(0, 0, 0, .35),
+        0 0 0 1px rgba(59, 130, 246, .05);
 }
 
-.card-icon {
-    width: 70px;
-    height: 70px;
-
-    border-radius: 18px;
-
-    background: rgba(16,185,129,.15);
-
+.card-header {
     display: flex;
-    align-items: center;
-    justify-content: center;
-
-    margin-bottom: 20px;
-}
-
-.card-icon i {
-    color: #10b981;
-    font-size: 32px;
+    flex-direction: column;
+    gap: 10px;
+    text-align: center;
+    margin-bottom: 24px;
 }
 
-.login-card h2 {
-    color: white;
-
+.card-title {
+    color: #fff;
     font-size: 2rem;
     font-weight: 700;
+}
 
-    margin-bottom: 25px;
+.card-description {
+    color: #94a3b8;
 }
 
-/* ==========================================
-   FORM
-========================================== */
+.divider {
+    height: 1px;
+    background: #334155;
+    margin-bottom: 24px;
+}
 
-.form-group {
+.auth-group {
     margin-bottom: 18px;
 }
 
-.form-group label {
+.auth-group label {
     display: block;
-
     color: #cbd5e1;
-
-    font-weight: 500;
-
     margin-bottom: 8px;
+    font-weight: 500;
 }
 
-.form-control {
+.auth-group input {
     width: 100%;
-
-    height: 54px;
-
-    background: #0f172a;
-
+    height: 52px;
+    padding: 0 16px;
+    border-radius: 12px;
     border: 1px solid #334155;
-
-    border-radius: 14px;
-
-    color: white;
-}
-
-.form-control:focus {
     background: #0f172a;
-
-    color: white;
-
-    border-color: #3b82f6;
-
-    box-shadow: 0 0 0 4px rgba(59,130,246,.15);
-}
-
-.form-check-label {
-    color: #94a3b8;
-}
-
-/* ==========================================
-   BUTTONS
-========================================== */
-
-.btn-danger {
-    width: 100%;
-
-    height: 50px;
-
-    border: none;
-
-    border-radius: 14px;
-
-    background: #051863;
-
     color: white;
-
-    font-weight: 600;
+    outline: none;
 }
 
-.btn-danger:hover {
-    background: #dc2626;
+.auth-group input:focus {
+    border-color: #3b82f6;
+    box-shadow: 0 0 0 4px rgba(59, 130, 246, .15);
 }
 
-.btn-primary {
+.auth-btn {
     width: 100%;
-
-    height: 54px;
-
+    height: 52px;
     border: none;
-
-    border-radius: 14px;
-
+    border-radius: 12px;
     background: #2563eb;
-
     color: white;
-
     font-weight: 600;
-
+    cursor: pointer;
     margin-top: 10px;
 }
 
-.btn-primary:hover {
-    background: #1d4ed8;
+.auth-btn:hover {}
+.other-option {
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
 }
 
-/* ==========================================
-   LINKS
-========================================== */
-
-.btn-link,
-.text-end a {
-    
+.other-option a {
     color: #60a5fa;
     text-decoration: none;
+    cursor: pointer;
 }
 
-.btn-link:hover,
-.text-end a:hover {
+.other-option a:hover {
     color: white;
 }
 
-.text-end {
-    display:flex;
-    justify-content:space-around;
-    margin-top: 10px;
-}
-
-/* ==========================================
-   ALERT
-========================================== */
-
-.alert-danger {
-    background: rgba(239,68,68,.15);
-
-    border: 1px solid rgba(239,68,68,.3);
-
-    color: #fecaca;
-
-    border-radius: 12px;
-}
-
-/* ==========================================
-   MOBILE
-========================================== */
-
-@media (max-width: 991px) {
-
-    .welcome-panel {
-        text-align: center;
-
-        padding-right: 0;
-
-        margin-bottom: 50px;
-    }
-
-    .logo-circle {
-        margin: 0 auto 25px;
-    }
-
-    .left-title {
-        font-size: 2.5rem;
-    }
-
-    .login-card {
-        max-width: 100%;
-    }
+.error-message {
+    color: #ef4444;
+    font-size: 14px;
+    margin-top: 4px;
 }

src/main/resources/static/css/homePage.css

@@ -0,0 +1,345 @@
+
+/* =========================
+   HOME PAGE
+========================= */
+
+.home-page {
+    min-height: 100vh;
+    background:
+        radial-gradient(circle at top left,
+            rgba(99, 102, 241, .15),
+            transparent 30%),
+        radial-gradient(circle at bottom right,
+            rgba(139, 92, 246, .12),
+            transparent 40%),
+        #020617;
+}
+
+/* =========================
+   CONTAINER
+========================= */
+
+.container {
+    width: 100%;
+    max-width: 1280px;
+    margin: auto;
+    padding: 0 24px;
+}
+
+/* =========================
+   NAVBAR
+========================= */
+
+.navbar {
+    position: sticky;
+    top: 0;
+    z-index: 100;
+    background: rgba(2, 6, 23, .7);
+    backdrop-filter: blur(20px);
+    border-bottom: 1px solid rgba(255, 255, 255, .08);
+}
+
+.navbar-content {
+    height: 72px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.brand {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+}
+
+.brand-icon {
+    width: 44px;
+    height: 44px;
+    border-radius: 14px;
+    background: var(--primary-gradient);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: white;
+}
+
+.brand-name {
+    font-size: 1.35rem;
+    font-weight: 700;
+}
+
+.navbar-actions {
+    display: flex;
+    gap: 12px;
+}
+
+.nav-link {
+    color: #cbd5e1;
+    text-decoration: none;
+    padding: 10px 18px;
+    transition: .3s;
+}
+
+.nav-link:hover {
+    color: white;
+}
+
+.nav-btn {
+    text-decoration: none;
+    background: var(--primary-gradient);
+    color: white;
+    padding: 10px 18px;
+    border-radius: 12px;
+    font-weight: 600;
+    transition: .3s;
+}
+
+.nav-btn:hover {
+    transform: translateY(-2px);
+}
+
+/* =========================
+   HERO
+========================= */
+
+.hero {
+    padding: 100px 0;
+}
+
+.hero-grid {
+    display: grid;
+    grid-template-columns: 1.1fr 0.9fr;
+    gap: 60px;
+    align-items: center;
+}
+
+.hero-title {
+    line-height: 1.05;
+    margin-bottom: 24px;
+}
+
+.hero-title-gradient {
+    font-size: clamp(3rem, 8vw, 5.5rem);
+    font-weight: 800;
+    background: linear-gradient(to right,
+            #818cf8,
+            #a78bfa,
+            #f472b6);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+}
+
+.hero-title-white {
+    font-size: clamp(3rem, 8vw, 5rem);
+    font-weight: 800;
+    color: white;
+}
+
+.hero-description {
+    color: #94a3b8;
+    font-size: 1.2rem;
+    line-height: 1.8;
+    max-width: 650px;
+    margin-bottom: 40px;
+}
+
+.hero-actions {
+    display: flex;
+    gap: 16px;
+}
+
+.primary-btn {
+    text-decoration: none;
+    background: var(--primary-gradient);
+    color: white;
+    padding: 14px 26px;
+    border-radius: 14px;
+    font-weight: 600;
+    transition: .3s;
+}
+
+.primary-btn:hover {
+    transform: translateY(-3px);
+}
+
+.secondary-btn {
+    text-decoration: none;
+    color: white;
+    border: 1px solid rgba(255, 255, 255, .15);
+    padding: 14px 26px;
+    border-radius: 14px;
+    transition: .3s;
+}
+
+.secondary-btn:hover {
+    background: rgba(255, 255, 255, .05);
+}
+
+/* =========================
+   STATS
+========================= */
+
+.stats-panel {
+    padding: 30px;
+    border-radius: 28px;
+    background: rgba(255, 255, 255, .04);
+    backdrop-filter: blur(20px);
+    border: 1px solid rgba(255, 255, 255, .08);
+
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 20px;
+}
+
+.stats-card {
+    background: rgba(15, 23, 42, .7);
+    border: 1px solid rgba(255, 255, 255, .06);
+    border-radius: 20px;
+    padding: 28px;
+    text-align: center;
+    transition: .3s;
+}
+
+.stats-card:hover {
+    transform: translateY(-4px);
+}
+
+.stats-card i {
+    color: #818cf8;
+    margin-bottom: 14px;
+}
+
+.stats-value {
+    color: white;
+    font-size: 2rem;
+    font-weight: 700;
+}
+
+.stats-label {
+    margin-top: 6px;
+    color: #94a3b8;
+}
+
+/* =========================
+   FEATURES
+========================= */
+
+.features {
+    padding: 100px 0;
+    background: rgba(15, 23, 42, .4);
+}
+
+.section-header {
+    text-align: center;
+    margin-bottom: 70px;
+}
+
+.section-title {
+    color: white;
+    font-size: 3rem;
+    margin-bottom: 12px;
+}
+
+.section-description {
+    color: #94a3b8;
+    font-size: 1.15rem;
+}
+
+.feature-grid {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 24px;
+}
+
+.feature-card {
+    background: rgba(15, 23, 42, .55);
+    backdrop-filter: blur(12px);
+    border: 1px solid rgba(255, 255, 255, .08);
+    border-radius: 24px;
+    padding: 30px;
+    transition: .3s;
+}
+
+.feature-card:hover {
+    transform: translateY(-5px);
+    border-color: rgba(255, 255, 255, .15);
+}
+
+.feature-icon {
+    width: 60px;
+    height: 60px;
+    border-radius: 18px;
+    background: var(--primary-gradient);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: white;
+    margin-bottom: 20px;
+}
+
+.feature-title {
+    color: white;
+    margin-bottom: 12px;
+    font-size: 1.2rem;
+}
+
+.feature-description {
+    color: #94a3b8;
+    line-height: 1.7;
+}
+
+/* =========================
+   FOOTER
+========================= */
+
+.footer {
+    border-top: 1px solid rgba(255, 255, 255, .08);
+    padding: 40px 0;
+    text-align: center;
+}
+
+.footer p {
+    color: #94a3b8;
+}
+
+/* =========================
+   RESPONSIVE
+========================= */
+
+@media (max-width: 992px) {
+
+    .hero-grid {
+        grid-template-columns: 1fr;
+    }
+
+    .feature-grid {
+        grid-template-columns: repeat(2, 1fr);
+    }
+}
+
+@media (max-width: 768px) {
+
+    .navbar-content {
+        flex-direction: column;
+        gap: 16px;
+        height: auto;
+        padding: 16px 0;
+    }
+
+    .hero {
+        padding: 60px 0;
+    }
+
+    .feature-grid,
+    .stats-panel {
+        grid-template-columns: 1fr;
+    }
+
+    .hero-actions {
+        flex-direction: column;
+    }
+
+    .section-title {
+        font-size: 2rem;
+    }
+}

src/main/resources/templates/cms/auth/login.html

@@ -5,13 +5,15 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Đăng Nhập - Face ID Attendance</title>
-    <link rel="stylesheet" href="css/components.css">
+    <link rel="stylesheet" href="/css/auth.css">
+
+
 </head>
 
 <body>
     <div class="bg-img"></div>
 
-    <div th:replace="~{cms/layouts/header :: header}"></div>
+    <div th:replace="~{cms/layout/header :: header}"></div>
 
     <div class="layout">
         <div class="card">
@@ -22,7 +24,7 @@
             </div>
 
             <div class="divider"></div>
-            
+
             <div class="card-body">
                 <p class="error-message"></p>
 
@@ -50,11 +52,11 @@
 
                 <hr style="margin: 1rem 0; opacity: 0.2;" />
                 <div class="other-option">
-                    <a class="register-link">
+                    <a href="#" class="register-link">
                         Tạo tài khoản mới
                     </a>
 
-                    <a class="forgotPass-link">
+                    <a href="#" class="forgotPass-link">
                         Quên mật khẩu
                     </a>
                 </div>
@@ -62,7 +64,7 @@
         </div>
     </div>
 
-    <div th:replace="~{cms/layouts/footer :: footer}"></div>
+    <div th:replace="~{cms/layout/footer :: footer}"></div>
 
 </body>
 

src/main/resources/templates/cms/homePage.html

@@ -0,0 +1,194 @@
+<!DOCTYPE html>
+<html lang="vi">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Đăng Nhập - Face ID Attendance</title>
+    <link rel="stylesheet" href="/css/homePage.css">
+
+
+</head>
+
+<body>
+    <div class="bg-img"></div>
+
+
+    <div class="home-page">
+
+        <!-- Navigation -->
+        <header class="navbar">
+            <div class="container navbar-content">
+
+                <div class="brand">
+                    <div class="brand-icon">
+                        <i data-lucide="camera"></i>
+                    </div>
+
+                    <span class="brand-name">
+                        Smart Attendance
+                    </span>
+                </div>
+
+                <div class="navbar-actions">
+                    <a href="/login" class="nav-link">
+                        Đăng nhập
+                    </a>
+
+                    <a href="/register" class="nav-btn">
+                        Bắt đầu ngay
+                    </a>
+                </div>
+
+            </div>
+        </header>
+
+        <!-- Hero -->
+        <section class="hero">
+            <div class="container hero-grid">
+
+                <div class="hero-content">
+                    <h1 class="hero-title">
+                        <span class="hero-title-gradient">
+                            SMART ATTENDANCE
+                        </span>
+                        <br>
+                        <span class="hero-title-white">
+                            SYSTEM
+                        </span>
+                    </h1>
+
+                    <p class="hero-description">
+                        Giải pháp điểm danh Face ID thông minh cho doanh nghiệp và cơ sở giáo dục.
+                        Quản lý hiệu quả, chính xác và an toàn.
+                    </p>
+
+                    <div class="hero-actions">
+                        <a href="/register" class="primary-btn">
+                            Bắt đầu ngay
+                        </a>
+
+                        <a href="/login" class="secondary-btn">
+                            Xem Demo
+                        </a>
+                    </div>
+                </div>
+
+                <div class="hero-stats">
+
+                    <div class="stats-panel">
+
+                        <div class="stats-card">
+                            <i data-lucide="users"></i>
+                            <div class="stats-value">5000+</div>
+                            <div class="stats-label">Người dùng</div>
+                        </div>
+
+                        <div class="stats-card">
+                            <i data-lucide="target"></i>
+                            <div class="stats-value">99.8%</div>
+                            <div class="stats-label">Độ chính xác</div>
+                        </div>
+
+                        <div class="stats-card">
+                            <i data-lucide="building-2"></i>
+                            <div class="stats-value">50+</div>
+                            <div class="stats-label">Đơn vị</div>
+                        </div>
+
+                        <div class="stats-card">
+                            <i data-lucide="clock"></i>
+                            <div class="stats-value">24/7</div>
+                            <div class="stats-label">Hoạt động</div>
+                        </div>
+
+                    </div>
+
+                </div>
+
+            </div>
+        </section>
+
+        <!-- Features -->
+        <section class="features">
+            <div class="container">
+
+                <div class="section-header">
+                    <h2 class="section-title">
+                        Tính năng nổi bật
+                    </h2>
+
+                    <p class="section-description">
+                        Giải pháp toàn diện cho quản lý điểm danh
+                    </p>
+                </div>
+
+                <div class="feature-grid">
+
+                    <article class="feature-card">
+                        <div class="feature-icon">
+                            <i data-lucide="camera"></i>
+                        </div>
+
+                        <h3 class="feature-title">
+                            Face Recognition
+                        </h3>
+
+                        <p class="feature-description">
+                            Nhận diện khuôn mặt chính xác với AI, chống điểm danh hộ
+                        </p>
+                    </article>
+
+                    <article class="feature-card">
+                        <div class="feature-icon">
+                            <i data-lucide="bar-chart-3"></i>
+                        </div>
+
+                        <h3 class="feature-title">
+                            Analytics Dashboard
+                        </h3>
+
+                        <p class="feature-description">
+                            Thống kê realtime, biểu đồ trực quan, báo cáo chi tiết
+                        </p>
+                    </article>
+
+                    <article class="feature-card">
+                        <div class="feature-icon">
+                            <i data-lucide="file-text"></i>
+                        </div>
+
+                        <h3 class="feature-title">
+                            Report Management
+                        </h3>
+
+                        <p class="feature-description">
+                            Quản lý báo cáo công việc hằng ngày và cuối tuần
+                        </p>
+                    </article>
+
+                    <article class="feature-card">
+                        <div class="feature-icon">
+                            <i data-lucide="calendar"></i>
+                        </div>
+
+                        <h3 class="feature-title">
+                            Leave Management
+                        </h3>
+
+                        <p class="feature-description">
+                            Xin nghỉ phép, duyệt đơn, theo dõi lịch sử nghỉ
+                        </p>
+                    </article>
+
+                </div>
+
+            </div>
+        </section>
+
+
+    <div th:replace="~{cms/layout/footer :: footer}"></div>
+
+</body>
+
+</html>

src/main/resources/templates/cms/layout/footer.html

@@ -5,7 +5,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Đăng Ký - Face ID Attendance</title>
-    <link rel="stylesheet" href="css/components.css">
+    <link rel="stylesheet" href="/css/layout/footer.css">
 </head>
 
 <body>

src/main/resources/templates/cms/layout/header.html

@@ -1,15 +1,4 @@
-<!DOCTYPE html>
-<html lang="vi">
-
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Đăng Ký - Face ID Attendance</title>
-    <link rel="stylesheet" href="css/auths/header.css">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
-</head>
-
-<body>
+
     <header class="header-layout">
         <div class="header-container">
 
@@ -45,6 +34,3 @@
 
         </div>
     </header>
-</body>
-
-</html>