Update
This commit is contained in:
Evelyn Sucitro
parent
2bc7606931
commit
7e99339f21
371
2048.css
371
2048.css
@ -1042,373 +1042,4 @@ h1 {
|
|||||||
filter: drop-shadow(0 0 20px rgba(255, 140, 0, 0.5));
|
filter: drop-shadow(0 0 20px rgba(255, 140, 0, 0.5));
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
letter-spacing: -1px;
|
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%);
|
|
||||||
}
|
|
||||||
@ -7,8 +7,10 @@
|
|||||||
<link rel="stylesheet" href="2048_Background_Effects.css"/>
|
<link rel="stylesheet" href="2048_Background_Effects.css"/>
|
||||||
<link rel="stylesheet" href="2048_Floating_Particles.css"/>
|
<link rel="stylesheet" href="2048_Floating_Particles.css"/>
|
||||||
<link rel="stylesheet" href="2048.css"/>
|
<link rel="stylesheet" href="2048.css"/>
|
||||||
<link rel="stylesheet" href="2048_Responsive.css"/>
|
|
||||||
<link rel="stylesheet" href="2048_Tiles_Colors.css"/>
|
<link rel="stylesheet" href="2048_Tiles_Colors.css"/>
|
||||||
|
<link rel="stylesheet" href="2048_Sound.css"/>
|
||||||
|
<link rel="stylesheet" href="2048_Button.css"/>
|
||||||
|
<link rel="stylesheet" href="2048_Responsive.css"/>
|
||||||
<link rel="preconnect" href="https://fonts.googleapis.com"/>
|
<link rel="preconnect" href="https://fonts.googleapis.com"/>
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/>
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/>
|
||||||
<link
|
<link
|
||||||
|
|||||||
129
2048_Button.css
Normal file
129
2048_Button.css
Normal file
@ -0,0 +1,129 @@
|
|||||||
|
/* ===========================
|
||||||
|
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;
|
||||||
|
}
|
||||||
238
2048_Sound.css
Normal file
238
2048_Sound.css
Normal file
@ -0,0 +1,238 @@
|
|||||||
|
/* ==========================
|
||||||
|
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%);
|
||||||
|
}
|
||||||
@ -1,24 +1,19 @@
|
|||||||
/* ----------------------------------------------------
|
|
||||||
FILE: Tutorial_Logic.js
|
|
||||||
---------------------------------------------------- */
|
|
||||||
|
|
||||||
// Kita buat fungsi agar bisa dipanggil manual jika perlu
|
|
||||||
function checkAndShowTutorial() {
|
function checkAndShowTutorial() {
|
||||||
// 1. Ambil user terbaru saat fungsi dijalankan
|
// Ambil user terbaru saat fungsi dijalankan
|
||||||
const currentUser = sessionStorage.getItem("loggedInUser") || "guest";
|
const currentUser = sessionStorage.getItem("loggedInUser") || "guest";
|
||||||
const tutorialKey = 'tutorialSeen_' + currentUser;
|
const tutorialKey = 'tutorialSeen_' + currentUser;
|
||||||
|
|
||||||
// DEBUG: Cek di Console browser (tekan F12 -> Console)
|
// Cek di Console browser (tekan F12 -> Console)
|
||||||
console.log(`[Tutorial Check] User: ${currentUser}`);
|
console.log(`[Tutorial Check] User: ${currentUser}`);
|
||||||
console.log(`[Tutorial Check] Key: ${tutorialKey}`);
|
console.log(`[Tutorial Check] Key: ${tutorialKey}`);
|
||||||
|
|
||||||
// 2. Cek status di LocalStorage
|
// Cek status di LocalStorage
|
||||||
const hasSeenTutorial = localStorage.getItem(tutorialKey);
|
const hasSeenTutorial = localStorage.getItem(tutorialKey);
|
||||||
console.log(`[Tutorial Check] Status Seen: ${hasSeenTutorial}`);
|
console.log(`[Tutorial Check] Status Seen: ${hasSeenTutorial}`);
|
||||||
|
|
||||||
const tutorialOverlay = document.getElementById('tutorial-overlay');
|
const tutorialOverlay = document.getElementById('tutorial-overlay');
|
||||||
|
|
||||||
// 3. Logic: Jika belum pernah lihat (null) -> Tampilkan
|
// Logic: Jika belum pernah lihat (null) -> Tampilkan
|
||||||
if (!hasSeenTutorial && tutorialOverlay) {
|
if (!hasSeenTutorial && tutorialOverlay) {
|
||||||
console.log("-> Menampilkan Tutorial untuk user baru.");
|
console.log("-> Menampilkan Tutorial untuk user baru.");
|
||||||
tutorialOverlay.style.display = 'flex';
|
tutorialOverlay.style.display = 'flex';
|
||||||
@ -48,5 +43,4 @@ document.addEventListener('DOMContentLoaded', () => {
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
// (Opsional) Bikin global biar bisa dipanggil dari file lain/console
|
|
||||||
window.checkTutorial = checkAndShowTutorial;
|
window.checkTutorial = checkAndShowTutorial;
|
||||||
@ -1,15 +1,18 @@
|
|||||||
/* Leaderboard.css */
|
|
||||||
|
|
||||||
/* Main Container */
|
/* Main Container */
|
||||||
.container {
|
.container {
|
||||||
margin-top: 70px;
|
height: auto !important;
|
||||||
|
max-height: none !important;
|
||||||
|
min-height: 500px;
|
||||||
|
margin-top: 0;
|
||||||
position: relative;
|
position: relative;
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
background: rgba(20, 0, 40, 0.65);
|
background: rgba(20, 0, 40, 0.65);
|
||||||
border-radius: 20px;
|
border-radius: 20px;
|
||||||
padding: 40px 100px;
|
padding: 40px 100px;
|
||||||
width: 98%;
|
width: 90%;
|
||||||
max-width: 1600px;
|
max-width: 1600px;
|
||||||
|
height: auto;
|
||||||
|
max-height: none;
|
||||||
border: 2px solid rgba(0, 255, 255, 0.4);
|
border: 2px solid rgba(0, 255, 255, 0.4);
|
||||||
box-shadow:
|
box-shadow:
|
||||||
0 0 25px rgba(0, 255, 255, 0.4),
|
0 0 25px rgba(0, 255, 255, 0.4),
|
||||||
@ -74,9 +77,10 @@ h1::before {
|
|||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 14px;
|
gap: 14px;
|
||||||
max-height: 500px;
|
max-height: none;
|
||||||
overflow-y: auto;
|
overflow-y: visible;
|
||||||
padding-right: 10px;
|
height: auto;
|
||||||
|
padding-right: 0px;
|
||||||
padding-bottom: 5px;
|
padding-bottom: 5px;
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
}
|
}
|
||||||
@ -222,6 +226,22 @@ h1::before {
|
|||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
margin-top: 20px;
|
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 {
|
.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));
|
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);
|
border: 2px solid rgba(0, 255, 136, 0.5);
|
||||||
box-shadow: 0 0 20px rgba(0, 255, 136, 0.3);
|
box-shadow: 0 0 20px rgba(0, 255, 136, 0.3);
|
||||||
}
|
}
|
||||||
|
|||||||
@ -8,12 +8,15 @@
|
|||||||
|
|
||||||
body {
|
body {
|
||||||
font-family: 'Arial', sans-serif;
|
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;
|
min-height: 100vh;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: flex-start;
|
||||||
overflow: hidden;
|
overflow-y: auto;
|
||||||
|
padding-top: 50px;
|
||||||
|
padding-bottom: 50px;
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -35,4 +38,32 @@ body {
|
|||||||
background: radial-gradient(circle, #00ffff, #0099ff);
|
background: radial-gradient(circle, #00ffff, #0099ff);
|
||||||
box-shadow: 0 0 10px #00eaff, 0 0 25px #0088ff;
|
box-shadow: 0 0 10px #00eaff, 0 0 25px #0088ff;
|
||||||
pointer-events: none;
|
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 */
|
||||||
}
|
}
|
||||||
Loading…
x
Reference in New Issue
Block a user