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

Konto-Kopfkarte: "Meine Daten"-Button statt Abo-Button

Browse Source 
Der "Mein Abo verwalten"-Button in der Kopfkarte fällt wieder weg — der
Zugriff aufs Abo läuft ab jetzt nur noch über die eigene "Mein Abo"-Nav-
Kachel. Stattdessen wandert "Meine Daten" aus der Schnellnavigation direkt
in die Kopfkarte: ein neuer, gleich premium gestylter Button (Teal/Lila statt
Gold, gleiches wanderndes Glanzlicht) unten rechts in der Karte, der zum
Profil-Bereich springt.

Co-Authored-By: Claude Sonnet 5 <[email protected]>
This commit is contained in:
qcigano
2026-08-03 17:11:20 +02:00
co-authored by Claude Sonnet 5
parent a222d6c96e
commit 64110484de
6 changed files with 101 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/i18n/ui.ts
+4
View File
@@ -232,6 +232,7 @@ export const ui = {
logout: "Abmelden",
navLabel: "Kontobereich-Navigation",
statOrders: "Bestellungen", statWishlist: "Wunschliste", statOpen: "Offene Sendungen", statData: "Meine Daten", statLoyalty: "Treuebonus",
datenHeaderBtn: "👤 Meine Daten",
loyaltyTitle: "🎁 Mein Treuebonus",
loyaltyProgressTemplate: "Dein Bestellfortschritt: {cur} von {ziel} Bestellungen",
loyaltyRemainingOne: "Dir fehlt noch 1 Bestellung, bis du 20 % Rabatt auf einen Artikel deiner Wahl erhältst.",
@@ -529,6 +530,7 @@ export const ui = {
logout: "Sign out",
navLabel: "Account section navigation",
statOrders: "Orders", statWishlist: "Wishlist", statOpen: "Open shipments", statData: "My details", statLoyalty: "Loyalty reward",
datenHeaderBtn: "👤 My details",
loyaltyTitle: "🎁 My loyalty reward",
loyaltyProgressTemplate: "Your order progress: {cur} of {ziel} orders",
loyaltyRemainingOne: "You need 1 more order to get 20% off an item of your choice.",
@@ -826,6 +828,7 @@ export const ui = {
logout: "Abmälde",
navLabel: "Kontobereich-Navigation",
statOrders: "Bstellige", statWishlist: "Wunschlischte", statOpen: "Offni Sändige", statData: "Mini Date", statLoyalty: "Treuebonus",
datenHeaderBtn: "👤 Mini Date",
loyaltyTitle: "🎁 Mis Treuebonus",
loyaltyProgressTemplate: "Din Bstellfortschritt: {cur} vo {ziel} Bstellige",
loyaltyRemainingOne: "Dir fehlt no 1 Bstellig, bis du 20 % Rabatt uf en Artikel dinere Wahl übercho.",
@@ -1123,6 +1126,7 @@ export const ui = {
logout: "Se déconnecter",
navLabel: "Navigation de l'espace client",
statOrders: "Commandes", statWishlist: "Liste de souhaits", statOpen: "Envois en cours", statData: "Mes données", statLoyalty: "Récompense",
datenHeaderBtn: "👤 Mes données",
loyaltyTitle: "🎁 Ma récompense fidélité",
loyaltyProgressTemplate: "Votre progression : {cur} sur {ziel} commandes",
loyaltyRemainingOne: "Il vous manque encore 1 commande pour obtenir 20 % de réduction sur l'article de votre choix.",
src/pages/ch/konto/angemeldet.astro
+11 -13
View File
@@ -89,12 +89,14 @@ const angekommeneBestellungen = beispielBestellungen.filter((b) => b.status ===
</div>
</div>
<div class="account-head-actions">
<button type="button" class="btn btn-abo-hero" id="dash-abo-btn">
<span class="btn-abo-hero-sparkle" aria-hidden="true">✨</span>
{t.accountDash.aboHeaderBtn}
</button>
<button type="button" class="btn btn-outline btn-sm" id="dash-logout-btn">{t.accountDash.logout}</button>
</div>
<div class="account-head-daten-row">
<button type="button" class="btn btn-daten-hero" id="dash-daten-btn">
<span class="btn-daten-hero-sparkle" aria-hidden="true">✨</span>
{t.accountDash.datenHeaderBtn}
</button>
</div>
</div>
{/* Schnellnavigation: eine zusammenhängende Leiste direkt über "Meine Bestellungen" /
@@ -119,11 +121,6 @@ const angekommeneBestellungen = beispielBestellungen.filter((b) => b.status ===
<span class="account-nav-value">0</span>
<span class="account-nav-label">{t.accountDash.statWishlist}</span>
</button>
<button type="button" class="account-nav-item account-nav-data" data-tab="daten">
<span class="account-nav-sparkle" aria-hidden="true">✨</span>
<span class="account-nav-icon" aria-hidden="true">👤</span>
<span class="account-nav-label">{t.accountDash.statData}</span>
</button>
<button type="button" class="account-nav-item account-nav-loyalty" data-tab="treuebonus">
<span class="account-nav-sparkle" aria-hidden="true">✨</span>
<span class="account-nav-icon" aria-hidden="true">🎁</span>
@@ -488,10 +485,11 @@ const angekommeneBestellungen = beispielBestellungen.filter((b) => b.status ===
item.addEventListener("click", () => { if (item.dataset.tab) setActiveTab(item.dataset.tab); });
});
// Der "Mein Abo verwalten"-Button in der Kopfkarte springt direkt in den Abo-Bereich.
document.getElementById("dash-abo-btn")?.addEventListener("click", () => {
setActiveTab("abo");
aboSection?.scrollIntoView({ behavior: "smooth", block: "start" });
// Der "Meine Daten"-Button in der Kopfkarte springt direkt in den Profil-Bereich. Der Zugriff
// aufs Abo läuft jetzt nur noch über die "Mein Abo"-Nav-Kachel weiter unten.
document.getElementById("dash-daten-btn")?.addEventListener("click", () => {
setActiveTab("daten");
datenSection?.scrollIntoView({ behavior: "smooth", block: "start" });
});
setActiveTab(null);
src/pages/en/konto/angemeldet.astro
+11 -13
View File
@@ -89,12 +89,14 @@ const angekommeneBestellungen = beispielBestellungen.filter((b) => b.status ===
</div>
</div>
<div class="account-head-actions">
<button type="button" class="btn btn-abo-hero" id="dash-abo-btn">
<span class="btn-abo-hero-sparkle" aria-hidden="true">✨</span>
{t.accountDash.aboHeaderBtn}
</button>
<button type="button" class="btn btn-outline btn-sm" id="dash-logout-btn">{t.accountDash.logout}</button>
</div>
<div class="account-head-daten-row">
<button type="button" class="btn btn-daten-hero" id="dash-daten-btn">
<span class="btn-daten-hero-sparkle" aria-hidden="true">✨</span>
{t.accountDash.datenHeaderBtn}
</button>
</div>
</div>
{/* Schnellnavigation: eine zusammenhängende Leiste direkt über "Meine Bestellungen" /
@@ -119,11 +121,6 @@ const angekommeneBestellungen = beispielBestellungen.filter((b) => b.status ===
<span class="account-nav-value">0</span>
<span class="account-nav-label">{t.accountDash.statWishlist}</span>
</button>
<button type="button" class="account-nav-item account-nav-data" data-tab="daten">
<span class="account-nav-sparkle" aria-hidden="true">✨</span>
<span class="account-nav-icon" aria-hidden="true">👤</span>
<span class="account-nav-label">{t.accountDash.statData}</span>
</button>
<button type="button" class="account-nav-item account-nav-loyalty" data-tab="treuebonus">
<span class="account-nav-sparkle" aria-hidden="true">✨</span>
<span class="account-nav-icon" aria-hidden="true">🎁</span>
@@ -488,10 +485,11 @@ const angekommeneBestellungen = beispielBestellungen.filter((b) => b.status ===
item.addEventListener("click", () => { if (item.dataset.tab) setActiveTab(item.dataset.tab); });
});
// Der "Mein Abo verwalten"-Button in der Kopfkarte springt direkt in den Abo-Bereich.
document.getElementById("dash-abo-btn")?.addEventListener("click", () => {
setActiveTab("abo");
aboSection?.scrollIntoView({ behavior: "smooth", block: "start" });
// Der "Meine Daten"-Button in der Kopfkarte springt direkt in den Profil-Bereich. Der Zugriff
// aufs Abo läuft jetzt nur noch über die "Mein Abo"-Nav-Kachel weiter unten.
document.getElementById("dash-daten-btn")?.addEventListener("click", () => {
setActiveTab("daten");
datenSection?.scrollIntoView({ behavior: "smooth", block: "start" });
});
setActiveTab(null);
src/pages/fr/konto/angemeldet.astro
+11 -13
View File
@@ -89,12 +89,14 @@ const angekommeneBestellungen = beispielBestellungen.filter((b) => b.status ===
</div>
</div>
<div class="account-head-actions">
<button type="button" class="btn btn-abo-hero" id="dash-abo-btn">
<span class="btn-abo-hero-sparkle" aria-hidden="true">✨</span>
{t.accountDash.aboHeaderBtn}
</button>
<button type="button" class="btn btn-outline btn-sm" id="dash-logout-btn">{t.accountDash.logout}</button>
</div>
<div class="account-head-daten-row">
<button type="button" class="btn btn-daten-hero" id="dash-daten-btn">
<span class="btn-daten-hero-sparkle" aria-hidden="true">✨</span>
{t.accountDash.datenHeaderBtn}
</button>
</div>
</div>
{/* Schnellnavigation: eine zusammenhängende Leiste direkt über "Meine Bestellungen" /
@@ -119,11 +121,6 @@ const angekommeneBestellungen = beispielBestellungen.filter((b) => b.status ===
<span class="account-nav-value">0</span>
<span class="account-nav-label">{t.accountDash.statWishlist}</span>
</button>
<button type="button" class="account-nav-item account-nav-data" data-tab="daten">
<span class="account-nav-sparkle" aria-hidden="true">✨</span>
<span class="account-nav-icon" aria-hidden="true">👤</span>
<span class="account-nav-label">{t.accountDash.statData}</span>
</button>
<button type="button" class="account-nav-item account-nav-loyalty" data-tab="treuebonus">
<span class="account-nav-sparkle" aria-hidden="true">✨</span>
<span class="account-nav-icon" aria-hidden="true">🎁</span>
@@ -488,10 +485,11 @@ const angekommeneBestellungen = beispielBestellungen.filter((b) => b.status ===
item.addEventListener("click", () => { if (item.dataset.tab) setActiveTab(item.dataset.tab); });
});
// Der "Mein Abo verwalten"-Button in der Kopfkarte springt direkt in den Abo-Bereich.
document.getElementById("dash-abo-btn")?.addEventListener("click", () => {
setActiveTab("abo");
aboSection?.scrollIntoView({ behavior: "smooth", block: "start" });
// Der "Meine Daten"-Button in der Kopfkarte springt direkt in den Profil-Bereich. Der Zugriff
// aufs Abo läuft jetzt nur noch über die "Mein Abo"-Nav-Kachel weiter unten.
document.getElementById("dash-daten-btn")?.addEventListener("click", () => {
setActiveTab("daten");
datenSection?.scrollIntoView({ behavior: "smooth", block: "start" });
});
setActiveTab(null);
src/pages/konto/angemeldet.astro
+11 -13
View File
@@ -90,12 +90,14 @@ const angekommeneBestellungen = beispielBestellungen.filter((b) => b.status ===
</div>
</div>
<div class="account-head-actions">
<button type="button" class="btn btn-abo-hero" id="dash-abo-btn">
<span class="btn-abo-hero-sparkle" aria-hidden="true">✨</span>
{t.accountDash.aboHeaderBtn}
</button>
<button type="button" class="btn btn-outline btn-sm" id="dash-logout-btn">{t.accountDash.logout}</button>
</div>
<div class="account-head-daten-row">
<button type="button" class="btn btn-daten-hero" id="dash-daten-btn">
<span class="btn-daten-hero-sparkle" aria-hidden="true">✨</span>
{t.accountDash.datenHeaderBtn}
</button>
</div>
</div>
{/* Schnellnavigation: eine zusammenhängende Leiste direkt über "Meine Bestellungen" /
@@ -120,11 +122,6 @@ const angekommeneBestellungen = beispielBestellungen.filter((b) => b.status ===
<span class="account-nav-value">0</span>
<span class="account-nav-label">{t.accountDash.statWishlist}</span>
</button>
<button type="button" class="account-nav-item account-nav-data" data-tab="daten">
<span class="account-nav-sparkle" aria-hidden="true">✨</span>
<span class="account-nav-icon" aria-hidden="true">👤</span>
<span class="account-nav-label">{t.accountDash.statData}</span>
</button>
<button type="button" class="account-nav-item account-nav-loyalty" data-tab="treuebonus">
<span class="account-nav-sparkle" aria-hidden="true">✨</span>
<span class="account-nav-icon" aria-hidden="true">🎁</span>
@@ -489,10 +486,11 @@ const angekommeneBestellungen = beispielBestellungen.filter((b) => b.status ===
item.addEventListener("click", () => { if (item.dataset.tab) setActiveTab(item.dataset.tab); });
});
// Der "Mein Abo verwalten"-Button in der Kopfkarte springt direkt in den Abo-Bereich.
document.getElementById("dash-abo-btn")?.addEventListener("click", () => {
setActiveTab("abo");
aboSection?.scrollIntoView({ behavior: "smooth", block: "start" });
// Der "Meine Daten"-Button in der Kopfkarte springt direkt in den Profil-Bereich. Der Zugriff
// aufs Abo läuft jetzt nur noch über die "Mein Abo"-Nav-Kachel weiter unten.
document.getElementById("dash-daten-btn")?.addEventListener("click", () => {
setActiveTab("daten");
datenSection?.scrollIntoView({ behavior: "smooth", block: "start" });
});
setActiveTab(null);
src/styles/global.css
+53 -1
View File
@@ -1345,6 +1345,10 @@ a:focus-visible, button:focus-visible {
.account-head > * { position: relative; z-index: 1; }
.account-head-identity { display: flex; align-items: center; gap: 1rem; }
.account-head-actions { margin-left: auto; display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; }
/* Eigene volle Zeile unten in der Kopfkarte für den "Meine Daten"-Button — dank flex-wrap auf
.account-head bricht dieser 100%-breite Block automatisch in eine neue Zeile um, der Button
selbst bleibt rechtsbündig. Passt sich damit jeder Kartenhöhe an, ganz ohne absolute Positionierung. */
.account-head-daten-row { width: 100%; display: flex; justify-content: flex-end; margin-top: 0.9rem; }
.account-head h1 { margin: 0.2rem 0 0.5rem; }
.account-head .lead { margin: 0; max-width: 52ch; }
.account-head-sparkle {
@@ -1475,7 +1479,6 @@ a:focus-visible, button:focus-visible {
.account-nav-orders { --nav-color: #9b7fd6; --nav-delay: 0s; }
.account-nav-open { --nav-color: var(--c-accent); --nav-delay: 0.4s; }
.account-nav-wishlist { --nav-color: var(--c-sale); --nav-delay: 0.8s; }
.account-nav-data { --nav-color: #e3b23c; --nav-delay: 1.2s; }
.account-nav-loyalty { --nav-color: #6ecb8f; --nav-delay: 1.6s; }
/* Sobald der Treuebonus wirklich freigeschaltet ist (10/10), bekommt sein Knopf zusätzlich zur
normalen "Premium"-Optik noch einen kräftigeren, schneller pulsierenden Rahmen — soll auf
@@ -2400,6 +2403,55 @@ a:focus-visible, button:focus-visible {
}
@media (prefers-reduced-motion: reduce) { .btn-abo-hero, .btn-abo-hero::after, .btn-abo-hero-sparkle { animation: none; } }
/* "Meine Daten"-Button unten rechts in der Kopfkarte — dasselbe Premium-Prinzip wie der Abo-Held
oben (wanderndes Mehrfarb-Verlaufslicht am Rand + Glanzlicht + funkelndes Sternchen), aber in
Teal/Lila statt Gold, damit er sich klar von Abo-bezogenen Elementen abhebt und stattdessen zur
Akzentfarbe der Kopfkarte selbst passt (siehe "MEIN KONTO"-Eyebrow). */
.btn-daten-hero {
position: relative;
overflow: hidden;
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.7rem 1.3rem;
border-radius: var(--radius-l);
border: 1.5px solid transparent;
background:
linear-gradient(155deg, var(--c-anthracite-light), var(--c-anthracite)) padding-box,
linear-gradient(120deg, var(--c-accent), #9b7fd6, var(--c-accent)) border-box;
background-size: 100% 100%, 300% 100%;
color: #d6f7ff;
font-weight: 800;
font-size: 0.95rem;
letter-spacing: 0.01em;
cursor: pointer;
animation: daten-hero-border-shift 5s ease-in-out infinite, daten-hero-glow 2.4s ease-in-out infinite;
transition: transform 0.2s var(--ease);
}
.btn-daten-hero:hover { transform: translateY(-2px) scale(1.03); }
.btn-daten-hero::after {
content: "";
position: absolute;
top: 0;
left: -60%;
width: 35%;
height: 100%;
background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.35), transparent);
transform: skewX(-18deg);
animation: account-head-shine 3.4s ease-in-out infinite;
pointer-events: none;
}
.btn-daten-hero-sparkle { display: inline-block; animation: account-nav-sparkle-twinkle 2.2s ease-in-out infinite; }
@keyframes daten-hero-border-shift {
0%, 100% { background-position: 0 0, 0% 50%; }
50% { background-position: 0 0, 100% 50%; }
}
@keyframes daten-hero-glow {
0%, 100% { box-shadow: 0 0 0 2px color-mix(in srgb, var(--c-accent) 30%, transparent), 0 0 16px -4px color-mix(in srgb, var(--c-accent) 60%, transparent); }
50% { box-shadow: 0 0 0 2px color-mix(in srgb, #9b7fd6 40%, transparent), 0 0 24px -2px color-mix(in srgb, #9b7fd6 70%, transparent); }
}
@media (prefers-reduced-motion: reduce) { .btn-daten-hero, .btn-daten-hero::after, .btn-daten-hero-sparkle { animation: none; } }
/* Abosystem: drei Planvergleichs-Karten + Statuskarte + Benachrichtigungsliste. */
.abo-plans { margin: 1.4rem 0 1.6rem; }
.abo-plan-card {