Spaces:

bigpappic
/

the-ultimate-blank-canvas-app

Running

App Files Files Community

bigpappic commited on 18 days ago

Commit

13d0f88

verified ·

1 Parent(s): c16c4cc

I want you to build me a free website to go along with this app and then I want us to deploy it so that it's downloadable right now and able to use fully functional

Browse files

Files changed (4) hide show

components/footer.js +22 -69
index.html +36 -32
login.html +49 -0
style.css +121 -10

components/footer.js CHANGED Viewed

@@ -4,95 +4,48 @@ class CustomFooter extends HTMLElement {
     this.shadowRoot.innerHTML = `
       <style>
         footer {
-          background: white;
-          color: #4b5563;
-          padding: 2rem 1rem;
           text-align: center;
-          border-top: 1px solid #e5e7eb;
         }
         .footer-content {
           max-width: 1200px;
           margin: 0 auto;
-          display: grid;
-          grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-          gap: 2rem;
-          text-align: left;
-        }
-        .footer-section h3 {
-          font-weight: 600;
-          margin-bottom: 1rem;
-          color: #1f2937;
-        }
-        .footer-section ul {
-          list-style: none;
-          padding: 0;
-          margin: 0;
-        }
-        .footer-section li {
-          margin-bottom: 0.5rem;
-        }
-        .footer-section a {
-          color: #4b5563;
-          text-decoration: none;
-          transition: color 0.2s;
         }
-        .footer-section a:hover {
-          color: #000;
-        }
-        .social-links {
           display: flex;
-          gap: 1rem;
           justify-content: center;
-          margin-top: 2rem;
         }
-        .social-links a {
-          color: #6b7280;
-          transition: color 0.2s;
         }
-        .social-links a:hover {
-          color: #000;
         }
         .copyright {
-          margin-top: 2rem;
-          padding-top: 1rem;
-          border-top: 1px solid #e5e7eb;
           font-size: 0.875rem;
-        }
-        @media (max-width: 768px) {
-          .footer-content {
-            grid-template-columns: 1fr;
-            text-align: center;
-          }
-          .social-links {
-            justify-content: center;
-          }
         }
       </style>
       <footer>
         <div class="footer-content">
-          <div class="footer-section">
-            <h3>Simple Canvas</h3>
-            <p>Easy-to-use interface for your creative work.</p>
           </div>
-          <div class="footer-section">
-            <h3>Quick Links</h3>
-            <ul>
-              <li><a href="/create.html">New Project</a></li>
-              <li><a href="/projects.html">Recent Projects</a></li>
-              <li><a href="/help.html">Help Center</a></li>
-            </ul>
           </div>
         </div>
-<div class="social-links">
-          <a href="#"><i data-feather="twitter"></i></a>
-          <a href="#"><i data-feather="instagram"></i></a>
-          <a href="#"><i data-feather="facebook"></i></a>
-          <a href="#"><i data-feather="github"></i></a>
-          <a href="#"><i data-feather="linkedin"></i></a>
-        </div>
-        <div class="copyright">
-          &copy; ${new Date().getFullYear()} The Ultimate Blank Canvas App. All rights reserved.
-        </div>
       </footer>
     `;
   }

     this.shadowRoot.innerHTML = `
       <style>
         footer {
+          background: var(--secondary);
+          color: white;
+          padding: 2rem;
           text-align: center;
+          margin-top: 3rem;
         }
         .footer-content {
           max-width: 1200px;
           margin: 0 auto;
         }
+        .footer-links {
           display: flex;
           justify-content: center;
+          gap: 2rem;
+          margin-bottom: 1rem;
+          flex-wrap: wrap;
         }
+        .footer-links a {
+          color: white;
+          text-decoration: none;
         }
+        .footer-links a:hover {
+          text-decoration: underline;
         }
         .copyright {
+          margin-top: 1rem;
           font-size: 0.875rem;
+          opacity: 0.8;
         }
       </style>
       <footer>
         <div class="footer-content">
+          <div class="footer-links">
+            <a href="/about">About</a>
+            <a href="/privacy">Privacy</a>
+            <a href="/terms">Terms</a>
+            <a href="/contact">Contact</a>
           </div>
+          <div class="copyright">
+            &copy; ${new Date().getFullYear()} Staff Portal. All rights reserved.
           </div>
         </div>
       </footer>
     `;
   }

index.html CHANGED Viewed

@@ -3,52 +3,56 @@
 <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>
-    <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>
-    <main class="flex-grow flex items-center justify-center" id="vanta-bg">
-        <div class="text-center p-6 bg-white rounded-lg shadow-md max-w-md mx-4">
-            <h1 class="text-3xl font-bold mb-4 text-gray-800">Simple Canvas</h1>
-            <div class="flex flex-col gap-3">
-                <a href="/create.html" class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 transition">
-                    New Project
-                </a>
-                <a href="/projects.html" class="px-4 py-2 bg-gray-100 text-gray-800 rounded hover:bg-gray-200 transition">
-                    My Projects
-                </a>
-                <a href="/help.html" class="px-4 py-2 text-blue-600 hover:underline">
-                    Quick Help
-                </a>
             </div>
-</div>
     </main>
     <custom-footer></custom-footer>
     <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",
-            mouseControls: true,
-            touchControls: true,
-            gyroControls: false,
-            minHeight: 200.00,
-            minWidth: 200.00,
-            scale: 1.00,
-            scaleMobile: 1.00,
-            color: 0x0
-        })
     </script>
