create cool login page

README.md

@@ -1,10 +1,13 @@
 ---
-title: Authflow Groove
-emoji: 📊
-colorFrom: red
-colorTo: blue
+title: AuthFlow Groove 🎵
+colorFrom: purple
+colorTo: purple
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

index.html

@@ -1,19 +1,112 @@
-<!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" class="h-full">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>AuthFlow Groove | Login</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: {
+                50: '#f0f9ff',
+                100: '#e0f2fe',
+                500: '#3b82f6',
+                700: '#1d4ed8',
+              },
+              secondary: {
+                50: '#f0fdf4',
+                100: '#dcfce7',
+                500: '#22c55e',
+                700: '#15803d',
+              }
+            }
+          }
+        }
+      }
+    </script>
+</head>
+<body class="min-h-full bg-gradient-to-br from-primary-50 to-secondary-50 flex items-center justify-center p-4">
+    <main class="w-full max-w-md">
+        <div class="bg-white rounded-2xl shadow-xl overflow-hidden">
+            <!-- Auth Header -->
+            <div class="bg-gradient-to-r from-primary-500 to-secondary-500 p-8 text-center">
+                <i data-feather="lock" class="w-12 h-12 mx-auto text-white"></i>
+                <h1 class="text-2xl font-bold text-white mt-4">Welcome Back</h1>
+                <p class="text-primary-100 mt-2">Sign in to your account</p>
+            </div>
+
+            <!-- Auth Form -->
+            <form class="p-8 space-y-6">
+                <div class="space-y-4">
+                    <div class="relative">
+                        <i data-feather="mail" class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
+                        <input 
+                            type="email" 
+                            placeholder="Email Address" 
+                            class="w-full pl-10 pr-4 py-3 rounded-lg border border-gray-200 focus:border-primary-500 focus:ring-2 focus:ring-primary-100 outline-none transition"
+                            required
+                        >
+                    </div>
+                    <div class="relative">
+                        <i data-feather="key" class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
+                        <input 
+                            type="password" 
+                            placeholder="Password" 
+                            class="w-full pl-10 pr-4 py-3 rounded-lg border border-gray-200 focus:border-primary-500 focus:ring-2 focus:ring-primary-100 outline-none transition"
+                            required
+                        >
+                    </div>
+                </div>
+
+                <div class="flex items-center justify-between">
+                    <label class="flex items-center">
+                        <input type="checkbox" class="rounded text-primary-500 focus:ring-primary-500">
+                        <span class="ml-2 text-sm text-gray-600">Remember me</span>
+                    </label>
+                    <a href="#" class="text-sm text-primary-500 hover:text-primary-700">Forgot password?</a>
+                </div>
+
+                <button 
+                    type="submit" 
+                    class="w-full bg-gradient-to-r from-primary-500 to-secondary-500 text-white py-3 px-4 rounded-lg font-medium hover:from-primary-600 hover:to-secondary-600 transition-all shadow-md hover:shadow-lg"
+                >
+                    Sign In
+                </button>
+            </form>
+
+            <!-- Auth Footer -->
+            <div class="px-8 py-6 bg-gray-50 text-center border-t border-gray-100">
+                <p class="text-gray-600">Don't have an account? 
+                    <a href="#" class="text-primary-500 font-medium hover:text-primary-700">Sign up</a>
+                </p>
+            </div>
+        </div>
+
+        <!-- Social Login -->
+        <div class="mt-6 text-center">
+            <p class="text-gray-500 mb-4">Or continue with</p>
+            <div class="flex justify-center space-x-4">
+                <button class="w-12 h-12 rounded-full bg-white shadow-md flex items-center justify-center hover:shadow-lg transition">
+                    <i data-feather="github" class="text-gray-700"></i>
+                </button>
+                <button class="w-12 h-12 rounded-full bg-white shadow-md flex items-center justify-center hover:shadow-lg transition">
+                    <i data-feather="twitter" class="text-blue-400"></i>
+                </button>
+                <button class="w-12 h-12 rounded-full bg-white shadow-md flex items-center justify-center hover:shadow-lg transition">
+                    <i data-feather="facebook" class="text-blue-600"></i>
+                </button>
+            </div>
+        </div>
+    </main>
+
+    <script>feather.replace();</script>
+    <script src="script.js"></script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>

script.js

@@ -0,0 +1,51 @@
+document.addEventListener('DOMContentLoaded', function() {
+    // Form submission handler
+    const loginForm = document.querySelector('form');
+    if (loginForm) {
+        loginForm.addEventListener('submit', function(e) {
+            e.preventDefault();
+            
+            // Get form values
+            const email = this.querySelector('input[type="email"]').value;
+            const password = this.querySelector('input[type="password"]').value;
+            
+            // Simple validation
+            if (!email || !password) {
+                alert('Please fill in all fields');
+                return;
+            }
+            
+            // In a real app, you would send this to your backend
+            console.log('Login attempt with:', { email, password });
+            
+            // Show loading state
+            const submitBtn = this.querySelector('button[type="submit"]');
+            const originalBtnText = submitBtn.innerHTML;
+            submitBtn.innerHTML = `
+                <svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-white inline-block" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                </svg>
+                Signing in...
+            `;
+            submitBtn.disabled = true;
+            
+            // Simulate API call
+            setTimeout(() => {
+                submitBtn.innerHTML = originalBtnText;
+                submitBtn.disabled = false;
+                
+                // For demo purposes, just show a success message
+                alert('Login successful! (This is a demo)');
+            }, 2000);
+        });
+    }
+    
+    // Social login button handlers
+    document.querySelectorAll('.social-login button').forEach(btn => {
+        btn.addEventListener('click', function() {
+            const platform = this.querySelector('i').getAttribute('data-feather');
+            alert(`Sign in with ${platform.charAt(0).toUpperCase() + platform.slice(1)} clicked`);
+        });
+    });
+});

style.css

@@ -1,28 +1,34 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+    font-family: 'Inter', system-ui, -apple-system, sans-serif;
 }
 
-h1 {
-	font-size: 16px;
-	margin-top: 0;
+/* Custom focus styles */
+input:focus, button:focus {
+    outline: 2px solid transparent;
+    outline-offset: 2px;
 }
 
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
+/* Animation for form inputs */
+input {
+    transition: all 0.2s ease;
 }
 
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
+/* Pulse animation for the submit button */
+@keyframes pulse {
+    0% { transform: scale(1); }
+    50% { transform: scale(1.02); }
+    100% { transform: scale(1); }
 }
 
-.card p:last-child {
-	margin-bottom: 0;
+button[type="submit"]:hover {
+    animation: pulse 1.5s infinite;
 }
+
+/* Responsive adjustments */
+@media (max-width: 640px) {
+    .auth-container {
+        border-radius: 0;
+    }
+}