115 lines
2.4 KiB
HTML
115 lines
2.4 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
|
|
<title>Video Player</title>
|
|
<meta charset="UTF-8">
|
|
<meta name="keywords" content="HTML, CSS, JavaScript">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"></meta>
|
|
<meta name="darkreader" content="NO-DARKREADER-PLUGIN" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<link href="./themes/style.css" rel="stylesheet">
|
|
<link href="./themes/pine.css" id="themeStylesheet" rel="stylesheet">
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<script src="./public/nodarkreader.js"></script>
|
|
|
|
|
|
<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="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 poster="" 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>
|
|
<a class="menuLinkColor" href="https://git.unix.dog/tika/togen.xyz-video-spw">SourceCode (gitea)</a>
|
|
</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>
|
|
|