Render presentations with title slides

Added some design

app.js

@@ -88,19 +88,45 @@ function pushCurrentSlideToClient() {
 	});
 }
 
+function slideId(presentationName, slideName) {
+	return 'presentation-' + presentationName + '-slide-' + slideName;
+};
+
+
+
 // Routes
 
 app.get('/', function(req, res) {
 	db.view('app', 'byType', {key: 'presentation'}, function(er, data) {
+		var presentations, titleslideIds;
 		if (er) {
 			return res.send(JSON.stringify(er), 500);
 		}
-		res.render('index.jade', {
-			locals: {
-				title: 'Welcome to LiveSlide',
-				presentations: data.rows.map(function(row) { return row.value; })
-			}
+
+		presentations = data.rows.map(function(row) { return row.value; });
+		titleslideIds = presentations.map(function(presentation) {
+			return slideId(presentation.name, presentation.slides[0]);
 		});
+
+		db.allDocs({keys: titleslideIds}, {include_docs: true}, function(er, data) {
+			var titleslides = {};
+			if (er) {
+				return res.send(JSON.stringify(er), 500);
+			}
+			data.rows.forEach(function(row) {
+				if (row.error) return;
+				titleslides[row.doc.presentation] = row.doc;
+				titleslides[row.doc.presentation].content = jade.render(row.doc.content, {});
+			});
+
+			res.render('index.jade', {
+				locals: {
+					title: 'Welcome to LiveSlide',
+					presentations: presentations,
+					titleslides: titleslides
+				}
+			});
+		});		
     });
 });
 

public/stylesheets/style.css

@@ -1,14 +1,92 @@
+html {
+  height: 100%;
+}
+
 body {
-  background: #222222;
+  background: #464646;
   color: #ddd;
-  padding: 50px;
   font: 16px "Helvetica Nueue", Arial, sans-serif;
+  padding: 0;
+  margin: 0;
+  height: 100%;
 }
 
 a {
-	color: #fff;
+	color: #ffffff;
+}
+
+#header {
+	position: absolute;
+	z-index: 100;
+	height: 49px;
+	width: 100%;
+	background: url('/images/header-bg.png') repeat-x;
+}
+
+#header #logo {
+	display: block;
+	position: absolute;
+	right: 5px;
+	top: 0px;
+	width: 144px;
+	height: 37px;
+	background: url('/images/liveslide-logo.png') no-repeat;
+	text-indent: -9999px;
+}
+
+#content.with-sidebar {
+	position: relative;
+	float: left;
+	width: 100%;
+	background: url('/images/sidebar-bg.png') repeat-y;
+	height: 100%;
+}
+
+#content #sidebar {
+	position: absolute;
+	top: 0px;
+	width: 400px;
+	padding-top: 60px;
 }
 
+#content #right {
+	margin-left: 420px;
+	padding-top: 60px;
+}
+
+.presentation-thumb-list {
+	margin-left: 50px;
+	margin-top: 10px;
+}
+
+.presentation-thumb {
+	width: 320px;
+	height: 250px;
+	position: relative;
+}
+
+.presentation-titleslide {
+	position: absolute;
+	overflow: hidden;
+	top: 0px;
+	left: 0px;	
+	-webkit-box-shadow: 0px 0px 40px #a4c56c;
+	-webkit-transform: scale(0.5) translate(-320px, -220px);
+	background: #000000;
+
+	width: 600px;
+	height: 400px;
+	padding: 20px;
+}
+
+
+a.presentation-name {
+	position: absolute;
+	bottom: 0px;
+	right: 0px;
+}
+
+
 #slide-edit textarea[name='content'] {
 	width: 100%;
 	height: 600px;

views/index.jade

@@ -1,12 +1,16 @@
-h1= title
-p The first realtime collaborative slide presentation system
+#content.with-sidebar
+  #sidebar
+    .presentation-thumb-list
+      - each presentation in presentations
+        .presentation-thumb
+          .presentation-titleslide!= titleslides[presentation.name].content
+          a.presentation-name(href='/presentation/' + presentation.name)= presentation.name
 
-ul
-  - each presentation in presentations
-    li
-      a(href='/presentation/' + presentation.name)= presentation.name
+  #right
+    h1= title
+    p The first realtime collaborative slide presentation system
 
-form(action='/presentation', method='POST')
-  label Create new presentation
-  input(type='text', name='name')
-  input(type='submit', value='Do it!')
+    form(action='/presentation', method='POST')
+      label Create new presentation
+      input(type='text', name='name')
+      input(type='submit', value='Do it!')

views/layout.jade

@@ -7,4 +7,7 @@ html
     script(type='text/javascript', src='/javascripts/jquery.min.js')
     script(src='http://cdn.socket.io/stable/socket.io.js')
     script(type='text/javascript', src='/javascripts/presentation.js')
-  body!= body
+  body
+    #header
+      a#logo(href="/") LiveSlide
+    != body