Files
documentation/index.html

128 lines
8.2 KiB
HTML

<!doctype html>
<html lang="en" class="dark">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Vyla Entertainment — Vyla</title>
<meta name="description"
content="A community-built media project focused on freedom, privacy, and giving people control over their own experience." />
<meta name="keywords"
content="Vyla, media streaming, self-hosted, privacy, open source, media player, streaming API, SDK, Android TV, desktop media" />
<link rel="icon" href="/favicon.ico" />
<link rel="preload" href="/assets/styling/roots.css" as="style" />
<link rel="stylesheet" href="/assets/styling/roots.css" />
<link rel="preload" href="/assets/styling/base.css" as="style" />
<link rel="stylesheet" href="/assets/styling/base.css" />
<link rel="stylesheet" href="/assets/styling/highlight.css" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link rel="manifest" href="/manifest.webmanifest" />
<link rel="ard" href="/.well-known/ard.json" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-core.min.js"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/autoloader/prism-autoloader.min.js"></script>
<script>
(function () {
var saved = localStorage.getItem('vyla-theme');
var isDark = saved ? saved === 'dark' : true;
document.documentElement.classList.toggle('dark', isDark);
})();
</script>
</head>
<body>
<video class="video-bg" autoplay muted loop playsinline></video>
<script>
const video = document.querySelector('.video-bg');
function setVideoBackground() {
video.src = document.documentElement.classList.contains('dark')
? '/'
: '/';
video.load();
video.play().catch(() => { });
}
setVideoBackground();
new MutationObserver(setVideoBackground).observe(document.documentElement, {
attributes: true,
attributeFilter: ['class']
});
</script>
<div id="banner">
<span>
Rights holders can request source removal — <a href="/misc/project/dmca">DMCA policy</a>.
</span>
<button id="banner-close" onclick="dismissBanner()" aria-label="Dismiss">✕</button>
</div>
<div id="header-container">
<header id="navbar">
<div class="nav-top">
<a class="brand" href="/"><img src="/assets/images/logo.png" alt="Vyla" id="brand-logo" width="28"
height="28" decoding="async" /></a>
<button id="search-trigger" type="button" onclick="openSearch()" aria-label="Search"></button>
<div class="links">
<button id="theme-toggle" type="button" onclick="toggleThemeMenu(event)"
aria-label="Theme"></button>
</div>
</div>
<nav class="tabs" id="nav-tabs"></nav>
</header>
</div>
<div id="layout">
<nav id="sidebar"></nav>
<div id="content-wrapper">
<div id="content-col">
<div id="main-wrap">
<main class="prose" id="main-content"></main>
<footer id="site-footer">
<div class="footer-nav">
<a id="footer-prev" class="footer-link prev" href="#"></a>
<a id="footer-next" class="footer-link next" href="#"></a>
</div>
<div class="footer-bottom">
<div class="footer-socials">
<a href="https://discord.gg/5eqRhKeywG" target="_blank" rel="noopener"
aria-label="Discord">
<svg class="footer-icon" viewBox="0 0 24 24" fill="currentColor">
<path
d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028c.462-.63.874-1.295 1.226-1.994.021-.041.001-.09-.041-.106a13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.929 1.793 8.18 1.793 12.061 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.028zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.157 2.418z" />
</svg>
</a>
<a href="https://gitlab.com/vyla-entertainment/" target="_blank" rel="noopener"
aria-label="GitLab">
<svg class="footer-icon" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"
fill="currentColor">
<g id="SVGRepo_bgCarrier" stroke-width="0"></g>
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round">
</g>
<g id="SVGRepo_iconCarrier">
<path fill="currentColor"
d="M14.975 8.904L14.19 6.55l-1.552-4.67a.268.268 0 00-.255-.18.268.268 0 00-.254.18l-1.552 4.667H5.422L3.87 1.879a.267.267 0 00-.254-.179.267.267 0 00-.254.18l-1.55 4.667-.784 2.357a.515.515 0 00.193.583l6.78 4.812 6.778-4.812a.516.516 0 00.196-.583z">
</path>
</g>
</svg>
</a>
<a href="https://reddit.com" target="_blank" rel="noopener" aria-label="Reddit">
<svg class="footer-icon" viewBox="0 0 24 24" fill="currentColor">
<path
d="M12 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0zm5.01 4.744c.688 0 1.25.561 1.25 1.249a1.25 1.25 0 0 1-2.498.056l-2.597-.547-.8 3.747c1.824.07 3.48.632 4.674 1.488.308-.309.73-.491 1.207-.491.968 0 1.754.786 1.754 1.754 0 .716-.435 1.333-1.01 1.614a3.111 3.111 0 0 1 .042.52c0 2.694-3.13 4.87-7.004 4.87-3.874 0-7.004-2.176-7.004-4.87 0-.183.015-.366.043-.534A1.748 1.748 0 0 1 4.028 12c0-.968.786-1.754 1.754-1.754.463 0 .898.196 1.207.49 1.207-.883 2.878-1.43 4.744-1.487l.885-4.182a.342.342 0 0 1 .14-.197.35.35 0 0 1 .238-.042l2.906.617a1.214 1.214 0 0 1 1.108-.702zM9.25 12C8.561 12 8 12.562 8 13.25c0 .687.561 1.248 1.25 1.248.687 0 1.248-.561 1.248-1.249 0-.688-.561-1.249-1.249-1.249zm5.5 0c-.687 0-1.248.561-1.248 1.25 0 .687.561 1.248 1.249 1.248.688 0 1.249-.561 1.249-1.249 0-.687-.562-1.249-1.25-1.249zm-5.466 3.99a.327.327 0 0 0-.231.094.33.33 0 0 0 0 .463c.842.842 2.484.913 2.961.913.477 0 2.105-.056 2.961-.913a.361.361 0 0 0 .029-.463.33.33 0 0 0-.464 0c-.547.533-1.684.73-2.512.73-.828 0-1.979-.197-2.512-.73a.326.326 0 0 0-.232-.095z" />
</svg>
</a>
</div>
</div>
</footer>
</div>
<aside id="toc">
<p class="toc-title">On this page</p>
<ul id="toc-list"></ul>
</aside>
</div>
</div>
<script src="/assets/app.js"></script>
</body>
</html>