-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathBlock List Page Stle.txt
More file actions
436 lines (434 loc) · 27 KB
/
Copy pathBlock List Page Stle.txt
File metadata and controls
436 lines (434 loc) · 27 KB
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 class="dark" lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>FocusFlow - Blocklist</title>
<!-- Google Fonts & Material Symbols -->
<link href="https://fonts.googleapis.com" rel="preconnect"/>
<link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect"/>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@500&display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
<!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<!-- Tailwind Configuration -->
<script id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
"colors": {
"tertiary-fixed": "#ffdcc3",
"outline-variant": "#3f4852",
"surface-container-low": "#171c22",
"on-tertiary-container": "#522900",
"on-primary-container": "#00375a",
"outline": "#88919d",
"on-surface": "#dfe3ea",
"on-secondary-fixed": "#00201c",
"on-primary-fixed": "#001d33",
"inverse-primary": "#00629d",
"on-primary-fixed-variant": "#004a77",
"error": "#ffb4ab",
"on-tertiary-fixed-variant": "#6e3900",
"secondary-container": "#03c6b2",
"surface-dim": "#0f1419",
"on-secondary": "#003731",
"background": "#0f1419",
"primary-fixed": "#cfe5ff",
"on-background": "#dfe3ea",
"secondary": "#44e2cd",
"on-secondary-fixed-variant": "#005047",
"on-secondary-container": "#004d44",
"on-tertiary": "#4d2600",
"on-surface-variant": "#bec7d4",
"surface-tint": "#98cbff",
"error-container": "#93000a",
"primary-fixed-dim": "#98cbff",
"primary-container": "#00a3ff",
"tertiary-fixed-dim": "#ffb77d",
"primary": "#98cbff",
"inverse-on-surface": "#2c3137",
"tertiary-container": "#eb8104",
"surface-container": "#1b2026",
"surface": "#0f1419",
"on-primary": "#003354",
"on-error": "#690005",
"surface-bright": "#353a40",
"tertiary": "#ffb77d",
"on-error-container": "#ffdad6",
"surface-container-highest": "#30353b",
"inverse-surface": "#dfe3ea",
"secondary-fixed-dim": "#3cddc7",
"surface-container-high": "#262a30",
"secondary-fixed": "#62fae3",
"on-tertiary-fixed": "#2f1500",
"surface-container-lowest": "#0a0f14",
"surface-variant": "#30353b"
},
"borderRadius": {
"DEFAULT": "0.25rem",
"lg": "0.5rem",
"xl": "0.75rem",
"full": "9999px"
},
"spacing": {
"md": "16px",
"lg": "24px",
"gutter": "20px",
"xs": "4px",
"xl": "40px",
"sidebar_width": "260px",
"unit": "4px",
"sm": "8px",
"max_content_width": "1200px"
},
"fontFamily": {
"display-lg": ["Inter"],
"headline-lg": ["Inter"],
"headline-md": ["Inter"],
"body-md": ["Inter"],
"body-sm": ["Inter"],
"body-lg": ["Inter"],
"label-md": ["JetBrains Mono"],
"label-sm": ["JetBrains Mono"]
},
"fontSize": {
"display-lg": ["48px", { "lineHeight": "1.2", "letterSpacing": "-0.02em", "fontWeight": "700" }],
"headline-lg": ["32px", { "lineHeight": "1.25", "letterSpacing": "-0.01em", "fontWeight": "600" }],
"headline-md": ["24px", { "lineHeight": "1.3", "fontWeight": "600" }],
"body-md": ["16px", { "lineHeight": "1.5", "fontWeight": "400" }],
"body-sm": ["14px", { "lineHeight": "1.5", "fontWeight": "400" }],
"body-lg": ["18px", { "lineHeight": "1.5", "fontWeight": "400" }],
"label-md": ["12px", { "lineHeight": "1", "letterSpacing": "0.05em", "fontWeight": "500" }],
"label-sm": ["10px", { "lineHeight": "1", "letterSpacing": "0.05em", "fontWeight": "500" }]
}
}
}
}
</script>
<style>
.material-symbols-outlined {
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.material-symbols-outlined[data-weight="fill"] {
font-variation-settings: 'FILL' 1;
}
/* Custom scrollbar for deep work aesthetic */
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background: #3f4852; /* outline-variant */
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: #88919d; /* outline */
}
</style>
</head>
<body class="bg-background text-on-background antialiased selection:bg-primary selection:text-on-primary flex h-screen overflow-hidden">
<!-- Shared Component: SideNavBar -->
<aside class="w-sidebar_width h-screen fixed left-0 top-0 bg-surface/80 backdrop-blur-xl border-r border-white/10 z-40 flex flex-col h-full py-lg hidden md:flex">
<!-- Header -->
<div class="px-lg mb-xl flex items-center gap-md">
<div class="w-10 h-10 rounded-full bg-surface-container-high overflow-hidden flex-shrink-0">
<img alt="User profile" class="w-full h-full object-cover" data-alt="A close up portrait of a young professional in a sleek, minimalist tech environment. The lighting is soft and cinematic, emphasizing a calm and focused demeanor suitable for a deep-work application profile picture. The background is a blurred, neutral slate tone." src="https://lh3.googleusercontent.com/aida-public/AB6AXuCV86_pcUTQp5hvp_ZAHH5P47vHvPIWedMkzXIKZTD6wYBFffFPHpOHfkz5UsDsvtRxPfqqxp_LHPadHKUE0Fze3uGtzk0MDhtsncPr5ovVebkvePXgRuKEYRJrqiUZOHthsgQDfPkjxmmMw3Fy95MEomwjYWQaARjJ0bBo3TFm__2B51kJ3MdCwoim3OD2OnCSznv-6btBYInTngbXJv6HRF_Mwem_WKGdD9tQBDk3v9kVQSqB6R8b2MdvncDgA_gm7UoSc71pcw"/>
</div>
<div>
<h1 class="font-headline-md text-headline-md font-bold text-primary">FocusFlow</h1>
<p class="font-label-sm text-label-sm text-on-surface-variant uppercase tracking-widest mt-1">Deep Work Active</p>
</div>
</div>
<!-- CTA -->
<div class="px-lg mb-lg">
<button class="w-full bg-primary text-on-primary py-3 rounded-lg font-label-md text-label-md transition-colors hover:bg-primary-container hover:text-on-primary-container active:scale-95 flex items-center justify-center gap-sm">
<span class="material-symbols-outlined">play_arrow</span>
Start Session
</button>
</div>
<!-- Navigation Tabs -->
<nav class="flex-1 overflow-y-auto px-md">
<ul class="space-y-sm">
<li>
<a class="flex items-center gap-md text-on-surface-variant font-medium pl-5 py-3 rounded-lg hover:bg-white/5 transition-colors duration-300 active:scale-95 transition-transform font-body-md text-body-md" href="#">
<span class="material-symbols-outlined">dashboard</span>
Dashboard
</a>
</li>
<!-- Active Tab: Blocklist -->
<li>
<a class="flex items-center gap-md text-primary font-bold border-l-4 border-primary pl-4 py-3 bg-primary/5 rounded-r-lg hover:bg-white/5 transition-colors duration-300 active:scale-95 transition-transform font-body-md text-body-md" href="#">
<span class="material-symbols-outlined" data-weight="fill">block</span>
Blocklist
</a>
</li>
<li>
<a class="flex items-center gap-md text-on-surface-variant font-medium pl-5 py-3 rounded-lg hover:bg-white/5 transition-colors duration-300 active:scale-95 transition-transform font-body-md text-body-md" href="#">
<span class="material-symbols-outlined">calendar_today</span>
Schedule
</a>
</li>
<li>
<a class="flex items-center gap-md text-on-surface-variant font-medium pl-5 py-3 rounded-lg hover:bg-white/5 transition-colors duration-300 active:scale-95 transition-transform font-body-md text-body-md" href="#">
<span class="material-symbols-outlined">download</span>
Downloads
</a>
</li>
</ul>
</nav>
<!-- Footer Tabs -->
<div class="px-md mt-auto pt-lg border-t border-white/5">
<ul class="space-y-sm">
<li>
<a class="flex items-center gap-md text-on-surface-variant font-medium pl-5 py-3 rounded-lg hover:bg-white/5 transition-colors duration-300 active:scale-95 transition-transform font-body-md text-body-md" href="#">
<span class="material-symbols-outlined">settings</span>
Settings
</a>
</li>
<li>
<a class="flex items-center gap-md text-on-surface-variant font-medium pl-5 py-3 rounded-lg hover:bg-white/5 transition-colors duration-300 active:scale-95 transition-transform font-body-md text-body-md" href="#">
<span class="material-symbols-outlined">security</span>
Privacy
</a>
</li>
</ul>
</div>
</aside>
<!-- Main Content Wrapper -->
<div class="flex-1 flex flex-col min-w-0 md:ml-sidebar_width bg-background relative">
<!-- Shared Component: TopAppBar -->
<header class="h-16 fixed top-0 right-0 left-0 md:left-sidebar_width z-30 bg-surface/80 backdrop-blur-xl border-b border-white/10 flex justify-between items-center px-lg">
<!-- Mobile Brand (Hidden on desktop as per sidebar presence, but good for responsive fallback) -->
<div class="flex items-center gap-md md:hidden">
<span class="material-symbols-outlined text-primary text-2xl">menu</span>
<span class="font-headline-md text-headline-md text-primary font-bold">FocusFlow</span>
</div>
<!-- Empty space for layout balance if search is hidden -->
<div class="hidden md:block flex-1"></div>
<!-- Trailing Actions -->
<div class="flex items-center gap-md">
<button class="text-on-surface-variant hover:text-primary transition-colors cursor-pointer w-10 h-10 rounded-full hover:bg-white/5 flex items-center justify-center">
<span class="material-symbols-outlined">notifications_paused</span>
</button>
<button class="text-on-surface-variant hover:text-primary transition-colors cursor-pointer w-10 h-10 rounded-full hover:bg-white/5 flex items-center justify-center">
<span class="material-symbols-outlined">vpn_lock</span>
</button>
<button class="text-on-surface-variant hover:text-primary transition-colors cursor-pointer w-10 h-10 rounded-full hover:bg-white/5 flex items-center justify-center">
<span class="material-symbols-outlined">account_circle</span>
</button>
</div>
</header>
<!-- Scrollable Content Canvas -->
<main class="flex-1 overflow-y-auto mt-16 p-lg md:p-xl scroll-smooth">
<div class="max-w-max_content_width mx-auto">
<!-- Page Header -->
<div class="mb-xl">
<h1 class="font-display-lg text-display-lg text-on-surface mb-sm tracking-tight">Rules & Restrictions</h1>
<p class="font-body-lg text-body-lg text-on-surface-variant max-w-2xl">Manage the websites and applications that are blocked during active focus sessions. Protect your attention.</p>
</div>
<!-- Control Panel (Quick Add & Search) - Bento Grid Approach -->
<div class="grid grid-cols-1 lg:grid-cols-3 gap-md mb-xl">
<!-- Quick Add Card (Spans 2 cols on lg) -->
<div class="lg:col-span-2 bg-surface-container border border-white/10 rounded-xl p-lg flex flex-col justify-between relative overflow-hidden">
<!-- Decorative background glow -->
<div class="absolute -top-24 -right-24 w-48 h-48 bg-primary/10 rounded-full blur-3xl pointer-events-none"></div>
<div class="mb-md">
<h2 class="font-headline-md text-headline-md text-on-surface flex items-center gap-sm">
<span class="material-symbols-outlined text-primary">add_circle</span>
Quick Add Rule
</h2>
<p class="font-body-sm text-body-sm text-on-surface-variant mt-1">Block a specific URL or local application executable.</p>
</div>
<div class="flex flex-col sm:flex-row gap-md">
<div class="flex-1 relative bg-surface-container-highest rounded-t-md">
<span class="material-symbols-outlined absolute left-3 top-3 text-outline">public</span>
<input class="w-full bg-transparent border-b border-transparent focus:border-primary focus:outline-none pl-10 pr-4 py-3 font-body-md text-body-md text-on-surface transition-colors placeholder:text-outline/50" placeholder="e.g., twitter.com or slack.exe" type="text"/>
</div>
<div class="relative min-w-[140px] bg-surface-container-highest rounded-t-md">
<select class="w-full appearance-none bg-transparent border-b border-transparent focus:border-primary focus:outline-none px-4 py-3 font-body-md text-body-md text-on-surface transition-colors cursor-pointer">
<option class="bg-surface-container text-on-surface" value="website">Website</option>
<option class="bg-surface-container text-on-surface" value="app">Application</option>
<option class="bg-surface-container text-on-surface" value="keyword">Keyword</option>
</select>
<span class="material-symbols-outlined absolute right-3 top-3 text-outline pointer-events-none">expand_more</span>
</div>
<button class="bg-primary text-on-primary px-lg py-3 rounded-lg hover:bg-primary-container hover:text-on-primary-container transition-colors font-label-md text-label-md shadow-sm">
Enforce
</button>
</div>
</div>
<!-- Global Status Card -->
<div class="bg-surface-container border border-white/10 rounded-xl p-lg flex flex-col justify-center items-center text-center relative overflow-hidden">
<div class="absolute inset-0 bg-gradient-to-br from-primary/5 to-transparent pointer-events-none"></div>
<div class="w-16 h-16 rounded-full bg-primary/10 flex items-center justify-center mb-md border border-primary/20">
<span class="material-symbols-outlined text-primary text-3xl">shield_locked</span>
</div>
<h3 class="font-headline-md text-headline-md text-on-surface">Shield Active</h3>
<p class="font-body-sm text-body-sm text-on-surface-variant mt-1">42 active rules configured</p>
</div>
</div>
<!-- Search & Filters Row -->
<div class="flex flex-col sm:flex-row justify-between items-center gap-md mb-lg">
<div class="relative w-full max-w-md bg-surface-container border border-white/10 rounded-lg overflow-hidden focus-within:border-primary/50 transition-colors">
<span class="material-symbols-outlined absolute left-3 top-2.5 text-outline">search</span>
<input class="w-full bg-transparent border-none focus:ring-0 pl-10 pr-4 py-2 font-body-md text-body-md text-on-surface placeholder:text-outline/50" placeholder="Search blocklist..." type="text"/>
</div>
<div class="flex gap-sm w-full sm:w-auto overflow-x-auto pb-2 sm:pb-0 hide-scrollbar">
<button class="whitespace-nowrap px-4 py-1.5 rounded-full bg-surface-container-high border border-primary/30 text-primary font-label-md text-label-md hover:bg-surface-bright transition-colors">All Types</button>
<button class="whitespace-nowrap px-4 py-1.5 rounded-full bg-surface border border-white/10 text-on-surface-variant font-label-md text-label-md hover:border-white/30 transition-colors">Websites</button>
<button class="whitespace-nowrap px-4 py-1.5 rounded-full bg-surface border border-white/10 text-on-surface-variant font-label-md text-label-md hover:border-white/30 transition-colors">Apps</button>
</div>
</div>
<!-- Categorized Lists -->
<div class="space-y-xl">
<!-- Category: Social Media -->
<section>
<h3 class="font-headline-sm text-headline-sm text-on-surface flex items-center gap-sm mb-md px-1">
<span class="material-symbols-outlined text-tertiary">tag</span>
Social Media
<span class="ml-2 px-2 py-0.5 rounded bg-surface-container-high text-outline text-xs font-label-sm">3 items</span>
</h3>
<div class="bg-surface-container border border-white/10 rounded-xl overflow-hidden shadow-sm">
<!-- List Item 1 -->
<div class="flex items-center justify-between p-md border-b border-white/5 last:border-0 hover:bg-white/5 transition-colors group">
<div class="flex items-center gap-lg">
<div class="w-10 h-10 rounded bg-surface-container-highest flex items-center justify-center border border-white/5 text-outline">
<span class="material-symbols-outlined">language</span>
</div>
<div>
<p class="font-body-md text-body-md text-on-surface font-medium">twitter.com</p>
<div class="flex items-center gap-2 mt-0.5">
<span class="inline-block px-1.5 py-0.5 bg-surface-bright text-on-surface-variant font-label-sm text-label-sm rounded text-[10px] tracking-wider uppercase">Website</span>
<span class="font-body-sm text-body-sm text-outline">•</span>
<span class="font-body-sm text-body-sm text-outline">Blocks all subdomains</span>
</div>
</div>
</div>
<div class="flex items-center gap-lg">
<!-- Toggle Switch (Active) -->
<button aria-checked="true" class="relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 focus:ring-offset-background bg-primary" onclick="this.classList.toggle('bg-primary'); this.classList.toggle('bg-surface-container-highest'); this.querySelector('span').classList.toggle('translate-x-5'); this.querySelector('span').classList.toggle('translate-x-0'); this.querySelector('span').classList.toggle('bg-white'); this.querySelector('span').classList.toggle('bg-outline');" role="switch" type="button">
<span class="translate-x-5 pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"></span>
</button>
<button class="text-outline hover:text-error transition-colors opacity-0 group-hover:opacity-100 focus:opacity-100 p-1 rounded hover:bg-white/5">
<span class="material-symbols-outlined">delete</span>
</button>
</div>
</div>
<!-- List Item 2 -->
<div class="flex items-center justify-between p-md border-b border-white/5 last:border-0 hover:bg-white/5 transition-colors group">
<div class="flex items-center gap-lg">
<div class="w-10 h-10 rounded bg-surface-container-highest flex items-center justify-center border border-white/5 text-outline">
<span class="material-symbols-outlined">language</span>
</div>
<div>
<p class="font-body-md text-body-md text-on-surface font-medium">facebook.com</p>
<div class="flex items-center gap-2 mt-0.5">
<span class="inline-block px-1.5 py-0.5 bg-surface-bright text-on-surface-variant font-label-sm text-label-sm rounded text-[10px] tracking-wider uppercase">Website</span>
</div>
</div>
</div>
<div class="flex items-center gap-lg">
<!-- Toggle Switch (Active) -->
<button aria-checked="true" class="relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 focus:ring-offset-background bg-primary" onclick="this.classList.toggle('bg-primary'); this.classList.toggle('bg-surface-container-highest'); this.querySelector('span').classList.toggle('translate-x-5'); this.querySelector('span').classList.toggle('translate-x-0'); this.querySelector('span').classList.toggle('bg-white'); this.querySelector('span').classList.toggle('bg-outline');" role="switch" type="button">
<span class="translate-x-5 pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"></span>
</button>
<button class="text-outline hover:text-error transition-colors opacity-0 group-hover:opacity-100 focus:opacity-100 p-1 rounded hover:bg-white/5">
<span class="material-symbols-outlined">delete</span>
</button>
</div>
</div>
<!-- List Item 3 -->
<div class="flex items-center justify-between p-md border-b border-white/5 last:border-0 hover:bg-white/5 transition-colors group">
<div class="flex items-center gap-lg">
<div class="w-10 h-10 rounded bg-surface-container-highest flex items-center justify-center border border-white/5 text-outline">
<span class="material-symbols-outlined">terminal</span>
</div>
<div>
<p class="font-body-md text-body-md text-on-surface font-medium opacity-60">Discord.exe</p>
<div class="flex items-center gap-2 mt-0.5">
<span class="inline-block px-1.5 py-0.5 bg-surface-bright text-on-surface-variant font-label-sm text-label-sm rounded text-[10px] tracking-wider uppercase opacity-60">App</span>
<span class="font-body-sm text-body-sm text-outline opacity-60">•</span>
<span class="font-body-sm text-body-sm text-outline opacity-60">C:\Users\App\Discord</span>
</div>
</div>
</div>
<div class="flex items-center gap-lg">
<!-- Toggle Switch (Inactive) -->
<button aria-checked="false" class="relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-outline focus:ring-offset-2 focus:ring-offset-background bg-surface-container-highest" onclick="this.classList.toggle('bg-primary'); this.classList.toggle('bg-surface-container-highest'); this.querySelector('span').classList.toggle('translate-x-5'); this.querySelector('span').classList.toggle('translate-x-0'); this.querySelector('span').classList.toggle('bg-white'); this.querySelector('span').classList.toggle('bg-outline');" role="switch" type="button">
<span class="translate-x-0 pointer-events-none inline-block h-5 w-5 transform rounded-full bg-outline shadow ring-0 transition duration-200 ease-in-out"></span>
</button>
<button class="text-outline hover:text-error transition-colors opacity-0 group-hover:opacity-100 focus:opacity-100 p-1 rounded hover:bg-white/5">
<span class="material-symbols-outlined">delete</span>
</button>
</div>
</div>
</div>
</section>
<!-- Category: Entertainment -->
<section>
<h3 class="font-headline-sm text-headline-sm text-on-surface flex items-center gap-sm mb-md px-1">
<span class="material-symbols-outlined text-secondary">movie</span>
Entertainment
<span class="ml-2 px-2 py-0.5 rounded bg-surface-container-high text-outline text-xs font-label-sm">2 items</span>
</h3>
<div class="bg-surface-container border border-white/10 rounded-xl overflow-hidden shadow-sm">
<!-- List Item 1 -->
<div class="flex items-center justify-between p-md border-b border-white/5 last:border-0 hover:bg-white/5 transition-colors group">
<div class="flex items-center gap-lg">
<div class="w-10 h-10 rounded bg-surface-container-highest flex items-center justify-center border border-white/5 text-outline">
<span class="material-symbols-outlined">language</span>
</div>
<div>
<p class="font-body-md text-body-md text-on-surface font-medium">youtube.com</p>
<div class="flex items-center gap-2 mt-0.5">
<span class="inline-block px-1.5 py-0.5 bg-surface-bright text-on-surface-variant font-label-sm text-label-sm rounded text-[10px] tracking-wider uppercase">Website</span>
</div>
</div>
</div>
<div class="flex items-center gap-lg">
<!-- Toggle Switch (Active) -->
<button aria-checked="true" class="relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 focus:ring-offset-background bg-primary" onclick="this.classList.toggle('bg-primary'); this.classList.toggle('bg-surface-container-highest'); this.querySelector('span').classList.toggle('translate-x-5'); this.querySelector('span').classList.toggle('translate-x-0'); this.querySelector('span').classList.toggle('bg-white'); this.querySelector('span').classList.toggle('bg-outline');" role="switch" type="button">
<span class="translate-x-5 pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"></span>
</button>
<button class="text-outline hover:text-error transition-colors opacity-0 group-hover:opacity-100 focus:opacity-100 p-1 rounded hover:bg-white/5">
<span class="material-symbols-outlined">delete</span>
</button>
</div>
</div>
<!-- List Item 2 -->
<div class="flex items-center justify-between p-md border-b border-white/5 last:border-0 hover:bg-white/5 transition-colors group">
<div class="flex items-center gap-lg">
<div class="w-10 h-10 rounded bg-surface-container-highest flex items-center justify-center border border-white/5 text-outline">
<span class="material-symbols-outlined">terminal</span>
</div>
<div>
<p class="font-body-md text-body-md text-on-surface font-medium">Spotify.exe</p>
<div class="flex items-center gap-2 mt-0.5">
<span class="inline-block px-1.5 py-0.5 bg-surface-bright text-on-surface-variant font-label-sm text-label-sm rounded text-[10px] tracking-wider uppercase">App</span>
</div>
</div>
</div>
<div class="flex items-center gap-lg">
<!-- Toggle Switch (Active) -->
<button aria-checked="true" class="relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 focus:ring-offset-background bg-primary" onclick="this.classList.toggle('bg-primary'); this.classList.toggle('bg-surface-container-highest'); this.querySelector('span').classList.toggle('translate-x-5'); this.querySelector('span').classList.toggle('translate-x-0'); this.querySelector('span').classList.toggle('bg-white'); this.querySelector('span').classList.toggle('bg-outline');" role="switch" type="button">
<span class="translate-x-5 pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"></span>
</button>
<button class="text-outline hover:text-error transition-colors opacity-0 group-hover:opacity-100 focus:opacity-100 p-1 rounded hover:bg-white/5">
<span class="material-symbols-outlined">delete</span>
</button>
</div>
</div>
</div>
</section>
</div>
<!-- Bottom spacer for scrolling comfort -->
<div class="h-xl"></div>
</div>
</main>
</div>
</body></html>