Refactor App component and styles for a complete redesign of the gaming community website
This commit is contained in:
537
src/App.css
537
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;
|
||||
}
|
||||
|
||||
217
src/App.tsx
217
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 (
|
||||
<>
|
||||
<div>
|
||||
<a href="https://vite.dev" target="_blank">
|
||||
<img src={viteLogo} className="logo" alt="Vite logo" />
|
||||
</a>
|
||||
<a href="https://react.dev" target="_blank">
|
||||
<img src={reactLogo} className="logo react" alt="React logo" />
|
||||
</a>
|
||||
</div>
|
||||
<h1>Vite + React</h1>
|
||||
<div className="card">
|
||||
<button onClick={() => setCount((count) => count + 1)}>
|
||||
count is {count}
|
||||
</button>
|
||||
<p>
|
||||
Edit <code>src/App.tsx</code> and save to test HMR
|
||||
</p>
|
||||
</div>
|
||||
<p className="read-the-docs">
|
||||
Click on the Vite and React logos to learn more
|
||||
</p>
|
||||
</>
|
||||
<div className="app">
|
||||
{/* Navigation Header */}
|
||||
<nav className="navbar">
|
||||
<div className="nav-container">
|
||||
<div className="nav-logo">
|
||||
<h2>🎯 CS Community</h2>
|
||||
</div>
|
||||
<div className="nav-links">
|
||||
<a href="#servers">Servers</a>
|
||||
<a href="#blog">Blog</a>
|
||||
<a href="#git">Git</a>
|
||||
<a href="#forum">Forum</a>
|
||||
<button className="join-btn">Join Now</button>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
{/* Hero Section */}
|
||||
<section className="hero">
|
||||
<div className="hero-content">
|
||||
<h1 className="hero-title">
|
||||
Welcome to the Ultimate<br />
|
||||
<span className="highlight">Counter-Strike</span> Community
|
||||
</h1>
|
||||
<p className="hero-subtitle">
|
||||
Join thousands of players in competitive matches, casual games, and community events.
|
||||
Experience the best gaming community with dedicated servers and passionate players.
|
||||
</p>
|
||||
<div className="hero-buttons">
|
||||
<button className="btn-primary">🎮 Start Playing</button>
|
||||
<button className="btn-secondary">📊 View Stats</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="hero-visual">
|
||||
<div className="game-preview">
|
||||
<div className="preview-screen">
|
||||
<div className="screen-content">
|
||||
<div className="crosshair">⊕</div>
|
||||
<div className="health-bar">100 HP</div>
|
||||
<div className="ammo-counter">30/90</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Statistics Section */}
|
||||
<section className="stats-section">
|
||||
<div className="stats-container">
|
||||
<div className="stat-card">
|
||||
<div className="stat-icon">👥</div>
|
||||
<div className="stat-number">{stats.onlinePlayers.toLocaleString()}</div>
|
||||
<div className="stat-label">Online Players</div>
|
||||
</div>
|
||||
<div className="stat-card">
|
||||
<div className="stat-icon">🖥️</div>
|
||||
<div className="stat-number">{stats.totalServers}</div>
|
||||
<div className="stat-label">Active Servers</div>
|
||||
</div>
|
||||
<div className="stat-card">
|
||||
<div className="stat-icon">⏱️</div>
|
||||
<div className="stat-number">{stats.totalPlayTime}</div>
|
||||
<div className="stat-label">Hours Played</div>
|
||||
</div>
|
||||
<div className="stat-card">
|
||||
<div className="stat-icon">🎯</div>
|
||||
<div className="stat-number">{stats.activeGames}</div>
|
||||
<div className="stat-label">Live Matches</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Features Section */}
|
||||
<section className="features-section">
|
||||
<div className="features-container">
|
||||
<h2 className="section-title">Community Features</h2>
|
||||
<div className="features-grid">
|
||||
<div className="feature-card" id="servers">
|
||||
<div className="feature-icon">🖥️</div>
|
||||
<h3>Server Browser</h3>
|
||||
<p>Find and join the best Counter-Strike servers. Browse by game mode, region, and player count.</p>
|
||||
<button className="feature-btn">Browse Servers</button>
|
||||
</div>
|
||||
<div className="feature-card" id="blog">
|
||||
<div className="feature-icon">📝</div>
|
||||
<h3>Community Blog</h3>
|
||||
<p>Stay updated with the latest news, tournament results, and community announcements.</p>
|
||||
<button className="feature-btn">Read Blog</button>
|
||||
</div>
|
||||
<div className="feature-card" id="git">
|
||||
<div className="feature-icon">📦</div>
|
||||
<h3>Open Source</h3>
|
||||
<p>Contribute to our open-source projects. Custom maps, configs, and community tools.</p>
|
||||
<button className="feature-btn">View GitHub</button>
|
||||
</div>
|
||||
<div className="feature-card" id="forum">
|
||||
<div className="feature-icon">💬</div>
|
||||
<h3>Discussion Forum</h3>
|
||||
<p>Join discussions about strategies, share your experiences, and connect with fellow gamers.</p>
|
||||
<button className="feature-btn">Join Forum</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Recent Activity Section */}
|
||||
<section className="activity-section">
|
||||
<div className="activity-container">
|
||||
<div className="activity-main">
|
||||
<h2 className="section-title">Recent Activity</h2>
|
||||
<div className="chat-feed">
|
||||
{recentChats.map((chat, index) => (
|
||||
<div key={index} className="chat-message">
|
||||
<div className="chat-user">{chat.user}:</div>
|
||||
<div className="chat-text">{chat.message}</div>
|
||||
<div className="chat-time">{chat.time}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className="activity-sidebar">
|
||||
<div className="sidebar-card">
|
||||
<h3>🏆 Top Players</h3>
|
||||
<div className="leaderboard">
|
||||
<div className="leader-item">1. ProGamer99 - 2,450 pts</div>
|
||||
<div className="leader-item">2. SniperElite - 2,180 pts</div>
|
||||
<div className="leader-item">3. HeadshotKing - 1,950 pts</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="sidebar-card">
|
||||
<h3>🎯 Quick Stats</h3>
|
||||
<div className="quick-stats">
|
||||
<div>Avg Match Time: 12m 34s</div>
|
||||
<div>Most Popular Map: Dust2</div>
|
||||
<div>Peak Hours: 8-11 PM</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Footer */}
|
||||
<footer className="footer">
|
||||
<div className="footer-container">
|
||||
<div className="footer-section">
|
||||
<h4>🎯 CS Community</h4>
|
||||
<p>The ultimate destination for Counter-Strike enthusiasts worldwide.</p>
|
||||
</div>
|
||||
<div className="footer-section">
|
||||
<h4>Quick Links</h4>
|
||||
<a href="#servers">Servers</a>
|
||||
<a href="#blog">Blog</a>
|
||||
<a href="#forum">Forum</a>
|
||||
<a href="#git">GitHub</a>
|
||||
</div>
|
||||
<div className="footer-section">
|
||||
<h4>Community</h4>
|
||||
<a href="#">Discord</a>
|
||||
<a href="#">Steam Group</a>
|
||||
<a href="#">Tournaments</a>
|
||||
<a href="#">Support</a>
|
||||
</div>
|
||||
<div className="footer-section">
|
||||
<h4>Legal</h4>
|
||||
<a href="#">Privacy Policy</a>
|
||||
<a href="#">Terms of Service</a>
|
||||
<a href="#">Contact</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="footer-bottom">
|
||||
<p>© 2025 CS Community. All rights reserved. | Made with ❤️ for gamers</p>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default App
|
||||
|
||||
|
||||
104
src/index.css
104
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 {
|
||||
|
||||
Reference in New Issue
Block a user