andreandClaude Opus 5.5
8ebf20f52f
- Horário de aulas: cartões mais pequenos e estreitos; a partir de 992px mostra o dia anterior, hoje ao centro e o seguinte (a dar a volta à semana), com as horas alinhadas e os dias laterais esbatidos. O JPG continua a semana toda. - Horário de funcionamento: cartões compactos numa <dl>, ordenados por hora. - Equipa: fundo no cinzento da parede do ginásio com juntas de blocos e grão muito discretos (SVG inline). - Tira o «FitMe 3070» do header e esconde a newsletter. - Estrutura: um <main> em todas as páginas públicas (skip link aponta-lhe), h2 por secção com aria-labelledby, h3 nos itens em vez de h4, sem secções aninhadas, alts distintos na galeria e no h1 do CrossFit. - robots.txt e sitemap.xml gerados com o domínio da instalação; SEO_NOINDEX no .env tira uma cópia de staging dos motores de pesquisa. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
47 lines
1.9 KiB
PHP
47 lines
1.9 KiB
PHP
<?php
|
|
// Gallery partial — Splide CSS/JS is loaded centrally by include.php / footer.php.
|
|
// Slides use Splide's native lazy loading (data-splide-lazy + cover), so only
|
|
// the visible/nearby images are downloaded instead of the whole gallery.
|
|
$files = glob(rtrim($gallery_path, '/') . '/*.jpg');
|
|
if (!$files || !is_array($files)) $files = [];
|
|
?>
|
|
<div class="row justify-content-md-center" style="margin-top: 58px">
|
|
<div class="col-lg-8">
|
|
<div class="section-title text-center deco">
|
|
<span class="section-eyebrow">Galeria</span>
|
|
<h2><?= htmlspecialchars($gallery_h2 ?? 'Galeria') ?></h2>
|
|
<p class="section-subtitle">Espaço amplo, equipamento moderno e um ambiente feito para treinar.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="primary-slider" class="splide" style="padding:0;">
|
|
<div class="splide__track">
|
|
<ul class="splide__list">
|
|
<?php foreach($files as $gi => $f): /* distinct alt per photo — identical alts read as one image */ ?>
|
|
<li class="splide__slide"><img src="<?= base_url($f) ?>" alt="<?= htmlspecialchars(($gallery_h2 ?? 'Instalações') . ' — FitMe 3070, foto ' . ($gi + 1)) ?>"<?= $gi > 0 ? ' loading="lazy"' : '' ?>></li>
|
|
<?php endforeach; ?>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
var isMobile = window.innerWidth < 768;
|
|
// Single auto-playing slider (no thumbnail strip). Real <img src> + cover
|
|
// paints the first big image on mount; autoplay cross-fades through the
|
|
// rest and rewinds at the end. Pauses on hover/focus for accessibility.
|
|
new Splide('#primary-slider', {
|
|
type: 'fade',
|
|
rewind: true,
|
|
heightRatio: isMobile ? 0.7 : 0.5,
|
|
cover: true,
|
|
arrows: !isMobile,
|
|
pagination: true,
|
|
autoplay: true,
|
|
interval: 4500,
|
|
speed: 800,
|
|
pauseOnHover: true,
|
|
pauseOnFocus: true
|
|
}).mount();
|
|
});
|
|
</script>
|