change the default look of the vpn application (also, export some variables...

change the default look of the vpn application (also, export some variables for customization such as the footer and location of the online site-specific documentation)

autovpn/static/jquery.backstretch.min.js

+/*
+ * jQuery Backstretch
+ * Version 1.2.5
+ * http://srobbin.com/jquery-plugins/jquery-backstretch/
+ *
+ * Add a dynamically-resized background image to the page
+ *
+ * Copyright (c) 2011 Scott Robbin (srobbin.com)
+ * Dual licensed under the MIT and GPL licenses.
+*/
+(function(a){a.backstretch=function(l,b,j){function m(c){try{h={left:0,top:0},e=f.width(),d=e/k,d>=f.height()?(i=(d-f.height())/2,g.centeredY&&a.extend(h,{top:"-"+i+"px"})):(d=f.height(),e=d*k,i=(e-f.width())/2,g.centeredX&&a.extend(h,{left:"-"+i+"px"})),a("#backstretch, #backstretch img:not(.deleteable)").width(e).height(d).filter("img").css(h)}catch(b){}"function"==typeof c&&c()}var n={centeredX:!0,centeredY:!0,speed:0},c=a("#backstretch"),g=c.data("settings")||n;c.data("settings");var f="onorientationchange"in window?a(document):a(window),k,e,d,i,h;b&&"object"==typeof b&&a.extend(g,b);b&&"function"==typeof b&&(j=b);a(document).ready(function(){if(l){var b;0==c.length?c=a("<div />").attr("id","backstretch").css({left:0,top:0,position:"fixed",overflow:"hidden",zIndex:-999999,margin:0,padding:0,height:"100%",width:"100%"}):c.find("img").addClass("deleteable");b=a("<img />").css({position:"absolute",display:"none",margin:0,padding:0,border:"none",zIndex:-999999}).bind("load",function(b){var d=a(this),e;d.css({width:"auto",height:"auto"});e=this.width||a(b.target).width();b=this.height||a(b.target).height();k=e/b;m(function(){d.fadeIn(g.speed,function(){c.find(".deleteable").remove();"function"==typeof j&&j()})})}).appendTo(c);0==a("body #backstretch").length&&a("body").append(c);c.data("settings",g);b.attr("src",l);a(window).resize(m)}});return this}})(jQuery);
\ No newline at end of file

autovpn/static/style.css

 body {
-    background: white;
-    color: #333;
-    font-size: 1.1em;
+    background-color: white;
+    font-family: helvetica, arial, sans-serif;
+    margin-left: 0px;
+    margin-right: auto;
+    width: 100%;
 }
 
 #container {
-    width: 50%;
-    padding: 50px;
-    margin: 10% auto;
-    border: 2px solid #333;
-    -moz-border-radius: 20px;
-    -webkit-border-radius: 20px;
-}
-
-#title {
-    height: 65px;
-    padding-left: 75px;
-    padding-top: 30px;
-    background: url(/static/lock_small.png) no-repeat top left;
-    font-size: 2.0em;
-    font-family: Garamond, Georgia, serif;
-    font-weight: bold;
-    line-height: 0.7em;
+    width: 100%;
+    margin-right: 0;
+    margin-left: 0;
+    padding: 0;
 }
 
-#subtitle {
-    color: #999;
-    font-size: 0.5em;
-    font-weight: normal;
-    font-family: Georgia, serif;
-    padding-left: 8.3em;
+h1 {
+    font-family: helvetica, arial, sans-serif;
+    font-size: 6em;
+    color: red;
+    padding: 10px;
+    width: 50%;
+    background: url(/static/ant.jpg) white no-repeat top left;
+    opacity: 0.9;
 }
 
-#subtitle a {
-    color: black;
-    text-decoration: none;
+h1 span {
+    display: block;
+    padding-left: 150px;
 }
 
 #content {
+    background-color: rgba(128,128,128,0.9);
+    font-weight: bold;
+    color: #FFF;
+    padding: 10px;
+    width: 50%;
+    font-size: 1.2em;
+}
+
+a {
+    text-decoration: underline;
+    color: white;
 }
 
 a:hover {
     text-decoration: underline;
 }
+
+.footer {
+    font-size: 0.8em;
+    color: #AAA;
+    text-align: right;
+    padding-right: 5px;
+    margin-top: 20px;
+}
+
+.footer a { 
+    text-decoration: none;
+}

autovpn/templates/_base.html

@@ -4,20 +4,29 @@
     <title>A/I VPN</title>
     <link href="/static/favicon.ico" type="image/x-icon" rel="shortcut icon">
     <link rel="stylesheet" type="text/css" href="/static/style.css">
+    <script type="text/javascript"
+            src="/static/jquery-1.6.4.min.js"></script>
+    <script type="text/javascript"
+            src="/static/jquery.backstretch.min.js"></script>
+    <script>
+      $(document).ready(function() {
+        $.backstretch('/static/background.jpg');
+      });
+    </script>
 {% block head %}{% endblock -%}
   </head>
   <body>
 
     <div id="container">
 
-      <div id="title">
-        Self-Service VPN
-        <div id="subtitle">built by
-          <a href="http://www.autistici.org">autistici.org</a></div>
-      </div>
+      <h1>
+        <span>VPN</span>
+      </h1>
 
       <div id="content">
         {% block content %}{% endblock %}
+
+        {% if footer %}{{ footer | safe }}{% endif %}
       </div>
 
     </div>

autovpn/templates/index.html

@@ -20,4 +20,12 @@
           </p>
         </form>
 
+        {% if help_url %}
+        <p>
+          For any issues, there is
+          <a href="{{ help_url | safe }}">extensive documentation
+            available</a>.
+        </p>
+        {% endif %}
+
 {% endblock %}

autovpn/vpn_app.py

@@ -233,6 +233,8 @@ def make_app(config={}):
         app.register_blueprint(ca_app.ca_app, url_prefix='/ca')
 
     app.jinja_env.globals['csrf_token'] = generate_csrf_token
+    app.jinja_env.globals['footer'] = app.config.get('FOOTER')
+    app.jinja_env.globals['help_url'] = app.config.get('HELP_URL')
     return app
 
 
@@ -249,6 +251,12 @@ if __name__ == '__main__':
                   'VPN_CA_SUBJECT': {'CN': 'test CA', 'O': 'test'},
                   'VPN_ENDPOINT': 'vpn.example.com',
                   'VPN_SITE_URL': 'http://localhost:4000/',
+                  'HELP_URL': '/help/',
+                  'FOOTER': '''
+<p class="footer">
+  built by <a href="http://www.autistici.org/">autistici.org</a>
+</p>
+''',
                   }).run(port=4000)
     finally:
         shutil.rmtree(ca_dir)