Skip to content
This repository was archived by the owner on Nov 21, 2024. It is now read-only.

this is my project #84

Open
PrIyank12Singh wants to merge 5 commits into
base: master
Choose a base branch
from
Open

this is my project #84

Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
605787f
index.html
PrIyank12Singh Nov 21, 2024
5613e3c
Update index.html
PrIyank12Singh Nov 21, 2024
16e7df1
Update index.html
PrIyank12Singh Nov 21, 2024
254ec63
Update index.html
PrIyank12Singh Nov 21, 2024
8460088
Merge pull request #1 from PrIyank12Singh/PrIyank12Singh-patch-1
PrIyank12Singh Nov 21, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
221 changes: 148 additions & 73 deletions frontend/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,87 +8,162 @@
<title>LeetCode Leaderboard</title>
</head>
<body class="bg-gray-900 text-white p-5">
<!-- <canvas id="myChart" style="width:100%;max-width:600px"></canvas> -->
<div class="fixed top-5 right-5">
<button id="toggleMode" class="bg-blue-500 text-white py-2 px-4 rounded">
Switch to Light Mode
</button>
</div>

<div id="submissionDisplay" class="mt-5 mb-5">
<div class="text-center text-xl">
<div id="submissionText" class="inline-block whitespace-nowrap overflow-hidden">
Loading recent submissions...
</div>
<div id="submissionUsernames" class="inline-block ml-4">By: N/A</div>
</div>
</div>

<div class="container mx-auto my-10">
<div class="">
<!-- Leaderboard -->
<div class="col-span-2 bg-gray-800 rounded-lg shadow-md p-6 overflow-x-auto">
<div class="flex justify-between items-center mb-6">
<h1 class="text-4xl font-bold">TBPPP Leaderboard</h1>
<div class="flex gap-4 items-center">
<select id="section-filter" class="bg-gray-700 text-white px-4 py-2 rounded hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500">
<option value="all">All Sections</option>
</select>
<button id="export-btn" class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded flex items-center transition duration-150 ease-in-out">
<i class="fas fa-download mr-2"></i> Export to CSV
</button>
</div>
<div class="col-span-2 bg-gray-800 rounded-lg shadow-md p-6 overflow-x-auto">
<div class="flex justify-between items-center mb-6">
<h1 class="text-4xl font-bold">TBPPP Leaderboard</h1>
<div class="flex gap-4 items-center">
<select id="section-filter" class="bg-gray-700 text-white px-4 py-2 rounded hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500">
<option value="all">All Sections</option>
</select>
<button id="export-btn" class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded flex items-center transition duration-150 ease-in-out">
<i class="fas fa-download mr-2"></i> Export to CSV
</button>
</div>
<table class="min-w-full bg-gray-900 rounded-lg overflow-hidden shadow-md">
<thead>
<tr class="bg-gray-700">
<th class="p-4 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Rank</th>
<th class="p-4 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Roll Number</th>
<th class="p-4 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Up</th>
<th class="p-4 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Name</th>
<th class="p-4 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">
Section
<button id="sort-section" class="ml-2 hover:text-white">
<i class="fas fa-sort"></i>
</button>
</th>
<th class="p-4 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">
Total Solved
<button id="sort-total" class="ml-2 hover:text-white">
<i class="fas fa-sort"></i>
</button>
</th>
<th class="p-4 text-left text-xs font-medium text-green-400 uppercase tracking-wider">
Easy
<button id="sort-easy" class="ml-2 hover:text-white">
<i class="fas fa-sort"></i>
</button>
</th>
<th class="p-4 text-left text-xs font-medium text-yellow-400 uppercase tracking-wider">
Medium
<button id="sort-medium" class="ml-2 hover:text-white">
<i class="fas fa-sort"></i>
</button>
</th>
<th class="p-4 text-left text-xs font-medium text-red-400 uppercase tracking-wider">
Hard
<button id="sort-hard" class="ml-2 hover:text-white">
<i class="fas fa-sort"></i>
</button>
</th>
<th class="p-4 text-left text-xs font-medium text-red-400 uppercase tracking-wider">
Last question
</th>
</tr>
</thead>
<tbody id="leaderboard-body">
<!-- Data will be dynamically added here -->
</tbody>
</table>

