From EJS to Jade

controllers/prototype/index.js

@@ -1,13 +1,8 @@
-var express = require('express')
-var pejs = require('pejs');
-
-app = express();
-views = pejs();
-
 module.exports.index = function(req, res) {
     res.setHeader('Content-Type', 'text/html');
 
-    views.render('prototype', res.locals, function(err, result) {
+    res.render('index.jade', res.locals, function(err, result) {
+        console.log(err);
         res.send(result);
     });
 }
@@ -17,7 +12,7 @@ module.exports.arrows = function(req, res) {
 
     res.locals.extrajs = '<script src="/static/js/prototype/arrows/main.js"></script>';
 
-    views.render('prototype/prototype', res.locals, function(err, result) {
+    res.render('prototype.jade', res.locals, function(err, result) {
         console.log(err);
         res.send(result);
     });
@@ -28,7 +23,7 @@ module.exports.viewports = function(req, res) {
 
     res.locals.extrajs = '<script src="/static/js/prototype/viewports/main.js"></script>';
 
-    views.render('prototype/prototype', res.locals, function(err, result) {
+    res.render('prototype.jade', res.locals, function(err, result) {
         res.send(result);
     });
 }

controllers/prototype/views/index.jade

@@ -0,0 +1,14 @@
+extends ../../../views/main
+
+block title
+    title #{title} - Prototype
+
+block content
+    h2 Index
+    p There are two prototypes here :
+        ul
+            li
+                a(href="arrows/") One with arrows
+            li
+                a(href="viewports/") One with viewports
+        ul

controllers/prototype/views/prototype.jade

@@ -0,0 +1,50 @@
+extends ../../../views/withjs
+
+block title
+    title #{title} - Prototype
+
+block extrajs
+    #{extrajs}
+
+block extrahead
+    link(rel="stylesheet" href="/static/css/prototype.css")
+
+block content
+    #main-div
+        h2 3D Interface
+
+        p
+            | This is the prototype of a 3D interface. You can move the camera with
+            | the arrow keys of your keyboard, and change the angle of the camera by
+            | dragging and dropping the scene around it (you can also use your
+            | numpad, 2 to look lower, 8 to look higher, 4 to look on the left and 6
+            | to look on the right, but if you're more comfortable with non-numpad
+            | keys, you can also use i for up, j for left, k for down, and l for
+            | right).
+
+        p
+            | Recommended views are displayed with a transparent red arrow.  They
+            | disappear when you come closer to them, and you can automatically move
+            | to them by clicking on them. You can reset the camera at anytime by
+            | clicking on the reset button.
+
+        button#full.btn.btn-primary(style={'margin-right': '10px', 'margin-bottom': '10px', display: 'none'}) Fullscreen
+        button#reset.btn.btn-primary(style={'margin-right': '10px', 'margin-bottom':'10px'}) Reset camera
+
+        button#undo.btn.btn-default(style={'margin-right': '10px', 'margin-bottom': '10px'})
+            span.glyphicon.glyphicon-triangle-left('aria-hidden'="true")
+
+        button#redo.btn.btn-default(style={'margin-right': '10px', 'margin-bottom':'10px'})
+            span.glyphicon.glyphicon-triangle-right('aria-hidden'="true")
+
+        input#fullarrow(type="checkbox", style={'margin-right': '10px', 'margin-bottom': '10px'})
+        label(for="fullarrow" style={'margin-right':'10px'}) Full arrow
+
+        input#collisions(type="checkbox", style={'margin-right': '10px', 'margin-bottom': '10px'}, checked)
+        label(for="collisions" style={'margin-right':'10px'}) Collisions
+
+
+        input#showarrows(type="checkbox", style={'margin-right': '10px', 'margin-bottom': '10px'}, checked)
+        label(for="showarrows" style={'margin-right':'10px'}) Show arrows
+
+        #container(style={'padding': '0px', 'margin': '0px'}, tabindex="1")