From 7c1a895c897a5a2a3d3fe09941e3c007e9f8935a Mon Sep 17 00:00:00 2001
From: Kyle Drake <kyle@kyledrake.net>
Date: Wed, 9 Sep 2015 16:58:18 -0700
Subject: [PATCH] baseplate for tutorials

---
 app/index.rb              |  6 +-----
 app/tutorial.rb           | 26 ++++++++++++++++++++++++++
 views/tutorial/html/1.erb | 30 ++++++++++++++++++++++++++++++
 views/tutorial/html/2.erb | 29 +++++++++++++++++++++++++++++
 views/tutorial/index.erb  |  5 +++++
 views/tutorial/layout.erb | 38 ++++++++++++++++++++++++++++++++++++++
 6 files changed, 129 insertions(+), 5 deletions(-)
 create mode 100644 app/tutorial.rb
 create mode 100644 views/tutorial/html/1.erb
 create mode 100644 views/tutorial/html/2.erb
 create mode 100644 views/tutorial/index.erb
 create mode 100644 views/tutorial/layout.erb

diff --git a/app/index.rb b/app/index.rb
index b3a79676..1f5c46d0 100644
--- a/app/index.rb
+++ b/app/index.rb
@@ -50,10 +50,6 @@ get '/education' do
   erb :education, layout: :index_layout
 end
 
-get '/tutorials' do
-  erb :'tutorials'
-end
-
 get '/donate' do
   erb :'donate'
 end
@@ -89,4 +85,4 @@ end
 
 get '/thankyou' do
   erb :'thankyou'
-end
\ No newline at end of file
+end
diff --git a/app/tutorial.rb b/app/tutorial.rb
new file mode 100644
index 00000000..4453594d
--- /dev/null
+++ b/app/tutorial.rb
@@ -0,0 +1,26 @@
+get '/tutorials' do
+  erb :'tutorials'
+end
+
+get '/tutorial/?' do
+  require_login
+  erb :'tutorial/index'
+end
+
+get '/tutorial/:section/?' do
+  require_login
+  redirect "/tutorial/#{params[:section]}/1"
+end
+
+get '/tutorial/:section/:page/?' do
+  require_login
+  @page = params[:page]
+  not_found if @page.to_i == 0
+  not_found unless %w{html css js}.include?(params[:section])
+
+  @section = params[:section]
+
+  @title = "#{params[:section].upcase} Tutorial - #{@page}/10"
+
+  erb "tutorial/layout".to_sym
+end
diff --git a/views/tutorial/html/1.erb b/views/tutorial/html/1.erb
new file mode 100644
index 00000000..672c5d0e
--- /dev/null
+++ b/views/tutorial/html/1.erb
@@ -0,0 +1,30 @@
+<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>
+
+<script>
+  function checkHomework(editor) {
+    alert('this checks homework, but its true for now')
+    return true
+  }
+</script>
diff --git a/views/tutorial/html/2.erb b/views/tutorial/html/2.erb
new file mode 100644
index 00000000..fc21fa29
--- /dev/null
+++ b/views/tutorial/html/2.erb
@@ -0,0 +1,29 @@
+<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>
+
+<script>
+  function checkHomework(editor) {
+    alert('check homework here')
+  }
+</script>
diff --git a/views/tutorial/index.erb b/views/tutorial/index.erb
new file mode 100644
index 00000000..0ef967e4
--- /dev/null
+++ b/views/tutorial/index.erb
@@ -0,0 +1,5 @@
+<h1>WELCOME TO NEOCITIES WHATS UP MANH!?</h1>
+
+<a href="/tutorial/html">START TUTORIAL</a>
+
+<a href="/dashboard">Nah dude I'm 31337 just take me to the editor.</a>
diff --git a/views/tutorial/layout.erb b/views/tutorial/layout.erb
new file mode 100644
index 00000000..cccaa87e
--- /dev/null
+++ b/views/tutorial/layout.erb
@@ -0,0 +1,38 @@
+<section class="section tutorial">
+  <div class="row">
+    <div class="col col-60 lesson">
+      <h1><%= @section.upcase %> Tutorial</h1>
+      <h2 class="subtitle">Page <%= @page %>/10</h2>
+
+      <%== erb "tutorial/#{@section}/#{@page}".to_sym, layout: false %>
+    </div>
+
+    <div class="col col-40 interact">
+      <input id="submit" class="btn btn-action" type="submit" value="Save">
+      <h3>HTML</h3>
+      <textarea id="editor" class="editor">
+<html>
+  <body>
+
+    Hello World!
+
+  </body>
+</html>
+      </textarea>
+
+      <h3>Site Preview</h3>
+      <div class="preview">
+      </div>
+    </div>
+  </div>
+</section>
+
+<script type="text/javascript">
+  $('.tutorial #submit').on('click', function() {
+    var editor = $('#editor')
+    var result = checkHomework(editor)
+    if(result == true) {
+      window.location.href = '/tutorial/<%= @section %>/<%= @page.to_i+1 %>'
+    }
+  })
+</script>