Skip to content

Instantly share code, notes, and snippets.

@joelhaasnoot joelhaasnoot/index.html Secret
Last active May 13, 2017

Embed
What would you like to do?
Quick Bootstrap based dashboard for selfhosted links.
<html>
<head>
<title>Dashboard</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" integrity="sha384-aUGj/X2zp5rLCbBxumKTCw2Z50WgIr1vs/PFN4praOTvYXWlVyh2UtNUU0KAUhAX" crossorigin="anonymous">
</head>
<body>
<div class="container">
<h1><i class="glyphicon glyphicon-home"></i> Welcome to Joel's Home</h1>
<div class="row">
<div class="col-md-4">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Raspberry Pi</h3>
</div>
<ul class="list-group">
<li class="list-group-item"><a href="http://url/" target="_new"><i class="glyphicon glyphicon-fire"></i> Domoticz</a> - home automation</li>
<li class="list-group-item"><a href="http://url/" target="_new"><i class="glyphicon glyphicon-flash"></i> PiLight</a> - power outlet control</li>
<li class="list-group-item"><a href="http://url/" target="_new"><i class="glyphicon glyphicon-search"></i> Icinga</a> - network monitoring</li>
</ul>
</div>
</div>
<div class="col-md-4">
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">NAS</h3>
</div>
<ul class="list-group">
<li class="list-group-item"><a href="http://url/" target="_new"><i class="glyphicon glyphicon-dashboard"></i> AltF</a> - NAS control</li>
<li class="list-group-item"><a href="http://url/" target="_new"><i class="glyphicon glyphicon-film"></i> Transmission</a> - torrent downloads</li>
</ul>
</div>
</div>
<div class="col-md-4">
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">Other network</h3>
</div>
<ul class="list-group">
<li class="list-group-item"><a href="http://url/" target="_new"><i class="glyphicon glyphicon-globe"></i> Router</a> - Main Internet</li>
<li class="list-group-item"><a href="http://url/" target="_new"><i class="glyphicon glyphicon-signal"></i> Access Point</a> - Attic</li>
<li class="list-group-item"><a href="http://url" target="_new"><i class="glyphicon glyphicon-tint"></i> Philips Hue</a> - Zigbee/Light bridge</li>
<li class="list-group-item"><a href="http://url" target="_new"><i class="glyphicon glyphicon-print"></i> Printer</a> - Brother PoS</li>
</ul>
</div>
</div>
<div class="col-md-4">
<div class="panel panel-success">
<div class="panel-heading">
<h3 class="panel-title">Server 1</h3>
</div>
<div class="panel-body">
Atom Netbook server - Ubuntu 15.10
</div>
<ul class="list-group">
<li class="list-group-item"><a href="http://url" target="_new"><i class="glyphicon glyphicon-hd-video"></i> Emby</a> - Media Manger</li>
<li class="list-group-item"><a href="http://url" target="_new"><i class="glyphicon glyphicon-play"></i> Alltube</a> - video downloader</li>
<li class="list-group-item"><a href="http://url target="_new"><i class="glyphicon glyphicon-save"></i> RethinkDB</a> - database</li>
<li class="list-group-item"><a href="http://url" target="_new"><i class="glyphicon glyphicon-tasks"></i> Jenkins</a> - continous integration</li>
</ul>
</div>
</div>
<div class="col-md-4">
<div class="panel panel-success">
<div class="panel-heading">
<h3 class="panel-title">Server 2</h3>
</div>
<div class="panel-body">
Atom Netbook server - Ubuntu 15.10
</div>
<ul class="list-group">
<li class="list-group-item"><a href="http://url" target="_new"><i class="glyphicon glyphicon-save"></i> RethinkDB</a> - database</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.