52 lines
2.6 KiB
HTML
52 lines
2.6 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline'; img-src 'self'" />
|
||
<title>AeroMC</title>
|
||
<!--
|
||
Neustart-Bildschirm (Mod-Schalter): liegt über dem Minecraft-Fenster, während
|
||
das Spiel beendet, die Mods umgestellt und Minecraft wieder gestartet wird –
|
||
bis man wieder auf dem Server bzw. in der Welt ist. Gleiches Bild wie der
|
||
Ladebildschirm im Spiel; Balken und Text an derselben Stelle (83,25 % der Höhe).
|
||
Der Launcher steuert die Seite über setze({ text, prozent }) und ausblenden().
|
||
-->
|
||
<style>
|
||
html, body { margin: 0; height: 100%; overflow: hidden; background: #0a0e1a; cursor: default; user-select: none; }
|
||
#bild { position: fixed; inset: 0; background: #0a0e1a url('assets/spieldesign/neustart.jpg') center / cover no-repeat; }
|
||
#ganz { position: fixed; inset: 0; opacity: 0; transition: opacity .35s ease; }
|
||
#ganz.sichtbar { opacity: 1; }
|
||
#balken {
|
||
position: absolute; left: 22%; right: 22%; top: 83.25%; height: max(8px, 1.15vh); transform: translateY(-50%);
|
||
border: max(1px, .18vh) solid #4fd2ff; padding: max(1px, .18vh); box-sizing: content-box; overflow: hidden;
|
||
}
|
||
#fuellung { height: 100%; width: 0; background: #4fd2ff; transition: width .4s ease; }
|
||
#balken.unbestimmt #fuellung { width: 30%; animation: wandern 1.3s ease-in-out infinite; }
|
||
@keyframes wandern { 0% { transform: translateX(-110%); } 100% { transform: translateX(370%); } }
|
||
#text {
|
||
position: absolute; left: 50%; top: 88.5%; transform: translateX(-50%);
|
||
padding: .55vh 1.6vh .7vh; border-radius: .9vh; background: rgba(6, 12, 28, .7);
|
||
color: #ecf4ff; font: 600 max(13px, 3.1vh) 'Segoe UI', sans-serif; white-space: nowrap;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div id="ganz">
|
||
<div id="bild"></div>
|
||
<div id="balken" class="unbestimmt"><div id="fuellung"></div></div>
|
||
<div id="text">Mods werden übernommen …</div>
|
||
</div>
|
||
<script>
|
||
function setze(stand) {
|
||
if (stand.text) document.getElementById('text').textContent = stand.text;
|
||
const balken = document.getElementById('balken');
|
||
const hatProzent = typeof stand.prozent === 'number';
|
||
balken.classList.toggle('unbestimmt', !hatProzent);
|
||
document.getElementById('fuellung').style.width = hatProzent ? Math.max(2, Math.min(100, stand.prozent)) + '%' : '';
|
||
}
|
||
function ausblenden() { document.getElementById('ganz').classList.remove('sichtbar'); }
|
||
requestAnimationFrame(() => document.getElementById('ganz').classList.add('sichtbar'));
|
||
</script>
|
||
</body>
|
||
</html>
|