diff options
| author | Jules Laplace <jules@okfoc.us> | 2016-10-28 18:06:46 -0400 |
|---|---|---|
| committer | Jules Laplace <jules@okfoc.us> | 2016-10-28 18:06:46 -0400 |
| commit | 9e7bacd46c1e5d0e1c24433690d421ab3f3a11f2 (patch) | |
| tree | 4d0cefa2780dfa4382f1ed2ea481b6aafbdbb15e /views/about/howto.ejs | |
| parent | 50da9e3e677f121f15e501bf062da6c45db255ad (diff) | |
| parent | cce1dea756717f1308c6b72f762b5ea5f5b43958 (diff) | |
merge
Diffstat (limited to 'views/about/howto.ejs')
| -rw-r--r-- | views/about/howto.ejs | 128 |
1 files changed, 128 insertions, 0 deletions
diff --git a/views/about/howto.ejs b/views/about/howto.ejs new file mode 100644 index 0000000..914c3b3 --- /dev/null +++ b/views/about/howto.ejs @@ -0,0 +1,128 @@ +<!doctype html> +<html> +<head> + <title>How to Use VValls</title> + [[ include ../partials/meta ]] +</head> +<body class="loading"> + <div class="rapper page"> + [[ include ../partials/header ]] + + <div class="hero" style="background-image:url(http://okfocus.s3.amazonaws.com/images/vvalls/construction.jpg);"> + <div class="holder"> + </div> + </div> + <h1>How To Use VValls</h1> + + <div class="projectList about howto"> + <div class="item"> + <div class="rap"> + <span style="background-image:url(http://okfocus.s3.amazonaws.com/images/vvalls/newproject.jpg)"> + </span> + <span> + <h3>1. Define Your Space.</h3> + <words>Choose from one of our existing floor plan templates or create your own.</words> + </span> + </div> + </div> + + + <div class="item"> + <div class="rap"> + <span style="background-image:url(http://okfocus.s3.amazonaws.com/images/vvalls/addmedia.gif)"> + </span> + <span> + <h3>2. Add Your Media Files.</h3> + <words>Upload media files or choose media from our pre-loaded image/video stream. Position media on the walls.</words> + </span> + </div> + </div> + + + <div class="item"> + <div class="rap"> + <span style="background-image:url(http://okfocus.s3.amazonaws.com/images/vvalls/wallpaper3.gif)"> + </span> + <span> + <h3>3. Customize.</h3> + <words>Use color or wallpaper features to customize the look of your space.</words> + </span> + </div> + </div> + + <div class="item"> + <div class="rap"> + <span style="background-image:url(http://okfocus.s3.amazonaws.com/images/vvalls/colab.png)"> + </span> + <span> + <h3>4. Collaborate.</h3> + <words>You can invite others to collaborate on your project.</words> + </span> + </div> + </div> + + <div class="item"> + <div class="rap"> + <span style="background-image:url(http://okfocus.s3.amazonaws.com/images/vvalls/thumbsup.gif)"> + </span> + <span> + <h3>5. Publish + Share.</h3> + <words>Share a link to your creation on social media or embed your 3D space directly into your own web page. When on the go, make sure to show off your project on your phone.</words> + </span> + </div> + </div> + + <h1 style="text-align:center; background: white; border-bottom: 1px solid black; margin: 60px 0 40px;">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 style="padding: 0 50px;margin-bottom: 60px;"> + <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> </td></tr> + <tr><td>Q</td><td>Turn left</td></tr> + <tr><td>E</td><td>Turn right</td></tr> + <tr><td> </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> </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> </td></tr> + <tr><td>Spacebar</td><td>Jump</td></tr> + </table> + </span> + </div> + </div> +</div> + + + [[ include ../partials/confirm-modal ]] + [[ include ../projects/layouts-modal ]] + [[ include ../partials/sign-in ]] + [[ include ../partials/footer ]] + + </div> +</body> +[[ include ../partials/scripts ]] +</html> |