Merge branch 'master' of github.com:neocities/neocities

views/tutorial/html/1.erb

@@ -1,19 +1,19 @@
 <div class="comic" style="height: 967px; background-image: url(/img/tutorial/ch1pg1.png); background-size: 839px;">
-  <div class="dialogue" style="left: 270px; top:374px;">
+  <div class="dialogue" style="left: 280px; top:370px;">
     Oh, a new student!
   </div>
-  <div class="dialogue" style="left: 570px; top:374px;">
+  <div class="dialogue" style="left: 590px; top:370px;">
     Ahem, please come in!
   </div>
-  <div class="dialogue" style="left: 50px; top:630px;">
+  <div class="dialogue" style="left: 50px; top:635px;">
     I'm Penelope, and I'll be your teacher.
   </div>
-  <div class="dialogue" style="left: 330px; top:630px;">
+  <div class="dialogue" style="left: 500px; top:645px;">
     What's your name?
   </div>
-  <div style="position: absolute; left: 460px; top:840px;">
+  <div style="position: absolute; left: 490px; top:865px;">
     <input id="nameInput" type="text" placeholder="First Name" style="position: relative">
-    <button id="checkButton" class="btn btn-active">Submit</button>
+    <button id="checkButton" class="btn btn-active">Go</button>
   </div>
 </div>
 
@@ -22,12 +22,12 @@
     <div class="dialogue" style="left: 200px; top:30px;">
       Welcome, [NAME]! You're about to embark on a very exciting challenge: creating your first website!
     </div>
-    <div class="dialogue" style="left: 640px; top:20px;">
+    <div class="dialogue" style="left: 645px; top:20px;">
       You've already made the first important step of starting this lesson, so here's a badge for your profile.
     </div>
   </div>
 
-  <a href="/tutorial/html/2">Next >></a>
+  <a href="/tutorial/html/2" class="btn btn-active">Next</a>
 </div>
 
 <script>

views/tutorial/html/10.erb

@@ -1,8 +1,8 @@
-<div class="comic" style="height: 900px; background-image: url(/img/tutorial/ch1pg10.png);">
+<div class="comic" style="height: 900px; background-image: url(/img/tutorial/ch1pg10.png); background-size: 800px;">
   <div class="dialogue">
     And that's it for Chapter One! Here's a new badge for your first ever version of victoria.neocities.org!
   </div>
-  <div class="dialogue" style="top: 0;left:450px">
+  <div class="dialogue" style="top: 60px;left:560px">
     But you're not done yet! There's much in store for you: Adding colors, fonts, backgrounds, and more, all in chapter 2!
   </div>
 </div>

views/tutorial/html/2.erb

@@ -1,11 +1,11 @@
-<div class="comic" style="height: 600px; background-image: url(/img/tutorial/ch1pg2.png);">
-  <div class="dialogue" style="left: 25px; top: 25px; width: 250px">
+<div class="comic" style="height: 600px; background-image: url(/img/tutorial/ch1pg2.png); background-size: 580px;">
+  <div class="dialogue" style="left: 25px; top: 40px; width: 250px">
     <p>All you need to build your first site is a computer language called HTML.</p><p>HTML is made of tags - there's usually an opening tag and a closing tag, with content in between them.</p>
   </div>
-  <div class="dialogue" style="left: 370px; top: 0px;">
-    And here's some HTML, right in this box! Let's make a change. Replace <strong>Hello World</strong> with <strong>The Website of <span id="studentName"></span></strong>, and click save!
+  <div class="dialogue" style="left: 430px; top: 0px;">
+    And here's some HTML, right in this box! Let's make a change. Replace <strong>Hello World</strong> with <strong><span id="studentName"></span>'s Website</strong>, and click save!
   </div>
-  <div class="dialogue" style="left: 370px; top: 230px;">
+  <div class="dialogue" style="left: 370px; top: 260px;">
     <p>You'll see the results here.</p>
     <p>Make sure to check the green boxes below for important bonus info!</p>
   </div>
@@ -21,7 +21,7 @@
 
 <script>
   var storedName = sessionStorage.getItem('name')
