Deploy from Lumerel

2026-04-05 00:50:02 +00:00
commit b8ddf08f49
9 changed files with 1436 additions and 0 deletions
--- a/admin.php
+++ b/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'); exit;
+    } else {
+        $loginError = 'Wrong password. Try again!';
+    }
+}
+if (isset($_GET['logout'])) {
+    session_destroy();
+    header('Location: /admin'); 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?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" 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>