V3
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>