recipe-manager/public/share-list.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ForkFolio – Shared Shopping List</title>
  <!-- Google Fonts Outfit & Inter -->
  <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=Inter:wght@300;400;500;600&family=Outfit:wght@400;500;600;700;800&display=swap" rel="stylesheet">
  <!-- Lucide Icons -->
  <script src="https://unpkg.com/lucide@latest"></script>
  <!-- Custom Styling -->
  <link rel="stylesheet" href="style.css">
  <style>
    .share-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 16px 5%;
      border-bottom: 1px solid var(--border-color);
      background-color: var(--bg-nav);
      backdrop-filter: var(--glass-blur);
      position: sticky;
      top: 0;
      z-index: 100;
    }
    .share-container {
      max-width: 1100px;
      margin: 0 auto;
      padding: 30px 20px 80px 20px;
    }
    .list-not-found {
      display: none;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 100px 20px;
      color: var(--text-muted);
    }
    .list-not-found i,
    .list-not-found svg {
      width: 64px;
      height: 64px;
      margin-bottom: 16px;
      color: var(--danger);
    }
    .list-not-found h2 {
      color: var(--text-main);
      font-size: 2rem;
      margin-bottom: 8px;
    }
    .shared-list-banner {
      background-color: var(--bg-card);
      border: 1px solid var(--border-color);
      border-radius: var(--border-radius-lg);
      padding: 24px 28px;
      margin-bottom: 24px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 16px;
      box-shadow: var(--shadow-sm);
    }
  </style>
</head>
<body class="dark-theme">
  <!-- Top Navigation -->
  <header class="share-header">
    <div class="header-logo" style="cursor: pointer;" onclick="window.location.href='/'">
      <div class="logo-icon"><i data-lucide="cooking-pot"></i></div>
      <span class="logo-text">Fork<span>Folio</span></span>
    </div>
    
    <div class="header-actions">
      <a href="/" class="btn btn-primary" title="Go to ForkFolio">
        <i data-lucide="chef-hat"></i> <span>Open ForkFolio</span>
      </a>
      <button class="theme-toggle" id="theme-toggle" title="Toggle Theme">
        <i data-lucide="sun" class="sun-icon"></i>
        <i data-lucide="moon" class="moon-icon"></i>
      </button>
    </div>
  </header>

  <!-- Not Found Fallback -->
  <div class="list-not-found" id="list-not-found-block">
    <i data-lucide="alert-triangle"></i>
    <h2>Shopping List Not Found</h2>
    <p>This shared shopping list link may have been revoked or no longer exists.</p>
    <a href="/" class="btn btn-outline" style="margin-top: 20px;">
      <i data-lucide="home"></i> Back to ForkFolio
    </a>
  </div>

  <!-- Shared Shopping List Main Content -->
  <main class="share-container" id="share-list-block" style="display: none;">
    <section class="shared-list-banner">
      <div>
        <div style="display: flex; align-items: center; gap: 10px; margin-bottom: 6px;">
          <i data-lucide="shopping-cart" style="color: var(--primary); width: 24px; height: 24px;"></i>
          <h1 id="shared-list-title" style="font-size: 1.8rem; color: var(--text-main);">Weekly Groceries</h1>
        </div>
        <span class="creator-badge" style="font-size: 0.85rem; padding: 4px 10px; background: rgba(245, 158, 11, 0.15); border: 1px dashed rgba(245, 158, 11, 0.3); border-radius: 6px; color: #f59e0b; display: inline-flex; align-items: center; gap: 6px;">
          <i data-lucide="user" style="width: 12px; height: 12px;"></i> Shared by <span id="shared-list-creator">@chef</span>
        </span>
      </div>

      <div class="shopping-view-toggles">
        <label class="shopping-consolidate-toggle">
          <input type="checkbox" id="shared-toggle-consolidate" checked>
          <span class="toggle-track"><span class="toggle-thumb"></span></span>
          <span class="toggle-label">Consolidate Ingredients</span>
        </label>

        <select id="shared-group-by" class="shopping-select shopping-select-sm">
          <option value="aisle">Group by Aisle</option>
          <option value="recipe">Group by Recipe</option>
        </select>

        <button type="button" class="btn btn-outline btn-sm" id="btn-shared-copy-text">
          <i data-lucide="copy"></i> <span>Copy Text</span>
        </button>
      </div>
    </section>

    <div id="shared-list-content" class="shopping-aisles-grid"></div>

    <div class="empty-state" id="shared-list-empty" style="display: none;">
      <div class="empty-icon"><i data-lucide="shopping-basket"></i></div>
      <h3>This shopping list is currently empty</h3>
      <p>No items have been added to this list yet.</p>
    </div>
  </main>

  <script src="share-list.js"></script>
</body>
</html>