Cambio do deseño da paxina de contacto e correccions varias.

This commit is contained in:
Laegnur 2024-10-08 20:55:01 +02:00
parent 232e053da1
commit 72fc9d071e
Signed by: laegnur
GPG key ID: F8FE83A0B2D932A3
8 changed files with 2115 additions and 173 deletions

File diff suppressed because one or more lines are too long

View file

@ -1,150 +1,95 @@
<?php namespace ProcessWire;
/** @var Page $page API variable */
/** @var Page $page */
/** @var Pages $pages */
/** @var Config $config */
/** @var Sanitizer $sanitizer API variable */
/** @var WireInput $input API variable */
/** @var User $user API variable */
/** @var Languages $languages API variable */
/** @var SiteConfig $configuracion */
/** @var HomePage $inicio */
define("RECAPTCHA_V3_SECRET_KEY", '6LexXqYiAAAAAOoFqs4kfWd7zW6stVRK0aViyiQo');
$menu = '';
$contido = '';
if($configuracion['mantemento']['activo'] && !$user->isLoggedin())
{
$menu = renderMenu($pages->get('/noticias')->and($pages->get('/contacto')));
$menu = renderMenu($inicio->and($pages->get('/noticias')->and($pages->get('/contacto'))));
}
else
{
$menu = renderMenu($inicio->children);
}
$menu = renderMenu($inicio->and($inicio->children));
$saida = '';
$captcha = $modules->get('MarkupGoogleRecaptcha');
if($input->post('enviar'))
{
$correo = wireMail();
$correo->to($configuracion['contacto_correo']);
$correo->from($sanitizer->email($input->post->correo));
$correo->fromName($sanitizer->text($input->post->nome));
$correo->subject($sanitizer->text($input->post->asunto));
$correo->body($sanitizer->text($input->post->mensaxe));
$token = $input->post->token;
$action = $input->post->action;
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL,"https://www.google.com/recaptcha/api/siteverify");
curl_setopt($ch, CURLOPT_POST, 1);
curl_setopt($ch, CURLOPT_POSTFIELDS, http_build_query(array('secret' => RECAPTCHA_V3_SECRET_KEY, 'response' => $token)));
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
$response = curl_exec($ch);
curl_close($ch);
$arrResponse = json_decode($response, true);
if($arrResponse["success"] == '1' && $arrResponse["action"] == $action && $arrResponse["score"] >= 0.5)
if ($captcha->verifyResponse() === true)
{
$correo->send();
$enviado = $correo->getResult();
$correo = wireMail();
//$correo->to($configuracion['contacto_correo']);
//$correo->bcc('laegnur@artabro.org');
$correo->to('laegnur@artabro.org');
$correo->from($sanitizer->email($input->post->correo));
$correo->fromName($sanitizer->text($input->post->nome));
$correo->subject($sanitizer->text($input->post->asunto));
$correo->body($sanitizer->text($input->post->mensaxe));
$enviado = $correo->send();
if($enviado)
{
$saida .= '<p>' . _x('Correo enviado', 'mail sent');
}
else
{
$saida .= '<p>' . _x('Erro ao enviar o correo', 'error sending mail');
}
$saida .= '<br><a class="boton activo centrado" href="' . $page->url . '" >' . _x('Volver ao formulario', 'go back to form') .'</a></p>';
}
else
{
$mensaxe_tipo = "alerta";
$mensaxe = _x('Wrong reCaptcha', 'Wrong reCaptcha');
$saida .= '<form method="post" action="' . $page->url . '">';
$saida .= '<label for="nome">' . _x('Nome', 'name') . '</label>';
$saida .= '<input type="text" name="nome" id="nome" required>';
$saida .= '<label for="correo">' . _x('Correo electrónico', 'email') . '</label>';
$saida .= '<input type="email" name="correo" id="correo" required>';
$saida .= '<label for="asunto">' . _x('Asunto', 'subject') . '</label>';
$saida .= '<input type="text" name="asunto" id="asunto" required>';
$saida .= '<label for="mensaxe">' . _x('Mensaxe', 'message') . '</label>';
$saida .= '<textarea name="mensaxe" id="mensaxe" cols="30" rows="6" required></textarea>';
$saida .= $captcha->render();
$saida .= '<input type="submit" id="enviar" name="enviar" class="boton activo" value="' . _x('Enviar mensaxe', 'send message') . '">';
$saida .= '</form>' . "\n";
$saida .= $captcha->getScript();
}
}
else
{
$contido .= 'No Enviado';
}
$contido .= renderMigasPan($page) . "\n";
$contido .= '<article id="' . $page->name .'" class="container">' . "\n";
$contido .= '<h2 class="visually-hidden">' . ucfirst($page->title) . '</h2>' . "\n";
$contido .= '<div class="row align-items-lg-stretch mb-5">' . "\n";
$contido .= '<div class="col-lg-7">' . "\n";
$contido .= '<div class="h-100 p-5 text-bg-light border rounded-3">' . "\n";
$contido .= '<form method="POST" id="formulario-contacto" name="formulario-contacto" onSubmit="getContact(event)" action="#">' . "\n";
$contido .= '<div class="row mb-3">' . "\n";
$contido .= '<div class="col-md-6">' . "\n";
$contido .= '<label class="form-label" for="nome">' . _x('Name', 'name') . '</label>' . "\n";
$contido .= '<input type="text" class="form-control" name="nome" id="nome" placeholder="' . _x('Name', 'name') . '" required>' . "\n";
$contido .= '</div>' . "\n";
$contido .= '<div class="col-md-6">' . "\n";
$contido .= '<label class="form-label" for="correo">' . _x('E-Mail', 'email') . '</label>' . "\n";
$contido .= '<input type="email" class="form-control" name="correo" id="correo" placeholder="' . _x('E-Mail', 'email') . '" required>' . "\n";
$contido .= '</div>' . "\n";
$contido .= '</div>' . "\n";
$contido .= '<div class="row mb-3">' . "\n";
$contido .= '<div class="col-md-12">' . "\n";
$contido .= '<label class="form-label" for="asunto">' . _x('Subject', 'subject') . '</label>' . "\n";
$contido .= '<input type="text" class="form-control" name="asunto" id="asunto" placeholder="' . _x('Subject', 'subject') . '" required>' . "\n";
$contido .= '</div>' . "\n";
$contido .= '</div>' . "\n";
$contido .= '<div class="row mb-3">' . "\n";
$contido .= '<div class="col-md-12">' . "\n";
$contido .= '<label class="form-label" for="mensaxe">' . _x('Message', 'message') . '</label>' . "\n";
$contido .= '<textarea class="form-control" name="mensaxe" id="mensaxe" cols="30" rows="4" placeholder="' . _x('Message', 'message') . '" required></textarea>' . "\n";
$contido .= '</div>' . "\n";
$contido .= '</div>' . "\n";
$contido .= '<div class="row mb-3">' . "\n";
$contido .= '<div class="col-md-12">' . "\n";
$contido .= '<input type="submit" id="enviar" name="enviar" value="' . _x('Send message', 'send message') . '" class="btn btn-primary">' . "\n";
$contido .= '</div>' . "\n";
$contido .= '</div>' . "\n";
if(isset($enviado) && count($enviado['recipientsSuccess']))
{
$contido .= '<div class="row mb-3">' . "\n";
$contido .= '<div class="col-md-12 alert alert-success" role="alert">' . "\n";
$contido .= 'Correo enviado.' . "\n";
$contido .= '</div>' . "\n";
$contido .= '</div>' . "\n";
}
if(isset($enviado) && count($enviado['recipientsFailed']))
{
$contido .= '<div class="row mb-3">' . "\n";
$contido .= '<div class="col-md-12 alert alert-danger" role="alert">' . "\n";
$contido .= 'Error enviado correo.' . "\n";
$contido .= '</div>' . "\n";
$contido .= '</div>' . "\n";
}
$contido .= '</form>' . "\n";
$contido .= '</div>' . "\n";
$contido .= '</div>' . "\n";
$contido .= '<div class="col-lg-5">' . "\n";
$contido .= '<div class="h-100 p-3 text-bg-primary border rounded-3">' . "\n";
$contido .= '<div class="row m-0 mb-3 position-relative w-100 h-100" style="padding-bottom: 56.25%;">' . "\n";
$contido .= '<iframe class="p-0 rounded position-absolute top-0 start-0 bottom-0 end-0 w-100 h-100" src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d167.88206925427303!2d-8.223339!3d43.43177!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xd2e759aa6d41317%3A0x25ccd67bb4c850ab!2sApartamentos%20tur%C3%ADsticos%20Praia%20de%20Seselle!5e1!3m2!1ses!2ses!4v1676985980478!5m2!1ses!2ses" style="border:0" allowfullscreen="" loading="lazy"></iframe>' . "\n";
$contido .= '</div>' . "\n";
$contido .= '</div>' . "\n";
$contido .= '</div>' . "\n";
$contido .= '</div>' . "\n";
$contido .= '<div class="row row-cols-1 row-cols-sm-2 row-cols-lg-3 py-5 justify-content-center">' . "\n";
$contido .= '<div class="feature col text-center">' . "\n";
$contido .= '<div class="feature-icon d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-2 mb-3">' . "\n";
$contido .= '<i class="icon-map-pin"></i>' . "\n";
$contido .= '</div>' . "\n";
$contido .= '<div class="text">' . "\n";
$contido .= '<p class="fs-4">' . _x('Address', 'address') . ':</p>' . "\n";
$contido .= '<p>' . $configuracion['contacto_direccion'] . '</p>' . "\n";
$contido .= '</div>' . "\n";
$contido .= '</div>' . "\n";
$contido .= '<div class="feature col text-center">' . "\n";
$contido .= '<div class="feature-icon d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-2 mb-3">' . "\n";
$contido .= '<i class="icon-phone"></i>' . "\n";
$contido .= '</div>' . "\n";
$contido .= '<div class="text">' . "\n";
$contido .= '<p class="fs-4">' . _x('Phone', 'phone') . '</p>' . "\n";
$contido .= '<p><a href="tel://' . $configuracion['contacto_telefono'] . '">' . $configuracion['contacto_telefono'] . '</a></p>' . "\n";
$contido .= '</div>' . "\n";
$contido .= '</div>' . "\n";
$contido .= '<div class="feature col text-center">' . "\n";
$contido .= '<div class="feature-icon d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-2 mb-3">' . "\n";
$contido .= '<i class="icon-mail"></i>' . "\n";
$contido .= '</div>' . "\n";
$contido .= '<div class="text">' . "\n";
$contido .= '<p class="fs-4">' . _x('E-Mail', 'email') . ':</p>' . "\n";
$contido .= '<p><a href="mailto:' . $configuracion['contacto_correo'] . '">' . $configuracion['contacto_correo'] . '</a></p>' . "\n";
$contido .= '</div>' . "\n";
$contido .= '</div>' . "\n";
$contido .= '</div>' . "\n";
$contido .= '</article>' . "\n";
?>
<main id="contido" class="completo">
<nav id="migas" aria-label="<?=_x("Breadcrumb", "Breadcrumb");?>">
<?=renderMigasPan($page);?>
</nav>
<article id="<?=$page->name;?>">
<h1 class="visually-hidden"><?=ucfirst($page->title);?></h1>
<section id="contacto-formulario">
<h2 class="visually-hidden">Formulario de contacto</h2>
<?=$saida;?>
<iframe id="mapa" src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d167.88206925427303!2d-8.223339!3d43.43177!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xd2e759aa6d41317%3A0x25ccd67bb4c850ab!2sApartamentos%20tur%C3%ADsticos%20Praia%20de%20Seselle!5e1!3m2!1ses!2ses!4v1676985980478!5m2!1ses!2ses" style="border:0" allowfullscreen="" loading="lazy"></iframe>
</section>
<section id="contacto-info">
<div class="elemento">
<i class="icona icon-map-pin"></i>
<h2><?=_x('Address', 'address');?></h2>
<p><?=$configuracion['contacto_direccion'];?></p>
</div>
<div class="elemento">
<i class="icona icon-phone"></i>
<h2><?=_x('Phone', 'phone');?></h2>
<p><a href="tel://<?=$configuracion['contacto_telefono'];?>"><?=$configuracion['contacto_telefono'];?></a></p>
</div>
<div class="elemento">
<i class="icona icon-mail"></i>
<h2><?=_x('E-Mail', 'email');?></h2>
<p><a href="mailto:<?=$configuracion['contacto_correo'];?>"><?=$configuracion['contacto_correo'];?></a></p>
</div>
</section>
</article>
</main>
<?php
}

