Merge pull request #17 from Richajaishwal0/features/sign-up,dynamic-s…

…croll Added sign-up page
abhrajit2004 · Oct 7, 2024 · 6cf351a · 6cf351a
2 parents 4b947b2 + 72d770a
commit 6cf351a
Show file tree

Hide file tree

Showing 2 changed files with 118 additions and 0 deletions.
diff --git a/X.png b/X.png
diff --git a/signup.html b/signup.html
@@ -0,0 +1,118 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>X Signup</title>
+    <!-- Tailwind CSS CDN -->
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
+</head>
+
+<body class="bg-black min-h-screen flex flex-col items-center justify-between">
+    <div class="flex flex-col w-full max-w-md p-6 space-y-6">
+        <img src="X.png" alt="X Logo" class="h-12 w-auto"> <!-- Add your logo path here -->
+        <h1 class="text-4xl font-bold text-white text-center mt-14">Happening now</h1>
+        <p class="text-white text-center">Join today.</p>
+
+        <form id="signupForm" class="flex flex-col space-y-4" novalidate>
+            <!-- User Input Form -->
+            <input type="email" id="email" placeholder="Email" class="bg-gray-800 text-white p-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" required>
+            <input type="password" id="password" placeholder="Password" class="bg-gray-800 text-white p-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" required minlength="6">
+
+            <div class="flex items-center justify-between text-gray-500">
+                <a href="#" class="hover:underline">Forgot password?</a>
+            </div>
+
+            <div class="text-center">
+                <span class="text-white">or</span>
+            </div>
+
+            <button type="submit" class="bg-blue-500 text-white py-3 rounded-full hover:bg-blue-400">Create account</button>
+
+            <p class="text-sm text-gray-500 text-center">
+                By signing up, you agree to the 
+                <a href="#" class="text-blue-400 hover:underline">Terms of Service</a> and 
+                <a href="#" class="text-blue-400 hover:underline">Privacy Policy</a>, including 
+                <a href="#" class="text-blue-400 hover:underline">Cookie Use</a>.
+            </p>
+
+            <div class="text-center">
+                <p class="text-gray-500">Already have an account?</p>
+                <div class="border border-white rounded-full p-4 mt-2">
+                    <p class="text-gray-500 text-center">
+                        <a href="#" class="text-blue-400 hover:underline">Sign in</a>
+                    </p>
+                </div>
+            </div>
+        </form>
+
+        <!-- Response Message -->
+        <div id="responseMessage" class="hidden text-center text-green-500 mt-4"></div>
+    </div>
+
+    <footer class="w-full text-center text-gray-400 p-6 bg-gray-900">
+        <div class="max-w-4xl mx-auto">
+            <p class="mb-4">© 2024 Your Company. All rights reserved.</p>
+            <div class="flex justify-center space-x-4">
+                <a href="#" class="hover:underline">About</a>
+                <a href="#" class="hover:underline">Help</a>
+                <a href="#" class="hover:underline">Privacy Policy</a>
+                <a href="#" class="hover:underline">Terms of Service</a>
+                <a href="#" class="hover:underline">Cookie Policy</a>
+            </div>
+            <p class="mt-4">Follow us on 
+                <a href="#" class="text-blue-400 hover:underline">Twitter</a>, 
+                <a href="#" class="text-blue-400 hover:underline">Facebook</a>, 
+                <a href="#" class="text-blue-400 hover:underline">Instagram</a>.
+            </p>
+        </div>
+    </footer>
+
+    <script>
+        document.getElementById('signupForm').addEventListener('submit', function(event) {
+            // Prevent default form submission
+            event.preventDefault();
+
+            // Get email and password inputs
+            const email = document.getElementById('email');
+            const password = document.getElementById('password');
+
+            // Basic validation
+            let valid = true;
+
+            // Email validation
+            if (!email.checkValidity()) {
+                valid = false;
+                alert('Please enter a valid email address.');
+            }
+
+            // Password validation
+            if (password.value.length < 6) {
+                valid = false;
+                alert('Password must be at least 6 characters long.');
+            }
+
+            // If valid, display thank you message
+            if (valid) {
+                createAccount();
+            }
+        });
+
+        function createAccount() {
+            // Simulate account creation with a delay
+            setTimeout(() => {
+                // Clear the form fields
+                document.getElementById('signupForm').reset();
+
+                // Show success message
+                const responseMessage = document.getElementById('responseMessage');
+                responseMessage.textContent = "Thank you for signing up!";
+                responseMessage.classList.remove('hidden');
+            }, 500); // Simulate a delay for account creation
+        }
+    </script>
+</body>
+
+</html>