Updated web site with comparison of free and paid versions

lhchavez · Apr 6, 2012 · 8a9ae71 · 8a9ae71
1 parent 4ac514a
commit 8a9ae71
Show file tree

Hide file tree

Showing 3 changed files with 76 additions and 4 deletions.
diff --git a/web/gallery.js b/web/gallery.js
@@ -9,11 +9,11 @@ $(function() {
          }
       );
    }
+
    if (!$.browser.msie || parseInt($.browser.version, 10) >= 9) {
       setTimeout(rotateScreenshots, 3000);
    }
 
-
    $("#nav-features").click(function(e) {
 
       $("#reviews").fadeOut(function() {
@@ -42,5 +42,17 @@ $(function() {
       });
       e.preventDefault();
    });
+
+   $("#download").click(function(e) {
+      $("#overlay").fadeIn();
+      $("#compare").fadeIn();
+
+      e.preventDefault();
+   });
+
+   $("#overlay, #close").click(function() {
+      $("#overlay").fadeOut();
+      $("#compare").fadeOut();
+   });
 
 });
diff --git a/web/index.html b/web/index.html
@@ -10,7 +10,7 @@
 
     <link rel="stylesheet" href="fonts.css" />
     <link rel="stylesheet" href="style.css" />
-    <link rel="stylesheet" type="text/css" href="mobile.css" media="screen and (max-device-width: 480px)" /> 
+    <!--<link rel="stylesheet" type="text/css" href="mobile.css" media="screen and (max-device-width: 480px)" />-->
 
     <script src="jquery.js"></script>
     <script src="jquery.backgroundpos.min.js"></script>
@@ -36,7 +36,7 @@
     <div id="icon">
         <a href="http://www.windowsphone.com/s?appid=f9da43e4-9bbb-4a6d-842d-629bd6bdc84b"><img src="icon.png" alt="Gchat" /></a>
         <br />
-        <a href="http://www.windowsphone.com/s?appid=f9da43e4-9bbb-4a6d-842d-629bd6bdc84b"><img src="download.png" alt="Download Gchat" /></a>
+        <a id="download" href="http://www.windowsphone.com/en-US/apps/1f377d53-5fbf-4549-928f-2d246891a735"><img src="download.png" alt="Download Gchat" /></a>
     </div>
 
     <h1 id="title">Gchat</h1>
@@ -135,5 +135,45 @@ <h3>Other bugs or feature suggestions</h3>
 
     </div>
 
+    <div id="overlay"></div>
+
+    <div id="compare">
+      <div id="toolbar">
+        <button id="close"><img src="close.png" alt="Close" /></button>
+      </div>
+      <table>
+        <thead>
+          <tr>
+            <th></th>
+            <th><img src="icon99.png" alt="Gchat" /><br/>Gchat</th>
+            <th><img src="icon-plus99.png" alt="Gchat" /><br/>Gchat+</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <th>Notification timeout<abbrv title="Reset each time app is opened">*<abbrv></th>
+            <td>2 hours</td>
+            <td>24 hours<abbrv title="Coming soon!">*<abbrv></td>
+          </tr>
+          <tr>
+            <th>Support Gchat's development</th>
+            <td></td>
+            <td><img src="check.png" alt="Yes" /></td>
+          </tr>
+          <tr>
+            <th>Price</th>
+            <td>FREE</td>
+            <td>Only $0.99</td>
+          </tr>
+          <tr>
+            <th>&nbsp;</th>
+            <td><a href="http://www.windowsphone.com/en-US/apps/f9da43e4-9bbb-4a6d-842d-629bd6bdc84b">Install</a></td>
+            <td><a href="http://www.windowsphone.com/en-US/apps/1f377d53-5fbf-4549-928f-2d246891a735">Buy</a></td>
+          <tr>
+        </tbody>
+      </table>
+    </div>
+
+
 </body>
 </html>
diff --git a/web/style.css b/web/style.css
@@ -30,4 +30,24 @@ p.source { font-style: italic; text-align: right; margin-top: -8px; padding-righ
 
 #social { margin-top: 2em; }
 #tw, #twfollow {display:inline-block; width:105px;}
-#fb {border:none; overflow:hidden; width:500px; height:30px; margin-top:19px;}
+#fb {border:none; overflow:hidden; width:500px; height:30px; margin-top:19px;}
+
+abbrv { border-bottom: 1px dotted black; }
+
+#overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(50, 50, 50, 0.5); z-index:1000; display: none; }
+
+#compare { position: absolute; top: 10%;  left: 25%; right: 25%; min-width: 50%; background: #eee; padding: 20px; text-align: center; z-index:1001; display: none; }
+
+#compare #toolbar { text-align: right; }
+
+#toolbar #close { padding:0; border-radius: 12px; border: 2px solid black;}
+#toolbar #close:hover { background: #ddd; }
+#toolbar #close:active { background: #999; }
+#toolbar #close img { height:20px; margin-top:0px; margin-bottom: -3px;}
+
+#compare table { border-collapse: collapse; margin-left: auto; margin-right: auto; }
+#compare table td { border-bottom: 1px solid #666; border-top: 1px solid #666; }
+#compare table th { padding: 10px; }
+#compare table tbody th { text-align: right; }
+#compare table td { text-align: center; }
+#compare table td img { height:32px; }