summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorJules Laplace <jules@okfoc.us>2014-11-18 12:33:51 -0500
committerJules Laplace <jules@okfoc.us>2014-11-18 12:33:51 -0500
commit3164203c0b196edee882e896adbd33fc65e32588 (patch)
treefe1007f99a947c9816e65751c6a1dac60f088662
parentdba52c100c5fa621c4c611effa8115dd7e6d10e6 (diff)
add keyboard shortcuts to howto
-rw-r--r--server/lib/views/index.js2
-rw-r--r--views/about/howto.ejs54
-rw-r--r--views/about/index.ejs20
-rwxr-xr-xviews/home.ejs2
4 files changed, 53 insertions, 25 deletions
diff --git a/server/lib/views/index.js b/server/lib/views/index.js
index 8ca2113..145b5ac 100644
--- a/server/lib/views/index.js
+++ b/server/lib/views/index.js
@@ -111,7 +111,7 @@ var views = module.exports = {
},
docs: function (req, res){
- var name = req.params.name || "index"
+ var name = req.params.name || "howto"
if (name == "howto") {
res.render('about/' + name)
diff --git a/views/about/howto.ejs b/views/about/howto.ejs
index 2e0f8ed..30497e1 100644
--- a/views/about/howto.ejs
+++ b/views/about/howto.ejs
@@ -8,8 +8,6 @@
<div class="rapper page">
[[ include ../partials/header ]]
- <!-- put stuff here -->
-
<div class="hero" style="background-image:url(http://okfocus.s3.amazonaws.com/images/vvalls/construction.jpg);">
<div class="holder">
</div>
@@ -73,7 +71,57 @@
</span>
</div>
</div>
-
+
+ <h1 style="text-align:center;">Keyboard Shortcuts</h1>
+
+ <div class="item">
+ <div class="rap">
+ <span style="background-image:url(http://okfocus.s3.amazonaws.com/random/keyboard.gif); background-position: 15%;"></span>
+ <span>
+ <words>
+ <h3>Getting around VValls is easier with the keyboard.</h3>
+
+ If you play video games, you should be familiar with using WASD to move -- left hand on the keyboard, right hand on the mouse.
+ We have added a few keys for pivoting and looking up and down.
+ </words>
+ </span>
+ <br clear="both">
+
+ <table border="0" class="keyboard first-keyboard">
+ <tr><td>W</td><td>Move forward</td></tr>
+ <tr><td>A</td><td>Strafe left</td></tr>
+ <tr><td>S</td><td>Move backward</td></tr>
+ <tr><td>D</td><td>Strafe right</td></tr>
+ <tr><td>&nbsp;</td></tr>
+ <tr><td>Q</td><td>Turn left</td></tr>
+ <tr><td>E</td><td>Turn right</td></tr>
+ <tr><td>&nbsp;</td></tr>
+ <tr><td>R</td><td>Look up</td></tr>
+ <tr><td>F</td><td>Look down</td></tr>
+ </table>
+ <table border="0" class="keyboard">
+ <tr><td>Cmd-Z</td><td>Undo</td></tr>
+ <tr><td>Shift-Cmd-Z</td><td>Redo</td></tr>
+ <tr><td>Cmd-\</td><td>Noclip mode</td></tr>
+ <tr><td>Esc</td><td>Cancel</td></tr>
+ <tr><td>Backspace</td><td>Delete currently selected media</td></tr>
+ <tr><td>&nbsp;</td></tr>
+ <tr><td>Mousewheel</td><td>Move forward/back</td></tr>
+ <tr><td>Shift-Mousewheel</td><td>Turn left/right</td></tr>
+ <tr><td>&nbsp;</td></tr>
+ <tr><td>Spacebar</td><td>Jump</td></tr>
+ </table>
+ <style>
+ .keyboard { float: left; width: 50%; }
+ .keyboard tr { margin: 0; padding: 0; }
+ .keyboard td { padding: 2px 10px; margin: 0; }
+ .keyboard.first-keyboard td:nth-child(1) { text-align: center; width: 50px; padding-left: 100px; }
+ .keyboard td:nth-child(1) { text-align: right; width: 150px; }
+ .keyboard td:nth-child(2) { font-weight: 300; }
+ </style>
+ </span>
+ </div>
+ </div>
</div>
diff --git a/views/about/index.ejs b/views/about/index.ejs
deleted file mode 100644
index 2517225..0000000
--- a/views/about/index.ejs
+++ /dev/null
@@ -1,20 +0,0 @@
-<!doctype html>
-<html>
-<head>
- <title>vvalls</title>
- [[ include ../partials/meta ]]
-</head>
-<body class="loading">
- <div class="rapper page">
- [[ include ../partials/header ]]
-
-
- [[ include ../partials/confirm-modal ]]
- [[ include ../projects/layouts-modal ]]
- [[ include ../partials/sign-in ]]
- [[ include ../partials/footer ]]
-
- </div>
-</body>
-[[ include ../partials/scripts ]]
-</html>
diff --git a/views/home.ejs b/views/home.ejs
index cc108ba..8fc248e 100755
--- a/views/home.ejs
+++ b/views/home.ejs
@@ -48,7 +48,7 @@
<span style="background-image:url(http://33.media.tumblr.com/tumblr_m0an31XPpF1qbhp9xo1_1280.jpg)">
</span>
<span>
- <h3>Cutting Edge Presentations</h3>
+ <h3>Make Cutting Edge Presentations</h3>
<words>There's no cooler way than VValls for displaying your images online. Take your pix out of that drab Tumblr theme and present them in the freshest way online!</words>
</span>
</div>