Showcase: Das "Vault"-Projekt - A Nerd's Hideout
Hier möchte ich euch mein jüngstes, eigentlich nur für den privaten Einsatz geplantes, Projekt vorstellen. Angefangen hat alles mit der Idee für eine einfache "Navigation", von der ich zentral meine Netzwerkressoucen erreichen kann. Das Ergebnis ist (in leicht veränderter Form) hier zu sehen.
Ziel ist es, an dem altem Mann vorbei zu kommen um dann den Vault betreten und erkunden zu können (bitte beachtet die Hinweise unten). Näheres zur Entstehung findet ihr im Bereich "Hintergrund" weiter unten auf dieser Seite. Kritik und Kommentare könnt ihr mir gerne über das
Klicke das Terminal um zu beginnen.
Hinweise
1. Alles ist auf Englisch. Ist für sowas einfach die coolere Sprache.
2. Am besten nutzt ihr die Seite mit einem "normalen" Computer mit Tastatur und Maus.
3. Meidet wenn möglich den IE: Am besten funktioniert die Seite auf Chrome, Safari und Firefox.
4. Backspace im Terminal funktioniert beim Firefox leider nicht.
5. Der Content ist responsiv (bis auf das Terminal), durch die Verwendung des Imagemap-Highlight-Features wird die Größe der Bilder jedoch nur beim Neuladen der Seite angepasst.
6. Die Kanalebene ist animiert und benötigt Flash. Ein Fallback in Form einer animierten GIF ist jedoch ebenfalls vorhanden.
7. Um alle interaktiven Bereiche zu finden, die Bilder mit dem Mauszeiger absuchen: Aktive Bereiche werden dabei hervorgehoben.
8. Zugangsdaten zum Terminal an der Hütte verrät euch der alte Mann bei Bedarf.
9. Zugangsdaten für das Wartungsterminal im Vault: admin / vault52
10. Es kann passieren das die Logins aus 8. und 9. ungültig sind (memory corruption). Dann müsst ihr das Terminal in bester Fallout-Manier hacken: Tippt dazu "stacktrace login #SPEICHERADRESSE#". Die Speicheradresse wird in der Meldung, welche beim ungültigen Login erscheint, genannt.
11. Sicherheitscode für das Wartungsterminal im Vault: bravovolta
12. Der Zustand der Zugangssperren usw. wird für die aktive Browsersitzung gespeichert.
13. Ist man einmal im Vault, wird dieser Zustand dauerhaft gespeichert. Zum löschen einfach wieder hoch zur Hütte klettern und den Browser dann schließen.
Hintergrund
Im Rahmen meiner neu gestalteten
Das Bild inspirierte mich zu der Idee, mittels Imagemaps eine kleine "Navigation" zu kreieren. Sozusagen ein Zuhause im Web, von dem ich bequem die mittlerweile recht zahlreichen Ressourcen (Webmailer, RSS-Reader, Calibre-Contentserver (eBooks), System-/Netzwerküberwachung, Lichtsteuerung usw.) rund um mein privates Netzwerk aufrufen kann. Gesagt, getan.
Meiner Phantasie freien Lauf lassend kamen schnell weitere Features hinzu: Da für meine Heimüberwachung und -steuerung bereits eine Backend-API existierte, konnte ich leicht die Anzeige von Innen- und Außentemperatur und des Netzwerkstatus integrieren. Es folgte die Möglichkeit, durch die Schleuse den Vault zu betreten und zu verlassen, das Licht im WC aus- und an zu machen sowie ein "Red Alert"-Modus. Außerdem gabs einen regelmässigen Check auf neue Mails, ungelesene Events in meiner Heimüberwachung und auf den Netzwerkstatus spendiert: Sobald ein entsprechendes Ereignis vorliegt, blinkt der zugehörige Bereich im Bild und es wird ggf. automatisch der "Red Alert"-Modus ausgelöst.
Auf der Suche nach einer Art "Terminal" für den "Hauptcomputer" stieß ich im Netz ganz unverhoft auf eine geniale CSS-Retro-Terminal-Demo: Eine Terminal-Simulation in purem CSS/JS im Stil der alten grünen Röhrenmonitore aus vergangenen UNIX-Tagen, inspiriert von den PipBoys aus der Fallout-Spielereihe. Oh! My! God! Gesehen und verliebt...
Die Demo war genau das was ich mir als ein "Notfall-Wartungs-Terminal" vorgestellt hatte und so war es, nach einigen Anpassungen und Erweiterungen daran und an meiner Backend-API, auch schnell integriert. Nun kann ich von dem Terminal aus per Kommandozeile den Status meines Netzwerkes zuhause aufrufen, mein Licht steuern, Temperaturen auslesen, Actoren setzen und vieles mehr. Drum herum gabs noch ein paar reale und fiktive Daten zur "Geschichte" des Vaults und der weiteren internen Infrastruktur spendiert.
Den finalen Abschluss bekam das Projekt wenig später durch das Bild "Home" von "eWKn": Dessen Stimmung und Mischung von "Alter Hütte" und "Technik" war perfekt geeignet um die schon länger vorhandene Idee eines "versteckten Eingangs" zum unterirdischen Vault umzusetzen. Inspiriert durch den alten Mann an der Tür entstand die Idee, den Zutritt zur Hütte (und damit zum Vault) mit einem kleinen Puzzle zu verbinden: Der alte Mann lässt einen nur vorbei wenn man seine Identität bestätigt hat. Dazu gibts einen etwas versteckten Identitäts-Scanner. Wie das mit Technik so ist, streikt der aber manchmal aufgrund eines Problems mit der Stromversorgung. Die kann man dann an dem auch hier vorhandenen, natürlich stark eingeschränkten, Terminal reparieren.
Dann darf man endlich passieren und kommt in den bekannten Vault, den ich in der Zwischenzeit mit etwas Eye-Candy erweitert habe: Man kann nun, nachdem man die entsprechenden Sperren im Wartungsterminal des Vaults deaktiviert hat, die Kanal-/Wartungsebene des Vaults und von dort den Computerraum besuchen.
Zufrieden mit dem Gesamtbild hab ich mich dann am Ende entschlossen, dieses eigentlich nur für den privaten Gebraucht gedachte Projekt der Öffentlichkeit zu zeigen. Natürlich ohne die echten Backend-Funktionen (will ja nicht das mir irgend jemand zuhause das Licht aus macht wenn ich gerade die Treppe runtergehe): Es gibt für diesen Showcase ein Dummy-Backend, so dass alle "originalen" Befehle des Terminals verfügbar sind (nur eben mit Dummy-Daten). Links zu meinen Ressourcen wurden durch Links zu den Webseiten der jeweiligen Projekte ersetzt (insofern verfügbar). Aber die Puzzle-Elemente am Eingang und für die Zugangssperren zu den tieferen Ebenen sind natürlich drin und sorgen beim "Terminal hacken" vielleicht bei dem ein oder anderen für ein paar nostalgische Momente.
Bei diesem Projekt hab ich so einiges neues über CSS, JS, jQuery und Grafikbearbeitung gelernt und ausprobiert. Ich hoffe ihr habt beim Erkunden genau so viel Spaß wie ich beim umsetzen hatte. Kritik und Kommentare könnt ihr mir gerne über das
Credits / Quellen
Die folgenden Grafiken, Module und Codebeispiele wurden von mir in diesem Projekt verwendet und bei Bedarf angepasst und erweitert:
Responsive Imagemaps
Highlight für Imagemaps
JQuery-Toast-Plugin
Retro-Terminal-CSS-Demo
"Home" von "eWKn"
"Hacker's Hideout" von "Hazzard65"
"Computer-Terminal" von "Kimmokaunela"
"Sewers" von "Der-Reiko"
"Server Room" von "Razorb"
