Ajay CP - Competitive Programming Hub

I'll help you create a competitive programming (CP) focused page for Ajay. Here are the updated files: **index.html** ```html Ajay CP - Competitive Programming Hub

Problems Solved

1200

Current Rating

Contests

Day Streak

Daily Practice

Easy Problems

3/5

Medium Problems

2/5

Hard Problems

0/2

Platforms

Topics to Master

Arrays

Strings

Dynamic Programming

Graphs

Trees

Binary Search

Greedy

Math

Segment Trees

Number Theory

Upcoming Contests

Codeforces Round #900

Today, 8:00 PM

AtCoder Beginner Contest

Tomorrow, 5:00 PM

LeetCode Weekly Contest

Sunday, 10:30 AM

``` **styles.css** ```css * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Inter', sans-serif; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); min-height: 100vh; color: #333; } .container { max-width: 1200px; margin: 0 auto; padding: 20px; } .header { text-align: center; margin-bottom: 40px; color: white; } .header h1 { font-size: 3.5rem; font-weight: 700; margin-bottom: 10px; text-shadow: 2px 2px 4px rgba(0,0,0,0.3); } .subtitle { font-size: 1.2rem; opacity: 0.9; font-weight: 300; } .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin-bottom: 40px; } .stat-card { background: white; padding: 30px 20px; border-radius: 15px; text-align: center; box-shadow: 0 10px 30px rgba(0,0,0,0.1); transition: transform 0.3s ease; } .stat-card:hover { transform: translateY(-5px); } .stat-number { font-size: 2.5rem; font-weight: 700; color: #667eea; font-family: 'JetBrains Mono', monospace; } .stat-label { font-size: 0.9rem; color: #666; margin-top: 8px; font-weight: 500; } .content-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 25px; } .section { background: white; padding: 25px; border-radius: 15px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); } .section h2 { color: #333; margin-bottom: 20px; font-size: 1.4rem; font-weight: 600; } .practice-goals { display: flex; flex-direction: column; gap: 15px; } .goal-item { display: flex; align-items: center; gap: 15px; font-size: 0.9rem; } .goal-item span:first-child { flex: 1; font-weight: 500; } .goal-item span:last-child { font-family: 'JetBrains Mono', monospace; font-weight: 600; color: #667eea; } .progress-bar { flex: 2; height: 8px; background: #f0f0f0; border-radius: 4px; overflow: hidden; } .progress-fill { height: 100%; background: linear-gradient(90deg, #667eea, #764ba2); transition: width 0.3s ease; } .platforms-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 15px; } .platform-card { padding: 20px 15px; border-radius: 10px; text-align: center; text-decoration: none; color: white; font-weight: 600; transition: transform 0.3s ease, box-shadow 0.3s ease; } .platform-card:hover { transform: translateY(-3px); box-shadow: 0 8px 25px rgba(0,0,0,0.2); } .codeforces { background: linear-gradient(135deg, #ff6b6b, #ee5a52); } .leetcode { background: linear-gradient(135deg, #ffa726, #ff9800); } .atcoder { background: linear-gradient(135deg, #42a5f5, #1e88e5); } .codechef { background: linear-gradient(135deg, #8d6e63, #6d4c41); } .platform-name { font-size: 1rem; margin-bottom: 8px; } .platform-stats { font-size: 0.8rem; opacity: 0.9; font-weight: 400; } .topics-grid { display: flex; flex-wrap: wrap; gap: 10px; } .topic-tag { padding: 8px 16px; border-radius: 20px; font-size: 0.85rem; font-weight: 500; cursor: pointer; transition: all 0.3s ease; } .topic-tag.completed { background: #e8f5e8; color: #2e7d32; border: 2px solid #4caf50; } .topic-tag.in-progress { background: #fff3e0; color: #f57c00; border: 2px solid #ff9800; } .topic-tag:not(.completed):not(.in-progress) { background: #f5f5f5; color: #666; border: 2px solid #ddd; } .topic-tag:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.1); } .contest-list { display: flex; flex-direction: column; gap: 15px; } .contest-item { padding: 15px; background: #f8f9fa; border-radius: 8px; border-left: 4px solid #667eea; } .contest-name { font-weight: 600; color: #333; margin-bottom: 5px; } .contest-time { font-size: 0.85rem; color: #666; font-family: 'JetBrains Mono', monospace; } @media (max-width: 768px) { .header h1 { font-size: 2.5rem; } .stats-grid { grid-template-columns: repeat(2, 1fr); } .content-grid { grid-template-columns: 1fr; } .container { padding: 15px; } } ``` **index.js** ```javascript // Animate numbers on page load function animateNumber(elementId, targetValue, duration = 2000) { const element = document.getElementById(elementId); const startValue = 0; const increment = targetValue / (duration / 16); let currentValue = startValue; const timer = setInterval(() => { currentValue += increment; if (currentValue >= targetValue) { currentValue = targetValue; clearInterval(timer); } element.textContent = Math.floor(currentValue); }, 16); } // Update contest times to show relative time function updateContestTimes() { const contestItems = document.querySelectorAll('.contest-time'); const now = new Date(); // This is a simple example - in a real app you'd have actual contest data const contests = [ { name: 'Today, 8:00 PM', timeUntil: 'In 6 hours' }, { name: 'Tomorrow, 5:00 PM', timeUntil: 'In 1 day' }, { name: 'Sunday, 10:30 AM', timeUntil: 'In 3 days' } ]; contestItems.forEach((item, index) => { if (contests[index]) { item.textContent = contests[index].timeUntil; } }); } // Add click handlers for topic tags function initializeTopicTags() { const topicTags = document.querySelectorAll('.topic-tag:not(.completed):not(.in-progress)'); topicTags.forEach(tag => { tag.addEventListener('click', () => { if (!tag.classList.contains('in-progress')) { tag.classList.add('in-progress'); // In a real app, you'd save this state console.log(`Started studying: ${tag.textContent}`); } }); }); } // Progress bar animation function animateProgressBars() { const progressBars = document.querySelectorAll('.progress-fill'); progressBars.forEach(bar => { const width = bar.style.width; bar.style.width = '0%'; setTimeout(() => { bar.style.width = width; }, 500); }); } // Add streak counter functionality function updateStreak() { const streakElement = document.getElementById('streak-days'); const lastVisit = localStorage.getItem('lastVisit'); const today = new Date().toDateString(); if (lastVisit === today) { // Already visited today return; } if (lastVisit) { const lastDate = new Date(lastVisit); const currentDate = new Date(); const diffTime = Math.abs(currentDate - lastDate); const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24)); if (diffDays === 1) { // Consecutive day let currentStreak = parseInt(localStorage.getItem('streak') || '1'); currentStreak++; localStorage.setItem('streak', currentStreak.toString()); streakElement.textContent = currentStreak; } else if (diffDays > 1) { // Streak broken localStorage.setItem('streak', '1'); streakElement.textContent = '1'; } } else { // First visit localStorage.setItem('streak', '1'); } localStorage.setItem('lastVisit', today); } // Initialize everything when page loads document.addEventListener('DOMContentLoaded', () => { // Animate stats animateNumber('problems-solved', 247); animateNumber('current-rating', 1342); animateNumber('contests-participated', 23); // Initialize features updateStreak(); updateContestTimes(); initializeTopicTags(); // Animate progress bars after a short delay setTimeout(animateProgressBars, 800); console.log('Ajay CP Dashboard initialized!'); console.log('Ready to conquer competitive programming! 🚀');

Fork of HTML Starter

Akshay232006