initial commit

This commit is contained in:
philgran
2011-03-30 14:52:31 -04:00
commit 0c9f94fe1d
+185
View File
@@ -0,0 +1,185 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>LUXr Prototype - Triage Screen</title>
<style type="text/css" media="screen">
body {
font: 75%/1.5 "Helvetica Neue", Helvetica, sans-serif;
}
h1, h2, h3, h4, h5, h6 {
margin: 0;
padding: 8px;
}
a {
color: #000;
font-weight: bold;
text-decoration: none;
}
#container {
margin: 0 auto;
width: 1000px;
}
form {
border-bottom: 4px solid;
}
form ul {
margin: 0;
padding: 10px;
}
form ul li {
list-style-type: none;
float: left;
margin: 0 5px;
}
form ul li a {
background: #ccc;
border: 1px solid;
display: block;
padding: 3px 6px;
border-radius: 6px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
}
form ul li.toggle {
float: right;
}
form ul li.toggle a {
background: transparent;
border: 0 none;
text-decoration: underline;
}
.campaign {
border: 2px solid;
float: left;
margin: 14px;
position: relative;
width: 300px;
}
.campaign h1 {
border-bottom: 1px solid;
line-height: 45px;
}
.campaign h1 span {
display: inline-block;
width: 50px;
height: 50px;
vertical-align: middle;
border-radius: 50px;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
}
.campaign h2 span {
display: inline-block;
width: 30px;
height: 30px;
vertical-align: middle;
border-radius: 30px;
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
}
.campaign ul li {
margin-bottom: 0.5em;
}
.campaign ul li a {
display: inline-block;
border: 1px solid;
background: #ccc;
padding: 0 4px;
}
.bad { background: red; }
.okay { background: orange; }
.good { background: green; }
.cta {
display: block;
font-size: 25px;
font-weight: normal;
float: right;
margin-right: 8px;
}
dl dt {
float: left;
padding: 0 4px;
}
dl dd a {
display: inline-block;
border: 1px solid;
background: #ccc;
padding: 0 4px;
}
/* CLEARFIX */
.clearfix:after {
content:".";
display:block;
clear:both;
visibility:hidden;
line-height:0;
height:0;
}
.clearfix {
display:inline-block;
}
html[xmlns] .clearfix {
display:block;
}
* html .clearfix {
height:1%;
}
</style>
</head>
<body>
<div id="container">
<form action="#" method="get" accept-charset="utf-8">
<ul class="clearfix">
<li><a href="#">Troubled<br/>Campaigns</a></li>
<li><a href="#">Ending<br/>Soon</a></li>
<li><a href="#">Setup<br/>Issues</a></li>
<li class="toggle"><a href="#">Edit<br/>Presets</a></li>
</ul>
</form>
<div id="results">
<div class="campaign">
<h1>Pacing: 72</h1>
<h2><span class="okay"></span> Health: 83%</h2>
<ul>
<li>Targeting is narrow <a href="#">Change targeting</a></li>
</ul>
<a href="#" class="cta" title="Go to detailed campaign view">&#x27A1;</a>
</div>
<div class="campaign">
<h1><span class="bad"></span> Health: 61%</h1>
<ul>
<li>CPM is low relative to ECP <a href="#">Increase CPM</a></li>
<li>Targeting is narrow <a href="#">Change targeting</a></li>
</ul>
<a href="#" class="cta" title="Go to detailed campaign view">&#x27A1;</a>
</div>
<div class="campaign">
<h1>Pacing: 108</h1>
<h2><span class="good"></span> Health: 94%</h2>
<ul>
<li>CPM is good.</li>
<li>Targeting is good.</li>
</ul>
<a href="#" class="cta" title="Go to detailed campaign view">&#x27A1;</a>
</div>
<div class="campaign">
<h1>2 hours left</h1>
<h2><span class="bad"></span> Health: 54%</h2>
<ul>
<li>Targeting is narrow <a href="#">Change targeting</a></li>
</ul>
<a href="#" class="cta" title="Go to detailed campaign view">&#x27A1;</a>
</div>
</div>
</div>
</body>
</html>