TheErrorExe/ba
1
0
Fork 0
mirror of https://github.com/TheErrorExe/blockattack synced 2025-09-05 21:11:00 +02:00
Code Issues Packages Projects Releases Wiki Activity

Update index.html

Browse Source
This commit is contained in:
TheErrorExe 2025-01-06 19:48:18 +01:00 committed by GitHub
parent 387b43ccd5
commit 0fd3b61fb7
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 32 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

72
index.html
View File

@ -15,7 +15,6 @@
background-size: cover; background-size: cover;
cursor: pointer; cursor: pointer;
margin-top: 20px; margin-top: 20px;
z-index: 999;
} }
/* Stil für das GIF */ /* Stil für das GIF */
@ -26,33 +25,13 @@
background-size: cover; background-size: cover;
cursor: pointer; cursor: pointer;
margin-top: 20px; margin-top: 20px;
z-index: 999; background-image: url('tnt-explode.gif');
background-size: cover;
} }
/* Alle Elemente der Seite sollen unabhängig voneinander positioniert werden */ /* Stil für das verstecken von Elementen */
body, html { .hidden {
overflow: hidden; visibility: hidden;
margin: 0;
padding: 0;
height: 100%;
background-color: #f0f0f0;
position: relative;
}
.falling {
position: absolute;
transition: all 1s ease-in-out;
animation: fall 2s forwards;
}
/* Fall-Animation */
@keyframes fall {
0% {
transform: translateY(0);
}
100% {
transform: translateY(100vh);
}
} }
</style> </style>
</head> </head>
@ -95,7 +74,7 @@
<section id="tnt-section"> <section id="tnt-section">
<h2>Klick auf das TNT</h2> <h2>Klick auf das TNT</h2>
<div id="tnt" class="tnt-block" onclick="triggerTNT()"></div> <div id="tnt" class="tnt-block" onclick="triggerTNT()"></div>
<div id="tntGif" class="tnt-gif" style="background-image: url('tnt-explode.gif');"></div> <div id="tntGif" class="tnt-gif"></div>
</section> </section>
<section id="home"> <section id="home">
@ -109,7 +88,6 @@
<br> <br>
<a href="/privacy.html" style="display: inline;">Privacy</a><p style="display: inline;"> | </p><a href="/terms.html" style="display: inline;">Terms of Service</a> <a href="/privacy.html" style="display: inline;">Privacy</a><p style="display: inline;"> | </p><a href="/terms.html" style="display: inline;">Terms of Service</a>
</footer> </footer>
<script> <script>
// Hardcodierte Beschreibungen für jedes Feature // Hardcodierte Beschreibungen für jedes Feature
document.querySelectorAll('.card').forEach(card => { document.querySelectorAll('.card').forEach(card => {
@ -133,21 +111,35 @@
// TNT-Trigger und Animationsfunktion // TNT-Trigger und Animationsfunktion
function triggerTNT() { function triggerTNT() {
const elements = document.querySelectorAll('header, section, footer, .card, .tnt-block, .tnt-gif'); const tntBlock = document.getElementById('tnt');
// Zeige das GIF
const tntGif = document.getElementById('tntGif'); const tntGif = document.getElementById('tntGif');
tntGif.style.display = 'block'; const allElements = document.querySelectorAll('body *:not(#tntGif)'); // Alle Elemente außer dem GIF
// Alle Seiten-Elemente fallen lassen
elements.forEach(el => {
el.classList.add('falling');
});
// Nach 10 Sekunden die Seite neu laden // Spiele den TNT Boom Sound ab
const boomSound = new Audio('tnt-boom.mp3');
boomSound.play();
// Zeige das GIF
tntGif.style.display = 'block';
// Verstecke alle Elemente nach 4 Sekunden
setTimeout(() => { setTimeout(() => {
location.reload(); allElements.forEach(el => {
}, 10000); el.classList.add('hidden');
});
}, 4000);
// Nach 7 Sekunden alle Elemente wieder sichtbar machen
setTimeout(() => {
allElements.forEach(el => {
el.classList.remove('hidden');
});
}, 11000);
// Verhindere das Abspielen des GIFs im Hintergrund, wenn es nicht sichtbar ist
tntGif.addEventListener('animationend', () => {
tntGif.style.display = 'none'; // Stoppe das GIF
});
} }
</script> </script>
</body> </body>