Pantallas de agredecimiento al responder los formularios
This commit is contained in:
VictorMongeM
parent
cf90a9fccd
commit
f3414286b9
|
|
@ -0,0 +1,143 @@
|
|||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
background: linear-gradient(-45deg, #f8f9ff, #fff5f8, #f0fff4, #fffaf0, #f0f8ff);
|
||||
background-size: 400% 400%;
|
||||
animation: backgroundShift 8s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes backgroundShift {
|
||||
0% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
25% {
|
||||
background-position: 100% 0%;
|
||||
}
|
||||
50% {
|
||||
background-position: 100% 100%;
|
||||
}
|
||||
75% {
|
||||
background-position: 0% 100%;
|
||||
}
|
||||
100% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.header {
|
||||
background-color: #211b52;
|
||||
padding: 1rem;
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.header img {
|
||||
height: 5rem;
|
||||
margin: 0 10px;
|
||||
}
|
||||
|
||||
.content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
padding: 2rem;
|
||||
position: relative;
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
.content h2 {
|
||||
background: linear-gradient(45deg, #4285f4, #34a853, #fbbc05, #ea4335);
|
||||
background-size: 400% 400%;
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
animation: gradientShift 3s ease-in-out infinite;
|
||||
font-size: 2.5rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 1.5rem;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.content p {
|
||||
color: #5f6368;
|
||||
line-height: 1.6;
|
||||
margin-bottom: 1rem;
|
||||
font-size: 1.2rem;
|
||||
max-width: 600px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
@keyframes gradientShift {
|
||||
0% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
50% {
|
||||
background-position: 100% 50%;
|
||||
}
|
||||
100% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
}
|
||||
|
||||
/* Responsivo para tablets */
|
||||
@media (max-width: 768px) {
|
||||
.content {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.content h2 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.content p {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.header img {
|
||||
height: 4rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Responsivo para móviles */
|
||||
@media (max-width: 480px) {
|
||||
.content {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.content h2 {
|
||||
font-size: 1.8rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.content p {
|
||||
font-size: 1rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.header {
|
||||
padding: 0.8rem;
|
||||
}
|
||||
|
||||
.header img {
|
||||
height: 3.5rem;
|
||||
margin: 0 5px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Para pantallas muy pequeñas */
|
||||
@media (max-width: 320px) {
|
||||
.content h2 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.content p {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
Before 
(image error) Size: 81 KiB After 
(image error) Size: 54 KiB
|
|
|
@ -214,7 +214,7 @@ formulario.addEventListener("submit", async(event) => {
|
|||
// Verificar si el registro fue exitoso
|
||||
if (resultado.registroExitoso) {
|
||||
alert('Se guardó la información correctamente');
|
||||
window.location.href = 'pantalla-salida-form.html';
|
||||
window.location.href = 'agradecimiento-rc.html';
|
||||
} else {
|
||||
notificacion.textContent = resultado.message;
|
||||
notificacion.style.display = "block";
|
||||
|
|
|
|||
|
|
@ -374,7 +374,7 @@ document.addEventListener("DOMContentLoaded", function () {
|
|||
if (resultado.estado === "exitoso") {
|
||||
console.log(resultado.res);
|
||||
alert('Se guardó la información correctamente');
|
||||
window.location.href = 'pantalla-salida-form.html';
|
||||
window.location.href = 'agradecimiento-dc.html';
|
||||
} else if(resultado.estado === "error") {
|
||||
console.error("RegistrarInfoCandidato.php: " + resultado.res);
|
||||
alert("Ocurrió un error, intentelo más tarde.");
|
||||
|
|
|
|||
|
|
@ -0,0 +1,22 @@
|
|||
<!DOCTYPE html>
|
||||
<html data-bs-theme="light" lang="es-mx">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
|
||||
<title>Gracias</title>
|
||||
<link rel="stylesheet" href="../css/agradecimiento.css" type="text/css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="header">
|
||||
<img src="../img/lania_logo.png" alt="Logo LANIA">
|
||||
</div>
|
||||
<div class="content">
|
||||
<div>
|
||||
<h2>¡Gracias por tu participación!</h2>
|
||||
<p>Agradecemos tu tiempo y esperamos verte pronto nuevamente.</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
<!DOCTYPE html>
|
||||
<html data-bs-theme="light" lang="es-mx">
|
||||
<link rel="stylesheet" href="../css/agradecimiento.css" type="text/css">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
|
||||
<title>Gracias</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="header">
|
||||
<img src="../img/lania_logo.png" alt="Logo LANIA">
|
||||
</div>
|
||||
<div class="content">
|
||||
<div>
|
||||
<h2>¡Gracias por registrarte!</h2>
|
||||
<p>Tu información se ha guardado correctamente.</p>
|
||||
<p>Por favor, continúa con tu examen. Al finalizar, se te pedirá que completes un breve formulario adicional para ayudarnos a mejorar.</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,21 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html data-bs-theme="light" lang="es-mx">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
|
||||
<title>formsLania</title>
|
||||
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="text-bg-light" style="height: 70px;"><img src="assets/img/logo-lania.png" style="height: 65px;margin: 0px 10px;"></div>
|
||||
<div class="card">
|
||||
<div class="card-body" style="margin: 0px 30px;">
|
||||
<h1 class="text-center">¡Gracias por registrarse!</h1>
|
||||
</div>
|
||||
</div>
|
||||
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Loading…
Reference in New Issue