-
-
Notifications
You must be signed in to change notification settings - Fork 12
/
index.html
81 lines (80 loc) · 4.04 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
<!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">
<meta name=description content="JoujmaFM radio player, 24/7 live">
<!-- Chrome, Firefox OS and Opera -->
<meta name="theme-color" content="#222336">
<!-- Windows Phone -->
<meta name="msapplication-navbutton-color" content="#222336">
<!-- iOS Safari -->
<meta name="apple-mobile-web-app-status-bar-style" content="#222336">
<link rel="icon" href="src/favicon.ico">
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto+Condensed:700"/>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/three.js/r134/three.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.2/p5.min.js"></script>
<title>Joujma FM | Radio Station</title>
<style type="text/css">
@keyframes _spin { 0% { transform: rotate( 0deg ); } 100% { transform: rotate( 359deg ); } }
html, body { margin: 0; padding: 0; position: relative; overflow: hidden; min-height: 100vh;
background-color: #8086a0;background-size: cover;
background: #c3e6fa; /* fallback for old browsers */
background: -webkit-linear-gradient(to top, #c3e6fa, #4f527e); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to top, #c3e6fa, #4f527e); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
background-color: #c3e6fa; }
#_spnr { display: flex; flex-direction: column; align-items: center; justify-content: center; position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 9999; }
#_spnr { text-align: center; color: antiquewhite;}
#_spnr path { display: block; margin: 0; padding: 0; transition: none; }
#_spnr noscript { max-width: 500px; }
</style>
</head>
<body>
<div id="_spnr">
<svg height="100" width="100" version="1.1" id="L7" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
<path fill="#fff" d="M31.6,3.5C5.9,13.6-6.6,42.7,3.5,68.4c10.1,25.7,39.2,38.3,64.9,28.1l-3.1-7.9c-21.3,8.4-45.4-2-53.8-23.3
c-8.4-21.3,2-45.4,23.3-53.8L31.6,3.5z">
<animateTransform
attributeName="transform"
attributeType="XML"
type="rotate"
dur="2s"
from="0 50 50"
to="360 50 50"
repeatCount="indefinite" />
</path>
<path fill="#fff" d="M42.3,39.6c5.7-4.3,13.9-3.1,18.1,2.7c4.3,5.7,3.1,13.9-2.7,18.1l4.1,5.5c8.8-6.5,10.6-19,4.1-27.7
c-6.5-8.8-19-10.6-27.7-4.1L42.3,39.6z">
<animateTransform
attributeName="transform"
attributeType="XML"
type="rotate"
dur="1s"
from="0 50 50"
to="-360 50 50"
repeatCount="indefinite" />
</path>
<path fill="#fff" d="M82,35.7C74.1,18,53.4,10.1,35.7,18S10.1,46.6,18,64.3l7.6-3.4c-6-13.5,0-29.3,13.5-35.3s29.3,0,35.3,13.5
L82,35.7z">
<animateTransform
attributeName="transform"
attributeType="XML"
type="rotate"
dur="2s"
from="0 50 50"
to="360 50 50"
repeatCount="indefinite" />
</path>
</svg>
</div>
<noscript>
<strong>We're sorry but this player doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app" class="app-wrap"></div>
<!-- built files will be auto injected -->
<script setup type="module" src="/src/main.js"></script>
</body>
</html>