Merge pull request 'style(contactos): info and hours beside the form' (#6) from beta into main

Drops the duplicate «Envia-nos uma mensagem» heading (the app form has its
own) and gives the narrower form the right half.

site/assets/css/style.css

@@ -1653,9 +1653,13 @@ section[id] {
   margin-bottom: 2.5rem;
 }
 
-/* The form heading is an h3 under the section's h2 — keep the h2 look. */
+/* The FitMe app form (iframe, max 480px): centred when it stacks under the info. */
-h3.contact-title {
+#fitme-form-site-contacto {
-  font-size: 2.25rem;
+  display: block;
+  margin-inline: auto;
+}
+@media (max-width: 991px) {
+  #contact-form { margin-top: 1rem; }
 }
 
 .contact-info-warp {

site/assets/js/main.js

@@ -829,15 +829,22 @@ document.addEventListener('DOMContentLoaded', function () {
             if (e.pointerType === 'touch' || e.button !== 0) return;
             dragging = true; moved = 0;
             startX = e.clientX; startLeft = wrap.scrollLeft;
-            wrap.classList.add('is-dragging');
-            wrap.setPointerCapture(e.pointerId);
         });
         wrap.addEventListener('pointermove', function (e) {
             if (!dragging) return;
             var dx = e.clientX - startX;
             moved = Math.max(moved, Math.abs(dx));
+            if (moved <= 5) return;
+            // Capture only once it is a real drag: capturing on pointerdown sends the
+            // click to .gal-wrap instead of the photo, so the lightbox never opened.
+            if (!wrap.classList.contains('is-dragging')) {
+                wrap.classList.add('is-dragging');
+                try { wrap.setPointerCapture(e.pointerId); } catch (err) {}
+            }
             wrap.scrollLeft = startLeft - dx;
         });
+        // The tiles are links, which the browser drags natively (cancelling our drag).
+        wrap.addEventListener('dragstart', function (e) { e.preventDefault(); });
         function endDrag(e) {
             if (!dragging) return;
             dragging = false;

site/includes/contactos.php

@@ -24,8 +24,10 @@ $session          = session();
         </div>
         <?php endif; ?>
         <div class="row">
-            <div class="col-lg-4">
+            <div class="col-lg-6">
                 <h2 id="contactos-title" class="contact-title text-center text-md-left">Informações</h2>
+                <div class="row">
+                <div class="col-sm-6">
                 <div class="contact-info-warp text-center text-md-left">
                     <h3>Localização</h3>
                     <div class="contact-info">
@@ -58,10 +60,12 @@ $session          = session();
                         </a>
                     </div>
                 </div>
+                </div>
                 <?php if ($whours): ?>
-                <div class="contact-info-warp text-center">
+                <div class="col-sm-6">
+                <div class="contact-info-warp text-center text-md-left">
                     <h3>Horário de Funcionamento</h3>
-                    <div class="contact-info wh-text text-center">
+                    <div class="contact-info wh-text text-center text-md-left">
                         <?php foreach ($work_hours_days as $key => $value):
                             $ranges = [];
                             foreach ($whours as $h) {
@@ -78,41 +82,27 @@ $session          = session();
                         <?php endforeach; ?>
                     </div>
                 </div>
+                </div>
                 <?php endif; ?>
+                </div>
             </div>
-            <div class="col-lg-8">
+            <div class="col-lg-6">
                 <div id="contact-form">
-                    <h3 class="contact-title text-center text-md-left">Envia-nos uma mensagem</h3>
+                    <?php /* Formulário da app FitMe (app.fitme3070.pt), em iframe; a altura acompanha o conteúdo via postMessage. */ ?>
-                    <?php if (isset($_GET['enviado'])): ?>
+                    <div id="fitme-form-site-contacto-wrap"></div>
-                    <div class="alert alert-success" role="alert">
+                    <script>
-                        Mensagem enviada com sucesso! Entraremos em contacto brevemente.
+                    (function () {
-                    </div>
+                      var p = new URLSearchParams(location.search), q = new URLSearchParams({ embed: "1", page: location.href });
-                    <?php endif; ?>
+                      ["utm_source","utm_medium","utm_campaign","utm_content","utm_term"].forEach(function (k) { if (p.get(k)) q.set(k, p.get(k)); });
-                    <form class="contact-form" method="post" action="https://forms.zohopublic.eu/fitme30701/form/FormulriodeContacto/formperma/NiwsTjwWGX2sgpZIXqE5otyAn8D5nuRQjpYDuGkS2wM/htmlRecords/submit">
+                      var f = document.createElement("iframe");
-                        <input type="hidden" name="zf_redirect_url" value="<?= base_url('?enviado=1#contact-form') ?>">
+                      f.src = "https://app.fitme3070.pt/f/site-contacto?" + q.toString(); f.id = "fitme-form-site-contacto"; f.title = "Envia-nos uma Mensagem";
-                        <div class="row">
+                      f.style.cssText = "width:100%;max-width:480px;border:0;"; f.height = "640"; f.loading = "lazy";
-                            <div class="col-md-6">
+                      document.getElementById("fitme-form-site-contacto-wrap").appendChild(f);
-                                <input type="text" required name="SingleLine" placeholder="Nome" aria-label="Nome">
+                      window.addEventListener("message", function (e) {
-                            </div>
+                        if (e.origin === "https://app.fitme3070.pt" && e.data && e.data.type === "fitme-form-height" && e.data.slug === "site-contacto") f.style.height = e.data.height + "px";
-                            <div class="col-md-6">
+                      });
-                                <input type="text" required name="PhoneNumber_countrycode" placeholder="Telemóvel" aria-label="Telemóvel">
+                    })();
-                            </div>
+                    </script>
-                        </div>
-                        <input type="text" name="SingleLine1" placeholder="Razão" required value="<?= htmlspecialchars($assunto) ?>" aria-label="Razão do contacto">
-                        <textarea name="MultiLine" placeholder="Mensagem" required aria-label="Mensagem"></textarea>
-                        <?php if ($session->getFlashdata('email') !== null): ?>
-                        <div class="alert alert-success alert-dismissible fade show" role="alert">
-                            <?= $session->getFlashdata('email') ?>
-                            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
-                        </div>
-                        <?php endif; ?>
-                        <label class="consent-check">
-                            <?php /* no name attribute: gates submission client-side, not stored in Zoho */ ?>
-                            <input type="checkbox" required>
-                            <span>Li e aceito a <a href="<?= base_url('home/privacidade') ?>" target="_blank" rel="noopener">Política de Privacidade</a>.</span>
-                        </label>
-                        <button class="site-btn" id="btn_email" type="submit">Enviar Mensagem</button>
-                    </form>
                 </div>
             </div>
         </div>