diff options
| author | Adam Coldrick <adam@sotk.co.uk> | 2015-09-26 09:51:14 +0100 |
|---|---|---|
| committer | Adam Coldrick <adam@sotk.co.uk> | 2015-09-26 09:51:21 +0100 |
| commit | ae8a444adc4a30497b1810c056930b6dcd48bb26 (patch) | |
| tree | 84a83a4e39693ebf1dc1b2b2cc5b67d7f2f06f1e | |
| download | ciat-ui-ae8a444adc4a30497b1810c056930b6dcd48bb26.tar.gz | |
Initial Commit
This work was done as a UI demo for Baserock CIAT by Michael Drake.
| -rw-r--r-- | index.html | 93 |
1 files changed, 93 insertions, 0 deletions
diff --git a/index.html b/index.html new file mode 100644 index 0000000..b8f7b2d --- /dev/null +++ b/index.html @@ -0,0 +1,93 @@ +<!DOCTYPE html> +<html> +<head> +<link href='https://fonts.googleapis.com/css?family=Sarpanch:800,400' rel='stylesheet' type='text/css'> +<style> + +html,body { + margin: 0; + padding: 0; + overflow-x: hidden; +} + +body { + color: #bbb; + background: #444; + font-family: sans-serif; +} + +h1 { + font-family: 'Sarpanch', sans-serif; + font-size: 32pt; + border-bottom: 2px solid #f80; + padding: 2.1em 1.5em 0.1em 1.5em; + box-shadow: inset 0 0 60px 10px #111; + margin: 0 -1em 0 -1em; + position: relative; + top: -2em; +} + +h1>em { + font-style: normal; + color: #ddd; +} + +h1>span { + font-style: normal; + color: #777; +} + +.box { + color: black; + float: left; + padding: 1em; + margin: 1.4em; + box-shadow:6px 6px 10px 2px #111; + border-radius: 0.5em; +} + +.pass { + background: #77ee77; + border: 2px solid #00dd00; +} + +.fail { + background: #ff8888; + border: 2px solid #ff0000; +} + +.active { + -webkit-animation:active 1s linear infinite; + animation:active 1s linear infinite; +} + +@-webkit-keyframes active { + 0%{box-shadow:0 0 0 1px #444, 0 0 0 4px rgba(255, 255, 78, 0.7),6px 6px 10px 2px #111} + 100%{box-shadow:0 0 0 5px #444, 0 0 0 14px rgba(255, 255, 78, 0 ),6px 6px 10px 2px #111} +} + +@keyframes active { + 0%{box-shadow:0 0 0 1px #444, 0 0 0 4px rgba(255, 255, 78, 0.7),6px 6px 10px 2px #111} + 100%{box-shadow:0 0 0 5px #444, 0 0 0 14px rgba(255, 255, 78, 0 ),6px 6px 10px 2px #111} +} + +.visulisation { + margin-left: auto; + margin-right: auto; + display: table; +} + +</style> +</head> +<body> +<h1><em>Baserock</em> <span>|</span> CIAT</h1> + +<div class="visulisation"> +<div class="box pass">Firehose</div> +<div class="box pass active">Build</div> +<div class="box fail">Deploy</div> +<div class="box pass">Test</div> +</div> +</body> +</html> + |