androiddrew
/
webserial
Archived
1
0
Fork 0
Code Issues 3 Pull Requests Packages Projects Releases Wiki Activity

More styling

Browse Source
pull/5/head
Drew Bednar 1 year ago
parent c2c85f43fa
commit 0ef3f12cf6
1 changed files with 8 additions and 8 deletions
Show Stats Download Patch File Download Diff File

16
index.html
Unescape Escape View File

@ -9,26 +9,26 @@
<body class="h-full m-0 p-0 bg-neutral-100 mx-5"> <body class="h-full m-0 p-0 bg-neutral-100 mx-5">
<div class="flex flex-col h-3/4" id="container"> <div class="flex flex-col h-3/4" id="container">
<div class="p-5" id="top-half"> <div class="p-5" id="top-half">
<h1 class="text-3xl font-bold mb-4">Web Serial Console</h1> <h1 class="italic text-3xl font-bold mb-4">Web Serial Console</h1>
<div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-4 space-y-4 md:space-y-0"> <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-4 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">
<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> <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-sm border-0 py-1.5 pl-3 pr-10 text-gray-900 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-red-500 sm:text-sm sm:leading-6"> <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-red-500 sm:text-sm sm:leading-6">
<option value="">Add a device...&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</option> <option value="">Add a device...&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</option>
</select> </select>
<button id="add-port" class="ml-2 p-1 bg-gray-200 rounded-sm hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-50"> <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-red-500 focus:ring-opacity-50">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-500" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="size-6"> <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-500" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="size-6">
<path strokeLinecap="round" strokeLinejoin="round" d="M12 4.5v15m7.5-7.5h-15" /> <path strokeLinecap="round" strokeLinejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
</svg> </svg>
</button> </button>
<button id="refresh-ports" class="ml-2 p-1 bg-gray-200 rounded-sm hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-50"> <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-red-500 focus:ring-opacity-50">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="7" > <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="7" >
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" /> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
</svg> </svg>
</button> </button>
<label for="baud" class="text-sm font-medium leading-6 text-gray-900">Baud:</label> <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-sm border-0 py-1.5 pl-3 pr-10 text-gray-900 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-red-500 sm:text-sm sm:leading-6"> <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-red-500 sm:text-sm sm:leading-6">
<option value="4800">4800</option> <option value="4800">4800</option>
<option value="9600">9600</option> <option value="9600">9600</option>
<option value="19200">19200</option> <option value="19200">19200</option>
@ -40,18 +40,18 @@
<option value="">921600</option> <option value="">921600</option>
</select> </select>
</div> </div>
<button id="connect-button" class="px-4 py-1 bg-emerald-500 text-white rounded-sm hover:bg-emerald-600 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-opacity-50">Connect</button> <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>
<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 class="flex items-center space-x-2"> <label class="flex items-center space-x-2">
<input type="checkbox" id="autoscroll-checkbox" checked class="form-checkbox"> <input type="checkbox" id="autoscroll-checkbox" checked class="form-checkbox">
<span class="text-sm font-medium leading-6 text-gray-900">Autoscroll</span> <span class="text-sm font-medium leading-6 text-gray-900">Autoscroll</span>
</label> </label>
<button id="clear-button" class="px-4 py-1 bg-amber-500 text-white rounded-sm hover:bg-amber-600 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-opacity-50">Clear</button> <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>
</div> </div>
<div class="font-mono rounded-sm 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 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> </div>
<script src="script.js"></script> <script src="script.js"></script>
</body> </body>