Vehigo/wishlist.html at main · InnoWebLabs/Vehigo · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Wishlist • VehiGo</title>
  <link rel="icon" href="favicon.svg"/>
  <script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
  <script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
  <style>
    :root{ --bg:#0b0c10; --text:#e7ecf3; --muted:#9aa3b5; --card:#121725; --glass:#1a2132; --brd: rgba(255,255,255,.08); }
    .light{ --bg:#f8fafc; --text:#0b1324; --muted:#5a6475; --card:#ffffff; --glass:#ffffff; --brd: rgba(0,0,0,.06); }
    *{ box-sizing:border-box; }
    body{ margin:0; font-family: Inter, system-ui, Arial; background: var(--bg); color: var(--text); }
    .container{ max-width: 1100px; margin: 0 auto; padding: 20px; }
    h1{ margin: 16px 0 8px; }
    p.muted{ color: var(--muted); }
    .grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(240px,1fr)); gap:16px; margin-top:16px; }
    .card{ background: var(--card); border:1px solid var(--brd); border-radius:14px; overflow:hidden; }
    .card img{ width:100%; height:160px; object-fit:cover; display:block; }
    .card .info{ padding:12px; }
    .title{ font-weight:800; margin:0 0 6px; }
    .price{ color:#6d28d9; font-weight:800; }
    .row{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
    .btn{ border:none; padding:8px 12px; border-radius:10px; font-weight:700; cursor:pointer; }
    .btn-remove{ background:#ef4444; color:#fff; }
    .empty{ text-align:center; padding:40px 10px; color: var(--muted); }
    .actions{ margin-top:16px; display:flex; gap:10px; justify-content:flex-end; }
    .btn-clear{ background:#374151; color:#fff; }
    .btn-explore{ background:#1d4ed8; color:#fff; }
  </style>
</head>
<body>
  <div class="container">
    <h1>Wishlist</h1>
    <p class="muted">Cars you saved from Featured.</p>
    <div id="list" class="grid"></div>
    <div class="actions">
      <button class="btn btn-clear" id="clearBtn">Clear all</button>
      <a class="btn btn-explore" href="featured-car.html">Back to Featured</a>
    </div>
  </div>

  <script>
    const STORAGE_KEY = 'vehigo_wishlist_v1';
    const grid = document.getElementById('list');
    const clearBtn = document.getElementById('clearBtn');

    function getList(){ try { return JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]'); } catch { return []; } }
    function saveList(l){ localStorage.setItem(STORAGE_KEY, JSON.stringify(l)); }
    function remove(id){ const n = getList().filter(x=>x.id!==id); saveList(n); render(); }

    function render(){
      const items = getList();
      if(items.length === 0){
        grid.innerHTML = '<div class="empty">Your wishlist is empty. Browse Featured cars and tap the heart to save.</div>';
        return;
      }
      grid.innerHTML = items.map(({id, title, image, price}) => `
        <div class="card" data-id="${id}">
          <img src="${image}" alt="${title}">
          <div class="info">
            <div class="title">${title}</div>
            <div class="row">
              <div class="price">${price}</div>
              <button class="btn btn-remove" data-remove>Remove</button>
            </div>
          </div>
        </div>
      `).join('');

      grid.querySelectorAll('[data-remove]').forEach(btn => {
        btn.addEventListener('click', () => {
          const id = btn.closest('.card')?.getAttribute('data-id');
          if(id) remove(id);
        });
      });
    }

    clearBtn.addEventListener('click', ()=>{ saveList([]); render(); });
    render();
  </script>
</body>
</html>