From 2bc7606931ffb07b07cd8645b1446c3a495d7b52 Mon Sep 17 00:00:00 2001 From: Jevinca Marvella Date: Mon, 8 Dec 2025 17:07:44 +0700 Subject: [PATCH] 2048 Responsive --- 2048.css | 87 +------------- 2048.html | 3 +- 2048_Responsive.css | 287 ++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 290 insertions(+), 87 deletions(-) create mode 100644 2048_Responsive.css diff --git a/2048.css b/2048.css index 2698a67..f76363c 100644 --- a/2048.css +++ b/2048.css @@ -343,13 +343,7 @@ h1 { z-index: 102 !important; } -/* Mobile Responsive */ -@media (max-width: 768px) { - .sound-controls { - flex-direction: column; - gap: clamp(6px, 1.2vw, 10px); - } -} + .icon-btn { width: clamp(36px, 6vw, 48px); height: clamp(36px, 6vw, 48px); @@ -740,16 +734,6 @@ h1 { display: none; } -@media (max-width: 768px) { - .pc-controls { - display: none !important; - } - - .mobile-controls { - display: block; - } -} - /* Keys Display */ .keys-container { display: flex; @@ -1190,55 +1174,6 @@ h1 { color: #38bdf8; } -/* Responsive Design */ -@media (max-width: 480px) { - .game-over-modal { - padding: 45px 35px 38px; - } - - .game-over-buttons { - gap: 12px; - } - - .btn-game-icon { - width: clamp(65px, 15vw, 75px); - height: clamp(65px, 15vw, 75px); - } - - .btn-game-icon svg { - width: clamp(28px, 6vw, 34px); - height: clamp(28px, 6vw, 34px); - } -} - -/* ========================== - RESPONSIVE DESIGN -========================== */ - -/* Touch hint for mobile only */ -.touch-hint { - display: none; -} - -@media (max-width: 768px) { - .touch-hint { - display: block; - position: fixed; - right: clamp(10px, 2vw, 16px); - bottom: clamp(10px, 2vh, 16px); - background: rgba(0, 0, 0, 0.65); - backdrop-filter: blur(12px); - padding: clamp(7px, 1.5vw, 9px) clamp(11px, 2vw, 14px); - border-radius: 10px; - font-size: clamp(10px, 1.5vw, 11px); - z-index: 4; - color: #cfefff; - border: 1px solid rgba(0, 217, 255, 0.35); - box-shadow: 0 5px 18px rgba(0, 0, 0, 0.35); - font-weight: 500; - } -} - /* ========================== ADVANCED SOUND CONTROL ========================== */ @@ -1477,23 +1412,3 @@ h1 { rgba(255, 255, 255, 0.1) var(--value, 0%), rgba(255, 255, 255, 0.1) 100%); } - -/* Mobile Responsive */ -@media (max-width: 768px) { - .volume-panel { - min-width: clamp(220px, 50vw, 260px); - padding: 16px 14px; - } - - .volume-item { - margin-bottom: 14px; - } - - .volume-label { - font-size: 12px; - } - - .volume-value { - font-size: 11px; - } -} \ No newline at end of file diff --git a/2048.html b/2048.html index dff6c3c..a20eb6a 100644 --- a/2048.html +++ b/2048.html @@ -2,11 +2,12 @@ - + 2048 + diff --git a/2048_Responsive.css b/2048_Responsive.css new file mode 100644 index 0000000..bfbbce3 --- /dev/null +++ b/2048_Responsive.css @@ -0,0 +1,287 @@ + + +@media (max-width: 480px) { + /* Body & Container */ + body { + padding: 8px; + } + + .game-container { + transform: scale(1); + } + + /* Header */ + .game-header { + margin-bottom: 16px; + } + + h1 { + font-size: clamp(38px, 8vw, 50px); + margin-bottom: clamp(8px, 1.2vh, 12px); + } + + .score-container { + gap: clamp(8px, 1.8vw, 12px); + margin-bottom: clamp(10px, 1.8vh, 14px); + } + + .score-box { + padding: clamp(8px, 1.2vh, 10px) clamp(16px, 2.5vw, 22px); + min-width: clamp(75px, 10vw, 95px); + } + + .score-label { + font-size: clamp(9px, 1.2vw, 11px); + } + + .score-value { + font-size: clamp(20px, 2.8vw, 25px); + } + + /* Top Controls */ + .top-controls { + top: clamp(8px, 1.5vh, 14px); + right: clamp(8px, 1.5vw, 14px); + gap: clamp(6px, 1.2vw, 10px); + } + + .sound-controls { + top: clamp(8px, 1.5vh, 14px); + left: clamp(8px, 1.5vw, 14px); + gap: clamp(6px, 1.2vw, 10px); + flex-direction: column; + } + + .icon-btn { + width: clamp(32px, 5.5vw, 42px); + height: clamp(32px, 5.5vw, 42px); + } + + .icon-btn svg { + width: clamp(16px, 2.8vw, 22px); + height: clamp(16px, 2.8vw, 22px); + } + + .btn-sound { + width: clamp(32px, 5.5vw, 42px); + height: clamp(32px, 5.5vw, 42px); + } + + .btn-sound svg { + width: clamp(16px, 2.8vw, 22px); + height: clamp(16px, 2.8vw, 22px); + } + + /* Board */ + #board { + max-width: min(90vmin, 100%); + padding: clamp(8px, 1.8vmin, 14px); + gap: clamp(5px, 1vmin, 10px); + border-radius: 16px; + } + + /* Tiles */ + .tile { + font-size: clamp(18px, 3.2vmin, 28px); + border-radius: clamp(6px, 1.5vmin, 12px); + } + + /* Touch Hint */ + .touch-hint { + display: block !important; + } + + /* Tutorial Modal */ + .tutorial-modal { + padding: 35px 30px; + max-width: 90%; + } + + .tutorial-title { + font-size: 26px; + margin-bottom: 25px; + } + + .tutorial-content { + gap: 25px; + } + + .tutorial-section h3 { + font-size: 16px; + margin-bottom: 12px; + } + + /* PC Controls - Hide on Mobile */ + .pc-controls { + display: none !important; + } + + /* Mobile Controls - Show on Mobile */ + .mobile-controls { + display: block !important; + } + + .keys-container { + gap: clamp(15px, 4vw, 30px); + } + + .keys-separator { + font-size: clamp(12px, 2vw, 16px); + } + + .key-box { + width: clamp(36px, 6vw, 46px); + height: clamp(36px, 6vw, 46px); + font-size: clamp(15px, 2.5vw, 20px); + } + + .key-empty { + width: clamp(36px, 6vw, 46px); + height: clamp(36px, 6vw, 46px); + } + + .keys-label { + font-size: clamp(11px, 1.6vw, 13px); + } + + .swipe-icon { + font-size: 40px; + } + + .swipe-demo p { + font-size: 13px; + } + + .objective-text { + font-size: 14px; + } + + .modal-close { + width: 32px; + height: 32px; + top: 12px; + right: 12px; + } + + .modal-close svg { + width: 18px; + height: 18px; + } + + /* Game Over Modal */ + .game-over-modal { + padding: 40px 28px 35px; + max-width: 90%; + } + + .game-over-close { + width: 34px; + height: 34px; + top: 14px; + right: 14px; + } + + .game-over-close svg { + width: 18px; + height: 18px; + } + + .game-over-title { + font-size: clamp(28px, 4.5vw, 36px); + margin-bottom: 10px; + } + + .game-over-subtitle { + font-size: 13px; + margin-bottom: 30px; + } + + .game-over-score { + margin-bottom: 32px; + } + + .game-over-score-label { + font-size: 10px; + margin-bottom: 12px; + } + + .game-over-score-value { + font-size: clamp(46px, 7.5vw, 60px); + margin-bottom: 8px; + } + + .new-high-score { + padding: 10px 22px; + font-size: 12px; + margin-top: 15px; + } + + .high-score-display { + margin-top: 24px; + padding-top: 24px; + } + + .high-score-label { + font-size: 10px; + margin-bottom: 8px; + } + + .high-score-value { + font-size: clamp(30px, 4.5vw, 38px); + } + + .game-over-buttons { + gap: 10px; + margin-top: 35px; + } + + .btn-game-icon { + width: clamp(62px, 14vw, 72px); + height: clamp(62px, 14vw, 72px); + border-radius: 16px; + } + + .btn-game-icon svg { + width: clamp(28px, 5.5vw, 34px); + height: clamp(28px, 5.5vw, 34px); + } + + /* Sound Control */ + .sound-control-container { + top: clamp(8px, 1.5vh, 14px); + left: clamp(8px, 1.5vw, 14px); + gap: 10px; + } + + .btn-sound-main { + width: clamp(36px, 6vw, 46px); + height: clamp(36px, 6vw, 46px); + } + + .btn-sound-main svg { + width: clamp(18px, 3.2vw, 24px); + height: clamp(18px, 3.2vw, 24px); + } + + .volume-panel { + min-width: clamp(200px, 45vw, 240px); + padding: 16px 14px; + } + + .volume-item { + margin-bottom: 14px; + } + + .volume-label { + font-size: 12px; + } + + .volume-value { + font-size: 11px; + } + + .volume-icon { + width: 16px; + height: 16px; + } +} \ No newline at end of file