From e5f4fd8fc9a3183c6edc5418d641289f360bd3ba Mon Sep 17 00:00:00 2001
From: andre <andre.filipe6@gmail.com>
Date: Tue, 13 Oct 2026 18:55:26 +0100
Subject: [PATCH] feat(dev): style lab page with sliders for the visual effects
 (dev only)

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
---
 lab.php | 203 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 203 insertions(+)
 create mode 100644 lab.php

diff --git a/lab.php b/lab.php
new file mode 100644
index 0000000..c3019dd
--- /dev/null
+++ b/lab.php
@@ -0,0 +1,203 @@
+<?php
+/**
+ * Style lab (DEV ONLY): the public site's components on one page, with sliders
+ * for the visual effects added to style.css, so values can be tuned by eye and
+ * then copied back into the CSS. Nothing here is saved; reload resets it.
+ * Refuses to run when APP_ENV is prod.
+ */
+require __DIR__ . '/config/db.php';
+require __DIR__ . '/config/functions.php';
+
+$env = strtolower((string) (function_exists('env') ? env('APP_ENV', 'prod') : 'prod'));
+if ($env === 'prod' || $env === 'production') { http_response_code(404); exit; }
+
+$gyms = function_exists('db_gyms_published') ? db_gyms_published($pdo) : [];
+$img_team = base_url('uploads/team/foto/1.jpg');
+$img_gal  = [base_url('site/assets/img/home.jpg'), base_url('site/assets/img/crossfit.jpg'), base_url('site/assets/img/footer-bg-gym.jpg')];
+?><!doctype html>
+<html lang="pt">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<meta name="robots" content="noindex, nofollow">
+<title>Laboratório de estilo — FitMe</title>
+<?= link_tag('assets/vendor/bootstrap5/css/bootstrap.min.css') ?>
+<?= link_tag('site/assets/fonts/fontawesome/css/all.css') ?>
+<?= link_tag('site/assets/css/style.css') ?>
+<style id="lab-overrides"></style>
+<style>
+  body { padding-bottom: 40px; }
+  .lab-panel { position: fixed; top: 12px; right: 12px; z-index: 2000; width: 300px; max-height: calc(100vh - 24px); overflow: auto;
+              background: rgba(11,11,13,.94); color: #fff; padding: 14px 16px; border-radius: 8px; box-shadow: 0 8px 30px rgba(0,0,0,.5); font-size: .85rem; }
+  .lab-panel h2 { font-size: 1rem; margin: 0 0 10px; color: var(--fitme-accent, #C2D500); filter: none; }
+  .lab-panel label { display: flex; justify-content: space-between; gap: 8px; margin: 10px 0 2px; }
+  .lab-panel output { color: var(--fitme-accent, #C2D500); font-variant-numeric: tabular-nums; }
+  .lab-panel input[type=range] { width: 100%; accent-color: var(--fitme-accent, #C2D500); }
+  .lab-panel input[type=color] { width: 100%; height: 34px; border: 0; background: none; padding: 0; }
+  .lab-panel button.reset { margin-top: 12px; width: 100%; border: 1px solid #555; background: none; color: #fff; padding: 6px; border-radius: 4px; }
+  .lab-panel .hint { color: #aaa; font-size: .75rem; margin-top: 10px; }
+  .lab-sec { padding: 56px 0; }
+  .lab-sec.dark { background: var(--fitme-dark-2); color: #fff; }
+  .lab-sec.dark h1, .lab-sec.dark h2 { color: #fff; }
+  .lab-row { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; margin: 18px 0; }
+  .lab-label { font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; opacity: .6; margin: 26px 0 6px; }
+  .lab-gal { display: flex; gap: 12px; }
+  .lab-gal .gal-tile { width: 220px; height: 150px; }
+  .lab-card-wrap { max-width: 270px; }
+  @media (max-width: 991px) { .lab-panel { position: static; width: auto; max-height: none; margin: 12px; } }
+</style>
+</head>
+<body>
+<?php include __DIR__ . '/includes/env_ribbon.php'; ?>
+<svg width="0" height="0" style="position:absolute" aria-hidden="true" focusable="false">
+  <filter id="pt-noise" x="0" y="0" width="100%" height="100%" color-interpolation-filters="sRGB">
+    <feTurbulence type="fractalNoise" baseFrequency=".9" numOctaves="2" seed="4" result="n"/>
+    <feColorMatrix in="n" type="saturate" values="0" result="g"/>
+    <feComponentTransfer in="g" result="grain">
+      <feFuncR id="lab-fr" type="linear" slope=".15" intercept=".86"/>
+      <feFuncG id="lab-fg" type="linear" slope=".15" intercept=".86"/>
+      <feFuncB id="lab-fb" type="linear" slope=".15" intercept=".86"/>
+      <feFuncA type="linear" slope="0" intercept="1"/>
+    </feComponentTransfer>
+    <feBlend in="SourceGraphic" in2="grain" mode="multiply" result="mix"/>
+    <feComposite in="mix" in2="SourceGraphic" operator="in"/>
+  </filter>
+</svg>
+
+<aside class="lab-panel" aria-label="Controlos">
+  <h2>Laboratório de estilo</h2>
+
+  <label for="c-color">Cor da marca <output id="o-color">#C2D500</output></label>
+  <input type="color" id="c-color" value="#c2d500">
+
+  <label for="c-btn">Grão nos botões <output id="o-btn"></output></label>
+  <input type="range" id="c-btn" min="0" max="50" value="16">
+
+  <label for="c-head">Grão nos títulos (h1/h2) <output id="o-head"></output></label>
+  <input type="range" id="c-head" min="0" max="100" value="25">
+
+  <label for="c-sat">Saturação das fotos <output id="o-sat"></output></label>
+  <input type="range" id="c-sat" min="40" max="100" value="90">
+
+  <label for="c-glow">Brilho dos links (hover) <output id="o-glow"></output></label>
+  <input type="range" id="c-glow" min="0" max="100" value="60">
+
+  <label for="c-spin">Volta da aresta rotativa <output id="o-spin"></output></label>
+  <input type="range" id="c-spin" min="10" max="100" value="32">
+
+  <label for="c-ring">Espessura da aresta (px) <output id="o-ring"></output></label>
+  <input type="range" id="c-ring" min="1" max="6" value="2">
+
+  <button type="button" class="reset" id="c-reset">Repor valores</button>
+  <p class="hint">Passa o rato pelos botões, links, fotos, moldura e cartão para ver os efeitos. Os valores não são guardados.</p>
+</aside>
+
+<section class="lab-sec dark">
+  <div class="container">
+    <h1>Ginásio, Box, Aulas <span style="color:var(--fitme-accent)">&amp; Acompanhamento</span></h1>
+    <div class="lab-row">
+      <a href="#" class="site-btn">Inscreve-te já!</a>
+      <a href="#" class="site-btn sb-ghost">Ghost</a>
+      <a href="#" class="site-btn sb-dark">Dark</a>
+      <a href="#" class="site-btn sb-line" style="color:#fff;border-color:#fff">Line</a>
+      <button type="button" class="hero-text-link">Marca uma aula experimental</button>
+    </div>
+    <p>Um <a href="#">link no texto</a> sobre fundo escuro.</p>
+  </div>
+</section>
+
+<section class="lab-sec">
+  <div class="container">
+    <div class="section-title text-center deco">
+      <span class="section-eyebrow">Secção</span>
+      <h2>Título de secção (h2)</h2>
+      <p class="section-subtitle">Subtítulo de exemplo para ver o grão no h2 sobre fundo claro.</p>
+    </div>
+
+    <div class="lab-label">Botões e links</div>
+    <div class="lab-row">
+      <a href="#" class="site-btn">Botão principal</a>
+      <a href="#" class="nav-link crossfit-nav-link" style="display:inline-block;margin:0 !important">CrossFit</a>
+      <a href="#" class="gym-switch-btn">FitMe Mira</a>
+      <?php foreach (array_slice($gyms, 0, 2) as $g): ?><a href="#" class="gym-switch-btn" style="<?= htmlspecialchars(gym_brand_vars($g)) ?>"><?= htmlspecialchars($g['name']) ?></a><?php endforeach; ?>
+    </div>
+    <p>Texto corrido com um <a href="#">link normal</a> e outro <a href="#">link mais comprido para testar</a>.</p>
+
+    <div class="lab-label">Galeria (fotos)</div>
+    <div class="lab-gal">
+      <?php foreach ($img_gal as $i => $src): ?>
+      <div class="gal-tile"><a href="#" class="gal-link"><img src="<?= htmlspecialchars($src) ?>" alt="" draggable="false"></a></div>
+      <?php endforeach; ?>
+    </div>
+
+    <div class="lab-label">Equipa (moldura)</div>
+    <div class="trainer-item" style="display:inline-block">
+      <div class="trainer-pic"><img src="<?= htmlspecialchars($img_team) ?>" alt=""></div>
+      <h3 style="color:inherit">Nome do membro</h3>
+    </div>
+
+    <div class="lab-label">Modalidades (ícone)</div>
+    <div class="row" style="max-width:520px">
+      <div class="col-6"><div class="icon-box-item"><div class="ib-icon"><i class="fas fa-dumbbell"></i></div><h3>Musculação</h3></div></div>
+      <div class="col-6"><div class="icon-box-item"><div class="ib-icon"><i class="fas fa-bicycle"></i></div><h3>Cycling</h3></div></div>
+    </div>
+
+    <div class="lab-label">Mensalidades (cartão)</div>
+    <div class="lab-card-wrap">
+      <div class="price-card"><h3>Plano exemplo</h3><p>Passa o rato por cima.</p><a href="#" class="site-btn">Inscrever</a></div>
+    </div>
+  </div>
+</section>
+
+<script>
+(function () {
+  var root = document.documentElement, ov = document.getElementById('lab-overrides');
+  var $ = function (id) { return document.getElementById(id); };
+  var DEF = { color: '#c2d500', btn: 16, head: 25, sat: 90, glow: 60, spin: 32, ring: 2 };
+  var st = Object.assign({}, DEF);
+
+  function noiseUrl(op) {
+    return "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='" + op + "'/%3E%3C/svg%3E\")";
+  }
+  function brandVars(hex) {
+    var r = parseInt(hex.slice(1, 3), 16), g = parseInt(hex.slice(3, 5), 16), b = parseInt(hex.slice(5, 7), 16);
+    var sh = function (k) { return '#' + [r, g, b].map(function (v) { return ('0' + Math.round(v * k).toString(16)).slice(-2); }).join('').toUpperCase(); };
+    var lum = (0.2126 * r + 0.7152 * g + 0.0722 * b) / 255;
+    return { '--fitme-accent': hex.toUpperCase(), '--fitme-accent-rgb': r + ', ' + g + ', ' + b, '--fitme-accent-dark': sh(.86),
+             '--fitme-accent-ink': sh(lum > .5 ? .5 : .85), '--fitme-on-accent': lum > .5 ? '#0B0B0D' : '#FFFFFF' };
+  }
+  function apply() {
+    var v = brandVars(st.color);
+    Object.keys(v).forEach(function (k) { root.style.setProperty(k, v[k]); });
+    root.style.setProperty('--noise', noiseUrl((st.btn / 100).toFixed(3)));
+    var s = st.head / 100, slope = (s * .6).toFixed(3), icpt = (1 - s * .6).toFixed(3);
+    ['lab-fr', 'lab-fg', 'lab-fb'].forEach(function (id) { $(id).setAttribute('slope', slope); $(id).setAttribute('intercept', icpt); });
+    var glow = st.glow / 100, spin = (st.spin / 10).toFixed(1) + 's';
+    ov.textContent =
+      '.gal-link img, .trainer-item .trainer-pic img { filter: saturate(' + (st.sat / 100) + '); }' +
+      '.gal-link:hover img, .trainer-item .trainer-pic:hover img { filter: saturate(1) brightness(1.05); }' +
+      'a:where(:not(.site-btn,.gym-switch-btn,.gal-link,.nav-link)):is(:hover,:focus-visible) { text-shadow: 0 0 10px rgba(var(--fitme-accent-rgb),' + (.6 * glow * 1.67).toFixed(2) + '), 0 0 22px rgba(var(--fitme-accent-rgb),' + (.3 * glow * 1.67).toFixed(2) + ') !important; }' +
+      '.site-btn::before,.site-btn::after,.gym-switch-btn::before,.gym-switch-btn::after,.price-card::before,.price-card::after,.gal-link::after,.icon-box-item .ib-icon::after,.trainer-item .trainer-pic:hover { animation-duration: ' + spin + ' !important; }' +
+      '.site-btn,.gym-switch-btn { --ring: ' + st.ring + 'px; }';
+    $('o-color').textContent = st.color.toUpperCase();
+    $('o-btn').textContent = st.btn + '%';
+    $('o-head').textContent = st.head + '%';
+    $('o-sat').textContent = st.sat + '%';
+    $('o-glow').textContent = st.glow + '%';
+    $('o-spin').textContent = spin;
+    $('o-ring').textContent = st.ring;
+  }
+  var map = { 'c-color': 'color', 'c-btn': 'btn', 'c-head': 'head', 'c-sat': 'sat', 'c-glow': 'glow', 'c-spin': 'spin', 'c-ring': 'ring' };
+  Object.keys(map).forEach(function (id) {
+    $(id).addEventListener('input', function () { st[map[id]] = id === 'c-color' ? this.value : +this.value; apply(); });
+  });
+  $('c-reset').addEventListener('click', function () {
+    st = Object.assign({}, DEF);
+    Object.keys(map).forEach(function (id) { $(id).value = DEF[map[id]]; });
+    apply();
+  });
+  apply();
+})();
+</script>
+</body>
+</html>