1. Ron Huang
  2. mirrorrr

Commits

Ron Huang  committed 0a9826b

Use Twitter Bootstrap CSS framework.

  • Participants
  • Parent commits d3701f5
  • Branches master

Comments (0)

Files changed (2)

File main.html

View file
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
-  "http://www.w3.org/TR/html4/loose.dtd">
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>Ron's Private Mirror Service</title>
+    <meta name="description" content="Mirrors the content of URLs you supply">
+    <meta name="author" content="Ron Huang">
 
-<html>
-<head>
-  <title>mirror - ɹoɹɹıɯ</title>
-  <link rel="stylesheet" href="static/base.2.css" type="text/css" charset="utf-8"/>
-  <link rel="icon" href="/favicon.ico" type="image/vnd.microsoft.icon" />
-  <script type="text/javascript" charset="utf-8">
-    var activeColor = "#000000";
-    var disabledColor = "#959595";
-    var defaultValue = "type url here...";
-    
-    function loadBox() {
-      var box = document.getElementById("url_entry");
-      if (box.value != defaultValue) {
-        box.style.color = activeColor;
-      }
-    }
-    
-    function focusBox() {
-      var box = document.getElementById("url_entry");
-      if (box.value == defaultValue) {
-        box.value = "";
-        box.style.color = activeColor;
-      }
-    }
-    
-    function blurBox() {
-      var box = document.getElementById("url_entry");
-      if (box.value == "") {
-        box.style.color = disabledColor;
-        box.value = defaultValue;
-      }
-    }
-  </script>
-</head>
-<body onload="loadBox();">
+    <!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
+    <!--[if lt IE 9]>
+      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
+    <![endif]-->
 
-<div id="wrapper">
-<div id="container">
+    <!-- Le styles -->
+    <link rel="stylesheet" href="http://twitter.github.com/bootstrap/1.4.0/bootstrap.min.css">
+    <link rel="stylesheet" href="static/test.css" type="text/css">
 
-<div id="header">
-  <span>mıɾɾoɾ</span><span>ɿoɿɿim</span>
-</div>
+    <!-- Le fav and touch icons -->
+    <link rel="shortcut icon" href="/favicon.ico">
 
-<div id="form_wrapper">
-  <form action="" method="get" accept-charset="utf-8">
-  <div id="input_wrapper">
-    <span id="http_prefix">http://</span><input onfocus="focusBox();" onblur="blurBox();" type="text" name="url" value="type url here..." id="url_entry"/><input id="go_button" type="submit" value="Go"/>
-  </div>
-  </form>
+    <script type="text/javascript">
+      var _gaq = _gaq || [];
+      _gaq.push(['_setAccount', 'UA-7044154-10']);
+      _gaq.push(['_trackPageview']);
 
-  <div id="warning">
-  Fair use: All content belongs to the original copyright holders, respectively.
-  </div>
-</div>
+      (function() {
+        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+      })();
+    </script>
+  </head>
 
-<div id="recent">
-  <div class="header">recent</div>
-  <div id="recent_entries">
-    {% for entry in latest_urls %}
-    <div class="url_container">
-      <span class="url"><a class="url{{forloop.counter}}" rel="nofollow" href="/{{entry.translated_address}}">{% if entry.display_address %}{{entry.display_address}}{% else %}{{entry.translated_address}}{% endif %}</a></span>
-      <span class="info url{{forloop.counter}}">{{entry.last_updated|timesince}} ago</span>
-    </div>
-    {% endfor %}
-  </div>
-</div>
-
-<div class="secure">
-  {% if secure_url %}<a href="{{secure_url}}">{% endif %}<img src="/static/{% if secure_url %}no{% endif %}lock.png" width="16" height="16"> {% if secure_url %}not secure</a>{% else %}secure{% endif %}
-</div>
+  <body>
 
-</div>
-</div>
+    <div class="topbar">
+      <div class="fill">
+        <div class="container">
+          <a class="brand" href="/">Mirror</a>
+          <ul class="nav">
+            <li class="active"><a href="/">Home</a></li>
+            <li><a href="/about">About</a></li>
+            <li><a href="/admin">Admin</a></li>
+          </ul>
+        </div>
+      </div>
+    </div>
 
-<script type="text/javascript">
+    <div class="container">
 
-  var _gaq = _gaq || [];
-  _gaq.push(['_setAccount', 'UA-7044154-9']);
-  _gaq.push(['_trackPageview']);
+      <div class="content">
+        <div class="page-header">
+          <h1>Home <small>Mirrors the content of URLs you supply</small></h1>
+        </div>
+        <div class="row">
+          <div class="span9">
+            <h2>Mirror</h2>
+            <form action="" method="get" accept-charset="utf-8">
+              <fieldset>
+                <div class="clearfix">
+                  <label for="url">URL to mirror</label>
+                  <div class="input">
+                    <div class="input-prepend">
+                      <span class="add-on">http://</span>
+                      <input class="xlarge" id="url" name="url" size="30" type="text" placeholder="Type URL here...">
+                    </div>
+                    <span class="help-block">
+                      All content belongs to the original copyright holders.
+                    </span>
+                  </div>
+                </div>
+                <div class="actions">
+                  <input type="submit" class="btn" value="Go">
+                </div>
+              </fieldset>
+            </form>
+          </div>
+          <div class="span5">
+            <h3>Recent</h3>
+            <div id="recent_entries">
+              <ul>
+                {% for entry in latest_urls %}
+                <li>
+                  <div class="url">
+                    <a class="url{{forloop.counter}}" rel="nofollow" href="/{{entry.translated_address}}">{% if entry.display_address %}{{entry.display_address}}{% else %}{{entry.translated_address}}{% endif %}</a>
+                  </div>
+                  <div class="info url{{forloop.counter}}">{{entry.last_updated|timesince}} ago</div>
+                </li>
+              {% endfor %}
+              </ul>
+            </div>
+            <h3>Ad</h3>
+            <div>
+              <script type="text/javascript"><!--
+                google_ad_client = "ca-pub-2284163765913634";
+                /* mirror service 2 */
+                google_ad_slot = "6429021466";
+                google_ad_width = 250;
+                google_ad_height = 250;
+                //-->
+              </script>
+              <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>
+            </div>
+          </div>
+        </div>
+      </div>
 
