From 59cdc1c73bcc5114d06074360d4b226e0c7a2394 Mon Sep 17 00:00:00 2001
From: Jay Kumar <jk316875@gmail.com>
Date: Sat, 15 Mar 2025 12:13:09 +0530
Subject: [PATCH] first commit

---
 README.md    |  12 ++-
 project.html | 207 +++++++++++++++++++++++++++++----------------------
 2 files changed, 131 insertions(+), 88 deletions(-)
diff --git a/README.md b/README.md
index 1523e52..cfda840 100644
--- a/README.md
+++ b/README.md
@@ -1 +1,11 @@
-# login-page
\ No newline at end of file
+# login-page
+
+Great! If you’ve already created a login page and want to enhance it, here are some extra points or features you could consider adding:
+
+# Input Validation:
+Client-Side Validation: Ensure that the email/username and password inputs are not empty or improperly formatted (e.g., email format, password length).
+Password Strength Indicator: Provide feedback on password strength (weak, medium, strong).
+# Error Handling:
+Display specific error messages (e.g., "Invalid username or password") to help the user understand what went wrong.
+3. Remember Me Option:
+Implement a “Remember Me” checkbox to keep the user logged in across sessions using cookies or local storage.
\ No newline at end of file
diff --git a/project.html b/project.html
index 80c3b22..9dffc1f 100644
--- a/project.html
+++ b/project.html
@@ -1,127 +1,160 @@
 <!DOCTYPE html>
 <html lang="en">
