updated the buttons on the top to a nav bar, final version

Crypto-V · Crypto-V · commit f7f533fbc0ff · 2023-06-04T14:27:28.000+01:00
diff --git a/src/main/resources/static/style.css b/src/main/resources/static/style.css
@@ -24,6 +24,22 @@ body {
     z-index: 999;
 }
 
+/*Image redendering size controll*/
+.image-container {
+    max-width: 350px; /* Set the maximum width for the image container */
+    margin: auto; /* Center the container horizontally */
+    cursor: pointer; /* Show the pointer cursor when hovering */
+}
+
+.image-container img {
+    width: 100%; /* Make the image fill the container */
+    height: auto; /* Maintain aspect ratio */
+    transition: transform 0.3s; /* Add a smooth transition effect */
+}
+
+.image-container img:hover {
+    transform: scale(1.2); /* Scale the image to 120% on hover */
+}
 
 /*NavBar style*/
  .navbar {
diff --git a/src/main/resources/templates/litter_details.html b/src/main/resources/templates/litter_details.html
@@ -26,7 +26,10 @@ <h4><span class="text-muted">Description:</span></h4>
             <p><span th:text="${description}"></span></p>
 
             <h4><span class="text-muted">Image:</span></h4>
-            <img th:src="@{'data:image/png;base64,' + ${image}}" alt="Litter Image" />
+            <div class="image-container" onclick="expandImage()">
+                <img th:src="@{'data:image/png;base64,' + ${image}}" alt="Litter Image" />
+            </div>
+
 
             <h4><span class="text-muted">Status:</span></h4>
             <p><span th:text="${status}"></span></p>
@@ -35,4 +38,11 @@ <h4><span class="text-muted">Status:</span></h4>
 
 </div>
 
+<script>
+    function expandImage() {
+        var img = document.querySelector('.image-container img');
+        img.style.transform = img.style.transform === 'scale(1.2)' ? 'none' : 'scale(1.2)';
+    }
+</script>
+
 
diff --git a/src/main/resources/templates/welcome.html b/src/main/resources/templates/welcome.html
@@ -25,7 +25,7 @@
 
     <nav class="navbar sticky-top navbar-expand-lg bg-body-tertiary">
         <div class="container-fluid">
-            <a class="navbar-brand" style=" color:blue;" th:href="@{/}">LitterSnap</a>
+            <a class="navbar-brand" style=" color:#1c5485;" th:href="@{/thy/litter}">LitterSnap</a>
             <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                 <span class="navbar-toggler-icon"></span>
             </button>
@@ -38,6 +38,9 @@
                     <li class="nav-item">
                         <a class="nav-link active" th:href="@{/thy/users}">View Users</a>
                     </li>
+                    <li class="nav-item">
+                        <a class="nav-link active" aria-current="page" th:href="@{/}">Logout</a>
+                    </li>
 
                 </ul>
 
