mirror of
https://github.com/adnexus/luxr-prototype.git
synced 2026-07-27 06:13:04 +00:00
initial commit
This commit is contained in:
+185
@@ -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">➡</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">➡</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">➡</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">➡</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user