Project/signup.html at main · Pankajyadav919/Project · GitHub

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
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Elegant Login Form</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">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap">
    <style>
        body {
            font-family: 'Poppins', sans-serif;
        }
        .gradient-bg {
            background: linear-gradient(135deg, #1e2a5c 0%, #0d0d0d 100%);
        }
        .card-shadow {
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5);
        }
        .input-focus:focus {
            box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.3);
            border-color: #6366f1;
        }
        .shake {
            animation: shake 0.5s;
        }
        @keyframes shake {
            0%, 100% { transform: translateX(0); }
            10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
            20%, 40%, 60%, 80% { transform: translateX(5px); }
        }
        .social-btn:hover {
            transform: scale(1.05);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
        }
        .error-message {
            color: #f87171;
            font-size: 0.75rem;
            margin-top: 4px;
            display: none;
        }
    </style>
</head>
<body class="gradient-bg min-h-screen flex items-center justify-center p-4">
    <div class="bg-gray-900 rounded-2xl overflow-hidden card-shadow w-full max-w-md">
        <div class="p-8">
            <div class="text-center mb-8">
                <div class="w-20 h-20 rounded-full bg-gradient-to-r from-indigo-600 to-blue-700 flex items-center justify-center mx-auto mb-4">
                    <i class="fas fa-user text-white text-3xl"></i>
                </div>
                <h1 class="text-3xl font-bold text-white">Welcome Back</h1>
                <p class="text-gray-400 mt-2">Sign in to your account</p>
            </div>

            <form id="loginForm" class="space-y-6">
                <div class="relative">
                    <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                        <i class="fas fa-envelope text-gray-500"></i>
                    </div>
                    <input type="email" id="email" placeholder="Email Address"
                           class="w-full pl-10 pr-4 py-3 rounded-lg border border-gray-700 bg-gray-800 text-white focus:outline-none focus:border-indigo-500 input-focus transition duration-300"
                           required>
                    <div id="emailError" class="error-message">Valid email is required</div>
                </div>

                <div class="relative">
                    <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                        <i class="fas fa-lock text-gray-500"></i>
                    </div>
                    <input type="password" id="password" placeholder="Password"
                           class="w-full pl-10 pr-4 py-3 rounded-lg border border-gray-700 bg-gray-800 text-white focus:outline-none focus:border-indigo-500 input-focus transition duration-300"
                           required>
                    <button type="button" class="absolute right-3 top-3 text-gray-400 hover:text-gray-200" id="togglePassword">
                        <i class="fas fa-eye"></i>
                    </button>
                    <div id="passwordError" class="error-message">Password is required</div>
                </div>

                <div class="flex items-center justify-between">
                    <div class="flex items-center">
                        <input type="checkbox" id="remember" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-600 rounded bg-gray-800">
                        <label for="remember" class="ml-2 block text-sm text-gray-300">Remember me</label>
                    </div>
                    <a href="#" class="text-sm text-indigo-400 hover:text-indigo-300">Forgot password?</a>
                </div>

                <button type="submit" class="w-full bg-gradient-to-r from-indigo-600 to-blue-700 text-white py-3 rounded-lg font-semibold hover:from-indigo-700 hover:to-blue-800 transition duration-300 shadow-lg transform hover:scale-[1.01]">
                    Sign In
                </button>

                <div class="text-center text-sm text-gray-400">
                    Don't have an account? <a href="login.html" class="text-indigo-400 hover:text-indigo-300 font-medium">Sign up</a>
                </div>
            </form>

            <div class="mt-8">
                <div class="relative">
                    <div class="absolute inset-0 flex items-center">
                        <div class="w-full border-t border-gray-700"></div>
                    </div>
                    <div class="relative flex justify-center text-sm">
                        <span class="px-2 bg-gray-900 text-gray-400">Or continue with</span>
                    </div>
                </div>

                <div class="mt-6 grid grid-cols-3 gap-3">
                    <button class="social-btn w-full flex items-center justify-center py-2 px-4 border border-gray-700 rounded-lg bg-gray-800 hover:bg-gray-700 transition duration-300">
                        <i class="fab fa-google text-red-500"></i>
                    </button>
                    <button class="social-btn w-full flex items-center justify-center py-2 px-4 border border-gray-700 rounded-lg bg-gray-800 hover:bg-gray-700 transition duration-300">
                        <i class="fab fa-facebook-f text-blue-600"></i>
                    </button>
                    <button class="social-btn w-full flex items-center justify-center py-2 px-4 border border-gray-700 rounded-lg bg-gray-800 hover:bg-gray-700 transition duration-300">
                        <i class="fab fa-twitter text-blue-400"></i>
                    </button>
                </div>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const loginForm = document.getElementById('loginForm');
            const togglePassword = document.getElementById('togglePassword');
            const passwordInput = document.getElementById('password');

            // Toggle password visibility
            togglePassword.addEventListener('click', function() {
                const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password';
                passwordInput.setAttribute('type', type);
                this.querySelector('i').classList.toggle('fa-eye');
                this.querySelector('i').classList.toggle('fa-eye-slash');
            });

            // Form submission with enhanced validation
            loginForm.addEventListener('submit', function(e) {
                e.preventDefault();

                const email = document.getElementById('email').value;
                const password = document.getElementById('password').value;

                let isValid = true;

                // Reset error states
                document.getElementById('emailError').style.display = 'none';
                document.getElementById('passwordError').style.display = 'none';

                if (!email || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
                    isValid = false;
                    document.getElementById('emailError').style.display = 'block';
                }
                if (!password) {
                    isValid = false;
                    document.getElementById('passwordError').style.display = 'block';
                }

                if (!isValid) {
                    loginForm.classList.add('shake');
                    setTimeout(() => {
                        loginForm.classList.remove('shake');
                    }, 500);
                    return;
                }

                console.log('Login attempt with:', { email, password });
                alert('Login successful! (This is a demo)');
                loginForm.reset();
            });
        });
    </script>
</body>
</html>