feat: implement CS2-inspired design system and UI components
This commit delivers a comprehensive design system and component library inspired by Counter-Strike 2's tactical aesthetic. Design System: - Created docs/DESIGN.md with complete design language documentation - CS2-inspired color palette: T-side orange (#d4a74a), CT-side blue (#5e98d9) - Dark-first approach with tactical, data-dense layouts - Typography scale, spacing system, and animation guidelines Component Library: - Button component: 4 variants (primary, secondary, ghost, danger), 3 sizes - Badge component: 7 variants including team-specific badges - Card component: 3 variants (default, elevated, interactive) - Header component: Responsive navigation with mobile menu - Footer component: Site-wide footer with organized link sections Pages: - Redesigned homepage with hero section, featured matches, features grid, CTA - Created placeholder pages: /matches, /players, /about - All pages follow CS2 aesthetic with proper component usage Technical Fixes: - Fixed Svelte 5 snippet syntax errors (removed incorrect render prop pattern) - Fixed Card component accessibility (conditional button/div rendering) - Removed invalid CSS border-border class from app.css - Ensured zero TypeScript errors and warnings Build Status: ✓ Verified with 0 errors, 0 warnings 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -8,10 +8,6 @@
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
* {
|
||||
@apply border-border;
|
||||
}
|
||||
|
||||
body {
|
||||
@apply bg-base-100 text-base-content;
|
||||
font-feature-settings:
|
||||
|
||||
132
src/lib/components/layout/Footer.svelte
Normal file
132
src/lib/components/layout/Footer.svelte
Normal file
@@ -0,0 +1,132 @@
|
||||
<script lang="ts">
|
||||
import { Github, Heart } from 'lucide-svelte';
|
||||
|
||||
const currentYear = new Date().getFullYear();
|
||||
|
||||
const links = {
|
||||
main: [
|
||||
{ name: 'Home', href: '/' },
|
||||
{ name: 'Matches', href: '/matches' },
|
||||
{ name: 'Players', href: '/players' },
|
||||
{ name: 'API Docs', href: '/docs/api' }
|
||||
],
|
||||
about: [
|
||||
{ name: 'About', href: '/about' },
|
||||
{ name: 'FAQ', href: '/faq' },
|
||||
{ name: 'Privacy', href: '/privacy' },
|
||||
{ name: 'Terms', href: '/terms' }
|
||||
],
|
||||
resources: [
|
||||
{ name: 'GitHub', href: 'https://somegit.dev/CSGOWTF/csgowtf', external: true },
|
||||
{ name: 'Backend', href: 'https://somegit.dev/CSGOWTF/csgowtfd', external: true },
|
||||
{
|
||||
name: 'Donate',
|
||||
href: 'https://liberapay.com/CSGOWTF/',
|
||||
external: true
|
||||
}
|
||||
]
|
||||
};
|
||||
</script>
|
||||
|
||||
<footer class="border-t border-base-300 bg-base-100">
|
||||
<div class="container mx-auto px-4 py-12">
|
||||
<div class="grid gap-8 md:grid-cols-4">
|
||||
<!-- Brand -->
|
||||
<div class="md:col-span-1">
|
||||
<a href="/" class="mb-4 inline-block text-2xl font-bold">
|
||||
<span class="text-primary">CS2</span><span class="text-secondary">.WTF</span>
|
||||
</a>
|
||||
<p class="mb-4 text-sm text-base-content/60">
|
||||
Statistics for CS2 matchmaking matches. Free and open source.
|
||||
</p>
|
||||
<div class="flex gap-3">
|
||||
<a
|
||||
href="https://somegit.dev/CSGOWTF/csgowtf"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="text-base-content/60 transition-colors hover:text-primary"
|
||||
aria-label="GitHub"
|
||||
>
|
||||
<Github class="h-5 w-5" />
|
||||
</a>
|
||||
<a
|
||||
href="https://liberapay.com/CSGOWTF/"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="text-base-content/60 transition-colors hover:text-error"
|
||||
aria-label="Support on Liberapay"
|
||||
>
|
||||
<Heart class="h-5 w-5" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Links -->
|
||||
<div>
|
||||
<h3 class="mb-3 text-sm font-semibold uppercase tracking-wider text-base-content/80">
|
||||
Navigate
|
||||
</h3>
|
||||
<ul class="space-y-2">
|
||||
{#each links.main as link}
|
||||
<li>
|
||||
<a
|
||||
href={link.href}
|
||||
class="text-sm text-base-content/60 transition-colors hover:text-primary"
|
||||
>
|
||||
{link.name}
|
||||
</a>
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 class="mb-3 text-sm font-semibold uppercase tracking-wider text-base-content/80">
|
||||
About
|
||||
</h3>
|
||||
<ul class="space-y-2">
|
||||
{#each links.about as link}
|
||||
<li>
|
||||
<a
|
||||
href={link.href}
|
||||
class="text-sm text-base-content/60 transition-colors hover:text-primary"
|
||||
>
|
||||
{link.name}
|
||||
</a>
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 class="mb-3 text-sm font-semibold uppercase tracking-wider text-base-content/80">
|
||||
Resources
|
||||
</h3>
|
||||
<ul class="space-y-2">
|
||||
{#each links.resources as link}
|
||||
<li>
|
||||
<a
|
||||
href={link.href}
|
||||
class="text-sm text-base-content/60 transition-colors hover:text-primary"
|
||||
{...link.external ? { target: '_blank', rel: 'noopener noreferrer' } : {}}
|
||||
>
|
||||
{link.name}
|
||||
</a>
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Bottom -->
|
||||
<div class="mt-12 border-t border-base-300 pt-8 text-center text-sm text-base-content/60">
|
||||
<p>
|
||||
© {currentYear} CSGOW.TF Team. Licensed under
|
||||
<a href="/license" class="hover:text-primary">GPL-3.0</a>
|
||||
</p>
|
||||
<p class="mt-2">
|
||||
Made with <Heart class="inline h-4 w-4 text-error" /> by the community, for the community.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
77
src/lib/components/layout/Header.svelte
Normal file
77
src/lib/components/layout/Header.svelte
Normal file
@@ -0,0 +1,77 @@
|
||||
<script lang="ts">
|
||||
import { Search, Menu, X } from 'lucide-svelte';
|
||||
|
||||
let mobileMenuOpen = $state(false);
|
||||
|
||||
const navigation = [
|
||||
{ name: 'Home', href: '/' },
|
||||
{ name: 'Matches', href: '/matches' },
|
||||
{ name: 'Players', href: '/players' },
|
||||
{ name: 'About', href: '/about' }
|
||||
];
|
||||
</script>
|
||||
|
||||
<header class="sticky top-0 z-50 w-full border-b border-base-300 bg-base-100/95 backdrop-blur-md">
|
||||
<div class="container mx-auto px-4">
|
||||
<div class="flex h-16 items-center justify-between">
|
||||
<!-- Logo -->
|
||||
<a
|
||||
href="/"
|
||||
class="flex items-center gap-2 text-2xl font-bold transition-transform hover:scale-105"
|
||||
>
|
||||
<span class="text-primary">CS2</span><span class="text-secondary">.WTF</span>
|
||||
</a>
|
||||
|
||||
<!-- Desktop Navigation -->
|
||||
<nav class="hidden items-center gap-6 md:flex">
|
||||
{#each navigation as item}
|
||||
<a
|
||||
href={item.href}
|
||||
class="text-sm font-medium text-base-content/70 transition-colors hover:text-primary"
|
||||
>
|
||||
{item.name}
|
||||
</a>
|
||||
{/each}
|
||||
</nav>
|
||||
|
||||
<!-- Search & Actions -->
|
||||
<div class="flex items-center gap-3">
|
||||
<button
|
||||
class="btn btn-ghost btn-sm hidden md:inline-flex"
|
||||
aria-label="Search"
|
||||
title="Search (Cmd+K)"
|
||||
>
|
||||
<Search class="h-5 w-5" />
|
||||
</button>
|
||||
|
||||
<!-- Mobile Menu Toggle -->
|
||||
<button
|
||||
class="btn btn-ghost btn-sm md:hidden"
|
||||
onclick={() => (mobileMenuOpen = !mobileMenuOpen)}
|
||||
aria-label="Toggle menu"
|
||||
>
|
||||
{#if mobileMenuOpen}
|
||||
<X class="h-5 w-5" />
|
||||
{:else}
|
||||
<Menu class="h-5 w-5" />
|
||||
{/if}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Mobile Navigation -->
|
||||
{#if mobileMenuOpen}
|
||||
<nav class="animate-fade-in border-t border-base-300 py-4 md:hidden">
|
||||
{#each navigation as item}
|
||||
<a
|
||||
href={item.href}
|
||||
class="block px-4 py-2 text-sm font-medium text-base-content transition-colors hover:bg-base-200"
|
||||
onclick={() => (mobileMenuOpen = false)}
|
||||
>
|
||||
{item.name}
|
||||
</a>
|
||||
{/each}
|
||||
</nav>
|
||||
{/if}
|
||||
</div>
|
||||
</header>
|
||||
37
src/lib/components/ui/Badge.svelte
Normal file
37
src/lib/components/ui/Badge.svelte
Normal file
@@ -0,0 +1,37 @@
|
||||
<script lang="ts">
|
||||
import type { Snippet } from 'svelte';
|
||||
|
||||
interface Props {
|
||||
variant?: 'default' | 't-side' | 'ct-side' | 'success' | 'warning' | 'error' | 'info';
|
||||
size?: 'sm' | 'md' | 'lg';
|
||||
class?: string;
|
||||
children: Snippet;
|
||||
}
|
||||
|
||||
let { variant = 'default', size = 'md', class: className = '', children }: Props = $props();
|
||||
|
||||
const baseClasses = 'inline-flex items-center justify-center font-medium border rounded';
|
||||
|
||||
const variantClasses = {
|
||||
default: 'bg-base-300/50 border-base-content/20 text-base-content',
|
||||
't-side':
|
||||
'bg-terrorist/10 border-terrorist/30 text-terrorist-light backdrop-blur-sm font-semibold',
|
||||
'ct-side': 'bg-ct/10 border-ct/30 text-ct-light backdrop-blur-sm font-semibold',
|
||||
success: 'bg-success/10 border-success/30 text-success',
|
||||
warning: 'bg-warning/10 border-warning/30 text-warning',
|
||||
error: 'bg-error/10 border-error/30 text-error',
|
||||
info: 'bg-info/10 border-info/30 text-info'
|
||||
};
|
||||
|
||||
const sizeClasses = {
|
||||
sm: 'px-2 py-0.5 text-xs',
|
||||
md: 'px-2.5 py-1 text-sm',
|
||||
lg: 'px-3 py-1.5 text-base'
|
||||
};
|
||||
|
||||
const classes = `${baseClasses} ${variantClasses[variant]} ${sizeClasses[size]} ${className}`;
|
||||
</script>
|
||||
|
||||
<span class={classes}>
|
||||
{@render children()}
|
||||
</span>
|
||||
56
src/lib/components/ui/Button.svelte
Normal file
56
src/lib/components/ui/Button.svelte
Normal file
@@ -0,0 +1,56 @@
|
||||
<script lang="ts">
|
||||
import type { Snippet } from 'svelte';
|
||||
|
||||
interface Props {
|
||||
variant?: 'primary' | 'secondary' | 'ghost' | 'danger';
|
||||
size?: 'sm' | 'md' | 'lg';
|
||||
href?: string;
|
||||
type?: 'button' | 'submit' | 'reset';
|
||||
disabled?: boolean;
|
||||
class?: string;
|
||||
onclick?: () => void;
|
||||
children: Snippet;
|
||||
}
|
||||
|
||||
let {
|
||||
variant = 'primary',
|
||||
size = 'md',
|
||||
href,
|
||||
type = 'button',
|
||||
disabled = false,
|
||||
class: className = '',
|
||||
onclick,
|
||||
children
|
||||
}: Props = $props();
|
||||
|
||||
const baseClasses =
|
||||
'inline-flex items-center justify-center font-semibold transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-base-100 disabled:opacity-50 disabled:cursor-not-allowed';
|
||||
|
||||
const variantClasses = {
|
||||
primary:
|
||||
'bg-primary text-white hover:bg-primary-focus focus:ring-primary shadow-sm hover:shadow-lg hover:shadow-primary/30',
|
||||
secondary:
|
||||
'bg-secondary text-white hover:bg-secondary-focus focus:ring-secondary shadow-sm hover:shadow-lg hover:shadow-secondary/30',
|
||||
ghost:
|
||||
'bg-transparent border border-base-300 text-base-content hover:bg-base-300 hover:border-primary focus:ring-primary',
|
||||
danger: 'bg-error text-white hover:bg-error/90 focus:ring-error shadow-sm hover:shadow-lg'
|
||||
};
|
||||
|
||||
const sizeClasses = {
|
||||
sm: 'px-3 py-1.5 text-sm rounded',
|
||||
md: 'px-4 py-2 text-base rounded-md',
|
||||
lg: 'px-6 py-3 text-lg rounded-lg'
|
||||
};
|
||||
|
||||
const classes = `${baseClasses} ${variantClasses[variant]} ${sizeClasses[size]} ${className}`;
|
||||
</script>
|
||||
|
||||
{#if href}
|
||||
<a {href} class={classes} aria-disabled={disabled}>
|
||||
{@render children()}
|
||||
</a>
|
||||
{:else}
|
||||
<button {type} {disabled} {onclick} class={classes}>
|
||||
{@render children()}
|
||||
</button>
|
||||
{/if}
|
||||
49
src/lib/components/ui/Card.svelte
Normal file
49
src/lib/components/ui/Card.svelte
Normal file
@@ -0,0 +1,49 @@
|
||||
<script lang="ts">
|
||||
import type { Snippet } from 'svelte';
|
||||
|
||||
interface Props {
|
||||
variant?: 'default' | 'elevated' | 'interactive';
|
||||
padding?: 'none' | 'sm' | 'md' | 'lg';
|
||||
class?: string;
|
||||
onclick?: () => void;
|
||||
children: Snippet;
|
||||
}
|
||||
|
||||
let {
|
||||
variant = 'default',
|
||||
padding = 'md',
|
||||
class: className = '',
|
||||
onclick,
|
||||
children
|
||||
}: Props = $props();
|
||||
|
||||
const baseClasses = 'bg-base-200 border border-base-300 rounded-md transition-all duration-200';
|
||||
|
||||
const variantClasses = {
|
||||
default: 'shadow-sm',
|
||||
elevated: 'shadow-lg shadow-black/10',
|
||||
interactive:
|
||||
'cursor-pointer hover:border-primary hover:shadow-lg hover:shadow-primary/20 hover:-translate-y-0.5'
|
||||
};
|
||||
|
||||
const paddingClasses = {
|
||||
none: '',
|
||||
sm: 'p-3',
|
||||
md: 'p-4',
|
||||
lg: 'p-6'
|
||||
};
|
||||
|
||||
const classes =
|
||||
`${baseClasses} ${variantClasses[variant]} ${paddingClasses[padding]} ${className}` +
|
||||
(onclick ? ' cursor-pointer' : '');
|
||||
</script>
|
||||
|
||||
{#if onclick}
|
||||
<button class={classes} {onclick}>
|
||||
{@render children()}
|
||||
</button>
|
||||
{:else}
|
||||
<div class={classes}>
|
||||
{@render children()}
|
||||
</div>
|
||||
{/if}
|
||||
@@ -1,9 +1,15 @@
|
||||
<script lang="ts">
|
||||
import '../app.css';
|
||||
import Header from '$lib/components/layout/Header.svelte';
|
||||
import Footer from '$lib/components/layout/Footer.svelte';
|
||||
|
||||
let { children } = $props();
|
||||
</script>
|
||||
|
||||
<div class="min-h-screen bg-base-100">
|
||||
{@render children()}
|
||||
<div class="flex min-h-screen flex-col bg-base-100">
|
||||
<Header />
|
||||
<main class="flex-1">
|
||||
{@render children()}
|
||||
</main>
|
||||
<Footer />
|
||||
</div>
|
||||
|
||||
@@ -1,19 +1,206 @@
|
||||
<script lang="ts">
|
||||
// Temporary homepage - will be replaced with full implementation
|
||||
import { Search, TrendingUp, Users, Zap } from 'lucide-svelte';
|
||||
import Button from '$lib/components/ui/Button.svelte';
|
||||
import Card from '$lib/components/ui/Card.svelte';
|
||||
import Badge from '$lib/components/ui/Badge.svelte';
|
||||
|
||||
// Demo data - will be replaced with real data
|
||||
const featuredMatches = [
|
||||
{
|
||||
id: '3589487716842078322',
|
||||
map: 'de_inferno',
|
||||
scoreT: 13,
|
||||
scoreCT: 10,
|
||||
date: '2 hours ago',
|
||||
live: false
|
||||
},
|
||||
{
|
||||
id: '3589487716842078323',
|
||||
map: 'de_mirage',
|
||||
scoreT: 11,
|
||||
scoreCT: 8,
|
||||
date: 'LIVE',
|
||||
live: true
|
||||
},
|
||||
{
|
||||
id: '3589487716842078324',
|
||||
map: 'de_dust2',
|
||||
scoreT: 16,
|
||||
scoreCT: 14,
|
||||
date: '5 hours ago',
|
||||
live: false
|
||||
}
|
||||
];
|
||||
|
||||
const stats = [
|
||||
{ icon: Users, label: 'Players Tracked', value: '1.2M+' },
|
||||
{ icon: TrendingUp, label: 'Matches Analyzed', value: '500K+' },
|
||||
{ icon: Zap, label: 'Demos Parsed', value: '2M+' }
|
||||
];
|
||||
</script>
|
||||
|
||||
<div class="flex min-h-screen items-center justify-center">
|
||||
<div class="text-center">
|
||||
<h1 class="mb-4 text-6xl font-bold">
|
||||
<span class="text-primary">CS2</span><span class="text-secondary">.WTF</span>
|
||||
</h1>
|
||||
<p class="mb-8 text-xl text-base-content/70">Statistics for CS2 matchmaking matches</p>
|
||||
<div class="flex justify-center gap-4">
|
||||
<a href="/matches" class="btn btn-primary">Browse Matches</a>
|
||||
<a href="/player/76561198012345678" class="btn btn-secondary">View Demo Profile</a>
|
||||
</div>
|
||||
<div class="mt-12 text-sm text-base-content/50">
|
||||
<p>🚧 Rewrite in progress - Phase 1 complete</p>
|
||||
<svelte:head>
|
||||
<title>CS2.WTF - Statistics for CS2 Matchmaking</title>
|
||||
<meta
|
||||
name="description"
|
||||
content="Track your CS2 performance, analyze matches, and improve your game with detailed statistics and insights."
|
||||
/>
|
||||
</svelte:head>
|
||||
|
||||
<!-- Hero Section -->
|
||||
<section class="border-b border-base-300 bg-gradient-to-b from-base-100 to-base-200 py-24">
|
||||
<div class="container mx-auto px-4">
|
||||
<div class="mx-auto max-w-4xl text-center">
|
||||
<div class="mb-6">
|
||||
<Badge variant="info" size="md">🎮 Now supporting CS2</Badge>
|
||||
</div>
|
||||
|
||||
<h1 class="mb-6 text-6xl font-bold leading-tight md:text-7xl">
|
||||
<span class="text-primary">CS2</span><span class="text-secondary">.WTF</span>
|
||||
</h1>
|
||||
|
||||
<p class="mb-8 text-xl text-base-content/70 md:text-2xl">
|
||||
Track your performance, analyze matches, and improve your game with
|
||||
<span class="font-semibold text-primary">detailed statistics</span> and insights.
|
||||
</p>
|
||||
|
||||
<div class="mb-12 flex flex-col justify-center gap-4 sm:flex-row">
|
||||
<Button variant="primary" size="lg" href="/matches">
|
||||
<Search class="mr-2 h-5 w-5" />
|
||||
Browse Matches
|
||||
</Button>
|
||||
<Button variant="secondary" size="lg" href="/player/76561198012345678">
|
||||
<Users class="mr-2 h-5 w-5" />
|
||||
View Demo Profile
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<!-- Stats Grid -->
|
||||
<div class="grid gap-6 md:grid-cols-3">
|
||||
{#each stats as stat}
|
||||
<div class="rounded-lg bg-base-100 p-6 shadow-lg">
|
||||
<svelte:component this={stat.icon} class="mx-auto mb-3 h-8 w-8 text-primary" />
|
||||
<div class="text-3xl font-bold text-base-content">{stat.value}</div>
|
||||
<div class="text-sm text-base-content/60">{stat.label}</div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Featured Matches -->
|
||||
<section class="py-16">
|
||||
<div class="container mx-auto px-4">
|
||||
<div class="mb-8 flex items-center justify-between">
|
||||
<div>
|
||||
<h2 class="text-3xl font-bold text-base-content">Featured Matches</h2>
|
||||
<p class="mt-2 text-base-content/60">Latest competitive matches from our community</p>
|
||||
</div>
|
||||
<Button variant="ghost" href="/matches">View All</Button>
|
||||
</div>
|
||||
|
||||
<div class="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
|
||||
{#each featuredMatches as match}
|
||||
<Card variant="interactive" padding="none">
|
||||
<a href={`/match/${match.id}`} class="block">
|
||||
<div
|
||||
class="relative h-48 overflow-hidden rounded-t-md bg-gradient-to-br from-base-300 to-base-100"
|
||||
>
|
||||
<div class="absolute inset-0 flex items-center justify-center">
|
||||
<span class="text-6xl font-bold text-base-content/10"
|
||||
>{match.map.replace('de_', '').toUpperCase()}</span
|
||||
>
|
||||
</div>
|
||||
<div class="absolute bottom-4 left-4">
|
||||
<Badge variant="default">{match.map}</Badge>
|
||||
</div>
|
||||
{#if match.live}
|
||||
<div class="absolute right-4 top-4">
|
||||
<Badge variant="error" size="sm">
|
||||
<span class="animate-pulse">● LIVE</span>
|
||||
</Badge>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="p-4">
|
||||
<div class="mb-3 flex items-center justify-center gap-4">
|
||||
<span class="font-mono text-2xl font-bold text-terrorist">{match.scoreT}</span>
|
||||
<span class="text-base-content/40">-</span>
|
||||
<span class="font-mono text-2xl font-bold text-ct">{match.scoreCT}</span>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-between text-sm text-base-content/60">
|
||||
<span>{match.date}</span>
|
||||
{#if !match.live}
|
||||
<Badge variant="default" size="sm">Completed</Badge>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</Card>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Features Section -->
|
||||
<section class="border-t border-base-300 bg-base-200 py-16">
|
||||
<div class="container mx-auto px-4">
|
||||
<div class="mb-12 text-center">
|
||||
<h2 class="text-3xl font-bold text-base-content">Why CS2.WTF?</h2>
|
||||
<p class="mt-2 text-base-content/60">Everything you need to analyze your CS2 performance</p>
|
||||
</div>
|
||||
|
||||
<div class="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
|
||||
<Card padding="lg">
|
||||
<div class="mb-4 inline-flex rounded-lg bg-primary/10 p-3">
|
||||
<TrendingUp class="h-6 w-6 text-primary" />
|
||||
</div>
|
||||
<h3 class="mb-2 text-xl font-semibold">Detailed Statistics</h3>
|
||||
<p class="text-base-content/60">
|
||||
Track K/D, ADR, HS%, KAST, and more. Analyze your performance round-by-round with
|
||||
comprehensive stats.
|
||||
</p>
|
||||
</Card>
|
||||
|
||||
<Card padding="lg">
|
||||
<div class="mb-4 inline-flex rounded-lg bg-secondary/10 p-3">
|
||||
<Zap class="h-6 w-6 text-secondary" />
|
||||
</div>
|
||||
<h3 class="mb-2 text-xl font-semibold">Economy Tracking</h3>
|
||||
<p class="text-base-content/60">
|
||||
Understand money management with round-by-round economy analysis and spending patterns.
|
||||
</p>
|
||||
</Card>
|
||||
|
||||
<Card padding="lg">
|
||||
<div class="mb-4 inline-flex rounded-lg bg-info/10 p-3">
|
||||
<Users class="h-6 w-6 text-info" />
|
||||
</div>
|
||||
<h3 class="mb-2 text-xl font-semibold">Player Profiles</h3>
|
||||
<p class="text-base-content/60">
|
||||
View comprehensive player profiles with match history, favorite maps, and performance
|
||||
trends.
|
||||
</p>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CTA Section -->
|
||||
<section class="py-16">
|
||||
<div class="container mx-auto px-4">
|
||||
<Card variant="elevated" padding="lg">
|
||||
<div class="text-center">
|
||||
<h2 class="mb-4 text-3xl font-bold text-base-content">Ready to improve your game?</h2>
|
||||
<p class="mb-8 text-lg text-base-content/70">
|
||||
Start tracking your CS2 matches and get insights that help you rank up.
|
||||
</p>
|
||||
<Button variant="primary" size="lg" href="/matches">Get Started - It's Free</Button>
|
||||
<p class="mt-4 text-sm text-base-content/50">Free and open source. No signup required.</p>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
87
src/routes/about/+page.svelte
Normal file
87
src/routes/about/+page.svelte
Normal file
@@ -0,0 +1,87 @@
|
||||
<script lang="ts">
|
||||
import { Github, Heart, Code } from 'lucide-svelte';
|
||||
import Card from '$lib/components/ui/Card.svelte';
|
||||
import Button from '$lib/components/ui/Button.svelte';
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>About - CS2.WTF</title>
|
||||
</svelte:head>
|
||||
|
||||
<div class="container mx-auto max-w-4xl px-4 py-12">
|
||||
<h1 class="mb-8 text-4xl font-bold">About CS2.WTF</h1>
|
||||
|
||||
<Card padding="lg" class="mb-8">
|
||||
<h2 class="mb-4 text-2xl font-semibold">Our Mission</h2>
|
||||
<p class="mb-4 text-base-content/80">
|
||||
CS2.WTF is a free and open-source platform for analyzing Counter-Strike 2 matchmaking matches.
|
||||
We provide detailed statistics, performance insights, and tools to help players improve their
|
||||
game.
|
||||
</p>
|
||||
<p class="text-base-content/80">
|
||||
Originally created for CS:GO, we've completely rewritten the platform to support CS2 with
|
||||
modern technologies and enhanced features.
|
||||
</p>
|
||||
</Card>
|
||||
|
||||
<div class="mb-8 grid gap-6 md:grid-cols-3">
|
||||
<Card padding="lg">
|
||||
<Code class="mb-3 h-8 w-8 text-primary" />
|
||||
<h3 class="mb-2 text-xl font-semibold">Open Source</h3>
|
||||
<p class="text-sm text-base-content/70">
|
||||
Built by the community, for the community. All code is available on GitHub.
|
||||
</p>
|
||||
</Card>
|
||||
|
||||
<Card padding="lg">
|
||||
<Heart class="mb-3 h-8 w-8 text-error" />
|
||||
<h3 class="mb-2 text-xl font-semibold">Free Forever</h3>
|
||||
<p class="text-sm text-base-content/70">
|
||||
No paywalls, no premium features. Everyone gets full access to all statistics.
|
||||
</p>
|
||||
</Card>
|
||||
|
||||
<Card padding="lg">
|
||||
<Github class="mb-3 h-8 w-8 text-info" />
|
||||
<h3 class="mb-2 text-xl font-semibold">Community Driven</h3>
|
||||
<p class="text-sm text-base-content/70">
|
||||
Contributions welcome! Help us make CS2.WTF better for everyone.
|
||||
</p>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<Card padding="lg" class="mb-8">
|
||||
<h2 class="mb-4 text-2xl font-semibold">Technology Stack</h2>
|
||||
<div class="grid gap-4 md:grid-cols-2">
|
||||
<div>
|
||||
<h3 class="mb-2 font-semibold text-primary">Frontend</h3>
|
||||
<ul class="space-y-1 text-sm text-base-content/80">
|
||||
<li>• SvelteKit 2.0 + Svelte 5</li>
|
||||
<li>• TypeScript (Strict Mode)</li>
|
||||
<li>• Tailwind CSS + DaisyUI</li>
|
||||
<li>• Vitest + Playwright</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="mb-2 font-semibold text-secondary">Backend</h3>
|
||||
<ul class="space-y-1 text-sm text-base-content/80">
|
||||
<li>• Go + Gin Framework</li>
|
||||
<li>• PostgreSQL Database</li>
|
||||
<li>• Redis Cache</li>
|
||||
<li>• Demo Parser</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<div class="flex justify-center gap-4">
|
||||
<Button variant="primary" href="https://somegit.dev/CSGOWTF/csgowtf">
|
||||
<Github class="mr-2 h-5 w-5" />
|
||||
View on GitHub
|
||||
</Button>
|
||||
<Button variant="secondary" href="https://liberapay.com/CSGOWTF/">
|
||||
<Heart class="mr-2 h-5 w-5" />
|
||||
Support Us
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
50
src/routes/matches/+page.svelte
Normal file
50
src/routes/matches/+page.svelte
Normal file
@@ -0,0 +1,50 @@
|
||||
<script lang="ts">
|
||||
import { Search, Filter } from 'lucide-svelte';
|
||||
import Button from '$lib/components/ui/Button.svelte';
|
||||
import Card from '$lib/components/ui/Card.svelte';
|
||||
import Badge from '$lib/components/ui/Badge.svelte';
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>Matches - CS2.WTF</title>
|
||||
</svelte:head>
|
||||
|
||||
<div class="container mx-auto px-4 py-8">
|
||||
<div class="mb-8">
|
||||
<h1 class="mb-2 text-4xl font-bold">Matches</h1>
|
||||
<p class="text-base-content/60">Browse and search through CS2 competitive matches</p>
|
||||
</div>
|
||||
|
||||
<!-- Search & Filters -->
|
||||
<Card padding="lg" class="mb-8">
|
||||
<div class="flex flex-col gap-4 md:flex-row">
|
||||
<div class="flex-1">
|
||||
<div class="relative">
|
||||
<Search class="absolute left-3 top-1/2 h-5 w-5 -translate-y-1/2 text-base-content/40" />
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search by player name, match ID, or share code..."
|
||||
class="input input-bordered w-full pl-10"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<Button variant="ghost">
|
||||
<Filter class="mr-2 h-5 w-5" />
|
||||
Filters
|
||||
</Button>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<!-- Coming Soon -->
|
||||
<div
|
||||
class="flex min-h-[400px] items-center justify-center rounded-lg border-2 border-dashed border-base-300 bg-base-200/50"
|
||||
>
|
||||
<div class="text-center">
|
||||
<h2 class="mb-2 text-2xl font-bold text-base-content">Coming Soon</h2>
|
||||
<p class="text-base-content/60">Match listings will be available in Phase 3</p>
|
||||
<div class="mt-6">
|
||||
<Badge variant="info">Phase 3 - In Development</Badge>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
42
src/routes/players/+page.svelte
Normal file
42
src/routes/players/+page.svelte
Normal file
@@ -0,0 +1,42 @@
|
||||
<script lang="ts">
|
||||
import { Search, TrendingUp } from 'lucide-svelte';
|
||||
import Card from '$lib/components/ui/Card.svelte';
|
||||
import Badge from '$lib/components/ui/Badge.svelte';
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>Players - CS2.WTF</title>
|
||||
</svelte:head>
|
||||
|
||||
<div class="container mx-auto px-4 py-8">
|
||||
<div class="mb-8">
|
||||
<h1 class="mb-2 text-4xl font-bold">Players</h1>
|
||||
<p class="text-base-content/60">Search and browse player profiles</p>
|
||||
</div>
|
||||
|
||||
<!-- Search -->
|
||||
<Card padding="lg" class="mb-8">
|
||||
<div class="relative">
|
||||
<Search class="absolute left-3 top-1/2 h-5 w-5 -translate-y-1/2 text-base-content/40" />
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search by Steam ID or player name..."
|
||||
class="input input-bordered w-full pl-10"
|
||||
/>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<!-- Coming Soon -->
|
||||
<div
|
||||
class="flex min-h-[400px] items-center justify-center rounded-lg border-2 border-dashed border-base-300 bg-base-200/50"
|
||||
>
|
||||
<div class="text-center">
|
||||
<TrendingUp class="mx-auto mb-4 h-16 w-16 text-base-content/20" />
|
||||
<h2 class="mb-2 text-2xl font-bold text-base-content">Coming Soon</h2>
|
||||
<p class="text-base-content/60">Player search and profiles will be available in Phase 3</p>
|
||||
<div class="mt-6">
|
||||
<Badge variant="info">Phase 3 - In Development</Badge>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
Reference in New Issue
Block a user