fix: styling

Friedjof · Oct 10, 2024 · d7ca4f4 · d7ca4f4
1 parent b8fabc4
commit d7ca4f4
Show file tree

Hide file tree

Showing 7 changed files with 38 additions and 17 deletions.
diff --git a/static/css/styles.css b/static/css/styles.css
@@ -35,19 +35,19 @@ footer {
     cursor: pointer;
 }
 .machine-button.off {
-    background-color: #1c6d2e; /* Green color for available machines */
+    background-color: #6d6e53; /* Green color for available machines */
     color: white; /* White text for better contrast */
     font-weight: bold;
 }
 .machine-button.on {
     background-color: #baefba; /* Muted grey for finished machines */
 }
 .machine-button.running {
-    background-color: #F4D03F; /* Softer yellow for running machines */
-    box-shadow: 0 0 10px 2px #F4D03F;
+    background-color: #f37933; /* Softer yellow for running machines */
+    box-shadow: 0 0 20px 2px #f37933;
 }
 .machine-button.defect {
-    background-color: #d3d3d3; /* Light grey for defect machines */
+    background-color: #dc3545; /* Light grey for defect machines */
     color: #a9a9a9; /* Dark grey text */
     cursor: not-allowed; /* Change cursor to indicate non-interactive */
 }

diff --git a/static/media/bg-index-1.webp b/static/media/bg-index-1.webp
diff --git a/static/media/bg-index-2.webp b/static/media/bg-index-2.webp
diff --git a/timer/templates/includes/footer.html b/timer/templates/includes/footer.html
@@ -0,0 +1,6 @@
+<!-- templates/includes/footer.html -->
+<footer class="bg-dark text-white text-center">
+    <p class="my-1"><span class="badge bg-warning">Beta</span> &copy; {{ year }} Laundry Tracker</p>
+    <p class="mb-1">Developed by <a href="https://github.com/Friedjof" class="text-white" target="_blank">Friedjof</a></p>
+    <p class="mb-0">Please report any issues <a href="https://github.com/Friedjof/LaundryTracker/issues" class="text-white" target="_blank">here</a> or <a href="mailto:programming.noweck.info" class="text-white" target="_blank">contact me</a></p>
+</footer>
diff --git a/timer/templates/timer/404.html b/timer/templates/timer/404.html
@@ -50,9 +50,6 @@ <h2>Oops! The page you're looking for doesn't exist.</h2>
     </div>
 
     <!-- Footer -->
-    <footer class="bg-dark text-white text-center py-2">
-        <p><span class="badge bg-warning">Beta</span> &copy; {{ year }} Laundry Tracker</p>
-        <p>Developed by <a href="https://github.com/Friedjof" class="text-white">Friedjof</a></p>
-    </footer>
+    {% include 'includes/footer.html' %}
 </body>
 </html>
diff --git a/timer/templates/timer/home.html b/timer/templates/timer/home.html
@@ -52,9 +52,6 @@ <h2>Welcome to Laundry Tracker</h2>
     </div>
 
     <!-- Footer -->
-    <footer class="bg-dark text-white text-center py-2">
-        <p>&copy; {{ year }} Laundry Tracker</p>
-        <p>Developed by <a href="https://github.com/Friedjof" class="text-white">Friedjof</a></p>
-    </footer>
+    {% include 'includes/footer.html' %}
 </body>
 </html>
diff --git a/timer/templates/timer/index.html b/timer/templates/timer/index.html
@@ -21,13 +21,37 @@
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" defer></script>
     <!-- Custom JS -->
     <script src="{% static 'js/scripts.js' %}"></script>
+
+    <style>
+    body {
+        margin: 0;
+        padding: 0;
+    }
+
+    body::before {
+        content: '';
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background-image: url('{% static 'media/bg-index-2.webp' %}');
+        background-repeat: no-repeat;
+        background-size: cover;
+        background-attachment: fixed;
+        filter: blur(15px); /* Blur-Effekt */
+        z-index: -1; /* Hinter den eigentlichen Inhalt stellen */
+    }
+    </style>
 </head>
 <body>
     <!-- Header -->
     <header>
         <div class="row align-items-center bg-dark text-white p-1 mx-2">
             <div class="col-auto m-0 p-1">
-                <img src="{% static 'media/favicon.webp' %}" class="header-image rounded" alt="Icon">
+                <a href="/">
+                    <img src="{% static 'media/favicon.webp' %}" class="header-image rounded" alt="Icon">
+                </a>
             </div>
             <div class="col text-start m-0 px-2">
                 <h1 class="mb-1">{{ building }}</h1>
@@ -120,10 +144,7 @@ <h1 class="mb-1">{{ building }}</h1>
     </div>
 
     <!-- Footer -->
-    <footer class="bg-dark text-white text-center py-2">
-        <p><span class="badge bg-warning">Beta</span> &copy; {{ year }} Laundry Tracker</p>
-        <p>Developed by <a href="https://github.com/Friedjof" class="text-white">Friedjof</a></p>
-    </footer>
+    {% include 'includes/footer.html' %}
 
     <!-- Timer Modal -->
     <div class="modal fade" id="timerModal" tabindex="-1" aria-labelledby="timerModalLabel" aria-hidden="true">