-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
146 lines (118 loc) · 5.79 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
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Studiowave | Chillout tunes and inspiration</title>
<!-- META TAGS -->
<meta name="description" content="Listen to lo-fi beats and get inspired by amazing speakers">
<meta name="author" content="Neef Rehman">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Twitter Card data -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@s0methingsays">
<meta name="twitter:title" content="Studiowave | Chillout tunes and inspiration">
<meta name="twitter:description" content="Listen to lo-fi beats and get inspired by amazing speakers">
<meta name="twitter:creator" content="@neefstweets">
<meta name="twitter:image" content="https://studiowave.fm/images/meta_og_twitter.jpg">
<!-- Open Graph data -->
<meta property="og:title" content="studiowave.fm"/>
<meta property="og:type" content="article"/>
<meta property="og:url" content="https://www.studiowave.fm/"/>
<meta property="og:image" content="https://studiowave.fm/images/meta_og_twitter.jpg"/>
<meta property="og:description" content="Listen to lo-fi beats and get inspired by amazing speakers"/>
<meta property="og:site_name" content="Studiowave | Chillout tunes and inspiration"/>
<!-- Stylesheets -->
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="rangeslider.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:500,900,900i">
<link rel="icon" href="images/Favicon.png" type="image/x-icon">
</head>
<body>
<div class="wrapper">
<div id="social">
<a href="https://twitter.com/s0methingsays" target="_blank" class="icon"><img src="images/icon_twitter.png"/></a>
<a href="https://www.facebook.com/wearestudiosomething/" target="_blank" class="icon"><img src="images/icon_facebook.png"/></a>
<a href="https://www.instagram.com/somethinggram/" target="_blank" class="icon"><img src="images/icon_instagram.png"/></a>
</div>
<div id="header">
<div id="logo" data-tilt data-tilt-scale="1.1" data-tilt-speed="2500">
<img src="images/logo_yellow.svg" class="logo_image yellow"/>
<img src="images/logo_black.svg" class="logo_image black"/>
<img src="images/logo_purple.svg" class="logo_image purple"/>
</div>
<div id="tagline">
<p>chillout tunes and inspiration</p>
</div>
</div>
<div id="alerts">
<p class="mobile small_screen">This webapp isn't optimised for screens this tight.</p>
<p class="mobile small_screen">Broaden your horizons :)</p>
<p class="mobile mobile_device">This webapp is incompatible with media players on mobile devices.</p>
<p class="mobile mobile_device">¯\_(ツ)_/¯</p>
<p class="mobile mobile_device">It's great on desktop, though. Promise!</p>
</div>
<div id="media" class="desktop">
<div id="titles">
<div id=beat>
<p class="type">BEAT</p>
<a class="title" id="BeatTitle" href="" target="_blank">loading...</a>
</div>
<div id="speech">
<p class="type">SPEECH</p>
<a class="title" id="SpeechTitle" href="" target="_blank">loading...</a>
</div>
</div>
<div id="player">
<div id="beatplayer">
<div id="beatreset"> <img src="images/reset.png" class="reset btn"/> </div>
<div class="visually-hidden"> <div id="beatvideo"></div> </div>
<div id="beatvolume">
<input id="beatslider"
type="range"
min="0"
max="80"
step="1"
value="40"
data-orientation="horizontal"
>
</div>
</div>
<div id="playpausebutton"> <img src="images/play.png" id="buttonicon" class="playpause btn"/> </div>
<div id="speechplayer">
<div class="visually-hidden"> <div id="speechvideo"></div> </div>
<div id="speechvolume">
<input id="speechslider"
type="range"
min="0"
max="100"
step="1"
value="90"
data-orientation="horizontal"
>
</div>
<div id="speechreset"> <img src="images/reset.png" class="reset btn"/> </div>
</div>
</div>
</div>
<div id="share" class="desktop">
<p id="tooltip">COPIED 😎</p>
<img src="images/share.png" class="sharebutton btn" data-clipboard-text="studiowave.fm"/>
</div>
<footer>
<div id="USTWOlogo">
<a href="https://ustwo.com" target="_blank" class="studiologo"><img src="images/USTWO_logo.png"/></a>
</div>
<div id="endline">
<p class="desktop">made for studios by studios</p>
</div>
<div id="SSlogo">
<a href="https://studiosomething.co" target="_blank" class="studiologo"><img src="images/SS_logo.png"/></a>
</div>
</footer>
</div>
<!-- Scripts-->
<script src="javascript/vanilla-tilt/vanilla-tilt.min.js"></script>
<script src="javascript/main.js"></script>
<script src="https://www.youtube.com/iframe_api"></script>
</body>
</html>