mirror of
https://github.com/kolbytn/mindcraft.git
synced 2025-03-28 14:56:24 +01:00
69 lines
2.1 KiB
HTML
69 lines
2.1 KiB
HTML
<html>
|
|
<head>
|
|
<title>Viewer</title>
|
|
<style>
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
#container {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
width: 100%;
|
|
height: 100vh;
|
|
}
|
|
.iframe-wrapper {
|
|
border: none;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="container">
|
|
<iframe data-port="3000" src="http://localhost:3000" class="iframe-wrapper"></iframe>
|
|
<iframe data-port="3001" src="http://localhost:3001" class="iframe-wrapper"></iframe>
|
|
<iframe data-port="3002" src="http://localhost:3002" class="iframe-wrapper"></iframe>
|
|
<iframe data-port="3003" src="http://localhost:3003" class="iframe-wrapper"></iframe>
|
|
</div>
|
|
<script>
|
|
function updateLayout() {
|
|
let width = window.innerWidth;
|
|
let height = window.innerHeight;
|
|
let iframes = document.querySelectorAll('.iframe-wrapper');
|
|
if (width > height) {
|
|
iframes.forEach(function(iframe) {
|
|
iframe.style.width = '50%';
|
|
iframe.style.height = '50%';
|
|
});
|
|
} else {
|
|
iframes.forEach(function(iframe) {
|
|
iframe.style.width = '100%';
|
|
iframe.style.height = '25%';
|
|
});
|
|
}
|
|
}
|
|
window.addEventListener('resize', updateLayout);
|
|
window.addEventListener('load', updateLayout);
|
|
let iframes = document.querySelectorAll('.iframe-wrapper');
|
|
iframes.forEach(function(iframe) {
|
|
let port = iframe.getAttribute('data-port');
|
|
let loaded = false;
|
|
function checkServer() {
|
|
fetch('http://localhost:' + port, { method: 'HEAD' })
|
|
.then(function(response) {
|
|
if (response.ok && !loaded) {
|
|
iframe.src = 'http://localhost:' + port;
|
|
}
|
|
})
|
|
.catch(function(error) {});
|
|
}
|
|
iframe.onload = function() {
|
|
loaded = true;
|
|
};
|
|
iframe.onerror = function() {
|
|
loaded = false;
|
|
};
|
|
setInterval(checkServer, 3000);
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|