rushilwiz/robot-gui
1
0
Fork 0
mirror of https://github.com/PotentiaRobotics/robot-gui.git synced 2025-04-09 14:20:16 -04:00
Code Issues Actions Packages Projects Releases Wiki Activity

Added automatic mode with Tailwind CSS

Browse Source
This commit is contained in:
SanjayramVempati 2023-02-03 18:20:00 -05:00 committed by GitHub
parent 30d2522371
commit 49523b9ef0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 173 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

173
templates/auto.html Normal file
View File

@ -0,0 +1,173 @@
<!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 ">
<!-- Put refresh image in top left corner with some margin -->
<div class="flex justify-start">
<img
src="../static/images/refresh.png"
class="h-14 ml-3 mt-3">
</div>
<!-- Put the view.png image and a purple div below the image -->
<div class="flex justify-center">
<img
src="../static/images/view.png"
class="h-80 mt-3">
</div>
<!-- Make a centered purple div -->
<div class="bg-purple-600 h-14 mx-32 ">
<h1 class="text-xl font-serif font-bold mx-5 my-1
text-center
">FPV from
olympian's
camera</h1>
</div>
<!-- Put the LIDAR.png image and a purple div below the image -->
<div class="flex justify-center mt-10">
<img
src="../static/images/LIDAR.png"
class="h-80 mt-3">
</div>
<!-- Make a centered purple div -->
<div class="bg-purple-600 h-14 mx-32 ">
<h1 class="text-xl font-serif font-bold mx-5 my-1
text-center
">FPV from
olympian's
camera</h1>
</div>
</div>
<!-- Screen 2 -->
<div class="bg-slate-600">
<!-- Place the map.png image, below it, put a header that says HERE with a circle next to it . Below it, make a button saying 'Choose target location'. Below that, put 2 buttons and a battery-->
<!-- Image -->
<div class="flex justify-center">
<img
src="../static/images/map.png"
class="h-80 mt-3">
</div>
<!-- Button and here -->
<div class="flex justify-center">
<img
src="../static/images/circle.png"
class="h-10 mt-3">
<h1 class="text-xl font-serif font-bold mx-5 my-1
text-center
">HERE</h1>
</div>
<<!-- Choose target button -->
<div class="flex justify-center">
<button
class="bg-purple-600 h-14 w-80 mt-3
text-center
">Choose target
location</button>
</div>
<!-- Buttons -->
<div class="flex justify-center mt-80">
<button
class="bg-purple-600 h-14 w-40 mt-3 mr-10
text-center
">Power</button>
<button
class="bg-purple-600 h-14 w-40 mt-3
text-center
">Battery</button>
<div class="flex justify-center ml-10">
<img
src="../static/images/battery.png"
class="h-14 mt-3 ">
</div>
</div>
</div>
<!-- Screen 3 -->
<div class="bg-slate-600 mr-3 ">
<!-- Make a div that sayss "Graph of each joint. The div should have a background color of gray" -->
<div class="bg-blue-800 h-14 mx-32 mt-14 ">
<h1 class="text-xl font-serif font-bold mx-5 my-1
text-center
">Graph of each joint</h1>
</div>
<!-- Make 6 graph.png images below eachother -->
<div class="flex justify-center">
<img
src="../static/images/graph.png"
class="h-32 mt-3">
</div>
<div class="flex justify-center">
<img
src="../static/images/graph.png"
class="h-32 mt-3">
</div>
<div class="flex justify-center">
<img
src="../static/images/graph.png"
class="h-32 mt-3">
</div>
<div class="flex justify-center">
<img
src="../static/images/graph.png"
class="h-32 mt-3">
</div>
<div class="flex justify-center">
<img
src="../static/images/graph.png"
class="h-32 mt-3">
</div>
<div class="flex justify-center mt-10">
<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>
</div>
</body>
</html>