From b63796fec6b54df418a8d0d744741247e0b7a612 Mon Sep 17 00:00:00 2001
From: SanjayramVempati <101228879+SanjayramVempati@users.noreply.github.com>
Date: Sun, 5 Feb 2023 08:39:18 -0500
Subject: [PATCH] Semi-automatic mode

---
 templates/semi.html | 242 ++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 242 insertions(+)
 create mode 100644 templates/semi.html
diff --git a/templates/semi.html b/templates/semi.html
new file mode 100644
index 0000000..c22077a
--- /dev/null
+++ b/templates/semi.html
@@ -0,0 +1,242 @@
+<!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>
\ No newline at end of file
