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
    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
$groups = [];
foreach ($rows as $row) {
    $gid = $row['groupID'];
    if (!isset($groups[$gid])) {
        $groups[$gid] = ['name' => $row['groupName'], 'activities' => []];
    }
    $groups[$gid]['activities'][] = [
        'id'   => $row['activityID'],
        'name' => $row['activityName'],
    ];
}
?>
<!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;
  }
  .btn-primary:hover { background: #f0d260; transform: translateY(-1px); }
  .btn-primary:active { transform: translateY(0); }
  .btn-primary:disabled { opacity: .35; cursor: not-allowed; transform: 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 $gid => $group): ?>
    <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 endforeach; ?>
  </form>
</main>

<div class="action-bar">
  <div class="selection-count"><strong id="cnt">0</strong> activities selected</div>
  <button class="btn-primary" id="packBtn" disabled
          onclick="document.getElementById('actForm').submit()">
    Pack it! →
  </button>
</div>

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

<script>
function updateCount() {
  const n = document.querySelectorAll('input[name="aID[]"]:checked').length;
  document.getElementById('cnt').textContent = n;
  document.getElementById('packBtn').disabled = n === 0;
}
function toggleAll(on) {
  document.querySelectorAll('input[name="aID[]"]').forEach(cb => cb.checked = on);
  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>