diff --git a/src/App.css b/src/App.css index b9d355d..79b52c1 100644 --- a/src/App.css +++ b/src/App.css @@ -1,42 +1,525 @@ -#root { - max-width: 1280px; +/* Gaming Community Website Styles */ + +.app { + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + line-height: 1.6; + color: #ffffff; + background: linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 50%, #16213e 100%); + min-height: 100vh; +} + +/* Navigation */ +.navbar { + position: fixed; + top: 0; + width: 100%; + background: rgba(0, 0, 0, 0.9); + backdrop-filter: blur(10px); + border-bottom: 1px solid #ff4655; + z-index: 1000; + padding: 1rem 0; +} + +.nav-container { + max-width: 1200px; margin: 0 auto; + display: flex; + justify-content: space-between; + align-items: center; + padding: 0 2rem; +} + +.nav-logo h2 { + margin: 0; + color: #ff4655; + font-size: 1.5rem; + font-weight: bold; +} + +.nav-links { + display: flex; + align-items: center; + gap: 2rem; +} + +.nav-links a { + color: #ffffff; + text-decoration: none; + transition: color 0.3s ease; +} + +.nav-links a:hover { + color: #ff4655; +} + +.join-btn { + background: linear-gradient(45deg, #ff4655, #ff6b6b); + color: white; + border: none; + padding: 0.5rem 1.5rem; + border-radius: 25px; + cursor: pointer; + font-weight: bold; + transition: transform 0.3s ease; +} + +.join-btn:hover { + transform: translateY(-2px); + box-shadow: 0 5px 15px rgba(255, 70, 85, 0.4); +} + +/* Hero Section */ +.hero { + padding: 120px 2rem 80px; + display: grid; + grid-template-columns: 1fr 1fr; + gap: 4rem; + max-width: 1200px; + margin: 0 auto; + align-items: center; +} + +.hero-title { + font-size: 3.5rem; + font-weight: bold; + margin-bottom: 1.5rem; + line-height: 1.1; +} + +.highlight { + color: #ff4655; + background: linear-gradient(45deg, #ff4655, #ff6b6b); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; +} + +.hero-subtitle { + font-size: 1.2rem; + color: #b8c5d1; + margin-bottom: 2rem; + line-height: 1.6; +} + +.hero-buttons { + display: flex; + gap: 1rem; +} + +.btn-primary { + background: linear-gradient(45deg, #ff4655, #ff6b6b); + color: white; + border: none; + padding: 1rem 2rem; + border-radius: 8px; + font-size: 1.1rem; + font-weight: bold; + cursor: pointer; + transition: all 0.3s ease; +} + +.btn-primary:hover { + transform: translateY(-3px); + box-shadow: 0 8px 25px rgba(255, 70, 85, 0.4); +} + +.btn-secondary { + background: transparent; + color: #ffffff; + border: 2px solid #ff4655; + padding: 1rem 2rem; + border-radius: 8px; + font-size: 1.1rem; + font-weight: bold; + cursor: pointer; + transition: all 0.3s ease; +} + +.btn-secondary:hover { + background: #ff4655; + transform: translateY(-3px); +} + +/* Game Preview */ +.hero-visual { + display: flex; + justify-content: center; + align-items: center; +} + +.game-preview { + position: relative; +} + +.preview-screen { + width: 400px; + height: 250px; + background: linear-gradient(45deg, #1a1a2e, #16213e); + border: 3px solid #ff4655; + border-radius: 12px; + position: relative; + overflow: hidden; +} + +.screen-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + color: #ffffff; +} + +.crosshair { + font-size: 3rem; + color: #ff4655; + margin-bottom: 1rem; +} + +.health-bar { + background: #4CAF50; + padding: 0.5rem; + border-radius: 4px; + margin-bottom: 0.5rem; + font-weight: bold; +} + +.ammo-counter { + background: #2196F3; + padding: 0.5rem; + border-radius: 4px; + font-weight: bold; +} + +/* Statistics Section */ +.stats-section { + padding: 60px 2rem; + background: rgba(255, 255, 255, 0.02); +} + +.stats-container { + max-width: 1200px; + margin: 0 auto; + display: grid; + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + gap: 2rem; +} + +.stat-card { + background: rgba(255, 255, 255, 0.05); + border: 1px solid rgba(255, 70, 85, 0.3); + border-radius: 12px; padding: 2rem; text-align: center; + transition: transform 0.3s ease, box-shadow 0.3s ease; } -.logo { - height: 6em; - padding: 1.5em; - will-change: filter; - transition: filter 300ms; -} -.logo:hover { - filter: drop-shadow(0 0 2em #646cffaa); -} -.logo.react:hover { - filter: drop-shadow(0 0 2em #61dafbaa); +.stat-card:hover { + transform: translateY(-5px); + box-shadow: 0 10px 30px rgba(255, 70, 85, 0.2); } -@keyframes logo-spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } +.stat-icon { + font-size: 2.5rem; + margin-bottom: 1rem; } -@media (prefers-reduced-motion: no-preference) { - a:nth-of-type(2) .logo { - animation: logo-spin infinite 20s linear; - } +.stat-number { + font-size: 2.5rem; + font-weight: bold; + color: #ff4655; + margin-bottom: 0.5rem; } -.card { - padding: 2em; +.stat-label { + color: #b8c5d1; + font-size: 1.1rem; } -.read-the-docs { +/* Features Section */ +.features-section { + padding: 80px 2rem; +} + +.features-container { + max-width: 1200px; + margin: 0 auto; +} + +.section-title { + font-size: 2.5rem; + text-align: center; + margin-bottom: 3rem; + color: #ffffff; +} + +.features-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); + gap: 2rem; +} + +.feature-card { + background: rgba(255, 255, 255, 0.05); + border: 1px solid rgba(255, 70, 85, 0.2); + border-radius: 12px; + padding: 2rem; + text-align: center; + transition: all 0.3s ease; +} + +.feature-card:hover { + transform: translateY(-5px); + border-color: #ff4655; + box-shadow: 0 10px 30px rgba(255, 70, 85, 0.2); +} + +.feature-icon { + font-size: 3rem; + margin-bottom: 1rem; +} + +.feature-card h3 { + color: #ffffff; + margin-bottom: 1rem; + font-size: 1.5rem; +} + +.feature-card p { + color: #b8c5d1; + margin-bottom: 1.5rem; + line-height: 1.6; +} + +.feature-btn { + background: transparent; + color: #ff4655; + border: 2px solid #ff4655; + padding: 0.75rem 1.5rem; + border-radius: 6px; + cursor: pointer; + font-weight: bold; + transition: all 0.3s ease; +} + +.feature-btn:hover { + background: #ff4655; + color: white; +} + +/* Activity Section */ +.activity-section { + padding: 80px 2rem; + background: rgba(255, 255, 255, 0.02); +} + +.activity-container { + max-width: 1200px; + margin: 0 auto; + display: grid; + grid-template-columns: 2fr 1fr; + gap: 3rem; +} + +.activity-main h2 { + margin-bottom: 2rem; +} + +.chat-feed { + background: rgba(0, 0, 0, 0.5); + border: 1px solid rgba(255, 70, 85, 0.3); + border-radius: 12px; + padding: 1.5rem; + max-height: 400px; + overflow-y: auto; +} + +.chat-message { + display: flex; + align-items: center; + padding: 0.75rem; + border-bottom: 1px solid rgba(255, 255, 255, 0.1); + transition: background 0.3s ease; +} + +.chat-message:hover { + background: rgba(255, 70, 85, 0.1); +} + +.chat-message:last-child { + border-bottom: none; +} + +.chat-user { + font-weight: bold; + color: #ff4655; + min-width: 120px; +} + +.chat-text { + flex: 1; + color: #ffffff; +} + +.chat-time { + color: #888; + font-size: 0.9rem; + margin-left: 1rem; +} + +.activity-sidebar { + display: flex; + flex-direction: column; + gap: 2rem; +} + +.sidebar-card { + background: rgba(255, 255, 255, 0.05); + border: 1px solid rgba(255, 70, 85, 0.2); + border-radius: 12px; + padding: 1.5rem; +} + +.sidebar-card h3 { + color: #ffffff; + margin-bottom: 1rem; + font-size: 1.3rem; +} + +.leaderboard { + display: flex; + flex-direction: column; + gap: 0.5rem; +} + +.leader-item { + color: #b8c5d1; + padding: 0.5rem; + background: rgba(0, 0, 0, 0.3); + border-radius: 6px; +} + +.quick-stats { + display: flex; + flex-direction: column; + gap: 0.5rem; +} + +.quick-stats div { + color: #b8c5d1; + padding: 0.5rem; + background: rgba(0, 0, 0, 0.3); + border-radius: 6px; +} + +/* Footer */ +.footer { + background: rgba(0, 0, 0, 0.8); + padding: 3rem 2rem 1rem; + margin-top: 4rem; +} + +.footer-container { + max-width: 1200px; + margin: 0 auto; + display: grid; + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + gap: 2rem; + margin-bottom: 2rem; +} + +.footer-section h4 { + color: #ff4655; + margin-bottom: 1rem; + font-size: 1.2rem; +} + +.footer-section p { + color: #b8c5d1; + line-height: 1.6; +} + +.footer-section a { + color: #b8c5d1; + text-decoration: none; + display: block; + margin-bottom: 0.5rem; + transition: color 0.3s ease; +} + +.footer-section a:hover { + color: #ff4655; +} + +.footer-bottom { + border-top: 1px solid rgba(255, 70, 85, 0.3); + padding-top: 2rem; + text-align: center; color: #888; } + +/* Responsive Design */ +@media (max-width: 768px) { + .hero { + grid-template-columns: 1fr; + gap: 2rem; + padding: 100px 1rem 40px; + } + + .hero-title { + font-size: 2.5rem; + } + + .hero-buttons { + flex-direction: column; + } + + .nav-links { + display: none; /* Mobile menu would need JS */ + } + + .stats-container { + grid-template-columns: repeat(2, 1fr); + } + + .features-grid { + grid-template-columns: 1fr; + } + + .activity-container { + grid-template-columns: 1fr; + } + + .footer-container { + grid-template-columns: 1fr; + } +} + +@media (max-width: 480px) { + .stats-container { + grid-template-columns: 1fr; + } + + .hero-title { + font-size: 2rem; + } +} + +/* Scrollbar Styling */ +.chat-feed::-webkit-scrollbar { + width: 6px; +} + +.chat-feed::-webkit-scrollbar-track { + background: rgba(255, 255, 255, 0.1); + border-radius: 3px; +} + +.chat-feed::-webkit-scrollbar-thumb { + background: #ff4655; + border-radius: 3px; +} + +.chat-feed::-webkit-scrollbar-thumb:hover { + background: #ff6b6b; +} diff --git a/src/App.tsx b/src/App.tsx index 3d7ded3..7859c35 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,35 +1,200 @@ -import { useState } from 'react' -import reactLogo from './assets/react.svg' -import viteLogo from '/vite.svg' import './App.css' function App() { - const [count, setCount] = useState(0) + + // Mock data - in real app, this would come from API + const stats = { + onlinePlayers: 1247, + totalServers: 89, + totalPlayTime: '2.4M', + activeGames: 23 + } + + const recentChats = [ + { user: 'ProGamer99', message: 'GG everyone! Great match!', time: '2m ago' }, + { user: 'SniperElite', message: 'Anyone up for a quick match?', time: '5m ago' }, + { user: 'HeadshotKing', message: 'New server just went live!', time: '8m ago' }, + { user: 'TacticalNuke', message: 'Looking for team players', time: '12m ago' }, + { user: 'FragMaster', message: 'Server maintenance complete', time: '15m ago' } + ] return ( - <> -
- - Vite logo - - - React logo - -
-

