Add Payfrit User Portal — scanner, dashboard, compare pages
Consumer-facing portal with mobile-first design: - scan.html: Barcode scanner with product search, health score ring animation, and healthier alternatives display - dashboard.html: User dashboard with recent scans, health trends chart, favorites grid, Connected Apps section, and settings - compare.html: Side-by-side product comparison with winner banner, nutrition breakdown, and ingredient highlights - products.json: Sample product data with scores, descriptions, and alternatives Connected Apps section lets users manage third-party integrations (Apple Health, MyFitnessPal, Google Fit, etc.) with permission controls. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
commit
f8ea11601e
4 changed files with 2431 additions and 0 deletions
773
compare.html
Normal file
773
compare.html
Normal file
|
|
@ -0,0 +1,773 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Compare Products — Payfrit</title>
|
||||
<style>
|
||||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
|
||||
:root {
|
||||
--bg: #0f1117;
|
||||
--card: #1a1d27;
|
||||
--card2: #1e2130;
|
||||
--border: #2a2e3e;
|
||||
--accent: #6c63ff;
|
||||
--accent2: #00c9a7;
|
||||
--text: #f0f0f5;
|
||||
--muted: #8b8fa8;
|
||||
--red: #ff5c5c;
|
||||
--yellow: #f5a623;
|
||||
--green: #00c9a7;
|
||||
--radius: 16px;
|
||||
--font: 'Segoe UI', system-ui, -apple-system, sans-serif;
|
||||
}
|
||||
|
||||
body {
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
font-family: var(--font);
|
||||
min-height: 100vh;
|
||||
padding-bottom: 40px;
|
||||
}
|
||||
|
||||
/* ── Header ── */
|
||||
.header {
|
||||
background: var(--card);
|
||||
border-bottom: 1px solid var(--border);
|
||||
padding: 16px 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
}
|
||||
.header .logo {
|
||||
font-size: 1.3rem;
|
||||
font-weight: 800;
|
||||
background: linear-gradient(135deg, var(--accent), var(--accent2));
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
.header .subtitle {
|
||||
font-size: 0.8rem;
|
||||
color: var(--muted);
|
||||
margin-top: 1px;
|
||||
}
|
||||
|
||||
/* ── Main wrapper ── */
|
||||
.main { padding: 20px 16px; max-width: 680px; margin: 0 auto; }
|
||||
|
||||
/* ── Selector section ── */
|
||||
.selector-section { margin-bottom: 24px; }
|
||||
.selector-section h2 {
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
color: var(--muted);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
.selectors {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto 1fr;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
.vs-badge {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 800;
|
||||
color: var(--muted);
|
||||
background: var(--card2);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 50px;
|
||||
padding: 6px 10px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.product-slot {
|
||||
background: var(--card);
|
||||
border: 2px dashed var(--border);
|
||||
border-radius: var(--radius);
|
||||
padding: 14px;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.2s, background 0.2s;
|
||||
text-align: center;
|
||||
min-height: 90px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
position: relative;
|
||||
}
|
||||
.product-slot:hover { border-color: var(--accent); }
|
||||
.product-slot.filled {
|
||||
border-style: solid;
|
||||
border-color: var(--accent);
|
||||
background: var(--card2);
|
||||
text-align: left;
|
||||
align-items: flex-start;
|
||||
}
|
||||
.product-slot .slot-emoji { font-size: 1.8rem; }
|
||||
.product-slot .slot-prompt { font-size: 0.85rem; color: var(--muted); }
|
||||
.product-slot .slot-name { font-size: 0.95rem; font-weight: 700; line-height: 1.3; }
|
||||
.product-slot .slot-brand { font-size: 0.75rem; color: var(--muted); margin-top: 2px; }
|
||||
.product-slot .slot-score {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 700;
|
||||
border-radius: 20px;
|
||||
padding: 2px 8px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
.product-slot .clear-btn {
|
||||
position: absolute;
|
||||
top: 8px; right: 8px;
|
||||
background: var(--border);
|
||||
border: none;
|
||||
color: var(--muted);
|
||||
border-radius: 50%;
|
||||
width: 22px; height: 22px;
|
||||
font-size: 0.75rem;
|
||||
cursor: pointer;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
.product-slot .clear-btn:hover { background: var(--red); color: #fff; }
|
||||
|
||||
/* ── Compare CTA ── */
|
||||
.compare-cta {
|
||||
margin-top: 16px;
|
||||
text-align: center;
|
||||
}
|
||||
.compare-btn {
|
||||
background: linear-gradient(135deg, var(--accent), #8b83ff);
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 50px;
|
||||
padding: 14px 36px;
|
||||
font-size: 1rem;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
transition: opacity 0.2s, transform 0.1s;
|
||||
}
|
||||
.compare-btn:hover:not(:disabled) { opacity: 0.9; transform: translateY(-1px); }
|
||||
.compare-btn:active:not(:disabled) { transform: translateY(0); }
|
||||
.compare-btn:disabled { opacity: 0.35; cursor: not-allowed; }
|
||||
|
||||
/* ── Product picker modal ── */
|
||||
.modal-overlay {
|
||||
position: fixed; inset: 0;
|
||||
background: rgba(0,0,0,0.75);
|
||||
backdrop-filter: blur(4px);
|
||||
z-index: 200;
|
||||
display: none;
|
||||
align-items: flex-end;
|
||||
justify-content: center;
|
||||
}
|
||||
.modal-overlay.open { display: flex; }
|
||||
.modal {
|
||||
background: var(--card);
|
||||
border-radius: 24px 24px 0 0;
|
||||
border: 1px solid var(--border);
|
||||
width: 100%;
|
||||
max-width: 680px;
|
||||
max-height: 70vh;
|
||||
overflow-y: auto;
|
||||
padding: 24px 16px 32px;
|
||||
animation: slideUp 0.25s ease;
|
||||
}
|
||||
@keyframes slideUp {
|
||||
from { transform: translateY(100%); opacity: 0; }
|
||||
to { transform: translateY(0); opacity: 1; }
|
||||
}
|
||||
.modal-handle {
|
||||
width: 40px; height: 4px;
|
||||
background: var(--border);
|
||||
border-radius: 2px;
|
||||
margin: 0 auto 20px;
|
||||
}
|
||||
.modal h3 {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 16px;
|
||||
text-align: center;
|
||||
}
|
||||
.picker-list { display: flex; flex-direction: column; gap: 10px; }
|
||||
.picker-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
background: var(--card2);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 12px;
|
||||
padding: 12px 14px;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.2s, background 0.2s;
|
||||
}
|
||||
.picker-item:hover { border-color: var(--accent); background: #252840; }
|
||||
.picker-item.disabled { opacity: 0.35; pointer-events: none; }
|
||||
.picker-item .p-emoji { font-size: 1.6rem; flex-shrink: 0; }
|
||||
.picker-item .p-info { flex: 1; min-width: 0; }
|
||||
.picker-item .p-name { font-size: 0.95rem; font-weight: 600; }
|
||||
.picker-item .p-brand { font-size: 0.8rem; color: var(--muted); margin-top: 2px; }
|
||||
.picker-item .p-cat {
|
||||
font-size: 0.7rem;
|
||||
background: var(--border);
|
||||
border-radius: 20px;
|
||||
padding: 2px 7px;
|
||||
color: var(--muted);
|
||||
margin-top: 4px;
|
||||
display: inline-block;
|
||||
}
|
||||
.picker-score {
|
||||
font-size: 0.9rem;
|
||||
font-weight: 800;
|
||||
border-radius: 8px;
|
||||
padding: 4px 8px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* ── Comparison result ── */
|
||||
.comparison { display: none; margin-top: 10px; }
|
||||
.comparison.visible { display: block; }
|
||||
|
||||
.winner-banner {
|
||||
background: linear-gradient(135deg, rgba(108,99,255,0.15), rgba(0,201,167,0.15));
|
||||
border: 1px solid rgba(0,201,167,0.3);
|
||||
border-radius: var(--radius);
|
||||
padding: 16px 20px;
|
||||
text-align: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.winner-banner .trophy { font-size: 2rem; display: block; margin-bottom: 6px; }
|
||||
.winner-banner .winner-label { font-size: 0.75rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; }
|
||||
.winner-banner .winner-name { font-size: 1.2rem; font-weight: 800; margin-top: 4px; }
|
||||
.winner-banner .winner-reason { font-size: 0.82rem; color: var(--muted); margin-top: 6px; line-height: 1.5; }
|
||||
|
||||
/* Side-by-side grid */
|
||||
.compare-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 10px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.product-card {
|
||||
background: var(--card);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
padding: 16px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.product-card.winner { border-color: var(--green); }
|
||||
.product-card.winner::after {
|
||||
content: 'WINNER';
|
||||
position: absolute;
|
||||
top: 10px; right: -22px;
|
||||
background: var(--green);
|
||||
color: #000;
|
||||
font-size: 0.55rem;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.08em;
|
||||
padding: 3px 28px;
|
||||
transform: rotate(35deg);
|
||||
}
|
||||
|
||||
.product-card .card-emoji { font-size: 2.2rem; display: block; margin-bottom: 10px; }
|
||||
.product-card .card-name { font-size: 0.9rem; font-weight: 700; line-height: 1.3; }
|
||||
.product-card .card-brand { font-size: 0.75rem; color: var(--muted); margin-top: 3px; }
|
||||
.product-card .card-size { font-size: 0.7rem; color: var(--muted); margin-top: 2px; }
|
||||
|
||||
.score-display {
|
||||
margin: 14px 0 10px;
|
||||
text-align: center;
|
||||
}
|
||||
.score-circle {
|
||||
width: 56px; height: 56px;
|
||||
border-radius: 50%;
|
||||
border: 3px solid;
|
||||
display: flex; flex-direction: column;
|
||||
align-items: center; justify-content: center;
|
||||
margin: 0 auto 6px;
|
||||
}
|
||||
.score-circle .num { font-size: 1.2rem; font-weight: 900; line-height: 1; }
|
||||
.score-circle .denom { font-size: 0.55rem; color: var(--muted); }
|
||||
.score-bar-wrap {
|
||||
background: var(--border);
|
||||
border-radius: 4px;
|
||||
height: 6px;
|
||||
overflow: hidden;
|
||||
margin-top: 8px;
|
||||
}
|
||||
.score-bar {
|
||||
height: 100%;
|
||||
border-radius: 4px;
|
||||
transition: width 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||
}
|
||||
.score-label { font-size: 0.7rem; color: var(--muted); margin-top: 6px; line-height: 1.4; text-align: center; }
|
||||
|
||||
/* Stat rows */
|
||||
.stat-section { margin-top: 12px; }
|
||||
.stat-section h4 { font-size: 0.7rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 8px; }
|
||||
.stat-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: 0.78rem;
|
||||
padding: 5px 0;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
.stat-row:last-child { border-bottom: none; }
|
||||
.stat-row .label { color: var(--muted); }
|
||||
.stat-row .value { font-weight: 600; }
|
||||
.stat-row .badge {
|
||||
font-size: 0.65rem;
|
||||
border-radius: 20px;
|
||||
padding: 1px 6px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
/* Ingredient tags */
|
||||
.ingredients { margin-top: 10px; }
|
||||
.ingredients h4 { font-size: 0.7rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 8px; }
|
||||
.tag-list { display: flex; flex-wrap: wrap; gap: 5px; }
|
||||
.tag {
|
||||
font-size: 0.68rem;
|
||||
border-radius: 20px;
|
||||
padding: 3px 8px;
|
||||
background: var(--border);
|
||||
color: var(--muted);
|
||||
}
|
||||
.tag.good { background: rgba(0,201,167,0.15); color: var(--green); }
|
||||
.tag.bad { background: rgba(255,92,92,0.15); color: var(--red); }
|
||||
|
||||
/* Full-width breakdown rows */
|
||||
.breakdown-section { margin-bottom: 16px; }
|
||||
.breakdown-section h3 {
|
||||
font-size: 0.8rem;
|
||||
color: var(--muted);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.breakdown-row {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto 1fr;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 10px 0;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
.breakdown-row:last-child { border-bottom: none; }
|
||||
.breakdown-row .left { text-align: right; }
|
||||
.breakdown-row .right { text-align: left; }
|
||||
.breakdown-row .metric-name {
|
||||
font-size: 0.72rem;
|
||||
color: var(--muted);
|
||||
text-align: center;
|
||||
font-weight: 600;
|
||||
}
|
||||
.breakdown-row .val {
|
||||
font-size: 0.85rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
.breakdown-row .val.win { color: var(--green); }
|
||||
.breakdown-row .val.lose { color: var(--red); opacity: 0.7; }
|
||||
|
||||
/* Score color helpers */
|
||||
.score-red { color: var(--red); border-color: var(--red); }
|
||||
.score-yellow{ color: var(--yellow); border-color: var(--yellow); }
|
||||
.score-green { color: var(--green); border-color: var(--green); }
|
||||
.bar-red { background: var(--red); }
|
||||
.bar-yellow { background: var(--yellow); }
|
||||
.bar-green { background: var(--green); }
|
||||
.badge-red { background: rgba(255,92,92,0.15); color: var(--red); }
|
||||
.badge-yellow { background: rgba(245,166,35,0.15); color: var(--yellow); }
|
||||
.badge-green { background: rgba(0,201,167,0.15); color: var(--green); }
|
||||
|
||||
/* Reset btn */
|
||||
.reset-btn {
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin-top: 24px;
|
||||
background: var(--card);
|
||||
border: 1px solid var(--border);
|
||||
color: var(--muted);
|
||||
border-radius: 50px;
|
||||
padding: 12px;
|
||||
font-size: 0.9rem;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.2s, color 0.2s;
|
||||
}
|
||||
.reset-btn:hover { border-color: var(--accent); color: var(--text); }
|
||||
|
||||
/* Scrollbar */
|
||||
::-webkit-scrollbar { width: 6px; }
|
||||
::-webkit-scrollbar-track { background: transparent; }
|
||||
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- Header -->
|
||||
<header class="header">
|
||||
<div>
|
||||
<div class="logo">Payfrit</div>
|
||||
<div class="subtitle">Product Compare</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Main -->
|
||||
<main class="main">
|
||||
|
||||
<!-- Selectors -->
|
||||
<section class="selector-section">
|
||||
<h2>Choose Two Products</h2>
|
||||
<div class="selectors">
|
||||
<div class="product-slot" id="slot-a" onclick="openPicker('a')">
|
||||
<span class="slot-emoji">➕</span>
|
||||
<span class="slot-prompt">Tap to pick product A</span>
|
||||
</div>
|
||||
<div class="vs-badge">VS</div>
|
||||
<div class="product-slot" id="slot-b" onclick="openPicker('b')">
|
||||
<span class="slot-emoji">➕</span>
|
||||
<span class="slot-prompt">Tap to pick product B</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="compare-cta">
|
||||
<button class="compare-btn" id="compare-btn" onclick="runComparison()" disabled>
|
||||
Compare Products
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Comparison result -->
|
||||
<section class="comparison" id="comparison">
|
||||
|
||||
<!-- Winner banner -->
|
||||
<div class="winner-banner" id="winner-banner">
|
||||
<span class="trophy">🏆</span>
|
||||
<div class="winner-label">Healthier Choice</div>
|
||||
<div class="winner-name" id="winner-name"></div>
|
||||
<div class="winner-reason" id="winner-reason"></div>
|
||||
</div>
|
||||
|
||||
<!-- Side by side cards -->
|
||||
<div class="compare-grid" id="compare-grid">
|
||||
<!-- Populated by JS -->
|
||||
</div>
|
||||
|
||||
<!-- Head-to-head breakdown -->
|
||||
<div class="breakdown-section">
|
||||
<h3>Head-to-Head Breakdown</h3>
|
||||
<div id="breakdown-rows"></div>
|
||||
</div>
|
||||
|
||||
<!-- Reset -->
|
||||
<button class="reset-btn" onclick="resetAll()">↩ Compare Different Products</button>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
|
||||
<!-- Product Picker Modal -->
|
||||
<div class="modal-overlay" id="modal" onclick="closePickerOnOverlay(event)">
|
||||
<div class="modal">
|
||||
<div class="modal-handle"></div>
|
||||
<h3 id="modal-title">Pick a Product</h3>
|
||||
<div class="picker-list" id="picker-list"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// ── State ──────────────────────────────────────────────
|
||||
let allProducts = [];
|
||||
let selectedA = null;
|
||||
let selectedB = null;
|
||||
let activePicker = null; // 'a' | 'b'
|
||||
|
||||
// ── Mock ingredient data (keyed by product id) ─────────
|
||||
const INGREDIENTS = {
|
||||
p001: {
|
||||
positives: ['Vitamin C', 'Potassium', 'No preservatives'],
|
||||
negatives: ['High sugar', 'Pasteurized']
|
||||
},
|
||||
p002: {
|
||||
positives: ['Potatoes', 'Sunflower oil'],
|
||||
negatives: ['High sodium', 'Saturated fat', 'Artificial flavors']
|
||||
},
|
||||
p003: {
|
||||
positives: ['Whole grains', 'Organic seeds', 'High fiber', 'No HFCS'],
|
||||
negatives: ['Some added sugar']
|
||||
},
|
||||
p004: {
|
||||
positives: ['Live cultures', 'High protein', 'Calcium'],
|
||||
negatives: ['Added sugar', 'Artificial fruit flavor']
|
||||
},
|
||||
p005: {
|
||||
positives: ['Whole wheat', 'Iron', 'Fiber'],
|
||||
negatives: ['Sugar coating', 'Processed', 'Low protein']
|
||||
}
|
||||
};
|
||||
|
||||
// Mock nutrition data per product
|
||||
const NUTRITION = {
|
||||
p001: { calories: 110, sugar: '22g', sodium: '0mg', fiber: '0g', protein: '1g' },
|
||||
p002: { calories: 160, sugar: '1g', sodium: '170mg', fiber: '1g', protein: '2g' },
|
||||
p003: { calories: 120, sugar: '5g', sodium: '170mg', fiber: '3g', protein: '5g' },
|
||||
p004: { calories: 130, sugar: '12g', sodium: '65mg', fiber: '0g', protein: '11g' },
|
||||
p005: { calories: 180, sugar: '11g', sodium: '5mg', fiber: '5g', protein: '5g' }
|
||||
};
|
||||
|
||||
// ── Load products ──────────────────────────────────────
|
||||
async function loadProducts() {
|
||||
try {
|
||||
const res = await fetch('products.json');
|
||||
const data = await res.json();
|
||||
allProducts = data.products;
|
||||
} catch (e) {
|
||||
// Fallback static data if fetch fails (e.g. file:// protocol)
|
||||
allProducts = [
|
||||
{ id:'p001', name:'Orange Juice Original', brand:'Tropicana', category:'Beverages', size:'52 fl oz', emoji:'🥤', score:4.5, scoreDesc:'High sugar content.' },
|
||||
{ id:'p002', name:'Classic Potato Chips', brand:"Lay's", category:'Snacks', size:'8 oz', emoji:'🥔', score:3.2, scoreDesc:'High sodium & fat.' },
|
||||
{ id:'p003', name:'Whole Grain Bread', brand:"Dave's Killer Bread", category:'Bakery', size:'27 oz', emoji:'🍞', score:8.2, scoreDesc:'Excellent fiber & protein.' },
|
||||
{ id:'p004', name:'Greek Yogurt Strawberry', brand:'Chobani', category:'Dairy', size:'5.3 oz', emoji:'🫙', score:7.1, scoreDesc:'Good protein, some added sugar.' },
|
||||
{ id:'p005', name:'Frosted Mini-Wheats', brand:"Kellogg's", category:'Cereal', size:'18 oz', emoji:'🌾', score:5.8, scoreDesc:'Good fiber, sugar coating.' }
|
||||
];
|
||||
}
|
||||
}
|
||||
|
||||
// ── Score helpers ──────────────────────────────────────
|
||||
function scoreClass(s) {
|
||||
if (s >= 7.5) return 'green';
|
||||
if (s >= 5) return 'yellow';
|
||||
return 'red';
|
||||
}
|
||||
function scoreGrade(s) {
|
||||
if (s >= 9) return 'Excellent';
|
||||
if (s >= 7.5) return 'Great';
|
||||
if (s >= 6) return 'Good';
|
||||
if (s >= 4) return 'Fair';
|
||||
return 'Poor';
|
||||
}
|
||||
|
||||
// ── Picker ─────────────────────────────────────────────
|
||||
function openPicker(slot) {
|
||||
activePicker = slot;
|
||||
const modal = document.getElementById('modal');
|
||||
const title = document.getElementById('modal-title');
|
||||
const list = document.getElementById('picker-list');
|
||||
|
||||
title.textContent = slot === 'a' ? 'Pick Product A' : 'Pick Product B';
|
||||
list.innerHTML = '';
|
||||
|
||||
const other = slot === 'a' ? selectedB : selectedA;
|
||||
|
||||
allProducts.forEach(p => {
|
||||
const disabled = other && other.id === p.id;
|
||||
const sc = scoreClass(p.score);
|
||||
const div = document.createElement('div');
|
||||
div.className = 'picker-item' + (disabled ? ' disabled' : '');
|
||||
div.innerHTML = `
|
||||
<span class="p-emoji">${p.emoji}</span>
|
||||
<div class="p-info">
|
||||
<div class="p-name">${p.name}</div>
|
||||
<div class="p-brand">${p.brand}</div>
|
||||
<span class="p-cat">${p.category}</span>
|
||||
</div>
|
||||
<span class="picker-score score-${sc}">${p.score}</span>
|
||||
`;
|
||||
if (!disabled) div.onclick = () => selectProduct(slot, p);
|
||||
list.appendChild(div);
|
||||
});
|
||||
|
||||
modal.classList.add('open');
|
||||
}
|
||||
|
||||
function closeModal() {
|
||||
document.getElementById('modal').classList.remove('open');
|
||||
activePicker = null;
|
||||
}
|
||||
|
||||
function closePickerOnOverlay(e) {
|
||||
if (e.target.id === 'modal') closeModal();
|
||||
}
|
||||
|
||||
function selectProduct(slot, product) {
|
||||
if (slot === 'a') { selectedA = product; }
|
||||
else { selectedB = product; }
|
||||
updateSlotUI(slot, product);
|
||||
closeModal();
|
||||
updateCompareBtn();
|
||||
}
|
||||
|
||||
function updateSlotUI(slot, product) {
|
||||
const el = document.getElementById(`slot-${slot}`);
|
||||
const sc = scoreClass(product.score);
|
||||
el.className = 'product-slot filled';
|
||||
el.onclick = () => openPicker(slot);
|
||||
el.innerHTML = `
|
||||
<button class="clear-btn" onclick="clearSlot(event,'${slot}')">✕</button>
|
||||
<span class="slot-emoji">${product.emoji}</span>
|
||||
<div class="slot-name">${product.name}</div>
|
||||
<div class="slot-brand">${product.brand}</div>
|
||||
<span class="slot-score badge-${sc}">Score: ${product.score}</span>
|
||||
`;
|
||||
}
|
||||
|
||||
function clearSlot(e, slot) {
|
||||
e.stopPropagation();
|
||||
if (slot === 'a') selectedA = null;
|
||||
else selectedB = null;
|
||||
|
||||
const el = document.getElementById(`slot-${slot}`);
|
||||
el.className = 'product-slot';
|
||||
el.onclick = () => openPicker(slot);
|
||||
el.innerHTML = `
|
||||
<span class="slot-emoji">➕</span>
|
||||
<span class="slot-prompt">Tap to pick product ${slot.toUpperCase()}</span>
|
||||
`;
|
||||
updateCompareBtn();
|
||||
document.getElementById('comparison').classList.remove('visible');
|
||||
}
|
||||
|
||||
function updateCompareBtn() {
|
||||
document.getElementById('compare-btn').disabled = !(selectedA && selectedB);
|
||||
}
|
||||
|
||||
// ── Run comparison ─────────────────────────────────────
|
||||
function runComparison() {
|
||||
if (!selectedA || !selectedB) return;
|
||||
|
||||
const a = selectedA;
|
||||
const b = selectedB;
|
||||
const winner = a.score >= b.score ? a : b;
|
||||
const loser = a.score >= b.score ? b : a;
|
||||
const diff = Math.abs(a.score - b.score).toFixed(1);
|
||||
|
||||
// Winner banner
|
||||
document.getElementById('winner-name').textContent = `${winner.emoji} ${winner.name}`;
|
||||
document.getElementById('winner-reason').textContent =
|
||||
diff == 0
|
||||
? 'These products are equally healthy. You pick!'
|
||||
: `Scores ${diff} points higher — ${winner.scoreDesc || 'Better nutritional profile.'}`;
|
||||
|
||||
// Cards
|
||||
const grid = document.getElementById('compare-grid');
|
||||
grid.innerHTML = buildCard(a, a.id === winner.id) + buildCard(b, b.id === winner.id);
|
||||
|
||||
// Animate bars
|
||||
requestAnimationFrame(() => {
|
||||
['a-bar','b-bar'].forEach(id => {
|
||||
const el = document.getElementById(id);
|
||||
if (el) el.style.width = el.dataset.target;
|
||||
});
|
||||
});
|
||||
|
||||
// Breakdown rows
|
||||
buildBreakdown(a, b);
|
||||
|
||||
// Show section
|
||||
document.getElementById('comparison').classList.add('visible');
|
||||
document.getElementById('comparison').scrollIntoView({ behavior: 'smooth', block: 'start' });
|
||||
}
|
||||
|
||||
function buildCard(p, isWinner) {
|
||||
const sc = scoreClass(p.score);
|
||||
const ing = INGREDIENTS[p.id] || { positives: [], negatives: [] };
|
||||
const nut = NUTRITION[p.id] || { calories:'-', sugar:'-', sodium:'-', fiber:'-', protein:'-' };
|
||||
const pct = (p.score / 10 * 100).toFixed(0) + '%';
|
||||
const grade = scoreGrade(p.score);
|
||||
|
||||
const posTags = ing.positives.map(t => `<span class="tag good">✓ ${t}</span>`).join('');
|
||||
const negTags = ing.negatives.map(t => `<span class="tag bad">✗ ${t}</span>`).join('');
|
||||
|
||||
return `
|
||||
<div class="product-card ${isWinner ? 'winner' : ''}">
|
||||
<span class="card-emoji">${p.emoji}</span>
|
||||
<div class="card-name">${p.name}</div>
|
||||
<div class="card-brand">${p.brand}</div>
|
||||
<div class="card-size">${p.size || ''}</div>
|
||||
|
||||
<div class="score-display">
|
||||
<div class="score-circle score-${sc}">
|
||||
<span class="num">${p.score}</span>
|
||||
<span class="denom">/10</span>
|
||||
</div>
|
||||
<div class="score-bar-wrap">
|
||||
<div class="score-bar bar-${sc}" id="${p.id === selectedA.id ? 'a' : 'b'}-bar"
|
||||
style="width:0%" data-target="${pct}"></div>
|
||||
</div>
|
||||
<div class="score-label">${grade}</div>
|
||||
</div>
|
||||
|
||||
<div class="stat-section">
|
||||
<h4>Nutrition</h4>
|
||||
<div class="stat-row"><span class="label">Calories</span><span class="value">${nut.calories} kcal</span></div>
|
||||
<div class="stat-row"><span class="label">Sugar</span><span class="value">${nut.sugar}</span></div>
|
||||
<div class="stat-row"><span class="label">Sodium</span><span class="value">${nut.sodium}</span></div>
|
||||
<div class="stat-row"><span class="label">Fiber</span><span class="value">${nut.fiber}</span></div>
|
||||
<div class="stat-row"><span class="label">Protein</span><span class="value">${nut.protein}</span></div>
|
||||
</div>
|
||||
|
||||
<div class="ingredients">
|
||||
<h4>Highlights</h4>
|
||||
<div class="tag-list">${posTags}${negTags}</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
function buildBreakdown(a, b) {
|
||||
const na = NUTRITION[a.id] || {};
|
||||
const nb = NUTRITION[b.id] || {};
|
||||
|
||||
const metrics = [
|
||||
{ label: 'Health Score', va: a.score, vb: b.score, higherBetter: true, fmt: v => v },
|
||||
{ label: 'Calories', va: na.calories||0, vb: nb.calories||0, higherBetter: false, fmt: v => v + ' kcal' },
|
||||
{ label: 'Sugar', va: parseFloat(na.sugar)||0, vb: parseFloat(nb.sugar)||0, higherBetter: false, fmt: (v,raw) => raw },
|
||||
{ label: 'Sodium', va: parseFloat(na.sodium)||0, vb: parseFloat(nb.sodium)||0, higherBetter: false, fmt: (v,raw) => raw },
|
||||
{ label: 'Fiber', va: parseFloat(na.fiber)||0, vb: parseFloat(nb.fiber)||0, higherBetter: true, fmt: (v,raw) => raw },
|
||||
{ label: 'Protein', va: parseFloat(na.protein)||0,vb: parseFloat(nb.protein)||0,higherBetter: true, fmt: (v,raw) => raw },
|
||||
];
|
||||
|
||||
const rawA = [a.score, na.calories, na.sugar, na.sodium, na.fiber, na.protein];
|
||||
const rawB = [b.score, nb.calories, nb.sugar, nb.sodium, nb.fiber, nb.protein];
|
||||
|
||||
let html = '';
|
||||
metrics.forEach((m, i) => {
|
||||
const aWins = m.higherBetter ? m.va >= m.vb : m.va <= m.vb;
|
||||
const aClass = aWins ? 'win' : 'lose';
|
||||
const bClass = aWins ? 'lose' : 'win';
|
||||
const aDisplay = m.fmt(m.va, rawA[i]);
|
||||
const bDisplay = m.fmt(m.vb, rawB[i]);
|
||||
|
||||
html += `
|
||||
<div class="breakdown-row">
|
||||
<div class="left"><span class="val ${aClass}">${aDisplay}</span></div>
|
||||
<div class="metric-name">${m.label}</div>
|
||||
<div class="right"><span class="val ${bClass}">${bDisplay}</span></div>
|
||||
</div>
|
||||
`;
|
||||
});
|
||||
|
||||
document.getElementById('breakdown-rows').innerHTML = html;
|
||||
}
|
||||
|
||||
// ── Reset ──────────────────────────────────────────────
|
||||
function resetAll() {
|
||||
clearSlot({ stopPropagation:()=>{} }, 'a');
|
||||
clearSlot({ stopPropagation:()=>{} }, 'b');
|
||||
document.getElementById('comparison').classList.remove('visible');
|
||||
window.scrollTo({ top: 0, behavior: 'smooth' });
|
||||
}
|
||||
|
||||
// ── Init ───────────────────────────────────────────────
|
||||
loadProducts();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
1046
dashboard.html
Normal file
1046
dashboard.html
Normal file
File diff suppressed because it is too large
Load diff
124
products.json
Normal file
124
products.json
Normal file
|
|
@ -0,0 +1,124 @@
|
|||
{
|
||||
"products": [
|
||||
{
|
||||
"id": "p001",
|
||||
"name": "Orange Juice Original",
|
||||
"brand": "Tropicana",
|
||||
"category": "Beverages",
|
||||
"size": "52 fl oz",
|
||||
"emoji": "🥤",
|
||||
"score": 4.5,
|
||||
"scoreDesc": "High sugar content. Consider lower-sugar options for daily use.",
|
||||
"alternatives": [
|
||||
{
|
||||
"name": "Simply Light OJ",
|
||||
"brand": "Simply · 50% less sugar",
|
||||
"emoji": "🍊",
|
||||
"score": 7.8
|
||||
},
|
||||
{
|
||||
"name": "Suja Organic Green Juice",
|
||||
"brand": "Suja · Cold-pressed, no added sugar",
|
||||
"emoji": "🥝",
|
||||
"score": 9.1
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "p002",
|
||||
"name": "Classic Potato Chips",
|
||||
"brand": "Lay's",
|
||||
"category": "Snacks",
|
||||
"size": "8 oz",
|
||||
"emoji": "🥔",
|
||||
"score": 3.2,
|
||||
"scoreDesc": "High in sodium and saturated fat. Best enjoyed occasionally.",
|
||||
"alternatives": [
|
||||
{
|
||||
"name": "Baked Original Crackers",
|
||||
"brand": "Triscuit · Whole grain, lower fat",
|
||||
"emoji": "🌾",
|
||||
"score": 6.5
|
||||
},
|
||||
{
|
||||
"name": "Kale Chips Sea Salt",
|
||||
"brand": "Brad's · Organic, nutrient-dense",
|
||||
"emoji": "🥬",
|
||||
"score": 8.9
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "p003",
|
||||
"name": "Whole Grain Bread",
|
||||
"brand": "Dave's Killer Bread",
|
||||
"category": "Bakery",
|
||||
"size": "27 oz",
|
||||
"emoji": "🍞",
|
||||
"score": 8.2,
|
||||
"scoreDesc": "Excellent fiber and protein content. Great daily staple.",
|
||||
"alternatives": [
|
||||
{
|
||||
"name": "Ezekiel 4:9 Sprouted Bread",
|
||||
"brand": "Food for Life · No flour, sprouted grains",
|
||||
"emoji": "🌿",
|
||||
"score": 9.3
|
||||
},
|
||||
{
|
||||
"name": "Ancient Grain Bread",
|
||||
"brand": "Angelic Bakehouse · 7-grain blend",
|
||||
"emoji": "🌾",
|
||||
"score": 8.8
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "p004",
|
||||
"name": "Greek Yogurt Strawberry",
|
||||
"brand": "Chobani",
|
||||
"category": "Dairy",
|
||||
"size": "5.3 oz",
|
||||
"emoji": "🫙",
|
||||
"score": 7.1,
|
||||
"scoreDesc": "Good protein source. Contains added sugars from fruit flavoring.",
|
||||
"alternatives": [
|
||||
{
|
||||
"name": "Plain Greek Yogurt",
|
||||
"brand": "Chobani · No added sugar, higher protein",
|
||||
"emoji": "🥛",
|
||||
"score": 9.0
|
||||
},
|
||||
{
|
||||
"name": "Siggi's Vanilla Yogurt",
|
||||
"brand": "Siggi's · Less sugar, Icelandic-style",
|
||||
"emoji": "🫐",
|
||||
"score": 8.4
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "p005",
|
||||
"name": "Frosted Mini-Wheats",
|
||||
"brand": "Kellogg's",
|
||||
"category": "Cereal",
|
||||
"size": "18 oz",
|
||||
"emoji": "🌾",
|
||||
"score": 5.8,
|
||||
"scoreDesc": "Good fiber content but has added sugar coating. Moderate choice.",
|
||||
"alternatives": [
|
||||
{
|
||||
"name": "Original Shredded Wheat",
|
||||
"brand": "Post · No added sugar, pure whole grain",
|
||||
"emoji": "🌿",
|
||||
"score": 9.2
|
||||
},
|
||||
{
|
||||
"name": "Steel Cut Oats",
|
||||
"brand": "Bob's Red Mill · Unprocessed, high fiber",
|
||||
"emoji": "🥣",
|
||||
"score": 9.5
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
488
scan.html
Normal file
488
scan.html
Normal file
|
|
@ -0,0 +1,488 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
|
||||
<title>Payfrit — Scan Product</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
background: #f5f7fa;
|
||||
color: #1a1a2e;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* Header */
|
||||
.header {
|
||||
background: #16213e;
|
||||
color: #fff;
|
||||
padding: 16px 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
}
|
||||
.header .logo { font-size: 20px; font-weight: 700; letter-spacing: -0.5px; }
|
||||
.header .logo span { color: #4ecca3; }
|
||||
.header .user-icon {
|
||||
width: 32px; height: 32px; border-radius: 50%;
|
||||
background: #4ecca3; display: flex; align-items: center;
|
||||
justify-content: center; font-size: 14px; font-weight: 600; color: #16213e;
|
||||
}
|
||||
|
||||
/* Scan Area */
|
||||
.scan-section {
|
||||
padding: 28px 20px 16px;
|
||||
text-align: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.scan-section h1 {
|
||||
font-size: 22px; font-weight: 700; margin-bottom: 6px;
|
||||
}
|
||||
.scan-section p {
|
||||
font-size: 14px; color: #666; margin-bottom: 20px;
|
||||
}
|
||||
.scan-btn {
|
||||
display: inline-flex; align-items: center; gap: 10px;
|
||||
background: #4ecca3; color: #16213e;
|
||||
border: none; border-radius: 16px;
|
||||
padding: 16px 36px; font-size: 17px; font-weight: 700;
|
||||
cursor: pointer; transition: transform 0.15s, box-shadow 0.15s;
|
||||
box-shadow: 0 4px 16px rgba(78,204,163,0.3);
|
||||
}
|
||||
.scan-btn:active { transform: scale(0.96); }
|
||||
.scan-btn svg { width: 22px; height: 22px; }
|
||||
|
||||
/* Search Bar */
|
||||
.search-section {
|
||||
padding: 12px 20px 20px;
|
||||
}
|
||||
.search-wrap {
|
||||
position: relative;
|
||||
}
|
||||
.search-wrap svg {
|
||||
position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
|
||||
width: 18px; height: 18px; color: #999; pointer-events: none;
|
||||
}
|
||||
.search-input {
|
||||
width: 100%; padding: 13px 14px 13px 42px;
|
||||
border: 1.5px solid #e0e0e0; border-radius: 14px;
|
||||
font-size: 15px; background: #fff; color: #1a1a2e;
|
||||
outline: none; transition: border-color 0.2s;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
.search-input:focus { border-color: #4ecca3; }
|
||||
.search-input::placeholder { color: #bbb; }
|
||||
|
||||
/* Product List */
|
||||
.product-list {
|
||||
padding: 0 16px 24px;
|
||||
}
|
||||
.list-label {
|
||||
font-size: 12px; font-weight: 600; color: #999;
|
||||
text-transform: uppercase; letter-spacing: 0.6px;
|
||||
margin-bottom: 12px; padding-left: 4px;
|
||||
}
|
||||
.list-item {
|
||||
display: flex; align-items: center; gap: 12px;
|
||||
background: #fff; border-radius: 16px;
|
||||
padding: 14px; margin-bottom: 10px;
|
||||
box-shadow: 0 1px 6px rgba(0,0,0,0.06);
|
||||
cursor: pointer; transition: transform 0.15s, box-shadow 0.15s;
|
||||
}
|
||||
.list-item:active { transform: scale(0.98); box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
|
||||
.list-emoji {
|
||||
width: 52px; height: 52px; border-radius: 12px;
|
||||
background: #f0faf6; display: flex; align-items: center;
|
||||
justify-content: center; font-size: 26px; flex-shrink: 0;
|
||||
}
|
||||
.list-info { flex: 1; min-width: 0; }
|
||||
.list-info .li-brand { font-size: 11px; color: #999; text-transform: uppercase; letter-spacing: 0.4px; }
|
||||
.list-info .li-name { font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||||
.list-info .li-cat { font-size: 12px; color: #aaa; margin-top: 2px; }
|
||||
.list-score {
|
||||
font-size: 17px; font-weight: 800; border-radius: 10px;
|
||||
padding: 6px 10px; flex-shrink: 0;
|
||||
}
|
||||
.no-results {
|
||||
text-align: center; padding: 40px 20px;
|
||||
color: #999; font-size: 15px;
|
||||
}
|
||||
|
||||
/* Loading */
|
||||
.loading { display: none; padding: 40px 20px; text-align: center; }
|
||||
.loading.active { display: block; }
|
||||
.spinner {
|
||||
width: 40px; height: 40px; border: 4px solid #e0e0e0;
|
||||
border-top-color: #4ecca3; border-radius: 50%;
|
||||
animation: spin 0.7s linear infinite; margin: 0 auto 12px;
|
||||
}
|
||||
@keyframes spin { to { transform: rotate(360deg); } }
|
||||
|
||||
/* Result Card */
|
||||
.result { display: none; padding: 0 16px 24px; }
|
||||
.result.active { display: block; }
|
||||
.product-card {
|
||||
background: #fff; border-radius: 20px;
|
||||
box-shadow: 0 2px 20px rgba(0,0,0,0.08);
|
||||
overflow: hidden;
|
||||
}
|
||||
.product-header {
|
||||
padding: 20px; display: flex; gap: 16px; align-items: center;
|
||||
}
|
||||
.product-img {
|
||||
width: 72px; height: 72px; border-radius: 14px;
|
||||
background: #e8f5e9; display: flex; align-items: center;
|
||||
justify-content: center; font-size: 32px; flex-shrink: 0;
|
||||
}
|
||||
.product-info { flex: 1; }
|
||||
.product-info .brand { font-size: 12px; color: #888; text-transform: uppercase; letter-spacing: 0.5px; }
|
||||
.product-info .name { font-size: 18px; font-weight: 700; margin-top: 2px; }
|
||||
.product-info .category { font-size: 13px; color: #666; margin-top: 4px; }
|
||||
|
||||
/* Health Score */
|
||||
.score-section {
|
||||
padding: 0 20px 20px; display: flex; align-items: center; gap: 16px;
|
||||
}
|
||||
.score-ring {
|
||||
position: relative; width: 72px; height: 72px; flex-shrink: 0;
|
||||
}
|
||||
.score-ring svg { transform: rotate(-90deg); }
|
||||
.score-ring .bg { stroke: #e8e8e8; }
|
||||
.score-ring .fill { stroke-linecap: round; transition: stroke-dashoffset 1s ease; }
|
||||
.score-value {
|
||||
position: absolute; inset: 0; display: flex; align-items: center;
|
||||
justify-content: center; font-size: 24px; font-weight: 800;
|
||||
}
|
||||
.score-label { flex: 1; }
|
||||
.score-label .title { font-size: 15px; font-weight: 700; }
|
||||
.score-label .desc { font-size: 13px; color: #666; margin-top: 2px; line-height: 1.4; }
|
||||
|
||||
/* Divider */
|
||||
.divider { height: 1px; background: #f0f0f0; margin: 0 20px; }
|
||||
|
||||
/* Alternatives */
|
||||
.alternatives { padding: 20px; }
|
||||
.alternatives h3 { font-size: 15px; font-weight: 700; margin-bottom: 14px; color: #16213e; }
|
||||
.alt-item {
|
||||
display: flex; align-items: center; gap: 12px;
|
||||
padding: 12px; background: #f8faf9; border-radius: 14px;
|
||||
margin-bottom: 10px; cursor: pointer;
|
||||
transition: background 0.15s;
|
||||
}
|
||||
.alt-item:active { background: #edf5f0; }
|
||||
.alt-icon {
|
||||
width: 48px; height: 48px; border-radius: 12px;
|
||||
background: #e8f5e9; display: flex; align-items: center;
|
||||
justify-content: center; font-size: 22px; flex-shrink: 0;
|
||||
}
|
||||
.alt-info { flex: 1; }
|
||||
.alt-info .alt-name { font-size: 15px; font-weight: 600; }
|
||||
.alt-info .alt-brand { font-size: 12px; color: #888; }
|
||||
.alt-score {
|
||||
font-size: 18px; font-weight: 800; color: #4ecca3;
|
||||
background: #e8f5e9; border-radius: 10px; padding: 6px 10px;
|
||||
}
|
||||
|
||||
/* Back / Scan Again */
|
||||
.action-row {
|
||||
text-align: center; padding: 8px 20px 32px;
|
||||
display: flex; gap: 12px; justify-content: center;
|
||||
}
|
||||
.action-row button {
|
||||
background: none; border: 2px solid #16213e;
|
||||
border-radius: 12px; padding: 12px 24px;
|
||||
font-size: 15px; font-weight: 600; color: #16213e;
|
||||
cursor: pointer; flex: 1; max-width: 200px;
|
||||
}
|
||||
.action-row button.primary {
|
||||
background: #4ecca3; border-color: #4ecca3; color: #16213e;
|
||||
}
|
||||
.action-row button:active { opacity: 0.8; }
|
||||
|
||||
/* Error toast */
|
||||
.toast {
|
||||
display: none; position: fixed; bottom: 24px; left: 50%;
|
||||
transform: translateX(-50%); background: #e53e3e;
|
||||
color: #fff; border-radius: 12px; padding: 12px 20px;
|
||||
font-size: 14px; font-weight: 500; z-index: 999;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.toast.show { display: block; animation: fadeIn 0.3s ease; }
|
||||
|
||||
/* Animations */
|
||||
.fade-in { animation: fadeIn 0.4s ease; }
|
||||
@keyframes fadeIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
|
||||
|
||||
/* Score color helpers */
|
||||
.score-high { color: #22c55e; }
|
||||
.score-mid { color: #f59e0b; }
|
||||
.score-low { color: #ef4444; }
|
||||
.score-bg-high { background: #dcfce7; }
|
||||
.score-bg-mid { background: #fef3c7; }
|
||||
.score-bg-low { background: #fee2e2; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="header">
|
||||
<div class="logo">pay<span>frit</span></div>
|
||||
<div class="user-icon">Z</div>
|
||||
</div>
|
||||
|
||||
<!-- STATE: Home (scan + search) -->
|
||||
<div id="homeView">
|
||||
<div class="scan-section">
|
||||
<h1>Scan a Product</h1>
|
||||
<p>Point your camera at any barcode to get<br>instant health insights</p>
|
||||
<button class="scan-btn" id="scanBtn" onclick="startScan()">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round">
|
||||
<path d="M3 7V5a2 2 0 012-2h2M17 3h2a2 2 0 012 2v2M21 17v2a2 2 0 01-2 2h-2M7 21H5a2 2 0 01-2-2v-2"/>
|
||||
<line x1="7" y1="8" x2="7" y2="16"/><line x1="11" y1="8" x2="11" y2="16"/>
|
||||
<line x1="15" y1="8" x2="15" y2="16"/><line x1="19" y1="8" x2="19" y2="16"/>
|
||||
</svg>
|
||||
Scan Barcode
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="search-section">
|
||||
<div class="search-wrap">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
|
||||
<circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/>
|
||||
</svg>
|
||||
<input
|
||||
type="search"
|
||||
class="search-input"
|
||||
id="searchInput"
|
||||
placeholder="Search products…"
|
||||
autocomplete="off"
|
||||
oninput="handleSearch(this.value)"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="product-list" id="productList">
|
||||
<div class="list-label">All Products</div>
|
||||
<div id="listItems"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- STATE: Loading -->
|
||||
<div class="loading" id="loading">
|
||||
<div class="spinner"></div>
|
||||
<p style="color:#888; font-size:14px;">Looking up product…</p>
|
||||
</div>
|
||||
|
||||
<!-- STATE: Result -->
|
||||
<div class="result" id="resultView">
|
||||
<div class="product-card fade-in" id="productCard">
|
||||
<!-- injected by JS -->
|
||||
</div>
|
||||
<div class="action-row">
|
||||
<button onclick="goBack()">← Back</button>
|
||||
<button class="primary" onclick="startScan()">Scan Again</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Error toast -->
|
||||
<div class="toast" id="toast"></div>
|
||||
|
||||
<script>
|
||||
// ─── State ───────────────────────────────────────────────────────────────────
|
||||
let allProducts = [];
|
||||
|
||||
// ─── Boot: load products.json ─────────────────────────────────────────────
|
||||
async function loadProducts() {
|
||||
try {
|
||||
const res = await fetch('products.json');
|
||||
if (!res.ok) throw new Error(`HTTP ${res.status}`);
|
||||
const data = await res.json();
|
||||
allProducts = data.products;
|
||||
renderList(allProducts);
|
||||
} catch (err) {
|
||||
showToast('Could not load product data');
|
||||
console.error('loadProducts:', err);
|
||||
}
|
||||
}
|
||||
|
||||
// ─── Render product list ──────────────────────────────────────────────────
|
||||
function renderList(products) {
|
||||
const container = document.getElementById('listItems');
|
||||
if (!products.length) {
|
||||
container.innerHTML = '<div class="no-results">No products found</div>';
|
||||
return;
|
||||
}
|
||||
container.innerHTML = products.map(p => {
|
||||
const cls = scoreClass(p.score);
|
||||
return `
|
||||
<div class="list-item" onclick="showProduct('${p.id}')">
|
||||
<div class="list-emoji">${p.emoji}</div>
|
||||
<div class="list-info">
|
||||
<div class="li-brand">${p.brand}</div>
|
||||
<div class="li-name">${p.name}</div>
|
||||
<div class="li-cat">${p.category} · ${p.size}</div>
|
||||
</div>
|
||||
<div class="list-score ${cls.text} ${cls.bg}">${p.score}</div>
|
||||
</div>`;
|
||||
}).join('');
|
||||
}
|
||||
|
||||
// ─── Search filter ────────────────────────────────────────────────────────
|
||||
function handleSearch(query) {
|
||||
const q = query.trim().toLowerCase();
|
||||
const label = document.querySelector('.list-label');
|
||||
if (!q) {
|
||||
label.textContent = 'All Products';
|
||||
renderList(allProducts);
|
||||
return;
|
||||
}
|
||||
const filtered = allProducts.filter(p =>
|
||||
p.name.toLowerCase().includes(q) ||
|
||||
p.brand.toLowerCase().includes(q) ||
|
||||
p.category.toLowerCase().includes(q)
|
||||
);
|
||||
label.textContent = `Results for "${query.trim()}"`;
|
||||
renderList(filtered);
|
||||
}
|
||||
|
||||
// ─── Show product detail ──────────────────────────────────────────────────
|
||||
function showProduct(id) {
|
||||
const product = allProducts.find(p => p.id === id);
|
||||
if (!product) return;
|
||||
|
||||
// Transition: home → loading → result
|
||||
hide('homeView');
|
||||
showEl('loading');
|
||||
|
||||
setTimeout(() => {
|
||||
hide('loading');
|
||||
renderProductCard(product);
|
||||
showEl('resultView');
|
||||
}, 800);
|
||||
}
|
||||
|
||||
function renderProductCard(p) {
|
||||
const cls = scoreClass(p.score);
|
||||
const altsHtml = p.alternatives.map(a => {
|
||||
const ac = scoreClass(a.score);
|
||||
return `
|
||||
<div class="alt-item">
|
||||
<div class="alt-icon">${a.emoji}</div>
|
||||
<div class="alt-info">
|
||||
<div class="alt-name">${a.name}</div>
|
||||
<div class="alt-brand">${a.brand}</div>
|
||||
</div>
|
||||
<div class="alt-score ${ac.text} ${ac.bg}">${a.score}</div>
|
||||
</div>`;
|
||||
}).join('');
|
||||
|
||||
document.getElementById('productCard').innerHTML = `
|
||||
<div class="product-header">
|
||||
<div class="product-img">${p.emoji}</div>
|
||||
<div class="product-info">
|
||||
<div class="brand">${p.brand}</div>
|
||||
<div class="name">${p.name}</div>
|
||||
<div class="category">${p.category} · ${p.size}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="score-section">
|
||||
<div class="score-ring">
|
||||
<svg width="72" height="72" viewBox="0 0 72 72">
|
||||
<circle class="bg" cx="36" cy="36" r="30" fill="none" stroke-width="7"/>
|
||||
<circle class="fill" id="scoreCircle" cx="36" cy="36" r="30" fill="none" stroke-width="7"
|
||||
stroke="${scoreColor(p.score)}" stroke-dasharray="188.5" stroke-dashoffset="188.5"/>
|
||||
</svg>
|
||||
<div class="score-value ${cls.text}" id="scoreValue">0</div>
|
||||
</div>
|
||||
<div class="score-label">
|
||||
<div class="title">Health Score</div>
|
||||
<div class="desc">${p.scoreDesc}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="divider"></div>
|
||||
<div class="alternatives">
|
||||
<h3>🌿 Healthier Alternatives</h3>
|
||||
${altsHtml}
|
||||
</div>`;
|
||||
|
||||
animateScore(p.score);
|
||||
}
|
||||
|
||||
// ─── Scan button (random product) ────────────────────────────────────────
|
||||
function startScan() {
|
||||
if (!allProducts.length) {
|
||||
showToast('Products not loaded yet');
|
||||
return;
|
||||
}
|
||||
hide('homeView');
|
||||
hide('resultView');
|
||||
showEl('loading');
|
||||
|
||||
setTimeout(() => {
|
||||
hide('loading');
|
||||
// Pick a random product to simulate a real scan
|
||||
const p = allProducts[Math.floor(Math.random() * allProducts.length)];
|
||||
renderProductCard(p);
|
||||
showEl('resultView');
|
||||
}, 1200);
|
||||
}
|
||||
|
||||
// ─── Back to home ─────────────────────────────────────────────────────────
|
||||
function goBack() {
|
||||
hide('resultView');
|
||||
hide('loading');
|
||||
showEl('homeView');
|
||||
document.getElementById('searchInput').value = '';
|
||||
renderList(allProducts);
|
||||
document.querySelector('.list-label').textContent = 'All Products';
|
||||
}
|
||||
|
||||
// ─── Score helpers ────────────────────────────────────────────────────────
|
||||
function scoreClass(score) {
|
||||
if (score >= 7) return { text: 'score-high', bg: 'score-bg-high' };
|
||||
if (score >= 5) return { text: 'score-mid', bg: 'score-bg-mid' };
|
||||
return { text: 'score-low', bg: 'score-bg-low' };
|
||||
}
|
||||
function scoreColor(score) {
|
||||
if (score >= 7) return '#22c55e';
|
||||
if (score >= 5) return '#f59e0b';
|
||||
return '#ef4444';
|
||||
}
|
||||
|
||||
function animateScore(score) {
|
||||
const circle = document.getElementById('scoreCircle');
|
||||
const value = document.getElementById('scoreValue');
|
||||
const circumference = 188.5;
|
||||
circle.style.strokeDashoffset = circumference - (score / 10) * circumference;
|
||||
|
||||
let current = 0;
|
||||
const step = score / 30;
|
||||
const iv = setInterval(() => {
|
||||
current = Math.min(current + step, score);
|
||||
value.textContent = current.toFixed(1);
|
||||
if (current >= score) clearInterval(iv);
|
||||
}, 25);
|
||||
}
|
||||
|
||||
// ─── Utility ──────────────────────────────────────────────────────────────
|
||||
function showEl(id) { document.getElementById(id).style.display = ''; }
|
||||
function hide(id) { document.getElementById(id).style.display = 'none'; }
|
||||
|
||||
function showToast(msg) {
|
||||
const t = document.getElementById('toast');
|
||||
t.textContent = msg;
|
||||
t.classList.add('show');
|
||||
setTimeout(() => t.classList.remove('show'), 3000);
|
||||
}
|
||||
|
||||
// ─── Init ─────────────────────────────────────────────────────────────────
|
||||
loadProducts();
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Reference in a new issue