updated lighthouse/ tweaked UI

.well-known/ard.json

@@ -0,0 +1,22 @@
+{
+    "entries": [
+        {
+            "identifier": "urn:air:vyla.cc:service:stream-api",
+            "displayName": "Vyla Stream API",
+            "type": "text/html",
+            "url": "https://vyla.cc/stream-api/overview",
+            "description": "Self-hosted HTTP/SSE proxy for stream resolution, subtitle extraction, and download links.",
+            "representativeQueries": [
+                "resolve a streaming link for a movie by id",
+                "get subtitles for a tv episode",
+                "check health status of a self-hosted Stream API instance"
+            ],
+            "tags": [
+                "media",
+                "streaming",
+                "sdk",
+                "self-hosted"
+            ]
+        }
+    ]
+}

assets/styling/base.css

@@ -1,11 +1,16 @@
 #header-container {
   position: sticky;
-  top: 0;
+  top: 10px;
   z-index: 40;
   background: rgba(255, 255, 255, 0.8);
   backdrop-filter: blur(12px);
   -webkit-backdrop-filter: blur(12px);
   border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+  width: 50%;
+  border-radius: 30px;
+  margin-left: auto;
+  margin-right: auto;
+  margin-top: 10px;
 }
 
 html.dark #header-container {
@@ -645,6 +650,7 @@ aside#toc {
   padding-left: 10px;
   height: fit-content;
   max-height: calc(100vh - var(--header-height) - 40px);
+  padding-bottom: 10px;
   overflow-y: auto;
   position: sticky;
   top: calc(var(--header-height) + 40px);
@@ -713,12 +719,22 @@ html.dark aside#toc li a:hover {
   flex: 1;
   min-width: 0;
   max-width: 720px;
+  padding: 20px;
+  margin-top: 40px;
+  background: rgba(255, 255, 255, 0.8);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  border-radius: 12px;
   width: 100%;
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
 }
 
+html.dark #main-wrap {
+  background: rgba(0, 0, 0, 0.4);
+}
+
 main.prose {
   min-width: 0;
   max-width: 100%;
@@ -1221,7 +1237,7 @@ html.dark .mt-menu .mt-item.on {
 }
 
 #sidebar {
-  margin-top: 0;
+  margin-top: 40px;
   background: rgba(255, 255, 255, 0.8);
   backdrop-filter: blur(12px);
   -webkit-backdrop-filter: blur(12px);
@@ -1230,8 +1246,9 @@ html.dark .mt-menu .mt-item.on {
   flex-shrink: 0;
   padding-top: 20px;
   position: sticky;
-  top: var(--header-height);
+  height: fit-content;
-  max-height: calc(100vh - var(--header-height));
+  top: calc(var(--header-height) + 40px);
+  max-height: calc(100vh - var(--header-height) - 40px);
   overflow-y: auto;
 }
 
@@ -1574,6 +1591,11 @@ html.dark .search-footer {
     display: none;
   }
 
+  #header-container {
+    width: 90%;
+    border-radius: 20px;
+  }
+
   #navbar .tabs,
   #theme-toggle,
   #navbar .nav-top::after {

assets/styling/roots.css

@@ -39,6 +39,23 @@ body {
     overflow-x: hidden;
 }
 
+body::before {
+    content: "";
+    position: fixed;
+    inset: 0;
+    pointer-events: none;
+    z-index: -1;
+    background: radial-gradient(ellipse at center,
+            transparent 35%,
+            rgba(255, 255, 255, 0.7) 100%);
+}
+
+html.dark body::before {
+    background: radial-gradient(ellipse at center,
+            transparent 35%,
+            rgba(0, 0, 0, 0.7) 100%);
+}
+
 html.dark body {
     background: var(--bg-dark);
     color: var(--text-dark);
@@ -46,12 +63,11 @@ html.dark body {
 
 .video-bg {
     position: fixed;
-    top: 0;
+    inset: 0;
-    left: 0;
     width: 100%;
     height: 100%;
     object-fit: cover;
-    z-index: -1;
+    z-index: -2;
 }
 
 a {

index.html

@@ -17,7 +17,7 @@
     <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="/ai-catalog.json" />
+    <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>
@@ -31,14 +31,34 @@
 </head>
 
 <body>
-    <video class="video-bg" src="" autoplay muted loop></video>
+    <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')
+                ? 'https://www.pexels.com/download/video/38811850//'
+                : 'https://www.pexels.com/download/video/38811850//';
+
+            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">
-        <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>
         <header id="navbar">
             <div class="nav-top">
                 <a class="brand" href="/"><img src="/assets/images/logo.png" alt="Vyla" id="brand-logo" width="28"

start-here/who-are-we.md

@@ -2,6 +2,8 @@
 
 This is the main documentation page for Vyla. Here you can find information about the product, its features, and how to use it.
 
+## Who Are We?
+
 You may wonder who **we are**?
 
 Vyla started from the web project which initially intended to create a clean environment where one could stream movies and TV shows free from all the unnecessary elements. Originally, it was developed mainly as a frontend which embedded other players. With time I got involved in the process of developing the infrastructure.
@@ -14,4 +16,60 @@ Among the main challenges associated with the development of Vyla was hosting. I
 
 However, after receiving a DMCA strike and experiencing problems due to frequent reports in Cloudflare, I figured out that it wouldn’t be efficient to self host the streaming infrastructure. Therefore, the choice was made to focus more on SDK and the application rather than using a remote backend.
 
-Thanks for Reading ❤️
+Thanks for Reading ❤️
+
+## Credits and Acknowledgments
+
+<p class="page-description">Credits and inspiration behind the Vyla API ecosystem.</p>
+
+This page highlights the open-source projects and developers that heavily inspired the Vyla API, player ecosystem, and overall UI direction.
+
+---
+
+## Player & UI Inspiration
+
+The overall player experience, streaming layout, and much of the UI direction for Vyla was heavily inspired by P-Stream.
+
+- Repository: [https://github.com/p-stream](https://github.com/p-stream)
+- Owner: [https://github.com/Pasithea0](https://github.com/Pasithea0)
+
+Their work served as a major reference point for the design language and viewing experience used throughout Vyla.
+
+---
+
+## Stream API Inspiration
+
+The architecture and implementation ideas behind the Vyla streaming API were heavily inspired by CinePro.
+
+### Resources
+
+- Organization: [https://github.com/cinepro-org/](https://github.com/cinepro-org/)
+- Main Website: [https://cinepro.cc/](https://cinepro.cc/)
+- Documentation: [https://docs.cinepro.cc/](https://docs.cinepro.cc/)
+- UI Components: [https://ui.cinepro.cc/](https://ui.cinepro.cc/)
+- Owner: [https://github.com/An0n-00](https://github.com/An0n-00)
+
+---
+
+## Source Implementation & Fixes
+
+The owner of Movieslay helped fix and implement new sources across the Vyla API.
+
+- Repository: [gitlab.com/gavingogaming/movieslay-emerald-temp](https://gitlab.com/gavingogaming/movieslay-emerald-temp)
+- Discord: [https://discord.gg/rD75qxGBVG](https://discord.gg/rD75qxGBVG)
+- Owner: [https://gitlab.com/gavingogaming](https://gitlab.com/gavingogaming)
+
+---
+
+## Open Source Appreciation
+
+Vyla would not exist in its current form without the incredible open-source work created by these developers and communities.
+
+Massive thanks to:
+
+- Pasithea0
+- An0n-00
+- gavingogaming (Movieslay)
+- The P-Stream contributors
+- The CinePro contributors
+- The Movieslay contributors