idk bro the UI is just so bipolar

2026-11-09 20:57:25 -05:00 · 2026-10-03 14:01:25 -07:00
parent 198384cf76
commit 696026ff0e
9 changed files with 219 additions and 127 deletions
--- a/.htaccess
+++ b/.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
--- a/index.html
+++ b/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/footer.css">
+    <link rel="stylesheet" href="src/styling/main.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,13 +147,26 @@ 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">
+            <div class="download-header">Download Vyla</div>
+            <div class="download-grid">
+                <div class="download-item">
+                    <span class="platform-name">Windows</span>
+                    <a id="windows-download" href="#" aria-label="Download Vyla for Windows">loading...</a>
+                </div>
+                <div class="download-item">
+                    <span class="platform-name">macOS</span>
+                    <a id="mac-download" href="#" aria-label="Download Vyla for macOS">loading...</a>
+                </div>
+                <div class="download-item">
+                    <span class="platform-name">Android</span>
+                    <a id="android-download" href="#" aria-label="Download Vyla for Android">loading...</a>
+                </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"
@@ -166,11 +182,11 @@ Android: <a id="android-download" href="#" aria-label="Download Vyla for Android
                <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">
            <pre>Thanks for reading :-P</pre>
@@ -187,6 +203,7 @@ Android: <a id="android-download" href="#" aria-label="Download Vyla for Android
                We have a nice API so you can create your own Vyla.
            </div>
        </footer>
+    </main>
 </body>

 </html>
--- a/src/data/showcases.json
+++ b/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"
-]
--- a/src/javascript/fetch.js
+++ b/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`;
        });
--- a/src/styling/download.css
+++ b/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;
+    }
+}
--- a/src/styling/explanation.css
+++ b/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%;
+    }
+}
--- a/src/styling/footer.css
+++ b/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;
 }
--- a/src/styling/grid.css
+++ b/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) {
--- a/src/styling/main.css
+++ b/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;
+}