more info and resources on the index page

bit of styling added

4 files changed, 74 insertions, 19 deletions

diff --git a/example/public/example.css b/example/public/example.css
new file mode 100644
index 0000000..265028b
--- /dev/null
+++ b/example/public/example.css
@@ -0,0 +1,25 @@
+section {
+  padding-top: 20px;
+}
+
+[class^="icon-"], [class*=" icon-"] {
+  background-image: url("glyphicons-halflings.png");
+}
+
+.with-icons {
+  list-style: none;
+  padding-top: 20px;
+}
+
+.with-icons i {
+  margin: 5px;
+}
+.with-icons li {
+  font-size: 18px;
+  line-height: 35px;
+
+}
+
+.btn {
+  margin-bottom: 15px;
+}
diff --git a/example/public/glyphicons-halflings.png b/example/public/glyphicons-halflings.png
new file mode 100644
index 0000000..79bc568
--- /dev/null
+++ b/example/public/glyphicons-halflings.png
diff --git a/example/views/index.erb b/example/views/index.erb
index 0ff91e1..d35bd85 100644
--- a/example/views/index.erb
+++ b/example/views/index.erb
@@ -1,50 +1,79 @@
-
+<section id="info">
 <div class="row-fluid">
-  <div class="span4">
-    <h2>1. Signup</h2>
-    <p>
-    Your browser transfers an encrypted verifier based your password. But it does not send the password itself.
-    </p>
+  <div class="span8">
+    <h2>Features</h2>
+    <ul class="with-icons">
+      <li><i class="icon-refresh"></i>Mutual handshake - validates server on login</li>
+      <li><i class="icon-lock"></i>Using strong cryptography</li>
+      <li><i class="icon-eye-close"></i>No eavesdropping on the network</li>
+      <li><i class="icon-random"></i>Challange response prevents replay attacs</li>
+      <li><i class="icon-hdd"></i>Seeding prevents dictionary attacs on the server</li>
+    </ul>
   </div>
   <div class="span4">
-    <h2>2. Login</h2>
+    <h2>Resources</h2>
     <p>
-    You enter your password - your browser exchanges encrypted data with the site to check if it was the right one.
+    <a href="http://srp.stanford.edu/">Official website at Stanford</a>
     </p>
-  </div>
-  <div class="span4">
-    <h2>3. Verify</h2>
     <p>
-    You can see from the logs that your password was not send. The login process is different each time so it can't be replayed.
+    <a href="https://en.wikipedia.org/wiki/Secure_remote_password_protocol">Wikipedia Article on SRP</a>
     </p>
+    <p>Libraries and Implementations:</p>
+    <ul>
+      <li>
+        <a href="http://srp.stanford.edu/download.html">C library</a>
+        with telnet and ftp <i>(scroll&nbsp;down)</i>
+      </li>
+      <li>
+        <a href="http://srp.stanford.edu/download.html">Open SSL patches</a>
+        </li>
+      <li>
+        <a href="http://www.bouncycastle.org">Java and C# implementations</a>
+      </li>
+    </ul>
   </div>
 </div>
+</section>
+<section id="demo">
+<h1 class="page-header">Try it ... <small>It works just like a normal password - but it's more save.</small></h1>
 <div class="row-fluid">
   <div class="span4">
+    <h2>1. Signup</h2>
+    <p>
+    Your browser transfers an encrypted verifier based your password. But it does not send the password itself.
+    </p>
     <% if @user %>
       <h4> You are signed up as <%= @user.login %>. </h4>
     <% end %>
+    <%= button_link(:signup, :primary => !@user) %>
   </div>
   <div class="span4">
+    <h2>2. Login</h2>
+    <p>
+    You enter your password - your browser exchanges encrypted data with the site to check if it was the right one.
+    </p>
     <% if @user && @user.active %>
       <h4> You are logged in.</h4>
     <% end %>
+    <%= button_link(:login, :primary => @user && !@user.active) %>
   </div>
   <div class="span4">
+    <h2>3. Verify</h2>
+    <p>
+    You can see from the logs that your password was not send. The login process is different each time so it can't be replayed.
+    </p>
+    <%= button_link(:verify, :primary => @user && @user.active) %>
   </div>
 </div>
 <div class="row-fluid">
   <div class="span4">
-    <%= button_link(:signup, :primary => !@user) %>
   </div>
   <div class="span4">
-    <%= button_link(:login, :primary => @user && !@user.active) %>
   </div>
   <div class="span4">
-    <%= button_link(:verify, :primary => @user && @user.active) %>
   </div>
 </div>
-
-
-
-
+<div class="row-fluid">
+  <div class="span4">
+</div>
+</section>
diff --git a/example/views/layout.erb b/example/views/layout.erb
index 6b56eac..2b4e8f2 100644
--- a/example/views/layout.erb
+++ b/example/views/layout.erb
@@ -5,6 +5,7 @@
   <title>Secure remote password</title>
   <link rel="stylesheet" type="text/css" href="bootstrap.min.css" />
   <link rel="stylesheet" type="text/css" href="bootstrap-responsive.min.css" />
+  <link rel="stylesheet" type="text/css" href="example.css" />
 </head>
 <body>