-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
127 lines (112 loc) · 7.52 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
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Primary Meta Tags -->
<title>Study with Nature</title>
<meta name="description" content="Improve your productivity and focus with the calming sounds of nature and a built-in Pomodoro timer.">
<!-- Open Graph / Facebook Meta Tags -->
<meta property="og:type" content="website" />
<meta property="og:title" content="Study with Nature" />
<meta property="og:description" content="Improve your productivity and focus with the calming sounds of nature and a built-in Pomodoro timer." />
<meta property="og:image" content="https://i.imgur.com/k1E2zy9.png" />
<!-- Twitter Meta Tags -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Study with Nature">
<meta name="twitter:description" content="Improve your productivity and focus with the calming sounds of nature and a built-in Pomodoro timer.">
<meta name="twitter:image" content="https://i.imgur.com/k1E2zy9.png">
<link rel="icon" type="image/x-icon" href="images/favicon.ico">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/utilities.css">
<link rel="stylesheet" href="css/media-player.css">
<link rel="stylesheet" href="css/pomodoro.css">
<link href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp" rel="stylesheet">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200" />
</head>
<body>
<main class="gradient-background" id="gradientContainer">
<div class="overlay">
<div class="title-navbar">
<h1 class="color-white text-title">Study with Nature</h1>
<div class="navbar">
<button class="menu-button" onclick="openMobileMenu()"><span id="menu-icon"
class="material-icons-round">list</span></button>
</div>
</div>
<div class="main">
<div class="title-soundcontainer">
<div>
<div class="sound-container">
<img id="soundImg" class="sound-image box-shadow" src="images/soft-rain.jpg"
alt="A scene of light rain during the day in a residential neighborhood and a distant figure ahead is walking with an umbrella.">
<p class="sound-title text-body__title margin-none padding-none color-white"> Soft Rain </p>
<p class="sound-subtitle margin-none padding-none color-white text-subtitle text-opacity"> Cozy Downpour </p>
<audio id="sound-audio" loop data-sound-id="0" src="https://audio.jukehost.co.uk/xcb125pumHo2Lw4S9bEzfuSsWTToAmva"></audio>
<div class="sound-buttons">
<button id="previous" class="padding-none"><span class="material-icons-round">fast_rewind</span></button>
<button id="play-pause" class="padding-none"><span class="material-icons-round">play_arrow</span></button>
<button id="next" class="padding-none"><span class="material-icons-round">fast_forward</span></button>
</div>
<div id="volume-control" class="volume">
<span class="material-icons-round">volume_down</span>
<input class="box-shadow__small" type="range" id="volume-input" min="0" max="1" step="0.01">
<span class="material-icons-round">volume_up</span>
</div>
</div>
</div>
</div>
<div class="list-pomodoro">
<div class="list-container color-white__opaque box-shadow">
<ul id="desktop-sounds-list"></ul>
</div>
<div class="pomodoro-container box-shadow padding-container ">
<div id="pomodoro-start">
<h1 class="text-body__title"> Pomodoro </h1>
<p class="body-spacing text-body"> Set times to plan your study session </p>
<form id="pomodoro-form" class="text-center">
<div class="form-input text-left">
<div>
<label for="sessionTime" class="text-subtitle margin-xs"> Session Time: </label>
<input type="number" id="sessionTime" min="1" max="200" required />
</div>
<div>
<label for="sessionTime" class="text-subtitle margin-xs"> Short Break: </label>
<input type="number" id="shortBreak" min="1" max="200" required />
</div>
<div>
<label for="sessionTime" class="text-subtitle margin-xs"> Long Break: </label>
<input type="number" id="longBreak" min="1" max="200" required />
</div>
</div>
<button class="button-black padding-small text-subtitle" id="submit" type="submit"> Start </button>
</form>
</div>
<div id="pomodoro-during" class="text-center">
<h1 class="text-body__title text-left"> Pomodoro </h1>
<p class="text-left" id="sessionDescription"> Study Session Time </p>
<h2 id="timeDisplay"> 0:00 </h2>
<button class="button-black padding-small text-subtitle" id="pausePomodoro"> Pause </button>
<button class="button-black padding-small text-subtitle" id="endPomodoro"> End Session</button>
</div>
</div>
<p class="color-white x-links text-shadow"> Made with ✨ by <a href="https://twitter.com/maggiecodes_" target="_blank" class="color-white x-links-a">@maggiecodes</a> &
<a href="https://twitter.com/zaraehhs" target="_blank" class="color-white x-links-a"> @zaraehhs </a> </p>
<audio id="pomodoro-audio" src="https://audio.jukehost.co.uk/fDV1AmZFVXzsUH0mAB1reX0Kd1sdIuAY"></audio>
</div>
</div>
</main>
<div id="mobile-sounds-menu" class="menu-overlay">
<a href="javascript:void(0)" class="closebtn" onclick="closeMobileMenu()"><span class="material-symbols-outlined menu-arrow padding-container color-black">
arrow_back
</span></a>
<div class="menu-overlay-content">
<ul class="margin-top__none" id="mobile-sounds-list"></ul>
</div>
</div>
<script type="text/javascript" src="js/colorQuantization.js"></script>
<script type="text/javascript" src="js/mediaPlayer.js"></script>
<script type="text/javascript" src="js/pomodoro.js"></script>
</body>
</html>