44 lines
1.8 KiB
HTML
44 lines
1.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Work Break Timer</title>
|
|
<link rel="stylesheet" href="styles.css">
|
|
</head>
|
|
|
|
<body>
|
|
<div class="container">
|
|
<h1 class="title">Work Break Timer</h1>
|
|
|
|
<div class="timer-display" id="timerDisplay">22:00</div>
|
|
|
|
<div class="controls-section">
|
|
<div class="adjustment-buttons">
|
|
<button class="btn adjust-btn" data-minutes="1">+1 min</button>
|
|
<button class="btn adjust-btn" data-minutes="5">+5 min</button>
|
|
<button class="btn adjust-btn" data-minutes="10">+10 min</button>
|
|
<button class="btn adjust-btn" data-minutes="30">+30 min</button>
|
|
</div>
|
|
|
|
<div class="main-controls">
|
|
<button class="btn control-btn start-btn" id="startBtn">Start</button>
|
|
<button class="btn control-btn reset-btn" id="resetBtn">Reset</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Simple beep sound using data URI to avoid external dependencies if possible,
|
|
but for better browser compatibility across strict policies, we might need user interaction first.
|
|
The requirements said "simple HTML5 audio element or generated beep".
|
|
I'll use a generated beep in JS or a simple oscillator, but for the HTML structure,
|
|
I'll leave a placeholder or just handle it in JS.
|
|
Let's stick to handling it in JS with AudioContext for a generated beep as it's cleaner than a file.
|
|
But the plan mentioned an audio element. I'll add a hidden one just in case I want to use a file later,
|
|
but I'll primarily use JS for the beep as it's "pure" and doesn't require assets. -->
|
|
|
|
<script src="main.js"></script>
|
|
</body>
|
|
|
|
</html> |