From 0d54983850dfb16d4be007e9218db3af10bf4be3 Mon Sep 17 00:00:00 2001
From: Max <m.giller.dev@gmail.com>
Date: Thu, 10 Oct 2024 17:14:50 +0200
Subject: [PATCH] Max Theme

---
 src/templates/wishlist_view.html | 153 +++++++++++++++++--------------
 1 file changed, 86 insertions(+), 67 deletions(-)
diff --git a/src/templates/wishlist_view.html b/src/templates/wishlist_view.html
index d512123..6ed3534 100644
--- a/src/templates/wishlist_view.html
+++ b/src/templates/wishlist_view.html
@@ -1,61 +1,63 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>{{ wishlist.config.title }}</title>
     <style>
-        /* Same base styles from the previous version */
         body {
-            font-family: Arial, sans-serif;
-            background-color: #f4f4f4;
+            background-color: #1a1a1a;
+            color: #aaa;
+            font-family: "Fira Code", "Fira Mono", "Roboto Mono", "Lucida Console", "Courier New", monospace;
+            font-size: 16px;
+            line-height: 1.5;
             margin: 0;
-            padding: 20px;
+            padding: 0;
         }
 
         h1, h3 {
             text-align: center;
-            color: #333;
+            color: #fff;
         }
 
         ul {
             list-style: none;
             padding: 0;
+            margin: 20px auto;
+            max-width: 800px;
         }
 
         li {
-            background-color: #fff;
+            background-color: #2c2c2c;
             margin: 10px 0;
-            padding: 15px;
+            padding: 20px;
             border-radius: 8px;
-            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-            position: relative;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
         }
 
         h2 {
-            margin: 0 0 10px;
-            color: #2c3e50;
+            margin: 0;
+            color: #fff;
         }
 
         p {
-            color: #7f8c8d;
+            color: #888;
             font-size: 14px;
         }
 
         a {
             color: #3498db;
             text-decoration: none;
+            transition: background-color 0.2s;
         }
 
         a:hover {
-            text-decoration: underline;
-        }
-
-        img {
-            margin-top: 10px;
-            border-radius: 5px;
-            max-width: 150px;
-            display: block;
+            background-color: #444;
+            padding: 2px 5px;
+            border-radius: 3px;
         }
 
         .price {
@@ -63,115 +65,132 @@
             color: #27ae60;
         }
 
