Hi2

176

<!DOCTYPE html> <html> <head> <title>Register Complaint</title> <style> body { font-family: Arial, sans-serif; background-color: #f4f4f4; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; } 
    .container {
        background-color: white;
        padding: 30px;
        border-radius: 6px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        width: 300px;
        text-align: center;
    }

    h1 {
        margin-bottom: 30px;
    }

    textarea {
        width: 100%;
        height: 100px;
        padding: 10px;
        margin-bottom: 10px;
        border: 1px solid #ccc;
        border-radius: 4px;
        box-sizing: border-box;
        resize: none;
        vertical-align: top;
    }

    button {
        padding: 10px 20px;
        background-color: #28a745;
        color: white;
        border: none;
        border-radius: 4px;
        cursor: pointer;
    }

    button:hover {
        background-color: #218838;
    }

    #responseMessage {
        margin-top: 20px;
        font-weight: bold;
    }

    .success {
        color: green;
    }

    .error {
        color: red;
    }
</style>
</head> <body> <div class="container"> <h1>Register Complaint</h1> <form id="complaintForm"> <textarea id="complaint" placeholder="Enter your complaint" required></textarea><br><br> <button type="submit">Submit</button> </form> </div> <script> document.getElementById('complaintForm').addEventListener('submit', function (event) { event.preventDefault(); 
        const complaint = document.getElementById('complaint').value;

        // Show alert message
        alert('Your complaint has been submitted successfully!');
    });
</script>
</body> </html>