Dashboard

Win Rate

55%

K/D Ratio

1.25

Headshot %

23%

Matches Played

120

Recent Matches

Top Agents

* { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: 'Segoe UI', Tahoma, sans-serif; background-color: #0f1923; color: #e5e5e5; display: flex; flex-direction: column; min-height: 100vh; } header { background-color: #111; padding: 15px 20px; display: flex; justify-content: space-between; align-items: center; } .logo { font-size: 1.8em; font-weight: bold; color: #ff4655; } nav ul { list-style: none; display: flex; gap: 20px; } nav a { color: #e5e5e5; text-decoration: none; font-weight: 500; } nav a:hover { color: #ff4655; } main { display: flex; flex: 1; } .sidebar { width: 220px; background-color: #1c1c1c; padding: 20px; display: flex; flex-direction: column; gap: 30px; } .profile { text-align: center; } .profile img { width: 80px; border-radius: 50%; margin-bottom: 10px; } .profile h2 { margin-bottom: 5px; font-size: 1.2em; } .profile p { margin-bottom: 10px; color: #ccc; } .profile button { background-color: #ff4655; border: none; padding: 8px 12px; color: #fff; cursor: pointer; border-radius: 4px; font-weight: bold; } .profile button:hover { background-color: #e03b4d; } .sidebar ul { list-style: none; } .sidebar ul li { margin-bottom: 15px; } .sidebar ul li a { color: #e5e5e5; text-decoration: none; font-weight: 500; } .sidebar ul li a:hover { color: #ff4655; } .dashboard { flex: 1; padding: 30px; } .dashboard h1 { margin-bottom: 20px; color: #ff4655; } .dashboard h2 { margin: 30px 0 15px; color: #ff4655; } .card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 20px; } .card { background-color: #1c1c1c; padding: 20px; border-radius: 15px; box-shadow: 0 4px 15px rgba(0,0,0,0.3); transition: transform 0.3s ease, box-shadow 0.3s ease; cursor: pointer; text-align: center; } .card:hover { transform: translateY(-10px); box-shadow: 0 8px 20px rgba(0,0,0,0.5); } .card h3 { margin-bottom: 10px; font-size: 1.1em; color: #ccc; } .card p { font-size: 1.5em; font-weight: bold; color: #ff4655; } .match-card { background-color: #222; padding: 15px; border-radius: 12px; box-shadow: 0 4px 10px rgba(0,0,0,0.2); transition: transform 0.3s ease, box-shadow 0.3s ease; cursor: pointer; } .match-card:hover { transform: translateY(-8px); box-shadow: 0 8px 20px rgba(0,0,0,0.4); } .match-card h4 { margin-bottom: 8px; color: #ff4655; } .match-card p { font-size: 0.9em; color: #ccc; } .agent-card { background-color: #222; padding: 15px; border-radius: 12px; box-shadow: 0 4px 10px rgba(0,0,0,0.2); transition: transform 0.3s ease, box-shadow 0.3s ease; cursor: pointer; text-align: center; } .agent-card:hover { transform: translateY(-8px); box-shadow: 0 8px 20px rgba(0,0,0,0.4); } .agent-card img { width: 80px; border-radius: 50%; margin-bottom: 10px; } .agent-card h4 { font-size: 1em; color: #ccc; } footer { background-color: #111; text-align: center; padding: 15px; font-size: 0.9em; } const matches = [ { map: 'Ascent', result: 'Win', score: '13-7', kda: '20/10/5' }, { map: 'Bind', result: 'Loss', score: '9-13', kda: '15/14/3' }, { map: 'Haven', result: 'Win', score: '13-11', kda: '22/8/7' }, { map: 'Split', result: 'Win', score: '13-5', kda: '18/6/9' }, { map: 'Icebox', result: 'Loss', score: '10-13', kda: '12/15/4' } ]; const agents = [ { name: 'Jett', img: 'https://via.placeholder.com/80?text=J' }, { name: 'Phoenix', img: 'https://via.placeholder.com/80?text=P' }, { name: 'Sage', img: 'https://via.placeholder.com/80?text=S' }, { name: 'Reyna', img: 'https://via.placeholder.com/80?text=R' }, { name: 'Sova', img: 'https://via.placeholder.com/80?text=So' } ]; function loadMatches() { const container = document.getElementById('matchesGrid'); container.innerHTML = ''; matches.forEach(match => { const div = document.createElement('div'); div.className = 'match-card'; div.innerHTML = `

${match.map}

Score: ${match.score}

K/D/A: ${match.kda}

${match.result}

`; container.appendChild(div); }); } function loadAgents() { const container = document.getElementById('agentsGrid'); container.innerHTML = ''; agents.forEach(agent => { const div = document.createElement('div'); div.className = 'agent-card'; div.innerHTML = `

${agent.name}

`; container.appendChild(div); }); } function refreshStats() { document.getElementById('winRate').textContent = `${Math.floor(Math.random() * 50) + 50}%`; document.getElementById('kdRatio').textContent = (Math.random() * 2).toFixed(2); document.getElementById('hsPercent').textContent = `${Math.floor(Math.random() * 20) + 20}%`; document.getElementById('matchesPlayed').textContent = Math.floor(Math.random() * 100) + 100; loadMatches(); loadAgents(); } document.getElementById('refreshBtn').addEventListener('click', refreshStats); // Initial load loadMatches(); loadAgents(); // Add interactivity to stat cards document.querySelectorAll('.card.interactive').forEach(card => { card.addEventListener('click', () => { alert(`${card.querySelector('h3').textContent}: ${card.querySelector('p').textContent}`); }); });