From f5bb352032377f565fa20db6d31ebea1bf481017 Mon Sep 17 00:00:00 2001
From: Kyle Drake <kyle@kyledrake.net>
Date: Wed, 15 Oct 2014 16:46:16 -0700
Subject: [PATCH] lil fixes for new index and plans

---
 views/index.erb         |   4 +-
 views/plan/_pricing.erb | 101 ++++++++++++++++++++++++++++------------
 2 files changed, 74 insertions(+), 31 deletions(-)
diff --git a/views/index.erb b/views/index.erb
index 6e547487..d0b78e57 100644
--- a/views/index.erb
+++ b/views/index.erb
@@ -35,6 +35,8 @@
   <!--[if lt IE 9]>
     <script type="text/javascript" src="/js/html5.min.js"></script>
   <![endif]-->
+
+  <script src="/js/jquery-1.11.0.min.js"></script>
 </head>
 
   <body class="hp">
@@ -312,7 +314,7 @@
 </footer>
 
     </div>
-    <script src="/js/jquery-1.11.0.min.js"></script>
     <script src="/js/app.min.js"></script>
+    <script src="/js/bootstrap.min.js"></script>
   </body>
 </html>
\ No newline at end of file
diff --git a/views/plan/_pricing.erb b/views/plan/_pricing.erb
index eacc8f4a..fe68f592 100644
--- a/views/plan/_pricing.erb
+++ b/views/plan/_pricing.erb
@@ -13,7 +13,8 @@
     
     <div class="body">
       <div class="col col-25 free">
-        <div class="plan-image free"></div>
+        <div class="plan-image free" data-original-title="Pick me!">
+        </div>
         <h3>Free</h3>
         <div class="price">$0</div>
         <div class="interval">per month</div>
@@ -25,7 +26,7 @@
       </div>
       
       <div class="col col-25 supporter">
-        <div class="plan-image"></div>
+        <div class="plan-image" data-original-title="No no, pick me!"></div>
         <h3>Supporter</h3>
         <div class="price">$5</div>
         <div class="interval">per month</div>
@@ -43,7 +44,7 @@
       
       <div class="col col-25 catbus">
 
-        <div class="plan-image"></div>
+        <div class="plan-image" data-original-title="VROOOOOOM!"></div>
         <h3>Cat Bus</h3>
         <div class="price">$20</div>
         <div class="interval">per month</div>
@@ -58,12 +59,12 @@
           <li>DDoS mitigation</li>
           <li>Custom SSL Certificates</li>
           <li>No upload type restrictions</li>
-          <li>Coming Soon: Unlimited Sites</li>
+          <li>Unlimited Site Creation</li>
         </ul>
       </div>
       
       <div class="col col-25 fatcat">
-        <div class="plan-image"></div>
+        <div class="plan-image" data-original-title="Jolly good."></div>
         <h3>Fat Cat</h3>
         <div class="price">$50</div>
         <div class="interval">per month</div>
@@ -86,7 +87,8 @@
     
   </div>
   
-  <h2><a href="">Compare Plans <i class="fa fa-caret-down"></i></a></h2>
+  <!-- <h2><a href="">Compare Plans <i class="fa fa-caret-down"></i></a></h2> -->
+  <h2>Compare Plans</h2>
   
   <table class="plan-chart">
     <tr>
@@ -113,82 +115,105 @@
       </th>
     </tr>
     <tr>
-      <td class="feature-column">Storage</td>
+      <td class="feature-column">
+        <span data-original-title="How much disk space you can use for your site. More space means you can upload more files.">Storage</span>
+      </td>
       <td>30 MB</td>
       <td>1 GB</td>
       <td>10 GB</td>
       <td>100 GB</td>
     </tr>
     <tr>
-      <td class="feature-column">Bandwidth</td>
+      <td class="feature-column">
+        <span data-original-title="How much content you can serve in one month. Don't worry - these are soft limits, and we won't take your site down automatically. We'll contact you and see if we can figure something out. We're reasonable.">Bandwidth</span>
+      </td>
       <td>10 GB</td>
       <td>100 GB</td>
       <td>500 GB</td>
       <td>2 TB</td>
     </tr>
     <tr>
