valentijn/Appie-Bonus-Scraper
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

AI CSS

Browse Source
This commit is contained in:
Valentijn van der Jagt
2025-12-29 23:36:59 +01:00
parent 4f7abb6b04
commit 84773e3363
1 changed files with 246 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files

341
src/main/resources/templates/index.html
View File

@@ -4,129 +4,286 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Appie Scraper</title> <title>Appie Scraper</title>
<style> <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 { 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 { .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"] { 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 { input[type="text"]:focus {
outline: none; 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 { .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 { table {
width: 100%; width: 100%;
border-collapse: collapse; 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 { th {
background-color: #4CAF50; padding: 16px 18px;
text-align: left;
color: white; 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 { img {
width: 200px; width: 160px;
height: 200px; height: 160px;
object-fit: cover; 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 { a {
color: #4CAF50; color: var(--ah-blue-light);
text-decoration: none; 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 { a:hover {
text-decoration: underline; background: rgba(0, 173, 230, 0.2);
color: var(--ah-blue-light);
transform: translateX(2px);
} }
.no-results { .no-results {
text-align: center; text-align: center;
padding: 40px; padding: 60px 20px;
color: #999; color: var(--ah-text-secondary);
font-size: 16px; 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;
} }
.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> </style>
</head> </head>
<body> <body>
<h1>Appie Bonus Items</h1> <header>
<div class="container">
<div class="search-container"> <h1>🛒 Appie Bonus Tracker</h1>
<input
type="text"
id="fuzzySearch"
placeholder="Search items... (real-time)"
autocomplete="off"
>
<div class="search-info">
<span id="resultCount">Showing all items</span>
</div> </div>
</div> </header>
<table> <div class="container">
<thead> <div class="search-container">
<tr> <input
<th>Name</th> type="text"
<th>Description</th> id="fuzzySearch"
<th>Bonus Text</th> placeholder="Search bonus items... (real-time)"
<th>Category</th> autocomplete="off"
<th>Image</th> >
<th>More Info</th> <div class="search-info">
</tr> <span id="resultCount">Loading items...</span>
</thead> </div>
<tbody id="tableBody"> </div>
<tr th:each="item : ${items}">
<td th:text="${item.title}">Item Name</td> <table>
<td th:text="${item.description}">Description</td> <thead>
<td th:text="${item.bonusText}">Bonus Text</td> <tr>
<td th:text="${item.category}">Category</td> <th>Product Name</th>
<td> <th>Description</th>
<img th:src="${item.imageURL}" th:alt="${item.title}" width="200" height="200"> <th>Bonus Offer</th>
</td> <th>Category</th>
<td> <th>Image</th>
<a th:href="${item.moreInfoURL}" target="_blank">here</a> <th>More Details</th>
</td> </tr>
</tr> </thead>
</tbody> <tbody id="tableBody">
</table> </tbody>
</table>
</div>
<script> <script>
const searchInput = document.getElementById('fuzzySearch'); const searchInput = document.getElementById('fuzzySearch');
@@ -143,7 +300,7 @@
const query = e.target.value.trim(); const query = e.target.value.trim();
debounceTimer = setTimeout(() => { debounceTimer = setTimeout(() => {
performFuzzySearch(query); // Always call API, even for empty string performFuzzySearch(query);
}, 300); }, 300);
}); });
@@ -179,27 +336,21 @@
tableBody.innerHTML = results.map(item => ` tableBody.innerHTML = results.map(item => `
<tr> <tr>
<td> <td>
${escapeHtml(item.title)} <strong>${escapeHtml(item.title)}</strong>
</td> </td>
<td>${escapeHtml(item.description)}</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>${escapeHtml(item.category)}</td>
<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>
<td> <td>
<a href="${escapeHtml(item.moreInfoURL)}" target="_blank">here</a> <a href="${escapeHtml(item.moreInfoURL)}" target="_blank">View Offer</a>
</td> </td>
</tr> </tr>
`).join(''); `).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) { function escapeHtml(text) {