1
0
Fork 0
forked from Simnation/Main

Update index.html

This commit is contained in:
Nordi98 2025-06-26 03:17:13 +02:00
parent e649e2f470
commit affc29cc04

View file

@ -10,75 +10,72 @@
margin: 0;
padding: 0;
overflow: hidden;
/* Entferne den Hintergrund, der den Schleier verursacht */
background-color: transparent;
}
#image-container {
#image {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-width: 90%;
max-height: 90%;
display: none;
}
#image {
max-width: 100%;
max-height: 100%;
}
#document-id {
position: absolute;
bottom: 10px;
left: 10px;
color: white;
background-color: rgba(0, 0, 0, 0.5);
padding: 5px;
border-radius: 3px;
font-family: Arial, sans-serif;
display: none; /* Verstecke die Dokument-ID standardmäßig */
}
</style>
</head>
<body>
<div id="image-container">
<img id="image" src="" alt="Document">
<div id="document-id"></div>
</div>
<img id="image" src="" alt="Image" style="display:none;">
<script>
// Globale Variable, um den Status zu verfolgen
let isDisplayed = false;
window.addEventListener('message', function(event) {
if (event.data.action === 'show') {
// Zeige das spezifische Dokument basierend auf der URL
document.getElementById('image').src = event.data.imageUrl;
// Zeige optional die Dokument-ID an (nur wenn Debug aktiviert ist)
if (event.data.documentId && false) { // Setze auf true für Debug
document.getElementById('document-id').textContent = "Dokument: " + event.data.documentId;
document.getElementById('document-id').style.display = 'block';
} else {
document.getElementById('document-id').style.display = 'none';
}
document.getElementById('image-container').style.display = 'block';
// Logge die Dokument-Informationen zur Fehlersuche
console.log("Dokument angezeigt:", event.data);
document.getElementById('image').style.display = 'block';
isDisplayed = true;
console.log("Showing image:", event.data.imageUrl);
} else if (event.data.action === 'hide') {
document.getElementById('image-container').style.display = 'none';
document.getElementById('image').style.display = 'none';
isDisplayed = false;
console.log("Hiding image");
}
});
document.addEventListener("keydown", function(event) {
if (event.key === "Escape") {
document.getElementById('image-container').style.display = 'none';
axios.post(`https://${GetParentResourceName()}/hideFrame`, {})
.then(function (response) {
console.log("Frame versteckt");
if (event.key === "Escape" && isDisplayed) {
document.getElementById('image').style.display = 'none';
isDisplayed = false;
// Sende Nachricht zurück an den Client
fetch(`https://${GetParentResourceName()}/hideFrame`, {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({})
})
.catch(function (error) {
console.error("Fehler beim Verstecken des Frames:", error);
.then(response => {
console.log("Frame hidden successfully");
})
.catch(error => {
console.error("Error hiding frame:", error);
});
}
});
// Sicherheitsmechanismus: Wenn die Seite geladen wird, stelle sicher, dass der Focus zurückgesetzt wird
window.onload = function() {
fetch(`https://${GetParentResourceName()}/pageLoaded`, {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({})
})
.catch(error => {
console.error("Error notifying page load:", error);
});
};
</script>
</body>
</html>