From 4d341adacbd015afab757e05933c11da552b5e22 Mon Sep 17 00:00:00 2001 From: Evelyn Date: Tue, 16 Dec 2025 11:03:32 +0700 Subject: [PATCH] leaderboard.js --- Leaderboard.html | 134 +---------------------------------------- assets/leaderboard.css | 114 +++++++++++++++++++++++++++++++++++ assets/leaderboard.js | 8 +++ 3 files changed, 124 insertions(+), 132 deletions(-) create mode 100644 assets/leaderboard.css create mode 100644 assets/leaderboard.js diff --git a/Leaderboard.html b/Leaderboard.html index 494faa5..d7b570c 100644 --- a/Leaderboard.html +++ b/Leaderboard.html @@ -3,125 +3,7 @@ Leaderboard - - - + @@ -161,18 +43,6 @@ thead { 0

- - - + diff --git a/assets/leaderboard.css b/assets/leaderboard.css new file mode 100644 index 0000000..0dc0914 --- /dev/null +++ b/assets/leaderboard.css @@ -0,0 +1,114 @@ +body { + margin: 0; + font-family: Arial, sans-serif; + background: linear-gradient(135deg, #c42ddf, #fe8bb4); + color: white; +} + +.topbar { + display: flex; + justify-content: space-between; + align-items: center; + padding: 15px; +} + +.back-btn, .logout-btn { + background: white; + padding: 8px 15px; + border-radius: 20px; + border: none; +} + +.profile { + display: flex; + align-items: center; + gap: 8px; +} + +.profile-icon { + background: #d05dec; + width: 35px; + height: 35px; + border-radius: 50%; + display: flex; + justify-content: center; + align-items: center; + font-weight: bold; +} + +.title { + text-align: center; + font-size: 32px; + margin-top: 10px; +} +.subtitle { + text-align: center; + margin-top: -10px; +} + +.filter-container { + margin: 20px; + display: flex; + align-items: center; + gap: 10px; +} + +.filter-btn { + background: rgba(255,255,255,0.3); + border: none; + padding: 8px 20px; + border-radius: 20px; + cursor: pointer; + color: white; + font-weight: bold; +} + +.filter-btn.active { + background: white; + color: #000000; +} +le { + width: 95%; + margin: auto; + border-collapse: collapse; + background: rgba(255,255,255,0.15); + border-radius: 10px; + overflow: hidden; +} + +th, td { + padding: 12px; + text-align: center; +} + +thead { + background: rgba(255,255,255,0.2); +} + +.tag { + padding: 4px 10px; + border-radius: 12px; + font-size: 13px; + color: black; +} +.hard { background: #ff6b6b; } +.medium { background: #ffe86a; } +.easy { background: #7ddf8c; } + +.cards { + display: flex; + justify-content: space-around; + margin: 40px 20px; +} + +.card { + width: 28%; + padding: 20px; + background: rgba(255,255,255,0.25); + text-align: center; + border-radius: 15px; +} + +.card h2 { + color: rgb(255, 0, 0); +} \ No newline at end of file diff --git a/assets/leaderboard.js b/assets/leaderboard.js new file mode 100644 index 0000000..c235d2c --- /dev/null +++ b/assets/leaderboard.js @@ -0,0 +1,8 @@ + const buttons = document.querySelectorAll(".filter-btn"); + buttons.forEach(btn => { + btn.addEventListener("click", function () { + buttons.forEach(b => b.classList.remove("active")); + this.classList.add("active"); + }); + }); +