← back to Handbag Authentication
views/index.ejs
230 lines
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LuxArb Prime - Luxury Bag Arbitrage Intelligence</title>
<meta name="description" content="The first cross-border luxury arbitrage platform. Find authenticated designer bags from Japan at 25-50% below US resale prices.">
<link rel="stylesheet" href="/css/style.css">
</head>
<body>
<header>
<div class="container">
<h1>💎 LuxArb Prime</h1>
<p class="tagline">The First & Only Cross-Border Luxury Arbitrage Intelligence Platform</p>
<p class="subtitle">Real-time profit opportunities from Japan → USA | Authenticated luxury bags</p>
<div style="margin-top: 1.5rem; display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap;">
<a href="/business-guide" style="background: linear-gradient(135deg, #fa709a 0%, #fee140 100%); color: white; padding: 0.75rem 1.5rem; border-radius: 25px; text-decoration: none; font-weight: 700; box-shadow: 0 4px 15px rgba(0,0,0,0.2); display: inline-flex; align-items: center; gap: 0.5rem;">
🚀 Complete Business Startup Guide
</a>
<a href="/camera" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 0.75rem 1.5rem; border-radius: 25px; text-decoration: none; font-weight: 700; box-shadow: 0 4px 15px rgba(0,0,0,0.2); display: inline-flex; align-items: center; gap: 0.5rem;">
📸 AI Camera Analysis
</a>
<a href="/price-tracker" style="background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%); color: white; padding: 0.75rem 1.5rem; border-radius: 25px; text-decoration: none; font-weight: 700; box-shadow: 0 4px 15px rgba(0,0,0,0.2); display: inline-flex; align-items: center; gap: 0.5rem;">
📊 Price Tracker
</a>
</div>
</div>
</header>
<main class="container">
<!-- Live Update Banner -->
<div id="live-banner" style="background: linear-gradient(135deg, #2ed573 0%, #26de81 100%); color: white; padding: 1rem; border-radius: 10px; margin-bottom: 1.5rem; text-align: center; font-weight: 600; display: none;">
🔄 Auto-refreshing every 5 seconds - New products appear as they're crawled!
</div>
<!-- Stats Dashboard -->
<section class="stats-grid" id="stats">
<div class="stat-card">
<h3 id="stat-total">-</h3>
<p>Total Listings</p>
</div>
<div class="stat-card highlight">
<h3 id="stat-deals">-</h3>
<p>Active Deals</p>
</div>
<div class="stat-card">
<h3 id="stat-avg-deal">-</h3>
<p>Avg Deal %</p>
</div>
<div class="stat-card">
<h3 id="stat-best-deal">-</h3>
<p>Best Deal %</p>
</div>
</section>
<!-- Filters -->
<section class="filters">
<div class="filter-row">
<input type="text" id="filter-brand" placeholder="Filter by brand (e.g., Gucci)">
<select id="filter-signature">
<option value="">All Bags</option>
<optgroup label="🔥 Signature Icons">
<option value="birkin">Hermès Birkin</option>
<option value="kelly">Hermès Kelly</option>
<option value="constance">Hermès Constance</option>
<option value="classic flap">Chanel Classic Flap</option>
<option value="boy bag">Chanel Boy Bag</option>
<option value="chanel 19">Chanel 19</option>
<option value="lady dior">Dior Lady Dior</option>
<option value="saddle">Dior Saddle</option>
<option value="neverfull">Louis Vuitton Neverfull</option>
<option value="speedy">Louis Vuitton Speedy</option>
<option value="pochette metis">Louis Vuitton Pochette Metis</option>
<option value="capucines">Louis Vuitton Capucines</option>
<option value="marmont">Gucci Marmont</option>
<option value="dionysus">Gucci Dionysus</option>
<option value="jackie">Gucci Jackie 1961</option>
<option value="galleria">Prada Galleria</option>
<option value="re-edition">Prada Re-Edition</option>
<option value="cleo">Prada Cleo</option>
<option value="baguette">Fendi Baguette</option>
<option value="peekaboo">Fendi Peekaboo</option>
</optgroup>
<optgroup label="💎 Investment Grade">
<option value="birkin 25">Hermès Birkin 25</option>
<option value="birkin 30">Hermès Birkin 30</option>
<option value="birkin 35">Hermès Birkin 35</option>
<option value="kelly 25">Hermès Kelly 25</option>
<option value="kelly 28">Hermès Kelly 28</option>
<option value="kelly 32">Hermès Kelly 32</option>
</optgroup>
</select>
<select id="filter-type">
<option value="">All Types</option>
<option value="auction">Auction Only</option>
<option value="buy">Buy Now Only</option>
</select>
<label>
<input type="checkbox" id="filter-deals-only"> Deals Only (20%+ off)
</label>
<button id="btn-export" class="btn-export">📊 Export to CSV</button>
</div>
<div class="filter-row">
<input type="number" id="filter-min-price" placeholder="Min Price (USD)">
<input type="number" id="filter-max-price" placeholder="Max Price (USD)">
<input type="number" id="filter-min-deal" placeholder="Min Deal %" value="">
<button id="btn-refresh" class="btn-primary">🔄 Refresh</button>
</div>
<div class="filter-row" style="flex-wrap: wrap; gap: 0.75rem; padding: 1rem 0;">
<strong style="width: 100%; margin-bottom: 0.5rem;">📍 Data Sources:</strong>
<label style="display: inline-flex; align-items: center; gap: 0.5rem;">
<input type="checkbox" class="source-filter" value="yahoo_auctions_jp" checked> Yahoo Auctions JP
</label>
<label style="display: inline-flex; align-items: center; gap: 0.5rem;">
<input type="checkbox" class="source-filter" value="yahoo_hermes_specialist" checked> Hermès Specialist
</label>
<label style="display: inline-flex; align-items: center; gap: 0.5rem;">
<input type="checkbox" class="source-filter" value="yahoo_chanel_specialist" checked> Chanel Specialist
</label>
<label style="display: inline-flex; align-items: center; gap: 0.5rem;">
<input type="checkbox" class="source-filter" value="yahoo_lv_specialist" checked> LV Specialist
</label>
<label style="display: inline-flex; align-items: center; gap: 0.5rem;">
<input type="checkbox" class="source-filter" value="komehyo" checked> Komehyo
</label>
<label style="display: inline-flex; align-items: center; gap: 0.5rem;">
<input type="checkbox" class="source-filter" value="govdeals" checked> 🇺🇸 GovDeals (US)
</label>
<label style="display: inline-flex; align-items: center; gap: 0.5rem;">
<input type="checkbox" class="source-filter" value="goodwill" checked> 🇺🇸 Goodwill (US)
</label>
<label style="display: inline-flex; align-items: center; gap: 0.5rem;">
<input type="checkbox" class="source-filter" value="mercari_jp" checked> Mercari JP
</label>
<label style="display: inline-flex; align-items: center; gap: 0.5rem;">
<input type="checkbox" class="source-filter" value="ebay_japan" checked> eBay Japan
</label>
</div>
</section>
<!-- Sort Tabs -->
<section class="sort-tabs">
<div class="sort-tab active" data-sort="profit">
💰 Highest Profit
</div>
<div class="sort-tab" data-sort="profit_margin">
📊 Best Deal %
</div>
<div class="sort-tab" data-sort="price_low">
💵 Price: Low to High
</div>
<div class="sort-tab" data-sort="date">
📅 Most Recent
</div>
<div class="sort-tab" data-sort="brand">
🏷️ Brand (A-Z)
</div>
</section>
<!-- Loading State -->
<div id="loading" class="loading">Loading deals...</div>
<!-- Listings Grid -->
<section id="listings-grid" class="listings-grid">
<!-- Listings will be dynamically inserted here -->
</section>
<!-- Empty State -->
<div id="empty-state" class="empty-state" style="display: none;">
<p>No listings found. Try adjusting your filters or run a crawl.</p>
<button id="btn-crawl" class="btn-primary">Start Crawl</button>
</div>
</main>
<!-- Japanese Condition Guide Modal -->
<div id="condition-guide-modal" class="modal" style="display: none;">
<div class="modal-content condition-guide-content">
<span class="modal-close" onclick="closeConditionGuide()">×</span>
<h2>📖 Japanese Condition Guide</h2>
<p class="guide-intro">Quick reference for reading Japanese designer bag listings</p>
<div class="guide-section">
<h3>⚠️ Common Condition Words</h3>
<div id="condition-words-list"></div>
</div>
<div class="guide-section">
<h3>📊 Condition Grades</h3>
<div id="condition-grades-list"></div>
</div>
<div class="guide-section">
<h3>✅ Safe Buy Phrases</h3>
<div id="safe-phrases-list"></div>
</div>
<div class="guide-section">
<h3>⚠️ Caution Phrases</h3>
<div id="caution-phrases-list"></div>
</div>
<div class="guide-section">
<h3>📷 Photo Checklist (2-Minute Scan)</h3>
<div id="photo-checklist-list"></div>
</div>
<div class="guide-section">
<h3>💡 Quick Negotiating Tip</h3>
<p>If a listing is <strong>AB</strong> with <strong>角スレ</strong> and <strong>金具小傷</strong>, comps often justify a modest price cut. Save sold examples and offer politely referencing the exact issues.</p>
</div>
</div>
</div>
<button class="floating-guide-btn" onclick="openConditionGuide()" title="Japanese Condition Guide">
📖 Condition Guide
</button>
<script src="/js/japanese-condition-guide.js"></script>
<script src="/js/app.js"></script>
</body>
</html>