polish camera views

src/components/Camera.vue

@@ -33,16 +33,16 @@
   </script>
   <template>
     <div class="box video-section">
-        <img :src="getCameraImageUrl(cameraNumber)">
+        <img :src="getCameraImageUrl(cameraNumber)" class="video-image">
     </div>
   </template>
   <style scoped>
-  .app {
+  /* .app {
     display: flex;
     justify-content: center;
     align-items: center;
     height: 100vh;
-  }
+  } */
   
   .video-section {
     width: 100%; 
@@ -51,9 +51,10 @@
     border: 2px solid #ccc; 
   }
   
-  .video-section video {
+  .video-image {
     width: 100%;
     height: 100%;
+    /* object-fit: contain; */
   }
   .box{
     border: 2px solid #030303; 

src/components/Navbar.vue

@@ -28,7 +28,9 @@ export default {
             <div>
                 <span style="font-weight: bold; font-size: 1.2rem; color: rgb(0, 0, 0);">Mission 1</span>
                 <button style="border: 2px solid rgb(0, 0, 0); margin-left: 1.2rem; color: rgb(0, 0, 0); padding: 3px 6px; font-size: 0.8rem;" type="button" @click="">
+                  <router-link to="/1" class="router-link">
                     <span style="font-weight: bold; font-size: 0.8rem;">OPEN</span>
+                  </router-link>
                 </button>
             </div>
             <div>
@@ -39,7 +41,9 @@ export default {
             <div>
                 <span style="font-weight: bold; font-size: 1.2rem; color: rgb(0, 0, 0);">Mission 2</span>
                 <button style="border: 2px solid rgb(0, 0, 0); margin-left: 1.2rem; color: rgb(0, 0, 0); padding: 3px 6px; font-size: 0.8rem;" type="button" @click="">
+                  <router-link to="/2" class="router-link">
                     <span style="font-weight: bold; font-size: 0.8rem;">OPEN</span>
+                  </router-link>
                 </button>
             </div>
             <div>

src/router/index.js

@@ -1,10 +1,14 @@
 import { createRouter, createWebHashHistory } from "vue-router"
 import fourCam from "../views/fourCam.vue";
+import Cam1Focus from "../views/Cam1Focus.vue";
+import Cam2Focus from "../views/Cam2Focus.vue";
 import test from "../views/test.vue";
 
 
 const routes = [
   { path: '/', component: fourCam },
+  { path: '/1', component: Cam1Focus },
+  { path: '/2', component: Cam2Focus },
   { path: '/test', component: test },
 ]
 

src/views/Cam1Focus.vue

@@ -4,9 +4,17 @@ import Camera from "../components/Camera.vue";
 </script>
 
 <template>
-    <div class="grid">
+    <div class="camera-container">
-        <div>
+        <Camera :cameraNumber="1" />
-            <Camera :cameraNumber="1"/>
-        </div>
     </div>
-</template>
+</template>
+  
+<style scoped>
+.camera-container {
+    height: 90vh; /* Set the height of the container to 100% of the viewport height */
+    width: 75%;
+    display: flex; /* Use flexbox to align items vertically */
+    justify-content: center; /* Center the child element horizontally */
+    align-items: center; /* Center the child element vertically */
+}
+</style>

src/views/Cam2Focus.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+
+import Camera from "../components/Camera.vue";
+</script>
+
+<template>
+    <div class="camera-container">
+        <Camera :cameraNumber="2" />
+    </div>
+</template>
+  
+<style scoped>
+.camera-container {
+    height: 90vh; /* Set the height of the container to 100% of the viewport height */
+    width: 75%;
+    display: flex; /* Use flexbox to align items vertically */
+    justify-content: center; /* Center the child element horizontally */
+    align-items: center; /* Center the child element vertically */
+}
+</style>