-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathmain.html
More file actions
102 lines (93 loc) · 8.89 KB
/
main.html
File metadata and controls
102 lines (93 loc) · 8.89 KB
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
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Ford</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<link href="css/style.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" rel="stylesheet">
<!-- jQuery -->
<script>if (typeof module === 'object') {window.module = module; module = undefined;}</script>
<script src="js/jquery-3.3.1.min.js"></script>
<script>if (window.module) module = window.module;</script>
<!-- End jQuery -->
<!-- Maps -->
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.js"></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.css' rel='stylesheet' />
<link href="css/map-plugins/mapbox-gl-traffic.css" rel="stylesheet">
<link href="css/map-plugins/mapbox-gl-directions.css" rel="stylesheet">
<!-- End Maps -->
</head>
<body>
<div class="contents">
<!-- Maps -->
<div id="map"></div>
<!-- End Maps -->
<!-- Music -->
<div class="music">
<!-- <a onclick="expandMusic()" class="expand-music">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 451.8 451.8"><path d="M248.3 106.4l194.3 194.3c12.4 12.4 12.4 32.4 0 44.7 -12.4 12.4-32.4 12.4-44.7 0L225.9 173.5 54 345.4c-12.4 12.4-32.4 12.4-44.7 0 -12.4-12.4-12.4-32.4 0-44.7L203.6 106.4c6.2-6.2 14.3-9.3 22.4-9.3C234 97.1 242.1 100.2 248.3 106.4z" /></svg>
</a> -->
<div class="grabber">
<div class="bg-white shadow-lg rounded-lg overflow-hidden grabber-design"></div>
</div>
<div class="bg-white mx-auto max-w-sm shadow-lg rounded-lg overflow-hidden floating music">
<div class="sm:flex sm:items-center px-6 py-4 music-contents" draggable="true" ondrag="expandMusic(event)">
<!-- <div class="controls">
<img src="images/album-cover-test.jpg">
<span class="song-name">PRBLMS</span>
<span class="song-artist">6LACK</span>
<input type="range" min="0" max="100" value="25" name="music-timecode">
</div> -->
<iframe id="soundcloud" class="soundcloud" src="https://soundcloud.com" frameborder="0" scrolling="no"></iframe>
<iframe id="spotify" class="spotify disabled" src="https://open.spotify.com/user/sos_dylan" frameborder="0"></iframe>
</div>
<div class="whitespace"></div>
</div>
</div>
<!-- End Music -->
<!-- Navigation Bar -->
<div class="bottom-navigation">
<div class="nav-item">
<!-- Rear Window Defroster -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 233.4 233.4"><path d="M225.9 9.9H7.5c-4.1 0-7.5 3.4-7.5 7.5v141.3c0 4.1 3.4 7.5 7.5 7.5h46.8c-5.9 17.7-9.2 37.9 10.7 55.3 1.4 1.2 3.2 1.9 4.9 1.9 2.1 0 4.2-0.9 5.6-2.6 2.7-3.1 2.4-7.9-0.7-10.6 -14.1-12.3-11.6-25.2-4.7-44h43.5c-5.9 17.7-9.2 37.9 10.7 55.3 1.4 1.2 3.2 1.9 4.9 1.9 2.1 0 4.2-0.9 5.6-2.6 2.7-3.1 2.4-7.9-0.7-10.6 -14.1-12.3-11.6-25.2-4.7-44h43.5c-5.9 17.7-9.2 37.9 10.7 55.3 1.4 1.2 3.2 1.9 4.9 1.9 2.1 0 4.2-0.9 5.6-2.6 2.7-3.1 2.4-7.9-0.7-10.6 -14.1-12.3-11.6-25.2-4.7-44h36.9c4.1 0 7.5-3.4 7.5-7.5V17.4C233.4 13.3 230 9.9 225.9 9.9zM218.4 151.3h-23.9c5.1-15.1 8.2-32-3.4-47.5l8.2-6.9c1.3-1.1 1.9-2.6 1.8-4.3 -0.1-1.6-1.1-3.1-2.5-3.9l-45.9-26.2c-1.8-1-4.1-0.8-5.7 0.5 -1.6 1.3-2.2 3.6-1.5 5.5l17.9 49.7c0.6 1.5 1.8 2.7 3.4 3.1 0.4 0.1 0.9 0.2 1.3 0.2 1.2 0 2.3-0.4 3.2-1.2l8.3-6.9c7.4 10.6 4.8 22.1-1 37.8h-43.5c5.1-15.1 8.2-32-3.4-47.5l8.2-6.9c1.3-1.1 1.9-2.6 1.8-4.3 -0.1-1.6-1.1-3.1-2.5-3.9L93.3 62.5c-1.8-1-4.1-0.8-5.7 0.5 -1.6 1.3-2.2 3.6-1.5 5.5l17.9 49.7c0.6 1.5 1.8 2.7 3.4 3.1 0.4 0.1 0.9 0.2 1.3 0.2 1.2 0 2.3-0.4 3.2-1.2l8.3-6.9c7.4 10.6 4.8 22.1-1 37.8H75.7c5.1-15.1 8.2-32-3.4-47.5l8.2-6.9c1.3-1.1 1.9-2.6 1.8-4.3 -0.1-1.6-1.1-3.1-2.5-3.9L33.9 62.5c-1.8-1-4.1-0.8-5.7 0.5 -1.6 1.3-2.2 3.6-1.5 5.5l17.9 49.7c0.6 1.5 1.8 2.7 3.4 3.1 0.4 0.1 0.9 0.2 1.3 0.2 1.2 0 2.3-0.4 3.2-1.2l8.3-6.9c7.4 10.6 4.8 22.1-1 37.8H15V24.9h203.4V151.3z"/></svg>
</div>
<div class="nav-item">
<!-- Windshield Defroster -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 288 288"><path d="M285.8 119.7c2.9-2.9 2.9-7.7 0-10.6 -37.9-37.9-88.2-58.7-141.8-58.7 -53.6 0-103.9 20.9-141.8 58.7C0.8 110.5 0 112.4 0 114.4c0 2 0.8 3.9 2.2 5.3l86.7 86.7c0.7 0.7 1.5 1.2 2.4 1.6 -0.3 9.4 2.7 19 12.8 27.8 1.4 1.2 3.2 1.9 4.9 1.9 2.1 0 4.2-0.9 5.6-2.6 2.7-3.1 2.4-7.9-0.7-10.6 -8.4-7.4-9-14.8-6.2-25.1 10.3-7.3 22.6-11.3 35.4-11.4 -5.3 15.1-9 32.5 8.4 47.8 1.4 1.2 3.2 1.9 4.9 1.9 2.1 0 4.2-0.9 5.6-2.6 2.7-3.1 2.4-7.9-0.7-10.6 -10.9-9.5-8.7-19.2-2.9-34.8 10.4 2.5 20 7.6 28 15 -1.1 10.5 1.3 21.3 12.5 31.1 1.4 1.2 3.2 1.9 4.9 1.9 2.1 0 4.2-0.9 5.6-2.6 2.7-3.1 2.4-7.9-0.7-10.6 -7.2-6.3-8.7-12.8-7.1-20.9L285.8 119.7zM163.6 175.5c3.4-11.4 4.8-23.7-3.5-35.3l5.5-4.6c1.3-1.1 1.9-2.6 1.8-4.3 -0.1-1.6-1.1-3.1-2.5-3.9l-36.7-21c-1.8-1-4.1-0.8-5.7 0.5 -1.6 1.3-2.2 3.6-1.5 5.5l14.3 39.8c0.6 1.5 1.8 2.7 3.4 3.1 0.4 0.1 0.9 0.2 1.3 0.2 1.2 0 2.3-0.4 3.2-1.2l5.4-4.5c4.1 6.6 3.2 13.7 0.1 23.2 -1.5-0.1-3.1-0.1-4.6-0.1 -10.1 0-19.8 1.9-28.9 5.5 4.1-12.2 6.5-25.7-2.5-38.3l5.5-4.6c1.3-1.1 1.9-2.6 1.8-4.3 -0.1-1.6-1.1-3.1-2.5-3.9l-36.7-21c-1.8-1-4.1-0.8-5.7 0.5 -1.6 1.3-2.2 3.6-1.5 5.5l14.3 39.8c0.6 1.5 1.8 2.7 3.4 3.1 0.4 0.1 0.9 0.2 1.3 0.2 1.2 0 2.3-0.4 3.2-1.2l5.4-4.5c5.3 8.4 2.3 17.8-3 31.8 -1 2.8-2.1 5.7-3.1 8.7 -0.1 0.1-0.3 0.2-0.4 0.3l-76.3-76.3c34.4-31.7 78.7-49.1 125.8-49.1 47.1 0 91.4 17.4 125.8 49.1l-57.7 57.7c2.7-10.4 3.1-21.5-4.4-32l5.5-4.6c1.3-1.1 1.9-2.6 1.8-4.3 -0.1-1.6-1.1-3.1-2.5-3.9l-36.7-21c-1.8-1-4.1-0.8-5.7 0.5 -1.6 1.3-2.2 3.6-1.5 5.5l14.3 39.8c0.6 1.5 1.8 2.7 3.4 3.1 0.4 0.1 0.9 0.2 1.3 0.2 1.2 0 2.3-0.4 3.2-1.2l5.4-4.5c5.3 8.4 2.3 17.8-3 31.8 -0.8 2.2-1.7 4.4-2.5 6.7C182.5 182.4 173.3 178 163.6 175.5z"/></svg>
</div>
<div class="nav-item">
<!-- Climate Control -->
<svg id="Capa_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 165 165" class="undefined"><path d="M153.7 103.6c-7.9-6.6-16.1-8-23.4-9.2 -4.8-0.8-8.7-1.5-12.2-3.5 19.3-4.2 33.8-14.2 41.2-28.6 7.1-13.8 6.6-30.3-1.3-45.3 -4.8-9.1-15.3-15.7-26.7-16.9 -10.9-1.1-21.1 2.9-27.9 11.1 -6.6 7.9-8 16.1-9.2 23.4 -0.8 4.8-1.5 8.7-3.4 12.1 -4.2-19.3-14.2-33.8-28.6-41.3C48.6-1.6 32-1.1 17.1 6.8 8 11.6 1.4 22.1 0.2 33.5 -0.9 44.4 3.1 54.6 11.3 61.4c7.9 6.6 16.1 8 23.4 9.2 4.8 0.8 8.7 1.5 12.2 3.5 -19.3 4.2-33.8 14.2-41.2 28.6 -7.1 13.8-6.6 30.3 1.3 45.3 4.8 9.1 15.3 15.7 26.7 16.9 1.2 0.1 2.4 0.2 3.6 0.2 9.5 0 18.3-4 24.3-11.3 6.6-7.9 8-16.1 9.2-23.4 0.8-4.8 1.5-8.7 3.4-12.1 4.2 19.3 14.2 33.8 28.6 41.3 6.5 3.4 13.6 5 20.8 5 8.2 0 16.5-2.1 24.4-6.3 9.1-4.8 15.7-15.3 16.9-26.7C165.9 120.6 161.9 110.4 153.7 103.6zM82.5 101.1c-10.3 0-18.7-8.4-18.7-18.7s8.4-18.7 18.7-18.7 18.7 8.4 18.7 18.7S92.8 101.1 82.5 101.1zM109.1 37.2c1-6.1 1.9-11.4 5.9-16.3 4.9-5.8 11.4-6.1 14.8-5.8 6.3 0.7 12.5 4.4 14.9 9 5.7 10.7 6.1 21.9 1.2 31.4 -5.3 10.2-16 17.4-30.5 20.7 -1.6-8.2-6.2-15.4-12.6-20.4C107 49.5 108.2 42.8 109.1 37.2zM20.9 49.8c-5.8-4.9-6.1-11.4-5.8-14.8 0.7-6.3 4.4-12.5 9-14.9 10.7-5.7 21.9-6.1 31.4-1.2 10.2 5.3 17.4 16 20.7 30.6 -8.2 1.6-15.4 6.1-20.3 12.5 -6.3-4.1-13-5.2-18.7-6.2C31 54.7 25.7 53.8 20.9 49.8zM55.8 127.8c-1 6.1-1.9 11.4-5.9 16.3 -4.9 5.8-11.4 6.1-14.8 5.8 -6.3-0.7-12.5-4.4-14.9-9 -5.7-10.7-6.1-21.9-1.2-31.4 5.3-10.2 16-17.4 30.5-20.7 1.6 8.2 6.2 15.4 12.6 20.4C57.9 115.5 56.8 122.1 55.8 127.8zM149.9 130c-0.7 6.3-4.4 12.5-9 14.9 -10.7 5.7-21.9 6.1-31.4 1.2 -10.2-5.3-17.4-16-20.7-30.6 8.2-1.6 15.4-6.1 20.3-12.5 6.3 4.1 13 5.3 18.7 6.2 6.1 1 11.4 1.9 16.3 5.9C149.9 120 150.2 126.5 149.9 130z" class="undefined"/></svg>
</div>
<div class="nav-item">
<!-- Music Controller -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 3v10.6c-0.6-0.3-1.3-0.5-2-0.5-2.2 0-4 1.8-4 4s1.8 4 4 4 4-1.8 4-4V7h4V3h-6z"/></svg>
</div>
<div class="nav-item">
<!-- Volume Controller -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
<div class="bg-white mx-auto max-w-sm shadow-lg rounded-lg overflow-hidden floating volume">
<div class="sm:flex sm:items-center px-6 py-4">
<input type="range" min="0" max="100" value="25" name="volume">
</div>
</div>
</div>
</div>
<!-- End Navigation Bar -->
</div>
<!-- jQuery -->
<script src="js/jquery-3.3.1.min.js"></script>
<!-- End jQuery -->
<!-- Maps -->
<script src="js/map-plugins/mapbox-gl-directions.js"></script>
<!-- <script src="js/map-plugins/mapbox-gl-zoom.js"></script>
<script src="js/map-plugins/mapbox-gl-compass.js"></script> -->
<script src="js/map-plugins/mapbox-gl-traffic.js"></script>
<script src="js/maps.js"></script>
<!-- End Maps -->
<!-- Music -->
<script src="js/music.js"></script>
<!-- End Music -->
</body>
</html>