Mark

Mark — HTML-Template für Unterhaltungselektronik & Gadget-Shop

Ein dreisprachiger (EN/AR/ZH) 23-seitiger Elektronik-Shop mit filterbarem Katalog, vollständigem Produktdatensatz, Weg vom Warenkorb zur Kasse, Konto-Dashboard, Sendungsverfolgung und Vergleichstabelle. Mobile-First, mit vollständig gespiegeltem RTL-Layout.

Mark ist ein vollständiger mehrseitiger Shop für Elektronikhändler, Gadget-Läden und Einmarken-Hardwarestores. Dreiundzwanzig Seiten sind fertig — Start, der Katalog und ein gefilterter Katalog mit klebender Filterleiste, ein vollständiger Produktdatensatz mit Galerie, Datenblatt und Bewertungen, Warenkorb, Kasse, Merkliste, eine vierspaltige Vergleichstabelle, Sendungsverfolgung, das Konto-Dashboard, Anmelden, Registrieren, Passwort zurücksetzen, Über uns, Kontakt, Hilfebereich, Versand und Rückgabe, Journal und Artikel, Datenschutz, AGB, „Demnächst“ und 404 — alle mit gemeinsamem Header, Footer, Warenkorbleiste, Suchoverlay und Schnellansicht. Die Startseite wurde neu sortiert statt neu eingefärbt: Die vier Liefer- und Garantiezusagen rücken direkt unter den Hero, wo sie die erste Frage einer Kundin beantworten, Neuware kommt vor dem tiefen Katalog, Aktionsbanner brechen die Produktwand auf, und die Bewertungen rutschen ans Ende, wo es endlich etwas zu bewerten gibt. Jede Abschnittsüberschrift wurde dabei neu geschrieben, und ein Katalog aus vierundzwanzig Produkten, zwölf Abteilungen und sechs Artikeln trägt echte Texte statt Blindtext. Jeder Text jeder Seite ist aus einem einzigen, beim Build erzeugten Wörterbuch mit 393 Schlüsseln auf Englisch, Arabisch und Chinesisch übersetzt, sodass eine Beschriftung zwischen Markup und Wörterbuch nicht 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 in ein zweites, vollständig gespiegeltes überführt — Seiten getauscht, Kurzschreibweisen rotiert, Eckenradien neu gepaart, Transformationen und Schatten auf der X-Achse negiert — und zusammen mit dem offiziellen Bootstrap-5.3-RTL-Build ausgeliefert. Die Richtung wird im Dokumentkopf entschieden, bevor das erste Stylesheet angefordert wird, damit eine arabische Seite nie erst links-nach-rechts malt und dann kippt. Slider erhalten ihr RTL-Flag und gespiegelte Pfeile schon bei der Initialisierung, der Countdown spricht die Seitensprache, und Preise, Bestellnummern und Bewertungszahlen sind bidi-isoliert, damit ein führendes „$“ im arabischen Satz an seinem Platz bleibt. Arabisch nutzt IBM Plex Sans Arabic, Chinesisch Noto Sans SC, jeweils mit eigener Zeilenhöhe und ohne lateinische Laufweite; lateinischer Text paart Space Grotesk für Überschriften mit Manrope für Fließtext. Die Palette wurde von Grund auf neu gebaut — elektrisches Violett gegen ein leuchtendes Bernstein, beide über 4,5:1 auf Weiß — und an der Quelle angewendet statt als Overrides darübergelegt, sodass kein Hover-, Fokus- oder Badge-Zustand den alten Akzent zeigt. Das Layout ist Mobile-First im strengen Sinn: Die Typoskala ist geclampt statt je Breakpoint gestuft, reine Symbolschalter halten ein 44-Pixel-Touchziel, und jede Seite wurde in allen drei Sprachen bei 320, 390 und 768 Pixeln maschinell auf horizontales Überlaufen geprüft. Alle achtzig Fotos sind frische Produkt-, Lifestyle- und Porträtaufnahmen, jede auf die exakte Box des Layouts zugeschnitten und als Set farblich abgestimmt; die Wortmarke ist in Pfade umgewandelt, damit sie im img-Tag identisch rendert, und die siebenundzwanzig Symbole, Zahlungsmarken, Store-Badges, der QR-Block und die Hero-Formen sind handgezeichnetes SVG. Der Build ist durchgängig reproduzierbar — Bilder, Symbole, Stylesheet-Transformation, Wörterbuch und alle dreiundzwanzig Seiten entstehen mit einem Befehl, der seine eigene Ausgabe auf tote Links und fehlende Assets prüft.