feat:Implementar transição em slide para a tela de login com validação aprimorada e notificações via snackbar
- Adicionado componente de slider para transição entre as telas de introdução e login. - Validação aprimorada dos campos de e-mail e senha, com mensagens de erro.. - Substituídos os componentes do Vuetify por elementos HTML padrão nos campos de entrada. - IIntroduzido snackbar para exibição de mensagens de erro durante tentativas de login - Estilos atualizados para melhor responsividade e apelo visual.
This commit is contained in:
parent
bb33d0b20b
commit
d60af1cffc
14
package-lock.json
generated
14
package-lock.json
generated
@ -9,10 +9,12 @@
|
||||
"version": "0.0.0",
|
||||
"dependencies": {
|
||||
"@mdi/font": "^7.4.47",
|
||||
"animate.css": "^4.1.1",
|
||||
"apexcharts": "^3.54.1",
|
||||
"axios": "^1.8.4",
|
||||
"dashboard": "file:",
|
||||
"date-fns": "^4.1.0",
|
||||
"gsap": "^3.12.7",
|
||||
"jwt-decode": "^4.0.0",
|
||||
"npm-check-updates": "^17.1.11",
|
||||
"pdf-parse": "^1.1.1",
|
||||
@ -818,6 +820,12 @@
|
||||
"resolved": "https://registry.npmjs.org/@yr/monotone-cubic-spline/-/monotone-cubic-spline-1.0.3.tgz",
|
||||
"integrity": "sha512-FQXkOta0XBSUPHndIKON2Y9JeQz5ZeMqLYZVVK93FliNBFm7LNMIZmY6FrMEB9XPcDbE2bekMbZD6kzDkxwYjA=="
|
||||
},
|
||||
"node_modules/animate.css": {
|
||||
"version": "4.1.1",
|
||||
"resolved": "https://registry.npmjs.org/animate.css/-/animate.css-4.1.1.tgz",
|
||||
"integrity": "sha512-+mRmCTv6SbCmtYJCN4faJMNFVNN5EuCTTprDTAo7YzIGji2KADmakjVA3+8mVDkZ2Bf09vayB35lSQIex2+QaQ==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/apexcharts": {
|
||||
"version": "3.54.1",
|
||||
"resolved": "https://registry.npmjs.org/apexcharts/-/apexcharts-3.54.1.tgz",
|
||||
@ -992,6 +1000,12 @@
|
||||
"node": "^8.16.0 || ^10.6.0 || >=11.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/gsap": {
|
||||
"version": "3.12.7",
|
||||
"resolved": "https://registry.npmjs.org/gsap/-/gsap-3.12.7.tgz",
|
||||
"integrity": "sha512-V4GsyVamhmKefvcAKaoy0h6si0xX7ogwBoBSs2CTJwt7luW0oZzC0LhdkyuKV8PJAXr7Yaj8pMjCKD4GJ+eEMg==",
|
||||
"license": "Standard 'no charge' license: https://gsap.com/standard-license. Club GSAP members get more: https://gsap.com/licensing/. Why GreenSock doesn't employ an MIT license: https://gsap.com/why-license/"
|
||||
},
|
||||
"node_modules/jwt-decode": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/jwt-decode/-/jwt-decode-4.0.0.tgz",
|
||||
|
||||
@ -10,10 +10,12 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@mdi/font": "^7.4.47",
|
||||
"animate.css": "^4.1.1",
|
||||
"apexcharts": "^3.54.1",
|
||||
"axios": "^1.8.4",
|
||||
"dashboard": "file:",
|
||||
"date-fns": "^4.1.0",
|
||||
"gsap": "^3.12.7",
|
||||
"jwt-decode": "^4.0.0",
|
||||
"npm-check-updates": "^17.1.11",
|
||||
"pdf-parse": "^1.1.1",
|
||||
|
||||
@ -93,7 +93,9 @@ const loadHolidayData = async () => {
|
||||
estado: holidayData.estado || '',
|
||||
municipio: holidayData.municipio || '',
|
||||
parent_id: authStore.userId,
|
||||
service_instance_id: authStore.service_instance_id || 2
|
||||
service_instance_id: authStore.service_instance_id || 2,
|
||||
adicional_he: Number(localHoliday.value.adicional_he), // Garante tipo numérico
|
||||
recorrente: localHoliday.value.recorrente
|
||||
};
|
||||
} else if (props.holiday) {
|
||||
// Fallback para os dados recebidos via props
|
||||
|
||||
@ -19,10 +19,34 @@
|
||||
:rules="[v => !!v || 'Data é obrigatória']" required />
|
||||
</v-col>
|
||||
<v-col cols="12">
|
||||
<v-text-field v-model="localHoliday.municipio" label="Municipio" type="municipio" :rules="[rules.required]" clearable required/>
|
||||
<v-text-field v-model="localHoliday.municipio" label="Municipio" type="municipio" />
|
||||
</v-col>
|
||||
<v-col cols="12">
|
||||
<v-text-field v-model="localHoliday.estado" label="Estado" type="estado" clearable :rules="[rules.required]" required/>
|
||||
<v-text-field v-model="localHoliday.estado" label="Estado" type="estado" clearable />
|
||||
</v-col>
|
||||
<v-col cols="12">
|
||||
<v-switch
|
||||
v-model="localHoliday.recorrente"
|
||||
label="Feriado Recorrente (Anual)"
|
||||
color="primary"
|
||||
:true-value="true"
|
||||
:false-value="false"
|
||||
/>
|
||||
</v-col>
|
||||
<v-col cols="12">
|
||||
<v-text-field
|
||||
v-model.number="localHoliday.adicional_he"
|
||||
label="Adicional de HE (%) *"
|
||||
type="number"
|
||||
min="0"
|
||||
max="100"
|
||||
:rules="[
|
||||
v => v !== null && v !== undefined || 'Campo obrigatório',
|
||||
v => (v >= 0 && v <= 100) || 'Valor entre 0 e 100'
|
||||
]"
|
||||
required
|
||||
@input="form?.validate()"
|
||||
/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
@ -30,8 +54,13 @@
|
||||
<v-card-actions>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn text color="blue-darken-1" @click="$emit('cancel')">Cancelar</v-btn>
|
||||
<v-btn text class="text-white salvar-btn" :disabled="!formValid"
|
||||
@click="handleSave" :loading="holidayStore.loading">
|
||||
<v-btn
|
||||
text
|
||||
class="text-white salvar-btn"
|
||||
:disabled="!formValid"
|
||||
@click="handleSave"
|
||||
:loading="holidayStore.loading"
|
||||
>
|
||||
Salvar
|
||||
</v-btn>
|
||||
</v-card-actions>
|
||||
@ -64,6 +93,8 @@ const defaultHoliday = {
|
||||
date: '',
|
||||
estado: '',
|
||||
municipio: '',
|
||||
recorrente: true,
|
||||
adicional_he: 0,
|
||||
parent_id: authStore.userId,
|
||||
service_instance_id: authStore.service_instance_id || 2
|
||||
};
|
||||
@ -116,25 +147,26 @@ const closeModal = () => {
|
||||
|
||||
// Salvar o novo feriado
|
||||
const handleSave = async (event) => {
|
||||
if(form.value.validate()){
|
||||
event.preventDefault(); // Impede o comportamento padrão do botão
|
||||
event.preventDefault();
|
||||
|
||||
// Valida apenas o formulário (sem verificações extras)
|
||||
const { valid } = await form.value.validate();
|
||||
|
||||
if (valid) { // ⚠️ Só depende da validação do formulário
|
||||
try {
|
||||
const holidayData = {
|
||||
await holidayStore.createHoliday({
|
||||
...localHoliday.value,
|
||||
parent_id: authStore.userId,
|
||||
service_instance_id: authStore.service_instance_id || 2
|
||||
};
|
||||
service_instance_id: authStore.service_instance_id
|
||||
});
|
||||
|
||||
console.log('Criando novo feriado:', holidayData);
|
||||
|
||||
await holidayStore.createHoliday(holidayData);
|
||||
|
||||
emit('save', holidayData);
|
||||
emit('save');
|
||||
emit('update:modalValue', false);
|
||||
resetLocalHoliday();
|
||||
} catch (error) {
|
||||
console.error('Erro ao criar feriado:', error);
|
||||
}}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// Inicialização do componente
|
||||
|
||||
@ -16,8 +16,19 @@ import Holiday from '../views/Holiday.vue'
|
||||
import Company from '../views/Company.vue'
|
||||
|
||||
const routes = [
|
||||
{ path: '/', redirect: '/login' },
|
||||
{ path: '/login', component: Login },
|
||||
{
|
||||
path: '/',
|
||||
redirect: '/login'
|
||||
},
|
||||
{
|
||||
path: '/login',
|
||||
name: 'login',
|
||||
component: Login,
|
||||
meta: {
|
||||
transition: 'slide',
|
||||
requiresGuest: true
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/dashboard',
|
||||
component: Dashboard,
|
||||
|
||||
@ -100,19 +100,31 @@ export const useHolidayStore = defineStore('holidays', {
|
||||
const url = '/holiday/';
|
||||
this.loading = true;
|
||||
this.error = null;
|
||||
|
||||
|
||||
try {
|
||||
const response = await api.post(url, holiday, {
|
||||
// Garantindo que o objeto holiday tem todos os campos necessários
|
||||
const holidayData = {
|
||||
name: holiday.name,
|
||||
date: holiday.date,
|
||||
estado: holiday.estado || '',
|
||||
municipio: holiday.municipio || '',
|
||||
recorrente: holiday.recorrente !== undefined ? holiday.recorrente : true,
|
||||
adicional_he: holiday.adicional_he !== undefined ? holiday.adicional_he : 0,
|
||||
type: holiday.type || '',
|
||||
service_instance_id: useAuthStore().service_instance_id
|
||||
};
|
||||
|
||||
const response = await api.post(url, holidayData, {
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
this.holidays.push(response.data);
|
||||
return response.data;
|
||||
} catch (error) {
|
||||
this.error = error?.response?.data?.message || error.message || 'Erro ao criar feriado';
|
||||
console.error('Erro ao criar turno', error);
|
||||
console.error('Erro ao criar feriado', error);
|
||||
throw error;
|
||||
} finally {
|
||||
this.loading = false;
|
||||
@ -133,6 +145,7 @@ export const useHolidayStore = defineStore('holidays', {
|
||||
date: holiday.date,
|
||||
estado: holiday.estado,
|
||||
municipio: holiday.municipio,
|
||||
type: holiday.type || '',
|
||||
});
|
||||
|
||||
const index = this.holidays.findIndex((s) => s.id === id);
|
||||
|
||||
@ -2,7 +2,6 @@ import { defineStore } from 'pinia';
|
||||
import api from '../services/api';
|
||||
import router from '../routes/router';
|
||||
import { useAuthStore } from './auth';
|
||||
import { ca } from 'date-fns/locale';
|
||||
|
||||
export const useShiftStore = defineStore('shifts', {
|
||||
state: () => ({
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,132 +1,335 @@
|
||||
<template>
|
||||
<v-container class="login-container fill-height" fluid>
|
||||
<v-row no-gutters class="fill-height align-center justify-center">
|
||||
<v-col cols="12" md="10" class="d-flex align-center justify-center">
|
||||
<!-- Retângulo de fundo -->
|
||||
<div class="retangulo-box">
|
||||
<!-- Formulário (esquerda) -->
|
||||
<div class="login-form-box">
|
||||
<h2 class="title">Bem-vindo</h2>
|
||||
<p class="subtitle">Realize o login em sua conta</p>
|
||||
<div class="slider-container">
|
||||
<!-- Container de slides que se move horizontalmente -->
|
||||
<div class="slides-wrapper" :style="slideStyle">
|
||||
<!-- Slide 1: Tela Inicial -->
|
||||
<div class="slide intro-slide">
|
||||
<div class="content-container">
|
||||
<!-- Card Inicial - Versão Atualizada -->
|
||||
<div class="intro-card">
|
||||
<div class="intro-content">
|
||||
<h1 class="intro-title">Olhe Cada Detalhe</h1>
|
||||
<p class="intro-subtitle">Inteligência artificial trazendo dados para o seu negócio</p>
|
||||
<v-btn
|
||||
color="primary"
|
||||
class="access-btn"
|
||||
height="44"
|
||||
@click="slideToLogin"
|
||||
>
|
||||
Acessar
|
||||
</v-btn>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Slide 2: Tela de Login -->
|
||||
<div class="slide login-slide">
|
||||
<!-- Retângulo de fundo -->
|
||||
<div class="retangulo-box">
|
||||
<!-- Formulário de Login -->
|
||||
<div class="login-form-box">
|
||||
<h2 class="title">Bem-vindo</h2>
|
||||
<p class="subtitle">Realize o login em sua conta</p>
|
||||
|
||||
<v-form class="form" v-model="valid" ref="loginForm">
|
||||
<v-text-field
|
||||
v-model="email"
|
||||
label="E-mail"
|
||||
:rules="emailRules"
|
||||
required
|
||||
hide-details="auto"
|
||||
class="custom-field"
|
||||
></v-text-field>
|
||||
<v-form class="form" v-model="valid" ref="loginForm" @submit.prevent="login">
|
||||
<div class="input-container">
|
||||
<label for="email">E-mail</label>
|
||||
<input
|
||||
id="email"
|
||||
v-model="email"
|
||||
type="text"
|
||||
:class="['custom-input', {'input-error': emailError}]"
|
||||
@blur="validateEmail"
|
||||
/>
|
||||
<div v-if="emailError" class="error-text">{{ emailError }}</div>
|
||||
</div>
|
||||
|
||||
<v-text-field
|
||||
v-model="password"
|
||||
label="Senha"
|
||||
:rules="passwordRules"
|
||||
@keyup.enter="login"
|
||||
type="password"
|
||||
required
|
||||
hide-details="auto"
|
||||
class="custom-field"
|
||||
></v-text-field>
|
||||
<div class="input-container">
|
||||
<label for="password">Senha</label>
|
||||
<input
|
||||
id="password"
|
||||
v-model="password"
|
||||
type="password"
|
||||
:class="['custom-input', {'input-error': passwordError}]"
|
||||
@blur="validatePassword"
|
||||
@keyup.enter="login"
|
||||
/>
|
||||
<div v-if="passwordError" class="error-text">{{ passwordError }}</div>
|
||||
</div>
|
||||
|
||||
<div class="text-right forgot-password">
|
||||
<a href="#">Esqueci a senha</a>
|
||||
</div>
|
||||
|
||||
<v-btn
|
||||
block
|
||||
color="primary"
|
||||
<button
|
||||
class="login-btn"
|
||||
height="44"
|
||||
:disabled="!valid"
|
||||
@click="login"
|
||||
:disabled="!isFormValid"
|
||||
@click.prevent="login"
|
||||
>
|
||||
Entrar
|
||||
</v-btn>
|
||||
</button>
|
||||
</v-form>
|
||||
|
||||
<div class="register-link">
|
||||
Não tem cadastro? <a href="#">Cadastre-se aqui</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Círculo (direita) -->
|
||||
|
||||
<!-- Gráfico/Círculo informativo -->
|
||||
<div class="circle-container">
|
||||
<img src="/image.png" alt="Círculo" class="circle-img" />
|
||||
</div>
|
||||
</div>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Snackbar para mensagens de erro/sucesso -->
|
||||
<v-snackbar
|
||||
v-model="snackbar"
|
||||
:color="snackbarColor"
|
||||
timeout="5000"
|
||||
position="top"
|
||||
>
|
||||
{{ snackbarText }}
|
||||
|
||||
<template v-slot:actions>
|
||||
<v-btn
|
||||
variant="text"
|
||||
@click="snackbar = false"
|
||||
>
|
||||
Fechar
|
||||
</v-btn>
|
||||
</template>
|
||||
</v-snackbar>
|
||||
</template>
|
||||
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import { ref, computed } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { useAuthStore } from '../stores/auth'; // Certifique-se de que o caminho da store está correto
|
||||
|
||||
const router = useRouter();
|
||||
const authStore = useAuthStore();
|
||||
|
||||
// Estado
|
||||
const currentSlide = ref(0); // 0 = intro, 1 = login
|
||||
const email = ref('');
|
||||
const password = ref('');
|
||||
const emailError = ref('');
|
||||
const passwordError = ref('');
|
||||
const sliding = ref(false);
|
||||
const valid = ref(false);
|
||||
|
||||
const emailRules = [
|
||||
(v) => !!v || 'Preencha o campo', // Verifica se está preenchido
|
||||
(v) =>
|
||||
/^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$/.test(v) || /^[a-zA-Z0-9_.-]+$/.test(v) ||
|
||||
'Insira um e-mail válido ou um nome de usuário', // Permite emails ou usernames simples
|
||||
];
|
||||
// Estado para o Snackbar
|
||||
const snackbar = ref(false);
|
||||
const snackbarText = ref('');
|
||||
const snackbarColor = ref('error'); // 'error', 'success', 'info', etc.
|
||||
|
||||
const passwordRules = [(v) => !!v || 'Preencha a senha'];
|
||||
// Validação computada
|
||||
const isFormValid = computed(() => {
|
||||
return email.value && password.value && !emailError.value && !passwordError.value;
|
||||
});
|
||||
|
||||
const login = async () => {
|
||||
try {
|
||||
await authStore.login(email.value, password.value); // Ação de login no Pinia
|
||||
router.push('/dashboard'); // Redireciona ao dashboard após login bem-sucedido
|
||||
} catch (error) {
|
||||
alert('Falha ao fazer login. Verifique suas credenciais.'); // Exibe erro em caso de falha
|
||||
// Estilo computado para a posição do slider
|
||||
const slideStyle = computed(() => {
|
||||
return {
|
||||
transform: `translateX(-${currentSlide.value * 100}%)`,
|
||||
transition: sliding.value ? 'transform 0.8s ease-in-out' : 'none'
|
||||
};
|
||||
});
|
||||
|
||||
// Funções de validação
|
||||
const validateEmail = () => {
|
||||
if (!email.value) {
|
||||
emailError.value = 'Preencha o campo';
|
||||
return;
|
||||
}
|
||||
if (!/^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$/.test(email.value) &&
|
||||
!/^[a-zA-Z0-9_.-]+$/.test(email.value)) {
|
||||
emailError.value = 'Insira um e-mail válido ou um nome de usuário';
|
||||
return;
|
||||
}
|
||||
emailError.value = '';
|
||||
};
|
||||
|
||||
const validatePassword = () => {
|
||||
if (!password.value) {
|
||||
passwordError.value = 'Preencha a senha';
|
||||
return;
|
||||
}
|
||||
passwordError.value = '';
|
||||
};
|
||||
|
||||
// Métodos para navegação de slides - Melhorados
|
||||
const slideToLogin = () => {
|
||||
console.log('Deslizando para o login...');
|
||||
sliding.value = true;
|
||||
currentSlide.value = 1;
|
||||
|
||||
// Adicionado: Garantir que o estado seja atualizado imediatamente
|
||||
setTimeout(() => {
|
||||
console.log('Slide atual após timeout:', currentSlide.value);
|
||||
}, 100);
|
||||
};
|
||||
|
||||
const slideToIntro = () => {
|
||||
console.log('Deslizando para a introdução...');
|
||||
sliding.value = true;
|
||||
currentSlide.value = 0;
|
||||
|
||||
// Adicionado: Garantir que o estado seja atualizado imediatamente
|
||||
setTimeout(() => {
|
||||
console.log('Slide atual após timeout:', currentSlide.value);
|
||||
}, 100);
|
||||
};
|
||||
|
||||
// Função de login usando o authStore do Pinia
|
||||
const login = async () => {
|
||||
if (!isFormValid.value) {
|
||||
// Validar formulário novamente
|
||||
validateEmail();
|
||||
validatePassword();
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
console.log('Tentando fazer login com:', email.value, password.value);
|
||||
await authStore.login(email.value, password.value); // Ação de login no Pinia
|
||||
|
||||
// Forçar a navegação para o dashboard usando location.href
|
||||
// em vez de router.push para garantir que saia do sistema de slides
|
||||
window.location.href = '/dashboard';
|
||||
|
||||
// Alternativa: router.push com opção replace
|
||||
// router.push({ path: '/dashboard', replace: true });
|
||||
} catch (error) {
|
||||
console.error('Erro de login:', error);
|
||||
// Exibe o Snackbar com a mensagem de erro
|
||||
snackbarText.value = 'Falha ao fazer login. Verifique suas credenciais.';
|
||||
snackbarColor.value = 'error';
|
||||
snackbar.value = true;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped>
|
||||
|
||||
.login-container {
|
||||
background: linear-gradient(135deg, #2d0f44, #23408e);
|
||||
color: #fff;
|
||||
<style scoped>
|
||||
/* Container principal que mantém todo o conteúdo e controla overflow */
|
||||
.slider-container {
|
||||
position: relative;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Wrapper que desliza horizontalmente contendo ambos os slides */
|
||||
.slides-wrapper {
|
||||
display: flex;
|
||||
width: 100vw; /* Duas vezes a largura da viewport - CORRIGIDO */
|
||||
height: 100%;
|
||||
will-change: transform; /* Otimiza a animação */
|
||||
}
|
||||
|
||||
/* Cada slide individual ocupa uma viewport completa */
|
||||
.slide {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* Estilos específicos para cada slide */
|
||||
.intro-slide {
|
||||
background: linear-gradient(135deg, #2d0f44, #23408e);
|
||||
position: relative;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.login-slide {
|
||||
background: linear-gradient(135deg, #3a1788, #4c82e6);
|
||||
}
|
||||
|
||||
/* Container para o conteúdo centralizado em cada slide */
|
||||
.content-container {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
max-width: 1200px;
|
||||
position: relative;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
/* Cartão de introdução */
|
||||
.intro-card {
|
||||
background-color: rgba(252, 252, 252, 0.1);
|
||||
padding: 50px 40px;
|
||||
border-radius: 20px;
|
||||
width: 500%;
|
||||
max-width: 650px;
|
||||
color: white;
|
||||
margin-left: 10px;
|
||||
backdrop-filter: blur(10px);
|
||||
|
||||
}
|
||||
|
||||
.intro-title {
|
||||
font-size: 120px;
|
||||
font-weight: 120;
|
||||
color: white;
|
||||
margin-bottom: 15px;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
.intro-subtitle {
|
||||
margin-bottom: 30px;
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
font-size: 22px;
|
||||
line-height: 1.4;
|
||||
font-size: 40px;
|
||||
font-weight: 110;
|
||||
}
|
||||
|
||||
.access-btn {
|
||||
background: linear-gradient(to right, #5189f9, #4447f1) !important;
|
||||
color: white !important;
|
||||
font-weight: 600 !important;
|
||||
text-transform: none !important;
|
||||
border-radius: 25px !important;
|
||||
margin-top: 10px !important;
|
||||
width: 70% !important;
|
||||
height: 60px !important;
|
||||
font-size: 18px !important;
|
||||
letter-spacing: 0.5px !important;
|
||||
}
|
||||
|
||||
/* Formulário de login */
|
||||
.retangulo-box {
|
||||
background-image: url('/image_ret.png');
|
||||
background-repeat: no-repeat;
|
||||
background-size: 110%;
|
||||
background-size: 98%;
|
||||
background-position: center;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
max-width: 1200px;
|
||||
height: 600px;
|
||||
padding: 120px;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
width: 110%;
|
||||
max-width: 1500px;
|
||||
height: 1500px;
|
||||
padding: 110px;
|
||||
border-radius: 30px;
|
||||
|
||||
}
|
||||
|
||||
.login-form-box {
|
||||
background-color: white;
|
||||
padding: 30px;
|
||||
border-radius: 20px;
|
||||
width: 100%;
|
||||
max-width: 360px;
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
|
||||
color: #000;
|
||||
width: 34%;
|
||||
margin-left: 130px;
|
||||
}
|
||||
|
||||
.title {
|
||||
@ -137,52 +340,247 @@ const login = async () => {
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
margin-bottom: 20px;
|
||||
color: #777;
|
||||
margin-bottom: 30px;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
.custom-field {
|
||||
margin-bottom: 20px;
|
||||
.form {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
margin-bottom: 22px;
|
||||
}
|
||||
|
||||
.input-container label {
|
||||
display: block;
|
||||
margin-bottom: 6px;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.custom-input {
|
||||
width: 100%;
|
||||
height: 44px;
|
||||
padding: 0 16px;
|
||||
background-color: rgba(255, 255, 255, 0.2);
|
||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||
border-radius: 8px;
|
||||
color: white;
|
||||
font-size: 16px;
|
||||
box-sizing: border-box;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.custom-input:focus {
|
||||
outline: none;
|
||||
border-color: #4c9ff0;
|
||||
background-color: rgba(255, 255, 255, 0.25);
|
||||
}
|
||||
|
||||
.input-error {
|
||||
border-color: #ff4d4f;
|
||||
}
|
||||
|
||||
.error-text {
|
||||
color: #ff4d4f;
|
||||
font-size: 12px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.forgot-password {
|
||||
margin-bottom: 20px;
|
||||
text-align: right;
|
||||
margin-bottom: 25px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.login-btn {
|
||||
background: linear-gradient(to right, #86b6f6, #b8b4f7);
|
||||
width: 100%;
|
||||
height: 44px;
|
||||
background: linear-gradient(to right, #3e7bf4, #5658f5);
|
||||
color: white;
|
||||
font-weight: 600;
|
||||
text-transform: none;
|
||||
border-radius: 25px;
|
||||
margin-bottom: 15px;
|
||||
border: none;
|
||||
border-radius: 20px;
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.login-btn:hover {
|
||||
background: linear-gradient(to right, #3568d4, #4a4ce5);
|
||||
}
|
||||
|
||||
|
||||
|
||||
.register-link {
|
||||
margin-top: 20px;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.register-link a,
|
||||
.forgot-password a {
|
||||
color: #4c9ff0;
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.circle-container {
|
||||
flex: 1;
|
||||
.register-link a:hover,
|
||||
.forgot-password a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.circle-content {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding-left: 20px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.circle-img {
|
||||
width: 100%;
|
||||
max-width: 320px;
|
||||
width: 270%;
|
||||
max-width: 650px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
</style>
|
||||
/* Responsividade */
|
||||
@media (max-width: 960px) {
|
||||
.content-container {
|
||||
flex-direction: column;
|
||||
height: auto;
|
||||
padding: 40px 20px;
|
||||
}
|
||||
|
||||
.intro-card {
|
||||
margin: 0 0 30px 0;
|
||||
max-width: 90%;
|
||||
}
|
||||
|
||||
.retangulo-box {
|
||||
flex-direction: column;
|
||||
padding: 40px 20px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.login-form-box,
|
||||
.circle-container {
|
||||
width: 90%;
|
||||
margin: 15px 0;
|
||||
}
|
||||
@media (max-width: 1200px) {
|
||||
.intro-title {
|
||||
font-size: 80px;
|
||||
}
|
||||
|
||||
.intro-subtitle {
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.retangulo-box {
|
||||
padding: 80px;
|
||||
background-size: 100%;
|
||||
}
|
||||
|
||||
.login-form-box {
|
||||
margin-left: 50px;
|
||||
width: 45%;
|
||||
}
|
||||
|
||||
.circle-img {
|
||||
width: 200%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 960px) {
|
||||
.slides-wrapper {
|
||||
flex-direction: column;
|
||||
transform: none !important;
|
||||
}
|
||||
|
||||
.slide {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.content-container {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.intro-card {
|
||||
margin: 0;
|
||||
padding: 40px 20px;
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.intro-title {
|
||||
font-size: 50px;
|
||||
}
|
||||
|
||||
.intro-subtitle {
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.access-btn {
|
||||
width: 80% !important;
|
||||
height: 50px !important;
|
||||
font-size: 16px !important;
|
||||
}
|
||||
|
||||
.retangulo-box {
|
||||
flex-direction: column;
|
||||
padding: 40px 20px;
|
||||
height: auto;
|
||||
width: 95%;
|
||||
}
|
||||
|
||||
.login-form-box {
|
||||
width: 90%;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.circle-container {
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.circle-img {
|
||||
width: 100%;
|
||||
max-width: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.intro-title {
|
||||
font-size: 36px;
|
||||
}
|
||||
|
||||
.intro-subtitle {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.access-btn {
|
||||
font-size: 14px !important;
|
||||
height: 44px !important;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.login-btn {
|
||||
font-size: 14px;
|
||||
height: 44px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user