Hugging Face's logo

Spaces:
madansa7
/
mindfullness
Running

App Files Community
madansa7 commited on
Commit
517a658
·
verified ·
1 Parent(s): 1766b29

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +524 -19
  3. prompts.txt +0 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Mindfullness
3
- emoji: 😻
4
- colorFrom: blue
5
- colorTo: green
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: mindfullness
3
+ emoji: 🐳
4
+ colorFrom: green
5
+ colorTo: blue
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,524 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Mindful Moments - Meditation & Breathing Timer</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ /* Full width container for WordPress */
11
+ html, body {
12
+ margin: 0 !important;
13
+ padding: 0 !important;
14
+ width: 100% !important;
15
+ max-width: 100% !important;
16
+ }
17
+
18
+ .breath-circle {
19
+ transition: all 4s cubic-bezier(0.65, 0, 0.35, 1);
20
+ transform-origin: center;
21
+ }
22
+ .inhale {
23
+ animation: pulseIn 4s infinite alternate;
24
+ }
25
+ .exhale {
26
+ animation: pulseOut 6s infinite alternate;
27
+ }
28
+ @keyframes pulseIn {
29
+ 0% { transform: scale(0.9); opacity: 0.7; }
30
+ 100% { transform: scale(1.2); opacity: 1; }
31
+ }
32
+ @keyframes pulseOut {
33
+ 0% { transform: scale(1.2); opacity: 1; }
34
+ 100% { transform: scale(0.9); opacity: 0.7; }
35
+ }
36
+ .progress-ring__circle {
37
+ transition: stroke-dashoffset 0.5s;
38
+ transform: rotate(-90deg);
39
+ transform-origin: 50% 50%;
40
+ }
41
+ .fade-in {
42
+ animation: fadeIn 0.5s ease-in;
43
+ }
44
+ @keyframes fadeIn {
45
+ from { opacity: 0; }
46
+ to { opacity: 1; }
47
+ }
48
+
49
+ /* Custom container to prevent overflow */
50
+ .wp-container {
51
+ width: 100% !important;
52
+ padding: 0 !important;
53
+ margin: 0 !important;
54
+ }
55
+ </style>
56
+ </head>
57
+ <body class="bg-gradient-to-br from-indigo-900 to-purple-900 min-h-screen text-white font-sans wp-container">
58
+ <div class="container mx-auto px-4 py-8 max-w-3xl">
59
+ <header class="text-center mb-8">
60
+ <h1 class="text-4xl font-bold mb-2">Mindful Moments</h1>
61
+ <p class="text-xl text-indigo-200">Find your calm with guided breathing exercises</p>
62
+ </header>
63
+
64
+ <div class="bg-white/10 backdrop-blur-sm rounded-2xl p-6 shadow-xl">
65
+ <div class="flex flex-col md:flex-row gap-8">
66
+ <!-- Timer Section -->
67
+ <div class="flex-1">
68
+ <div class="flex justify-between items-center mb-6">
69
+ <h2 class="text-2xl font-semibold">Meditation Timer</h2>
70
+ <div class="flex items-center space-x-2">
71
+ <button id="sound-toggle" class="p-2 rounded-full hover:bg-white/10 transition">
72
+ <i class="fas fa-volume-up"></i>
73
+ </button>
74
+ <button id="fullscreen-toggle" class="p-2 rounded-full hover:bg-white/10 transition">
75
+ <i class="fas fa-expand"></i>
76
+ </button>
77
+ </div>
78
+ </div>
79
+
80
+ <div class="flex flex-col items-center mb-8">
81
+ <div class="relative w-64 h-64 mb-6 flex items-center justify-center">
82
+ <!-- Progress ring -->
83
+ <svg class="w-full h-full absolute" viewBox="0 0 100 100">
84
+ <circle class="text-white/10" stroke-width="4" stroke="currentColor" fill="transparent" r="45" cx="50" cy="50" />
85
+ <circle id="progress-ring" class="progress-ring__circle text-indigo-400" stroke-width="4" stroke-dasharray="283" stroke-dashoffset="283" stroke-linecap="round" stroke="currentColor" fill="transparent" r="45" cx="50" cy="50" />
86
+ </svg>
87
+
88
+ <!-- Breathing circle -->
89
+ <div id="breath-visual" class="breath-circle absolute w-40 h-40 rounded-full bg-indigo-400/30 flex items-center justify-center">
90
+ <div id="breath-text" class="text-2xl font-medium">Ready</div>
91
+ </div>
92
+ </div>
93
+
94
+ <div id="time-display" class="text-6xl font-mono mb-6">05:00</div>
95
+
96
+ <div class="flex space-x-4">
97
+ <button id="start-btn" class="px-8 py-3 bg-indigo-600 hover:bg-indigo-700 rounded-full font-medium transition">
98
+ Start
99
+ </button>
100
+ <button id="reset-btn" class="px-8 py-3 bg-white/10 hover:bg-white/20 rounded-full font-medium transition">
101
+ Reset
102
+ </button>
103
+ </div>
104
+ </div>
105
+ </div>
106
+
107
+ <!-- Controls Section -->
108
+ <div class="flex-1">
109
+ <div class="mb-8">
110
+ <h3 class="text-xl font-semibold mb-4">Session Length</h3>
111
+ <div class="grid grid-cols-3 gap-3">
112
+ <button class="duration-btn py-3 px-4 bg-white/10 hover:bg-white/20 rounded-lg transition" data-minutes="1">1 min</button>
113
+ <button class="duration-btn py-3 px-4 bg-white/10 hover:bg-white/20 rounded-lg transition" data-minutes="3">3 min</button>
114
+ <button class="duration-btn py-3 px-4 bg-white/10 hover:bg-white/20 rounded-lg transition" data-minutes="5">5 min</button>
115
+ <button class="duration-btn py-3 px-4 bg-white/10 hover:bg-white/20 rounded-lg transition" data-minutes="10">10 min</button>
116
+ <button class="duration-btn py-3 px-4 bg-white/10 hover:bg-white/20 rounded-lg transition" data-minutes="15">15 min</button>
117
+ <button class="duration-btn py-3 px-4 bg-white/10 hover:bg-white/20 rounded-lg transition" data-minutes="20">20 min</button>
118
+ </div>
119
+ </div>
120
+
121
+ <div class="mb-8">
122
+ <h3 class="text-xl font-semibold mb-4">Breathing Pattern</h3>
123
+ <div class="space-y-3">
124
+ <div class="flex items-center space-x-3">
125
+ <input type="radio" id="pattern-relax" name="breath-pattern" value="relax" class="hidden peer" checked>
126
+ <label for="pattern-relax" class="flex-1 py-3 px-4 bg-white/10 hover:bg-white/20 peer-checked:bg-indigo-600 peer-checked:hover:bg-indigo-700 rounded-lg transition cursor-pointer flex items-center justify-between">
127
+ <span>Relaxing (4-6-8)</span>
128
+ <span class="text-xs opacity-70">Inhale-4 Hold-6 Exhale-8</span>
129
+ </label>
130
+ </div>
131
+ <div class="flex items-center space-x-3">
132
+ <input type="radio" id="pattern-balance" name="breath-pattern" value="balance" class="hidden peer">
133
+ <label for="pattern-balance" class="flex-1 py-3 px-4 bg-white/10 hover:bg-white/20 peer-checked:bg-indigo-600 peer-checked:hover:bg-indigo-700 rounded-lg transition cursor-pointer flex items-center justify-between">
134
+ <span>Balanced (4-4-4)</span>
135
+ <span class="text-xs opacity-70">Inhale-4 Hold-4 Exhale-4</span>
136
+ </label>
137
+ </div>
138
+ <div class="flex items-center space-x-3">
139
+ <input type="radio" id="pattern-energy" name="breath-pattern" value="energy" class="hidden peer">
140
+ <label for="pattern-energy" class="flex-1 py-3 px-4 bg-white/10 hover:bg-white/20 peer-checked:bg-indigo-600 peer-checked:hover:bg-indigo-700 rounded-lg transition cursor-pointer flex items-center justify-between">
141
+ <span>Energizing (4-2-4)</span>
142
+ <span class="text-xs opacity-70">Inhale-4 Hold-2 Exhale-4</span>
143
+ </label>
144
+ </div>
145
+ </div>
146
+ </div>
147
+
148
+ <div>
149
+ <h3 class="text-xl font-semibold mb-4">Ambient Sounds</h3>
150
+ <div class="grid grid-cols-2 gap-3">
151
+ <button class="sound-btn py-3 px-4 bg-white/10 hover:bg-white/20 rounded-lg transition flex items-center space-x-2" data-sound="rain">
152
+ <i class="fas fa-cloud-rain"></i>
153
+ <span>Rain</span>
154
+ </button>
155
+ <button class="sound-btn py-3 px-4 bg-white/10 hover:bg-white/20 rounded-lg transition flex items-center space-x-2" data-sound="forest">
156
+ <i class="fas fa-tree"></i>
157
+ <span>Forest</span>
158
+ </button>
159
+ <button class="sound-btn py-3 px-4 bg-white/10 hover:bg-white/20 rounded-lg transition flex items-center space-x-2" data-sound="waves">
160
+ <i class="fas fa-water"></i>
161
+ <span>Waves</span>
162
+ </button>
163
+ <button class="sound-btn py-3 px-4 bg-white/10 hover:bg-white/20 rounded-lg transition flex items-center space-x-2" data-sound="none">
164
+ <i class="fas fa-times"></i>
165
+ <span>None</span>
166
+ </button>
167
+ </div>
168
+ </div>
169
+ </div>
170
+ </div>
171
+ </div>
172
+
173
+ <div class="mt-8 text-center text-indigo-200">
174
+ <p>Take a deep breath and find your center. Regular practice can reduce stress and improve focus.</p>
175
+ </div>
176
+ </div>
177
+
178
+ <!-- Audio elements with updated free sound sources -->
179
+ <audio id="inhale-sound" src="https://assets.mixkit.co/active/sounds/preview/mixkit-positive-interface-beep-221.mp3" preload="auto"></audio>
180
+ <audio id="exhale-sound" src="https://assets.mixkit.co/active/sounds/preview/mixkit-achievement-bell-600.mp3" preload="auto"></audio>
181
+ <audio id="rain-sound" loop src="https://media.rainymood.com/0.m4a" preload="auto"></audio>
182
+ <audio id="forest-sound" loop src="https://assets.mixkit.co/active/sounds/preview/mixkit-forest-ambience-1683.mp3" preload="auto"></audio>
183
+ <audio id="waves-sound" loop src="https://assets.mixkit.co/active/sounds/preview/mixkit-waves-on-the-beach-1183.mp3" preload="auto"></audio>
184
+ <audio id="end-sound" src="https://assets.mixkit.co/active/sounds/preview/mixkit-marimba-alert-2334.mp3" preload="auto"></audio>
185
+
186
+ <script>
187
+ document.addEventListener('DOMContentLoaded', function() {
188
+ // DOM elements
189
+ const timeDisplay = document.getElementById('time-display');
190
+ const startBtn = document.getElementById('start-btn');
191
+ const resetBtn = document.getElementById('reset-btn');
192
+ const durationBtns = document.querySelectorAll('.duration-btn');
193
+ const breathVisual = document.getElementById('breath-visual');
194
+ const breathText = document.getElementById('breath-text');
195
+ const progressRing = document.getElementById('progress-ring');
196
+ const soundToggle = document.getElementById('sound-toggle');
197
+ const fullscreenToggle = document.getElementById('fullscreen-toggle');
198
+ const soundBtns = document.querySelectorAll('.sound-btn');
199
+
200
+ // Audio elements
201
+ const inhaleSound = document.getElementById('inhale-sound');
202
+ const exhaleSound = document.getElementById('exhale-sound');
203
+ const rainSound = document.getElementById('rain-sound');
204
+ const forestSound = document.getElementById('forest-sound');
205
+ const wavesSound = document.getElementById('waves-sound');
206
+ const endSound = document.getElementById('end-sound');
207
+
208
+ // Variables
209
+ let timer;
210
+ let totalSeconds = 300; // Default 5 minutes
211
+ let remainingSeconds = totalSeconds;
212
+ let isRunning = false;
213
+ let isBreathing = false;
214
+ let soundEnabled = true;
215
+ let ambientSound = null;
216
+ let currentPattern = 'relax';
217
+ let inhaleDuration = 4;
218
+ let holdDuration = 6;
219
+ let exhaleDuration = 8;
220
+
221
+ // Initialize
222
+ updateTimeDisplay();
223
+ setupEventListeners();
224
+
225
+ function setupEventListeners() {
226
+ // Duration buttons
227
+ durationBtns.forEach(btn => {
228
+ btn.addEventListener('click', function() {
229
+ const minutes = parseInt(this.dataset.minutes);
230
+ totalSeconds = minutes * 60;
231
+ remainingSeconds = totalSeconds;
232
+ updateTimeDisplay();
233
+ resetProgressRing();
234
+ });
235
+ });
236
+
237
+ // Breathing pattern radio buttons
238
+ document.querySelectorAll('input[name="breath-pattern"]').forEach(radio => {
239
+ radio.addEventListener('change', function() {
240
+ currentPattern = this.value;
241
+ switch(currentPattern) {
242
+ case 'relax':
243
+ inhaleDuration = 4;
244
+ holdDuration = 6;
245
+ exhaleDuration = 8;
246
+ break;
247
+ case 'balance':
248
+ inhaleDuration = 4;
249
+ holdDuration = 4;
250
+ exhaleDuration = 4;
251
+ break;
252
+ case 'energy':
253
+ inhaleDuration = 4;
254
+ holdDuration = 2;
255
+ exhaleDuration = 4;
256
+ break;
257
+ }
258
+ });
259
+ });
260
+
261
+ // Sound buttons
262
+ soundBtns.forEach(btn => {
263
+ btn.addEventListener('click', function() {
264
+ const soundType = this.dataset.sound;
265
+
266
+ // Stop all ambient sounds
267
+ rainSound.pause();
268
+ forestSound.pause();
269
+ wavesSound.pause();
270
+
271
+ // Remove active class from all buttons
272
+ soundBtns.forEach(b => b.classList.remove('bg-indigo-600', 'hover:bg-indigo-700'));
273
+
274
+ if (soundType !== 'none') {
275
+ // Add active class to clicked button
276
+ this.classList.add('bg-indigo-600', 'hover:bg-indigo-700');
277
+
278
+ // Play selected sound
279
+ ambientSound = soundType;
280
+ if (soundEnabled) {
281
+ switch(soundType) {
282
+ case 'rain':
283
+ rainSound.currentTime = 0;
284
+ rainSound.play().catch(e => console.log("Audio play failed:", e));
285
+ break;
286
+ case 'forest':
287
+ forestSound.currentTime = 0;
288
+ forestSound.play().catch(e => console.log("Audio play failed:", e));
289
+ break;
290
+ case 'waves':
291
+ wavesSound.currentTime = 0;
292
+ wavesSound.play().catch(e => console.log("Audio play failed:", e));
293
+ break;
294
+ }
295
+ }
296
+ } else {
297
+ ambientSound = null;
298
+ }
299
+ });
300
+ });
301
+
302
+ // Start button
303
+ startBtn.addEventListener('click', function() {
304
+ if (isRunning) {
305
+ pauseTimer();
306
+ this.textContent = 'Resume';
307
+ } else {
308
+ startTimer();
309
+ this.textContent = 'Pause';
310
+ }
311
+ });
312
+
313
+ // Reset button
314
+ resetBtn.addEventListener('click', resetTimer);
315
+
316
+ // Sound toggle
317
+ soundToggle.addEventListener('click', toggleSound);
318
+
319
+ // Fullscreen toggle
320
+ fullscreenToggle.addEventListener('click', toggleFullscreen);
321
+ }
322
+
323
+ function startTimer() {
324
+ if (!isRunning) {
325
+ isRunning = true;
326
+
327
+ // Start ambient sound if selected
328
+ if (soundEnabled && ambientSound) {
329
+ switch(ambientSound) {
330
+ case 'rain':
331
+ rainSound.play().catch(e => console.log("Audio play failed:", e));
332
+ break;
333
+ case 'forest':
334
+ forestSound.play().catch(e => console.log("Audio play failed:", e));
335
+ break;
336
+ case 'waves':
337
+ wavesSound.play().catch(e => console.log("Audio play failed:", e));
338
+ break;
339
+ }
340
+ }
341
+
342
+ // Start breathing if not already running
343
+ if (!isBreathing) {
344
+ startBreathingCycle();
345
+ }
346
+
347
+ timer = setInterval(function() {
348
+ remainingSeconds--;
349
+ updateTimeDisplay();
350
+ updateProgressRing();
351
+
352
+ if (remainingSeconds <= 0) {
353
+ clearInterval(timer);
354
+ isRunning = false;
355
+ startBtn.textContent = 'Start';
356
+
357
+ // Play end sound
358
+ if (soundEnabled) {
359
+ endSound.currentTime = 0;
360
+ endSound.play().catch(e => console.log("Audio play failed:", e));
361
+ }
362
+
363
+ // Show completion message
364
+ breathText.textContent = 'Complete!';
365
+ breathVisual.classList.remove('inhale', 'exhale');
366
+ breathVisual.style.transform = 'scale(1)';
367
+
368
+ // Stop ambient sound
369
+ rainSound.pause();
370
+ forestSound.pause();
371
+ wavesSound.pause();
372
+ }
373
+ }, 1000);
374
+ }
375
+ }
376
+
377
+ function pauseTimer() {
378
+ clearInterval(timer);
379
+ isRunning = false;
380
+
381
+ // Pause ambient sound
382
+ rainSound.pause();
383
+ forestSound.pause();
384
+ wavesSound.pause();
385
+
386
+ // Pause breathing animation
387
+ breathVisual.classList.remove('inhale', 'exhale');
388
+ breathText.textContent = 'Paused';
389
+ }
390
+
391
+ function resetTimer() {
392
+ clearInterval(timer);
393
+ isRunning = false;
394
+ remainingSeconds = totalSeconds;
395
+ updateTimeDisplay();
396
+ resetProgressRing();
397
+ startBtn.textContent = 'Start';
398
+
399
+ // Reset breathing
400
+ breathVisual.classList.remove('inhale', 'exhale');
401
+ breathText.textContent = 'Ready';
402
+ breathVisual.style.transform = 'scale(1)';
403
+
404
+ // Stop all sounds
405
+ rainSound.pause();
406
+ forestSound.pause();
407
+ wavesSound.pause();
408
+ inhaleSound.pause();
409
+ exhaleSound.pause();
410
+ endSound.pause();
411
+ }
412
+
413
+ function updateTimeDisplay() {
414
+ const minutes = Math.floor(remainingSeconds / 60);
415
+ const seconds = remainingSeconds % 60;
416
+ timeDisplay.textContent = `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
417
+ }
418
+
419
+ function updateProgressRing() {
420
+ const circumference = 2 * Math.PI * 45;
421
+ const offset = circumference - (remainingSeconds / totalSeconds) * circumference;
422
+ progressRing.style.strokeDashoffset = offset;
423
+ }
424
+
425
+ function resetProgressRing() {
426
+ progressRing.style.strokeDashoffset = 283;
427
+ }
428
+
429
+ function startBreathingCycle() {
430
+ isBreathing = true;
431
+ breathCycle();
432
+ }
433
+
434
+ function breathCycle() {
435
+ if (!isRunning) return;
436
+
437
+ // Inhale phase
438
+ breathText.textContent = 'Inhale';
439
+ breathVisual.classList.remove('exhale');
440
+ breathVisual.classList.add('inhale');
441
+
442
+ if (soundEnabled) {
443
+ inhaleSound.currentTime = 0;
444
+ inhaleSound.play().catch(e => console.log("Audio play failed:", e));
445
+ }
446
+
447
+ setTimeout(() => {
448
+ if (!isRunning) return;
449
+
450
+ // Hold phase
451
+ breathText.textContent = 'Hold';
452
+ breathVisual.classList.remove('inhale');
453
+
454
+ setTimeout(() => {
455
+ if (!isRunning) return;
456
+
457
+ // Exhale phase
458
+ breathText.textContent = 'Exhale';
459
+ breathVisual.classList.remove('inhale');
460
+ breathVisual.classList.add('exhale');
461
+
462
+ if (soundEnabled) {
463
+ exhaleSound.currentTime = 0;
464
+ exhaleSound.play().catch(e => console.log("Audio play failed:", e));
465
+ }
466
+
467
+ setTimeout(() => {
468
+ if (isRunning) {
469
+ breathCycle();
470
+ }
471
+ }, exhaleDuration * 1000);
472
+ }, holdDuration * 1000);
473
+ }, inhaleDuration * 1000);
474
+ }
475
+
476
+ function toggleSound() {
477
+ soundEnabled = !soundEnabled;
478
+
479
+ if (soundEnabled) {
480
+ soundToggle.innerHTML = '<i class="fas fa-volume-up"></i>';
481
+
482
+ // Resume ambient sound if one was selected
483
+ if (ambientSound) {
484
+ switch(ambientSound) {
485
+ case 'rain':
486
+ rainSound.play().catch(e => console.log("Audio play failed:", e));
487
+ break;
488
+ case 'forest':
489
+ forestSound.play().catch(e => console.log("Audio play failed:", e));
490
+ break;
491
+ case 'waves':
492
+ wavesSound.play().catch(e => console.log("Audio play failed:", e));
493
+ break;
494
+ }
495
+ }
496
+ } else {
497
+ soundToggle.innerHTML = '<i class="fas fa-volume-mute"></i>';
498
+
499
+ // Pause all sounds
500
+ rainSound.pause();
501
+ forestSound.pause();
502
+ wavesSound.pause();
503
+ inhaleSound.pause();
504
+ exhaleSound.pause();
505
+ }
506
+ }
507
+
508
+ function toggleFullscreen() {
509
+ if (!document.fullscreenElement) {
510
+ document.documentElement.requestFullscreen().catch(err => {
511
+ console.error(`Error attempting to enable fullscreen: ${err.message}`);
512
+ });
513
+ fullscreenToggle.innerHTML = '<i class="fas fa-compress"></i>';
514
+ } else {
515
+ if (document.exitFullscreen) {
516
+ document.exitFullscreen();
517
+ fullscreenToggle.innerHTML = '<i class="fas fa-expand"></i>';
518
+ }
519
+ }
520
+ }
521
+ });
522
+ </script>
523
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=madansa7/mindfullness" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
524
+ </html>
prompts.txt ADDED
File without changes