forked from SpreadSheets600/Pomodoria
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
284 lines (257 loc) · 13 KB
/
Copy pathindex.html
File metadata and controls
284 lines (257 loc) · 13 KB
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
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
<!DOCTYPE html>
<html lang="en" data-theme="dark">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>ηovatra</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdn.jsdelivr.net/npm/daisyui@4.6.0/dist/full.min.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&family=Outfit:wght@100..900&display=swap" rel="stylesheet" />
<script>
tailwind.config = {
theme: {
extend: {
fontFamily: {
nunito: ["Nunito", "sans-serif"],
outfit: ["Outfit", "sans-serif"],
},
},
},
};
</script>
<link rel="stylesheet" href="./src/css/overrides.css" />
</head>
<body class="min-h-screen overflow-hidden font-nunito">
<!-- Background Video -->
<video id="backgroundVideo" autoplay muted loop class="fixed top-1/2 left-1/2 min-w-full min-h-full w-auto h-auto -z-10 transform -translate-x-1/2 -translate-y-1/2 brightness-75">
<source src="assets/videos/1.mp4" type="video/mp4" />
Your Browser Doesn't Support The Video Tag
</video>
<!-- Title -->
<h1 class="title text-3xl md:text-4xl font-bold text-white fixed top-6 left-6 drop-shadow-2xl tracking-wide">ηovatra</h1>
<!-- Control Buttons with Hover Menu -->
<div class="fixed bottom-6 right-6 z-20 control-menu-container group">
<!-- Hidden control buttons that appear on hover -->
<div class="control-menu flex flex-col space-y-3 mb-3 opacity-0 translate-y-4 group-hover:opacity-100 group-hover:translate-y-0 transition-all duration-300 ease-out">
<div class="tooltip tooltip-left" data-tip="Music Player">
<button id="toggleMusic" class="btn btn-circle btn-glass hover:btn-primary transition-all duration-300 shadow-lg scale-90 group-hover:scale-100">
<span class="material-symbols-outlined text-xl">music_note</span>
</button>
</div>
<div class="tooltip tooltip-left" data-tip="Tasks">
<button id="toggleTasks" class="btn btn-circle btn-glass hover:btn-secondary transition-all duration-300 shadow-lg scale-90 group-hover:scale-100">
<span class="material-symbols-outlined text-xl">task_alt</span>
</button>
</div>
<div class="tooltip tooltip-left" data-tip="Change Background">
<button id="changeBackground" class="btn btn-circle btn-glass hover:btn-accent transition-all duration-300 shadow-lg scale-90 group-hover:scale-100">
<span class="material-symbols-outlined text-xl">palette</span>
</button>
</div>
<div class="tooltip tooltip-left" data-tip="Custom Timer">
<button id="customTimerButton" class="btn btn-circle btn-glass hover:btn-info transition-all duration-300 shadow-lg scale-90 group-hover:scale-100">
<span class="material-symbols-outlined text-xl">timer</span>
</button>
</div>
<div class="tooltip tooltip-left" data-tip="Fullscreen">
<button id="fullscreenButton" class="btn btn-circle btn-glass hover:btn-warning transition-all duration-300 shadow-lg scale-90 group-hover:scale-100">
<span class="material-symbols-outlined text-xl">fullscreen</span>
</button>
</div>
</div>
<!-- Main Settings Button -->
<div class="tooltip tooltip-left" data-tip="Settings & Controls">
<button id="settingsButton" class="btn btn-circle btn-glass hover:btn-neutral transition-all duration-300 shadow-lg group-hover:shadow-2xl">
<span class="material-symbols-outlined text-xl transition-transform duration-300 group-hover:rotate-90">settings</span>
</button>
</div>
</div>
<!-- Main Timer App -->
<div class="app card bg-gradient-to-br from-base-100/20 to-base-100/5 backdrop-blur-xl shadow-2xl border border-white/10 p-8 text-center transition-all duration-500 max-w-md w-full" id="timerApp">
<div class="timer flex flex-col items-center space-y-6">
<div class="timer-display bg-gradient-to-br from-primary/20 to-secondary/20 rounded-3xl p-8 border border-white/20 shadow-inner">
<span class="minutes-display text-6xl md:text-8xl font-bold text-white drop-shadow-2xl font-mono tracking-wider">25:00</span>
</div>
<div class="progress-container w-full">
<div class="progress-bar w-full h-3 bg-base-200/30 rounded-full overflow-hidden shadow-inner border border-white/10">
<div class="progress h-full bg-gradient-to-r from-primary via-secondary to-accent rounded-full w-0 transition-all duration-1000 shadow-lg"></div>
</div>
</div>
<div class="pomodoria-buttons flex justify-center gap-4 w-full">
<button class="start btn btn-primary btn-lg flex-1 max-w-24 shadow-lg hover:shadow-xl transition-all duration-300">
<span class="material-symbols-outlined mr-1">play_arrow</span>
START
</button>
<button class="stop btn btn-secondary btn-lg flex-1 max-w-24 shadow-lg hover:shadow-xl transition-all duration-300">
<span class="material-symbols-outlined mr-1">pause</span>
STOP
</button>
<button class="reset btn btn-accent btn-lg flex-1 max-w-24 shadow-lg hover:shadow-xl transition-all duration-300">
<span class="material-symbols-outlined mr-1">restart_alt</span>
RESET
</button>
</div>
</div>
<div class="divider divider-neutral opacity-30"></div>
<div id="cycleCounter" class="stat place-items-center bg-gradient-to-r from-success/10 to-info/10 rounded-2xl p-4 border border-white/10">
<div class="stat-title text-white/80">Focus Sessions</div>
<div class="stat-value text-3xl text-white">
<span class="material-symbols-outlined text-2xl mr-2">psychology</span>
<span>0</span>
</div>
</div>
</div>
<!-- Task List Modal -->
<dialog id="taskModal" class="modal">
<div class="modal-box bg-gradient-to-br from-base-100/95 to-base-200/95 backdrop-blur-xl border border-white/20 shadow-2xl max-w-2xl">
<div class="flex items-center gap-3 mb-6">
<span class="material-symbols-outlined text-primary text-3xl">task_alt</span>
<h3 class="font-bold text-2xl text-base-content">Task Manager</h3>
</div>
<div class="task-list">
<ul id="tasks" class="space-y-3 mb-6 max-h-96 overflow-y-auto"></ul>
<div class="flex gap-3 p-4 bg-base-200/50 rounded-2xl border border-white/10">
<input type="text" id="taskInput" placeholder="Add a new task..." class="input input-bordered flex-1 bg-base-100/50 border-white/20 focus:border-primary" />
<button id="addTaskButton" class="btn btn-primary shadow-lg hover:shadow-xl transition-all duration-300">
<span class="material-symbols-outlined">add_circle</span>
Add
</button>
</div>
</div>
<div class="modal-action">
<form method="dialog">
<button class="btn btn-ghost">Close</button>
</form>
</div>
</div>
</dialog>
<!-- Music Player Modal -->
<dialog id="musicModal" class="modal">
<div class="modal-box bg-gradient-to-br from-base-100/95 to-base-200/95 backdrop-blur-xl border border-white/20 shadow-2xl max-w-3xl">
<div class="flex items-center gap-3 mb-6">
<span class="material-symbols-outlined text-primary text-3xl">music_note</span>
<h3 class="font-bold text-2xl text-base-content">Music Player</h3>
</div>
<div class="music space-y-6">
<div class="spotifylink">
<div class="flex gap-3 p-4 bg-base-200/50 rounded-2xl border border-white/10">
<input type="text" id="spotifyLink" placeholder="Paste Spotify Playlist Link here..." class="input input-bordered flex-1 bg-base-100/50 border-white/20 focus:border-primary" />
<button id="saveLink" class="btn btn-primary shadow-lg hover:shadow-xl transition-all duration-300">
<span class="material-symbols-outlined mr-2">save</span>
Save
</button>
</div>
</div>
<div class="spotify-player bg-base-200/30 rounded-2xl p-4 border border-white/10">
<iframe class="rounded-xl w-full h-96 shadow-lg" id="playlistFrame" src="https://open.spotify.com/embed/playlist/1SFu2TrODleauORe3TdSAv" frameborder="0" allowfullscreen="" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" loading="lazy"></iframe>
</div>
</div>
<div class="modal-action">
<form method="dialog">
<button class="btn btn-ghost">Close</button>
</form>
</div>
</div>
</dialog>
<!-- Custom Timer Modal -->
<dialog id="customTimerModal" class="modal">
<div class="modal-box bg-gradient-to-br from-base-100/95 to-base-200/95 backdrop-blur-xl border border-white/20 shadow-2xl">
<div class="flex items-center gap-3 mb-6">
<span class="material-symbols-outlined text-primary text-3xl">timer</span>
<h3 class="font-bold text-2xl text-base-content">Custom Timer</h3>
</div>
<div class="custom-timer space-y-6">
<div class="grid grid-cols-2 gap-4">
<div class="form-control">
<label class="label">
<span class="label-text font-semibold">Minutes</span>
</label>
<input type="number" id="customMinutes" placeholder="25" min="0" max="999" class="input input-bordered bg-base-100/50 border-white/20 focus:border-primary text-center text-lg" />
</div>
<div class="form-control">
<label class="label">
<span class="label-text font-semibold">Seconds</span>
</label>
<input type="number" id="customSeconds" placeholder="0" min="0" max="59" class="input input-bordered bg-base-100/50 border-white/20 focus:border-primary text-center text-lg" />
</div>
</div>
<button id="setCustomTimer" class="btn btn-primary btn-lg w-full shadow-lg hover:shadow-xl transition-all duration-300">
<span class="material-symbols-outlined mr-2">schedule</span>
Set Custom Timer
</button>
</div>
<div class="modal-action">
<form method="dialog">
<button class="btn btn-ghost">Close</button>
</form>
</div>
</div>
</dialog>
<!-- Settings Modal -->
<dialog id="settingsModal" class="modal">
<div class="modal-box bg-gradient-to-br from-base-100/95 to-base-200/95 backdrop-blur-xl border border-white/20 shadow-2xl">
<div class="flex items-center gap-3 mb-6">
<span class="material-symbols-outlined text-primary text-3xl">settings</span>
<h3 class="font-bold text-2xl text-base-content">Settings</h3>
</div>
<div class="settings-box space-y-6">
<div class="card bg-base-200/50 border border-white/10">
<div class="card-body p-4">
<div class="form-control">
<label class="label cursor-pointer">
<div class="flex items-center gap-3">
<span class="material-symbols-outlined text-primary">autorenew</span>
<span class="label-text font-semibold">Auto Restart Timer</span>
</div>
<input type="checkbox" id="autoRestart" class="checkbox checkbox-primary" />
</label>
</div>
</div>
</div>
<div class="card bg-base-200/50 border border-white/10">
<div class="card-body p-4">
<div class="form-control">
<label class="label">
<div class="flex items-center gap-3">
<span class="material-symbols-outlined text-primary">volume_up</span>
<span class="label-text font-semibold">Notification Sound</span>
</div>
</label>
<select id="notificationSound" class="select select-bordered w-full bg-base-100/50 border-white/20 focus:border-primary">
<option value="assets/audio/Bell.mp3">🔔 Bell</option>
<option value="assets/audio/Chime.mp3">🎵 Chime</option>
</select>
</div>
</div>
</div>
</div>
<div class="modal-action">
<form method="dialog">
<button class="btn btn-ghost">Close</button>
</form>
</div>
</div>
</dialog>
<!-- Current Task Display -->
<div id="currentTaskContainer">
<div id="currentTask" class="hidden fixed bottom-24 left-1/2 transform -translate-x-1/2 bg-gradient-to-r from-primary/20 to-secondary/20 backdrop-blur-xl border border-white/20 p-4 rounded-2xl text-white flex items-center gap-4 shadow-2xl z-10 max-w-md transition-all duration-500">
<input type="checkbox" id="currentTaskCheckbox" class="checkbox checkbox-primary" />
<span id="currentTaskText" class="text-lg font-medium flex-1 truncate"></span>
<span class="material-symbols-outlined text-success/70">psychology</span>
</div>
</div>
<!-- Hidden PIP Video Elements -->
<video id="pipVideo" class="hidden" width="320" height="240" muted>
<canvas id="pipCanvas" width="320" height="240"></canvas>
</video>
<script src="./src/js/timer.js"></script>
<script src="./src/js/taskManager.js"></script>
<script src="./src/js/musicPlayer.js"></script>
<script src="./src/js/backgroundManager.js"></script>
<script src="./src/js/uiController.js"></script>
<script src="./src/js/app.js"></script>
</body>
</html>