AI CSS

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;
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
-            padding: 20px;
+            background: linear-gradient(135deg, var(--ah-dark-bg) 0%, #132236 100%);
-            background-color: #f5f5f5;
+            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: 100%;
-            width: 300px;
+            max-width: 500px;
-            font-size: 14px;
+            padding: 14px 18px;
-            border: 2px solid #ddd;
+            font-size: 15px;
-            border-radius: 4px;
+            border: 2px solid var(--ah-border);
-            transition: border-color 0.3s;
+            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;
+            margin-top: 12px;
-            font-size: 12px;
+            font-size: 13px;
-            color: #666;
+            color: var(--ah-text-secondary);
+            font-weight: 500;
         }
+
         table {
             width: 100%;
             border-collapse: collapse;
-            background-color: white;
+            background: var(--ah-dark-surface);
-            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+            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;
+        thead {
-            text-align: left;
+            background: linear-gradient(90deg, var(--ah-blue) 0%, var(--ah-blue-dark) 100%);
-            border-bottom: 1px solid #ddd;
         }
+
         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;
+            width: 160px;
-            height: 200px;
+            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;
+            padding: 60px 20px;
-            color: #999;
+            color: var(--ah-text-secondary);
             font-size: 16px;
+            background: var(--ah-dark-surface);
+            border-radius: 12px;
         }
-        .score-badge {
+
-            display: inline-block;
+        .no-results strong {
-            background-color: #4CAF50;
+            color: var(--ah-orange);
-            color: white;
-            padding: 2px 8px;
-            border-radius: 4px;
-            font-size: 12px;
-            font-weight: bold;
-            margin-left: 8px;
         }
-        .score-badge.medium {
+
-            background-color: #ff9800;
+        /* Bonus text highlight in orange */
+        .bonus-text {
+            color: var(--ah-orange);
+            font-weight: 600;
+        }
+
+        /* 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;
             }
-        .score-badge.low {
-            background-color: #f44336;
         }
     </style>
 </head>
 <body>
-<h1>Appie Bonus Items</h1>
+<header>
+    <div class="container">
+        <h1>🛒 Appie Bonus Tracker</h1>
+    </div>
+</header>
 
-<div class="search-container">
+<div class="container">
+    <div class="search-container">
         <input
                 type="text"
                 id="fuzzySearch"
-            placeholder="Search items... (real-time)"
+                placeholder="Search bonus items... (real-time)"
                 autocomplete="off"
         >
         <div class="search-info">
-        <span id="resultCount">Showing all items</span>
+            <span id="resultCount">Loading items...</span>
+        </div>
     </div>
-</div>
 
-<table>
+    <table>
         <thead>
         <tr>
-        <th>Name</th>
+            <th>Product Name</th>
             <th>Description</th>
-        <th>Bonus Text</th>
+            <th>Bonus Offer</th>
             <th>Category</th>
             <th>Image</th>
-        <th>More Info</th>
+            <th>More Details</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>
+    </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}"`;
+        resultCount.textContent = `${results.length} item${results.length !== 1 ? 's' : ''} found`;
-    }
-
-    function getScoreBadgeClass(score) {
-        if (score >= 90) return '';          // Green (default)
-        if (score >= 70) return 'medium';    // Orange
-        return 'low';                        // Red
     }
 
     function escapeHtml(text) {