Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 9f27832

Browse files
Add the project
1 parent 5d01f91 commit 9f27832

File tree

3 files changed

+172
-0
lines changed

3 files changed

+172
-0
lines changed

‎Source-Code/JustRelax/index.html‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
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>Just Relax App</title>
8+
9+
</head>
10+
11+
<body>
12+
<h1>Just Relax !!</h1>
13+
<div class="container">
14+
<div class="circle"></div>
15+
<p id="text"></p>
16+
<div class="pointer-container">
17+
<span class="pointer"></span>
18+
</div>
19+
<div class="gradient-circle"></div>
20+
</div>
21+
</body>
22+
<script src="script.js"></script>
23+
</body>
24+
</html>

‎Source-Code/JustRelax/script.js‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
/* eslint-disable no-use-before-define */
2+
const container = document.querySelector('.container');
3+
const text = document.querySelector('#text');
4+
5+
const TOTAL_TIME = 7500;
6+
const BREATHE_TIME = (TOTAL_TIME / 5) * 2;
7+
const HOLD_TIME = TOTAL_TIME / 7;
8+
9+
// Start the animation
10+
const startBreathingAnimation = () => {
11+
animateBreathing();
12+
setInterval(animateBreathing, TOTAL_TIME);
13+
};
14+
15+
const animateBreathing = () => {
16+
text.textContent = 'Breathe In!';
17+
container.classList.add('grow');
18+
container.classList.remove('shrink');
19+
20+
setTimeout(() => {
21+
text.textContent = 'Hold...';
22+
23+
setTimeout(() => {
24+
text.textContent = 'Breathe Out!';
25+
container.classList.add('shrink');
26+
container.classList.remove('grow');
27+
}, HOLD_TIME);
28+
}, BREATHE_TIME);
29+
};
30+
31+
// Initialize the animation
32+
startBreathingAnimation();

‎Source-Code/JustRelax/style.css‎

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

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /