Spaces:

Krydev32
/

pixelpass-portal

Running

App Files Files Community

Krydev32 commited on Nov 14, 2025

Commit

d2e555d

verified ·

1 Parent(s): c1a5f4d

the header is not okay, it's not done or aesthetic.

Browse files

As for the log-in/register, make a clickable button for it to appear or re-direct. Don't add it on the landing page.

Also make the log-in/register work

Files changed (8) hide show

README.md +7 -4
components/footer.js +126 -0
components/header.js +101 -0
index.html +77 -19
login.html +127 -0
register.html +177 -0
script.js +32 -0
style.css +26 -19

README.md CHANGED Viewed

@@ -1,10 +1,13 @@
 ---
-title: Pixelpass Portal
-emoji: 📈
 colorFrom: green
-colorTo: indigo
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: PixelPass Portal 🚪
 colorFrom: green
+colorTo: red
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

components/footer.js ADDED Viewed

	@@ -0,0 +1,126 @@

+class CustomFooter extends HTMLElement {
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                :host {
+                    display: block;
+                    width: 100%;
+                    background-color: #111827;
+                    color: #f3f4f6;
+                }
+                .footer-container {
+                    max-width: 1200px;
+                    margin: 0 auto;
+                    padding: 4rem 2rem 2rem;
+                    display: grid;
+                    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+                    gap: 2rem;
+                }
+                .footer-logo {
+                    font-size: 1.5rem;
+                    font-weight: 700;
+                    color: white;
+                    margin-bottom: 1rem;
+                    display: block;
+                }
+                .footer-description {
+                    color: #9ca3af;
+                    margin-bottom: 2rem;
+                    max-width: 300px;
+                }
+                .footer-links h3 {
+                    font-size: 1.125rem;
+                    font-weight: 600;
+                    margin-bottom: 1.5rem;
+                }
+                .footer-links ul {
+                    list-style: none;
+                    padding: 0;
+                    margin: 0;
+                }
+                .footer-links li {
+                    margin-bottom: 0.75rem;
+                }
+                .footer-links a {
+                    color: #9ca3af;
+                    text-decoration: none;
+                    transition: color 0.2s;
+                }
+                .footer-links a:hover {
+                    color: white;
+                }
+                .social-links {
+                    display: flex;
+                    gap: 1rem;
+                    margin-top: 1rem;
+                }
+                .social-link {
+                    width: 40px;
+                    height: 40px;
+                    border-radius: 50%;
+                    background-color: #1f2937;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    transition: background-color 0.2s;
+                }
+                .social-link:hover {
+                    background-color: #4b5563;
+                }
+                .copyright {
+                    text-align: center;
+                    padding: 2rem 0;
+                    border-top: 1px solid #374151;
+                    color: #9ca3af;
+                    font-size: 0.875rem;
+                }
+            </style>
+            <div class="footer-container">
+                <div class="footer-about">
+                    <a href="/" class="footer-logo">PixelPass</a>
+                    <p class="footer-description">Secure authentication solutions for modern businesses and individuals.</p>
+                    <div class="social-links">
+                        <a href="#" class="social-link"><i data-feather="twitter"></i></a>
+                        <a href="#" class="social-link"><i data-feather="facebook"></i></a>
+                        <a href="#" class="social-link"><i data-feather="instagram"></i></a>
+                        <a href="#" class="social-link"><i data-feather="linkedin"></i></a>
+                    </div>
+                </div>
+                <div class="footer-links">
+                    <h3>Product</h3>
+                    <ul>
+                        <li><a href="/features">Features</a></li>
+                        <li><a href="/pricing">Pricing</a></li>
+                        <li><a href="/api">API</a></li>
+                        <li><a href="/integrations">Integrations</a></li>
+                    </ul>
+                </div>
+                <div class="footer-links">
+                    <h3>Company</h3>
+                    <ul>
+                        <li><a href="/about">About</a></li>
+                        <li><a href="/careers">Careers</a></li>
+                        <li><a href="/blog">Blog</a></li>
+                        <li><a href="/press">Press</a></li>
+                    </ul>
+                </div>
+                <div class="footer-links">
+                    <h3>Resources</h3>
+                    <ul>
+                        <li><a href="/documentation">Documentation</a></li>
+                        <li><a href="/support">Support</a></li>
+                        <li><a href="/community">Community</a></li>
+                        <li><a href="/status">Status</a></li>
+                    </ul>
+                </div>
+            </div>
+            <div class="copyright">
+                &copy; ${new Date().getFullYear()} PixelPass Portal. All rights reserved.
+            </div>
+            <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+        `;
+    }
+}
+customElements.define('custom-footer', CustomFooter);

components/header.js ADDED Viewed

	@@ -0,0 +1,101 @@

+class CustomHeader extends HTMLElement {
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                :host {
+                    display: block;
+                    width: 100%;
+                }
+                nav {
+                    background-color: white;
+                    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+                }
+                .nav-container {
+                    max-width: 1200px;
+                    margin: 0 auto;
+                    padding: 1rem 2rem;
+                    display: flex;
+                    justify-content: space-between;
+                    align-items: center;
+                }
+                .logo {
+                    font-size: 1.5rem;
+                    font-weight: 700;
+                    color: #6366f1;
+                    text-decoration: none;
+                }
+                .nav-links {
+                    display: flex;
+                    gap: 2rem;
+                    align-items: center;
+                }
+                .nav-link {
+                    color: #4b5563;
+                    text-decoration: none;
+                    font-weight: 500;
+                    transition: color 0.2s;
+                }
+                .nav-link:hover {
+                    color: #6366f1;
+                }
+                .auth-buttons {
+                    display: flex;
+                    gap: 1rem;
+                }
+                .login-btn {
+                    padding: 0.5rem 1.5rem;
+                    border-radius: 0.375rem;
+                    font-weight: 500;
+                    transition: all 0.2s;
+                }
+                .signup-btn {
+                    padding: 0.5rem 1.5rem;
+                    border-radius: 0.375rem;
+                    font-weight: 500;
+                    transition: all 0.2s;
+                    background-color: #6366f1;
+                    color: white;
+                }
+                .signup-btn:hover {
+                    background-color: #4f46e5;
+                }
+                .mobile-menu-btn {
+                    display: none;
+                    background: none;
+                    border: none;
+                    cursor: pointer;
+                }
+                @media (max-width: 768px) {
+                    .nav-links, .auth-buttons {
+                        display: none;
+                    }
+                    .mobile-menu-btn {
+                        display: block;
+                    }
+                }
+            </style>
+            <nav>
+                <div class="nav-container">
+                    <a href="/" class="logo">PixelPass</a>
+                    <div class="nav-links">
+                        <a href="/features" class="nav-link">Features</a>
+                        <a href="/pricing" class="nav-link">Pricing</a>
+                        <a href="/about" class="nav-link">About</a>
+                        <a href="/contact" class="nav-link">Contact</a>
+                    </div>
+                    <div class="auth-buttons">
+                        <a href="/login" class="login-btn">Log In</a>
+                        <a href="/register" class="signup-btn">Sign Up</a>
+                    </div>
+                    <button class="mobile-menu-btn">
+                        <i data-feather="menu"></i>
+                    </button>
+                </div>
+            </nav>
+            <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+        `;
+    }
+}
+customElements.define('custom-header', CustomHeader);

index.html CHANGED Viewed

@@ -1,19 +1,77 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>PixelPass Portal</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>
+      tailwind.config = {
+        theme: {
+          extend: {
+            colors: {
+              primary: '#6366f1',
+              secondary: '#a855f7',
+            }
+          }
+        }
+      }
+    </script>
+</head>
+<body class="bg-gray-50 min-h-screen">
+    <custom-header></custom-header>
+    <main class="container mx-auto px-4 py-12">
+        <section class="hero-section bg-gradient-to-r from-primary-500 to-secondary-500 rounded-2xl p-8 text-white">
+            <div class="max-w-3xl mx-auto text-center">
+                <h1 class="text-4xl md:text-5xl font-bold mb-6">Welcome to PixelPass Portal</h1>
+                <p class="text-xl mb-8">Your gateway to seamless digital experiences</p>
+                <div class="flex flex-wrap justify-center gap-4">
+                    <a href="/login" class="bg-white text-primary-600 px-8 py-3 rounded-full font-semibold hover:bg-gray-100 transition-all">Log In</a>
+                    <a href="/register" class="border-2 border-white text-white px-8 py-3 rounded-full font-semibold hover:bg-white hover:bg-opacity-10 transition-all">Register</a>
+                </div>
+            </div>
+        </section>
+        <section class="features-section mt-16">
+            <h2 class="text-3xl font-bold text-center mb-12">Why Choose PixelPass?</h2>
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
+                <div class="feature-card bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition-all">
+                    <div class="w-14 h-14 bg-primary-100 rounded-full flex items-center justify-center mb-4">
+                        <i data-feather="lock" class="text-primary-600"></i>
+                    </div>
+                    <h3 class="text-xl font-semibold mb-2">Secure Authentication</h3>
+                    <p class="text-gray-600">Military-grade encryption protects your data at all times</p>
+                </div>
+                <div class="feature-card bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition-all">
+                    <div class="w-14 h-14 bg-primary-100 rounded-full flex items-center justify-center mb-4">
+                        <i data-feather="zap" class="text-primary-600"></i>
+                    </div>
+                    <h3 class="text-xl font-semibold mb-2">Lightning Fast</h3>
+                    <p class="text-gray-600">Experience blazing fast login and registration processes</p>
+                </div>
+                <div class="feature-card bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition-all">
+                    <div class="w-14 h-14 bg-primary-100 rounded-full flex items-center justify-center mb-4">
+                        <i data-feather="smartphone" class="text-primary-600"></i>
+                    </div>
+                    <h3 class="text-xl font-semibold mb-2">Mobile Friendly</h3>
+                    <p class="text-gray-600">Optimized for all devices from desktop to mobile</p>
+                </div>
+            </div>
+        </section>
+    </main>
+    <custom-footer></custom-footer>
+    <script src="components/header.js"></script>
+    <script src="components/footer.js"></script>
+    <script src="script.js"></script>
+    <script>
+        feather.replace();
+    </script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>

	@@ -0,0 +1,127 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Login | PixelPass Portal</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>
+      tailwind.config = {
+        theme: {
+          extend: {
+            colors: {
+              primary: '#6366f1',
+              secondary: '#a855f7',
+            }
+          }
+        }
+      }
+    </script>
+</head>
+<body class="bg-gray-50 min-h-screen">
+    <custom-header></custom-header>
+    <main class="container mx-auto px-4 py-12 flex items-center justify-center">
+        <div class="w-full max-w-md bg-white rounded-xl shadow-md overflow-hidden p-8">
+            <div class="text-center mb-8">
+                <h1 class="text-3xl font-bold text-gray-900">Welcome back</h1>
+                <p class="text-gray-600 mt-2">Log in to your PixelPass account</p>
+            </div>
+            <form id="loginForm" class="space-y-6">
+                <div>
+                    <label for="email" class="block text-sm font-medium text-gray-700 mb-1">Email</label>
+                    <input type="email" id="email" name="email" required
+                           class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500 transition-all">
+                </div>
+                <div>
+                    <div class="flex justify-between items-center mb-1">
+                        <label for="password" class="block text-sm font-medium text-gray-700">Password</label>
+                        <a href="/forgot-password" class="text-sm text-primary-600 hover:text-primary-500">Forgot password?</a>
+                    </div>
+                    <input type="password" id="password" name="password" required
+                           class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500 transition-all">
+                </div>
+                <div class="flex items-center">
+                    <input id="remember-me" name="remember-me" type="checkbox"
+                           class="h-4 w-4 text-primary-600 focus:ring-primary-500 border-gray-300 rounded">
+                    <label for="remember-me" class="ml-2 block text-sm text-gray-700">Remember me</label>
+                </div>
+                <button type="submit"
+                        class="w-full bg-primary-600 hover:bg-primary-700 text-white font-medium py-3 px-4 rounded-lg transition-all flex items-center justify-center">
+                    <span id="loginBtnText">Log In</span>
+                    <div id="loginSpinner" class="ml-2 hidden">
+                        <div class="animate-spin rounded-full h-5 w-5 border-b-2 border-white"></div>
+                    </div>
+                </button>
+            </form>
+            <div class="mt-6 text-center">
+                <p class="text-gray-600">Don't have an account? <a href="/register" class="text-primary-600 hover:text-primary-500 font-medium">Sign up</a></p>
+            </div>
+            <div class="relative mt-8">
+                <div class="absolute inset-0 flex items-center">
+                    <div class="w-full border-t border-gray-300"></div>
+                </div>
+                <div class="relative flex justify-center text-sm">
+                    <span class="px-2 bg-white text-gray-500">Or continue with</span>
+                </div>
+            </div>
+            <div class="mt-6 grid grid-cols-2 gap-3">
+                <a href="#" class="w-full inline-flex justify-center py-2 px-4 border border-gray-300 rounded-lg bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">
+                    <i data-feather="github" class="h-5 w-5"></i>
+                </a>
+                <a href="#" class="w-full inline-flex justify-center py-2 px-4 border border-gray-300 rounded-lg bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">
+                    <i data-feather="google" class="h-5 w-5"></i>
+                </a>
+            </div>
+        </div>
+    </main>
+    <custom-footer></custom-footer>
+    <script src="components/header.js"></script>
+    <script src="components/footer.js"></script>
+    <script src="script.js"></script>
+    <script>
+        feather.replace();
+        document.getElementById('loginForm').addEventListener('submit', async function(e) {
+            e.preventDefault();
+            const email = document.getElementById('email').value;
+            const password = document.getElementById('password').value;
+            // Show loading state
+            document.getElementById('loginBtnText').textContent = 'Logging in...';
+            document.getElementById('loginSpinner').classList.remove('hidden');
+            // Simulate API call
+            try {
+                const result = await simulateLogin(email, password);
+                if (result.success) {
+                    // Redirect to dashboard on success
+                    window.location.href = '/dashboard';
+                } else {
+                    alert('Invalid email or password');
+                }
+            } catch (error) {
+                alert('Login failed. Please try again.');
+            } finally {
+                // Reset button state
+                document.getElementById('loginBtnText').textContent = 'Log In';
+                document.getElementById('loginSpinner').classList.add('hidden');
+            }
+        });
+    </script>
+</body>
+</html>

	@@ -0,0 +1,177 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Register | PixelPass Portal</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>
