invite code page, details page, landing page text

content/enter-code.yaml

+---
+header: Welcome to the Insomnia 24/7 shells signup
+body: >
+  Please enter your invite code below.

content/enter-details.yaml

+---
+header: Welcome to the Insomnia 24/7 shells signup
+blurb: |
+  <h3>Specifying your reasons</h3>
+  <p>If you have an invite code you need not enter any additional reasons, though you are free to add them if you so desire. For those of you who do not have an invite code, please be as detailed as possible. Describe what projects you have planned or are working on now, what role our shell server would play in the development process, and why you cannot use another free service such as a free web host or GitHub for example. Add anything else you feel is relevant or may help us decide to give you a shell account.</p>
+  <p>Though we do not have a set list of reasons for which we do create accounts, there are a few we will definitely not give out accounts for. We are very sorry if this includes your desired usage but we need to enforce this to keep our service viable. We hope you understand.</p>
+  <p>The list of known "bad" reasons can be found on <a href="https://wiki.insomnia247.nl/wiki/Shells_FAQ#What_are_bad_reasons_for_an_invite.3F">our wiki</a>.
+body: >
+  Please enter your details below.

content/landing.yaml

 ---
+header: Welcome to the Insomnia 24/7 shells signup
+blurb: |
+  <h3>About our shells</h3>
+  <p>We run this service because we believe technology and programming are an important part of shaping the future of human society for the better. This is why chose long ago not to charge for our shell accounts. However, being a small independent shell host with no source of revenue from our services means we have had to make some difficult choices in regards to giving out shell accounts. To keep our service viable for the foreseeable future we need to be quite strict about giving out accounts and ensure that the available resources are used optimally and that no abuse will take place. This is why the invite and application system was created.</p>
+  <h3>About invite codes</h3>
+  <p>An invite can be acquired from a staff member or from someone you know who already has a shell account with us. Alternatively, you may apply without an invite code, but know that your application will be scrutinized very closely and only the very best applications will be able to get a shell account this way.</p>
 body: >
-  Welcome to the Insomnia 24/7 shells signup page!
-  Please choose below if you already have an invite code or not.
+  Please choose below if you have an invite code or not.

signup_site.rb

@@ -9,8 +9,31 @@ class SignupSite < Sinatra::Base
   set    :title, 'Shell signup - Insomnia 24/7'
 
   get '/' do
-    landing = YAML.load_file('content/landing.yaml')
-    @body = landing['body']
+    landing   = YAML.load_file('content/landing.yaml')
+    @header   = landing['header']
+    @blurb    = landing['blurb']
+    @body     = landing['body']
+    @form     = erb :landing
+    @progress = 0
+    erb :index
+  end
+
+  get '/enter-code' do
+    ec        = YAML.load_file('content/enter-code.yaml')
+    @header   = ec['header']
+    @body     = ec['body']
+    @form     = erb :enter_code
+    @progress = 25
+    erb :index
+  end
+
+  get '/enter-details' do
+    ed        = YAML.load_file('content/enter-details.yaml')
+    @header   = ed['header']
+    @blurb    = ed['blurb']
+    @body     = ed['body']
+    @form     = erb :enter_details
+    @progress = 50
     erb :index
   end
 end

test.rb

@@ -16,6 +16,6 @@ describe 'SignupSite main page' do
 
   it 'should return the landing page' do
     get '/'
-    last_response.body.must_include 'Welcome to the Insomnia 24/7 shells signup page!'
+    last_response.body.must_include 'Welcome to the Insomnia 24/7 shells signup'
   end
 end

views/enter_code.erb

+<form class="form-horizontal" method="post" action="check-code">
+  <fieldset>
+    <div class="form-group">
+      <label for="input_invite" class="col-lg-2 control-label">Invite code</label>
+      <div class="col-lg-10">
+        <input type="text" class="form-control" id="input_invite" placeholder="1234abcd-1234-5678-9abc-432abc987def">
+      </div>
+    </div>
+    <div class="form-group">
+      <div class="col-lg-10 col-lg-offset-2">
+        <button type="submit" class="btn btn-default">Submit</button>
+      </div>
+    </div>
+  </fieldset>
+</form>

views/enter_details.erb

+<form class="form-horizontal">
+  <fieldset>
+    <div class="form-group">
+      <label for="input_username" class="col-lg-2 control-label">User name</label>
+      <div class="col-lg-10">
+        <input type="text" class="form-control" id="input_username" placeholder="User name">
+        <span class="help-block">We strongly recommend a user name with only lowercase letters and numbers for compatibility reasons.</span>
+      </div>
+    </div>
+
+    <div class="form-group">
+      <label for="input_email" class="col-lg-2 control-label">E-mail address</label>
+      <div class="col-lg-10">
+        <input type="text" class="form-control" id="input_email" placeholder="E-mail address">
+      </div>
+    </div>
+
+    <div class="form-group">
+      <label for="input_phone" class="col-lg-2 control-label">Phone number (Optional)</label>
+      <div class="col-lg-10">
+        <input type="text" class="form-control" id="input_phone" placeholder="+15415553421">
+        <span class="help-block">If you provide your phone number here we will use your phone number to send you a text message with your new password. Please enter your full phone number including the country code.</span>
+      </div>
+    </div>
+
+    <div class="form-group">
+      <label for="input_reason" class="col-lg-2 control-label">Reasons</label>
+      <div class="col-lg-10">
+        <textarea class="form-control" rows="10" id="input_reason"></textarea>
+        <span class="help-block">Please read "Specifying your reasons" above.</span>
+      </div>
+    </div>
+
+    <div class="form-group">
+      <label for="input_invite" class="col-lg-2 control-label">Invite code</label>
+      <div class="col-lg-10">
+        <input type="text" class="form-control" id="input_invite" placeholder="No invite code" disabled>
+      </div>
+    </div>
+
+    <div class="form-group">
+      <div class="col-lg-10 col-lg-offset-2">
+        <button type="submit" class="btn btn-default">Submit</button>
+      </div>
+    </div>
+  </fieldset>
+</form>

views/index.erb

 <!DOCTYPE html>
-<html>
-<head>
-  <title><%= settings.title %></title>
-</head>
-<body>
-  <%= @body %>
-</body>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <link rel="stylesheet" href="./css/bootstrap-superhero.min.css">
+
+    <title><%= settings.title %></title>
+  </head>
+  <body>
+    <div class="container">
+      <div class="panel panel-default">
+        <div class="panel-heading well well-lg">
+          <h2><%= @header %></h2>
+        </div>
+        <% unless @blurb.nil? %>
+        <div class="panel-body well well-lg">
+          <%= @blurb %>
+        </div>
+        <% end %>
+        <div class="panel-body lead well well-lg">
+          <%= @body %>
+        </div>
+        <div class="panel-body well well-lg">
+          <%= @form %>
+        </div>
+        <div class="progress">
+          <div class="progress-bar progress-bar-info" style="width: <%= @progress %>%"></div>
+        </div>
+      </div>
+    </div>
+  </body>
 </html>

views/landing.erb

+<a href="enter-code" class="btn btn-default">Yes</a>
+<a href="enter-details" class="btn btn-default">No</a>