169 lines
7.6 KiB
HTML
169 lines
7.6 KiB
HTML
<!doctype html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<link rel="stylesheet" href="style.css" />
|
||
<title>Survival Text</title>
|
||
</head>
|
||
<body>
|
||
<div id="landingpage" class="hidden">
|
||
<div class="landingpage-content-box">
|
||
<h1>Das letzte Summen</h1>
|
||
<p id="intro-text">
|
||
Die Welt, die du kanntest, ist nicht tot. Sie wurde neu geschrieben –
|
||
<br />
|
||
von einem Flüstern im Wind, das alles Leben verhöhnt. Du wolltest
|
||
entkommen. Du bist nur tiefer gefallen.
|
||
</p>
|
||
<button id="continue-btn" class="hidden">Spielstand Laden</button>
|
||
<button id="initial-start-btn">Spiel starten</button>
|
||
</div>
|
||
</div>
|
||
<div id="intro-container" class="hidden">
|
||
<div id="prolog-1">
|
||
<div class="prolog-text">
|
||
PROLOG <br />
|
||
Erinnerst du dich? Erinnerst du dich an das Summen? Dieses endlose,
|
||
sanfte Brummen an einem faulen Nachmittag im Juli. Das goldene Lied
|
||
des Sommers, das von den Lavendelfeldern und den blühenden Apfelbäumen
|
||
aufstieg. Wir dachten, es ginge um den Honig. Ein Luxus, auf den man
|
||
verzichten kann. Dann dachten wir, es ginge um die Ernten. Wir bauten
|
||
Windfarmen und züchteten neue Sorten. Wir waren arrogant. Wir dachten,
|
||
wir könnten die Natur überlisten. Aber wir haben uns geirrt. So
|
||
schrecklich geirrt. Die Bienen waren nicht die Gärtner unseres
|
||
Planeten. Sie waren die Wächter. Ihr Summen war kein Lied. Es war ein
|
||
Schutzschild. Eine Frequenz, eine Vibration, ein ununterbrochenes,
|
||
enzymatisches Wunderwerk, das ein uraltes Grauen in Schach hielt. Ein
|
||
Grauen, das im Boden schlief und in den Pollen der Urzeitpflanzen
|
||
lauerte. Als die letzte Biene starb, endete das Lied. Und das Siegel
|
||
brach. <br />
|
||
<br />
|
||
<strong>DER WELKEPOLLEN.</strong> <br />
|
||
Zuerst war es nur ein Flüstern im Wind. Ein feiner, schimmernder
|
||
Staub,den man im Sonnenlicht tanzen sah. Die Leute nannten es den
|
||
"Schönen Tod". Die Sonnenuntergänge waren atemberaubend. Blutrot und
|
||
violett. Dann kam der Husten. Dann kam die Stille. Kein gewöhnliches
|
||
Verstummen. Eine aggressive, raubtierhafte Stille. Der Pollen tötete
|
||
nicht einfach nur. Er verhöhnte das Leben. Er drang in alles ein –
|
||
Pflanzen, Tiere, Menschen – und schrieb den Code der Natur neu. Er
|
||
schuf eine Welt, die aussah wie eine verzerrte, boshafte Karikatur
|
||
unserer eigenen. Die Stille wurde zu einer Krankheit der Seele, lange
|
||
bevor sie den Körper befiel. Die Gesellschaft zerfiel nicht. Sie
|
||
erstickte. Du warst auf der Flucht. Wie alle anderen auch.
|
||
</div>
|
||
<button id="weiter-btn">Weiter</button>
|
||
</div>
|
||
<div id="prolog-2" class="hidden">
|
||
<div class="prolog-text">
|
||
Du hattest alles, was dir lieb und heilig war, in einen einzigen
|
||
Koffer gezwängt – als wolltest du dein ganzes Leben in diesen einen,
|
||
schwitzenden Griff bannen. Dein letztes Geld hattest du für ein
|
||
Flugticket verbrannt. Ein Ticket ins Nichts. In die trügerische
|
||
Sicherheit einer sogenannten „quarantänefreien Zone“. Eine Lüge. Aber
|
||
eine Lüge, an die du dich klammertest wie ein Ertrinkender an ein
|
||
Stück Holz. Dann — der Ruck. Ein ohrenzerfetzender Knall. Das
|
||
plötzliche Gefühl, dass die Welt unter dir verschwindet, und du
|
||
schwerelos bist — nur, um im nächsten Herzschlag mit der Wucht einer
|
||
entfesselten Naturgewalt in den Boden geschleudert zu werden. Feuer.
|
||
Zerreißendes Licht. Die Welt in tausend schreiende Splitter
|
||
zerschlagen. Dann Dunkelheit. Aber keine Dunkelheit der Ruhe. Es ist
|
||
eine Stille, die nicht tot ist, sondern lauert. Eine Stille, die dich
|
||
beobachtet. Eine Stille, die wartet. Du bist ihr nicht entkommen. Du
|
||
bist mitten in ihrem Herzen gelandet.
|
||
</div>
|
||
<button id="open-eyes-btn">Öffne deine Augen</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="game-container" class="hidden">
|
||
<div id="story-text"></div>
|
||
<div id="options-buttons" class="button-grid"></div>
|
||
<div id="player-stats">
|
||
<div id="player-stats">
|
||
<div class="stat-container">
|
||
<span class="stat-label">❤️ Gesundheit</span>
|
||
<div class="stat-bar-background">
|
||
<div id="health-bar-fill" class="stat-bar-fill"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="stat-container">
|
||
<span class="stat-label">🍖 Hunger</span>
|
||
<div class="stat-bar-background">
|
||
<div id="hunger-bar-fill" class="stat-bar-fill"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="stat-container">
|
||
<span class="stat-label">💧 Durst</span>
|
||
<div class="stat-bar-background">
|
||
<div id="thirst-bar-fill" class="stat-bar-fill"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div id="utility-buttons">
|
||
<button id="open-crafting-btn">Crafting</button>
|
||
<button id="open-inventory-btn">Inventar (I)</button>
|
||
<button id="open-basebuilding-btn">Basis</button>
|
||
</div>
|
||
</div>
|
||
<!-- Crafting Modal -->
|
||
<div id="crafting-modal" class="modal hidden">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h2>Herstellbare Gegenstände</h2>
|
||
<button id="close-crafting-btn" class="close-btn">×</button>
|
||
</div>
|
||
<div id="crafting-options" class="modal-body"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Inventory Modal -->
|
||
<div id="inventory-modal" class="modal hidden">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h2>Inventar</h2>
|
||
<button id="close-inventory-btn" class="close-btn">×</button>
|
||
</div>
|
||
<div id="inventory-content" class="modal-body">
|
||
<div id="inventory-items"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Base Building Modal -->
|
||
<div id="basebuilding-modal" class="modal hidden">
|
||
<div class="modal-content basebuilding-content">
|
||
<div class="modal-header">
|
||
<h2>Basis Bauen</h2>
|
||
<button id="close-basebuilding-btn" class="close-btn">×</button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<div class="cabin-size-selector">
|
||
<h3>Hüttengröße wählen:</h3>
|
||
<button id="cabin-size-m" class="size-btn active" data-size="m">Klein (M)</button>
|
||
<button id="cabin-size-l" class="size-btn" data-size="l">Mittel (L)</button>
|
||
<button id="cabin-size-xl" class="size-btn" data-size="xl">Groß (XL)</button>
|
||
</div>
|
||
<div id="cabin-view" class="cabin-container">
|
||
<div id="cabin-grid" class="cabin-grid cabin-m"></div>
|
||
</div>
|
||
<div class="building-items">
|
||
<h3>Objekte platzieren:</h3>
|
||
<div class="item-selector">
|
||
<button class="building-item" data-item="bed">🛏️ Bett</button>
|
||
<button class="building-item" data-item="table">🪑 Tisch</button>
|
||
<button class="building-item" data-item="chest">📦 Truhe</button>
|
||
<button class="building-item" data-item="fireplace">🔥 Kamin</button>
|
||
<button class="building-item" data-item="workbench">🔨 Werkbank</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<script src="main.js" type="module"></script>
|
||
</body>
|
||
</html>
|