add bootstrap template

pionas · Jan 21, 2024 · 101d27e · 101d27e
1 parent 865811a
commit 101d27e
Show file tree

Hide file tree

Showing 4 changed files with 72 additions and 33 deletions.
diff --git a/src/main/resources/templates/fragments/footer.html b/src/main/resources/templates/fragments/footer.html
@@ -0,0 +1,6 @@
+<footer class="py-5 text-center text-body-secondary bg-body-tertiary">
+    <p>Blog template built for <a href="https://getbootstrap.com/">Bootstrap</a> by <a href="https://twitter.com/mdo">@mdo</a>.</p>
+    <p class="mb-0">
+        <a href="#">Back to top</a>
+    </p>
+</footer>
diff --git a/src/main/resources/templates/fragments/header.html b/src/main/resources/templates/fragments/header.html
@@ -0,0 +1,17 @@
+<div class="container">
+    <header class="d-flex flex-wrap justify-content-center py-3 mb-4 border-bottom">
+        <a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto link-body-emphasis text-decoration-none">
+            <svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"></use></svg>
+            <span class="fs-4">Exam</span>
+        </a>
+
+        <ul class="nav nav-pills">
+            <li class="nav-item"><a href="#" class="nav-link active" aria-current="page">Home</a></li>
+            <li class="nav-item"><a href="#" class="nav-link">Features</a></li>
+            <li class="nav-item"><a href="#" class="nav-link">Pricing</a></li>
+            <li class="nav-item"><a href="#" class="nav-link">FAQs</a></li>
+            <li class="nav-item"><a href="#" class="nav-link">About</a></li>
+        </ul>
+    </header>
+</div>
+
diff --git a/src/main/resources/templates/home/index.html b/src/main/resources/templates/home/index.html
@@ -1,37 +1,26 @@
 <!DOCTYPE html>
-<html>
-<head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
-          integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
-    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
-            integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
-            crossorigin="anonymous"></script>
-</head>
+<html lang="en" xmlns:th="http://www.thymeleaf.org">
+<head th:replace="~{template :: head(title = 'Exam - homepage')}" />
 <body>
+<th:block th:replace="~{template :: header}" />
 
-<div class="container">
+<main class="container" th:fragment="content">
+    <table id="allMovies" class="table table-striped">
+        <thead>
+        <tr>
+            <th width="70%">Title</th>
+            <th>Username</th>
+        </tr>
+        </thead>
+        <tbody>
+        <tr class="result" data-th-each="quiz : ${quizes}">
+            <td>[[${quiz.title}]]<br />[[${quiz.description}]]</td>
+            <td>[[${quiz.username}]]</td>
+        </tr>
+        </tbody>
+    </table>
+</main>
 
-    <div class="row">
-        <div id="title">
-            <h1>Spring WebFlux + Thymeleaf</h1>
-        </div>
-        <table id="allMovies" class="table table-striped">
-            <thead>
-            <tr>
-                <th width="70%">Name</th>
-                <th>Username</th>
-            </tr>
-            </thead>
-            <tbody>
-            <tr class="result" data-th-each="quiz : ${quizes}">
-                <td>[[${quiz.title}]]<br />[[${quiz.description}]]</td>
-                <td>[[${quiz.username}]]</td>
-            </tr>
-            </tbody>
-        </table>
-    </div>
-
-</div>
+<th:block th:replace="~{template :: footer}" />
+</body>
+</html>
diff --git a/src/main/resources/templates/template.html b/src/main/resources/templates/template.html
@@ -0,0 +1,27 @@
+<!doctype html>
+<html lang="en" data-bs-theme="auto">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="description" content="">
+    <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
+    <meta name="generator" content="Hugo 0.118.2">
+    <title th:text="${title}">Exam website</title>
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
+          integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
+    <meta name="theme-color" content="#712cf9">
+    <link href="https://fonts.googleapis.com/css?family=Playfair&#43;Display:700,900&amp;display=swap" rel="stylesheet">
+</head>
+<body>
+<!-- Nagłówek -->
+<header th:replace="~{fragments/header}"></header>
+
+
+<!-- Stopka -->
+<footer th:replace="~{fragments/footer}"></footer>
+
+<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
+        integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
+        crossorigin="anonymous"></script>
+</body>
+</html>