PackIt/index.php

<?php
// index.php – Activity selection page
require_once __DIR__ . '/db.php';

$pdo = get_pdo();

// Fetch all groups with their activities
$sql = "
    SELECT
        ag.groupID,
        ag.groupName   AS groupName,
        ag.sortOrder   AS groupSort,
        a.activityID,
        a.activityName,
        a.sortOrder    AS actSort,
        a.hidden
    FROM activity_groups ag
    JOIN activities a ON a.groupID = ag.groupID
    ORDER BY ag.sortOrder, ag.groupID, a.sortOrder, a.activityID
";
$rows = $pdo->query($sql)->fetchAll();

// Group by category. Hidden activities are easter eggs: they are rendered into
// a section that stays hidden until the page script reveals it.
$byVisibility = ['visible' => [], 'secret' => []];
foreach ($rows as $row) {
    $gid = $row['groupID'];
    $vis = $row['hidden'] ? 'secret' : 'visible';
    if (!isset($byVisibility[$vis][$gid])) {
        $byVisibility[$vis][$gid] = ['name' => $row['groupName'], 'activities' => []];
    }
    $byVisibility[$vis][$gid]['activities'][] = [
        'id'   => $row['activityID'],
        'name' => $row['activityName'],
    ];
}
$groups       = $byVisibility['visible'];
$secretGroups = $byVisibility['secret'];

