created login form

src/App.vue

@@ -1,7 +1,7 @@
 <template>
   <v-app>
     <v-main>
-      <div class="container bg-white shadow p-3">
+      <div class="container shadow p-3 text-center">
         <router-view></router-view>
       </div>
     </v-main>
@@ -17,7 +17,6 @@
   font-family: Avenir, Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  text-align: center;
   color: #2c3e50;
   margin-top: 60px;
 }

src/router/index.ts

@@ -1,11 +1,17 @@
 import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
 import Home from '../views/Home.vue'
+import Login from '../views/Login.vue'
 
 const routes: Array<RouteRecordRaw> = [
   {
     path: '/',
     name: 'Home',
     component: Home
+  },
+  {
+    path: '/login',
+    name: 'Login',
+    component: Login
   }
 ]
 

src/views/Home.vue

@@ -4,6 +4,7 @@ MonthPicker(:selectedMonth="selectedMonth" :selectedYear="selectedYear" @getMont
 
 Schedule( :startDate="new Date(selectedYear, selectedMonth)")
 
+
 </template>
 
 <script lang="ts" setup>

src/views/Login.vue

@@ -0,0 +1,44 @@
+<template>
+    <img src="/src/assets/logo.png">
+    <form class="m-auto">
+        <h1 class="h3 mb-3">Bitte einloggen</h1>
+        <div class="form-floating">
+            <input type="text" class="form-control" id="usernameInput" placeholder="Benutzername">
+            <label for="usernameInput">Benutzername</label>
+        </div>
+        <div class="form-floating">
+            <input type="password" class="form-control" id="passwordInput" placeholder="Passwort">
+            <label for="passwordInput">Passwort</label>
+        </div>
+
+        <div class="form-check my-3 mx-auto" style="width: 170px">
+            <input class="form-check-input" type="checkbox" id="rememberMeCheckbox">
+            <label for="rememberMeCheckbox" class="form-check-label">
+                Eingeloggt bleiben
+            </label>
+        </div>
+
+        <button class="btn btn-lg btn-success w-100 mb-5">Einloggen</button>
+    </form>
+</template>
+
+<script setup lang="ts">
+
+</script>
+
+<style scoped>
+    form {
+        max-width: 330px;
+    }
+
+    #usernameInput {
+        margin-bottom: -1px;
+        border-bottom-right-radius: 0;
+        border-bottom-left-radius: 0;
+    }
+
+    #passwordInput {
+        border-top-right-radius: 0;
+        border-top-left-radius: 0;
+    }
+</style>