some chenges: json texts, some styles issues and functionalities

This commit is contained in:
María
2025-10-31 11:17:48 +01:00
parent ba4e01e10c
commit b90516bfc5
18 changed files with 341 additions and 292 deletions

View File

@@ -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;

View File

@@ -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>

View File

@@ -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>

View File

@@ -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>

View File

@@ -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>

View File

@@ -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>

View File

@@ -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"

View File

@@ -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>

View File

@@ -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>

View File

@@ -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)
}
}
};

View File

@@ -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"

View File

@@ -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 = {}

View File

@@ -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>

View File

@@ -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>

View File

@@ -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"

File diff suppressed because it is too large Load Diff

View File

@@ -7,6 +7,7 @@
</main>
<FooterComp />
</div>
</template>