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.
77 lines
5.0 KiB
HTML
77 lines
5.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Web Serial Console</title>
|
|
<link rel="icon" type="image/x-icon" href="./favicon.ico">
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<style>
|
|
select:focus {
|
|
outline: none;
|
|
box-shadow: none;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="min-h-screen m-0 p-0 bg-gradient-to-b from-neutral-100 to-neutral-50 dark:bg-slate-900">
|
|
<div class="flex flex-col h-3/4" id="container">
|
|
<div class="p-5" id="top-half">
|
|
<h1 class="italic text-3xl font-bold mb-4">Web Serial Console</h1>
|
|
<hr class="mb-6">
|
|
<div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-2 space-y-4 md:space-y-0">
|
|
<div class="flex flex-col md:flex-row items-start md:items-center space-y-4 md:space-y-0 md:space-x-4">
|
|
<div class="flex flex-col md:flex-row items-start md:items-center space-y-4 md:space-y-0 md:space-x-4">
|
|
<label for="serial-select" class="text-sm font-medium leading-6 text-gray-900">Port:</label>
|
|
<select id="serial-select" name="serial-select" class="font-medium bg-white block w-full md:w-auto rounded-md border-0 py-1.5 pl-3 pr-10 text-gray-900 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-emerald-500 sm:text-sm sm:leading-6">
|
|
<option value="">Add a device... </option>
|
|
</select>
|
|
<button id="add-port" class="ml-2 p-1 bg-gray-200 rounded-md hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-opacity-50">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-500 size-6" fill="none" viewBox="0 0 24 24" stroke-width="2.0" stroke="currentColor" >
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
|
|
</svg>
|
|
</button>
|
|
<button id="refresh-ports" class="ml-2 p-1 bg-gray-200 rounded-md hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-opacity-50">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.0" stroke="currentColor" class="h-5 w-5 text-gray-600 size-6">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99" />
|
|
</svg>
|
|
|
|
</button>
|
|
<label for="baud" class="text-sm font-medium leading-6 text-gray-900">Baud:</label>
|
|
<select id="baud" name="baud" class="font-medium bg-white block w-full md:w-auto rounded-md border-0 py-1.5 pl-3 pr-10 text-gray-900 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-emerald-500 sm:text-sm sm:leading-6">
|
|
<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="115200" selected>115200</option>
|
|
<option value="230400">230400</option>
|
|
<option value="460800">460800</option>
|
|
<option value="">921600</option>
|
|
</select>
|
|
</div>
|
|
<button id="connect-button" class="font-medium px-4 py-1 bg-emerald-500 text-white rounded-md hover:bg-emerald-600 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-opacity-50">Connect</button>
|
|
</div>
|
|
<div class="flex flex-col md:flex-row items-start md:items-center space-y-4 md:space-y-0 md:space-x-4">
|
|
<label class="flex items-center space-x-2">
|
|
<input type="checkbox" id="autoscroll-checkbox" checked class="form-checkbox">
|
|
<span class="text-sm font-medium leading-6 text-gray-900">Autoscroll</span>
|
|
</label>
|
|
<button id="clear-button" class="font-medium px-4 py-1 bg-amber-500 text-white rounded-md hover:bg-amber-600 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-opacity-50">Clear</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="font-mono rounded-md bg-white shadow-xl h-[calc(75vh-70px)] overflow-y-auto border border-gray-300 p-2.5 bg-gray-200 mx-5 mb-5" id="scrollable-element"></div>
|
|
</div>
|
|
<footer>
|
|
<div class="mx-auto max-w-7xl overflow-hidden py-12 px-4 sm:px-6 lg:px-8">
|
|
<div class="mt-8 flex justify-center space-x-6">
|
|
</div>
|
|
<p class="mt-8 text-center text-base text-gray-400">
|
|
© <script>document.write( new Date().getFullYear())</script> <a class="" href="https://androiddrew.github.io">Drew Bednar.</a> All rights reserved.
|
|
</p>
|
|
</div>
|
|
</footer>
|
|
<script src="script.js"></script>
|
|
</body>
|
|
</html>
|