idk bro the UI is just so bipolar

.htaccess

@@ -1,49 +0,0 @@
-# SEO and Performance Optimization for Vyla Home
-
-# Enable compression
-<IfModule mod_deflate.c>
-    AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css text/javascript application/javascript application/json
-</IfModule>
-
-# Set cache expiration for static assets
-<IfModule mod_expires.c>
-    ExpiresActive On
-    ExpiresByType image/jpg "access plus 1 year"
-    ExpiresByType image/jpeg "access plus 1 year"
-    ExpiresByType image/gif "access plus 1 year"
-    ExpiresByType image/png "access plus 1 year"
-    ExpiresByType image/svg+xml "access plus 1 year"
-    ExpiresByType text/css "access plus 1 month"
-    ExpiresByType application/javascript "access plus 1 month"
-    ExpiresByType application/x-javascript "access plus 1 month"
-    ExpiresByType application/json "access plus 1 month"
-    ExpiresByType font/woff2 "access plus 1 year"
-    ExpiresByType font/woff "access plus 1 year"
-    ExpiresByType font/ttf "access plus 1 year"
-    ExpiresByType font/eot "access plus 1 year"
-</IfModule>
-
-# Security headers
-<IfModule mod_headers.c>
-    Header set X-Content-Type-Options "nosniff"
-    Header set X-Frame-Options "SAMEORIGIN"
-    Header set X-XSS-Protection "1; mode=block"
-    Header set Referrer-Policy "strict-origin-when-cross-origin"
-</IfModule>
-
-# Force HTTPS (uncomment if SSL is available)
-# <IfModule mod_rewrite.c>
-#     RewriteEngine On
-#     RewriteCond %{HTTPS} off
-#     RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]
-# </IfModule>
-
-# Redirect www to non-www (or vice versa)
-<IfModule mod_rewrite.c>
-    RewriteEngine On
-    RewriteCond %{HTTP_HOST} ^www\.vyla\.cc [NC]
-    RewriteRule ^(.*)$ https://vyla.cc/$1 [L,R=301]
-</IfModule>
-
-# Custom error pages
-ErrorDocument 404 /index.html

index.html

@@ -56,8 +56,7 @@
         <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap">
     </noscript>
 
-    <link rel="stylesheet" href="src/styling/grid.css">
+    <link rel="stylesheet" href="src/styling/main.css">
-    <link rel="stylesheet" href="src/styling/footer.css">
 
     <script defer src="src/javascript/fetch.js"></script>
 
@@ -116,9 +115,13 @@
 </head>
 
 <body>
+    <video src="https://www.pexels.com/download/video/29195381/" autoplay muted loop></video>
     <main>
         <pre>
 Welcome to Vyla! I really hope you enjoy it!
+        </pre>
+
+        <pre>
 
 Here's a little explanation of Vyla:
 
@@ -144,49 +147,63 @@ SDK and the application rather than using a remote backend.
 
 Thanks for Reading ❤️
 
-Download Vyla using these links:
-
-Windows: <a id="windows-download" href="#" aria-label="Download Vyla for Windows">loading...</a>
-Mac:     <a id="mac-download" href="#" aria-label="Download Vyla for macOS">loading...</a>
-Android: <a id="android-download" href="#" aria-label="Download Vyla for Android">loading...</a>
 </pre>
-
+        <div class="download-box">
-        <pre>Screenshots</pre>
+            <div class="download-header">Download Vyla</div>
-        <div class="gallery">
+            <div class="download-grid">
-            <img src="assets/images/features/1.webp" alt="Feature 1" width="1920" height="1080" fetchpriority="high"
+                <div class="download-item">
-                decoding="async">
+                    <span class="platform-name">Windows</span>
-            <img src="assets/images/features/2.webp" alt="Feature 2" width="2075" height="1205" loading="lazy"
+                    <a id="windows-download" href="#" aria-label="Download Vyla for Windows">loading...</a>
-                decoding="async">
+                </div>
-            <img src="assets/images/features/3.webp" alt="Feature 3" width="1805" height="1185" loading="lazy"
+                <div class="download-item">
-                decoding="async">
+                    <span class="platform-name">macOS</span>
-            <img src="assets/images/features/4.webp" alt="Feature 4" width="1679" height="1066" loading="lazy"
+                    <a id="mac-download" href="#" aria-label="Download Vyla for macOS">loading...</a>
-                decoding="async">
+                </div>
-            <img src="assets/images/features/5.webp" alt="Feature 5" width="2078" height="1207" loading="lazy"
+                <div class="download-item">
-                decoding="async">
+                    <span class="platform-name">Android</span>
-            <img src="assets/images/features/6.webp" alt="Feature 6" width="2071" height="1195" loading="lazy"
+                    <a id="android-download" href="#" aria-label="Download Vyla for Android">loading...</a>
-                decoding="async">
+                </div>
+            </div>
         </div>
 
