Deploy from Lumerel

.docker/99-migrate.sh

@@ -0,0 +1,54 @@
+#!/bin/bash
+
+# IMPORTANT: This script is sourced (not executed) by the webdevops entrypoint.
+# Never use "exit" — it would kill the parent entrypoint and prevent supervisord from starting.
+# Use "return" instead to leave this script without affecting the parent.
+
+echo ">>> Waiting for database connection..."
+echo ">>> DB_HOST=${DB_HOST:-NOT SET}"
+echo ">>> DB_PORT=${DB_PORT:-NOT SET}"
+echo ">>> DB_DATABASE=${DB_DATABASE:-NOT SET}"
+echo ">>> DB_USERNAME=${DB_USERNAME:-NOT SET}"
+echo ">>> DB_PASSWORD is $([ -n "$DB_PASSWORD" ] && echo 'set' || echo 'NOT SET')"
+
+if [ -z "$DB_HOST" ] || [ -z "$DB_USERNAME" ]; then
+    echo ">>> ERROR: DB_HOST or DB_USERNAME not set. Skipping migrations."
+    return 0 2>/dev/null || true
+fi
+
+_migrate_max_retries=30
+_migrate_count=0
+_migrate_done=false
+
+while [ $_migrate_count -lt $_migrate_max_retries ]; do
+    if php -r '
+        try {
+            $host = getenv("DB_HOST");
+            $port = getenv("DB_PORT") ?: "3306";
+            $user = getenv("DB_USERNAME");
+            $pass = getenv("DB_PASSWORD");
+            new PDO("mysql:host=$host;port=$port", $user, $pass, [PDO::ATTR_TIMEOUT => 3]);
+            exit(0);
+        } catch (Throwable $e) {
+            fwrite(STDERR, "PDO error: " . $e->getMessage() . "\n");
+            exit(1);
+        }
+    ' 2>&1; then
+        echo ">>> Database is reachable. Running migrations..."
+        if php /app/migrate.php; then
+            echo ">>> Migrations completed successfully."
+        else
+            echo ">>> WARNING: migrate.php exited with code $?"
+        fi
+        _migrate_done=true
+        break
+    fi
+
+    _migrate_count=$((_migrate_count + 1))
+    echo ">>> Waiting for database... attempt $_migrate_count/$_migrate_max_retries"
+    sleep 2
+done
+
+if [ "$_migrate_done" = false ]; then
+    echo ">>> WARNING: Could not connect to database after $_migrate_max_retries attempts. Skipping migrations."
+fi

.dockerignore

@@ -0,0 +1,3 @@
+.git
+Dockerfile
+.dockerignore

Dockerfile

@@ -0,0 +1,23 @@
+FROM webdevops/php-nginx:8.3-alpine
+ENV WEB_DOCUMENT_ROOT=/app
+ARG CACHE_BUST=1775358167
+COPY . /app
+RUN echo "index index.php index.html index.htm;" > /opt/docker/etc/nginx/vhost.common.d/01-index.conf \
+    && echo "add_header Cache-Control 'no-cache, no-store, must-revalidate';" > /opt/docker/etc/nginx/vhost.common.d/02-no-cache.conf
+RUN set -e; if [ -f /app/composer.json ]; then \
+        echo ">>> composer.json found, installing dependencies..."; \
+        curl -sS https://getcomposer.org/installer | php -- --install-dir=/usr/local/bin --filename=composer; \
+        cd /app && composer install --no-dev --no-interaction --optimize-autoloader; \
+        ls -la /app/vendor/autoload.php; \
+    else \
+        echo ">>> No composer.json found, skipping composer install"; \
+    fi
+RUN set -e; if [ -f /app/package.json ]; then \
+        echo ">>> package.json found, installing node dependencies..."; \
+        apk add --no-cache nodejs npm; \
+        cd /app && npm install --production; \
+    else \
+        echo ">>> No package.json found, skipping npm install"; \
+    fi
+COPY --chmod=755 .docker/99-migrate.sh /opt/docker/provision/entrypoint.d/99-migrate.sh
+RUN chown -R application:application /app

admin.php

