Spaces:

bigpappic
/

the-ultimate-blank-canvas-app

Running

App Files Files Community

bigpappic commited on 17 days ago

Commit

a2050be

verified ·

1 Parent(s): 1f36718

Let's deploy this

Browse files

Files changed (6) hide show

components/navbar.js +5 -6
index.html +7 -6
projects.html +2 -2
script.js +12 -25
style.css +7 -14
vercel.json +25 -0

components/navbar.js CHANGED Viewed

@@ -68,15 +68,14 @@ ul {
       <nav>
         <a href="/" class="logo">
           <i data-feather="pen-tool" class="logo-icon"></i>
-          <span>Staff Portal</span>
 </a>
         <ul>
           <li><a href="/" class="active"><i data-feather="home"></i> Dashboard</a></li>
-          <li><a href="/tasks"><i data-feather="check-square"></i> Tasks</a></li>
-          <li><a href="/messages"><i data-feather="mail"></i> Messages</a></li>
-          <li><a href="/team"><i data-feather="users"></i> Team</a></li>
-          <li><a href="/calendar"><i data-feather="calendar"></i> Calendar</a></li>
-        </ul>
 </nav>
     `;
   }

       <nav>
         <a href="/" class="logo">
           <i data-feather="pen-tool" class="logo-icon"></i>
+          <span>Simple Canvas</span>
 </a>
         <ul>
           <li><a href="/" class="active"><i data-feather="home"></i> Dashboard</a></li>
+          <li><a href="/create.html"><i data-feather="plus-square"></i> Create</a></li>
+          <li><a href="/projects.html"><i data-feather="folder"></i> Projects</a></li>
+          <li><a href="/help.html"><i data-feather="help-circle"></i> Help</a></li>
+</ul>
 </nav>
     `;
   }

index.html CHANGED Viewed

@@ -3,8 +3,8 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>The Ultimate Blank Canvas</title>
-    <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>
@@ -34,10 +34,8 @@
     <script src="components/navbar.js"></script>
     <script src="components/footer.js"></script>
-    <script src="components/auth-modal.js"></script>
     <script src="script.js"></script>
-    <auth-modal></auth-modal>
-<script>
         feather.replace();
         VANTA.WAVES({
             el: "#vanta-bg",
@@ -51,6 +49,9 @@
             color: 0x0
         })
     </script>
-    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
 </body>
 </html>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Simple Canvas</title>
+<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="components/navbar.js"></script>
     <script src="components/footer.js"></script>
     <script src="script.js"></script>
+    <script>
         feather.replace();
         VANTA.WAVES({
             el: "#vanta-bg",
             color: 0x0
         })
     </script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script>
+        feather.replace();
+    </script>
 </body>
 </html>

projects.html CHANGED Viewed

@@ -13,8 +13,8 @@
     <main class="flex-grow p-6">
         <div class="max-w-3xl mx-auto">
             <h1 class="text-2xl font-bold mb-6">My Projects</h1>
-            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4" id="projects-container">
-<div class="bg-white p-4 rounded-lg shadow border hover:shadow-md transition">
                     <h3 class="font-medium mb-2">Project 1</h3>
                     <p class="text-sm text-gray-600 mb-2">Last edited: Today</p>
                     <a href="#" class="text-blue-600 text-sm">Open →</a>

     <main class="flex-grow p-6">
         <div class="max-w-3xl mx-auto">
             <h1 class="text-2xl font-bold mb-6">My Projects</h1>
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                <div class="bg-white p-4 rounded-lg shadow border hover:shadow-md transition">
                     <h3 class="font-medium mb-2">Project 1</h3>
                     <p class="text-sm text-gray-600 mb-2">Last edited: Today</p>
                     <a href="#" class="text-blue-600 text-sm">Open →</a>

script.js CHANGED Viewed

@@ -1,34 +1,21 @@
-// Initialize tooltips
 document.addEventListener('DOMContentLoaded', function() {
-    // Any shared JavaScript functionality can go here
-    console.log('The Ultimate Blank Canvas App is ready!');
-    // Example: Add a simple fade-in animation to all pages
     document.body.style.opacity = '0';
     setTimeout(() => {
-        document.body.style.transition = 'opacity 0.5s ease-in';
         document.body.style.opacity = '1';
     }, 100);
-    // Load projects if on projects page
-    if (window.location.pathname.includes('projects.html')) {
-        loadProjects();
-    }
 });
-async function loadProjects() {
-    try {
-        const response = await axios.get('https://jsonplaceholder.typicode.com/posts?_limit=6');
-        const projectsContainer = document.getElementById('projects-container');
-        projectsContainer.innerHTML = response.data.map(project => `
-            <div class="bg-white p-4 rounded-lg shadow border hover:shadow-md transition">
-                <h3 class="font-medium mb-2">${project.title}</h3>
-                <p class="text-sm text-gray-600 mb-2">Created: ${new Date().toLocaleDateString()}</p>
-                <a href="#" class="text-blue-600 text-sm">Open →</a>
-            </div>
-        `).join('');
-    } catch (error) {
-        console.error('Failed to load projects:', error);
-    }
-}

 document.addEventListener('DOMContentLoaded', function() {
+    // Initialize all pages with common functionality
+    feather.replace();
+    // Smooth transitions
     document.body.style.opacity = '0';
     setTimeout(() => {
+        document.body.style.transition = 'opacity 0.3s ease-in';
         document.body.style.opacity = '1';
     }, 100);
+    // Handle active nav links
+    const currentPath = window.location.pathname;
+    const navLinks = document.querySelectorAll('custom-navbar a');
+    navLinks.forEach(link => {
+        if (link.getAttribute('href') === currentPath) {
+            link.classList.add('active');
+        }
+    });
 });

style.css CHANGED Viewed

@@ -1,26 +1,19 @@
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
 body {
     font-family: 'Inter', sans-serif;
-    background-color: #f8fafc;
 }
 /* Animation for the hero section */
 @keyframes float {
     0% { transform: translateY(0px); }
     50% { transform: translateY(-15px); }
     100% { transform: translateY(0px); }
 }
 .floating {
     animation: float 6s ease-in-out infinite;
-}
-/* Responsive adjustments */
-@media (max-width: 640px) {
-    #vanta-bg {
-        background-size: cover;
-    }
-    .text-center {
-        padding: 1rem;
-    }
-}

 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
 body {
     font-family: 'Inter', sans-serif;
+    margin: 0;
+    padding: 0;
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
 }
 /* Animation for the hero section */
 @keyframes float {
     0% { transform: translateY(0px); }
     50% { transform: translateY(-15px); }
     100% { transform: translateY(0px); }
 }
 .floating {
     animation: float 6s ease-in-out infinite;
+}

vercel.json ADDED Viewed

	@@ -0,0 +1,25 @@

+```json
+{
+  "version": 2,
+  "builds": [
+    {
+      "src": "*.html",
+      "use": "@vercel/static"
+    },
+    {
+      "src": "assets/*",
+      "use": "@vercel/static"
+    }
+  ],
+  "routes": [
+    {
+      "src": "/assets/(.*)",
+      "dest": "/assets/$1"
+    },
+    {
+      "src": "/(.*)",
+      "dest": "/index.html"
+    }
+  ]
+}
+```