Code eingeben - Sesam öffne dich

Quabbe · 21.03.2011

Hallo,

ich bastel zZt an einer Seite im Azteken / Maya Look. Als kleines Gimmick habe ich mir eine Art Codeschloss überlegt. Eine Reihe aus 3x3 Runen, die bei Benutzung in der richtigen Reihenfolge Zugang zum Login-Bereich gewähren. Wenn man also eine dieser neun Runen anklickt und es ist die richtige, leuchtet sie auf UND die nächste Rune wird zu einem unsichtbaren Link. Klickt man auch diese Rune an, geht das Spielchen so weiter, bis sich schließlich der Login-Bereich öffnet. Klickt man mal die falsche Rune an, erlischen die leuchtenden Runen und man muss von vorne anfangen.

Wie setze ich das ganze nun um? Mit CSS lässt sich so etwas wohl nicht realisieren. Von JavaScript verstehe ich nicht viel. Gibt es vielleicht sogar schon irgendwo eine Fertiglösung?

Wäre toll, wenn mir jemand helfen könnte. Und sei es nur, die richtigen Stichworte in den Raum zu werfen, damit ich weiß wonach ich suchen muss.

Grüße,
Quabbe

sokie · 21.03.2011

AW: Code eingeben - Sesam öffne dich

vorab zu klären wäre, ob die Seite auch bei abgeschalteten Javascript benutzbar sein soll.

richtig, mit CSS lässt sich das nicht machen. das ganze braucht ja schliesslich einen kleine 'logik'

Ich fürchte, dass es keine 'fertige' Lösung für das Problem gibt.
vielleicht postest du uns einmal einen Entwurf deines eingabefeldes als Seite, damit man einen Grundlage hat. (übrigens sind 'Runen' etwas ur-germanisches).

Eliteplayer · 21.03.2011

AW: Code eingeben - Sesam öffne dich

Hallo,
meine spontane Idee:
Kannst du nicht einfach jede Rune mit einem Link hinterlegen, der per "post"-Methode eine Variable an eine andere Seite übergibt, die dann über eine Datenbankabfrage abfragt, ob dies richtig ist?

Gruß Elite

MainAngler · 21.03.2011

AW: Code eingeben - Sesam öffne dich

Würde denke ich per PHP oder sogar Flash funktionieren.:uhm:
Was meint ihr, klappt das?

Quabbe · 21.03.2011

AW: Code eingeben - Sesam öffne dich

sokie schrieb:
vorab zu klären wäre, ob die Seite auch bei abgeschalteten Javascript benutzbar sein soll.

richtig, mit CSS lässt sich das nicht machen. das ganze braucht ja schliesslich einen kleine 'logik'

Ich fürchte, dass es keine 'fertige' Lösung für das Problem gibt.
vielleicht postest du uns einmal einen Entwurf deines eingabefeldes als Seite, damit man einen Grundlage hat. (übrigens sind 'Runen' etwas ur-germanisches).

Der Login-Bereich wird auch über einen Direktlink wie ".../login.html" aufzurufen sein und da ich der einzige sein werde, der sich über den Code einloggt, muss ich mir bezüglich der Usability auch keine Gedanken machen.

Was CSS anbelangt: wenn man mit a:active beim Klick auf den richtigen Link ein Bild über den kompletten Codebereich legt und auf diesem Bild dann den nächsten Link positioniert, könnte es klappen. Nur darf die Maus den Bereich dann nicht verlassen, sonst verschwindet das Bild natürlich wieder. Aber da ich mich eh demnächst ausführlicher mit JavaScript beschäftigen wollte, werde ich mich vorerst nicht mit einer halben Lösung zufrieden geben.

Ich werde mal schauen, wann ich ein erstes Grundgerüst zusammengefriemelt bekomme. Vielleicht schon morgen abend. Die Seite werde ich dann natürlich verlinken.

cebito · 21.03.2011

AW: Code eingeben - Sesam öffne dich

Da es nur ein Gimmick sein soll, musst ja nicht viel Fehlerlesens machen:

HTML:

<!doctype html>
<html>

<head>
    <title>Login-Gimmick</title>

    <meta charset="UTF-8" />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <meta name="keywords" content="" />
<script>
var i = 0, code = new Array(5,7,9,2); //Zählvariable und Code festlegen

function checkCode(number){
    if(number == code[i]){
        document.codeInput[number].style.background = "#0f0"; // Eingabe korrekt - Hintergrund grün
        i++;
        if(i==code.length){
            showhideLogin(); // Code komplett richtig, Eingabe ausblenden, Login einblenden
        }
    }
    else{
        alert("Zonk gezogen!"); // Uuuups, falsche Eingabe
        history.go(0); // zurücksetzen
    }
}

function showhideLogin(){ // Ein- Ausblenden Login und Codeeingabe
    var log = document.getElementById("loginfeld")
    if(log.style.display == "none"){
        log.style.display = "block";
        document.codeInput.style.display ="none";
    }
    else{
        log.style.display = "none";
        document.codeInput.style.display ="block";
    }
}
</script>
</head>

<body onload="showhideLogin();"><!-- wenn js aus, Login anzeigen sonst Code eingeben -->

<p>der Code um zum Login zu kommen lautet "5792"</p>

<div id="loginfeld" style="width:150px;height:150px;background:#f00;"><p>Hier ist der eigentliche Login drin</p></div>

