-
Keep going
-
Try again
+
+
+
+
+
+
+
+
+
+ Dark Mode
+
+
+
+ Join the numbers and get to the 2048 tile!
+
+
New Game
+
-
-
-
-
- How to play: Use your arrow keys to move the tiles. When two tiles with the same number touch, they merge into one!
-
-
-
- Note: This site is the official version of 2048. You can play it on your phone via http://git.io/2048. All other apps or sites are derivatives or fakes, and should be used with caution.
-
-
-
- Created by Gabriele Cirulli. Based on 1024 by Veewo Studio and conceptually similar to Threes by Asher Vollmer.
-
-
+
+ How to play: Use your
+ arrow keys to move the tiles. When two tiles with the
+ same number touch, they merge into one!
+
+
+
+ Note: This site is the official
+ version of 2048. You can play it on your phone via
+ http://git.io/2048. All other apps or
+ sites are derivatives or fakes, and should be used with caution.
+
+
+
+ Created by
+ Gabriele Cirulli.
+ Based on
+ 1024 by Veewo Studio
+ and conceptually similar to
+ Threes by Asher Vollmer.
+
+
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
diff --git a/js/dark-mode-toggle.js b/js/dark-mode-toggle.js
new file mode 100644
index 0000000000..0fab3117cd
--- /dev/null
+++ b/js/dark-mode-toggle.js
@@ -0,0 +1,39 @@
+// Add dark mode toggle functionality to the page
+document.addEventListener("DOMContentLoaded", function () {
+ const darkModeToggle = document.getElementById("dark-mode-toggle");
+ const darkModeIcon = document.getElementById("dark-mode-icon");
+ const darkModeText = document.getElementById("dark-mode-text");
+
+ // Function to apply dark mode
+ function applyDarkMode() {
+ document.documentElement.classList.add("dark-mode");
+ document.body.classList.add("dark-mode");
+ darkModeIcon.classList.replace("fa-moon", "fa-sun");
+ darkModeText.textContent = "Light Mode";
+ }
+
+ // Function to apply light mode
+ function applyLightMode() {
+ document.documentElement.classList.remove("dark-mode");
+ document.body.classList.remove("dark-mode");
+ darkModeIcon.classList.replace("fa-sun", "fa-moon");
+ darkModeText.textContent = "Dark Mode";
+ }
+
+ // Check and apply the current mode from localStorage
+ const currentMode = localStorage.getItem("darkMode");
+ if (currentMode === "enabled") {
+ applyDarkMode();
+ }
+
+ // Toggle dark mode on button click
+ darkModeToggle.addEventListener("click", function () {
+ if (document.documentElement.classList.contains("dark-mode")) {
+ applyLightMode();
+ localStorage.setItem("darkMode", "disabled");
+ } else {
+ applyDarkMode();
+ localStorage.setItem("darkMode", "enabled");
+ }
+ });
+});
diff --git a/style/main.css b/style/main.css
index ea3cb19fca..fb09e6ddec 100644
--- a/style/main.css
+++ b/style/main.css
@@ -1,56 +1,72 @@
@import url(fonts/clear-sans.css);
-html, body {
+html,
+body {
margin: 0;
padding: 0;
background: #faf8ef;
color: #776e65;
font-family: "Clear Sans", "Helvetica Neue", Arial, sans-serif;
- font-size: 18px; }
+ font-size: 18px;
+}
body {
- margin: 80px 0; }
+ margin: 80px 0;
+}
.heading:after {
content: "";
display: block;
- clear: both; }
+ clear: both;
+}
h1.title {
font-size: 80px;
font-weight: bold;
margin: 0;
display: block;
- float: left; }
+ float: left;
+}
@-webkit-keyframes move-up {
0% {
top: 25px;
- opacity: 1; }
+ opacity: 1;
+ }
100% {
top: -50px;
- opacity: 0; } }
+ opacity: 0;
+ }
+}
@-moz-keyframes move-up {
0% {
top: 25px;
- opacity: 1; }
+ opacity: 1;
+ }
100% {
top: -50px;
- opacity: 0; } }
+ opacity: 0;
+ }
+}
@keyframes move-up {
0% {
top: 25px;
- opacity: 1; }
+ opacity: 1;
+ }
100% {
top: -50px;
- opacity: 0; } }
+ opacity: 0;
+ }
+}
.scores-container {
float: right;
- text-align: right; }
+ text-align: right;
+}
-.score-container, .best-container {
+.score-container,
+.best-container {
position: relative;
display: inline-block;
background: #bbada0;
@@ -62,81 +78,102 @@ h1.title {
border-radius: 3px;
color: white;
margin-top: 8px;
- text-align: center; }
- .score-container:after, .best-container:after {
- position: absolute;
- width: 100%;
- top: 10px;
- left: 0;
- text-transform: uppercase;
- font-size: 13px;
- line-height: 13px;
- text-align: center;
- color: #eee4da; }
- .score-container .score-addition, .best-container .score-addition {
- position: absolute;
- right: 30px;
- color: red;
- font-size: 25px;
- line-height: 25px;
- font-weight: bold;
- color: rgba(119, 110, 101, 0.9);
- z-index: 100;
- -webkit-animation: move-up 600ms ease-in;
- -moz-animation: move-up 600ms ease-in;
- animation: move-up 600ms ease-in;
- -webkit-animation-fill-mode: both;
- -moz-animation-fill-mode: both;
- animation-fill-mode: both; }
+ text-align: center;
+}
+.score-container:after,
+.best-container:after {
+ position: absolute;
+ width: 100%;
+ top: 10px;
+ left: 0;
+ text-transform: uppercase;
+ font-size: 13px;
+ line-height: 13px;
+ text-align: center;
+ color: #eee4da;
+}
+.score-container .score-addition,
+.best-container .score-addition {
+ position: absolute;
+ right: 30px;
+ color: red;
+ font-size: 25px;
+ line-height: 25px;
+ font-weight: bold;
+ color: rgba(119, 110, 101, 0.9);
+ z-index: 100;
+ -webkit-animation: move-up 600ms ease-in;
+ -moz-animation: move-up 600ms ease-in;
+ animation: move-up 600ms ease-in;
+ -webkit-animation-fill-mode: both;
+ -moz-animation-fill-mode: both;
+ animation-fill-mode: both;
+}
.score-container:after {
- content: "Score"; }
+ content: "Score";
+}
.best-container:after {
- content: "Best"; }
+ content: "Best";
+}
p {
margin-top: 0;
margin-bottom: 10px;
- line-height: 1.65; }
+ line-height: 1.65;
+}
a {
color: #776e65;
font-weight: bold;
text-decoration: underline;
- cursor: pointer; }
+ cursor: pointer;
+}
strong.important {
- text-transform: uppercase; }
+ text-transform: uppercase;
+}
hr {
border: none;
border-bottom: 1px solid #d8d4d0;
margin-top: 20px;
- margin-bottom: 30px; }
+ margin-bottom: 30px;
+}
.container {
width: 500px;
- margin: 0 auto; }
+ margin: 0 auto;
+}
@-webkit-keyframes fade-in {
0% {
- opacity: 0; }
+ opacity: 0;
+ }
100% {
- opacity: 1; } }
+ opacity: 1;
+ }
+}
@-moz-keyframes fade-in {
0% {
- opacity: 0; }
+ opacity: 0;
+ }
100% {
- opacity: 1; } }
+ opacity: 1;
+ }
+}
@keyframes fade-in {
0% {
- opacity: 0; }
+ opacity: 0;
+ }
100% {
- opacity: 1; } }
+ opacity: 1;
+ }
+}
.game-container {
margin-top: 40px;
position: relative;
@@ -155,64 +192,78 @@ hr {
height: 500px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
- box-sizing: border-box; }
- .game-container .game-message {
- display: none;
- position: absolute;
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
- background: rgba(238, 228, 218, 0.5);
- z-index: 100;
- text-align: center;
- -webkit-animation: fade-in 800ms ease 1200ms;
- -moz-animation: fade-in 800ms ease 1200ms;
- animation: fade-in 800ms ease 1200ms;
- -webkit-animation-fill-mode: both;
- -moz-animation-fill-mode: both;
- animation-fill-mode: both; }
- .game-container .game-message p {
- font-size: 60px;
- font-weight: bold;
- height: 60px;
- line-height: 60px;
- margin-top: 222px; }
- .game-container .game-message .lower {
- display: block;
- margin-top: 59px; }
- .game-container .game-message a {
- display: inline-block;
- background: #8f7a66;
- border-radius: 3px;
- padding: 0 20px;
- text-decoration: none;
- color: #f9f6f2;
- height: 40px;
- line-height: 42px;
- margin-left: 9px; }
- .game-container .game-message a.keep-playing-button {
- display: none; }
- .game-container .game-message.game-won {
- background: rgba(237, 194, 46, 0.5);
- color: #f9f6f2; }
- .game-container .game-message.game-won a.keep-playing-button {
- display: inline-block; }
- .game-container .game-message.game-won, .game-container .game-message.game-over {
- display: block; }
+ box-sizing: border-box;
+}
+.game-container .game-message {
+ display: none;
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ background: rgba(238, 228, 218, 0.5);
+ z-index: 100;
+ text-align: center;
+ -webkit-animation: fade-in 800ms ease 1200ms;
+ -moz-animation: fade-in 800ms ease 1200ms;
+ animation: fade-in 800ms ease 1200ms;
+ -webkit-animation-fill-mode: both;
+ -moz-animation-fill-mode: both;
+ animation-fill-mode: both;
+}
+.game-container .game-message p {
+ font-size: 60px;
+ font-weight: bold;
+ height: 60px;
+ line-height: 60px;
+ margin-top: 222px;
+}
+.game-container .game-message .lower {
+ display: block;
+ margin-top: 59px;
+}
+.game-container .game-message a {
+ display: inline-block;
+ background: #8f7a66;
+ border-radius: 3px;
+ padding: 0 20px;
+ text-decoration: none;
+ color: #f9f6f2;
+ height: 40px;
+ line-height: 42px;
+ margin-left: 9px;
+}
+.game-container .game-message a.keep-playing-button {
+ display: none;
+}
+.game-container .game-message.game-won {
+ background: rgba(237, 194, 46, 0.5);
+ color: #f9f6f2;
+}
+.game-container .game-message.game-won a.keep-playing-button {
+ display: inline-block;
+}
+.game-container .game-message.game-won,
+.game-container .game-message.game-over {
+ display: block;
+}
.grid-container {
position: absolute;
- z-index: 1; }
+ z-index: 1;
+}
.grid-row {
- margin-bottom: 15px; }
- .grid-row:last-child {
- margin-bottom: 0; }
- .grid-row:after {
- content: "";
- display: block;
- clear: both; }
+ margin-bottom: 15px;
+}
+.grid-row:last-child {
+ margin-bottom: 0;
+}
+.grid-row:after {
+ content: "";
+ display: block;
+ clear: both;
+}
.grid-cell {
width: 106.25px;
@@ -220,98 +271,119 @@ hr {
margin-right: 15px;
float: left;
border-radius: 3px;
- background: rgba(238, 228, 218, 0.35); }
- .grid-cell:last-child {
- margin-right: 0; }
+ background: rgba(238, 228, 218, 0.35);
+}
+.grid-cell:last-child {
+ margin-right: 0;
+}
.tile-container {
position: absolute;
- z-index: 2; }
+ z-index: 2;
+}
-.tile, .tile .tile-inner {
+.tile,
+.tile .tile-inner {
width: 107px;
height: 107px;
- line-height: 107px; }
+ line-height: 107px;
+}
.tile.tile-position-1-1 {
-webkit-transform: translate(0px, 0px);
-moz-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
- transform: translate(0px, 0px); }
+ transform: translate(0px, 0px);
+}
.tile.tile-position-1-2 {
-webkit-transform: translate(0px, 121px);
-moz-transform: translate(0px, 121px);
-ms-transform: translate(0px, 121px);
- transform: translate(0px, 121px); }
+ transform: translate(0px, 121px);
+}
.tile.tile-position-1-3 {
-webkit-transform: translate(0px, 242px);
-moz-transform: translate(0px, 242px);
-ms-transform: translate(0px, 242px);
- transform: translate(0px, 242px); }
+ transform: translate(0px, 242px);
+}
.tile.tile-position-1-4 {
-webkit-transform: translate(0px, 363px);
-moz-transform: translate(0px, 363px);
-ms-transform: translate(0px, 363px);
- transform: translate(0px, 363px); }
+ transform: translate(0px, 363px);
+}
.tile.tile-position-2-1 {
-webkit-transform: translate(121px, 0px);
-moz-transform: translate(121px, 0px);
-ms-transform: translate(121px, 0px);
- transform: translate(121px, 0px); }
+ transform: translate(121px, 0px);
+}
.tile.tile-position-2-2 {
-webkit-transform: translate(121px, 121px);
-moz-transform: translate(121px, 121px);
-ms-transform: translate(121px, 121px);
- transform: translate(121px, 121px); }
+ transform: translate(121px, 121px);
+}
.tile.tile-position-2-3 {
-webkit-transform: translate(121px, 242px);
-moz-transform: translate(121px, 242px);
-ms-transform: translate(121px, 242px);
- transform: translate(121px, 242px); }
+ transform: translate(121px, 242px);
+}
.tile.tile-position-2-4 {
-webkit-transform: translate(121px, 363px);
-moz-transform: translate(121px, 363px);
-ms-transform: translate(121px, 363px);
- transform: translate(121px, 363px); }
+ transform: translate(121px, 363px);
+}
.tile.tile-position-3-1 {
-webkit-transform: translate(242px, 0px);
-moz-transform: translate(242px, 0px);
-ms-transform: translate(242px, 0px);
- transform: translate(242px, 0px); }
+ transform: translate(242px, 0px);
+}
.tile.tile-position-3-2 {
-webkit-transform: translate(242px, 121px);
-moz-transform: translate(242px, 121px);
-ms-transform: translate(242px, 121px);
- transform: translate(242px, 121px); }
+ transform: translate(242px, 121px);
+}
.tile.tile-position-3-3 {
-webkit-transform: translate(242px, 242px);
-moz-transform: translate(242px, 242px);
-ms-transform: translate(242px, 242px);
- transform: translate(242px, 242px); }
+ transform: translate(242px, 242px);
+}
.tile.tile-position-3-4 {
-webkit-transform: translate(242px, 363px);
-moz-transform: translate(242px, 363px);
-ms-transform: translate(242px, 363px);
- transform: translate(242px, 363px); }
+ transform: translate(242px, 363px);
+}
.tile.tile-position-4-1 {
-webkit-transform: translate(363px, 0px);
-moz-transform: translate(363px, 0px);
-ms-transform: translate(363px, 0px);
- transform: translate(363px, 0px); }
+ transform: translate(363px, 0px);
+}
.tile.tile-position-4-2 {
-webkit-transform: translate(363px, 121px);
-moz-transform: translate(363px, 121px);
-ms-transform: translate(363px, 121px);
- transform: translate(363px, 121px); }
+ transform: translate(363px, 121px);
+}
.tile.tile-position-4-3 {
-webkit-transform: translate(363px, 242px);
-moz-transform: translate(363px, 242px);
-ms-transform: translate(363px, 242px);
- transform: translate(363px, 242px); }
+ transform: translate(363px, 242px);
+}
.tile.tile-position-4-4 {
-webkit-transform: translate(363px, 363px);
-moz-transform: translate(363px, 363px);
-ms-transform: translate(363px, 363px);
- transform: translate(363px, 363px); }
+ transform: translate(363px, 363px);
+}
.tile {
position: absolute;
@@ -320,79 +392,112 @@ hr {
transition: 100ms ease-in-out;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
- transition-property: transform; }
- .tile .tile-inner {
- border-radius: 3px;
- background: #eee4da;
- text-align: center;
- font-weight: bold;
- z-index: 10;
- font-size: 55px; }
- .tile.tile-2 .tile-inner {
- background: #eee4da;
- box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0), inset 0 0 0 1px rgba(255, 255, 255, 0); }
- .tile.tile-4 .tile-inner {
- background: #ede0c8;
- box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0), inset 0 0 0 1px rgba(255, 255, 255, 0); }
- .tile.tile-8 .tile-inner {
- color: #f9f6f2;
- background: #f2b179; }
- .tile.tile-16 .tile-inner {
- color: #f9f6f2;
- background: #f59563; }
- .tile.tile-32 .tile-inner {
- color: #f9f6f2;
- background: #f67c5f; }
- .tile.tile-64 .tile-inner {
- color: #f9f6f2;
- background: #f65e3b; }
+ transition-property: transform;
+}
+.tile .tile-inner {
+ border-radius: 3px;
+ background: #eee4da;
+ text-align: center;
+ font-weight: bold;
+ z-index: 10;
+ font-size: 55px;
+}
+.tile.tile-2 .tile-inner {
+ background: #eee4da;
+ box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0),
+ inset 0 0 0 1px rgba(255, 255, 255, 0);
+}
+.tile.tile-4 .tile-inner {
+ background: #ede0c8;
+ box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0),
+ inset 0 0 0 1px rgba(255, 255, 255, 0);
+}
+.tile.tile-8 .tile-inner {
+ color: #f9f6f2;
+ background: #f2b179;
+}
+.tile.tile-16 .tile-inner {
+ color: #f9f6f2;
+ background: #f59563;
+}
+.tile.tile-32 .tile-inner {
+ color: #f9f6f2;
+ background: #f67c5f;
+}
+.tile.tile-64 .tile-inner {
+ color: #f9f6f2;
+ background: #f65e3b;
+}
+.tile.tile-128 .tile-inner {
+ color: #f9f6f2;
+ background: #edcf72;
+ box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.2381),
+ inset 0 0 0 1px rgba(255, 255, 255, 0.14286);
+ font-size: 45px;
+}
+@media screen and (max-width: 520px) {
.tile.tile-128 .tile-inner {
- color: #f9f6f2;
- background: #edcf72;
- box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.2381), inset 0 0 0 1px rgba(255, 255, 255, 0.14286);
- font-size: 45px; }
- @media screen and (max-width: 520px) {
- .tile.tile-128 .tile-inner {
- font-size: 25px; } }
+ font-size: 25px;
+ }
+}
+.tile.tile-256 .tile-inner {
+ color: #f9f6f2;
+ background: #edcc61;
+ box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.31746),
+ inset 0 0 0 1px rgba(255, 255, 255, 0.19048);
+ font-size: 45px;
+}
+@media screen and (max-width: 520px) {
.tile.tile-256 .tile-inner {
- color: #f9f6f2;
- background: #edcc61;
- box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.31746), inset 0 0 0 1px rgba(255, 255, 255, 0.19048);
- font-size: 45px; }
- @media screen and (max-width: 520px) {
- .tile.tile-256 .tile-inner {
- font-size: 25px; } }
+ font-size: 25px;
+ }
+}
+.tile.tile-512 .tile-inner {
+ color: #f9f6f2;
+ background: #edc850;
+ box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.39683),
+ inset 0 0 0 1px rgba(255, 255, 255, 0.2381);
+ font-size: 45px;
+}
+@media screen and (max-width: 520px) {
.tile.tile-512 .tile-inner {
- color: #f9f6f2;
- background: #edc850;
- box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.39683), inset 0 0 0 1px rgba(255, 255, 255, 0.2381);
- font-size: 45px; }
- @media screen and (max-width: 520px) {
- .tile.tile-512 .tile-inner {
- font-size: 25px; } }
+ font-size: 25px;
+ }
+}
+.tile.tile-1024 .tile-inner {
+ color: #f9f6f2;
+ background: #edc53f;
+ box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.47619),
+ inset 0 0 0 1px rgba(255, 255, 255, 0.28571);
+ font-size: 35px;
+}
+@media screen and (max-width: 520px) {
.tile.tile-1024 .tile-inner {
- color: #f9f6f2;
- background: #edc53f;
- box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.47619), inset 0 0 0 1px rgba(255, 255, 255, 0.28571);
- font-size: 35px; }
- @media screen and (max-width: 520px) {
- .tile.tile-1024 .tile-inner {
- font-size: 15px; } }
+ font-size: 15px;
+ }
+}
+.tile.tile-2048 .tile-inner {
+ color: #f9f6f2;
+ background: #edc22e;
+ box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.55556),
+ inset 0 0 0 1px rgba(255, 255, 255, 0.33333);
+ font-size: 35px;
+}
+@media screen and (max-width: 520px) {
.tile.tile-2048 .tile-inner {
- color: #f9f6f2;
- background: #edc22e;
- box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.55556), inset 0 0 0 1px rgba(255, 255, 255, 0.33333);
- font-size: 35px; }
- @media screen and (max-width: 520px) {
- .tile.tile-2048 .tile-inner {
- font-size: 15px; } }
+ font-size: 15px;
+ }
+}
+.tile.tile-super .tile-inner {
+ color: #f9f6f2;
+ background: #3c3a32;
+ font-size: 30px;
+}
+@media screen and (max-width: 520px) {
.tile.tile-super .tile-inner {
- color: #f9f6f2;
- background: #3c3a32;
- font-size: 30px; }
- @media screen and (max-width: 520px) {
- .tile.tile-super .tile-inner {
- font-size: 10px; } }
+ font-size: 10px;
+ }
+}
@-webkit-keyframes appear {
0% {
@@ -400,104 +505,126 @@ hr {
-webkit-transform: scale(0);
-moz-transform: scale(0);
-ms-transform: scale(0);
- transform: scale(0); }
+ transform: scale(0);
+ }
100% {
opacity: 1;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
- transform: scale(1); } }
+ transform: scale(1);
+ }
+}
@-moz-keyframes appear {
0% {
opacity: 0;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-ms-transform: scale(0);
- transform: scale(0); }
+ transform: scale(0);
+ }
100% {
opacity: 1;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
- transform: scale(1); } }
+ transform: scale(1);
+ }
+}
@keyframes appear {
0% {
opacity: 0;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-ms-transform: scale(0);
- transform: scale(0); }
+ transform: scale(0);
+ }
100% {
opacity: 1;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
- transform: scale(1); } }
+ transform: scale(1);
+ }
+}
.tile-new .tile-inner {
-webkit-animation: appear 200ms ease 100ms;
-moz-animation: appear 200ms ease 100ms;
animation: appear 200ms ease 100ms;
-webkit-animation-fill-mode: backwards;
-moz-animation-fill-mode: backwards;
- animation-fill-mode: backwards; }
+ animation-fill-mode: backwards;
+}
@-webkit-keyframes pop {
0% {
-webkit-transform: scale(0);
-moz-transform: scale(0);
-ms-transform: scale(0);
- transform: scale(0); }
+ transform: scale(0);
+ }
50% {
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-ms-transform: scale(1.2);
- transform: scale(1.2); }
+ transform: scale(1.2);
+ }
100% {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
- transform: scale(1); } }
+ transform: scale(1);
+ }
+}
@-moz-keyframes pop {
0% {
-webkit-transform: scale(0);
-moz-transform: scale(0);
-ms-transform: scale(0);
- transform: scale(0); }
+ transform: scale(0);
+ }
50% {
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-ms-transform: scale(1.2);
- transform: scale(1.2); }
+ transform: scale(1.2);
+ }
100% {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
- transform: scale(1); } }
+ transform: scale(1);
+ }
+}
@keyframes pop {
0% {
-webkit-transform: scale(0);
-moz-transform: scale(0);
-ms-transform: scale(0);
- transform: scale(0); }
+ transform: scale(0);
+ }
50% {
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-ms-transform: scale(1.2);
- transform: scale(1.2); }
+ transform: scale(1.2);
+ }
100% {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
- transform: scale(1); } }
+ transform: scale(1);
+ }
+}
.tile-merged .tile-inner {
z-index: 20;
-webkit-animation: pop 200ms ease 100ms;
@@ -505,17 +632,20 @@ hr {
animation: pop 200ms ease 100ms;
-webkit-animation-fill-mode: backwards;
-moz-animation-fill-mode: backwards;
- animation-fill-mode: backwards; }
+ animation-fill-mode: backwards;
+}
.above-game:after {
content: "";
display: block;
- clear: both; }
+ clear: both;
+}
.game-intro {
float: left;
line-height: 42px;
- margin-bottom: 0; }
+ margin-bottom: 0;
+}
.restart-button {
display: inline-block;
@@ -528,47 +658,59 @@ hr {
line-height: 42px;
display: block;
text-align: center;
- float: right; }
+ float: right;
+}
.game-explanation {
- margin-top: 50px; }
+ margin-top: 50px;
+}
@media screen and (max-width: 520px) {
- html, body {
- font-size: 15px; }
+ html,
+ body {
+ font-size: 15px;
+ }
body {
margin: 20px 0;
- padding: 0 20px; }
+ padding: 0 20px;
+ }
h1.title {
font-size: 27px;
- margin-top: 15px; }
+ margin-top: 15px;
+ }
.container {
width: 280px;
- margin: 0 auto; }
+ margin: 0 auto;
+ }
- .score-container, .best-container {
+ .score-container,
+ .best-container {
margin-top: 0;
padding: 15px 10px;
- min-width: 40px; }
+ min-width: 40px;
+ }
.heading {
- margin-bottom: 10px; }
+ margin-bottom: 10px;
+ }
.game-intro {
width: 55%;
display: block;
box-sizing: border-box;
- line-height: 1.65; }
+ line-height: 1.65;
+ }
.restart-button {
width: 42%;
padding: 0;
display: block;
box-sizing: border-box;
- margin-top: 2px; }
+ margin-top: 2px;
+ }
.game-container {
margin-top: 17px;
@@ -588,64 +730,78 @@ hr {
height: 280px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
- box-sizing: border-box; }
- .game-container .game-message {
- display: none;
- position: absolute;
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
- background: rgba(238, 228, 218, 0.5);
- z-index: 100;
- text-align: center;
- -webkit-animation: fade-in 800ms ease 1200ms;
- -moz-animation: fade-in 800ms ease 1200ms;
- animation: fade-in 800ms ease 1200ms;
- -webkit-animation-fill-mode: both;
- -moz-animation-fill-mode: both;
- animation-fill-mode: both; }
- .game-container .game-message p {
- font-size: 60px;
- font-weight: bold;
- height: 60px;
- line-height: 60px;
- margin-top: 222px; }
- .game-container .game-message .lower {
- display: block;
- margin-top: 59px; }
- .game-container .game-message a {
- display: inline-block;
- background: #8f7a66;
- border-radius: 3px;
- padding: 0 20px;
- text-decoration: none;
- color: #f9f6f2;
- height: 40px;
- line-height: 42px;
- margin-left: 9px; }
- .game-container .game-message a.keep-playing-button {
- display: none; }
- .game-container .game-message.game-won {
- background: rgba(237, 194, 46, 0.5);
- color: #f9f6f2; }
- .game-container .game-message.game-won a.keep-playing-button {
- display: inline-block; }
- .game-container .game-message.game-won, .game-container .game-message.game-over {
- display: block; }
+ box-sizing: border-box;
+ }
+ .game-container .game-message {
+ display: none;
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ background: rgba(238, 228, 218, 0.5);
+ z-index: 100;
+ text-align: center;
+ -webkit-animation: fade-in 800ms ease 1200ms;
+ -moz-animation: fade-in 800ms ease 1200ms;
+ animation: fade-in 800ms ease 1200ms;
+ -webkit-animation-fill-mode: both;
+ -moz-animation-fill-mode: both;
+ animation-fill-mode: both;
+ }
+ .game-container .game-message p {
+ font-size: 60px;
+ font-weight: bold;
+ height: 60px;
+ line-height: 60px;
+ margin-top: 222px;
+ }
+ .game-container .game-message .lower {
+ display: block;
+ margin-top: 59px;
+ }
+ .game-container .game-message a {
+ display: inline-block;
+ background: #8f7a66;
+ border-radius: 3px;
+ padding: 0 20px;
+ text-decoration: none;
+ color: #f9f6f2;
+ height: 40px;
+ line-height: 42px;
+ margin-left: 9px;
+ }
+ .game-container .game-message a.keep-playing-button {
+ display: none;
+ }
+ .game-container .game-message.game-won {
+ background: rgba(237, 194, 46, 0.5);
+ color: #f9f6f2;
+ }
+ .game-container .game-message.game-won a.keep-playing-button {
+ display: inline-block;
+ }
+ .game-container .game-message.game-won,
+ .game-container .game-message.game-over {
+ display: block;
+ }
.grid-container {
position: absolute;
- z-index: 1; }
+ z-index: 1;
+ }
.grid-row {
- margin-bottom: 10px; }
- .grid-row:last-child {
- margin-bottom: 0; }
- .grid-row:after {
- content: "";
- display: block;
- clear: both; }
+ margin-bottom: 10px;
+ }
+ .grid-row:last-child {
+ margin-bottom: 0;
+ }
+ .grid-row:after {
+ content: "";
+ display: block;
+ clear: both;
+ }
.grid-cell {
width: 57.5px;
@@ -653,106 +809,182 @@ hr {
margin-right: 10px;
float: left;
border-radius: 3px;
- background: rgba(238, 228, 218, 0.35); }
- .grid-cell:last-child {
- margin-right: 0; }
+ background: rgba(238, 228, 218, 0.35);
+ }
+ .grid-cell:last-child {
+ margin-right: 0;
+ }
.tile-container {
position: absolute;
- z-index: 2; }
+ z-index: 2;
+ }
- .tile, .tile .tile-inner {
+ .tile,
+ .tile .tile-inner {
width: 58px;
height: 58px;
- line-height: 58px; }
+ line-height: 58px;
+ }
.tile.tile-position-1-1 {
-webkit-transform: translate(0px, 0px);
-moz-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
- transform: translate(0px, 0px); }
+ transform: translate(0px, 0px);
+ }
.tile.tile-position-1-2 {
-webkit-transform: translate(0px, 67px);
-moz-transform: translate(0px, 67px);
-ms-transform: translate(0px, 67px);
- transform: translate(0px, 67px); }
+ transform: translate(0px, 67px);
+ }
.tile.tile-position-1-3 {
-webkit-transform: translate(0px, 135px);
-moz-transform: translate(0px, 135px);
-ms-transform: translate(0px, 135px);
- transform: translate(0px, 135px); }
+ transform: translate(0px, 135px);
+ }
.tile.tile-position-1-4 {
-webkit-transform: translate(0px, 202px);
-moz-transform: translate(0px, 202px);
-ms-transform: translate(0px, 202px);
- transform: translate(0px, 202px); }
+ transform: translate(0px, 202px);
+ }
.tile.tile-position-2-1 {
-webkit-transform: translate(67px, 0px);
-moz-transform: translate(67px, 0px);
-ms-transform: translate(67px, 0px);
- transform: translate(67px, 0px); }
+ transform: translate(67px, 0px);
+ }
.tile.tile-position-2-2 {
-webkit-transform: translate(67px, 67px);
-moz-transform: translate(67px, 67px);
-ms-transform: translate(67px, 67px);
- transform: translate(67px, 67px); }
+ transform: translate(67px, 67px);
+ }
.tile.tile-position-2-3 {
-webkit-transform: translate(67px, 135px);
-moz-transform: translate(67px, 135px);
-ms-transform: translate(67px, 135px);
- transform: translate(67px, 135px); }
+ transform: translate(67px, 135px);
+ }
.tile.tile-position-2-4 {
-webkit-transform: translate(67px, 202px);
-moz-transform: translate(67px, 202px);
-ms-transform: translate(67px, 202px);
- transform: translate(67px, 202px); }
+ transform: translate(67px, 202px);
+ }
.tile.tile-position-3-1 {
-webkit-transform: translate(135px, 0px);
-moz-transform: translate(135px, 0px);
-ms-transform: translate(135px, 0px);
- transform: translate(135px, 0px); }
+ transform: translate(135px, 0px);
+ }
.tile.tile-position-3-2 {
-webkit-transform: translate(135px, 67px);
-moz-transform: translate(135px, 67px);
-ms-transform: translate(135px, 67px);
- transform: translate(135px, 67px); }
+ transform: translate(135px, 67px);
+ }
.tile.tile-position-3-3 {
-webkit-transform: translate(135px, 135px);
-moz-transform: translate(135px, 135px);
-ms-transform: translate(135px, 135px);
- transform: translate(135px, 135px); }
+ transform: translate(135px, 135px);
+ }
.tile.tile-position-3-4 {
-webkit-transform: translate(135px, 202px);
-moz-transform: translate(135px, 202px);
-ms-transform: translate(135px, 202px);
- transform: translate(135px, 202px); }
+ transform: translate(135px, 202px);
+ }
.tile.tile-position-4-1 {
-webkit-transform: translate(202px, 0px);
-moz-transform: translate(202px, 0px);
-ms-transform: translate(202px, 0px);
- transform: translate(202px, 0px); }
+ transform: translate(202px, 0px);
+ }
.tile.tile-position-4-2 {
-webkit-transform: translate(202px, 67px);
-moz-transform: translate(202px, 67px);
-ms-transform: translate(202px, 67px);
- transform: translate(202px, 67px); }
+ transform: translate(202px, 67px);
+ }
.tile.tile-position-4-3 {
-webkit-transform: translate(202px, 135px);
-moz-transform: translate(202px, 135px);
-ms-transform: translate(202px, 135px);
- transform: translate(202px, 135px); }
+ transform: translate(202px, 135px);
+ }
.tile.tile-position-4-4 {
-webkit-transform: translate(202px, 202px);
-moz-transform: translate(202px, 202px);
-ms-transform: translate(202px, 202px);
- transform: translate(202px, 202px); }
+ transform: translate(202px, 202px);
+ }
.tile .tile-inner {
- font-size: 35px; }
+ font-size: 35px;
+ }
.game-message p {
font-size: 30px !important;
height: 30px !important;
line-height: 30px !important;
- margin-top: 90px !important; }
+ margin-top: 90px !important;
+ }
.game-message .lower {
- margin-top: 30px !important; } }
+ margin-top: 30px !important;
+ }
+}
+
+/* Dark Mode styles */
+:root {
+ --dark-bg: #333;
+ --dark-text: #fff;
+ --dark-container-bg: #444;
+ --dark-score-bg: #bbada0;
+ --dark-tile-bg: #8f7a66;
+ --dark-tile-text: #776e65;
+ --toggle-bg: #8f7a66;
+ --toggle-hover-bg: #9c8b81;
+}
+
+/* Dark Mode Toggle Button */
+#dark-mode-toggle {
+ margin-top: 20px;
+ padding: 10px 15px;
+ background-color: var(--toggle-bg);
+ color: var(--dark-text);
+ border: none;
+ border-radius: 3px;
+ cursor: pointer;
+ font-size: 18px;
+ outline: none;
+}
+
+#dark-mode-toggle:hover {
+ background-color: var(--toggle-hover-bg);
+}
+
+/* Dark Mode Applied to Page */
+body.dark-mode,
+html.dark-mode {
+ background-color: var(--dark-bg);
+ color: var(--dark-text);
+}
+
+body.dark-mode .container {
+ background-color: var(--dark-container-bg);
+}
+
+body.dark-mode .score-container,
+body.dark-mode .best-container {
+ background-color: var(--dark-score-bg);
+ color: var(--dark-text);
+}
+
+body.dark-mode .tile {
+ background-color: var(--dark-tile-bg);
+ color: var(--dark-tile-text); /* Consistent with light mode */
+}
diff --git a/style/main.scss b/style/main.scss
index b0ec8da9cc..6b6d7a133d 100644
--- a/style/main.scss
+++ b/style/main.scss
@@ -4,12 +4,13 @@
$field-width: 500px;
$grid-spacing: 15px;
$grid-row-cells: 4;
-$tile-size: ($field-width - $grid-spacing * ($grid-row-cells + 1)) / $grid-row-cells;
+$tile-size: ($field-width - $grid-spacing * ($grid-row-cells + 1)) /
+ $grid-row-cells;
$tile-border-radius: 3px;
$mobile-threshold: $field-width + 20px;
-$text-color: #776E65;
+$text-color: #776e65;
$bright-text-color: #f9f6f2;
$tile-color: #eee4da;
@@ -21,7 +22,8 @@ $game-container-background: #bbada0;
$transition-speed: 100ms;
-html, body {
+html,
+body {
margin: 0;
padding: 0;
@@ -64,7 +66,8 @@ h1.title {
text-align: right;
}
-.score-container, .best-container {
+.score-container,
+.best-container {
$height: 25px;
position: relative;
@@ -99,7 +102,7 @@ h1.title {
font-size: $height;
line-height: $height;
font-weight: bold;
- color: rgba($text-color, .9);
+ color: rgba($text-color, 0.9);
z-index: 100;
@include animation(move-up 600ms ease-in);
@include animation-fill-mode(both);
@@ -201,7 +204,7 @@ hr {
right: 0;
bottom: 0;
left: 0;
- background: rgba($tile-color, .5);
+ background: rgba($tile-color, 0.5);
z-index: 100;
text-align: center;
@@ -226,24 +229,25 @@ hr {
margin-left: 9px;
// margin-top: 59px;
- &.keep-playing-button {
- display: none;
- }
+ &.keep-playing-button {
+ display: none;
+ }
}
@include animation(fade-in 800ms ease $transition-speed * 12);
@include animation-fill-mode(both);
&.game-won {
- background: rgba($tile-gold-color, .5);
+ background: rgba($tile-gold-color, 0.5);
color: $bright-text-color;
- a.keep-playing-button {
- display: inline-block;
- }
+ a.keep-playing-button {
+ display: inline-block;
+ }
}
- &.game-won, &.game-over {
+ &.game-won,
+ &.game-over {
display: block;
}
}
@@ -276,7 +280,7 @@ hr {
border-radius: $tile-border-radius;
- background: rgba($tile-color, .35);
+ background: rgba($tile-color, 0.35);
&:last-child {
margin-right: 0;
@@ -289,7 +293,8 @@ hr {
}
.tile {
- &, .tile-inner {
+ &,
+ .tile-inner {
width: ceil($tile-size);
height: ceil($tile-size);
line-height: ceil($tile-size);
@@ -336,17 +341,27 @@ hr {
$limit: 11;
// Colors for all 11 states, false = no special color
- $special-colors: false false, // 2
- false false, // 4
- #f78e48 true, // 8
- #fc5e2e true, // 16
- #ff3333 true, // 32
- #ff0000 true, // 64
- false true, // 128
- false true, // 256
- false true, // 512
- false true, // 1024
- false true; // 2048
+ $special-colors: false false,
+ // 2
+ false false,
+ // 4
+ #f78e48 true,
+ // 8
+ #fc5e2e true,
+ // 16
+ #ff3333 true,
+ // 32
+ #ff0000 true,
+ // 64
+ false true,
+ // 128
+ false true,
+ // 256
+ false true,
+ // 512
+ false true,
+ // 1024
+ false true; // 2048
// Build tile colors
@while $exponent <= $limit {
@@ -377,8 +392,12 @@ hr {
$glow-opacity: max($exponent - 4, 0) / ($limit - 4);
@if not $special-background {
- box-shadow: 0 0 30px 10px rgba($tile-gold-glow-color, $glow-opacity / 1.8),
- inset 0 0 0 1px rgba(white, $glow-opacity / 3);
+ box-shadow: 0
+ 0
+ 30px
+ 10px
+ rgba($tile-gold-glow-color, $glow-opacity / 1.8),
+ inset 0 0 0 1px rgba(white, $glow-opacity / 3);
}
// Adjust font size for bigger numbers
@@ -477,11 +496,13 @@ hr {
$field-width: 280px;
$grid-spacing: 10px;
$grid-row-cells: 4;
- $tile-size: ($field-width - $grid-spacing * ($grid-row-cells + 1)) / $grid-row-cells;
+ $tile-size: ($field-width - $grid-spacing * ($grid-row-cells + 1)) /
+ $grid-row-cells;
$tile-border-radius: 3px;
$game-container-margin-top: 17px;
- html, body {
+ html,
+ body {
font-size: 15px;
}
@@ -500,7 +521,8 @@ hr {
margin: 0 auto;
}
- .score-container, .best-container {
+ .score-container,
+ .best-container {
margin-top: 0;
padding: 15px 10px;
min-width: 40px;