File size: 5,605 Bytes
d82c543 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Log In - SparkConnect</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/feather-icons"></script>
<style>
.gradient-bg {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.btn-primary {
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}
.btn-primary:hover {
background: linear-gradient(135deg, #f5576c 0%, #f093fb 100%);
}
</style>
</head>
<body class="bg-gray-50 min-h-screen font-sans">
<!-- Navigation -->
<nav class="bg-white shadow-sm">
<div class="max-w-6xl mx-auto px-4">
<div class="flex justify-between items-center py-4">
<a href="index.html" class="flex items-center space-x-2">
<span class="text-2xl font-bold bg-gradient-to-r from-purple-600 to-pink-500 bg-clip-text text-transparent">SparkConnect</span>
</a>
<a href="signup.html" class="text-gray-600 hover:text-purple-600 font-medium">Sign Up</a>
</div>
</div>
</nav>
<!-- Login Form -->
<div class="min-h-screen flex items-center justify-center px-4 py-12">
<div class="max-w-md w-full space-y-8">
<div class="text-center">
<h2 class="text-3xl font-bold text-gray-900 mb-2">Welcome Back! 👋</h2>
<p class="text-gray-600">Continue your journey to find amazing connections</p>
</div>
<!-- OAuth Buttons -->
<div class="space-y-4">
<button class="w-full flex items-center justify-center px-4 py-3 border border-gray-300 rounded-lg shadow-sm bg-white text-gray-700 hover:bg-gray-50 transition-colors">
<i data-feather="mail" class="w-5 h-5 mr-3"></i>
Continue with Google
</button>
<button class="w-full flex items-center justify-center px-4 py-3 border border-gray-300 rounded-lg shadow-sm bg-white text-gray-700 hover:bg-gray-50 transition-colors">
<i data-feather="smartphone" class="w-5 h-5 mr-3"></i>
Continue with Apple
</button>
</div>
<div class="relative">
<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-gray-50 text-gray-500">Or log in with email</span>
</div>
</div>
<form class="space-y-6" id="login-form">
<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-purple-500 focus:border-purple-500 transition-colors" placeholder="you@example.com">
</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-purple-500 focus:border-purple-500 transition-colors" placeholder="Enter your password">
</div>
<div class="flex items-center justify-between">
<div class="flex items-center">
<input type="checkbox" id="remember" name="remember" class="w-4 h-4 text-purple-600 border-gray-300 rounded focus:ring-purple-500">
<label for="remember" class="ml-2 block text-sm text-gray-700">Remember me</label>
</div>
<a href="#" class="text-sm text-purple-600 hover:text-purple-500">Forgot password?</a>
</div>
<button type="submit" class="w-full btn-primary text-white py-3 px-4 rounded-lg font-medium hover:shadow-lg transition-all duration-300">
Log In
</button>
</form>
<div class="text-center">
<p class="text-sm text-gray-600">
Don't have an account?
<a href="signup.html" class="font-medium text-purple-600 hover:text-purple-500">Sign up</a>
</p>
</div>
</div>
</div>
<script>
feather.replace();
const loginForm = document.getElementById('login-form');
loginForm.addEventListener('submit', async (e) => {
e.preventDefault();
const email = document.getElementById('email').value;
const password = document.getElementById('password').value;
// Simulate login process
const submitBtn = loginForm.querySelector('button[type="submit"]');
const originalText = submitBtn.textContent;
submitBtn.textContent = 'Logging in...';
submitBtn.disabled = true;
// In a real app, this would be an API call
setTimeout(() => {
// Redirect to discovery page
window.location.href = 'discovery.html';
}, 2000);
});
</script>
</body>
</html> |