You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
104 lines
2.2 KiB
HTML
104 lines
2.2 KiB
HTML
<html lang="en">
|
|
<head>
|
|
<title>The Screenless Office - Main Menu</title>
|
|
<style type="text/css">
|
|
body {
|
|
font-family: "FreeUniversal";
|
|
font-size: 11pt;
|
|
}
|
|
h1, h3 {
|
|
}
|
|
#title {
|
|
font-size: 20pt;
|
|
}
|
|
.bureau {
|
|
padding-top: 1em;
|
|
clear: both;
|
|
width: 100%;
|
|
page-break-inside: avoid;
|
|
}
|
|
.bureau h3 {
|
|
border-bottom: 1px solid black;
|
|
}
|
|
.bureau .description {
|
|
line-height: 1.2;
|
|
float: left;
|
|
width: 63%;
|
|
padding-right: 3%;
|
|
margin: 0 0 2em 0;
|
|
}
|
|
.bureau .prefix {
|
|
width: 30%;
|
|
float: left;
|
|
padding-right: 3%;
|
|
}
|
|
.cmd {
|
|
clear: both;
|
|
width: 100%;
|
|
}
|
|
.cmdcol{
|
|
width: 30%;
|
|
float: left;
|
|
padding-right: 3%;
|
|
padding-bottom: 0.5em;
|
|
}
|
|
.cmdcol svg {
|
|
width: 100%;
|
|
height: 41px;
|
|
}
|
|
.cmdcol img {
|
|
height: 50px;
|
|
float: right;
|
|
max-width: 100%;
|
|
}
|
|
.cmddesc {
|
|
margin-top: 0;
|
|
line-height: 1.1;
|
|
hyphens: auto;
|
|
}
|
|
.cmdname {
|
|
font-weight: bold;
|
|
text-transform: uppercase;
|
|
line-height: 1.1;
|
|
}
|
|
.cmdtxt {
|
|
margin-top: 1em;
|
|
}
|
|
.cmdtxt kbd {
|
|
font-size: 10pt;
|
|
font-family: Courier;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div "main">
|
|
<h1 id="title">The Screenless Office</h1>
|
|
<em>Directory of Services</em>
|
|
%for prefix, buro in menu.items():
|
|
<div class="bureau">
|
|
<h3>${buro["name"]}</h3>
|
|
<div class="prefix">Prefix: ${prefix}</div>
|
|
<p class="description">${buro["desc"]}</p>
|
|
<div class="commands">
|
|
%for cmdtxt, cmd in buro["commands"].items():
|
|
% if cmdtxt != "test":
|
|
<div class="cmd">
|
|
<div class="cmdcol">
|
|
<div class="cmdname">${cmd["name"]}</div>
|
|
<div class="cmdtxt">command: <kbd>${cmdtxt}</kbd></div>
|
|
</div>
|
|
<div class="cmdcol">
|
|
<p class="cmddesc">${cmd["desc"]}</p>
|
|
</div>
|
|
<!--div class="cmdcol">${cmd["barcode"]}</div-->
|
|
<div class="cmdcol"><img src="${cmd["barcode_png"]}" /></div>
|
|
</div>
|
|
% endif
|
|
%endfor
|
|
</div>
|
|
</div>
|
|
%endfor
|
|
</div>
|
|
</body>
|
|
</html>
|