+      tailwind.config = {
+        theme: {
+          extend: {
+            colors: {
+              primary: '#6366f1',
+              secondary: '#a855f7',
+            }
+          }
+        }
+      }
+    </script>
+</head>
+<body class="bg-gray-50 min-h-screen">
+    <custom-header></custom-header>
+    <main class="container mx-auto px-4 py-12 flex items-center justify-center">
+        <div class="w-full max-w-md bg-white rounded-xl shadow-md overflow-hidden p-8">
+            <div class="text-center mb-8">
+                <h1 class="text-3xl font-bold text-gray-900">Create your account</h1>
+                <p class="text-gray-600 mt-2">Join the PixelPass community</p>
+            </div>
+            <form id="registerForm" class="space-y-6">
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                    <div>
+                        <label for="firstName" class="block text-sm font-medium text-gray-700 mb-1">First Name</label>
+                        <input type="text" id="firstName" name="firstName" required
+                               class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500 transition-all">
+                    </div>
+                    <div>
+                        <label for="lastName" class="block text-sm font-medium text-gray-700 mb-1">Last Name</label>
+                        <input type="text" id="lastName" name="lastName" required
+                               class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500 transition-all">
+                    </div>
+                </div>
+                <div>
+                    <label for="email" class="block text-sm font-medium text-gray-700 mb-1">Email</label>
+                    <input type="email" id="email" name="email" required
+                           class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500 transition-all">
+                </div>
+                <div>
+                    <label for="password" class="block text-sm font-medium text-gray-700 mb-1">Password</label>
+                    <input type="password" id="password" name="password" required
+                           class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500 transition-all">
+                    <p class="mt-1 text-xs text-gray-500">Must be at least 8 characters</p>
+                </div>
+                <div>
+                    <label for="confirmPassword" class="block text-sm font-medium text-gray-700 mb-1">Confirm Password</label>
+                    <input type="password" id="confirmPassword" name="confirmPassword" required
+                           class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500 transition-all">
+                </div>
+                <div class="flex items-start">
+                    <div class="flex items-center h-5">
+                        <input id="terms" name="terms" type="checkbox" required
+                               class="h-4 w-4 text-primary-600 focus:ring-primary-500 border-gray-300 rounded">
+                    </div>
+                    <div class="ml-3 text-sm">
+                        <label for="terms" class="text-gray-700">I agree to the <a href="/terms" class="text-primary-600 hover:text-primary-500">Terms of Service</a> and <a href="/privacy" class="text-primary-600 hover:text-primary-500">Privacy Policy</a></label>
+                    </div>
+                </div>
+                <button type="submit"
+                        class="w-full bg-primary-600 hover:bg-primary-700 text-white font-medium py-3 px-4 rounded-lg transition-all flex items-center justify-center">
+                    <span id="registerBtnText">Create Account</span>
+                    <div id="registerSpinner" class="ml-2 hidden">
+                        <div class="animate-spin rounded-full h-5 w-5 border-b-2 border-white"></div>
+                    </div>
+                </button>
+            </form>
+            <div class="mt-6 text-center">
+                <p class="text-gray-600">Already have an account? <a href="/login" class="text-primary-600 hover:text-primary-500 font-medium">Log in</a></p>
+            </div>
+            <div class="relative mt-8">
+                <div class="absolute inset-0 flex items-center">
+                    <div class="w-full border-t border-gray-300"></div>
+                </div>
+                <div class="relative flex justify-center text-sm">
+                    <span class="px-2 bg-white text-gray-500">Or sign up with</span>
+                </div>
+            </div>
+            <div class="mt-6 grid grid-cols-2 gap-3">
+                <a href="#" class="w-full inline-flex justify-center py-2 px-4 border border-gray-300 rounded-lg bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">
+                    <i data-feather="github" class="h-5 w-5"></i>
+                </a>
+                <a href="#" class="w-full inline-flex justify-center py-2 px-4 border border-gray-300 rounded-lg bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">
+                    <i data-feather="google" class="h-5 w-5"></i>
+                </a>
+            </div>
+        </div>
+    </main>
+    <custom-footer></custom-footer>
+    <script src="components/header.js"></script>
+    <script src="components/footer.js"></script>
+    <script src="script.js"></script>
+    <script>
+        feather.replace();
+        document.getElementById('registerForm').addEventListener('submit', async function(e) {
+            e.preventDefault();
+            const firstName = document.getElementById('firstName').value;
+            const lastName = document.getElementById('lastName').value;
+            const email = document.getElementById('email').value;
+            const password = document.getElementById('password').value;
+            const confirmPassword = document.getElementById('confirmPassword').value;
+            // Validate password match
+            if (password !== confirmPassword) {
+                alert('Passwords do not match');
+                return;
+            }
+            // Validate password length
+            if (password.length < 8) {
+                alert('Password must be at least 8 characters');
+                return;
+            }
+            // Validate email format
+            if (!validateEmail(email)) {
+                alert('Please enter a valid email address');
+                return;
+            }
+            // Show loading state
+            document.getElementById('registerBtnText').textContent = 'Creating account...';
+            document.getElementById('registerSpinner').classList.remove('hidden');
+            // Prepare user data
+            const userData = {
+                firstName,
+                lastName,
+                email,
+                password
+            };
+            // Simulate API call
+            try {
+                const result = await simulateRegister(userData);
+                if (result.success) {
+                    // Redirect to success page
+                    window.location.href = '/register-success';
+                } else {
+                    alert('Registration failed. Please try again.');
+                }
+            } catch (error) {
+                alert('An error occurred during registration. Please try again.');
+            } finally {
+                // Reset button state
+                document.getElementById('registerBtnText').textContent = 'Create Account';
+                document.getElementById('registerSpinner').classList.add('hidden');
+            }
+        });
+    </script>
+</body>
+</html>

