<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Uestibulum Greeter</title>
<link rel=stylesheet href=css/font-awesome.min.css >
<link rel=stylesheet href=css/lightdm-uestibulum.css >
</head>
<body>
<img id=background-image>
<div id=ui-container>
<div id=power-panel>
<div id=power-button><i class="fa fa-power-off fa-3x"></i></div>
<div id=power-options class=visible>
<ul>
<li id=suspend><i class='fa fa-moon-o'></i> Suspend</li>
<li id=restart><i class='fa fa-refresh'></i> Restart</li>
<li id=shutdown><i class='fa fa-power-off'></i> Shutdown</li>
</ul>
</div>
</div>
<div id=login-panel>
<h1>
<span id=greeting>Good day</span>
<div id=users>
<span id=user-display>User</span>
<ul id=users-list></ul>
<i class='fa fa-user-circle'></i>
</div>
</h1>
<input type=password name=pwd placeholder='password...'>
<i class='fa fa-exclamation-circle' id=fail-msg></i>
<div id=checking-credentials>checking credentials
<span class=c1>.</span><span class=c2>.</span><span class=c3>.</span>
</div>
</div>
<div id=session-panel>
<h2>
session:
<div id=sessions>
<span id=session-display>default</span>
<ul id=sessions-list></ul>
</div>
</h2>
</div>
<div id=clock-panel>
<span class=hours></span><!--
--><span class=throb>:</span><!--
--><span class=minutes></span>
</div>
</div>
<script type=application/javascript src=js/jquery-3.1.1.slim.min.js ></script>
<script type=application/javascript src=js/underscore-min.js ></script>
<script type=application/javascript src=js/backbone-min.js ></script>
<script type=application/javascript src=js/lightdm-mock.js ></script>
<script type=application/javascript src=js/lightdm-uestibulum.js ></script>
</body>
</html>