peepo-ui-mockups/index.html at main · JamesX88/peepo-ui-mockups · 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
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Peepo — UI Design Collection</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
<style>
  *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

  :root {
    --bg: #07070c;
    --surface: #0f0f16;
    --border: rgba(255,255,255,0.06);
    --text: #e2e2f0;
    --muted: rgba(226,226,240,0.4);
    --accent: #7c3aed;
    --accent-light: #a78bfa;
  }

  html { scroll-behavior: smooth; }
  body { background: var(--bg); font-family: 'Inter', sans-serif; color: var(--text); min-height: 100vh; overflow-x: hidden; }

  /* ─── HEADER ─── */
  .header {
    position: sticky; top: 0; z-index: 100;
    background: rgba(7,7,12,0.92);
    backdrop-filter: blur(24px);
    border-bottom: 1px solid var(--border);
    padding: 0 32px;
    display: flex; align-items: center; justify-content: space-between;
    height: 64px;
  }
  .header-logo {
    font-size: 22px; font-weight: 900; color: #fff; letter-spacing: -0.5px;
    display: flex; align-items: center; gap: 8px;
  }
  .header-logo span { color: var(--accent); }
  .header-logo .frog { font-size: 24px; }
  .header-right { display: flex; align-items: center; gap: 12px; }
  .header-count {
    background: rgba(124,58,237,0.15); border: 1px solid rgba(124,58,237,0.3);
    border-radius: 20px; padding: 5px 14px;
    font-size: 12px; font-weight: 700; color: var(--accent-light);
  }

  /* ─── HERO ─── */
  .hero {
    text-align: center;
    padding: 72px 32px 56px;
    position: relative; overflow: hidden;
  }
  .hero::before {
    content: '';
    position: absolute; top: -100px; left: 50%; transform: translateX(-50%);
    width: 600px; height: 400px;
    background: radial-gradient(ellipse, rgba(124,58,237,0.12) 0%, transparent 70%);
    pointer-events: none;
  }
  .hero-eyebrow {
    display: inline-block; margin-bottom: 16px;
    background: rgba(124,58,237,0.1); border: 1px solid rgba(124,58,237,0.25);
    border-radius: 20px; padding: 6px 18px;
    font-size: 11px; font-weight: 700; color: var(--accent-light);
    letter-spacing: 2px; text-transform: uppercase;
  }
  .hero-title {
    font-size: clamp(36px, 6vw, 64px); font-weight: 900;
    line-height: 1.05; letter-spacing: -2px; color: #fff;
    margin-bottom: 16px;
  }
  .hero-title span { color: var(--accent); }
  .hero-sub {
    font-size: 16px; color: var(--muted); max-width: 560px; margin: 0 auto 32px;
    line-height: 1.6; font-weight: 400;
  }
  .hero-tags { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; }
  .hero-tag {
    background: rgba(255,255,255,0.04); border: 1px solid var(--border);
    border-radius: 20px; padding: 6px 14px;
    font-size: 12px; font-weight: 600; color: var(--muted);
  }

  /* ─── FILTER BAR ─── */
  .filter-bar {
    display: flex; align-items: center; gap: 8px;
    padding: 0 32px 32px;
    overflow-x: auto; scrollbar-width: none;
  }
  .filter-bar::-webkit-scrollbar { display: none; }
  .filter-btn {
    flex-shrink: 0;
    background: rgba(255,255,255,0.04); border: 1px solid var(--border);
    border-radius: 20px; padding: 7px 16px;
    font-size: 12px; font-weight: 600; color: var(--muted);
    cursor: pointer; transition: all 0.15s; white-space: nowrap;
  }
  .filter-btn:hover { background: rgba(255,255,255,0.07); color: var(--text); }
  .filter-btn.active {
    background: rgba(124,58,237,0.15); border-color: rgba(124,58,237,0.4);
    color: var(--accent-light);
  }

  /* ─── GRID ─── */
  .grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
    gap: 28px;
    padding: 0 32px 80px;
    max-width: 1800px; margin: 0 auto;
  }

  .card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 20px; overflow: hidden;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
  }
  .card:hover {
    transform: translateY(-4px);
    border-color: rgba(124,58,237,0.3);
    box-shadow: 0 12px 40px rgba(0,0,0,0.4);
  }

  .card-header { padding: 20px 22px 14px; display: flex; align-items: flex-start; justify-content: space-between; }
  .card-num { font-size: 10px; font-weight: 700; color: rgba(255,255,255,0.2); letter-spacing: 2px; text-transform: uppercase; margin-bottom: 4px; }
  .card-name { font-size: 17px; font-weight: 800; color: #fff; }
  .card-tag {
    font-size: 10px; font-weight: 700; padding: 4px 12px; border-radius: 20px;
    text-transform: uppercase; letter-spacing: 1px; flex-shrink: 0; margin-top: 2px;
  }

  .card-desc { padding: 0 22px 16px; font-size: 12px; color: var(--muted); line-height: 1.6; }

  .card-frame-wrap { padding: 0 22px 20px; display: flex; justify-content: center; }
  .card-frame {
    width: 390px; height: 680px;
    border-radius: 14px; overflow: hidden;
    border: 1px solid rgba(255,255,255,0.06);
    position: relative;
  }
  .card-frame iframe {
    width: 390px; height: 844px;
    border: none;
    transform-origin: top left;
    transform: scale(0.807);
    pointer-events: none;
  }

  .card-footer {
    padding: 14px 22px;
    border-top: 1px solid var(--border);
    display: flex; gap: 10px;
  }
  .btn-open {
    flex: 1; background: rgba(255,255,255,0.05); border: 1px solid var(--border);
    border-radius: 10px; padding: 10px; font-size: 13px; font-weight: 600;
    color: var(--text); text-align: center; text-decoration: none;
    transition: background 0.15s; display: block;
  }
  .btn-open:hover { background: rgba(255,255,255,0.09); }
  .btn-fav {
    width: 42px; height: 42px; border-radius: 10px;
    background: rgba(255,255,255,0.04); border: 1px solid var(--border);
    display: flex; align-items: center; justify-content: center;
    font-size: 18px; cursor: pointer; transition: all 0.15s; flex-shrink: 0;
  }
  .btn-fav:hover { background: rgba(255,100,100,0.1); border-color: rgba(255,100,100,0.3); }
  .btn-fav.faved { background: rgba(255,100,100,0.12); border-color: rgba(255,100,100,0.4); }

  /* Tag color themes */
  .tag-dark { background: rgba(168,85,247,0.12); color: #c084fc; }
  .tag-glass { background: rgba(236,72,153,0.12); color: #f472b6; }
  .tag-premium { background: rgba(184,134,11,0.12); color: #d4a017; }
  .tag-retro { background: rgba(255,107,255,0.12); color: #ff6bff; }
  .tag-bento { background: rgba(124,58,237,0.12); color: #a78bfa; }
  .tag-cyber { background: rgba(0,255,136,0.12); color: #00ff88; }
  .tag-pastel { background: rgba(244,114,182,0.12); color: #f472b6; }
  .tag-dashboard { background: rgba(99,102,241,0.12); color: #818cf8; }
  .tag-brutalist { background: rgba(255,51,0,0.12); color: #ff5533; }
  .tag-aurora { background: rgba(56,189,248,0.12); color: #38bdf8; }
  .tag-synthwave { background: rgba(255,0,255,0.12); color: #ff66ff; }
  .tag-tactical { background: rgba(143,168,50,0.12); color: #8fa832; }
  .tag-holo { background: rgba(255,110,199,0.12); color: #ff6ec7; }
  .tag-blueprint { background: rgba(100,160,255,0.12); color: #64a0ff; }
  .tag-vaporwave { background: rgba(100,255,255,0.12); color: #64ffff; }
  .tag-carbon { background: rgba(255,100,0,0.12); color: #ff6400; }
  .tag-noir { background: rgba(0,180,255,0.12); color: #00b4ff; }
  .tag-web3 { background: rgba(0,255,100,0.12); color: #00ff64; }
  .tag-sports { background: rgba(232,200,64,0.12); color: #e8c840; }
  .tag-obsidian { background: rgba(124,58,237,0.12); color: #a78bfa; }

  /* ─── FOOTER ─── */
  .footer {
    text-align: center; padding: 40px 32px;
    border-top: 1px solid var(--border);
    color: rgba(226,226,240,0.2); font-size: 13px;
  }
  .footer strong { color: rgba(226,226,240,0.5); }

  /* ─── HIDDEN ─── */
  .card.hidden { display: none; }

  /* ─── RESPONSIVE ─── */
  @media (max-width: 900px) {
    .grid { grid-template-columns: 1fr; padding: 0 16px 80px; }
    .header { padding: 0 16px; }
    .hero { padding: 48px 16px 40px; }
    .filter-bar { padding: 0 16px 24px; }
    .card-frame-wrap { padding: 0 16px 16px; }
    .card-frame { width: 100%; max-width: 390px; }
  }
</style>
</head>
<body>

<header class="header">
  <div class="header-logo">
    <span class="frog">🐸</span>
    pee<span>po</span>
  </div>
  <div class="header-right">
    <div class="header-count">20 Designs</div>
  </div>
</header>

<section class="hero">
  <div class="hero-eyebrow">Streamer Loyalty Platform</div>
  <h1 class="hero-title">Peepo <span>UI</span> Collection</h1>
  <p class="hero-sub">20 unique, mobile-first design directions for the Peepo streamer loyalty platform. Tap any design to view it full screen.</p>
  <div class="hero-tags">
    <div class="hero-tag">390px Mobile-First</div>
    <div class="hero-tag">Twitch · Kick · YouTube</div>
    <div class="hero-tag">Milestone Rewards</div>
    <div class="hero-tag">Physical Merch</div>
    <div class="hero-tag">Gift Drops</div>
    <div class="hero-tag">Loyalty Tiers</div>
  </div>
</section>

<div class="filter-bar">
  <button class="filter-btn active" onclick="filterCards('all')">All 20</button>
  <button class="filter-btn" onclick="filterCards('dark')">Dark</button>
  <button class="filter-btn" onclick="filterCards('retro')">Retro</button>
  <button class="filter-btn" onclick="filterCards('cyber')">Cyber</button>
  <button class="filter-btn" onclick="filterCards('premium')">Premium</button>
  <button class="filter-btn" onclick="filterCards('light')">Light</button>
</div>

<div class="grid" id="grid">

  <!-- 01 -->
  <div class="card" data-tags="dark cyber">
    <div class="card-header"><div><div class="card-num">Design 01</div><div class="card-name">Dark Neon Gamer</div></div><div class="card-tag tag-dark">Dark</div></div>
    <div class="card-desc">Electric purple and cyan on pure black. SVG progress rings, glowing milestone cards, floating frog FAB. The quintessential gaming aesthetic.</div>
    <div class="card-frame-wrap"><div class="card-frame"><iframe src="mockup1.html" scrolling="yes" loading="lazy"></iframe></div></div>
    <div class="card-footer"><a href="mockup1.html" target="_blank" class="btn-open">Open Full Screen</a><div class="btn-fav" onclick="toggleFav(this)">🤍</div></div>
  </div>

  <!-- 02 -->
  <div class="card" data-tags="dark premium">
    <div class="card-header"><div><div class="card-num">Design 02</div><div class="card-name">Glassmorphism Gradient</div></div><div class="card-tag tag-glass">Glass</div></div>
    <div class="card-desc">Frosted glass cards over a purple-to-pink gradient. Loyalty card with live progress bar, platform pills, and animated gift drop banner.</div>
    <div class="card-frame-wrap"><div class="card-frame"><iframe src="mockup2.html" scrolling="yes" loading="lazy"></iframe></div></div>
    <div class="card-footer"><a href="mockup2.html" target="_blank" class="btn-open">Open Full Screen</a><div class="btn-fav" onclick="toggleFav(this)">🤍</div></div>
  </div>

  <!-- 03 -->
  <div class="card" data-tags="premium light">
    <div class="card-header"><div><div class="card-num">Design 03</div><div class="card-name">Clean White Premium</div></div><div class="card-tag tag-premium">Premium</div></div>
    <div class="card-desc">Cream/white with gold accents. Credit-card style membership card, Playfair serif typography, luxury product grid. Sophisticated and brand-ready.</div>
    <div class="card-frame-wrap"><div class="card-frame"><iframe src="mockup3.html" scrolling="yes" loading="lazy"></iframe></div></div>
    <div class="card-footer"><a href="mockup3.html" target="_blank" class="btn-open">Open Full Screen</a><div class="btn-fav" onclick="toggleFav(this)">🤍</div></div>
  </div>

  <!-- 04 -->
  <div class="card" data-tags="retro">
    <div class="card-header"><div><div class="card-num">Design 04</div><div class="card-name">Retro Pixel Arcade</div></div><div class="card-tag tag-retro">Retro</div></div>
    <div class="card-desc">8-bit pixel art with Press Start 2P font, CRT scanlines, animated pixel borders. Achievement system styled like classic game unlocks.</div>
    <div class="card-frame-wrap"><div class="card-frame"><iframe src="mockup4.html" scrolling="yes" loading="lazy"></iframe></div></div>
    <div class="card-footer"><a href="mockup4.html" target="_blank" class="btn-open">Open Full Screen</a><div class="btn-fav" onclick="toggleFav(this)">🤍</div></div>
  </div>

  <!-- 05 -->
  <div class="card" data-tags="light premium">
    <div class="card-header"><div><div class="card-num">Design 05</div><div class="card-name">Bento Grid</div></div><div class="card-tag tag-bento">Modern</div></div>
    <div class="card-desc">Apple-inspired bento box grid. Colorful metric blocks, Syne typeface, bold color-coded cards. Very 2025, editorial and clean.</div>
    <div class="card-frame-wrap"><div class="card-frame"><iframe src="mockup5.html" scrolling="yes" loading="lazy"></iframe></div></div>
    <div class="card-footer"><a href="mockup5.html" target="_blank" class="btn-open">Open Full Screen</a><div class="btn-fav" onclick="toggleFav(this)">🤍</div></div>
  </div>

  <!-- 06 -->
  <div class="card" data-tags="cyber dark retro">
    <div class="card-header"><div><div class="card-num">Design 06</div><div class="card-name">Cyberpunk Neon</div></div><div class="card-tag tag-cyber">Cyber</div></div>
    <div class="card-desc">Matrix-green on near-black with grid overlay. Terminal-style user readout, Orbitron typeface, polygon UI elements, blinking cursor.</div>
    <div class="card-frame-wrap"><div class="card-frame"><iframe src="mockup6.html" scrolling="yes" loading="lazy"></iframe></div></div>
    <div class="card-footer"><a href="mockup6.html" target="_blank" class="btn-open">Open Full Screen</a><div class="btn-fav" onclick="toggleFav(this)">🤍</div></div>
  </div>

  <!-- 07 -->
  <div class="card" data-tags="light">
    <div class="card-header"><div><div class="card-num">Design 07</div><div class="card-name">Soft Pastel Y2K</div></div><div class="card-tag tag-pastel">Pastel</div></div>
    <div class="card-desc">Bubblegum pink and lavender, Nunito rounded type. Bubble stat cards, pill buttons, gradient welcome banner. Cozy and inclusive.</div>
    <div class="card-frame-wrap"><div class="card-frame"><iframe src="mockup7.html" scrolling="yes" loading="lazy"></iframe></div></div>
    <div class="card-footer"><a href="mockup7.html" target="_blank" class="btn-open">Open Full Screen</a><div class="btn-fav" onclick="toggleFav(this)">🤍</div></div>
  </div>

  <!-- 08 -->
  <div class="card" data-tags="dark cyber premium">
    <div class="card-header"><div><div class="card-num">Design 08</div><div class="card-name">Streamer Dashboard</div></div><div class="card-tag tag-dashboard">Dashboard</div></div>
    <div class="card-desc">Dark slate analytics-forward design. IBM Plex Mono, live stream indicator, tier progression node map, platform sync cards, milestone table.</div>
    <div class="card-frame-wrap"><div class="card-frame"><iframe src="mockup8.html" scrolling="yes" loading="lazy"></iframe></div></div>
    <div class="card-footer"><a href="mockup8.html" target="_blank" class="btn-open">Open Full Screen</a><div class="btn-fav" onclick="toggleFav(this)">🤍</div></div>
  </div>

  <!-- 09 -->
  <div class="card" data-tags="light premium">
    <div class="card-header"><div><div class="card-num">Design 09</div><div class="card-name">Brutalist Bold</div></div><div class="card-tag tag-brutalist">Brutalist</div></div>
    <div class="card-desc">Black, white, and red with Anton display type. Raw editorial grid, thick borders, numbered milestone blocks, stark merch grid. Unapologetic.</div>
    <div class="card-frame-wrap"><div class="card-frame"><iframe src="mockup9.html" scrolling="yes" loading="lazy"></iframe></div></div>
    <div class="card-footer"><a href="mockup9.html" target="_blank" class="btn-open">Open Full Screen</a><div class="btn-fav" onclick="toggleFav(this)">🤍</div></div>
  </div>

  <!-- 10 -->
  <div class="card" data-tags="dark premium">
    <div class="card-header"><div><div class="card-num">Design 10</div><div class="card-name">Aurora Dark Premium</div></div><div class="card-tag tag-aurora">Aurora</div></div>
    <div class="card-desc">Deep navy with animated aurora blobs. Holographic shimmer loyalty card, glowing milestone cards, polished glass bottom nav. Ultra-premium.</div>
    <div class="card-frame-wrap"><div class="card-frame"><iframe src="mockup10.html" scrolling="yes" loading="lazy"></iframe></div></div>
    <div class="card-footer"><a href="mockup10.html" target="_blank" class="btn-open">Open Full Screen</a><div class="btn-fav" onclick="toggleFav(this)">🤍</div></div>
  </div>

  <!-- 11 -->
  <div class="card" data-tags="cyber dark retro">
    <div class="card-header"><div><div class="card-num">Design 11</div><div class="card-name">Neon Synthwave</div></div><div class="card-tag tag-synthwave">Synthwave</div></div>
    <div class="card-desc">80s synthwave with magenta/cyan palette, animated horizon grid floor, Audiowide typeface, glowing neon progress bars and platform cards.</div>
    <div class="card-frame-wrap"><div class="card-frame"><iframe src="mockup11.html" scrolling="yes" loading="lazy"></iframe></div></div>
    <div class="card-footer"><a href="mockup11.html" target="_blank" class="btn-open">Open Full Screen</a><div class="btn-fav" onclick="toggleFav(this)">🤍</div></div>
  </div>

  <!-- 12 -->
  <div class="card" data-tags="dark cyber">
    <div class="card-header"><div><div class="card-num">Design 12</div><div class="card-name">Military Tactical</div></div><div class="card-tag tag-tactical">Tactical</div></div>
    <div class="card-desc">Olive/khaki military HUD with Barlow Condensed, mission-log milestones, classified rank card, intel sync platforms, and supply drop shop.</div>
    <div class="card-frame-wrap"><div class="card-frame"><iframe src="mockup12.html" scrolling="yes" loading="lazy"></iframe></div></div>
    <div class="card-footer"><a href="mockup12.html" target="_blank" class="btn-open">Open Full Screen</a><div class="btn-fav" onclick="toggleFav(this)">🤍</div></div>
  </div>

  <!-- 13 -->
  <div class="card" data-tags="dark premium">
    <div class="card-header"><div><div class="card-num">Design 13</div><div class="card-name">Holographic Foil</div></div><div class="card-tag tag-holo">Holographic</div></div>
    <div class="card-desc">Iridescent rainbow foil animation on dark base. Animated shimmer collector card, tier badge collection row, Bebas Neue display type. Luxury collector feel.</div>
    <div class="card-frame-wrap"><div class="card-frame"><iframe src="mockup13.html" scrolling="yes" loading="lazy"></iframe></div></div>
    <div class="card-footer"><a href="mockup13.html" target="_blank" class="btn-open">Open Full Screen</a><div class="btn-fav" onclick="toggleFav(this)">🤍</div></div>
  </div>

  <!-- 14 -->
  <div class="card" data-tags="dark cyber">
    <div class="card-header"><div><div class="card-num">Design 14</div><div class="card-name">Midnight Blueprint</div></div><div class="card-tag tag-blueprint">Blueprint</div></div>
    <div class="card-desc">Dark navy with blueprint grid lines and Roboto Mono. Technical drawing aesthetic with schematic-style platform cards, annotated milestone rows.</div>
    <div class="card-frame-wrap"><div class="card-frame"><iframe src="mockup14.html" scrolling="yes" loading="lazy"></iframe></div></div>
    <div class="card-footer"><a href="mockup14.html" target="_blank" class="btn-open">Open Full Screen</a><div class="btn-fav" onclick="toggleFav(this)">🤍</div></div>
  </div>

  <!-- 15 -->
  <div class="card" data-tags="retro cyber">
    <div class="card-header"><div><div class="card-num">Design 15</div><div class="card-name">Vaporwave Arcade</div></div><div class="card-tag tag-vaporwave">Vaporwave</div></div>
    <div class="card-desc">Pastel purple/teal vaporwave with VT323 font, perspective grid floor, pixelated progress bars, and retro 3D text shadow effects. Aesthetic.</div>
    <div class="card-frame-wrap"><div class="card-frame"><iframe src="mockup15.html" scrolling="yes" loading="lazy"></iframe></div></div>
    <div class="card-footer"><a href="mockup15.html" target="_blank" class="btn-open">Open Full Screen</a><div class="btn-fav" onclick="toggleFav(this)">🤍</div></div>
  </div>

  <!-- 16 -->
  <div class="card" data-tags="dark premium">
    <div class="card-header"><div><div class="card-num">Design 16</div><div class="card-name">Carbon Fiber</div></div><div class="card-tag tag-carbon">Carbon</div></div>
    <div class="card-desc">Carbon fiber texture background with orange racing accents. Teko/Rajdhani typefaces, driver-number card, lap-numbered milestones. Motorsport energy.</div>
    <div class="card-frame-wrap"><div class="card-frame"><iframe src="mockup16.html" scrolling="yes" loading="lazy"></iframe></div></div>
    <div class="card-footer"><a href="mockup16.html" target="_blank" class="btn-open">Open Full Screen</a><div class="btn-fav" onclick="toggleFav(this)">🤍</div></div>
  </div>

  <!-- 17 -->
  <div class="card" data-tags="dark cyber premium">
    <div class="card-header"><div><div class="card-num">Design 17</div><div class="card-name">Neon Noir</div></div><div class="card-tag tag-noir">Noir</div></div>
    <div class="card-desc">Dark charcoal with electric blue and amber. Animated rain drops, case-file profile card, DM Mono typography. Detective noir meets loyalty platform.</div>
    <div class="card-frame-wrap"><div class="card-frame"><iframe src="mockup17.html" scrolling="yes" loading="lazy"></iframe></div></div>
    <div class="card-footer"><a href="mockup17.html" target="_blank" class="btn-open">Open Full Screen</a><div class="btn-fav" onclick="toggleFav(this)">🤍</div></div>
  </div>

  <!-- 18 -->
  <div class="card" data-tags="dark cyber">
    <div class="card-header"><div><div class="card-num">Design 18</div><div class="card-name">Web3 Dark</div></div><div class="card-tag tag-web3">Web3</div></div>
    <div class="card-desc">Matrix-green on near-black with IBM Plex Mono. Token wallet balance, NFT milestone grid with rarity badges, blockchain-native visual language.</div>
    <div class="card-frame-wrap"><div class="card-frame"><iframe src="mockup18.html" scrolling="yes" loading="lazy"></iframe></div></div>
    <div class="card-footer"><a href="mockup18.html" target="_blank" class="btn-open">Open Full Screen</a><div class="btn-fav" onclick="toggleFav(this)">🤍</div></div>
  </div>

  <!-- 19 -->
  <div class="card" data-tags="premium light">
    <div class="card-header"><div><div class="card-num">Design 19</div><div class="card-name">Sports Card</div></div><div class="card-tag tag-sports">Sports</div></div>
    <div class="card-desc">Trading card collector aesthetic. Navy/gold palette with foil shimmer card, serial number, Oswald typeface, and clean white milestone cards.</div>
    <div class="card-frame-wrap"><div class="card-frame"><iframe src="mockup19.html" scrolling="yes" loading="lazy"></iframe></div></div>
    <div class="card-footer"><a href="mockup19.html" target="_blank" class="btn-open">Open Full Screen</a><div class="btn-fav" onclick="toggleFav(this)">🤍</div></div>
  </div>

  <!-- 20 -->
  <div class="card" data-tags="dark premium cyber">
    <div class="card-header"><div><div class="card-num">Design 20</div><div class="card-name">Obsidian Pro</div></div><div class="card-tag tag-obsidian">Obsidian</div></div>
    <div class="card-desc">Ultra-dark obsidian with subtle purple glow. Live viewer count banner, tier progress node map, Inter 900 weight, refined analytics dashboard feel.</div>
    <div class="card-frame-wrap"><div class="card-frame"><iframe src="mockup20.html" scrolling="yes" loading="lazy"></iframe></div></div>
    <div class="card-footer"><a href="mockup20.html" target="_blank" class="btn-open">Open Full Screen</a><div class="btn-fav" onclick="toggleFav(this)">🤍</div></div>
  </div>

</div>

<footer class="footer">
  <strong>Peepo</strong> — Streamer Loyalty Platform · 20 Mobile-First UI Concepts · 2025
</footer>

<script>
  function filterCards(tag) {
    document.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active'));
    event.target.classList.add('active');
    document.querySelectorAll('.card').forEach(card => {
      if (tag === 'all') { card.classList.remove('hidden'); return; }
      const tags = card.dataset.tags || '';
      card.classList.toggle('hidden', !tags.includes(tag));
    });
  }

  function toggleFav(btn) {
    if (btn.textContent === '🤍') { btn.textContent = '❤️'; btn.classList.add('faved'); }
    else { btn.textContent = '🤍'; btn.classList.remove('faved'); }
  }
</script>
</body>
</html>