213 lines
8.9 KiB
HTML
213 lines
8.9 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>UART Terminal</title>
|
||
|
|
<!-- Google Fonts for premium design: Inter for UI, JetBrains Mono for monospace data -->
|
||
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
|
||
|
|
<link rel="stylesheet" href="./index.css">
|
||
|
|
</head>
|
||
|
|
<body class="dark-theme">
|
||
|
|
<div class="app-container">
|
||
|
|
<!-- Header -->
|
||
|
|
<header class="app-header">
|
||
|
|
<h1>UART Terminal</h1>
|
||
|
|
<button id="theme-toggle" class="icon-btn" aria-label="Toggle Theme">
|
||
|
|
<!-- Sun Icon -->
|
||
|
|
<svg class="sun-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||
|
|
<circle cx="12" cy="12" r="5"></circle>
|
||
|
|
<line x1="12" y1="1" x2="12" y2="3"></line>
|
||
|
|
<line x1="12" y1="21" x2="12" y2="23"></line>
|
||
|
|
<line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
|
||
|
|
<line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
|
||
|
|
<line x1="1" y1="12" x2="3" y2="12"></line>
|
||
|
|
<line x1="21" y1="12" x2="23" y2="12"></line>
|
||
|
|
<line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
|
||
|
|
<line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
|
||
|
|
</svg>
|
||
|
|
<!-- Moon Icon -->
|
||
|
|
<svg class="moon-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||
|
|
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
|
||
|
|
</svg>
|
||
|
|
</button>
|
||
|
|
</header>
|
||
|
|
|
||
|
|
<!-- Main Workspace -->
|
||
|
|
<main class="app-main">
|
||
|
|
|
||
|
|
<!-- Connection Controls & Status -->
|
||
|
|
<section class="control-row">
|
||
|
|
<div class="action-buttons">
|
||
|
|
<button id="connect-btn" class="connect-btn disconnected" title="Connect to serial port">
|
||
|
|
<!-- Play Icon -->
|
||
|
|
<svg class="play-icon" viewBox="0 0 24 24" fill="currentColor">
|
||
|
|
<polygon points="6,4 20,12 6,20"></polygon>
|
||
|
|
</svg>
|
||
|
|
<!-- Stop Icon -->
|
||
|
|
<svg class="stop-icon" viewBox="0 0 24 24" fill="currentColor">
|
||
|
|
<rect x="5" y="5" width="14" height="14" rx="2"></rect>
|
||
|
|
</svg>
|
||
|
|
</button>
|
||
|
|
|
||
|
|
<button id="download-btn" class="download-btn" title="Download received log" disabled>
|
||
|
|
<!-- Download Icon -->
|
||
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||
|
|
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
|
||
|
|
<polyline points="7 10 12 15 17 10"></polyline>
|
||
|
|
<line x1="12" y1="15" x2="12" y2="3"></line>
|
||
|
|
</svg>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Connection Status Banner -->
|
||
|
|
<div id="status-banner" class="status-banner warn">
|
||
|
|
<svg class="status-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||
|
|
<circle cx="12" cy="12" r="10"></circle>
|
||
|
|
<line x1="12" y1="8" x2="12" y2="12"></line>
|
||
|
|
<line x1="12" y1="16" x2="12.01" y2="16"></line>
|
||
|
|
</svg>
|
||
|
|
<span id="status-text">Not connected. Click the connect button to select a port.</span>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- Settings Form Grid -->
|
||
|
|
<section class="settings-grid">
|
||
|
|
<div class="settings-group">
|
||
|
|
<label for="baud-rate">Baud Rate</label>
|
||
|
|
<div class="select-wrapper">
|
||
|
|
<select id="baud-rate">
|
||
|
|
<option value="300">300</option>
|
||
|
|
<option value="1200">1200</option>
|
||
|
|
<option value="2400">2400</option>
|
||
|
|
<option value="4800">4800</option>
|
||
|
|
<option value="9600">9600</option>
|
||
|
|
<option value="19200">19200</option>
|
||
|
|
<option value="38400">38400</option>
|
||
|
|
<option value="57600">57600</option>
|
||
|
|
<option value="74880">74880</option>
|
||
|
|
<option value="115200" selected>115200</option>
|
||
|
|
<option value="230400">230400</option>
|
||
|
|
<option value="250000">250000</option>
|
||
|
|
<option value="500000">500000</option>
|
||
|
|
<option value="1000000">1000000</option>
|
||
|
|
<option value="2000000">2000000</option>
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="settings-group">
|
||
|
|
<label for="data-bits">Data Bits</label>
|
||
|
|
<div class="select-wrapper">
|
||
|
|
<select id="data-bits">
|
||
|
|
<option value="8" selected>8</option>
|
||
|
|
<option value="7">7</option>
|
||
|
|
<option value="6">6</option>
|
||
|
|
<option value="5">5</option>
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="settings-group">
|
||
|
|
<label for="stop-bits">Stop Bits</label>
|
||
|
|
<div class="select-wrapper">
|
||
|
|
<select id="stop-bits">
|
||
|
|
<option value="1" selected>1</option>
|
||
|
|
<option value="2">2</option>
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="settings-group">
|
||
|
|
<label for="parity">Parity</label>
|
||
|
|
<div class="select-wrapper">
|
||
|
|
<select id="parity">
|
||
|
|
<option value="none" selected>none</option>
|
||
|
|
<option value="even">even</option>
|
||
|
|
<option value="odd">odd</option>
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- Received Data Section -->
|
||
|
|
<section class="received-data-section">
|
||
|
|
<div class="received-header">
|
||
|
|
<h2>Received Data</h2>
|
||
|
|
<div class="received-controls">
|
||
|
|
<div class="control-select-group">
|
||
|
|
<label for="scroll-mode">Scroll</label>
|
||
|
|
<div class="select-wrapper select-wrapper-sm">
|
||
|
|
<select id="scroll-mode">
|
||
|
|
<option value="auto" selected>Auto-scroll</option>
|
||
|
|
<option value="none">No scroll</option>
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="control-select-group">
|
||
|
|
<label for="display-format">Display Format</label>
|
||
|
|
<div class="select-wrapper select-wrapper-sm">
|
||
|
|
<select id="display-format">
|
||
|
|
<option value="auto" selected>Auto</option>
|
||
|
|
<option value="text">Text</option>
|
||
|
|
<option value="hex">Hex</option>
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Terminal Console -->
|
||
|
|
<div class="terminal-wrapper">
|
||
|
|
<div id="terminal-output" class="terminal-output empty" tabindex="0">No data received yet...</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- Send Data Input Area -->
|
||
|
|
<section class="send-data-section">
|
||
|
|
<div class="send-bar">
|
||
|
|
<div class="input-container">
|
||
|
|
<input type="text" id="send-input" placeholder="Enter data to send... (Ctrl+Tab to insert tab)" autocomplete="off">
|
||
|
|
</div>
|
||
|
|
<div class="select-wrapper select-wrapper-sm send-format-wrapper">
|
||
|
|
<select id="send-format">
|
||
|
|
<option value="ascii" selected>ASCII</option>
|
||
|
|
<option value="hex">Hex</option>
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
<div class="select-wrapper select-wrapper-sm send-eol-wrapper">
|
||
|
|
<select id="send-eol">
|
||
|
|
<option value="none">None</option>
|
||
|
|
<option value="lf">LF (\n)</option>
|
||
|
|
<option value="cr">CR (\r)</option>
|
||
|
|
<option value="crlf" selected>CRLF (\r\n)</option>
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
<button id="send-btn" class="send-btn" title="Send Data (Ctrl+Enter)">
|
||
|
|
<!-- Send / Paper Airplane Icon -->
|
||
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||
|
|
<line x1="22" y1="2" x2="11" y2="13"></line>
|
||
|
|
<polygon points="22 2 15 22 11 13 2 9 22 2"></polygon>
|
||
|
|
</svg>
|
||
|
|
</button>
|
||
|
|
<button id="clear-btn" class="clear-btn" title="Clear Terminal Console">
|
||
|
|
<!-- Trash Icon -->
|
||
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||
|
|
<polyline points="3 6 5 6 21 6"></polyline>
|
||
|
|
<path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
|
||
|
|
<line x1="10" y1="11" x2="10" y2="17"></line>
|
||
|
|
<line x1="14" y1="11" x2="14" y2="17"></line>
|
||
|
|
</svg>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
</main>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script type="module" src="./app.js"></script>
|
||
|
|
</body>
|
||
|
|
</html>
|