Vite + React

-
- -

- Edit src/App.tsx and save to test HMR -

-
-

- Click on the Vite and React logos to learn more -

- +
+ {/* Navigation Header */} + + + {/* Hero Section */} +
+
+

+ Welcome to the Ultimate
+ Counter-Strike Community +

+

+ Join thousands of players in competitive matches, casual games, and community events. + Experience the best gaming community with dedicated servers and passionate players. +

+
+ + +
+
+
+
+
+
+
⊕
+
100 HP
+
30/90
+
+
+
+
+
+ + {/* Statistics Section */} +
+
+
+
👥
+
{stats.onlinePlayers.toLocaleString()}
+
Online Players
+
+
+
🖥️
+
{stats.totalServers}
+
Active Servers
+
+
+
⏱️
+
{stats.totalPlayTime}
+
Hours Played
+
+
+
🎯
+
{stats.activeGames}
+
Live Matches
+
+
+
+ + {/* Features Section */} +
+
+

Community Features

+
+
+
🖥️
+

Server Browser

+

Find and join the best Counter-Strike servers. Browse by game mode, region, and player count.

+ +
+
+
📝
+

Community Blog

+

Stay updated with the latest news, tournament results, and community announcements.

+ +
+
+
📦
+

Open Source

+

Contribute to our open-source projects. Custom maps, configs, and community tools.

