timer/index.html at main · floolean/timer · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="description" content="Simple PWA timer app for iPhone">
    <meta name="theme-color" content="#1e88e5">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta name="apple-mobile-web-app-title" content="Timer">
    <link rel="apple-touch-icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 180'><rect fill='%231e88e5' width='180' height='180'/><text x='50%' y='50%' font-size='80' font-weight='bold' fill='white' text-anchor='middle' dominant-baseline='middle'>⏱</text></svg>">
    <link rel="manifest" href="manifest.json">
    <link rel="icon" type="image/svg+xml" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 192 192'><rect fill='%231e88e5' width='192' height='192'/><text x='50%' y='50%' font-size='100' fill='white' text-anchor='middle' dominant-baseline='middle'>⏱</text></svg>">
    <title>Timer App</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>
    <div class="container">
        <header class="header">
            <h1>Timers</h1>
            <div class="header-actions">
                <button type="button" id="themeToggleBtn" class="btn-theme-toggle" title="Toggle theme" aria-label="Toggle light/dark theme">☀︎</button>
                <button type="button" id="soundToggleBtn" class="btn-sound-toggle" aria-pressed="true">Sound On</button>
                <button type="button" id="soundStyleBtn" class="btn-sound-style" title="Cycle sound style">Beep</button>
                <button type="button" id="toggleAddBtn" class="btn-toggle-add" title="Add timer">+ Add</button>
            </div>
        </header>

        <div id="audioNudge" class="audio-nudge" role="dialog" aria-modal="true" aria-label="Restore sound">
            <div class="audio-nudge-content">
                <div class="audio-nudge-icon">🔇</div>
                <p class="audio-nudge-title">Sound paused</p>
                <p class="audio-nudge-sub">The browser suspended audio while the app was in the background.</p>
                <button id="audioNudgeBtn" class="audio-nudge-btn" type="button">Restore sound</button>
            </div>
        </div>

        <main class="main">
            <!-- Timers list -->
            <div id="timersList" class="timers-list"></div>

            <!-- Empty state -->
            <div id="emptyState" class="empty-state">
                <p>No timers yet</p>
                <p class="empty-hint">Create your first timer to get started</p>
            </div>
        </main>

        <!-- Add timer section -->
        <section id="addTimerSection" class="add-timer-section">
            <div class="input-group">
                <input
                    id="timerName"
                    type="text"
                    placeholder="Timer name (e.g., Coffee, Workout)"
                    class="timer-name-input"
                    maxlength="20"
                >
            </div>
            <div class="time-picker">
                <div class="time-field">
                    <label for="timerHours">H</label>
                    <input
                        id="timerHours"
                        type="number"
                        inputmode="numeric"
                        pattern="[0-9]*"
                        placeholder="0"
                        class="timer-time-input"
                        min="0"
                        max="99"
                        value="0"
                    >
                </div>
                <div class="time-field">
                    <label for="timerMinutes">M</label>
                    <input
                        id="timerMinutes"
                        type="number"
                        inputmode="numeric"
                        pattern="[0-9]*"
                        placeholder="00"
                        class="timer-time-input"
                        min="0"
                        max="59"
                        value="1"
                    >
                </div>
                <div class="time-field">
                    <label for="timerSeconds">S</label>
                    <input
                        id="timerSeconds"
                        type="number"
                        inputmode="numeric"
                        pattern="[0-9]*"
                        placeholder="00"
                        class="timer-time-input"
                        min="0"
                        max="59"
                        value="0"
                    >
                </div>
            </div>
            <div class="color-panel">
                <span class="color-label">Color:</span>
                <div class="color-picker">
                    <button type="button" class="color-option" data-color="blue" title="Blue"></button>
                    <button type="button" class="color-option" data-color="red" title="Red"></button>
                    <button type="button" class="color-option" data-color="green" title="Green"></button>
                    <button type="button" class="color-option" data-color="orange" title="Orange"></button>
                    <button type="button" class="color-option" data-color="purple" title="Purple"></button>
                    <button type="button" class="color-option" data-color="pink" title="Pink"></button>
                    <button type="button" class="color-option" data-color="teal" title="Teal"></button>
                    <button type="button" class="color-option" data-color="yellow" title="Yellow"></button>
                </div>
            </div>
            <button id="addTimerBtn" class="btn btn-primary">Add Timer</button>
        </section>
    </div>

    <script>
        if ('serviceWorker' in navigator) {
            navigator.serviceWorker.register('service-worker.js').catch(err => {
                console.log('ServiceWorker registration failed: ', err);
            });
        }
    </script>
    <script src="index.js"></script>
</body>
</html>