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:
587
docs/DESIGN.md
Normal file
587
docs/DESIGN.md
Normal file
@@ -0,0 +1,587 @@
|
|||||||
|
# CS2.WTF Design System
|
||||||
|
|
||||||
|
A modern, tactical design language inspired by Counter-Strike 2's in-game aesthetics.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🎨 Design Philosophy
|
||||||
|
|
||||||
|
### Core Principles
|
||||||
|
|
||||||
|
1. **Tactical & Data-Dense**: Inspired by CS2's HUD - information at a glance
|
||||||
|
2. **Dark-First**: Gaming-optimized dark theme as default
|
||||||
|
3. **Team Identity**: Leverage T-side (orange) and CT-side (blue) throughout
|
||||||
|
4. **Performance**: Smooth animations, no bloat
|
||||||
|
5. **Accessible**: WCAG 2.1 AA compliant
|
||||||
|
|
||||||
|
### Visual Language
|
||||||
|
|
||||||
|
- **Sharp Corners**: Minimal border radius (2-4px) for tactical feel
|
||||||
|
- **Neon Accents**: Subtle glows on interactive elements
|
||||||
|
- **Grid-Based**: 8px base unit for consistent spacing
|
||||||
|
- **Monospace Numbers**: Stats feel more tactical
|
||||||
|
- **Depth Through Layers**: Elevated cards with subtle shadows
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🎨 Color Palette
|
||||||
|
|
||||||
|
### Brand Colors
|
||||||
|
|
||||||
|
```css
|
||||||
|
/* Primary (CT Blue) */
|
||||||
|
--ct-blue: #5e98d9;
|
||||||
|
--ct-blue-light: #7eaee5;
|
||||||
|
--ct-blue-dark: #4a7ab3;
|
||||||
|
|
||||||
|
/* Secondary (T Orange) */
|
||||||
|
--t-orange: #d4a74a;
|
||||||
|
--t-orange-light: #e5c674;
|
||||||
|
--t-orange-dark: #b38a3a;
|
||||||
|
|
||||||
|
/* Accent (Success Green) */
|
||||||
|
--accent-green: #36d399;
|
||||||
|
```
|
||||||
|
|
||||||
|
### Base Colors (Dark Theme)
|
||||||
|
|
||||||
|
```css
|
||||||
|
/* Backgrounds */
|
||||||
|
--bg-primary: #0f172a; /* Slate 900 - Main background */
|
||||||
|
--bg-secondary: #1e293b; /* Slate 800 - Card background */
|
||||||
|
--bg-tertiary: #334155; /* Slate 700 - Hover states */
|
||||||
|
|
||||||
|
/* Text */
|
||||||
|
--text-primary: #e2e8f0; /* Slate 200 - Main text */
|
||||||
|
--text-secondary: #94a3b8; /* Slate 400 - Muted text */
|
||||||
|
--text-tertiary: #64748b; /* Slate 500 - Disabled text */
|
||||||
|
|
||||||
|
/* Borders */
|
||||||
|
--border-default: #334155; /* Slate 700 */
|
||||||
|
--border-accent: #475569; /* Slate 600 - Hover */
|
||||||
|
```
|
||||||
|
|
||||||
|
### Semantic Colors
|
||||||
|
|
||||||
|
```css
|
||||||
|
/* Status */
|
||||||
|
--success: #36d399; /* Win, positive stats */
|
||||||
|
--warning: #fbbd23; /* Neutral, info */
|
||||||
|
--error: #f87272; /* Loss, negative stats */
|
||||||
|
--info: #3abff8; /* Information, CT-related */
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 📐 Typography
|
||||||
|
|
||||||
|
### Font Families
|
||||||
|
|
||||||
|
**Primary (UI Text):**
|
||||||
|
|
||||||
|
```css
|
||||||
|
font-family:
|
||||||
|
'Inter',
|
||||||
|
system-ui,
|
||||||
|
-apple-system,
|
||||||
|
sans-serif;
|
||||||
|
```
|
||||||
|
|
||||||
|
**Monospace (Stats & Numbers):**
|
||||||
|
|
||||||
|
```css
|
||||||
|
font-family: 'JetBrains Mono', 'Fira Code', Consolas, monospace;
|
||||||
|
```
|
||||||
|
|
||||||
|
### Type Scale
|
||||||
|
|
||||||
|
```css
|
||||||
|
/* Display */
|
||||||
|
--text-6xl: 3.75rem; /* 60px - Hero headings */
|
||||||
|
--text-5xl: 3rem; /* 48px - Page titles */
|
||||||
|
--text-4xl: 2.25rem; /* 36px - Section headers */
|
||||||
|
|
||||||
|
/* Headings */
|
||||||
|
--text-3xl: 1.875rem; /* 30px - Card titles */
|
||||||
|
--text-2xl: 1.5rem; /* 24px - Subsection headers */
|
||||||
|
--text-xl: 1.25rem; /* 20px - Large body */
|
||||||
|
|
||||||
|
/* Body */
|
||||||
|
--text-lg: 1.125rem; /* 18px - Prominent text */
|
||||||
|
--text-base: 1rem; /* 16px - Default body */
|
||||||
|
--text-sm: 0.875rem; /* 14px - Small text */
|
||||||
|
--text-xs: 0.75rem; /* 12px - Captions */
|
||||||
|
```
|
||||||
|
|
||||||
|
### Font Weights
|
||||||
|
|
||||||
|
```css
|
||||||
|
--font-normal: 400;
|
||||||
|
--font-medium: 500;
|
||||||
|
--font-semibold: 600;
|
||||||
|
--font-bold: 700;
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🏗️ Layout
|
||||||
|
|
||||||
|
### Spacing System (8px Grid)
|
||||||
|
|
||||||
|
```css
|
||||||
|
--space-1: 0.25rem; /* 4px */
|
||||||
|
--space-2: 0.5rem; /* 8px */
|
||||||
|
--space-3: 0.75rem; /* 12px */
|
||||||
|
--space-4: 1rem; /* 16px */
|
||||||
|
--space-6: 1.5rem; /* 24px */
|
||||||
|
--space-8: 2rem; /* 32px */
|
||||||
|
--space-12: 3rem; /* 48px */
|
||||||
|
--space-16: 4rem; /* 64px */
|
||||||
|
--space-24: 6rem; /* 96px */
|
||||||
|
```
|
||||||
|
|
||||||
|
### Container Widths
|
||||||
|
|
||||||
|
```css
|
||||||
|
--container-sm: 640px; /* Mobile landscape */
|
||||||
|
--container-md: 768px; /* Tablet */
|
||||||
|
--container-lg: 1024px; /* Desktop */
|
||||||
|
--container-xl: 1280px; /* Large desktop */
|
||||||
|
--container-2xl: 1536px; /* Extra large */
|
||||||
|
```
|
||||||
|
|
||||||
|
### Breakpoints
|
||||||
|
|
||||||
|
```css
|
||||||
|
/* Mobile first approach */
|
||||||
|
sm: 640px /* Tablet */
|
||||||
|
md: 768px /* Small desktop */
|
||||||
|
lg: 1024px /* Desktop */
|
||||||
|
xl: 1280px /* Large desktop */
|
||||||
|
2xl: 1536px /* Extra large */
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🎭 Components
|
||||||
|
|
||||||
|
### Cards
|
||||||
|
|
||||||
|
**Default Card:**
|
||||||
|
|
||||||
|
```css
|
||||||
|
background: var(--bg-secondary);
|
||||||
|
border: 1px solid var(--border-default);
|
||||||
|
border-radius: 4px;
|
||||||
|
padding: 1.5rem;
|
||||||
|
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
|
||||||
|
```
|
||||||
|
|
||||||
|
**Elevated Card:**
|
||||||
|
|
||||||
|
```css
|
||||||
|
box-shadow:
|
||||||
|
0 10px 15px -3px rgb(0 0 0 / 0.2),
|
||||||
|
0 4px 6px -4px rgb(0 0 0 / 0.1);
|
||||||
|
```
|
||||||
|
|
||||||
|
**Interactive Card (Hover):**
|
||||||
|
|
||||||
|
```css
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
border-color: var(--ct-blue);
|
||||||
|
box-shadow: 0 0 0 2px rgb(94 152 217 / 0.2);
|
||||||
|
transform: translateY(-2px);
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### Buttons
|
||||||
|
|
||||||
|
**Primary (CT Blue):**
|
||||||
|
|
||||||
|
```css
|
||||||
|
background: var(--ct-blue);
|
||||||
|
color: white;
|
||||||
|
padding: 0.75rem 1.5rem;
|
||||||
|
border-radius: 4px;
|
||||||
|
font-weight: 600;
|
||||||
|
transition: all 0.2s;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: var(--ct-blue-dark);
|
||||||
|
box-shadow: 0 0 20px rgb(94 152 217 / 0.3);
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
**Secondary (T Orange):**
|
||||||
|
|
||||||
|
```css
|
||||||
|
background: var(--t-orange);
|
||||||
|
color: white;
|
||||||
|
/* Similar styling */
|
||||||
|
```
|
||||||
|
|
||||||
|
**Ghost:**
|
||||||
|
|
||||||
|
```css
|
||||||
|
background: transparent;
|
||||||
|
border: 1px solid var(--border-default);
|
||||||
|
color: var(--text-primary);
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: var(--bg-tertiary);
|
||||||
|
border-color: var(--ct-blue);
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### Badges
|
||||||
|
|
||||||
|
**Team Badge:**
|
||||||
|
|
||||||
|
```css
|
||||||
|
/* T-Side */
|
||||||
|
background: rgb(212 167 74 / 0.1);
|
||||||
|
color: var(--t-orange-light);
|
||||||
|
border: 1px solid var(--t-orange-dark);
|
||||||
|
|
||||||
|
/* CT-Side */
|
||||||
|
background: rgb(94 152 217 / 0.1);
|
||||||
|
color: var(--ct-blue-light);
|
||||||
|
border: 1px solid var(--ct-blue-dark);
|
||||||
|
```
|
||||||
|
|
||||||
|
**Status Badge:**
|
||||||
|
|
||||||
|
```css
|
||||||
|
/* Win */
|
||||||
|
background: rgb(54 211 153 / 0.1);
|
||||||
|
color: var(--success);
|
||||||
|
|
||||||
|
/* Loss */
|
||||||
|
background: rgb(248 114 114 / 0.1);
|
||||||
|
color: var(--error);
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🌊 Animations
|
||||||
|
|
||||||
|
### Transitions
|
||||||
|
|
||||||
|
```css
|
||||||
|
/* Standard */
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
|
||||||
|
/* Slow */
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
|
||||||
|
/* Fast */
|
||||||
|
transition: all 0.15s ease;
|
||||||
|
```
|
||||||
|
|
||||||
|
### Keyframes
|
||||||
|
|
||||||
|
**Fade In:**
|
||||||
|
|
||||||
|
```css
|
||||||
|
@keyframes fadeIn {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(-10px);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
**Pulse (Live Indicator):**
|
||||||
|
|
||||||
|
```css
|
||||||
|
@keyframes pulse {
|
||||||
|
0%,
|
||||||
|
100% {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
**Glow:**
|
||||||
|
|
||||||
|
```css
|
||||||
|
@keyframes glow {
|
||||||
|
0%,
|
||||||
|
100% {
|
||||||
|
box-shadow: 0 0 10px rgb(94 152 217 / 0.3);
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
box-shadow: 0 0 20px rgb(94 152 217 / 0.5);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🎯 Iconography
|
||||||
|
|
||||||
|
**Icon Library:** Lucide Icons (clean, modern, consistent)
|
||||||
|
|
||||||
|
**Icon Sizes:**
|
||||||
|
|
||||||
|
```css
|
||||||
|
--icon-xs: 16px;
|
||||||
|
--icon-sm: 20px;
|
||||||
|
--icon-md: 24px;
|
||||||
|
--icon-lg: 32px;
|
||||||
|
--icon-xl: 48px;
|
||||||
|
```
|
||||||
|
|
||||||
|
**Icon Colors:**
|
||||||
|
|
||||||
|
- Default: `text-slate-400`
|
||||||
|
- Active: `text-primary` or `text-secondary`
|
||||||
|
- Success: `text-success`
|
||||||
|
- Error: `text-error`
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 📊 Data Visualization
|
||||||
|
|
||||||
|
### Chart Colors
|
||||||
|
|
||||||
|
**Team Performance:**
|
||||||
|
|
||||||
|
- T-Side: `#d4a74a`
|
||||||
|
- CT-Side: `#5e98d9`
|
||||||
|
|
||||||
|
**Heatmaps:**
|
||||||
|
|
||||||
|
- Low: `#334155` (Slate 700)
|
||||||
|
- Medium: `#f59e0b` (Amber 500)
|
||||||
|
- High: `#ef4444` (Red 500)
|
||||||
|
|
||||||
|
**Line Charts:**
|
||||||
|
|
||||||
|
- Primary line: `#5e98d9`
|
||||||
|
- Secondary line: `#d4a74a`
|
||||||
|
- Grid: `rgb(51 65 85 / 0.3)`
|
||||||
|
|
||||||
|
### Tables
|
||||||
|
|
||||||
|
**Header:**
|
||||||
|
|
||||||
|
```css
|
||||||
|
background: var(--bg-primary);
|
||||||
|
font-weight: 600;
|
||||||
|
text-transform: uppercase;
|
||||||
|
font-size: 0.75rem;
|
||||||
|
letter-spacing: 0.05em;
|
||||||
|
color: var(--text-secondary);
|
||||||
|
```
|
||||||
|
|
||||||
|
**Row:**
|
||||||
|
|
||||||
|
```css
|
||||||
|
border-bottom: 1px solid var(--border-default);
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: var(--bg-tertiary);
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
**Stats (Numbers):**
|
||||||
|
|
||||||
|
```css
|
||||||
|
font-family: var(--font-mono);
|
||||||
|
font-variant-numeric: tabular-nums;
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## ♿ Accessibility
|
||||||
|
|
||||||
|
### Focus States
|
||||||
|
|
||||||
|
```css
|
||||||
|
&:focus-visible {
|
||||||
|
outline: 2px solid var(--ct-blue);
|
||||||
|
outline-offset: 2px;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### Color Contrast
|
||||||
|
|
||||||
|
- Text on dark bg: Minimum 4.5:1 (WCAG AA)
|
||||||
|
- Large text: Minimum 3:1
|
||||||
|
- UI components: Minimum 3:1
|
||||||
|
|
||||||
|
### Motion
|
||||||
|
|
||||||
|
```css
|
||||||
|
@media (prefers-reduced-motion: reduce) {
|
||||||
|
* {
|
||||||
|
animation-duration: 0.01ms !important;
|
||||||
|
transition-duration: 0.01ms !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🎮 CS2-Specific Elements
|
||||||
|
|
||||||
|
### Rank Display
|
||||||
|
|
||||||
|
- Show Premier rating (0-30,000) with color coding
|
||||||
|
- Bronze: `#cd7f32`
|
||||||
|
- Silver: `#c0c0c0`
|
||||||
|
- Gold: `#ffd700`
|
||||||
|
- Legend: `#9b59b6`
|
||||||
|
|
||||||
|
### Map Thumbnails
|
||||||
|
|
||||||
|
- 16:9 aspect ratio
|
||||||
|
- Slight overlay gradient (bottom to top)
|
||||||
|
- Map name in bottom-left corner
|
||||||
|
|
||||||
|
### Weapon Icons
|
||||||
|
|
||||||
|
- Monochrome with subtle glow
|
||||||
|
- Size: 32x32px default
|
||||||
|
- Color: Match rarity (Consumer White, Mil-Spec Blue, etc.)
|
||||||
|
|
||||||
|
### Kill Feed
|
||||||
|
|
||||||
|
```css
|
||||||
|
.kill-feed-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.5rem;
|
||||||
|
padding: 0.25rem 0.5rem;
|
||||||
|
background: rgb(15 23 42 / 0.9);
|
||||||
|
border-left: 2px solid var(--t-orange);
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 📱 Responsive Design
|
||||||
|
|
||||||
|
### Mobile (< 768px)
|
||||||
|
|
||||||
|
- Stack layouts vertically
|
||||||
|
- Reduce padding/spacing by 25%
|
||||||
|
- Hide secondary information
|
||||||
|
- Larger tap targets (min 44x44px)
|
||||||
|
- Bottom navigation for main actions
|
||||||
|
|
||||||
|
### Tablet (768px - 1024px)
|
||||||
|
|
||||||
|
- Two-column layouts
|
||||||
|
- Collapsible sidebar
|
||||||
|
- Touch-optimized interactions
|
||||||
|
|
||||||
|
### Desktop (> 1024px)
|
||||||
|
|
||||||
|
- Three-column layouts where appropriate
|
||||||
|
- Hover states and tooltips
|
||||||
|
- Keyboard shortcuts
|
||||||
|
- Dense data tables
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🎨 Example Compositions
|
||||||
|
|
||||||
|
### Hero Section (Homepage)
|
||||||
|
|
||||||
|
```
|
||||||
|
┌─────────────────────────────────────────┐
|
||||||
|
│ │
|
||||||
|
│ CS2.WTF (Large Logo) │
|
||||||
|
│ Statistics for CS2 Matches │
|
||||||
|
│ │
|
||||||
|
│ [Search Match] [Browse Players] │
|
||||||
|
│ │
|
||||||
|
│ Featured Matches (Carousel) ────> │
|
||||||
|
│ │
|
||||||
|
└─────────────────────────────────────────┘
|
||||||
|
```
|
||||||
|
|
||||||
|
### Match Card
|
||||||
|
|
||||||
|
```
|
||||||
|
┌─────────────────────────────────────┐
|
||||||
|
│ de_inferno 13 - 10 LIVE │
|
||||||
|
│ ─────────────────────────────────── │
|
||||||
|
│ 👤 Player1 24K 18D ⭐⭐⭐ │
|
||||||
|
│ 👤 Player2 21K 20D ⭐⭐ │
|
||||||
|
│ ... │
|
||||||
|
│ ─────────────────────────────────── │
|
||||||
|
│ 📅 2 hours ago ⏱️ 42:33 │
|
||||||
|
└─────────────────────────────────────┘
|
||||||
|
```
|
||||||
|
|
||||||
|
### Stats Table
|
||||||
|
|
||||||
|
```
|
||||||
|
┌──────────────────────────────────────────────┐
|
||||||
|
│ PLAYER K D A HS% ADR RATING │
|
||||||
|
├──────────────────────────────────────────────┤
|
||||||
|
│ 👤 Player1 24 18 6 50% 98 1.32 🥇 │
|
||||||
|
│ 👤 Player2 21 20 8 48% 87 1.12 │
|
||||||
|
│ 👤 Player3 19 22 5 44% 82 0.98 │
|
||||||
|
└──────────────────────────────────────────────┘
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🚀 Performance Guidelines
|
||||||
|
|
||||||
|
- Lazy load images and charts
|
||||||
|
- Use CSS transforms for animations (GPU-accelerated)
|
||||||
|
- Debounce search inputs (300ms)
|
||||||
|
- Virtual scrolling for large tables (> 100 rows)
|
||||||
|
- Optimize bundle size (< 200KB initial)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 📝 Naming Conventions
|
||||||
|
|
||||||
|
### CSS Classes
|
||||||
|
|
||||||
|
```css
|
||||||
|
/* Component */
|
||||||
|
.match-card {
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Element */
|
||||||
|
.match-card__header {
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Modifier */
|
||||||
|
.match-card--featured {
|
||||||
|
}
|
||||||
|
|
||||||
|
/* State */
|
||||||
|
.match-card.is-active {
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### Tailwind Utilities
|
||||||
|
|
||||||
|
Prefer utility classes for spacing, colors, and common patterns:
|
||||||
|
|
||||||
|
```html
|
||||||
|
<div class="rounded-lg bg-base-200 p-6 shadow-lg"></div>
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
**Last Updated**: 2025-11-04
|
||||||
|
**Status**: Active Development
|
||||||
@@ -8,10 +8,6 @@
|
|||||||
color-scheme: dark;
|
color-scheme: dark;
|
||||||
}
|
}
|
||||||
|
|
||||||
* {
|
|
||||||
@apply border-border;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
body {
|
||||||
@apply bg-base-100 text-base-content;
|
@apply bg-base-100 text-base-content;
|
||||||
font-feature-settings:
|
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">
|
<script lang="ts">
|
||||||
import '../app.css';
|
import '../app.css';
|
||||||
|
import Header from '$lib/components/layout/Header.svelte';
|
||||||
|
import Footer from '$lib/components/layout/Footer.svelte';
|
||||||
|
|
||||||
let { children } = $props();
|
let { children } = $props();
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="min-h-screen bg-base-100">
|
<div class="flex min-h-screen flex-col bg-base-100">
|
||||||
{@render children()}
|
<Header />
|
||||||
|
<main class="flex-1">
|
||||||
|
{@render children()}
|
||||||
|
</main>
|
||||||
|
<Footer />
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -1,19 +1,206 @@
|
|||||||
<script lang="ts">
|
<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>
|
</script>
|
||||||
|
|
||||||
<div class="flex min-h-screen items-center justify-center">
|
<svelte:head>
|
||||||
<div class="text-center">
|
<title>CS2.WTF - Statistics for CS2 Matchmaking</title>
|
||||||
<h1 class="mb-4 text-6xl font-bold">
|
<meta
|
||||||
<span class="text-primary">CS2</span><span class="text-secondary">.WTF</span>
|
name="description"
|
||||||
</h1>
|
content="Track your CS2 performance, analyze matches, and improve your game with detailed statistics and insights."
|
||||||
<p class="mb-8 text-xl text-base-content/70">Statistics for CS2 matchmaking matches</p>
|
/>
|
||||||
<div class="flex justify-center gap-4">
|
</svelte:head>
|
||||||
<a href="/matches" class="btn btn-primary">Browse Matches</a>
|
|
||||||
<a href="/player/76561198012345678" class="btn btn-secondary">View Demo Profile</a>
|
<!-- Hero Section -->
|
||||||
</div>
|
<section class="border-b border-base-300 bg-gradient-to-b from-base-100 to-base-200 py-24">
|
||||||
<div class="mt-12 text-sm text-base-content/50">
|
<div class="container mx-auto px-4">
|
||||||
<p>🚧 Rewrite in progress - Phase 1 complete</p>
|
<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>
|
</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