-      <td class="feature-column">No advertising, ever</td>
+      <td class="feature-column">
+        <span data-original-title="We will never put ads on your site, or give your data to marketers. In fact, we're prohibited from doing it in our own Terms of Service.">No advertising, ever</span>
+      </td>
       <td><i class="fa fa-check"></i></td>
       <td><i class="fa fa-check"></i></td>
       <td><i class="fa fa-check"></i></td>
       <td><i class="fa fa-check"></i></td>
     </tr>
     <tr>
-      <td class="feature-column">WebDAV Uploading</td>
+      <td class="feature-column">
+        <span data-original-title="You can mount your Neocities site to your computer as a hard drive, making it easy to update with your favorite HTML editor.">WebDAV Uploading</span>
+      </td>
       <td><i class="fa fa-check"></i></td>
       <td><i class="fa fa-check"></i></td>
       <td><i class="fa fa-check"></i></td>
       <td><i class="fa fa-check"></i></td>
     </tr>
     <tr>
-      <td class="feature-column">Neocities.org Subdomain</td>
+      <td class="feature-column">
+        <span data-original-title="Each site comes with a free Neocities address (yoursitename.neocities.org).">Neocities.org Subdomain</span>
+      </td>
       <td><i class="fa fa-check"></i></td>
       <td><i class="fa fa-check"></i></td>
       <td><i class="fa fa-check"></i></td>
       <td><i class="fa fa-check"></i></td>
     </tr>
     <tr>
-      <td class="feature-column">One-Click Backups</td>
+      <td class="feature-column">
+        <span data-original-title="Downloading your neocities site is as easy as clicking a button.">One-Click Backups</span>
+      </td>
       <td><i class="fa fa-check"></i></td>
       <td><i class="fa fa-check"></i></td>
       <td><i class="fa fa-check"></i></td>
       <td><i class="fa fa-check"></i></td>
     </tr>
     <tr>
-      <td class="feature-column">Site Tags</td>
+      <td class="feature-column">
+        <span data-original-title="Site tags make it easy to find sites you're interested in, and join communities of sites. It's like a web ring, but even better.">Site Tags</span>
+      </td>
       <td><i class="fa fa-check"></i></td>
       <td><i class="fa fa-check"></i></td>
       <td><i class="fa fa-check"></i></td>
       <td><i class="fa fa-check"></i></td>
     </tr>
     <tr>
-      <td class="feature-column">RSS Feed</td>
+      <td class="feature-column">
+        <span data-original-title="Each site has it's own RSS feed that make it easy to let people know when your site changes.">RSS Feed</span>
+      </td>
       <td><i class="fa fa-check"></i></td>
       <td><i class="fa fa-check"></i></td>
       <td><i class="fa fa-check"></i></td>
       <td><i class="fa fa-check"></i></td>
     </tr>
     <tr>
-      <td class="feature-column">Follow Your Favorite Sites</td>
+      <td class="feature-column">
+        <span data-original-title="Like a site on Neocities? Now you can follow it, and see when they update!">Follow Your Favorite Sites</span>
+      </td>
       <td><i class="fa fa-check"></i></td>
       <td><i class="fa fa-check"></i></td>
       <td><i class="fa fa-check"></i></td>
       <td><i class="fa fa-check"></i></td>
     </tr>
     <tr>
-      <td class="feature-column">Site Profile</td>
+      <td class="feature-column">
+        <span data-original-title="Each site now has it's own profile page, allowing users to see when your site updates, follow your site, and leave feedback.">Site Profile</span>
+      </td>
       <td><i class="fa fa-check"></i></td>
       <td><i class="fa fa-check"></i></td>
       <td><i class="fa fa-check"></i></td>
       <td><i class="fa fa-check"></i></td>
     </tr>
     <tr>
-      <td class="feature-column">Neocities Site Editor</td>
+      <td class="feature-column">
+        <span data-original-title="Our HTML5 site editor makes it easy to make quick changes to your site, even if you're on the run.">Neocities Site Editor</span>
+      </td>
       <td><i class="fa fa-check"></i></td>
       <td><i class="fa fa-check"></i></td>
       <td><i class="fa fa-check"></i></td>
       <td><i class="fa fa-check"></i></td>
     </tr>