-        hr {
-            border: none;
-            border-top: 1px solid #eee;
-            margin: 20px 0;
+        img {
+            max-width: 100px;
+            border-radius: 8px;
         }
 
         .reserve-button {
-            background-color: #3498db;
+            background-color: #444;
             color: white;
             border: none;
-            padding: 10px;
+            padding: 8px 15px;
             cursor: pointer;
             border-radius: 5px;
+            transition: background-color 0.3s;
         }
 
         .reserve-button:hover {
-            background-color: #2980b9;
+            background-color: #666;
         }
 
+        hr {
+            border: 0;
+            border-top: 1px solid #333;
+        }
+
+        /* Collapsed reserved items */
         .reserved-item {
-            background-color: #f9e79f;
-        }
-
-        form {
-            margin-top: 10px;
+            background-color: #444;
         }
 
         input[type="text"] {
             padding: 8px;
-            border: 1px solid #ccc;
+            background-color: #333;
+            border: 1px solid #555;
+            color: #ccc;
             border-radius: 4px;
         }
 
-        @media (min-width: 768px) {
-            li {
-                display: flex;
-                align-items: center;
-                justify-content: space-between;
-            }
-
-            img {
-                max-width: 100px;
-                margin-left: 20px;
-            }
+        form {
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
         }
+
+        /* Collapsible section */
+        .collapsible {
+            background-color: #2c2c2c;
+            padding: 15px;
+            text-align: center;
+            cursor: pointer;
+            border-radius: 8px;
+        }
+
+        .collapsible:hover {
+            background-color: #333;
+        }
+
+        #reserved-items {
+            display: none;
+        }
+
     </style>
 </head>
+
 <body>
     <h1>{{ wishlist.config.title }}</h1>
 
     <ul>
-    <!-- Loop through unreserved items -->
-    {% for item_id, item in wishlist.items.items() if not item.is_reserved %}
+        {% for item_id, item in wishlist.items.items() if not item.reserved %}
         <li>
             <div>
                 <h2>{{ item.name }}</h2>
                 <p>{{ item.description }}</p>
-                <p class="price">Price: €{{ "%.2f"|format(item.price) }}</p>
+                <p class="price">€{{ "%.2f"|format(item.price) }}</p>
                 <a href="{{ item.shop }}" target="_blank">Shop Link</a>
 
-                <!-- Form for reserving the item -->
+                <!-- Reserve Form -->
                 <form method="POST" action="/reserve-item">
                     <input type="hidden" name="wishlist_id" value="{{ wishlist.config.id }}">
                     <input type="hidden" name="item_id" value="{{ item.id }}">
                     <input type="hidden" name="reserved" value="true">
-                    <label for="name_{{ item_id }}">Reserve for:</label>
-                    <input type="text" id="name_{{ item_id }}" name="reserver_name" placeholder="Your name">
-                    <button class="reserve-button" type="submit">Reserve</button>
+                    <input type="text" name="reserver_name" placeholder="Your name" required>
+                    <button type="submit" class="reserve-button">Reserve</button>
                 </form>
             </div>
             <img src="{{ item.image }}" alt="{{ item.name }}">
         </li>
         <hr>
-    {% endfor %}
+        {% endfor %}
     </ul>
 
-    <!-- Collapsible section for reserved items -->
-    <h3>Reserved Items (click to expand/collapse)</h3>
-    <ul id="reserved-items" style="display:none;">
-    {% for item_id, item in wishlist.items.items() if item.is_reserved %}
+    <!-- Collapsible Reserved Items -->
+    <div class="collapsible" onclick="toggleReservedItems()">Show Reserved Items</div>
+    <ul id="reserved-items">
+        {% for item_id, item in wishlist.items.items() if item.reserved %}
         <li class="reserved-item">
             <div>
                 <h2>{{ item.name }} (Reserved)</h2>
                 <p>{{ item.description }}</p>
-                <p class="price">Price: €{{ "%.2f"|format(item.price) }}</p>
+                <p class="price">€{{ "%.2f"|format(item.price) }}</p>
                 <a href="{{ item.shop }}" target="_blank">Shop Link</a>
 
-                <!-- Form for unreserving the item -->
+                <!-- Unreserve Form -->
                 <form method="POST" action="/reserve-item">
                     <input type="hidden" name="wishlist_id" value="{{ wishlist.config.id }}">
                     <input type="hidden" name="item_id" value="{{ item.id }}">
                     <input type="hidden" name="reserved" value="false">
-                    <label for="name_{{ item_id }}">Reserved by:</label>
-                    <input type="text" id="name_{{ item_id }}" name="reserver_name" value="{{ item.reservation.name }}" readonly>
-                    <button class="reserve-button" type="submit">Unreserve</button>
+                    <input type="text" name="reserver_name" value="{{ item.reserver_name }}" readonly>
+                    <button type="submit" class="reserve-button">Unreserve</button>
                 </form>
             </div>
             <img src="{{ item.image }}" alt="{{ item.name }}">
         </li>
         <hr>
-    {% endfor %}
+        {% endfor %}
     </ul>
 
     <script>
-        // Toggle display of reserved items
-        document.querySelector('h3').addEventListener('click', function() {
+        function toggleReservedItems() {
             const reservedItems = document.getElementById('reserved-items');
-            reservedItems.style.display = (reservedItems.style.display === 'none') ? 'block' : 'none';
-        });
+            if (reservedItems.style.display === 'none' || reservedItems.style.display === '') {
+                reservedItems.style.display = 'block';
+            } else {
+                reservedItems.style.display = 'none';
+            }
+        }
     </script>
 </body>
+
 </html>