<!-- Loading State -->
<div id="loading-state" class="hidden">
<div class="flex justify-center items-center p-8">
<div class="animate-spin rounded-full h-8 w-8 border-b-2 border-white"></div>
</div>
</div>
<table class="min-w-full bg-gray-900 rounded-lg overflow-hidden shadow-md">
<thead>
<tr class="bg-gray-700">
<th class="p-4 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Rank</th>
<th class="p-4 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Roll Number</th>
<th class="p-4 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Up</th>
<th class="p-4 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Name</th>
<th class="p-4 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Section</th>
<th class="p-4 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Total Solved</th>
<th class="p-4 text-left text-xs font-medium text-green-400 uppercase tracking-wider">Easy</th>
<th class="p-4 text-left text-xs font-medium text-yellow-400 uppercase tracking-wider">Medium</th>
<th class="p-4 text-left text-xs font-medium text-red-400 uppercase tracking-wider">Hard</th>
<th class="p-4 text-left text-xs font-medium text-red-400 uppercase tracking-wider">Last question</th>
</tr>
</thead>
<tbody id="leaderboard-body">

</tbody>
</table>

<div id="loading-state" class="hidden">
<div class="flex justify-center items-center p-8">
<div class="animate-spin rounded-full h-8 w-8 border-b-2 border-white"></div>
</div>
</div>

<!-- Error State -->
<div id="error-state" class="hidden">
<div class="text-center p-8 text-red-500">
<i class="fas fa-exclamation-circle text-2xl mb-2"></i>
<p>Error loading data. Please try again later.</p>
</div>
<div id="error-state" class="hidden">
<div class="text-center p-8 text-red-500">
<i class="fas fa-exclamation-circle text-2xl mb-2"></i>
<p>Error loading data. Please try again later.</p>
</div>
</div>
</div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
<script src="index.js"></script>

<script>
const toggleModeButton = document.getElementById('toggleMode');
let isDarkMode = true;

const body = document.body;
const submissionText = document.getElementById('submissionText');
const submissionUsernames = document.getElementById('submissionUsernames');
const leaderboardBody = document.getElementById('leaderboard-body');

toggleModeButton.addEventListener('click', () => {
if (isDarkMode) {
body.classList.remove('bg-gray-900', 'text-white');
body.classList.add('bg-white', 'text-gray-900');
submissionText.classList.remove('text-white');
submissionText.classList.add('text-gray-900');
submissionUsernames.classList.remove('text-white');
submissionUsernames.classList.add('text-gray-900');
leaderboardBody.classList.remove('bg-gray-900', 'text-white');
leaderboardBody.classList.add('bg-gray-100', 'text-gray-900');
document.querySelectorAll("table th, table td").forEach(cell => {
cell.classList.remove('text-white');
cell.classList.add('text-gray-900');
});
toggleModeButton.textContent = 'Switch to Dark Mode';
} else {
body.classList.remove('bg-white', 'text-gray-900');
body.classList.add('bg-gray-900', 'text-white');
submissionText.classList.remove('text-gray-900');
submissionText.classList.add('text-white');
submissionUsernames.classList.remove('text-gray-900');
submissionUsernames.classList.add('text-white');
leaderboardBody.classList.remove('bg-gray-100', 'text-gray-900');
leaderboardBody.classList.add('bg-gray-900', 'text-white');
document.querySelectorAll("table th, table td").forEach(cell => {
cell.classList.remove('text-gray-900');
cell.classList.add('text-white');
});
toggleModeButton.textContent = 'Switch to Light Mode';
}
isDarkMode = !isDarkMode;
});

async function fetchRecentSubmissions() {
try {

const response = await fetch('data.json');
const data = await response.json();


if (data && Array.isArray(data.users)) {
const now = new Date();
const twentyFourHoursAgo = now.getTime() - (24 * 60 * 60 * 1000);


const usernamesWithRecentSubmissions = data.users.filter(user => {

return user.recentSubmissions.some(submission => {
const submissionTime = new Date(submission.timestamp * 1000).getTime();
return submissionTime >= twentyFourHoursAgo;
});
}).map(user => user.username);


if (usernamesWithRecentSubmissions.length > 0) {
document.getElementById('submissionText').textContent = "Users with Submissions in the Last 24 Hours:";
submissionUsernames.innerHTML = usernamesWithRecentSubmissions.join(', ');
} else {

document.getElementById('submissionText').textContent = "No submissions within the last 24 hours.";
submissionUsernames.textContent = "By: N/A";
}
} else {

document.getElementById('submissionText').textContent = "No data available.";
submissionUsernames.textContent = "By: N/A";
}
} catch (error) {

console.error("Error fetching data:", error);
document.getElementById('submissionText').textContent = "Error fetching data.";
submissionUsernames.textContent = "By: N/A";
}
}


fetchRecentSubmissions();


setInterval(fetchRecentSubmissions, 6000000);

</script>
</body>
</html>
</html>