+        <!---
+        <pre>Screenshots</pre>
+            <div class="gallery">
+                <img src="assets/images/features/1.webp" alt="Feature 1" width="1920" height="1080" fetchpriority="high"
+                    decoding="async">
+                <img src="assets/images/features/2.webp" alt="Feature 2" width="2075" height="1205" loading="lazy"
+                    decoding="async">
+                <img src="assets/images/features/3.webp" alt="Feature 3" width="1805" height="1185" loading="lazy"
+                    decoding="async">
+                <img src="assets/images/features/4.webp" alt="Feature 4" width="1679" height="1066" loading="lazy"
+                    decoding="async">
+                <img src="assets/images/features/5.webp" alt="Feature 5" width="2078" height="1207" loading="lazy"
+                    decoding="async">
+                <img src="assets/images/features/6.webp" alt="Feature 6" width="2071" height="1195" loading="lazy"
+                    decoding="async">
+            </div>
+            -->
+
         <pre id="reviews-output"></pre>
         <pre id="partners-output"></pre>
         <pre id="faq-output"></pre>
-    </main>
 
-    <footer class="footer">
+        <footer class="footer">
-        <pre>Thanks for reading :-P</pre>
+            <pre>Thanks for reading :-P</pre>
-        <div class="links">
+            <div class="links">
-            <pre></pre>
+                <pre></pre>
-            <a href="https://gitlab.com/vyla-entertainment" target="_blank" rel="noopener noreferrer"
+                <a href="https://gitlab.com/vyla-entertainment" target="_blank" rel="noopener noreferrer"
-                aria-label="GitLab project repository">Check out our Ecosystem on Gitlab</a>
+                    aria-label="GitLab project repository">Check out our Ecosystem on Gitlab</a>
-            <a href="https://discord.gg/5eqRhKeywG" target="_blank" rel="noopener noreferrer"
+                <a href="https://discord.gg/5eqRhKeywG" target="_blank" rel="noopener noreferrer"
-                aria-label="Vyla Discord community server">Discord</a>
+                    aria-label="Vyla Discord community server">Discord</a>
-            <pre></pre>
+                <pre></pre>
-            <a href="https://docs.vyla.cc" target="_blank" rel="noopener noreferrer"
+                <a href="https://docs.vyla.cc" target="_blank" rel="noopener noreferrer"
-                aria-label="Vyla documentation website">Docs</a>
+                    aria-label="Vyla documentation website">Docs</a>
-            <pre></pre>
+                <pre></pre>
-            We have a nice API so you can create your own Vyla.
+                We have a nice API so you can create your own Vyla.
-        </div>
+            </div>
-    </footer>
+        </footer>
+    </main>
 </body>
 
 </html>

src/data/showcases.json

@@ -1,16 +0,0 @@
-[
-    "https://www.youtube.com/watch?v=vpBXODI5kus",
-    "https://www.youtube.com/watch?v=HBfYn84lctI",
-    "https://www.youtube.com/watch?v=5pKF3K3QC8g",
-    "https://www.youtube.com/watch?v=qCcsW2LT324",
-    "https://www.youtube.com/watch?v=Ww5U6JD_OZ8",
-    "https://www.youtube.com/watch?v=CQv6dzqLI-w",
-    "https://www.youtube.com/watch?v=RpfPlfCa158",
-    "https://www.youtube.com/watch?v=YM2Z3-L2DK8",
-    "https://www.youtube.com/watch?v=gr0u8UHA_tU",
-    "https://www.youtube.com/watch?v=vx_SfuS75rM",
-    "https://www.youtube.com/watch?v=TOMWYVA_iNE",
-    "https://www.youtube.com/watch?v=tjAbSxEcq_A",
-    "https://www.youtube.com/watch?v=Dwzb2iRf8_k",
-    "https://www.youtube.com/watch?v=ZavHJRW4yWg"
-]

src/javascript/fetch.js

