<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Filter Student Records</title>
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Filter Student Records</title>
    <style>
        /* Modern Minimalist CSS Variable Setup */
        :root {
            --primary-color: #2563eb;
            --primary-hover: #1d4ed8;
            --bg-color: #f8fafc;
            --card-bg: #ffffff;
            --text-color: #1e293b;
            --border-color: #e2e8f0;
        }

        /* Centered Layout and Smooth Typography */
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            background-color: var(--bg-color);
            color: var(--text-color);
            margin: 0;
            padding: 40px 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 80vh;
        }

        /* Clean Card Wrapper */
        .search-card {
            width: 100%;
            max-width: 450px;
            background: var(--card-bg);
            padding: 35px;
            border-radius: 12px;
            box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
        }

        h2 {
            margin-top: 0;
            margin-bottom: 24px;
            color: #0f172a;
            font-size: 24px;
            text-align: center;
        }

        /* Stacked Form Controls */
        .form-group {
            margin-bottom: 20px;
        }

        label {
            display: block;
            font-weight: 600;
            margin-bottom: 8px;
            font-size: 14px;
            color: #475569;
        }

        /* Responsive Select Dropdowns */
        select {
            width: 100%;
            padding: 12px 16px;
            border: 1px solid var(--border-color);
            border-radius: 8px;
            background-color: #fff;
            font-size: 15px;
            outline: none;
            box-sizing: border-box;
            transition: all 0.2s ease-in-out;
            color: var(--text-color);
        }

        /* Highlight blue focus ring when clicking fields */
        select:focus {
            border-color: var(--primary-color);
            box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
        }

        /* Full Width Primary Action Button */
        button[type="submit"] {
            width: 100%;
            padding: 12px 20px;
            border: none;
            border-radius: 8px;
            background-color: var(--primary-color);
            color: white;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: background 0.2s ease-in-out;
            margin-top: 10px;
        }

        button[type="submit"]:hover {
            background-color: var(--primary-hover);
        }
    </style>
</head>

</head>
<body>
    <body>
    <div class="search-card">
        <h2>Search Students</h2>
        
        <form action="result.php" method="POST">
            <!-- Department Selection Group -->
            <div class="form-group">
                <label for="department">Department</label>
                <select name="department" id="department" required>
                    <option value="">-- Select Department --</option>
                    <option value="STATISTICS">STATISTICS</option>
                    <option value="SCIENCE LABORATORY TECHNOLOGY">SCIENCE LABORATORY TECHNOLOGY</option>
                    <option value="AGRICULTURAL TECHNOLOGY">AGRICULTURAL TECHNOLOGY</option>
                     <option value="APPLIED SCIENCE (PHYSICS WITH ELECTRONICS) (PHYSICS WITH ELECTRONICS)">APPLIED SCIENCE (PHYSICS WITH ELECTRONICS) (PHYSICS WITH ELECTRONICS)</option>
                    <option value="APPLIED SCIENCE (BIOCHEMISTRY) (BIOCHEMISTRY)">APPLIED SCIENCE (BIOCHEMISTRY) (BIOCHEMISTRY)</option>
                    <option value="APPLIED SCIENCE (CHEMISTRY) (CHEMISTRY)">APPLIED SCIENCE (CHEMISTRY) (CHEMISTRY)</option>
                    
                    <option value="APPLIED SCIENCE (ENVIRONMENTAL BIOLOGY) (ENVIRONMENTAL BIOLOGY)">APPLIED SCIENCE (ENVIRONMENTAL BIOLOGY) (ENVIRONMENTAL BIOLOGY)</option>
                     
                      <option value="APPLIED SCIENCE (MICROBIOLOGY) (MICROBIOLOGY)">APPLIED SCIENCE (MICROBIOLOGY) (MICROBIOLOGY)</option>
                      
                      <option value="Computer Science">Computer Science</option>
                          <option value="Library and Information Science">Library and Information Science</option>
                             <option value="Office Technology and Management">Office Technology and Management</option>
                            <option value="Multimedia Technology">Multimedia Technology</option>
                         <option value="COMPUTER SCIENCE (NETWORKING AND CLOUD COMPUTING)">COMPUTER SCIENCE (NETWORKING AND CLOUD COMPUTING)</option>
                          <option value="COMPUTER SCIENCE (SOFTWARE AND WEB DEVELOPMENT)">COMPUTER SCIENCE (SOFTWARE AND WEB DEVELOPMENT)</option>
                </select>
            </div>

            <!-- Level Selection Group -->
            <div class="form-group">
                <label for="level">Level</label>
                <select name="level" id="level" required>
                    <option value="">-- Select Level --</option>
                    <option value="ND I">ND I</option>
                    <option value="ND II">ND II</option>
                    <option value="HND I">HND I</option>
                    <option value="HND II">HND II</option>
                </select>
            </div>

            <button type="submit">Filter Results</button>
        </form>
    </div>
</body>

</body>
</html>
