CooperandGoodman/bourbonacci
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add about page, update login redirect, and hero button tweaks

Browse Source 
- Add about.html explaining infinity bottles, why to track, how to start
- Hero shows "What is it?" + "Track Your Bottle" when logged out; hides about button when logged in
- Redirect after login goes to index (community page) instead of dashboard
- redirectIfLoggedIn also sends to index

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Derek Cooper
2026-03-24 22:14:24 -07:00
parent 1ac5a191be
commit 46499f4cb9
4 changed files with 89 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

82
frontend/about.html Normal file
View File

@@ -0,0 +1,82 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>What is an Infinity Bottle? — Bourbonacci</title>
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🥃</text></svg>" />
<link rel="stylesheet" href="/css/style.css" />
</head>
<body>
<nav>
<div class="nav-left">
<a href="/index.html" class="nav-brand">🥃 Bourbonacci</a>
<div class="nav-links" id="nav-links"></div>
</div>
<div id="nav-user"></div>
</nav>
<main style="max-width:720px">
<h1 class="page-title">What is an Infinity Bottle?</h1>
<div class="card" style="margin-bottom:1.5rem">
<div class="card-title">The Concept</div>
<p style="color:var(--cream);line-height:1.8;margin-bottom:1rem">
An infinity bottle — sometimes called a solera bottle or a blending bottle — is a single vessel that you add small pours from other bottles into over time. Every time you open a new bourbon, you contribute a shot or two to the blend. The bottle is never fully emptied; you drink from it while continuing to add to it, so the blend is always evolving.
</p>
<p style="color:var(--cream);line-height:1.8">
The result is a completely unique whiskey that exists nowhere else in the world — a living record of every bottle you've ever opened, layered together into something greater than the sum of its parts.
</p>
</div>
<div class="card" style="margin-bottom:1.5rem">
<div class="card-title">Why Track It?</div>
<p style="color:var(--cream);line-height:1.8;margin-bottom:1rem">
As your blend grows, it becomes harder to remember what's in it. Tracking each addition lets you see the full history of your bottle — every bourbon that contributed, how much proof went in, and how the estimated proof of the blend has shifted over time.
</p>
<p style="color:var(--cream);line-height:1.8">
Bourbonacci keeps a running weighted-average proof based on how many shots of each bourbon you added, so you always have a rough idea of what you're drinking.
</p>
</div>
<div class="card" style="margin-bottom:1.5rem">
<div class="card-title">How to Get Started</div>
<ol style="color:var(--cream);line-height:2;padding-left:1.25rem">
<li>Find an empty bottle — a 750ml bottle is the classic choice, giving you roughly 25 shots of capacity.</li>
<li>Open a bourbon you enjoy and pour 1–2 shots into your infinity bottle.</li>
<li>Log the addition in Bourbonacci — name, proof, and how many shots.</li>
<li>Repeat with every new bourbon you open. You can add as little as half a shot or as many as you like.</li>
<li>Whenever you want to drink from the blend, pour from the infinity bottle and log a removal.</li>
<li>Never fully empty it — leaving some in the bottle keeps continuity in the blend.</li>
</ol>
</div>
<div class="card" style="margin-bottom:2rem">
<div class="card-title">Tips for a Great Blend</div>
<ul style="color:var(--cream);line-height:2;padding-left:1.25rem">
<li>Stick to a style — all bourbons, or all ryes, or a mix. Wild departures can throw off the balance.</li>
<li>Higher proof additions will nudge the blend up; lower proof will mellow it.</li>
<li>Don't overthink it. The whole point is that it's always changing.</li>
<li>Label your bottle with the date you started it.</li>
<li>Share the experience — pour a dram for friends and watch their reaction when you tell them what's in it.</li>
</ul>
</div>
<div style="display:flex;gap:1rem;flex-wrap:wrap">
<a href="/register.html" class="btn btn-primary">Start Tracking Your Bottle</a>
<a href="/index.html" class="btn btn-ghost">Back to Community Bottles</a>
</div>
</main>
<script src="/js/api.js"></script>
<script src="/js/auth.js"></script>
<script>
document.addEventListener('DOMContentLoaded', () => {
Auth.renderNav();
});
</script>
</body>
</html>

6
frontend/index.html
View File

@@ -21,7 +21,10 @@
<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 style="display:flex;gap:1rem;justify-content:center;flex-wrap:wrap">
<a href="/about.html" class="btn btn-ghost" id="hero-about">What is it?</a>
<a href="/register.html" class="btn btn-primary" id="hero-cta">Track Your Bottle</a>
</div>
</div>
<div class="section-header">
@@ -56,6 +59,7 @@ document.addEventListener('DOMContentLoaded', async () => {
if (Auth.isLoggedIn()) {
document.getElementById('hero-cta').textContent = 'Go to My Bottle';
document.getElementById('hero-cta').href = '/dashboard.html';
document.getElementById('hero-about').style.display = 'none';
}
const container = document.getElementById('user-cards');

2
frontend/js/auth.js
View File

@@ -37,7 +37,7 @@ const Auth = (() => {
}
function redirectIfLoggedIn() {
if (isLoggedIn()) window.location.href = '/dashboard.html';
if (isLoggedIn()) window.location.href = '/index.html';
}
async function renderNav(activePage) {

2
frontend/login.html
View File

@@ -70,7 +70,7 @@ document.addEventListener('DOMContentLoaded', () => {
const user = await API.users.me();
Auth.saveUser(user);
window.location.href = '/dashboard.html';
window.location.href = '/index.html';
} catch (err) {
alert.innerHTML = `<div class="alert alert-error">${err.message}</div>`;
btn.disabled = false;