add routes & add user

front-end/src/components/Entry.vue

@@ -0,0 +1,80 @@
+<template>
+    <div class="form__group field">
+        <input class="form__field" :type="type" :placeholder="placeholder" :style="{height: height + 'vh', width: width + 'vw'} " name="name" id="name" :required="required" />
+        <label for="name" class="form__label">{{placeholder}}</label>
+    </div>
+</template>
+
+<script setup lang="ts">
+defineProps({
+    height: Number,
+    width: Number,
+    type: String,
+    placeholder: String,
+    required: Boolean,
+
+})
+</script>
+
+<style>
+
+.form__group {
+  position: relative;
+  padding: 15px 0 0;
+  margin-top: 10px;
+  width: 50%;
+}
+
+.form__field {
+  font-family: inherit;
+  width: 100%;
+  border: 0;
+  border-bottom: 2px solid #F1F5F5;
+  outline: 0;
+  font-size: 1.3rem;
+  color: #F1F5F5;
+  padding: 7px 0;
+  background: transparent;
+  transition: border-color 0.2s;
+
+  &::placeholder {
+    color: transparent;
+  }
+
+  &:placeholder-shown ~ .form__label {
+    font-size: 1.3rem;
+    cursor: text;
+    top: 20px;
+  }
+}
+
+.form__label {
+  position: absolute;
+  top: 0;
+  display: block;
+  transition: 0.2s;
+  font-size: 1rem;
+  color: #F1F5F5;
+}
+
+.form__field:focus {
+  ~ .form__label {
+    position: absolute;
+    top: 0;
+    display: block;
+    transition: 0.2s;
+    font-size: 1rem;
+    color: #F1F5F5;
+    font-weight:700;    
+  }
+  padding-bottom: 6px;  
+  font-weight: 700;
+  border-width: 3px;
+  border-image: linear-gradient(to right, #F1F5F5,#F1F5F5);
+  border-image-slice: 1;
+}
+/* reset input */
+.form__field{
+  &:required,&:invalid { box-shadow:none; }
+}
+</style>