-<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
 </body>
 </html>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Staff Portal</title>
     <link rel="stylesheet" href="style.css">
     <script src="https://unpkg.com/feather-icons"></script>
 </head>
+<body>
     <custom-navbar></custom-navbar>
+    <main class="container">
+        <section class="hero">
+            <div class="hero-content">
+                <h1>Staff Management Portal</h1>
+                <p>Streamline your team's workflow with our powerful staff management tools.</p>
+                <div class="cta-buttons">
+                    <a href="#features" class="btn primary">Explore Features</a>
+                    <a href="/login" class="btn secondary">Login</a>
+                </div>
             </div>
+            <div class="hero-image">
+                <img src="http://static.photos/workspace/1024x576/1" alt="Workspace Dashboard">
+            </div>
+        </section>
+        <section id="features" class="features">
+            <h2>Key Features</h2>
+            <div class="features-grid">
+                <div class="feature-card">
+                    <i data-feather="check-square"></i>
+                    <h3>Task Management</h3>
+                    <p>Assign, track and complete tasks with ease.</p>
+                </div>
+                <div class="feature-card">
+                    <i data-feather="users"></i>
+                    <h3>Team Collaboration</h3>
+                    <p>Connect with your team members seamlessly.</p>
+                </div>
+                <div class="feature-card">
+                    <i data-feather="calendar"></i>
+                    <h3>Calendar Sync</h3>
+                    <p>Keep track of important events and deadlines.</p>
+                </div>
+            </div>
+        </section>
     </main>
     <custom-footer></custom-footer>
     <script src="components/navbar.js"></script>
     <script src="components/footer.js"></script>
     <script>
         feather.replace();
     </script>
 </body>
 </html>

	@@ -0,0 +1,49 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Login - Staff Portal</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="https://unpkg.com/feather-icons"></script>
+</head>
+<body>
+    <custom-navbar></custom-navbar>
+    <main class="container">
+        <div class="auth-container">
+            <div class="auth-card">
+                <h2>Login to Your Account</h2>
+                <form id="loginForm">
+                    <div class="form-group">
+                        <label for="email">Email</label>
+                        <input type="email" id="email" required placeholder="Enter your email">
+                    </div>
+                    <div class="form-group">
+                        <label for="password">Password</label>
+                        <input type="password" id="password" required placeholder="Enter your password">
+                    </div>
+                    <button type="submit" class="btn primary full-width">Login</button>
+                </form>
+                <div class="auth-footer">
+                    <p>Don't have an account? <a href="/register">Register</a></p>
+                    <p><a href="/forgot-password">Forgot password?</a></p>
+                </div>
+            </div>
+        </div>
+    </main>
+    <custom-footer></custom-footer>
+    <script src="components/navbar.js"></script>
+    <script src="components/footer.js"></script>
+    <script>
+        feather.replace();
+        document.getElementById('loginForm').addEventListener('submit', function(e) {
+            e.preventDefault();
+            // Handle login logic here
+            window.location.href = '/dashboard.html';
+        });
+    </script>
+</body>
+</html>

style.css CHANGED Viewed

@@ -1,17 +1,128 @@
-@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;
 }

+:root {
+    --primary: #2b6cb0;
+    --primary-light: #ebf8ff;
+    --secondary: #1a365d;
+    --white: #ffffff;
+    --gray-light: #f7fafc;
+    --gray: #e2e8f0;
+}
 body {
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    margin: 0;
+    padding: 0;
+    line-height: 1.6;
+    color: #2d3748;
+    background-color: var(--gray-light);
+}
+.container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 2rem;
+}
+.hero {
+    display: flex;
+    flex-direction: column-reverse;
+    gap: 2rem;
+    margin: 2rem 0;
+    padding: 2rem 0;
+}
+.hero-content {
+    flex: 1;
+}
+.hero-image {
+    flex: 1;
+    border-radius: 0.5rem;
+    overflow: hidden;
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+}
+.hero-image img {
+    width: 100%;
+    height: auto;
+    object-fit: cover;
+}
+h1 {
+    font-size: 2.5rem;
+    color: var(--secondary);
+    margin-bottom: 1rem;
+}
+h2 {
+    font-size: 2rem;
+    color: var(--secondary);
+    margin-bottom: 1.5rem;
+    text-align: center;
+}
+.btn {
+    display: inline-block;
+    padding: 0.75rem 1.5rem;
+    border-radius: 0.5rem;
+    font-weight: 600;
+    text-decoration: none;
+    transition: all 0.2s;
+    margin-right: 1rem;
+}
+.btn.primary {
+    background-color: var(--primary);
+    color: white;
+}
+.btn.primary:hover {
+    background-color: #2c5282;
+}
+.btn.secondary {
+    background-color: white;
+    color: var(--primary);
+    border: 1px solid var(--primary);
+}
+.btn.secondary:hover {
+    background-color: var(--primary-light);
+}
+.features {
+    margin: 4rem 0;
+}
+.features-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    gap: 2rem;
+    margin-top: 2rem;
+}
+.feature-card {
+    background: white;
+    padding: 2rem;
+    border-radius: 0.5rem;
+    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
+    transition: transform 0.2s;
+    text-align: center;
+}
+.feature-card:hover {
+    transform: translateY(-5px);
 }
+.feature-card i {
+    width: 48px;
+    height: 48px;
+    color: var(--primary);
+    margin-bottom: 1rem;
 }
+@media (min-width: 768px) {
+    .hero {
+        flex-direction: row;
+        align-items: center;
+    }
 }