Skip to content

Instantly share code, notes, and snippets.

@alexschwartz

alexschwartz/dashboard.html

Created October 23, 2012 22:45
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save alexschwartz/3942264 to your computer and use it in GitHub Desktop.
Save alexschwartz/3942264 to your computer and use it in GitHub Desktop.
Download ZIP
Cloud Dashboard CSS Layout v1
Raw
dashboard.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Generic AWS Regional Status Page</title>
<meta name="description" content="Generic AWS Regional Status Page">
<meta name="copyright" content="Copyright (c) 2012 Alex Schwartz">
<meta name="author" content="Alex Schwartz">
<style type="text/css" media="screen, print, projection">
body, html {
color: #ffffff;
background: #000000;
font-family: 'NokiaPureTextLight',"Lucida Grande",Tahoma,sans-serif;
font-weight: 100;
font-size: 22px;
margin: 0;
padding: 0;
height: 100%; /* needed for container min-height */
}
#header {
padding: 5px 10px;
text-align: center;
}
legend {
text-align: center;
padding-left: 0.3em;
padding-right: 0.3em;
}
#status-ok, #status-error, #status-warn {
color: #01234;
padding-left: 30px;
margin: 10px;
}
#status-ok { background: url(icons/ok.png) left no-repeat; }
#status-error { background: url(icons/error.png) left no-repeat; }
#status-warn { background: url(icons/warn.png) left no-repeat; }
#timestamp {
text-align: right;
}
h1 {
margin: 0;
font-weight: lighter;
font-size: 32px;
}
#backgrd-row-1, #backgrd-row-2 {
background: #C2BD7F;
}
#backgrd-rows {
}
#backgrd-row-1 {
position: absolute;
height: 25%;
width: 95%;
top: 20%;
z-index: 1;
}
#backgrd-row-2 {
position: absolute;
height: 25%;
width: 95%;
top: 50%;
z-index: 1;
}
#backgrd-row-1 h2 {
font-size: 22px;
width: 10%;
margin: 10px;
}
#backgrd-row-2 h2 {
font-size: 22px;
width: 10%;
margin: 10px;
}
#regions {
}
#regions div {
}
#region1, #region2, #region3, #region4 {
width: 21%;
padding:5px;
margin:5px;
position: absolute;
height: 70%;
z-index: 3;
top: 60pt;
}
#region1 { left: 8%; }
#region2 { left: 29%; }
#region3 { left: 50%; }
#region4 { left: 71%; }
fieldset {
border: 4px solid #ddd;
border-style: dotted;
padding: 0 1.4em 1.4em 1.4em;
margin: 0 0 1.5em 0;
border-radius: 12px;
margin: 0 5px;
height: 100%;
}
div#level1 {
margin-top: 35px;
}
div#footer {
font-size: 9px;
}
<!-- === Box layout ================================================ -->
body, html {
margin: 0;
padding: 0;
height: 100%; /* needed for container min-height */
}
div#container {
position: relative; /* needed for footer positioning*/
margin: 0 auto; /* center, not in IE5 */
width: 100%;
height: auto !important; /* real browsers */
height: 100%; /* IE6: treaded as min-height*/
min-height: 100%; /* real browsers */
}
div#header {
padding: 1em;
}
div#content {
padding: 1em 1em 5em; /* bottom padding for footer */
}
div#footer {
position: absolute;
width: 100%;
bottom: 0; /* stick to bottom */
}
div#footer p {
padding: 1em;
margin: 0;
}
</style>
</head>
<body>
<div id="container">
<!-- ========= Header ========================== -->
<div id="header">
<h1>Generic Regional Status Page</h1>
</div>
<!-- ========= Main Content ========================== -->
<div id="content">
<div id="regions">
<div id="region1">
<fieldset>
<legend>us-west-2</legend>
<div id="level1">
<div id="status-ok"><label>EC2</label></div>
<div id="status-error"><label>CW</label></div>
</div>
</fieldset>
</div>
<div id="region2">
<fieldset>
<legend>us-east-1</legend>
<div id="level1">
<div id="status-ok"><label>EC2</label></div>
<div id="status-error"><label>CW</label></div>
</div>
</fieldset>
</div>
<div id="region3">
<fieldset>
<legend>eu-west-1</legend>
<div id="level1">
<div id="status-ok"><label>EC2</label></div>
<div id="status-error"><label>CW</label></div>
</div>
</fieldset>
</div>
<div id="region4">
<fieldset>
<legend>ap-southeast-1</legend>
<div id="level1">
<div id="status-ok"><label>EC2</label></div>
<div id="status-error"><label>CW</label></div>
</div>
</fieldset>
</div>
</div>
<div id="backgrd-rows">
<div id="backgrd-row-1">
<h2>Grp 1</h2>
</div>
<div id="backgrd-row-2">
<h2>Grp 2</h2>
</div>
</div>
</div>
<!-- ========= Footer ========================== -->
<div id="footer">
<p><strong>When generated?</strong> 2012-10-22, 14:00 (GMT) = 14:00
(CEST)</p>
</div>
</div>
</body>
</html>
Raw
dashboard_overlap.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Generic AWS Regional Status Page</title>
<meta name="description" content="Generic AWS Regional Status Page">
<meta name="copyright" content="Copyright (c) 2012 Alex Schwartz">
<meta name="author" content="Alex Schwartz">
<style type="text/css" media="screen, print, projection">
body, html {
color: #ffffff;
background: #000000;
font-family: 'NokiaPureTextLight',"Lucida Grande",Tahoma,sans-serif;
font-weight: 100;
font-size: 22px;
margin: 0;
padding: 0;
height: 100%; /* needed for container min-height */
}
#header {
padding: 5px 10px;
text-align: center;
}
legend {
text-align: center;
padding-left: 0.3em;
padding-right: 0.3em;
}
#status-ok, #status-error, #status-warn {
color: #01234;
padding-left: 30px;
margin: 10px;
padding-top: 4px;
padding-bottom: 4px;
}
#status-ok { background: url(icons/ok.png) left no-repeat green; }
#status-error { background: url(icons/error.png) left no-repeat #D00000; }
#status-warn { background: url(icons/warn.png) left no-repeat #FFCC33; }
#timestamp {
text-align: right;
}
h1 {
margin: 0;
font-weight: lighter;
font-size: 32px;
}
#backgrd-row-1 { background: #707070; }
#backgrd-row-2 { background: #404040; }
#backgrd-rows {
}
#backgrd-row-1 {
position: absolute;
height: 15%;
width: 95%;
top: 20%;
z-index: 1;
}
#backgrd-row-2 {
position: absolute;
height: 15%;
width: 95%;
top: 50%;
z-index: 1;
}
#backgrd-row-1 h2 {
font-size: 22px;
width: 10%;
margin: 10px;
margin-top: 35px;
}
#backgrd-row-2 h2 {
font-size: 22px;
width: 10%;
margin: 10px;
margin-top: 35px;
}
#regions {
}
#regions div {
}
#region1, #region2, #region3, #region4 {
width: 21%;
padding:5px;
margin:5px;
position: absolute;
height: 70%;
z-index: 3;
top: 60pt;
}
#region1 { left: 8%; }
#region2 { left: 29%; }
#region3 { left: 50%; }
#region4 { left: 71%; }
fieldset {
border: 4px solid #ddd;
border-style: dotted;
padding: 0 0.4em 0.4em 0.4em;
margin: 0 0 1.5em 0;
border-radius: 12px;
margin: 0 5px;
height: 100%;
}
div#level1 {
margin-top: 35px;
position:relative;
height: 25;
}
div#centered {
text-align: center;
margin-top: 60px;
}
div#footer {
font-size: 9px;
}
<!-- === Box layout ================================================ -->
body, html {
margin: 0;
padding: 0;
height: 100%; /* needed for container min-height */
}
div#container {
position: relative; /* needed for footer positioning*/
margin: 0 auto; /* center, not in IE5 */
width: 100%;
height: auto !important; /* real browsers */
height: 100%; /* IE6: treaded as min-height*/
min-height: 100%; /* real browsers */
}
div#header {
padding: 1em;
}
div#content {
padding: 1em 1em 5em; /* bottom padding for footer */
}
div#footer {
position: absolute;
width: 100%;
bottom: 0; /* stick to bottom */
}
div#footer p {
padding: 1em;
margin: 0;
}
</style>
</head>
<body>
<div id="container">
<!-- ========= Header ========================== -->
<div id="header">
<h1>Generic Regional Status Page</h1>
</div>
<!-- ========= Main Content ========================== -->
<div id="content">
<div id="regions">
<div id="region1">
<fieldset>
<legend>us-west-2</legend>
<div id="level1">
<div id="status-ok"><label>Alarms: 0</label></div>
<div id="status-warn"><label>Insuff. Data: 2</label></div>
</div>
</fieldset>
</div>
<div id="region2">
<fieldset>
<legend>us-east-1</legend>
<div id="level1">
<div id="status-error"><label>Alarms: 10</label></div>
<div id="status-ok"><label>Insuff. Data: 0</label></div>
</div>
</fieldset>
</div>
<div id="region3">
<fieldset>
<legend>eu-west-1</legend>
<div id="level1">
<div id="status-ok"><label>Alarms: 0</label></div>
<div id="status-ok"><label>Insuff. Data: 0</label></div>
</div>
</fieldset>
</div>
<div id="region4">
<fieldset>
<legend>ap-southeast-1</legend>
<div id="level1">
<div id="centered">n/a</div>
</div>
</fieldset>
</div>
</div>
<div id="backgrd-rows">
<div id="backgrd-row-1">
<h2>Grp 1</h2>
</div>
<div id="backgrd-row-2">
<h2>Grp 2</h2>
</div>
</div>
</div>
<!-- ========= Footer ========================== -->
<div id="footer">
<p><strong>When generated?</strong> 2012-10-22, 14:00 (GMT) = 14:00
(CEST)</p>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment