refactor: Redesign match hero with modern translucent panels
Implemented comprehensive visual overhaul based on UX feedback: Background & Framing: - Replace single gradient with dual-layer system for depth - Add top-to-bottom gradient (30% → transparent → 40%) for framing - Add left-to-right gradient (70% → 40% → 70%) for content focus - Creates natural vignette effect that draws eye to center Hero Info Panel: - Wrap score and metadata in translucent panel (black/40 + backdrop-blur) - Add subtle border (white/10) for definition - Center-align and constrain width (max-w-3xl) for focused composition - Cleaner hierarchy with reduced text shadows (rely on panel for contrast) Typography & Layout: - Increase map title to text-5xl, remove badge duplication - Score numbers to text-6xl for prominence - Team labels to text-xs with reduced opacity (70%) - Metadata with bullet separators (•) for cleaner inline layout - Smaller icons (3.5) and tighter spacing Download Demo Button: - Ghost style with translucent background (white/15) - Subtle border (white/25) instead of solid primary color - Hover effect (white/25) for interaction feedback - Hide text on mobile (icon only) for space efficiency Navigation: - Reduce tabs background to 35% opacity with stronger backdrop-blur-lg - Add border (white/10) for subtle definition - Maintains readability while showing more background Result: Modern, cinematic interface with improved visual hierarchy and readability on both dark and bright map backgrounds. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -48,8 +48,9 @@
|
||||
<!-- Background Image -->
|
||||
<div class="absolute inset-0">
|
||||
<img src={mapBg} alt={mapName} class="h-full w-full object-cover" onerror={handleImageError} />
|
||||
<!-- Stronger gradient overlay for better text contrast -->
|
||||
<div class="absolute inset-0 bg-gradient-to-r from-black/95 via-black/85 to-black/75"></div>
|
||||
<!-- Multi-layer gradient overlay for depth and framing -->
|
||||
<div class="absolute inset-0 bg-gradient-to-b from-black/30 via-transparent to-black/40"></div>
|
||||
<div class="absolute inset-0 bg-gradient-to-r from-black/70 via-black/40 to-black/70"></div>
|
||||
</div>
|
||||
|
||||
<div class="container relative mx-auto px-4 py-8">
|
||||
@@ -65,84 +66,69 @@
|
||||
</div>
|
||||
|
||||
<!-- Map Name -->
|
||||
<div class="mb-4 flex items-center justify-between">
|
||||
<div class="mb-6 flex items-center justify-between">
|
||||
<div>
|
||||
{#if match.map}
|
||||
<Badge variant="default" size="lg">{match.map}</Badge>
|
||||
{/if}
|
||||
<h1
|
||||
class="mt-2 text-4xl font-bold text-white"
|
||||
style="text-shadow: 0 4px 12px rgba(0, 0, 0, 0.9), 0 2px 6px rgba(0, 0, 0, 0.7);"
|
||||
>
|
||||
<h1 class="text-5xl font-bold text-white drop-shadow-2xl">
|
||||
{mapName}
|
||||
</h1>
|
||||
</div>
|
||||
{#if match.demo_parsed}
|
||||
<button
|
||||
class="btn gap-2 bg-primary/90 text-primary-content backdrop-blur-sm hover:bg-primary"
|
||||
class="btn btn-ghost gap-2 border border-white/25 bg-white/15 text-white backdrop-blur-md hover:bg-white/25"
|
||||
>
|
||||
<Download class="h-4 w-4" />
|
||||
Download Demo
|
||||
<span class="hidden sm:inline">Download Demo</span>
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<!-- Score -->
|
||||
<div class="mb-6 flex items-center justify-center gap-6">
|
||||
<div class="text-center">
|
||||
<!-- Hero Info Panel with translucent background -->
|
||||
<div
|
||||
class="text-sm font-medium uppercase tracking-wider text-white"
|
||||
style="text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9);"
|
||||
class="mx-auto max-w-3xl rounded-xl border border-white/10 bg-black/40 p-6 backdrop-blur-md"
|
||||
>
|
||||
<!-- Score -->
|
||||
<div class="mb-4 flex items-center justify-center gap-8">
|
||||
<div class="text-center">
|
||||
<div class="mb-1 text-xs font-medium uppercase tracking-wider text-white/70">
|
||||
Terrorists
|
||||
</div>
|
||||
<div
|
||||
class="font-mono text-5xl font-bold text-terrorist"
|
||||
style="text-shadow: 0 6px 12px rgba(0, 0, 0, 0.95), 0 3px 6px rgba(0, 0, 0, 0.8), 0 0 20px rgba(0, 0, 0, 0.6);"
|
||||
>
|
||||
<div class="font-mono text-6xl font-bold text-terrorist drop-shadow-lg">
|
||||
{match.score_team_a}
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-3xl font-bold text-white" style="text-shadow: 0 4px 8px rgba(0, 0, 0, 0.9);">
|
||||
:
|
||||
</div>
|
||||
<div class="text-4xl font-bold text-white/50">:</div>
|
||||
<div class="text-center">
|
||||
<div
|
||||
class="text-sm font-medium uppercase tracking-wider text-white"
|
||||
style="text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9);"
|
||||
>
|
||||
<div class="mb-1 text-xs font-medium uppercase tracking-wider text-white/70">
|
||||
Counter-Terrorists
|
||||
</div>
|
||||
<div
|
||||
class="font-mono text-5xl font-bold text-ct"
|
||||
style="text-shadow: 0 6px 12px rgba(0, 0, 0, 0.95), 0 3px 6px rgba(0, 0, 0, 0.8), 0 0 20px rgba(0, 0, 0, 0.6);"
|
||||
>
|
||||
<div class="font-mono text-6xl font-bold text-ct drop-shadow-lg">
|
||||
{match.score_team_b}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Match Meta -->
|
||||
<div
|
||||
class="flex flex-wrap items-center justify-center gap-4 text-sm text-white"
|
||||
style="text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9);"
|
||||
>
|
||||
<div class="flex items-center gap-2">
|
||||
<Calendar class="h-4 w-4" style="filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.9));" />
|
||||
<div class="flex flex-wrap items-center justify-center gap-3 text-sm text-white/90">
|
||||
<div class="flex items-center gap-1.5">
|
||||
<Calendar class="h-3.5 w-3.5" />
|
||||
<span>{formattedDate}</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<Clock class="h-4 w-4" style="filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.9));" />
|
||||
<span class="text-white/30">•</span>
|
||||
<div class="flex items-center gap-1.5">
|
||||
<Clock class="h-3.5 w-3.5" />
|
||||
<span>{duration}</span>
|
||||
</div>
|
||||
<Badge variant="info" size="sm">MR12 ({match.max_rounds} rounds)</Badge>
|
||||
<span class="text-white/30">•</span>
|
||||
<span>MR12 ({match.max_rounds} rounds)</span>
|
||||
{#if match.demo_parsed}
|
||||
<span class="text-white/30">•</span>
|
||||
<Badge variant="success" size="sm">Demo Parsed</Badge>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tabs -->
|
||||
<div class="mt-6 rounded-lg bg-black/70 p-4 backdrop-blur-md">
|
||||
<div class="mt-6 rounded-lg border border-white/10 bg-black/35 p-4 backdrop-blur-lg">
|
||||
<Tabs {tabs} variant="bordered" size="md" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user