← back to Wine Finder
public/index.html
273 lines
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="0">
<title>Red Thunder Wine Tracker</title>
<link rel="stylesheet" href="/css/styles.css?v=999999999">
</head>
<body>
<div class="main-container">
<!-- Header -->
<header class="app-header">
<div class="header-content">
<div class="logo-section">
<div class="logo-icon">🍷</div>
<div class="logo-text">
<h1 class="app-title">Red Thunder</h1>
<p class="app-subtitle">Wine Tracker</p>
</div>
</div>
<div class="header-actions">
<a href="/verify.html" style="color: var(--text-white); text-decoration: none; margin-right: 16px; padding: 8px 16px; background: linear-gradient(135deg, var(--primary), var(--secondary)); border-radius: 8px; font-weight: 600;">
🔍 Verify Wine
</a>
<button id="logoutBtn" class="logout-btn">Logout</button>
</div>
</div>
</header>
<!-- Alerts Section -->
<div id="alertsSection" class="alerts-section" style="display: none;">
<div class="alerts-container" id="alertsContainer"></div>
</div>
<!-- Search Section -->
<section class="search-section">
<div class="search-container">
<h2 class="section-title">Search Wines</h2>
<div class="search-controls">
<div class="search-input-group">
<div class="search-input-wrapper">
<span class="search-icon">🔍</span>
<input
type="text"
id="searchInput"
class="search-input"
placeholder="Search wines, wineries, regions..."
autocomplete="off"
/>
<span id="searchResultCount" class="search-result-count"></span>
<button id="clearSearch" class="clear-search-btn" style="display: none;">✕</button>
</div>
<div id="searchSuggestions" class="search-suggestions" style="display: none;"></div>
</div>
<!-- Advanced Filters Toggle -->
<div class="filters-toggle">
<button id="toggleFilters" class="toggle-filters-btn">
<span>⚙️ Advanced Filters</span>
<span id="filterChevron" class="chevron">▼</span>
</button>
</div>
<!-- Advanced Filters Panel -->
<div id="advancedFilters" class="advanced-filters" style="display: none;">
<div class="filter-grid">
<!-- Price Range Filter -->
<div class="filter-item">
<label class="filter-label">
<span>💰 Price Range</span>
<span id="priceRangeValue" class="filter-value">$0 - $500+</span>
</label>
<div class="range-slider-container">
<input type="range" id="minPrice" class="range-slider" min="0" max="500" value="0" step="10">
<input type="range" id="maxPrice" class="range-slider" min="0" max="500" value="500" step="10">
</div>
</div>
<!-- Rating Filter -->
<div class="filter-item">
<label class="filter-label">
<span>⭐ Minimum Rating</span>
<span id="ratingValue" class="filter-value">0.0+</span>
</label>
<input type="range" id="minRating" class="range-slider" min="0" max="5" value="0" step="0.1">
</div>
<!-- Vintage Year Filter -->
<div class="filter-item">
<label class="filter-label">
<span>📅 Vintage Year</span>
<span id="vintageValue" class="filter-value">Any</span>
</label>
<input type="range" id="vintageYear" class="range-slider" min="1990" max="2024" value="1990" step="1">
</div>
<!-- Country Filter -->
<div class="filter-item">
<label class="filter-label">
<span>🌍 Country</span>
</label>
<select id="countryFilter" class="filter-select">
<option value="">All Countries</option>
<option value="United States">United States</option>
<option value="France">France</option>
<option value="Italy">Italy</option>
<option value="Spain">Spain</option>
<option value="Australia">Australia</option>
<option value="Chile">Chile</option>
<option value="Argentina">Argentina</option>
</select>
</div>
</div>
<div class="filter-actions">
<button id="applyFilters" class="apply-filters-btn">Apply Filters</button>
<button id="resetFilters" class="reset-filters-btn">Reset All</button>
</div>
</div>
<div class="source-filter">
<p class="source-filter-label">Retail Sources</p>
<div class="source-checkboxes">
<label class="source-checkbox">
<input type="checkbox" id="sourceKL" value="kl" checked>
<span>K&L Wine</span>
</label>
<label class="source-checkbox">
<input type="checkbox" id="sourceVivino" value="vivino" checked>
<span>Vivino</span>
</label>
<label class="source-checkbox">
<input type="checkbox" id="sourceTotalWine" value="totalwine" checked>
<span>Total Wine</span>
</label>
</div>
</div>
<div class="source-filter">
<p class="source-filter-label">Academic & Library Sources</p>
<div class="source-checkboxes">
<label class="source-checkbox" title="350k+ vintages from UC Davis/NeurIPS dataset">
<input type="checkbox" id="sourceWineSensed" value="winesensed">
<span>WineSensed (350k)</span>
</label>
<label class="source-checkbox" title="100k wines with 21M user ratings">
<input type="checkbox" id="sourceXWines" value="xwines">
<span>X-Wines (100k)</span>
</label>
<label class="source-checkbox" title="UC Davis AVA geographic regions">
<input type="checkbox" id="sourceUCDavisAVA" value="ucdavis-ava">
<span>UC Davis AVA</span>
</label>
</div>
</div>
<div class="quick-search">
<p class="quick-search-label">Quick Search</p>
<button class="quick-btn" data-winery="foxen">Foxen</button>
<button class="quick-btn" data-winery="navarro">Navarro</button>
</div>
</div>
</div>
</section>
<!-- Search Stats Dashboard -->
<section id="statsSection" class="stats-section" style="display: none;">
<div class="stats-container">
<div class="stat-card">
<div class="stat-icon">📊</div>
<div class="stat-content">
<span class="stat-label">Total Results</span>
<span id="statTotalResults" class="stat-value">0</span>
</div>
</div>
<div class="stat-card">
<div class="stat-icon">💵</div>
<div class="stat-content">
<span class="stat-label">Avg Price</span>
<span id="statAvgPrice" class="stat-value">$0</span>
<span id="statPriceChange" class="stat-change"></span>
</div>
</div>
<div class="stat-card">
<div class="stat-icon">⭐</div>
<div class="stat-content">
<span class="stat-label">Avg Rating</span>
<span id="statAvgRating" class="stat-value">0.0</span>
</div>
</div>
<div class="stat-card">
<div class="stat-icon">🌐</div>
<div class="stat-content">
<span class="stat-label">Sources</span>
<span id="statSourceCount" class="stat-value">0</span>
</div>
</div>
</div>
</section>
<!-- Results Section -->
<section class="results-section">
<div class="results-container">
<div class="results-header">
<h2 class="section-title">Results</h2>
<div class="results-controls">
<button id="viewModeGrid" class="view-mode-btn active" title="Grid View">⊞</button>
<button id="viewModeList" class="view-mode-btn" title="List View">☰</button>
<label for="sortSelect">Sort By</label>
<select id="sortSelect" class="sort-select">
<option value="name">Name</option>
<option value="price-asc">Price: Low to High</option>
<option value="price-desc">Price: High to Low</option>
<option value="rating-desc">Rating: High to Low</option>
</select>
</div>
</div>
<div id="loadingIndicator" class="loading-indicator" style="display: none;">
<div class="loading-spinner"></div>
<p>Searching...</p>
</div>
<div id="resultsTable" class="results-table"></div>
<div id="noResults" class="no-results" style="display: none;">
<p>No wines found. Try a different search.</p>
</div>
</div>
</section>
<!-- Chart Section (Stock-Style) -->
<section class="chart-section" id="chartSection" style="display: none;">
<div class="chart-container">
<div class="chart-header">
<div class="chart-title-section">
<h2 class="section-title" id="chartTitle">Price Trends</h2>
<div id="chartStats" class="chart-stats">
<span id="chartCurrentPrice" class="chart-current-price">$0.00</span>
<span id="chartPriceChange" class="chart-price-change">+0.00 (0%)</span>
</div>
</div>
<div class="chart-controls">
<button class="chart-timeframe-btn active" data-timeframe="1M">1M</button>
<button class="chart-timeframe-btn" data-timeframe="3M">3M</button>
<button class="chart-timeframe-btn" data-timeframe="6M">6M</button>
<button class="chart-timeframe-btn" data-timeframe="1Y">1Y</button>
<button class="chart-timeframe-btn" data-timeframe="ALL">ALL</button>
</div>
</div>
<div class="chart-wrapper">
<canvas id="priceChart"></canvas>
</div>
<div class="chart-footer">
<div id="chartLegend" class="chart-legend"></div>
<button id="closeChartBtn" class="close-chart-btn">✕ Close</button>
</div>
</div>
</section>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
<script src="/js/app.js"></script>
<script src="/js/dynamic-search.js"></script>
</body>
</html>