fade tile text to white
[2048.git] / index.html
blob:a/index.html -> blob:b/index.html
--- a/index.html
+++ b/index.html
@@ -5,12 +5,35 @@
   <title>2048</title>
 
   <link href="style/main.css" rel="stylesheet" type="text/css">
+
+  <script src="js/hammer.min.js"></script>
+  <script src="js/keyboard_input_manager.js"></script>
+  <script src="js/html_actuator.js"></script>
+  <script src="js/grid.js"></script>
+  <script src="js/tile.js"></script>
+  <script src="js/game_manager.js"></script>
+  <script src="js/application.js"></script>
+
+  <meta name="HandheldFriendly" content="True">
+  <meta name="MobileOptimized" content="320">
+  <meta name="viewport" content="width=device-width, target-densitydpi=160dpi, initial-scale=1.0, maximum-scale=1, user-scalable=no">
 </head>
 <body>
   <div class="container">
-    <h1>2048</h1>
+    <div class="heading">
+      <h1 class="title">2048</h1>
+      <div class="score-container">0</div>
+    </div>
+    <p class="game-intro">Join the numbers and get to the <strong>2048 tile!</strong></p>
 
     <div class="game-container">
+      <div class="game-message">
+        <p></p>
+        <div class="lower">
+          <a class="retry-button">Try again</a>
+        </div>
+      </div>
+
       <div class="grid-container">
         <div class="grid-row">
           <div class="grid-cell"></div>
@@ -39,41 +62,17 @@
       </div>
 
       <div class="tile-container">
-        <div class="tile tile-2 tile-position-1-1">
-          2
-        </div>
-        <div class="tile tile-4 tile-position-2-1">
-          4
-        </div>
-        <div class="tile tile-8 tile-position-3-1">
-          8
-        </div>
-        <div class="tile tile-16 tile-position-4-1">
-          16
-        </div>
-        <div class="tile tile-32 tile-position-1-2">
-          32
-        </div>
-        <div class="tile tile-64 tile-position-2-2">
-          64
-        </div>
-        <div class="tile tile-128 tile-position-3-2">
-          128
-        </div>
-        <div class="tile tile-256 tile-position-4-2">
-          256
-        </div>
-        <div class="tile tile-512 tile-position-1-3">
-          512
-        </div>
-        <div class="tile tile-1024 tile-position-2-3">
-          1024
-        </div>
-        <div class="tile tile-2048 tile-position-3-3">
-          2048
-        </div>
+
       </div>
     </div>
+
+    <p class="game-explanation">
+      <strong class="important">How to play:</strong> Use your <strong>arrow keys</strong> to move the tiles. When two tiles with the same number touch, they <strong>merge into one!</strong>
+    </p>
+    <hr>
+    <p>
+    Created by <a href="http://gabrielecirulli.com" target="_blank">Gabriele Cirulli.</a> Based on <a href="https://itunes.apple.com/us/app/1024!/id823499224" target="_blank">1024 by Veewo Studio</a> and conceptually similar to <a href="http://asherv.com/threes/" target="_blank">Threes by Asher Vollmer.</a>
+    </p>
   </div>
 </body>
 </html>

comments