mirror of
https://github.com/PotentiaRobotics/robot-gui.git
synced 2025-04-09 14:20:16 -04:00
242 lines
9.7 KiB
HTML
242 lines
9.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Tailwind file</title>
|
|
<link rel="stylesheet"
|
|
href="{{url_for('static',filename='dist/css/output.css')}}">
|
|
</head>
|
|
<body class="bg-black">
|
|
|
|
|
|
|
|
<div class="bg-black">
|
|
<!-- 3 Collums -->
|
|
<div class="grid grid-cols-3 gap-6 bg-black ">
|
|
|
|
<!-- Screen 1 -->
|
|
<div class="bg-slate-600 ml-3 h-screen ">
|
|
<!-- 3x3 grid of buttons -->
|
|
|
|
|
|
|
|
<div class="grid grid-cols-3 ml-32 mr-32 gap-1 gap-x-0
|
|
mt-10
|
|
">
|
|
<!-- Top left -->
|
|
<div class="bg-slate-800 w-16 h-16 ">
|
|
<button class="text-5xl mt-1">↖</button>
|
|
</div>
|
|
<!-- Top middle -->
|
|
<div class="bg-slate-800 w-16 h-16 ">
|
|
<button class="text-5xl mt-1">⬆️</button>
|
|
</div>
|
|
<!-- Top right -->
|
|
<div class="bg-slate-800 w-16 h-16 ">
|
|
<button class="text-5xl mt-1">↗️</button>
|
|
</div>
|
|
<!-- Middle left -->
|
|
<div class="bg-slate-800 w-16 h-16 ">
|
|
<button class="text-5xl mt-1">⬅️</button>
|
|
</div>
|
|
<!-- Middle middle -->
|
|
<div class="bg-slate-800 w-16 h-16 ">
|
|
<button class="text-5xl mt-1">⏺️</button>
|
|
</div>
|
|
<!-- Middle right -->
|
|
<div class="bg-slate-800 w-16 h-16 ">
|
|
<button class="text-5xl mt-1">➡️</button>
|
|
</div>
|
|
<!-- Bottom left -->
|
|
<div class="bg-slate-800 w-16 h-16 ">
|
|
<button class="text-5xl mt-1">↙️</button>
|
|
</div>
|
|
<!-- Bottom middle -->
|
|
<div class="bg-slate-800 w-16 h-16 ">
|
|
<button class="text-5xl mt-1">⬇️</button>
|
|
</div>
|
|
<!-- Bottom right -->
|
|
<div class="bg-slate-800 w-16 h-16 ">
|
|
<button class="text-5xl mt-1">↘️</button>
|
|
</div>
|
|
|
|
|
|
<!-- Emergency stop button -->
|
|
<div class="bg-red-600 w-16 h-16 mt-20 mx-20">
|
|
<button class="text-5xl mt-1">⏹️</button>
|
|
</div>
|
|
|
|
|
|
|
|
<!-- blue div with white text that says "Control Keys" -->
|
|
<div class="bg-blue-600 w-56 h-14 mt-56 ">
|
|
<button class="text-3xl mt-1">🔑 Control Keys</button>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<!-- Screen 2 -->
|
|
<div class="bg-slate-600">
|
|
<!-- Make a text that says sensor 1, and next to it is a rounded circle -->
|
|
<div class="grid grid-cols-2 gap-1 gap-x-0 mt-10 ml-10">
|
|
<div class="w-56 h-14 ">
|
|
<button class="text-3xl mt-1">Sensor 1: </button>
|
|
</div>
|
|
|
|
<div class="bg-slate-300 w-28 h-28 rounded-2xl">
|
|
<div></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-2 gap-1 gap-x-0 mt-44 ml-10">
|
|
<div class="w-56 h-14 ">
|
|
<button class="text-3xl mt-1">Sensor 2: </button>
|
|
</div>
|
|
|
|
<div class="bg-slate-300 w-28 h-28 rounded-2xl">
|
|
<div></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-2 gap-1 gap-x-0 mt-44 ml-10">
|
|
<div class="w-56 h-14 ">
|
|
<button class="text-3xl mt-1">Sensor 3: </button>
|
|
</div>
|
|
|
|
<div class="bg-slate-300 w-28 h-28 rounded-2xl">
|
|
<div></div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<!-- Screen 3 -->
|
|
|
|
|
|
|
|
|
|
<div class="bg-slate-600 mr-3 ">
|
|
<!-- Place the images/battery.png at the right -->
|
|
<img src="../static/images/battery.png" alt="" class="w-44
|
|
mt-5 ml-5">
|
|
<!-- Make text saying robot comms -->
|
|
<div class="grid grid-cols-2 gap-1 gap-x-0 mt-1 ml-10">
|
|
<div class="w-56 h-14 ">
|
|
<button class="text-2xl mt-1">Robot Comms: </button>
|
|
</div>
|
|
|
|
<div class="bg-slate-300 w-44 h-4 rounded-2xl
|
|
bg-gradient-to-r from-green-900 via-green-700
|
|
to-red-700">
|
|
<div></div>
|
|
</div>
|
|
</div>
|
|
<!-- PC battery -->
|
|
<div class="grid grid-cols-2 gap-1 gap-x-0 mt-1 ml-10">
|
|
<div class="w-56 h-14 ">
|
|
<button class="text-2xl mt-1">PC Battery: </button>
|
|
</div>
|
|
|
|
<div class="bg-slate-300 w-44 h-4 rounded-2xl
|
|
bg-gradient-to-r from-green-900 via-green-700
|
|
to-red-700">
|
|
<div></div>
|
|
</div>
|
|
</div>
|
|
<!-- Robot battery -->
|
|
<div class="grid grid-cols-2 gap-1 gap-x-0 mt-1 ml-10 ">
|
|
<div class="w-56 h-14 ">
|
|
<button class="text-2xl mt-1">Robot Battery:
|
|
</button>
|
|
</div>
|
|
|
|
<div class="bg-slate-300 w-44 h-4 rounded-2xl
|
|
bg-gradient-to-r from-green-900 via-green-700
|
|
to-red-700">
|
|
<div></div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!-- Time since running -->
|
|
<div class="mt-2 ml-10 grid grid-cols-2">
|
|
<button class="text-2xl mt-1">Time since running:
|
|
</button>
|
|
<div class="w-14 h-9 bg-slate-700 text-2xl">20.5</div>
|
|
</div>
|
|
|
|
|
|
<!-- Enable and Disable buttons next to eachother -->
|
|
<div class="ml-20 mt-10 grid grid-cols-2">
|
|
<!-- Enable button -->
|
|
<button>
|
|
|
|
<div class="h-12 w-32 bg-green-800 text-3xl">ENABLE</div>
|
|
</button>
|
|
<!-- Disable button -->
|
|
<button>
|
|
|
|
<div class="h-12 w-32 bg-sky-900 text-3xl
|
|
text-center">
|
|
<h1>DISABLE</h1>
|
|
|
|
</div>
|
|
</button>
|
|
</div>
|
|
<!-- Make a terminal for api commands -->
|
|
<div class="mb-6 ml-10 mr-10 mt-5">
|
|
<label for="success" class="block mb-2 text-sm
|
|
font-medium text-green-700 dark:text-green-500">Command</label>
|
|
<input type="text" id="success" class="bg-green-50
|
|
border border-green-500 text-green-900
|
|
dark:text-green-400 placeholder-green-700
|
|
dark:placeholder-green-500 text-sm rounded-lg
|
|
focus:ring-green-500 focus:border-green-500 block
|
|
w-full p-2.5 dark:bg-gray-700 dark:border-green-500"
|
|
placeholder="API command">
|
|
<p class="mt-2 text-sm text-green-600
|
|
dark:text-green-500"><span class="font-medium">Done!</span>
|
|
API command succesfully passed.</p>
|
|
</div>
|
|
<!-- Buttons -->
|
|
<div class="flex justify-center mt-20">
|
|
<button
|
|
class="bg-purple-600 h-14 w-40 mt-3 ml-1
|
|
text-center
|
|
">Manual</button>
|
|
<button
|
|
class="bg-purple-600 h-14 w-40 mt-3 ml-1
|
|
text-center
|
|
">Semi-Automatic</button>
|
|
<button
|
|
class="bg-purple-600 h-14 w-40 mt-3 ml-1
|
|
text-center
|
|
">Automatic</button>
|
|
<button
|
|
class="bg-blue-600 h-14 w-40 mt-3 ml-1
|
|
text-center
|
|
">Angle view</button>
|
|
|
|
|
|
<div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</body>
|
|
</html> |