style: Style of doom

src/main/java/com/maradona/backend/controllers/ProjectController.java

@@ -21,7 +21,7 @@ public class ProjectController {
   public String projects(Model model) {
     var projectData = projectService.getAllProjects();
     model.addAttribute("projectData", projectData);
-    return "index";
+    return "projects";
   }
 
   @GetMapping("/create")

src/main/resources/static/footer.css

@@ -0,0 +1,18 @@
+footer {
+  background-color: var(--cosmic-dark-dark);
+  padding: 20px 0;
+}
+
+footer p {
+  color: var(--starlight-white-lighter);
+  text-align: center;
+}
+
+footer a {
+  color: var(--aurora-yellowgreen-lighter);
+  text-decoration: none;
+}
+
+footer a:hover {
+  color: var(--aurora-yellowgreen-light);
+}

src/main/resources/static/header.css

@@ -0,0 +1,24 @@
+header {
+  background-color: var(--cosmic-dark-dark);
+  padding: 20px 0;
+  border-bottom: 1px solid var(--starlight-white-dark);
+}
+
+header h1 {
+  color: var(--starlight-white-lighter);
+  margin: 0;
+}
+
+header .nav-link {
+  color: var(--aurora-yellowgreen-lighter);
+  text-decoration: none;
+}
+
+header .nav-link.active {
+  font-weight: bold;
+  color: var(--aurora-yellowgreen-light);
+}
+
+header .nav-link:hover {
+  color: var(--aurora-yellowgreen-light);
+}

src/main/resources/static/projects.css

@@ -0,0 +1,62 @@
+.project-card {
+  background-color: var(--cosmic-dark-dark);
+  color: var(--starlight-white-lighter);
+  border: 1px solid var(--cosmic-dark-medium);
+  border-radius: 8px;
+  padding: 20px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+}
+
+.project-card:hover {
+  transform: translateY(-5px);
+}
+
+.project-card .card-title {
+  color: var(--starlight-white-lighter);
+  margin-bottom: 15px;
+}
+
+.project-card .card-details {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.project-card .card-text {
+  margin-bottom: 0;
+}
+
+.btn-create-project {
+  display: inline-block;
+  padding: 10px 20px;
+  font-size: 16px;
+  cursor: pointer;
+  text-align: center;
+  text-decoration: none;
+  color: var(--cosmic-dark-dark);
+  background-color: var(--aurora-yellowgreen-lighter);
+  border: none;
+  border-radius: 4px;
+  margin-bottom: 20px;
+}
+
+.btn-create-project:hover {
+  background-color: var(--aurora-yellowgreen-light);
+}
+
+.btn-delete {
+  display: inline-block;
+  padding: 10px 20px;
+  font-size: 16px;
+  cursor: pointer;
+  text-align: center;
+  text-decoration: none;
+  color: var(--cosmic-dark-dark);
+  background-color: var(--aurora-yellowgreen-lighter);
+  border: none;
+  border-radius: 4px;
+}
+
+.btn-delete:hover {
+  background-color: var(--aurora-yellowgreen-light);
+}

src/main/resources/static/style.css

@@ -0,0 +1,42 @@
+/*
+  Only for global variables
+*/
+
+:root {
+  --aurora-yellowgreen-lighter: #dedc00;
+  --aurora-yellowgreen-light: #c5c400;
+  --aurora-yellowgreen-dark: #aaaa00;
+  --aurora-yellowgreen-darker: #868600;
+
+  --cosmic-dark-darker: #00122a;
+  --cosmic-dark-dark: #001b41;
+  --cosmic-dark-medium: #263c61;
+  --cosmic-dark-light: #6b7696;
+  --cosmic-dark-lighter: #a3a9b3;
+
+  --starlight-white-lighter: #ffffff;
+  --starlight-white-light: #f2f4f5
+  --starlight-white-dark: #e4e8ec;
+  --starlight-white-darker: #ccd1d9;
+
+  --skin-tone-lighter: #ffb27d;
+  --skin-tone-light: #ed985f;
+  --skin-tone-medium: #b56f40;
+  --skin-tone-dark: #99592e;
+}
+
+body,
+html {
+  font-family: "Barlow", sans-serif;
+  background-color: var(--starlight-white-light);
+}
+
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+}
+
+.content {
+  flex: 1;
+}

src/main/resources/templates/_footer.html

@@ -1,5 +1,13 @@
-<footer>
-  <p>&copy INTER Versicherungsgruppe</p>
-  <a href="impressum">Impressum</a>
-  <a href="datenschutz">Datenschutz</a>
+<footer th:fragment="footer">
+  <div class="container">
+    <div class="row">
+      <div class="col-md-6">
+        <p>&copy; INTER Versicherungsgruppe</p>
+      </div>
+      <div class="col-md-6 text-md-right">
+        <a href="impressum" class="mr-3">Impressum</a>
+        <a href="datenschutz">Datenschutz</a>
+      </div>
+    </div>
+  </div>
 </footer>

src/main/resources/templates/_header.html

@@ -1,24 +1,31 @@
 <header th:fragment="header(activePage)">
-  <h1>INTER Versicherungsgruppe</h1>
-  <!-- Navigation -->
-  <nav>
-    <ul>
-      <li>
-        <a
-          th:href="@{/projects}"
-          th:classappend="${activePage == 'projects' ? 'active' : ''}"
-        >
-          Projekte
-        </a>
-      </li>
-      <li>
-        <a
-          th:href="@{/skills}"
-          th:classappend="${activePage == 'profile' ? 'active' : ''}"
-        >
-          Skills
-        </a>
-      </li>
-    </ul>
-  </nav>
+  <div class="container">
+    <div class="row align-items-center">
+      <div class="col-md-6">
+        <h1>INTER</h1>
+      </div>
+      <div class="col-md-6">
+        <nav>
+          <ul class="nav justify-content-end">
+            <li class="nav-item">
+              <a
+                class="nav-link"
+                th:href="@{/projects}"
+                th:classappend="${activePage == 'projects' ? 'active' : ''}"
+                >Projekte</a
+              >
+            </li>
+            <li class="nav-item">
+              <a
+                class="nav-link"
+                th:href="@{/skills}"
+                th:classappend="${activePage == 'profile' ? 'active' : ''}"
+                >Skills</a
+              >
+            </li>
+          </ul>
+        </nav>
+      </div>
+    </div>
+  </div>
 </header>

src/main/resources/templates/_metadata.html

@@ -4,4 +4,15 @@
   <meta name="author" content="Maradona" />
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link
+    rel="stylesheet"
+    href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Barlow:wght@400;700&display=swap"
+    rel="stylesheet"
+  />
+  <link rel="stylesheet" href="/style.css" />
+  <link rel="stylesheet" href="/header.css" />
+  <link rel="stylesheet" href="/footer.css" />
 </th:block>

src/main/resources/templates/index.html

@@ -1,30 +0,0 @@
-<!DOCTYPE html>
-<html xmlns:th="http://www.thymeleaf.org">
-  <head>
-    <div th:replace="~{_metadata :: metadata}"></div>
-    <title>My Skill Management System</title>
-  </head>
-  <body>
-    <div th:replace="~{_header :: header(activePage=${home})}"></div>
-    <div>
-      <h2>Projects</h2>
-      <a th:href="@{/projects/create}">Create Project</a>
-      <ul>
-        <li th:each="project : ${projectData}">
-          <span th:text="${project.name}">Project Name</span> -
-          <span th:text="${project.startDate}">Start Date</span> to
-          <span th:text="${project.endDate}">End Date</span>
-          <form
-            th:action="@{/projects/delete}"
-            method="post"
-            style="display: inline"
-          >
-            <input type="hidden" name="id" th:value="${project.id}" />
-            <button type="submit" class="button">Delete</button>
-          </form>
-        </li>
-      </ul>
-    </div>
-    <div th:replace="~{_footer :: footer}"></div>
-  </body>
-</html>

src/main/resources/templates/project-create.html

@@ -3,29 +3,59 @@
   <head>
     <div th:replace="~{_metadata :: metadata}"></div>
     <title>Create Project</title>
+    <link rel="stylesheet" href="/projects.css" />
   </head>
   <body>
-    <div th:replace="~{_header :: header(activePage=${home})}"></div>
-    <div>
-      <h2>Create Project</h2>
-      <form th:action="@{/projects/save}" th:object="${project}" method="post">
-        <div>
-          <label for="name">Project Name:</label>
-          <input type="text" id="name" th:field="*{name}" required />
-        </div>
-        <div>
-          <label for="startDate">Start Date:</label>
-          <input type="date" id="startDate" th:field="*{startDate}" required />
-        </div>
-        <div>
-          <label for="endDate">End Date:</label>
-          <input type="date" id="endDate" th:field="*{endDate}" required />
-        </div>
-        <div>
-          <button type="submit">Create Project</button>
-        </div>
-      </form>
+    <div class="wrapper">
+      <div th:replace="~{_header :: header(activePage=${createProject})}"></div>
+      <div class="content container mt-4">
+        <h2 class="mb-4">Create Project</h2>
+        <form
+          th:action="@{/projects/save}"
+          th:object="${project}"
+          method="post"
+          class="project-card"
+        >
+          <div class="card-body">
+            <div class="form-group">
+              <label for="name">Project Name:</label>
+              <input
+                type="text"
+                id="name"
+                th:field="*{name}"
+                class="form-control"
+                required
+              />
+            </div>
+            <div class="form-group">
+              <label for="startDate">Start Date:</label>
+              <input
+                type="date"
+                id="startDate"
+                th:field="*{startDate}"
+                class="form-control"
+                required
+              />
+            </div>
+            <div class="form-group">
+              <label for="endDate">End Date:</label>
+              <input
+                type="date"
+                id="endDate"
+                th:field="*{endDate}"
+                class="form-control"
+                required
+              />
+            </div>
+            <div class="form-group">
+              <button type="submit" class="btn-create-project">
+                Save Project
+              </button>
+            </div>
+          </div>
+        </form>
+      </div>
+      <div th:replace="~{_footer :: footer}"></div>
     </div>
-    <div th:replace="~{_footer :: footer}"></div>
   </body>
 </html>

src/main/resources/templates/projects.html

@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html xmlns:th="http://www.thymeleaf.org">
+  <head>
+    <div th:replace="~{_metadata :: metadata}"></div>
+    <title>My Skill Management System</title>
+    <link rel="stylesheet" href="/projects.css" />
+  </head>
+  <body>
+    <div class="wrapper">
+      <div th:replace="~{_header :: header(activePage=${home})}"></div>
+      <div class="content container mt-4">
+        <h2 class="mb-4">Projects</h2>
+        <a th:href="@{/projects/create}" class="btn-create-project"
+          >Create Project</a
+        >
+        <div class="row">
+          <div class="col-12" th:each="project : ${projectData}">
+            <div class="project-card mb-4">
+              <div class="card-body">
+                <h5 class="card-title" th:text="${project.name}">
+                  Project Name
+                </h5>
+                <div class="card-details">
+                  <div class="card-text">
+                    <strong>Start Date:</strong>
+                    <span th:text="${project.startDate}">Start Date</span><br />
+                    <strong>End Date:</strong>
+                    <span th:text="${project.endDate}">End Date</span>
+                  </div>
+                  <form
+                    th:action="@{/projects/delete}"
+                    method="post"
+                    class="d-inline"
+                  >
+                    <input type="hidden" name="id" th:value="${project.id}" />
+                    <button type="submit" class="btn-delete">Delete</button>
+                  </form>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div th:replace="~{_footer :: footer}"></div>
+    </div>
+  </body>
+</html>