Spaces:

bigpappic
/

the-ultimate-blank-canvas-app

Running

App Files Files Community

bigpappic commited on 15 days ago

Commit

c368f70

verified ·

1 Parent(s): 76d3eae

Please fix whatever issues this app code has right now

Browse files

Files changed (9) hide show

components/footer.js +3 -4
components/navbar.js +5 -11
create.html +0 -1
download.html +0 -1
help.html +0 -1
index.html +1 -2
projects.html +0 -1
script.js +13 -17
style.css +5 -1

components/footer.js CHANGED Viewed

@@ -4,14 +4,13 @@ class CustomFooter extends HTMLElement {
     this.shadowRoot.innerHTML = `
       <style>
         footer {
-          background: white;
-          color: #4b5563;
           padding: 2rem 1rem;
           text-align: center;
           border-top: 1px solid #e5e7eb;
-          margin-top: auto;
         }
-.footer-content {
           max-width: 1200px;
           margin: 0 auto;
           display: grid;

     this.shadowRoot.innerHTML = `
       <style>
         footer {
+          background: rgba(255, 255, 255, 0.98);
+color: #4b5563;
           padding: 2rem 1rem;
           text-align: center;
           border-top: 1px solid #e5e7eb;
         }
+        .footer-content {
           max-width: 1200px;
           margin: 0 auto;
           display: grid;

components/navbar.js CHANGED Viewed

@@ -4,23 +4,17 @@ class CustomNavbar extends HTMLElement {
     this.shadowRoot.innerHTML = `
       <style>
         nav {
-          background: rgba(255, 255, 255, 0.9);
-          backdrop-filter: blur(4px);
           padding: 0.75rem 2rem;
-          display: flex;
           justify-content: space-between;
           align-items: center;
           border-bottom: 1px solid #e2e8f0;
-          position: fixed;
-          top: 0;
-          left: 0;
-          right: 0;
           z-index: 50;
         }
-        body {
-          padding-top: 60px;
-        }
-.logo {
           color: #2b6cb0;
           font-weight: bold;
           font-size: 1.25rem;

     this.shadowRoot.innerHTML = `
       <style>
         nav {
+          background: rgba(255, 255, 255, 0.98);
+backdrop-filter: blur(4px);
           padding: 0.75rem 2rem;
+display: flex;
           justify-content: space-between;
           align-items: center;
           border-bottom: 1px solid #e2e8f0;
+position: relative;
           z-index: 50;
         }
+        .logo {
           color: #2b6cb0;
           font-weight: bold;
           font-size: 1.25rem;

create.html CHANGED Viewed

@@ -7,7 +7,6 @@
 <link rel="icon" type="image/svg+xml" href="/favicon.svg">
 <link rel="stylesheet" href="style.css">
     <script src="https://cdn.tailwindcss.com"></script>
-    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
 </head>
 <body class="min-h-screen flex flex-col">
     <custom-navbar></custom-navbar>

 <link rel="icon" type="image/svg+xml" href="/favicon.svg">
 <link rel="stylesheet" href="style.css">
     <script src="https://cdn.tailwindcss.com"></script>
 </head>
 <body class="min-h-screen flex flex-col">
     <custom-navbar></custom-navbar>

download.html CHANGED Viewed

@@ -7,7 +7,6 @@
     <link rel="icon" type="image/svg+xml" href="/favicon.svg">
     <link rel="stylesheet" href="style.css">
     <script src="https://cdn.tailwindcss.com"></script>
-    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
 </head>
 <body class="min-h-screen flex flex-col">
     <custom-navbar></custom-navbar>

     <link rel="icon" type="image/svg+xml" href="/favicon.svg">
     <link rel="stylesheet" href="style.css">
     <script src="https://cdn.tailwindcss.com"></script>
 </head>
 <body class="min-h-screen flex flex-col">
     <custom-navbar></custom-navbar>

help.html CHANGED Viewed

@@ -7,7 +7,6 @@
 <link rel="icon" type="image/svg+xml" href="/favicon.svg">
 <link rel="stylesheet" href="style.css">
     <script src="https://cdn.tailwindcss.com"></script>
-    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
 </head>
 <body class="min-h-screen flex flex-col">
     <custom-navbar></custom-navbar>

 <link rel="icon" type="image/svg+xml" href="/favicon.svg">
 <link rel="stylesheet" href="style.css">
     <script src="https://cdn.tailwindcss.com"></script>
 </head>
 <body class="min-h-screen flex flex-col">
     <custom-navbar></custom-navbar>

index.html CHANGED Viewed

@@ -8,8 +8,7 @@
 <link rel="stylesheet" href="style.css">
     <script src="https://cdn.tailwindcss.com"></script>
     <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
-    <script src="https://unpkg.com/feather-icons"></script>
-    <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.waves.min.js"></script>
 </head>
 <body class="min-h-screen flex flex-col">
     <custom-navbar></custom-navbar>

 <link rel="stylesheet" href="style.css">
     <script src="https://cdn.tailwindcss.com"></script>
     <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.waves.min.js"></script>
 </head>
 <body class="min-h-screen flex flex-col">
     <custom-navbar></custom-navbar>

projects.html CHANGED Viewed

@@ -7,7 +7,6 @@
 <link rel="icon" type="image/svg+xml" href="/favicon.svg">
 <link rel="stylesheet" href="style.css">
     <script src="https://cdn.tailwindcss.com"></script>
-    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
 </head>
 <body class="min-h-screen flex flex-col">
     <custom-navbar></custom-navbar>

 <link rel="icon" type="image/svg+xml" href="/favicon.svg">
 <link rel="stylesheet" href="style.css">
     <script src="https://cdn.tailwindcss.com"></script>
 </head>
 <body class="min-h-screen flex flex-col">
     <custom-navbar></custom-navbar>

script.js CHANGED Viewed

@@ -1,13 +1,19 @@
 document.addEventListener('DOMContentLoaded', function() {
-    // Check if Feather Icons are loaded
     if (typeof feather !== 'undefined') {
         feather.replace();
     }
-    // Initialize Vanta.js if element exists
-    const vantaEl = document.getElementById('vanta-bg');
-    if (vantaEl && typeof VANTA !== 'undefined') {
         VANTA.WAVES({
             el: "#vanta-bg",
             mouseControls: true,
@@ -18,19 +24,9 @@ document.addEventListener('DOMContentLoaded', function() {
             scale: 1.00,
             scaleMobile: 1.00,
             color: 0x0,
-            shininess: 0.0
         });
     }
-    // Smooth fade-in for all pages
-    document.body.style.opacity = '0';
-    setTimeout(() => {
-        document.body.style.transition = 'opacity 0.5s ease-in';
-        document.body.style.opacity = '1';
-    }, 100);
-});
-// Error handling for missing components
-window.addEventListener('error', function(e) {
-    console.error('Error loading component:', e.message);
 });

 document.addEventListener('DOMContentLoaded', function() {
+    // Initialize feather icons
     if (typeof feather !== 'undefined') {
         feather.replace();
     }
+    // Smooth page transitions
+    document.body.style.opacity = '0';
+    setTimeout(() => {
+        document.body.style.transition = 'opacity 0.3s ease-in';
+        document.body.style.opacity = '1';
+    }, 50);
+    // Vanta.js background only on homepage
+    if (document.getElementById('vanta-bg') && typeof VANTA !== 'undefined') {
         VANTA.WAVES({
             el: "#vanta-bg",
             mouseControls: true,
             scale: 1.00,
             scaleMobile: 1.00,
             color: 0x0,
+            shininess: 50,
+            waveHeight: 20,
+            waveSpeed: 0.5
         });
     }
 });

style.css CHANGED Viewed

@@ -4,7 +4,11 @@ body {
     background-color: #f8fafc;
     margin: 0;
     padding: 0;
-    min-height: 100vh;
 }
 /* Animation for the hero section */
 @keyframes float {

     background-color: #f8fafc;
     margin: 0;
     padding: 0;
+}
+/* Ensure content takes full height */
+html, body {
+    height: 100%;
 }
 /* Animation for the hero section */
 @keyframes float {