Merge branch 'master' of github.com:ehzhang/nunchuck

ehzhang · Aug 3, 2014 · bc422c7 · bc422c7
2 parents d52a318 + 17e28d6
commit bc422c7
Show file tree

Hide file tree

Showing 6 changed files with 77 additions and 5 deletions.
diff --git a/public/assets/images/connect.jpg b/public/assets/images/connect.jpg
diff --git a/public/assets/images/connect.png b/public/assets/images/connect.png
diff --git a/public/stylesheets/style.css b/public/stylesheets/style.css
@@ -1,7 +1,22 @@
+html,
 body {
-  padding: 50px;
   font: 1em "Montserrat", Helvetica, Arial, sans-serif;
   text-align: center;
+  height: 100%;
+  width: 100%;
+  padding: 0;
+  margin: 0;
+}
+
+section {
+  position: relative;
+}
+
+section#splash {
+  min-height: 100%;
+  background: #1f1f1f;
+  padding-top: 80px;
+  color: white;
 }
 
 .title {
@@ -15,6 +30,10 @@ body {
   margin-bottom: 30px;
 }
 
+.accent {
+  color: #458CCE;
+}
+
 a {
   font-size: 1.2em;
   color: #33b5e5;
@@ -46,6 +65,8 @@ a.button:hover {
   background: #33b5e5;
 }
 
+
+
 @media only screen and (max-width: 480px) {
   .title {
     font-size: 3.2em;

diff --git a/server/routes/index.js b/server/routes/index.js
@@ -10,6 +10,7 @@ function isCallerMobile(req) {
 
 /* GET home page. */
 
+// Detect if mobile
 router.use(function(req, res, next){
   if (isCallerMobile(req)){
     res.sendfile('views/controller.html')

diff --git a/views/index.html b/views/index.html
@@ -2,15 +2,27 @@
 <html>
 <head lang="en">
   <meta charset="UTF-8">
-  <title> Nunchuck </title>
+  <title> Nunchuck.js </title>
   <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
   <link href='http://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
+  <link href='stylesheets/normalize.css' rel="stylesheet" type="text/css">
+  <link href='stylesheets/animate.css' rel="stylesheet" type="text/css">
   <link href='stylesheets/style.css' rel="stylesheet" type="text/css">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <script>
+    $(document).ready(function(){
+      $('div').addClass('animated fadeIn');
+      $('img').addClass('animated fadeInUpBig');
+    })
+  </script>
 </head>
 <body>
 
-  <a href="test">TEST</a>
+<section id="splash">
+  <div class="title">nunchuck<span class="accent">.</span>js</div>
+  <div class="subtitle">easy multi-device data synchronization through the browser.</div>
+  <img src="assets/images/connect.png">
+</section>
 
 </body>
 </html>
diff --git a/views/snes_emu.html b/views/snes_emu.html
@@ -10,6 +10,8 @@
       canvas { border: 0px none; }
     </style>
     <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
+    <link href='stylesheets/normalize.css' rel="stylesheet" type="text/css">
+    <link href='http://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
     <script src="/socket.io/socket.io.js"></script>
     <script src="js/nunchuck.js"></script>
     <script src="js/plugins/podium.js"></script>
@@ -182,11 +184,43 @@
 
       });
       // TODO: disconnect resets player1/player2 to null? pause the game?
+
+      $(document).ready(function(){
+        $('.room').text("Room ID: " + n.roomId)
+      })
+
     </script>
+
+    <style>
+      body {
+        font-family: 'Montserrat', 'Helvetic Neue', 'Helvetica', sans-serif;
+        text-align: center;
+        background: #1f1f1f;
+        color: white;
+      }
+
+      input[type='button'],
+      button {
+        border: 2px solid white;
+        border-radius: 0;
+        background: none;
+        padding: 8px;
+      }
+
+      input {
+        background: none;
+        color: white;
+      }
+
+      #openrom {
+        margin-bottom: 16px;
+      }
+
+    </style>
   </head>
   <body>
     <h1>Snes9x + Nunchuck = &lt;3</h1>
-    <hr/>
+    <h1 class="room"></h1>
     <div id="status">Downloading...</div>
     <div id="canvas_div" style="display: none">
       <canvas id="canvas" oncontextmenu="event.preventDefault()"></canvas>
@@ -195,7 +229,6 @@ <h1>Snes9x + Nunchuck = &lt;3</h1>
       <button id="fakerom" onclick="document.getElementById('rom').click()">Select a SNES ROM</button>
       <input style="display: none" type="file" id="rom" name="upload" onclick="document.getElementById('fakerom').click();" onchange="runEmulator(event.target.files);" multiple />
     </div>
-    <hr/>
     <div>
       <input type="checkbox" id="resize" checked><label for="resize">Resize canvas</label>
       <input type="checkbox" id="pointerLock" checked><label for="pointerLock">Lock/hide mouse pointer</label>
@@ -267,5 +300,10 @@ <h1>Snes9x + Nunchuck = &lt;3</h1>
       Module.setStatus('Downloading...');
     </script>
 	  <script type="text/javascript" src="js/plugins/snes9x/snes9x-next.js"> </script>
+
+    <br>
+    <br>
+    <iframe src="https://www.kimonolabs.com/kimonoblock/?apiid=4wh273rs&apikey=fp6JCZPoBv4rSyYRstL8NBh1WbwpRKCM&title=Popular SNES Games&titleColor=ffffff&titleBgColor=659fc0&bgColor=ffffff&textColor=6b7770&linkColor=659fc0&propertyColor=dddddd" style="width:50%;height:400px;border:1px solid #efefef">
+
   </body>
 </html>