-
Notifications
You must be signed in to change notification settings - Fork 1
/
relax.html
143 lines (136 loc) · 4.96 KB
/
relax.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
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
<!DOCTYPE html>
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Fredoka+One' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="bootstrap.min.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<h2>Relaxing Sounds</h2>
</div>
<button type="button" class="btn btn-default navbar-btn navbar-right" data-toggle="modal" data-target="#login_modal">Sign in</button>
</div>
</nav>
<div id="sound_container">
<div id="now_playing"></div>
<div class="audio_container">
<ul>
<li><img class="sound_img" src="bird.jpg"/></li>
<li><label class="sound_desc">Lay back and relax with some bird sounds</label></li>
<li><audio id="birds" loop class="sound_file" controls>
<source src="birds.mp3" type="audio/mp3">
</audio></li>
</ul>
</div>
<div class="audio_container">
<ul>
<li><img class="sound_img" src="church.jpg"/></li>
<li><label class="sound_desc">Play some soothing church bells</label></li>
<li><audio id="churchbells" loop class="sound_file" controls>
<source src="churchbells.mp3" type="audio/mp3">
</audio></li>
</ul>
</div>
<div class="audio_container">
<ul>
<li><img class="sound_img" src="cricket.jpg"/></li>
<li><label class="sound_desc">Enjoy some musical crickets</label></li>
<li><audio id="cricket" loop class="sound_file" controls>
<source src="cricket.mp3" type="audio/mp3">
</audio></li>
</ul>
</div>
<div class="audio_container">
<ul>
<li><img class="sound_img" src="fire.jpeg"/></li>
<li><label class="sound_desc">Gather round the fire</label></li>
<li><audio id="fire" loop class="sound_file" controls>
<source src="fire.mp3" type="audio/mp3">
</audio></li>
</ul>
</div>
<div class="audio_container">
<ul>
<li><img class="sound_img" src="forest.jpg"/></li>
<li><label class="sound_desc">Take a stroll through the forest</label></li>
<li><audio id="forest" loop class="sound_file" controls>
<source src="forest.mp3" type="audio/mp3">
</audio></li>
</ul>
</div>
<div class="audio_container">
<ul>
<li><img class="sound_img" src="rain.jpg"/></li>
<li><label class="sound_desc">Let the rain drop on your head</label></li>
<li><audio id="rain" loop class="sound_file" controls>
<source src="rain.mp3" type="audio/mp3">
</audio></li>
</ul>
</div>
<div class="audio_container">
<ul>
<li><img class="sound_img" src="typing.jpg"/></li>
<li><label class="sound_desc">Type type type</label></li>
<li><audio id="typing" loop class="sound_file" controls>
<source src="typing.mp3" type="audio/mp3">
</audio></li>
</ul>
</div>
<div class="audio_container">
<ul>
<li><img class="sound_img" src="wave.jpg"/></li>
<li><label class="sound_desc">Go for a swim in the waves</label></li>
<li><audio id="waves" loop class="sound_file" controls>
<source src="waves.mp3" type="audio/mp3">
</audio></li>
</ul>
</div>
<div class="audio_container">
<ul>
<li><img class="sound_img" src="windchime.jpg"/></li>
<li><label class="sound_desc">Let the winchimes relax you</label></li>
<li><audio id="windchimes" loop class="sound_file" controls>
<source src="windchimes.mp3" type="audio/mp3">
</audio></li>
</ul>
</div>
</div>
<div id="play_list">
<h4>Playlist</h4>
<h6>Adjust the volume and click on the images to add sounds</h6>
<input id="playlist_name" placeholder="Name your playlist"/>
<ul id="sound_playlist">
</ul>
<div id="buttons">
<button class="btn btn-default" id="play">Play</button>
<button class="btn btn-default" id="save">Save</button>
<button class="btn btn-default" id="cancel">Cancel</button>
</div>
<button class="btn btn-default" id="random">Randomize</button>
<h4 id="saved_plalists">Saved playlist</h4>
</div>
<form class="modal fade" id="login_modal" class="uploadForm" method="post">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Log In</h4>
</div>
<div class="input_container">
<input id="log_email" class="sample_inputs" placeholder="email" type="text" name="userEmail" />
<input type="password" id="log_pass" class="sample_inputs" placeholder="password" type="text" name="userPassword" />
<button class="btn btn-default" id="login" type="submit" value="Log In" name="submit">Log In</button>
<label class="log_error"></label>
</div>
</div>
</div>
</form>
</body>
<script src="jquery-1.11.2.min.js"></script>
<script src="bootstrap.min.js"></script>
<script src="script.js"></script>
</html>