forked from helton/noiseless
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
119 lines (112 loc) · 6.31 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Noiseless</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway:400,800" type="text/css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link rel="shortcut icon" type="image/png" href="assets/images/favicon.png"/>
<link rel="stylesheet" href="assets/css/noiseless.css">
</head>
<body>
<div class="flex-container">
<h1>Noiseless</h1>
<button id="btn-mute" class="flex-item fa fa-volume-up active" title="Mute/Unmute"></button>
<div id="welcome-text" class="flex-item">
<p>Keep your <strong>attention</strong> where it needs to be</p>
<p>Improve your <strong>focus</strong> and be more <strong>productive</strong></p>
<p>and, of course, have <strong>fun</strong>!</p>
</div>
<div id="buttons" class="flex-item">
<button id="btn-random">Random</button>
<button id="btn-productivity">Productivity</button>
<button id="btn-relax">Relax</button>
</div>
<div id="sound-types" class="flex-container flex-item">
<div data-key="rain" class="flex-container flex-item">
<img src="assets/images/rain.png" alt="Rain" title="Rain" class="flex-item">
<input type="range" min="0" max="100" class="flex-item">
</div>
<div data-key="thunderstorm" class="flex-container flex-item">
<img src="assets/images/thunderstorm.png" alt="Thunderstorm" title="Thunderstorm" class="flex-item">
<input type="range" min="0" max="100" class="flex-item">
</div>
<div data-key="wind" class="flex-container flex-item">
<img src="assets/images/wind.png" alt="Wind" title="Wind" class="flex-item">
<input type="range" min="0" max="100" class="flex-item">
</div>
<div data-key="forest" class="flex-container flex-item">
<img src="assets/images/forest.png" alt="Forest" title="Forest" class="flex-item">
<input type="range" min="0" max="100" class="flex-item">
</div>
<div data-key="leaves" class="flex-container flex-item">
<img src="assets/images/leaves.png" alt="Leaves" title="Leaves" class="flex-item">
<input type="range" min="0" max="100" class="flex-item">
</div>
<div data-key="waterstream" class="flex-container flex-item">
<img src="assets/images/waterstream.png" alt="Water Stream" title="Water Stream" class="flex-item">
<input type="range" min="0" max="100" class="flex-item">
</div>
<div data-key="seaside" class="flex-container flex-item">
<img src="assets/images/seaside.png" alt="Seaside" title="Seaside" class="flex-item">
<input type="range" min="0" max="100" class="flex-item">
</div>
<div data-key="water" class="flex-container flex-item">
<img src="assets/images/water.png" alt="Water" title="Water" class="flex-item">
<input type="range" min="0" max="100" class="flex-item">
</div>
<div data-key="fire" class="flex-container flex-item">
<img src="assets/images/fire.png" alt="Fire" title="Fire" class="flex-item">
<input type="range" min="0" max="100" class="flex-item">
</div>
<div data-key="summernight" class="flex-container flex-item">
<img src="assets/images/summernight.png" alt="Summer Night" title="Summer Night" class="flex-item">
<input type="range" min="0" max="100" class="flex-item">
</div>
<div data-key="coffee" class="flex-container flex-item">
<img src="assets/images/coffee.png" alt="Coffee" title="Coffee" class="flex-item">
<input type="range" min="0" max="100" class="flex-item">
</div>
<div data-key="train" class="flex-container flex-item">
<img src="assets/images/train.png" alt="Train" title="Train" class="flex-item">
<input type="range" min="0" max="100" class="flex-item">
</div>
<div data-key="fan" class="flex-container flex-item">
<img src="assets/images/fan.png" alt="Fan" title="Fan" class="flex-item">
<input type="range" min="0" max="100" class="flex-item">
</div>
<div data-key="whitenoise" class="flex-container flex-item">
<img src="assets/images/whitenoise.png" alt="White noise" title="White noise" class="flex-item">
<input type="range" min="0" max="100" class="flex-item">
</div>
<div data-key="pinknoise" class="flex-container flex-item">
<img src="assets/images/pinknoise.png" alt="Pink noise" title="Pink noise" class="flex-item">
<input type="range" min="0" max="100" class="flex-item">
</div>
<div data-key="brownnoise" class="flex-container flex-item">
<img src="assets/images/brownnoise.png" alt="Brown noise" title="Brown noise" class="flex-item">
<input type="range" min="0" max="100" class="flex-item">
</div>
</div>
</div>
<audio data-key="rain" src="assets/sounds/rain.ogg" loop></audio>
<audio data-key="thunderstorm" src="assets/sounds/thunderstorm.ogg" loop></audio>
<audio data-key="wind" src="assets/sounds/wind.ogg" loop></audio>
<audio data-key="forest" src="assets/sounds/forest.ogg" loop></audio>
<audio data-key="leaves" src="assets/sounds/leaves.ogg" loop></audio>
<audio data-key="waterstream" src="assets/sounds/waterstream.ogg" loop></audio>
<audio data-key="seaside" src="assets/sounds/seaside.ogg" loop></audio>
<audio data-key="water" src="assets/sounds/water.ogg" loop></audio>
<audio data-key="fire" src="assets/sounds/fire.ogg" loop></audio>
<audio data-key="summernight" src="assets/sounds/summernight.ogg" loop></audio>
<audio data-key="coffee" src="assets/sounds/coffee.ogg" loop></audio>
<audio data-key="train" src="assets/sounds/train.ogg" loop></audio>
<audio data-key="fan" src="assets/sounds/fan.ogg" loop></audio>
<audio data-key="whitenoise" src="assets/sounds/whitenoise.ogg" loop></audio>
<audio data-key="pinknoise" src="assets/sounds/pinknoise.ogg" loop></audio>
<audio data-key="brownnoise" src="assets/sounds/brownnoise.ogg" loop></audio>
<script src="assets/js/noiseless.js" charset="utf-8"></script>
</body>
</html>