function render_activity_group(array $group): void { ?>
    <div class="activity-group">
      <div class="section-title"><?= htmlspecialchars($group['name']) ?></div>
      <div class="activity-grid">
        <?php foreach ($group['activities'] as $act): ?>
        <div class="activity-card">
          <input type="checkbox" name="aID[]"
                 id="act_<?= $act['id'] ?>"
                 value="<?= (int)$act['id'] ?>"
                 onchange="updateCount()">
          <label for="act_<?= $act['id'] ?>">
            <span class="check-icon">
              <svg width="10" height="8" viewBox="0 0 10 8" fill="none">
                <path d="M1 4l3 3 5-6" stroke="#0f1117" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
            </span>
            <?= htmlspecialchars($act['name']) ?>
          </label>
        </div>
        <?php endforeach; ?>
      </div>
    </div>
<?php }
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PackIt – Choose Your Activities</title>
<link rel="manifest" href="/manifest.webmanifest">
<meta name="theme-color" content="#e8c547">
<link rel="icon" type="image/png" sizes="192x192" href="/img/icon-192.png">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Sans:wght@300;400;500;600&display=swap" rel="stylesheet">
<style>
  :root {
    --bg:       #0f1117;
    --surface:  #181c27;
    --border:   #2a2f3f;
    --accent:   #e8c547;
    --accent2:  #4fd1c5;
    --text:     #e8eaf0;
    --muted:    #7a8099;
    --danger:   #e05555;
    --radius:   10px;
    --gap:      1.5rem;
  }

  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

  body {
    background: var(--bg);
    color: var(--text);
    font-family: 'DM Sans', sans-serif;
    font-size: 15px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
  }

  /* ---------- header ---------- */
  header {
    padding: 2.5rem var(--gap) 1.5rem;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: flex-end;
    gap: 1rem;
    position: relative;
    overflow: hidden;
  }
  header::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 60% 80% at 10% 50%, rgba(232,197,71,.08) 0%, transparent 70%);
    pointer-events: none;
  }
  .logo {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(2.8rem, 6vw, 4.5rem);
    letter-spacing: .04em;
    color: var(--accent);
    line-height: 1;
    position: relative;
  }
  .tagline {
    font-size: .85rem;
    color: var(--muted);
    letter-spacing: .08em;
    text-transform: uppercase;
    padding-bottom: .25rem;
    position: relative;
  }

  /* ---------- main layout ---------- */
  main {
    flex: 1;
    max-width: 760px;
    width: 100%;
    margin: 0 auto;
    padding: 2.5rem var(--gap) 6rem;
  }

  .section-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.15rem;
    letter-spacing: .12em;
    color: var(--accent2);
    text-transform: uppercase;
    margin-bottom: .75rem;
    display: flex;
    align-items: center;
    gap: .6rem;
  }
  .section-title::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
  }

  .activity-group {
    margin-bottom: 2rem;
  }

  .activity-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: .6rem;
  }

  /* Custom checkbox card */
  .activity-card {
    position: relative;
  }
  .activity-card input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0; height: 0;
  }
  .activity-card label {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .7rem 1rem;
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
    transition: border-color .15s, background .15s, transform .1s;
    user-select: none;
  }
  .check-icon {
    width: 18px; height: 18px;
    border: 1.5px solid var(--border);
    border-radius: 5px;
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    transition: background .15s, border-color .15s;
    background: var(--bg);
  }
  .check-icon svg { display: none; }

  .activity-card input:checked + label {
    border-color: var(--accent);
    background: rgba(232,197,71,.07);
  }
  .activity-card input:checked + label .check-icon {
    background: var(--accent);
    border-color: var(--accent);
  }
  .activity-card input:checked + label .check-icon svg { display: block; }
  .activity-card input:checked + label { transform: scale(1.01); }

  /* ---------- sticky footer bar ---------- */
  .action-bar {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: rgba(15,17,23,.92);
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--border);
    padding: 1rem var(--gap);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    z-index: 100;
  }
  .selection-count {
    font-size: .85rem;
    color: var(--muted);
  }
  .selection-count strong {
    color: var(--accent);
    font-variant-numeric: tabular-nums;
  }

  .btn-primary {
    background: var(--accent);
    color: #0f1117;
    font-family: 'DM Sans', sans-serif;
    font-weight: 600;
    font-size: .95rem;
    letter-spacing: .03em;
    padding: .7rem 1.8rem;
    border: none;
    border-radius: var(--radius);
    cursor: pointer;
    transition: background .15s, transform .1s, opacity .15s;
    touch-action: manipulation;   /* rapid taps must not turn into double-tap zoom */
  }
  .btn-primary:hover { background: #f0d260; transform: translateY(-1px); }
  .btn-primary:active { transform: translateY(0); }
  .btn-primary[aria-disabled="true"] { opacity: .35; cursor: not-allowed; transform: none; }
  .btn-primary.nope { animation: nope .3s; }
  @keyframes nope {
    20%, 60% { transform: translateX(-4px); }
    40%, 80% { transform: translateX(4px); }
  }

  /* Easter egg: hidden activities flicker in like a failing fluorescent tube. */
  .secret-activities .section-title { color: var(--danger); }
  .secret-activities .activity-card input:checked + label {
    border-color: var(--danger);
    background: rgba(224,85,85,.08);
  }
  .secret-activities .activity-card input:checked + label .check-icon {
    background: var(--danger);
    border-color: var(--danger);
  }
  .secret-activities.revealing { animation: flicker 1.2s linear; }
  @keyframes flicker {
    0%, 12%, 22%, 48% { opacity: 0; }
    10%, 20%, 45%, 100% { opacity: 1; }
  }
  @media (prefers-reduced-motion: reduce) {
    .btn-primary.nope, .secret-activities.revealing { animation: none; }
  }

  /* select-all row */
  .controls {
    display: flex;
    gap: .75rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
  }
  .btn-ghost {
    background: transparent;
    color: var(--muted);
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    padding: .45rem 1rem;
    font-family: 'DM Sans', sans-serif;
    font-size: .8rem;
    font-weight: 500;
    letter-spacing: .04em;
    text-transform: uppercase;
    cursor: pointer;
    transition: color .15s, border-color .15s;
  }
  .btn-ghost:hover { color: var(--text); border-color: var(--muted); }

  footer {
    text-align: center;
    padding: 1rem;
    font-size: .75rem;
    color: var(--border);
  }
  footer a { color: var(--muted); text-decoration: none; }
  footer a:hover { color: var(--text); }
</style>
</head>
<body>

<header>
  <div class="logo">PackIt</div>
  <div class="tagline">Your smart packing companion</div>
</header>

<main>
  <div class="controls">
    <button class="btn-ghost" type="button" onclick="toggleAll(true)">Select all</button>
    <button class="btn-ghost" type="button" onclick="toggleAll(false)">Clear all</button>
  </div>

  <form id="actForm" action="list.php" method="GET">
    <?php foreach ($groups as $group) render_activity_group($group); ?>

    <?php if ($secretGroups): ?>
    <div id="secretActivities" class="secret-activities" hidden>
      <?php foreach ($secretGroups as $group) render_activity_group($group); ?>
    </div>
    <?php endif; ?>
  </form>
</main>

<div class="action-bar">
  <div class="selection-count"><strong id="cnt">0</strong> activities selected</div>
  <!-- aria-disabled rather than disabled: a disabled button swallows clicks,
       and the clicks on an empty selection are what reveal the easter egg. -->
  <button class="btn-primary" id="packBtn" type="button" aria-disabled="true"
          onclick="packIt()">
    Pack it! →
  </button>
</div>

<footer><a href="admin/">Admin</a></footer>

<script>
function selectedCount() {
  return document.querySelectorAll('input[name="aID[]"]:checked').length;
}
function updateCount() {
  const n = selectedCount();
  document.getElementById('cnt').textContent = n;
  document.getElementById('packBtn').setAttribute('aria-disabled', n === 0 ? 'true' : 'false');
}
function toggleAll(on) {
  // Secret activities stay out of "Select all" until they have been found.
  document.querySelectorAll('input[name="aID[]"]').forEach(cb => {
    if (!cb.closest('[hidden]')) cb.checked = on;
  });
  updateCount();
}

// Easter egg: hammering the button with nothing selected reveals the hidden
// activities. Each click must follow the previous one within EGG_MAX_GAP_MS.
const EGG_CLICKS     = 10;
const EGG_MAX_GAP_MS = 500;
let eggClicks = 0;
let eggLastClick = 0;

function packIt() {
  if (selectedCount() > 0) {
    document.getElementById('actForm').submit();
    return;
  }

  const btn = document.getElementById('packBtn');
  btn.classList.remove('nope');
  void btn.offsetWidth;            // restart the shake on every click
  btn.classList.add('nope');

  const now = Date.now();
  eggClicks = now - eggLastClick <= EGG_MAX_GAP_MS ? eggClicks + 1 : 1;
  eggLastClick = now;
  if (eggClicks >= EGG_CLICKS) {
    eggClicks = 0;
    revealSecrets(true);
  }
}

function revealSecrets(select) {
  const secret = document.getElementById('secretActivities');
  if (!secret || !secret.hidden) return;
  secret.hidden = false;
  if (select) {
    secret.querySelectorAll('input[name="aID[]"]').forEach(cb => cb.checked = true);
    secret.classList.add('revealing');
    secret.addEventListener('animationend', () => secret.classList.remove('revealing'), { once: true });
    secret.scrollIntoView({ behavior: 'smooth', block: 'center' });
  }
  updateCount();
}

// Back/forward navigation restores ticked checkboxes, including a secret one
// that would otherwise be ticked but invisible.
window.addEventListener('pageshow', () => {
  if (document.querySelector('#secretActivities input:checked')) revealSecrets(false);
  updateCount();
});

// Offline support: installs the worker that keeps visited lists readable
// without signal.
if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => navigator.serviceWorker.register('/sw.js').catch(() => {}));
}
</script>
</body>
</html>