<form name="codeInput" action="" style="display:none;">
    <input type="button" value="0" onclick="checkCode(this.value);" />
    <input type="button" value="1" onclick="checkCode(this.value);" />
    <input type="button" value="2" onclick="checkCode(this.value);" />
    <input type="button" value="3" onclick="checkCode(this.value);" />
    <input type="button" value="4" onclick="checkCode(this.value);" />
    <input type="button" value="5" onclick="checkCode(this.value);" />
    <input type="button" value="6" onclick="checkCode(this.value);" />
    <input type="button" value="7" onclick="checkCode(this.value);" />
    <input type="button" value="8" onclick="checkCode(this.value);" />
    <input type="button" value="9" onclick="checkCode(this.value);" />
</form>
</body>
</html>

Kannste dir jetzt dementsprechend stylen...

MainAngler · 21.03.2011

AW: Code eingeben - Sesam öffne dich

Quabbe schrieb:
.. und da ich der einzige sein werde, der sich über den Code einloggt...

Dann kannste doch gleich htaccess nutzen. :rolleyes:

Warum dann so umständlich?!:uhm:

Bleccer · 21.03.2011

AW: Code eingeben - Sesam öffne dich

Aufjedenfall mit PHP und dann für das schließen bzw. leuchten von den Ruinen bräuchtest du Javascript außer du willst das die Seite ganzezeit neu geladen werden muss^^

Eliteplayer · 21.03.2011

AW: Code eingeben - Sesam öffne dich

cebito - von dir kann man sooo viel lernen

genial!

Quabbe · 21.03.2011

AW: Code eingeben - Sesam öffne dich

@ cebito

Ich bin sprachlos. Wow, danke! Genau, was ich gesucht habe. Tausend dank! Da werde ich mich gleich mal ans Basteln machen.

@ MainAngler

Darf man sich selbst nicht auch hin und wieder etwas Gutes tun? Anders ausgedrückt: ich mache das, was mir Spaß macht.

Quabbe · 22.03.2011

AW: Code eingeben - Sesam öffne dich

Ein grober Entwurf des Codes ist nun hier zu sehen:

Eine Frage hätte ich noch: was muss ich anstellen, damit die background-position der richtigen Runen beim Klick auf "0 -100px" gestellt und damit das richtige Bild angezeigt wird?

cebito · 22.03.2011

AW: Code eingeben - Sesam öffne dich

HTML:

document.codeInput[number-1].style.backgroundPosition = "0 -100px";

Quabbe · 22.03.2011

AW: Code eingeben - Sesam öffne dich

Danke! style.background-position habe ich ja noch ausprobiert, aber auf backgroundPosition bin ich nicht gekommen.

sokie · 22.03.2011

AW: Code eingeben - Sesam öffne dich

das sieht doch gut aus;-), chick wäre es wenn zB die Grafik in der Mitte sich teilen würde und und dort das login(oder was auch immer man verstecken will) freigeben...*fg*

Quabbe · 22.03.2011

AW: Code eingeben - Sesam öffne dich

sokie schrieb:
das sieht doch gut aus;-), chick wäre es wenn zB die Grafik in der Mitte sich teilen würde und und dort das login(oder was auch immer man verstecken will) freigeben...*fg*

Hab da mal was gebastelt. Die Runen waren mir doch etwas zu klobig, dafür dienen nun die Symbole im Bild als Code. Die Reihenfolge ist: links, rechts, oben, unten, mitte, A. Zwar teilt sich da nix, aber der Loginbereich erscheint nun immerhin mittig.

sokie · 22.03.2011

AW: Code eingeben - Sesam öffne dich

das ist optisch sehr ansprechend gemacht

bei solchen Dingen vereinfacht es die Bedienung, wenn der cursor

ointer; gesetzt wird für die Buttons. Aber es sollte ja nur eine Spielerei sein. Super gemacht. Viel Spass beim Javascript lernen.

ps: wie hast du denn den Look hinbekommen? gibts da vielleicht hier (oder woanders) ein tutorial dazu (wenn nicht, vielleicht Lust eins für uns zu schreiben? ;-))

Quabbe · 23.03.2011

AW: Code eingeben - Sesam öffne dich

In erster Linie soll der Bildercode nur den Loginbereich verbergen. Er soll dem Besucher eigentlich gar nicht auffallen, auch wenns schade drum ist.

Der Look ist gar nicht so schwer zu erzeugen. Ein Brush in Schwarz, ein paar Bereiche darunter mit Farbe gefüllt und alles auf eine Ebene kopiert. Ebene dupliziert, Filter -> Farbpapier-Collage, bisschen mit den Werten herumgespielt, Deckkraft auf 40-60% gesetzt, zusammengefügt und ein bisschen an der Farbbalance geschraubt. Darüber dann mehrere Musterfüllungen in verschiedenen Blendmodi, u.a. Farbig nachbelichten auf 50-70% und Ineinanderkopieren. Ich habe hier sehr kontrastreiche Texturen verwendet, sowas zB: http://www.cgtextures.com/texview.php?id=3769&PHPSESSID=q6phef7mk0h3n04ecfab0vilb1

Zum Schluss nochmal alles auf eine Ebene kopiert, erneut Farbpapier-Collage, Deckkraft verringert und auf einer weiteren Ebene die leuchtenden Bereiche durch Helles Licht hervorgehoben. Glaub, das dürfte es schon gewesen sein.