+ +
+
+
💬
+

Discussion Forum

+

Join discussions about strategies, share your experiences, and connect with fellow gamers.

+ +
+
+
+
+ + {/* Recent Activity Section */} +
+
+
+

Recent Activity

+
+ {recentChats.map((chat, index) => ( +
+
{chat.user}:
+
{chat.message}
+
{chat.time}
+
+ ))} +
+
+
+
+

🏆 Top Players

+
+
1. ProGamer99 - 2,450 pts
+
2. SniperElite - 2,180 pts
+
3. HeadshotKing - 1,950 pts
+
+
+
+

🎯 Quick Stats

+
+
Avg Match Time: 12m 34s
+
Most Popular Map: Dust2
+
Peak Hours: 8-11 PM
+
+
+
+
+
+ + {/* Footer */} + +
) } export default App + diff --git a/src/index.css b/src/index.css index 08a3ac9..9cafb8a 100644 --- a/src/index.css +++ b/src/index.css @@ -1,11 +1,21 @@ :root { - font-family: system-ui, Avenir, Helvetica, Arial, sans-serif; + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; line-height: 1.5; font-weight: 400; - color-scheme: light dark; - color: rgba(255, 255, 255, 0.87); - background-color: #242424; + /* Gaming color scheme */ + --primary-red: #ff4655; + --primary-red-hover: #ff6b6b; + --dark-bg: #0a0a0a; + --dark-bg-secondary: #1a1a2e; + --dark-bg-tertiary: #16213e; + --text-primary: #ffffff; + --text-secondary: #b8c5d1; + --text-muted: #888; + --border-color: rgba(255, 70, 85, 0.3); + + color: var(--text-primary); + background: linear-gradient(135deg, var(--dark-bg) 0%, var(--dark-bg-secondary) 50%, var(--dark-bg-tertiary) 100%); font-synthesis: none; text-rendering: optimizeLegibility; @@ -13,41 +23,85 @@ -moz-osx-font-smoothing: grayscale; } -a { - font-weight: 500; - color: #646cff; - text-decoration: inherit; -} -a:hover { - color: #535bf2; +* { + box-sizing: border-box; } body { margin: 0; - display: flex; - place-items: center; + padding: 0; min-width: 320px; min-height: 100vh; + background: inherit; } -h1 { - font-size: 3.2em; - line-height: 1.1; +h1, h2, h3, h4, h5, h6 { + margin: 0; + font-weight: 600; +} + +a { + font-weight: 500; + color: var(--primary-red); + text-decoration: none; + transition: color 0.3s ease; +} + +a:hover { + color: var(--primary-red-hover); } button { - border-radius: 8px; - border: 1px solid transparent; - padding: 0.6em 1.2em; - font-size: 1em; - font-weight: 500; font-family: inherit; - background-color: #1a1a1a; cursor: pointer; - transition: border-color 0.25s; + transition: all 0.3s ease; } -button:hover { - border-color: #646cff; + +p { + margin: 0 0 1rem 0; +} + +/* Utility classes */ +.text-center { + text-align: center; +} + +.mb-1 { margin-bottom: 0.5rem; } +.mb-2 { margin-bottom: 1rem; } +.mb-3 { margin-bottom: 1.5rem; } +.mb-4 { margin-bottom: 2rem; } + +.mt-1 { margin-top: 0.5rem; } +.mt-2 { margin-top: 1rem; } +.mt-3 { margin-top: 1.5rem; } +.mt-4 { margin-top: 2rem; } + +/* Animation utilities */ +@keyframes fadeIn { + from { opacity: 0; transform: translateY(20px); } + to { opacity: 1; transform: translateY(0); } +} + +.fade-in { + animation: fadeIn 0.6s ease-out; +} + +/* Custom scrollbar */ +::-webkit-scrollbar { + width: 8px; +} + +::-webkit-scrollbar-track { + background: rgba(255, 255, 255, 0.1); +} + +::-webkit-scrollbar-thumb { + background: var(--primary-red); + border-radius: 4px; +} + +::-webkit-scrollbar-thumb:hover { + background: var(--primary-red-hover); } button:focus, button:focus-visible {