📱 Fixes responsive index

web/app.vue

@@ -11,5 +11,6 @@
 <script lang="ts" setup>
 useHead({
     title: "Door alarm",
+    link: [{ rel: "icon", type: "image/x-icon", href: "/favicon.ico" }],
 })
 </script>

web/pages/index.vue

@@ -1,6 +1,6 @@
 <template>
     <main
-        class="flex items-center justify-center min-w-screen min-h-screen gap-4 flex-wrap"
+        class="flex items-center justify-center min-w-screen min-h-screen gap-4 flex-wrap flex-col md:flex-row"
     >
         <div class="flex items-center justify-center flex-col gap-y-2 w-32">
             <div
@@ -17,7 +17,7 @@
             </div>
 
             <p
-                :class="`flex items-center justify-center text-${opened ? (locked ? 'error' : 'secondary') : 'primary'} text-xl w-full h-10`"
+                :class="`flex items-center justify-center text-${opened ? (locked ? 'error' : 'secondary') : 'primary'} text-xl w-full h-10 border-${opened ? (locked ? 'error' : 'secondary') : 'primary'} border-solid border-2 rounded-md`"
             >
                 {{ opened ? "Opened" : "Closed" }}
             </p>
@@ -90,8 +90,8 @@ import axios from "axios"
 
 const token = useToken()
 
-const opened = ref(true)
+const opened = ref(false)
-const locked = ref(true)
+const locked = ref(false)
 const alerts = ref(false)
 
 const toast = useToast()