-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
107 lines (95 loc) · 4.58 KB
/
index.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
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="theme-color" content="#222F3E">
<link id="favicon" rel="icon" type="image/png" sizes="16x16" href="./assets/pomodori.png">
<link rel="stylesheet" href="style.css">
<script defer src="app.js"></script>
<link rel="canonical" href="https://fabiodevcode.github.io/Pomodoro-App/" />
<link rel="manifest" href="/Pomodoro-App/manifest.json">
<title>Pomodoro App</title>
</head>
<body>
<div class="titleBloc">
<h1>Pomodoro</h1>
<div class="setting">
<svg xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512">
<!-- Font Awesome Pro 5.15.4 by @fontawesome -
https://fontawesome.com License -
https://fontawesome.com/license (Commercial License) -->
<path d="M487.4 315.7l-42.6-24.6c4.3-23.2 4.3-47 0-70.2l42.6-24.6c4.9-2.8 7.1-8.6 5.5-14-11.1-35.6-30-67.8-54.7-94.6-3.8-4.1-10-5.1-14.8-2.3L380.8 110c-17.9-15.4-38.5-27.3-60.8-35.1V25.8c0-5.6-3.9-10.5-9.4-11.7-36.7-8.2-74.3-7.8-109.2 0-5.5 1.2-9.4 6.1-9.4 11.7V75c-22.2 7.9-42.8 19.8-60.8 35.1L88.7 85.5c-4.9-2.8-11-1.9-14.8 2.3-24.7 26.7-43.6 58.9-54.7 94.6-1.7 5.4.6 11.2 5.5 14L67.3 221c-4.3 23.2-4.3 47 0 70.2l-42.6 24.6c-4.9 2.8-7.1 8.6-5.5 14 11.1 35.6 30 67.8 54.7 94.6 3.8 4.1 10 5.1 14.8 2.3l42.6-24.6c17.9 15.4 38.5 27.3 60.8 35.1v49.2c0 5.6 3.9 10.5 9.4 11.7 36.7 8.2 74.3 7.8 109.2 0 5.5-1.2 9.4-6.1 9.4-11.7v-49.2c22.2-7.9 42.8-19.8 60.8-35.1l42.6 24.6c4.9 2.8 11 1.9 14.8-2.3 24.7-26.7 43.6-58.9 54.7-94.6 1.5-5.5-.7-11.3-5.6-14.1zM256 336c-44.1 0-80-35.9-80-80s35.9-80 80-80 80 35.9 80 80-35.9 80-80 80z"/>
</svg>
</div>
</div>
<div class="group-btn">
<div id="block_click" class="none"></div>
<div class="back-btn anim1"></div>
<button class="btns btn1 active">Work Time</button>
<button class="btns btn2">Short Break</button>
<button class="btns btn3">Long Break</button>
</div>
<div class="horloge">
<h2 class="horloge_title">Work Time</h2>
<!-- <audio src="./assets/Bell.mp3"></audio> -->
<div class="progress-bar">
<div class="time">
<div class="mins"></div>
<div class="point">
<div></div>
<div></div>
</div>
<div class="secs"></div>
</div>
</div>
<button id="play_pause" class="play">
<svg class="svgPlay" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 448 512">
<!-- Font Awesome Pro 5.15.4 by @fontawesome -
https://fontawesome.com License -
https://fontawesome.com/license
(Commercial License) -->
<path d="M424.4 214.7L72.4 6.6C43.8-10.3 0 6.1 0 47.9V464c0 37.5 40.7 60.1 72.4 41.3l352-208c31.4-18.5 31.5-64.1 0-82.6z"/>
</svg>
<svg class="svgStop none" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 448 512">
<!--! Font Awesome Pro 6.1.1 by @fontawesome -
https://fontawesome.com License -
https://fontawesome.com/license
(Commercial License) Copyright 2022 Fonticons, Inc. -->
<path d="M0 96C0 60.65 28.65 32 64 32H384C419.3 32 448 60.65 448 96V416C448 451.3 419.3 480 384 480H64C28.65 480 0 451.3 0 416V96z"/>
</svg>
</button>
</div>
<div class="modale none">
<h3>SETTINGS</h3>
<form>
<h4>Enter data in minutes</h4>
<label for="work">WORK TIME</label>
<input id="work" name="work" type="number" min="1" max="99" value="25">
<label for="short">SHORT BREAK</label>
<input id="short" name="short" type="number" min="1" max="99" value="5">
<label for="long">LONG BREAK</label>
<input id="long" name="long" type="number" min="1" max="99" value="15">
<button class="setting_save">SAVE MY CHOICE</button>
</form>
</div>
<div class="close_modale none">
</div>
<script>
if ('serviceWorker' in navigator){
window.addEventListener('load', function() {
navigator.serviceWorker
.register(
'/Pomodoro-App/sw.js',
{scope: '/Pomodoro-App/'}
).then(function(){
console.log("Service Worker Registered !")
});
});
};
</script>
</body>
</html>