<!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>