From 696026ff0e4c6386d14d069de3a3c2c80aa5f195 Mon Sep 17 00:00:00 2001 From: alwaysmesmerizingyou Date: Sat, 3 Oct 2026 14:01:25 -0700 Subject: [PATCH] idk bro the UI is just so bipolar --- .htaccess | 49 ------------------- index.html | 93 ++++++++++++++++++++++--------------- src/data/showcases.json | 16 ------- src/javascript/fetch.js | 6 +-- src/styling/download.css | 52 +++++++++++++++++++++ src/styling/explanation.css | 14 ++++++ src/styling/footer.css | 26 +++++++++-- src/styling/grid.css | 23 +++------ src/styling/main.css | 67 ++++++++++++++++++++++++++ 9 files changed, 219 insertions(+), 127 deletions(-) delete mode 100644 .htaccess delete mode 100644 src/data/showcases.json create mode 100644 src/styling/download.css create mode 100644 src/styling/explanation.css create mode 100644 src/styling/main.css diff --git a/.htaccess b/.htaccess deleted file mode 100644 index 2972d36..0000000 --- a/.htaccess +++ /dev/null @@ -1,49 +0,0 @@ -# SEO and Performance Optimization for Vyla Home - -# Enable compression - - AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css text/javascript application/javascript application/json - - -# Set cache expiration for static assets - - 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" - - -# Security headers - - 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" - - -# Force HTTPS (uncomment if SSL is available) -# -# RewriteEngine On -# RewriteCond %{HTTPS} off -# RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301] -# - -# Redirect www to non-www (or vice versa) - - RewriteEngine On - RewriteCond %{HTTP_HOST} ^www\.vyla\.cc [NC] - RewriteRule ^(.*)$ https://vyla.cc/$1 [L,R=301] - - -# Custom error pages -ErrorDocument 404 /index.html \ No newline at end of file diff --git a/index.html b/index.html index 3780c39..479f1e5 100644 --- a/index.html +++ b/index.html @@ -56,8 +56,7 @@ - - + @@ -116,9 +115,13 @@ + 
 Welcome to Vyla! I really hope you enjoy it!
+
+ + 
 
 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: loading...
-Mac:     loading...
-Android: loading...
- - 
Screenshots
-
- Feature 1 - Feature 2 - Feature 3 - Feature 4 - Feature 5 - Feature 6 +
+
Download Vyla
+
+
+ Windows + loading... +
+
+ macOS + loading... +
+
+ Android + loading... +
+
+ + 

         

         

-    

 
-    
+        
+    
 
 
 
\ No newline at end of file
diff --git a/src/data/showcases.json b/src/data/showcases.json
deleted file mode 100644
index 2cf9ba3..0000000
--- a/src/data/showcases.json
+++ /dev/null
@@ -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"
-]
\ No newline at end of file
diff --git a/src/javascript/fetch.js b/src/javascript/fetch.js
index 1e675c2..4f1f338 100644
--- 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`;
         });
diff --git a/src/styling/download.css b/src/styling/download.css
new file mode 100644
index 0000000..0477ddf
--- /dev/null
+++ 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;
+    }
+}
\ No newline at end of file
diff --git a/src/styling/explanation.css b/src/styling/explanation.css
new file mode 100644
index 0000000..1d94712
--- /dev/null
+++ 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%;
+    }
+}
\ No newline at end of file
diff --git a/src/styling/footer.css b/src/styling/footer.css
index 3917270..3770e47 100644
--- 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;
 }
\ No newline at end of file
diff --git a/src/styling/grid.css b/src/styling/grid.css
index d059dd4..5fbe1e2 100644
--- 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) {
diff --git a/src/styling/main.css b/src/styling/main.css
new file mode 100644
index 0000000..0e0d58a
--- /dev/null
+++ 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;
+}
\ No newline at end of file