tuicss
Version:
TuiCss is a library for developing Web applications that uses text-based user interface applications (TUI) as a style
72 lines (69 loc) • 4.36 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>BIOS Example</title>
<script src="../dist/tuicss.min.js"></script>
<link rel="stylesheet" href="../dist/tuicss.min.css">
</head>
<body>
<div class="tui-screen-800-600 bordered white-168">
<div class="tui-panel cyan-168 full-width black-255-text tui-no-shadow center">
BIOS
</div>
<div class="tui-tabs">
<ul>
<li><a class="tui-tab active" data-tab-content="tab-1-content">Main</a></li>
<li><a class="tui-tab" data-tab-content="tab-2-content">Exit</a></li>
</ul>
</div>
<div class="tui-tab-content tui-content" id="tab-1-content">
<table class="tui-table-grid">
<tbody>
<tr>
<td rowspan="2" width="60%" class="blue-168-text">
<br>System Time.........:<input type="text" class="tui-input white-168 black-text" value="[09:21:30]" style="width: 150px" />
<br>System Date.........:<input type="text" class="tui-input white-168 black-text" value="[15/09/1994]" style="width: 150px" />
<br>
<br>Legacy Diskette A...:<input type="text" class="tui-input white-168 black-text" value="[1.44/1.25 MB]" style="width: 150px" />
<br>Legacy Diskette B...:<input type="text" class="tui-input white-168 black-text" value="[disabeld]" style="width: 150px" />
<br>
<br>Primary Master......:<input type="text" class="tui-input white-168 black-text" value="[None]" style="width: 150px" />
<br>Primary Slave.......:<input type="text" class="tui-input white-168 black-text" value="[None]" style="width: 150px" />
<br>Secondary Master....:<input type="text" class="tui-input white-168 black-text" value="[CD-ROM]" style="width: 150px" />
<br>Secondary Slave.....:<input type="text" class="tui-input white-168 black-text" value="[None]" style="width: 150px" />
<br>
<br>Keyboard Features...:<input type="text" class="tui-input white-168 black-text" value="[Enter]" style="width: 150px" />
<br>
<br>System Memory.......:<input type="text" class="tui-input white-168 black-text" value="[640 KB]" style="width: 150px" />
<br>Extended Memory.....:<input type="text" class="tui-input white-168 black-text" value="[3568410 KB]" style="width: 150px" />
<br>Boot-time Diagnostic:<input type="text" class="tui-input white-168 black-text" value="[Enabled]" style="width: 150px" />
</td>
<td width="40%" class="center">Item Specified Help</td>
</tr>
<tr>
<td width="25" height="448px">
<br><Tab>, <Shift-Tab> or <Enter> selects field.
</td>
</tr>
</tbody>
</table>
</div>
<div class="tui-tab-content tui-content" id="tab-2-content">
</div>
<div class="tui-statusbar absolute cyan-168">
<ul>
<li><a href="#!"><span class="white-255-text">F1</span> Help</a></li>
<li><a href="#!"><span class="white-255-text">↑↓</span> Select Item</a></li>
<li><a href="#!"><span class="white-255-text">-/+</span> Change Values</a></li>
<li><a href="#!"><span class="white-255-text">F9</span> Setup Defaults</a></li>
<br>
<li><a href="#!"><span class="white-255-text">Esc</span> Exit</a></li>
<li><a href="#!"><span class="white-255-text">←→</span> Select Menu</a></li>
<li><a href="#!"><span class="white-255-text">Enter</span> Select Sub-Menu</a></li>
<li><a href="#!"><span class="white-255-text">F10</span> Save and Exit</a></li>
</ul>
</div>
</div>
</body>
</html>