add: register & recovery password

2023-11-18 19:58:42 -06:00
commit afa8e1983b
37 changed files with 2730 additions and 0 deletions
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@@ -0,0 +1,110 @@
+<script setup>
+
+</script>
+
+<template>
+    <div class="header-content">
+      <div class="box-content">
+        <img src="/images/logo-eta.png" class="logo" alt="Eta Viaporte" >
+        <div class="box-register">
+          <p class="title-header">Tablero de <span class="title-main">Embarques</span> y <span class="title-main">Transportes</span></p>
+        </div>
+      </div>
+    </div>
+</template>
+
+<style scoped>
+    .header-content {
+        position: relative;
+        width: 100%;
+        background-color: #323030;
+        display: flex;
+        flex-direction: row;
+        margin: 0 auto;
+        padding: 20px 24px;
+        align-items: center;
+        justify-content: space-between;
+    }
+    .logo{
+        height: 70px;
+        margin-right: 10px;
+    }
+    .box-content {
+        display: flex;
+        align-items: center;
+        align-content: center;
+        /* width: 65%; */
+    }
+    .box-register{
+        margin-left: 24px;
+    }
+    .title-header{
+        font-size: 1.8rem;
+        font-weight: 900;
+        color: #FFF;
+    }
+    
+    .app-btn{
+        background-color: #FBBA33;
+        /* background-color: #000; */
+        border: none;
+        color: #FFF;
+        border-radius: 25px;
+        padding: 12px 32px;
+    }
+    .app-btn:hover{
+        background-color: #e3a11e;
+        transition: background-color 300ms ease;
+    }
+
+    .app-btn i{
+        font-size: 1.4rem;
+    }
+    .app-btn span{
+        margin-left: 8px;
+        font-size: 1.4rem;
+    }
+
+    @media (max-width: 1024px) {
+        .header-content {
+        padding: 16px 36px;
+        }
+
+        .box-register{
+            margin-left: 10px;
+        }
+
+        .app-btn{
+        padding: 10px 24px;
+        }
+
+        .app-btn i{
+        font-size: 1rem;
+        }
+        .app-btn span{
+        margin-left: 8px;
+        font-size: 1rem;
+        }
+    }
+    @media (max-width: 768px) {
+        .header-content {
+        padding: 16px 16px;
+        }
+        .box-buttons{
+        display: none !important;
+        }
+    }
+    @media (max-width: 568px) {
+        .logo{
+            height: 80px;
+        }
+        .title-header{
+            font-size: 1rem;
+            font-weight: 700;
+            color: #FFF;
+        }
+        .title-main{
+            color: #FBBA33;
+        }
+    }
+</style>