merge

7 files changed, 204 insertions, 19 deletions

diff --git a/public/assets/javascripts/ui/editor/WallpaperPicker.js b/public/assets/javascripts/ui/editor/WallpaperPicker.js
index c383489..e2aaeb7 100644
--- a/public/assets/javascripts/ui/editor/WallpaperPicker.js
+++ b/public/assets/javascripts/ui/editor/WallpaperPicker.js
@@ -186,10 +186,19 @@ var WallpaperPicker = UploadView.extend({
     this.$scale.val( Math.log( this.wall.background.scale ) )
   },
   
+  scaleTimeout: null,
   updateScale: function(){
     if (! this.wall) return;
     var scale = Math.exp( parseFloat(this.$scale.val()) )
     this.wall.wallpaperPosition({ scale: scale })
+    
+    clearTimeout(this.scaleTimeout)
+    this.scaleTimeout = setTimeout(function(){
+
+      // TODO: watch individual scenery object here
+      Minotaur.watch( app.router.editorView.settings )
+
+    }.bind(this), 500)
   },
 
   enterUrl: function(){
diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css
index 55f3219..cf11b1a 100755
--- a/public/assets/stylesheets/app.css
+++ b/public/assets/stylesheets/app.css
@@ -363,6 +363,11 @@ h5 {
 	font-weight: 300;
 }
 
+.projectList.about.howto .item span words {
+	line-height: 43px;
+	font-size: 24px;
+}
+
 .projectList.about .item span:nth-child(1){
 	width: 300px;
 	height: 300px;
@@ -373,6 +378,18 @@ h5 {
 	background-position:center;
 }
 
+.projectList.about.howto .item span:nth-child(1){
+	width: 300px;
+	height: 300px;
+	display: inline-block;
+	float: left;
+	border-radius: 0;
+	background-size:cover;
+	background-position:center;
+	border: 1px solid;
+	box-shadow: 2px 2px black;
+}
+
 .projectList.about .item span h3{
 	font-weight: 500;
 	font-size: 25px;
@@ -385,14 +402,14 @@ h5 {
 }
 
 
-.projectList.about .item:nth-child(2) span:nth-child(2) {
+.projectList.about .item:nth-child(2n+2) span:nth-child(2) {
 	padding: 70px 0 70px 100px;
 }
-.projectList.about .item:nth-child(2) {
+.projectList.about .item:nth-child(2n+2) {
 	padding: 5% 0;
 }
 
-.projectList.about .item:nth-child(2) span:nth-child(1){
+.projectList.about .item:nth-child(2n+2) span:nth-child(1){
 	float: right;
 }
 
@@ -825,7 +842,7 @@ iframe.embed {
 	margin: 0 auto;
 	line-height: 50px;
 }
-.gopro span a{
+.greenbtn{
 	width: 100%;
 	display: inline-block;
 	text-align: center;
@@ -837,7 +854,16 @@ iframe.embed {
 	-moz-transition:0.2s background;
 	transition:0.2s background;
 }
-.gopro span a:hover{
+.greenbtn.learn {
+	width: 60%;
+	clear: both;
+	font-size: 26px;
+	font-weight: 300;
+	margin: 140px 0% 0 20%;
+	background: #0054ff;
+	padding: 20px 0;
+}
+.greenbtn:hover{
 	background:black;
 }
 .profilepage .about h2 .btn {
@@ -958,7 +984,7 @@ border-left: 1px solid black;
 }
 .editing .mx-scenery:hover,
 .editing .mx-scenery.picked {
-  border: 15px dashed yellow;
+  border: 1px dashed black;
   -moz-box-sizing: content-box;
   -webkit-box-sizing: content-box;
   box-sizing: content-box;
@@ -2224,15 +2250,19 @@ input[type="range"]::-webkit-slider-thumb {
 	width: 100%;
 }
 #randomize {
-	background: white;
+	background: transparent;
 	display: inline-block;
 	color: black;
-	text-decoration:none;
-	border:1px solid black;
+	text-decoration: none;
 	text-align: center;
-  font-size: 13px;
-  padding: 3px;
-  cursor: pointer;
+	font-size: 12px;
+	padding: 3px;
+	cursor: pointer;
+	position: absolute;
+	left: 10px;
+	font-weight: 500;
+	top: 0px;
+	border-bottom: 1px solid;
 }
 #randomize:hover {
   color: white;
@@ -2679,7 +2709,7 @@ a[data-role="forgot-password"] {
   text-decoration:underline;
 }
 .vvbox.share {
-  width: 300px
+  width: 230px
 }
 .vvbox.share #share_link {
   width: 100%;
@@ -3032,6 +3062,9 @@ a[data-role="forgot-password"] {
 	.gopro span a{
 		margin-top: 20px;
 	}
+	.greenbtn.learn {
+		display:none;
+	}
 }
 
 @media screen and (orientation:portrait) {
diff --git a/server/lib/views/index.js b/server/lib/views/index.js
index 31cb1db..48b1c32 100644
--- a/server/lib/views/index.js
+++ b/server/lib/views/index.js
@@ -111,6 +111,13 @@ var views = module.exports = {
 	docs: function (req, res){
 		var name = req.params.name || "index"
 
+	  try {
+	    res.render('about/' + name)
+	    return
+	  }
+	  catch (e) {
+	  }
+	  
 		if (name === "new") {
 			res.render('docs', {
 				doc: { name: "new" },
diff --git a/views/about/_blank.ejs b/views/about/_blank.ejs
new file mode 100644
index 0000000..0e9ea7e
--- /dev/null
+++ b/views/about/_blank.ejs
@@ -0,0 +1,24 @@
+<!doctype html>
+<html>
+<head>
+	<title>vvalls</title>
+	[[ include ../partials/meta ]]
+</head>
+<body class="loading">
+	<div class="rapper page home">
+	[[ include ../partials/header ]]
+
+
+  <!-- put stuff here -->
+
+
+
+	[[ 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/about/howto.ejs b/views/about/howto.ejs
new file mode 100644
index 0000000..2e0f8ed
--- /dev/null
+++ b/views/about/howto.ejs
@@ -0,0 +1,88 @@
+<!doctype html>
+<html>
+<head>
+	<title>vvalls</title>
+	[[ include ../partials/meta ]]
+</head>
+<body class="loading">
+	<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>
+	</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>
+	
+</div>
+
+
+	[[ 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/about/index.ejs b/views/about/index.ejs
new file mode 100644
index 0000000..2517225
--- /dev/null
+++ b/views/about/index.ejs
@@ -0,0 +1,20 @@
+<!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 c25b5e7..28499d7 100755
--- a/views/home.ejs
+++ b/views/home.ejs
@@ -17,7 +17,7 @@
 				</span>
 			</div>
 	</div>
-	
+
 	<h1>What's VValls For?</h1>
 	
 	<div class="projectList about">
@@ -38,7 +38,7 @@
 			</span>
 			<span>
 				<h3>Defy The Status Quo</h3>
-				<words>There is no platform on the internet quite like VValls. Built using advanced HTML5 techniques, VValls opens up the possibilities of expression online. Go crazy, make otherworldly rooms.</words>
+				<words>There is no platform on the internet quite like VValls. VValls opens up the possibilities of expression online. Go crazy, make otherworldly rooms.</words>
 			</span>
 		</div>
 		</div>
@@ -53,20 +53,24 @@
 			</span>
 		</div>
 		</div>
-		
-	</div>
+
+		<a href="/about/howto" class="greenbtn learn">Learn How To Use VValls</a>
+</div>
 	
 	<h1>Room Showcase</h1>
 
 	[[ include projects/list-projects ]]
 	
+	
 	<div class="projectList about gopro">
 		
 		<span>
 			<h3>Ready To Go Pro?</h3>
 			
-		We offer white-label licensing of the VValls platform that could be used within the context of your product offering. We can also customize the VValls platform to suit the various needs of your project. This could be include custom floor plans and numerous other features. Please inquire to start a conversation.
-		<a href="mailto:info@vvalls.com?subject=VValls platform">Contact</a>
+			We can help make your content immersive and experiential. We offer white-label licensing of VValls customized to suit the various needs of your project. Customizations include more sophisticated floor plan, video, audio, and interactivity options, as well as automation of room creation. We can also completely integrate a custom version of VValls into your product offering or work with your team to enhance your advertising or marketing campaign.
+			Give your audience a cutting-edge interactive experience with your brand. 
+			Please inquire to start a conversation.
+		<a href="mailto:info@vvalls.com?subject=VValls platform" class="greenbtn">Contact</a>
 		</span>
 	</div>
 	[[ include partials/confirm-modal ]]