sebastian
/
PackIt


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578
							<?php
// packing.php – displays the packing list for a given hash
require_once __DIR__ . '/db.php';

$pdo = get_pdo();

// 5 characters normally; list.php lengthens a link only when a shorter one
// would collide with a different selection.
$hash = isset($_GET['h']) ? trim($_GET['h']) : '';
if (!preg_match('/^[a-f0-9]{5,16}$/', $hash)) {
    http_response_code(400);
    die('<p>Invalid or missing list hash.</p>');
}

// Resolve hash → activity IDs
$stmt = $pdo->prepare("SELECT activity_ids FROM selection_hashes WHERE hash = ?");
$stmt->execute([$hash]);
$row = $stmt->fetch();
if (!$row) {
    http_response_code(404);
    die('<p>List not found. It may have expired or the link is wrong.</p>');
}

$activityIds = array_map('intval', explode(',', $row['activity_ids']));
if (empty($activityIds)) {
    die('<p>No activities stored for this hash.</p>');
}

// Fetch the selected activity names for display
$ph = implode(',', array_fill(0, count($activityIds), '?'));
$stmt = $pdo->prepare("
    SELECT a.activityName
    FROM activities a
    WHERE a.activityID IN ($ph)
    ORDER BY a.activityName
");
$stmt->execute($activityIds);
$activityNames = $stmt->fetchAll(PDO::FETCH_COLUMN);

// Get all items for these activities, deduplicated, grouped by item_group.
// When the same item is mapped to multiple selected activities with different
// quantities, take the MAX so we reflect the highest need across activities.
$stmt = $pdo->prepare("
    SELECT
        ig.groupID,
        ig.groupName,
        ig.sortOrder  AS groupSort,
        i.itemID,
        i.itemName,
        i.sortOrder   AS itemSort,
        MAX(aim.quantity) AS quantity
    FROM activity_item_map aim
    JOIN items i          ON i.itemID   = aim.itemID
    JOIN item_groups ig   ON ig.groupID = i.groupID
    WHERE aim.activityID IN ($ph)
    GROUP BY ig.groupID, ig.groupName, ig.sortOrder,
             i.itemID, i.itemName, i.sortOrder
    ORDER BY ig.sortOrder, ig.groupID, i.sortOrder, i.itemID
");
$stmt->execute($activityIds);
$allItems = $stmt->fetchAll();

// Group items by item_group
$grouped = [];
foreach ($allItems as $item) {
    $gid = $item['groupID'];
    if (!isset($grouped[$gid])) {
        $grouped[$gid] = ['name' => $item['groupName'], 'items' => []];
    }
    $grouped[$gid]['items'][] = [
        'id'       => $item['itemID'],
        'name'     => $item['itemName'],
        'quantity' => (int)$item['quantity'],
    ];
}

$pageUrl = (isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] === 'on' ? 'https' : 'http')
           . '://' . $_SERVER['HTTP_HOST']
           . $_SERVER['REQUEST_URI'];
$totalItems = count($allItems);
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PackIt – Your Packing List</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;
    --green:    #5cb85c;
    --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 {
    padding: 2rem var(--gap) 1.5rem;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    position: relative;
    overflow: hidden;
  }
  header::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 60% 80% at 90% 50%, rgba(79,209,197,.06) 0%, transparent 70%);
    pointer-events: none;
  }
  .header-left { display: flex; align-items: flex-end; gap: 1rem; position: relative; }
  .logo {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(2.2rem, 5vw, 3.5rem);
    letter-spacing: .04em;
    color: var(--accent);
    line-height: 1;
  }
  .header-meta {
    font-size: .8rem;
    color: var(--muted);
    padding-bottom: .2rem;
  }
  .header-meta strong { color: var(--accent2); }

  .btn-row {
    display: flex;
    gap: .6rem;
    flex-wrap: wrap;
    position: relative;
  }
  .btn {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .55rem 1.1rem;
    border-radius: var(--radius);
    font-family: 'DM Sans', sans-serif;
    font-size: .82rem;
    font-weight: 500;
    letter-spacing: .03em;
    cursor: pointer;
    border: 1.5px solid transparent;
    transition: all .15s;
    text-decoration: none;
  }
  .btn-accent {
    background: var(--accent); color: #0f1117; border-color: var(--accent);
  }
  .btn-accent:hover { background: #f0d260; }
  .btn-outline {
    background: transparent; color: var(--text); border-color: var(--border);
  }
  .btn-outline:hover { border-color: var(--muted); }
  .btn-teal {
    background: transparent; color: var(--accent2); border-color: var(--accent2);
  }
  .btn-teal:hover { background: rgba(79,209,197,.08); }

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

  /* Activities pills */
  .activity-pills {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-bottom: 2.5rem;
  }
  .pill {
    background: rgba(232,197,71,.1);
    border: 1px solid rgba(232,197,71,.3);
    color: var(--accent);
    font-size: .75rem;
    font-weight: 500;
    padding: .3rem .75rem;
    border-radius: 999px;
    letter-spacing: .03em;
  }

  /* Progress bar */
  .progress-bar-wrap {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem 1.25rem;
    margin-bottom: 2.5rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem 1.5rem;
  }
  .progress-nag {
    flex-basis: 100%;
    font-size: .82rem;
    font-style: italic;
    color: var(--muted);
  }
  .progress-nag:empty { display: none; }
  .progress-track {
    flex: 1;
    height: 6px;
    background: var(--border);
    border-radius: 999px;
    overflow: hidden;
  }
  .progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent2), var(--accent));
    border-radius: 999px;
    width: 0%;
    transition: width .3s ease;
  }
  .progress-label {
    font-size: .82rem;
    color: var(--muted);
    white-space: nowrap;
  }
  .progress-label strong { color: var(--accent); font-variant-numeric: tabular-nums; }

  .section-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.1rem;
    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);
  }

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

  .item-list {
    display: flex;
    flex-direction: column;
    gap: .4rem;
  }

  .item-row {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .6rem 1rem;
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
    transition: border-color .15s, background .15s;
    user-select: none;
  }
  .item-row:hover { background: #1e2333; }
  .item-row.checked {
    border-color: rgba(92,184,92,.5);
    background: rgba(92,184,92,.05);
  }
  .item-row.checked .item-name {
    text-decoration: line-through;
    color: var(--muted);
  }
  .item-check {
    width: 20px; height: 20px;
    border: 1.5px solid var(--border);
    border-radius: 5px;
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: var(--bg);
    color: #fff;
    transition: all .15s;
  }
  .item-row.checked .item-check {
    background: var(--green);
    border-color: var(--green);
  }
  .item-check svg { display: none; }
  .item-row.checked .item-check svg { display: block; }
  .item-name { flex: 1; font-size: .95rem; }

  /* Share box */
  .share-box {
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem 1.5rem;
    margin-bottom: 2.5rem;
    display: flex;
    gap: .75rem;
    align-items: center;
    flex-wrap: wrap;
  }
  .share-url {
    flex: 1;
    font-size: .8rem;
    color: var(--muted);
    font-family: monospace;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
  }
  .copy-feedback {
    font-size: .8rem;
    color: var(--green);
    opacity: 0;
    transition: opacity .3s;
  }
  .copy-feedback.show { opacity: 1; }

  @media print {
    header .btn-row, .share-box, .progress-bar-wrap { display: none !important; }
    body { background: #fff; color: #000; }
    .item-row { border-color: #ccc; background: none; break-inside: avoid; }
    .section-title { color: #333; }
    .pill { background: #f5f5f5; color: #333; border-color: #ccc; }
    /* The tick boxes carry the dark screen background. Browsers that print
       background graphics (Safari, and any dialog with "Background graphics"
       ticked – common when saving as PDF) then render them as solid black
       rectangles, leaving nothing to cross by hand. Keep them blank on paper. */
    .item-check,
    .item-row.checked .item-check {
      background: #fff;
      border-color: #555;
      color: #000;
    }
    /* Checked items also need to survive without background colours. */
    .item-row.checked { background: none; border-color: #ccc; }
    .item-row.checked .item-name { color: #000; }
  }
</style>
</head>
<body>

<header>
  <div class="header-left">
    <div class="logo">PackIt</div>
    <div class="header-meta">
      <strong><?= $totalItems ?></strong> items &nbsp;·&nbsp;
      <strong><?= count($activityNames) ?></strong> activities
    </div>
  </div>
  <div class="btn-row">
    <a href="index.php" class="btn btn-outline">← New list</a>
    <button class="btn btn-outline" id="resetBtn" onclick="resetList()" hidden>↺ Reset</button>
    <button class="btn btn-teal" onclick="window.print()">🖨 Print</button>
    <button class="btn btn-accent" onclick="copyLink()">🔗 Copy link</button>
  </div>
</header>

<main>
  <!-- Activity pills -->
  <div class="activity-pills">
    <?php foreach ($activityNames as $n): ?>
    <span class="pill"><?= htmlspecialchars($n) ?></span>
    <?php endforeach; ?>
  </div>

  <!-- Share box -->
  <div class="share-box">
    <span class="share-url" id="shareUrl"><?= htmlspecialchars($pageUrl) ?></span>
    <span class="copy-feedback" id="copyFb">Copied!</span>
    <button class="btn btn-teal" onclick="copyLink()">Copy link</button>
  </div>

  <!-- Progress -->
  <div class="progress-bar-wrap">
    <div class="progress-track"><div class="progress-fill" id="progressFill"></div></div>
    <div class="progress-label"><strong id="checkedCnt">0</strong> / <?= $totalItems ?> packed</div>
    <div class="progress-nag" id="nag" aria-live="polite"></div>
  </div>

  <!-- Grouped item list -->
  <?php foreach ($grouped as $gid => $group): ?>
  <div class="item-group">
    <div class="section-title"><?= htmlspecialchars($group['name']) ?></div>
    <div class="item-list">
      <?php foreach ($group['items'] as $item): ?>
      <div class="item-row" data-item-id="<?= (int)$item['id'] ?>" data-name="<?= htmlspecialchars($item['name']) ?>" onclick="toggleItem(this)">
        <div class="item-check">
          <svg width="10" height="8" viewBox="0 0 10 8" fill="none">
            <path d="M1 4l3 3 5-6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
        </div>
        <span class="item-name"><?php if ($item['quantity'] > 1): ?><?= (int)$item['quantity'] ?>&times; <?php endif; ?><?= htmlspecialchars($item['name']) ?></span>
      </div>
      <?php endforeach; ?>
    </div>
  </div>
  <?php endforeach; ?>
</main>

<script>
const total = <?= $totalItems ?>;

// Packing happens over hours, not in one sitting: a reload, a rotated phone or
// an evicted tab must not lose the ticks. They live per list hash, in this
// browser only – no account, no server round-trip.
const STORE_KEY = 'packit:checked:<?= htmlspecialchars($hash, ENT_QUOTES) ?>';

// Site data can be blocked (private windows, strict settings). Every access is
// guarded so the list still works, just without remembering anything.
function loadChecked() {
  try {
    const raw = localStorage.getItem(STORE_KEY);
    return new Set(raw ? JSON.parse(raw) : []);
  } catch (e) {
    return new Set();
  }
}

function saveChecked(set) {
  try {
    localStorage.setItem(STORE_KEY, JSON.stringify(Array.from(set)));
  } catch (e) {
    /* full, blocked, or private mode – ticks just won't survive the reload */
  }
}

function toggleItem(el) {
  const nowChecked = el.classList.toggle('checked');
  const set = loadChecked();
  if (nowChecked) {
    set.add(el.dataset.itemId);
  } else {
    set.delete(el.dataset.itemId);
  }
  saveChecked(set);
  updateProgress();
}

function resetList() {
  if (!confirm('Uncheck every item on this list?')) return;
  document.querySelectorAll('.item-row.checked').forEach(row => row.classList.remove('checked'));
  try { localStorage.removeItem(STORE_KEY); } catch (e) {}
  updateProgress();
}

function updateProgress() {
  const checked = document.querySelectorAll('.item-row.checked').length;
  document.getElementById('checkedCnt').textContent = checked;
  document.getElementById('progressFill').style.width = (total ? checked / total * 100 : 0) + '%';
  document.getElementById('resetBtn').hidden = checked === 0;
  updateNag(checked);
}

// A little encouragement (read: nagging) under the progress bar. {left} is the
// number of items still to pack, {item} a random one of them.
const NAGS = {
  none:  ["The tent won't pack itself.",
          "Staring at the list doesn't count as packing.",
          "Step one: pick up an item. Any item."],
  start: ["A start! A small, fragile start.",
          "Nice. Now do that {left} more times.",
          "Only {left} to go. Easy. Probably."],
  low:   ["Still more list than luggage.",
          "Keep going. The snacks are watching.",
          "Your bag is still suspiciously light."],
  half:  ["Halfway there. No stopping for snacks.",
          "Over half. Your backpack is starting to believe in you.",
          "Past the point of no return. Well, you could still unpack."],
  close: ["So close. It's the {item}, isn't it.",
          "{left} to go. Don't get sloppy now.",
          "Almost there. Is the {item} hiding somewhere?"],
  last:  ["Just the {item} left. You know what to do.",
          "One item. The {item}. It's waiting for you."],
  done:  ["All packed. Now go outside.",
          "Done! Go on, touch some grass.",
          "Packed and ready. Remember where you put the keys?"],
};
const nag = { tier: null, text: '', item: null };

function nagTier(checked) {
  const left = total - checked;
  if (left === 0)             return 'done';
  if (left === 1)             return 'last';
  if (checked === 0)          return 'none';
  if (checked / total < .25)  return 'start';
  if (checked / total < .5)   return 'low';
  if (checked / total < .75)  return 'half';
  return 'close';
}

function updateNag(checked) {
  const el = document.getElementById('nag');
  if (total === 0) { el.textContent = ''; return; }

  // Keep the same line while the tier holds, so it doesn't flicker on every tick.
  const tier = nagTier(checked);
  if (tier !== nag.tier) {
    const pool = NAGS[tier];
    nag.tier = tier;
    nag.text = pool[Math.floor(Math.random() * pool.length)];
  }

  let item = '';
  if (nag.text.includes('{item}')) {
    const open = Array.from(document.querySelectorAll('.item-row:not(.checked)'), r => r.dataset.name);
    if (!open.includes(nag.item)) nag.item = open[Math.floor(Math.random() * open.length)];
    item = nag.item;   // as written: lowercasing would mangle German nouns
  }
  el.textContent = nag.text.replace('{left}', total - checked).replace('{item}', item);
}

function restoreChecked() {
  const stored = loadChecked();
  const alive = new Set();
  document.querySelectorAll('.item-row').forEach(row => {
    if (stored.has(row.dataset.itemId)) {
      row.classList.add('checked');
      alive.add(row.dataset.itemId);
    }
  });
  // Items dropped from the list in the meantime would otherwise linger forever.
  if (alive.size !== stored.size) saveChecked(alive);
  updateProgress();
}

restoreChecked();

function copyLink() {
  const url = document.getElementById('shareUrl').textContent;
  navigator.clipboard.writeText(url).then(() => {
    const fb = document.getElementById('copyFb');
    fb.classList.add('show');
    setTimeout(() => fb.classList.remove('show'), 2000);
  }).catch(() => {
    // Fallback
    const ta = document.createElement('textarea');
    ta.value = url;
    document.body.appendChild(ta);
    ta.select();
    document.execCommand('copy');
    document.body.removeChild(ta);
  });
}

// Offline support: a list you have opened stays readable without signal.
if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => navigator.serviceWorker.register('/sw.js').catch(() => {}));
}
</script>
</body>
</html>