mirror of
https://github.com/PotentiaRobotics/robot-gui.git
synced 2025-04-20 11:00:15 -04:00
330 lines
19 KiB
HTML
330 lines
19 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">
|
|
|
|
<div class="bg-slate-600 ml-3 h-screen">
|
|
<!-- import an an image from the static/image folder -->
|
|
<img src="{{url_for('static',filename='images/robot.png')}}"
|
|
alt="image" class="w-full h-full">
|
|
</div>
|
|
<!-- Input buttons -->
|
|
<div class="bg-slate-600">
|
|
|
|
<div class="grid grid-cols-1 grid-rows-3 gap-24 mt-5 ">
|
|
<!-- Button 1 -->
|
|
<div class="mx-auto w-10/12 bg-slate-900 grid
|
|
grid-cols-3
|
|
gap-6">
|
|
|
|
<div class="my-auto">
|
|
|
|
<!-- Knee joint pic -->
|
|
<img class="m-auto"
|
|
src="{{url_for('static',filename='images/img-knee.png')}}"
|
|
alt="image" class="w-full h-full">
|
|
</div>
|
|
|
|
<!-- Input -->
|
|
<div>
|
|
<!-- Make an input with a button -->
|
|
<form action="/action_page.php">
|
|
<input class="mt-1 w-11/12" type="text"
|
|
name="fname"
|
|
value="Enter angle">
|
|
|
|
<button class="rounded-lg bg-yellow-300
|
|
mt-1"
|
|
type="submit"> <div class="mx-3">Submit</div>
|
|
</button>
|
|
</div>
|
|
<!-- Make a dropdown menu with options for position/force -->
|
|
<div class="my-auto">
|
|
<select name="" class="bg-black
|
|
text-yellow-400">
|
|
<option value="">Position</option>
|
|
<option value="">Percent</option>
|
|
<option value="">Velocity</option>
|
|
<option value="">Volatage</option>
|
|
<option value="">Force</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mx-auto w-10/12 bg-slate-900 grid
|
|
grid-cols-3
|
|
gap-5">
|
|
|
|
<div class="my-auto">
|
|
|
|
<!-- Knee joint pic -->
|
|
<img class="m-auto"
|
|
src="{{url_for('static',filename='images/img-knee.png')}}"
|
|
alt="image" class="w-full h-full">
|
|
</div>
|
|
|
|
<!-- Input -->
|
|
<div>
|
|
<!-- Make an input with a button -->
|
|
<form action="/action_page.php">
|
|
<input class="mt-1 w-11/12" type="text"
|
|
name="fname"
|
|
value="Enter angle">
|
|
|
|
<button class="rounded-lg bg-yellow-300
|
|
mt-1"
|
|
type="submit"> <div class="mx-3">Submit</div>
|
|
</button>
|
|
</div>
|
|
<!-- Make a dropdown menu with options for position/force -->
|
|
<div class="my-auto">
|
|
<select name="">
|
|
<option value="">Position</option>
|
|
<option value="">Percent</option>
|
|
<option value="">Velocity</option>
|
|
<option value="">Volatage</option>
|
|
<option value="">Force</option>
|
|
</select>
|
|
</div>
|
|
<!-- create 3 buttons in a row, each should have centered text, and should be near the bottom of the screen -->
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="mx-auto w-10/12 bg-slate-900 grid
|
|
grid-cols-3
|
|
gap-5">
|
|
|
|
<div class="my-auto">
|
|
|
|
<!-- Knee joint pic -->
|
|
<img class="m-auto"
|
|
src="{{url_for('static',filename='images/img-knee.png')}}"
|
|
alt="image" class="w-full h-full">
|
|
</div>
|
|
|
|
<!-- Input -->
|
|
<div>
|
|
<!-- Make an input with a button -->
|
|
<form action="/action_page.php">
|
|
<input class="mt-1 w-11/12"
|
|
type="text"
|
|
name="fname"
|
|
value="Enter angle">
|
|
|
|
<button class="rounded-lg
|
|
bg-yellow-300
|
|
mt-1"
|
|
type="submit"> <div
|
|
class="mx-3">Submit</div>
|
|
</button>
|
|
</div>
|
|
<!-- Make a dropdown menu with options for position/force -->
|
|
<div class="my-auto">
|
|
<select name="cars">
|
|
<option value="volvo">Position</option>
|
|
<option value="saab">Percent</option>
|
|
<option value="saab">Velocity</option>
|
|
<option value="saab">Volatage</option>
|
|
<option value="saab">Force</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<!-- Create 3 buttons in a row near the bottom of the screen -->
|
|
<div class="grid grid-cols-2 gap-4 mx-32
|
|
mt-56">
|
|
<button class="bg-gray-800 h-12
|
|
text-white">Power</button>
|
|
<button class="bg-gray-800 h-12
|
|
text-white">Battery</button>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<!-- Screen 3 -->
|
|
|
|
|
|
<div class="bg-slate-600 mr-3 ">
|
|
<div class=" h-20 mt-10 mx-10
|
|
bg-blue-900">
|
|
<div class="my-auto text-center ">
|
|
<h1 class="text-2xl text-yellow-400">Angle
|
|
Rotation</h1>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
<!-- make a grid with 1 collum and 1 row -->
|
|
<div class="grid grid-cols-1 mt-12
|
|
gap-0">
|
|
|
|
<div class="bg-gray-700 h-16 mx-32 grid
|
|
grid-cols-3 ">
|
|
<div class="bg-yellow-500 m-2 w-14
|
|
">
|
|
<h1 class="text-center font-serif
|
|
text-4xl">1</h1></div>
|
|
<div class="bg-red-500 col-span-2 m-2
|
|
grid grid-cols-2 ">
|
|
<!-- Link an image from images folder -->
|
|
<img class="m-auto"
|
|
src="{{url_for('static',filename='images/img-knee.png')}}"
|
|
alt="image"
|
|
class="w-full h-full">
|
|
<div class="my-auto">
|
|
<h1 class="text-center
|
|
font-serif mb-2
|
|
text-4xl">57</h1>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="bg-gray-700 h-16 mx-32 grid
|
|
grid-cols-3 ">
|
|
<div class="bg-yellow-500 m-2 w-14
|
|
">
|
|
<h1 class="text-center font-serif
|
|
text-4xl">2</h1></div>
|
|
<div class="bg-red-500 col-span-2 m-2
|
|
grid grid-cols-2 ">
|
|
<!-- Link an image from images folder -->
|
|
<img class="m-auto"
|
|
src="{{url_for('static',filename='images/img-knee.png')}}"
|
|
alt="image"
|
|
class="w-full h-full">
|
|
<div class="my-auto">
|
|
<h1 class="text-center
|
|
font-serif mb-2
|
|
text-4xl">57</h1>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="bg-gray-700 h-16 mx-32 grid
|
|
grid-cols-3 ">
|
|
<div class="bg-yellow-500 m-2 w-14
|
|
">
|
|
<h1 class="text-center font-serif
|
|
text-4xl">3</h1></div>
|
|
<div class="bg-red-500 col-span-2 m-2
|
|
grid grid-cols-2 ">
|
|
<!-- Link an image from images folder -->
|
|
<img class="m-auto"
|
|
src="{{url_for('static',filename='images/img-knee.png')}}"
|
|
alt="image"
|
|
class="w-full h-full">
|
|
<div class="my-auto">
|
|
<h1 class="text-center
|
|
font-serif mb-2
|
|
text-4xl">57</h1>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="bg-gray-700 h-16 mx-32 grid
|
|
grid-cols-3 ">
|
|
<div class="bg-yellow-500 m-2 w-14
|
|
">
|
|
<h1 class="text-center font-serif
|
|
text-4xl">4</h1></div>
|
|
<div class="bg-red-500 col-span-2 m-2
|
|
grid grid-cols-2 ">
|
|
<!-- Link an image from images folder -->
|
|
<img class="m-auto"
|
|
src="{{url_for('static',filename='images/img-knee.png')}}"
|
|
alt="image"
|
|
class="w-full h-full">
|
|
<div class="my-auto">
|
|
<h1 class="text-center
|
|
font-serif mb-2
|
|
text-4xl">57</h1>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="bg-gray-700 h-16 mx-32 grid
|
|
grid-cols-3 ">
|
|
<div class="bg-yellow-500 m-2 w-14
|
|
">
|
|
<h1 class="text-center font-serif
|
|
text-4xl">5</h1></div>
|
|
<div class="bg-red-500 col-span-2 m-2
|
|
grid grid-cols-2 ">
|
|
<!-- Link an image from images folder -->
|
|
<img class="m-auto"
|
|
src="{{url_for('static',filename='images/img-knee.png')}}"
|
|
alt="image"
|
|
class="w-full h-full">
|
|
<div class="my-auto">
|
|
<h1 class="text-center
|
|
font-serif mb-2
|
|
text-4xl">57</h1>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="bg-gray-700 h-16 mx-32 grid
|
|
grid-cols-3 ">
|
|
<div class="bg-yellow-500 m-2 w-14
|
|
">
|
|
<h1 class="text-center font-serif
|
|
text-4xl">6</h1></div>
|
|
<div class="bg-red-500 col-span-2 m-2
|
|
grid grid-cols-2 ">
|
|
<!-- Link an image from images folder -->
|
|
<img class="m-auto"
|
|
src="{{url_for('static',filename='images/img-knee.png')}}"
|
|
alt="image"
|
|
class="w-full h-full">
|
|
<div class="my-auto">
|
|
<h1 class="text-center
|
|
font-serif mb-2
|
|
text-4xl">57</h1>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="bg-gray-700 h-16 mx-32 grid
|
|
grid-cols-3 ">
|
|
<div class="bg-yellow-500 m-2 w-14
|
|
">
|
|
<h1 class="text-center font-serif
|
|
text-4xl">7</h1></div>
|
|
<div class="bg-red-500 col-span-2 m-2
|
|
grid grid-cols-2 ">
|
|
<!-- Link an image from images folder -->
|
|
<img class="m-auto"
|
|
src="{{url_for('static',filename='images/img-knee.png')}}"
|
|
alt="image"
|
|
class="w-full h-full">
|
|
<div class="my-auto">
|
|
<h1 class="text-center
|
|
font-serif mb-2
|
|
text-4xl">57</h1>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="grid grid-cols-4 gap-4 mx-10
|
|
mt-20">
|
|
<button class="bg-gray-800 h-12 text-white">Manual</button>
|
|
<button class="bg-gray-800 h-12 text-white">SA</button>
|
|
<button class="bg-gray-800 h-12 text-white">Manual</button>
|
|
<button class="bg-cyan-600 h-12
|
|
text-white">Angle
|
|
view</button>
|
|
</div>
|
|
|
|
|
|
|
|
</body>
|
|
</html> |