From 7e99339f21c2efad6c5b4fc79f1c7dda076cbf64 Mon Sep 17 00:00:00 2001 From: Evelyn Sucitro Date: Mon, 15 Dec 2025 20:14:51 +0700 Subject: [PATCH] Update --- 2048.css | 371 +---------------------------------------- 2048.html | 4 +- 2048_Button.css | 129 ++++++++++++++ 2048_Sound.css | 238 ++++++++++++++++++++++++++ 2048_Tutorial_Logic.js | 14 +- Leaderboard.css | 36 +++- Leaderboard_Base.css | 37 +++- 7 files changed, 437 insertions(+), 392 deletions(-) create mode 100644 2048_Button.css create mode 100644 2048_Sound.css diff --git a/2048.css b/2048.css index f76363c..40524ca 100644 --- a/2048.css +++ b/2048.css @@ -1042,373 +1042,4 @@ h1 { filter: drop-shadow(0 0 20px rgba(255, 140, 0, 0.5)); line-height: 1; letter-spacing: -1px; -} - -/* =========================== - ICON BUTTONS - Enhanced Color -=========================== */ -.game-over-buttons { - display: flex; - gap: 16px; - justify-content: center; - margin-top: 42px; -} - -/* Icon Button Base Style */ -.btn-game-icon { - width: clamp(70px, 10vw, 80px); - height: clamp(70px, 10vw, 80px); - padding: 0; - background: rgba(255, 255, 255, 0.06); - border: 2px solid rgba(255, 255, 255, 0.2); - border-radius: 20px; - cursor: pointer; - transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); - display: flex; - align-items: center; - justify-content: center; - backdrop-filter: blur(10px); - box-shadow: - 0 8px 30px rgba(0, 0, 0, 0.4), - inset 0 1px 0 rgba(255, 255, 255, 0.1); - position: relative; - overflow: hidden; -} - -.btn-game-icon svg { - width: clamp(32px, 5vw, 38px); - height: clamp(32px, 5vw, 38px); - transition: all 0.3s ease; - position: relative; - z-index: 2; -} - -/* Shine Effect */ -.btn-game-icon::before { - content: ""; - position: absolute; - top: 0; - left: -100%; - width: 100%; - height: 100%; - background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent); - transition: left 0.5s ease; -} - -.btn-game-icon:hover::before { - left: 100%; -} - -.btn-game-icon:hover { - background: rgba(255, 255, 255, 0.12); - border-color: rgba(255, 255, 255, 0.4); - box-shadow: - 0 12px 40px rgba(0, 0, 0, 0.5), - 0 0 40px rgba(255, 255, 255, 0.15), - inset 0 1px 0 rgba(255, 255, 255, 0.2); - transform: translateY(-4px); -} - -.btn-game-icon:active { - transform: translateY(0); - box-shadow: - 0 4px 20px rgba(0, 0, 0, 0.4), - inset 0 2px 8px rgba(0, 0, 0, 0.3); -} - -/* Restart Button - EMERALD GREEN */ -.btn-restart-game { - background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(5, 150, 105, 0.2)); - border-color: rgba(16, 185, 129, 0.6); - box-shadow: - 0 8px 30px rgba(0, 0, 0, 0.4), - 0 0 30px rgba(16, 185, 129, 0.2), - inset 0 1px 0 rgba(255, 255, 255, 0.1); -} - -.btn-restart-game svg { - color: #10b981; - filter: drop-shadow(0 0 12px rgba(16, 185, 129, 0.5)); -} - -.btn-restart-game:hover { - background: linear-gradient(135deg, rgba(16, 185, 129, 0.3), rgba(5, 150, 105, 0.3)); - border-color: rgba(16, 185, 129, 0.9); - box-shadow: - 0 12px 40px rgba(0, 0, 0, 0.5), - 0 0 50px rgba(16, 185, 129, 0.5), - inset 0 1px 0 rgba(255, 255, 255, 0.2); -} - -.btn-restart-game:hover svg { - transform: rotate(180deg); - color: #34d399; -} - -/* Home Button - SKY BLUE */ -.btn-home-game { - background: linear-gradient(135deg, rgba(14, 165, 233, 0.2), rgba(2, 132, 199, 0.2)); - border-color: rgba(14, 165, 233, 0.6); - box-shadow: - 0 8px 30px rgba(0, 0, 0, 0.4), - 0 0 30px rgba(14, 165, 233, 0.2), - inset 0 1px 0 rgba(255, 255, 255, 0.1); -} - -.btn-home-game svg { - color: #0ea5e9; - filter: drop-shadow(0 0 12px rgba(14, 165, 233, 0.5)); -} - -.btn-home-game:hover { - background: linear-gradient(135deg, rgba(14, 165, 233, 0.3), rgba(2, 132, 199, 0.3)); - border-color: rgba(14, 165, 233, 0.9); - box-shadow: - 0 12px 40px rgba(0, 0, 0, 0.5), - 0 0 50px rgba(14, 165, 233, 0.5), - inset 0 1px 0 rgba(255, 255, 255, 0.2); -} - -.btn-home-game:hover svg { - transform: scale(1.1); - color: #38bdf8; -} - -/* ========================== - ADVANCED SOUND CONTROL -========================== */ -.sound-control-container { - position: fixed; - top: clamp(10px, 2vh, 20px); - left: clamp(10px, 2vw, 20px); - z-index: 101; - display: flex; - flex-direction: column; - gap: 12px; - align-items: flex-start; -} - -/* Backdrop Overlay untuk Mobile */ -.volume-backdrop { - display: none; - position: fixed; - inset: 0; - background: rgba(0, 0, 0, 0.75); - backdrop-filter: blur(8px); - z-index: 99; - animation: fadeIn 0.2s ease-out; -} - -.volume-backdrop.active { - display: block; -} - -/* Main Sound Button */ -.btn-sound-main { - width: clamp(40px, 6.5vw, 52px); - height: clamp(40px, 6.5vw, 52px); - padding: 0; - background: rgba(30, 0, 50, 0.9); - backdrop-filter: blur(15px); - border: 2px solid rgba(0, 217, 255, 0.5); - border-radius: 14px; - cursor: pointer; - transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); - display: flex; - align-items: center; - justify-content: center; - box-shadow: - 0 5px 20px rgba(0, 0, 0, 0.4), - 0 0 25px rgba(0, 217, 255, 0.25), - inset 0 1px 0 rgba(255, 255, 255, 0.1); - position: relative; -} - -.btn-sound-main svg { - width: clamp(20px, 3.5vw, 26px); - height: clamp(20px, 3.5vw, 26px); - color: rgba(0, 234, 255, 0.95); - transition: all 0.3s ease; - position: absolute; -} - -.btn-sound-main:hover { - background: rgba(0, 234, 255, 0.18); - border-color: rgba(0, 234, 255, 0.85); - box-shadow: - 0 7px 28px rgba(0, 0, 0, 0.5), - 0 0 40px rgba(0, 234, 255, 0.4), - inset 0 1px 0 rgba(255, 255, 255, 0.15); - transform: translateY(-2px); -} - -.btn-sound-main:hover svg { - color: rgba(0, 234, 255, 1); - transform: scale(1.12); -} - -.btn-sound-main:active { - transform: translateY(0); -} - -/* Muted State - Red */ -.btn-sound-main.all-muted { - background: rgba(60, 0, 10, 0.9) !important; - border-color: rgba(255, 60, 60, 0.7) !important; - box-shadow: - 0 5px 20px rgba(0, 0, 0, 0.4), - 0 0 25px rgba(255, 60, 60, 0.3), - inset 0 1px 0 rgba(255, 255, 255, 0.1) !important; -} - -.btn-sound-main.all-muted svg { - color: rgba(255, 80, 80, 0.95) !important; -} - -.btn-sound-main.all-muted:hover { - background: rgba(255, 60, 60, 0.2) !important; - border-color: rgba(255, 80, 80, 0.9) !important; -} - -/* Volume Panel */ -.volume-panel { - display: none; - background: linear-gradient(145deg, rgba(20, 0, 40, 0.98), rgba(30, 0, 50, 0.98)); - backdrop-filter: blur(25px); - border: 2px solid rgba(0, 217, 255, 0.4); - border-radius: 18px; - padding: 20px 18px; - min-width: clamp(240px, 30vw, 280px); - box-shadow: - 0 20px 60px rgba(0, 0, 0, 0.7), - 0 0 50px rgba(0, 217, 255, 0.3), - inset 0 1px 0 rgba(255, 255, 255, 0.1); - animation: slideDown 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); - z-index: 102; -} - -.volume-panel.active { - display: block; -} - -@keyframes slideDown { - from { - opacity: 0; - transform: translateY(-15px); - } - to { - opacity: 1; - transform: translateY(0); - } -} - -/* Volume Item */ -.volume-item { - margin-bottom: 18px; -} - -.volume-item:last-child { - margin-bottom: 0; -} - -.volume-header { - display: flex; - align-items: center; - gap: 10px; - margin-bottom: 8px; -} - -.volume-icon { - width: 18px; - height: 18px; - color: rgba(0, 234, 255, 0.8); -} - -.volume-label { - font-size: 13px; - font-weight: 700; - color: rgba(255, 255, 255, 0.9); - text-transform: uppercase; - letter-spacing: 0.5px; - flex: 1; -} - -.volume-value { - font-size: 12px; - font-weight: 700; - color: rgba(0, 234, 255, 0.9); - min-width: 40px; - text-align: right; -} - -/* Volume Slider */ -.volume-slider { - width: 100%; - height: 6px; - -webkit-appearance: none; - appearance: none; - background: rgba(255, 255, 255, 0.1); - border-radius: 10px; - outline: none; - cursor: pointer; - transition: all 0.2s; -} - -.volume-slider::-webkit-slider-track { - height: 6px; - background: rgba(255, 255, 255, 0.1); - border-radius: 10px; -} - -.volume-slider::-webkit-slider-thumb { - -webkit-appearance: none; - appearance: none; - width: 18px; - height: 18px; - background: linear-gradient(135deg, #00eaff 0%, #0099ff 100%); - border-radius: 50%; - cursor: pointer; - box-shadow: - 0 2px 10px rgba(0, 234, 255, 0.5), - 0 0 20px rgba(0, 234, 255, 0.3); - transition: all 0.2s; -} - -.volume-slider::-webkit-slider-thumb:hover { - transform: scale(1.2); - box-shadow: - 0 4px 15px rgba(0, 234, 255, 0.7), - 0 0 30px rgba(0, 234, 255, 0.5); -} - -.volume-slider::-moz-range-track { - height: 6px; - background: rgba(255, 255, 255, 0.1); - border-radius: 10px; -} - -.volume-slider::-moz-range-thumb { - width: 18px; - height: 18px; - background: linear-gradient(135deg, #00eaff 0%, #0099ff 100%); - border: none; - border-radius: 50%; - cursor: pointer; - box-shadow: - 0 2px 10px rgba(0, 234, 255, 0.5), - 0 0 20px rgba(0, 234, 255, 0.3); - transition: all 0.2s; -} - -.volume-slider::-moz-range-thumb:hover { - transform: scale(1.2); -} - -/* Slider Fill Effect */ -.volume-slider { - background: linear-gradient(to right, - rgba(0, 234, 255, 0.3) 0%, - rgba(0, 234, 255, 0.3) var(--value, 0%), - rgba(255, 255, 255, 0.1) var(--value, 0%), - rgba(255, 255, 255, 0.1) 100%); -} +} \ No newline at end of file diff --git a/2048.html b/2048.html index a20eb6a..95e6002 100644 --- a/2048.html +++ b/2048.html @@ -7,8 +7,10 @@ - + + + Console) + // Cek di Console browser (tekan F12 -> Console) console.log(`[Tutorial Check] User: ${currentUser}`); console.log(`[Tutorial Check] Key: ${tutorialKey}`); - // 2. Cek status di LocalStorage + // Cek status di LocalStorage const hasSeenTutorial = localStorage.getItem(tutorialKey); console.log(`[Tutorial Check] Status Seen: ${hasSeenTutorial}`); const tutorialOverlay = document.getElementById('tutorial-overlay'); - // 3. Logic: Jika belum pernah lihat (null) -> Tampilkan + // Logic: Jika belum pernah lihat (null) -> Tampilkan if (!hasSeenTutorial && tutorialOverlay) { console.log("-> Menampilkan Tutorial untuk user baru."); tutorialOverlay.style.display = 'flex'; @@ -48,5 +43,4 @@ document.addEventListener('DOMContentLoaded', () => { } }); -// (Opsional) Bikin global biar bisa dipanggil dari file lain/console window.checkTutorial = checkAndShowTutorial; \ No newline at end of file diff --git a/Leaderboard.css b/Leaderboard.css index b35c1ea..e67eb43 100644 --- a/Leaderboard.css +++ b/Leaderboard.css @@ -1,15 +1,18 @@ -/* Leaderboard.css */ - /* Main Container */ .container { - margin-top: 70px; + height: auto !important; + max-height: none !important; + min-height: 500px; + margin-top: 0; position: relative; z-index: 2; background: rgba(20, 0, 40, 0.65); border-radius: 20px; padding: 40px 100px; - width: 98%; + width: 90%; max-width: 1600px; + height: auto; + max-height: none; border: 2px solid rgba(0, 255, 255, 0.4); box-shadow: 0 0 25px rgba(0, 255, 255, 0.4), @@ -74,9 +77,10 @@ h1::before { display: flex; flex-direction: column; gap: 14px; - max-height: 500px; - overflow-y: auto; - padding-right: 10px; + max-height: none; + overflow-y: visible; + height: auto; + padding-right: 0px; padding-bottom: 5px; margin-bottom: 20px; } @@ -222,6 +226,22 @@ h1::before { box-shadow: none; padding: 0; margin-top: 20px; + position: relative; + border-top: 1px solid rgba(0, 255, 136, 0.2); /* Garis hijau tipis */ + box-shadow: 0 -15px 20px -10px rgba(0, 255, 136, 0.1); /* Glow hijau ke atas */ +} + +.your-rank-container::before { + content: ''; + position: absolute; + top: -1px; /* Pas di garis border */ + left: 50%; + transform: translateX(-50%); + width: 50px; + height: 2px; + background: #00ff88; + box-shadow: 0 0 10px #00ff88, 0 0 20px #00ff88; + border-radius: 2px; } .your-rank-item { @@ -233,4 +253,4 @@ h1::before { 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); -} \ No newline at end of file +} diff --git a/Leaderboard_Base.css b/Leaderboard_Base.css index ee62f95..0906738 100644 --- a/Leaderboard_Base.css +++ b/Leaderboard_Base.css @@ -8,12 +8,15 @@ body { font-family: 'Arial', sans-serif; - background: radial-gradient(circle at 20% 20%, #3b0066, #0c001a 70%); + background: radial-gradient(circle at 20% 20%, #3b0066, #0c001a 70%) fixed; + background-size: cover; min-height: 100vh; display: flex; justify-content: center; - align-items: center; - overflow: hidden; + align-items: flex-start; + overflow-y: auto; + padding-top: 50px; + padding-bottom: 50px; position: relative; } @@ -35,4 +38,32 @@ body { background: radial-gradient(circle, #00ffff, #0099ff); box-shadow: 0 0 10px #00eaff, 0 0 25px #0088ff; pointer-events: none; +} + +/* Leaderboard_Base.css - Bagian Paling Bawah */ + +/* === KUSTOMISASI SCROLLBAR BROWSER UTAMA === */ +/* Lebar Scrollbar */ +::-webkit-scrollbar { + width: 12px; + background: #0b0015; /* Latar belakang track gelap */ +} + +/* Track (Jalur) */ +::-webkit-scrollbar-track { + background: rgba(0, 0, 0, 0.3); + border-left: 1px solid rgba(255, 255, 255, 0.05); +} + +/* Thumb (Batang Scroll) */ +::-webkit-scrollbar-thumb { + background: linear-gradient(180deg, #3b0066, #ff00ff); /* Gradasi Ungu ke Pink */ + border-radius: 6px; + border: 3px solid #0b0015; /* Memberi jarak agar terlihat melayang */ +} + +/* Efek Hover di Scrollbar */ +::-webkit-scrollbar-thumb:hover { + background: linear-gradient(180deg, #5e00a3, #ff33ff); + box-shadow: 0 0 15px rgba(255, 0, 255, 0.5); /* Efek glow saat disentuh */ } \ No newline at end of file