inital
This commit is contained in:
parent
f60cf0ee1b
commit
288956edaf
|
@ -0,0 +1,32 @@
|
|||
//Get video ID from URL
|
||||
new URL(location.href).searchParams.get('video')
|
||||
const params = new URL(location.href).searchParams;
|
||||
const videoID = params.get('video');
|
||||
|
||||
console.log("Good Day!");
|
||||
console.log("Attempting to load Content!");
|
||||
|
||||
console.log(`video ID:"${videoID}"`);
|
||||
|
||||
1//fetch json for video ID and
|
||||
//link Video file from JSON into the src of videoPlayer
|
||||
|
||||
|
||||
|
||||
|
||||
// SHUT UP I COULDNT FIGURE OUT THE PROPER WAY OF DOING IT AND ITS MY OWN SERVER
|
||||
fetch(`vidSrc/${new URL(location.href).searchParams.get("video")}.json`)
|
||||
.then(res => res.json())
|
||||
.then(data => document.getElementById("media").setAttribute("src", `vidSrc/Video/${data.file}`))
|
||||
fetch(`vidSrc/${new URL(location.href).searchParams.get("video")}.json`)
|
||||
.then(res => res.json())
|
||||
.then(data => document.getElementById("vidTitle").textContent = `${data.title}`)
|
||||
fetch(`vidSrc/${new URL(location.href).searchParams.get("video")}.json`)
|
||||
.then(res => res.json())
|
||||
.then(data => document.getElementById("vidDesc").textContent = `${data.desc}`)
|
||||
fetch(`vidSrc/${new URL(location.href).searchParams.get("video")}.json`)
|
||||
.then(res => res.json())
|
||||
.then(data => document.getElementById("vidCreator").textContent = `${data.creator}`)
|
||||
fetch(`vidSrc/${new URL(location.href).searchParams.get("video")}.json`)
|
||||
.then(res => res.json())
|
||||
.then(data => document.getElementById("vidDate").textContent = `${data.date}`)
|
|
@ -0,0 +1,126 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
|
||||
<title> Pro.togen.xyz IS BACK</title>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="keywords" content="HTML, CSS, JavaScript">
|
||||
<meta name="author" content="kinectika">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"></meta>
|
||||
<meta name="darkreader" content="NO-DARKREADER-PLUGIN" />
|
||||
<link href="/themes/style.css" rel="stylesheet">
|
||||
<link href="/themes/pine.css" id="themeStylesheet" rel="stylesheet">
|
||||
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<script src="/public/nodarkreader.js"></script>
|
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<section class="top-nav">
|
||||
<div>
|
||||
<a class="menuLinkColor" href="/"> <img src="/public/2.webp" style="height:50px; width: auto;" alt="Logo"> </a>
|
||||
|
||||
</div>
|
||||
<input id="menu-toggle" type="checkbox" />
|
||||
<label class='menu-button-container' for="menu-toggle">
|
||||
<div class='menu-button'></div>
|
||||
</label>
|
||||
<ul class="menu">
|
||||
<li><a class="menuLinkColor" href="/">Home</a></li>
|
||||
<li><a class="menuLinkColor" href="/about.html">About</a></li>
|
||||
<li><a class="menuLinkColor" href="/gallery.html">Gallery</a></li>
|
||||
<li><select id="themeSelect">
|
||||
<!--<option value="dark">Dark Mode</option>-->
|
||||
<option value="pine">Rosé Pine (Dark)</option>
|
||||
<option value="pinelight">Rosé Pine (Light)</option>
|
||||
<option value="e6">Naughty Furries (e621.net)</option>
|
||||
|
||||
</select></li>
|
||||
<li>
|
||||
<a class="menuLinkColor" href="https://github.com/thatonecalculator/BASED-LICENSE" target="_blank">Based License</a></li>
|
||||
</ul>
|
||||
</section>
|
||||
<main>
|
||||
|
||||
|
||||
|
||||
<div class="leftcolumn">
|
||||
<div class="card cardtext">
|
||||
|
||||
<h1>Content Directory</h1>
|
||||
<h3>Manually updated with links</h3>
|
||||
<a class="menuLinkColor" href="/Video/?video=1">Caramell Dancen Beatsaber<br> <b> Tika 2/2/2022</a><br><hr>
|
||||
<a class="menuLinkColor" href="/Video/?video=2">POTSL 2022 night of bands Garrett POV <br> <b> Tika 2/2/2022</a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</main>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<footer >
|
||||
<div class="bottom-bar"id="footer">
|
||||
<a class="smaller menuLinkColor " href="/about.html">Socials / About</a> <br>
|
||||
<p class="menuLinkColor" style=" float:right" >
|
||||
<a class="menuLinkColor" href="https://fediring.net/previous?host=pro.togen.xyz">←</a>
|
||||
<a class="menuLinkColor" href="https://fediring.net/">Fediring</a>
|
||||
<a class="menuLinkColor" href="https://fediring.net/next?host=pro.togen.xyz">→</a>
|
||||
<br>
|
||||
<a class="menuLinkColor" href=" https://keithhacks.cyou/furryring.php?prev=pro.togen.xyz">←</a>
|
||||
<a class="menuLinkColor" href=" https://keithhacks.cyou/furryring.php">Furryring</a>
|
||||
<a class="menuLinkColor" href="https://keithhacks.cyou/furryring.php?next=pro.togen.xyz">→</a>
|
||||
</p>
|
||||
<a class="smaller menuLinkColor" href="/gallery.html">Gallery</a>
|
||||
<br>
|
||||
<a class="smaller menuLinkColor" href="/Bento">Bento Homepage</a>
|
||||
<br>
|
||||
<a class="smaller menuLinkColor" href="https://status.togen.xyz/status/owo">Server Status</a>
|
||||
<br>
|
||||
<a class="smaller menuLinkColor" href="https://stream.togen.xyz">Owncast</a>
|
||||
<br>
|
||||
<a class="smaller menuLinkColor" href="https://search.togen.xyz/">Whoogle (Search Engine)</a>
|
||||
<br>
|
||||
<a class="smaller menuLinkColor" href="https://invidious.togen.xyz/ ">Invidious</a>
|
||||
<p xmlns:cc="http://creativecommons.org/ns#" xmlns:dct="http://purl.org/dc/terms/"><a class="menuLinkColor smaller" property="dct:title" rel="cc:attributionURL" href="http://pro.togen.xyz">pro.togen.xyz</a> © 2022 by <a class="menuLinkColor smaller" rel="cc:attributionURL dct:creator" property="cc:attributionName" href="http://pro.togen.xyz/about.html">Kinectika</a> is licensed under <a class="menuLinkColor smaller" href="http://creativecommons.org/licenses/by-nc-sa/4.0/?ref=chooser-v1" target="_blank" rel="license noopener noreferrer" style="display:inline-block;">CC BY-NC-SA 4.0<img style="height:22px!important;margin-left:3px;vertical-align:text-bottom;" src="https://mirrors.creativecommons.org/presskit/icons/cc.svg?ref=chooser-v1"><img style="height:22px!important;margin-left:3px;vertical-align:text-bottom;" src="https://mirrors.creativecommons.org/presskit/icons/by.svg?ref=chooser-v1"><img style="height:22px!important;margin-left:3px;vertical-align:text-bottom;" src="https://mirrors.creativecommons.org/presskit/icons/nc.svg?ref=chooser-v1"><img style="height:22px!important;margin-left:3px;vertical-align:text-bottom;" src="https://mirrors.creativecommons.org/presskit/icons/sa.svg?ref=chooser-v1"></a></p>
|
||||
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
|
||||
|
||||
<!--THEME SELECT SCRIPT-->
|
||||
<script>
|
||||
function initThemeSelect() {
|
||||
const themeSelect = document.getElementById("themeSelect");
|
||||
const themeSheet = document.getElementById("themeStylesheet");
|
||||
const currentTheme = localStorage.getItem("theme") || "pine";
|
||||
|
||||
function activateTheme(themeName){
|
||||
themeSheet.setAttribute("href", `/themes/${themeName}.css`);
|
||||
}
|
||||
themeSelect.addEventListener("change", () => {
|
||||
activateTheme(themeSelect.value);
|
||||
localStorage.setItem("theme", themeSelect.value);
|
||||
|
||||
});
|
||||
themeSelect.value = currentTheme;
|
||||
activateTheme(currentTheme);
|
||||
}
|
||||
initThemeSelect();
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,106 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
|
||||
<title id="vidTitle[2]">Pro.togen.xyz IS BACK</title>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="keywords" content="HTML, CSS, JavaScript">
|
||||
<meta name="author" content="kinectika">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"></meta>
|
||||
<meta name="darkreader" content="NO-DARKREADER-PLUGIN" />
|
||||
<link href="./themes/style.css" rel="stylesheet">
|
||||
<link href="./themes/pine.css" id="themeStylesheet" rel="stylesheet">
|
||||
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<script src="./public/nodarkreader.js"></script>
|
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<section class="top-nav">
|
||||
<div>
|
||||
<a class="menuLinkColor" href="/"> <img src="/public/2.webp" style="height:50px; width: auto;" alt="Logo"> </a>
|
||||
|
||||
</div>
|
||||
<input id="menu-toggle" type="checkbox" />
|
||||
<label class='menu-button-container' for="menu-toggle">
|
||||
<div class='menu-button'></div>
|
||||
</label>
|
||||
<ul class="menu">
|
||||
<li><a class="menuLinkColor" href="/">Home</a></li>
|
||||
<li><select id="themeSelect">
|
||||
<!--<option value="dark">Dark Mode</option>-->
|
||||
<option value="pine">Rosé Pine (Dark)</option>
|
||||
<option value="pinelight">Rosé Pine (Light)</option>
|
||||
<option value="e6">Naughty Furries (e621.net)</option>
|
||||
|
||||
</select></li>
|
||||
|
||||
</section>
|
||||
<main>
|
||||
|
||||
|
||||
|
||||
<div class="leftcolumn">
|
||||
<div class="card cardtext">
|
||||
<div>
|
||||
<video style="width:70%;" id="media" controls src=""> </video>
|
||||
<h2 id="vidTitle">Loading...</h2>
|
||||
|
||||
<h3 id="vidCreator">Loading...</h3>
|
||||
<p id="vidDate">Loading...</p>
|
||||
<p id="vidDesc">loading...</p>
|
||||
|
||||
</div>
|
||||
<div class="vidTitle"></div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="./contentloader.js"></script>
|
||||
</main>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<footer >
|
||||
<div class="bottom-bar"id="footer"
|
||||
<p>welcome to the bottom</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
|
||||
|
||||
<!--THEME SELECT SCRIPT-->
|
||||
<script>
|
||||
function initThemeSelect() {
|
||||
const themeSelect = document.getElementById("themeSelect");
|
||||
const themeSheet = document.getElementById("themeStylesheet");
|
||||
const currentTheme = localStorage.getItem("theme") || "pine";
|
||||
|
||||
function activateTheme(themeName){
|
||||
themeSheet.setAttribute("href", `/themes/${themeName}.css`);
|
||||
}
|
||||
themeSelect.addEventListener("change", () => {
|
||||
activateTheme(themeSelect.value);
|
||||
localStorage.setItem("theme", themeSelect.value);
|
||||
|
||||
});
|
||||
themeSelect.value = currentTheme;
|
||||
activateTheme(currentTheme);
|
||||
}
|
||||
initThemeSelect();
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
Loading…
Reference in New Issue