-    <style>
-        /* Reset some default styles */
-* {
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Exam Registration</title>
+<style>
+    /* styles.css */
+body, html {
     margin: 0;
     padding: 0;
-    box-sizing: border-box;
-}
-
-body {
-    font-family: Arial, sans-serif;
-    background-color: #f4f7fc;
+    height: 100%;
+    font-family: 'Arial', sans-serif;
+    background: #f4f4f9;
     display: flex;
     justify-content: center;
     align-items: center;
-    height: 100vh;
 }
 
-.container {
-    background-color: #a4e1cd;
-    padding: 30px;
-    border-radius: 89087989px;
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+.registration-container {
     width: 100%;
     max-width: 500px;
+    padding: 20px;
+}
+
+.registration-box {
+    background: #fff;
+    padding: 30px;
+    border-radius: 10px;
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
     text-align: center;
 }
 
-h1 {
-    font-size: 2em;
-    margin-bottom: 203523px;
+h2 {
+    color: #333;
+    margin-bottom: 20px;
+    font-size: 24px;
+    text-transform: uppercase;
 }
 
-.registration-form {
-    display: flex;
-    flex-direction: column;
-    gap: 15px;
+.input-group {
+    margin-bottom: 20px;
+    text-align: left;
 }
 
 label {
-    text-align: left;
-    font-size: 1em;
-    font-weight: bold;
+    color: #555;
+    display: block;
+    margin-bottom: 5px;
+    font-size: 14px;
 }
 
-input, select {
+input[type="text"], input[type="email"], input[type="tel"], input[type="date"], select, textarea {
+    width: 100%;
     padding: 10px;
-    font-size: 1em;
-    border: 1px solid #e3f38a;
+    border: 1px solid #ccc;
     border-radius: 5px;
+    background: #f9f9f9;
+    color: #333;
+    outline: none;
+    font-size: 14px;
 }
 
-input[type="date"], select {
-    cursor: pointer;
+input[type="text"]:focus, input[type="email"]:focus, input[type="tel"]:focus, input[type="date"]:focus, select:focus, textarea:focus {
+    border-color: #007bff;
+    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
+}
+
+textarea {
+    resize: vertical;
 }
 
 button {
-    padding: 1000px;
-    font-size: 1.1em;
-    background-color: #3e32e1;
-    color: white;
+    width: 100%;
+    padding: 10px;
+    background: #007bff;
     border: none;
-    border-radius: 55576px;
+    border-radius: 5px;
+    color: #fff;
+    font-weight: bold;
     cursor: pointer;
-    transition: background-color 0.3s ease;
+    transition: background 0.3s, transform 0.3s;
 }
 
 button:hover {
-    background-color: #3975bd;
-}
-
-.checkbox-group {
-    display: flex;
-    align-items: center;
-    gap: 5px;
+    background: #0056b3;
+    transform: scale(1.05);
 }
 
-.checkbox-group input {
-    transform: scale(1.2);
+.error-message {
+    color: #ff4444;
+    margin-top: 10px;
+    display: none;
+    font-size: 14px;
 }
-
-
-    </style>
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Exam Registration</title>
-    <link rel="stylesheet" href="styles.css">
+</style>
 </head>
 <body>
-
-    <div class="container">
-        <h1>Exam Registration Form</h1>
-
-        <form action="#" method="POST" class="registration-form">
-            <label for="full-name">Full Name</label>
-           
-
-            <label for="email">Email Address</label>
-            <input type="email" id="email" name="email" required>
-
-            <label for="dob">Date of Birth</label>
-            <input type="date" id="dob" name="dob" required>
-
-            <label for="exam">Select Exam</label>
-            <select id="exam" name="exam" required>
-                <option value="">--Select an exam--</option>
-                <option value="math">Mathematics</option>
-                <option value="science">Science</option>
-                <option value="english">English</option>
-            </select>
-
-            <label for="exam-date">Preferred Exam Date</label>
-            <input type="date" id="exam-date" name="exam-date" required>
-
-            <div class="checkbox-group">
-                <input type="checkbox" id="terms" name="terms" required>
-                <label for="terms">I agree to the terms and conditions</label>
-            </div>
-
-            <button type="submit">Register</button>
-        </form>
+    <div class="registration-container">
+        <div class="registration-box">
+            <h2>Exam Registration</h2>
+            <form id="registrationForm" action="register.php" method="POST">
+                <div class="input-group">
+                    <label for="fullName">Full Name:</label>
+                    <input type="text" id="fullName" name="fullName" required>
+                </div>
+                <div class="input-group">
+                    <label for="email">Email:</label>
+                    <input type="email" id="email" name="email" required>
+                </div>
+                <div class="input-group">
+                    <label for="phone">Phone Number:</label>
+                    <input type="tel" id="phone" name="phone" required>
+                </div>
+                <div class="input-group">
+                    <label for="exam">Select Exam:</label>
+                    <select id="exam" name="exam" required>
+                        <option value="">-- Select Exam --</option>
+                        <option value="Math">Mathematics</option>
+                        <option value="Science">Science</option>
+                        <option value="English">English</option>
+                        <option value="History">History</option>
+                    </select>
+                </div>
+                <div class="input-group">
+                    <label for="dob">Date of Birth:</label>
+                    <input type="date" id="dob" name="dob" required>
+                </div>
+                <div class="input-group">
+                    <label for="address">Address:</label>
+                    <textarea id="address" name="address" rows="4" required></textarea>
+                </div>
+                <button type="submit">Register</button>
+            </form>
+            <p id="error-message" class="error-message"></p>
+        </div>
     </div>
-
+  
+<script>
+    // script.js
+document.getElementById('registrationForm').addEventListener('submit', function(event) {
+    const fullName = document.getElementById('fullName').value;
+    const email = document.getElementById('email').value;
+    const phone = document.getElementById('phone').value;
+    const exam = document.getElementById('exam').value;
+    const dob = document.getElementById('dob').value;
+    const address = document.getElementById('address').value;
+    const errorMessage = document.getElementById('error-message');
+
+    if (!fullName || !email || !phone || !exam || !dob || !address) {
+        errorMessage.textContent = 'Please fill in all fields.';
+        errorMessage.style.display = 'block';
+        event.preventDefault();
+    } else {
+        errorMessage.style.display = 'none';
+    }
+});
+</script>
 </body>
-</html>
+</html>
\ No newline at end of file
