[tor-cloud/master] Applied patch from Jeremy - tor-commits

22 Nov 2011

commit 0194512fdf68e9636713f28d565269dc503d5cd8
Author: Runa A. Sandvik runa.sandvik@gmail.com
Date:   Tue Nov 22 09:58:47 2011 +0000
Applied patch from Jeremy
---
 html/css/custom.css |   33 ++++++++++++++++++-
 html/index.html     |   91 +++++++++++++++++++++++++++++++++++++++++++++++---
 2 files changed, 117 insertions(+), 7 deletions(-)

diff --git a/html/css/custom.css b/html/css/custom.css
index eec6edd..d415893 100644
--- a/html/css/custom.css
+++ b/html/css/custom.css
@@ -243,6 +243,37 @@ a.signup {
   margin-top: 20px;
   }
+/* non-javascript 'Step-By-Step Guide' */
+.setupguide {
+  position: relative;
+  width:500px;
+  margin: 0px auto;
+  }
+
+.step {
+  text-align: center;
+  }
+
+.step h2 {
+  color: #885ca4;
+  font-size: 20px;
+  }
+
+.step img {
+  border: 1px solid #000;
+  margin: 15px auto 0px auto;
+  }
+
+.caption {
+  width: 438px;
+  padding: 20px 20px;
+  margin: -4px auto 0px auto;
+  text-align: left;
+  color: #fff;
+  font-size: 14px;
+  background: #222222;
+  }
+
 /* 'SUPPORT' SECTION */
 p.support {
   text-align: center;
@@ -250,4 +281,4 @@ p.support {
.support a {
   font-size:16px;
-  }
\ No newline at end of file
+  }
diff --git a/html/index.html b/html/index.html
index b0ab719..f52eca7 100644
--- a/html/index.html
+++ b/html/index.html
@@ -26,6 +26,16 @@
    <script src="js/jquery.tools.min.js"></script>
    <script src="js/jquery.nivo.slider.pack.js"></script>
    <script src="js/libs/modernizr-2.0.6.min.js"></script>
+<!-- Prepare the layout for Javascript -->
+	<script type="text/javascript">
+	  $(function(){
+	    $('.setupguide').css('display', 'none');
+	    $('.slider-wrapper').css('display', 'block');
+	    $('#what_is_it').attr('id', 'null');
+	    $('#get_started').attr('id', 'null');
+	    $('#faq').attr('id', 'null');
+	  });
+	</script>
</head>
 <body>
@@ -46,7 +56,7 @@
    <div class="panes wrap">
<!-- What it is -->
-	  <div class="main" role="main">
+	  <div id="what_is_it" class="main" role="main">
        <hgroup>
          <div class="deco first"></div>
          <h2>Tor bridges in the Amazon cloud</h2>
@@ -91,7 +101,7 @@
      </div>
<!-- Get Started -->
-	  <div class="main" role="main">
+	  <div id="get_started" class="main" role="main">
        <hgroup>
          <div class="deco first"></div>
          <h2>Sign up</h2>
@@ -135,7 +145,9 @@
        management console. Simply follow the steps as illustrated below,
        and your bridge will up and running in just a couple of
        minutes:</p>
-	    <div class='slider-wrapper theme-orman'>
+
+<!-- Nivo Slider -->
+	    <div class='slider-wrapper theme-orman' style="display:none;">
          <div id='slider' class='nivoSlider'>
    	  <img src="img/tor-1.png" alt="" title="Click
    	  &quot;Continue&quot;. (No changes needed here.)"/>
@@ -164,10 +176,77 @@
    	  done! Congratulations!"/>
          </div>
        </div>
+
+<!-- Slider Fallback -->
+	    <div class="setupguide">
+	      <div class="step">
+		  <div class="deco"></div>
+		  <h2>Step 1</h2>
+		  <img src="img/tor-1.png"/>
+		  <div class="caption">
+		    Click "Continue". (No changes needed here.)
+		  </div>
+	      </div>
+
+	      <div class="step">
+		  <div class="deco"></div>
+		  <h2>Step 2</h2>
+		  <img src="img/tor-2.png"/>
+		  <div class="caption">
+		    Click "Continue". (No changes needed here.)
+		  </div>
+	      </div>
+
+	      <div class="step">
+		  <div class="deco"></div>
+		  <h2>Step 3</h2>
+		  <img src="img/step-3.png"/>
+		  <div class="caption">
+		    Click "Continue". (No changes needed here.)
+		  </div>
+	      </div>
+
+	      <div class="step">
+		  <div class="deco"></div>
+		  <h2>Step 4</h2>
+		  <img src="img/step-4.png"/>
+		  <div class="caption">
+		    Select "Create a new Key Pair", type "tor-cloud-servers" for key pair name, and click "Create & Download your Key Pair". You will need the key pair if you want to connect to your instance using SSH.
+		  </div>
+	      </div>
+
+	      <div class="step">
+		  <div class="deco"></div>
+		  <h2>Step 5</h2>
+		  <img src="img/step-5.png"/>
+		  <div class="caption">
+		    Select "Create a new Security Group", type "tor-cloud-servers" for Group Name and Group Description. You need to create two rules; HTTPS and SSH. Select "HTTPS" from the "Create a new rule" dropdown and click on "Add Rule". Do the same for SSH. Then click "Continue".
+		  </div>
+	      </div>
+
+	      <div class="step">
+		  <div class="deco"></div>
+		  <h2>Step 6</h2>
+		  <img src="img/step-6.png"/>
+		  <div class="caption">
+		    Click "Launch."
+		  </div>
+	      </div>
+
+	      <div class="step">
+		  <div class="deco"></div>
+		  <h2>Step 7</h2>
+		  <img src="img/step-7.png"/>
+		  <div class="caption">
+		    You're done! Congratulations!
+		  </div>
+	      </div>
+	    </div>
+
      </div>
<!-- FAQ -->
-<div class="main" role="main">
+<div id="faq" class="main" role="main">
    <hgroup>
    <div class="deco first"></div>
    <h2>Frequently Asked Questions (FAQ)</h2>
@@ -230,9 +309,9 @@
    <footer>
      <div id="hbody">
        <p>The Tor Cloud project is developed and maintained by
-	    partnership between <a
+	    partnership between <a style="color:#885CA4"
    	    href="http://expressiontech.org">ExpressionTech</a>
-	    and <a href="https://www.torproject.org">The Tor Project</a>.<br />
+	    and <a style="color:#885CA4" href="https://www.torproject.org">The Tor Project</a>.<br />
        "Tor" and the "Onion Logo" are registered trademarks of The Tor Project, Inc.<br />
        Ubuntu is a registered trademark of Canonical Ltd.</p>

    