{% extends "base.html" %}

{% block title %}sdexe — Local Tools{% endblock %}

{% block content %}
    <main class="home-main">
        <div class="hero">
            <h1>Your local <span class="hero-accent">sdexe</span></h1>
            <p class="subtitle">Fast, private tools that run entirely on your machine. No uploads, no accounts.</p>
        </div>

        <div class="tool-search-wrap">
            <svg class="tool-search-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/>
            </svg>
            <input type="text" id="tool-search" class="tool-search" placeholder="Search tools..." autocomplete="off">
        </div>

        <div id="tool-sections">
            <!-- Media -->
            <div class="tool-category" data-category="media">
                <h2 class="tool-category-header"><span>Media</span></h2>
                <div class="tool-grid">
                    <a href="/media" class="tool-card" data-category="media" data-name="media downloader download video audio youtube">
                        <div class="tool-icon">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="square">
                                <path d="M12 3v14M5 12l7 7 7-7"/><path d="M5 21h14"/>
                            </svg>
                        </div>
                        <div class="tool-info">
                            <h3>Media Downloader</h3>
                            <p>Download videos &amp; audio from YouTube, Instagram, and 1000+ sites</p>
                        </div>
                    </a>
                </div>
            </div>

            <!-- PDF -->
            <div class="tool-category" data-category="pdf">
                <h2 class="tool-category-header"><span>PDF Tools</span></h2>
                <div class="tool-grid">
                    <a href="/pdf#merge" class="tool-card" data-category="pdf" data-name="merge pdf combine join">
                        <div class="tool-icon">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
                        </div>
                        <div class="tool-info">
                            <h3>Merge PDF</h3>
                            <p>Combine multiple PDFs into one document</p>
                        </div>
                    </a>
                    <a href="/pdf#split" class="tool-card" data-category="pdf" data-name="split pdf separate extract pages">
                        <div class="tool-icon">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
                        </div>
                        <div class="tool-info">
                            <h3>Split PDF</h3>
                            <p>Split a PDF by page ranges</p>
                        </div>
                    </a>
                    <a href="/pdf#compress" class="tool-card" data-category="pdf" data-name="compress pdf reduce size smaller">
                        <div class="tool-icon">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
                        </div>
                        <div class="tool-info">
                            <h3>Compress PDF</h3>
                            <p>Reduce PDF file size</p>
                        </div>
                    </a>
                    <a href="/pdf#img2pdf" class="tool-card" data-category="pdf" data-name="images to pdf convert photos pictures">
                        <div class="tool-icon">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>
                        </div>
                        <div class="tool-info">
                            <h3>Images to PDF</h3>
                            <p>Convert images into a PDF document</p>
                        </div>
                    </a>
                    <a href="/pdf#totext" class="tool-card" data-category="pdf" data-name="extract text from pdf ocr">
                        <div class="tool-icon">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><polyline points="4 7 4 4 20 4 20 7"/><line x1="9" y1="20" x2="15" y2="20"/><line x1="12" y1="4" x2="12" y2="20"/></svg>
                        </div>
                        <div class="tool-info">
                            <h3>Extract Text</h3>
                            <p>Pull text content from a PDF</p>
                        </div>
                    </a>
                    <a href="/pdf#extractimages" class="tool-card" data-category="pdf" data-name="extract images from pdf pictures photos">
                        <div class="tool-icon">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>
                        </div>
                        <div class="tool-info">
                            <h3>Extract Images</h3>
                            <p>Pull embedded images out of a PDF</p>
                        </div>
                    </a>
                    <a href="/pdf#numberpages" class="tool-card" data-category="pdf" data-name="number pages pdf add page numbers">
                        <div class="tool-icon">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg>
                        </div>
                        <div class="tool-info">
                            <h3>Number Pages</h3>
                            <p>Add page numbers to a PDF</p>
                        </div>
                    </a>
                    <a href="/pdf#password" class="tool-card" data-category="pdf" data-name="password protect pdf encrypt lock">
                        <div class="tool-icon">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0110 0v4"/></svg>
                        </div>
                        <div class="tool-info">
                            <h3>Password Protect</h3>
                            <p>Add or remove PDF passwords</p>
                        </div>
                    </a>
                    <a href="/pdf#rotatepages" class="tool-card" data-category="pdf" data-name="rotate pages pdf turn orientation">
                        <div class="tool-icon">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><polyline points="1 4 1 10 7 10"/><path d="M3.51 15a9 9 0 102.13-9.36L1 10"/></svg>
                        </div>
                        <div class="tool-info">
                            <h3>Rotate Pages</h3>
                            <p>Rotate specific pages in a PDF</p>
                        </div>
                    </a>
                </div>
            </div>

            <!-- Images -->
            <div class="tool-category" data-category="images">
                <h2 class="tool-category-header"><span>Image Tools</span></h2>
                <div class="tool-grid">
                    <a href="/images#resize" class="tool-card" data-category="images" data-name="resize image scale dimensions width height">
                        <div class="tool-icon">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><polyline points="15 3 21 3 21 9"/><polyline points="9 21 3 21 3 15"/><line x1="21" y1="3" x2="14" y2="10"/><line x1="3" y1="21" x2="10" y2="14"/></svg>
                        </div>
                        <div class="tool-info">
                            <h3>Resize</h3>
                            <p>Change image dimensions</p>
                        </div>
                    </a>
                    <a href="/images#compress" class="tool-card" data-category="images" data-name="compress image reduce quality size smaller">
                        <div class="tool-icon">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>
                        </div>
                        <div class="tool-info">
                            <h3>Compress</h3>
                            <p>Reduce image file size</p>
                        </div>
                    </a>
                    <a href="/images#imgconvert" class="tool-card" data-category="images" data-name="convert image format png jpg webp gif">
                        <div class="tool-icon">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><polyline points="16 16 12 12 8 16"/><line x1="12" y1="12" x2="12" y2="21"/><path d="M20.39 18.39A5 5 0 0018 9h-1.26A8 8 0 103 16.3"/></svg>
                        </div>
                        <div class="tool-info">
                            <h3>Convert Format</h3>
                            <p>PNG, JPG, WebP, GIF, BMP, TIFF</p>
                        </div>
                    </a>
                    <a href="/images#crop" class="tool-card" data-category="images" data-name="crop image cut trim area">
                        <div class="tool-icon">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M6.13 1L6 16a2 2 0 002 2h15"/><path d="M1 6.13L16 6a2 2 0 012 2v15"/></svg>
                        </div>
                        <div class="tool-info">
                            <h3>Crop</h3>
                            <p>Crop to specific dimensions</p>
                        </div>
                    </a>
                    <a href="/images#rotate" class="tool-card" data-category="images" data-name="rotate image turn degrees angle">
                        <div class="tool-icon">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><polyline points="1 4 1 10 7 10"/><path d="M3.51 15a9 9 0 102.13-9.36L1 10"/></svg>
                        </div>
                        <div class="tool-info">
                            <h3>Rotate</h3>
                            <p>Rotate by any angle</p>
                        </div>
                    </a>
                    <a href="/images#stripexif" class="tool-card" data-category="images" data-name="strip exif metadata remove privacy location">
                        <div class="tool-icon">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="12" cy="12" r="10"/><line x1="4.93" y1="4.93" x2="19.07" y2="19.07"/></svg>
                        </div>
                        <div class="tool-info">
                            <h3>Strip EXIF</h3>
                            <p>Remove metadata from images</p>
                        </div>
                    </a>
                    <a href="/images#toico" class="tool-card" data-category="images" data-name="to ico icon favicon convert">
                        <div class="tool-icon">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/></svg>
                        </div>
                        <div class="tool-info">
                            <h3>To ICO</h3>
                            <p>Create favicon ICO files</p>
                        </div>
                    </a>
                    <a href="/images#flip" class="tool-card" data-category="images" data-name="flip image mirror horizontal vertical">
                        <div class="tool-icon">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 014-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 01-4 4H3"/></svg>
                        </div>
                        <div class="tool-info">
                            <h3>Flip</h3>
                            <p>Flip horizontally or vertically</p>
                        </div>
                    </a>
                    <a href="/images#grayscale" class="tool-card" data-category="images" data-name="grayscale image black white desaturate">
                        <div class="tool-icon">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="12" cy="12" r="10"/><path d="M12 2a10 10 0 000 20"/></svg>
                        </div>
                        <div class="tool-info">
                            <h3>Grayscale</h3>
                            <p>Convert to black and white</p>
                        </div>
                    </a>
                    <a href="/images#blur" class="tool-card" data-category="images" data-name="blur image gaussian soften">
                        <div class="tool-icon">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="12" cy="12" r="3"/><circle cx="12" cy="12" r="7" stroke-dasharray="4 3"/><circle cx="12" cy="12" r="10" stroke-dasharray="2 3"/></svg>
                        </div>
                        <div class="tool-info">
                            <h3>Blur</h3>
                            <p>Apply Gaussian blur</p>
                        </div>
                    </a>
                </div>
            </div>

            <!-- File Converter -->
            <div class="tool-category" data-category="convert">
                <h2 class="tool-category-header"><span>File Converter</span></h2>
                <div class="tool-grid">
                    <a href="/convert#md2html" class="tool-card" data-category="convert" data-name="markdown to html convert">
                        <div class="tool-icon">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><polyline points="16 16 12 12 8 16"/><line x1="12" y1="12" x2="12" y2="21"/><path d="M20.39 18.39A5 5 0 0018 9h-1.26A8 8 0 103 16.3"/></svg>
                        </div>
                        <div class="tool-info">
                            <h3>Markdown to HTML</h3>
                            <p>Convert Markdown text to HTML</p>
                        </div>
                    </a>
                    <a href="/convert#csv2json" class="tool-card" data-category="convert" data-name="csv to json convert data">
                        <div class="tool-icon">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><polyline points="16 16 12 12 8 16"/><line x1="12" y1="12" x2="12" y2="21"/><path d="M20.39 18.39A5 5 0 0018 9h-1.26A8 8 0 103 16.3"/></svg>
                        </div>
                        <div class="tool-info">
                            <h3>CSV to JSON</h3>
                            <p>Convert CSV data to JSON format</p>
                        </div>
                    </a>
                    <a href="/convert#json2csv" class="tool-card" data-category="convert" data-name="json to csv convert data">
                        <div class="tool-icon">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><polyline points="16 16 12 12 8 16"/><line x1="12" y1="12" x2="12" y2="21"/><path d="M20.39 18.39A5 5 0 0018 9h-1.26A8 8 0 103 16.3"/></svg>
                        </div>
                        <div class="tool-info">
                            <h3>JSON to CSV</h3>
                            <p>Convert JSON data to CSV format</p>
                        </div>
                    </a>
                    <a href="/convert#yaml2json" class="tool-card" data-category="convert" data-name="yaml to json convert config">
                        <div class="tool-icon">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><polyline points="16 16 12 12 8 16"/><line x1="12" y1="12" x2="12" y2="21"/><path d="M20.39 18.39A5 5 0 0018 9h-1.26A8 8 0 103 16.3"/></svg>
                        </div>
                        <div class="tool-info">
                            <h3>YAML to JSON</h3>
                            <p>Convert YAML to JSON format</p>
                        </div>
                    </a>
                    <a href="/convert#json2yaml" class="tool-card" data-category="convert" data-name="json to yaml convert config">
                        <div class="tool-icon">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><polyline points="16 16 12 12 8 16"/><line x1="12" y1="12" x2="12" y2="21"/><path d="M20.39 18.39A5 5 0 0018 9h-1.26A8 8 0 103 16.3"/></svg>
                        </div>
                        <div class="tool-info">
                            <h3>JSON to YAML</h3>
                            <p>Convert JSON to YAML format</p>
                        </div>
                    </a>
                    <a href="/convert#csv2tsv" class="tool-card" data-category="convert" data-name="csv tsv tab separated convert">
                        <div class="tool-icon">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><polyline points="16 16 12 12 8 16"/><line x1="12" y1="12" x2="12" y2="21"/><path d="M20.39 18.39A5 5 0 0018 9h-1.26A8 8 0 103 16.3"/></svg>
                        </div>
                        <div class="tool-info">
                            <h3>CSV / TSV</h3>
                            <p>Convert between CSV and TSV</p>
                        </div>
                    </a>
                    <a href="/convert#xml2json" class="tool-card" data-category="convert" data-name="xml to json convert data">
                        <div class="tool-icon">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><polyline points="16 16 12 12 8 16"/><line x1="12" y1="12" x2="12" y2="21"/><path d="M20.39 18.39A5 5 0 0018 9h-1.26A8 8 0 103 16.3"/></svg>
                        </div>
                        <div class="tool-info">
                            <h3>XML to JSON</h3>
                            <p>Convert XML data to JSON format</p>
                        </div>
                    </a>
                    <a href="/convert#createzip" class="tool-card" data-category="convert" data-name="create zip archive compress files">
                        <div class="tool-icon">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M21 8v13H3V8"/><path d="M1 3h22v5H1z"/><path d="M10 12h4"/></svg>
                        </div>
                        <div class="tool-info">
                            <h3>Create ZIP</h3>
                            <p>Bundle files into a ZIP archive</p>
                        </div>
                    </a>
                    <a href="/convert#extractzip" class="tool-card" data-category="convert" data-name="extract zip unzip archive decompress">
                        <div class="tool-icon">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M21 8v13H3V8"/><path d="M1 3h22v5H1z"/><path d="M10 12h4"/></svg>
                        </div>
                        <div class="tool-info">
                            <h3>Extract ZIP</h3>
                            <p>Unzip archive contents</p>
                        </div>
                    </a>
                </div>
            </div>

            <!-- AV -->
            <div class="tool-category" data-category="av">
                <h2 class="tool-category-header"><span>Audio &amp; Video</span></h2>
                <div class="tool-grid">
                    <a href="/av#av-convert-audio" class="tool-card" data-category="av" data-name="convert audio format mp3 wav ogg flac aac">
                        <div class="tool-icon">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"/><path d="M15.54 8.46a5 5 0 010 7.07"/></svg>
                        </div>
                        <div class="tool-info">
                            <h3>Convert Audio</h3>
                            <p>MP3, WAV, OGG, FLAC, AAC, M4A</p>
                        </div>
                    </a>
                    <a href="/av#av-trim-audio" class="tool-card" data-category="av" data-name="trim audio cut clip start end">
                        <div class="tool-icon">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="6" cy="6" r="3"/><circle cx="6" cy="18" r="3"/><line x1="20" y1="4" x2="8.12" y2="15.88"/><line x1="14.47" y1="14.48" x2="20" y2="20"/><line x1="8.12" y1="8.12" x2="12" y2="12"/></svg>
                        </div>
                        <div class="tool-info">
                            <h3>Trim Audio</h3>
                            <p>Cut audio to a specific time range</p>
                        </div>
                    </a>
                    <a href="/av#av-speed" class="tool-card" data-category="av" data-name="change speed audio video tempo playback rate">
                        <div class="tool-icon">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><polygon points="5 4 15 12 5 20 5 4"/><line x1="19" y1="5" x2="19" y2="19"/></svg>
                        </div>
                        <div class="tool-info">
                            <h3>Change Speed</h3>
                            <p>Speed up or slow down audio/video</p>
                        </div>
                    </a>
                    <a href="/av#av-extract-audio" class="tool-card" data-category="av" data-name="extract audio from video strip soundtrack">
                        <div class="tool-icon">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"/><path d="M19.07 4.93a10 10 0 010 14.14"/><path d="M15.54 8.46a5 5 0 010 7.07"/></svg>
                        </div>
                        <div class="tool-info">
                            <h3>Extract Audio</h3>
                            <p>Pull audio track from a video file</p>
                        </div>
                    </a>
                    <a href="/av#av-merge-audio" class="tool-card" data-category="av" data-name="merge audio concatenate combine join files">
                        <div class="tool-icon">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"/><path d="M15.54 8.46a5 5 0 010 7.07"/></svg>
                        </div>
                        <div class="tool-info">
                            <h3>Merge Audio</h3>
                            <p>Concatenate multiple audio files</p>
                        </div>
                    </a>
                    <a href="/av#av-normalize" class="tool-card" data-category="av" data-name="normalize volume loudness audio level">
                        <div class="tool-icon">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"/><path d="M19.07 4.93a10 10 0 010 14.14"/><path d="M15.54 8.46a5 5 0 010 7.07"/></svg>
                        </div>
                        <div class="tool-info">
                            <h3>Normalize Volume</h3>
                            <p>Level out volume to consistent loudness</p>
                        </div>
                    </a>
                    <a href="/av#av-trim-video" class="tool-card" data-category="av" data-name="trim video cut clip start end">
                        <div class="tool-icon">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><polygon points="23 7 16 12 23 17 23 7"/><rect x="1" y="5" width="15" height="14" rx="2" ry="2"/></svg>
                        </div>
                        <div class="tool-info">
                            <h3>Trim Video</h3>
                            <p>Cut video to a specific time range</p>
                        </div>
                    </a>
                    <a href="/av#av-compress-video" class="tool-card" data-category="av" data-name="compress video reduce size smaller">
                        <div class="tool-icon">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><polygon points="23 7 16 12 23 17 23 7"/><rect x="1" y="5" width="15" height="14" rx="2" ry="2"/></svg>
                        </div>
                        <div class="tool-info">
                            <h3>Compress Video</h3>
                            <p>Reduce video file size</p>
                        </div>
                    </a>
                    <a href="/av#av-convert-video" class="tool-card" data-category="av" data-name="convert video format mp4 webm mov avi">
                        <div class="tool-icon">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><polygon points="23 7 16 12 23 17 23 7"/><rect x="1" y="5" width="15" height="14" rx="2" ry="2"/></svg>
                        </div>
                        <div class="tool-info">
                            <h3>Convert Video</h3>
                            <p>MP4, WebM, MOV, AVI, MKV</p>
                        </div>
                    </a>
                    <a href="/av#av-video-to-gif" class="tool-card" data-category="av" data-name="video to gif animated convert clip">
                        <div class="tool-icon">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><polygon points="23 7 16 12 23 17 23 7"/><rect x="1" y="5" width="15" height="14" rx="2" ry="2"/></svg>
                        </div>
                        <div class="tool-info">
                            <h3>Video to GIF</h3>
                            <p>Convert video clips to animated GIFs</p>
                        </div>
                    </a>
                </div>
            </div>

            <!-- Text -->
            <div class="tool-category" data-category="text">
                <h2 class="tool-category-header"><span>Text Tools</span></h2>
                <div class="tool-grid">
                    <a href="/text#wordcount" class="tool-card" data-category="text" data-name="word count characters lines statistics">
                        <div class="tool-icon">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><polyline points="4 7 4 4 20 4 20 7"/><line x1="9" y1="20" x2="15" y2="20"/><line x1="12" y1="4" x2="12" y2="20"/></svg>
                        </div>
                        <div class="tool-info">
                            <h3>Word Count</h3>
                            <p>Count words, characters, and lines</p>
                        </div>
                    </a>
                    <a href="/text#findreplace" class="tool-card" data-category="text" data-name="find replace search text substitute">
                        <div class="tool-icon">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
                        </div>
                        <div class="tool-info">
                            <h3>Find &amp; Replace</h3>
                            <p>Search and replace text patterns</p>
                        </div>
                    </a>
                    <a href="/text#regex" class="tool-card" data-category="text" data-name="regex regular expression tester pattern match">
                        <div class="tool-icon">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg>
                        </div>
                        <div class="tool-info">
                            <h3>Regex Tester</h3>
                            <p>Test regular expressions live</p>
                        </div>
                    </a>
                    <a href="/text#diff" class="tool-card" data-category="text" data-name="diff compare text difference changes">
                        <div class="tool-icon">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/></svg>
                        </div>
                        <div class="tool-info">
                            <h3>Text Diff</h3>
                            <p>Compare two texts side by side</p>
                        </div>
                    </a>
                    <a href="/text#case" class="tool-card" data-category="text" data-name="case converter uppercase lowercase title camel">
                        <div class="tool-icon">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><polyline points="4 7 4 4 20 4 20 7"/><line x1="9" y1="20" x2="15" y2="20"/><line x1="12" y1="4" x2="12" y2="20"/></svg>
                        </div>
                        <div class="tool-info">
                            <h3>Case Converter</h3>
                            <p>Upper, lower, title, camel case</p>
                        </div>
                    </a>
                    <a href="/text#base64" class="tool-card" data-category="text" data-name="base64 encode decode binary text">
                        <div class="tool-icon">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg>
                        </div>
                        <div class="tool-info">
                            <h3>Base64</h3>
                            <p>Encode and decode Base64</p>
                        </div>
                    </a>
                    <a href="/text#hash" class="tool-card" data-category="text" data-name="hash generator md5 sha1 sha256 checksum">
                        <div class="tool-icon">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><line x1="4" y1="9" x2="20" y2="9"/><line x1="4" y1="15" x2="20" y2="15"/><line x1="10" y1="3" x2="8" y2="21"/><line x1="16" y1="3" x2="14" y2="21"/></svg>
                        </div>
                        <div class="tool-info">
                            <h3>Hash Generator</h3>
                            <p>MD5, SHA-1, SHA-256, SHA-512</p>
                        </div>
                    </a>
                    <a href="/text#urlencode" class="tool-card" data-category="text" data-name="url encode decode percent encoding">
                        <div class="tool-icon">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M10 13a5 5 0 007.54.54l3-3a5 5 0 00-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 00-7.54-.54l-3 3a5 5 0 007.07 7.07l1.71-1.71"/></svg>
                        </div>
                        <div class="tool-info">
                            <h3>URL Encode</h3>
                            <p>Encode and decode URLs</p>
                        </div>
                    </a>
                    <a href="/text#json" class="tool-card" data-category="text" data-name="json format beautify minify pretty print validate">
                        <div class="tool-icon">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg>
                        </div>
                        <div class="tool-info">
                            <h3>JSON Format</h3>
                            <p>Beautify and minify JSON</p>
                        </div>
                    </a>
                    <a href="/text#jwt" class="tool-card" data-category="text" data-name="jwt decoder json web token parse claims">
                        <div class="tool-icon">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0110 0v4"/></svg>
                        </div>
                        <div class="tool-info">
                            <h3>JWT Decoder</h3>
                            <p>Parse and inspect JSON Web Tokens</p>
                        </div>
                    </a>
                    <a href="/text#uuid" class="tool-card" data-category="text" data-name="uuid generator unique id guid random">
                        <div class="tool-icon">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><line x1="4" y1="9" x2="20" y2="9"/><line x1="4" y1="15" x2="20" y2="15"/><line x1="10" y1="3" x2="8" y2="21"/><line x1="16" y1="3" x2="14" y2="21"/></svg>
                        </div>
                        <div class="tool-info">
                            <h3>UUID Generator</h3>
                            <p>Generate random UUIDs</p>
                        </div>
                    </a>
                    <a href="/text#timestamp" class="tool-card" data-category="text" data-name="timestamp unix epoch date time converter">
                        <div class="tool-icon">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
                        </div>
                        <div class="tool-info">
                            <h3>Timestamp</h3>
                            <p>Unix epoch and date converter</p>
                        </div>
                    </a>
                    <a href="/text#lorem" class="tool-card" data-category="text" data-name="lorem ipsum placeholder dummy text generator">
                        <div class="tool-icon">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><line x1="17" y1="10" x2="3" y2="10"/><line x1="21" y1="6" x2="3" y2="6"/><line x1="21" y1="14" x2="3" y2="14"/><line x1="17" y1="18" x2="3" y2="18"/></svg>
                        </div>
                        <div class="tool-info">
                            <h3>Lorem Ipsum</h3>
                            <p>Generate placeholder text</p>
                        </div>
                    </a>
                    <a href="/text#color" class="tool-card" data-category="text" data-name="color converter hex rgb hsl picker">
                        <div class="tool-icon">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="13.5" cy="6.5" r="4"/><circle cx="17.5" cy="17.5" r="4"/><circle cx="6.5" cy="17.5" r="4"/></svg>
                        </div>
                        <div class="tool-info">
                            <h3>Color Converter</h3>
                            <p>HEX, RGB, and HSL conversion</p>
                        </div>
                    </a>
                    <a href="/text#password" class="tool-card" data-category="text" data-name="password generator random secure strong">
                        <div class="tool-icon">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0110 0v4"/><circle cx="12" cy="16" r="1"/></svg>
                        </div>
                        <div class="tool-info">
                            <h3>Password Generator</h3>
                            <p>Generate secure random passwords</p>
                        </div>
                    </a>
                </div>
            </div>
        </div>

        <p id="no-results" class="no-results" hidden>No tools match your search.</p>
    </main>
{% endblock %}

{% block scripts %}
<script>
(function() {
    var input = document.getElementById('tool-search');
    var sections = document.querySelectorAll('.tool-category');
    var noResults = document.getElementById('no-results');
    input.addEventListener('input', function() {
        var q = this.value.toLowerCase().trim();
        var anyVisible = false;
        sections.forEach(function(sec) {
            var cards = sec.querySelectorAll('.tool-card');
            var catVisible = false;
            cards.forEach(function(card) {
                var name = (card.getAttribute('data-name') || '') + ' ' + card.textContent.toLowerCase();
                var show = !q || name.indexOf(q) !== -1;
                card.style.display = show ? '' : 'none';
                if (show) catVisible = true;
            });
            sec.style.display = catVisible ? '' : 'none';
            if (catVisible) anyVisible = true;
        });
        noResults.hidden = anyVisible;
    });
})();
</script>
{% endblock %}