OneCompiler

V3

130

Example heading with h2 size

Example heading with h3 size

Following is sample java code.

int i = 10;
if(i>0){
    System.out.println('positive');
}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Filter Data</title> <style> body { font-family: Arial, sans-serif; margin: 20px; } .container { max-width: 1000px; margin: auto; } .form-section { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; margin-bottom: 20px; } .form-group { display: flex; flex-direction: column; margin-right: 10px; } .form-group label { margin-bottom: 5px; font-weight: bold; } select { padding: 5px; width: 150px; } button { padding: 10px 20px; background-color: #4CAF50; color: white; border: none; cursor: pointer; margin-top: 20px; } button:hover { background-color: #45a049; } .filtered-data { margin-top: 20px; padding: 10px; border: 1px solid #ddd; background-color: #f9f9f9; } </style> </head> <body> <div class="container"> <h1>Data Filter Application</h1> <form method="POST"> <!-- Dropdown Filters --> <div class="form-section"> <!-- Years --> <div class="form-group"> <label for="years">Years</label> <select name="years" id="years" multiple> {% for year in years %} <option value="{{ year }}">{{ year }}</option> {% endfor %} </select> </div>
            <!-- Areas -->
            <div class="form-group">
                <label for="areas">Areas</label>
                <select name="areas" id="areas" multiple>
                    {% for area in areas %}
                        <option value="{{ area }}">{{ area }}</option>
                    {% endfor %}
                </select>
            </div>

            <!-- Main Age -->
            <div class="form-group">
                <label for="main_age">Main Age</label>
                <select name="main_age" id="main_age" multiple>
                    {% for age in main_age %}
                        <option value="{{ age }}">{{ age }}</option>
                    {% endfor %}
                </select>
            </div>

            <!-- Sub Age 1 -->
            <div class="form-group">
                <label for="sub_age_1">Sub Age 1</label>
                <select name="sub_age_1" id="sub_age_1" multiple>
                    {% for age in sub_age_1 %}
                        <option value="{{ age }}">{{ age }}</option>
                    {% endfor %}
                </select>
            </div>
        </div>

        <div class="form-section">
            <!-- Sub Age 2 -->
            <div class="form-group">
                <label for="sub_age_2">Sub Age 2</label>
                <select name="sub_age_2" id="sub_age_2" multiple>
                    {% for age in sub_age_2 %}
                        <option value="{{ age }}">{{ age }}</option>
                    {% endfor %}
                </select>
            </div>

            <!-- Genders -->
            <div class="form-group">
                <label for="genders">Genders</label>
                <select name="genders" id="genders" multiple>
                    {% for gender in genders %}
                        <option value="{{ gender }}">{{ gender }}</option>
                    {% endfor %}
                </select>
            </div>

            <!-- Ethnics -->
            <div class="form-group">
                <label for="ethnics">Ethnics</label>
                <select name="ethnics" id="ethnics" multiple>
                    {% for ethnic in ethnics %}
                        <option value="{{ ethnic }}">{{ ethnic }}</option>
                    {% endfor %}
                </select>
            </div>
        </div>

        <!-- Submit Button -->
        <div class="form-section">
            <button type="submit">Filter</button>
        </div>
    </form>

    <!-- Display Filtered Data -->
    {% if filtered_data %}
        <div class="filtered-data">
            <h2>Filtered Data:</h2>
            <pre>{{ filtered_data }}</pre>
        </div>
    {% endif %}
</div>
</body> </html>