@@ -103,7 +103,7 @@ async function loadData() {
 
     const revContainer = document.getElementById("reviews-output");
     if (revContainer && Array.isArray(reviews)) {
-        let revText = "\nreviews:\n";
+        let revText = "\nReviews:\n";
         reviews.forEach(r => {
             revText += `"${r.text}" - ${r.name} (${r.handle})\n`;
         });
@@ -112,7 +112,7 @@ async function loadData() {
 
     const partContainer = document.getElementById("partners-output");
     if (partContainer && Array.isArray(partners)) {
-        partContainer.textContent = "\npartners:\n";
+        partContainer.textContent = "\nPartners:\n";
         partners.forEach(p => {
             const a = document.createElement("a");
             a.href = p.link;
@@ -127,7 +127,7 @@ async function loadData() {
 
     const faqContainer = document.getElementById("faq-output");
     if (faqContainer && Array.isArray(faq)) {
-        let faqText = "\nfaq:\n";
+        let faqText = "\nFAQ:\n";
         faq.forEach(f => {
             faqText += `Q: ${f.q}\nA: ${f.a}\n\n`;
         });

src/styling/download.css

@@ -0,0 +1,52 @@
+.download-box {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    border: 1px dashed #333;
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
+    border-radius: 10px;
+    padding: 1.25rem 1.5rem;
+    margin: 0 1.5rem 2rem 1.5rem;
+    width: calc(100% - 3rem);
+    max-width: 900px;
+    box-sizing: border-box;
+}
+
+.download-header {
+    color: #ffffff;
+}
+
+.download-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 1.25rem;
+    width: 100%;
+}
+
+.download-item {
+    display: flex;
+    flex-direction: column;
+    gap: 0.35rem;
+}
+
+.platform-name {
+    color: #888888;
+}
+
+.download-item a {
+    text-decoration: none;
+    word-break: break-word;
+}
+
+.download-item a:hover,
+.download-item a:focus {
+    text-decoration: underline;
+}
+
+@media (max-width: 600px) {
+    .download-grid {
+        grid-template-columns: 1fr;
+        gap: 1rem;
+    }
+}

src/styling/explanation.css

@@ -0,0 +1,14 @@
+.explanation {
+    padding-top: 50px;
+    padding-bottom: 50px;
+    font-size: 16px;
+    line-height: 1.6;
+    width: 50%;
+    margin: 0 auto;
+}
+
+@media (max-width: 768px) {
+    .explanation {
+        width: 90%;
+    }
+}

src/styling/footer.css

@@ -1,17 +1,35 @@
 footer {
-    margin-top: 1rem;
+    width: 100%;
+    box-sizing: border-box;
+    margin-top: 3.5rem;
+    border-top: 1px dashed #333;
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
+    border-top-left-radius: 20px;
+    border-top-right-radius: 20px;
+    padding: 2.5rem 1.5rem 1.5rem 1.5rem;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+footer pre,
+footer .links {
+    width: 100%;
+    max-width: 900px;
+    padding: 0;
+    margin: 0;
 }
 
 footer .links {
     display: flex;
     flex-direction: column;
     align-items: flex-start;
-    gap: 0.5rem;
+    gap: 0.75rem;
+    margin-top: 1rem;
 }
 
 footer .links a {
-    padding: 12px 0;
-    min-height: 48px;
     display: flex;
     align-items: center;
 }

src/styling/grid.css

@@ -1,24 +1,12 @@
-body {
-    background-color: #000000;
-    color: #ffffff;
-    font-family: monospace;
-    margin: 1rem;
-}
-
-a {
-    color: #80b3ff;
-}
-
-a:hover,
-a:focus {
-    color: #b3d1ff;
-}
-
 .gallery {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 1rem;
-    width: 50vw;
+    width: 100%;
+    max-width: 900px;
+    padding: 0 1.5rem;
+    margin-bottom: 2.5rem;
+    box-sizing: border-box;
 }
 
 .gallery img {
@@ -27,6 +15,7 @@ a:focus {
     aspect-ratio: 16 / 9;
     object-fit: cover;
     display: block;
+    border-radius: 30px;
 }
 
 @media (max-width: 900px) {

src/styling/main.css

@@ -0,0 +1,67 @@
+@import url('./footer.css');
+@import url('./grid.css');
+@import url('./download.css');
+@import url('./explanation.css');
+
+body {
+    background-color: #000000;
+    color: #ffffff;
+    overflow-x: hidden;
+    margin-top: 50px;
+    margin-bottom: 0;
+    margin-left: 0;
+    margin-right: 0;
+    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
+}
+
+body video {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    z-index: -1;
+}
+
+main {
+    margin: 0;
+    width: 100%;
+    min-height: calc(100vh - 50px);
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+body::before,
+body::after {
+    content: "";
+    position: fixed;
+    left: 0;
+    right: 0;
+    height: 36px;
+    pointer-events: none;
+    z-index: 9999;
+}
+
+body::before {
+    top: 0;
+    background: linear-gradient(to bottom, #000000 15%, transparent);
+}
+
+body::after {
+    bottom: 0;
+    background: linear-gradient(to top, #000000 15%, transparent);
+}
+
+pre {
+    white-space: pre-wrap;
+    word-break: break-word;
+    margin: 0 0 1.5rem 0;
+    padding: 0 1.5rem;
+    width: 100%;
+    max-width: 900px;
+    box-sizing: border-box;
+    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
+}