130 lines
5.3 KiB
HTML
130 lines
5.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Pour-Over Coffee Timer</title>
|
|
<link rel="stylesheet" href="style.css">
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<!-- Welcome Screen -->
|
|
<div id="welcome-screen" class="screen active">
|
|
<div class="coffee-header">
|
|
<div class="coffee-icon">☕</div>
|
|
<h1>Pour-Over Coffee Timer</h1>
|
|
<p class="subtitle">Barista-Recommended Recipe</p>
|
|
</div>
|
|
|
|
<div class="recipe-overview card">
|
|
<div class="recipe-stats">
|
|
<div class="stat">
|
|
<span class="stat-label">Coffee</span>
|
|
<span class="stat-value">21g</span>
|
|
</div>
|
|
<div class="stat">
|
|
<span class="stat-label">Water</span>
|
|
<span class="stat-value">340g</span>
|
|
</div>
|
|
<div class="stat">
|
|
<span class="stat-label">Ratio</span>
|
|
<span class="stat-value">1:16</span>
|
|
</div>
|
|
<div class="stat">
|
|
<span class="stat-label">Time</span>
|
|
<span class="stat-value">3:30-4:00</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="recipe-details">
|
|
<p><strong>Water Temperature:</strong> 94-96°C</p>
|
|
<p><strong>Grind Size:</strong> Medium-fine</p>
|
|
</div>
|
|
</div>
|
|
|
|
<button class="btn btn--primary btn--lg btn--full-width" onclick="startBrewing()">
|
|
Start Brewing
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Brewing Screen -->
|
|
<div id="brewing-screen" class="screen">
|
|
<div class="brewing-header">
|
|
<div class="step-indicator">
|
|
<span id="current-step">Step 1</span> of 5
|
|
</div>
|
|
<div class="progress-bar">
|
|
<div class="progress-fill" id="progress-fill"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="step-content">
|
|
<div class="step-icon" id="step-icon">🔧</div>
|
|
<h2 id="step-title">Preparation</h2>
|
|
<p id="step-description">Set up your equipment and ingredients</p>
|
|
|
|
<div class="water-indicator" id="water-indicator">
|
|
<span class="water-label">Water Amount</span>
|
|
<span class="water-amount" id="water-amount">0g</span>
|
|
</div>
|
|
|
|
<ul class="step-details" id="step-details">
|
|
<li>Grind 21g coffee to medium-fine consistency</li>
|
|
<li>Heat 340g filtered water to 94-96°C</li>
|
|
<li>Place metal filter in Chemex</li>
|
|
<li>Zero your scale with Chemex on it</li>
|
|
</ul>
|
|
|
|
<div class="timer-section" id="timer-section" style="display: none;">
|
|
<div class="timer-display" id="timer-display">00:45</div>
|
|
<div class="timer-controls">
|
|
<button class="btn btn--outline timer-btn" id="play-pause-btn" onclick="toggleTimer()">
|
|
<span id="play-pause-text">▶</span>
|
|
</button>
|
|
<button class="btn btn--outline timer-btn" onclick="resetTimer()">
|
|
<span>↻</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<button class="btn btn--primary btn--lg btn--full-width" id="next-step-btn" onclick="nextStep()">
|
|
Ready
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Completion Screen -->
|
|
<div id="completion-screen" class="screen">
|
|
<div class="completion-content">
|
|
<div class="completion-icon">🎉</div>
|
|
<h1>Perfect Brew!</h1>
|
|
<p class="completion-message">Your pour-over coffee is ready to enjoy.</p>
|
|
|
|
<div class="completion-stats card">
|
|
<h3>Brewing Complete</h3>
|
|
<p>You've successfully completed the barista-recommended pour-over process.</p>
|
|
<div class="completion-tips">
|
|
<h4>Pro Tips:</h4>
|
|
<ul>
|
|
<li>Give your brew a gentle swirl before serving</li>
|
|
<li>Serve immediately for best flavor</li>
|
|
<li>Clean your equipment while the coffee is hot</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="completion-actions">
|
|
<button class="btn btn--primary btn--lg" onclick="restartBrewing()">
|
|
Brew Another
|
|
</button>
|
|
<button class="btn btn--outline btn--lg" onclick="goToWelcome()">
|
|
Back to Recipe
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="app.js"></script>
|
|
</body>
|
|
</html> |