LysetsRev/csgowtf
1
0
Fork 0
forked from CSGOWTF/csgowtf
Code Issues Pull Requests Packages Projects Releases Wiki Activity

style: Redesign players page with neon esports aesthetic

Browse Source 
Convert the players page and related components from DaisyUI to the
custom neon design system, matching the landing page and matches page
visual style. Adds decorative blur orbs, neon glow effects, and
consistent color semantics across PlayerCard, RecentPlayers, and
TrackPlayerModal components.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
vikingowl
2025-12-07 17:18:01 +01:00
parent 6dc12f0c35
commit 8de8f1696f
4 changed files with 146 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files

97
src/lib/components/player/TrackPlayerModal.svelte
View File

@@ -1,5 +1,6 @@
<script lang="ts">
import { createEventDispatcher } from 'svelte';
import { Info, AlertCircle, Loader2 } from 'lucide-svelte';
import Modal from '$lib/components/ui/Modal.svelte';
import { playersAPI } from '$lib/api/players';
import { toast } from '$lib/stores/toast';
@@ -78,26 +79,18 @@
<Modal bind:open onClose={handleClose} title={isTracked ? 'Untrack Player' : 'Track Player'}>
<div class="space-y-4">
<div class="alert alert-info">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
class="h-6 w-6 shrink-0 stroke-current"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
></path>
</svg>
<div class="text-sm">
<!-- Info Alert -->
<div class="flex items-start gap-3 rounded-lg border border-neon-blue/30 bg-neon-blue/10 p-4">
<Info class="h-5 w-5 shrink-0 text-neon-blue" />
<div class="text-sm text-neon-blue">
{#if isTracked}
<p>Remove <strong>{playerName}</strong> from automatic match tracking.</p>
<p>
Remove <strong class="font-semibold">{playerName}</strong> from automatic match tracking.
</p>
{:else}
<p>
Add <strong>{playerName}</strong> to the tracking system to automatically fetch new matches.
Add <strong class="font-semibold">{playerName}</strong> to the tracking system to automatically
fetch new matches.
</p>
{/if}
</div>
@@ -105,73 +98,77 @@
<!-- Auth Code Input (only for tracking, untrack doesn't need auth) -->
{#if !isTracked}
<div class="form-control">
<label class="label" for="authCode">
<span class="label-text font-medium">Authentication Code *</span>
<div class="space-y-2">
<label class="block text-sm font-medium text-white" for="authCode">
Authentication Code *
</label>
<input
id="authCode"
type="text"
placeholder="Enter your auth code"
class="input input-bordered w-full"
class="w-full rounded-lg border border-neon-blue/30 bg-void px-4 py-2.5 text-white placeholder-white/40 transition-all duration-300 focus:border-neon-blue focus:outline-none focus:ring-1 focus:ring-neon-blue disabled:opacity-50"
bind:value={authCode}
disabled={isLoading}
required
/>
<div class="label">
<span class="label-text-alt text-base-content/60">
Required to verify ownership of this Steam account
</span>
</div>
<p class="text-xs text-white/50">Required to verify ownership of this Steam account</p>
</div>
{/if}
<!-- Error Message -->
{#if error}
<div class="alert alert-error">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6 shrink-0 stroke-current"
fill="none"
viewBox="0 0 24 24"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
/>
</svg>
<span>{error}</span>
<div class="flex items-start gap-3 rounded-lg border border-neon-red/30 bg-neon-red/10 p-4">
<AlertCircle class="h-5 w-5 shrink-0 text-neon-red" />
<span class="text-sm text-neon-red">{error}</span>
</div>
{/if}
<!-- Help Text -->
<div class="text-sm text-base-content/70">
<p class="mb-2 font-medium">How to get your authentication code:</p>
<div class="text-sm text-white/60">
<p class="mb-2 font-medium text-white/70">How to get your authentication code:</p>
<ol class="list-inside list-decimal space-y-1">
<li>Open CS2 and go to Settings → Game</li>
<li>Enable the Developer Console</li>
<li>Press <kbd class="kbd kbd-sm">~</kbd> to open the console</li>
<li>Type: <code class="rounded bg-base-300 px-1">status</code></li>
<li>
Press <kbd class="rounded border border-white/20 bg-void px-2 py-0.5 font-mono text-xs"
>~</kbd
> to open the console
</li>
<li>
Type: <code class="rounded bg-void px-1.5 py-0.5 font-mono text-neon-blue">status</code>
</li>
<li>Copy the code shown next to "Account:"</li>
</ol>
</div>
</div>
{#snippet actions()}
<button class="btn" onclick={handleClose} disabled={isLoading}>Cancel</button>
<button
class="rounded-lg border border-white/20 px-4 py-2 text-sm font-medium text-white/70 transition-all duration-300 hover:bg-white/10 hover:text-white disabled:opacity-50"
onclick={handleClose}
disabled={isLoading}
>
Cancel
</button>
{#if isTracked}
<button class="btn btn-error" onclick={handleUntrack} disabled={isLoading}>
<button
class="flex items-center gap-2 rounded-lg bg-neon-red px-4 py-2 text-sm font-medium text-white transition-all duration-300 hover:shadow-[0_0_20px_rgba(255,51,102,0.4)] disabled:opacity-50"
onclick={handleUntrack}
disabled={isLoading}
>
{#if isLoading}
<span class="loading loading-spinner loading-sm"></span>
<Loader2 class="h-4 w-4 animate-spin" />
{/if}
Untrack Player
</button>
{:else}
<button class="btn btn-primary" onclick={handleTrack} disabled={isLoading}>
<button
class="flex items-center gap-2 rounded-lg bg-neon-blue px-4 py-2 text-sm font-medium text-void transition-all duration-300 hover:shadow-[0_0_20px_rgba(0,212,255,0.4)] disabled:opacity-50"
onclick={handleTrack}
disabled={isLoading}
>
{#if isLoading}
<span class="loading loading-spinner loading-sm"></span>
<Loader2 class="h-4 w-4 animate-spin" />
{/if}
Track Player
</button>