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

some more css & "no results found"

Browse Source
This commit is contained in:
Valentijn van der Jagt
2025-12-29 23:46:07 +01:00
parent 84773e3363
commit 7fd0eab2c5
2 changed files with 266 additions and 123 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/main/java/nl/herpiederpiee/appie_scraper/BonusManager.java
View File

@@ -53,6 +53,9 @@ public class BonusManager {
} }
list.sort((a, b) -> Integer.compare(b.second, a.second)); list.sort((a, b) -> Integer.compare(b.second, a.second));
if (list.get(0).second.equals(0)){
return new ArrayList<>();
}
ArrayList<BonusItem> top10 = new ArrayList<>(); ArrayList<BonusItem> top10 = new ArrayList<>();
int i = 0; int i = 0;
while (top10.size() < 10) { while (top10.size() < 10) {

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

@@ -2,6 +2,7 @@
<html xmlns:th="http://www.thymeleaf.org"> <html xmlns:th="http://www.thymeleaf.org">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Appie Scraper</title> <title>Appie Scraper</title>
<style> <style>
:root { :root {
@@ -15,6 +16,11 @@
--ah-text: #E6EDF3; --ah-text: #E6EDF3;
--ah-text-secondary: #8B949E; --ah-text-secondary: #8B949E;
--ah-border: #30363D; --ah-border: #30363D;
--spacing-xs: 8px;
--spacing-sm: 12px;
--spacing-md: 16px;
--spacing-lg: 24px;
--spacing-xl: 32px;
} }
* { * {
@@ -23,24 +29,33 @@
box-sizing: border-box; box-sizing: border-box;
} }
html, body {
width: 100%;
height: 100%;
}
body { body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
background: linear-gradient(135deg, var(--ah-dark-bg) 0%, #132236 100%); background: linear-gradient(135deg, var(--ah-dark-bg) 0%, #132236 100%);
color: var(--ah-text); color: var(--ah-text);
padding: 0; padding: 0;
min-height: 100vh; min-height: 100vh;
overflow-x: hidden;
} }
header { header {
background: linear-gradient(90deg, var(--ah-dark-surface) 0%, #1a2634 100%); background: linear-gradient(90deg, var(--ah-dark-surface) 0%, #1a2634 100%);
padding: 28px 40px; padding: var(--spacing-lg);
border-bottom: 3px solid var(--ah-blue); border-bottom: 3px solid var(--ah-blue);
box-shadow: 0 8px 32px rgba(0, 173, 230, 0.15); box-shadow: 0 8px 32px rgba(0, 173, 230, 0.15);
margin-bottom: 40px; margin-bottom: var(--spacing-lg);
position: sticky;
top: 0;
z-index: 100;
} }
h1 { h1 {
font-size: 32px; font-size: clamp(24px, 5vw, 36px);
font-weight: 700; font-weight: 700;
letter-spacing: -0.5px; letter-spacing: -0.5px;
background: linear-gradient(135deg, var(--ah-blue) 0%, var(--ah-blue-light) 100%); background: linear-gradient(135deg, var(--ah-blue) 0%, var(--ah-blue-light) 100%);
@@ -52,11 +67,11 @@
.container { .container {
max-width: 1400px; max-width: 1400px;
margin: 0 auto; margin: 0 auto;
padding: 0 40px; padding: 0 var(--spacing-lg);
} }
.search-container { .search-container {
margin-bottom: 40px; margin-bottom: var(--spacing-xl);
animation: slideDown 0.6s ease-out; animation: slideDown 0.6s ease-out;
} }
@@ -71,13 +86,18 @@
} }
} }
.search-wrapper {
display: flex;
flex-direction: column;
gap: var(--spacing-sm);
}
input[type="text"] { input[type="text"] {
width: 100%; width: 100%;
max-width: 500px; padding: var(--spacing-md);
padding: 14px 18px;
font-size: 15px; font-size: 15px;
border: 2px solid var(--ah-border); border: 2px solid var(--ah-border);
border-radius: 8px; border-radius: 10px;
background: var(--ah-dark-surface-light); background: var(--ah-dark-surface-light);
color: var(--ah-text); color: var(--ah-text);
transition: all 0.3s ease; transition: all 0.3s ease;
@@ -91,116 +111,156 @@
input[type="text"]:focus { input[type="text"]:focus {
outline: none; outline: none;
border-color: var(--ah-blue); 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); 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: 12px;
font-size: 13px; font-size: 13px;
color: var(--ah-text-secondary); color: var(--ah-text-secondary);
font-weight: 500; font-weight: 500;
} }
table { .cards-grid {
width: 100%; display: grid;
border-collapse: collapse; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: var(--spacing-lg);
margin-bottom: var(--spacing-xl);
animation: fadeIn 0.4s ease-out;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.card {
background: var(--ah-dark-surface); background: var(--ah-dark-surface);
border: 1px solid var(--ah-border);
border-radius: 12px; border-radius: 12px;
overflow: hidden; overflow: hidden;
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4); transition: all 0.3s ease;
border: 1px solid var(--ah-border); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
display: flex;
flex-direction: column;
height: 100%;
} }
thead { .card:hover {
background: linear-gradient(90deg, var(--ah-blue) 0%, var(--ah-blue-dark) 100%); transform: translateY(-4px);
box-shadow: 0 12px 32px rgba(0, 173, 230, 0.2);
border-color: var(--ah-blue);
} }
th { .card-image {
padding: 16px 18px; width: 100%;
text-align: left; height: 200px;
color: white;
font-weight: 600;
font-size: 14px;
letter-spacing: 0.3px;
text-transform: uppercase;
}
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: 160px;
height: 160px;
object-fit: cover; object-fit: cover;
border-radius: 8px; background: linear-gradient(135deg, var(--ah-dark-surface-light) 0%, var(--ah-dark-bg) 100%);
border: 1px solid var(--ah-border); transition: transform 0.3s ease;
transition: transform 0.3s ease, box-shadow 0.3s ease;
} }
tbody tr:hover img { .card:hover .card-image {
transform: scale(1.05); transform: scale(1.05);
box-shadow: 0 8px 20px rgba(0, 173, 230, 0.3); }
.card-content {
padding: var(--spacing-lg);
display: flex;
flex-direction: column;
flex: 1;
gap: var(--spacing-md);
}
.card-title {
font-size: 18px;
font-weight: 700;
color: var(--ah-text);
line-height: 1.3;
}
.card-description {
font-size: 13px;
color: var(--ah-text-secondary);
line-height: 1.5;
flex: 1;
}
.card-bonus {
display: inline-block;
padding: var(--spacing-sm) var(--spacing-md);
background: linear-gradient(135deg, rgba(255, 121, 0, 0.15), rgba(255, 121, 0, 0.05));
border: 1px solid rgba(255, 121, 0, 0.3);
border-radius: 6px;
color: var(--ah-orange);
font-weight: 600;
font-size: 12px;
text-align: center;
}
.card-meta {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: var(--spacing-md);
border-top: 1px solid var(--ah-border);
gap: var(--spacing-sm);
flex-wrap: wrap;
}
.card-category {
font-size: 11px;
background: rgba(0, 173, 230, 0.1);
color: var(--ah-blue-light);
padding: 4px 8px;
border-radius: 4px;
text-transform: uppercase;
font-weight: 600;
letter-spacing: 0.3px;
}
.card-link {
margin-left: auto;
} }
a { a {
color: var(--ah-blue-light); color: var(--ah-blue-light);
text-decoration: none; text-decoration: none;
font-weight: 600; font-weight: 600;
font-size: 13px; font-size: 12px;
padding: 8px 12px; padding: 6px 12px;
border-radius: 6px; border-radius: 6px;
transition: all 0.2s ease; transition: all 0.2s ease;
display: inline-block;
background: rgba(0, 173, 230, 0.1); background: rgba(0, 173, 230, 0.1);
display: inline-block;
white-space: nowrap;
} }
a:hover { a:hover {
background: rgba(0, 173, 230, 0.2); background: rgba(0, 173, 230, 0.2);
color: var(--ah-blue-light);
transform: translateX(2px); transform: translateX(2px);
} }
.no-results { .no-results {
text-align: center; text-align: center;
padding: 60px 20px; padding: var(--spacing-xl);
color: var(--ah-text-secondary); color: var(--ah-text-secondary);
font-size: 16px; font-size: 16px;
background: var(--ah-dark-surface); background: var(--ah-dark-surface);
border-radius: 12px; border-radius: 12px;
border: 1px solid var(--ah-border);
} }
.no-results strong { .no-results strong {
color: var(--ah-orange); color: var(--ah-orange);
} }
/* Bonus text highlight in orange */
.bonus-text {
color: var(--ah-orange);
font-weight: 600;
}
/* Scrollbar styling */ /* Scrollbar styling */
::-webkit-scrollbar { ::-webkit-scrollbar {
width: 10px; width: 10px;
height: 10px;
} }
::-webkit-scrollbar-track { ::-webkit-scrollbar-track {
@@ -216,36 +276,127 @@
background: var(--ah-blue-light); background: var(--ah-blue-light);
} }
/* Responsive */ /* Mobile Responsive */
@media (max-width: 768px) { @media (max-width: 768px) {
:root {
--spacing-xs: 6px;
--spacing-sm: 10px;
--spacing-md: 12px;
--spacing-lg: 16px;
--spacing-xl: 20px;
}
header { header {
padding: 16px 20px; padding: var(--spacing-md);
margin-bottom: var(--spacing-lg);
} }
h1 { h1 {
font-size: 24px; font-size: 20px;
} }
.container { .container {
padding: 0 20px; padding: 0 var(--spacing-md);
} }
input[type="text"] { input[type="text"] {
max-width: 100%; font-size: 16px; /* Prevents zoom on iOS */
padding: var(--spacing-sm) var(--spacing-md);
} }
table { .cards-grid {
font-size: 13px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: var(--spacing-md);
margin-bottom: var(--spacing-lg);
} }
th, td { .card-image {
padding: 12px; height: 150px;
} }
img { .card-content {
width: 100px; padding: var(--spacing-md);
height: 100px; gap: var(--spacing-sm);
} }
.card-title {
font-size: 15px;
}
.card-description {
font-size: 12px;
}
.card-meta {
flex-direction: column;
align-items: flex-start;
}
.card-link {
margin-left: 0;
width: 100%;
}
a {
width: 100%;
text-align: center;
padding: var(--spacing-sm);
}
}
@media (max-width: 480px) {
header {
padding: var(--spacing-sm);
}
h1 {
font-size: 18px;
}
.container {
padding: 0 var(--spacing-sm);
}
.cards-grid {
grid-template-columns: 1fr;
gap: var(--spacing-sm);
}
.card-image {
height: 120px;
}
.card-content {
padding: var(--spacing-sm);
}
.card-title {
font-size: 14px;
}
.card-description {
font-size: 11px;
}
.card-bonus {
font-size: 11px;
padding: 4px 8px;
}
input[type="text"] {
padding: 10px 12px;
font-size: 16px;
}
}
/* Loading skeleton */
.card-skeleton {
animation: pulse 1.5s ease-in-out infinite;
}
@keyframes pulse {
0%, 100% { opacity: 0.6; }
50% { opacity: 1; }
} }
</style> </style>
</head> </head>
@@ -258,36 +409,27 @@
<div class="container"> <div class="container">
<div class="search-container"> <div class="search-container">
<input <div class="search-wrapper">
type="text" <input
id="fuzzySearch" type="text"
placeholder="Search bonus items... (real-time)" id="fuzzySearch"
autocomplete="off" placeholder="Search bonus items... (real-time)"
> autocomplete="off"
<div class="search-info"> >
<span id="resultCount">Loading items...</span> <div class="search-info">
<span id="resultCount">Loading items...</span>
</div>
</div> </div>
</div> </div>
<table> <div id="cardsContainer" class="cards-grid">
<thead> <!-- Cards will be inserted here -->
<tr> </div>
<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> </div>
<script> <script>
const searchInput = document.getElementById('fuzzySearch'); const searchInput = document.getElementById('fuzzySearch');
const tableBody = document.getElementById('tableBody'); const cardsContainer = document.getElementById('cardsContainer');
const resultCount = document.getElementById('resultCount'); const resultCount = document.getElementById('resultCount');
let debounceTimer; let debounceTimer;
@@ -322,32 +464,30 @@
function renderResults(results, query) { function renderResults(results, query) {
if (results.length === 0) { if (results.length === 0) {
tableBody.innerHTML = ` cardsContainer.innerHTML = `
<tr> <div style="grid-column: 1 / -1;">
<td colspan="6" class="no-results"> <div class="no-results">
No items found matching "<strong>${escapeHtml(query)}</strong>" No items found matching "<strong>${escapeHtml(query)}</strong>"
</td> </div>
</tr> </div>
`; `;
resultCount.textContent = `0 results for "${query}"`; resultCount.textContent = `0 results for "${query}"`;
return; return;
} }
tableBody.innerHTML = results.map(item => ` cardsContainer.innerHTML = results.map(item => `
<tr> <div class="card">
<td> <img src="${escapeHtml(item.imageURL)}" alt="${escapeHtml(item.title)}" class="card-image">
<strong>${escapeHtml(item.title)}</strong> <div class="card-content">
</td> <h2 class="card-title">${escapeHtml(item.title)}</h2>
<td>${escapeHtml(item.description)}</td> <p class="card-description">${escapeHtml(item.description)}</p>
<td><span class="bonus-text">${escapeHtml(item.bonusText)}</span></td> <div class="card-bonus">${escapeHtml(item.bonusText)}</div>
<td>${escapeHtml(item.category)}</td> <div class="card-meta">
<td> <span class="card-category">${escapeHtml(item.category)}</span>
<img src="${escapeHtml(item.imageURL)}" alt="${escapeHtml(item.title)}"> <a href="${escapeHtml(item.moreInfoURL)}" target="_blank" class="card-link">View Offer</a>
</td> </div>
<td> </div>
<a href="${escapeHtml(item.moreInfoURL)}" target="_blank">View Offer</a> </div>
</td>
</tr>
`).join(''); `).join('');
resultCount.textContent = `${results.length} item${results.length !== 1 ? 's' : ''} found`; resultCount.textContent = `${results.length} item${results.length !== 1 ? 's' : ''} found`;
@@ -365,4 +505,4 @@
} }
</script> </script>
</body> </body>
</html> </html>