143 lines
6.5 KiB
HTML
143 lines
6.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>DATACOM-3000 // Retro Data Explorer</title>
|
|
<link rel="stylesheet" href="styles.css">
|
|
</head>
|
|
<body>
|
|
<div class="terminal-container">
|
|
<header class="terminal-header">
|
|
<div class="terminal-title">
|
|
<span class="terminal-icon">◼◼◼</span>
|
|
<h1>DATACOM-3000 SYSTEM v2.31</h1>
|
|
</div>
|
|
<div class="terminal-controls">
|
|
<button class="terminal-btn minimize" aria-label="Minimize">_</button>
|
|
<button class="terminal-btn maximize" aria-label="Maximize">□</button>
|
|
<button class="terminal-btn close" aria-label="Close">X</button>
|
|
</div>
|
|
</header>
|
|
|
|
<nav class="command-bar">
|
|
<div class="command-prompt">
|
|
<span class="prompt-symbol">C:\DATA></span>
|
|
<input type="text" class="command-input" placeholder="Enter command..." aria-label="Command input">
|
|
</div>
|
|
<div class="status-indicators">
|
|
<span class="indicator" data-status="active">SYS</span>
|
|
<span class="indicator" data-status="active">NET</span>
|
|
<span class="indicator" data-status="idle">DSK</span>
|
|
</div>
|
|
</nav>
|
|
|
|
<main class="data-explorer">
|
|
<section class="controls-panel">
|
|
<div class="filter-group">
|
|
<label for="search-filter" class="control-label">> SEARCH:</label>
|
|
<input type="text" id="search-filter" class="filter-input" placeholder="*.*">
|
|
</div>
|
|
|
|
<div class="sort-group">
|
|
<label class="control-label">> SORT BY:</label>
|
|
<select id="sort-selector" class="sort-select">
|
|
<option value="id">ID</option>
|
|
<option value="name">NAME</option>
|
|
<option value="size">SIZE</option>
|
|
<option value="date">DATE</option>
|
|
</select>
|
|
<button class="sort-direction" aria-label="Toggle sort direction">▲</button>
|
|
</div>
|
|
|
|
<div class="action-group">
|
|
<button class="action-btn" data-action="import">
|
|
<span class="btn-icon">[↓]</span> IMPORT
|
|
</button>
|
|
<button class="action-btn" data-action="export">
|
|
<span class="btn-icon">[↑]</span> EXPORT
|
|
</button>
|
|
<button class="action-btn" data-action="refresh">
|
|
<span class="btn-icon">[↻]</span> REFRESH
|
|
</button>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="data-viewport">
|
|
<div class="data-table-wrapper">
|
|
<table class="data-table" role="grid">
|
|
<thead>
|
|
<tr role="row">
|
|
<th role="columnheader" class="column-header" data-column="id">
|
|
<span class="header-text">ID</span>
|
|
<span class="resize-handle" aria-hidden="true"></span>
|
|
</th>
|
|
<th role="columnheader" class="column-header" data-column="name">
|
|
<span class="header-text">NAME</span>
|
|
<span class="resize-handle" aria-hidden="true"></span>
|
|
</th>
|
|
<th role="columnheader" class="column-header" data-column="type">
|
|
<span class="header-text">TYPE</span>
|
|
<span class="resize-handle" aria-hidden="true"></span>
|
|
</th>
|
|
<th role="columnheader" class="column-header" data-column="size">
|
|
<span class="header-text">SIZE</span>
|
|
<span class="resize-handle" aria-hidden="true"></span>
|
|
</th>
|
|
<th role="columnheader" class="column-header" data-column="modified">
|
|
<span class="header-text">MODIFIED</span>
|
|
<span class="resize-handle" aria-hidden="true"></span>
|
|
</th>
|
|
<th role="columnheader" class="column-header" data-column="preview">
|
|
<span class="header-text">PREVIEW</span>
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="data-tbody" role="rowgroup">
|
|
<!-- Data rows will be dynamically inserted here -->
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<aside class="data-preview">
|
|
<div class="preview-header">
|
|
<h3>> DATA PREVIEW</h3>
|
|
<button class="preview-close" aria-label="Close preview">X</button>
|
|
</div>
|
|
<div class="preview-content" id="preview-content">
|
|
<pre class="ascii-art">
|
|
╔═══════════════════╗
|
|
║ NO DATA SELECTED ║
|
|
║ ║
|
|
║ SELECT A ROW TO ║
|
|
║ VIEW PREVIEW ║
|
|
╚═══════════════════╝
|
|
</pre>
|
|
</div>
|
|
</aside>
|
|
</section>
|
|
|
|
<footer class="status-bar">
|
|
<div class="memory-usage">
|
|
<span class="label">MEM:</span>
|
|
<div class="memory-bar">
|
|
<div class="memory-used"></div>
|
|
</div>
|
|
<span class="memory-text">640K/1024K</span>
|
|
</div>
|
|
<div class="record-count">
|
|
<span class="label">RECORDS:</span>
|
|
<span id="record-count">0</span>
|
|
</div>
|
|
<div class="system-time">
|
|
<span id="system-time">00:00:00</span>
|
|
</div>
|
|
</footer>
|
|
</main>
|
|
|
|
<div class="scanlines" aria-hidden="true"></div>
|
|
</div>
|
|
|
|
<script src="script.js"></script>
|
|
</body>
|
|
</html> |