137 lines
No EOL
6.1 KiB
HTML
137 lines
No EOL
6.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Zorn</title>
|
|
<link rel="stylesheet" href="./css/index.css"/>
|
|
<link rel="stylesheet" media="(prefers-color-scheme:light)" href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.15.1/cdn/themes/light.css"/>
|
|
<link rel="stylesheet" media="(prefers-color-scheme:dark)" href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.15.1/cdn/themes/dark.css" onload="document.documentElement.classList.add('sl-theme-dark');"/>
|
|
<script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.15.1/cdn/shoelace-autoloader.js"></script>
|
|
</head>
|
|
<body>
|
|
<div>
|
|
<div class="video-container">
|
|
<video class="zorn-player" layout="default">
|
|
<!-- Quality changer support has not been worked on yet -->
|
|
<source label="720p" src="./media/Ennie-and-Yoyki-Ungirly-Games.mp4" type="video/mp4">
|
|
<!-- Subtitles -->
|
|
<track src="./media/subtitles/English.vtt" kind="subtitles" srclang="en" label="English">
|
|
<track src="./media/subtitles/Russian.vtt" kind="subtitles" srclang="ru" label="Russian">
|
|
</video>
|
|
</div>
|
|
|
|
|
|
<br/>
|
|
|
|
|
|
<div class="skeleton-overview">
|
|
<header>
|
|
<sl-skeleton effect="sheen"></sl-skeleton>
|
|
<sl-skeleton effect="sheen"></sl-skeleton>
|
|
</header>
|
|
|
|
<sl-skeleton effect="sheen"></sl-skeleton>
|
|
<sl-skeleton effect="sheen"></sl-skeleton>
|
|
<sl-skeleton effect="sheen"></sl-skeleton>
|
|
</div>
|
|
|
|
<style>
|
|
.skeleton-overview header {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.skeleton-overview header sl-skeleton:last-child {
|
|
flex: 0 0 auto;
|
|
width: 30%;
|
|
}
|
|
|
|
.skeleton-overview sl-skeleton {
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.skeleton-overview sl-skeleton:nth-child(1) {
|
|
float: left;
|
|
width: 3rem;
|
|
height: 3rem;
|
|
margin-right: 1rem;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.skeleton-overview sl-skeleton:nth-child(3) {
|
|
width: 95%;
|
|
}
|
|
|
|
.skeleton-overview sl-skeleton:nth-child(4) {
|
|
width: 80%;
|
|
}
|
|
.skeleton__indicator:nth-child(1) {
|
|
--border-radius: 0;
|
|
}
|
|
|
|
</style>
|
|
|
|
<style>
|
|
.skeleton-shapes sl-skeleton {
|
|
display: inline-flex;
|
|
width: 50px;
|
|
height: 50px;
|
|
}
|
|
|
|
.skeleton-shapes .square::part(indicator) {
|
|
--border-radius: var(--sl-border-radius-medium);
|
|
}
|
|
</style>
|
|
</div>
|
|
<div>
|
|
<div class="skeleton-overview">
|
|
<header class="skeleton-shapes">
|
|
<sl-skeleton class="square" style="width: 100%; height: 100px; border-radius: 6px;" effect="sheen"></sl-skeleton>
|
|
<div style="display: flex; flex-direction: column; width: 100%;">
|
|
<sl-skeleton style="width: 75%; height: 10px;" effect="sheen"></sl-skeleton>
|
|
<sl-skeleton style="width: 75%; height: 10px" effect="sheen"></sl-skeleton>
|
|
</div>
|
|
</header>
|
|
</div>
|
|
<div class="skeleton-overview">
|
|
<header class="skeleton-shapes">
|
|
<sl-skeleton class="square" style="width: 100%; height: 100px; border-radius: 6px;" effect="sheen"></sl-skeleton>
|
|
<div style="display: flex; flex-direction: column; width: 100%;">
|
|
<sl-skeleton style="width: 75%; height: 10px;" effect="sheen"></sl-skeleton>
|
|
<sl-skeleton style="width: 75%; height: 10px" effect="sheen"></sl-skeleton>
|
|
</div>
|
|
</header>
|
|
</div>
|
|
<div class="skeleton-overview">
|
|
<header class="skeleton-shapes">
|
|
<sl-skeleton class="square" style="width: 100%; height: 100px; border-radius: 6px;" effect="sheen"></sl-skeleton>
|
|
<div style="display: flex; flex-direction: column; width: 100%;">
|
|
<sl-skeleton style="width: 75%; height: 10px;" effect="sheen"></sl-skeleton>
|
|
<sl-skeleton style="width: 75%; height: 10px" effect="sheen"></sl-skeleton>
|
|
</div>
|
|
</header>
|
|
</div>
|
|
<div class="skeleton-overview">
|
|
<header class="skeleton-shapes">
|
|
<sl-skeleton class="square" style="width: 100%; height: 100px; border-radius: 6px;" effect="sheen"></sl-skeleton>
|
|
<div style="display: flex; flex-direction: column; width: 100%;">
|
|
<sl-skeleton style="width: 75%; height: 10px;" effect="sheen"></sl-skeleton>
|
|
<sl-skeleton style="width: 75%; height: 10px" effect="sheen"></sl-skeleton>
|
|
</div>
|
|
</header>
|
|
</div>
|
|
<div class="skeleton-overview">
|
|
<header class="skeleton-shapes">
|
|
<sl-skeleton class="square" style="width: 100%; height: 100px; border-radius: 6px;" effect="sheen"></sl-skeleton>
|
|
<div style="display: flex; flex-direction: column; width: 100%;">
|
|
<sl-skeleton style="width: 75%; height: 10px;" effect="sheen"></sl-skeleton>
|
|
<sl-skeleton style="width: 75%; height: 10px" effect="sheen"></sl-skeleton>
|
|
</div>
|
|
</header>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
<script src="./js/zorn.js" type="module"></script>
|
|
</html>
|
|
<script></script> |