-  var answer = 'The Website of '+storedName
+  var answer = storedName+ "'s Website"
   $('#studentName').text(storedName)
 
   function checkHomework(editor) {

views/tutorial/html/3.erb

@@ -1,4 +1,4 @@
-<div class="comic" style="height: 600px; background-image: url(/img/tutorial/ch1pg3.png);">
+<div class="comic" style="height: 500px; background-image: url(/img/tutorial/ch1pg3.png); background-size: 483px;">
   <div class="dialogue" style="left: 50px; top: 20px;">
     Great!
     Check out your site at <a href="">victoria.neocities.org</a>.
@@ -28,7 +28,7 @@
 </div>
 
 <script>
-  var answer = '<h1>The website of '+sessionStorage.getItem('name')+'</h1>'
+  var answer = '<h1>'+sessionStorage.getItem('name')+"'s Website</h1>"
 
   $('#answer').text(answer)
 

views/tutorial/html/4.erb

@@ -1,4 +1,4 @@
-<div class="comic" style="height: 600px; background-image: url(/img/tutorial/ch1pg4.png);">
+<div class="comic" style="height: 600px; background-image: url(/img/tutorial/ch1pg4.png); background-size: 489px;">
   <div class="dialogue">
     Now let's add a paragraph of text below the heading (h1). Perhaps "Welcome to my website" or your favorite quote.
   </div>

views/tutorial/html/5.erb

@@ -1,4 +1,4 @@
-<div class="comic" style="height: 600px; background-image: url(/img/tutorial/ch1pg5.png); margin-top: 3em">
+<div class="comic" style="height: 600px; background-image: url(/img/tutorial/ch1pg5.png); margin-top: 3em; background-size: 476px;">
   <div class="dialogue">
     You're writing HTML! You're doing it! Everything you need to know is just another tag!
   </div>

views/tutorial/html/6.erb

@@ -5,10 +5,10 @@
   <div class="dialogue" style="top: 20px; left: 360px">
     Your Neocities web directory already includes a portrait of me called <strong>cat.png</strong>.
   </div>
-  <div class="dialogue" style="top: 140px; left: 390px">
+  <div class="dialogue" style="top: 140px; left: 410px">
     Add it to your page like so: <strong>&lt;img src="/cat.png"&gt;</strong>
   </div>
-  <div class="dialogue" style="top: 230px; left: 400px">
+  <div class="dialogue" style="top: 230px; left: 420px">
     That's it! No closing tag needed for images.
   </div>
 </div>

views/tutorial/html/7.erb

@@ -1,5 +1,5 @@
-<div class="comic" style="height: 600px; background-image: url(/img/tutorial/ch1pg7.png);">
-  <div class="dialogue" style="left: 0">
+<div class="comic" style="height: 600px; background-image: url(/img/tutorial/ch1pg7.png); background-size: 515px;margin-top:4em">
+  <div class="dialogue" style="left: 0;top:-20px;">
     Now maybe your website needs a list. Here's how an unordered list looks:
     <div style="text-align: left; font-weight: bold">
     &lt;ul&gt;<br>
@@ -9,10 +9,10 @@
     &lt;/ul&gt;
     </div>
   </div>
-  <div class="dialogue">
+  <div class="dialogue" style="left: 350px; top: 0;">
     First, add a list to your page, but replace my favorite activities with your own!
   </div>
-  <div class="dialogue" style="left: 380px; top: 140px;">
+  <div class="dialogue" style="left: 440px; top: 120px;">
     Second, put an h2 header above the list with some kind of title, like "Interests."
   </div>
 </div>

views/tutorial/html/8.erb

@@ -1,4 +1,4 @@
-<div class="comic" style="height: 600px; background-image: url(/img/tutorial/ch1pg8.png);">
+<div class="comic" style="height: 600px; background-image: url(/img/tutorial/ch1pg8.png); background-size: 489px;">
   <div class="dialogue">
     Now add a link to one of your list items. If nested properly, it should look something like this:
 <br><strong>&lt;li&gt;&lt;a href="http://yarn.com"&gt;Yarn&lt;/a&gt;&lt;/li&gt;</strong>

views/tutorial/html/9.erb

@@ -1,11 +1,11 @@
-<div class="comic" style="height: 600px; background-image: url(/img/tutorial/ch1pg9.png);">
+<div class="comic" style="height: 650px; background-image: url(/img/tutorial/ch1pg9.png); background-size: 481px">
   <div class="dialogue">
     Good work! Everything you've written has been saved to index.html, which is the first web page people see when they <a href="<%= current_site.uri %>">visit your site</a>.
   </div>
-  <div class="dialogue" style="left: 280px;top: 140px">
+  <div class="dialogue" style="left: 275px;top: 190px">
     You can find and edit index.html by visiting your <a href="/dashboard">Neocities dashboard</a>.
   </div>
-  <div class="dialogue" style="left: 280px;top: 570px">
+  <div class="dialogue" style="left: 280px;top: 580px">
     A cheat sheet of all the tags you've learned can be found in the tutorial section.
   </div>
 </div>

views/tutorial/layout.erb

@@ -15,8 +15,12 @@
     <% else %>
 
     <div class="col col-40 interact">
+      <% if request.path =~ /\/html\/9/ %>
+      <a href="/tutorial/html/10" class="btn btn-action">Next</a>
+      <% else %>
       <input id="submit" class="btn btn-action" type="submit" value="Save">
       <input id="reset" class="btn btn-action" type="submit" value="Reset">
+      <% end %>
       <h3>HTML</h3>
       <textarea id="editor" class="editor">
 <html>
@@ -27,7 +31,7 @@
   </body>
 </html>
       </textarea>
-      <div class="error" style="display: none; margin-top: 10px">
+      <div class="error" style="display: none; margin-top: 0">
         <i class="fa fa-exclamation-triangle"></i> Try again: make sure you change Hello World to something else.
       </div>
 
@@ -52,12 +56,12 @@
 
   function ok(msg, path) {
     displayInfo(msg, {
-      background: '#33CC33'
+      background: '#88d128'
     })
 
     setTimeout(function() {
       window.location.href = path
-    }, 3000)
+    }, 1000)
   }
 
   function displayInfo(html, cssOpts) {