Section
Prompt Library — Neo-Brutalism
Brutalist gallery of reusable prompt templates — hard black borders, offset drop shadows, and flat bright accents per category. Includes category filter chips (Writing, Code, Analysis, Image), live search, and a working copy-to-clipboard button on every card with a brief 'Copied!' state.
- Section
- Tailwind
- HTML
- MIT
Preview
Live section
9:41 100%
devsnips.dev/library/tailwind/sections/ai-product/prompt-library/neo-brutalism/ fluid · no fixed width 100%
Install
Add to your project
npx devsnips add Tailwind/Sections/AI-Product/prompt-library/neo-brutalism Tailwind/Sections/AI-Product/prompt-library/neo-brutalism <!--
Snippet Name: Prompt Library — Neo-Brutalism
Description: Brutalist gallery of reusable prompt templates — category filter chips, a grid of prompt cards, and a working copy-to-clipboard button per card.
Author: DevSnips Contributors
Usage Example: Drop into any app shell as a prompt template gallery. Filter chips and copy buttons are fully wired in preview.html.
-->
<div class="relative w-full" data-promptlib="nb">
<!-- Panel -->
<div class="border-2 border-black bg-white shadow-[8px_8px_0_0_#000]">
<!-- Header -->
<div class="flex flex-wrap items-center justify-between gap-3 border-b-2 border-black bg-[#FF4FA3] px-5 py-4">
<div class="flex items-center gap-3">
<div class="flex h-11 w-11 items-center justify-center border-2 border-black bg-white text-black shadow-[3px_3px_0_0_#000]">
<svg class="h-6 w-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true">
<path d="M4 4h11l5 5v11H4z" /><path d="M15 4v5h5" /><path d="M8 12h8M8 16h5" />
</svg>
</div>
<div>
<p class="font-archivo text-base font-extrabold uppercase leading-none tracking-tight">Prompt Library</p>
<p class="mt-1 font-mono text-[11px] font-bold uppercase tracking-wider text-black/70">
<span class="inline-block h-2 w-2 border border-black bg-[#FFE600]"></span>
<span data-count>9</span> TEMPLATES · COPY-READY
</p>
</div>
</div>
<div class="flex items-center gap-2">
<div class="relative">
<input
type="search"
name="q"
placeholder="Search prompts…"
aria-label="Search prompts"
class="w-44 border-2 border-black bg-[#FFFDF5] px-3 py-2 font-archivo text-[13px] font-medium placeholder:text-black/40 focus:outline-none focus-visible:ring-2 focus-visible:ring-black focus-visible:ring-offset-2 sm:w-56"
data-search
/>
</div>
</div>
</div>
<!-- Filter chips -->
<div class="flex flex-wrap gap-2 border-b-2 border-black bg-[#FFFDF5] px-5 py-4" role="tablist" aria-label="Filter prompts by category" data-filters>
<button type="button" role="tab" aria-selected="true" data-filter="all" class="filter-chip border-2 border-black bg-black px-3 py-1.5 font-mono text-[11px] font-bold uppercase tracking-wider text-white shadow-[3px_3px_0_0_#000] transition-transform duration-100 hover:translate-x-[2px] hover:translate-y-[2px] hover:shadow-[1px_1px_0_0_#000] focus:outline-none focus-visible:ring-2 focus-visible:ring-black focus-visible:ring-offset-2">All</button>
<button type="button" role="tab" aria-selected="false" data-filter="writing" class="filter-chip border-2 border-black bg-white px-3 py-1.5 font-mono text-[11px] font-bold uppercase tracking-wider text-black shadow-[3px_3px_0_0_#000] transition-transform duration-100 hover:translate-x-[2px] hover:translate-y-[2px] hover:shadow-[1px_1px_0_0_#000] focus:outline-none focus-visible:ring-2 focus-visible:ring-black focus-visible:ring-offset-2">Writing</button>
<button type="button" role="tab" aria-selected="false" data-filter="code" class="filter-chip border-2 border-black bg-white px-3 py-1.5 font-mono text-[11px] font-bold uppercase tracking-wider text-black shadow-[3px_3px_0_0_#000] transition-transform duration-100 hover:translate-x-[2px] hover:translate-y-[2px] hover:shadow-[1px_1px_0_0_#000] focus:outline-none focus-visible:ring-2 focus-visible:ring-black focus-visible:ring-offset-2">Code</button>
<button type="button" role="tab" aria-selected="false" data-filter="analysis" class="filter-chip border-2 border-black bg-white px-3 py-1.5 font-mono text-[11px] font-bold uppercase tracking-wider text-black shadow-[3px_3px_0_0_#000] transition-transform duration-100 hover:translate-x-[2px] hover:translate-y-[2px] hover:shadow-[1px_1px_0_0_#000] focus:outline-none focus-visible:ring-2 focus-visible:ring-black focus-visible:ring-offset-2">Analysis</button>
<button type="button" role="tab" aria-selected="false" data-filter="image" class="filter-chip border-2 border-black bg-white px-3 py-1.5 font-mono text-[11px] font-bold uppercase tracking-wider text-black shadow-[3px_3px_0_0_#000] transition-transform duration-100 hover:translate-x-[2px] hover:translate-y-[2px] hover:shadow-[1px_1px_0_0_#000] focus:outline-none focus-visible:ring-2 focus-visible:ring-black focus-visible:ring-offset-2">Image</button>
</div>
<!-- Grid -->
<div class="grid grid-cols-1 gap-4 bg-[#FFFDF5] p-5 sm:grid-cols-2 lg:grid-cols-3" data-grid>
<!-- Card: Writing -->
<article class="prompt-card group flex flex-col border-2 border-black bg-white shadow-[4px_4px_0_0_#000] transition-transform duration-100 hover:translate-x-[2px] hover:translate-y-[2px] hover:shadow-[2px_2px_0_0_#000]" data-category="writing">
<div class="flex items-center justify-between gap-2 border-b-2 border-black bg-[#FFE600] px-4 py-2">
<span class="font-mono text-[10px] font-bold uppercase tracking-wider text-black">Writing</span>
<span class="font-mono text-[10px] font-bold uppercase tracking-wider text-black/50">#01</span>
</div>
<div class="flex flex-1 flex-col px-4 py-4">
<h3 class="font-archivo text-[15px] font-extrabold uppercase leading-tight tracking-tight">Cold Email Hook</h3>
<p class="mt-2 flex-1 font-archivo text-[13px] font-medium leading-snug text-black/70">Craft a punchy first sentence that earns a reply within three seconds.</p>
<button type="button" class="copy-btn mt-4 flex items-center justify-center gap-2 border-2 border-black bg-black px-3 py-2 font-mono text-[11px] font-bold uppercase tracking-wider text-white shadow-[3px_3px_0_0_#FFE600] transition-transform duration-100 hover:translate-x-[2px] hover:translate-y-[2px] hover:shadow-[1px_1px_0_0_#FFE600] focus:outline-none focus-visible:ring-2 focus-visible:ring-[#FFE600] focus-visible:ring-offset-2" data-prompt="Write a cold email opening line for {{product}} targeting {{role}}. One sentence, curiosity-driven, no more than 12 words. Avoid hype words.">
<svg class="h-3.5 w-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><rect x="9" y="9" width="11" height="11" rx="0" /><path d="M5 15V5h10" /></svg>
<span class="copy-label">Copy</span>
</button>
</div>
</article>
<!-- Card: Code -->
<article class="prompt-card group flex flex-col border-2 border-black bg-white shadow-[4px_4px_0_0_#000] transition-transform duration-100 hover:translate-x-[2px] hover:translate-y-[2px] hover:shadow-[2px_2px_0_0_#000]" data-category="code">
<div class="flex items-center justify-between gap-2 border-b-2 border-black bg-[#00C2FF] px-4 py-2">
<span class="font-mono text-[10px] font-bold uppercase tracking-wider text-black">Code</span>
<span class="font-mono text-[10px] font-bold uppercase tracking-wider text-black/50">#02</span>
</div>
<div class="flex flex-1 flex-col px-4 py-4">
<h3 class="font-archivo text-[15px] font-extrabold uppercase leading-tight tracking-tight">Code Reviewer</h3>
<p class="mt-2 flex-1 font-archivo text-[13px] font-medium leading-snug text-black/70">Review a function for bugs, edge cases, and readability — list issues by severity.</p>
<button type="button" class="copy-btn mt-4 flex items-center justify-center gap-2 border-2 border-black bg-black px-3 py-2 font-mono text-[11px] font-bold uppercase tracking-wider text-white shadow-[3px_3px_0_0_#00C2FF] transition-transform duration-100 hover:translate-x-[2px] hover:translate-y-[2px] hover:shadow-[1px_1px_0_0_#00C2FF] focus:outline-none focus-visible:ring-2 focus-visible:ring-[#00C2FF] focus-visible:ring-offset-2" data-prompt="Review the following code for bugs, security, and readability. Report findings as a list grouped by severity (critical / warning / nit). Suggest concrete fixes with code snippets. CODE: {{code}}">
<svg class="h-3.5 w-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><rect x="9" y="9" width="11" height="11" rx="0" /><path d="M5 15V5h10" /></svg>
<span class="copy-label">Copy</span>
</button>
</div>
</article>
<!-- Card: Analysis -->
<article class="prompt-card group flex flex-col border-2 border-black bg-white shadow-[4px_4px_0_0_#000] transition-transform duration-100 hover:translate-x-[2px] hover:translate-y-[2px] hover:shadow-[2px_2px_0_0_#000]" data-category="analysis">
<div class="flex items-center justify-between gap-2 border-b-2 border-black bg-[#00E676] px-4 py-2">
<span class="font-mono text-[10px] font-bold uppercase tracking-wider text-black">Analysis</span>
<span class="font-mono text-[10px] font-bold uppercase tracking-wider text-black/50">#03</span>
</div>
<div class="flex flex-1 flex-col px-4 py-4">
<h3 class="font-archivo text-[15px] font-extrabold uppercase leading-tight tracking-tight">Data Summarizer</h3>
<p class="mt-2 flex-1 font-archivo text-[13px] font-medium leading-snug text-black/70">Extract three key insights, a trend, and one risk from raw data.</p>
<button type="button" class="copy-btn mt-4 flex items-center justify-center gap-2 border-2 border-black bg-black px-3 py-2 font-mono text-[11px] font-bold uppercase tracking-wider text-white shadow-[3px_3px_0_0_#00E676] transition-transform duration-100 hover:translate-x-[2px] hover:translate-y-[2px] hover:shadow-[1px_1px_0_0_#00E676] focus:outline-none focus-visible:ring-2 focus-visible:ring-[#00E676] focus-visible:ring-offset-2" data-prompt="Summarize the following data. Output: 3 key insights (bullet), 1 trend with direction, 1 risk to watch. Keep each item under 25 words. DATA: {{data}}">
<svg class="h-3.5 w-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><rect x="9" y="9" width="11" height="11" rx="0" /><path d="M5 15V5h10" /></svg>
<span class="copy-label">Copy</span>
</button>
</div>
</article>
<!-- Card: Image -->
<article class="prompt-card group flex flex-col border-2 border-black bg-white shadow-[4px_4px_0_0_#000] transition-transform duration-100 hover:translate-x-[2px] hover:translate-y-[2px] hover:shadow-[2px_2px_0_0_#000]" data-category="image">
<div class="flex items-center justify-between gap-2 border-b-2 border-black bg-[#FF4FA3] px-4 py-2">
<span class="font-mono text-[10px] font-bold uppercase tracking-wider text-white">Image</span>
<span class="font-mono text-[10px] font-bold uppercase tracking-wider text-white/60">#04</span>
</div>
<div class="flex flex-1 flex-col px-4 py-4">
<h3 class="font-archivo text-[15px] font-extrabold uppercase leading-tight tracking-tight">Product Hero Shot</h3>
<p class="mt-2 flex-1 font-archivo text-[13px] font-medium leading-snug text-black/70">Cinematic product photography prompt with lighting, lens, and mood baked in.</p>
<button type="button" class="copy-btn mt-4 flex items-center justify-center gap-2 border-2 border-black bg-black px-3 py-2 font-mono text-[11px] font-bold uppercase tracking-wider text-white shadow-[3px_3px_0_0_#FF4FA3] transition-transform duration-100 hover:translate-x-[2px] hover:translate-y-[2px] hover:shadow-[1px_1px_0_0_#FF4FA3] focus:outline-none focus-visible:ring-2 focus-visible:ring-[#FF4FA3] focus-visible:ring-offset-2" data-prompt="Cinematic product photo of {{product}} on a textured stone surface, soft rim light, 85mm lens, shallow depth of field, warm golden hour glow, high detail, 4k, no text.">
<svg class="h-3.5 w-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><rect x="9" y="9" width="11" height="11" rx="0" /><path d="M5 15V5h10" /></svg>
<span class="copy-label">Copy</span>
</button>
</div>
</article>
<!-- Card: Writing -->
<article class="prompt-card group flex flex-col border-2 border-black bg-white shadow-[4px_4px_0_0_#000] transition-transform duration-100 hover:translate-x-[2px] hover:translate-y-[2px] hover:shadow-[2px_2px_0_0_#000]" data-category="writing">
<div class="flex items-center justify-between gap-2 border-b-2 border-black bg-[#FFE600] px-4 py-2">
<span class="font-mono text-[10px] font-bold uppercase tracking-wider text-black">Writing</span>
<span class="font-mono text-[10px] font-bold uppercase tracking-wider text-black/50">#05</span>
</div>
<div class="flex flex-1 flex-col px-4 py-4">
<h3 class="font-archivo text-[15px] font-extrabold uppercase leading-tight tracking-tight">Blog Post Outline</h3>
<p class="mt-2 flex-1 font-archivo text-[13px] font-medium leading-snug text-black/70">Generate a structured outline with H2/H3 hierarchy and a hook intro.</p>
<button type="button" class="copy-btn mt-4 flex items-center justify-center gap-2 border-2 border-black bg-black px-3 py-2 font-mono text-[11px] font-bold uppercase tracking-wider text-white shadow-[3px_3px_0_0_#FFE600] transition-transform duration-100 hover:translate-x-[2px] hover:translate-y-[2px] hover:shadow-[1px_1px_0_0_#FFE600] focus:outline-none focus-visible:ring-2 focus-visible:ring-[#FFE600] focus-visible:ring-offset-2" data-prompt="Create a blog post outline for {{topic}} aimed at {{audience}}. Structure: H2 sections with H3 sub-points, a hook intro, and a CTA. Keep each H3 to one sentence.">
<svg class="h-3.5 w-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><rect x="9" y="9" width="11" height="11" rx="0" /><path d="M5 15V5h10" /></svg>
<span class="copy-label">Copy</span>
</button>
</div>
</article>
<!-- Card: Code -->
<article class="prompt-card group flex flex-col border-2 border-black bg-white shadow-[4px_4px_0_0_#000] transition-transform duration-100 hover:translate-x-[2px] hover:translate-y-[2px] hover:shadow-[2px_2px_0_0_#000]" data-category="code">
<div class="flex items-center justify-between gap-2 border-b-2 border-black bg-[#00C2FF] px-4 py-2">
<span class="font-mono text-[10px] font-bold uppercase tracking-wider text-black">Code</span>
<span class="font-mono text-[10px] font-bold uppercase tracking-wider text-black/50">#06</span>
</div>
<div class="flex flex-1 flex-col px-4 py-4">
<h3 class="font-archivo text-[15px] font-extrabold uppercase leading-tight tracking-tight">SQL Optimizer</h3>
<p class="mt-2 flex-1 font-archivo text-[13px] font-medium leading-snug text-black/70">Diagnose a slow query, suggest indexes, and rewrite for performance.</p>
<button type="button" class="copy-btn mt-4 flex items-center justify-center gap-2 border-2 border-black bg-black px-3 py-2 font-mono text-[11px] font-bold uppercase tracking-wider text-white shadow-[3px_3px_0_0_#00C2FF] transition-transform duration-100 hover:translate-x-[2px] hover:translate-y-[2px] hover:shadow-[1px_1px_0_0_#00C2FF] focus:outline-none focus-visible:ring-2 focus-visible:ring-[#00C2FF] focus-visible:ring-offset-2" data-prompt="Analyze the following SQL for performance. Output: (1) what is slow and why, (2) indexes to add, (3) a rewritten query. Note the dialect. SQL: {{sql}}">
<svg class="h-3.5 w-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><rect x="9" y="9" width="11" height="11" rx="0" /><path d="M5 15V5h10" /></svg>
<span class="copy-label">Copy</span>
</button>
</div>
</article>
<!-- Card: Analysis -->
<article class="prompt-card group flex flex-col border-2 border-black bg-white shadow-[4px_4px_0_0_#000] transition-transform duration-100 hover:translate-x-[2px] hover:translate-y-[2px] hover:shadow-[2px_2px_0_0_#000]" data-category="analysis">
<div class="flex items-center justify-between gap-2 border-b-2 border-black bg-[#00E676] px-4 py-2">
<span class="font-mono text-[10px] font-bold uppercase tracking-wider text-black">Analysis</span>
<span class="font-mono text-[10px] font-bold uppercase tracking-wider text-black/50">#07</span>
</div>
<div class="flex flex-1 flex-col px-4 py-4">
<h3 class="font-archivo text-[15px] font-extrabold uppercase leading-tight tracking-tight">Sentiment Analyzer</h3>
<p class="mt-2 flex-1 font-archivo text-[13px] font-medium leading-snug text-black/70">Classify sentiment per message with confidence scores and a summary.</p>
<button type="button" class="copy-btn mt-4 flex items-center justify-center gap-2 border-2 border-black bg-black px-3 py-2 font-mono text-[11px] font-bold uppercase tracking-wider text-white shadow-[3px_3px_0_0_#00E676] transition-transform duration-100 hover:translate-x-[2px] hover:translate-y-[2px] hover:shadow-[1px_1px_0_0_#00E676] focus:outline-none focus-visible:ring-2 focus-visible:ring-[#00E676] focus-visible:ring-offset-2" data-prompt="Classify sentiment for each message as positive / neutral / negative with a confidence 0-1. End with a one-line aggregate summary. MESSAGES: {{messages}}">
<svg class="h-3.5 w-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><rect x="9" y="9" width="11" height="11" rx="0" /><path d="M5 15V5h10" /></svg>
<span class="copy-label">Copy</span>
</button>
</div>
</article>
<!-- Card: Image -->
<article class="prompt-card group flex flex-col border-2 border-black bg-white shadow-[4px_4px_0_0_#000] transition-transform duration-100 hover:translate-x-[2px] hover:translate-y-[2px] hover:shadow-[2px_2px_0_0_#000]" data-category="image">
<div class="flex items-center justify-between gap-2 border-b-2 border-black bg-[#FF4FA3] px-4 py-2">
<span class="font-mono text-[10px] font-bold uppercase tracking-wider text-white">Image</span>
<span class="font-mono text-[10px] font-bold uppercase tracking-wider text-white/60">#08</span>
</div>
<div class="flex flex-1 flex-col px-4 py-4">
<h3 class="font-archivo text-[15px] font-extrabold uppercase leading-tight tracking-tight">Logo Concept</h3>
<p class="mt-2 flex-1 font-archivo text-[13px] font-medium leading-snug text-black/70">Minimal geometric logo prompt — mark, palette, and negative space.</p>
<button type="button" class="copy-btn mt-4 flex items-center justify-center gap-2 border-2 border-black bg-black px-3 py-2 font-mono text-[11px] font-bold uppercase tracking-wider text-white shadow-[3px_3px_0_0_#FF4FA3] transition-transform duration-100 hover:translate-x-[2px] hover:translate-y-[2px] hover:shadow-[1px_1px_0_0_#FF4FA3] focus:outline-none focus-visible:ring-2 focus-visible:ring-[#FF4FA3] focus-visible:ring-offset-2" data-prompt="Minimal geometric logo for {{brand}}, single mark, strong negative space, two-color palette, flat vector, centered, on white, no text.">
<svg class="h-3.5 w-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><rect x="9" y="9" width="11" height="11" rx="0" /><path d="M5 15V5h10" /></svg>
<span class="copy-label">Copy</span>
</button>
</div>
</article>
<!-- Card: Code -->
<article class="prompt-card group flex flex-col border-2 border-black bg-white shadow-[4px_4px_0_0_#000] transition-transform duration-100 hover:translate-x-[2px] hover:translate-y-[2px] hover:shadow-[2px_2px_0_0_#000]" data-category="code">
<div class="flex items-center justify-between gap-2 border-b-2 border-black bg-[#00C2FF] px-4 py-2">
<span class="font-mono text-[10px] font-bold uppercase tracking-wider text-black">Code</span>
<span class="font-mono text-[10px] font-bold uppercase tracking-wider text-black/50">#09</span>
</div>
<div class="flex flex-1 flex-col px-4 py-4">
<h3 class="font-archivo text-[15px] font-extrabold uppercase leading-tight tracking-tight">Refactor to Hooks</h3>
<p class="mt-2 flex-1 font-archivo text-[13px] font-medium leading-snug text-black/70">Convert a class component to idiomatic React hooks with tests.</p>
<button type="button" class="copy-btn mt-4 flex items-center justify-center gap-2 border-2 border-black bg-black px-3 py-2 font-mono text-[11px] font-bold uppercase tracking-wider text-white shadow-[3px_3px_0_0_#00C2FF] transition-transform duration-100 hover:translate-x-[2px] hover:translate-y-[2px] hover:shadow-[1px_1px_0_0_#00C2FF] focus:outline-none focus-visible:ring-2 focus-visible:ring-[#00C2FF] focus-visible:ring-offset-2" data-prompt="Refactor this React class component to hooks. Preserve behavior, split into small effects, and add a unit test for the main case. CODE: {{code}}">
<svg class="h-3.5 w-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><rect x="9" y="9" width="11" height="11" rx="0" /><path d="M5 15V5h10" /></svg>
<span class="copy-label">Copy</span>
</button>
</div>
</article>
</div>
<!-- Empty state -->
<div class="hidden border-t-2 border-black bg-[#FFFDF5] px-5 py-10 text-center" data-empty>
<p class="font-archivo text-base font-extrabold uppercase tracking-tight text-black/60">No prompts match that filter.</p>
<p class="mt-1 font-mono text-[11px] font-bold uppercase tracking-wider text-black/40">Try a different category.</p>
</div>
<!-- Footer -->
<div class="flex items-center justify-between gap-2 border-t-2 border-black bg-white px-5 py-3">
<p class="font-mono text-[11px] font-bold uppercase tracking-wider text-black/50">// CLICK COPY TO GRAB THE PROMPT</p>
<p class="font-mono text-[11px] font-bold uppercase tracking-wider text-black/50"><span data-visible-count>9</span> SHOWN</p>
</div>
</div>
<script>
(function () {
var root = document.currentScript.closest('[data-promptlib]');
if (!root) return;
var grid = root.querySelector('[data-grid]');
var filters = root.querySelector('[data-filters]');
var search = root.querySelector('[data-search]');
var empty = root.querySelector('[data-empty]');
var visibleCount = root.querySelector('[data-visible-count]');
var cards = Array.prototype.slice.call(root.querySelectorAll('.prompt-card'));
var current = 'all';
function apply() {
var q = (search && search.value || '').toLowerCase().trim();
var shown = 0;
cards.forEach(function (card) {
var cat = card.getAttribute('data-category');
var text = (card.textContent || '').toLowerCase();
var matchCat = current === 'all' || cat === current;
var matchQ = !q || text.indexOf(q) !== -1;
var show = matchCat && matchQ;
card.style.display = show ? '' : 'none';
if (show) shown++;
});
if (empty) empty.classList.toggle('hidden', shown !== 0);
if (visibleCount) visibleCount.textContent = String(shown);
}
filters.addEventListener('click', function (e) {
var btn = e.target.closest('[data-filter]');
if (!btn) return;
current = btn.getAttribute('data-filter');
Array.prototype.forEach.call(filters.querySelectorAll('.filter-chip'), function (c) {
var on = c === btn;
c.setAttribute('aria-selected', on ? 'true' : 'false');
if (on) { c.classList.add('bg-black', 'text-white'); c.classList.remove('bg-white', 'text-black'); }
else { c.classList.remove('bg-black', 'text-white'); c.classList.add('bg-white', 'text-black'); }
});
apply();
});
if (search) search.addEventListener('input', apply);
function flash(btn) {
var label = btn.querySelector('.copy-label');
var prev = label ? label.textContent : '';
if (label) label.textContent = 'Copied!';
btn.classList.add('bg-[#00E676]', 'text-black');
btn.classList.remove('bg-black', 'text-white');
setTimeout(function () {
if (label) label.textContent = prev || 'Copy';
btn.classList.remove('bg-[#00E676]', 'text-black');
btn.classList.add('bg-black', 'text-white');
}, 1200);
}
function copyText(text, btn) {
function done() { flash(btn); }
if (navigator.clipboard && navigator.clipboard.writeText) {
navigator.clipboard.writeText(text).then(done, function () { fallbackCopy(text); done(); });
} else {
fallbackCopy(text); done();
}
}
function fallbackCopy(text) {
var ta = document.createElement('textarea');
ta.value = text; ta.setAttribute('readonly', '');
ta.style.position = 'absolute'; ta.style.left = '-9999px';
document.body.appendChild(ta); ta.select();
try { document.execCommand('copy'); } catch (e) {}
document.body.removeChild(ta);
}
root.addEventListener('click', function (e) {
var btn = e.target.closest('.copy-btn');
if (!btn) return;
copyText(btn.getAttribute('data-prompt') || '', btn);
});
})();
</script>
</div> 294 lines UTF-8 · LF · Spaces: 2
Continue browsing