Commits

Kenneth Love  committed bdc9f44

decent design

  • Participants
  • Parent commits 99ae790

Comments (0)

Files changed (15)

+syntax: glob
+
+*.pyc
         output = r.smembers(key)
     elif rtype == 'zset':
         output = r.zrange(key, 0, -1, withscores=True)
+    elif rtype == 'list':
+        output = [r.lindex(key, n) for n in xrange(r.llen(key))]
     else:
         output = r.get(key)
     return render_template('key.html', rtype=rtype, key=key, output=output)

File static/css/html5reset-1.6.1.css

+/* 
+html5doctor.com Reset Stylesheet
+v1.6.1
+Last Updated: 2010-09-17
+Author: Richard Clark - http://richclarkdesign.com 
+Twitter: @rich_clark
+*/
+
+html, body, div, span, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+abbr, address, cite, code,
+del, dfn, em, img, ins, kbd, q, samp,
+small, strong, sub, sup, var,
+b, i,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section, summary,
+time, mark, audio, video {
+    margin:0;
+    padding:0;
+    border:0;
+    outline:0;
+    font-size:100%;
+    vertical-align:baseline;
+    background:transparent;
+}
+
+body {
+    line-height:1;
+}
+
+article,aside,details,figcaption,figure,
+footer,header,hgroup,menu,nav,section { 
+	display:block;
+}
+
+nav ul {
+    list-style:none;
+}
+
+blockquote, q {
+    quotes:none;
+}
+
+blockquote:before, blockquote:after,
+q:before, q:after {
+    content:'';
+    content:none;
+}
+
+a {
+    margin:0;
+    padding:0;
+    font-size:100%;
+    vertical-align:baseline;
+    background:transparent;
+}
+
+/* change colours to suit your needs */
+ins {
+    background-color:#ff9;
+    color:#000;
+    text-decoration:none;
+}
+
+/* change colours to suit your needs */
+mark {
+    background-color:#ff9;
+    color:#000; 
+    font-style:italic;
+    font-weight:bold;
+}
+
+del {
+    text-decoration: line-through;
+}
+
+abbr[title], dfn[title] {
+    border-bottom:1px dotted;
+    cursor:help;
+}
+
+table {
+    border-collapse:collapse;
+    border-spacing:0;
+}
+
+/* change border colour to suit your needs */
+hr {
+    display:block;
+    height:1px;
+    border:0;   
+    border-top:1px solid #cccccc;
+    margin:1em 0;
+    padding:0;
+}
+
+input, select {
+    vertical-align:middle;
+}

File static/css/style.css

-div#header {
-  border: 1px solid #000;
-  margin: 20px 0;
+html {
+  background: -webkit-gradient(
+      linear, left top, left bottom,
+      color-stop(0, rgb(255,255,255)),
+      color-stop(0.5, rgb(250,250,250)),
+      color-stop(1, rgb(220,220,220))
+  );
+  background: -moz-linear-gradient(
+      center bottom,
+      rgb(255,255,255) 0%,
+      rgb(250,250,250) 50%,
+      rgb(220,220,220) 100%
+  );
+  -moz-background-size:100% 100%;
+  -o-background-size:100% 100%;
+  -webkit-background-size:100% 100%;
+  background-size:100% 100%;
+  height:100%;
 }
 
-div#footer {
-  border: 1px solid #000;
-  margin: 20px 0;
+body {
+  font:12px/16px "Helvetica Neue", Helvetica, Verdana, Arial, sans-serif;
+  margin:0 auto;
+  width:1048px;
 }
