fix: styling and modularisation

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

Hide file tree

Showing 8 changed files with 140 additions and 56 deletions.
diff --git a/static/css/styles.css b/static/css/styles.css
@@ -99,6 +99,84 @@ h1 {
     font-weight: bold;
 }
 
+/* home page round github link button */
+.round-button {
+    background-color: #243a60;
+    color: white;
+    border: none;
+    border-radius: 15px;
+    padding: 10px 20px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 16px;
+    cursor: pointer;
+    transition: background-color 0.3s, transform 0.3s, box-shadow 0.3s;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+.round-button:hover {
+    background-color: #c75333;
+    transform: scale(1.05);
+    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
+}
+
+.round-button:active {
+    background-color: #d44020;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+}
+
+.round-button:focus {
+    outline: none;
+    box-shadow: 0 0 0 4px #fac375;
+}
+
+/* home button */
+.home-button {
+    background-color: #079c93; /* Hauptfarbe */
+    color: white;
+    border: none;
+    border-radius: 15px;
+    padding: 10px 20px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 16px;
+    cursor: pointer;
+    transition: background-color 0.3s, transform 0.3s, box-shadow 0.3s;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+.home-button:hover {
+    background-color: #ff640e; /* Hover-Farbe */
+    transform: scale(1.05);
+    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
+}
+
+.home-button:active {
+    background-color: #490815; /* Active-Farbe */
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+}
+
+.home-button:focus {
+    outline: none;
+    box-shadow: 0 0 0 4px #018286; /* Focus-Farbe */
+}
+
+/* home page shadow effect */
+.custom-hover:hover {
+    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.7);
+}
+
+.warning-message {
+    background-color: rgb(220, 170, 31);
+    padding: 5px;
+    border-radius: 5px;
+    text-align: center;
+    font-size: 0.9em;
+    border: 2px dotted black;
+    color: black;
+}
 
 /* Extra small devices (phones, up to 360px) */
 @media (max-width: 360px) {

diff --git a/timer/templates/includes/footer.html b/timer/templates/includes/footer.html
@@ -1,6 +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="my-1">&copy; {{ year }} Laundry Tracker <span class="badge bg-warning" style="color: black">Beta</span></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/includes/link-info.html b/timer/templates/includes/link-info.html
@@ -0,0 +1,3 @@
+<p class="warning-message">
+    <span><i class="fas fa-exclamation-triangle"></i> <strong>Please note: To access the LaundryTracker, contact your local admin for the specific URL.</strong></span>
+</p>
diff --git a/timer/templates/includes/static-header.html b/timer/templates/includes/static-header.html
@@ -0,0 +1,13 @@
+{% load static %}
+
+<header>
+    <div class="row align-items-center bg-dark text-white p-1 mx-2" style="border-bottom-left-radius: 10px; border-bottom-right-radius: 10px;">
+        <div class="col-auto m-0 p-1">
+            <img src="{% static 'media/favicon.webp' %}" class="header-image rounded" alt="Icon">
+        </div>
+        <div class="col text-start m-0 px-2">
+            <h1 class="mb-1">Laundry Tracker</h1>
+            <p class="lead mb-0">Keep track of your laundry machines easily</p>
+        </div>
+    </div>
+</header>
diff --git a/timer/templates/timer/404.html b/timer/templates/timer/404.html
@@ -23,28 +23,24 @@
 </head>
 <body style="background: url('{% static 'media/bg-404.webp' %}') no-repeat center center fixed; background-size: cover;">
     <!-- Header -->
-    <header>
-        <div class="row align-items-center bg-dark text-white p-1 mx-2" style="border-bottom-left-radius: 10px; border-bottom-right-radius: 10px;">
-            <div class="col-auto m-0 p-1">
-                <img src="{% static 'media/favicon.webp' %}" class="header-image rounded" alt="Icon">
-            </div>
-            <div class="col text-start m-0 px-2">
-                <h1 class="mb-1">Laundry Tracker</h1>
-                <p class="lead mb-0">Keep track of laundry machines</p>
-            </div>
-        </div>
-    </header>
+    {% include 'includes/static-header.html' %}
 
     <!-- Main Content -->
     <div class="container my-5 position-relative">
         <div class="row justify-content-center">
-            <div class="col-md-8 text-center p-5" style="color: white; background-color: rgba(60,7,20,0.95); border-radius: 10px; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);">
+            <div class="col-md-8 text-center p-5" style="color: white; background-color: rgba(142,86,59,0.95); border-radius: 10px; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);">
                 <h2>Oops! The page you're looking for doesn't exist.</h2>
                 <p>It seems like the page has been moved or never existed.</p>
-                <p style="color: black; background-color: #f4b400; padding: 5px; border-radius: 5px; text-align: center; font-size: 0.9em;">
-                    <span><i class="fas fa-exclamation-triangle"></i> Please note: Contact your local admin to obtain a room link for marking machine status.</span>
-                </p>
-                <a href="/" class="btn btn-primary mt-3">Go Back Home</a>
+
+                <div class="my-5 mx-3">
+                    {% include 'includes/link-info.html' %}
+                </div>
+
+                <a href="/">
+                    <button class="home-button">
+                        <i class="fas fa-home" style="margin-right: 8px;"></i> Go back to Home
+                    </button>
+                </a>
             </div>
         </div>
     </div>

diff --git a/timer/templates/timer/home.html b/timer/templates/timer/home.html
@@ -24,29 +24,23 @@
 </head>
 <body style="background: url('{% static 'media/bg-homepage-4.webp' %}') no-repeat center center fixed; background-size: cover;">
     <!-- Header -->
-    <header>
-        <div class="row align-items-center bg-dark text-white p-1 mx-2" style="border-bottom-left-radius: 10px; border-bottom-right-radius: 10px;">
-            <div class="col-auto m-0 p-1">
-                <img src="{% static 'media/favicon.webp' %}" class="header-image rounded" alt="Icon">
-            </div>
-            <div class="col text-start m-0 px-2">
-                <h1 class="mb-1">Laundry Tracker</h1>
-                <p class="lead mb-0">Keep track of your laundry machines easily</p>
-            </div>
-        </div>
-    </header>
+    {% include 'includes/static-header.html' %}
 
     <!-- Main Content -->
     <div class="container my-5">
         <div class="row justify-content-center">
-            <div class="col-md-8 text-center p-5" style="color: black; background-color: rgba(232,219,184,0.95); border-radius: 10px; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);">
+            <div class="col-md-8 text-center p-5 custom-hover" style="color: black; background-color: rgba(232,219,184,0.95); border-radius: 10px; box-shadow: 0 0 25px rgba(0, 0, 0, 0.9);">
                 <h2>Welcome to Laundry Tracker</h2>
                 <p class="lead mt-3">Laundry Tracker is a web app that helps you monitor laundry machines in a building. Users can view machine status, set timers, and mark machines as available.</p>
                 <p>With real-time updates and an intuitive interface, Laundry Tracker ensures you never wait for an available machine.</p>
-                <p style="background-color: #f4b400; padding: 5px; border-radius: 5px; text-align: center; font-size: 0.9em;">
-                    <span><i class="fas fa-exclamation-triangle"></i> Please note: Contact your local admin to obtain a room link for marking machine status.</span>
-                </p>
-                <a href="https://github.com/Friedjof/LaundryTracker" class="btn btn-primary mt-4">View on GitHub</a>
+
+                {% include 'includes/link-info.html' %}
+
+                <a href="https://github.com/Friedjof/LaundryTracker" target="_blank">
+                    <button class="round-button">
+                        <i class="fab fa-github" style="margin-right: 8px;"></i> View on GitHub
+                    </button>
+                </a>
             </div>
         </div>
     </div>

diff --git a/timer/templates/timer/index.html b/timer/templates/timer/index.html
@@ -23,25 +23,25 @@
     <script src="{% static 'js/scripts.js' %}"></script>
 
     <style>
-    body {
-        margin: 0;
-        padding: 0;
-    }
+        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 */
-    }
+        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>

diff --git a/timer/views.py b/timer/views.py
@@ -67,7 +67,7 @@ def set_timer(request, building, machine_id):
             return JsonResponse({'status': 'success'})
         return JsonResponse({'status': 'error', 'message': 'Machine is not available'}, status=400)
 
-    return JsonResponse({'status': 'error', 'message': 'Invalid request method'}, status=400)
+    return render(request, 'timer/404.html', {'year': datetime.now().year}, status=404)
 
 @csrf_exempt
 def available(request, building, machine_id):
@@ -83,7 +83,7 @@ def available(request, building, machine_id):
         else:
             return JsonResponse({'status': 'error', 'message': 'Machine is not finished'}, status=400)
 
-    return JsonResponse({'status': 'error', 'message': 'Invalid request method'}, status=400)
+    return render(request, 'timer/404.html', {'year': datetime.now().year}, status=404)
 
 @csrf_exempt
 def get_notes(request, building, machine_id):
@@ -95,7 +95,7 @@ def get_notes(request, building, machine_id):
 
         return JsonResponse({'status': 'success', 'notes': machine.get_notes()})
 
-    return JsonResponse({'status': 'error', 'message': 'Invalid request method'}, status=400)
+    return render(request, 'timer/404.html', {'year': datetime.now().year}, status=404)
 
 @csrf_exempt
 def set_defect(request, building, machine_id):
@@ -111,7 +111,7 @@ def set_defect(request, building, machine_id):
 
         return JsonResponse({'status': 'success'})
 
-    return JsonResponse({'status': 'error', 'message': 'Invalid request method'}, status=400)
+    return render(request, 'timer/404.html', {'year': datetime.now().year}, status=404)
 
 @csrf_exempt
 def set_repair(request, building, machine_id):
@@ -125,7 +125,7 @@ def set_repair(request, building, machine_id):
         machine.set_notes('')
         return JsonResponse({'status': 'success'})
 
-    return JsonResponse({'status': 'error', 'message': 'Invalid request method'}, status=400)
+    return render(request, 'timer/404.html', {'year': datetime.now().year}, status=404)
 
 
 def page_not_found(request, exception):