File size: 7,254 Bytes
290dcc6 |
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 122 123 124 125 126 127 128 129 130 131 132 133 134 135 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login - OpenAI</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
.gradient-bg {
background: linear-gradient(135deg, #5433FF 0%, #20BDFF 50%, #A5FECB 100%);
}
.input-focus:focus {
box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.5);
}
.social-btn:hover {
transform: translateY(-2px);
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.fade-in {
animation: fadeIn 0.5s ease-in-out;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
</style>
</head>
<body class="bg-gray-50 min-h-screen flex items-center justify-center p-4">
<div class="max-w-md w-full space-y-8 fade-in">
<!-- Logo Section -->
<div class="text-center">
<div class="gradient-bg w-16 h-16 rounded-xl flex items-center justify-center mx-auto mb-4">
<i class="fas fa-robot text-white text-2xl"></i>
</div>
<h2 class="text-3xl font-extrabold text-gray-900">Welcome back</h2>
<p class="mt-2 text-sm text-gray-600">Sign in to access your account</p>
</div>
<!-- Login Form -->
<div class="bg-white py-8 px-6 shadow rounded-lg sm:px-10">
<form class="mb-0 space-y-6" id="loginForm">
<div>
<label for="email" class="block text-sm font-medium text-gray-700">Email address</label>
<div class="mt-1 relative rounded-md shadow-sm">
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<i class="fas fa-envelope text-gray-400"></i>
</div>
<input id="email" name="email" type="email" autocomplete="email" required
class="input-focus py-2 px-10 block w-full border border-gray-300 rounded-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"
placeholder="[email protected]">
</div>
</div>
<div>
<button type="submit"
class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition-colors duration-200">
Continue
</button>
</div>
</form>
<div class="relative mt-6">
<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="social-btn w-full inline-flex justify-center py-2 px-4 border border-gray-300 rounded-md shadow-sm bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 transition-all duration-200">
<img src="https://upload.wikimedia.org/wikipedia/commons/5/53/Google_%22G%22_Logo.svg" alt="Google logo" class="h-5 w-5 mr-2">
Google
</a>
<a href="#" class="social-btn w-full inline-flex justify-center py-2 px-4 border border-gray-300 rounded-md shadow-sm bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 transition-all duration-200">
<i class="fab fa-microsoft text-blue-600 h-5 w-5 mr-2"></i>
Microsoft
</a>
<a href="#" class="social-btn w-full inline-flex justify-center py-2 px-4 border border-gray-300 rounded-md shadow-sm bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 transition-all duration-200">
<i class="fab fa-apple text-gray-900 h-5 w-5 mr-2"></i>
Apple
</a>
<a href="#" class="social-btn w-full inline-flex justify-center py-2 px-4 border border-gray-300 rounded-md shadow-sm bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 transition-all duration-200">
<i class="fas fa-mobile-alt text-purple-600 h-5 w-5 mr-2"></i>
Phone
</a>
</div>
<div class="mt-6 text-center">
<p class="text-sm text-gray-600">
Don't have an account?
<a href="#" class="font-medium text-indigo-600 hover:text-indigo-500">Sign up</a>
</p>
</div>
</div>
<!-- Footer Links -->
<div class="flex justify-center space-x-4 text-xs text-gray-500">
<a href="#" class="hover:text-gray-700">Terms of Use</a>
<span>•</span>
<a href="#" class="hover:text-gray-700">Privacy Policy</a>
</div>
</div>
<script>
document.getElementById('loginForm').addEventListener('submit', function(e) {
e.preventDefault();
const email = document.getElementById('email').value;
// Simple validation
if (!email.includes('@')) {
alert('Please enter a valid email address');
return;
}
// Here you would typically send the data to your backend
console.log('Login attempt with email:', email);
// Show loading state
const submitBtn = this.querySelector('button[type="submit"]');
submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Processing...';
submitBtn.disabled = true;
// Simulate API call
setTimeout(() => {
submitBtn.innerHTML = 'Continue';
submitBtn.disabled = false;
alert('Login functionality would be implemented here');
}, 1500);
});
</script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=KINGHAJI/test-3" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html> |