View file

@ -212,7 +212,7 @@ form#atopar label
padding: 0.5rem 0.75rem;
border: 1PX solid transparent;
border: 1px solid transparent;
text-align: start;
text-overflow: ellipsis;
@ -334,26 +334,30 @@ nav#migas
margin-bottom: var(--separacion);
}
main#contido
{
grid-template-rows: auto 1fr;
}
main#contido article,
article section,
div.artigo
article section
{
margin-bottom: calc(var(--separacion) * 2);
}
div.artigo p
{
margin-block-start: 0;
}
article#habitacions figure
{
position: relative;
width: 100%;
height: auto;
min-width: 320px;
max-width: 480px;
max-height: 360px;
overflow: hidden;
margin: 10px 1%;
padding: 0;
text-align: center;
@ -405,13 +409,13 @@ article#habitacions figure figcaption > a
article#habitacions figure figcaption::before
{
position: absolute;
top: 30px;
right: 30px;
bottom: 30px;
left: 30px;
top: 1.875rem;
right: 1.875rem;
bottom: 1.875rem;
left: 1.875rem;
border: 2px solid #fff;
box-shadow: 0 0 0 30px rgba(255,255,255,0.2);
box-shadow: 0 0 0 1.875rem rgba(255,255,255,0.2);
content: '';
@ -423,7 +427,7 @@ article#habitacions figure figcaption::before
article#habitacions figure h2
{
margin: 20% 0 10px 0;
margin: 20% 0 var(--separacion) 0;
color: rgb(var(--cor_30));
word-spacing: -0.15em;
@ -472,7 +476,7 @@ section#mantemento img
padding: 3rem;
border: 1px solid rgba(var(--cor_10), 0.3);
border-radius: 8px;
border-radius: 0.5rem;
box-shadow: 0 1rem 3rem rgba(var(--cor_10), 0.3);
}
@ -610,6 +614,8 @@ section[id^="reixa-"] img,
div[id^="reixa-"] img
{
width: 100%;
cursor: pointer;
}
section[id^="reixa-"] div.modal,
@ -663,7 +669,7 @@ div[id^="reixa-"] div.modal figcaption
margin: auto;
padding: 10px 0;
padding: var(--separacion) 0;
text-align: center;
color: #ccc;
@ -673,8 +679,8 @@ section[id^="reixa-"] .modal-pechar,
div[id^="reixa-"] .modal-pechar
{
position: absolute;
top: 15px;
right: 35px;
top: var(--separacion);
right: calc(var(--separacion) * 2);
color: #f1f1f1;
font-size: 40px;
@ -721,7 +727,8 @@ div[id^="destacados-"] h2
}
section[id^="destacados-"] div.elemento,
div[id^="destacados-"] div.elemento
div[id^="destacados-"] div.elemento,
section#contacto-info div.elemento
{
display: grid;
grid-template-columns: auto 1fr;
@ -732,7 +739,8 @@ div[id^="destacados-"] div.elemento
}
section[id^="destacados-"] .icona,
div[id^="destacados-"] .icona
div[id^="destacados-"] .icona,
section#contacto-info .icona
{
grid-column: 1;
grid-row: 1 / span 2;
@ -751,7 +759,8 @@ div[id^="destacados-"] .icona
}
section[id^="destacados-"] h3,
div[id^="destacados-"] h3
div[id^="destacados-"] h3,
section#contacto-info h2
{
grid-column: 2;
grid-row: 1;
@ -760,7 +769,8 @@ div[id^="destacados-"] h3
}
section[id^="destacados-"] p,
div[id^="destacados-"] p
div[id^="destacados-"] p,
section#contacto-info p
{
grid-column: 2;
grid-row: 2;
@ -769,6 +779,54 @@ div[id^="destacados-"] p
margin-bottom: var(--separacion);
}
section#contacto-formulario
{
display: grid;
grid-template-columns: 1fr;
gap: var(--separacion);
padding: var(--separacion);
border: 1px solid rgba(var(--cor_10), 0.5);
border-radius: 0.5rem;
background-color: #eeeeee;
}
section#contacto-formulario form
{
display: grid;
grid-template-columns: 1fr;
row-gap: var(--separacion);
}
section#contacto-formulario iframe#mapa
{
width: 100%;
height: 100%;
padding: var(--separacion);
border-radius: 0.5rem;
background-color: rgb(var(--cor_30));
}
section#contacto-info
{
display: flex;
justify-content: center;
flex-wrap: wrap;
row-gap: var(--separacion);
margin: 0 auto;
}
section#contacto-info div.elemento
{
width: 100%;
}
footer#pe
{
padding-block: 1.5rem;
@ -832,10 +890,7 @@ footer#pe ul#redes li a
footer#pe p#desenrolo
{
grid-column: 1 / 7;
}
footer#pe p#desenrolo span
{
font-size: 0.75rem;
}
@ -937,6 +992,16 @@ footer#pe p#desenrolo span
grid-template-columns: 1fr 1fr;
}
section#contacto-info
{
column-gap: var(--separacion);
}
section#contacto-info div.elemento
{
width: calc(50% - (var(--separacion) / 2));
}
footer#pe div#info
{
grid-template-columns: auto var(--separacion) auto 1fr auto;
@ -1020,7 +1085,7 @@ footer#pe p#desenrolo span
grid-row: 2;
}
section[id^="imaxe-"] h3
section[id^="imaxe-"] h2
{
grid-column: 1 / 3;
grid-row: 1;
@ -1088,6 +1153,28 @@ footer#pe p#desenrolo span
{
grid-template-columns: repeat(3, 1fr);
}
section#contacto-formulario
{
grid-template-columns: repeat(2, 1fr);
padding: calc(var(--separacion) * 3);
}
section#contacto-formulario form
{
grid-template-columns: repeat(2, 1fr);
}
section#contacto-formulario iframe#mapa
{
min-height: 300px;
}
section#contacto-info div.elemento
{
width: calc(33% - (var(--separacion) / 2));
}
}
@keyframes zoom

View file

@ -10,6 +10,8 @@
/** @var SiteConfig $configuracion */
/** @var HomePage $inicio */
$menu = '';
if($configuracion['mantemento']['activo'] && !$user->isLoggedin())
{
$session->redirect($inicio->url);
@ -22,7 +24,7 @@ else
<nav id="migas" aria-label="<?=_x("Breadcrumb", "Breadcrumb");?>">
<?=renderMigasPan($page);?>
</nav>
<article id="habitacion">
<article id="<?=$page->name;?>">
<h1><?=ucfirst($page->title);?></h1>
<?=getSeccions($page->seccions);?>
</article>

View file

@ -10,6 +10,8 @@
/** @var SiteConfig $configuracion */
/** @var HomePage $inicio */
$menu = '';
if($configuracion['mantemento']['activo'] && !$user->isLoggedin())
{
$session->redirect($inicio->url);

View file

@ -10,6 +10,15 @@
/** @var SiteConfig $configuracion */
/** @var HomePage $inicio */
$menu = '';
if($configuracion['mantemento']['activo'] && !$user->isLoggedin())
{
$menu = renderMenu($inicio->and($pages->get('/noticias')->and($pages->get('/contacto'))));
}
else
{
$menu = renderMenu($inicio->and($inicio->children));
?>
<main id="contido" class="completo">
<nav id="migas" aria-label="<?=_x("Breadcrumb", "Breadcrumb");?>">
@ -17,12 +26,8 @@
</nav>
<article id="inicio" class="completo">
<h1 class="visually-hidden"><?=ucfirst($inicio->title);?></h1>
<?php if($configuracion['mantemento']['activo'] && !$user->isLoggedin()):?>
<?php $menu = renderMenu($inicio->and($pages->get('/noticias')->and($pages->get('/contacto'))));?>
<?=renderTextoMantemento($configuracion['mantemento']['titular'], $configuracion['mantemento']['artigo'], $configuracion['mantemento']['imaxe']);?>
<?php else: ?>
<?php $menu = renderMenu($inicio->and($inicio->children));?>
<?=getSeccions($page->seccions);?>
<?php endif; ?>
</article>
</main>
</main>
<?php
}

View file

@ -401,7 +401,7 @@ function renderImaxe($seccion)
if($seccion->titular)
{
$saida .= '<section id="imaxe-' . $seccion->id . '" class="'. $seccion->imaxe_posicion->value . '">';
$saida .= '<h3>' . $seccion->titular . '</h3>';
$saida .= '<h2>' . $seccion->titular . '</h2>';
$saida .= $imaxe;
$saida .= '<div class="artigo">' . $seccion->artigo . '</div>';
$saida .= $botons;

View file

@ -1,9 +1,16 @@
<?php namespace ProcessWire;
/** @var Page $page API variable */
/** @var Page $page */
/** @var Pages $pages */
/** @var Config $config */
/** @var Sanitizer $sanitizer API variable */
/** @var WireInput $input API variable */
/** @var User $user API variable */
/** @var Languages $languages API variable */
/** @var SiteConfig $configuracion */
/** @var HomePage $inicio */
$menu = '';
$contido = '';
if($configuracion['mantemento']['activo'] && !$user->isLoggedin())
{
@ -11,14 +18,13 @@ if($configuracion['mantemento']['activo'] && !$user->isLoggedin())
}
else
{
$menu = renderMenu($inicio->and($inicio->children));
?>
<main id="contido" class="completo">
<nav id="migas" aria-label="<?=_x("Breadcrumb", "Breadcrumb");?>">
<?=renderMigasPan($page);?>
</nav>
<article id="servicios">
<article id="<?=$page->name;?>">
<h1 class="visually-hidden"><?=ucfirst($page->title);?></h1>
<?=getSeccions($page->seccions);?>
</article>