Spaces:

secutorpro
/

comsync-pro-team-connect-hub

Running

App Files Files Community

secutorpro commited on Dec 23, 2025

Commit

b1f24ee

verified ·

1 Parent(s): c27b0a6

systeme gihub et mcp supabase

Browse files

Files changed (2) hide show

components/navbar.js +56 -1
login.html +188 -0

components/navbar.js CHANGED Viewed

@@ -53,11 +53,66 @@ class CustomNavbar extends HTMLElement {
         .nav-link.active i {
           color: #60a5fa;
         }
 @media (max-width: 768px) {
           .nav-container {
             flex-direction: column;
             gap: 1rem;
-          }
           .nav-links {
             flex-wrap: wrap;
             justify-content: center;

         .nav-link.active i {
           color: #60a5fa;
         }
+        .user-menu {
+          position: relative;
+          display: flex;
+          align-items: center;
+          gap: 0.75rem;
+          cursor: pointer;
+        }
+        .avatar {
+          width: 32px;
+          height: 32px;
+          border-radius: 50%;
+          background: #60a5fa;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          font-weight: 600;
+          font-size: 0.875rem;
+        }
+        .user-dropdown {
+          position: absolute;
+          top: 100%;
+          right: 0;
+          background: rgba(31, 41, 55, 0.95);
+          backdrop-filter: blur(10px);
+          border: 1px solid rgba(75, 85, 99, 0.5);
+          border-radius: 0.5rem;
+          width: 200px;
+          padding: 0.5rem;
+          margin-top: 0.5rem;
+          box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
+          z-index: 50;
+          display: none;
+        }
+        .user-dropdown.show {
+          display: block;
+        }
+        .dropdown-item {
+          display: flex;
+          align-items: center;
+          gap: 0.75rem;
+          padding: 0.75rem;
+          border-radius: 0.375rem;
+          color: #9ca3af;
+          text-decoration: none;
+          font-size: 0.875rem;
+        }
+        .dropdown-item:hover {
+          background: rgba(55, 65, 81, 0.5);
+          color: #fff;
+        }
+        .dropdown-divider {
+          height: 1px;
+          background: rgba(75, 85, 99, 0.5);
+          margin: 0.5rem 0;
+        }
 @media (max-width: 768px) {
           .nav-container {
             flex-direction: column;
             gap: 1rem;
+}
           .nav-links {
             flex-wrap: wrap;
             justify-content: center;

	@@ -0,0 +1,188 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Login - ComSync Pro</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/feather-icons"></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.net.min.js"></script>
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+        body {
+            font-family: 'Inter', sans-serif;
+        }
+        .gradient-border {
+            background: linear-gradient(135deg, #667eea, #764ba2);
+            padding: 2px;
+            border-radius: 12px;
+        }
+    </style>
+</head>
+<body class="bg-gray-900 text-gray-100">
+    <div id="vanta-bg" class="fixed inset-0 z-0"></div>
+    <div class="relative z-10 min-h-screen flex items-center justify-center p-4">
+        <div class="gradient-border w-full max-w-md">
+            <div class="bg-gray-800 rounded-xl p-8 border border-gray-700/50 shadow-2xl">
+                <div class="text-center mb-8">
+                    <div class="flex items-center justify-center space-x-3 mb-4">
+                        <i data-feather="radio" class="w-10 h-10 text-blue-400"></i>
+                        <h1 class="text-3xl font-bold bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent">ComSync Pro</h1>
+                    </div>
+                    <p class="text-gray-400">Sign in to access your dashboard</p>
+                </div>
+                <form id="login-form" class="space-y-6">
+                    <div>
+                        <label class="block text-sm font-medium mb-2">Email</label>
+                        <input
+                            type="email"
+                            id="email"
+                            class="w-full bg-gray-700/50 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                            placeholder="your.email@example.com"
+                            required
+                        >
+                    </div>
+                    <div>
+                        <div class="flex justify-between items-center mb-2">
+                            <label class="block text-sm font-medium">Password</label>
+                            <a href="#" class="text-sm text-blue-400 hover:text-blue-300">Forgot password?</a>
+                        </div>
+                        <input
+                            type="password"
+                            id="password"
+                            class="w-full bg-gray-700/50 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                            placeholder="••••••••"
+                            required
+                        >
+                    </div>
+                    <div class="flex items-center">
+                        <input
+                            type="checkbox"
+                            id="remember"
+                            class="rounded bg-gray-700 border-gray-600 text-blue-500 focus:ring-blue-500"
+                        >
+                        <label for="remember" class="ml-2 text-sm">Remember me</label>
+                    </div>
+                    <button
+                        type="submit"
+                        class="w-full bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 py-3 rounded-lg font-medium transition-all"
+                    >
+                        Sign In
+                    </button>
+                </form>
+                <div class="my-6 flex items-center">
+                    <div class="flex-grow border-t border-gray-700"></div>
+                    <span class="mx-4 text-gray-500 text-sm">OR</span>
+                    <div class="flex-grow border-t border-gray-700"></div>
+                </div>
+                <div class="space-y-4">
+                    <button
+                        id="github-login"
+                        class="w-full flex items-center justify-center space-x-2 bg-gray-700 hover:bg-gray-600 py-3 rounded-lg transition-colors"
+                    >
+                        <i data-feather="github" class="w-5 h-5"></i>
+                        <span>Continue with GitHub</span>
+                    </button>
+                    <button
+                        id="google-login"
+                        class="w-full flex items-center justify-center space-x-2 bg-gray-700 hover:bg-gray-600 py-3 rounded-lg transition-colors"
+                    >
+                        <i data-feather="smartphone" class="w-5 h-5"></i>
+                        <span>Continue with Google</span>
+                    </button>
+                </div>
+                <p class="text-center text-gray-400 text-sm mt-8">
+                    Don't have an account?
+                    <a href="#" class="text-blue-400 hover:text-blue-300">Sign up</a>
+                </p>
+            </div>
+        </div>
+    </div>
+    <script>
+        // Initialize Vanta.js background
+        VANTA.NET({
+            el: "#vanta-bg",
+            mouseControls: true,
+            touchControls: true,
+            gyroControls: false,
+            minHeight: 200.00,
+            minWidth: 200.00,
+            scale: 1.00,
+            scaleMobile: 1.00,
+            color: 0x3a82ff,
+            backgroundColor: 0x111827,
+            points: 10.00,
+            maxDistance: 22.00,
+            spacing: 18.00
+        });
+        // Initialize Feather Icons
+        feather.replace();
+        // Form submission
+        document.getElementById('login-form').addEventListener('submit', function(e) {
+            e.preventDefault();
+            const email = document.getElementById('email').value;
+            const password = document.getElementById('password').value;
+            // Simulate login process
+            console.log('Logging in with:', email, password);
+            // Show loading state
+            const submitBtn = this.querySelector('button[type="submit"]');
+            const originalText = submitBtn.textContent;
+            submitBtn.innerHTML = '<i data-feather="loader" class="w-5 h-5 animate-spin"></i>';
+            feather.replace();
+            // Simulate API call
+            setTimeout(() => {
+                submitBtn.textContent = originalText;
+                feather.replace();
+                // Redirect to dashboard on success
+                window.location.href = '/';
+            }, 1500);
+        });
+        // GitHub login
+        document.getElementById('github-login').addEventListener('click', function() {
+            const btn = this;
+            const originalContent = btn.innerHTML;
+            btn.innerHTML = '<i data-feather="loader" class="w-5 h-5 animate-spin"></i>';
+            feather.replace();
+            // Simulate OAuth flow
+            setTimeout(() => {
+                btn.innerHTML = originalContent;
+                feather.replace();
+                window.location.href = '/';
+            }, 1500);
+        });
+        // Google login
+        document.getElementById('google-login').addEventListener('click', function() {
+            const btn = this;
+            const originalContent = btn.innerHTML;
+            btn.innerHTML = '<i data-feather="loader" class="w-5 h-5 animate-spin"></i>';
+            feather.replace();
+            // Simulate OAuth flow
+            setTimeout(() => {
+                btn.innerHTML = originalContent;
+                feather.replace();
+                window.location.href = '/';
+            }, 1500);
+        });
+    </script>
+</body>
+</html>