63 lines
2.8 KiB
HTML
63 lines
2.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta http-equiv="X-Content-Type-Options" content="nosniff">
|
|
<meta http-equiv="X-Frame-Options" content="DENY">
|
|
<meta http-equiv="X-XSS-Protection" content="1; mode=block">
|
|
<meta http-equiv="Referrer-Policy" content="strict-origin-when-cross-origin">
|
|
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; style-src 'self' 'unsafe-inline' https://fonts.bunny.net; font-src 'self' https://fonts.bunny.net; connect-src 'self'; script-src 'self'; img-src 'self' data:; object-src 'none'; base-uri 'self'; form-action 'self';">
|
|
<title>Chemex Pour-Over Guide</title>
|
|
<link rel="stylesheet" href="style.css">
|
|
<link rel="preconnect" href="https://fonts.bunny.net">
|
|
<link href="https://fonts.bunny.net/css?family=poppins:300,400,600&display=swap" rel="stylesheet">
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<header>
|
|
<h1>Chemex Brew Guide</h1>
|
|
<p>Barista-Recommended Recipe</p>
|
|
</header>
|
|
|
|
<div id="setup" class="step-card active">
|
|
<h2>Get Ready</h2>
|
|
<ul class="recipe-overview">
|
|
<li><strong>Coffee:</strong> 21g (Medium-fine grind)</li>
|
|
<li><strong>Water:</strong> 340g at 94-96°C</li>
|
|
<li><strong>Ratio:</strong> 1:16</li>
|
|
<li><strong>Total Time:</strong> ~4:00 min</li>
|
|
</ul>
|
|
<p class="tip">Preheat your Chemex and metal filter with hot water before you begin.</p>
|
|
<button id="start-btn" class="btn">Start Brewing</button>
|
|
</div>
|
|
|
|
<div id="brewing-process" class="step-card">
|
|
<div class="timer-container">
|
|
<svg class="progress-ring" width="200" height="200">
|
|
<circle class="progress-ring__bg" stroke-width="8" fill="transparent" r="90" cx="100" cy="100"/>
|
|
<circle class="progress-ring__circle" stroke-width="8" fill="transparent" r="90" cx="100" cy="100"/>
|
|
</svg>
|
|
<div class="timer-text">
|
|
<span id="timer-display">0:00</span>
|
|
<span id="total-water">0g</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="instructions">
|
|
<h2 id="step-title"></h2>
|
|
<p id="step-instruction"></p>
|
|
</div>
|
|
|
|
<div class="controls">
|
|
<button id="pause-btn" class="btn btn-pause">Pause</button>
|
|
<button id="next-btn" class="btn">Next Step</button>
|
|
<button id="reset-btn" class="btn btn-secondary">Reset</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="script.js?v=4"></script>
|
|
</body>
|
|
</html>
|