From 19d243e31e6407ec92ad98b16dab99327208e88c Mon Sep 17 00:00:00 2001
From: Victoria Wang <violasong@gmail.com>
Date: Tue, 8 Sep 2015 16:12:35 -0700
Subject: [PATCH] Initial work on tutorial mockup in HTML

---
 app/mockup.rb                             |  5 ++
 sass/_project-sass/_project-Tutorial.scss | 61 +++++++++++++++++++++++
 sass/neo.scss                             |  1 +
 views/tutorial_mockup_c1p2.erb            | 49 ++++++++++++++++++
 4 files changed, 116 insertions(+)
 create mode 100644 sass/_project-sass/_project-Tutorial.scss
 create mode 100644 views/tutorial_mockup_c1p2.erb

diff --git a/app/mockup.rb b/app/mockup.rb
index 3017a565..5aab40b2 100644
--- a/app/mockup.rb
+++ b/app/mockup.rb
@@ -29,4 +29,9 @@ get '/stats_mockup' do
   require_login
   erb :'stats_mockup', locals: {site: current_site}
 end
+
+get '/tutorial_mockup_c1p2' do
+  require_login
+  erb :'tutorial_mockup_c1p2', locals: {site: current_site}
+end
 # :nocov:
\ No newline at end of file
diff --git a/sass/_project-sass/_project-Tutorial.scss b/sass/_project-sass/_project-Tutorial.scss
new file mode 100644
index 00000000..32060390
--- /dev/null
+++ b/sass/_project-sass/_project-Tutorial.scss
@@ -0,0 +1,61 @@
+// ----------------------------------------------------------------
+//		Project Specific: Tutorial
+// ----------------------------------------------------------------
+
+.tutorial {
+  .interact {
+    textarea.editor {
+      height: 350px!important;
+      width: 100%;
+      background-color: #1D1F21;
+      color: white;
+      font: 16px/normal 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;
+    }
+    h3 {
+      margin-top: 10px;
+    }
+    .preview {
+      height: 300px;
+      width: 100%;
+      background-color: gray;
+    }
+    .btn {
+      float: right;
+    }
+  }
+  .lesson {
+    h1, .subtitle {
+      color: #5e95a1;
+    }
+    .subtitle {
+      font-size: 14px;
+      margin-top: 0;
+      text-align: left;
+    }
+    .comic {
+      position: relative;
+    }
+    .dialogue {
+      width: 180px;
+      position: absolute;
+      text-align: center;
+      
+      &:nth-child(1) {
+        left: 30px;
+        top: 30px;
+      }
+      &:nth-child(2) {
+        left: 250px;
+        top: 30px;
+      }
+      &:nth-child(3) {
+        left: 30px;
+        top: 250px;
+      }
+      &:nth-child(4) {
+        left: 250px;
+        top: 250px;
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/sass/neo.scss b/sass/neo.scss
index fd821dc3..b0ab7f7e 100644
--- a/sass/neo.scss
+++ b/sass/neo.scss
@@ -29,6 +29,7 @@
 	
 // Specific Modules
   @import '_project-sass/project-Website-Gallery';       // Browse website specific styling
+  @import '_project-sass/project-Tutorial';       // Tutorial specific styling
 	
 // FIXITFIXITFIXITFIXIT
 // Only import tidyUp if you actually need to make some quick fix hacks that you don't
diff --git a/views/tutorial_mockup_c1p2.erb b/views/tutorial_mockup_c1p2.erb
new file mode 100644
index 00000000..bda3d8dd
--- /dev/null
+++ b/views/tutorial_mockup_c1p2.erb
@@ -0,0 +1,49 @@
+<section class="section tutorial">  
+  <div class="row">
+    <div class="col col-60 lesson">
+      <h1>Chapter 1</h1>
+      <h2 class="subtitle">Page 2/10</h2>
+      <div class="comic" style="height: 500px">
+        <div class="dialogue">
+          All you need to build your first site is a computer language called HTML.
+        </div>
+        <div class="dialogue">
+          And here's some HTML, right in this box! Let's make a change. Replace Hello World with Victoria's Website, and click save!
+        </div>
+        <div class="dialogue">
+          You'll see the results of your site here.
+        </div>
+        <div class="dialogue">
+          Make sure to check the green boxes below for important bonus info!
+        </div>
+      </div>
+      
+      <div class="welcome">
+        <h4>Opening and Closing Tags</h4>
+        <p>HTML is just a bunch of tags. There's usually an opening tag and a closing tag, with content between them like this:</p>
+
+        <pre>tag Content visible on your site /tag</pre>
+
+        <p>Don't worry if this seems confusing - you'll get the hang of it after a few more examples! If you ever get stuck, click the <strong>Help</strong> link below.</p>
+      </div>
+    </div>
+    
+    <div class="col col-40 interact">
+      <input class="btn btn-action" type="submit" value="Save">
+      <h3>HTML</h3>
+      <textarea class="editor">
+<html>
+  <body>
+
+    Hello World!
+  
+  </body>
+</html>
+      </textarea>
+      
+      <h3>Site Preview</h3>
+      <div class="preview">
+      </div>
+    </div>
+  </div>
+</section>
\ No newline at end of file