118 lines
3.2 KiB
HTML
118 lines
3.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8"/>
|
|
<title>Video site chooser</title>
|
|
<link rel="icon" type="image/x-icon" href="favicon.ico">
|
|
<style>
|
|
html,
|
|
body {
|
|
height: 100%;
|
|
}
|
|
|
|
html {
|
|
display: table;
|
|
margin: auto;
|
|
}
|
|
|
|
body {
|
|
display: table-cell;
|
|
vertical-align: middle;
|
|
background-color: #1e1e1e;
|
|
color: #e5e5e5;
|
|
font: small-caption;
|
|
}
|
|
|
|
p {
|
|
text-align: center;
|
|
}
|
|
|
|
h1 {
|
|
text-align: center;
|
|
font-family: "Mustica Pro";
|
|
font-weight: normal;
|
|
}
|
|
|
|
.button {
|
|
border: 1px solid;
|
|
color: white;
|
|
padding: 10px 32px;
|
|
margin-bottom: 5px;
|
|
text-align: center;
|
|
text-decoration: none;
|
|
display: inline-block;
|
|
font-size: 16px;
|
|
cursor: pointer;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
.mobile {
|
|
display: none;
|
|
}
|
|
|
|
@media screen and (min-width: 0px) and (max-width: 500px) {
|
|
.button{ display: block; }
|
|
.mobile{ display: block; }
|
|
h1{ font-size: 20px; }
|
|
}
|
|
|
|
#pipedbtn {background-color: rgba(139,0,0,.2); border-color: darkred} /* Piped */
|
|
#pipedbtn:hover {background-color: darkred}
|
|
#pipedbtn:active {background-color: #5a0000; border-color: #5a0000}
|
|
#ytbtn {background-color: rgba(255,0,0,.2); border-color: red} /* YouTube */
|
|
#ytbtn:hover {background-color: red}
|
|
#ytbtn:active {background-color: #b90000; border-color: #b90000}
|
|
#odybtn {background-color: rgba(128,0,128,.2); border-color: purple} /* Odysee */
|
|
#odybtn:hover {background-color: purple}
|
|
#odybtn:active {background-color: #5a005a; border-color: #5a005a}
|
|
#ptbtn {background-color: rgba(194,84,10,.2); border-color: #C2540A} /* PeerTube */
|
|
#ptbtn:hover {background-color: #C2540A}
|
|
#ptbtn:active {background-color: #984108; border-color: #984108}
|
|
|
|
@font-face {
|
|
font-family: "Mustica Pro";
|
|
src: url("fonts/MusticaPro-SemiBold.otf") format("opentype");
|
|
font-weight: normal;
|
|
font-style: normal
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "Roboto";
|
|
src: url("fonts/Roboto-Regular.ttf") format("truetype");
|
|
font-weight: normal;
|
|
font-style: normal
|
|
}
|
|
</style>
|
|
<script>
|
|
const queryString = window.location.search;
|
|
const urlParams = new URLSearchParams(queryString);
|
|
const codeyt = urlParams.get('yt')
|
|
const codeody = urlParams.get('ody')
|
|
const codept = urlParams.get('pt')
|
|
|
|
function changeHref(type,suffix) {
|
|
let btn = document.getElementById(type+'btn');
|
|
btn.href+=suffix;
|
|
}
|
|
|
|
//wait for page to load before executing js, so the elements actually exist
|
|
window.addEventListener('load',()=>{
|
|
changeHref('yt',codeyt);
|
|
changeHref('piped',codeyt);
|
|
changeHref('pt',codept);
|
|
changeHref('ody',codeody);
|
|
});
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<h1>Where do you want to watch this video?</h1>
|
|
<a id="pipedbtn" class="button" href="https://piped.adminforge.de/embed/">Piped</a>
|
|
<a id="ytbtn" class="button" href="https://youtube.com/embed/">YouTube</a>
|
|
<a id="odybtn" class="button" href="https://odysee.com/$/embed/@gianmarcogg03:e/">Odysee</a>
|
|
<a id="ptbtn" class="button" href="https://videos.gianmarco.gg/videos/embed/">PeerTube</a>
|
|
<p class="mobile">Mobile devices may have issues with this frame's resolution.</p>
|
|
<p>The Piped instance used is <b>piped.adminforge.de</b>.</p>
|
|
<p>YouTube is not freedom and privacy respecting, Odysee has selfhosted telemetry.</p>
|
|
</body>
|
|
</html>
|