{"id":41,"date":"2026-07-12T14:06:50","date_gmt":"2026-07-12T14:06:50","guid":{"rendered":"https:\/\/toolists.com\/?page_id=41"},"modified":"2026-07-13T05:05:16","modified_gmt":"2026-07-13T05:05:16","slug":"home","status":"publish","type":"page","link":"https:\/\/toolists.com\/?page_id=41","title":{"rendered":"Home"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t<\/div>\n\t\t
\n \t\t
\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n Toolists \u2013 Free Online Tools That Work Instantly in Your Browser<\/title>\r\n <meta name=\"description\" content=\"Toolists offers 100+ free online tools for images, text, developers, SEO, colors, calculators, and more. No uploads, no sign-ups, 100% private.\" \/>\r\n <link rel=\"canonical\" href=\"https:\/\/www.toolists.com\/\" \/>\r\n <meta property=\"og:title\" content=\"Toolists \u2013 Free Online Tools That Work Instantly in Your Browser\" \/>\r\n <meta property=\"og:description\" content=\"100+ free browser-based tools for images, text, development, SEO, color, and calculations. Private, fast, and always free.\" \/>\r\n <meta property=\"og:url\" content=\"https:\/\/www.toolists.com\/\" \/>\r\n <meta property=\"og:type\" content=\"website\" \/>\r\n <meta name=\"twitter:card\" content=\"summary_large_image\" \/>\r\n <meta name=\"twitter:title\" content=\"Toolists \u2013 Free Online Tools That Work Instantly\" \/>\r\n <meta name=\"twitter:description\" content=\"100+ free online tools. No uploads, no sign-ups, 100% private.\" \/>\r\n <link rel=\"icon\" href=\"data:image\/svg+xml,<svg xmlns='http:\/\/www.w3.org\/2000\/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>\ud83d\udee0\ufe0f<\/text><\/svg>\" \/>\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\" \/>\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin \/>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600;700;800;900&family=Poppins:wght@400;500;600;700;800;900&display=swap\" rel=\"stylesheet\" \/>\r\n <style>\r\n \/* ============================================================\r\n CSS RESET & BASE\r\n ============================================================ *\/\r\n *,\r\n *::before,\r\n *::after {\r\n box-sizing: border-box;\r\n margin: 0;\r\n padding: 0;\r\n }\r\n :root {\r\n --primary: #EDB726;\r\n --primary-dark: #d4a31e;\r\n --dark: #2B2B2B;\r\n --accent: #FF6B35;\r\n --blue: #4F8EF7;\r\n --success: #2ECC71;\r\n --danger: #E74C3C;\r\n --light-bg: #FFFFFF;\r\n --dark-bg: #121212;\r\n --cards: #F8F9FA;\r\n --radius: 16px;\r\n --shadow: 0 10px 40px rgba(0, 0, 0, 0.08);\r\n --shadow-hover: 0 20px 60px rgba(0, 0, 0, 0.12);\r\n --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);\r\n --font-heading: 'Poppins', sans-serif;\r\n --font-body: 'Inter', sans-serif;\r\n --bg: #ffffff;\r\n --text: #1a1a1a;\r\n --text-muted: #6b6b6b;\r\n --card-bg: #f8f9fa;\r\n --border: #e9ecef;\r\n --header-bg: rgba(255, 255, 255, 0.92);\r\n --glass: rgba(255, 255, 255, 0.7);\r\n --glass-border: rgba(255, 255, 255, 0.2);\r\n }\r\n [data-theme=\"dark\"] {\r\n --bg: #121212;\r\n --text: #f0f0f0;\r\n --text-muted: #aaa;\r\n --card-bg: #1e1e1e;\r\n --border: #2a2a2a;\r\n --header-bg: rgba(18, 18, 18, 0.92);\r\n --glass: rgba(30, 30, 30, 0.7);\r\n --glass-border: rgba(255, 255, 255, 0.05);\r\n --shadow: 0 10px 40px rgba(0, 0, 0, 0.4);\r\n --shadow-hover: 0 20px 60px rgba(0, 0, 0, 0.5);\r\n }\r\n html {\r\n scroll-behavior: smooth;\r\n font-size: 16px;\r\n }\r\n body {\r\n font-family: var(--font-body);\r\n background: var(--bg);\r\n color: var(--text);\r\n line-height: 1.7;\r\n transition: background var(--transition), color var(--transition);\r\n }\r\n a {\r\n color: var(--primary);\r\n text-decoration: none;\r\n transition: color var(--transition);\r\n }\r\n a:hover {\r\n color: var(--primary-dark);\r\n }\r\n img {\r\n max-width: 100%;\r\n height: auto;\r\n display: block;\r\n }\r\n .container {\r\n max-width: 1200px;\r\n margin: 0 auto;\r\n padding: 0 24px;\r\n }\r\n .section {\r\n padding: 80px 0;\r\n }\r\n .section-title {\r\n font-family: var(--font-heading);\r\n font-weight: 800;\r\n font-size: 2.2rem;\r\n letter-spacing: -0.02em;\r\n margin-bottom: 12px;\r\n color: var(--text);\r\n }\r\n .section-sub {\r\n font-size: 1.1rem;\r\n color: var(--text-muted);\r\n max-width: 600px;\r\n }\r\n .text-center {\r\n text-align: center;\r\n }\r\n .text-center .section-sub {\r\n margin: 0 auto;\r\n }\r\n .btn {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 8px;\r\n padding: 12px 28px;\r\n border-radius: 50px;\r\n font-family: var(--font-body);\r\n font-weight: 600;\r\n font-size: 0.95rem;\r\n border: none;\r\n cursor: pointer;\r\n transition: all var(--transition);\r\n text-decoration: none;\r\n background: var(--primary);\r\n color: #1a1a1a;\r\n }\r\n .btn:hover {\r\n transform: translateY(-2px);\r\n box-shadow: 0 8px 25px rgba(237, 183, 38, 0.35);\r\n color: #1a1a1a;\r\n }\r\n .btn-outline {\r\n background: transparent;\r\n border: 2px solid var(--primary);\r\n color: var(--primary);\r\n }\r\n .btn-outline:hover {\r\n background: var(--primary);\r\n color: #1a1a1a;\r\n }\r\n .btn-accent {\r\n background: var(--accent);\r\n color: #fff;\r\n }\r\n .btn-accent:hover {\r\n box-shadow: 0 8px 25px rgba(255, 107, 53, 0.35);\r\n color: #fff;\r\n }\r\n .btn-dark {\r\n background: var(--dark);\r\n color: #fff;\r\n }\r\n .btn-dark:hover {\r\n background: #3a3a3a;\r\n color: #fff;\r\n }\r\n .badge {\r\n display: inline-block;\r\n padding: 4px 14px;\r\n border-radius: 50px;\r\n font-size: 0.75rem;\r\n font-weight: 600;\r\n background: var(--primary);\r\n color: #1a1a1a;\r\n letter-spacing: 0.3px;\r\n }\r\n\r\n \/* ============================================================\r\n HEADER\r\n ============================================================ *\/\r\n .header {\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n z-index: 1000;\r\n background: var(--header-bg);\r\n backdrop-filter: blur(16px);\r\n -webkit-backdrop-filter: blur(16px);\r\n border-bottom: 1px solid var(--border);\r\n transition: all var(--transition);\r\n height: 72px;\r\n display: flex;\r\n align-items: center;\r\n }\r\n .header-inner {\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n width: 100%;\r\n }\r\n .logo {\r\n display: flex;\r\n align-items: center;\r\n gap: 10px;\r\n font-family: var(--font-heading);\r\n font-weight: 900;\r\n font-size: 1.5rem;\r\n color: var(--text);\r\n flex-shrink: 0;\r\n }\r\n .logo svg {\r\n width: 38px;\r\n height: 38px;\r\n }\r\n .logo span {\r\n color: var(--primary);\r\n }\r\n .header-nav {\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n }\r\n .header-nav a {\r\n padding: 8px 16px;\r\n border-radius: 8px;\r\n font-weight: 500;\r\n font-size: 0.9rem;\r\n color: var(--text-muted);\r\n transition: all var(--transition);\r\n position: relative;\r\n }\r\n .header-nav a:hover,\r\n .header-nav a.active {\r\n color: var(--text);\r\n background: var(--card-bg);\r\n }\r\n .header-actions {\r\n display: flex;\r\n align-items: center;\r\n gap: 12px;\r\n flex-shrink: 0;\r\n }\r\n .theme-toggle {\r\n width: 40px;\r\n height: 40px;\r\n border-radius: 50%;\r\n border: none;\r\n background: var(--card-bg);\r\n color: var(--text);\r\n font-size: 1.2rem;\r\n cursor: pointer;\r\n transition: all var(--transition);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n }\r\n .theme-toggle:hover {\r\n background: var(--border);\r\n }\r\n .hamburger {\r\n display: none;\r\n flex-direction: column;\r\n gap: 5px;\r\n cursor: pointer;\r\n padding: 8px;\r\n background: none;\r\n border: none;\r\n }\r\n .hamburger span {\r\n width: 26px;\r\n height: 2.5px;\r\n background: var(--text);\r\n border-radius: 4px;\r\n transition: all var(--transition);\r\n }\r\n .hamburger.active span:nth-child(1) {\r\n transform: rotate(45deg) translate(5px, 5px);\r\n }\r\n .hamburger.active span:nth-child(2) {\r\n opacity: 0;\r\n }\r\n .hamburger.active span:nth-child(3) {\r\n transform: rotate(-45deg) translate(5px, -5px);\r\n }\r\n\r\n \/* Mobile Drawer *\/\r\n .mobile-drawer {\r\n position: fixed;\r\n top: 72px;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n background: var(--bg);\r\n padding: 24px;\r\n transform: translateX(100%);\r\n transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);\r\n overflow-y: auto;\r\n z-index: 999;\r\n border-top: 1px solid var(--border);\r\n }\r\n .mobile-drawer.open {\r\n transform: translateX(0);\r\n }\r\n .mobile-drawer a {\r\n display: block;\r\n padding: 14px 0;\r\n border-bottom: 1px solid var(--border);\r\n font-weight: 500;\r\n color: var(--text);\r\n }\r\n .mobile-drawer a:hover {\r\n color: var(--primary);\r\n }\r\n\r\n \/* ============================================================\r\n SEARCH BAR (header)\r\n ============================================================ *\/\r\n .search-wrap {\r\n position: relative;\r\n flex: 1;\r\n max-width: 420px;\r\n margin: 0 16px;\r\n }\r\n .search-wrap input {\r\n width: 100%;\r\n padding: 10px 18px 10px 44px;\r\n border-radius: 50px;\r\n border: 1px solid var(--border);\r\n background: var(--card-bg);\r\n font-family: var(--font-body);\r\n font-size: 0.9rem;\r\n color: var(--text);\r\n transition: all var(--transition);\r\n outline: none;\r\n }\r\n .search-wrap input:focus {\r\n border-color: var(--primary);\r\n box-shadow: 0 0 0 4px rgba(237, 183, 38, 0.15);\r\n }\r\n .search-wrap .search-icon {\r\n position: absolute;\r\n left: 16px;\r\n top: 50%;\r\n transform: translateY(-50%);\r\n color: var(--text-muted);\r\n pointer-events: none;\r\n }\r\n .search-suggestions {\r\n position: absolute;\r\n top: calc(100% + 8px);\r\n left: 0;\r\n right: 0;\r\n background: var(--bg);\r\n border: 1px solid var(--border);\r\n border-radius: var(--radius);\r\n box-shadow: var(--shadow);\r\n padding: 8px 0;\r\n display: none;\r\n max-height: 320px;\r\n overflow-y: auto;\r\n z-index: 100;\r\n }\r\n .search-suggestions.visible {\r\n display: block;\r\n }\r\n .search-suggestions li {\r\n list-style: none;\r\n padding: 10px 18px;\r\n cursor: pointer;\r\n font-size: 0.9rem;\r\n color: var(--text);\r\n transition: background var(--transition);\r\n display: flex;\r\n align-items: center;\r\n gap: 10px;\r\n }\r\n .search-suggestions li:hover,\r\n .search-suggestions li.active {\r\n background: var(--card-bg);\r\n }\r\n .search-suggestions li .cat {\r\n font-size: 0.7rem;\r\n background: var(--primary);\r\n color: #1a1a1a;\r\n padding: 2px 10px;\r\n border-radius: 50px;\r\n font-weight: 600;\r\n }\r\n\r\n \/* ============================================================\r\n HERO\r\n ============================================================ *\/\r\n .hero {\r\n padding: 140px 0 80px;\r\n position: relative;\r\n overflow: hidden;\r\n background: linear-gradient(135deg, rgba(237, 183, 38, 0.06) 0%, rgba(79, 142, 247, 0.06) 100%);\r\n }\r\n .hero .container {\r\n position: relative;\r\n z-index: 2;\r\n }\r\n .hero-badge {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 8px;\r\n background: var(--card-bg);\r\n padding: 6px 18px 6px 10px;\r\n border-radius: 50px;\r\n font-size: 0.8rem;\r\n font-weight: 500;\r\n color: var(--text-muted);\r\n margin-bottom: 20px;\r\n border: 1px solid var(--border);\r\n }\r\n .hero-badge .dot {\r\n width: 8px;\r\n height: 8px;\r\n border-radius: 50%;\r\n background: var(--success);\r\n animation: pulse-dot 2s infinite;\r\n }\r\n @keyframes pulse-dot {\r\n 0%,\r\n 100% {\r\n opacity: 1;\r\n transform: scale(1);\r\n }\r\n 50% {\r\n opacity: 0.5;\r\n transform: scale(0.8);\r\n }\r\n }\r\n .hero h1 {\r\n font-family: var(--font-heading);\r\n font-weight: 900;\r\n font-size: clamp(2.6rem, 6vw, 4.2rem);\r\n letter-spacing: -0.03em;\r\n line-height: 1.1;\r\n color: var(--text);\r\n max-width: 800px;\r\n }\r\n .hero h1 .highlight {\r\n background: linear-gradient(135deg, var(--primary), var(--accent));\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n background-clip: text;\r\n }\r\n .hero p {\r\n font-size: 1.2rem;\r\n color: var(--text-muted);\r\n max-width: 600px;\r\n margin: 20px 0 32px;\r\n }\r\n .hero-stats {\r\n display: flex;\r\n gap: 40px;\r\n margin-top: 40px;\r\n flex-wrap: wrap;\r\n }\r\n .hero-stats .stat {\r\n display: flex;\r\n flex-direction: column;\r\n }\r\n .hero-stats .stat .num {\r\n font-family: var(--font-heading);\r\n font-weight: 800;\r\n font-size: 2rem;\r\n color: var(--text);\r\n }\r\n .hero-stats .stat .label {\r\n font-size: 0.85rem;\r\n color: var(--text-muted);\r\n }\r\n .hero .search-wrap {\r\n max-width: 540px;\r\n margin: 0;\r\n }\r\n .hero .search-wrap input {\r\n padding: 14px 20px 14px 50px;\r\n font-size: 1rem;\r\n background: var(--bg);\r\n border-color: var(--border);\r\n }\r\n .hero .search-wrap .search-icon {\r\n left: 18px;\r\n font-size: 1.1rem;\r\n }\r\n\r\n \/* Animated gradient orb *\/\r\n .hero-orb {\r\n position: absolute;\r\n right: -10%;\r\n top: -20%;\r\n width: 600px;\r\n height: 600px;\r\n border-radius: 50%;\r\n background: radial-gradient(circle, rgba(237, 183, 38, 0.15), transparent 70%);\r\n animation: float-orb 12s ease-in-out infinite;\r\n pointer-events: none;\r\n }\r\n @keyframes float-orb {\r\n 0%,\r\n 100% {\r\n transform: translate(0, 0) scale(1);\r\n }\r\n 50% {\r\n transform: translate(-40px, 30px) scale(1.05);\r\n }\r\n }\r\n\r\n \/* ============================================================\r\n TOOL CARDS GRID\r\n ============================================================ *\/\r\n .tool-grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));\r\n gap: 24px;\r\n margin-top: 32px;\r\n }\r\n .tool-card {\r\n background: var(--card-bg);\r\n border-radius: var(--radius);\r\n padding: 24px;\r\n transition: all var(--transition);\r\n border: 1px solid var(--border);\r\n position: relative;\r\n overflow: hidden;\r\n cursor: pointer;\r\n }\r\n .tool-card:hover {\r\n transform: translateY(-6px);\r\n box-shadow: var(--shadow-hover);\r\n border-color: var(--primary);\r\n }\r\n .tool-card .icon {\r\n font-size: 2rem;\r\n margin-bottom: 12px;\r\n display: block;\r\n }\r\n .tool-card h3 {\r\n font-family: var(--font-heading);\r\n font-weight: 700;\r\n font-size: 1.1rem;\r\n margin-bottom: 6px;\r\n color: var(--text);\r\n }\r\n .tool-card p {\r\n font-size: 0.9rem;\r\n color: var(--text-muted);\r\n line-height: 1.5;\r\n }\r\n .tool-card .badge {\r\n position: absolute;\r\n top: 16px;\r\n right: 16px;\r\n font-size: 0.65rem;\r\n }\r\n .tool-card .arrow {\r\n margin-top: 12px;\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 6px;\r\n font-weight: 600;\r\n font-size: 0.85rem;\r\n color: var(--primary);\r\n transition: gap var(--transition);\r\n }\r\n .tool-card:hover .arrow {\r\n gap: 12px;\r\n }\r\n\r\n \/* ============================================================\r\n CATEGORIES\r\n ============================================================ *\/\r\n .category-grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));\r\n gap: 16px;\r\n margin-top: 28px;\r\n }\r\n .category-chip {\r\n background: var(--card-bg);\r\n border: 1px solid var(--border);\r\n border-radius: 50px;\r\n padding: 12px 22px;\r\n text-align: center;\r\n font-weight: 600;\r\n font-size: 0.9rem;\r\n color: var(--text);\r\n transition: all var(--transition);\r\n cursor: pointer;\r\n }\r\n .category-chip:hover {\r\n background: var(--primary);\r\n color: #1a1a1a;\r\n border-color: var(--primary);\r\n transform: translateY(-2px);\r\n }\r\n .category-chip .emoji {\r\n margin-right: 8px;\r\n }\r\n\r\n \/* ============================================================\r\n FEATURES\r\n ============================================================ *\/\r\n .features-grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));\r\n gap: 30px;\r\n margin-top: 32px;\r\n }\r\n .feature-item {\r\n background: var(--card-bg);\r\n border-radius: var(--radius);\r\n padding: 32px 24px;\r\n border: 1px solid var(--border);\r\n transition: all var(--transition);\r\n text-align: center;\r\n }\r\n .feature-item:hover {\r\n transform: translateY(-4px);\r\n box-shadow: var(--shadow-hover);\r\n }\r\n .feature-item .icon {\r\n font-size: 2.6rem;\r\n margin-bottom: 16px;\r\n display: block;\r\n }\r\n .feature-item h3 {\r\n font-family: var(--font-heading);\r\n font-weight: 700;\r\n font-size: 1.2rem;\r\n margin-bottom: 8px;\r\n }\r\n .feature-item p {\r\n color: var(--text-muted);\r\n font-size: 0.95rem;\r\n }\r\n\r\n \/* ============================================================\r\n HOW IT WORKS\r\n ============================================================ *\/\r\n .steps {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));\r\n gap: 30px;\r\n margin-top: 32px;\r\n }\r\n .step {\r\n text-align: center;\r\n }\r\n .step .num {\r\n width: 56px;\r\n height: 56px;\r\n border-radius: 50%;\r\n background: var(--primary);\r\n color: #1a1a1a;\r\n font-family: var(--font-heading);\r\n font-weight: 800;\r\n font-size: 1.4rem;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n margin: 0 auto 16px;\r\n }\r\n .step h4 {\r\n font-family: var(--font-heading);\r\n font-weight: 700;\r\n font-size: 1.1rem;\r\n margin-bottom: 6px;\r\n }\r\n .step p {\r\n color: var(--text-muted);\r\n font-size: 0.95rem;\r\n }\r\n\r\n \/* ============================================================\r\n TESTIMONIALS\r\n ============================================================ *\/\r\n .testimonial-grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));\r\n gap: 24px;\r\n margin-top: 32px;\r\n }\r\n .testimonial {\r\n background: var(--card-bg);\r\n border-radius: var(--radius);\r\n padding: 28px;\r\n border: 1px solid var(--border);\r\n }\r\n .testimonial .stars {\r\n color: var(--primary);\r\n font-size: 1.1rem;\r\n margin-bottom: 10px;\r\n }\r\n .testimonial blockquote {\r\n font-size: 0.95rem;\r\n color: var(--text);\r\n font-style: italic;\r\n line-height: 1.6;\r\n }\r\n .testimonial .author {\r\n margin-top: 14px;\r\n font-weight: 600;\r\n color: var(--text);\r\n }\r\n .testimonial .role {\r\n font-size: 0.85rem;\r\n color: var(--text-muted);\r\n }\r\n\r\n \/* ============================================================\r\n FAQ\r\n ============================================================ *\/\r\n .faq-list {\r\n max-width: 740px;\r\n margin: 32px auto 0;\r\n display: flex;\r\n flex-direction: column;\r\n gap: 12px;\r\n }\r\n .faq-item {\r\n background: var(--card-bg);\r\n border-radius: var(--radius);\r\n border: 1px solid var(--border);\r\n overflow: hidden;\r\n transition: all var(--transition);\r\n }\r\n .faq-item .q {\r\n padding: 18px 24px;\r\n font-weight: 600;\r\n font-size: 1rem;\r\n cursor: pointer;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n color: var(--text);\r\n background: none;\r\n border: none;\r\n width: 100%;\r\n text-align: left;\r\n font-family: var(--font-body);\r\n gap: 16px;\r\n transition: background var(--transition);\r\n }\r\n .faq-item .q:hover {\r\n background: var(--border);\r\n }\r\n .faq-item .q .icon {\r\n flex-shrink: 0;\r\n font-size: 1.2rem;\r\n transition: transform var(--transition);\r\n }\r\n .faq-item.open .q .icon {\r\n transform: rotate(180deg);\r\n }\r\n .faq-item .a {\r\n padding: 0 24px 18px;\r\n color: var(--text-muted);\r\n line-height: 1.7;\r\n display: none;\r\n }\r\n .faq-item.open .a {\r\n display: block;\r\n }\r\n\r\n \/* ============================================================\r\n NEWSLETTER\r\n ============================================================ *\/\r\n .newsletter {\r\n background: var(--card-bg);\r\n border-radius: var(--radius);\r\n padding: 60px 40px;\r\n text-align: center;\r\n border: 1px solid var(--border);\r\n }\r\n .newsletter h2 {\r\n font-family: var(--font-heading);\r\n font-weight: 800;\r\n font-size: 2rem;\r\n margin-bottom: 8px;\r\n }\r\n .newsletter p {\r\n color: var(--text-muted);\r\n margin-bottom: 20px;\r\n }\r\n .newsletter .form {\r\n display: flex;\r\n gap: 12px;\r\n max-width: 480px;\r\n margin: 0 auto;\r\n flex-wrap: wrap;\r\n justify-content: center;\r\n }\r\n .newsletter .form input {\r\n flex: 1;\r\n min-width: 200px;\r\n padding: 12px 20px;\r\n border-radius: 50px;\r\n border: 1px solid var(--border);\r\n background: var(--bg);\r\n font-family: var(--font-body);\r\n font-size: 0.95rem;\r\n color: var(--text);\r\n outline: none;\r\n transition: border var(--transition);\r\n }\r\n .newsletter .form input:focus {\r\n border-color: var(--primary);\r\n }\r\n .newsletter .form .btn {\r\n flex-shrink: 0;\r\n }\r\n\r\n \/* ============================================================\r\n FOOTER\r\n ============================================================ *\/\r\n .footer {\r\n background: var(--dark);\r\n color: rgba(255, 255, 255, 0.85);\r\n padding: 60px 0 30px;\r\n margin-top: 40px;\r\n }\r\n .footer-grid {\r\n display: grid;\r\n grid-template-columns: 2fr 1fr 1fr 1fr;\r\n gap: 40px;\r\n margin-bottom: 40px;\r\n }\r\n .footer .logo {\r\n color: #fff;\r\n font-size: 1.6rem;\r\n }\r\n .footer .logo svg {\r\n filter: brightness(0) invert(1);\r\n }\r\n .footer p {\r\n font-size: 0.9rem;\r\n opacity: 0.8;\r\n margin-top: 12px;\r\n max-width: 300px;\r\n }\r\n .footer h4 {\r\n font-family: var(--font-heading);\r\n font-weight: 700;\r\n font-size: 1rem;\r\n color: #fff;\r\n margin-bottom: 16px;\r\n }\r\n .footer ul {\r\n list-style: none;\r\n }\r\n .footer ul li {\r\n margin-bottom: 10px;\r\n }\r\n .footer ul a {\r\n color: rgba(255, 255, 255, 0.7);\r\n font-size: 0.9rem;\r\n transition: color var(--transition);\r\n }\r\n .footer ul a:hover {\r\n color: var(--primary);\r\n }\r\n \/* Social icons removed per user request *\/\r\n .footer-bottom {\r\n border-top: 1px solid rgba(255, 255, 255, 0.08);\r\n padding-top: 24px;\r\n text-align: center;\r\n font-size: 0.85rem;\r\n opacity: 0.6;\r\n }\r\n\r\n \/* ============================================================\r\n TOOL PAGE TEMPLATE\r\n ============================================================ *\/\r\n .tool-hero {\r\n padding: 120px 0 40px;\r\n background: linear-gradient(135deg, rgba(237, 183, 38, 0.05), rgba(79, 142, 247, 0.05));\r\n }\r\n .tool-hero h1 {\r\n font-family: var(--font-heading);\r\n font-weight: 900;\r\n font-size: clamp(2rem, 4vw, 3rem);\r\n letter-spacing: -0.02em;\r\n color: var(--text);\r\n }\r\n .tool-hero .breadcrumb {\r\n display: flex;\r\n gap: 8px;\r\n font-size: 0.85rem;\r\n color: var(--text-muted);\r\n margin-bottom: 16px;\r\n flex-wrap: wrap;\r\n }\r\n .tool-hero .breadcrumb a {\r\n color: var(--text-muted);\r\n }\r\n .tool-hero .breadcrumb a:hover {\r\n color: var(--primary);\r\n }\r\n .tool-box {\r\n background: var(--card-bg);\r\n border-radius: var(--radius);\r\n padding: 40px;\r\n border: 1px solid var(--border);\r\n box-shadow: var(--shadow);\r\n margin: 32px 0;\r\n }\r\n .tool-box .tool-area {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 24px;\r\n }\r\n .tool-box .drop-zone {\r\n border: 2px dashed var(--border);\r\n border-radius: var(--radius);\r\n padding: 60px 20px;\r\n text-align: center;\r\n transition: all var(--transition);\r\n cursor: pointer;\r\n background: var(--bg);\r\n }\r\n .tool-box .drop-zone:hover,\r\n .tool-box .drop-zone.dragover {\r\n border-color: var(--primary);\r\n background: rgba(237, 183, 38, 0.04);\r\n }\r\n .tool-box .drop-zone .icon {\r\n font-size: 3rem;\r\n display: block;\r\n margin-bottom: 12px;\r\n }\r\n .tool-box .drop-zone p {\r\n color: var(--text-muted);\r\n }\r\n .tool-box .controls {\r\n display: flex;\r\n flex-wrap: wrap;\r\n gap: 12px;\r\n align-items: center;\r\n }\r\n .tool-box .controls label {\r\n font-weight: 500;\r\n font-size: 0.9rem;\r\n }\r\n .tool-box .controls select,\r\n .tool-box .controls input[type=\"number\"],\r\n .tool-box .controls input[type=\"text\"] {\r\n padding: 8px 14px;\r\n border-radius: 8px;\r\n border: 1px solid var(--border);\r\n background: var(--bg);\r\n font-family: var(--font-body);\r\n font-size: 0.9rem;\r\n color: var(--text);\r\n outline: none;\r\n transition: border var(--transition);\r\n }\r\n .tool-box .controls select:focus,\r\n .tool-box .controls input:focus {\r\n border-color: var(--primary);\r\n }\r\n .tool-box .preview-area {\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n gap: 24px;\r\n margin-top: 16px;\r\n }\r\n .tool-box .preview-area img {\r\n border-radius: var(--radius);\r\n border: 1px solid var(--border);\r\n max-height: 300px;\r\n object-fit: contain;\r\n width: 100%;\r\n background: var(--bg);\r\n }\r\n .tool-box .result {\r\n padding: 16px;\r\n background: var(--bg);\r\n border-radius: var(--radius);\r\n border: 1px solid var(--border);\r\n font-family: monospace;\r\n font-size: 0.9rem;\r\n overflow-x: auto;\r\n white-space: pre-wrap;\r\n word-break: break-all;\r\n max-height: 300px;\r\n overflow-y: auto;\r\n }\r\n .tool-content {\r\n max-width: 800px;\r\n margin: 0 auto;\r\n }\r\n .tool-content h2 {\r\n font-family: var(--font-heading);\r\n font-weight: 800;\r\n font-size: 1.8rem;\r\n margin-top: 48px;\r\n margin-bottom: 12px;\r\n color: var(--text);\r\n }\r\n .tool-content h3 {\r\n font-family: var(--font-heading);\r\n font-weight: 700;\r\n font-size: 1.3rem;\r\n margin-top: 32px;\r\n margin-bottom: 8px;\r\n color: var(--text);\r\n }\r\n .tool-content p,\r\n .tool-content li {\r\n color: var(--text-muted);\r\n line-height: 1.8;\r\n }\r\n .tool-content ul,\r\n .tool-content ol {\r\n padding-left: 24px;\r\n margin: 12px 0;\r\n }\r\n .tool-content li {\r\n margin-bottom: 6px;\r\n }\r\n .related-tools {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));\r\n gap: 16px;\r\n margin-top: 20px;\r\n }\r\n .related-tools a {\r\n background: var(--card-bg);\r\n padding: 14px 20px;\r\n border-radius: var(--radius);\r\n border: 1px solid var(--border);\r\n text-align: center;\r\n font-weight: 500;\r\n color: var(--text);\r\n transition: all var(--transition);\r\n }\r\n .related-tools a:hover {\r\n border-color: var(--primary);\r\n background: var(--primary);\r\n color: #1a1a1a;\r\n }\r\n .share-buttons {\r\n display: flex;\r\n gap: 12px;\r\n margin: 24px 0;\r\n flex-wrap: wrap;\r\n }\r\n .share-buttons .btn {\r\n padding: 8px 18px;\r\n font-size: 0.85rem;\r\n }\r\n\r\n \/* ============================================================\r\n ABOUT \/ CONTACT \/ LEGAL PAGES\r\n ============================================================ *\/\r\n .page-hero {\r\n padding: 120px 0 40px;\r\n background: linear-gradient(135deg, rgba(237, 183, 38, 0.04), rgba(79, 142, 247, 0.04));\r\n }\r\n .page-hero h1 {\r\n font-family: var(--font-heading);\r\n font-weight: 900;\r\n font-size: clamp(2.2rem, 4vw, 3.2rem);\r\n color: var(--text);\r\n }\r\n .page-content {\r\n max-width: 780px;\r\n margin: 0 auto;\r\n }\r\n .page-content h2 {\r\n font-family: var(--font-heading);\r\n font-weight: 800;\r\n font-size: 1.6rem;\r\n margin-top: 40px;\r\n margin-bottom: 12px;\r\n color: var(--text);\r\n }\r\n .page-content h3 {\r\n font-family: var(--font-heading);\r\n font-weight: 700;\r\n font-size: 1.2rem;\r\n margin-top: 28px;\r\n margin-bottom: 8px;\r\n color: var(--text);\r\n }\r\n .page-content p,\r\n .page-content li {\r\n color: var(--text-muted);\r\n line-height: 1.8;\r\n }\r\n .page-content ul {\r\n padding-left: 24px;\r\n margin: 12px 0;\r\n }\r\n .page-content li {\r\n margin-bottom: 6px;\r\n }\r\n .contact-form {\r\n background: var(--card-bg);\r\n border-radius: var(--radius);\r\n padding: 40px;\r\n border: 1px solid var(--border);\r\n margin-top: 24px;\r\n }\r\n .contact-form .form-group {\r\n margin-bottom: 20px;\r\n }\r\n .contact-form label {\r\n display: block;\r\n font-weight: 600;\r\n margin-bottom: 6px;\r\n font-size: 0.9rem;\r\n }\r\n .contact-form input,\r\n .contact-form textarea {\r\n width: 100%;\r\n padding: 12px 16px;\r\n border-radius: 8px;\r\n border: 1px solid var(--border);\r\n background: var(--bg);\r\n font-family: var(--font-body);\r\n font-size: 0.95rem;\r\n color: var(--text);\r\n outline: none;\r\n transition: border var(--transition);\r\n }\r\n .contact-form input:focus,\r\n .contact-form textarea:focus {\r\n border-color: var(--primary);\r\n }\r\n .contact-form textarea {\r\n min-height: 140px;\r\n resize: vertical;\r\n }\r\n\r\n \/* ============================================================\r\n BACK TO TOP\r\n ============================================================ *\/\r\n .back-top {\r\n position: fixed;\r\n bottom: 30px;\r\n right: 30px;\r\n width: 48px;\r\n height: 48px;\r\n border-radius: 50%;\r\n background: var(--primary);\r\n color: #1a1a1a;\r\n border: none;\r\n font-size: 1.3rem;\r\n cursor: pointer;\r\n box-shadow: var(--shadow);\r\n transition: all var(--transition);\r\n opacity: 0;\r\n pointer-events: none;\r\n z-index: 900;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n }\r\n .back-top.visible {\r\n opacity: 1;\r\n pointer-events: auto;\r\n }\r\n .back-top:hover {\r\n transform: translateY(-4px);\r\n box-shadow: var(--shadow-hover);\r\n }\r\n\r\n \/* ============================================================\r\n TOAST\r\n ============================================================ *\/\r\n .toast-container {\r\n position: fixed;\r\n bottom: 90px;\r\n right: 30px;\r\n z-index: 2000;\r\n display: flex;\r\n flex-direction: column;\r\n gap: 10px;\r\n }\r\n .toast {\r\n background: var(--dark);\r\n color: #fff;\r\n padding: 14px 24px;\r\n border-radius: var(--radius);\r\n box-shadow: var(--shadow-hover);\r\n font-size: 0.9rem;\r\n animation: slideUp 0.4s ease;\r\n max-width: 360px;\r\n }\r\n .toast.success {\r\n border-left: 4px solid var(--success);\r\n }\r\n .toast.error {\r\n border-left: 4px solid var(--danger);\r\n }\r\n @keyframes slideUp {\r\n from {\r\n transform: translateY(30px);\r\n opacity: 0;\r\n }\r\n to {\r\n transform: translateY(0);\r\n opacity: 1;\r\n }\r\n }\r\n\r\n \/* ============================================================\r\n RESPONSIVE\r\n ============================================================ *\/\r\n @media (max-width: 1024px) {\r\n .footer-grid {\r\n grid-template-columns: 1fr 1fr;\r\n }\r\n }\r\n @media (max-width: 900px) {\r\n .header-nav {\r\n display: none;\r\n }\r\n .hamburger {\r\n display: flex;\r\n }\r\n .search-wrap {\r\n max-width: 200px;\r\n }\r\n .hero-stats {\r\n gap: 24px;\r\n }\r\n .hero h1 {\r\n font-size: clamp(2rem, 5vw, 3rem);\r\n }\r\n .tool-box .preview-area {\r\n grid-template-columns: 1fr;\r\n }\r\n }\r\n @media (max-width: 640px) {\r\n .header-inner {\r\n flex-wrap: nowrap;\r\n gap: 8px;\r\n }\r\n .search-wrap {\r\n max-width: 140px;\r\n margin: 0 8px;\r\n }\r\n .search-wrap input {\r\n padding: 8px 12px 8px 34px;\r\n font-size: 0.8rem;\r\n }\r\n .search-wrap .search-icon {\r\n left: 10px;\r\n font-size: 0.9rem;\r\n }\r\n .logo {\r\n font-size: 1.2rem;\r\n }\r\n .logo svg {\r\n width: 30px;\r\n height: 30px;\r\n }\r\n .hero {\r\n padding: 110px 0 50px;\r\n }\r\n .hero h1 {\r\n font-size: 1.9rem;\r\n }\r\n .hero p {\r\n font-size: 1rem;\r\n }\r\n .hero-stats .stat .num {\r\n font-size: 1.5rem;\r\n }\r\n .section {\r\n padding: 50px 0;\r\n }\r\n .section-title {\r\n font-size: 1.7rem;\r\n }\r\n .tool-grid {\r\n grid-template-columns: 1fr 1fr;\r\n gap: 14px;\r\n }\r\n .tool-card {\r\n padding: 18px;\r\n }\r\n .tool-card .icon {\r\n font-size: 1.5rem;\r\n }\r\n .tool-card h3 {\r\n font-size: 0.95rem;\r\n }\r\n .category-grid {\r\n grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));\r\n }\r\n .features-grid {\r\n grid-template-columns: 1fr;\r\n }\r\n .steps {\r\n grid-template-columns: 1fr;\r\n }\r\n .testimonial-grid {\r\n grid-template-columns: 1fr;\r\n }\r\n .footer-grid {\r\n grid-template-columns: 1fr;\r\n gap: 24px;\r\n }\r\n .newsletter {\r\n padding: 32px 20px;\r\n }\r\n .newsletter h2 {\r\n font-size: 1.5rem;\r\n }\r\n .newsletter .form {\r\n flex-direction: column;\r\n }\r\n .newsletter .form input {\r\n min-width: auto;\r\n }\r\n .tool-box {\r\n padding: 20px;\r\n }\r\n .tool-box .drop-zone {\r\n padding: 30px 16px;\r\n }\r\n .tool-box .controls {\r\n flex-direction: column;\r\n align-items: stretch;\r\n }\r\n .tool-hero h1 {\r\n font-size: 1.7rem;\r\n }\r\n .page-hero h1 {\r\n font-size: 1.8rem;\r\n }\r\n .contact-form {\r\n padding: 24px;\r\n }\r\n .back-top {\r\n bottom: 16px;\r\n right: 16px;\r\n width: 42px;\r\n height: 42px;\r\n font-size: 1.1rem;\r\n }\r\n .toast-container {\r\n right: 16px;\r\n bottom: 72px;\r\n left: 16px;\r\n }\r\n .toast {\r\n max-width: 100%;\r\n }\r\n .share-buttons .btn {\r\n font-size: 0.75rem;\r\n padding: 6px 14px;\r\n }\r\n .related-tools {\r\n grid-template-columns: 1fr 1fr;\r\n }\r\n }\r\n @media (max-width: 420px) {\r\n .tool-grid {\r\n grid-template-columns: 1fr;\r\n }\r\n .category-grid {\r\n grid-template-columns: 1fr 1fr;\r\n }\r\n .related-tools {\r\n grid-template-columns: 1fr;\r\n }\r\n }\r\n\r\n \/* ============================================================\r\n UTILITIES\r\n ============================================================ *\/\r\n .mt-8 {\r\n margin-top: 8px;\r\n }\r\n .mt-16 {\r\n margin-top: 16px;\r\n }\r\n .mt-24 {\r\n margin-top: 24px;\r\n }\r\n .mt-32 {\r\n margin-top: 32px;\r\n }\r\n .gap-8 {\r\n gap: 8px;\r\n }\r\n .gap-12 {\r\n gap: 12px;\r\n }\r\n .flex-wrap {\r\n display: flex;\r\n flex-wrap: wrap;\r\n }\r\n .flex-center {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n }\r\n .sr-only {\r\n position: absolute;\r\n width: 1px;\r\n height: 1px;\r\n padding: 0;\r\n margin: -1px;\r\n overflow: hidden;\r\n clip: rect(0, 0, 0, 0);\r\n border: 0;\r\n }\r\n\r\n \/* Loading skeleton *\/\r\n .skeleton {\r\n background: linear-gradient(90deg, var(--card-bg) 25%, var(--border) 50%, var(--card-bg) 75%);\r\n background-size: 200% 100%;\r\n animation: shimmer 1.5s infinite;\r\n border-radius: 8px;\r\n }\r\n @keyframes shimmer {\r\n 0% {\r\n background-position: -200% 0;\r\n }\r\n 100% {\r\n background-position: 200% 0;\r\n }\r\n }\r\n\r\n \/* Scroll reveal *\/\r\n .reveal {\r\n opacity: 0;\r\n transform: translateY(30px);\r\n transition: all 0.7s cubic-bezier(0.4, 0, 0.2, 1);\r\n }\r\n .reveal.visible {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n <!-- ============================================================\r\n HEADER\r\n ============================================================ -->\r\n <header class=\"header\" role=\"banner\">\r\n <div class=\"container header-inner\">\r\n <a href=\"index.html\" class=\"logo\" aria-label=\"Toolists Home\">\r\n <svg viewBox=\"0 0 100 100\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n <rect x=\"10\" y=\"30\" width=\"80\" height=\"50\" rx=\"8\" fill=\"#EDB726\" \/>\r\n <rect x=\"20\" y=\"40\" width=\"20\" height=\"6\" rx=\"3\" fill=\"#2B2B2B\" \/>\r\n <rect x=\"50\" y=\"40\" width=\"20\" height=\"6\" rx=\"3\" fill=\"#2B2B2B\" \/>\r\n <circle cx=\"30\" cy=\"65\" r=\"8\" fill=\"#2B2B2B\" \/>\r\n <circle cx=\"60\" cy=\"65\" r=\"8\" fill=\"#2B2B2B\" \/>\r\n <rect x=\"22\" y=\"22\" width=\"12\" height=\"10\" rx=\"3\" fill=\"#FF6B35\" \/>\r\n <rect x=\"66\" y=\"22\" width=\"12\" height=\"10\" rx=\"3\" fill=\"#FF6B35\" \/>\r\n <path d=\"M38 28 L50 18 L62 28\" stroke=\"#2B2B2B\" stroke-width=\"3\" stroke-linecap=\"round\" \/>\r\n <\/svg>\r\n Tool<span>ists<\/span>\r\n <\/a>\r\n\r\n <div class=\"search-wrap\" role=\"search\">\r\n <span class=\"search-icon\" aria-hidden=\"true\">\ud83d\udd0d<\/span>\r\n <input type=\"text\" id=\"headerSearch\" placeholder=\"Search tools...\" aria-label=\"Search for tools\" autocomplete=\"off\" \/>\r\n <ul class=\"search-suggestions\" id=\"searchSuggestions\" role=\"listbox\"><\/ul>\r\n <\/div>\r\n\r\n <nav class=\"header-nav\" aria-label=\"Main navigation\">\r\n <a href=\"index.html\" class=\"active\">Home<\/a>\r\n <a href=\"all-tools.html\">All Tools<\/a>\r\n <a href=\"about.html\">About<\/a>\r\n <a href=\"contact.html\">Contact<\/a>\r\n <\/nav>\r\n\r\n <div class=\"header-actions\">\r\n <button class=\"theme-toggle\" id=\"themeToggle\" aria-label=\"Toggle dark mode\">\ud83c\udf19<\/button>\r\n <button class=\"hamburger\" id=\"hamburger\" aria-label=\"Toggle menu\" aria-expanded=\"false\">\r\n <span><\/span><span><\/span><span><\/span>\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/header>\r\n\r\n <!-- Mobile Drawer -->\r\n <div class=\"mobile-drawer\" id=\"mobileDrawer\" role=\"navigation\" aria-label=\"Mobile navigation\">\r\n <a href=\"index.html\">\ud83c\udfe0 Home<\/a>\r\n <a href=\"all-tools.html\">\ud83e\uddf0 All Tools<\/a>\r\n <a href=\"about.html\">\u2139\ufe0f About<\/a>\r\n <a href=\"contact.html\">\ud83d\udcec Contact<\/a>\r\n <a href=\"privacy-policy.html\">\ud83d\udd12 Privacy Policy<\/a>\r\n <a href=\"disclaimer.html\">\u26a0\ufe0f Disclaimer<\/a>\r\n <a href=\"terms.html\">\ud83d\udcc4 Terms & Conditions<\/a>\r\n <\/div>\r\n\r\n <!-- ============================================================\r\n HERO\r\n ============================================================ -->\r\n <section class=\"hero\" aria-labelledby=\"hero-title\">\r\n <div class=\"hero-orb\" aria-hidden=\"true\"><\/div>\r\n <div class=\"container\">\r\n <div class=\"hero-badge\">\r\n <span class=\"dot\"><\/span>\r\n 100+ Free Tools \u2014 No Sign-ups, No Uploads\r\n <\/div>\r\n <h1 id=\"hero-title\">\r\n Free Online Tools That <br \/><span class=\"highlight\">Work Instantly<\/span> in Your Browser\r\n <\/h1>\r\n <p>Rotate images, convert files, calculate metrics, and more \u2014 all 100% client-side, private, and always free.<\/p>\r\n <div class=\"search-wrap\" role=\"search\">\r\n <span class=\"search-icon\" aria-hidden=\"true\">\ud83d\udd0d<\/span>\r\n <input type=\"text\" id=\"heroSearch\" placeholder=\"Find a tool\u2026 (e.g. Image Rotator, GST Calculator)\" aria-label=\"Search for tools\" autocomplete=\"off\" \/>\r\n <ul class=\"search-suggestions\" id=\"heroSuggestions\" role=\"listbox\"><\/ul>\r\n <\/div>\r\n <div class=\"hero-stats\">\r\n <div class=\"stat\"><span class=\"num\">100+<\/span><span class=\"label\">Tools<\/span><\/div>\r\n <div class=\"stat\"><span class=\"num\">\u26a1<\/span><span class=\"label\">Fast<\/span><\/div>\r\n <div class=\"stat\"><span class=\"num\">\ud83d\udd12<\/span><span class=\"label\">Private<\/span><\/div>\r\n <div class=\"stat\"><span class=\"num\">\u267e\ufe0f<\/span><span class=\"label\">Free Forever<\/span><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- ============================================================\r\n POPULAR TOOLS\r\n ============================================================ -->\r\n <section class=\"section\" aria-labelledby=\"popular-title\">\r\n <div class=\"container\">\r\n <div class=\"text-center\">\r\n <h2 class=\"section-title\" id=\"popular-title\">\ud83d\udd25 Popular Tools<\/h2>\r\n <p class=\"section-sub\">Most-used tools by our community \u2014 start using them right now.<\/p>\r\n <\/div>\r\n <div class=\"tool-grid\" id=\"popularGrid\"><\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- ============================================================\r\n TOOL CATEGORIES\r\n ============================================================ -->\r\n <section class=\"section\" style=\"padding-top:0;\" aria-labelledby=\"categories-title\">\r\n <div class=\"container\">\r\n <div class=\"text-center\">\r\n <h2 class=\"section-title\" id=\"categories-title\">\ud83d\udcc2 Browse by Category<\/h2>\r\n <p class=\"section-sub\">Find the right tool for your task across 10+ categories.<\/p>\r\n <\/div>\r\n <div class=\"category-grid\" id=\"categoryGrid\"><\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- ============================================================\r\n FEATURES\r\n ============================================================ -->\r\n <section class=\"section\" style=\"padding-top:0;\" aria-labelledby=\"features-title\">\r\n <div class=\"container\">\r\n <div class=\"text-center\">\r\n <h2 class=\"section-title\" id=\"features-title\">\u2728 Why Toolists?<\/h2>\r\n <p class=\"section-sub\">Built for speed, privacy, and simplicity \u2014 every tool is designed to help you get things done.<\/p>\r\n <\/div>\r\n <div class=\"features-grid\">\r\n <div class=\"feature-item reveal\">\r\n <span class=\"icon\">\u26a1<\/span>\r\n <h3>Lightning Fast<\/h3>\r\n <p>All processing happens in your browser. No server round-trips, no waiting.<\/p>\r\n <\/div>\r\n <div class=\"feature-item reveal\">\r\n <span class=\"icon\">\ud83d\udd12<\/span>\r\n <h3>100% Private<\/h3>\r\n <p>Your files and data never leave your device. Nothing is uploaded or stored.<\/p>\r\n <\/div>\r\n <div class=\"feature-item reveal\">\r\n <span class=\"icon\">\u267e\ufe0f<\/span>\r\n <h3>Always Free<\/h3>\r\n <p>No subscriptions, no hidden fees. All tools are completely free to use forever.<\/p>\r\n <\/div>\r\n <div class=\"feature-item reveal\">\r\n <span class=\"icon\">\ud83d\udcf1<\/span>\r\n <h3>Works Everywhere<\/h3>\r\n <p>Responsive and mobile-first \u2014 use Toolists on your phone, tablet, or desktop.<\/p>\r\n <\/div>\r\n <div class=\"feature-item reveal\">\r\n <span class=\"icon\">\ud83c\udfaf<\/span>\r\n <h3>Precision Tools<\/h3>\r\n <p>Accurate calculations, lossless conversions, and reliable results you can trust.<\/p>\r\n <\/div>\r\n <div class=\"feature-item reveal\">\r\n <span class=\"icon\">\ud83e\udde9<\/span>\r\n <h3>No Install Required<\/h3>\r\n <p>Just open your browser and start using any tool immediately \u2014 zero setup.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- ============================================================\r\n HOW IT WORKS\r\n ============================================================ -->\r\n <section class=\"section\" style=\"padding-top:0;\" aria-labelledby=\"how-title\">\r\n <div class=\"container\">\r\n <div class=\"text-center\">\r\n <h2 class=\"section-title\" id=\"how-title\">\ud83d\ude80 How It Works<\/h2>\r\n <p class=\"section-sub\">Using Toolists is as simple as 1-2-3. No learning curve, no hassles.<\/p>\r\n <\/div>\r\n <div class=\"steps\">\r\n <div class=\"step reveal\">\r\n <div class=\"num\">1<\/div>\r\n <h4>Pick a Tool<\/h4>\r\n <p>Browse our library of 100+ tools and choose the one you need.<\/p>\r\n <\/div>\r\n <div class=\"step reveal\">\r\n <div class=\"num\">2<\/div>\r\n <h4>Use It Instantly<\/h4>\r\n <p>Upload a file, enter your data, or adjust settings \u2014 get results immediately.<\/p>\r\n <\/div>\r\n <div class=\"step reveal\">\r\n <div class=\"num\">3<\/div>\r\n <h4>Download & Go<\/h4>\r\n <p>Save your output, copy results, or share \u2014 everything happens in your browser.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- ============================================================\r\n TESTIMONIALS\r\n ============================================================ -->\r\n <section class=\"section\" style=\"padding-top:0;\" aria-labelledby=\"testimonial-title\">\r\n <div class=\"container\">\r\n <div class=\"text-center\">\r\n <h2 class=\"section-title\" id=\"testimonial-title\">\ud83d\udcac What Our Users Say<\/h2>\r\n <p class=\"section-sub\">Real feedback from real people who use Toolists every day.<\/p>\r\n <\/div>\r\n <div class=\"testimonial-grid\">\r\n <div class=\"testimonial reveal\">\r\n <div class=\"stars\">\u2605\u2605\u2605\u2605\u2605<\/div>\r\n <blockquote>\u201cThe Image Rotator saved me hours of manual editing. It's so fast and the quality is perfect.\u201d<\/blockquote>\r\n <div class=\"author\">\u2014 Sarah J.<\/div>\r\n <div class=\"role\">Graphic Designer<\/div>\r\n <\/div>\r\n <div class=\"testimonial reveal\">\r\n <div class=\"stars\">\u2605\u2605\u2605\u2605\u2605<\/div>\r\n <blockquote>\u201cI use the GST Calculator daily for my business. Accurate, easy, and no sign-up required.\u201d<\/blockquote>\r\n <div class=\"author\">\u2014 Michael T.<\/div>\r\n <div class=\"role\">Small Business Owner<\/div>\r\n <\/div>\r\n <div class=\"testimonial reveal\">\r\n <div class=\"stars\">\u2605\u2605\u2605\u2605\u2605<\/div>\r\n <blockquote>\u201cThe JSON to XML converter is a lifesaver for my API work. Clean output and super reliable.\u201d<\/blockquote>\r\n <div class=\"author\">\u2014 Priya K.<\/div>\r\n <div class=\"role\">Full Stack Developer<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- ============================================================\r\n FAQ\r\n ============================================================ -->\r\n <section class=\"section\" style=\"padding-top:0;\" aria-labelledby=\"faq-title\">\r\n <div class=\"container\">\r\n <div class=\"text-center\">\r\n <h2 class=\"section-title\" id=\"faq-title\">\u2753 Frequently Asked Questions<\/h2>\r\n <p class=\"section-sub\">Quick answers to the most common questions about Toolists.<\/p>\r\n <\/div>\r\n <div class=\"faq-list\" id=\"faqList\">\r\n <div class=\"faq-item open\">\r\n <button class=\"q\" aria-expanded=\"true\">What is Toolists? <span class=\"icon\">\u25bc<\/span><\/button>\r\n <div class=\"a\">Toolists is a free online platform offering 100+ browser-based tools for image editing, text manipulation, development, SEO, color conversion, calculations, and more. All tools work entirely in your browser.<\/div>\r\n <\/div>\r\n <div class=\"faq-item\">\r\n <button class=\"q\" aria-expanded=\"false\">Is Toolists really free? <span class=\"icon\">\u25bc<\/span><\/button>\r\n <div class=\"a\">Yes! Toolists is completely free to use. No sign-ups, no subscriptions, no hidden charges. All tools are available to everyone forever.<\/div>\r\n <\/div>\r\n <div class=\"faq-item\">\r\n <button class=\"q\" aria-expanded=\"false\">Are my files uploaded to a server? <span class=\"icon\">\u25bc<\/span><\/button>\r\n <div class=\"a\">No. All processing happens locally in your browser. Your files and data never leave your device, ensuring complete privacy and security.<\/div>\r\n <\/div>\r\n <div class=\"faq-item\">\r\n <button class=\"q\" aria-expanded=\"false\">Do I need to install anything? <span class=\"icon\">\u25bc<\/span><\/button>\r\n <div class=\"a\">No installation required. Toolists works directly in your browser on any device \u2014 desktop, tablet, or mobile.<\/div>\r\n <\/div>\r\n <div class=\"faq-item\">\r\n <button class=\"q\" aria-expanded=\"false\">How do I use a tool? <span class=\"icon\">\u25bc<\/span><\/button>\r\n <div class=\"a\">Simply select a tool from the homepage or search for it. Follow the on-screen instructions \u2014 upload a file, enter data, or adjust settings. Results appear instantly.<\/div>\r\n <\/div>\r\n <div class=\"faq-item\">\r\n <button class=\"q\" aria-expanded=\"false\">What types of tools are available? <span class=\"icon\">\u25bc<\/span><\/button>\r\n <div class=\"a\">Toolists offers tools across multiple categories: Image Tools, Text Tools, Developer Tools, SEO Tools, Color Tools, Converter Tools, Calculator Tools, Security Tools, Social Media Tools, and Misc Tools.<\/div>\r\n <\/div>\r\n <div class=\"faq-item\">\r\n <button class=\"q\" aria-expanded=\"false\">Can I use Toolists on mobile? <span class=\"icon\">\u25bc<\/span><\/button>\r\n <div class=\"a\">Absolutely. Toolists is fully responsive and works great on smartphones, tablets, and desktops.<\/div>\r\n <\/div>\r\n <div class=\"faq-item\">\r\n <button class=\"q\" aria-expanded=\"false\">How can I contact support? <span class=\"icon\">\u25bc<\/span><\/button>\r\n <div class=\"a\">Visit our <a href=\"contact.html\">Contact page<\/a> to send us a message. We'll get back to you as soon as possible.<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- ============================================================\r\n NEWSLETTER\r\n ============================================================ -->\r\n <section class=\"section\" style=\"padding-top:0;\" aria-labelledby=\"newsletter-title\">\r\n <div class=\"container\">\r\n <div class=\"newsletter\">\r\n <h2 id=\"newsletter-title\">\ud83d\udcec Stay Updated<\/h2>\r\n <p>Get notified when we add new tools and features. No spam, unsubscribe anytime.<\/p>\r\n <form class=\"form\" id=\"newsletterForm\" aria-label=\"Newsletter sign-up\">\r\n <input type=\"email\" placeholder=\"Enter your email\" required aria-label=\"Email address\" \/>\r\n <button type=\"submit\" class=\"btn\">Subscribe<\/button>\r\n <\/form>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- ============================================================\r\n FOOTER\r\n ============================================================ -->\r\n <footer class=\"footer\" role=\"contentinfo\">\r\n <div class=\"container\">\r\n <div class=\"footer-grid\">\r\n <div>\r\n <a href=\"index.html\" class=\"logo\">Tool<span>ists<\/span><\/a>\r\n <p>Free online tools that work instantly in your browser. 100% private, fast, and always free.<\/p>\r\n <!-- Social icons removed -->\r\n <\/div>\r\n <div>\r\n <h4>Popular Tools<\/h4>\r\n <ul>\r\n <li><a href=\"tools\/image-rotator.html\">Image Rotator<\/a><\/li>\r\n <li><a href=\"tools\/webp-to-png.html\">WebP to PNG<\/a><\/li>\r\n <li><a href=\"tools\/gst-calculator.html\">GST Calculator<\/a><\/li>\r\n <li><a href=\"tools\/json-to-xml.html\">JSON to XML<\/a><\/li>\r\n <li><a href=\"tools\/qr-code-generator.html\">QR Code Generator<\/a><\/li>\r\n <\/ul>\r\n <\/div>\r\n <div>\r\n <h4>Company<\/h4>\r\n <ul>\r\n <li><a href=\"about.html\">About<\/a><\/li>\r\n <li><a href=\"contact.html\">Contact<\/a><\/li>\r\n <li><a href=\"privacy-policy.html\">Privacy Policy<\/a><\/li>\r\n <li><a href=\"disclaimer.html\">Disclaimer<\/a><\/li>\r\n <li><a href=\"terms.html\">Terms & Conditions<\/a><\/li>\r\n <\/ul>\r\n <\/div>\r\n <div>\r\n <h4>Quick Links<\/h4>\r\n <ul>\r\n <li><a href=\"all-tools.html\">All Tools<\/a><\/li>\r\n <li><a href=\"#categories\">Categories<\/a><\/li>\r\n <li><a href=\"#faq\">FAQs<\/a><\/li>\r\n <li><a href=\"sitemap.xml\">Sitemap<\/a><\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n <div class=\"footer-bottom\">\r\n © 2026 Toolists. All rights reserved. Built with \u2764\ufe0f for the web.\r\n <\/div>\r\n <\/div>\r\n <\/footer>\r\n\r\n <!-- Back to Top -->\r\n <button class=\"back-top\" id=\"backTop\" aria-label=\"Back to top\">\u2191<\/button>\r\n\r\n <!-- Toast Container -->\r\n <div class=\"toast-container\" id=\"toastContainer\" role=\"alert\" aria-live=\"polite\"><\/div>\r\n\r\n <!-- ============================================================\r\n JAVASCRIPT \u2014 Complete\r\n ============================================================ -->\r\n <script>\r\n (function() {\r\n 'use strict';\r\n\r\n \/* ============================================================\r\n DATA: Tools & Categories\r\n ============================================================ *\/\r\n const TOOLS = [\r\n \/\/ Image Tools\r\n { id: 'image-rotator', name: 'Image Rotator', category: 'Image Tools',\r\n desc: 'Rotate images 90\u00b0, 180\u00b0, or 270\u00b0 with preview and download.', icon: '\ud83d\udd04', url: 'tools\/image-rotator.html' },\r\n { id: 'image-flipper', name: 'Image Flipper', category: 'Image Tools',\r\n desc: 'Flip images horizontally or vertically instantly.', icon: '\ud83e\ude9e', url: 'tools\/image-flipper.html' },\r\n { id: 'image-dpi-checker', name: 'Image DPI Checker', category: 'Image Tools',\r\n desc: 'Check DPI, dimensions, and metadata of any image.', icon: '\ud83d\udccf', url: 'tools\/image-dpi-checker.html' },\r\n { id: 'webp-to-png', name: 'WebP to PNG Converter', category: 'Image Tools',\r\n desc: 'Convert WebP images to PNG losslessly.', icon: '\ud83d\uddbc\ufe0f', url: 'tools\/webp-to-png.html' },\r\n { id: 'svg-to-jpg', name: 'SVG to JPG Converter', category: 'Image Tools',\r\n desc: 'Convert SVG vector graphics to high-quality JPG.', icon: '\ud83c\udfa8', url: 'tools\/svg-to-jpg.html' },\r\n { id: 'heart-locket-gif', name: 'Heart Locket GIF Maker', category: 'Image Tools',\r\n desc: 'Create a heart-shaped locket GIF from two photos.', icon: '\ud83d\udc95', url: 'tools\/heart-locket-gif.html' },\r\n { id: 'gif-splitter', name: 'GIF Splitter', category: 'Image Tools',\r\n desc: 'Extract all frames from a GIF and download as ZIP.', icon: '\u2702\ufe0f', url: 'tools\/gif-splitter.html' },\r\n { id: 'webp-to-gif', name: 'WebP to GIF Resizer', category: 'Image Tools',\r\n desc: 'Convert WebP animations to GIF with resize options.', icon: '\ud83c\udf9e\ufe0f', url: 'tools\/webp-to-gif.html' },\r\n \/\/ Text Tools\r\n { id: 'twitter-counter', name: 'Twitter Character Counter', category: 'Text Tools',\r\n desc: 'Count characters for tweets with real-time feedback.', icon: '\ud83d\udc26', url: 'tools\/twitter-counter.html' },\r\n { id: 'text-to-slug', name: 'Text to Slug Converter', category: 'Text Tools',\r\n desc: 'Convert any text to a clean URL-friendly slug.', icon: '\ud83d\udd17', url: 'tools\/text-to-slug.html' },\r\n { id: 'remove-line-breaks', name: 'Remove Line Breaks', category: 'Text Tools',\r\n desc: 'Remove extra line breaks from your text.', icon: '\ud83d\udcdd', url: 'tools\/remove-line-breaks.html' },\r\n { id: 'duplicate-line-remover', name: 'Duplicate Line Remover', category: 'Text Tools',\r\n desc: 'Remove duplicate lines from any text.', icon: '\ud83e\uddf9', url: 'tools\/duplicate-line-remover.html' },\r\n { id: 'sort-text-lines', name: 'Sort Text Lines', category: 'Text Tools',\r\n desc: 'Sort lines alphabetically (A-Z or Z-A).', icon: '\ud83d\udd24', url: 'tools\/sort-text-lines.html' },\r\n { id: 'reverse-text', name: 'Reverse Text Generator', category: 'Text Tools',\r\n desc: 'Reverse any text forwards or backwards.', icon: '\ud83d\udd04', url: 'tools\/reverse-text.html' },\r\n { id: 'lorem-ipsum', name: 'Lorem Ipsum Generator', category: 'Text Tools',\r\n desc: 'Generate placeholder text for your projects.', icon: '\ud83d\udcc4', url: 'tools\/lorem-ipsum.html' },\r\n \/\/ Developer Tools\r\n { id: 'json-to-xml', name: 'JSON to XML Converter', category: 'Developer Tools',\r\n desc: 'Convert JSON data to XML format.', icon: '\u2699\ufe0f', url: 'tools\/json-to-xml.html' },\r\n { id: 'xml-to-json', name: 'XML to JSON Converter', category: 'Developer Tools',\r\n desc: 'Convert XML data to JSON format.', icon: '\u2699\ufe0f', url: 'tools\/xml-to-json.html' },\r\n \/\/ SEO Tools\r\n { id: 'meta-tag-preview', name: 'Meta Tag Preview Tool', category: 'SEO Tools',\r\n desc: 'Preview how your meta tags will appear in search results.', icon: '\ud83d\udd0d', url: 'tools\/meta-tag-preview.html' },\r\n { id: 'og-tag-checker', name: 'Open Graph Tag Checker', category: 'SEO Tools',\r\n desc: 'Check and validate Open Graph tags for social sharing.', icon: '\ud83d\udcf1', url: 'tools\/og-tag-checker.html' },\r\n { id: 'sitemap-generator', name: 'Sitemap Generator', category: 'SEO Tools',\r\n desc: 'Generate XML sitemaps for your website.', icon: '\ud83d\uddfa\ufe0f', url: 'tools\/sitemap-generator.html' },\r\n \/\/ Color Tools\r\n { id: 'hex-to-rgb', name: 'HEX to RGB Converter', category: 'Color Tools',\r\n desc: 'Convert HEX color codes to RGB values.', icon: '\ud83c\udfa8', url: 'tools\/hex-to-rgb.html' },\r\n { id: 'color-picker', name: 'Color Picker Tool', category: 'Color Tools',\r\n desc: 'Pick colors from images with eyedropper.', icon: '\ud83d\udd8c\ufe0f', url: 'tools\/color-picker.html' },\r\n \/\/ Converter Tools\r\n { id: 'number-base', name: 'Number Base Converter', category: 'Converter Tools',\r\n desc: 'Convert between binary, decimal, hex, and octal.', icon: '\ud83d\udd22', url: 'tools\/number-base.html' },\r\n { id: 'focal-length', name: 'Focal Length Converter', category: 'Converter Tools',\r\n desc: 'Convert camera focal lengths between units.', icon: '\ud83d\udcf7', url: 'tools\/focal-length.html' },\r\n { id: 'voltage-temp', name: 'Voltage to Temperature Converter', category: 'Converter Tools',\r\n desc: 'Convert voltage to temperature using sensor curves.', icon: '\ud83c\udf21\ufe0f', url: 'tools\/voltage-temp.html' },\r\n { id: 'swim-time', name: 'Swim Time Converter', category: 'Converter Tools',\r\n desc: 'Convert swimming times between pool lengths.', icon: '\ud83c\udfca', url: 'tools\/swim-time.html' },\r\n \/\/ Calculator Tools\r\n { id: 'gst-calculator', name: 'GST Calculator Australia', category: 'Calculator Tools',\r\n desc: 'Calculate GST amounts and totals for Australian businesses.', icon: '\ud83e\uddfe', url: 'tools\/gst-calculator.html' },\r\n { id: 'cat-age', name: 'Cat Age Calculator', category: 'Calculator Tools',\r\n desc: 'Convert cat years to human years accurately.', icon: '\ud83d\udc31', url: 'tools\/cat-age.html' },\r\n { id: 'double-discount', name: 'Double Discount Calculator', category: 'Calculator Tools',\r\n desc: 'Calculate final price after two successive discounts.', icon: '\ud83c\udff7\ufe0f', url: 'tools\/double-discount.html' },\r\n { id: 'chronological-age', name: 'Chronological Age Calculator', category: 'Calculator Tools',\r\n desc: 'Calculate exact age from date of birth.', icon: '\ud83d\udcc5', url: 'tools\/chronological-age.html' },\r\n { id: 'shopify-profit', name: 'Shopify Profit Margin Calculator', category: 'Calculator Tools',\r\n desc: 'Calculate profit margins for Shopify stores.', icon: '\ud83d\udcca', url: 'tools\/shopify-profit.html' },\r\n { id: 'restaurant-profit', name: 'Restaurant Profit Margin Calculator', category: 'Calculator Tools',\r\n desc: 'Calculate profit margins for restaurants.', icon: '\ud83c\udf7d\ufe0f', url: 'tools\/restaurant-profit.html' },\r\n { id: 'break-even', name: 'Break Even Calculator', category: 'Calculator Tools',\r\n desc: 'Calculate the break-even point for your business.', icon: '\u2696\ufe0f', url: 'tools\/break-even.html' },\r\n { id: 'tip-calculator', name: 'Tip Calculator', category: 'Calculator Tools',\r\n desc: 'Calculate tips and split bills easily.', icon: '\ud83d\udcb5', url: 'tools\/tip-calculator.html' },\r\n \/\/ Security Tools\r\n { id: 'sha1-generator', name: 'SHA1 Generator', category: 'Security Tools',\r\n desc: 'Generate SHA1 hash from any text.', icon: '\ud83d\udd10', url: 'tools\/sha1-generator.html' },\r\n { id: 'ntlm-generator', name: 'NTLM Hash Generator', category: 'Security Tools',\r\n desc: 'Generate NTLM hashes for authentication.', icon: '\ud83d\udd11', url: 'tools\/ntlm-generator.html' },\r\n { id: 'random-token', name: 'Random Token Generator', category: 'Security Tools',\r\n desc: 'Generate secure random tokens and strings.', icon: '\ud83c\udfb2', url: 'tools\/random-token.html' },\r\n \/\/ Social Media Tools\r\n { id: 'youtube-title', name: 'YouTube Title Extractor', category: 'Social Media Tools',\r\n desc: 'Extract the title from any YouTube video URL.', icon: '\u25b6\ufe0f', url: 'tools\/youtube-title.html' },\r\n { id: 'youtube-tags', name: 'YouTube Tag Extractor', category: 'Social Media Tools',\r\n desc: 'Extract tags from YouTube video pages.', icon: '\ud83c\udff7\ufe0f', url: 'tools\/youtube-tags.html' },\r\n \/\/ Misc Tools\r\n { id: 'qr-code', name: 'QR Code Generator', category: 'Misc Tools',\r\n desc: 'Generate QR codes for any URL or text.', icon: '\ud83d\udcf1', url: 'tools\/qr-code-generator.html' },\r\n { id: 'reading-time', name: 'Reading Time Estimator', category: 'Misc Tools',\r\n desc: 'Estimate reading time for any text or article.', icon: '\u23f1\ufe0f', url: 'tools\/reading-time.html' },\r\n { id: 'screen-recorder', name: 'Screen Recorder', category: 'Misc Tools',\r\n desc: 'Record your screen directly in the browser.', icon: '\ud83c\udfa5', url: 'tools\/screen-recorder.html' },\r\n ];\r\n\r\n const CATEGORIES = [\r\n 'Image Tools', 'Text Tools', 'Developer Tools', 'SEO Tools',\r\n 'Color Tools', 'Converter Tools', 'Calculator Tools',\r\n 'Security Tools', 'Social Media Tools', 'Misc Tools'\r\n ];\r\n\r\n const POPULAR_IDS = ['image-rotator', 'webp-to-png', 'gst-calculator', 'json-to-xml', 'qr-code', 'image-flipper'];\r\n\r\n \/* ============================================================\r\n DOM REFS\r\n ============================================================ *\/\r\n const popularGrid = document.getElementById('popularGrid');\r\n const categoryGrid = document.getElementById('categoryGrid');\r\n const faqList = document.getElementById('faqList');\r\n const backTop = document.getElementById('backTop');\r\n const themeToggle = document.getElementById('themeToggle');\r\n const hamburger = document.getElementById('hamburger');\r\n const mobileDrawer = document.getElementById('mobileDrawer');\r\n const headerSearch = document.getElementById('headerSearch');\r\n const heroSearch = document.getElementById('heroSearch');\r\n const heroSuggestions = document.getElementById('heroSuggestions');\r\n const headerSuggestions = document.getElementById('searchSuggestions');\r\n const toastContainer = document.getElementById('toastContainer');\r\n const newsletterForm = document.getElementById('newsletterForm');\r\n\r\n let currentTheme = localStorage.getItem('toolists-theme') || 'light';\r\n\r\n \/* ============================================================\r\n THEME\r\n ============================================================ *\/\r\n function setTheme(theme) {\r\n currentTheme = theme;\r\n document.documentElement.setAttribute('data-theme', theme === 'dark' ? 'dark' : '');\r\n themeToggle.textContent = theme === 'dark' ? '\u2600\ufe0f' : '\ud83c\udf19';\r\n localStorage.setItem('toolists-theme', theme);\r\n }\r\n setTheme(currentTheme);\r\n\r\n themeToggle.addEventListener('click', function() {\r\n setTheme(currentTheme === 'dark' ? 'light' : 'dark');\r\n });\r\n\r\n \/* ============================================================\r\n MOBILE DRAWER\r\n ============================================================ *\/\r\n hamburger.addEventListener('click', function() {\r\n const open = mobileDrawer.classList.toggle('open');\r\n hamburger.classList.toggle('active');\r\n hamburger.setAttribute('aria-expanded', open);\r\n });\r\n\r\n document.addEventListener('click', function(e) {\r\n if (!e.target.closest('.header') && !e.target.closest('.mobile-drawer')) {\r\n mobileDrawer.classList.remove('open');\r\n hamburger.classList.remove('active');\r\n hamburger.setAttribute('aria-expanded', 'false');\r\n }\r\n });\r\n\r\n \/* ============================================================\r\n RENDER POPULAR TOOLS\r\n ============================================================ *\/\r\n function renderPopular() {\r\n const popular = TOOLS.filter(t => POPULAR_IDS.includes(t.id));\r\n popularGrid.innerHTML = popular.map(t => `\r\n <a href=\"${t.url}\" class=\"tool-card\">\r\n <span class=\"icon\">${t.icon}<\/span>\r\n <h3>${t.name}<\/h3>\r\n <p>${t.desc}<\/p>\r\n <span class=\"arrow\">Use Tool \u2192<\/span>\r\n <\/a>\r\n `).join('');\r\n }\r\n renderPopular();\r\n\r\n \/* ============================================================\r\n RENDER CATEGORIES\r\n ============================================================ *\/\r\n function renderCategories() {\r\n const emojis = {\r\n 'Image Tools': '\ud83d\uddbc\ufe0f',\r\n 'Text Tools': '\ud83d\udcdd',\r\n 'Developer Tools': '\u2699\ufe0f',\r\n 'SEO Tools': '\ud83d\udd0d',\r\n 'Color Tools': '\ud83c\udfa8',\r\n 'Converter Tools': '\ud83d\udd04',\r\n 'Calculator Tools': '\ud83e\uddee',\r\n 'Security Tools': '\ud83d\udd10',\r\n 'Social Media Tools': '\ud83d\udcf1',\r\n 'Misc Tools': '\ud83e\udde9'\r\n };\r\n categoryGrid.innerHTML = CATEGORIES.map(cat => `\r\n <a href=\"all-tools.html?category=${encodeURIComponent(cat)}\" class=\"category-chip\">\r\n <span class=\"emoji\">${emojis[cat] || '\ud83d\udcc2'}<\/span> ${cat}\r\n <\/a>\r\n `).join('');\r\n }\r\n renderCategories();\r\n\r\n \/* ============================================================\r\n FAQ ACCORDION\r\n ============================================================ *\/\r\n faqList.addEventListener('click', function(e) {\r\n const btn = e.target.closest('.q');\r\n if (!btn) return;\r\n const item = btn.closest('.faq-item');\r\n const isOpen = item.classList.contains('open');\r\n \/\/ close all\r\n faqList.querySelectorAll('.faq-item').forEach(el => {\r\n el.classList.remove('open');\r\n el.querySelector('.q').setAttribute('aria-expanded', 'false');\r\n });\r\n if (!isOpen) {\r\n item.classList.add('open');\r\n item.querySelector('.q').setAttribute('aria-expanded', 'true');\r\n }\r\n });\r\n\r\n \/* ============================================================\r\n SEARCH (shared)\r\n ============================================================ *\/\r\n function getSuggestions(query) {\r\n if (!query.trim()) return [];\r\n const q = query.toLowerCase().trim();\r\n return TOOLS.filter(t =>\r\n t.name.toLowerCase().includes(q) ||\r\n t.desc.toLowerCase().includes(q) ||\r\n t.category.toLowerCase().includes(q)\r\n ).slice(0, 8);\r\n }\r\n\r\n function renderSuggestions(input, container, query) {\r\n const suggestions = getSuggestions(query);\r\n if (!suggestions.length) {\r\n container.classList.remove('visible');\r\n return;\r\n }\r\n container.innerHTML = suggestions.map(t => `\r\n <li data-url=\"${t.url}\" role=\"option\">\r\n <span>${t.icon}<\/span>\r\n ${t.name}\r\n <span class=\"cat\">${t.category}<\/span>\r\n <\/li>\r\n `).join('');\r\n container.classList.add('visible');\r\n }\r\n\r\n function setupSearch(input, container) {\r\n input.addEventListener('input', function() {\r\n renderSuggestions(input, container, this.value);\r\n });\r\n input.addEventListener('keydown', function(e) {\r\n const items = container.querySelectorAll('li');\r\n if (!items.length) return;\r\n let idx = Array.from(items).findIndex(el => el.classList.contains('active'));\r\n if (e.key === 'ArrowDown') {\r\n e.preventDefault();\r\n idx = Math.min(idx + 1, items.length - 1);\r\n } else if (e.key === 'ArrowUp') {\r\n e.preventDefault();\r\n idx = Math.max(idx - 1, 0);\r\n } else if (e.key === 'Enter') {\r\n e.preventDefault();\r\n const active = container.querySelector('li.active');\r\n if (active) {\r\n window.location.href = active.dataset.url;\r\n } else if (items.length) {\r\n window.location.href = items[0].dataset.url;\r\n }\r\n return;\r\n } else {\r\n return;\r\n }\r\n items.forEach(el => el.classList.remove('active'));\r\n if (idx >= 0) items[idx].classList.add('active');\r\n });\r\n container.addEventListener('click', function(e) {\r\n const li = e.target.closest('li');\r\n if (li && li.dataset.url) {\r\n window.location.href = li.dataset.url;\r\n }\r\n });\r\n document.addEventListener('click', function(e) {\r\n if (!e.target.closest('.search-wrap')) {\r\n container.classList.remove('visible');\r\n }\r\n });\r\n }\r\n\r\n setupSearch(headerSearch, headerSuggestions);\r\n setupSearch(heroSearch, heroSuggestions);\r\n\r\n \/* ============================================================\r\n BACK TO TOP\r\n ============================================================ *\/\r\n window.addEventListener('scroll', function() {\r\n backTop.classList.toggle('visible', window.scrollY > 400);\r\n });\r\n backTop.addEventListener('click', function() {\r\n window.scrollTo({ top: 0, behavior: 'smooth' });\r\n });\r\n\r\n \/* ============================================================\r\n TOAST\r\n ============================================================ *\/\r\n function toast(message, type) {\r\n const el = document.createElement('div');\r\n el.className = 'toast ' + (type || '');\r\n el.textContent = message;\r\n toastContainer.appendChild(el);\r\n setTimeout(() => {\r\n el.style.opacity = '0';\r\n el.style.transform = 'translateX(40px)';\r\n setTimeout(() => el.remove(), 300);\r\n }, 3500);\r\n }\r\n\r\n \/* ============================================================\r\n NEWSLETTER\r\n ============================================================ *\/\r\n newsletterForm.addEventListener('submit', function(e) {\r\n e.preventDefault();\r\n const input = this.querySelector('input');\r\n if (input.value && input.value.includes('@')) {\r\n toast('\u2705 Subscribed successfully!', 'success');\r\n input.value = '';\r\n } else {\r\n toast('\u26a0\ufe0f Please enter a valid email address.', 'error');\r\n }\r\n });\r\n\r\n \/* ============================================================\r\n SCROLL REVEAL (Intersection Observer)\r\n ============================================================ *\/\r\n if ('IntersectionObserver' in window) {\r\n const observer = new IntersectionObserver((entries) => {\r\n entries.forEach(entry => {\r\n if (entry.isIntersecting) {\r\n entry.target.classList.add('visible');\r\n }\r\n });\r\n }, { threshold: 0.1, rootMargin: '0px 0px -40px 0px' });\r\n document.querySelectorAll('.reveal').forEach(el => observer.observe(el));\r\n } else {\r\n document.querySelectorAll('.reveal').forEach(el => el.classList.add('visible'));\r\n }\r\n\r\n \/* ============================================================\r\n TOOL PAGE DETECTION & RUNTIME HELPERS\r\n ============================================================ *\/\r\n \/\/ Detect if we're on a tool page (tools\/*.html)\r\n const isToolPage = window.location.pathname.includes('\/tools\/') ||\r\n window.location.pathname.includes('tools\/');\r\n\r\n \/\/ If on tool page, inject tool-specific functionality via data attributes\r\n \/\/ This is a lightweight approach; each tool page will have its own inline script\r\n \/\/ that uses the global helpers defined here.\r\n\r\n window.Toolists = {\r\n TOOLS: TOOLS,\r\n CATEGORIES: CATEGORIES,\r\n toast: toast,\r\n getToolById: (id) => TOOLS.find(t => t.id === id),\r\n getToolsByCategory: (cat) => TOOLS.filter(t => t.category === cat),\r\n getRelatedTools: (id, limit = 4) => {\r\n const tool = TOOLS.find(t => t.id === id);\r\n if (!tool) return [];\r\n return TOOLS.filter(t => t.id !== id && t.category === tool.category).slice(0, limit);\r\n },\r\n \/\/ Image helpers\r\n loadImage: (file) => new Promise((resolve, reject) => {\r\n const reader = new FileReader();\r\n reader.onload = (e) => {\r\n const img = new Image();\r\n img.onload = () => resolve(img);\r\n img.onerror = reject;\r\n img.src = e.target.result;\r\n };\r\n reader.onerror = reject;\r\n reader.readAsDataURL(file);\r\n }),\r\n \/\/ Download helper\r\n download: (data, filename, mime = 'application\/octet-stream') => {\r\n const blob = data instanceof Blob ? data : new Blob([data], { type: mime });\r\n const url = URL.createObjectURL(blob);\r\n const a = document.createElement('a');\r\n a.href = url;\r\n a.download = filename;\r\n document.body.appendChild(a);\r\n a.click();\r\n document.body.removeChild(a);\r\n setTimeout(() => URL.revokeObjectURL(url), 5000);\r\n },\r\n \/\/ Canvas to blob\r\n canvasToBlob: (canvas, mime = 'image\/png', quality = 1) =>\r\n new Promise(resolve => canvas.toBlob(resolve, mime, quality)),\r\n \/\/ Format bytes\r\n formatBytes: (bytes) => {\r\n if (bytes === 0) return '0 Bytes';\r\n const k = 1024;\r\n const sizes = ['Bytes', 'KB', 'MB', 'GB'];\r\n const i = Math.floor(Math.log(bytes) \/ Math.log(k));\r\n return parseFloat((bytes \/ Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];\r\n },\r\n \/\/ Debounce\r\n debounce: (fn, delay = 300) => {\r\n let timer;\r\n return (...args) => {\r\n clearTimeout(timer);\r\n timer = setTimeout(() => fn(...args), delay);\r\n };\r\n }\r\n };\r\n\r\n \/* ============================================================\r\n AUTO-GENERATE SITEMAP (client-side hint)\r\n ============================================================ *\/\r\n \/\/ This is just a hint \u2014 the actual sitemap.xml is static.\r\n console.log('\ud83d\udee0\ufe0f Toolists loaded. ' + TOOLS.length + ' tools available.');\r\n\r\n \/* ============================================================\r\n KEYBOARD NAVIGATION (Escape closes drawers)\r\n ============================================================ *\/\r\n document.addEventListener('keydown', function(e) {\r\n if (e.key === 'Escape') {\r\n mobileDrawer.classList.remove('open');\r\n hamburger.classList.remove('active');\r\n hamburger.setAttribute('aria-expanded', 'false');\r\n headerSuggestions.classList.remove('visible');\r\n heroSuggestions.classList.remove('visible');\r\n }\r\n });\r\n\r\n })();\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-68be291 e-flex e-con-boxed e-con e-parent\" data-id=\"68be291\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Toolists \u2013 Free Online Tools That Work Instantly in Your Browser<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-41","page","type-page","status-publish"],"_links":{"self":[{"href":"https:\/\/toolists.com\/index.php?rest_route=\/wp\/v2\/pages\/41","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/toolists.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/toolists.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/toolists.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/toolists.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=41"}],"version-history":[{"count":7,"href":"https:\/\/toolists.com\/index.php?rest_route=\/wp\/v2\/pages\/41\/revisions"}],"predecessor-version":[{"id":58,"href":"https:\/\/toolists.com\/index.php?rest_route=\/wp\/v2\/pages\/41\/revisions\/58"}],"wp:attachment":[{"href":"https:\/\/toolists.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=41"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}