OneCompiler

V4

109

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; } .dropdown { position: relative; display: inline-block; margin-right: 10px; } .dropdown button { padding: 10px; background-color: #4CAF50; color: white; border: none; cursor: pointer; width: 150px; } .dropdown button:hover { background-color: #45a049; } .dropdown-content { display: none; position: absolute; background-color: white; min-width: 150px; box-shadow: 0px 8px 16px rgba(0,0,0,0.2); z-index: 1; padding: 10px; } .dropdown-content input { margin-right: 5px; } .dropdown-content label { display: block; margin-bottom: 5px; cursor: pointer; } .dropdown:hover .dropdown-content { display: block; } button[type="submit"] { padding: 10px 20px; background-color: #4CAF50; color: white; border: none; cursor: pointer; margin-top: 20px; } button[type="submit"]:hover { background-color: #45a049; } </style> </head> <body> <div class="container"> <h1>Data Filter Application</h1> <form method="POST"> <!-- Dropdown Filters --> <div class="form-section"> <!-- Years --> <div class="dropdown"> <button type="button">Years</button> <div class="dropdown-content"> {% for year in years %} <label><input type="checkbox" name="years" value="{{ year }}"> {{ year }}</label> {% endfor %} </div> </div> 
            <!-- Areas -->
            <div class="dropdown">
                <button type="button">Areas</button>
                <div class="dropdown-content">
                    {% for area in areas %}
                        <label><input type="checkbox" name="areas" value="{{ area }}"> {{ area }}</label>
                    {% endfor %}
                </div>
            </div>

            <!-- Main Age -->
            <div class="dropdown">
                <button type="button">Main Age</button>
                <div class="dropdown-content">
                    {% for age in main_age %}
                        <label><input type="checkbox" name="main_age" value="{{ age }}"> {{ age }}</label>
                    {% endfor %}
                </div>
            </div>

            <!-- Sub Age 1 -->
            <div class="dropdown">
                <button type="button">Sub Age 1</button>
                <div class="dropdown-content">
                    {% for age in sub_age_1 %}
                        <label><input type="checkbox" name="sub_age_1" value="{{ age }}"> {{ age }}</label>
                    {% endfor %}
                </div>
            </div>
        </div>

        <div class="form-section">
            <!-- Sub Age 2 -->
            <div class="dropdown">
                <button type="button">Sub Age 2</button>
                <div class="dropdown-content">
                    {% for age in sub_age_2 %}
                        <label><input type="checkbox" name="sub_age_2" value="{{ age }}"> {{ age }}</label>
                    {% endfor %}
                </div>
            </div>

            <!-- Genders -->
            <div class="dropdown">
                <button type="button">Genders</button>
                <div class="dropdown-content">
                    {% for gender in genders %}
                        <label><input type="checkbox" name="genders" value="{{ gender }}"> {{ gender }}</label>
                    {% endfor %}
                </div>
            </div>

            <!-- Ethnics -->
            <div class="dropdown">
                <button type="button">Ethnics</button>
                <div class="dropdown-content">
                    {% for ethnic in ethnics %}
                        <label><input type="checkbox" name="ethnics" value="{{ ethnic }}"> {{ ethnic }}</label>
                    {% endfor %}
                </div>
            </div>
        </div>

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

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