+
+h1 {
+  color:rgb(133, 27, 31);
+  font-size:18px;
+  font-weight:bold;
+  line-height:18px;
+}
+
+#masthead {
+  overflow:hidden;
+  padding:10px;
+  -webkit-box-shadow:0 2px 4px rgba(0,0,0,0.4);
+}
+  #logo {
+    background:url('../img/logo-small.png') top left no-repeat;
+    background-size: 100% 100%;
+    width:179px;
+    height:63px;
+    margin-right:20px;
+    float:left;
+    text-indent:-9999px;
+  }
+  #masthead aside {
+    float:right;
+  }
+    #masthead aside dl {
+      overflow:hidden;
+    }
+      #masthead aside dt {
+        float:left;
+        font-weight:bold;
+        margin-right:10px;
+        text-align:right;
+        width:50px;
+      }
+
+#switch_db {
+  background: -webkit-gradient(
+    linear, left top, left bottom,
+    color-stop(0, rgb(150, 150, 150)),
+    color-stop(0.15, rgb(204, 204, 204)),
+    color-stop(1, rgb(204, 204, 204))
+  );
+  padding:10px;
+  -webkit-box-shadow:0 2px 4px rgba(0,0,0,0.4);
+}
+  #switch_db fieldset {
+    overflow:hidden;
+  }
+  #switch_db select { vertical-align:baseline; }
+  #switch_db label {
+    color:rgb(133, 27, 31);
+    font-size:18px;
+    font-weight:bold;
+    line-height:18px;
+    padding-right:10px;
+    vertical-align:middle;
+  }
+
+#flashes {
+  background:#999;
+  color:#fff;
+  list-style:none;
+  -webkit-box-shadow:0 2px 4px rgba(0,0,0,0.4);
+}
+  #flashes li { padding:5px 10px; }
+
+#left {
+  float:left;
+  margin:20px 2% 20px 0;
+  width:48%;
+}
+  #keyheader {
+    margin-bottom:10px;
+    overflow:hidden;
+  }
+  #keyheader h1 {
+    float:left;
+  }
+  .filterform {
+    float:right;
+  }
+    .filterform input[type=search] {
+      width:250px;
+    }
+  #keylist {
+    border:1px solid rgba(30,30,30,0.5);
+    clear:both;
+    height:400px;
+    list-style:none;
+    overflow:auto;
+  }
+    #keylist li {
+      padding:2px 5px;
+    }
+    #keylist li:nth-child(odd) {
+      background:#fff;
+    }
+    #keylist li:nth-child(even) {
+      background:rgb(227, 240, 247);
+    }
+    #keylist li.current {
+      background:rgb(246, 247, 205);
+    }
+      #keylist li.current a { font-weight:bold; }
+      #keylist li a {
+        color:#333;
+        text-decoration:none;
+      }
+
+#right {
+  float:left;
+  margin:20px 0;
+  width:50%;
+}
+
+  textarea[name=value] {
+    border:1px solid rgba(30,30,30,0.5);
+    width:100%;
+  }
+  input[type=submit] {
+    background:url('../img/check.png') center center no-repeat;
+    border:none;
+    height:26px;
+    text-indent:-99999px;
+    width:32px;
+  }
+
+  #refresh {
+    background:url('../img/reload.png') center center no-repeat;
+    display:block;
+    float:right;
+    height:28px;
+    text-indent:-99999px;
+    width:24px;
+  }
+    
+
+footer {
+  clear:both;
+  color:rgba(0,0,0,0.75);
+  text-align:center;
+  margin:20px 0;
+}
+  footer a {
+    color:rgb(133, 27, 31);
+    text-decoration:none;
+  }

File static/img/check.png

Added
New image

File static/img/cog.png

Added
New image

File static/img/logo-small.png

Added
New image

File static/img/loop.png

Added
New image

File static/img/reload.png

Added
New image

File static/img/search.png

Added
New image

File static/js/modernizr-1.6.min.js