@@ -0,0 +1,672 @@
+<?php
+session_start();
+require_once __DIR__ . '/db.php';
+
+define('ADMIN_PASS', 'admin');
+
+// — Auth —————————————————————————————————————————————————————————————
+if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['password'])) {
+    if ($_POST['password'] === ADMIN_PASS) {
+        $_SESSION['pawgress_admin'] = true;
+        header('Location: /admin.php'); exit;
+    } else {
+        $loginError = 'Wrong password. Try again!';
+    }
+}
+if (isset($_GET['logout'])) {
+    session_destroy();
+    header('Location: /admin.php'); exit;
+}
+
+$authed = !empty($_SESSION['pawgress_admin']);
+$items  = $authed
+    ? $pdo->query("SELECT * FROM training_items ORDER BY sort_order ASC")->fetchAll()
+    : [];
+?>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+<title>Pawgress Admin ⚙️</title>
+<link rel="preconnect" href="https://fonts.googleapis.com" />
+<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&display=swap" rel="stylesheet" />
+<style>
+  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+  :root {
+    --purple:  #7C3AED;
+    --purple2: #9F67FF;
+    --green:   #4CAF82;
+    --red:     #FF5C5C;
+    --orange:  #FF7B2C;
+    --bg:      #F5F3FF;
+    --card:    #FFFFFF;
+    --text:    #1E1B2E;
+    --muted:   #7B7490;
+    --border:  #E8E2F8;
+    --shadow:  0 4px 24px rgba(124,58,237,0.08);
+    --radius:  16px;
+  }
+
+  body {
+    font-family: 'Nunito', sans-serif;
+    background: var(--bg);
+    color: var(--text);
+    min-height: 100vh;
+  }
+
+  /* — HEADER — */
+  .header {
+    background: linear-gradient(135deg, #5B21B6 0%, #7C3AED 50%, #9F67FF 100%);
+    padding: 28px 24px 80px;
+    text-align: center;
+    position: relative;
+    overflow: hidden;
+  }
+  .header::before {
+    content: '';
+    position: absolute; inset: 0;
+    background: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Ccircle cx='20' cy='20' r='15'/%3E%3C/g%3E%3C/svg%3E");
+    pointer-events: none;
+  }
+  .header-logo { font-size: 48px; display: block; margin-bottom: 6px; }
+  .header h1 {
+    font-size: 2.2rem;
+    font-weight: 900;
+    color: #fff;
+    text-shadow: 0 2px 8px rgba(0,0,0,0.2);
+  }
+  .header p { color: rgba(255,255,255,0.8); font-size: 0.95rem; font-weight: 600; margin-top: 4px; }
+  .header-actions {
+    position: absolute;
+    top: 20px; right: 20px;
+    display: flex; gap: 8px;
+  }
+  .header-btn {
+    background: rgba(255,255,255,0.2);
+    border: none;
+    color: #fff;
+    font-family: 'Nunito', sans-serif;
+    font-size: 0.82rem;
+    font-weight: 700;
+    padding: 7px 14px;
+    border-radius: 99px;
+    cursor: pointer;
+    text-decoration: none;
+    transition: background 0.2s;
+    display: flex; align-items: center; gap: 6px;
+  }
+  .header-btn:hover { background: rgba(255,255,255,0.3); }
+
+  /* — LOGIN — */
+  .login-wrap {
+    max-width: 400px;
+    margin: -52px auto 0;
+    padding: 0 20px 60px;
+    position: relative;
+    z-index: 10;
+  }
+  .login-card {
+    background: var(--card);
+    border-radius: var(--radius);
+    box-shadow: var(--shadow);
+    padding: 32px;
+    text-align: center;
+  }
+  .login-card h2 { font-size: 1.4rem; font-weight: 900; margin-bottom: 6px; }
+  .login-card p  { color: var(--muted); font-size: 0.9rem; font-weight: 600; margin-bottom: 24px; }
+  .login-error {
+    background: #FFF0F0;
+    border: 1.5px solid #FFD0D0;
+    color: var(--red);
+    border-radius: 10px;
+    padding: 10px 14px;
+    font-size: 0.88rem;
+    font-weight: 700;
+    margin-bottom: 16px;
+  }
+  .form-group { text-align: left; margin-bottom: 16px; }
+  .form-group label {
+    display: block;
+    font-size: 0.78rem;
+    font-weight: 800;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    color: var(--muted);
+    margin-bottom: 6px;
+  }
+  .form-group input, .form-group textarea {
+    width: 100%;
+    padding: 12px 16px;
+    border: 2px solid var(--border);
+    border-radius: 10px;
+    font-family: 'Nunito', sans-serif;
+    font-size: 0.95rem;
+    font-weight: 600;
+    color: var(--text);
+    background: var(--bg);
+    transition: border-color 0.2s;
+    outline: none;
+  }
+  .form-group textarea { resize: vertical; min-height: 80px; }
+  .form-group input:focus, .form-group textarea:focus { border-color: var(--purple); background: #fff; }
+  .btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    padding: 12px 24px;
+    border-radius: 99px;
+    font-family: 'Nunito', sans-serif;
+    font-size: 0.95rem;
+    font-weight: 800;
+    cursor: pointer;
+    border: none;
+    transition: all 0.2s ease;
+  }
+  .btn-primary { background: var(--purple); color: #fff; width: 100%; }
+  .btn-primary:hover { background: #6D28D9; transform: translateY(-1px); }
+  .btn-success { background: var(--green); color: #fff; }
+  .btn-success:hover { background: #3D9E6E; }
+  .btn-danger  { background: var(--red); color: #fff; }
+  .btn-danger:hover  { background: #E84545; }
+  .btn-ghost {
+    background: transparent;
+    border: 2px solid var(--border);
+    color: var(--muted);
+  }
+  .btn-ghost:hover { border-color: var(--purple); color: var(--purple); background: #F5F3FF; }
+
+  /* — CONTAINER — */
+  .container {
+    max-width: 640px;
+    margin: 0 auto;
+    padding: 0 20px 100px;
+  }
+
+  /* — TOOLBAR — */
+  .toolbar {
+    background: var(--card);
+    border-radius: var(--radius);
+    box-shadow: var(--shadow);
+    padding: 16px 20px;
+    margin: -52px 0 24px;
+    position: relative;
+    z-index: 10;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+  }
+  .toolbar-info h3 { font-size: 1rem; font-weight: 800; }
+  .toolbar-info p  { font-size: 0.82rem; color: var(--muted); font-weight: 600; }
+  .add-btn {
+    background: linear-gradient(135deg, var(--purple), var(--purple2));
+    color: #fff;
+    border: none;
+    font-family: 'Nunito', sans-serif;
+    font-size: 0.9rem;
+    font-weight: 800;
+    padding: 10px 20px;
+    border-radius: 99px;
+    cursor: pointer;
+    display: flex; align-items: center; gap: 8px;
+    transition: all 0.2s;
+    white-space: nowrap;
+  }
+  .add-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(124,58,237,0.35); }
+  .add-btn .plus {
+    width: 22px; height: 22px;
+    background: rgba(255,255,255,0.25);
+    border-radius: 50%;
+    display: flex; align-items: center; justify-content: center;
+    font-size: 1.1rem;
+    line-height: 1;
+  }
+
+  /* — ITEM CARDS — */
+  .items-list { display: flex; flex-direction: column; gap: 10px; }
+
+  .item-card {
+    background: var(--card);
+    border-radius: var(--radius);
+    box-shadow: 0 2px 12px rgba(0,0,0,0.05);
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 14px 16px;
+    transition: transform 0.15s, box-shadow 0.15s;
+    border: 2px solid transparent;
+  }
+  .item-card:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,0.08); }
+  .item-card.dragging { opacity: 0.5; border-color: var(--purple); }
+  .item-card.drag-over { border-color: var(--purple2); background: #F5F3FF; }
+
+  .drag-handle {
+    color: var(--border);
+    cursor: grab;
+    font-size: 1.2rem;
+    padding: 4px;
+    flex-shrink: 0;
+    transition: color 0.2s;
+    line-height: 1;
+  }
+  .item-card:hover .drag-handle { color: var(--muted); }
+  .drag-handle:active { cursor: grabbing; }
+
+  .item-number {
+    width: 28px; height: 28px;
+    background: var(--bg);
+    border-radius: 50%;
+    display: flex; align-items: center; justify-content: center;
+    font-size: 0.75rem;
+    font-weight: 800;
+    color: var(--muted);
+    flex-shrink: 0;
+  }
+  .item-body { flex: 1; min-width: 0; }
+  .item-title { font-size: 0.95rem; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+  .item-desc  { font-size: 0.8rem; color: var(--muted); font-weight: 600; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+
+  .item-actions { display: flex; gap: 6px; flex-shrink: 0; }
+  .icon-btn {
+    width: 34px; height: 34px;
+    border-radius: 10px;
+    border: 2px solid var(--border);
+    background: #fff;
+    display: flex; align-items: center; justify-content: center;
+    cursor: pointer;
+    transition: all 0.2s;
+    font-size: 0.9rem;
+  }
+  .icon-btn:hover { border-color: var(--purple); background: #F5F3FF; }
+  .icon-btn.delete:hover { border-color: var(--red); background: #FFF0F0; }
+
+  /* — EMPTY STATE — */
+  .empty-state {
+    text-align: center;
+    padding: 48px 24px;
+    color: var(--muted);
+  }
+  .empty-state .icon { font-size: 56px; margin-bottom: 12px; }
+  .empty-state h3 { font-size: 1.2rem; font-weight: 800; margin-bottom: 6px; color: var(--text); }
+  .empty-state p  { font-size: 0.9rem; font-weight: 600; }
+
+  /* — MODAL — */
+  .modal-overlay {
+    position: fixed; inset: 0;
+    background: rgba(30,27,46,0.5);
+    backdrop-filter: blur(4px);
+    z-index: 200;
+    display: flex; align-items: center; justify-content: center;
+    padding: 20px;
+    opacity: 0; pointer-events: none;
+    transition: opacity 0.2s ease;
+  }
+  .modal-overlay.open { opacity: 1; pointer-events: all; }
+
+  .modal {
+    background: var(--card);
+    border-radius: 20px;
+    padding: 28px;
+    width: 100%; max-width: 460px;
+    box-shadow: 0 20px 60px rgba(0,0,0,0.2);
+    transform: translateY(20px) scale(0.97);
+    transition: transform 0.25s cubic-bezier(0.34,1.56,0.64,1);
+  }
+  .modal-overlay.open .modal { transform: translateY(0) scale(1); }
+
+  .modal-header {
+    display: flex; align-items: center; justify-content: space-between;
+    margin-bottom: 20px;
+  }
+  .modal-header h2 { font-size: 1.3rem; font-weight: 900; }
+  .modal-close {
+    width: 32px; height: 32px;
+    border-radius: 50%;
+    border: 2px solid var(--border);
+    background: var(--bg);
+    display: flex; align-items: center; justify-content: center;
+    cursor: pointer;
+    font-size: 1rem;
+    color: var(--muted);
+    transition: all 0.2s;
+  }
+  .modal-close:hover { border-color: var(--red); color: var(--red); background: #FFF0F0; }
+
+  .modal-footer {
+    display: flex; gap: 10px; margin-top: 20px;
+    justify-content: flex-end;
+  }
+
+  /* — CONFIRM MODAL — */
+  .confirm-icon { font-size: 48px; text-align: center; margin-bottom: 12px; }
+  .confirm-text { text-align: center; }
+  .confirm-text h3 { font-size: 1.2rem; font-weight: 900; margin-bottom: 6px; }
+  .confirm-text p  { font-size: 0.9rem; color: var(--muted); font-weight: 600; }
+
+  /* — TOAST — */
+  .toast-wrap {
+    position: fixed;
+    bottom: 80px; left: 50%;
+    transform: translateX(-50%);
+    z-index: 300;
+    display: flex; flex-direction: column; gap: 8px; align-items: center;
+    pointer-events: none;
+  }
+  .toast {
+    background: #1E1B2E;
+    color: #fff;
+    font-size: 0.88rem;
+    font-weight: 700;
+    padding: 10px 20px;
+    border-radius: 99px;
+    box-shadow: 0 4px 20px rgba(0,0,0,0.2);
+    animation: toastIn 0.3s ease forwards;
+    white-space: nowrap;
+  }
+  @keyframes toastIn {
+    from { transform: translateY(10px); opacity: 0; }
+    to   { transform: translateY(0);    opacity: 1; }
+  }
+
+  /* — FOOTER NAV — */
+  .footer-nav {
+    position: fixed;
+    bottom: 0; left: 0; right: 0;
+    background: #fff;
+    border-top: 1px solid var(--border);
+    padding: 12px 24px 20px;
+    display: flex;
+    justify-content: center;
+    gap: 16px;
+    z-index: 100;
+  }
+  .footer-nav a {
+    font-size: 0.8rem;
+    font-weight: 700;
+    color: var(--muted);
+    text-decoration: none;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 8px 18px;
+    border-radius: 99px;
+    transition: all 0.2s;
+  }
+  .footer-nav a:hover { background: var(--bg); color: var(--purple); }
+  .footer-nav a.active { background: #EDE9FE; color: var(--purple); }
+</style>
+</head>
+<body>
+
+<div class="header">
+  <span class="header-logo">⚙️</span>
+  <h1>Pawgress Admin</h1>
+  <p>Manage your daily training checklist</p>
+  <?php if ($authed): ?>
+  <div class="header-actions">
+    <a href="/" class="header-btn">🏠 View App</a>
+    <a href="/admin.php?logout=1" class="header-btn">🚪 Logout</a>
+  </div>
+  <?php endif; ?>
+</div>
+
+<?php if (!$authed): ?>
+<!-- — LOGIN — -->
+<div class="login-wrap">
+  <div class="login-card">
+    <h2>🔐 Admin Login</h2>
+    <p>Enter your admin password to manage training items.</p>
+    <?php if (!empty($loginError)): ?>
+      <div class="login-error">❌ <?= htmlspecialchars($loginError) ?></div>
+    <?php endif; ?>
+    <form method="POST">
+      <div class="form-group">
+        <label>Password</label>
+        <input type="password" name="password" placeholder="Enter password…" autofocus required />
+      </div>
+      <button type="submit" class="btn btn-primary">Unlock Admin 🔓</button>
+    </form>
+  </div>
+</div>
+
+<?php else: ?>
+<!-- — ADMIN PANEL — -->
+<div class="container">
+
+  <div class="toolbar">
+    <div class="toolbar-info">
+      <h3>Training Items</h3>
+      <p><?= count($items) ?> item<?= count($items) !== 1 ? 's' : '' ?> &bull; Drag to reorder</p>
+    </div>
+    <button class="add-btn" onclick="openAdd()">
+      <span class="plus">+</span> Add Item
+    </button>
+  </div>
+
+  <?php if (empty($items)): ?>
+    <div class="empty-state">
+      <div class="icon">🐕</div>
+      <h3>No Training Items Yet</h3>
+      <p>Click "Add Item" above to create your first training task.</p>
+    </div>
+  <?php else: ?>
+    <div class="items-list" id="itemsList">
+      <?php foreach ($items as $i => $item): ?>
+      <div class="item-card" draggable="true" data-id="<?= $item['id'] ?>">
+        <div class="drag-handle" title="Drag to reorder">⠿</div>
+        <div class="item-number"><?= $i + 1 ?></div>
+        <div class="item-body">
+          <div class="item-title"><?= htmlspecialchars($item['title']) ?></div>
+          <?php if (!empty($item['description'])): ?>
+          <div class="item-desc"><?= htmlspecialchars($item['description']) ?></div>
+          <?php endif; ?>
+        </div>
+        <div class="item-actions">
+          <button class="icon-btn" title="Edit" onclick="openEdit(<?= $item['id'] ?>, <?= htmlspecialchars(json_encode($item['title'])) ?>, <?= htmlspecialchars(json_encode($item['description'] ?? '')) ?>)">✏️</button>
+          <button class="icon-btn delete" title="Delete" onclick="openDelete(<?= $item['id'] ?>, <?= htmlspecialchars(json_encode($item['title'])) ?>)">🗑️</button>
+        </div>
+      </div>
+      <?php endforeach; ?>
+    </div>
+  <?php endif; ?>
+
+</div>
+
+<!-- — ADD / EDIT MODAL — -->
+<div class="modal-overlay" id="itemModal">
+  <div class="modal">
+    <div class="modal-header">
+      <h2 id="modalTitle">Add Training Item</h2>
+      <button class="modal-close" onclick="closeModal('itemModal')">✕</button>
+    </div>
+    <form id="itemForm">
+      <input type="hidden" id="editId" value="" />
+      <div class="form-group">
+        <label>Title</label>
+        <input type="text" id="fieldTitle" placeholder="e.g. 🦴 Sit Command" required />
+      </div>
+      <div class="form-group">
+        <label>Description <span style="font-weight:600;color:var(--muted)">(optional)</span></label>
+        <textarea id="fieldDesc" placeholder="e.g. Practice 10 times with treats…"></textarea>
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-ghost" onclick="closeModal('itemModal')">Cancel</button>
+        <button type="submit" class="btn btn-success" id="saveBtn">🐾 Save Item</button>
+      </div>
+    </form>
+  </div>
+</div>
+
+<!-- — DELETE CONFIRM MODAL — -->
+<div class="modal-overlay" id="deleteModal">
+  <div class="modal">
+    <div class="modal-header">
+      <h2>Delete Item</h2>
+      <button class="modal-close" onclick="closeModal('deleteModal')">✕</button>
+    </div>
+    <div class="confirm-icon">🗑️</div>
+    <div class="confirm-text">
+      <h3>Are you sure?</h3>
+      <p>Delete "<span id="deleteTitle"></span>"? This can't be undone.</p>
+    </div>
+    <div class="modal-footer">
+      <button class="btn btn-ghost" onclick="closeModal('deleteModal')">Cancel</button>
+      <button class="btn btn-danger" id="confirmDeleteBtn">Delete</button>
+    </div>
+  </div>
+</div>
+
+<?php endif; ?>
+
+<!-- TOASTS -->
+<div class="toast-wrap" id="toastWrap"></div>
+
+<nav class="footer-nav">
+  <a href="/">Today</a>
+  <a href="/admin.php.php" class="active">Admin</a>
+</nav>
+
+<script>
+// MODAL HELPERS
+function openModal(id)  { document.getElementById(id).classList.add('open'); }
+function closeModal(id) { document.getElementById(id).classList.remove('open'); }
+
+document.addEventListener('keydown', e => {
+  if (e.key === 'Escape') {
+    document.querySelectorAll('.modal-overlay.open').forEach(m => m.classList.remove('open'));
+  }
+});
+
+// TOAST
+function showToast(msg) {
+  const wrap = document.getElementById('toastWrap');
+  const t = document.createElement('div');
+  t.className = 'toast';
+  t.textContent = msg;
+  wrap.appendChild(t);
+  setTimeout(() => t.remove(), 3000);
+}
+
+// ADD
+function openAdd() {
+  document.getElementById('modalTitle').textContent = 'Add Training Item';
+  document.getElementById('editId').value    = '';
+  document.getElementById('fieldTitle').value = '';
+  document.getElementById('fieldDesc').value  = '';
+  document.getElementById('saveBtn').textContent = '🐾 Save Item';
+  openModal('itemModal');
+  setTimeout(() => document.getElementById('fieldTitle').focus(), 200);
+}
+
+// EDIT
+function openEdit(id, title, desc) {
+  document.getElementById('modalTitle').textContent = 'Edit Training Item';
+  document.getElementById('editId').value     = id;
+  document.getElementById('fieldTitle').value  = title;
+  document.getElementById('fieldDesc').value   = desc;
+  document.getElementById('saveBtn').textContent = 'Update Item';
+  openModal('itemModal');
+  setTimeout(() => document.getElementById('fieldTitle').focus(), 200);
+}
+
+// SAVE
+document.getElementById('itemForm').addEventListener('submit', async function(e) {
+  e.preventDefault();
+  const id    = document.getElementById('editId').value;
+  const title = document.getElementById('fieldTitle').value.trim();
+  const desc  = document.getElementById('fieldDesc').value.trim();
+  if (!title) return;
+
+  const action = id ? 'update' : 'create';
+  const res = await fetch('/api.php', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ action, id, title, description: desc })
+  });
+  const data = await res.json();
+  if (data.success) {
+    closeModal('itemModal');
+    showToast(id ? 'Item updated!' : 'Item added!');
+    setTimeout(() => location.reload(), 600);
+  } else {
+    showToast('Error: ' + (data.error || 'Unknown error'));
+  }
+});
+
+// delete
+let deleteId = null;
+function openDelete(id, title) {
+  deleteId = id;
+  document.getElementById('deleteTitle').textContent = title;
+  openModal('deleteModal');
+}
+document.getElementById('confirmDeleteBtn').addEventListener('click', async function() {
+  if (!deleteId) return;
+  const res = await fetch('/api.php', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ action: 'delete', id: deleteId })
+  });
+  const data = await res.json();
+  if (data.success) {
+    closeModal('deleteModal');
+    showToast('Item deleted!');
+    setTimeout(() => location.reload(), 600);
+  } else {
+    showToast('Error: ' + (data.error || 'Unknown error'));
+  }
+});
+
+// drag & drop
+const list = document.getElementById('itemsList');
+if (list) {
+  let dragged = null;
+
+  list.querySelectorAll('.item-card').forEach(card => {
+    card.addEventListener('dragstart', function() {
+      dragged = this;
+      setTimeout(() => this.classList.add('dragging'), 0);
+    });
+    card.addEventListener('dragend', function() {
+      this.classList.remove('dragging');
+      list.querySelectorAll('.item-card').forEach(c => c.classList.remove('drag-over'));
+      saveOrder();
+    });
+    card.addEventListener('dragover', function(e) {
+      e.preventDefault();
+      list.querySelectorAll('.item-card').forEach(c => c.classList.remove('drag-over'));
+      if (this !== dragged) this.classList.add('drag-over');
+      const rect = this.getBoundingClientRect();
+      const mid  = rect.top + rect.height / 2;
+      if (e.clientY < mid) list.insertBefore(dragged, this);
+      else list.insertBefore(dragged, this.nextSibling);
+    });
+    card.addEventListener('dragleave', function() {
+      this.classList.remove('drag-over');
+    });
+    card.addEventListener('drop', function(e) {
+      e.preventDefault();
+      this.classList.remove('drag-over');
+    });
+  });
+
+  async function saveOrder() {
+    const ids = [...list.querySelectorAll('.item-card')].map(c => c.dataset.id);
+    // Update numbers
+    list.querySelectorAll('.item-number').forEach((el, i) => el.textContent = i + 1);
+    const res = await fetch('/api.php', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ action: 'reorder', ids })
+    });
+    const data = await res.json();
+    if (data.success) showToast('Order saved!');
+  }
+}
+</script>
+
+</body>
+</html>

api.php

@@ -0,0 +1,76 @@
+<?php
+session_start();
+require_once __DIR__ . '/db.php';
+
+header('Content-Type: application/json');
+
+// Must be authenticated
+if (empty($_SESSION['pawgress_admin'])) {
+    http_response_code(403);
+    echo json_encode(['error' => 'Unauthorized']);
+    exit;
+}
+
+$body   = json_decode(file_get_contents('php://input'), true);
+$action = $body['action'] ?? '';
+
+try {
+    switch ($action) {
+
+        // ── CREATE ────────────────────────────────────────────────────
+        case 'create': {
+            $title = trim($body['title'] ?? '');
+            $desc  = trim($body['description'] ?? '');
+            if (!$title) {
+                echo json_encode(['error' => 'Title is required']); exit;
+            }
+            $maxOrder = $pdo->query(\"SELECT COALESCE(MAX(sort_order),0) FROM training_items\")->fetchColumn();
+            $stmt = $pdo->prepare(\"INSERT INTO training_items (title, description, sort_order) VALUES (?, ?, ?)\");
+            $stmt->execute([$title, $desc ?: null, (int)$maxOrder + 1]);
+            echo json_encode(['success' => true, 'id' => $pdo->lastInsertId()]);
+            break;
+        }
+
+        // ── UPDATE ────────────────────────────────────────────────────
+        case 'update': {
+            $id    = (int)($body['id'] ?? 0);
+            $title = trim($body['title'] ?? '');
+            $desc  = trim($body['description'] ?? '');
+            if (!$id || !$title) {
+                echo json_encode(['error' => 'ID and title are required']); exit;
+            }
+            $stmt = $pdo->prepare(\"UPDATE training_items SET title=?, description=?, updated_at=NOW() WHERE id=?\");
+            $stmt->execute([$title, $desc ?: null, $id]);
+            echo json_encode(['success' => true]);
+            break;
+        }
+
+        // ── DELETE ────────────────────────────────────────────────────
+        case 'delete': {
+            $id = (int)($body['id'] ?? 0);
+            if (!$id) { echo json_encode(['error' => 'ID required']); exit; }
+            $pdo->prepare(\"DELETE FROM training_items WHERE id=?\")->execute([$id]);
+            echo json_encode(['success' => true]);
+            break;
+        }
+
+        // ── REORDER ───────────────────────────────────────────────────
+        case 'reorder': {
+            $ids = $body['ids'] ?? [];
+            if (!is_array($ids)) { echo json_encode(['error' => 'IDs must be an array']); exit; }
+            $stmt = $pdo->prepare(\"UPDATE training_items SET sort_order=? WHERE id=?\");
+            foreach ($ids as $i => $id) {
+                $stmt->execute([$i + 1, (int)$id]);
+            }
+            echo json_encode(['success' => true]);
+            break;
+        }
+
+        default:
+            echo json_encode(['error' => 'Unknown action']);
+    }
+
+} catch (PDOException $e) {
+    http_response_code(500);
+    echo json_encode(['error' => 'Database error: ' . $e->getMessage()]);
+}

db.php

@@ -0,0 +1,13 @@
+<?php
+try {
+    $pdo = new PDO(
+        'mysql:host=' . getenv('DB_HOST') . ';port=' . (getenv('DB_PORT') ?: '3306') . ';dbname=' . getenv('DB_DATABASE') . ';charset=utf8mb4',
+        getenv('DB_USERNAME'),
+        getenv('DB_PASSWORD')
+    );
+    $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
+    $pdo->setAttribute(PDO::ATTR_DEFAULT_FETCH_MODE, PDO::FETCH_ASSOC);
+} catch (PDOException $e) {
+    http_response_code(500);
+    die(json_encode(['error' => 'Database connection failed.']));
+}

index.php

@@ -0,0 +1,510 @@
+<?php
+require_once __DIR__ . '/db.php';
+
+$items = $pdo->query("SELECT * FROM training_items ORDER BY sort_order ASC")->fetchAll();
+$today = date('Y-m-d');
+?>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+<title>Pawgress 🐾 Daily Training</title>
+<link rel="preconnect" href="https://fonts.googleapis.com" />
+<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&display=swap" rel="stylesheet" />
+<style>
+  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+  :root {
+    --orange:  #FF7B2C;
+    --yellow:  #FFD93D;
+    --green:   #4CAF82;
+    --red:     #FF5C5C;
+    --bg:      #FFF8F0;
+    --card:    #FFFFFF;
+    --text:    #2D2D2D;
+    --muted:   #8A8A8A;
+    --border:  #F0E6D8;
+    --shadow:  0 4px 24px rgba(0,0,0,0.07);
+    --radius:  16px;
+  }
+
+  body {
+    font-family: 'Nunito', sans-serif;
+    background: var(--bg);
+    color: var(--text);
+    min-height: 100vh;
+  }
+
+  /* — HEADER — */
+  .header {
+    background: linear-gradient(135deg, #FF7B2C 0%, #FF9A5C 50%, #FFD93D 100%);
+    padding: 28px 24px 80px;
+    text-align: center;
+    position: relative;
+    overflow: hidden;
+  }
+  .header::before {
+    content: '';
+    position: absolute; inset: 0;
+    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.06'%3E%3Ccircle cx='30' cy='30' r='20'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
+    pointer-events: none;
+  }
+  .header-logo {
+    font-size: 52px;
+    display: block;
+    margin-bottom: 6px;
+    animation: bounce 2s infinite;
+  }
+  @keyframes bounce {
+    0%,100% { transform: translateY(0); }
+    50%      { transform: translateY(-8px); }
+  }
+  .header h1 {
+    font-size: 2.4rem;
+    font-weight: 900;
+    color: #fff;
+    letter-spacing: -0.5px;
+    text-shadow: 0 2px 8px rgba(0,0,0,0.15);
+  }
+  .header p {
+    color: rgba(255,255,255,0.88);
+    font-size: 1rem;
+    font-weight: 600;
+    margin-top: 4px;
+  }
+
+  /* — PROGRESS CARD — */
+  .progress-card {
+    background: var(--card);
+    border-radius: var(--radius);
+    box-shadow: var(--shadow);
+    padding: 24px;
+    margin: -52px 20px 24px;
+    position: relative;
+    z-index: 10;
+    display: flex;
+    align-items: center;
+    gap: 20px;
+  }
+  .progress-ring-wrap {
+    position: relative;
+    flex-shrink: 0;
+    width: 90px;
+    height: 90px;
+  }
+  .progress-ring {
+    transform: rotate(-90deg);
+    width: 90px;
+    height: 90px;
+  }
+  .progress-ring circle {
+    fill: none;
+    stroke-width: 8;
+    stroke-linecap: round;
+    transition: stroke-dashoffset 0.5s ease, stroke 0.5s ease;
+  }
+  .ring-bg   { stroke: #F0E6D8; }
+  .ring-fill { stroke: var(--orange); stroke-dasharray: 226; stroke-dashoffset: 226; }
+  .ring-emoji {
+    position: absolute;
+    top: 50%; left: 50%;
+    transform: translate(-50%, -50%);
+    font-size: 28px;
+    line-height: 1;
+  }
+  .progress-info { flex: 1; }
+  .progress-label {
+    font-size: 0.8rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    color: var(--muted);
+    margin-bottom: 4px;
+  }
+  .progress-count {
+    font-size: 2rem;
+    font-weight: 900;
+    color: var(--text);
+    line-height: 1;
+  }
+  .progress-count span { font-size: 1rem; color: var(--muted); font-weight: 600; }
+  .progress-bar-wrap {
+    background: var(--border);
+    border-radius: 99px;
+    height: 8px;
+    margin-top: 10px;
+    overflow: hidden;
+  }
+  .progress-bar {
+    height: 100%;
+    border-radius: 99px;
+    background: linear-gradient(90deg, var(--orange), var(--yellow));
+    transition: width 0.5s ease;
+    width: 0%;
+  }
+  .progress-msg {
+    font-size: 0.82rem;
+    color: var(--muted);
+    font-weight: 600;
+    margin-top: 6px;
+  }
+
+  /* — MAIN CONTENT — */
+  .container {
+    max-width: 640px;
+    margin: 0 auto;
+    padding: 0 20px 100px;
+  }
+
+  .section-title {
+    font-size: 0.78rem;
+    font-weight: 800;
+    text-transform: uppercase;
+    letter-spacing: 1.2px;
+    color: var(--muted);
+    margin-bottom: 12px;
+  }
+
+  /* — TASK CARDS — */
+  .task-list { display: flex; flex-direction: column; gap: 10px; }
+
+  .task-card {
+    background: var(--card);
+    border-radius: var(--radius);
+    box-shadow: 0 2px 12px rgba(0,0,0,0.05);
+    display: flex;
+    align-items: center;
+    gap: 14px;
+    padding: 16px 18px;
+    cursor: pointer;
+    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.2s ease;
+    border: 2px solid transparent;
+    position: relative;
+    overflow: hidden;
+  }
+  .task-card::before {
+    content: '';
+    position: absolute;
+    left: 0; top: 0; bottom: 0;
+    width: 5px;
+    background: var(--border);
+    transition: background 0.3s ease;
+    border-radius: 4px 0 0 4px;
+  }
+  .task-card:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,0.09); }
+  .task-card.done { background: #F6FFF9; border-color: #D4EFDF; }
+  .task-card.done::before { background: var(--green); }
+
+  .task-checkbox {
+    width: 26px; height: 26px;
+    border-radius: 50%;
+    border: 2.5px solid var(--border);
+    display: flex; align-items: center; justify-content: center;
+    flex-shrink: 0;
+    transition: all 0.2s ease;
+    background: #fff;
+  }
+  .task-card.done .task-checkbox {
+    background: var(--green);
+    border-color: var(--green);
+  }
+  .task-checkbox svg { display: none; }
+  .task-card.done .task-checkbox svg { display: block; }
+
+  .task-body { flex: 1; }
+  .task-title {
+    font-size: 1rem;
+    font-weight: 700;
+    color: var(--text);
+    transition: color 0.2s, text-decoration 0.2s;
+  }
+  .task-card.done .task-title {
+    color: var(--muted);
+    text-decoration: line-through;
+  }
+  .task-desc {
+    font-size: 0.82rem;
+    color: var(--muted);
+    font-weight: 600;
+    margin-top: 2px;
+    line-height: 1.4;
+  }
+
+  /* — COMPLETE BANNER — */
+  .complete-banner {
+    background: linear-gradient(135deg, #4CAF82, #38D996);
+    border-radius: var(--radius);
+    padding: 20px 24px;
+    text-align: center;
+    margin-bottom: 20px;
+    display: none;
+    animation: popIn 0.4s cubic-bezier(0.34,1.56,0.64,1);
+  }
+  .complete-banner.show { display: block; }
+  @keyframes popIn {
+    from { transform: scale(0.8); opacity: 0; }
+    to   { transform: scale(1);   opacity: 1; }
+  }
+  .complete-banner h2 {
+    font-size: 1.4rem;
+    font-weight: 900;
+    color: #fff;
+    margin-bottom: 4px;
+  }
+  .complete-banner p { color: rgba(255,255,255,0.88); font-weight: 600; font-size: 0.9rem; }
+
+  /* — RESET BUTTON — */
+  .reset-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    background: #fff;
+    border: 2px solid var(--border);
+    color: var(--muted);
+    font-family: 'Nunito', sans-serif;
+    font-size: 0.9rem;
+    font-weight: 700;
+    padding: 12px 24px;
+    border-radius: 99px;
+    cursor: pointer;
+    margin: 20px auto 0;
+    transition: all 0.2s ease;
+    width: 100%;
+    max-width: 280px;
+  }
+  .reset-btn:hover { border-color: var(--red); color: var(--red); background: #FFF5F5; }
+
+  /* — FOOTER NAV — */
+  .footer-nav {
+    position: fixed;
+    bottom: 0; left: 0; right: 0;
+    background: #fff;
+    border-top: 1px solid var(--border);
+    padding: 12px 24px 20px;
+    display: flex;
+    justify-content: center;
+    gap: 16px;
+    z-index: 100;
+  }
+  .footer-nav a {
+    font-size: 0.8rem;
+    font-weight: 700;
+    color: var(--muted);
+    text-decoration: none;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 8px 18px;
+    border-radius: 99px;
+    transition: all 0.2s;
+  }
+  .footer-nav a:hover { background: var(--bg); color: var(--orange); }
+  .footer-nav a.active { background: #FFF0E6; color: var(--orange); }
+
+  /* — EMPTY STATE — */
+  .empty-state {
+    text-align: center;
+    padding: 48px 24px;
+    color: var(--muted);
+  }
+  .empty-state .icon { font-size: 56px; margin-bottom: 12px; }
+  .empty-state h3 { font-size: 1.2rem; font-weight: 800; margin-bottom: 6px; color: var(--text); }
+  .empty-state p { font-size: 0.9rem; font-weight: 600; }
+  .empty-state a {
+    display: inline-block;
+    margin-top: 16px;
+    background: var(--orange);
+    color: #fff;
+    text-decoration: none;
+    padding: 10px 24px;
+    border-radius: 99px;
+    font-weight: 800;
+    font-size: 0.9rem;
+  }
+
+  @media (max-width: 480px) {
+    .header h1 { font-size: 1.9rem; }
+    .progress-card { flex-direction: column; text-align: center; }
+    .progress-info { width: 100%; }
+  }
+</style>
+</head>
+<body>
+
+<div class="header">
+  <span class="header-logo">🐾</span>
+  <h1>Pawgress</h1>
+  <p><?= date('l, F j') ?> &bull; Daily Training</p>
+</div>
+
+<div class="container">
+
+  <!-- Progress Card -->
+  <div class="progress-card">
+    <div class="progress-ring-wrap">
+      <svg class="progress-ring" viewBox="0 0 90 90">
+        <circle class="ring-bg"   cx="45" cy="45" r="36" />
+        <circle class="ring-fill" cx="45" cy="45" r="36" id="ringFill" />
+      </svg>
+      <span class="ring-emoji" id="ringEmoji">🐶</span>
+    </div>
+    <div class="progress-info">
+      <div class="progress-label">Today's Progress</div>
+      <div class="progress-count" id="progressCount">0 <span>/ <?= count($items) ?></span></div>
+      <div class="progress-bar-wrap">
+        <div class="progress-bar" id="progressBar"></div>
+      </div>
+      <div class="progress-msg" id="progressMsg">Let's get training! 💪</div>
+    </div>
+  </div>
+
+  <!-- Complete Banner -->
+  <div class="complete-banner" id="completeBanner">
+    <h2>🎉 Amazing Work!</h2>
+    <p>You crushed every training task today. Your pup is so proud!</p>
+  </div>
+
+  <!-- Task List -->
+  <?php if (empty($items)): ?>
+    <div class="empty-state">
+      <div class="icon">🐕</div>
+      <h3>No Training Items Yet</h3>
+      <p>Head to the admin panel to add your first training tasks.</p>
+      <a href="/admin.php">Go to Admin →</a>
+    </div>
+  <?php else: ?>
+    <div class="section-title">Training Checklist</div>
+    <div class="task-list" id="taskList">
+      <?php foreach ($items as $item): ?>
+      <div class="task-card" data-id="<?= $item['id'] ?>" onclick="toggleTask(this)">
+        <div class="task-checkbox">
+          <svg width="14" height="11" viewBox="0 0 14 11" fill="none">
+            <path d="M1.5 5.5L5.5 9.5L12.5 1.5" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+        </div>
+        <div class="task-body">
+          <div class="task-title"><?= htmlspecialchars($item['title']) ?></div>
+          <?php if (!empty($item['description'])): ?>
+          <div class="task-desc"><?= htmlspecialchars($item['description']) ?></div>
+          <?php endif; ?>
+        </div>
+      </div>
+      <?php endforeach; ?>
+    </div>
+
+    <button class="reset-btn" onclick="resetProgress()">
+      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+        <polyline points="1 4 1 10 7 10"/><path d="M3.51 15a9 9 0 1 0 .49-3.29"/>
+      </svg>
+      Reset Today's Progress
+    </button>
+  <?php endif; ?>
+
+</div>
+
+<nav class="footer-nav">
+  <a href="/" class="active">🏠 Today</a>
+  <a href="/admin.php">⚙️ Admin</a>
+</nav>
+
+<script>
+const TODAY     = '<?= $today ?>';
+const TOTAL     = <?= count($items) ?>;
+const COOKIE_KEY = 'pawgress_' + TODAY;
+
+const messages = [
+  "Let's get training! 💪",
+  "Great start! Keep going! 🐶",
+  "You're on a roll! 🔥",
+  "Almost there! So close! ⭐",
+  "You're crushing it! 🏆",
+];
+
+const emojis = ['🐶','🏃','⭐','🏆'];
+
+function getCookie(name) {
+  const match = document.cookie.match(new RegExp('(?:^|; )' + name + '=([^;]*)'));
+  return match ? JSON.parse(decodeURIComponent(match[1])) : [];
+}
+
+function setCookie(name, value) {
+  const midnight = new Date();
+  midnight.setHours(24, 0, 0, 0);
+  document.cookie = name + '=' + encodeURIComponent(JSON.stringify(value))
+    + '; expires=' + midnight.toUTCString() + '; path=/';
+}
+
+function updateUI() {
+  const checked = getCookie(COOKIE_KEY);
+  let count = 0;
+
+  document.querySelectorAll('.task-card').forEach(card => {
+    const id = card.dataset.id;
+    if (checked.includes(id)) {
+      card.classList.add('done');
+      count++;
+    } else {
+      card.classList.remove('done');
+    }
+  });
+
+  const pct = TOTAL > 0 ? count / TOTAL : 0;
+  const circumference = 2 * Math.PI * 36;
+  const offset = circumference - (pct * circumference);
+
+  const ring = document.getElementById('ringFill');
+  ring.style.strokeDasharray  = circumference;
+  ring.style.strokeDashoffset = offset;
+
+  // Color the ring
+  if (pct >= 1)        ring.style.stroke = '#4CAF82';
+  else if (pct >= 0.5) ring.style.stroke = '#FFD93D';
+  else                 ring.style.stroke = '#FF7B2C';
+
+  // Emoji
+  const emojiIdx = pct >= 1 ? 3 : pct >= 0.66 ? 2 : pct >= 0.33 ? 1 : 0;
+  document.getElementById('ringEmoji').textContent = emojis[emojiIdx];
+
+  // Count
+  document.getElementById('progressCount').innerHTML = count + ' <span>/ ' + TOTAL + '</span>';
+
+  // Bar
+  document.getElementById('progressBar').style.width = (pct * 100) + '%';
+
+  // Message
+  const msgIdx = Math.min(Math.floor(pct * (messages.length - 1) + 0.01), messages.length - 1);
+  document.getElementById('progressMsg').textContent = messages[msgIdx];
+
+  // Complete banner
+  const banner = document.getElementById('completeBanner');
+  if (count === TOTAL && TOTAL > 0) {
+    banner.classList.add('show');
+  } else {
+    banner.classList.remove('show');
+  }
+}
+
+function toggleTask(card) {
+  const id = card.dataset.id;
+  let checked = getCookie(COOKIE_KEY);
+  if (checked.includes(id)) {
+    checked = checked.filter(x => x !== id);
+  } else {
+    checked.push(id);
+  }
+  setCookie(COOKIE_KEY, checked);
+  updateUI();
+}
+
+function resetProgress() {
+  setCookie(COOKIE_KEY, []);
+  updateUI();
+}
+
+// Init
+updateUI();
+</script>
+</body>
+</html>

migrate.php

@@ -0,0 +1,24 @@
+<?php
+require_once __DIR__ . '/db.php';
+
+// Create migrations tracking table
+$pdo->exec("CREATE TABLE IF NOT EXISTS migrations (
+    id INT AUTO_INCREMENT PRIMARY KEY,
+    migration VARCHAR(255) NOT NULL UNIQUE,
+    ran_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
+)");
+
+// Get already-run migrations
+$ran = $pdo->query("SELECT migration FROM migrations")->fetchAll(PDO::FETCH_COLUMN);
+
+// Run pending migrations
+$files = glob(__DIR__ . '/migrations/*.php');
+sort($files);
+
+foreach ($files as $file) {
+    $name = basename($file);
+    if (!in_array($name, $ran)) {
+        require $file;
+        $pdo->prepare("INSERT INTO migrations (migration) VALUES (?)")->execute([$name]);
+    }
+}

migrations/001_create_training_items_table.php

@@ -0,0 +1,61 @@
+<?php
+$pdo->exec("
+    CREATE TABLE IF NOT EXISTS training_items (
+        id INT AUTO_INCREMENT PRIMARY KEY,
+        title VARCHAR(255) NOT NULL,
+        description TEXT NULL,
+        sort_order INT NOT NULL DEFAULT 0,
+        created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+        updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
+    )
+");
+
+// Seed default items if table is empty
+$count = $pdo->query("SELECT COUNT(*) FROM training_items")->fetchColumn();
+if ($count == 0) {
+    $items = [
+        [
+            'Minute 0–3: Calm training',
+            "Sit down somewhere boring.\n\n
+&bull; Ignore her completely\n
+&bull; The second she settles even a little (lays down, sighs, pauses) → quietly say “yes” and give a treat\n
+&bull; No excitement, no talking\n\n
+Goal: teach her that calm = reward",
+            1
+        ],
+        [
+            'Minute 3–6: Leash pressure game',
+            "Inside the house.\n\n
+&bull; Put leash on\n
+&bull; Apply gentle pressure (not a yank, just steady)\n
+&bull; The moment she moves toward you → “yes” + treat\n\n
+Goal: pressure means move back, not fight it",
+            2
+        ],
+        [
+            'Minute 6–8: Micro walk practice',
+            "Inside or just outside your door.\n\n
+&bull; Take a few steps\n
+&bull; If leash tightens → stop immediately\n
+&bull; When she gives slack → move again\n\n
+This is practice, not exercise",
+            3
+        ],
+        [
+            'Minute 8–10: Separation practice',
+            "Step away briefly.\n\n
+&bull; Step out of sight\n
+&bull; Count to 3\n
+&bull; Come back before she reacts\n
+&bull; Stay calm, no excitement when returning\n\n
+Repeat 5–10 times\n\n
+Goal: leaving and returning is no big deal",
+            4
+        ],
+    ];
+
+    $stmt = $pdo->prepare("INSERT INTO training_items (title, description, sort_order) VALUES (?, ?, ?)");
+    foreach ($items as $item) {
+        $stmt->execute($item);
+    }
+}