-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.mobile.html
173 lines (163 loc) · 6.31 KB
/
index.mobile.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
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
<!DOCTYPE html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=device-scale">
<style>
.player{
border:1px solid silver;
background:white;
width:100%;
height:100%;
margin-top:auto;
margin-bottom:auto;
margin-left:auto;
margin-right:auto;
text-align:center;
}
.bg{
background: black;
height:20px;
}
@keyframes pg{
0%{color:silver;background:red;}
50%{color:white;background:green;}
100%{color:silver;background:red;}
}
.pg{
background: green;
width:0%;
height:20px;
}
.btn{
background:white;
width:auto;
height:auto;
border:0px solid black;
}
.play{
background-image:url('https://img.icons8.com/carbon-copy/100/000000/play-button-circled.png');
}
.pause{
background-image:url('https://img.icons8.com/dotty/80/000000/circled-pause.png');
}
.footer{
position: fixed;
left: 0;
bottom: 0;
width: 100%;
height:auto;
background-color: green;
color: white;
text-align: center;
font-size: 15px;
}
.footer1{
position: fixed;
left: 0;
bottom: 0;
width: 100%;
height:100%;
background-color: blue;
color: white;
text-align: center;
font-size: 15px;
}
@keyframes lt{
0%{width:100%;height:100%;}
50%{width:100%;height:40%;}
70%{width:100%;height:80%;}
100%{visibility:hidden;width:100%;height:0%;}
}
.sng{
color:skyblue;
animation:sn 25s infinite;
left: 0;
bottom: 0;
width: 100%;
height:100%;
}
.ds{
width:100%;
height:10%;
text-align:center;
}
</style>
<title>MY RADIOPLAYER • MOBILE PLAYER</title>
<meta name="description" content="Höre JF FM kostenlos über deinen Browser. Der Webplayer wurde gecodet von DJ Janik">
<meta property="og:title" content="JFFM RADIO WEB PLAYER" />
<meta property="og:description" content="Höre JF FM kostenlos über deinen Browser." />
<meta property="og:url" content="https://web.janikfrb.repl.co/radio/index.php" />
<meta property="og:image" content="https://jffmradio.files.wordpress.com/2020/11/cropped-3a6aa73876863716e87b92f24ea699e1.jpg" />
</head>
<body background="https://jffmradio.files.wordpress.com/2020/11/cropped-3a6aa73876863716e87b92f24ea699e1.jpg">
<script type="text/javascript" src="//api.laut.fm/js_tools/lautfm_js_tools.0.9.1.js" ></script>
<div class="player" id="playr">
<p>You using the Beta Version of This Player!</p>
<button class="btn" id="pp"><img src="https://img.icons8.com/ios-filled/100/000000/play-button-circled--v3.png"/></button>
<img src="https://jffmradio.files.wordpress.com/2020/11/cropped-3a6aa73876863716e87b92f24ea699e1.jpg" style="border:1px solid black;"/>
<div width="20" class="ds"><marquee width="20" direction="left" id="song" class="sng" loop="" scrolldelay="90" style="font-size:15px; border:1px solid grey;" colot="white" bgcolor="blue"></marquee></div><div id="ct"></div>
<br><div class="bg" id="bg"><div class="pg" id="pg"></div></div>
<audio src="https://stream.laut.fm/jffm" id="player">
</div>
<!-- This is only important for laut.fm Radio Stations
<script>
var songcontainer = document.getElementById('song');
var show_song = function(song){
songcontainer.innerHTML = "Es läuft <b>" + song['title'] +
"</b> von <b>" + song.artist["name"] + "</b> - JF FM";
}
laut.fm.station('jffm').current_song(show_song, true);
</script>
-->
<script language="JavaScript" type="text/javascript">
var button = document.getElementById("pp");
var audio = document.getElementById("player");
var pg = document.getElementById("pg");
var div = document.getElementById("ct");
var bg = document.getElementById("bg");
var py = document.getElementById("playr");
button.addEventListener("click", function(){
if(audio.paused){
//played:
audio.play();
button.innerHTML = "<img src='https://img.icons8.com/dotty/100/000000/circled-pause.png'/>";
setTimeout(function(){pg.style.animation = "";pg.innerHTML = ""}, 10)
} else {
audio.pause();
button.innerHTML = "<img src='https://img.icons8.com/dotty/100/000000/play-button-circled.png'/>";
pg.style.background = 'green';
pg.innerHTML = "Pause!";
pg.style.animation = "pg 5s infinite";
}
});
if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)){
// true for mobile device
}else{
// false for not mobile device
py.style.visibility = "hidden";
document.write("<p style='border:2px solid red;color:red;'>Computer detected<br>Redirect you to the PC version of This Player!</p><meta http-equiv='refresh' content='2; index.html'>");
}
</script>
<!--<div class="footer" id="foot">
<p>©2021 JF FM Radio und <a href="" id="o">Laut.fm-API</a><br><b>Gecoded von DJ Janik</b></p></div>
<div id="laut" class="footer1">
<p>Diese Website benutzt die öffentliche laut.fm-API.<br><br> Die laut.fm-API ist ein Dienst der LAUT AG und exponiert allgemeine Informationen über laut.fm, Auflistungen von Stationen und Informationen über einzelne Stationen. Bei Zugriff auf die API werden automatisch Informationen allgemeiner Natur an laut.fm übertragen. Diese Informationen beinhalten etwa die IP-Adresse, die Art des Webbrowsers und des verwendete Betriebssystems, den Domainnamen Ihres Internet Service Providers und Ähnliches. Hierbei handelt es sich ausschließlich um Informationen, welche keine Rückschlüsse auf Ihre Person zulassen. Diese Informationen sind technisch notwendig, um beispielsweise den aktuell laufenden Titel korrekt auszuliefern und fallen bei Nutzung des Internets zwingend an. Anonyme Informationen dieser Art werden von der LAUT AG nur kurzfristig gespeichert und gegebenenfalls statistisch ausgewertet, um die API und die dahinterstehende Technik zu optimieren.<br><br><br>
<button style="color:white;padding:20px 20px;background:orange; border:0px;font-size:20px;" id="btn">Aktzeptieren</button></p>
</div>
<script>
var ft = document.getElementById("foot");
var lt = document.getElementById("laut");
var lbt = document.getElementById("btn");
var o = document.getElementById("o");
lbt.addEventListener("click", function(){
lt.style.animation = "lt 5s";
lbt.disabled = "true";
setTimeout(function(){lt.style.animation = "";lt.style.visibility = "hidden"}, 5000);
});
o.addEventListener("click", function(){
lt.style.animation = "lt 5s reverse";
lt.style.visibility = "";
lbt.disabled = "";
});
</script>-->
</body>
</html>