+    <!--
     <tr>
       <td class="feature-column">Site Tipping (Coming Soon)</td>
       <td><i class="fa fa-check"></i></td>
@@ -196,47 +221,63 @@
       <td><i class="fa fa-check"></i></td>
       <td><i class="fa fa-check"></i></td>
     </tr>
+    -->
     <tr>
-      <td class="feature-column">Custom Domains</td>
+      <td class="feature-column">
+        <span data-original-title="Add your domain name to your site!">Custom Domains</span>
+      </td>
       <td></td>
       <td><i class="fa fa-check"></i></td>
       <td><i class="fa fa-check"></i></td>
       <td><i class="fa fa-check"></i></td>
     </tr>
     <tr>
-      <td class="feature-column">High Performance Global CDN Cache</td>
+      <td class="feature-column">
+        <span data-original-title="Our worldwide network of servers cache your web site regionally, making your site load fast, no matter where your users are. Surfs up!">High Performance Global CDN Cache</span>
+      </td>
       <td></td>
       <td><i class="fa fa-check"></i></td>
       <td><i class="fa fa-check"></i></td>
       <td><i class="fa fa-check"></i></td>
     </tr>
     <tr>
-      <td class="feature-column">DDoS Mitigation</td>
-      <td></td>
-      <td><i class="fa fa-check"></i></td>
-      <td><i class="fa fa-check"></i></td>
-      <td><i class="fa fa-check"></i></td>
-    </tr>
-    <tr>
-      <td class="feature-column">Unlimited Site Creation (Coming Soon)</td>
+      <td class="feature-column">
+        <span data-original-title="Make as many sites as you want, with one login.">Unlimited Site Creation</span>
+      </td>
       <td></td>
       <td></td>
       <td><i class="fa fa-check"></i></td>
       <td><i class="fa fa-check"></i></td>
     </tr>
     <tr>
-      <td class="feature-column">Custom SSL Certificates</td>
+      <td class="feature-column">
+        <span data-original-title="Upload your SSL certificate for your domain name, preventing snoops from seeing your user's traffic.">Custom SSL Certificates</span>
+      </td>
       <td></td>
       <td></td>
       <td><i class="fa fa-check"></i></td>
       <td><i class="fa fa-check"></i></td>
     </tr>
     <tr>
-      <td class="feature-column">No File Upload Type Restrictions</td>
+      <td class="feature-column">
+        <span data-original-title="No whitelists - you can upload anything you want (no copyrighted content, trojans, or w4r3z, please).">No File Upload Type Restrictions</span>
+      </td>
       <td></td>
       <td></td>
       <td></td>
       <td><i class="fa fa-check"></i></td>
     </tr>
   </table>
-</section>
\ No newline at end of file
+</section>
+
+<script>
+  $(function() {
+    $('.feature-column span').tooltip({
+      placement: 'right'
+    })
+
+    $('.plan-image').tooltip({
+      placement: 'top'
+    })
+  })
+</script>
\ No newline at end of file

Storage	+ Storage +	30 MB	1 GB	10 GB	100 GB
Bandwidth	+ Bandwidth +	10 GB	100 GB	500 GB	2 TB
No advertising, ever	+ No advertising, ever +
WebDAV Uploading	+ WebDAV Uploading +
Neocities.org Subdomain	+ Neocities.org Subdomain +
One-Click Backups	+ One-Click Backups +
Site Tags	+ Site Tags +
RSS Feed	+ RSS Feed +
Follow Your Favorite Sites	+ Follow Your Favorite Sites +
Site Profile	+ Site Profile +
Neocities Site Editor	+ Neocities Site Editor +
Custom Domains	+ Custom Domains +
High Performance Global CDN Cache	+ High Performance Global CDN Cache +
DDoS Mitigation
Unlimited Site Creation (Coming Soon)	+ Unlimited Site Creation +
Custom SSL Certificates	+ Custom SSL Certificates +
No File Upload Type Restrictions	+ No File Upload Type Restrictions +