Created
April 7, 2012 20:23
-
-
Save tarcieri/2331892 to your computer and use it in GitHub Desktop.
Tahoe with Bootstrap
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="utf-8"> | |
<title>Tahoe-LAFS: Home</title> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
<meta name="description" content="Tahoe-LAFS is a free and open cloud storage engine"> | |
<meta name="author" content="Tahoe-LAFS"> | |
<!-- Le styles --> | |
<link href="/css/bootstrap.css" rel="stylesheet"> | |
<link href="/css/tahoe.css" rel="stylesheet"> | |
<style type="text/css"> | |
body { | |
padding-top: 60px; | |
padding-bottom: 40px; | |
} | |
.sidebar-nav { | |
padding: 9px 0; | |
} | |
</style> | |
<link href="/css/bootstrap-responsive.css" rel="stylesheet"> | |
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements --> | |
<!--[if lt IE 9]> | |
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> | |
<![endif]--> | |
<!-- Le fav and touch icons --> | |
<link rel="shortcut icon" href="/ico/favicon.ico"> | |
</head> | |
<body> | |
<div class="navbar navbar-fixed-top"> | |
<div class="navbar-inner"> | |
<div class="container-fluid"> | |
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> | |
<span class="icon-bar"></span> | |
<span class="icon-bar"></span> | |
<span class="icon-bar"></span> | |
</a> | |
<a class="brand" href="/"><img src="/img/logo.png" alt="DCell Explorer"></a> | |
<table class="node-info pull-right"> | |
<tr> | |
<th>Nickname:</th> | |
<td><a href="#">foobar</a></td> | |
</tr> | |
<tr> | |
<th>Node ID:</th> | |
<td><a href="#">lw3pjdxnkkh66l56x2tdny26f5cristt</a></td> | |
</tr> | |
</table> | |
</div> | |
</div> | |
</div> | |
<div class="container-fluid"> | |
<div class="row-fluid"> | |
<div class="span3"> | |
<div class="well sidebar-nav nav"> | |
<div class="nav-header">Open URI</div> | |
<div class="open-uri"> | |
<form action="/"> | |
<input type="text"></input> | |
<p><a class="btn" href="#">View URI »</a> <a class="btn" href="#">Download URI »</a></p> | |
</form> | |
</div> | |
</div><!--/.well --> | |
<div class="well sidebar-nav"> | |
<ul class="nav nav-list"> | |
<li class="nav-header">Tools</li> | |
<li><a href="#">Create Directory</a></li> | |
<li><a href="#">Upload File</a></li> | |
<li><a href="#">Manage Aliases</a></li> | |
</ul> | |
</div><!--/.well --> | |
<div class="well sidebar-nav"> | |
<ul class="nav nav-list"> | |
<li class="nav-header">Aliases</li> | |
<li><a href="#">Documents</a></li> | |
<li><a href="#">Photos</a></li> | |
<li><a href="#">Music</a></li> | |
<li><a href="#">Movies</a></li> | |
</ul> | |
</div><!--/.well --> | |
</div><!--/span--> | |
<div class="span9"> | |
<div class="hero-unit"> | |
<h2>4/5 Storage Servers</h2> | |
<table class="table peer-status"> | |
<thead> | |
<tr> | |
<td><h3>Nickname</h3></td> | |
<td><h3>Address</h3></td> | |
<td><h3>Peer ID</h3></td> | |
<td><h3>Version</h3></td> | |
<td><h3>Duration</h3></td> | |
</tr> | |
</thead> | |
<tr> | |
<td><span class="badge badge-success status"></span> Foo</td> | |
<td>Bar</td> | |
<td>Baz</td> | |
<td>Qux</td> | |
<td>Quux</td> | |
</tr> | |
<tr> | |
<td><span class="badge badge-success status"></span> Foo</td> | |
<td>Bar</td> | |
<td>Baz</td> | |
<td>Qux</td> | |
<td>Quux</td> | |
</tr> | |
<tr> | |
<td><span class="badge badge-success status"></span> Foo</td> | |
<td>Bar</td> | |
<td>Baz</td> | |
<td>Qux</td> | |
<td>Quux</td> | |
</tr> | |
<tr> | |
<td><span class="badge badge-error status"></span> Foo</td> | |
<td>Bar</td> | |
<td>Baz</td> | |
<td>Qux</td> | |
<td>Quux</td> | |
</tr> | |
<tr> | |
<td><span class="badge badge-success status"></span> Foo</td> | |
<td>Bar</td> | |
<td>Baz</td> | |
<td>Qux</td> | |
<td>Quux</td> | |
</tr> | |
</table> | |
</div> | |
<div class="row-fluid grid-status"> | |
<div class="span4"> | |
<h3><span class="badge badge-success status"></span> Introducer</h3> | |
<p><a href="#">example.org:12345</a></p> | |
</div><!--/span--> | |
<div class="span4"> | |
<h3><span class="badge badge-success status"></span> Helper</h3> | |
<p><a href="#">example.org:23456</a></p> | |
</div><!--/span--> | |
<div class="span4"> | |
<h3><span class="badge badge-success status"></span> Storage Server</h3> | |
<p>50% used (256GB of 512GB)</p> | |
</div><!--/span--> | |
</div><!--/row--> | |
</div><!--/span--> | |
</div><!--/row--> | |
<hr> | |
<footer> | |
<p>© Tahoe-LAFS 2012</p> | |
<p class="versions">Versions: allmydata-tahoe: 1.8.2, foolscap: 0.6.1, pycryptopp: 0.5.17, zfec: 1.4.5, Twisted: 10.2.0, Nevow: 0.10.0, zope.interface: unknown, python: 2.7.1+, platform: Linux-Ubuntu_11.04-i686-32bit_ELF, pyOpenSSL: 0.10, simplejson: 2.1.2, pycrypto: 2.1.0, pyasn1: unknown, mock: 0.7.0, sqlite3: 2.6.0 [sqlite 3.7.4], setuptools: 0.6 [distribute]</p> | |
</footer> | |
</div><!--/.fluid-container--> | |
<!-- Le javascript | |
================================================== --> | |
<!-- Placed at the end of the document so the pages load faster --> | |
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> | |
<script src="js/bootstrap.min.js"></script> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.node-info { | |
margin-top: 4px; | |
line-height: 14px; | |
} | |
.node-info th { | |
text-align: right; | |
} | |
.node-info td { | |
text-align: left; | |
padding-top: 4px; | |
padding-left: 5px; | |
} | |
.node-info a { | |
color: white; | |
} | |
.open-uri { | |
padding-left: 10px; | |
} | |
.open-uri form { | |
margin: 0; | |
} | |
.open-uri input { | |
width: 92%; | |
} | |
.status { | |
margin-right: 5px; | |
} | |
.peer-status td { | |
font-size: 1.2em; | |
} | |
.peer-status img { | |
padding-right: 3px; | |
vertical-align: text-bottom; | |
} | |
.grid-status img { | |
width: 24px; | |
height: 24px; | |
padding-right: 3px; | |
padding-bottom: 4px; | |
} | |
.grid-status p { | |
margin-left: 24px; | |
} | |
.versions { | |
font-size: 0.8em; | |
width: 50%; | |
} | |
.peerid { | |
font-size: 0.8em; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment