← back to Handbag Authentication
views/price-tracker.ejs
94 lines
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Retail Price Tracker - LuxArb Prime</title>
<link rel="stylesheet" href="/css/style.css">
<link rel="stylesheet" href="/css/product.css">
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
<header>
<div class="container">
<h1>📈 Retail Price Tracker</h1>
<p class="tagline">Historical Retail MSRP & Appreciation Trends</p>
<p class="subtitle">Track how luxury handbags increase in value year over year</p>
</div>
</header>
<main class="container">
<div class="back-nav">
<a href="/" class="btn-back">← Back to Deals</a>
</div>
<!-- Brand Tabs -->
<section class="sort-tabs">
<div class="sort-tab active" data-brand="Hermes">
👜 Hermès
</div>
<div class="sort-tab" data-brand="Chanel">
👜 Chanel
</div>
<div class="sort-tab" data-brand="Louis Vuitton">
👜 Louis Vuitton
</div>
<div class="sort-tab" data-brand="Gucci">
👜 Gucci
</div>
<div class="sort-tab" data-brand="Prada">
👜 Prada
</div>
</section>
<!-- Price Increase Summary -->
<section id="price-summary" style="background: white; padding: 2rem; border-radius: 15px; box-shadow: 0 4px 20px rgba(0,0,0,0.08); margin-bottom: 2rem;">
<h2 style="margin-top: 0;">💰 Retail Price Increases (2020-2024)</h2>
<div id="summary-content" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem;">
<!-- Will be populated by JS -->
</div>
</section>
<!-- Time Series Chart -->
<section style="background: white; padding: 2rem; border-radius: 15px; box-shadow: 0 4px 20px rgba(0,0,0,0.08); margin-bottom: 2rem;">
<h2>📊 Price Growth Over Time</h2>
<canvas id="priceChart" height="100"></canvas>
</section>
<!-- Model Comparison Table -->
<section style="background: white; padding: 2rem; border-radius: 15px; box-shadow: 0 4px 20px rgba(0,0,0,0.08);">
<h2>📋 Model-by-Model Breakdown</h2>
<div class="platform-comparison-table">
<table id="model-table">
<thead>
<tr>
<th>Model</th>
<th>2020 MSRP</th>
<th>2021 MSRP</th>
<th>2022 MSRP</th>
<th>2023 MSRP</th>
<th>2024 MSRP</th>
<th>Total Increase</th>
<th>Annual Growth</th>
</tr>
</thead>
<tbody id="model-table-body">
<!-- Populated by JS -->
</tbody>
</table>
</div>
</section>
<!-- Investment Analysis -->
<section style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 2rem; border-radius: 15px; margin-top: 2rem;">
<h2 style="color: white;">💡 Investment Insights</h2>
<div id="insights" style="font-size: 1.1rem; line-height: 1.8;">
<!-- Populated by JS -->
</div>
</section>
</main>
<script src="/js/price-tracker.js"></script>
</body>
</html>