mirror of
https://github.com/infinition/Bjorn.git
synced 2025-12-13 08:04:59 +00:00
165 lines
5.4 KiB
HTML
165 lines
5.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
|
<title>Bjorn Cyberviking - Bjorn</title>
|
|
<link rel="icon" href="web/images/favicon.ico" type="image/x-icon">
|
|
<link rel="stylesheet" href="web/css/global.css">
|
|
<link rel="manifest" href="manifest.json">
|
|
<link rel="apple-touch-icon" sizes="192x192" href="/web/images/icon-192x192.png">
|
|
<meta name="apple-mobile-web-app-capable" content="yes">
|
|
<meta name="mobile-web-app-capable" content="yes">
|
|
<meta name="theme-color" content="#333">
|
|
<script src="web/js/global.js"></script>
|
|
<style>
|
|
|
|
.image-container {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: calc(100vh - 70px); /* Adjust height to fit with mobile */
|
|
}
|
|
|
|
.image-container img {
|
|
max-height: 100%;
|
|
max-width: 100%;
|
|
height: -webkit-fill-available;
|
|
cursor: pointer;
|
|
transition: transform 0.2s ease-in-out;
|
|
}
|
|
|
|
.image-container img:active {
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
.topbar.hidden {
|
|
display: none;
|
|
}
|
|
|
|
.image-container.fullscreen img {
|
|
height: 100vh;
|
|
width: auto;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
|
|
|
|
.image-container {
|
|
height: calc(100vh - 60px);
|
|
}
|
|
}
|
|
|
|
</style>
|
|
<script src="web/js/global.js"></script>
|
|
|
|
<script defer>
|
|
var delay = 5000; // Default value in case the fetch fails
|
|
var intervalId;
|
|
|
|
function fetchWebDelay() {
|
|
fetch('/get_web_delay')
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
delay = data.web_delay;
|
|
startLiveview(); // Start live view after setting the delay
|
|
})
|
|
.catch(error => {
|
|
console.error('Error fetching web delay:', error);
|
|
startLiveview(); // Start live view even if fetch fails
|
|
});
|
|
}
|
|
|
|
function updateImage() {
|
|
var image = document.getElementById("screenImage_Home");
|
|
var newImage = new Image();
|
|
newImage.onload = function() {
|
|
image.src = newImage.src; // Update only if the new image loads successfully
|
|
};
|
|
newImage.onerror = function() {
|
|
console.warn("New image could not be loaded, keeping the previous image.");
|
|
};
|
|
newImage.src = "screen.png?t=" + new Date().getTime(); // Prevent caching
|
|
}
|
|
|
|
function startLiveview() {
|
|
updateImage(); // Immediately update the image
|
|
intervalId = setInterval(updateImage, delay); // Then update at the specified interval
|
|
}
|
|
|
|
function stopLiveview() {
|
|
clearInterval(intervalId);
|
|
}
|
|
|
|
function resizeImage(event) {
|
|
var image = document.getElementById("screenImage_Home");
|
|
var height = parseFloat(window.getComputedStyle(image).height);
|
|
if (event.deltaY < 0) {
|
|
// Scroll up, increase height
|
|
height *= 1.1;
|
|
} else {
|
|
// Scroll down, decrease height
|
|
height /= 1.1;
|
|
}
|
|
image.style.height = height + 'px';
|
|
image.style.width = 'auto'; // Ensure aspect ratio is maintained
|
|
}
|
|
|
|
function toggleMenu() {
|
|
var topbar = document.querySelector('.topbar');
|
|
var bottombar = document.querySelector('.bottombar');
|
|
var console = document.querySelector('.console');
|
|
var imageContainer = document.querySelector('.image-container');
|
|
if (topbar.style.display === 'flex') {
|
|
topbar.style.display = 'none';
|
|
imageContainer.style.width = '100%'; // Adjust width when toolbar is hidden
|
|
} else {
|
|
topbar.style.display = 'flex';
|
|
imageContainer.style.width = 'calc(100%)'; // Adjust width when toolbar is visible
|
|
}
|
|
if (bottombar) {
|
|
if (bottombar.style.display === 'grid') {
|
|
bottombar.style.display = 'none';
|
|
} else {
|
|
bottombar.style.display = 'grid';
|
|
}
|
|
}
|
|
if (console) {
|
|
if (console.style.display === 'grid') {
|
|
console.style.display = 'none';
|
|
} else {
|
|
console.style.display = 'grid';
|
|
imageContainer.style.width = 'calc(100%)'; // Adjust width when toolbar is visible
|
|
}
|
|
}
|
|
adjustImageHeight(); // Adjust image height after toggling toolbar
|
|
}
|
|
|
|
function adjustImageHeight() {
|
|
var windowHeight = window.innerHeight;
|
|
var image = document.getElementById("screenImage_Home");
|
|
image.style.height = windowHeight + 'px';
|
|
image.style.width = 'auto'; // Maintain aspect ratio
|
|
}
|
|
|
|
window.addEventListener('load', () => {
|
|
fetchWebDelay(); // Fetch web delay on load
|
|
adjustImageHeight();
|
|
});
|
|
window.addEventListener('beforeunload', stopLiveview);
|
|
window.addEventListener('wheel', resizeImage);
|
|
window.addEventListener('resize', adjustImageHeight); // Adjust height on window resize
|
|
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<main>
|
|
<div class="image-container">
|
|
<img id="screenImage_Home" src="screen.png" onclick="toggleMenu()" alt="Bjorn">
|
|
</div>
|
|
</main>
|
|
|
|
|
|
</body>
|
|
</html>
|