From 45f5e766f1d8465b58cea8661db67d99012a5e33 Mon Sep 17 00:00:00 2001 From: Evelyn Sucitro Date: Tue, 2 Dec 2025 23:06:03 +0700 Subject: [PATCH] Leaderboard --- Leaderboard.css | 266 ++----------------------------------- Leaderboard.html | 3 + Leaderboard_Base.css | 38 ++++++ Leaderboard_Components.css | 128 ++++++++++++++++++ Leaderboard_Responsive.css | 61 +++++++++ 5 files changed, 242 insertions(+), 254 deletions(-) create mode 100644 Leaderboard_Base.css create mode 100644 Leaderboard_Components.css create mode 100644 Leaderboard_Responsive.css diff --git a/Leaderboard.css b/Leaderboard.css index aedb23e..0daa4d3 100644 --- a/Leaderboard.css +++ b/Leaderboard.css @@ -1,74 +1,6 @@ -* { - margin: 0; - padding: 0; - box-sizing: border-box; -} +/* Leaderboard.css */ -body { - font-family: 'Arial', sans-serif; - background: radial-gradient(circle at 20% 20%, #3b0066, #0c001a 70%); - min-height: 100vh; - display: flex; - justify-content: center; - align-items: center; - overflow: hidden; - position: relative; -} - -/* Neon Particles */ -#particles { - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; - z-index: 1; -} - -.particle { - position: absolute; - width: 5px; - height: 5px; - border-radius: 50%; - background: radial-gradient(circle, #00ffff, #0099ff); - box-shadow: 0 0 10px #00eaff, 0 0 25px #0088ff; - pointer-events: none; -} - -/* Back Button */ -.btn-back { - position: fixed; - top: 30px; - left: 30px; - z-index: 100; - width: 50px; - height: 50px; - border-radius: 50%; - background: rgba(30, 0, 50, 0.8); - border: 2px solid rgba(0, 255, 255, 0.4); - display: flex; - align-items: center; - justify-content: center; - cursor: pointer; - transition: all 0.3s ease; - box-shadow: 0 0 20px rgba(0, 255, 255, 0.3); -} - -.btn-back:hover { - background: rgba(0, 234, 255, 0.2); - border-color: rgba(0, 255, 255, 0.8); - box-shadow: 0 0 30px rgba(0, 255, 255, 0.6); - transform: translateX(-5px); -} - -.btn-back svg { - width: 24px; - height: 24px; - fill: #00eaff; - filter: drop-shadow(0 0 5px rgba(0, 234, 255, 0.8)); -} - -/* Container */ +/* Main Container */ .container { position: relative; z-index: 2; @@ -127,7 +59,7 @@ h1::before { filter: drop-shadow(0 0 10px #ffd700); } -/* Stats Container */ +/* Stats Layout */ .stats-container { display: grid; grid-template-columns: repeat(3, 1fr); @@ -135,36 +67,7 @@ h1::before { margin-bottom: 30px; } -.stat-box { - background: rgba(30, 0, 50, 0.5); - border: 1px solid rgba(0, 255, 255, 0.2); - border-radius: 12px; - padding: 16px 12px; - text-align: center; - transition: all 0.3s ease; -} - -.stat-box:hover { - border-color: rgba(0, 255, 255, 0.5); - box-shadow: 0 0 15px rgba(0, 255, 255, 0.3); -} - -.stat-label { - font-size: 11px; - text-transform: uppercase; - letter-spacing: 1px; - color: rgba(200, 200, 255, 0.6); - margin-bottom: 6px; -} - -.stat-value { - font-size: 22px; - font-weight: bold; - color: #00eaff; - text-shadow: 0 0 10px rgba(0, 234, 255, 0.6); -} - -/* Leaderboard List */ +/* Leaderboard List Structure */ .leaderboard-list { list-style: none; display: flex; @@ -198,9 +101,7 @@ h1::before { box-shadow: 0 0 15px rgba(0, 234, 255, 0.8); } -/* --- LEADERBOARD ITEMS & COLORS (HARMONISASI) --- */ - -/* Base Item Style */ +/* Leaderboard Item Wrapper */ .leaderboard-item { display: flex; align-items: center; @@ -219,7 +120,9 @@ h1::before { box-shadow: 0 0 20px rgba(0, 255, 255, 0.3); } -/* === RANK 1: CYAN NEON (Juara) === */ +/* === RANK LOGIC & THEMES === */ + +/* RANK 1: CYAN NEON */ .leaderboard-item.rank-1, .your-rank-container.rank-1 .your-rank-item { background: linear-gradient(90deg, rgba(0, 234, 255, 0.25) 0%, rgba(0, 234, 255, 0.05) 100%); @@ -235,40 +138,25 @@ h1::before { } .rank-1 .player-name { - /* 1. Matikan efek gradient aneh pada teks */ background: none; -webkit-text-fill-color: initial; background-clip: border-box; - - /* 2. Samakan ukuran font dengan yang lain (sebelumnya 22px jadi 20px) */ font-size: 20px; - - /* 3. Warna Putih Solid + Sedikit Glow Cyan biar tetap spesial tapi rapi */ color: #ffffff; text-shadow: 0 0 10px rgba(0, 234, 255, 0.8); - - /* Hapus filter drop-shadow berlebih */ filter: none; } -/* FIX: Warna Score Rank 1 jadi Putih Solid (Anti Silau) */ .rank-1 .score-value { - /* 1. Ukuran disamakan dengan yang lain */ font-size: 22px !important; - - /* 2. Warna Teks Putih Solid */ background: none !important; -webkit-text-fill-color: initial !important; color: #ffffff !important; - - /* 3. GLOWING: Ganti bayangan hitam jadi cahaya Cyan */ text-shadow: 0 0 10px #00eaff, 0 0 20px rgba(0, 234, 255, 0.4) !important; - - /* Reset filter */ filter: none !important; } -/* === RANK 2: MAGENTA NEON (Runner Up) === */ +/* RANK 2: MAGENTA NEON */ .leaderboard-item.rank-2, .your-rank-container.rank-2 .your-rank-item { background: linear-gradient(90deg, rgba(255, 0, 255, 0.25) 0%, rgba(255, 0, 255, 0.05) 100%); @@ -291,7 +179,7 @@ h1::before { color: #ff00ff; } -/* === RANK 3: VIOLET NEON (Third) === */ +/* RANK 3: VIOLET NEON */ .leaderboard-item.rank-3, .your-rank-container.rank-3 .your-rank-item { background: linear-gradient(90deg, rgba(138, 43, 226, 0.25) 0%, rgba(138, 43, 226, 0.05) 100%); @@ -314,7 +202,7 @@ h1::before { color: #a855f7; } -/* === RANK OTHER === */ +/* RANK OTHER */ .leaderboard-item.rank-other { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); @@ -326,73 +214,7 @@ h1::before { border: 1px solid rgba(0, 255, 255, 0.3); } -/* Animation */ -@keyframes pulseBadge { - 0%, 100% { - transform: scale(1); - box-shadow: 0 0 20px rgba(0, 234, 255, 0.8); - } - 50% { - transform: scale(1.1); - box-shadow: 0 0 30px rgba(0, 234, 255, 1); - } -} - -/* Player Info Common */ -.player-info { - flex: 1; - display: flex; - align-items: center; - min-width: 0; -} - -.player-name { - font-weight: 700; - font-size: 20px; - color: #e1e8ff; - text-shadow: 0 0 8px rgba(0, 234, 255, 0.3); - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; -} - -/* Score Common */ -.player-score { - font-weight: 700; - font-size: 18px; - color: #00eaff; - display: flex; - flex-direction: column; - align-items: flex-end; - gap: 3px; - flex-shrink: 0; -} - -.score-value { - font-size: 22px; -} - -.score-label { - font-size: 11px; - text-transform: uppercase; - letter-spacing: 1px; - color: rgba(200, 200, 255, 0.5); -} - -/* Badge Size Common */ -.rank-badge { - width: 45px; - height: 45px; - border-radius: 50%; - display: flex; - align-items: center; - justify-content: center; - font-size: 17px; - font-weight: bold; - flex-shrink: 0; -} - -/* Your Rank Section Structure */ +/* Your Rank Section Layout */ .your-rank-container { background: transparent; border: none; @@ -407,71 +229,7 @@ h1::before { gap: 20px; padding: 18px 25px; border-radius: 14px; - /* Default style if not top 3 */ background: linear-gradient(135deg, rgba(0, 255, 136, 0.15), rgba(0, 0, 0, 0.5)); border: 2px solid rgba(0, 255, 136, 0.5); box-shadow: 0 0 20px rgba(0, 255, 136, 0.3); -} - -/* --- RESPONSIVE FIX (MODE LAPTOP/LAYAR KECIL) --- */ - -@media screen and (max-width: 1440px) { - /* Mencegah container nabrak tombol back */ - .container { - width: 88%; - padding: 30px 50px; - max-height: 90vh; - } - - .btn-back { - top: 20px; - left: 20px; - width: 45px; - height: 45px; - } -} - -@media (max-width: 768px) { - .container { - padding: 35px 30px; - width: 95%; - } - - h1 { - font-size: 1.8rem; - } - - .stats-container { - grid-template-columns: repeat(3, 1fr); - gap: 10px; - } -} - -@media (max-width: 480px) { - .container { - padding: 25px 20px; - } - - h1 { - font-size: 1.5rem; - } - - .leaderboard-item { - padding: 14px 18px; - gap: 15px; - } - - .rank-badge { - width: 38px; - height: 38px; - font-size: 15px; - } - - .player-name { - font-size: 16px; - } - - .score-value { - font-size: 18px; - } } \ No newline at end of file diff --git a/Leaderboard.html b/Leaderboard.html index 933c91d..778a08e 100644 --- a/Leaderboard.html +++ b/Leaderboard.html @@ -4,7 +4,10 @@ Leaderboard + + + diff --git a/Leaderboard_Base.css b/Leaderboard_Base.css new file mode 100644 index 0000000..ee62f95 --- /dev/null +++ b/Leaderboard_Base.css @@ -0,0 +1,38 @@ +/* Leaderboard_Base.css */ + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: 'Arial', sans-serif; + background: radial-gradient(circle at 20% 20%, #3b0066, #0c001a 70%); + min-height: 100vh; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; +} + +/* Neon Particles */ +#particles { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 1; +} + +.particle { + position: absolute; + width: 5px; + height: 5px; + border-radius: 50%; + background: radial-gradient(circle, #00ffff, #0099ff); + box-shadow: 0 0 10px #00eaff, 0 0 25px #0088ff; + pointer-events: none; +} \ No newline at end of file diff --git a/Leaderboard_Components.css b/Leaderboard_Components.css new file mode 100644 index 0000000..ca3e29d --- /dev/null +++ b/Leaderboard_Components.css @@ -0,0 +1,128 @@ +/* Leaderboard_Components.css */ + +/* Back Button */ +.btn-back { + position: fixed; + top: 30px; + left: 30px; + z-index: 100; + width: 50px; + height: 50px; + border-radius: 50%; + background: rgba(30, 0, 50, 0.8); + border: 2px solid rgba(0, 255, 255, 0.4); + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + transition: all 0.3s ease; + box-shadow: 0 0 20px rgba(0, 255, 255, 0.3); +} + +.btn-back:hover { + background: rgba(0, 234, 255, 0.2); + border-color: rgba(0, 255, 255, 0.8); + box-shadow: 0 0 30px rgba(0, 255, 255, 0.6); + transform: translateX(-5px); +} + +.btn-back svg { + width: 24px; + height: 24px; + fill: #00eaff; + filter: drop-shadow(0 0 5px rgba(0, 234, 255, 0.8)); +} + +/* Stat Box Component */ +.stat-box { + background: rgba(30, 0, 50, 0.5); + border: 1px solid rgba(0, 255, 255, 0.2); + border-radius: 12px; + padding: 16px 12px; + text-align: center; + transition: all 0.3s ease; +} + +.stat-box:hover { + border-color: rgba(0, 255, 255, 0.5); + box-shadow: 0 0 15px rgba(0, 255, 255, 0.3); +} + +.stat-label { + font-size: 11px; + text-transform: uppercase; + letter-spacing: 1px; + color: rgba(200, 200, 255, 0.6); + margin-bottom: 6px; +} + +.stat-value { + font-size: 22px; + font-weight: bold; + color: #00eaff; + text-shadow: 0 0 10px rgba(0, 234, 255, 0.6); +} + +/* Player Components Base Styles */ +.player-info { + flex: 1; + display: flex; + align-items: center; + min-width: 0; +} + +.player-name { + font-weight: 700; + font-size: 20px; + color: #e1e8ff; + text-shadow: 0 0 8px rgba(0, 234, 255, 0.3); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.player-score { + font-weight: 700; + font-size: 18px; + color: #00eaff; + display: flex; + flex-direction: column; + align-items: flex-end; + gap: 3px; + flex-shrink: 0; +} + +.score-value { + font-size: 22px; +} + +.score-label { + font-size: 11px; + text-transform: uppercase; + letter-spacing: 1px; + color: rgba(200, 200, 255, 0.5); +} + +.rank-badge { + width: 45px; + height: 45px; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + font-size: 17px; + font-weight: bold; + flex-shrink: 0; +} + +/* Animations */ +@keyframes pulseBadge { + 0%, 100% { + transform: scale(1); + box-shadow: 0 0 20px rgba(0, 234, 255, 0.8); + } + 50% { + transform: scale(1.1); + box-shadow: 0 0 30px rgba(0, 234, 255, 1); + } +} \ No newline at end of file diff --git a/Leaderboard_Responsive.css b/Leaderboard_Responsive.css new file mode 100644 index 0000000..aca2ee2 --- /dev/null +++ b/Leaderboard_Responsive.css @@ -0,0 +1,61 @@ +/* Leaderboard_Responsive.css */ + +@media screen and (max-width: 1440px) { + .container { + width: 88%; + padding: 30px 50px; + max-height: 90vh; + } + + .btn-back { + top: 20px; + left: 20px; + width: 45px; + height: 45px; + } +} + +@media (max-width: 768px) { + .container { + padding: 35px 30px; + width: 95%; + } + + h1 { + font-size: 1.8rem; + } + + .stats-container { + grid-template-columns: repeat(3, 1fr); + gap: 10px; + } +} + +@media (max-width: 480px) { + .container { + padding: 25px 20px; + } + + h1 { + font-size: 1.5rem; + } + + .leaderboard-item { + padding: 14px 18px; + gap: 15px; + } + + .rank-badge { + width: 38px; + height: 38px; + font-size: 15px; + } + + .player-name { + font-size: 16px; + } + + .score-value { + font-size: 18px; + } +} \ No newline at end of file