Created
October 23, 2012 22:45
-
-
Save alexschwartz/3942264 to your computer and use it in GitHub Desktop.
Cloud Dashboard CSS Layout v1
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 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> |
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 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