Skip to content

Commit 9ac61f8

Browse files
Neha045Neha045
committed
Add Relaxer app
1 parent c37de76 commit 9ac61f8

4 files changed

Lines changed: 170 additions & 0 deletions

File tree

‎Relaxer/Neha045/image/bg.jpg‎

261 KB
Loading

‎Relaxer/Neha045/index.html‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
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+
<link rel="stylesheet" href="style.css">
7+
<title>Relaxer</title>
8+
</head>
9+
<body>
10+
<h1>Relaxer</h1>
11+
<div class="container" id="container">
12+
<div class="circle">
13+
14+
</div>
15+
16+
<p id="text">
17+
18+
</p>
19+
20+
<div class="pointer-container">
21+
<div class="pointer"></div>
22+
</div>
23+
24+
<div class="gradient-circle">
25+
26+
</div>
27+
</div>
28+
29+
<script src="script.js"></script>
30+
</body>
31+
</html>

‎Relaxer/Neha045/script.js‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
const container = document.querySelector('.container');
2+
const text = document.querySelector('#text');
3+
4+
const totalTime = 8000;
5+
const breatheTime = (totalTime/5) * 2
6+
const holdTime = totalTime / 5
7+
8+
breatheAnimation()
9+
10+
function breatheAnimation(){
11+
text.innerHTML = 'Breathe In!';
12+
container.className = 'container grow';
13+
14+
setTimeout(() => {
15+
text.innerText = 'Hold'
16+
17+
setTimeout(() => {
18+
text.innerText = 'Breathe Out!';
19+
container.className = 'container shrink';
20+
}, holdTime);
21+
}, breatheTime);
22+
}
23+
24+
setInterval(breatheAnimation, 8000)

‎Relaxer/Neha045/style.css‎

Lines changed: 115 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,115 @@
1+
2+
@import url('https://fonts.googleapis.com/css?family=Montserrat&display=swap');
3+
4+
5+
* {
6+
box-sizing: border-box;
7+
}
8+
9+
body {
10+
background: #224941 url('./image/bg.jpg') no-repeat center center/cover;
11+
color: #fff;
12+
font-family: 'Montserrat', sans-serif;
13+
min-height: 100vh;
14+
overflow: hidden;
15+
display: flex;
16+
flex-direction: column;
17+
align-items: center;
18+
margin: 0;
19+
}
20+
21+
.container {
22+
display: flex;
23+
align-items: center;
24+
justify-content: center;
25+
margin: auto;
26+
height: 300px;
27+
width: 300px;
28+
position: relative;
29+
transform: scale(1);
30+
}
31+
32+
.circle {
33+
background-color: #0A0F02;
34+
height: 100%;
35+
width: 100%;
36+
border-radius: 50%;
37+
position: absolute;
38+
top: 0;
39+
left: 0;
40+
z-index: -1;
41+
}
42+
43+
.gradient-circle {
44+
background: conic-gradient(
45+
#B0C05D 0%,
46+
#6DA224 40%,
47+
#fff 40%,
48+
#fff 60%,
49+
#3C730E 60%,
50+
#52941E 100%
51+
);
52+
height: 320px;
53+
width: 320px;
54+
z-index: -2;
55+
border-radius: 50%;
56+
position: absolute;
57+
top: -10px;
58+
left: -10px;
59+
}
60+
61+
.pointer-container{
62+
position: absolute;
63+
top: -40px;
64+
left: 140px;
65+
width: 20px;
66+
height: 190px;
67+
animation: rotate 8s linear forwards infinite;
68+
transform-origin: bottom center;
69+
}
70+
71+
.pointer{
72+
background-color: #fff;
73+
border-radius: 50%;
74+
height: 20px;
75+
width: 20px;
76+
display: block;
77+
}
78+
79+
.container.grow{
80+
animation: grow 4s linear forwards ;
81+
}
82+
83+
.container.shrink{
84+
animation: shrink 4s linear forwards;
85+
}
86+
87+
@keyframes rotate {
88+
from{
89+
transform: rotate(0deg);
90+
}
91+
92+
to{
93+
transform: rotate(360deg) ;
94+
}
95+
}
96+
97+
@keyframes grow {
98+
from{
99+
transform: scale(1);
100+
}
101+
102+
to{
103+
transform: scale(1.2) ;
104+
}
105+
}
106+
107+
@keyframes shrink {
108+
from{
109+
transform: scale(1.2);
110+
}
111+
112+
to{
113+
transform: scale(1) ;
114+
}
115+
}

0 commit comments

Comments
 (0)