Files
home-frontend/index.html
2026-08-21 15:01:32 -07:00

548 lines
27 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">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="format-detection" content="telephone=no">
<meta name="referrer" content="no-referrer-when-downgrade">
<!-- Primary SEO Meta Tags -->
<title>Vyla Home - Self-Hosted Desktop Media Center | Serverless Streaming & Entertainment Platform</title>
<meta name="description"
content="Vyla Home is a revolutionary standalone desktop media center that bypasses datacenter blocking, ISP throttling, and cloud downtime. Experience self-hosted streaming, 4K movies, TV shows, and anime with complete privacy and zero server dependencies.">
<meta name="keywords"
content="vyla home, desktop media center, self-hosted streaming, serverless entertainment, media player, movies, tv shows, anime, 4K streaming, bypass ISP throttling, datacenter blocking, local media vault, encrypted storage, desktop application, offline streaming, personal entertainment">
<meta name="author" content="Vyla Entertainment">
<meta name="robots" content="index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1">
<meta name="googlebot" content="index, follow">
<meta name="language" content="English">
<meta name="geo.region" content="US">
<meta name="geo.placename" content="Global">
<meta name="coverage" content="Worldwide">
<meta name="distribution" content="Global">
<meta name="rating" content="General">
<meta name="revisit-after" content="7 days">
<link rel="canonical" href="https://vyla.cc/">
<!-- Additional SEO Meta Tags -->
<meta name="application-name" content="Vyla Home">
<meta name="msapplication-tooltip" content="Self-hosted desktop media center for streaming entertainment">
<meta name="msapplication-starturl" content="/">
<meta name="msapplication-window" content="width=device-width;height=device-height">
<meta name="msapplication-navbutton-color" content="#1a1a2e">
<!-- Favicon and App Icons -->
<link rel="icon" href="assets/images/favicon.ico" type="image/x-icon">
<link rel="icon" type="image/png" sizes="32x32" href="assets/images/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="assets/images/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="assets/images/apple-touch-icon.png">
<link rel="manifest" href="manifest.json">
<!-- DNS Prefetch for Performance -->
<link rel="dns-prefetch" href="https://fonts.googleapis.com">
<link rel="dns-prefetch" href="https://fonts.gstatic.com">
<link rel="dns-prefetch" href="https://gitlab.com">
<link rel="dns-prefetch" href="https://discord.com">
<link rel="dns-prefetch" href="https://videos.pexels.com">
<!-- Preconnect for Critical Resources -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preconnect" href="https://gitlab.com" crossorigin>
<link rel="preconnect" href="https://discord.com" crossorigin>
<meta property="og:title" content="Vyla Home - Self-Hosted Desktop Media Center | Serverless Streaming">
<meta property="og:description"
content="Experience revolutionary self-hosted streaming with Vyla Home. Bypass datacenter blocking, ISP throttling, and cloud downtime. 4K movies, TV shows, anime with complete privacy and zero server dependencies.">
<meta property="og:image" content="https://vyla.cc/assets/images/thumbnail.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Vyla Home Desktop Media Center Interface">
<meta property="og:type" content="website">
<meta property="og:site_name" content="Vyla Home">
<meta property="og:url" content="https://vyla.cc/">
<meta property="og:locale" content="en_US">
<meta property="og:locale:alternate" content="en_GB">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@VylaEntertainment">
<meta name="twitter:creator" content="@VylaEntertainment">
<meta name="twitter:title" content="Vyla Home - Self-Hosted Desktop Media Center">
<meta name="twitter:description"
content="Experience revolutionary self-hosted streaming. Bypass datacenter blocking, ISP throttling, and cloud downtime. 4K movies, TV shows, anime with complete privacy.">
<meta name="twitter:image" content="https://vyla.cc/assets/images/thumbnail.png">
<meta name="twitter:image:alt" content="Vyla Home Desktop Media Center Interface">
<link rel="icon" href="assets/images/favicon.ico" type="image/x-icon">
<link rel="manifest" href="manifest.json">
<meta name="theme-color" content="#1a1a2e">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<meta name="apple-mobile-web-app-title" content="Vyla Home">
<meta name="mobile-web-app-capable" content="yes">
<meta name="application-name" content="Vyla Home">
<meta name="msapplication-TileColor" content="#1a1a2e">
<meta name="msapplication-config" content="/browserconfig.xml">
<link rel="apple-touch-icon" href="assets/images/icon.png">
<link rel="stylesheet" href="src/styles/main.css">
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "SoftwareApplication",
"name": "Vyla Home",
"applicationCategory": "MultimediaApplication",
"operatingSystem": "Windows",
"offers": {
"@type": "Offer",
"price": "0",
"priceCurrency": "USD"
},
"description": "Vyla Home is a revolutionary standalone desktop media center that bypasses datacenter blocking, ISP throttling, and cloud downtime. Experience self-hosted streaming, 4K movies, TV shows, and anime with complete privacy and zero server dependencies.",
"url": "https://vyla.cc/",
"author": {
"@type": "Organization",
"name": "Vyla Entertainment",
"url": "https://gitlab.com/vyla-entertainment/home"
},
"publisher": {
"@type": "Organization",
"name": "Vyla Entertainment",
"url": "https://gitlab.com/vyla-entertainment/home"
},
"aggregateRating": {
"@type": "AggregateRating",
"ratingValue": "4.8",
"ratingCount": "1250",
"bestRating": "5",
"worstRating": "1"
},
"featureList": [
"Self-hosted streaming platform",
"Bypass datacenter blocking",
"Encrypted local vault",
"4K movie streaming",
"TV show library",
"Anime collection",
"Automated OTA updates",
"Customizable interface",
"Offline playback capability"
],
"screenshot": "https://vyla.cc/assets/images/thumbnail.png",
"softwareVersion": "1.0.0",
"datePublished": "2025-01-01",
"downloadUrl": "https://gitlab.com/api/v4/projects/vyla-entertainment%2Fhome/packages/generic/vyla-home/v1.0.0/Vyla-Home_1.0.0_x64-setup.exe",
"license": "https://gitlab.com/vyla-entertainment/home/-/blob/main/LICENSE"
}
</script>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "WebSite",
"name": "Vyla Home",
"url": "https://vyla.cc/",
"description": "Self-hosted desktop media center for streaming entertainment",
"potentialAction": {
"@type": "SearchAction",
"target": "https://vyla.cc/?q={search_term_string}",
"query-input": "required name=search_term_string"
},
"publisher": {
"@type": "Organization",
"name": "Vyla Entertainment",
"url": "https://gitlab.com/vyla-entertainment/home",
"logo": "https://vyla.cc/assets/images/header_logo.png"
}
}
</script>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Organization",
"name": "Vyla Entertainment",
"url": "https://vyla.cc/",
"logo": "https://vyla.cc/assets/images/header_logo.png",
"description": "Developer of self-hosted entertainment software",
"sameAs": [
"https://gitlab.com/vyla-entertainment/home",
"https://discord.gg/5eqRhKeywG"
],
"contactPoint": {
"@type": "ContactPoint",
"contactType": "customer support",
"url": "https://discord.gg/5eqRhKeywG"
}
}
</script>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "FAQPage",
"mainEntity": [
{
"@type": "Question",
"name": "What is Vyla Home?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Vyla Home is a standalone desktop media center designed to bypass datacenter blocking, ISP throttling, and cloud downtime. It runs locally on your computer, providing self-hosted streaming without server dependencies."
}
},
{
"@type": "Question",
"name": "How does Vyla Home bypass datacenter blocking?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Vyla Home runs entirely on your local workstation using your residential network connection, eliminating datacenter IP addresses that are commonly blocked by streaming services."
}
},
{
"@type": "Question",
"name": "Is Vyla Home free to use?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Yes, Vyla Home is completely free and open-source. You can download it from our GitLab repository without any cost."
}
}
]
}
</script>
</head>
<body>
<header role="banner">
<nav class="nav" role="navigation" aria-label="Main navigation">
<div class="nav-container">
<a href="/" class="logo" aria-label="Vyla Home - Home">Vyla Home</a>
<div class="nav-links">
<a href="#features">Features</a>
<a href="#architecture">Architecture</a>
<a href="#faq">FAQ</a>
</div>
</div>
</nav>
</header>
<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 role="main">
<section class="hero" aria-labelledby="hero-title">
<div class="hero-atmosphere" aria-hidden="true">
<video class="hero-atmosphere-video" autoplay loop muted playsinline webkit-playsinline preload="auto"
aria-hidden="true">
<source src="https://videos.pexels.com/video-files/35997189/15263283_3840_2160_25fps.mp4"
type="video/mp4">
</video>
<div class="hero-atmosphere-sheen"></div>
<canvas id="hero-byte-overlay" aria-hidden="true"></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 Logo">
</div>
<h1 id="hero-title" 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>
<div class="discord-copy-bar reveal" id="copy-discord-btn" role="button" tabindex="0"
aria-label="Copy GitLab releases URL">
<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" aria-hidden="true">
<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" aria-hidden="true">
<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" aria-hidden="true">
<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>
</div>
<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" aria-labelledby="features-heading">
<div class="container features-container">
<header class="features-heading reveal">
<h2 id="features-heading" class="section-title-lg">Why choose Home?</h2>
</header>
<article class="feature-block reveal">
<figure class="feature-media">
<img src="assets/images/features/1.png"
alt="Diagram showing datacenter IP throttling bypass with residential network connection">
</figure>
<div class="feature-copy">
<h3 class="section-title-lg feature-title">No Datacenter Throttling</h3>
<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>
</article>
<article class="feature-block feature-block-reverse reveal">
<figure class="feature-media">
<img src="assets/images/features/2.png"
alt="Diagram showing decentralized architecture eliminating single point of failure">
</figure>
<div class="feature-copy">
<h3 class="section-title-lg feature-title">No Single Point of Failure</h3>
<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>
</article>
<article class="feature-block reveal">
<figure class="feature-media">
<img src="assets/images/features/3.png"
alt="Illustration of encrypted local vault with hardware profile key">
</figure>
<div class="feature-copy">
<h3 class="section-title-lg feature-title">Encrypted Local Vault</h3>
<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>
</article>
<article class="feature-block feature-block-reverse reveal">
<figure class="feature-media">
<img src="assets/images/features/4.png"
alt="Interface showing automated over-the-air update process">
</figure>
<div class="feature-copy">
<h3 class="section-title-lg feature-title">Automated OTA Updates</h3>
<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>
</article>
<article class="feature-block reveal">
<figure class="feature-media">
<img src="assets/images/features/5.png"
alt="Interface showing rich media discovery with curated collections and 4K content">
</figure>
<div class="feature-copy">
<h3 class="section-title-lg feature-title">Rich Discovery & Curated Media</h3>
<p class="section-subtitle">
Access curated collections, 4K releases, popular anime series, soundcloak music streaming,
and detailed TMDB cast breakdowns seamlessly.
</p>
</div>
</article>
<article class="feature-block feature-block-reverse reveal">
<figure class="feature-media">
<img src="assets/images/features/6.png"
alt="Interface showing customizable theme and layout options">
</figure>
<div class="feature-copy">
<h3 class="section-title-lg feature-title">Customizable Interface</h3>
<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>
</article>
</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" aria-labelledby="testimonials-heading">
<div class="container testimonials-container">
<header class="testimonials-heading reveal">
<h2 id="testimonials-heading" class="section-title-lg">Here's what people say about <span
class="bold">Vyla Home</span></h2>
</header>
<div class="marquee-wrap marquee-fade-wrap" role="region" aria-label="User testimonials carousel">
<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" aria-labelledby="faq-heading">
<div class="container">
<header class="faq-heading reveal">
<h2 id="faq-heading" 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>
</header>
<div class="faq-list reveal-stagger" id="faq-list" role="list" aria-label="Frequently asked questions">
</div>
</div>
</section>
</main>
<section class="cta-banner" aria-labelledby="cta-heading">
<div class="cta-banner-media" aria-hidden="true">
<video class="cta-banner-video hero-atmosphere-video"
src="https://videos.pexels.com/video-files/35997189/15263283_3840_2160_25fps.mp4" autoplay loop muted
playsinline webkit-playsinline preload="auto" aria-hidden="true"></video>
<canvas id="cta-byte-overlay" aria-hidden="true"></canvas>
<div class="cta-banner-overlay"></div>
</div>
<div class="container cta-banner-content reveal">
<h2 id="cta-heading" 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" role="contentinfo">
<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>
<nav class="social-links" aria-label="Social media links">
<a href="https://discord.gg/5eqRhKeywG" target="_blank" rel="noopener noreferrer"
aria-label="Join our Discord community">
<i class="fab fa-discord" aria-hidden="true"></i> Discord
</a>
</nav>
</div>
<div class="footer-section">
<h4>Our Gitlab</h4>
<p><a href="https://gitlab.com/vyla-entertainment/home" target="_blank" rel="noopener noreferrer">Vyla
Entertainment</a>
</p>
</div>
</div>
<div class="footer-bottom">
<p>&copy; 2025 Vyla Entertainment. Personal local desktop software suite.</p>
</div>
</footer>
<script type="module" src="src/scripts/main.js"></script>
</body>
</html>