<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Perforce</title>
<link rel="stylesheet" href="css/lcars.css">
<style>
html, body { background: black }
.chart div {
font: 10px sans-serif;
background-color: steelblue;
text-align: left;
padding: 3px;
margin: 1px;
color: white;
}
.chart rect {
fill: steelblue;
}
.chart text {
fill: white;
font: 10px sans-serif;
text-anchor: end;
}
</style>
</head>
<body>
<div class="lcars-container">
<!-- TOP ROW
=========================================================== -->
<div class="lcars-row spaced">
<!-- TOP LEFT ELBOW
=========================================================== -->
<div class="lcars-column u-1-8 lcars-elbow left bottom lcars-blue-bg">
<a href="#" onclick="info()">Info</a>
</div>
<!-- TOP DIVIDER AND BUTTONS
=========================================================== -->
<div class="lcars-column u-6-8 lcars-divider lcars-blue-tan-divide">
</div>
<!-- TOP RIGHT ELBOW
=========================================================== -->
<div class="lcars-column u-1-8 lcars-elbow right bottom lcars-tan-bg">
<a href="#" onclick="users()">Users</a>
</div>
</div>
<div class="lcars-row">
<!-- RIGHT MENU
=========================================================== -->
<div class="lcars-column u-1-8">
<ul class="lcars-menu">
<li class="lcars-blue-bg"><a href="#" onclick="protect()">Protect</a></li>
<li class="lcars-blue-bg tall large-gap">Triggers</li>
<li class="lcars-tan-bg"><a href="#" onclick="configure()">Config</a></li>
<li class="lcars-tan-bg tall"><a href="#" onclick="values()">Values</a></li>
<li class="lcars-tan-bg">Testing 3</li>
</ul>
</div>
<!-- CENTER SECTION
=========================================================== -->
<div class="lcars-column u-6-8">
<div class="lcars-row">
<div class="sectionA lcars-column u-1-2" style="overflow-y:auto; overflow-x:hidden; height:250px">
Welcome, please click a button.
</div>
<div class="sectionB lcars-column u-1-2" style="overflow-y:auto; overflow-x:hidden; height:250px">
<div class="chart">
</div>
</div>
</div>
</div>
<!-- LEFT MENU
=========================================================== -->
<div class="lcars-column u-1-8">
<ul class="lcars-menu right">
<li class="lcars-tan-bg"><a href="#">Testing</a></li>
<li class="lcars-tan-bg tall large-gap">Testing Large</li>
<li class="lcars-blue-bg">Testing 2</li>
<li class="lcars-blue-bg tall">Testing Large 2</li>
<li class="lcars-blue-bg">Testing 3</li>
</ul>
</div>
</div>
<!-- BOTTOM ROW
=========================================================== -->
<div class="lcars-row spaced">
<!-- BOTTOM LEFT ELBOW
=========================================================== -->
<div class="lcars-column u-1-8 lcars-elbow left top lcars-tan-bg">
<a href="#">Side Button 3</a>
</div>
<!-- BOTTOM DIVIDER AND BUTTONS
=========================================================== -->
<div class="lcars-column u-6-8 lcars-divider bottom lcars-tan-blue-divide">
<div class="lcars-row">
<div class="lcars-column u-1-2">
<a href="#" onclick="clear()" class="lcars-button radius">Clear</a>
</div>
<div class="lcars-column u-1-2">
<a href="#" class="lcars-button radius">Button 2</a>
</div>
</div>
</div>
<!-- BOTTOM RIGHT ELBOW
=========================================================== -->
<div class="lcars-column u-1-8 lcars-elbow right top lcars-blue-bg">
<a href="#" onclick="counters()">Counters</a>
</div>
</div>
</div>
<script src="entry.js"></script>
</body>
</html>