forked from iamrahulmahato/master-web-development
-
Notifications
You must be signed in to change notification settings - Fork 0
/
mindful-breating.html
87 lines (76 loc) · 2.36 KB
/
mindful-breating.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mindfulness Breathing App</title>
<style>
/* Reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, sans-serif;
}
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
background-color: #eefec7;
color: #333;
}
.app-container {
text-align: center;
}
.circle {
width: 150px;
height: 150px;
border-radius: 50%;
background-color: #87ceeb;
margin: 0 auto;
transition: transform 4s ease-in-out;
}
.text {
margin-top: 20px;
font-size: 1.5rem;
font-weight: bold;
}
.small-text {
margin-top: 10px;
font-size: 1rem;
color: #555;
}
</style>
</head>
<body>
<div class="app-container">
<div class="circle" id="breathingCircle"></div>
<br>
<br>
<div class="text" id="breathingText">Breathe In</div>
<div class="small-text">Follow the circle for a calming experience</div>
</div>
<script>
const circle = document.getElementById('breathingCircle');
const text = document.getElementById('breathingText');
const totalTime = 10000; // Total time for one cycle (12 seconds)
const breatheInTime = (totalTime / 6) * 2; // 4 seconds for inhale
const holdTime = totalTime / 6; // 2 seconds for hold
const breatheOutTime = (totalTime / 6) * 3; // 6 seconds for exhale
function breathAnimation() {
text.innerText = 'Breathe In';
circle.style.transform = 'scale(1.5)';
setTimeout(() => {
text.innerText = 'Hold';
setTimeout(() => {
text.innerText = 'Breathe Out';
circle.style.transform = 'scale(1)';
}, holdTime);
}, breatheInTime);
}
// Run the animation in a loop
setInterval(breathAnimation, totalTime);
</script>
</body>
</html>