43 lines
1.5 KiB
HTML
43 lines
1.5 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<!-- <title>Frontend</title> -->
|
|
</head>
|
|
<body>
|
|
|
|
|
|
<!-- This iframe will hold the content from client.html -->
|
|
<!-- Passing the API endpoint as a query parameter to the srcdoc attribute -->
|
|
<!-- srcdoc="{{ client_content }}?apiEndpoint={{ api_endpoint }}/"> -->
|
|
|
|
<iframe id="client-frame"
|
|
style="width: 100%; height: 100vh;"
|
|
srcdoc="{{ client_content }}">
|
|
</iframe>
|
|
|
|
<script>
|
|
// Extract apiEndpoint for use in your frontend code...
|
|
const apiEndpoint = '{{ api_endpoint }}'; // Templating syntax (Jinja2)
|
|
const useModel = '{{ use_model }}'; // Templating syntax (Jinja2)
|
|
// Tell the iframe about the apiEndpoing
|
|
document.getElementById('client-frame').contentWindow.apiEndpoint = apiEndpoint;
|
|
document.getElementById('client-frame').contentWindow.useModel = useModel;
|
|
console.log("index.html - API Endpoint: ", apiEndpoint);
|
|
console.log("index.html - use model: ", useModel);
|
|
</script>
|
|
|
|
<!-- Responsive scaling and some padding -->
|
|
<script>
|
|
const clientFrame = document.getElementById('client-frame');
|
|
|
|
function resizeIframe() {
|
|
clientFrame.style.height = window.innerHeight - 50 + 'px'; // Adjust the subtraction for padding/margins if needed
|
|
}
|
|
|
|
window.addEventListener('resize', resizeIframe);
|
|
resizeIframe(); // Call it once on page load
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|