DogFatherGit/vans-diy-bastelbedarf
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

Checkout & Login: echte Markenlogos statt Platzhaltern, Vorschau-Link fürs Kundenkonto

Browse Source 
Nach Recherche zu den Markenrichtlinien von PayPal, Klarna, Visa und
Mastercard: Zahlungsoptionen im Checkout zeigen jetzt echte Markenlogos in
den offiziellen Farben (PayPal- und Klarna-Icon, Visa-Wortmarke auf Weiß,
Mastercard-Kreise in Rot/Orange unverändert nebeneinander) statt grober
Buchstaben-/Emoji-Platzhalter — genau die Verwendung, die die jeweiligen
Markenrichtlinien für die Kennzeichnung akzeptierter Zahlungsarten
vorsehen. Dieselbe PayPal-Grafik jetzt auch beim Social-Login auf der
Anmeldeseite statt eines schlichten "P".

Zusätzlich: Ein Vorschau-Link auf der Anmeldeseite meldet mit einem Demo-
Konto an und führt direkt zum Kundenbereich-Dashboard — bleibt dauerhaft
erreichbar, damit VanVan und wir jederzeit sehen können, wie der Bereich
für angemeldete Kund:innen aussieht, ohne das Formular jedes Mal
auszufüllen.

Der Phase-1-Demo-Hinweis auf Checkout- und Anmeldeseite steht jetzt am
Ende der Seite statt direkt unter der Überschrift, damit zuerst der
fertige, professionelle Eindruck zählt.

Co-Authored-By: Claude Sonnet 5 <[email protected]>
This commit is contained in:
qcigano
2026-08-03 11:41:03 +02:00
co-authored by Claude Sonnet 5
parent 912c77b625
commit c9a9370039
10 changed files with 261 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/styles/global.css
+21 -3
View File
@@ -1800,12 +1800,30 @@ a:focus-visible, button:focus-visible {
}
.pay-option .pay-icon.pay-icon-emoji { font-size: 1.7rem; font-style: normal; }
/* Kreditkarte: schlichtes Kartensymbol (SVG) statt einem Buchstaben wie bei PayPal/Klarna —
vorher zwei überlappende Kreise in Visa/Mastercard-Anmutung, die auf Wunsch entfernt wurden
(wirkten wie ein fremdes Marken-Logo statt einem neutralen eigenen Icon). */
.pay-icon-cc svg { display: block; }
.pay-option .pay-sub { display: block; font-weight: 400; font-size: 0.8rem; color: var(--c-text-muted); margin-top: 0.1em; }
/* Kreditkarte: statt einem einzelnen Icon zwei echte Marken-Badges (Visa + Mastercard)
nebeneinander, in unveränderten Originalfarben (Visa-Blau bzw. Mastercard Rot/Orange) —
genau die Kombination, die auf einer Kreditkarten-Zahlungsoption üblich und von beiden
Marken als "Acceptance Mark" vorgesehen ist. */
.pay-icon-cards { display: flex; align-items: center; gap: 0.5em; flex-shrink: 0; height: 52px; }
.mini-card {
width: 46px;
height: 32px;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 12px -3px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.mini-card-visa { background: #fff; }
.mini-card-mastercard { background: #16161f; }
/* Marken-Icon-Badges (PayPal, Klarna): echtes Markenlogo (SVG) mittig auf einer Kachel in der
jeweiligen offiziellen Markenfarbe statt einem groben Buchstaben-Platzhalter. */
.pay-icon-brand svg { display: block; }
/* Der "Verbinden"-Bereich sitzt DIREKT in der Karte selbst und klappt beim Anklicken sofort auf —
kein separates Panel, kein zweiter Klick nötig. */
.pay-panel-inline {