beercd/index.html at master · ini272/beercd · 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
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
<!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="theme-color" content="#3d2817">
    <meta name="description" content="A cooldown timer to help limit beer intake">
    <title>BeerCD - Beer Cooldown</title>
    <link rel="manifest" href="manifest.json">
    <link rel="apple-touch-icon" href="icons/icon-192x192.png">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h1>🍺 CoolDown Tracker</h1>
        <p class="subtitle">Beer & Shot Timers</p>

        <!-- Tab navigation -->
        <div class="tabs">
            <button class="tab-btn active" id="beerTab" onclick="switchTab('beer')">🍺 Beer</button>
            <button class="tab-btn" id="shotTab" onclick="switchTab('shot')">🍸 Shot</button>
        </div>

        <!-- Counter badge -->
        <div class="counter-badge" id="counterBadge">
            <span id="beerCount">🍺 0</span> | <span id="shotCount">🍸 0</span>
        </div>

        <!-- Inactive timer preview -->
        <div class="inactive-timer-preview" id="inactivePreview" style="display: none;">
            <span id="inactiveLabel">Shot: </span><span id="inactiveTime">--:--:--</span>
        </div>

        <div class="timer-display" id="timerDisplay">
            <div class="time" id="timeDisplay">--:--:--</div>
            <div class="status" id="statusDisplay">Ready</div>
        </div>

        <div class="beer-button-container">
            <button class="beer-button" id="mainButton" onclick="startCooldown()">
                <span class="beer-icon" id="buttonIcon">🍺</span>
                <span class="refresh-icon" id="refreshIcon" style="display: none;">🔄</span>
            </button>
            <button class="stop-button" id="stopButton" onclick="stopCooldown()" style="display: none;" title="Stop cooldown">
                ⏹️
            </button>
        </div>

        <!-- History section -->
        <button class="history-toggle" id="historyToggle" onclick="toggleHistory()">
            <span id="historyIcon">▼</span> History
        </button>

        <div class="history-section" id="historySection" style="display: none;">
            <div class="history-list" id="historyList">
                <div class="empty-history">No drinks yet today</div>
            </div>
            <button class="reset-history-btn" onclick="resetHistory()">Clear History</button>
        </div>

        <div class="settings">
            <label>Cooldown Duration:</label>

            <!-- Preset buttons -->
            <div class="preset-buttons">
                <button class="preset-btn" onclick="setPresetDuration(0.25)">15m</button>
                <button class="preset-btn" onclick="setPresetDuration(0.5)">30m</button>
                <button class="preset-btn active" onclick="setPresetDuration(1)">1h</button>
                <button class="preset-btn" onclick="setPresetDuration(2)">2h</button>
                <button class="preset-btn" onclick="setPresetDuration(3)">3h</button>
            </div>

            <!-- Custom duration toggle -->
            <button class="custom-duration-toggle" id="customToggle" onclick="toggleCustomDuration()">
                <span id="toggleIcon">▼</span> Custom Duration
            </button>

            <!-- Custom duration section -->
            <div class="custom-duration-section" id="customSection" style="display: none;">
                <div class="custom-label">Custom Duration</div>
                <div class="live-preview" id="livePreview">1h 0m</div>

                <div class="spinners-container">
                    <!-- Hour spinner -->
                    <div class="spinner">
                        <button class="spinner-btn spinner-up" onclick="incrementHour()">▲</button>
                        <input type="number" class="spinner-value" id="hourDisplay" min="0" max="23" value="1" oninput="onHourInput()">
                        <button class="spinner-btn spinner-down" onclick="decrementHour()">▼</button>
                        <div class="spinner-label">hours</div>
                    </div>

                    <!-- Minute spinner -->
                    <div class="spinner">
                        <button class="spinner-btn spinner-up" onclick="incrementMinute()">▲</button>
                        <input type="number" class="spinner-value" id="minuteDisplay" min="0" max="59" value="0" oninput="onMinuteInput()">
                        <button class="spinner-btn spinner-down" onclick="decrementMinute()">▼</button>
                        <div class="spinner-label">minutes</div>
                    </div>
                </div>

                <div class="button-group">
                    <button class="apply-custom-btn" onclick="applyCustomDuration()">Apply</button>
                    <button class="reset-custom-btn" onclick="resetCustomDuration()">Reset</button>
                </div>
            </div>
        </div>

        <div class="controls-container">
            <button class="sound-toggle" id="soundToggle" onclick="toggleSound()" title="Toggle sound">
                <span id="soundIcon">🔊</span>
            </button>
            <button class="theme-toggle" id="themeToggle" onclick="toggleTheme()" title="Toggle dark mode">
                <span id="themeIcon">🌙</span>
            </button>
        </div>
    </div>

    <!-- Bubbly beer animation overlay -->
    <div class="beer-animation-overlay" id="beerAnimation">
        <div class="bubbles-container">
            <!-- Bubbles will be generated by JavaScript -->
        </div>
    </div>

    <!-- Audio elements for sounds -->
    <audio id="beerSound" preload="auto">
        <source src="sounds/beer-open-pour.mp3" type="audio/mpeg">
        <source src="sounds/beer-open-pour.ogg" type="audio/ogg">
    </audio>

    <audio id="shotSound" preload="auto">
        <source src="sounds/shot.mp3" type="audio/mpeg">
        <source src="sounds/shot.ogg" type="audio/ogg">
    </audio>

    <script src="script.js"></script>
    <script>
        // Register service worker for PWA functionality
        if ('serviceWorker' in navigator) {
            window.addEventListener('load', () => {
                navigator.serviceWorker.register('/service-worker.js')
                    .then((registration) => {
                        console.log('ServiceWorker registration successful');
                    })
                    .catch((error) => {
                        console.log('ServiceWorker registration failed:', error);
                    });
            });
        }
    </script>
</body>
</html>