some chenges: json texts, some styles issues and functionalities
This commit is contained in:
@@ -10,6 +10,8 @@
|
||||
--color-on-accent: #4F2773;
|
||||
--color-bg: #3B1E5A;
|
||||
--color-surface: #4F2773;
|
||||
--color-surface-light: #bd93ed;
|
||||
--color-surface-extra-light: #e8dafa;
|
||||
--color-black: #1E1E1E;
|
||||
--color-white: #FFFFFF;
|
||||
--color-gray-light: #B9B9B9;
|
||||
|
||||
@@ -2,10 +2,11 @@
|
||||
<section class="flex flex-1 justify-center pt-10 pb-[60px] px-4 sm:p-4 bg-mapamundi">
|
||||
<div
|
||||
class="rounded-2xl px-4 sm:px-10 py-12 w-full max-w-2xl h-fit"
|
||||
:class="{
|
||||
>
|
||||
<!-- :class="{
|
||||
'bg-surface text-white mt-12': id !== 'P1-F4-1' && id !== 'P1-F4-2' && type !== 'question',
|
||||
'bg-[#82DBDF] text-surface': id === 'P1-F4-1' || id === 'P1-F4-2',
|
||||
}">
|
||||
}" -->
|
||||
<slot />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -4,10 +4,10 @@
|
||||
id="default-checkbox"
|
||||
v-model="checkbox"
|
||||
type="checkbox"
|
||||
class="w-4 h-4 text-indigo-600 bg-gray-100 border-gray-300 rounded-sm focus:ring-indigo-500 dark:focus:ring-indigo-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
|
||||
class="w-4 h-4 text-indigo-600 bg-gray-100 border-gray-300 rounded-sm focus:ring-indigo-500 focus:ring-2">
|
||||
<label
|
||||
for="default-checkbox"
|
||||
class="ms-2 text-sm dark:text-gray-300"
|
||||
class="ms-2 text-sm"
|
||||
>{{ label }}</label>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -1,18 +1,18 @@
|
||||
<template>
|
||||
<div class="space-y-2">
|
||||
<label for="mail" class="block text-sm">{{ label[langcode] }} <span>{{ required ? '*' : '' }}</span></label>
|
||||
<div class="mt-2 h-10 flex items-center rounded-md bg-white pl-3 outline-1 -outline-offset-1 outline-gray-300 has-[input:focus-within]:outline-2 has-[input:focus-within]:-outline-offset-2 has-[input:focus-within]:outline-indigo-600 dark:bg-white/5 dark:outline-gray-600 dark:has-[input:focus-within]:outline-indigo-500">
|
||||
<label for="mail" class="block text-sm">{{ label[langcode] }} </label>
|
||||
<div class="mt-2 h-10 flex items-center rounded-md bg-white pl-3 outline-1 -outline-offset-1 outline-gray-300 has-[input:focus-within]:outline-2 has-[input:focus-within]:-outline-offset-2 has-[input:focus-within]:outline-indigo-600 ">
|
||||
<img src="@/assets/svg/mail.svg" alt="" class="h-5 w-5" />
|
||||
<input
|
||||
id="mail"
|
||||
v-model="email"
|
||||
type="text"
|
||||
name="mail"
|
||||
class="block min-w-0 grow py-1.5 pr-3 pl-1 text-base text-gray-900 placeholder:text-gray-400 focus:outline-none sm:text-sm/6 dark:bg-gray-800 dark:text-white dark:placeholder:text-gray-500"
|
||||
class="block min-w-0 grow py-1.5 pr-3 pl-1 text-base text-gray-900 placeholder:text-gray-400 focus:outline-none sm:text-sm/6"
|
||||
:placeholder="placeholder[langcode]"
|
||||
/>
|
||||
</div>
|
||||
<p v-if="error" class="mt-2 text-sm text-error dark:text-error">{{ error[langcode] }}</p>
|
||||
<p v-if="error" class="mt-2 text-sm text-error">{{ error[langcode] }}</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
v-if="label"
|
||||
class="mb-4 font-medium"
|
||||
>
|
||||
<p class="mb-2 block">{{ label[langcode] }} <span v-if="required" class="text-white">*</span></p>
|
||||
<p class="mb-2 block">{{ label[langcode] }}</p>
|
||||
</div>
|
||||
<section class="flex flex-wrap gap-2 md:gap-4">
|
||||
<div
|
||||
@@ -19,7 +19,7 @@
|
||||
/>
|
||||
<label
|
||||
:for="`radio-` + opt.label[langcode]"
|
||||
class="cursor-pointer w-full py-2 pr-2 text-sm flex items-center gap-2 bg-accent hover:bg-muted peer-checked:bg-muted text-surface pl-2 outline-1 -outline-offset-1 outline-gray-300 rounded-md">
|
||||
class="cursor-pointer py-2 pr-2 text-sm flex justify-center w-full min-w-10 items-center gap-2 bg-accent hover:bg-muted peer-checked:bg-surface-light text-surface pl-2 outline-1 -outline-offset-1 outline-surface-light rounded-md">
|
||||
{{ opt.label[langcode] }}</label>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="space-y-2">
|
||||
<label for="telephone" class="block text-sm text-gray-900 dark:text-white">{{ label }} <span>{{ required ? '*' : '' }}</span></label>
|
||||
<div class="mt-2 h-10 flex items-center rounded-md bg-white pl-3 outline-1 -outline-offset-1 outline-gray-300 has-[input:focus-within]:outline-2 has-[input:focus-within]:-outline-offset-2 has-[input:focus-within]:outline-indigo-600 dark:bg-white/5 dark:outline-gray-600 dark:has-[input:focus-within]:outline-indigo-500">
|
||||
<label for="telephone" class="block text-sm text-gray-900">{{ label }} </label>
|
||||
<div class="mt-2 h-10 flex items-center rounded-md bg-white pl-3 outline-1 -outline-offset-1 outline-gray-300 has-[input:focus-within]:outline-2 has-[input:focus-within]:-outline-offset-2 has-[input:focus-within]:outline-indigo-600">
|
||||
<img src="@/assets/svg/smartphone.svg" alt="" class="h-5 w-5" />
|
||||
<input
|
||||
id="telephone"
|
||||
@@ -10,10 +10,10 @@
|
||||
name="telephone"
|
||||
:placeholder="placeholder"
|
||||
:required="required"
|
||||
class="block min-w-0 grow py-1.5 pr-3 pl-1 text-base text-gray-900 placeholder:text-gray-400 focus:outline-none sm:text-sm/6 dark:bg-gray-800 dark:text-white dark:placeholder:text-gray-500"
|
||||
class="block min-w-0 grow py-1.5 pr-3 pl-1 text-base text-gray-900 placeholder:text-gray-400 focus:outline-none sm:text-sm/6"
|
||||
/>
|
||||
</div>
|
||||
<p v-if="error" class="mt-2 text-sm text-error dark:text-error">{{ error }}</p>
|
||||
<p v-if="error" class="mt-2 text-sm text-error">{{ error }}</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
<template>
|
||||
<div class="space-y-2">
|
||||
<label for="text" class="block text-sm">{{ label[langcode]}} <span>{{ required ? '*' : '' }}</span></label>
|
||||
<label for="text" class="block text-sm">{{ label[langcode]}} </label>
|
||||
<div class="h-10 flex items-center rounded-md bg-white pl-3 outline-1 -outline-offset-1 outline-gray-300 has-[input:focus-within]:outline-2 has-[input:focus-within]:-outline-offset-2 has-[input:focus-within]:outline-indigo-600">
|
||||
<input
|
||||
id="text"
|
||||
type="text"
|
||||
name="text"
|
||||
:placeholder="placeholder[langcode]"
|
||||
class="block min-w-0 grow py-1.5 pr-3 pl-1 text-base text-gray-900 placeholder:text-gray-400 focus:outline-none sm:text-sm/6 dark:bg-gray-800 dark:text-white dark:placeholder:text-gray-500"
|
||||
class="block min-w-0 grow py-1.5 pr-3 pl-1 text-base text-gray-900 placeholder:text-gray-400 focus:outline-none sm:text-sm/6"
|
||||
:required="required"
|
||||
:value="modelValue"
|
||||
@input="updateValue"
|
||||
|
||||
@@ -1,12 +1,12 @@
|
||||
<template>
|
||||
<div class="space-y-2">
|
||||
<label for="textarea" class="block text-sm text-gray-900 dark:text-white">{{ label }}</label>
|
||||
<div class="h-full flex items-center rounded-md bg-white pl-2 outline-1 -outline-offset-1 outline-gray-300 has-[input:focus-within]:outline-2 has-[input:focus-within]:-outline-offset-2 has-[input:focus-within]:outline-indigo-600 dark:bg-white/5 dark:outline-gray-600 dark:has-[input:focus-within]:outline-indigo-500">
|
||||
<label for="textarea" class="block text-sm text-gray-900 ">{{ label }}</label>
|
||||
<div class="h-full flex items-center rounded-md bg-white pl-2 outline-1 -outline-offset-1 outline-gray-300 has-[input:focus-within]:outline-2 has-[input:focus-within]:-outline-offset-2 has-[input:focus-within]:outline-indigo-600">
|
||||
<textarea
|
||||
id="textarea"
|
||||
name="textarea"
|
||||
rows="3"
|
||||
class="block grow p-2 text-base text-gray-900 placeholder:text-gray-400 focus:outline-none sm:text-sm/6 dark:bg-gray-800 dark:text-white dark:placeholder:text-gray-500"
|
||||
class="block grow p-2 text-base text-gray-900 placeholder:text-gray-400 focus:outline-none sm:text-sm/6"
|
||||
placeholder="Input"
|
||||
@input="onInput" />
|
||||
</div>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div>
|
||||
<label for="web" class="block text-sm text-gray-900 dark:text-white">{{ label }} <span>{{ required ? '*' : '' }}</span></label>
|
||||
<div class="mt-2 h-10 flex items-center rounded-md bg-white pl-3 outline-1 -outline-offset-1 outline-gray-300 has-[input:focus-within]:outline-2 has-[input:focus-within]:-outline-offset-2 has-[input:focus-within]:outline-indigo-600 dark:bg-white/5 dark:outline-gray-600 dark:has-[input:focus-within]:outline-indigo-500">
|
||||
<label for="web" class="block text-sm text-gray-900 ">{{ label }} </label>
|
||||
<div class="mt-2 h-10 flex items-center rounded-md bg-white pl-3 outline-1 -outline-offset-1 outline-gray-300 has-[input:focus-within]:outline-2 has-[input:focus-within]:-outline-offset-2 has-[input:focus-within]:outline-indigo-600">
|
||||
<img src="@/assets/svg/globe.svg" alt="" class="h-5 w-5" />
|
||||
<input
|
||||
id="web"
|
||||
@@ -9,10 +9,10 @@
|
||||
type="url"
|
||||
name="web"
|
||||
:placeholder="placeholder"
|
||||
class="block min-w-0 grow py-1.5 pr-3 pl-1 text-base text-gray-900 placeholder:text-gray-400 focus:outline-none sm:text-sm/6 dark:bg-gray-800 dark:text-white dark:placeholder:text-gray-500"
|
||||
class="block min-w-0 grow py-1.5 pr-3 pl-1 text-base text-gray-900 placeholder:text-gray-400 focus:outline-none sm:text-sm/6"
|
||||
/>
|
||||
</div>
|
||||
<p v-if="error" class="mt-2 text-sm text-error dark:text-error">{{ error }}</p>
|
||||
<p v-if="error" class="mt-2 text-sm text-error">{{ error }}</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@@ -76,10 +76,15 @@ export default {
|
||||
methods: {
|
||||
...mapActions(['setLangcode']),
|
||||
handleLanguage(code) {
|
||||
this.langcode = code;
|
||||
this.setLangcode(code);
|
||||
// Aquí puedes agregar la lógica real para cambiar idioma en Nuxt i18n
|
||||
//console.log('Idioma cambiado a:', code);
|
||||
// Si solo hay un idioma visible (en mobile)
|
||||
if (window.innerWidth < 640) { // sm breakpoint
|
||||
this.langcode = this.langcode === 'es' ? 'pt' : 'es'
|
||||
} else {
|
||||
this.langcode = code
|
||||
}
|
||||
|
||||
this.setLangcode(this.langcode)
|
||||
localStorage.setItem('langcode', this.langcode)
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="space-y-2">
|
||||
<label for="select" class="block text-sm text-gray-900">{{ label }} <span>{{ required ? '*' : '' }}</span></label>
|
||||
<label for="select" class="block text-sm text-gray-900">{{ label }} </label>
|
||||
<select
|
||||
id="select"
|
||||
v-model="selectedOption"
|
||||
|
||||
@@ -1,8 +1,9 @@
|
||||
<template>
|
||||
<div id="pdf-content" class="space-y-4 bg-surface text-accent">
|
||||
<div class="space-y-4 bg-surface text-accent rounded-2xl px-4 sm:px-10 py-12 w-full max-w-2xl h-fit">
|
||||
<section id="pdf-content">
|
||||
<img src="../public/logo-bravio.png" alt="logo-bravio-blanco" class="h-12 md:h-14 object-cover hidden" />
|
||||
<h2 class="text-3xl font-semibold text-center">{{ data.title[langcode] }}</h2>
|
||||
<p class="text-center text-muted">{{ data.subtitle[langcode] }}</p>
|
||||
<h2 class="text-3xl font-semibold text-center">{{ data.title[langcode] }} {{ universityName }}</h2>
|
||||
<p class="text-center text-muted">{{ data.subtitle[langcode] }} <span class="font-bold text-white">{{ country }}</span></p>
|
||||
<!-- <div class="text-center">
|
||||
<h3 class="text-lg font-semibold my-4">Tu puntuación total es {{ totalScore?.score }}/{{ totalScore?.totalPossiblePoints }}</h3>
|
||||
<p v-if="totalScore?.recommendations" class="text-lg font-semibold my-4">Recomendarión: {{ totalScore?.recommendations[langcode] }}</p>
|
||||
@@ -22,8 +23,8 @@
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<p class="my-4">{{ langcode === 'es' ? 'Revisa la aplicación normativa con Asesoría Jurídica de tu universidad' : 'Reveja a aplicação normativa com a Assessoria Jurídica da sua universidade' }}</p>
|
||||
</section>
|
||||
<p class="my-4 text-center">{{ langcode === 'es' ? 'Revisa la aplicación normativa con Asesoría Jurídica de tu universidad' : 'Reveja a aplicação normativa com a Assessoria Jurídica da sua universidade' }}</p>
|
||||
<client-only>
|
||||
<div class="flex justify-center gap-2 mt-4">
|
||||
<ButtonCTA color="transparent" @click="reloadPage">
|
||||
@@ -34,6 +35,7 @@
|
||||
</ButtonCTA>
|
||||
</div>
|
||||
</client-only>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
@@ -55,11 +57,9 @@ export default {
|
||||
return {
|
||||
results: null,
|
||||
totalScore: null,
|
||||
recommendations: [
|
||||
"Implementar una estrategia de comunicación interna.",
|
||||
"Evaluar la satisfacción del equipo trimestralmente.",
|
||||
"Adoptar un sistema de gestión de proyectos colaborativo."
|
||||
]
|
||||
recommendations: [],
|
||||
universityName: '',
|
||||
country: ''
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@@ -68,17 +68,26 @@ export default {
|
||||
mounted() {
|
||||
//this.getResults();
|
||||
this.getGroupedResults();
|
||||
this.getUniversityAndCountry();
|
||||
},
|
||||
methods: {
|
||||
getResults() {
|
||||
this.results = JSON.parse(localStorage.getItem('results'));
|
||||
this.totalScore = JSON.parse(localStorage.getItem('final-score'));
|
||||
},
|
||||
getUniversityAndCountry() {
|
||||
const storedAnswers = localStorage.getItem("answers")
|
||||
const uniAnswer = JSON.parse(storedAnswers).find(item => item.sliceId === "P1-01");
|
||||
this.universityName = uniAnswer.value.university || ""
|
||||
|
||||
const countryAnswer = JSON.parse(storedAnswers).find(item => item.sliceId === "P1-02");
|
||||
this.country = countryAnswer.value || ""
|
||||
},
|
||||
getGroupedResults() {
|
||||
const storedResults = localStorage.getItem("results")
|
||||
if (!storedResults) return []
|
||||
|
||||
const results = JSON.parse(storedResults)
|
||||
const results = JSON.parse(storedResults).filter(r => r.sectionId)
|
||||
|
||||
const grouped = {}
|
||||
|
||||
|
||||
@@ -1,5 +1,10 @@
|
||||
<template>
|
||||
<div class="flex flex-col justify-center items-start space-y-4">
|
||||
<div
|
||||
class="flex flex-col justify-center items-start space-y-4 rounded-2xl px-4 sm:px-10 py-12 w-full max-w-2xl h-fit"
|
||||
:class="{
|
||||
'bg-surface text-white': data.id !== 'P1-F4-1' && data.id !== 'P1-F4-2',
|
||||
'bg-[#82DBDF] text-surface': data.id === 'P1-F4-1' || data.id === 'P1-F4-2',
|
||||
}">
|
||||
<h1 class="text-3xl font-bold">
|
||||
{{ data.title[langcode]}}
|
||||
</h1>
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
<template>
|
||||
<div class="space-y-3">
|
||||
<div class=" bg-surface text-white rounded-2xl px-8 py-4 border-b-5 border-[#8444BD]">
|
||||
<h2 class="text-sm ">{{ data.section.title[langcode] }}</h2>
|
||||
<h2 class="text-md uppercase">{{ data.section.title[langcode] }}</h2>
|
||||
</div>
|
||||
<form @submit.prevent="handleSubmit" class="bg-surface text-white rounded-2xl px-4 sm:px-10 py-12">
|
||||
<form class="bg-surface text-white rounded-2xl px-4 sm:px-10 py-12" @submit.prevent="handleSubmit" >
|
||||
<div class="flex flex-col gap-4 ">
|
||||
<!-- Cabecera de sección -->
|
||||
<!-- <div class="flex gap-2">
|
||||
@@ -54,7 +54,7 @@
|
||||
:disabled="!isValid"
|
||||
@click="$emit('next', values)"
|
||||
>
|
||||
Continuar
|
||||
{{ langcode === 'es' ? 'Avancemos' : 'Avançar' }}
|
||||
</button-CTA>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="flex flex-col justify-center items-center text-center gap-y-6 h-full">
|
||||
<div class="flex flex-col justify-center items-center text-center gap-y-6 h-full bg-surface text-white rounded-2xl px-4 sm:px-10 py-12 w-full max-w-2xl">
|
||||
<h1 class="text-3xl font-bold">{{ data.title[langcode] }}</h1>
|
||||
<p class="text-xl">{{ data.subtitle[langcode] }}</p>
|
||||
<p class="text-lg">{{ data.subtitle[langcode] }}</p>
|
||||
<ButtonCTA
|
||||
color="accent"
|
||||
class="mt-4"
|
||||
|
||||
454
data/bravioo.js
454
data/bravioo.js
File diff suppressed because it is too large
Load Diff
@@ -7,6 +7,7 @@
|
||||
</main>
|
||||
|
||||
<FooterComp />
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@@ -84,12 +84,12 @@ export default {
|
||||
},
|
||||
|
||||
mounted() {
|
||||
//Al montar, escuchar el evento de recarga/cierre
|
||||
// Al montar, escuchar el evento de recarga/cierre
|
||||
window.addEventListener("beforeunload", this.clearStorageOnReload)
|
||||
},
|
||||
|
||||
beforeUnmount() {
|
||||
//Limpiar el listener al desmontar el componente
|
||||
// Limpiar el listener al desmontar el componente
|
||||
window.removeEventListener("beforeunload", this.clearStorageOnReload)
|
||||
},
|
||||
|
||||
|
||||
Reference in New Issue
Block a user