style: premium Dashboard redesign inspired by Stitch mockups
Build & Deploy Tippspiel / build (push) Successful in 51s
Build & Deploy Tippspiel / build (push) Successful in 51s
Hero Card: - Dramatic gradient background (navy → deep blue) - Radial glow effect behind team flags (stadium atmosphere) - LED kickoff time with golden glow - Larger flag icons (72px) as app-icon style boxes - Countdown as golden badge with pulsing dot - Bigger CTA button with gradient and shadow Bottom Nav: - Filled/solid SVG icons (home, soccer ball, trophy, person) instead of Lucide outline icons — more premium feel Nudges: - Icon + text layout with hover animation - Better spacing and visual hierarchy Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Ronny
@@ -1,5 +1,4 @@
|
||||
import { NavLink } from 'react-router-dom';
|
||||
import { Home, Trophy, User, Swords } from 'lucide-react';
|
||||
import styles from './BottomNav.module.css';
|
||||
|
||||
export default function BottomNav() {
|
||||
@@ -9,19 +8,19 @@ export default function BottomNav() {
|
||||
return (
|
||||
<nav className={styles.bottomNav}>
|
||||
<NavLink to="/" end className={linkClass}>
|
||||
<Home size={20} />
|
||||
<svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor"><path d="M12 3l9 8-1.4 1.3L18 10.8V20h-5v-6H11v6H6v-9.2l-1.6 1.5L3 11l9-8z"/></svg>
|
||||
<span>Home</span>
|
||||
</NavLink>
|
||||
<NavLink to="/spiele" className={linkClass}>
|
||||
<Swords size={20} />
|
||||
<svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 3.3l1.35-.95c1.82.56 3.37 1.76 4.38 3.34l-.39 1.34-1.35.46L13 6.7V5.3zm-3.35-.95L11 5.3v1.4L7.01 9.49l-1.35-.46-.39-1.34a9.972 9.972 0 014.38-3.34zM7.08 17.11l-1.14.1C4.73 15.81 4 13.99 4 12c0-.12.01-.23.02-.35l1-.73 1.38.48 1.46 4.34-.78 1.37zm7.42 2.48c-.79.26-1.63.41-2.5.41s-1.71-.15-2.5-.41l-.69-1.49.64-1.1h5.11l.64 1.11-.7 1.48zM14.27 15H9.73l-1.35-4.02L12 8.44l3.63 2.54L14.27 15zm3.79 2.21l-1.14-.1-.78-1.37 1.46-4.34 1.38-.48 1 .73c.01.12.02.23.02.35 0 1.99-.73 3.81-1.94 5.21z"/></svg>
|
||||
<span>Spiele</span>
|
||||
</NavLink>
|
||||
<NavLink to="/rangliste" className={linkClass}>
|
||||
<Trophy size={20} />
|
||||
<svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor"><path d="M19 5h-2V3H7v2H5c-1.1 0-2 .9-2 2v1c0 2.55 1.92 4.63 4.39 4.94A5.01 5.01 0 0011 15.9V19H7v2h10v-2h-4v-3.1a5.01 5.01 0 003.61-2.96C19.08 12.63 21 10.55 21 8V7c0-1.1-.9-2-2-2zM5 8V7h2v3.82C5.84 10.4 5 9.3 5 8zm14 0c0 1.3-.84 2.4-2 2.82V7h2v1z"/></svg>
|
||||
<span>Rangliste</span>
|
||||
</NavLink>
|
||||
<NavLink to="/profil" className={linkClass}>
|
||||
<User size={20} />
|
||||
<svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>
|
||||
<span>Profil</span>
|
||||
</NavLink>
|
||||
</nav>
|
||||
|
||||
@@ -2,14 +2,26 @@
|
||||
padding: 16px;
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
/* ═══════════════════════════════════════
|
||||
HERO CARD — Stadium atmosphere
|
||||
═══════════════════════════════════════ */
|
||||
.hero {
|
||||
background: var(--surface-mid);
|
||||
position: relative;
|
||||
border-radius: var(--radius-lg);
|
||||
padding: 20px;
|
||||
padding: 24px 20px 20px;
|
||||
cursor: pointer;
|
||||
border: 1px solid rgba(75, 183, 248, 0.1);
|
||||
overflow: hidden;
|
||||
background: linear-gradient(165deg, #141e38 0%, #0d1526 40%, #091020 100%);
|
||||
border: 1px solid rgba(75, 183, 248, 0.12);
|
||||
box-shadow:
|
||||
0 8px 32px rgba(0, 0, 0, 0.4),
|
||||
0 2px 8px rgba(0, 0, 0, 0.2),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.06);
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
|
||||
@@ -17,122 +29,264 @@
|
||||
transform: scale(1.01);
|
||||
}
|
||||
|
||||
.heroLabel {
|
||||
font-size: 0.75rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
color: var(--text-secondary);
|
||||
/* Radial glow behind the teams */
|
||||
.heroGlow {
|
||||
position: absolute;
|
||||
top: 40%;
|
||||
left: 50%;
|
||||
width: 280px;
|
||||
height: 200px;
|
||||
transform: translate(-50%, -50%);
|
||||
background: radial-gradient(ellipse, rgba(75, 183, 248, 0.12) 0%, rgba(254, 174, 50, 0.06) 40%, transparent 70%);
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.heroHeader {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.heroLabel {
|
||||
font-size: 0.7rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1.5px;
|
||||
color: var(--text-muted);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.heroCountdown {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
color: var(--gold);
|
||||
font-weight: 700;
|
||||
font-size: 0.85rem;
|
||||
font-size: 0.75rem;
|
||||
letter-spacing: 0.5px;
|
||||
background: rgba(254, 174, 50, 0.1);
|
||||
padding: 4px 10px;
|
||||
border-radius: 20px;
|
||||
border: 1px solid rgba(254, 174, 50, 0.2);
|
||||
}
|
||||
|
||||
.countdownDot {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background: var(--gold);
|
||||
animation: pulse 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.3; }
|
||||
}
|
||||
|
||||
/* LED Kickoff Time */
|
||||
.heroKickoff {
|
||||
text-align: center;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.heroLED {
|
||||
font-family: 'DSEG7', 'Courier New', monospace;
|
||||
font-size: 22px;
|
||||
color: #FECC4C;
|
||||
letter-spacing: 0.04em;
|
||||
text-shadow:
|
||||
0 0 4px rgba(254, 174, 50, 0.9),
|
||||
0 0 12px rgba(254, 174, 50, 0.5),
|
||||
0 0 24px rgba(254, 174, 50, 0.25);
|
||||
}
|
||||
|
||||
/* Teams */
|
||||
.heroTeams {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
margin: 16px 0;
|
||||
align-items: flex-start;
|
||||
gap: 24px;
|
||||
margin: 12px 0 20px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.heroTeam {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
gap: 8px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.heroCrestBox {
|
||||
width: 72px;
|
||||
height: 72px;
|
||||
border-radius: 18px;
|
||||
background: var(--surface-high);
|
||||
box-shadow:
|
||||
0 4px 16px rgba(0, 0, 0, 0.3),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.15);
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.heroCrest {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.heroVs {
|
||||
font-size: 1.2rem;
|
||||
.heroCrestFallback {
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
.heroTeamName {
|
||||
font-size: 0.85rem;
|
||||
font-weight: 700;
|
||||
color: var(--gold);
|
||||
}
|
||||
|
||||
.heroTip {
|
||||
background: var(--surface-high);
|
||||
border-radius: var(--radius-sm);
|
||||
padding: 8px 16px;
|
||||
color: var(--text-primary);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
text-align: center;
|
||||
color: var(--gold);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.heroVs {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 800;
|
||||
color: var(--gold);
|
||||
margin-top: 24px;
|
||||
text-shadow: 0 0 10px rgba(254, 174, 50, 0.3);
|
||||
}
|
||||
|
||||
/* CTA / Tip */
|
||||
.heroTipBtn {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
padding: 14px;
|
||||
border: none;
|
||||
border-radius: var(--radius-sm);
|
||||
background: var(--primary);
|
||||
border-radius: var(--radius-md);
|
||||
background: linear-gradient(135deg, var(--primary) 0%, #2196f3 100%);
|
||||
color: white;
|
||||
font-weight: 600;
|
||||
font-weight: 700;
|
||||
font-size: 1rem;
|
||||
cursor: pointer;
|
||||
font-size: 0.95rem;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
box-shadow: 0 4px 20px rgba(75, 183, 248, 0.3);
|
||||
transition: transform 0.15s, box-shadow 0.15s;
|
||||
letter-spacing: 0.3px;
|
||||
}
|
||||
|
||||
.heroTipBtn:hover {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 6px 24px rgba(75, 183, 248, 0.4);
|
||||
}
|
||||
|
||||
.heroTipBtn:active {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
.heroTip {
|
||||
border-radius: var(--radius-sm);
|
||||
padding: 10px 16px;
|
||||
text-align: center;
|
||||
color: var(--gold);
|
||||
font-weight: 600;
|
||||
font-size: 0.9rem;
|
||||
background: rgba(254, 174, 50, 0.08);
|
||||
border: 1px solid rgba(254, 174, 50, 0.15);
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.heroEmpty {
|
||||
text-align: center;
|
||||
color: var(--text-muted);
|
||||
margin: 24px 0;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* ═══════════════════════════════════════
|
||||
STATS ROW
|
||||
═══════════════════════════════════════ */
|
||||
.statsRow {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
gap: 8px;
|
||||
margin: 16px 0;
|
||||
}
|
||||
|
||||
.statTile {
|
||||
background: var(--surface-mid);
|
||||
border-radius: var(--radius-md);
|
||||
padding: 14px 8px;
|
||||
padding: 16px 8px;
|
||||
text-align: center;
|
||||
border: 1px solid rgba(75, 183, 248, 0.08);
|
||||
}
|
||||
|
||||
.statValue {
|
||||
display: block;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
font-size: 1.6rem;
|
||||
font-weight: 800;
|
||||
color: var(--text-primary);
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.statGold {
|
||||
color: var(--gold);
|
||||
}
|
||||
|
||||
.statLabel {
|
||||
display: block;
|
||||
font-size: 0.7rem;
|
||||
font-size: 0.65rem;
|
||||
color: var(--text-muted);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
margin-top: 4px;
|
||||
letter-spacing: 0.8px;
|
||||
margin-top: 6px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* ═══════════════════════════════════════
|
||||
NUDGES
|
||||
═══════════════════════════════════════ */
|
||||
.nudges {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.nudge {
|
||||
background: var(--surface-low);
|
||||
border-radius: var(--radius-sm);
|
||||
padding: 12px 16px;
|
||||
color: var(--text-secondary);
|
||||
font-size: 0.9rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 14px 16px;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
transition: background 0.2s, transform 0.15s;
|
||||
}
|
||||
|
||||
.nudge:hover {
|
||||
background: var(--surface-mid);
|
||||
transform: translateX(2px);
|
||||
}
|
||||
|
||||
.nudgeIcon {
|
||||
font-size: 1.2rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.nudgeText {
|
||||
font-size: 0.85rem;
|
||||
color: var(--text-secondary);
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
/* ═══════════════════════════════════════
|
||||
STATES
|
||||
═══════════════════════════════════════ */
|
||||
.loading,
|
||||
.error {
|
||||
text-align: center;
|
||||
|
||||
@@ -16,10 +16,17 @@ function formatStreak(streak: number): string {
|
||||
return '0';
|
||||
}
|
||||
|
||||
function formatKickoff(utcDate: string): string {
|
||||
return new Date(utcDate).toLocaleString('de-DE', {
|
||||
hour: '2-digit', minute: '2-digit', timeZone: 'Europe/Berlin',
|
||||
});
|
||||
}
|
||||
|
||||
function formatCountdown(minutes: number): string {
|
||||
if (minutes < 60) return `in ${minutes} Min`;
|
||||
if (minutes < 60) return `in ${Math.round(minutes)} Min`;
|
||||
if (minutes < 60 * 24) return `in ${Math.floor(minutes / 60)}h`;
|
||||
return `in ${Math.floor(minutes / (60 * 24))} Tagen`;
|
||||
const days = Math.floor(minutes / (60 * 24));
|
||||
return `in ${days} ${days === 1 ? 'Tag' : 'Tagen'}`;
|
||||
}
|
||||
|
||||
export default function DashboardPage(_props: Props) {
|
||||
@@ -45,46 +52,55 @@ export default function DashboardPage(_props: Props) {
|
||||
return (
|
||||
<div className={styles.dashboard}>
|
||||
{/* Hero Card */}
|
||||
<div className={`card ${styles.hero}`} onClick={() => navigate('/spiele')}>
|
||||
<div className={styles.heroLabel}>
|
||||
<span>Nächstes Spiel</span>
|
||||
<div className={styles.hero} onClick={() => navigate('/spiele')}>
|
||||
{/* Radial glow background effect */}
|
||||
<div className={styles.heroGlow} />
|
||||
|
||||
<div className={styles.heroHeader}>
|
||||
<span className={styles.heroLabel}>Nächstes Spiel</span>
|
||||
{hero && (
|
||||
<span className={styles.heroCountdown}>
|
||||
{formatCountdown(hero.match.minutesUntilKickoff)}
|
||||
<span className={styles.countdownDot} />
|
||||
{formatCountdown(hero.match.minutesUntilKickoff).toUpperCase()}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{hero ? (
|
||||
<>
|
||||
{/* LED Kickoff Time */}
|
||||
<div className={styles.heroKickoff}>
|
||||
<span className={styles.heroLED}>{formatKickoff(hero.match.utcDate)}</span>
|
||||
</div>
|
||||
|
||||
{/* Teams */}
|
||||
<div className={styles.heroTeams}>
|
||||
<div className={styles.heroTeam}>
|
||||
{hero.match.homeTeam.crest ? (
|
||||
<img
|
||||
src={hero.match.homeTeam.crest}
|
||||
alt={hero.match.homeTeam.name}
|
||||
className={styles.heroCrest}
|
||||
/>
|
||||
) : (
|
||||
<div className={styles.heroCrest} />
|
||||
)}
|
||||
<span>{hero.match.homeTeam.shortName}</span>
|
||||
<div className={styles.heroCrestBox}>
|
||||
{hero.match.homeTeam.crest ? (
|
||||
<img src={hero.match.homeTeam.crest} alt={hero.match.homeTeam.name} className={styles.heroCrest} />
|
||||
) : (
|
||||
<span className={styles.heroCrestFallback}>🏳️</span>
|
||||
)}
|
||||
</div>
|
||||
<span className={styles.heroTeamName}>{hero.match.homeTeam.shortName}</span>
|
||||
</div>
|
||||
<span className={styles.heroVs}>vs</span>
|
||||
|
||||
<span className={styles.heroVs}>VS</span>
|
||||
|
||||
<div className={styles.heroTeam}>
|
||||
{hero.match.awayTeam.crest ? (
|
||||
<img
|
||||
src={hero.match.awayTeam.crest}
|
||||
alt={hero.match.awayTeam.name}
|
||||
className={styles.heroCrest}
|
||||
/>
|
||||
) : (
|
||||
<div className={styles.heroCrest} />
|
||||
)}
|
||||
<span>{hero.match.awayTeam.shortName}</span>
|
||||
<div className={styles.heroCrestBox}>
|
||||
{hero.match.awayTeam.crest ? (
|
||||
<img src={hero.match.awayTeam.crest} alt={hero.match.awayTeam.name} className={styles.heroCrest} />
|
||||
) : (
|
||||
<span className={styles.heroCrestFallback}>🏳️</span>
|
||||
)}
|
||||
</div>
|
||||
<span className={styles.heroTeamName}>{hero.match.awayTeam.shortName}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* CTA or Tip Display */}
|
||||
{hero.userTip ? (
|
||||
<div className={styles.heroTip}>
|
||||
Dein Tipp: {hero.userTip.home}:{hero.userTip.away} ✓
|
||||
@@ -110,27 +126,23 @@ export default function DashboardPage(_props: Props) {
|
||||
});
|
||||
}}
|
||||
>
|
||||
Jetzt tippen
|
||||
Jetzt tippen ⚽
|
||||
</button>
|
||||
) : null}
|
||||
</>
|
||||
) : (
|
||||
<p style={{ textAlign: 'center', color: 'var(--text-muted)', margin: '16px 0' }}>
|
||||
Keine anstehenden Spiele
|
||||
</p>
|
||||
<p className={styles.heroEmpty}>Keine anstehenden Spiele</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Stats Row */}
|
||||
<div className={styles.statsRow}>
|
||||
<div className={`card ${styles.statTile}`}>
|
||||
<span className={styles.statValue}>
|
||||
{stats.rank !== null ? stats.rank : '—'}
|
||||
</span>
|
||||
<span className={styles.statValue}>{stats.rank !== null ? stats.rank : '—'}</span>
|
||||
<span className={styles.statLabel}>Dein Rang</span>
|
||||
</div>
|
||||
<div className={`card ${styles.statTile}`}>
|
||||
<span className={styles.statValue}>{stats.totalPoints}</span>
|
||||
<span className={`${styles.statValue} ${styles.statGold}`}>{stats.totalPoints}</span>
|
||||
<span className={styles.statLabel}>Punkte</span>
|
||||
</div>
|
||||
<div className={`card ${styles.statTile}`}>
|
||||
@@ -151,7 +163,10 @@ export default function DashboardPage(_props: Props) {
|
||||
else if (nudge.type === 'leader') navigate('/rangliste');
|
||||
}}
|
||||
>
|
||||
{nudge.text}
|
||||
<span className={styles.nudgeIcon}>
|
||||
{nudge.type === 'untipped' ? '📅' : nudge.type === 'leader' ? '🏆' : '🎯'}
|
||||
</span>
|
||||
<span className={styles.nudgeText}>{nudge.text}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
@@ -163,7 +178,6 @@ export default function DashboardPage(_props: Props) {
|
||||
onClose={() => setTipMatch(null)}
|
||||
onSaved={(_matchId, tipHome, tipAway) => {
|
||||
setTipMatch(null);
|
||||
// Update dashboard data to reflect the new tip
|
||||
if (data && data.hero) {
|
||||
setData({
|
||||
...data,
|
||||
|
||||
Reference in New Issue
Block a user