Initial webpage and backend

2026-03-17 12:33:12 +01:00
parent 9010bac9a0
commit 28b120b88e
39 changed files with 153532 additions and 4 deletions
--- a/toid_frontend/src/App.vue
+++ b/toid_frontend/src/App.vue
@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import RobotViewport from './components/RobotViewport.vue'
+</script>
+
+<template>
+  <div class="container">
+    <div class="row-container">
+      <div class="box box1"></div>
+      <div class="box box2">
+        <RobotViewport />
+      </div>
+      <div class="box box3"></div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.container {
+  display: flex;
+  justify-content: stretch;
+  align-items: start;
+  width: 100vw;
+  height: calc(100vh - 1.5rem);
+  padding-top: 1.5rem;
+}
+
+.row-container {
+  width: 100vw;
+  max-height: 100%;
+  flex-shrink: 1;
+  display: flex;
+  margin: 0;
+  padding: 0;
+  justify-content: center;
+  flex-direction: row;
+}
+
+.box1 {
+  background-color: pink;
+  width: 3.5rem;
+}
+
+.box2 {
+  background-color: lightblue;
+  aspect-ratio: 3/2;
+  max-width: calc(150vh - 13.5rem);
+  max-height: calc((100vw - 13.5) * 2 / 3);
+  flex-grow: 2;
+}
+
+.box3 {
+  flex-grow: 1;
+  min-width: 10rem;
+  max-width: 20rem;
+  background-color: darkblue;
+}
+</style>