Add initial project files
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
91
frontend/index.html
Normal file
91
frontend/index.html
Normal file
@@ -0,0 +1,91 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Bourbonacci — Infinity Bottle Tracker</title>
|
||||
<link rel="stylesheet" href="/css/style.css" />
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<nav>
|
||||
<a href="/index.html" class="nav-brand">🥃 Bourbonacci</a>
|
||||
<div class="nav-links" id="nav-links"></div>
|
||||
<div id="nav-user"></div>
|
||||
</nav>
|
||||
|
||||
<main>
|
||||
<div class="hero">
|
||||
<h1>The Infinity Bottle</h1>
|
||||
<p>One pour from every bottle. An ever-evolving blend that grows richer with every addition.</p>
|
||||
<a href="/login.html" class="btn btn-primary" id="hero-cta">Track Your Bottle</a>
|
||||
</div>
|
||||
|
||||
<div class="section-header">
|
||||
<h2>Community Bottles</h2>
|
||||
</div>
|
||||
|
||||
<div id="user-cards" class="user-cards">
|
||||
<div class="empty"><div class="empty-icon">⏳</div><p>Loading...</p></div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<script src="/js/api.js"></script>
|
||||
<script src="/js/auth.js"></script>
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', async () => {
|
||||
await Auth.renderNav('home');
|
||||
|
||||
if (Auth.isLoggedIn()) {
|
||||
document.getElementById('hero-cta').textContent = 'Go to My Bottle';
|
||||
document.getElementById('hero-cta').href = '/dashboard.html';
|
||||
}
|
||||
|
||||
const container = document.getElementById('user-cards');
|
||||
|
||||
try {
|
||||
const stats = await API.public.stats();
|
||||
|
||||
if (stats.length === 0) {
|
||||
container.innerHTML = `<div class="empty"><div class="empty-icon">🥃</div><p>No bottles yet — be the first to register!</p></div>`;
|
||||
return;
|
||||
}
|
||||
|
||||
container.innerHTML = stats.map(u => {
|
||||
const maxShots = 25;
|
||||
const pct = Math.min(100, (u.current_total_shots / maxShots) * 100);
|
||||
const proof = u.estimated_proof != null ? `${u.estimated_proof}` : '—';
|
||||
return `
|
||||
<div class="user-card">
|
||||
<div class="user-card-name">${escHtml(u.display_name)}</div>
|
||||
<div class="stats-grid" style="margin-bottom:.75rem">
|
||||
<div class="stat-box">
|
||||
<span class="stat-value">${u.total_add_entries}</span>
|
||||
<span class="stat-label">Bourbons</span>
|
||||
</div>
|
||||
<div class="stat-box">
|
||||
<span class="stat-value">${proof}</span>
|
||||
<span class="stat-label">Est. Proof</span>
|
||||
</div>
|
||||
<div class="stat-box">
|
||||
<span class="stat-value">${u.current_total_shots}</span>
|
||||
<span class="stat-label">Shots Left</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottle-bar-wrap">
|
||||
<div class="bottle-bar" style="width:${pct}%"></div>
|
||||
</div>
|
||||
<div class="bottle-label">${u.current_total_shots} shots remaining</div>
|
||||
</div>`;
|
||||
}).join('');
|
||||
} catch (err) {
|
||||
container.innerHTML = `<div class="alert alert-error">Could not load stats: ${err.message}</div>`;
|
||||
}
|
||||
});
|
||||
|
||||
function escHtml(s) {
|
||||
return String(s).replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>');
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user