Free Bootstrap 5 utility snippet — Meditation app which suggests or plays music when the user…. Preview, copy HTML, drop it into any Bootstrap 5 project.
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta content="width=device-width, initial-scale=1.0" name="viewport">
6 <title>Meditation Sounds Widget</title>
7 <style>
8 * {
9 margin: 0;
10 padding: 0;
11 box-sizing: border-box;
12 }
13
14 body, html {
15 font-family: Arial, sans-serif;
16 height: 100%;
17 width: 100%;
18 overflow: hidden;
19 display: flex;
20 justify-content: center;
21 align-items: center;
22 background-color: black;
23 position: relative;
24 }
25
26 .container {
27 text-align: center;
28 z-index: 2;
29 position: relative;
30 }
31
32 h1 {
33 color: white;
34 margin-bottom: 20px;
35 }
36
37 select {
38 padding: 10px;
39 font-size: 16px;
40 border-radius: 5px;
41 border: none;
42 background-color: #6c63ff;
43 color: white;
44 margin-right: 10px;
45 }
46
47 .start-button, .stop-button, .restart-button, .mute-button {
48 padding: 10px 20px;
49 font-size: 16px;
50 cursor: pointer;
51 border: none;
52 border-radius: 5px;
53 color: white;
54 transition: background-color 0.3s;
55 background-color: #1a1a1a;
56 margin-top: 10px;
57 }
58
59 .start-button:hover, .stop-button:hover, .restart-button:hover, .mute-button:hover {
60 background-color: #5753d1;
61 }
62
63 .meditation-page {
64 display: none;
65 flex-direction: column;
66 justify-content: center;
67 align-items: center;
68 }
69
70 .timer {
71 position: absolute;
72 top: 50%;
73 left: 50%;
74 transform: translate(-50%, -50%);
75 font-size: 28px;
76 color: white;
77 }
78
79 .stop-button {
80 margin-top: 20px;
81 background-color: #ff6347;
82 }
83
84 .restart-button {
85 margin-top: 10px;
86 }
87
88 /* Circular Progress Bar */
89 .progress-circle {
90 margin-top: 30px;
91 width: 200px;
92 height: 200px;
93 display: inline-block;
94 position: relative;
95 }
96
97 .progress-circle svg {
98 transform: rotate(-90deg);
99 width: 100%;
100 height: 100%;
101 }
102
103 .progress-circle circle {
104 fill: none;
105 stroke-width: 10;
106 stroke-linecap: round;
107 }
108
109 .progress-background {
110 stroke: rgba(255, 255, 255, 0.2);
111 }
112
113 .progress-foreground {
114 stroke: #00FFAA;
115 stroke-dasharray: 628; /* Circumference of the circle (2 * Math.PI * 100) */
116 stroke-dashoffset: 628;
117 transition: stroke-dashoffset 1s linear;
118 }
119
120 /* Full-Screen Particles */
121 ul {
122 position: absolute;
123 top: 0;
124 left: 0;
125 width: 100%;
126 height: 100%;
127 list-style: none;
128 overflow: hidden;
129 z-index: 0;
130 }
131
132 li {
133 position: absolute;
134 background-color: rgba(255, 255, 255, 0.8);
135 border-radius: 50%;
136 opacity: 0.8;
137 animation: move-random 30s infinite ease-in-out;
138 }
139
140 /* Advanced Animations for Full-Screen Particles */
141 @keyframes move-random {
142 0% {
143 transform: translate(0, 0) scale(1);
144 }
145 25% {
146 transform: translate(50px, -100px) scale(1.2);
147 }
148 50% {
149 transform: translate(-100px, 50px) scale(0.8);
150 }
151 75% {
152 transform: translate(100px, 100px) scale(1.1);
153 }
154 100% {
155 transform: translate(-50px, -50px) scale(1);
156 }
157 }
158
159 @keyframes wave-motion {
160 0%, 100% {
161 transform: translateY(0) scale(1);
162 }
163 50% {
164 transform: translateY(50px) scale(1.2);
165 }
166 }
167
168 @keyframes ripple-effect {
169 0% {
170 transform: scale(0.5);
171 opacity: 0.8;
172 }
173 50% {
174 transform: scale(1.5);
175 opacity: 1;
176 }
177 100% {
178 transform: scale(2);
179 opacity: 0;
180 }
181 }
182
183 @keyframes star-twinkle {
184 0%, 100% {
185 opacity: 0.3;
186 }
187 50% {
188 opacity: 1;
189 }
190 }
191
192 /* Star shapes */
193 .star {
194 background-color: transparent;
195 border-start: 5px solid transparent;
196 border-end: 5px solid transparent;
197 border-bottom: 8px solid white;
198 position: absolute;
199 animation: star-twinkle 2s infinite;
200 }
201
202 </style>
203</head>
204<body>
205
206<!-- Background floating particles -->
207<ul id="particle-container"></ul>
208
209<div class="container">
210 <div class="mood-selection">
211 <h1>Select Your Mood and Set Time</h1>
212 <select id="mood-select">
213 <option value="happy">Happy</option>
214 <option value="calm">Calm</option>
215 <option value="anxious">Anxious</option>
216 <option value="sad">Sad</option>
217 <option value="relaxed">Relaxed</option>
218 </select>
219
220 <input id="time-input" max="60" min="1" style="width: 60px; padding: 10px; font-size: 16px; border-radius: 5px; border: none;" type="number" value="5">
221 <span style="color: white;">minutes</span>
222
223 <button class="start-button">Start Meditation</button>
224 </div>
225
226 <div class="meditation-page">
227 <h1>Meditation Time</h1>
228
229 <!-- Progress Circle -->
230 <div class="progress-circle">
231 <svg>
232 <circle class="progress-background" cx="100" cy="100" r="100"></circle>
233 <circle class="progress-foreground" cx="100" cy="100" r="100"></circle>
234 </svg>
235 <div class="timer"><span id="time-left">5:00</span></div>
236 </div>
237
238 <button class="stop-button">Stop Meditation</button>
239 <button class="restart-button">Restart Meditation</button>
240 <button class="mute-button">Mute Sound</button>
241 </div>
242</div>
243
244<audio id="meditation-audio" loop></audio>
245
246<script>
247 const startButton = document.querySelector('.start-button');
248 const stopButton = document.querySelector('.stop-button');
249 const restartButton = document.querySelector('.restart-button');
250 const muteButton = document.querySelector('.mute-button');
251 const moodSelect = document.getElementById('mood-select');
252 const timeInput = document.getElementById('time-input');
253 const meditationPage = document.querySelector('.meditation-page');
254 const moodSelectionPage = document.querySelector('.mood-selection');
255 const audioElement = document.getElementById('meditation-audio');
256 const timerDisplay = document.getElementById('time-left');
257 const progressCircle = document.querySelector('.progress-foreground');
258 const particleContainer = document.getElementById('particle-container');
259
260 let isMuted = false;
261 const soundLibrary = [
262 'https://cdn.pixabay.com/audio/2021/08/08/audio_88447e769f.mp3',
263 'https://cdn.pixabay.com/audio/2022/11/04/audio_8ca48100a1.mp3',
264 'https://cdn.pixabay.com/audio/2022/10/14/audio_9939f792cb.mp3',
265 'https://cdn.pixabay.com/audio/2024/09/03/audio_0368e10ce2.mp3',
266 'https://cdn.pixabay.com/audio/2022/08/23/audio_8ed2c96397.mp3'
267 ];
268
269 let meditationTimer;
270 let timeLeft;
271 let totalTime;
272
273 const animationStyles = ['move-random', 'wave-motion', 'ripple-effect', 'star-twinkle'];
274
275 startButton.addEventListener('click', startMeditation);
276 stopButton.addEventListener('click', stopMeditation);
277 restartButton.addEventListener('click', restartMeditation);
278 muteButton.addEventListener('click', toggleMute);
279
280 function startMeditation() {
281 const selectedMood = moodSelect.value;
282 const selectedTime = parseInt(timeInput.value) || 5;
283
284 console.log(`Starting meditation for mood: ${selectedMood} for ${selectedTime} minutes`);
285
286 // Randomly select one of the sounds from the library
287 const randomSound = soundLibrary[Math.floor(Math.random() * soundLibrary.length)];
288 audioElement.src = randomSound;
289 audioElement.play();
290
291 // Switch to meditation page
292 moodSelectionPage.style.display = 'none';
293 meditationPage.style.display = 'flex';
294
295 // Start the timer
296 timeLeft = selectedTime * 60; // Convert minutes to seconds
297 totalTime = timeLeft; // Store total time for progress circle
298 updateTimerDisplay();
299 updateProgressCircle();
300 meditationTimer = setInterval(countdown, 1000);
301
302 // Start background animation
303 changeBackgroundAnimation();
304 }
305
306 function countdown() {
307 timeLeft--;
308 updateTimerDisplay();
309 updateProgressCircle();
310
311 if (timeLeft <= 0) {
312 stopMeditation();
313 }
314 }
315
316 function updateTimerDisplay() {
317 const minutes = Math.floor(timeLeft / 60);
318 const seconds = timeLeft % 60;
319 timerDisplay.textContent = `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
320 }
321
322 function updateProgressCircle() {
323 const progress = (timeLeft / totalTime) * 628; // Calculate the percentage for the stroke
324 progressCircle.style.strokeDashoffset = progress;
325 }
326
327 function stopMeditation() {
328 console.log('Meditation stopped');
329 clearInterval(meditationTimer);
330 audioElement.pause();
331 audioElement.currentTime = 0;
332
333 // Reset progress circle
334 progressCircle.style.strokeDashoffset = 628;
335
336 // Switch back to mood selection page
337 meditationPage.style.display = 'none';
338 moodSelectionPage.style.display = 'block';
339 }
340
341 function restartMeditation() {
342 clearInterval(meditationTimer);
343 audioElement.currentTime = 0;
344 startMeditation();
345 }
346
347 function toggleMute() {
348 if (isMuted) {
349 audioElement.muted = false;
350 muteButton.textContent = 'Mute Sound';
351 } else {
352 audioElement.muted = true;
353 muteButton.textContent = 'Unmute Sound';
354 }
355 isMuted = !isMuted;
356 }
357
358 // Dynamically generate particle list items
359 function generateParticles(number) {
360 particleContainer.innerHTML = ''; // Clear previous particles
361 const ul = document.getElementById('particle-container');
362 for (let i = 0; i < number; i++) {
363 const li = document.createElement('li');
364
365 const size = Math.random() * 10 + 5; // Random size between 5px and 15px
366 li.style.width = `${size}px`;
367 li.style.height = `${size}px`;
368
369 const positionX = Math.random() * window.innerWidth; // Random position across the screen
370 const positionY = Math.random() * window.innerHeight; // Random position across the screen
371 const delay = Math.random() * 5; // Random delay for each particle
372
373 li.style.left = `${positionX}px`;
374 li.style.top = `${positionY}px`;
375 li.style.animationDelay = `${delay}s`;
376
377 // Randomly assign animation class
378 const randomAnimation = animationStyles[Math.floor(Math.random() * animationStyles.length)];
379 li.style.animationName = randomAnimation;
380 li.style.animationDuration = `${Math.random() * 10 + 10}s`;
381 li.style.animationIterationCount = 'infinite';
382
383 // Some particles can be stars
384 if (Math.random() > 0.7) {
385 li.classList.add('star');
386 }
387
388 ul.appendChild(li);
389 }
390 }
391
392 // Function to change background animation randomly
393 function changeBackgroundAnimation() {
394 generateParticles(200);
395 // Change the animation every 20 seconds
396 setTimeout(changeBackgroundAnimation, 20000);
397 }
398
399 // Generate 200 particles dynamically at the start
400 generateParticles(200);
401
402</script>
403
404</body>
405</html>
406
Auto move mouse cursor snippet
Auto move mouse cursor snippet: a hand-crafted, open-source Bootstrap 5 utility. HTML, CSS & JS included, ready to copy.
Bootstrap 5 Ecommerce Product Detail Page Design snippet
Free Bootstrap 5 utility snippet — Bootstrap 5 Ecommerce Product Detail Page Design snippet. Preview, copy HTML & CSS, drop it into any Bootstrap 5 project.
Bootstrap 5 Ecommerce single product page design template
Free Bootstrap 5 utility snippet — Bootstrap 5 Ecommerce single product page design template. Preview, copy HTML & CSS, drop it into any Bootstrap 5 project.
Hand-crafted Tailwind CSS components — HTML or React, copy-paste ready, with live previews. Free forever, MIT licensed, no sign-up to use.
24
Components
57
Views
6
Likes
Trending now
More Bootstrap snippets developers are viewing this week.
Comments(0)
No comments yet — be the first to start the discussion.
Sign in to join the conversation.