<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>User Input Form</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f0f8ff;
            margin: 0;
            padding: 20px;
        }
        h1 {
            text-align: center;
        }
        table {
            width: 100%;
            max-width: 600px;
            margin: 0 auto;
            border-collapse: collapse;
        }
        td {
            padding: 10px;
        }
        input, select, textarea {
            width: 100%;
            padding: 8px;
            margin-top: 5px;
        }
        input[type="submit"] {
            background-color: #4CAF50;
            color: white;
            border: none;
            cursor: pointer;
            padding: 10px;
            width: 100%;
        }
        input[type="submit"]:hover {
            background-color: #45a049;
        }
        .logo {
            display: block;
            margin: 0 auto;
            width: 150px;
        }
    </style>
</head>
<body>

<h1>User Input Form</h1>

<form action="/submit_form" method="POST" enctype="multipart/form-data">
    <!-- Valencia Logo -->
    <img src="valencia_logo.png" alt="Valencia Logo" class="logo">

    <table>
        <!-- First Name -->
        <tr>
            <td>First Name:</td>
            <td><input type="text" name="first_name" required></td>
        </tr>

        <!-- Last Name -->
        <tr>
            <td>Last Name:</td>
            <td><input type="text" name="last_name" required></td>
        </tr>

        <!-- Gender -->
        <tr>
            <td>Gender:</td>
            <td>
                <input type="radio" id="male" name="gender" value="male" required> Male
                <input type="radio" id="female" name="gender" value="female" required> Female
            </td>
        </tr>

        <!-- Favorite Color -->
        <tr>
            <td>Favorite Color:</td>
            <td>
                <input type="checkbox" id="red" name="color" value="Red"> Red
                <input type="checkbox" id="white" name="color" value="White"> White
                <input type="checkbox" id="blue" name="color" value="Blue"> Blue
            </td>
        </tr>

        <!-- Sport Selection -->
        <tr>
            <td>Favorite Sport:</td>
            <td>
                <select name="sport">
                    <option value="soccer">Soccer</option>
                    <option value="basketball">Basketball</option>
                    <option value="baseball">Baseball</option>
                    <option value="swimming">Swimming</option>
                    <option value="tennis">Tennis</option>
                    <option value="volleyball">Volleyball</option>
                    <option value="golf">Golf</option>
                    <option value="rugby">Rugby</option>
                    <option value="hockey">Hockey</option>
                    <option value="track_and_field">Track and Field</option>
                </select>
            </td>
        </tr>

        <!-- Global Warming Text Area -->
        <tr>
            <td>Write about Global Warming:</td>
            <td><textarea name="global_warming" rows="20" cols="50" required></textarea></td>
        </tr>

        <!-- Password -->
        <tr>
            <td>Password:</td>
            <td><input type="password" name="password" maxlength="10" required></td>
        </tr>

        <!-- File Upload -->
        <tr>
            <td>Upload File:</td>
            <td><input type="file" name="file_upload" required></td>
        </tr>

        <!-- Submit Button -->
        <tr>
            <td colspan="2">
                <input type="submit" value="Submit">
            </td>
        </tr>
    </table>
</form>

</body>
</html>
