Skip to content

Instantly share code, notes, and snippets.

@grokdesigns
Last active April 9, 2017 08:33
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save grokdesigns/71ea2f2ef90ecbe0d6a1 to your computer and use it in GitHub Desktop.
Save grokdesigns/71ea2f2ef90ecbe0d6a1 to your computer and use it in GitHub Desktop.
Home Dashboard
<!doctype html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" type="image/ico" href="favicon.ico" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.6/yeti/bootstrap.min.css" /> <!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" /> <!--FontAwesome-->
<link href='//fonts.googleapis.com/css?family=PT+Sans:400' rel='stylesheet' type='text/css'> <!-- Font -->
<link rel="stylesheet" href="css/reset.css"> <!-- CSS reset -->
<link rel="stylesheet" href="css/style.css"> <!-- Resource style -->
<script src="js/modernizr.js"></script> <!-- Modernizr -->
<title>Home Dashboard</title>
</head>
<body>
<div class="cd-tabs">
<nav>
<ul class="cd-tabs-navigation">
<li><a data-content="Home" class="selected" href="#0"><span class="fa fa-globe fa-lg"></span> Home</a></li>
<li><a data-content="Deluge" href="#0"><span class="glyphicon glyphicon-magnet"></span> Deluge</a></li>
<li><a data-content="Sonarr" href="#0"><span class="glyphicon glyphicon-calendar fa-lg"></span> Sonarr</a></li>
<li><a data-content="CouchPotato" href="#0"><span class="fa fa-television fa-lg"></span> CouchPotato</a></li>
<li><a data-content="SABnzbd" href="#0"><span class="fa fa-download fa-lg"></span> SABnzbd</a></li>
<li><a data-content="PlexRequests" href="#0"><span class="glyphicon glyphicon-bullhorn fa-lg"></span> PlexRequests</a></li>
<li><a data-content="PlexPy" href="#0"><span class="fa fa-server fa-lg"></span> PlexPy</a></li>
<li><a data-content="Plex" href="#0"><span class="fa fa-play-circle fa-lg"></span> Plex</a></li>
</ul>
</nav>
<ul class="cd-tabs-content">
<ul class="cd-tabs-content">
<li data-content="Home" class="selected">
<iframe scrolling=auto src="info.php" style="width:100%; height:926px"></iframe>
</li>
<li data-content="Deluge">
<iframe scrolling=auto src="DELUGEADDRESS" style="width:100%; height:926px"></iframe>
</li>
<li data-content="Sonarr">
<iframe scrolling=auto src="SONARRADDRESS" style="width:100%; height:926px"></iframe>
</li>
<li data-content="CouchPotato">
<iframe scrolling=auto src="COUCHPOTATOADDRESS" style="width:100%; height:926px"></iframe>
</li>
<li data-content="SABnzbd">
<iframe scrolling=auto src="SABNZBDADDRESS" style="width:100%; height:926px"></iframe>
</li>
<li data-content="PlexRequests">
<iframe scrolling=auto src="PLEXREQUESTSADDRESS" style="width:100%; height:926px"></iframe>
</li>
<li data-content="PlexPy">
<iframe scrolling=auto src="PLEXPYADDRESS" style="width:100%; height:926px"></iframe>
</li>
<li data-content="Plex">
<iframe scrolling=auto src="PLEXADDRESS" style="width:100%; height:926px"></iframe>
</li>
</ul>
</div>
<script src="js/jquery-2.1.1.js"></script>
<script src="js/main.js"></script> <!-- Resource jQuery -->
</body>
</html>
<html>
<head>
<title>Home 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 href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.6/yeti/bootstrap.min.css" rel="stylesheet" integrity="sha256-daEYF2SGTkiPl4cmxH06AOMnZ+Hb8wBpvs7DqvceszY= sha512-xmSDqcgDrroCG8Sp/p0IArjjB3lO0m0Yde0tm1mOFD4BwmsvZnVNfHgw7icU6q4ScrTCQKCokxnYMy/hUUfGrg==" crossorigin="anonymous">
</head>
<body>
<div class="container">
<h1><i class="glyphicon glyphicon-globe"></i> Welcome to Your Dashboard</h1>
<div class="row">
<div class="col-md-4">
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">Main Network</h3>
</div>
<ul class="list-group">
<li class="list-group-item"><a href="http://ADDRESSHERE" target="_blank"><i class="glyphicon glyphicon-lock"></i> pfSense</a> - Main Internet&nbsp;
<span class="glyphicon glyphicon-new-window" aria-hidden="true"></span>
</li>
<li class="list-group-item"><a href="http://ADDRESSHERE" target="_blank"><i class="glyphicon glyphicon-signal"></i> Access Point</a> - Archer C9&nbsp;
<span class="glyphicon glyphicon-new-window" aria-hidden="true"></span>
</li>
<li class="list-group-item"><a href="http://ADDRESSHERE" target="_blank"><i class="glyphicon glyphicon-random"></i> Switch 01</a> - 24-Port Switch&nbsp;
<span class="glyphicon glyphicon-new-window" aria-hidden="true"></span>
</li>
<li class="list-group-item"><a href="http://ADDRESSHERE" target="_blank"><i class="glyphicon glyphicon-random"></i> Switch 02</a> - 8-Port Switch&nbsp;
<span class="glyphicon glyphicon-new-window" aria-hidden="true"></span>
</li>
<li class="list-group-item"><a href="http://ADDRESSHERE" target="_blank"><i class="glyphicon glyphicon-off"></i> APC</a> - UPS Manager&nbsp;
<span class="glyphicon glyphicon-new-window" aria-hidden="true"></span>
</li>
</ul>
</div>
</div>
<div class="col-md-4">
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">Services</h3>
</div>
<ul class="list-group">
<li class="list-group-item"><a href="http://ADDRESSHERE" target="_blank"><i class="glyphicon glyphicon-hdd"></i> OMV</a> - NAS Control&nbsp;
<span class="glyphicon glyphicon-new-window" aria-hidden="true"></span>
</li>
<li class="list-group-item"><a href="https://ADDRESSHERE" target="_blank"><i class="glyphicon glyphicon-globe"></i> OpenVPN</a> - VPN Control&nbsp;
<span class="glyphicon glyphicon-new-window" aria-hidden="true"></span>
</li>
<li class="list-group-item"><a href="https://ADDRESSHERE" target="_blank"><i class="glyphicon glyphicon-cloud"></i> vCenter</a> - VM Control&nbsp;
<span class="glyphicon glyphicon-new-window" aria-hidden="true"></span>
</li>
</ul>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">NAS Space</h3>
</div>
<div class="panel-body">
<?php
$url = 'http://SABNZBDADDRESS/api?mode=qstatus&output=xml&apikey=APIKEY';
$xml = new SimpleXMLElement(file_get_contents($url));
$diskSpace = floatval($xml->diskspace1);
echo "Free Disk Space: <b>" . round($diskSpace,2) . "GB</b>";
?>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Network Map</h3>
</div>
<div class="panel-body">
<iframe id="map_embed" type="text/html" frameborder="0" width=100% height=700 src="https://PRTGMAPADDRESS"></iframe>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Weather</h3>
</div>
<div class="panel-body">
<iframe id="forecast_embed" type="text/html" frameborder="0" height="245" width="100%" src="//forecast.io/embed/#lat=LATITUDEHERE&lon=LONGITUDEHERE&name=CITYNAMEHERE&color=#5BC0DE&font=Helvetica&units=us"> </iframe>
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment