iasjkk
/

html_codes

Model card Files Files and versions

html_codes / tmp.html

iasjkk's picture

Upload tmp.html

b51fd38 verified over 2 years ago

Raw History Blame Contribute Delete

4.7 kB

	<!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); /* 60px is the height of the dropdown container */
	}

	.image-box {
	flex: 0 0 calc(50% - 20px);
	max-width: calc(50% - 20px);
	margin: 10px;
	overflow: auto;
	max-height: calc(100vh - 100px); /* Adjust as needed */
	}

	.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;
	}

	/* Add styles for the data frame */
	.data-frame {
	/* Add your styles for the data frame here */
	/* For example: */
	width: 100%;
	height: 100%;
	overflow: auto;
	white-space: nowrap; /* Prevent line breaks */
	}

	@media only screen and (max-width: 600px) {
	/* Adjust styles for smaller screens */
	.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>
	<!-- Add your DocID options dynamically using JavaScript -->
	</select>
	</div>
	<div class="dropdown">
	<label for="pageNumber">Page Number:</label>
	<select id="pageNumber">
	<option value="" disabled selected>Select Page Number</option>
	<!-- Add your Page Number options dynamically using JavaScript -->
	</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>

	<!-- Include your JavaScript for fetching dropdown options and updating them here -->
	<script>
	// Example JavaScript for fetching dropdown options from API
	// Replace this with your actual API logic

	// Fetch DocID options
	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 Page Number options
	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>