-  (function() {
-    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-  })();
+      <footer>
+        <p>&copy; Ron Huang 2011</p>
+      </footer>
 
-</script>
+    </div> <!-- /container -->
 
-</body>
+  </body>
 </html>

File static/base.css

View file
-* {
-  margin: 0;
-  padding: 0;
+/* Override some defaults */
+html, body {
+  background-color: #eee;
 }
-
 body {
-	background-color: #ffffff;
-	font-family: sans-serif;
-	margin: 0px;
-	padding: 8px;
-	color: #000000;
+  padding-top: 40px; /* 40px to make the container go all the way to the bottom of the topbar */
 }
-
-#header {
-  text-align: center;
-	font-size: 20px;
-	letter-spacing: 10px;
-	margin-bottom: 40px;
-	margin-top: 40px;
+.container > footer p {
+  text-align: center; /* center align it with the container */
 }
-
-#wrapper {
-  width: 100%;
+.container {
+  width: 820px; /* downsize our container to make the content feel a bit tighter and more cohesive. NOTE: this removes two full columns from the grid, meaning you only go to 14 columns and not 16. */
 }
 
-#container {
-  margin-left: auto;
-  margin-right: auto;
-  width: 600px;
+/* The white background content wrapper */
+.content {
+  background-color: #fff;
+  padding: 20px;
+  margin: 0 -20px; /* negative indent the amount of the padding to maintain the grid system */
+  -webkit-border-radius: 0 0 6px 6px;
+  -moz-border-radius: 0 0 6px 6px;
+  border-radius: 0 0 6px 6px;
+  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.15);
+  -moz-box-shadow: 0 1px 2px rgba(0,0,0,.15);
+  box-shadow: 0 1px 2px rgba(0,0,0,.15);
 }
 
-#form_wrapper {
-  margin-top: 10px;
-  width: 100%;
+/* Page header tweaks */
+.page-header {
+  background-color: #f5f5f5;
+  padding: 20px 20px 10px;
+  margin: -20px -20px 20px;
 }
 
-#input_wrapper {
-  width: 500px;
-  margin-left: auto;
-  margin-right: auto;
+/* Styles you shouldn't keep as they are for displaying this base example only */
+.content .span9,
+.content .span5 {
+  min-height: 500px;
 }
-
-#http_prefix {
-  vertical-align: middle;
+/* Give a quick and non-cross-browser friendly divider */
+.content .span5 {
+  margin-left: 0;
+  padding-left: 19px;
+  border-left: 1px solid #eee;
 }
 
-#go_button {
-  width: 50px;
-  vertical-align: middle;
-}
-
-#url_entry {
-  width: 375px;
-  border: 1px dashed black;
-  padding: 3px;
-  margin-left: 3px;
-  margin-right: 10px;
-	font-family: arial,helvetica,sans-serif;
-	font-weight: normal;
-	color: #959595;
-	font-size: 14px;
-}
-
-#warning {
-  font-size: 10px;
-  margin-top: 20px;
-  letter-spacing: 3px;
-  color: #7f7f7f;
-}
-
-#recent {
-	margin-top: 50px;
-}
-
-#recent_entries {
-  margin-left: 20px;
-}
-
-.url_container {
-	margin-top: 3px;
-	padding-left: 5px;
-}
-
-.info {
-	font-family: sans-serif;
-	font-size: 10px;
-	color: #606060;
-	margin-left: 5px;
-}
-
-.url {
-	font-size: 12px;
-}
-
-.url1 { color: #000000 !important; }
-.url2 { color: #0a0a0a !important; }
-.url3 { color: #151515 !important; }
-.url4 { color: #1f1f1f !important; }
-.url5 { color: #2a2a2a !important; }
-.url6 { color: #353535 !important; }
-.url7 { color: #3f3f3f !important; }
-.url8 { color: #4a4a4a !important; }
-.url9 { color: #555555 !important; }
-.url10 { color: #5f5f5f !important; }
-.url11 { color: #6a6a6a !important; }
-.url12 { color: #757575 !important; }
-.url13 { color: #7f7f7f !important; }
-.url14 { color: #8a8a8a !important; }
-.url15 { color: #959595 !important; }
-.url16 { color: #9f9f9f !important; }
-.url17 { color: #aaaaaa !important; }
-.url18 { color: #b5b5b5 !important; }
-.url19 { color: #bfbfbf !important; }
-.url20 { color: #cacaca !important; }
-.url21 { color: #d5d5d5 !important; }
-.url22 { color: #dfdfdf !important; }
-.url23 { color: #eaeaea !important; }
-.url24 { color: #f5f5f5 !important; }
-.url25 { color: #ffffff !important; }
-
-/* secure link */
-.secure {
-  text-align: center;
-  margin-top: 50px;
-  vertical-align: middle;
-  font-size: 12px;
-}
-
-.secure img {
-  margin-bottom: -0.3em;
+.topbar .btn {
   border: 0;
 }
-
-.secure a, .secure a:hover, .secure a:visited, .secure a:active {
-  color: #000;
-  text-decoration: none;
-}