-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
172 lines (153 loc) · 5.4 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
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
<!-- This is the main Page for PC only! There is an Mobile-Optimised Version Planned-->
<!--YOU VERSION: V.0.01 BETA -->
<!DOCTYPE html>
<head>
<style>
.bg{
background: black;
height:20px;
}
@keyframes pg{
0% {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0% 50%
}
}
}
.pg{
background:linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);
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;
}
#playr {
position: absolute;
background-color: white;
text-align: center;
border: 1px solid silver;
width:50%;
}
#playrhead {
padding: 10px;
cursor: move;
z-index: 10;
color: #fff;
border:0px solid silver;
width:0%;
}
</style>
<title>MY WEB PLAYER</title>
<meta name="description" content="My simple Webplayer by janikfrb on Github">
<meta property="og:title" content="MY WEB PLAYER" />
<meta property="og:description" content="Play music from [Artist] powerded by [name]" />
<meta property="og:url" content="[URL] from your site" />
<meta property="og:image" content="https://janikfrb.github.io/radioplayer-for-you/CLxxr51_qGE.png" />
</head>
<body background="https://janikfrb.github.io/radioplayer-for-you/CLxxr51_qGE.png">
<!-- This section is only for the Laut.fm API. It is used for radio stations on Laut.fm. Please exclude only if it is needed! -->
<!---->
<!--
<script type="text/javascript" src="//api.laut.fm/js_tools/lautfm_js_tools.0.9.1.js" ></script>
-->
<div id="playrhead">
<div id="playr">
<p style="color:white; background:linear-gradient(to right, red , yellow);;">MY WEB PLAYER - MOVE IT PER DRAG & DROP!</p>
<button class="btn" id="pp"><img src="https://img.icons8.com/ios-filled/100/000000/play-button-circled--v3.png"/></button>
<!--
This is the Cover Image. Replace it with your own!-->
<img src="https://janikfrb.github.io/radioplayer-for-you/img/CLxxr51_qGE.png" style="border:1px solid black;"/>
<!-- this is not finished at this moment :(
<div width="20" class="ds"><marquee width="20" direction="left" style="border:1px solid black;font-size:12px;" bgcolor="blue"; color="white"id="song" class="sng" loop="" scrolldelay="90" ></marquee></div>
-->
<div id="ct"></div>
<br><div class="bg" id="bg"><div class="pg" id="pg"></div> -->
<!-- This element is very important. It is the element that is responsible for the audio. Please replace the link with your own -->
<audio src="https://stream.laut.fm/shift-fm" id="player">
</div></div></div>
<script src="js/script.js" type="text/javascript"></script>
<!-- This is the footer! it is for Cookies or so on -->
<div class="footer" id="foot">
<p>This website is a public Github project by <b>janikfrb.</b><br> Use the script only at your own risk.<br> All functions have been tested for functionality and worked properly before publishing.</p></div>
<!-- This is the API-TEXT FOR LAUT.FM. USE ONLY WHEN YOU WAN'T TO USE IT! -->
<!--
<div id="laut" class="footer1">
<p>This website uses the public laut.fm API.<br><br>The laut.fm API is a service of LAUT AG and exposes general information about laut.fm, listings of stations and information about individual stations. When accessing the API, information of a general nature is automatically transmitted to laut.fm. This information includes, for example, the IP address, the type of web browser and operating system used, the domain name of your Internet service provider and the like. This is exclusively information that does not allow any conclusions to be drawn about your person. This information is technically necessary, for example, to correctly deliver the currently running title and is mandatory when using the Internet. Anonymous information of this kind is only stored by LAUT AG for a short period of time and, if necessary, statistically evaluated in order to optimize the API and the technology behind it.<br><br><br>.
<button style="color:white;padding:20px 20px;background:orange; border:0px;font-size:20px;" id="btn">Accept</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>