Add start page

erming · May 17, 2015 · 4fc9f47 · 4fc9f47
1 parent 84e5dcd
commit 4fc9f47
Show file tree

Hide file tree

Showing 10 changed files with 137 additions and 65 deletions.
diff --git a/client/css/style.css b/client/css/style.css
@@ -2,70 +2,60 @@ html,
 body {
   height: 100%;
 }
-
 body {
 }
-
 button {
 	background: none;
 	border: 0;
 	outline: 0;
 	padding: 0;
 }
-
 #sidebar {
-	background: #eee;
+	border-right: 1px solid #eee;
+	color: #536f90;
 	position: absolute;
 	left: 0;
 	top: 0;
 	bottom: 0;
 	width: 240px;
 	padding: 20px;
 }
-
 #main {
 	background: #fff;
 	position: absolute;
 	left: 240px;
 	top: 0;
 	right: 0;
 	bottom: 0;
-	transition: left .4s;
 }
-
-#main .lt {
-	background: url(../img/toggle.png) no-repeat;
-	background-position: 5px 5px;
-	display: none;
-	width: 28px;
-	height: 24px;
-	margin: 20px;
-}
-
-#shade {
-	display: none;
-	background: rgba(255, 255, 255, .8);
-	cursor: pointer;
-	position: absolute;
+#start button {
+	background: #999;
+	color: #fff;
+	border-radius: 3px;
+	display: block;
+	margin-bottom: 10px;
+	padding: 12px 16px;
 	width: 100%;
-	height: 100%;
-	z-index: 2;
 }
-
-@media (max-width: 480px) {
-	#main {
-		left: 0;
-	}
-
-	#main .lt {
-		display: inline-block;
-	}
-
-	.lt #main {
-		left: 240px;
-	}
-
-	.lt #shade {
-		display: block;
-	}
+#start button:hover {
+	background: #888;
+}
+#start .mode {
+	max-width: 280px;
+	margin: 20% auto 0;
+}
+#start .mode .login {
+	background: #fff;
+	color: #888;
+}
+#start .mode .login:hover {
+	color: #666;
+}
+#login {
+	margin-top: 20%;
+	text-align: center;
+}
+#connect {
+	margin-top: 20%;
+	text-align: center;
 }
diff --git a/client/dist/shout.min.js b/client/dist/shout.min.js
diff --git a/client/index.html b/client/index.html
@@ -6,23 +6,16 @@
   <meta name="viewport" content="width=device-width, user-scalable=no">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
-  <title>Shout</title>
+  <title>...</title>
 
   <link rel="stylesheet" href="<%= path("css/bootstrap.css") %>">
   <link rel="stylesheet" href="<%= path("css/style.css") %>">
 
   </head>
   <body>
 
-  <div id="wrap">
-    <aside id="sidebar">
-      Sidebar
-    </aside>
-    <div id="main">
-      <div id="shade"></div>
-      <button class="lt"></button>
-    </div>
-  </div>
+  <aside id="sidebar"></aside>
+  <div id="main"></div>
 
   <script src="<%= path("dist/shout.min.js") %>"></script>
 

diff --git a/client/js/gui.js b/client/js/gui.js
@@ -1,6 +1,40 @@
 function gui() {
-  var body = $("body");
-  $(".lt, #shade").on("touchstart click", function() {
-    body.toggleClass("lt");
+  var mode = shout.mode;
+  if (mode.guest && mode.login) {
+    start();
+  } else if (mode.login) {
+    login();
+  } else {
+    connect();
+  }
+}
+
+function start() {
+  var main = $("#main");
+  var html = render("start");
+  main.append(html);
+
+  var start = $("#start");
+
+  start.find(".guest").one("click", function() {
+    connect();
+    start.remove();
+  });
+
+  start.find(".login").one("click", function() {
+    login();
+    start.remove();
   });
 }
+
+function login() {
+  var main = $("#main");
+  var html = render("login");
+  main.append(html);
+}
+
+function connect() {
+  var main = $("#main");
+  var html = render("connect");
+  main.append(html);
+}
diff --git a/client/js/shout.js b/client/js/shout.js
@@ -3,7 +3,7 @@ $(function() {
 });
 
 var socket = io();
-var shout  = new EventEmitter;
+var events = new EventEmitter;
 
 function init() {
   gui();

diff --git a/client/js/tpl.js b/client/js/tpl.js
@@ -0,0 +1,3 @@
+function render(name, data) {
+  return JST[name](data);
+}
diff --git a/client/tpl/connect.tpl b/client/tpl/connect.tpl
@@ -0,0 +1 @@
+<div id="connect">connect</div>
diff --git a/client/tpl/login.tpl b/client/tpl/login.tpl
@@ -0,0 +1 @@
+<div id="login">login</div>
diff --git a/client/tpl/start.tpl b/client/tpl/start.tpl
@@ -0,0 +1,6 @@
+<div id="start">
+  <div class="mode">
+    <button class="guest">Connect as <b>guest</b></button>
+    <button class="login">Login to existing <b>user</b></button>
+  </div>
+</div>
diff --git a/package.json b/package.json
@@ -18,6 +18,7 @@
   "keywords": [
     "browser",
     "web",
+    "web-based",
     "chat",
     "client",
     "irc",