Qitaf

Qitaf — HTML-Template für Floristik-Studio & 3D-Strauß-Konfigurator

Ein dreisprachiger (EN/AR/DE) 17-seitiger Blumenshop rund um einen Echtzeit-3D-Konfigurator: Die Kundin wählt Größe, Blumen, Grün, Papier und Band, und der Strauß setzt sich in WebGL zusammen, bevor etwas geschnitten wird. Mobile-First, mit vollständig gespiegeltem RTL-Layout, das das 3D-Studio mitspiegelt.

Qitaf ist ein vollständiger Shop für Floristen, Straußstudios und Blumenlieferung am selben Tag. Siebzehn Seiten sind fertig — Start, Shop, Anlässe, ein vollständiger Produktdatensatz, Korb, Kasse, das Konto-Dashboard, Anmelden, Registrieren, Journal und Artikel, Galerie, FAQ, Über uns, Kontakt, 404 und der Strauß-Konfigurator — alle mit gemeinsamem Header, Footer, Mini-Warenkorb, Suchoverlay und Sprachumschalter. Die Startseite wurde neu sortiert statt neu eingefärbt: Die vier Frische- und Lieferzusagen rücken direkt unter den Hero, wo sie die erste Frage einer Käuferin beantworten, der Shop kommt, bevor das Studio über sich selbst spricht, der 3D-Konfigurator bekommt einen eigenen Abschnitt, weil es so etwas sonst nirgends gibt, und die Blindtextwand über den Produkten ist ganz verschwunden. Jede Abschnittsüberschrift wurde dabei neu geschrieben, und zwölf Sträuße, vier Anlässe, sechs Artikel und zwei Kundenstimmen tragen echte Texte statt Füllmaterial. Der Konfigurator ist der Grund, warum es dieses Template gibt. In acht geführten Schritten — Größe, Blumen, Grün, Papier, Band, Vorschau, Karte, Bestätigung — baut sich der Strauß in WebGL auf dem Schirm auf, jedes Blütenblatt aus Geometrie erzeugt statt aus einem Stockfoto geholt, und die Kundin kann ihn drehen, heranzoomen, sich umentscheiden und den fertigen Entwurf serverseitig fotografieren lassen, bevor sie zahlt. Die Komposition bleibt bewusst beim Floristen: Die Kundin wählt, was hineinkommt, und die Engine entscheidet, wo jeder Stiel sitzt — denn wer einzelne Stiele ziehen darf, baut Sträuße, die von Hand niemand nachbauen kann. Jede Auswahlregel liegt in einer Funktion, Gesamtpreis und Stielliste aktualisieren sich bei jedem Klick, und der fertige Entwurf geht als gerendertes Bild mit der Bestellung darunter hinaus — bereit für den Korb oder für WhatsApp. Jeder Text jeder Seite ist aus einem einzigen, beim Build erzeugten Wörterbuch mit 326 Schlüsseln auf Englisch, Arabisch und Deutsch übersetzt, sodass eine Beschriftung nicht zwischen Markup und Wörterbuch auseinanderlaufen kann. Englisch steht im HTML, womit jede Seite auch ohne JavaScript vollständig und indexierbar bleibt. Arabisch ist eine echte Spiegelung statt einer rechtsbündigen Kopie: Das Theme-Stylesheet wird programmatisch auf logische CSS-Eigenschaften umgeschrieben — 168 physische Deklarationen umgestellt, mit einem automatisch erzeugten Anhang für die Eckenradien, Transformationsvorzeichen und Verlaufsrichtungen, die logische Eigenschaften nicht ausdrücken können — und die Richtung wird im Dokumentkopf vor dem ersten Bildaufbau entschieden, damit eine arabische Seite nie kurz links-nach-rechts aufblitzt und die Slider ihr RTL-Flag schon bei der Initialisierung bekommen. Preise sind bidi-isoliert, damit sich ein Währungszeichen im arabischen Satz nicht umsortiert, und das 3D-Studio spiegelt mit, Blumennamen, Farbnamen und Papiernotizen inbegriffen. Lateinischer Text paart Fraunces für Überschriften mit Outfit für Fließtext; Arabisch nutzt Cairo und Tajawal. Die Palette wurde an der Quelle neu gebaut statt als Overrides darübergelegt — Persimone gegen Ringelblume, Salbei und Kakao — sodass kein Hover-, Badge- oder Fokuszustand den alten Akzent zeigt. Das Layout ist Mobile-First im strengen Sinn: Das Vendor-Stylesheet ist Desktop-First, also liegt eine handgeschriebene min-width-Schicht darüber, und jede Seite wurde in allen drei Sprachen bei 360, 768 und 1440 Pixeln maschinell auf horizontales Überlaufen geprüft, dazu ein Kontrast-Gate, das jeden Textknoten abläuft und anschlägt, wenn Text und Hintergrund zusammenfallen. Alle dreiundvierzig Fotos sind auf die exakte Box des Layouts zugeschnitten und als Set farblich abgestimmt, die Wortmarke ist als Schrift gesetzt statt als Symbol, und jede Marke, jedes Abschnittszeichen und das Favicon sind handgezeichnetes SVG. Der Build ist durchgängig reproduzierbar — Bilder, Symbole, Stylesheet-Transformation, Wörterbuch und alle siebzehn Seiten entstehen mit einem Befehl, der seine eigene Ausgabe auf tote Links, fehlende Assets und unübersetzte Schlüssel prüft.