From 84773e3363526f5ddbe782f6f114765fcf1ddf76 Mon Sep 17 00:00:00 2001
From: Valentijn van der Jagt <1119935@hr.nl>
Date: Mon, 29 Dec 2025 23:36:59 +0100
Subject: [PATCH] AI CSS

---
 src/main/resources/templates/index.html | 341 +++++++++++++++++-------
 1 file changed, 246 insertions(+), 95 deletions(-)

diff --git a/src/main/resources/templates/index.html b/src/main/resources/templates/index.html
index 5c63d66..2f7528b 100644
--- a/src/main/resources/templates/index.html
+++ b/src/main/resources/templates/index.html
@@ -4,129 +4,286 @@
     <meta charset="UTF-8">
     <title>Appie Scraper</title>
     <style>
+        :root {
+            --ah-blue: #00ADE6;
+            --ah-blue-dark: #0091B8;
+            --ah-blue-light: #1FC4F0;
+            --ah-orange: #FF7900;
+            --ah-dark-bg: #0D1117;
+            --ah-dark-surface: #161B22;
+            --ah-dark-surface-light: #21262D;
+            --ah-text: #E6EDF3;
+            --ah-text-secondary: #8B949E;
+            --ah-border: #30363D;
+        }
+
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
         body {
-            font-family: Arial, sans-serif;
-            padding: 20px;
-            background-color: #f5f5f5;
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+            background: linear-gradient(135deg, var(--ah-dark-bg) 0%, #132236 100%);
+            color: var(--ah-text);
+            padding: 0;
+            min-height: 100vh;
         }
+
+        header {
+            background: linear-gradient(90deg, var(--ah-dark-surface) 0%, #1a2634 100%);
+            padding: 28px 40px;
+            border-bottom: 3px solid var(--ah-blue);
+            box-shadow: 0 8px 32px rgba(0, 173, 230, 0.15);
+            margin-bottom: 40px;
+        }
+
+        h1 {
+            font-size: 32px;
+            font-weight: 700;
+            letter-spacing: -0.5px;
+            background: linear-gradient(135deg, var(--ah-blue) 0%, var(--ah-blue-light) 100%);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+        }
+
+        .container {
+            max-width: 1400px;
+            margin: 0 auto;
+            padding: 0 40px;
+        }
+
         .search-container {
-            margin-bottom: 20px;
+            margin-bottom: 40px;
+            animation: slideDown 0.6s ease-out;
         }
+
+        @keyframes slideDown {
+            from {
+                opacity: 0;
+                transform: translateY(-20px);
+            }
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+
         input[type="text"] {
-            padding: 8px;
-            width: 300px;
-            font-size: 14px;
-            border: 2px solid #ddd;
-            border-radius: 4px;
-            transition: border-color 0.3s;
+            width: 100%;
+            max-width: 500px;
+            padding: 14px 18px;
+            font-size: 15px;
+            border: 2px solid var(--ah-border);
+            border-radius: 8px;
+            background: var(--ah-dark-surface-light);
+            color: var(--ah-text);
+            transition: all 0.3s ease;
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
         }
+
+        input[type="text"]::placeholder {
+            color: var(--ah-text-secondary);
+        }
+
         input[type="text"]:focus {
             outline: none;
-            border-color: #4CAF50;
+            border-color: var(--ah-blue);
+            background: var(--ah-dark-surface-light);
+            box-shadow: 0 0 0 3px rgba(0, 173, 230, 0.25), 0 4px 12px rgba(0, 0, 0, 0.3);
         }
+
         .search-info {
-            margin-top: 10px;
-            font-size: 12px;
-            color: #666;
+            margin-top: 12px;
+            font-size: 13px;
+            color: var(--ah-text-secondary);
+            font-weight: 500;
         }
+
         table {
             width: 100%;
             border-collapse: collapse;
-            background-color: white;
-            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+            background: var(--ah-dark-surface);
+            border-radius: 12px;
+            overflow: hidden;
+            box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
+            border: 1px solid var(--ah-border);
         }
-        th, td {
-            padding: 12px;
-            text-align: left;
-            border-bottom: 1px solid #ddd;
+
+        thead {
+            background: linear-gradient(90deg, var(--ah-blue) 0%, var(--ah-blue-dark) 100%);
         }
+
         th {
-            background-color: #4CAF50;
+            padding: 16px 18px;
+            text-align: left;
             color: white;
-            font-weight: bold;
+            font-weight: 600;
+            font-size: 14px;
+            letter-spacing: 0.3px;
+            text-transform: uppercase;
         }
-        tr:hover {
-            background-color: #f9f9f9;
+
+        td {
+            padding: 16px 18px;
+            border-bottom: 1px solid var(--ah-border);
+            color: var(--ah-text);
+            font-size: 14px;
         }
+
+        tbody tr {
+            transition: all 0.2s ease;
+        }
+
+        tbody tr:hover {
+            background: var(--ah-dark-surface-light);
+            box-shadow: inset 0 0 0 1px var(--ah-blue);
+        }
+
+        tbody tr:last-child td {
+            border-bottom: none;
+        }
+
         img {
-            width: 200px;
-            height: 200px;
+            width: 160px;
+            height: 160px;
             object-fit: cover;
-            border-radius: 4px;
+            border-radius: 8px;
+            border: 1px solid var(--ah-border);
+            transition: transform 0.3s ease, box-shadow 0.3s ease;
         }
+
+        tbody tr:hover img {
+            transform: scale(1.05);
+            box-shadow: 0 8px 20px rgba(0, 173, 230, 0.3);
+        }
+
         a {
-            color: #4CAF50;
+            color: var(--ah-blue-light);
             text-decoration: none;
-            font-weight: bold;
+            font-weight: 600;
+            font-size: 13px;
+            padding: 8px 12px;
+            border-radius: 6px;
+            transition: all 0.2s ease;
+            display: inline-block;
+            background: rgba(0, 173, 230, 0.1);
         }
+
         a:hover {
-            text-decoration: underline;
+            background: rgba(0, 173, 230, 0.2);
+            color: var(--ah-blue-light);
+            transform: translateX(2px);
         }
+
         .no-results {
             text-align: center;
-            padding: 40px;
-            color: #999;
+            padding: 60px 20px;
+            color: var(--ah-text-secondary);
             font-size: 16px;
+            background: var(--ah-dark-surface);
+            border-radius: 12px;
         }
-        .score-badge {
-            display: inline-block;
-            background-color: #4CAF50;
-            color: white;
-            padding: 2px 8px;
-            border-radius: 4px;
-            font-size: 12px;
-            font-weight: bold;
-            margin-left: 8px;
+
+        .no-results strong {
+            color: var(--ah-orange);
         }
-        .score-badge.medium {
-            background-color: #ff9800;
+
+        /* Bonus text highlight in orange */
+        .bonus-text {
+            color: var(--ah-orange);
+            font-weight: 600;
         }
-        .score-badge.low {
-            background-color: #f44336;
+
+        /* Scrollbar styling */
+        ::-webkit-scrollbar {
+            width: 10px;
+            height: 10px;
+        }
+
+        ::-webkit-scrollbar-track {
+            background: var(--ah-dark-bg);
+        }
+
+        ::-webkit-scrollbar-thumb {
+            background: var(--ah-blue);
+            border-radius: 5px;
+        }
+
+        ::-webkit-scrollbar-thumb:hover {
+            background: var(--ah-blue-light);
+        }
+
+        /* Responsive */
+        @media (max-width: 768px) {
+            header {
+                padding: 16px 20px;
+            }
+
+            h1 {
+                font-size: 24px;
+            }
+
+            .container {
+                padding: 0 20px;
+            }
+
+            input[type="text"] {
+                max-width: 100%;
+            }
+
+            table {
+                font-size: 13px;
+            }
+
+            th, td {
+                padding: 12px;
+            }
+
+            img {
+                width: 100px;
+                height: 100px;
+            }
         }
     </style>
 </head>
 <body>
-<h1>Appie Bonus Items</h1>
-
-<div class="search-container">
-    <input
-            type="text"
-            id="fuzzySearch"
-            placeholder="Search items... (real-time)"
-            autocomplete="off"
-    >
-    <div class="search-info">
-        <span id="resultCount">Showing all items</span>
+<header>
+    <div class="container">
+        <h1>🛒 Appie Bonus Tracker</h1>
     </div>
-</div>
+</header>
 
-<table>
-    <thead>
-    <tr>
-        <th>Name</th>
-        <th>Description</th>
-        <th>Bonus Text</th>
-        <th>Category</th>
-        <th>Image</th>
-        <th>More Info</th>
-    </tr>
-    </thead>
-    <tbody id="tableBody">
-    <tr th:each="item : ${items}">
-        <td th:text="${item.title}">Item Name</td>
-        <td th:text="${item.description}">Description</td>
-        <td th:text="${item.bonusText}">Bonus Text</td>
-        <td th:text="${item.category}">Category</td>
-        <td>
-            <img th:src="${item.imageURL}" th:alt="${item.title}" width="200" height="200">
-        </td>
-        <td>
-            <a th:href="${item.moreInfoURL}" target="_blank">here</a>
-        </td>
-    </tr>
-    </tbody>
-</table>
+<div class="container">
+    <div class="search-container">
+        <input
+                type="text"
+                id="fuzzySearch"
+                placeholder="Search bonus items... (real-time)"
+                autocomplete="off"
+        >
+        <div class="search-info">
+            <span id="resultCount">Loading items...</span>
+        </div>
+    </div>
+
+    <table>
+        <thead>
+        <tr>
+            <th>Product Name</th>
+            <th>Description</th>
+            <th>Bonus Offer</th>
+            <th>Category</th>
+            <th>Image</th>
+            <th>More Details</th>
+        </tr>
+        </thead>
+        <tbody id="tableBody">
+        </tbody>
+    </table>
+</div>
 
 <script>
     const searchInput = document.getElementById('fuzzySearch');
@@ -143,7 +300,7 @@
         const query = e.target.value.trim();
 
         debounceTimer = setTimeout(() => {
-            performFuzzySearch(query);  // Always call API, even for empty string
+            performFuzzySearch(query);
         }, 300);
     });
 
@@ -179,27 +336,21 @@
         tableBody.innerHTML = results.map(item => `
             <tr>
                 <td>
-                    ${escapeHtml(item.title)}
+                    <strong>${escapeHtml(item.title)}</strong>
                 </td>
                 <td>${escapeHtml(item.description)}</td>
-                <td>${escapeHtml(item.bonusText)}</td>
+                <td><span class="bonus-text">${escapeHtml(item.bonusText)}</span></td>
                 <td>${escapeHtml(item.category)}</td>
                 <td>
-                    <img src="${escapeHtml(item.imageURL)}" alt="${escapeHtml(item.title)}" width="200" height="200">
+                    <img src="${escapeHtml(item.imageURL)}" alt="${escapeHtml(item.title)}">
                 </td>
                 <td>
-                    <a href="${escapeHtml(item.moreInfoURL)}" target="_blank">here</a>
+                    <a href="${escapeHtml(item.moreInfoURL)}" target="_blank">View Offer</a>
                 </td>
             </tr>
         `).join('');
 
-        resultCount.textContent = `${results.length} result${results.length !== 1 ? 's' : ''} for "${query}"`;
-    }
-
-    function getScoreBadgeClass(score) {
-        if (score >= 90) return '';          // Green (default)
-        if (score >= 70) return 'medium';    // Orange
-        return 'low';                        // Red
+        resultCount.textContent = `${results.length} item${results.length !== 1 ? 's' : ''} found`;
     }
 
     function escapeHtml(text) {