Merge pull request #977 from sayanp607/register_toggle

Register page toggle button added
ankit071105 · Nov 10, 2024 · 320c643 · 320c643
2 parents 12a7b05 + 360da95
commit 320c643
Show file tree

Hide file tree

Showing 2 changed files with 126 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -552,6 +552,51 @@ <h2>What type of transportation do you prefer for your travels?</h2>
     <div id="progress-container">
         <div id="progress-bar"></div>
     </div> 
+    <nav class="navbar">
+        <img src="https://ticket-booking-blue.vercel.app/images/4.jpeg" alt=""
+            style="border-radius: 50%; height: 35px; width: 35px;">
+        <div class="logo" style="font-size: 20px;">Ticket Marketplace</div>
+
+    <nav class="navbar">
+        <img src="https://ticket-booking-blue.vercel.app/images/4.jpeg" alt="" style="border-radius: 50%; height: 35px; width: 35px;">
+        <div class="logo" style="font-size: 20px;">Ticket Marketplace</div>
+
+        <!-- Toggle Button (Visible on Small Screens) -->
+        <button id="navToggle">☰</button>
+
+        <!-- Navbar Links -->
+        <div id="navLinks">
+            <a href="index.html"><i class="fas fa-home"></i> Home</a>
+            <a href="about.html"><i class="fas fa-info-circle"></i> About</a>
+            <a href="buy.html"><i class="fas fa-ticket-alt"></i> Buy Ticket</a>
+            <a href="sell.html"><i class="fas fa-tags"></i> Sell</a>
+            <a href="contactus.html"><i class="fas fa-envelope"></i> Contact</a>
+            <a href="contributor.html"><i class="fas fa-users"></i> Contributors</a>
+            <a href="login.html"><i class="fas fa-sign-in-alt"></i> Login</a>
+        </div>
+
+        <!-- Dark Mode Button -->
+        <button id="darkModeToggle" style="width: 40px; height: 40px;">🌙</button>
+    </nav>
+      <nav class="navbar">
+        <a href="index.html" style="display: flex; align-items: center; text-decoration: none; white-space: nowrap; margin-right: -250px;">
+          <img src="https://ticket-booking-blue.vercel.app/images/4.jpeg" alt="" style="border-radius: 50%; height: 35px; width: 35px;">
+          <div class="logo" style="font-size: 20px; margin-left: 8px;">Ticket Marketplace</div>
+      </a><div>
+        <!-- Toggle Button (Visible on Small Screens) -->
+        <button id="navToggle">☰</button>
+
+        <!-- Navbar Links -->
+        <div id="navLinks">
+            <a href="index.html"><i class="fas fa-home"></i> Home</a>
+            <a href="about.html"><i class="fas fa-info-circle"></i> About</a>
+            <a href="buy.html"><i class="fas fa-ticket-alt"></i> Buy Ticket</a>
+            <a href="sell.html"><i class="fas fa-tags"></i> Sell</a>
+            <a href="contactus.html"><i class="fas fa-envelope"></i> Contact</a>
+            <a href="contributor.html"><i class="fas fa-users"></i> Contributors</a>
+            <a href="login.html"><i class="fas fa-sign-in-alt"></i> Login</a>
+            <a href="AI suggestions.html"><i class="fas fa-robot"></i> AI Suggestions</a>
+        </div>
 
 
 

diff --git a/register.html b/register.html
@@ -369,7 +369,88 @@ <h4>FIND US</h4>
                 </ul>
             </div>
         </div>
+
+        <!-- Dark Mode Button -->
+        <button id="darkModeToggle" style="width: 40px; height: 40px;">🌙</button>
+    </nav>
+</header>
+<body>
+<div class="registration-form">
+    <h2>Register</h2>
+    <div class="form-field">
+        <label for="email">Email</label>
+        <input type="email" id="email" placeholder="Enter your email" required>
     </div>
+    <div class="form-field">
+        <label for="username">Username</label>
+        <input type="text" id="username" placeholder="Enter your username" required>
+    </div>
+    <div class="form-field">
+        <label for="mobile">Mobile</label>
+        <input type="text" id="mobile" placeholder="Enter your mobile number" required>
+    </div>
+    <div class="form-field">
+        <label for="password">Password</label>
+        <input type="password" id="password" placeholder="Enter your password" required>
+    </div>
+    <div class="form-field">
+        <button onclick="registerUser()">Register</button>
+        <a href="./index.html">Back to Home</a>
+    </div>
+    <div id="message" class="message"></div>
+</div>
+
+<script>
+    // JavaScript for registration logic and validation
+    function registerUser() {
+        const email = document.getElementById('email').value.trim();
+        const username = document.getElementById('username').value.trim();
+        const mobile = document.getElementById('mobile').value.trim();
+        const password = document.getElementById('password').value.trim();
+        const messageElement = document.getElementById('message');
+
+        // Basic validation
+        if (!email || !username || !mobile || !password) {
+            showMessage('All fields are required!', 'error');
+            return;
+        }
+
+        // Email validation
+        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+        if (!emailRegex.test(email)) {
+            showMessage('Invalid email format!', 'error');
+            return;
+        }
+
+        // Username validation
+        if (username.length < 3) {
+            showMessage('Username must be at least 3 characters long!', 'error');
+            return;
+        }
+
+        // Mobile number validation
+        if (!/^\d{10}$/.test(mobile)) {
+            showMessage('Mobile number must be 10 digits!', 'error');
+            return;
+        }
+
+        // Password validation
+        if (password.length < 6) {
+            showMessage('Password must be at least 6 characters long!', 'error');
+            return;
+        }
+
+        // If all validations pass, display success message
+        showMessage('Registration successful!', 'success');
+    }
+
+    // Function to display messages
+    function showMessage(message, type) {
+        const messageElement = document.getElementById('message');
+        messageElement.textContent = message;
+        messageElement.className = `message ${type}`;
+    }
+</script>
 </div>