Hallo Me,

du müsstest schon genauer erzählen, was Du bisher hinbekommen hast. Steht das irgendwo online?

Und Du müsstest deutlicher sagen, was

Hallo,

es handelt sich um eine kleine Aufgabe für ein größeres Projekt. Da es in einem gekapselten Netz läuft, teste ich aktuell über den localhost mittels Python http Server.

Also bisher nutz ich sowohl ein JavaScript, also auch @keyframes. Und bekomm das Fade Out hin.

Ich bekomme den ersten Absatz mehr oder weniger hin, aber danach scheitere ich.

bedeutet.

Ist dies der erste Absatz:

Im Ideafall direkt responsive im Design. Das Image soll mittig mit 480px gesetzt sein. Text 1 soll direkt mit einblenden, nach kurzer Zeit ausblenden und durch Text 2 ersetzt werden.

Genau genommen sind die Anforderungen nicht ganz tauglich, denn nicht jeder Viewport (Browserfenster, Handy-Display, oder ähnlich) ist 480px breit oder hoch. Eine echte responsive Lösung müsste das berücksichtigen.

Das Umblenden von Text 1 und 2 kann man mit CSS lösen (Keyframe Animation oder Transition). Hast Du das gemacht?

Danach soll das Image auf 72px verkleinert in der oberen linken Ecke auftauchen und beide Texte rechts daneben in 2 Zeilen.

Jetzt wird es umständlicher, das ist ja sozusagen ein Filmscript. Das lässt sich sicherlich ebenfalls per Keyframe-Animation lösen, aber da hat man schon ein bisschen zu basteln. Soll das Bild aus der Mitte nach links oben "springen" oder dorthin gleiten?

Ein kompletter Fade-Out und danach Fade-In würde mir komplett reichen.

In der Mitte soll dafür ein abgerundeter Button ohne Füllung, mit weißen Outlines (glow) aufpoppen,

Das kann ein weiterer Schritt in den Keyframes sein, aber ehrlich gesagt riecht das so langsam nach JavaScript.

Mit klicken soll dann eine Abfrage gestartet werden (SSO) und auf eine Subpage verlinkt werden.

Das kann ein Formular-Login sein, setzt aber Logik auf dem Server voraus. Ist die vorhanden oder musst Du die auch erstellen? Was meinst Du mit SSO? Single-Sign-On? Das ist ein komplexes Thema, SSO bedeutet eigentlich, dass man mehrere Systeme hat, sich bei einem anmeldet und dann auch alle übrigen nutzen kann. Entweder verwendest Du falsche Begriffe oder deine Aufgabe ist ein Monster.

Wie soll die Abfrage ablaufen? Wie werden die Login-Daten validiert? Ein Login-Script ist eine sicherheitsrelevante Funktion und nichts für Anfänger. Das ist so kritisch, dass wir aus unserem Wiki die entsprechende Funktion depubliziert haben, weil wir das Risiko zu hoch sehen, dass das jemand inkorrekt übernimmt und dann "certified by selfhtml" ein Security-Loch gräbt.

Die Verlinkung erfolgt dann normalerweise so, dass die Logindaten durch ein Formular zum Server geschickt werden, dieser sie validiert, einen Sessioncookie setzt und eine Weiterleitung auf die zweite Seite auslöst. Das ist wirklich keine Anfängerübung.

Ist das eine Lernaufgabe, die Du bekommen hast? Dann müsstest Du mehr über die Rahmenbedingungen sagen, unter denen das realisiert sein soll. Eine produktive Logon-Seite solltest Du nicht versuchen, zu erstellen.

Rolf

Mir ist bewusst, dass hier mehr erfolgen muss. Im Live System existiert ein Adfs Server für SAML der entsprechend dann abgerufen werden soll. Für den Test ist zunächst nur die Darstellung des Buttons wichtig. Die Python Logic danach folgt.