412 lines
24 KiB
HTML
412 lines
24 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>Apothecary — A personal inventory system</title>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
|
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />
|
|
<link rel="stylesheet" href="tokens.css" />
|
|
<style>
|
|
body { background: #1a1a1a; }
|
|
deck-stage { background: #1a1a1a; }
|
|
deck-stage > section {
|
|
background: var(--bg);
|
|
color: var(--ink);
|
|
font-family: var(--sans);
|
|
overflow: hidden;
|
|
display: flex;
|
|
}
|
|
.slide-pad { padding: 100px; width: 100%; height: 100%; display: flex; flex-direction: column; box-sizing: border-box; }
|
|
.eyebrow {
|
|
font-family: var(--mono);
|
|
font-size: 22px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.16em;
|
|
color: var(--ink-3);
|
|
font-weight: 500;
|
|
}
|
|
.h-display {
|
|
font-family: var(--serif);
|
|
font-size: 140px;
|
|
font-weight: 500;
|
|
line-height: 0.95;
|
|
letter-spacing: -0.025em;
|
|
color: var(--ink);
|
|
}
|
|
.h1 {
|
|
font-family: var(--serif);
|
|
font-size: 96px;
|
|
font-weight: 500;
|
|
line-height: 1;
|
|
letter-spacing: -0.02em;
|
|
color: var(--ink);
|
|
}
|
|
.h2 {
|
|
font-family: var(--serif);
|
|
font-size: 64px;
|
|
font-weight: 500;
|
|
line-height: 1.05;
|
|
letter-spacing: -0.015em;
|
|
color: var(--ink);
|
|
}
|
|
.body {
|
|
font-size: 34px;
|
|
line-height: 1.45;
|
|
color: var(--ink-2);
|
|
text-wrap: pretty;
|
|
}
|
|
.small {
|
|
font-size: 28px;
|
|
line-height: 1.45;
|
|
color: var(--ink-2);
|
|
}
|
|
.micro {
|
|
font-size: 24px;
|
|
color: var(--ink-3);
|
|
}
|
|
.mono-label {
|
|
font-family: var(--mono);
|
|
font-size: 22px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.12em;
|
|
color: var(--ink-3);
|
|
}
|
|
.hairline { border-top: 1px solid var(--line); }
|
|
.footer {
|
|
position: absolute;
|
|
bottom: 60px;
|
|
left: 100px;
|
|
right: 100px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
font-family: var(--mono);
|
|
font-size: 18px;
|
|
color: var(--ink-3);
|
|
letter-spacing: 0.08em;
|
|
text-transform: uppercase;
|
|
}
|
|
.swatch-card {
|
|
background: var(--surface);
|
|
border: 1px solid var(--line);
|
|
border-radius: 14px;
|
|
padding: 36px;
|
|
}
|
|
.stat-display {
|
|
font-family: var(--serif);
|
|
font-size: 200px;
|
|
font-weight: 400;
|
|
line-height: 0.9;
|
|
letter-spacing: -0.03em;
|
|
color: var(--ink);
|
|
}
|
|
.quote {
|
|
font-family: var(--serif);
|
|
font-size: 76px;
|
|
font-weight: 400;
|
|
font-style: italic;
|
|
line-height: 1.2;
|
|
letter-spacing: -0.015em;
|
|
color: var(--ink);
|
|
text-wrap: balance;
|
|
}
|
|
.bg-parchment { background: var(--bg-2); }
|
|
.bg-ink { background: var(--ink); color: var(--bg); }
|
|
.bg-ink .h2, .bg-ink .h1, .bg-ink .h-display { color: var(--bg); }
|
|
.bg-ink .eyebrow, .bg-ink .micro, .bg-ink .body, .bg-ink .small { color: oklch(80% 0.012 75); }
|
|
.bg-sage { background: oklch(45% 0.06 145); color: oklch(95% 0.02 145); }
|
|
.bg-sage .h1, .bg-sage .h2, .bg-sage .h-display, .bg-sage .quote { color: oklch(96% 0.02 145); }
|
|
.bg-sage .eyebrow, .bg-sage .body, .bg-sage .micro { color: oklch(85% 0.04 145); }
|
|
.bg-terra { background: oklch(48% 0.10 40); color: oklch(96% 0.02 40); }
|
|
.bg-terra .h1, .bg-terra .h2, .bg-terra .h-display { color: oklch(96% 0.02 40); }
|
|
.bg-terra .eyebrow, .bg-terra .body, .bg-terra .micro { color: oklch(86% 0.04 40); }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<deck-stage width="1920" height="1080">
|
|
|
|
<!-- 01 — Cover -->
|
|
<section data-label="01 Cover" style="position: relative; flex-direction: column; justify-content: space-between;">
|
|
<div class="slide-pad" style="justify-content: space-between;">
|
|
<div style="display: flex; align-items: center; gap: 14px;">
|
|
<div style="width: 56px; height: 56px; border-radius: 50%; border: 1.5px solid var(--ink); display: flex; align-items: center; justify-content: center; font-family: var(--serif); font-size: 30px; font-style: italic;">A</div>
|
|
<div>
|
|
<div style="font-family: var(--serif); font-size: 32px; font-weight: 500; line-height: 1;">Apothecary</div>
|
|
<div class="mono-label" style="font-size: 16px;">A personal log</div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="eyebrow" style="margin-bottom: 28px;">Concept · Apr 2026</div>
|
|
<div class="h-display" style="font-style: italic;">A quiet, careful<br/>record of what's<br/>in your cabinet.</div>
|
|
<div class="body" style="margin-top: 36px; max-width: 1100px; font-size: 36px;">
|
|
A personal inventory system for keeping clean, professional records of cannabis purchases — what you have, where it lives, what you've used, and what's worth buying again.
|
|
</div>
|
|
</div>
|
|
<div style="display: flex; justify-content: space-between; align-items: flex-end;">
|
|
<div class="micro">For personal use · Local-first · No accounts</div>
|
|
<div class="mono-label" style="font-size: 16px;">v0.4 · CONCEPT DECK</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 02 — Why -->
|
|
<section data-label="02 Why this exists">
|
|
<div class="slide-pad">
|
|
<div class="eyebrow">Why this exists</div>
|
|
<div class="h1" style="margin-top: 32px; max-width: 1500px;">Notes apps and spreadsheets can't keep up with a real apothecary.</div>
|
|
<div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 60px; margin-top: 100px; padding-top: 60px; border-top: 1px solid var(--line);">
|
|
<div>
|
|
<div class="mono-label" style="margin-bottom: 20px;">01 Memory fades</div>
|
|
<div class="small">You forget what you paid, where you bought it, or whether the last batch was any good.</div>
|
|
</div>
|
|
<div>
|
|
<div class="mono-label" style="margin-bottom: 20px;">02 Spend goes unmeasured</div>
|
|
<div class="small">Without a real per-gram view, it's easy to over-pay and not realize the trend.</div>
|
|
</div>
|
|
<div>
|
|
<div class="mono-label" style="margin-bottom: 20px;">03 Habits are invisible</div>
|
|
<div class="small">Daily, weekly, and monthly use are hard to see clearly without a structured log.</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 03 — Big stat -->
|
|
<section data-label="03 The market" class="bg-parchment">
|
|
<div class="slide-pad" style="justify-content: center;">
|
|
<div class="eyebrow" style="margin-bottom: 40px;">The premise</div>
|
|
<div class="stat-display">$1,847</div>
|
|
<div class="h2" style="margin-top: 30px; max-width: 1300px;">is what a moderate consumer might spend in a year — without a single line item to show for it.</div>
|
|
<div class="micro" style="margin-top: 60px;">Apothecary turns that into a record you actually own.</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 04 — What it is -->
|
|
<section data-label="04 What it is">
|
|
<div class="slide-pad">
|
|
<div class="eyebrow">What it is</div>
|
|
<div class="h1" style="margin-top: 32px;">An inventory system,<br/><span style="font-style: italic; color: var(--ink-2);">designed like a library catalog.</span></div>
|
|
<div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px; margin-top: 80px;">
|
|
<div class="swatch-card">
|
|
<div class="mono-label">Every item is tracked</div>
|
|
<div class="h2" style="font-size: 42px; margin-top: 14px;">SKU, asset tag, weight, THC, CBD, total cannabinoids, shop, brand, type, date.</div>
|
|
</div>
|
|
<div class="swatch-card">
|
|
<div class="mono-label">Every item has a place</div>
|
|
<div class="h2" style="font-size: 42px; margin-top: 14px;">Physical bins — Top Drawer, Apothecary Box, The Safe — with capacity limits.</div>
|
|
</div>
|
|
<div class="swatch-card">
|
|
<div class="mono-label">Mark when finished</div>
|
|
<div class="h2" style="font-size: 42px; margin-top: 14px;">Date finished, rating, and final notes — the archive becomes a tasting library.</div>
|
|
</div>
|
|
<div class="swatch-card">
|
|
<div class="mono-label">Nothing leaves the archive</div>
|
|
<div class="h2" style="font-size: 42px; margin-top: 14px;">Consumed items keep their record — final notes, rating, lifespan, all preserved.</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 05 — Section header -->
|
|
<section data-label="05 Section: Dashboard" class="bg-ink">
|
|
<div class="slide-pad" style="justify-content: center; align-items: flex-start;">
|
|
<div class="mono-label" style="color: oklch(70% 0.04 145);">Part 01 / 03</div>
|
|
<div class="h-display" style="font-size: 160px; margin-top: 24px;">Dashboard.</div>
|
|
<div class="body" style="margin-top: 40px; max-width: 1200px; font-size: 36px; color: oklch(80% 0.012 75);">The morning glance. Daily averages, spend trends, days of supply — everything you need to see in a single look.</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 06 — Stats showcase -->
|
|
<section data-label="06 The numbers">
|
|
<div class="slide-pad">
|
|
<div class="eyebrow">What the dashboard answers</div>
|
|
<div class="h2" style="margin-top: 28px; max-width: 1500px;">Ten quiet questions you've never asked out loud.</div>
|
|
<div style="display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; margin-top: 80px; background: var(--line); border: 1px solid var(--line); border-radius: 14px; overflow: hidden;">
|
|
<div style="background: var(--surface); padding: 36px;"><div class="mono-label" style="font-size: 18px; margin-bottom: 12px;">Daily avg</div><div style="font-family: var(--serif); font-size: 56px; line-height: 1;">0.52<span style="font-size: 22px; color: var(--ink-3); margin-left: 6px;">g</span></div></div>
|
|
<div style="background: var(--surface); padding: 36px;"><div class="mono-label" style="font-size: 18px; margin-bottom: 12px;">Avg $/g</div><div style="font-family: var(--serif); font-size: 56px; line-height: 1;">$13.40</div></div>
|
|
<div style="background: var(--surface); padding: 36px;"><div class="mono-label" style="font-size: 18px; margin-bottom: 12px;">30d spend</div><div style="font-family: var(--serif); font-size: 56px; line-height: 1;">$284</div></div>
|
|
<div style="background: var(--surface); padding: 36px;"><div class="mono-label" style="font-size: 18px; margin-bottom: 12px;">7d THC</div><div style="font-family: var(--serif); font-size: 56px; line-height: 1;">766<span style="font-size: 22px; color: var(--ink-3); margin-left: 6px;">mg</span></div></div>
|
|
<div style="background: var(--surface); padding: 36px;"><div class="mono-label" style="font-size: 18px; margin-bottom: 12px;">Avg lifespan</div><div style="font-family: var(--serif); font-size: 56px; line-height: 1;">37<span style="font-size: 22px; color: var(--ink-3); margin-left: 6px;">d</span></div></div>
|
|
<div style="background: var(--surface); padding: 36px;"><div class="mono-label" style="font-size: 18px; margin-bottom: 12px;">Inv. value</div><div style="font-family: var(--serif); font-size: 56px; line-height: 1;">$398</div></div>
|
|
<div style="background: var(--surface); padding: 36px;"><div class="mono-label" style="font-size: 18px; margin-bottom: 12px;">Days supply</div><div style="font-family: var(--serif); font-size: 56px; line-height: 1;">28<span style="font-size: 22px; color: var(--ink-3); margin-left: 6px;">d</span></div></div>
|
|
<div style="background: var(--surface); padding: 36px;"><div class="mono-label" style="font-size: 18px; margin-bottom: 12px;">Avg gap</div><div style="font-family: var(--serif); font-size: 56px; line-height: 1;">8.4<span style="font-size: 22px; color: var(--ink-3); margin-left: 6px;">d</span></div></div>
|
|
<div style="background: var(--surface); padding: 36px;"><div class="mono-label" style="font-size: 18px; margin-bottom: 12px;">Top shop</div><div style="font-family: var(--serif); font-size: 36px; line-height: 1.05; margin-top: 14px;">Greenleaf Co-op</div></div>
|
|
<div style="background: var(--surface); padding: 36px;"><div class="mono-label" style="font-size: 18px; margin-bottom: 12px;">Top brand</div><div style="font-family: var(--serif); font-size: 36px; line-height: 1.05; margin-top: 14px;">Foxglove Farms</div></div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 07 — Section header -->
|
|
<section data-label="07 Section: Inventory" class="bg-sage">
|
|
<div class="slide-pad" style="justify-content: center; align-items: flex-start;">
|
|
<div class="mono-label">Part 02 / 03</div>
|
|
<div class="h-display" style="font-size: 160px; margin-top: 24px;">Inventory.</div>
|
|
<div class="body" style="margin-top: 40px; max-width: 1200px; font-size: 36px;">Each product gets a SKU, an optional asset tag, a bin, a price, a chemistry. The catalog of a small, careful library.</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 08 — Product anatomy -->
|
|
<section data-label="08 Product anatomy">
|
|
<div class="slide-pad">
|
|
<div class="eyebrow">Anatomy of a product</div>
|
|
<div class="h2" style="margin-top: 28px;">Every entry, comprehensive.</div>
|
|
<div style="display: grid; grid-template-columns: 1.4fr 1fr; gap: 80px; margin-top: 60px; align-items: flex-start;">
|
|
<div style="border: 1px solid var(--line); border-radius: 14px; padding: 50px; background: var(--surface);">
|
|
<div class="mono-label" style="font-size: 18px;">◆ Concentrate · Active</div>
|
|
<div style="font-family: var(--serif); font-size: 72px; font-weight: 500; line-height: 1; margin-top: 14px; letter-spacing: -0.02em;">Indigo Cellar<br/>Live Rosin</div>
|
|
<div class="small" style="margin-top: 14px; font-size: 28px;">Heirloom Botanicals · from The Field House</div>
|
|
<div style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin-top: 50px; background: var(--line); border: 1px solid var(--line); border-radius: 10px; overflow: hidden;">
|
|
<div style="background: var(--surface); padding: 22px;"><div class="mono-label" style="font-size: 14px;">Price</div><div style="font-family: var(--serif); font-size: 38px; margin-top: 8px;">$65</div></div>
|
|
<div style="background: var(--surface); padding: 22px;"><div class="mono-label" style="font-size: 14px;">Weight</div><div style="font-family: var(--serif); font-size: 38px; margin-top: 8px;">1.0 g</div></div>
|
|
<div style="background: var(--surface); padding: 22px;"><div class="mono-label" style="font-size: 14px;">THC</div><div style="font-family: var(--serif); font-size: 38px; margin-top: 8px;">78.4%</div></div>
|
|
<div style="background: var(--surface); padding: 22px;"><div class="mono-label" style="font-size: 14px;">CBD</div><div style="font-family: var(--serif); font-size: 38px; margin-top: 8px;">0.2%</div></div>
|
|
</div>
|
|
<div style="margin-top: 30px; font-family: var(--mono); font-size: 22px; color: var(--ink-3); display: flex; gap: 24px;">
|
|
<span>SKU-A39FQX</span>
|
|
<span>·</span>
|
|
<span>AT-0042</span>
|
|
<span>·</span>
|
|
<span>The Safe</span>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="mono-label" style="margin-bottom: 30px;">Tracked fields</div>
|
|
<ul style="list-style: none; padding: 0; margin: 0; font-size: 26px; line-height: 1.9; color: var(--ink-2);">
|
|
<li>— Name & brand</li>
|
|
<li>— SKU + optional asset tag</li>
|
|
<li>— Type (flower, concentrate, edible, vape, pre-roll, tincture)</li>
|
|
<li>— Shop & purchase date</li>
|
|
<li>— Price + computed cost-per-gram</li>
|
|
<li>— Weight, THC%, CBD%, total cannabinoids%</li>
|
|
<li>— Bin location & remaining quantity</li>
|
|
<li>— Final notes & rating after consumed</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 09 — Bins -->
|
|
<section data-label="09 Bins" class="bg-parchment">
|
|
<div class="slide-pad">
|
|
<div class="eyebrow">Storage</div>
|
|
<div class="h1" style="margin-top: 32px;">Every product knows<br/>where it lives.</div>
|
|
<div style="display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; margin-top: 90px;">
|
|
<div style="background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 28px; aspect-ratio: 0.85; display: flex; flex-direction: column;">
|
|
<div class="mono-label" style="font-size: 16px;">Bin 01</div>
|
|
<div style="font-family: var(--serif); font-size: 40px; font-weight: 500; line-height: 1.05; margin-top: 14px;">Top Drawer</div>
|
|
<div class="micro" style="margin-top: 8px;">Bedroom</div>
|
|
<div style="flex: 1;"></div>
|
|
<div style="height: 4px; background: oklch(85% 0.02 75); border-radius: 2px; margin-bottom: 10px;"><div style="width: 30%; height: 100%; background: var(--sage); border-radius: 2px;"></div></div>
|
|
<div class="mono-label" style="font-size: 14px;">4 / 14</div>
|
|
</div>
|
|
<div style="background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 28px; aspect-ratio: 0.85; display: flex; flex-direction: column;">
|
|
<div class="mono-label" style="font-size: 16px;">Bin 02</div>
|
|
<div style="font-family: var(--serif); font-size: 40px; font-weight: 500; line-height: 1.05; margin-top: 14px;">Apothecary Box</div>
|
|
<div class="micro" style="margin-top: 8px;">Office shelf</div>
|
|
<div style="flex: 1;"></div>
|
|
<div style="height: 4px; background: oklch(85% 0.02 75); border-radius: 2px; margin-bottom: 10px;"><div style="width: 20%; height: 100%; background: var(--sage); border-radius: 2px;"></div></div>
|
|
<div class="mono-label" style="font-size: 14px;">2 / 10</div>
|
|
</div>
|
|
<div style="background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 28px; aspect-ratio: 0.85; display: flex; flex-direction: column;">
|
|
<div class="mono-label" style="font-size: 16px;">Bin 03</div>
|
|
<div style="font-family: var(--serif); font-size: 40px; font-weight: 500; line-height: 1.05; margin-top: 14px;">The Safe</div>
|
|
<div class="micro" style="margin-top: 8px;">Closet</div>
|
|
<div style="flex: 1;"></div>
|
|
<div style="height: 4px; background: oklch(85% 0.02 75); border-radius: 2px; margin-bottom: 10px;"><div style="width: 38%; height: 100%; background: var(--sage); border-radius: 2px;"></div></div>
|
|
<div class="mono-label" style="font-size: 14px;">3 / 8</div>
|
|
</div>
|
|
<div style="background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 28px; aspect-ratio: 0.85; display: flex; flex-direction: column;">
|
|
<div class="mono-label" style="font-size: 16px;">Bin 04</div>
|
|
<div style="font-family: var(--serif); font-size: 40px; font-weight: 500; line-height: 1.05; margin-top: 14px;">Travel Tin</div>
|
|
<div class="micro" style="margin-top: 8px;">Backpack</div>
|
|
<div style="flex: 1;"></div>
|
|
<div style="height: 4px; background: oklch(85% 0.02 75); border-radius: 2px; margin-bottom: 10px;"><div style="width: 50%; height: 100%; background: var(--amber); border-radius: 2px;"></div></div>
|
|
<div class="mono-label" style="font-size: 14px;">2 / 4</div>
|
|
</div>
|
|
<div style="background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 28px; aspect-ratio: 0.85; display: flex; flex-direction: column;">
|
|
<div class="mono-label" style="font-size: 16px;">Bin 05</div>
|
|
<div style="font-family: var(--serif); font-size: 40px; font-weight: 500; line-height: 1.05; margin-top: 14px;">Cold Storage</div>
|
|
<div class="micro" style="margin-top: 8px;">Fridge — back</div>
|
|
<div style="flex: 1;"></div>
|
|
<div style="height: 4px; background: oklch(85% 0.02 75); border-radius: 2px; margin-bottom: 10px;"><div style="width: 17%; height: 100%; background: var(--sage); border-radius: 2px;"></div></div>
|
|
<div class="mono-label" style="font-size: 14px;">1 / 6</div>
|
|
</div>
|
|
</div>
|
|
<div class="micro" style="margin-top: 60px; max-width: 1400px;">When a product is consumed, it leaves its bin but stays in the archive — keeping the record of what worked, what didn't, and what's worth a rebuy.</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 10 — Section: Habit -->
|
|
<section data-label="10 Section: Patterns" class="bg-terra">
|
|
<div class="slide-pad" style="justify-content: center; align-items: flex-start;">
|
|
<div class="mono-label">Part 03 / 03</div>
|
|
<div class="h-display" style="font-size: 160px; margin-top: 24px;">Patterns.</div>
|
|
<div class="body" style="margin-top: 40px; max-width: 1200px; font-size: 36px;">Where the data quietly becomes useful — habits made visible, spend made measurable.</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 11 — Quote -->
|
|
<section data-label="11 Quote">
|
|
<div class="slide-pad" style="justify-content: center;">
|
|
<div style="max-width: 1500px;">
|
|
<div class="quote">"You can't keep<br/>what you don't<br/>write down."</div>
|
|
<div class="mono-label" style="margin-top: 60px;">— Operating principle</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 12 — Roadmap / next -->
|
|
<section data-label="12 Next">
|
|
<div class="slide-pad">
|
|
<div class="eyebrow">What's next</div>
|
|
<div class="h1" style="margin-top: 32px;">Three releases<br/>to feel done.</div>
|
|
<div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 60px; margin-top: 100px; padding-top: 50px; border-top: 1px solid var(--line);">
|
|
<div>
|
|
<div class="mono-label">v0.5 · May</div>
|
|
<div class="h2" style="font-size: 44px; margin-top: 16px;">Add & consume</div>
|
|
<div class="small" style="margin-top: 18px; font-size: 26px;">Polish on the entry forms, barcode & receipt photo capture, faster bulk add.</div>
|
|
</div>
|
|
<div>
|
|
<div class="mono-label">v0.7 · July</div>
|
|
<div class="h2" style="font-size: 44px; margin-top: 16px;">Charts & export</div>
|
|
<div class="small" style="margin-top: 18px; font-size: 26px;">Heatmap, monthly spend, shop comparisons. CSV & JSON export with no cloud.</div>
|
|
</div>
|
|
<div>
|
|
<div class="mono-label">v1.0 · September</div>
|
|
<div class="h2" style="font-size: 44px; margin-top: 16px;">Mobile app</div>
|
|
<div class="small" style="margin-top: 18px; font-size: 26px;">Native iOS / Android with biometric lock. Same local-first principle.</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 13 — End -->
|
|
<section data-label="13 End" class="bg-ink">
|
|
<div class="slide-pad" style="justify-content: space-between;">
|
|
<div style="display: flex; align-items: center; gap: 14px;">
|
|
<div style="width: 56px; height: 56px; border-radius: 50%; border: 1.5px solid var(--bg); display: flex; align-items: center; justify-content: center; font-family: var(--serif); font-size: 30px; font-style: italic; color: var(--bg);">A</div>
|
|
<div>
|
|
<div style="font-family: var(--serif); font-size: 32px; font-weight: 500; line-height: 1; color: var(--bg);">Apothecary</div>
|
|
<div class="mono-label" style="font-size: 16px; color: oklch(70% 0.04 145);">A personal log</div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="h-display" style="font-style: italic; color: var(--bg); font-size: 180px;">Keep<br/>a record.</div>
|
|
<div class="body" style="margin-top: 50px; font-size: 36px; color: oklch(80% 0.012 75); max-width: 1100px;">A small, careful inventory of a small, careful library.</div>
|
|
</div>
|
|
<div style="display: flex; justify-content: space-between; align-items: flex-end;">
|
|
<div class="mono-label" style="color: oklch(70% 0.04 145);">Live prototype available</div>
|
|
<div class="mono-label" style="color: oklch(70% 0.04 145); font-size: 16px;">END · 13 / 13</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
</deck-stage>
|
|
|
|
<script src="deck-stage.js"></script>
|
|
</body>
|
|
</html>
|