forked from vyla-entertainment/home-frontend
371 lines
18 KiB
HTML
371 lines
18 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
|
|
|
|
<title>Vyla Home</title>
|
|
<meta name="description"
|
|
content="Vyla Home is a standalone desktop media center designed to bypass datacenter blocking, ISP throttling, and cloud downtime.">
|
|
<meta name="keywords"
|
|
content="vyla, vyla home, media player, streaming, desktop app, self-hosted, movies, tv shows">
|
|
<meta name="robots" content="index, follow">
|
|
<link rel="canonical" href="https://vyla.cc/">
|
|
|
|
<meta property="og:title" content="Vyla Home">
|
|
<meta property="og:description"
|
|
content="A standalone desktop media center designed to bypass datacenter blocking, ISP throttling, and cloud downtime.">
|
|
<meta property="og:image" content="assets/images/thumbnail.png">
|
|
<meta property="og:image:width" content="1080">
|
|
<meta property="og:image:height" content="607">
|
|
<meta property="og:type" content="website">
|
|
<meta property="og:site_name" content="Vyla Home">
|
|
<meta property="og:url" content="https://vyla.cc/">
|
|
|
|
<meta name="twitter:card" content="summary_large_image">
|
|
<meta name="twitter:title" content="Vyla Home">
|
|
<meta name="twitter:description"
|
|
content="A standalone desktop media center designed to bypass datacenter blocking, ISP throttling, and cloud downtime.">
|
|
<meta name="twitter:image" content="assets/images/thumbnail.png">
|
|
|
|
<link rel="icon" href="assets/images/favicon.ico" type="image/x-icon">
|
|
|
|
<link rel="manifest" href="manifest.json">
|
|
|
|
<meta name="theme-color" content="transparent">
|
|
<meta name="apple-mobile-web-app-capable" content="yes">
|
|
<meta name="apple-mobile-web-app-status-bar-style" content="transparent">
|
|
<meta name="apple-mobile-web-app-title" content="Vyla Home">
|
|
<meta name="mobile-web-app-capable" content="yes">
|
|
|
|
<link rel="apple-touch-icon" href="assets/images/icon.png">
|
|
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
|
|
<link rel="stylesheet" href="src/styles/main.css">
|
|
|
|
<script type="application/ld+json">
|
|
{
|
|
"@context": "https://schema.org",
|
|
"@type": "WebSite",
|
|
"name": "Vyla Home",
|
|
"url": "https://vyla.cc/",
|
|
"description": "Vyla Home is a standalone desktop media center designed to bypass datacenter blocking, ISP throttling, and cloud downtime."
|
|
}
|
|
</script>
|
|
</head>
|
|
|
|
<body>
|
|
<nav class="nav">
|
|
<div class="nav-container">
|
|
<span class="logo">Vyla Home</span>
|
|
<div class="nav-links">
|
|
<a href="#features">Features</a>
|
|
<a href="#architecture">Architecture</a>
|
|
<a href="#faq">FAQ</a>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<svg aria-hidden="true" class="dot-grid" width="100%" height="100%">
|
|
<defs>
|
|
<pattern id="dot-pattern" width="20" height="20" patternUnits="userSpaceOnUse"
|
|
patternContentUnits="userSpaceOnUse" x="0" y="0">
|
|
<circle cx="1" cy="1" r="1"></circle>
|
|
</pattern>
|
|
</defs>
|
|
<rect width="100%" height="100%" stroke-width="0" fill="url(#dot-pattern)"></rect>
|
|
</svg>
|
|
|
|
<main>
|
|
<section class="hero">
|
|
<div class="hero-atmosphere" aria-hidden="true">
|
|
<video class="hero-atmosphere-video" autoplay loop muted playsinline webkit-playsinline preload="auto">
|
|
<source src="assets\images\videos\header_video.mp4" type="video/mp4">
|
|
</video>
|
|
<div class="hero-atmosphere-sheen"></div>
|
|
<canvas id="hero-byte-overlay"></canvas>
|
|
<div class="hero-atmosphere-vignette"></div>
|
|
</div>
|
|
<div class="container hero-container">
|
|
|
|
<div class="logo-image">
|
|
<img src="assets/images/header_logo.png" alt="Vyla Home">
|
|
</div>
|
|
|
|
<h1 class="hero-title">Vyla Home</h1>
|
|
|
|
<p class="hero-description">We've completely stopped hosting Vyla on a public VPS. Vyla Home is now the
|
|
primary, self-contained way to experience the platform.
|
|
</p>
|
|
|
|
<button class="discord-copy-bar reveal" id="copy-discord-btn" type="button">
|
|
<span class="copy-discord-label"
|
|
id="copy-discord-label">https://gitlab.com/vyla-entertainment/home/-/releases</span>
|
|
<span class="discord-copy-actions">
|
|
<span class="discord-copy-icon" id="copy-discord-icon">
|
|
<svg class="copy-icon" width="20px" height="20px" viewBox="0 -0.5 25 25" fill="none"
|
|
xmlns="http://www.w3.org/2000/svg" stroke="#000000">
|
|
<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-rule="evenodd" clip-rule="evenodd"
|
|
d="M8.94605 4.99995L13.2541 4.99995C14.173 5.00498 15.0524 5.37487 15.6986 6.02825C16.3449 6.68163 16.7051 7.56497 16.7001 8.48395V12.716C16.7051 13.6349 16.3449 14.5183 15.6986 15.1717C15.0524 15.825 14.173 16.1949 13.2541 16.2H8.94605C8.02707 16.1949 7.14773 15.825 6.50148 15.1717C5.85522 14.5183 5.495 13.6349 5.50005 12.716L5.50005 8.48495C5.49473 7.5658 5.85484 6.6822 6.50112 6.0286C7.1474 5.375 8.0269 5.00498 8.94605 4.99995Z"
|
|
stroke="#ffffff" stroke-width="1.5" stroke-linecap="round"
|
|
stroke-linejoin="round"></path>
|
|
<path d="M10.1671 19H14.9371C17.4857 18.9709 19.5284 16.8816 19.5001 14.333V9.666"
|
|
stroke="#ffffff" stroke-width="1.5" stroke-linecap="round"
|
|
stroke-linejoin="round"></path>
|
|
</g>
|
|
</svg>
|
|
<svg class="check-icon" width="20px" height="20px" viewBox="0 -0.5 25 25" fill="none"
|
|
xmlns="http://www.w3.org/2000/svg">
|
|
<g>
|
|
<path d="M5.5 12.5L10 17L19.5 7.5" stroke="#ffffff" stroke-width="2.5"
|
|
stroke-linecap="round" stroke-linejoin="round">
|
|
</path>
|
|
</g>
|
|
</svg>
|
|
</span>
|
|
</span>
|
|
</button>
|
|
|
|
<div class="hero-cta-row reveal">
|
|
<a class="hero-cta hero-cta-dark" id="hero-copy-script-btn"
|
|
href="https://gitlab.com/api/v4/projects/vyla-entertainment%2Fhome/packages/generic/vyla-home/v1.0.0/Vyla-Home_1.0.0_x64-setup.exe"
|
|
target="_blank" rel="noopener noreferrer">Download Release v1.0.0</a>
|
|
<a class="hero-cta hero-cta-light" href="https://gitlab.com/vyla-entertainment/home/-/releases"
|
|
target="_blank" rel="noopener noreferrer">
|
|
View Releases</a>
|
|
</div>
|
|
|
|
<div class="partners-inline reveal" id="partners-grid-wrap">
|
|
<p class="partners-label">Bypass datacenter blocks, ISP throttling, and cloud downtime.</p>
|
|
<div class="partners-grid" id="partners-grid"></div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<div class="stats-grid reveal-stagger" id="stats-grid">
|
|
<div class="stat-item reveal">
|
|
<span class="stat-value" id="stat-members"></span>
|
|
<span class="stat-label">Discord Members</span>
|
|
</div>
|
|
<div class="stat-item reveal">
|
|
<span class="stat-value" id="stat-online"></span>
|
|
<span class="stat-label">Online Now</span>
|
|
</div>
|
|
<!--
|
|
<div class="stat-item reveal">
|
|
<span class="stat-value" id="stat-scripts"></span>
|
|
<span class="stat-label">Supported Sources</span>
|
|
</div>
|
|
-->
|
|
</div>
|
|
|
|
<!--
|
|
|
|
<section id="scripts" class="section">
|
|
<div class="container">
|
|
<h2 class="section-eyebrow reveal">Desktop Advantages</h2>
|
|
<div class="scripts-wrap">
|
|
<div class="scripts-grid reveal-stagger" id="scripts-grid"></div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<section id="architecture" class="section executors-section">
|
|
<div class="container executors-container">
|
|
<div class="executors-heading reveal">
|
|
<h2 class="section-title-lg">A self-contained orchestration stack</h2>
|
|
<p class="section-subtitle">Running locally on your workstation</p>
|
|
</div>
|
|
</div>
|
|
<div class="executors-marquee-wrap">
|
|
<div class="executors-marquee-row">
|
|
<div class="executors-marquee-track" id="executors-track"></div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
-->
|
|
|
|
<section id="features" class="section features-section">
|
|
<div class="container features-container">
|
|
<div class="features-heading reveal">
|
|
<h2 class="section-title-lg">Why choose Home?</h2>
|
|
</div>
|
|
|
|
<div class="feature-block reveal">
|
|
<div class="feature-media">
|
|
<img src="assets/images/features/1.png" alt="Datacenter IP Throttling">
|
|
</div>
|
|
<div class="feature-copy">
|
|
<h2 class="section-title-lg feature-title">No Datacenter Throttling</h2>
|
|
<p class="section-subtitle">
|
|
Shared hosting nodes and VPS providers routinely block traffic originating from datacenters.
|
|
We removed the datacenter entirely. Connect directly via your residential network.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="feature-block feature-block-reverse reveal">
|
|
<div class="feature-media">
|
|
<img src="assets/images/features/2.png" alt="Single Point of Failure">
|
|
</div>
|
|
<div class="feature-copy">
|
|
<h2 class="section-title-lg feature-title">No Single Point of Failure</h2>
|
|
<p class="section-subtitle">
|
|
When a central domain gets flagged or suspended, everyone goes dark. Running locally means
|
|
your instance cannot be taken down by third parties.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="feature-block reveal">
|
|
<div class="feature-media">
|
|
<img src="assets/images/features/3.png" alt="Encrypted Local Vault">
|
|
</div>
|
|
<div class="feature-copy">
|
|
<h2 class="section-title-lg feature-title">Encrypted Local Vault</h2>
|
|
<p class="section-subtitle">
|
|
Your bookmarks, watch history, settings, and tokens are stored in an encrypted vault keyed
|
|
uniquely to your hardware profile. Total privacy.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="feature-block feature-block-reverse reveal">
|
|
<div class="feature-media">
|
|
<img src="assets/images/features/4.png" alt="Automated OTA Updates">
|
|
</div>
|
|
<div class="feature-copy">
|
|
<h2 class="section-title-lg feature-title">Automated OTA Updates</h2>
|
|
<p class="section-subtitle">
|
|
Vyla Home verifies releases directly from the repository upon startup. Update assets are
|
|
downloaded, checksum-verified, and patched automatically.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="feature-block reveal">
|
|
<div class="feature-media">
|
|
<img src="assets/images/features/5.png" alt="Rich Discovery">
|
|
</div>
|
|
<div class="feature-copy">
|
|
<h2 class="section-title-lg feature-title">Rich Discovery & Curated Media</h2>
|
|
<p class="section-subtitle">
|
|
Access curated collections, 4K releases, popular anime series, soundcloak music streaming,
|
|
and detailed TMDB cast breakdowns seamlessly.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="feature-block feature-block-reverse reveal">
|
|
<div class="feature-media">
|
|
<img src="assets/images/features/6.png" alt="Customizable Interface">
|
|
</div>
|
|
<div class="feature-copy">
|
|
<h2 class="section-title-lg feature-title">Customizable Interface</h2>
|
|
<p class="section-subtitle">
|
|
Toggle dynamic color adaptations, trailer background playback, custom color themes,
|
|
text-only mode, and layout preferences with full persistent storage.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!--
|
|
|
|
<section id="showcases" class="showcases-section">
|
|
<div class="container showcases-heading reveal">
|
|
<h2 class="section-title-lg">Advanced Player Engine</h2>
|
|
<p class="section-subtitle">Isolated playback sandbox with custom subtitle decoders and a responsive
|
|
video pipeline.</p>
|
|
</div>
|
|
<div class="showcase-viewport">
|
|
<div class="showcase-track" id="showcase-track"></div>
|
|
</div>
|
|
</section>
|
|
|
|
-->
|
|
|
|
<section id="testimonials" class="section testimonials-section">
|
|
<div class="container testimonials-container">
|
|
<div class="testimonials-heading reveal">
|
|
<h2 class="section-title-lg">Here's what people say about <span class="bold">Vyla Home</span></h2>
|
|
</div>
|
|
<div class="marquee-wrap marquee-fade-wrap">
|
|
<div class="marquee-row marquee-left">
|
|
<div class="marquee-track" id="marquee-track-1"></div>
|
|
</div>
|
|
<div class="marquee-row marquee-right">
|
|
<div class="marquee-track" id="marquee-track-2"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="faq" class="section faq-section">
|
|
<div class="container">
|
|
<div class="faq-heading reveal">
|
|
<h2 class="section-title-lg">FAQ</h2>
|
|
<p class="section-subtitle">Still have questions? <a href="https://discord.gg/5eqRhKeywG"
|
|
target="_blank" rel="noopener noreferrer">Ask in our Discord</a></p>
|
|
</div>
|
|
<div class="faq-list reveal-stagger" id="faq-list"></div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<section class="cta-banner">
|
|
<div class="cta-banner-media" aria-hidden="true">
|
|
<video class="cta-banner-video hero-atmosphere-video" src="assets\images\videos\header_video.mp4" autoplay
|
|
loop muted playsinline webkit-playsinline preload="auto"></video>
|
|
<canvas id="cta-byte-overlay"></canvas>
|
|
<div class="cta-banner-overlay"></div>
|
|
</div>
|
|
<div class="container cta-banner-content reveal">
|
|
<h2 class="cta-banner-title">Try Vyla Home today</h2>
|
|
<p class="cta-banner-subtitle">Your Entertainment. Zero Servers Attached.</p>
|
|
<a class="hero-cta hero-cta-light" id="cta-copy-script-btn"
|
|
href="https://gitlab.com/api/v4/projects/vyla-entertainment%2Fhome/packages/generic/vyla-home/v1.0.0/Vyla-Home_1.0.0_x64-setup.exe"
|
|
target="_blank" rel="noopener noreferrer">Download Now</a>
|
|
</div>
|
|
</section>
|
|
|
|
<footer class="footer">
|
|
<div class="footer-content">
|
|
<div class="footer-section">
|
|
<h4>Vyla Home</h4>
|
|
<p>A solo passion project built for resilient, serverless, personal entertainment playback. Run locally,
|
|
own your experience.</p>
|
|
</div>
|
|
<div class="footer-section">
|
|
<h4>Join our Discord</h4>
|
|
<div class="social-links">
|
|
<a href="https://discord.gg/5eqRhKeywG" target="_blank" rel="noopener">
|
|
<i class="fab fa-discord"></i> Discord
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="footer-section">
|
|
<h4>Our Gitlab</h4>
|
|
<p><a href="https://gitlab.com/vyla-entertainment/home" target="_blank" rel="noopener">Vyla
|
|
Entertainment</a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="footer-bottom">
|
|
© 2025 Vyla Entertainment. Personal local desktop software suite.
|
|
</div>
|
|
</footer>
|
|
|
|
<script type="module" src="src/scripts/main.js"></script>
|
|
</body>
|
|
|
|
</html> |