Integrate Tailwind synthwave theme

likrant · likrant · commit a4b6c658b022 · 2025-06-23T19:58:59.000+03:00
diff --git a/src/main/resources/static/script.js b/src/main/resources/static/script.js
@@ -0,0 +1,12 @@
+// Smooth animation for <details>
+document.addEventListener('DOMContentLoaded', function () {
+    document.querySelectorAll('details').forEach(function (detail) {
+        detail.addEventListener('toggle', function () {
+            if (detail.open) {
+                detail.classList.add('open');
+            } else {
+                detail.classList.remove('open');
+            }
+        });
+    });
+});
diff --git a/src/main/resources/static/style.css b/src/main/resources/static/style.css
@@ -0,0 +1,29 @@
+/* Dark theme styles (2024-2025) */
+body {
+    background: linear-gradient(135deg, #0d0d0d, #1a1a1a);
+    color: #f0f0f0;
+    font-family: Arial, Helvetica, sans-serif;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    min-height: 100vh;
+    margin: 0;
+}
+h1, h2, p {
+    margin: 0.5em 0;
+}
+
+ul { list-style: none; padding: 0; }
+summary {
+    cursor: pointer;
+    font-weight: bold;
+}
+details.open > * { animation: fadeIn 0.5s ease forwards; }
+details[open] summary::after {
+    animation: fadeIn 0.5s ease forwards;
+}
+@keyframes fadeIn {
+    from { opacity: 0; }
+    to { opacity: 1; }
+}
diff --git a/src/main/resources/templates/index.html b/src/main/resources/templates/index.html
@@ -1,10 +1,14 @@
 <!DOCTYPE HTML>
-<html xmlns:th="http://www.thymeleaf.org">
+<html xmlns:th="http://www.thymeleaf.org" data-theme="synthwave">
 <head>
     <title>Interview Questions</title>
     <meta charset="UTF-8"/>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/daisyui@latest/dist/full.css"/>
+    <link rel="stylesheet" th:href="@{/style.css}"/>
+    <script th:src="@{/script.js}" defer></script>
 </head>
-<body>
+<body class="min-h-screen flex flex-col items-center text-center p-4">
 <h1>Выберите категории</h1>
 <form action="/question" method="get">
     <ul>
@@ -15,7 +19,7 @@ <h1>Выберите категории</h1>
             </label>
         </li>
     </ul>
-    <button type="submit">Получить вопросы</button>
+    <button type="submit" class="btn btn-primary mt-2">Получить вопросы</button>
 </form>
 </body>
 </html>
diff --git a/src/main/resources/templates/question.html b/src/main/resources/templates/question.html
@@ -1,24 +1,28 @@
 <!DOCTYPE HTML>
-<html xmlns:th="http://www.thymeleaf.org">
+<html xmlns:th="http://www.thymeleaf.org" data-theme="synthwave">
 <head>
     <title>Вопрос</title>
     <meta charset="UTF-8"/>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/daisyui@latest/dist/full.css"/>
+    <link rel="stylesheet" th:href="@{/style.css}"/>
+    <script th:src="@{/script.js}" defer></script>
 </head>
-<body>
+<body class="min-h-screen flex flex-col items-center text-center p-4">
 <h1 th:text="'Категории: ' + ${#strings.listJoin(categories, ', ')}"></h1>
 <div th:if="${qa != null}">
     <h2 th:text="${qa.category}"></h2>
     <p th:text="${qa.question}"></p>
     <details>
-        <summary>Answer</summary>
+        <summary>Ответ</summary>
         <p th:text="${qa.answer}"></p>
     </details>
 </div>
 <div th:if="${qa == null}">
     <p>No questions found.</p>
 </div>
-<a th:href="@{/}">К категориям</a>
-<a th:href="@{/question(nav='back')}">Назад</a>
-<a th:href="@{/question(nav='next')}">Следующий</a>
+<a th:href="@{/}" class="btn btn-primary m-1">К категориям</a>
+<a th:href="@{/question(nav='back')}" class="btn m-1">Назад</a>
+<a th:href="@{/question(nav='next')}" class="btn m-1">Следующий</a>
 </body>
 </html>
