Merge pull request #5 from ziaix/web

Started improving the web interface.

modules/web.js

@@ -11,10 +11,17 @@ var webInterface = function(dbot) {
     app.set('view engine', 'jade');
 
     app.get('/', function(req, res) {
-        res.render('index', { });
+        res.redirect('/quotes');
+        //res.render('index', { });
+    });
+    
+    app.get('/quotes', function(req, res) {
+        // Lists the quote categories
+        res.render('quotelist', { 'quotelist': Object.keys(dbot.db.quoteArrs) });
     });
     
     app.get('/quotes/:key', function(req, res) {
+        // Lists the quotes in a category
         var key = req.params.key.toLowerCase();
         if(dbot.db.quoteArrs.hasOwnProperty(key)) {
             res.render('quotes', { 'quotes': dbot.db.quoteArrs[key] });
@@ -22,11 +29,11 @@ var webInterface = function(dbot) {
             res.render('error', { 'message': 'No quotes under that key.' });
         }
     });
-
+    
-    app.get('/quotes', function(req, res) {
+    app.get('/css', function(req, res) {
-        res.render('quotelist', { 'quotes': Object.keys(dbot.db.quoteArrs) });
+        res.render('styles.scss', { layout: false });
     });
-
+    
     app.listen(443);
 
     return { 

views/layout.jade

@@ -2,7 +2,8 @@
 html(lang: 'en')
   head 
     meta(charset: 'utf-8')
-    title depressionbot web interface
+    link(rel: 'stylesheet', type: 'text/css', href: '/css')
+    title Depressionbot web interface
   body
-    div#title depressionbot web interface
+    div#title Depressionbot web interface
     !{body}

views/quotelist.jade

@@ -1,4 +1,4 @@
-ul#quotes
+div#quotelist
-    -each quote in quotes
+    -each quote in quotelist
-        li 
+        div.category
             a(href='/quotes/' + quote) #{quote}

views/quotes.jade

@@ -1,3 +1,3 @@
-ul#quotes
+div.quotes
     -each quote in quotes
-        li #{quote}
+        div.quote #{quote}

views/styles.scss

@@ -0,0 +1,65 @@
+/* #quotelist {
+    padding: 10px;
+}
+
+.quotes {
+    border-left: 2px solid red;
+    padding: 10px;
+}
+
+.quote {
+    border-left: 2px solid blue;
+} */
+
+html {
+  background: url(http://dl.dropbox.com/u/13375195/depressionbot/images/background.jpg) no-repeat center center fixed;
+  -webkit-background-size: cover;
+  -moz-background-size: cover;
+  -o-background-size: cover;
+  background-size: cover;
+}
+
+body {
+  padding: 30px;
+  font-size: 46px;
+  font-family: "Lucida Grande";
+  font-weight: bold;
+  margin: 0;
+  color: black;
+  text-shadow: 1px 1px 2px #2B2B2B;
+}
+
+ul {
+  list-style: none;
+}
+
+a {
+  width: 600px;
+  height: 150px;
+  margin: 25px auto;
+  display: block;
+  background: white;
+  box-shadow: 0 0 20px black;
+  padding: 20px;
+  border-radius: 15px;
+  opacity: 0.5;
+  color: #12699B;
+  text-align: center;
+  vertical-align: middle;
+  text-decoration: none;
+}
+
+a:hover {
+  opacity: 0.8;
+}
+
+a span {
+  position: relative;
+  top: -60px;
+}
+
+img {
+  width: 150px;
+  height: 150px;
+  background: url(http://dl.dropbox.com/u/13375195/depressionbot/images/null.png);
+}