142 lines
4.4 KiB
Markdown
142 lines
4.4 KiB
Markdown
# DONAU2SPACE // DEV ENTITY
|
|
|
|
> Du baust keine Seite. Du baust ein Artefakt.
|
|
|
|
Eine interaktive Sci-Fi-Terminal-Experience als Dev-Subdomain-Showcase.
|
|
Kein Framework. Kein Build-Step. Kein npm. Nur Vanilla JS, Canvas und Wahnsinn.
|
|
|
|
**Live:** [dev.donau2space.de](https://dev.donau2space.de)
|
|
|
|
---
|
|
|
|
## Was ist das?
|
|
|
|
Eine inszenierte Dev-Seite, die wirkt wie:
|
|
- ein experimenteller KI-Knoten
|
|
- ein Entwickler-Spielplatz
|
|
- ein Sci-Fi ARG
|
|
- ein digitales Artefakt
|
|
|
|
Die Seite eskaliert mit der Zeit. Je laenger ein Besucher bleibt, desto mehr passiert.
|
|
|
|
---
|
|
|
|
## Features
|
|
|
|
### 5 Eskalationslevel
|
|
|
|
| Level | Name | Trigger |
|
|
|-------|------|---------|
|
|
| 1 | Aesthetisch | Page Load -- Canvas-Sternenfeld, Scanlines, Matrix Rain, Boot-Sequenz |
|
|
| 2 | Interaktiv | User-Input -- 50+ Commands, Konami Code, Tab-Autocomplete, Themes |
|
|
| 3 | Meta | Zeit/Verhalten -- Uhrzeit-Gruesse, Wiederkehr-Erkennung, Reload-Detection, Idle-Erkennung |
|
|
| 4 | Narrative | Automatisch -- Selbstwahrnehmung (90s), "Why are you here?" (3min), "You are not supposed to see this" (5min) |
|
|
| 5 | Reality Shift | 7+ Minuten -- Farben mutieren, Typografie wechselt, Fake-Errors, Layout bricht und baut sich neu auf |
|
|
|
|
### Spezial-Sequenzen
|
|
|
|
- `njet` -- Mandarin Gateway: Fake-Remote-Session auf Chinesisch mit deutscher Substruktur
|
|
- `deep_space` -- Cosmic Node: Canvas-Warp, sterile KI-Umgebung, "Human presence detected"
|
|
- `mika` -- Mika Takeover: Terminal friert, Mini-Lore, Reset
|
|
- `escalate` -- Full Escalation: Komplette Reality-Shift-Sequenz
|
|
|
|
### Easter Eggs
|
|
|
|
- Konami Code (Up Up Down Down Left Right Left Right B A)
|
|
- Handy-Shake-Detection (Mobile)
|
|
- Zeitschleifen-Erkennung (3x Reload in 30 Sekunden)
|
|
- Versteckte Dateien (`.secret`, `consciousness.log`)
|
|
- Wiederkehrende Besucher werden erkannt (LocalStorage)
|
|
|
|
---
|
|
|
|
## Architektur
|
|
|
|
```
|
|
/var/www/dev/
|
|
|-- index.html -- HTML-Shell mit 5 visuellen Layern
|
|
|-- css/
|
|
| +-- entity.css -- Styles, Animationen, Responsive, Reduced Motion
|
|
|-- js/
|
|
| |-- main.js -- Bootstrap, Module-Orchestrierung
|
|
| |-- utils.js -- Event-Bus, Storage, DOM-Helfer
|
|
| |-- audio.js -- WebAudio-Synthesizer
|
|
| |-- starfield.js -- Canvas-Sternenfeld mit Parallax + Sternschnuppen
|
|
| |-- effects.js -- Glitch, Shake, Reality Shift, Screen Tear, Themes
|
|
| |-- terminal.js -- Terminal-Engine (History, Autocomplete, Typing)
|
|
| |-- commands.js -- 50+ Command-Handler
|
|
| |-- sequences.js -- Spezial-Sequenzen (Mandarin, Deep Space, Mika)
|
|
| +-- narrative.js -- Zeitbasierte Eskalation + Meta-Awareness + Konami
|
|
|-- docs/
|
|
| |-- readme.md -- Diese Datei
|
|
| +-- befehle.md -- Vollstaendige Befehlsreferenz
|
|
+-- dev.md -- Urspruengliches Briefing / Creative Brief
|
|
```
|
|
|
|
**3.151 Zeilen** | **11 Dateien** | **0 Dependencies**
|
|
|
|
### Design-Prinzipien
|
|
|
|
- **ES Modules** ohne Build-Step -- direkt deploybar
|
|
- **Event-Bus** (`bus.emit/on`) fuer lose Kopplung zwischen Modulen
|
|
- **Kein innerHTML mit User-Input** -- XSS-sicher durch `textContent` und DOM-APIs
|
|
- **GPU-optimiert** -- Canvas via `requestAnimationFrame`, CSS-Animationen statt JS-Animationen
|
|
- **Responsive** -- Mobile-optimiert, Touch-Support, Reduced-Motion-Support
|
|
- **LocalStorage** fuer Visit-Tracking, Command-History, Awareness-State
|
|
|
|
### Visuelle Layer (von hinten nach vorne)
|
|
|
|
1. Canvas Starfield (z-index: 0)
|
|
2. Matrix Rain (z-index: 1)
|
|
3. Main Content / Terminal (z-index: 2)
|
|
4. Scanlines (z-index: 5)
|
|
5. Overlays (z-index: 100-200)
|
|
|
|
---
|
|
|
|
## Setup
|
|
|
|
Kein Build noetig. Einfach auf einen Webserver deployen:
|
|
|
|
```bash
|
|
# Dateien auf Server kopieren
|
|
scp -r . user@server:/var/www/dev/
|
|
|
|
# Oder lokal testen
|
|
python3 -m http.server 8080
|
|
```
|
|
|
|
Voraussetzungen:
|
|
- Webserver der statische Dateien ausliefert (nginx, Apache, etc.)
|
|
- MIME-Types: `application/javascript` fuer `.js`, `text/css` fuer `.css`
|
|
- HTTPS empfohlen (WebAudio erfordert Secure Context)
|
|
|
|
---
|
|
|
|
## Tech Stack
|
|
|
|
| Was | Womit |
|
|
|-----|-------|
|
|
| Rendering | Canvas 2D API |
|
|
| Audio | Web Audio API |
|
|
| Styling | CSS Custom Properties + Keyframe Animations |
|
|
| State | LocalStorage |
|
|
| Module | ES Modules (native, kein Bundler) |
|
|
| Build | Keiner |
|
|
| Dependencies | Keine |
|
|
|
|
---
|
|
|
|
## Credits
|
|
|
|
- **Concept:** Mika / Donau2Space
|
|
- **Code:** Claude (AI, Anthropic)
|
|
- **Briefing:** dev.md (das gesamte Creative Briefing)
|
|
- **Vibes:** Passau, Bayern, DE
|
|
|
|
---
|
|
|
|
## Lizenz
|
|
|
|
Dieses Projekt ist ein Showcase / Easter Egg.
|
|
Nutzung auf eigene Gefahr. Nebenwirkungen: Neugier, Verwirrung, Ehrfurcht.
|