{% 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">Tools for video, audio, PDF, images, and file conversion</p>
            <p class="hero-tagline"><span id="hero-word" class="hero-word">Download media from 1000+ sites</span></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">
            <div class="tool-category" data-category="media">
                <h2 class="tool-category-header">Media</h2>
                <div class="tool-grid">
                    <a href="/media" class="tool-link" data-name="media downloader download video audio youtube">
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M12 3v14M5 12l7 7 7-7"/><path d="M5 21h14"/></svg>
                        Media Downloader
                    </a>
                </div>
            </div>

            <div class="tool-category" data-category="pdf">
                <h2 class="tool-category-header">PDF Tools</h2>
                <div class="tool-grid">
                    <a href="/pdf#merge" class="tool-link" data-name="merge pdf combine join">
                        <svg width="20" height="20" 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>
                        Merge PDF
                    </a>
                    <a href="/pdf#split" class="tool-link" data-name="split pdf separate extract pages">
                        <svg width="20" height="20" 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>
                        Split PDF
                    </a>
                    <a href="/pdf#compress" class="tool-link" data-name="compress pdf reduce size smaller">
                        <svg width="20" height="20" 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>
                        Compress PDF
                    </a>
                    <a href="/pdf#img2pdf" class="tool-link" data-name="images to pdf convert photos pictures">
                        <svg width="20" height="20" 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>
                        Images to PDF
                    </a>
                    <a href="/pdf#totext" class="tool-link" data-name="extract text from pdf ocr">
                        <svg width="20" height="20" 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>
                        Extract Text
                    </a>
                    <a href="/pdf#extractimages" class="tool-link" data-name="extract images from pdf pictures photos">
                        <svg width="20" height="20" 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>
                        Extract Images
                    </a>
                    <a href="/pdf#numberpages" class="tool-link" data-name="number pages pdf add page numbers">
                        <svg width="20" height="20" 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>
                        Number Pages
                    </a>
                    <a href="/pdf#password" class="tool-link" data-name="password protect pdf encrypt lock">
                        <svg width="20" height="20" 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>
                        Password Protect
                    </a>
                    <a href="/pdf#unlock" class="tool-link" data-name="unlock pdf remove password decrypt">
                        <svg width="20" height="20" 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 018 0"/></svg>
                        Unlock PDF
                    </a>
                    <a href="/pdf#rotatepages" class="tool-link" data-name="rotate pages pdf turn orientation">
                        <svg width="20" height="20" 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>
                        Rotate Pages
                    </a>
                    <a href="/pdf#watermark" class="tool-link" data-name="watermark pdf text stamp overlay">
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M12 2.69l5.66 5.66a8 8 0 11-11.31 0z"/></svg>
                        Watermark PDF
                    </a>
                    <a href="/pdf#reorder" class="tool-link" data-name="reorder pages pdf rearrange sort shuffle">
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><line x1="3" y1="6" x2="15" y2="6"/><line x1="3" y1="12" x2="15" y2="12"/><line x1="3" y1="18" x2="15" y2="18"/><polyline points="19 8 21 6 19 4"/><polyline points="19 20 21 18 19 16"/></svg>
                        Reorder Pages
                    </a>
                    <a href="/pdf#deletepages" class="tool-link" data-name="delete pages pdf remove discard">
                        <svg width="20" height="20" 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="9" y1="14" x2="15" y2="14"/></svg>
                        Delete Pages
                    </a>
                    <a href="/pdf#metadata" class="tool-link" data-name="edit metadata pdf title author subject properties info">
                        <svg width="20" height="20" 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="8" y1="13" x2="16" y2="13"/><line x1="8" y1="17" x2="16" y2="17"/><polyline points="10 9 9 9 8 9"/></svg>
                        Edit Metadata
                    </a>
                </div>
            </div>

            <div class="tool-category" data-category="images">
                <h2 class="tool-category-header">Image Tools</h2>
                <div class="tool-grid">
                    <a href="/images#resize" class="tool-link" data-name="resize image scale dimensions width height">
                        <svg width="20" height="20" 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>
                        Resize
                    </a>
                    <a href="/images#compress" class="tool-link" data-name="compress image reduce quality size smaller">
                        <svg width="20" height="20" 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>
                        Compress
                    </a>
                    <a href="/images#imgconvert" class="tool-link" data-name="convert image format png jpg webp gif">
                        <svg width="20" height="20" 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>
                        Convert Format
                    </a>
                    <a href="/images#crop" class="tool-link" data-name="crop image cut trim area">
                        <svg width="20" height="20" 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>
                        Crop
                    </a>
                    <a href="/images#rotate" class="tool-link" data-name="rotate image turn degrees angle">
                        <svg width="20" height="20" 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>
                        Rotate
                    </a>
                    <a href="/images#stripexif" class="tool-link" data-name="strip exif metadata remove privacy location">
                        <svg width="20" height="20" 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>
                        Strip EXIF
                    </a>
                    <a href="/images#toico" class="tool-link" data-name="to ico icon favicon convert">
                        <svg width="20" height="20" 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>
                        To ICO
                    </a>
                    <a href="/images#flip" class="tool-link" data-name="flip image mirror horizontal vertical">
                        <svg width="20" height="20" 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>
                        Flip
                    </a>
                    <a href="/images#grayscale" class="tool-link" data-name="grayscale image black white desaturate">
                        <svg width="20" height="20" 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>
                        Grayscale
                    </a>
                    <a href="/images#blur" class="tool-link" data-name="blur image gaussian soften">
                        <svg width="20" height="20" 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>
                        Blur
                    </a>
                    <a href="/images#qrcode" class="tool-link" data-name="qr code generator barcode scan">
                        <svg width="20" height="20" 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>
                        QR Code
                    </a>
                    <a href="/images#watermark" class="tool-link" data-name="watermark image text overlay stamp">
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M12 2.69l5.66 5.66a8 8 0 11-11.31 0z"/></svg>
                        Watermark
                    </a>
                    <a href="/images#placeholder" class="tool-link" data-name="placeholder image dummy generate dimensions">
                        <svg width="20" height="20" 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"/><line x1="3" y1="3" x2="21" y2="21"/><line x1="21" y1="3" x2="3" y2="21"/></svg>
                        Placeholder Image
                    </a>
                </div>
            </div>

            <div class="tool-category" data-category="convert">
                <h2 class="tool-category-header">File Converter</h2>
                <div class="tool-grid">
                    <a href="/convert#md2html" class="tool-link" data-name="markdown to html convert">
                        <svg width="20" height="20" 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>
                        Markdown to HTML
                    </a>
                    <a href="/convert#csv2json" class="tool-link" data-name="csv to json convert data">
                        <svg width="20" height="20" 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>
                        CSV to JSON
                    </a>
                    <a href="/convert#json2csv" class="tool-link" data-name="json to csv convert data">
                        <svg width="20" height="20" 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>
                        JSON to CSV
                    </a>
                    <a href="/convert#yaml2json" class="tool-link" data-name="yaml to json convert config">
                        <svg width="20" height="20" 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>
                        YAML to JSON
                    </a>
                    <a href="/convert#json2yaml" class="tool-link" data-name="json to yaml convert config">
                        <svg width="20" height="20" 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>
                        JSON to YAML
                    </a>
                    <a href="/convert#csv2tsv" class="tool-link" data-name="csv tsv tab separated convert">
                        <svg width="20" height="20" 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>
                        CSV / TSV
                    </a>
                    <a href="/convert#xml2json" class="tool-link" data-name="xml to json convert data">
                        <svg width="20" height="20" 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>
                        XML to JSON
                    </a>
                    <a href="/convert#createzip" class="tool-link" data-name="create zip archive compress files">
                        <svg width="20" height="20" 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>
                        Create ZIP
                    </a>
                    <a href="/convert#extractzip" class="tool-link" data-name="extract zip unzip archive decompress">
                        <svg width="20" height="20" 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>
                        Extract ZIP
                    </a>
                </div>
            </div>

            <div class="tool-category" data-category="av">
                <h2 class="tool-category-header">Audio &amp; Video</h2>
                <div class="tool-grid">
                    <a href="/av#av-convert-audio" class="tool-link" data-name="convert audio format mp3 wav ogg flac aac">
                        <svg width="20" height="20" 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>
                        Convert Audio
                    </a>
                    <a href="/av#av-trim-audio" class="tool-link" data-name="trim audio cut clip start end">
                        <svg width="20" height="20" 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>
                        Trim Audio
                    </a>
                    <a href="/av#av-speed" class="tool-link" data-name="change speed audio video tempo playback rate">
                        <svg width="20" height="20" 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>
                        Change Speed
                    </a>
                    <a href="/av#av-extract-audio" class="tool-link" data-name="extract audio from video strip soundtrack">
                        <svg width="20" height="20" 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>
                        Extract Audio
                    </a>
                    <a href="/av#av-merge-audio" class="tool-link" data-name="merge audio concatenate combine join files">
                        <svg width="20" height="20" 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>
                        Merge Audio
                    </a>
                    <a href="/av#av-normalize" class="tool-link" data-name="normalize volume loudness audio level">
                        <svg width="20" height="20" 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>
                        Normalize Volume
                    </a>
                    <a href="/av#av-trim-video" class="tool-link" data-name="trim video cut clip start end">
                        <svg width="20" height="20" 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>
                        Trim Video
                    </a>
                    <a href="/av#av-compress-video" class="tool-link" data-name="compress video reduce size smaller">
                        <svg width="20" height="20" 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>
                        Compress Video
                    </a>
                    <a href="/av#av-convert-video" class="tool-link" data-name="convert video format mp4 webm mov avi">
                        <svg width="20" height="20" 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>
                        Convert Video
                    </a>
                    <a href="/av#av-video-to-gif" class="tool-link" data-name="video to gif animated convert clip">
                        <svg width="20" height="20" 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>
                        Video to GIF
                    </a>
                    <a href="/av#reverse-audio" class="tool-link" data-name="reverse audio backwards backward">
                        <svg width="20" height="20" 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"/><polyline points="19 1 15 5 19 9"/><path d="M15 5h4a2 2 0 012 2v10"/></svg>
                        Reverse Audio
                    </a>
                    <a href="/av#pitch" class="tool-link" data-name="change pitch semitone shift audio tone">
                        <svg width="20" height="20" 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 3v18"/><polyline points="12 6 15 3 18 6"/><polyline points="12 18 15 21 18 18"/></svg>
                        Change Pitch
                    </a>
                    <a href="/av#equalizer" class="tool-link" data-name="audio equalizer eq bass mid treble frequency">
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><line x1="4" y1="21" x2="4" y2="14"/><line x1="4" y1="10" x2="4" y2="3"/><line x1="12" y1="21" x2="12" y2="12"/><line x1="12" y1="8" x2="12" y2="3"/><line x1="20" y1="21" x2="20" y2="16"/><line x1="20" y1="12" x2="20" y2="3"/><line x1="1" y1="14" x2="7" y2="14"/><line x1="9" y1="8" x2="15" y2="8"/><line x1="17" y1="16" x2="23" y2="16"/></svg>
                        Audio Equalizer
                    </a>
                    <a href="/av#fade" class="tool-link" data-name="audio fade in out effect transition">
                        <svg width="20" height="20" 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 12h7"/><path d="M15 12l3-4"/><path d="M22 12l-3 4"/></svg>
                        Audio Fade
                    </a>
                    <a href="/av#crop-video" class="tool-link" data-name="crop video cut region area dimensions">
                        <svg width="20" height="20" 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>
                        Crop Video
                    </a>
                    <a href="/av#rotate-video" class="tool-link" data-name="rotate video turn angle degrees orientation">
                        <svg width="20" height="20" 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>
                        Rotate Video
                    </a>
                    <a href="/av#resize-video" class="tool-link" data-name="resize video scale resolution dimensions">
                        <svg width="20" height="20" 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>
                        Resize Video
                    </a>
                    <a href="/av#reverse-video" class="tool-link" data-name="reverse video backwards backward play">
                        <svg width="20" height="20" 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>
                        Reverse Video
                    </a>
                    <a href="/av#loop-video" class="tool-link" data-name="loop video repeat cycle count">
                        <svg width="20" height="20" 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>
                        Loop Video
                    </a>
                    <a href="/av#mute-video" class="tool-link" data-name="mute video remove audio silent silence strip">
                        <svg width="20" height="20" 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"/><line x1="23" y1="9" x2="17" y2="15"/><line x1="17" y1="9" x2="23" y2="15"/></svg>
                        Mute Video
                    </a>
                    <a href="/av#add-audio" class="tool-link" data-name="add audio to video soundtrack music replace">
                        <svg width="20" height="20" 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>
                        Add Audio to Video
                    </a>
                    <a href="/av#burn-subs" class="tool-link" data-name="burn subtitles srt hardcode video captions">
                        <svg width="20" height="20" 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>
                        Burn Subtitles
                    </a>
                    <a href="/av#av-record-audio" class="tool-link" data-name="voice recorder microphone audio record">
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M12 1a3 3 0 00-3 3v8a3 3 0 006 0V4a3 3 0 00-3-3z"/><path d="M19 10v2a7 7 0 01-14 0v-2"/><line x1="12" y1="19" x2="12" y2="23"/><line x1="8" y1="23" x2="16" y2="23"/></svg>
                        Voice Recorder
                    </a>
                    <a href="/av#av-record-screen" class="tool-link" data-name="screen recorder capture desktop window tab">
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="2" y="3" width="20" height="14" rx="2" ry="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg>
                        Screen Recorder
                    </a>
                </div>
            </div>

            <div class="tool-category" data-category="text">
                <h2 class="tool-category-header">Text Tools</h2>
                <div class="tool-grid">
                    <a href="/text#wordcount" class="tool-link" data-name="word count characters lines statistics">
                        <svg width="20" height="20" 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>
                        Word Count
                    </a>
                    <a href="/text#findreplace" class="tool-link" data-name="find replace search text substitute">
                        <svg width="20" height="20" 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>
                        Find &amp; Replace
                    </a>
                    <a href="/text#regex" class="tool-link" data-name="regex regular expression tester pattern match">
                        <svg width="20" height="20" 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>
                        Regex Tester
                    </a>
                    <a href="/text#diff" class="tool-link" data-name="diff compare text difference changes">
                        <svg width="20" height="20" 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>
                        Text Diff
                    </a>
                    <a href="/text#case" class="tool-link" data-name="case converter uppercase lowercase title camel">
                        <svg width="20" height="20" 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>
                        Case Converter
                    </a>
                    <a href="/text#base64" class="tool-link" data-name="base64 encode decode binary text">
                        <svg width="20" height="20" 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>
                        Base64
                    </a>
                    <a href="/text#hash" class="tool-link" data-name="hash generator md5 sha1 sha256 checksum">
                        <svg width="20" height="20" 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>
                        Hash Generator
                    </a>
                    <a href="/text#urlencode" class="tool-link" data-name="url encode decode percent encoding">
                        <svg width="20" height="20" 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>
                        URL Encode
                    </a>
                    <a href="/text#json" class="tool-link" data-name="json format beautify minify pretty print validate">
                        <svg width="20" height="20" 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>
                        JSON Format
                    </a>
                    <a href="/text#jwt" class="tool-link" data-name="jwt decoder json web token parse claims">
                        <svg width="20" height="20" 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>
                        JWT Decoder
                    </a>
                    <a href="/text#uuid" class="tool-link" data-name="uuid generator unique id guid random">
                        <svg width="20" height="20" 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>
                        UUID Generator
                    </a>
                    <a href="/text#timestamp" class="tool-link" data-name="timestamp unix epoch date time converter">
                        <svg width="20" height="20" 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>
                        Timestamp
                    </a>
                    <a href="/text#lorem" class="tool-link" data-name="lorem ipsum placeholder dummy text generator">
                        <svg width="20" height="20" 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>
                        Lorem Ipsum
                    </a>
                    <a href="/text#color" class="tool-link" data-name="color converter hex rgb hsl picker">
                        <svg width="20" height="20" 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>
                        Color Converter
                    </a>
                    <a href="/text#password" class="tool-link" data-name="password generator random secure strong">
                        <svg width="20" height="20" 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>
                        Password Generator
                    </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 links = sec.querySelectorAll('.tool-link');
            var catVisible = false;
            links.forEach(function(link) {
                var name = (link.getAttribute('data-name') || '') + ' ' + link.textContent.toLowerCase();
                var show = !q || name.indexOf(q) !== -1;
                link.style.display = show ? '' : 'none';
                if (show) catVisible = true;
            });
            sec.style.display = catVisible ? '' : 'none';
            if (catVisible) anyVisible = true;
        });
        noResults.hidden = anyVisible;
    });
})();

// Hero word cycling
(function() {
    var words = [
        'Download media from 1000+ sites',
        'Merge, split, and compress PDFs',
        'Resize, crop, and convert images',
        'Convert between file formats',
        'Trim, convert, and process audio',
        'Edit and compress video files',
        'Hash, encode, and generate text',
        'Everything runs 100% locally',
        'No uploads, no accounts needed',
        'Fast, private, and offline'
    ];
    var el = document.getElementById('hero-word');
    var i = 0;
    setInterval(function() {
        el.classList.add('hero-word-out');
        setTimeout(function() {
            i = (i + 1) % words.length;
            el.textContent = words[i];
            el.classList.remove('hero-word-out');
        }, 300);
    }, 2500);
})();
</script>
{% endblock %}