mirror of
https://github.com/TheErrorExe/blockattack
synced 2025-09-05 21:11:00 +02:00
Update index.html
This commit is contained in:
parent
d0ff49df62
commit
387b43ccd5
50
index.html
50
index.html
@ -15,6 +15,7 @@
|
|||||||
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 */
|
||||||
@ -25,22 +26,37 @@
|
|||||||
background-size: cover;
|
background-size: cover;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
margin-top: 20px;
|
margin-top: 20px;
|
||||||
|
z-index: 999;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Der Container für die gesamte Seite */
|
/* Alle Elemente der Seite sollen unabhängig voneinander positioniert werden */
|
||||||
#page-container {
|
body, html {
|
||||||
transition: transform 1s ease-in-out;
|
overflow: hidden;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
height: 100%;
|
||||||
|
background-color: #f0f0f0;
|
||||||
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Stil für den zusammenfallenden Effekt der Seite */
|
.falling {
|
||||||
.collapsed {
|
position: absolute;
|
||||||
transform: translateY(100vh); /* Die Seite wird nach unten verschoben */
|
transition: all 1s ease-in-out;
|
||||||
opacity: 0; /* Die Seite wird unsichtbar */
|
animation: fall 2s forwards;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Fall-Animation */
|
||||||
|
@keyframes fall {
|
||||||
|
0% {
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: translateY(100vh);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="page-container">
|
|
||||||
<header>
|
<header>
|
||||||
<nav>
|
<nav>
|
||||||
<ul>
|
<ul>
|
||||||
@ -93,7 +109,7 @@
|
|||||||
<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>
|
||||||
</div>
|
|
||||||
<script>
|
<script>
|
||||||
// Hardcodierte Beschreibungen für jedes Feature
|
// Hardcodierte Beschreibungen für jedes Feature
|
||||||
document.querySelectorAll('.card').forEach(card => {
|
document.querySelectorAll('.card').forEach(card => {
|
||||||
@ -117,20 +133,18 @@
|
|||||||
|
|
||||||
// TNT-Trigger und Animationsfunktion
|
// TNT-Trigger und Animationsfunktion
|
||||||
function triggerTNT() {
|
function triggerTNT() {
|
||||||
const tntBlock = document.getElementById('tnt');
|
const elements = document.querySelectorAll('header, section, footer, .card, .tnt-block, .tnt-gif');
|
||||||
const tntGif = document.getElementById('tntGif');
|
|
||||||
|
|
||||||
// Zeige das GIF
|
// Zeige das GIF
|
||||||
|
const tntGif = document.getElementById('tntGif');
|
||||||
tntGif.style.display = 'block';
|
tntGif.style.display = 'block';
|
||||||
tntBlock.style.display = 'none';
|
|
||||||
|
|
||||||
// Nach 5 Sekunden das GIF verschwinden lassen und die Seite nach unten verschieben
|
// Alle Seiten-Elemente fallen lassen
|
||||||
setTimeout(() => {
|
elements.forEach(el => {
|
||||||
tntGif.style.display = 'none';
|
el.classList.add('falling');
|
||||||
document.getElementById('page-container').classList.add('collapsed'); // Seite "fällt nach unten"
|
});
|
||||||
}, 5000);
|
|
||||||
|
|
||||||
// Seite nach 10 Sekunden neu laden
|
// Nach 10 Sekunden die Seite neu laden
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
location.reload();
|
location.reload();
|
||||||
}, 10000);
|
}, 10000);
|
||||||
|
Loading…
x
Reference in New Issue
Block a user