add: register & recovery password
This commit is contained in:
Alexandro Uc Santos
99
src/components/Footer.vue
Normal file
99
src/components/Footer.vue
Normal file
@@ -0,0 +1,99 @@
|
||||
<template>
|
||||
<div class="footer">
|
||||
<div class="d-flex justify-content-between">
|
||||
<div class="social-media">
|
||||
<div class="circle-btn">
|
||||
<i class="fa-brands fa-facebook"></i>
|
||||
</div>
|
||||
<div class="circle-btn">
|
||||
<i class="fa-brands fa-instagram"></i>
|
||||
</div>
|
||||
<div class="circle-btn">
|
||||
<i class="fa-brands fa-x-twitter"></i>
|
||||
</div>
|
||||
<div class="circle-btn">
|
||||
<i class="fa-brands fa-tiktok"></i>
|
||||
</div>
|
||||
<div class="circle-btn">
|
||||
<i class="fa-brands fa-linkedin"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex flex-column">
|
||||
<a class="btn-links mb-1" href="">Aviso de privacidad</a>
|
||||
<a class="btn-links" href="">Terminos y condiciones</a>
|
||||
</div>
|
||||
</div>
|
||||
<h4 class="copy"><i class="fa fa-copyright" aria-hidden="true"></i> 2023 ETA VIAPORTE | TODOS LOS DERECHOS RESERVADOS</h4>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.footer {
|
||||
width: 100%;
|
||||
padding: 36px 100px;
|
||||
background-color: #303030;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.social-media{
|
||||
display: flex;
|
||||
}
|
||||
.copy{
|
||||
padding-top: 32px;
|
||||
color: #FFF;
|
||||
opacity: 0.2;
|
||||
justify-content: center;
|
||||
margin: 0 auto;
|
||||
font-size: 22px;
|
||||
font-weight: 400;
|
||||
}
|
||||
.circle-btn{
|
||||
cursor: pointer;
|
||||
margin: 0px 5px;
|
||||
display: flex;
|
||||
border-radius: 13px;
|
||||
border: none;
|
||||
background-color: #000;
|
||||
color: #FFF;
|
||||
padding: 15px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.btn-links {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: rgb(85, 85, 223);
|
||||
text-decoration: none;
|
||||
}
|
||||
.circle-btn i{
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.footer {
|
||||
width: 100%;
|
||||
padding: 32px 24px;
|
||||
background-color: #303030;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.circle-btn {
|
||||
padding: 8px;
|
||||
margin: 0px 2px;
|
||||
}
|
||||
.circle-btn i{
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.btn-links {
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.copy{
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
110
src/components/Header.vue
Normal file
110
src/components/Header.vue
Normal file
@@ -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>
|
||||
47
src/components/ui/CustomInput.vue
Normal file
47
src/components/ui/CustomInput.vue
Normal file
@@ -0,0 +1,47 @@
|
||||
<script setup>
|
||||
defineProps({
|
||||
field: {
|
||||
type: String
|
||||
},
|
||||
label: {
|
||||
type: String,
|
||||
required: false,
|
||||
},
|
||||
name: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
type: {
|
||||
type: String,
|
||||
default: 'text',
|
||||
},
|
||||
helpText: {
|
||||
type: String,
|
||||
default: '',
|
||||
}
|
||||
})
|
||||
|
||||
defineEmits(['update:field'])
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="d-flex flex-column gap-2 mb-4">
|
||||
<label class="custom-label" :for="name">{{ label }}</label>
|
||||
<input
|
||||
class="custom-input"
|
||||
:type="type"
|
||||
:id="name"
|
||||
:name="name"
|
||||
:value="field"
|
||||
@input="$event => $emit('update:field', $event.target.value)">
|
||||
<span class="help" v-if="helpText.length > 0">{{ helpText }}</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.help {
|
||||
font-size: 12px;
|
||||
font-weight: 300;
|
||||
color: rgb(108, 92, 92);
|
||||
}
|
||||
</style>
|
||||
85
src/components/ui/Notification.vue
Normal file
85
src/components/ui/Notification.vue
Normal file
@@ -0,0 +1,85 @@
|
||||
<script setup>
|
||||
import { useNotificationsStore } from '../../stores/notifications';
|
||||
const notifications = useNotificationsStore();
|
||||
</script>
|
||||
<template>
|
||||
<div class="noty-fixed">
|
||||
<div class="content-noty" v-if="notifications.show">
|
||||
<div class="body">
|
||||
<i v-if="notifications.error === false" class="fa-regular fa-circle-check text-success icon-category"></i>
|
||||
<i v-else class="fa-solid fa-circle-exclamation text-danger"></i>
|
||||
<div>
|
||||
<h4 class="noty-title">Notificación</h4>
|
||||
<p class="noty-body">{{ notifications.text }}</p>
|
||||
</div>
|
||||
<i class="fa-solid fa-xmark close-icon" @click="notifications.show = false"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<style scoped>
|
||||
.noty-fixed {
|
||||
position: fixed;
|
||||
right: 100px;
|
||||
top: 50px;
|
||||
}
|
||||
.content-noty {
|
||||
width: 100%;
|
||||
max-width: 500px;
|
||||
padding: 14px 20px;
|
||||
background-color: white;
|
||||
border-radius: 8px;
|
||||
|
||||
box-shadow: -5px 5px 9px -1px rgba(0,0,0,0.20);
|
||||
-webkit-box-shadow: -5px 5px 9px -1px rgba(0,0,0,0.20);
|
||||
-moz-box-shadow: -5px 5px 9px -1px rgba(0,0,0,0.20);
|
||||
}
|
||||
|
||||
.body {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
/* align-content: center; */
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.noty-title {
|
||||
font-size: 1.2rem;
|
||||
color: black;
|
||||
margin: 0px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.noty-body {
|
||||
font-size: 1rem;
|
||||
color: black;
|
||||
margin: 0px;
|
||||
}
|
||||
.icon-category {
|
||||
font-size: 24px;
|
||||
}
|
||||
.close-icon {
|
||||
position: absolute;
|
||||
right: 12px;
|
||||
top: 10px;
|
||||
font-size: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.noty-fixed {
|
||||
right: 20px;
|
||||
top: 30px;
|
||||
}
|
||||
|
||||
.content-noty {
|
||||
width: 100%;
|
||||
max-width: 320px;
|
||||
padding: 14px 16px;
|
||||
background-color: white;
|
||||
border-radius: 8px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
56
src/components/ui/NotificationBadge.vue
Normal file
56
src/components/ui/NotificationBadge.vue
Normal file
@@ -0,0 +1,56 @@
|
||||
<script setup>
|
||||
defineProps({
|
||||
msg: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
isError: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
showIcon: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="badge" :class="[isError ? 'badge-error' : 'badge-success']">
|
||||
<span>
|
||||
<i v-if="showIcon && isError" class="fa-solid fa-circle-exclamation me-2"></i>
|
||||
<i v-if="showIcon && !isError" class="fa-solid fa-circle-check"></i>
|
||||
{{ msg }}
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.badge {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
color: #FFF;
|
||||
font-size: 1rem;
|
||||
font-weight: 700;
|
||||
border-radius: 8px;
|
||||
justify-content: center;
|
||||
padding: 10px 16px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.badge-error {
|
||||
background-color: rgb(238, 101, 101);
|
||||
}
|
||||
.badge-success {
|
||||
background-color: rgb(29, 162, 113);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.badge {
|
||||
font-size: 0.8rem;
|
||||
font-weight: 400;
|
||||
border-radius: 8px;
|
||||
padding: 10px 12px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
50
src/components/ui/Spiner.vue
Normal file
50
src/components/ui/Spiner.vue
Normal file
@@ -0,0 +1,50 @@
|
||||
<template>
|
||||
<div class="spinner">
|
||||
<div class="bounce1"></div>
|
||||
<div class="bounce2"></div>
|
||||
<div class="bounce3"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.spinner {
|
||||
margin: 20px auto 0;
|
||||
width: 70px;
|
||||
text-align: center;
|
||||
}
|
||||
.spinner > div {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
background-color: #FBBA33;
|
||||
|
||||
border-radius: 100%;
|
||||
display: inline-block;
|
||||
-webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
|
||||
animation: sk-bouncedelay 1.4s infinite ease-in-out both;
|
||||
}
|
||||
|
||||
.spinner .bounce1 {
|
||||
-webkit-animation-delay: -0.32s;
|
||||
animation-delay: -0.32s;
|
||||
}
|
||||
|
||||
.spinner .bounce2 {
|
||||
-webkit-animation-delay: -0.16s;
|
||||
animation-delay: -0.16s;
|
||||
}
|
||||
|
||||
@-webkit-keyframes sk-bouncedelay {
|
||||
0%, 80%, 100% { -webkit-transform: scale(0) }
|
||||
40% { -webkit-transform: scale(1.0) }
|
||||
}
|
||||
|
||||
@keyframes sk-bouncedelay {
|
||||
0%, 80%, 100% {
|
||||
-webkit-transform: scale(0);
|
||||
transform: scale(0);
|
||||
} 40% {
|
||||
-webkit-transform: scale(1.0);
|
||||
transform: scale(1.0);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user