+/*
+ * Modernizr v1.6
+ * http://www.modernizr.com
+ *
+ * Developed by: 
+ * - Faruk Ates  http://farukat.es/
+ * - Paul Irish  http://paulirish.com/
+ *
+ * Copyright (c) 2009-2010
+ * Dual-licensed under the BSD or MIT licenses.
+ * http://www.modernizr.com/license/
+ */
+window.Modernizr=function(i,e,u){function s(a,b){return(""+a).indexOf(b)!==-1}function D(a,b){for(var c in a)if(j[a[c]]!==u&&(!b||b(a[c],E)))return true}function n(a,b){var c=a.charAt(0).toUpperCase()+a.substr(1);c=(a+" "+F.join(c+" ")+c).split(" ");return!!D(c,b)}function S(){f.input=function(a){for(var b=0,c=a.length;b<c;b++)L[a[b]]=!!(a[b]in h);return L}("autocomplete autofocus list placeholder max min multiple pattern required step".split(" "));f.inputtypes=function(a){for(var b=0,c,k=a.length;b<
+k;b++){h.setAttribute("type",a[b]);if(c=h.type!=="text"){h.value=M;if(/^range$/.test(h.type)&&h.style.WebkitAppearance!==u){l.appendChild(h);c=e.defaultView;c=c.getComputedStyle&&c.getComputedStyle(h,null).WebkitAppearance!=="textfield"&&h.offsetHeight!==0;l.removeChild(h)}else/^(search|tel)$/.test(h.type)||(c=/^(url|email)$/.test(h.type)?h.checkValidity&&h.checkValidity()===false:h.value!=M)}N[a[b]]=!!c}return N}("search tel url email datetime date month week time datetime-local number range color".split(" "))}
+var f={},l=e.documentElement,E=e.createElement("modernizr"),j=E.style,h=e.createElement("input"),M=":)",O=Object.prototype.toString,q=" -webkit- -moz- -o- -ms- -khtml- ".split(" "),F="Webkit Moz O ms Khtml".split(" "),v={svg:"http://www.w3.org/2000/svg"},d={},N={},L={},P=[],w,Q=function(a){var b=document.createElement("style"),c=e.createElement("div");b.textContent=a+"{#modernizr{height:3px}}";(e.head||e.getElementsByTagName("head")[0]).appendChild(b);c.id="modernizr";l.appendChild(c);a=c.offsetHeight===
+3;b.parentNode.removeChild(b);c.parentNode.removeChild(c);return!!a},o=function(){var a={select:"input",change:"input",submit:"form",reset:"form",error:"img",load:"img",abort:"img"};return function(b,c){c=c||document.createElement(a[b]||"div");b="on"+b;var k=b in c;if(!k){c.setAttribute||(c=document.createElement("div"));if(c.setAttribute&&c.removeAttribute){c.setAttribute(b,"");k=typeof c[b]=="function";if(typeof c[b]!="undefined")c[b]=u;c.removeAttribute(b)}}return k}}(),G={}.hasOwnProperty,R;R=
+typeof G!=="undefined"&&typeof G.call!=="undefined"?function(a,b){return G.call(a,b)}:function(a,b){return b in a&&typeof a.constructor.prototype[b]==="undefined"};d.flexbox=function(){var a=e.createElement("div"),b=e.createElement("div");(function(k,g,r,x){g+=":";k.style.cssText=(g+q.join(r+";"+g)).slice(0,-g.length)+(x||"")})(a,"display","box","width:42px;padding:0;");b.style.cssText=q.join("box-flex:1;")+"width:10px;";a.appendChild(b);l.appendChild(a);var c=b.offsetWidth===42;a.removeChild(b);
+l.removeChild(a);return c};d.canvas=function(){var a=e.createElement("canvas");return!!(a.getContext&&a.getContext("2d"))};d.canvastext=function(){return!!(f.canvas&&typeof e.createElement("canvas").getContext("2d").fillText=="function")};d.webgl=function(){var a=e.createElement("canvas");try{if(a.getContext("webgl"))return true}catch(b){}try{if(a.getContext("experimental-webgl"))return true}catch(c){}return false};d.touch=function(){return"ontouchstart"in i||Q("@media ("+q.join("touch-enabled),(")+
+"modernizr)")};d.geolocation=function(){return!!navigator.geolocation};d.postmessage=function(){return!!i.postMessage};d.websqldatabase=function(){return!!i.openDatabase};d.indexedDB=function(){for(var a=-1,b=F.length;++a<b;){var c=F[a].toLowerCase();if(i[c+"_indexedDB"]||i[c+"IndexedDB"])return true}return false};d.hashchange=function(){return o("hashchange",i)&&(document.documentMode===u||document.documentMode>7)};d.history=function(){return!!(i.history&&history.pushState)};d.draganddrop=function(){return o("drag")&&
+o("dragstart")&&o("dragenter")&&o("dragover")&&o("dragleave")&&o("dragend")&&o("drop")};d.websockets=function(){return"WebSocket"in i};d.rgba=function(){j.cssText="background-color:rgba(150,255,150,.5)";return s(j.backgroundColor,"rgba")};d.hsla=function(){j.cssText="background-color:hsla(120,40%,100%,.5)";return s(j.backgroundColor,"rgba")||s(j.backgroundColor,"hsla")};d.multiplebgs=function(){j.cssText="background:url(//:),url(//:),red url(//:)";return/(url\s*\(.*?){3}/.test(j.background)};d.backgroundsize=
+function(){return n("backgroundSize")};d.borderimage=function(){return n("borderImage")};d.borderradius=function(){return n("borderRadius","",function(a){return s(a,"orderRadius")})};d.boxshadow=function(){return n("boxShadow")};d.textshadow=function(){return e.createElement("div").style.textShadow===""};d.opacity=function(){var a=q.join("opacity:.5;")+"";j.cssText=a;return s(j.opacity,"0.5")};d.cssanimations=function(){return n("animationName")};d.csscolumns=function(){return n("columnCount")};d.cssgradients=
+function(){var a=("background-image:"+q.join("gradient(linear,left top,right bottom,from(#9f9),to(white));background-image:")+q.join("linear-gradient(left top,#9f9, white);background-image:")).slice(0,-17);j.cssText=a;return s(j.backgroundImage,"gradient")};d.cssreflections=function(){return n("boxReflect")};d.csstransforms=function(){return!!D(["transformProperty","WebkitTransform","MozTransform","OTransform","msTransform"])};d.csstransforms3d=function(){var a=!!D(["perspectiveProperty","WebkitPerspective",
+"MozPerspective","OPerspective","msPerspective"]);if(a)a=Q("@media ("+q.join("transform-3d),(")+"modernizr)");return a};d.csstransitions=function(){return n("transitionProperty")};d.fontface=function(){var a,b=e.head||e.getElementsByTagName("head")[0]||l,c=e.createElement("style"),k=e.implementation||{hasFeature:function(){return false}};c.type="text/css";b.insertBefore(c,b.firstChild);a=c.sheet||c.styleSheet;b=k.hasFeature("CSS2","")?function(g){if(!(a&&g))return false;var r=false;try{a.insertRule(g,
+0);r=!/unknown/i.test(a.cssRules[0].cssText);a.deleteRule(a.cssRules.length-1)}catch(x){}return r}:function(g){if(!(a&&g))return false;a.cssText=g;return a.cssText.length!==0&&!/unknown/i.test(a.cssText)&&a.cssText.replace(/\r+|\n+/g,"").indexOf(g.split(" ")[0])===0};f._fontfaceready=function(g){g(f.fontface)};return b('@font-face { font-family: "font"; src: "font.ttf"; }')};d.video=function(){var a=e.createElement("video"),b=!!a.canPlayType;if(b){b=new Boolean(b);b.ogg=a.canPlayType('video/ogg; codecs="theora"');
+b.h264=a.canPlayType('video/mp4; codecs="avc1.42E01E"')||a.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"');b.webm=a.canPlayType('video/webm; codecs="vp8, vorbis"')}return b};d.audio=function(){var a=e.createElement("audio"),b=!!a.canPlayType;if(b){b=new Boolean(b);b.ogg=a.canPlayType('audio/ogg; codecs="vorbis"');b.mp3=a.canPlayType("audio/mpeg;");b.wav=a.canPlayType('audio/wav; codecs="1"');b.m4a=a.canPlayType("audio/x-m4a;")||a.canPlayType("audio/aac;")}return b};d.localstorage=function(){try{return"localStorage"in
+i&&i.localStorage!==null}catch(a){return false}};d.sessionstorage=function(){try{return"sessionStorage"in i&&i.sessionStorage!==null}catch(a){return false}};d.webWorkers=function(){return!!i.Worker};d.applicationcache=function(){return!!i.applicationCache};d.svg=function(){return!!e.createElementNS&&!!e.createElementNS(v.svg,"svg").createSVGRect};d.inlinesvg=function(){var a=document.createElement("div");a.innerHTML="<svg/>";return(a.firstChild&&a.firstChild.namespaceURI)==v.svg};d.smil=function(){return!!e.createElementNS&&
+/SVG/.test(O.call(e.createElementNS(v.svg,"animate")))};d.svgclippaths=function(){return!!e.createElementNS&&/SVG/.test(O.call(e.createElementNS(v.svg,"clipPath")))};for(var H in d)if(R(d,H)){w=H.toLowerCase();f[w]=d[H]();P.push((f[w]?"":"no-")+w)}f.input||S();f.crosswindowmessaging=f.postmessage;f.historymanagement=f.history;f.addTest=function(a,b){a=a.toLowerCase();if(!f[a]){b=!!b();l.className+=" "+(b?"":"no-")+a;f[a]=b;return f}};j.cssText="";E=h=null;i.attachEvent&&function(){var a=e.createElement("div");
+a.innerHTML="<elem></elem>";return a.childNodes.length!==1}()&&function(a,b){function c(p){for(var m=-1;++m<r;)p.createElement(g[m])}function k(p,m){for(var I=p.length,t=-1,y,J=[];++t<I;){y=p[t];m=y.media||m;J.push(k(y.imports,m));J.push(y.cssText)}return J.join("")}var g="abbr|article|aside|audio|canvas|details|figcaption|figure|footer|header|hgroup|mark|meter|nav|output|progress|section|summary|time|video".split("|"),r=g.length,x=RegExp("<(/*)(abbr|article|aside|audio|canvas|details|figcaption|figure|footer|header|hgroup|mark|meter|nav|output|progress|section|summary|time|video)",
+"gi"),T=RegExp("\\b(abbr|article|aside|audio|canvas|details|figcaption|figure|footer|header|hgroup|mark|meter|nav|output|progress|section|summary|time|video)\\b(?!.*[;}])","gi"),z=b.createDocumentFragment(),A=b.documentElement,K=A.firstChild,B=b.createElement("style"),C=b.createElement("body");B.media="all";c(b);c(z);a.attachEvent("onbeforeprint",function(){for(var p=-1;++p<r;)for(var m=b.getElementsByTagName(g[p]),I=m.length,t=-1;++t<I;)if(m[t].className.indexOf("iepp_")<0)m[t].className+=" iepp_"+
+g[p];K.insertBefore(B,K.firstChild);B.styleSheet.cssText=k(b.styleSheets,"all").replace(T,".iepp_$1");z.appendChild(b.body);A.appendChild(C);C.innerHTML=z.firstChild.innerHTML.replace(x,"<$1bdo")});a.attachEvent("onafterprint",function(){C.innerHTML="";A.removeChild(C);K.removeChild(B);A.appendChild(z.firstChild)})}(this,document);f._enableHTML5=true;f._version="1.6";l.className=l.className.replace(/\bno-js\b/,"")+" js";l.className+=" "+P.join(" ");return f}(this,this.document);

File static/js/redbeard.js

 jQuery.expr[':'].Contains = function(a, i, m) {
-    return (a.textContent || a.innerText || "").toUpperCase().indexOf(m[3].toUpperCase())>=0;
+    return (a.textContent || a.innerText || '').toUpperCase().indexOf(m[3].toUpperCase())>=0;
 }
 
 function listFilter(header, list) {
-    var form = $("<form>").attr({"class": "filterform", "action": "#"}),
-        input = $("<input>").attr({"class": "filterinput", "type": "search"});
+    var form = $('<form>').attr({'class': 'filterform', 'action': '#'}),
+        input = $('<input>').attr({
+            'class': 'filterinput',
+            'type': 'search',
+            'placeholder': 'Filter'
+        });
 
     $(form).append(input).appendTo(header);
 
     $(input).change(function() {
         var filter = $(this).val();
         if (filter) {
-            $(list).find("a:not(:Contains(" + filter + "))").parent().slideUp();
-            $(list).find("a:Contains(" + filter + ")").parent().slideDown();
+            $(list).find('a:not(:Contains(' + filter + '))').parent().slideUp();
+            $(list).find('a:Contains(' + filter + ')').parent().slideDown();
         } else {
-            $(list).find("li").slideDown();
+            $(list).find('li').slideDown();
         }
     }).keyup(function() {
         $(this).change();
 }
 
 jQuery(window).hashchange(function() {
-    var link = "/key/" + window.location.hash.replace("#", "");
+    var link = '/key/' + window.location.hash.replace('#', '');
     $.get(link, function(data) {
         $('#right').html(data);
     });
 });
 
 $(function() {
-	listFilter($("#keyheader"), $("#keylist"));
+	listFilter($('#keyheader'), $('#keylist'));
 
     if (window.location.hash) {
-        var link = "/key/" + window.location.hash.replace("#", "");
+        var link = '/key/' + window.location.hash.replace('#', '');
+        $('a[href=' + link + ']', '#keylist').parent('li').addClass('current');
+
         $.get(link, function(data) {
             $('#right').html(data);
         });
     }
 
-    $("a", "#keylist").live('click', function(e) {
+    $('a', '#keylist').live('click', function(e) {
         var link = $(this).attr('href'),
-            hash = link.replace("/key/", "");
+            hash = link.replace('/key/', '');
         e.preventDefault();
+        $('li', '#keylist').removeClass('current');
+        $(this).parent('li').addClass('current');
         $.get(link, function(data) {
             $('#right').html(data);
             window.location.hash = hash;
         });
     });
 
-    $("#redis_db").live('change', function() {
-        $(this).parent('form').submit();
+    $('#id_redis_db').live('change', function() {
+        $(this).parent().parent('form').submit();
     });
 });

File templates/index.html

 {% extends "layout.html" %}
 
 {% block leftblock %}
-<form action="{{ url_for('change_db') }}" method="post">
-	<label for="redis_db">Redis DB:</label>
-	<select id="redis_db" name="redis_db">
-		{% for number in range(0, 9) %}
-		<option value="{{ number }}" {% if number == session.redis_db %}selected{% endif %}>{{ number }}</option>
-		{% endfor %}
-	</select>
-</form>
-
-<h2 id="keyheader">Keys</h2>
+<header id="keyheader">
+	<h1>Keys</h1>
+</header>
 <ul id="keylist">
 	{% for key in keys %}
 	<li><a href="{{ url_for('key', key=key) }}">{{ key }}</a></li>

File templates/key.html

-<ul id="flashes"></ul>
-
 <article>
 	<header>
-		<h1>{{ key }}</h1>
 		<h2>{{ rtype }}</h2>
 	</header>
 	<form action="{{ url_for('save', key=key) }}" method="post" 
 		id="key">
 		<textarea name="value" cols="60" rows="20">{{ output }}</textarea>
 		<br>
-		<input type="submit" value="save">
+		<a id="refresh" href="{{ url_for('key', key=key) }}" title="refresh">refresh</a>
+		<input type="submit" value="save" title="save">
 	</form>
-	<a id="refresh" href="{{ url_for('key', key=key) }}">refresh</a>
 </article>
 
 <script>

File templates/layout.html

-<!DOCTYPE HTML>
-<html>
+<!DOCTYPE html>
+<html class="no-js">
 <head>
-	<meta http-equiv="content-type" content="text/html; charset=utf-8">
+	<meta charset="utf-8">
 	<title>{% block title %}Redbeard{% endblock %}</title>
-	<link rel="stylesheet" href="{{ url_for('static', filename='css/reset.css') }}" type="text/css" media="screen" charset="utf-8">
-	<link rel="stylesheet" href="{{ url_for('static', filename='css/grid.css') }}" type="text/css" media="screen" charset="utf-8">
-	<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}" type="text/css" media="screen" charset="utf-8">
+	<link rel="stylesheet" href="{{ url_for('static', filename='css/html5reset-1.6.1.css') }}" 
+	media="screen" charset="utf-8">
+	<link rel="stylesheet" href="{{ url_for('static', filename='css/grid.css') }}" media="screen" charset="utf-8">
+	<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}" media="screen" charset="utf-8">
+	<script type="text/javascript" src="{{ url_for('static', filename='js/jquery-1.4.4.min.js') }}"></script>
+	<script type="text/javascript" src="{{ url_for('static', filename='js/modernizr-1.6.min.js') }}"></script>
 </head>
 <body>
-
-<div class="row">
-	<div id="header" class="column grid_12">
+	<header id="masthead">
 		{% block header %}
-		<h1>RedBeard</h1>
+		<h1 id="logo">RedBeard</h1>
 		{% if session %}
-			<p>Redis connection info</p>
-			<ul>
-				<li>Host: {{ session.redis_host }}</li>
-				<li>Port: {{ session.redis_port }}</li>
-				<li>DB: {{ session.redis_db }}</li>
-			</ul>
+		<aside>
+			<header>
+				<h2>Redis connection info</h2>
+			</header>
+			<dl>
+				<dt>Host:</dt>
+				<dd>{{ session.redis_host }}</dd>
+				<dt>Port:</dt>
+				<dd>{{ session.redis_port }}</dd>
+				<dt>DB:</dt>
+				<dd>{{ session.redis_db }}</dd>
+			</dl>
+		</aside>
 		{% endif %}
 		{% endblock %}
-	</div>
-</div>
+	</header>
 
-<div class="row">
-	<div id="messages" class="column grid_12">
+	<form action="{{ url_for('change_db') }}" method="post" id="switch_db">
+		<fieldset>
+			<label for="id_redis_db">Current Redis DB:</label>
+			<select id="id_redis_db" name="redis_db">
+				{% for number in range(0, 9) %}
+				<option value="{{ number }}" {% if number == session.redis_db %}selected{% endif %}>{{ number }}</option>
+				{% endfor %}
+			</select>
+		</fieldset>
+	</form>
+
+	<ul id="flashes">
 	{% with messages = get_flashed_messages() %}
         {% if messages %}
-        <ul class="flashes">
         	{% for message in messages %}
         	<li>{{ message }}</li>
         	{% endfor %}
-        </ul>
         {% endif %}
     {% endwith %}
-	</div>
-</div>
-		
+	</ul>
+			
 
-<div class="row">
-
-	<div class="row">
-		<div id="left" class="column grid_5">
-			{% block leftblock %}
-			<h2>Left Bar</h2>
-			{% endblock %}
-		</div>
-
-		<div id="right" class="column grid_7">
-			{% block content %}
-			<h2>Content Area</h2>
-			{% endblock %}
-		</div>
+	<div id="left">
+		{% block leftblock %}{% endblock %}
 	</div>
 
-</div>
+	<div id="right">
+		{% block content %}{% endblock %}
+	</div>
 
-<div class="row">
-	<div id="footer" class="column grid_12">
-		{% block footer %}
-		<h1>Footer</h1>
-		{% endblock %}
-	</div>
-</div>
-	<script type="text/javascript" src="{{ url_for('static', filename='js/jquery-1.4.4.min.js') }}"></script>
+	<footer>
+		<p>&copy; <a href="http://brack3t.com">Brack3t</a>, design by veddermatic, icons from <a 
+				href="http://somerandomdude.com/projects/iconic/">Iconic</a>.</p>
+	</footer>
 	{% block extra_scripts %}{% endblock %}
 </body>
 </html>