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; margin: 0;
padding: 0; padding: 0;
overflow: hidden; overflow: hidden;
/* Entferne den Hintergrund, der den Schleier verursacht */
background-color: transparent; background-color: transparent;
} }
#image-container { #image {
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 50%; left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
max-width: 90%; max-width: 90%;
max-height: 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> </style>
</head> </head>
<body> <body>
<div id="image-container"> <img id="image" src="" alt="Image" style="display:none;">
<img id="image" src="" alt="Document">
<div id="document-id"></div>
</div>
<script> <script>
// Globale Variable, um den Status zu verfolgen
let isDisplayed = false;
window.addEventListener('message', function(event) { window.addEventListener('message', function(event) {
if (event.data.action === 'show') { if (event.data.action === 'show') {
// Zeige das spezifische Dokument basierend auf der URL
document.getElementById('image').src = event.data.imageUrl; document.getElementById('image').src = event.data.imageUrl;
document.getElementById('image').style.display = 'block';
// Zeige optional die Dokument-ID an (nur wenn Debug aktiviert ist) isDisplayed = true;
if (event.data.documentId && false) { // Setze auf true für Debug console.log("Showing image:", event.data.imageUrl);
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);
} else if (event.data.action === 'hide') { } 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) { document.addEventListener("keydown", function(event) {
if (event.key === "Escape") { if (event.key === "Escape" && isDisplayed) {
document.getElementById('image-container').style.display = 'none'; document.getElementById('image').style.display = 'none';
axios.post(`https://${GetParentResourceName()}/hideFrame`, {}) isDisplayed = false;
.then(function (response) {
console.log("Frame versteckt"); // Sende Nachricht zurück an den Client
fetch(`https://${GetParentResourceName()}/hideFrame`, {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({})
}) })
.catch(function (error) { .then(response => {
console.error("Fehler beim Verstecken des Frames:", error); 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> </script>
</body> </body>
</html> </html>