<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Registration Form</title>

    <style>
        body {
            font-family: Arial, sans-serif;
            background: #f0f4f8;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            margin: 0;
        }

        .container {
            background: white;
            padding: 25px;
            width: 320px;
            border-radius: 10px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        }

        h2 {
            text-align: center;
            color: #2563eb;
        }

        label {
            display: block;
            margin-top: 12px;
            font-weight: bold;
        }

        input {
            width: 100%;
            padding: 10px;
            margin-top: 5px;
            box-sizing: border-box;
            border: 1px solid #ccc;
            border-radius: 5px;
        }

        input:focus {
            outline: none;
            border-color: #2563eb;
        }

        button {
            width: 100%;
            padding: 11px;
            margin-top: 20px;
            background: #2563eb;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
        }

        button:hover {
            background: #1d4ed8;
        }

        #message {
            margin-top: 15px;
            text-align: center;
            font-weight: bold;
        }
    </style>
</head>
<body>

<div class="container">
    <h2>Registration Form</h2>

    <form id="registrationForm">
        <label for="firstName">First Name</label>
        <input type="text" id="firstName"
               placeholder="Enter first name" required>

        <label for="password">Password</label>
        <input type="password" id="password"
               placeholder="Enter password" required>

        <label for="email">Email ID</label>
        <input type="text" id="email"
               placeholder="Enter email address" required>

        <label for="phone">Phone Number</label>
        <input type="tel" id="phone"
               placeholder="Enter phone number" required>

        <button type="submit">Register</button>

        <p id="message" role="status" aria-live="polite"></p>
    </form>
</div>

<script>
    document.getElementById("registrationForm")
        .addEventListener("submit", function(event) {

        event.preventDefault();

        // Get input values
        let name = document.getElementById("firstName").value.trim();
        let password = document.getElementById("password").value;
        let email = document.getElementById("email").value.trim();
        let phone = document.getElementById("phone").value.trim();
        let message = document.getElementById("message");

        // A) First name: alphabets only, less than 6 characters
        let namePattern = /^[A-Za-z]{1,5}$/;

        if (!namePattern.test(name)) {
            message.style.color = "red";
            message.textContent =
                "Name must contain only alphabets and be less than 6 characters.";
            return;
        }

        // B) Password: minimum 6 characters
        if (password.length < 6) {
            message.style.color = "red";
            message.textContent =
                "Password must contain at least 6 characters.";
            return;
        }

        // C) Email: standard email format
        let emailPattern =
            /^[A-Za-z0-9]+([._%+-][A-Za-z0-9]+)*@[A-Za-z0-9-]+(\.[A-Za-z0-9-]+)*\.[A-Za-z]{2,}$/;

        if (!emailPattern.test(email)) {
            message.style.color = "red";
            message.textContent =
                "Please enter a valid email address.";
            return;
        }

        // D) Phone: minimum 10 digits
        // Allows spaces, +, -, and parentheses in phone numbers.
        let phoneDigits = phone.replace(/\D/g, "");

        if (phoneDigits.length < 10 ||
            !/^[0-9+()\s-]+$/.test(phone)) {
            message.style.color = "red";
            message.textContent =
                "Phone number must contain at least 10 digits.";
            return;
        }

        // All validations passed
        message.style.color = "green";
        message.textContent =
            "Registration successful!";
    });
</script>

</body>
</html>