|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Responsive Layout</title> |
|
|
<style> |
|
|
body { |
|
|
font-family: Arial, sans-serif; |
|
|
margin: 0; |
|
|
padding: 0; |
|
|
background-color: #f0f0f0; |
|
|
} |
|
|
|
|
|
.dropdown-container { |
|
|
display: flex; |
|
|
flex-wrap: wrap; |
|
|
justify-content: center; |
|
|
align-items: center; |
|
|
background-color: #ccc; |
|
|
padding: 10px; |
|
|
} |
|
|
|
|
|
.dropdown { |
|
|
flex: 1; |
|
|
margin: 5px; |
|
|
} |
|
|
|
|
|
.image-container { |
|
|
display: flex; |
|
|
flex-wrap: wrap; |
|
|
justify-content: center; |
|
|
align-items: center; |
|
|
padding: 20px; |
|
|
min-height: calc(100vh - 60px); |
|
|
} |
|
|
|
|
|
.image-box { |
|
|
flex: 0 0 calc(50% - 20px); |
|
|
max-width: calc(50% - 20px); |
|
|
margin: 10px; |
|
|
overflow: auto; |
|
|
max-height: calc(100vh - 100px); |
|
|
} |
|
|
|
|
|
.image-box img, |
|
|
.image-box .data-frame { |
|
|
max-width: 100%; |
|
|
height: auto; |
|
|
display: block; |
|
|
} |
|
|
|
|
|
.column-container { |
|
|
display: flex; |
|
|
background-color: #333; |
|
|
} |
|
|
|
|
|
.column { |
|
|
flex: 1; |
|
|
padding: 20px; |
|
|
} |
|
|
|
|
|
.column a { |
|
|
display: block; |
|
|
text-align: center; |
|
|
padding: 10px; |
|
|
text-decoration: none; |
|
|
color: #fff; |
|
|
font-weight: bold; |
|
|
} |
|
|
|
|
|
|
|
|
.data-frame { |
|
|
|
|
|
|
|
|
width: 100%; |
|
|
height: 100%; |
|
|
overflow: auto; |
|
|
white-space: nowrap; |
|
|
} |
|
|
|
|
|
@media only screen and (max-width: 600px) { |
|
|
|
|
|
.dropdown { |
|
|
flex: 100%; |
|
|
} |
|
|
|
|
|
.image-box { |
|
|
flex: 0 0 100%; |
|
|
max-width: 100%; |
|
|
} |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
<div class="dropdown-container"> |
|
|
<div class="dropdown"> |
|
|
<label for="docId">DocID:</label> |
|
|
<select id="docId"> |
|
|
<option value="" disabled selected>Select DocID</option> |
|
|
|
|
|
</select> |
|
|
</div> |
|
|
<div class="dropdown"> |
|
|
<label for="pageNumber">Page Number:</label> |
|
|
<select id="pageNumber"> |
|
|
<option value="" disabled selected>Select Page Number</option> |
|
|
|
|
|
</select> |
|
|
</div> |
|
|
</div> |
|
|
<div class="image-container"> |
|
|
<div class="image-box"> |
|
|
<img src="{{ url_for('static', filename='upload_input/tmp.png') }}" alt="Document"> |
|
|
</div> |
|
|
<div class="image-box"> |
|
|
{{ data.to_html(classes='data-frame', render_links=True, escape=False) | safe }} |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<script> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
fetch('your_doc_id_api_url') |
|
|
.then(response => response.json()) |
|
|
.then(data => { |
|
|
const docIdSelect = document.getElementById('docId'); |
|
|
data.forEach(option => { |
|
|
const optionElement = document.createElement('option'); |
|
|
optionElement.value = option.value; |
|
|
optionElement.textContent = option.label; |
|
|
docIdSelect.appendChild(optionElement); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
fetch('your_page_number_api_url') |
|
|
.then(response => response.json()) |
|
|
.then(data => { |
|
|
const pageNumberSelect = document.getElementById('pageNumber'); |
|
|
data.forEach(option => { |
|
|
const optionElement = document.createElement('option'); |
|
|
optionElement.value = option.value; |
|
|
optionElement.textContent = option.label; |
|
|
pageNumberSelect.appendChild(optionElement); |
|
|
}); |
|
|
}); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
|
|
|