script.js ADDED Viewed

	@@ -0,0 +1,32 @@

+// Auth simulation functions
+function simulateLogin(email, password) {
+    return new Promise((resolve) => {
+        setTimeout(() => {
+            resolve({ success: true, token: 'simulated-jwt-token' });
+        }, 1000);
+    });
+}
+function simulateRegister(userData) {
+    return new Promise((resolve) => {
+        setTimeout(() => {
+            resolve({ success: true, user: userData });
+        }, 1500);
+    });
+}
+// Form validation helper
+function validateEmail(email) {
+    const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    return re.test(email);
+}
+function validatePassword(password) {
+    return password.length >= 8;
+}
+// Theme toggle (for future implementation)
+function toggleTheme() {
+    document.documentElement.classList.toggle('dark');
+    localStorage.setItem('theme', document.documentElement.classList.contains('dark') ? 'dark' : 'light');
+}

style.css CHANGED Viewed

@@ -1,28 +1,35 @@
-body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 }
-h1 {
-	font-size: 16px;
-	margin-top: 0;
 }
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
 }
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
 }
-.card p:last-child {
-	margin-bottom: 0;
 }

+/* Custom animations */
+@keyframes fadeIn {
+    from { opacity: 0; }
+    to { opacity: 1; }
 }
+.hero-section {
+    animation: fadeIn 0.8s ease-out forwards;
 }
+.feature-card {
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
 }
+.feature-card:hover {
+    transform: translateY(-5px);
 }
+/* Custom scrollbar */
+::-webkit-scrollbar {
+    width: 8px;
 }
+::-webkit-scrollbar-track {
+    background: #f1f1f1;
+}
+::-webkit-scrollbar-thumb {
+    background: #a855f7;
+    border-radius: 4px;
+}
+::-webkit-scrollbar-thumb:hover {
+    background: #7e22ce;
+}