11<!DOCTYPE html>
22< html xmlns:th ="http://www.thymeleaf.org " lang ="en ">
33< head >
4- < title >
5- Home page
6- </ title >
7- < script src ="https://cdn.tailwindcss.com ">
8- </ script >
4+ < title > Home page</ title >
5+ < script src ="https://cdn.tailwindcss.com "> </ script >
96 < link href ="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css " rel ="stylesheet "/>
107 < link href ="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap " rel ="stylesheet "/>
118 < style >
1411 }
1512 </ style >
1613</ head >
17- < body class ="bg-white flex flex-col items-center justify-center min-h-screen p-4 relative ">
14+ < body class ="bg-white text-gray-800 flex flex-col items-center justify-center min-h-screen p-4 relative transition-colors duration-300 ">
1815< header class ="absolute top-4 left-4 flex items-center ">
1916 < img class ="w-12 h-12 " height ="50 " src ="https://i.imgur.com/RjTrOGq.png " width ="50 " alt ="spring_boot_logo "/>
2017</ header >
2118< div class ="flex-grow flex flex-col items-center justify-center text-center p-4 ">
22- < h1 class ="text-2xl md:text-4xl font-medium text-gray-800 ">
19+ < h1 class ="text-2xl md:text-4xl font-medium ">
2320 Hello < span class ="text-[#6db33f] font-bold " th:text ="${username} "> </ span > from Spring Boot Web
2421 </ h1 >
25- < p class ="text-sm md:text-base text-gray-600 mt-2 ">
26- Today is < span class ="font-bold "
27- th:text ="${T(java.time.LocalDate).now().dayOfWeek.toString().substring(0,1).toUpperCase() + T(java.time.LocalDate).now().dayOfWeek.toString().substring(1).toLowerCase()} "> </ span >
22+ < p class ="text-sm md:text-base mt-2 ">
23+ Today is < span class ="font-bold " th:text ="${T(java.time.LocalDate).now().dayOfWeek.toString().substring(0,1).toUpperCase() + T(java.time.LocalDate).now().dayOfWeek.toString().substring(1).toLowerCase()} "> </ span >
2824 </ p >
29- < p class ="text-sm md:text-base text-gray-600 ">
25+ < p class ="text-sm md:text-base ">
3026 Last failed login attempt was: < span class ="font-bold " th:text ="${formattedFailedAttempt} "> </ span >
3127 </ p >
3228</ div >
3329< a href ="/logout " class ="absolute top-4 right-4 bg-red-500 text-white px-4 py-2 rounded hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-red-400 ">
3430 < i class ="fas fa-sign-out-alt mr-2 "> </ i >
3531 Logout
3632</ a >
37- < footer class ="text-center text-gray-500 text-sm py-4 ">
33+ < button id ="theme-toggle " class ="absolute bottom-4 right-4 bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-white px-4 py-2 rounded hover:bg-gray-300 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-400 ">
34+ < i class ="fas fa-moon "> </ i >
35+ </ button >
36+ < footer class ="text-center text-sm py-4 ">
3837 < p > © < span th:text ="${T(java.time.Year).now()} "> </ span > neziw. All rights reserved.</ p >
3938</ footer >
39+ < script >
40+ const themeToggle = document . getElementById ( "theme-toggle" ) ;
41+ const body = document . body ;
42+
43+ function applyTheme ( theme ) {
44+ if ( theme === "dark" ) {
45+ body . classList . add ( "dark" , "bg-gray-900" , "text-white" ) ;
46+ themeToggle . innerHTML = '<i class="fas fa-sun"></i>' ;
47+ } else {
48+ body . classList . remove ( "dark" , "bg-gray-900" , "text-white" ) ;
49+ themeToggle . innerHTML = '<i class="fas fa-moon"></i>' ;
50+ }
51+ }
52+
53+ const savedTheme = localStorage . getItem ( "theme" ) || "light" ;
54+ applyTheme ( savedTheme ) ;
55+
56+ themeToggle . addEventListener ( "click" , ( ) => {
57+ const newTheme = body . classList . contains ( "dark" ) ? "light" : "dark" ;
58+ localStorage . setItem ( "theme" , newTheme ) ;
59+ applyTheme ( newTheme ) ;
60+ } ) ;
61+ </ script >
4062</ body >
41- </ html >
63+ </ html >
0 commit comments