Coffee_Windsurf/index.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>