[{"content":"Last Updated: April 2, 2026\nIf you have any questions, suggestions, or find any errors on the website, please feel free to contact us:\nEmail: pxn626@outlook.com Working Hours: Mon - Fri, 9:00 AM - 6:00 PM We usually reply within 24 hours.\n","permalink":"https://www.webpenson.com/en/contact/","summary":"\u003cp\u003e\u003cstrong\u003eLast Updated: April 2, 2026\u003c/strong\u003e\u003c/p\u003e\n\u003cp\u003eIf you have any questions, suggestions, or find any errors on the website, please feel free to contact us:\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003e\u003cstrong\u003eEmail:\u003c/strong\u003e \u003ca href=\"mailto:yourname@example.com\"\u003epxn626@outlook.com\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eWorking Hours:\u003c/strong\u003e Mon - Fri, 9:00 AM - 6:00 PM\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp\u003eWe usually reply within 24 hours.\u003c/p\u003e","title":"Contact Us"},{"content":"Last Updated: April 2, 2026\n1. Acceptance of Terms By accessing and using [Online Tool Box], you accept and agree to be bound by the terms and provision of this agreement.\n2. Disclaimer The tools and calculation results provided by this website are for reference only. We do not guarantee the absolute accuracy, completeness, or applicability of the tool output.\n3. User Conduct You agree not to use this website for any illegal activities. You promise not to interfere with or disrupt the website\u0026rsquo;s services or servers.\n4. Intellectual Property All content on this website (including code, design, and text) is owned by [Online Tool Box] and protected by copyright laws.\n","permalink":"https://www.webpenson.com/en/terms/","summary":"\u003cp\u003e\u003cstrong\u003eLast Updated: April 2, 2026\u003c/strong\u003e\u003c/p\u003e\n\u003ch4 id=\"1-acceptance-of-terms\"\u003e1. Acceptance of Terms\u003c/h4\u003e\n\u003cp\u003eBy accessing and using [Online Tool Box], you accept and agree to be bound by the terms and provision of this agreement.\u003c/p\u003e\n\u003ch4 id=\"2-disclaimer\"\u003e2. Disclaimer\u003c/h4\u003e\n\u003cp\u003eThe tools and calculation results provided by this website are for reference only. We do not guarantee the absolute accuracy, completeness, or applicability of the tool output.\u003c/p\u003e\n\u003ch4 id=\"3-user-conduct\"\u003e3. User Conduct\u003c/h4\u003e\n\u003cp\u003eYou agree not to use this website for any illegal activities. You promise not to interfere with or disrupt the website\u0026rsquo;s services or servers.\u003c/p\u003e","title":"Terms of Service"},{"content":" Random Sampler Randomly select specified number of items from a list. Supports sampling with and without replacement.\nInput List Clear Sample Size items Separator Newline (\\n) Comma (,) Tab (\\t) Options Allow Duplicates (With Replacement) Sample Copy Results Clear Results Total Items: 0 Sampled: 0 Sampled Items What is Random Sampler? Random Sampler is a free online tool for randomly selecting a specified number of items from a list. It uses the Fisher-Yates shuffle algorithm to ensure fair and random sampling.\nHow to Use This Tool? Enter List: Enter or paste the list items for sampling in the text box, one item per line. Set Sample Size: Enter the number of items to sample. Select Separator: Choose newline, comma, or tab as separator based on your input format. Choose Sampling Mode: Uncheck \u0026ldquo;Allow Duplicates\u0026rdquo;: Sampling without replacement (each item appears at most once) Check \u0026ldquo;Allow Duplicates\u0026rdquo;: Sampling with replacement (same item can be selected multiple times) Start Sampling: Click the \u0026ldquo;Sample\u0026rdquo; button to get results. Key Features Without Replacement: Uses Fisher-Yates shuffle algorithm, each item appears at most once With Replacement: Allows duplicate selection, same item can be selected multiple times (for lotteries) Multiple Separators: Supports newline, comma, tab as list separators Visual Results: Display sampled items as tags for clarity One-click Copy: Copy sampling results to clipboard Use Cases Lottery Events: Randomly select winners from participant lists Data Sampling: Randomly select samples from large datasets for analysis Test Data: Randomly select portion of data for testing from complete data Random Assignment: Randomly assign tasks, rooms, seats, etc. Survey Sampling: Randomly select survey subjects from a population Frequently Asked Questions (FAQ) Is this tool safe? Absolutely safe. This tool runs entirely in your browser (client-side processing). Your list data is not uploaded to any server.\nWhat\u0026rsquo;s the difference between sampling with and without replacement? Without Replacement: Randomly selects specified number of items from the list, each item appears at most once. Suitable for selecting winners from a group of people. With Replacement: Each selection is independent, the same item can be selected multiple times. Suitable for simulating dice rolls, roulette draws, etc. Is the sampling truly random? Yes. The tool uses the Fisher-Yates (also known as Knuth) shuffle algorithm, one of the most classic and fair shuffle algorithms in computer science. Each sampling is an independent truly random selection.\nCan the sample size be larger than the list length? If \u0026ldquo;Without Replacement\u0026rdquo; is selected, the sample size cannot exceed the list length. If \u0026ldquo;With Replacement\u0026rdquo; is selected, the sample size can be set arbitrarily.\n","permalink":"https://www.webpenson.com/en/tools/random-sampler/","summary":"\u003c!-- 1. SEO 结构化数据 (Schema.org) --\u003e\n\u003cscript type=\"application/ld+json\"\u003e\n{\n  \"@context\": \"https://schema.org\",\n  \"@type\": \"SoftwareApplication\",\n  \"name\": \"Online Random Sampler\",\n  \"applicationCategory\": \"UtilityApplication\",\n  \"operatingSystem\": \"Web\",\n  \"offers\": {\n    \"@type\": \"Offer\",\n    \"price\": \"0\",\n    \"priceCurrency\": \"USD\"\n  },\n  \"description\": \"Free online random sampler with replacement and without replacement options. Perfect for lotteries and data sampling.\"\n}\n\u003c/script\u003e\n\u003c!-- 2. 调用 Shortcode (工具核心) --\u003e\n\n\u003cdiv class=\"random-sampler-tool\"\u003e\n    \u003cstyle\u003e\n        .random-sampler-tool {\n            --primary-color: #0891b2;\n            --primary-hover: #0e7490;\n            --bg-color: #f8fafc;\n            --card-bg: #ffffff;\n            --text-main: #1e293b;\n            --text-muted: #64748b;\n            --border-color: #e2e8f0;\n            --radius: 12px;\n            --shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);\n            --success-color: #10b981;\n            --accent-bg: #ecfeff;\n            --accent-text: #0891b2;\n            --warning-bg: #fffbeb;\n            --warning-text: #b45309;\n        }\n\n        [data-theme=\"dark\"] .random-sampler-tool {\n            --bg-color: #0f172a;\n            --card-bg: #1e293b;\n            --text-main: #e2e8f0;\n            --text-muted: #94a3b8;\n            --border-color: #334155;\n            --accent-bg: #164e63;\n            --accent-text: #22d3ee;\n            --warning-bg: #451a03;\n            --warning-text: #fcd34d;\n        }\n\n        .random-sampler-tool * {\n            box-sizing: border-box;\n            margin: 0;\n            padding: 0;\n        }\n\n        .random-sampler-tool {\n            font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\n            background-color: var(--bg-color);\n            color: var(--text-main);\n            line-height: 1.6;\n            margin: 20px 0;\n        }\n\n        .rs-container {\n            max-width: 100%;\n            margin: 0;\n            padding: 24px;\n            background: var(--card-bg);\n            border-radius: var(--radius);\n            box-shadow: var(--shadow);\n        }\n\n        .rs-title {\n            font-size: 1.25rem;\n            font-weight: 700;\n            color: var(--text-main);\n            margin-bottom: 8px;\n        }\n\n        .rs-intro {\n            font-size: 14px;\n            color: var(--text-muted);\n            margin-bottom: 20px;\n        }\n\n        .rs-section {\n            margin-bottom: 20px;\n        }\n\n        .rs-label {\n            font-size: 14px;\n            font-weight: 600;\n            color: var(--text-main);\n            margin-bottom: 8px;\n            display: flex;\n            align-items: center;\n            justify-content: space-between;\n        }\n\n        .rs-btn-small {\n            padding: 4px 10px;\n            border: 1px solid var(--border-color);\n            border-radius: 6px;\n            background: transparent;\n            color: var(--text-muted);\n            font-size: 12px;\n            cursor: pointer;\n            transition: all 0.2s;\n        }\n\n        .rs-btn-small:hover {\n            background: var(--primary-color);\n            color: white;\n            border-color: var(--primary-color);\n        }\n\n        .rs-textarea {\n            width: 100%;\n            height: 180px;\n            padding: 12px;\n            border: 1px solid var(--border-color);\n            border-radius: 8px;\n            background: var(--card-bg);\n            color: var(--text-main);\n            font-size: 14px;\n            font-family: \"Consolas\", \"Monaco\", \"Courier New\", monospace;\n            resize: vertical;\n            transition: border-color 0.2s;\n        }\n\n        .rs-textarea:focus {\n            outline: none;\n            border-color: var(--primary-color);\n        }\n\n        .rs-textarea::placeholder {\n            color: var(--text-muted);\n        }\n\n        .rs-options {\n            display: flex;\n            flex-wrap: wrap;\n            gap: 20px;\n            margin-bottom: 20px;\n            padding: 16px;\n            background: var(--bg-color);\n            border-radius: 8px;\n        }\n\n        .rs-option-group {\n            display: flex;\n            flex-direction: column;\n            gap: 8px;\n        }\n\n        .rs-option-label {\n            font-size: 13px;\n            font-weight: 500;\n            color: var(--text-muted);\n        }\n\n        .rs-option-row {\n            display: flex;\n            gap: 12px;\n            align-items: center;\n            flex-wrap: wrap;\n        }\n\n        .rs-option-row input[type=\"number\"] {\n            width: 100px;\n            padding: 8px 12px;\n            border: 1px solid var(--border-color);\n            border-radius: 6px;\n            background: var(--card-bg);\n            color: var(--text-main);\n            font-size: 14px;\n        }\n\n        .rs-option-row input[type=\"number\"]:focus {\n            outline: none;\n            border-color: var(--primary-color);\n        }\n\n        .rs-option-row input[type=\"checkbox\"] {\n            width: 16px;\n            height: 16px;\n            accent-color: var(--primary-color);\n        }\n\n        .rs-option-row label {\n            font-size: 13px;\n            color: var(--text-main);\n            cursor: pointer;\n        }\n\n        .rs-separator-select {\n            padding: 8px 12px;\n            border: 1px solid var(--border-color);\n            border-radius: 6px;\n            background: var(--card-bg);\n            color: var(--text-main);\n            font-size: 14px;\n            cursor: pointer;\n        }\n\n        .rs-actions {\n            display: flex;\n            gap: 12px;\n            flex-wrap: wrap;\n            margin-bottom: 20px;\n        }\n\n        .rs-btn {\n            padding: 12px 24px;\n            border: none;\n            border-radius: 8px;\n            font-size: 14px;\n            font-weight: 500;\n            cursor: pointer;\n            transition: all 0.2s;\n        }\n\n        .rs-btn-primary {\n            background: var(--primary-color);\n            color: white;\n        }\n\n        .rs-btn-primary:hover {\n            background: var(--primary-hover);\n        }\n\n        .rs-btn-secondary {\n            background: transparent;\n            border: 1px solid var(--border-color);\n            color: var(--text-muted);\n        }\n\n        .rs-btn-secondary:hover {\n            background: var(--bg-color);\n            color: var(--text-main);\n        }\n\n        .rs-output-section {\n            margin-top: 20px;\n        }\n\n        .rs-stats {\n            display: flex;\n            gap: 12px;\n            flex-wrap: wrap;\n            margin-bottom: 16px;\n        }\n\n        .rs-stat {\n            padding: 8px 12px;\n            background: var(--accent-bg);\n            border-radius: 8px;\n            font-size: 13px;\n        }\n\n        .rs-stat-value {\n            font-weight: 600;\n            color: var(--accent-text);\n        }\n\n        .rs-warning {\n            padding: 12px;\n            background: var(--warning-bg);\n            border: 1px solid #fcd34d;\n            border-radius: 8px;\n            font-size: 13px;\n            color: var(--warning-text);\n            margin-bottom: 16px;\n            display: none;\n        }\n\n        .rs-warning.show {\n            display: block;\n        }\n\n        .rs-sampled-item {\n            display: inline-block;\n            padding: 6px 12px;\n            margin: 4px;\n            background: var(--accent-bg);\n            border-radius: 6px;\n            font-size: 14px;\n            color: var(--accent-text);\n            border: 1px solid var(--primary-color);\n        }\n\n        .rs-sampled-list {\n            max-height: 300px;\n            overflow-y: auto;\n            padding: 12px;\n            background: var(--bg-color);\n            border-radius: 8px;\n        }\n    \u003c/style\u003e\n\n    \u003cdiv class=\"rs-container\"\u003e\n        \u003ch2 class=\"rs-title\"\u003eRandom Sampler\u003c/h2\u003e\n        \u003cp class=\"rs-intro\"\u003eRandomly select specified number of items from a list. Supports sampling with and without replacement.\u003c/p\u003e","title":"Online Random Sampler - Random Selection from Lists"},{"content":" List Duplicate Remover Quickly remove duplicates from lists with multiple separator support and case sensitivity options.\nInput List Clear Trim Whitespace Case Sensitive Separator: Newline (\\n) Comma (,) Tab (\\t) Space ( ) Remove Duplicates Sort Reverse 0 Removed 0 Kept Result Copy Found Duplicates 0 What is Duplicate Remover? Duplicate Remover is a free online tool for quickly removing duplicate items from text lists. Whether you\u0026rsquo;re processing email lists, usernames, keywords, or other text data, this tool helps you get a unique item list effortlessly.\nHow to Use This Tool? Enter List: Enter or paste the list items to deduplicate in the text box, one item per line (or based on selected separator). Set Options: Configure options as needed (trim whitespace, case sensitivity), select separator. Remove Duplicates: Click the \u0026ldquo;Remove Duplicates\u0026rdquo; button to process the list. Copy Results: Click the \u0026ldquo;Copy\u0026rdquo; button to copy the deduplicated results to clipboard. Key Features Multiple Separator Support: Supports newline, comma, tab, space as list item separators Case Sensitivity: Optional case-sensitive comparison (e.g., \u0026ldquo;Apple\u0026rdquo; and \u0026ldquo;apple\u0026rdquo; can be treated as same or different) Trim Whitespace: Automatically trims leading/trailing whitespace from each item Sort Function: One-click ascending or descending sort of the list Statistics: Shows how many duplicates were removed and how many unique items remain Display Duplicates: Visually shows which duplicate items were removed Use Cases Email List Cleanup: Remove duplicate email addresses Keyword Deduplication: Clean SEO keyword lists of duplicates Username Organization: Organize username or ID lists Data Cleaning: Clean scraped data with duplicates URL List: Deduplicate URL lists, remove duplicate links Frequently Asked Questions (FAQ) Is this tool safe? Absolutely safe. This tool runs entirely in your browser (client-side processing). Your list data is not uploaded to any server.\nWhat does \u0026ldquo;Keep first occurrence\u0026rdquo; mean? When there are duplicate items in a list, the tool keeps the first occurrence and removes subsequent duplicates. For example, list [\u0026ldquo;A\u0026rdquo;, \u0026ldquo;B\u0026rdquo;, \u0026ldquo;A\u0026rdquo;, \u0026ldquo;C\u0026rdquo;] will become [\u0026ldquo;A\u0026rdquo;, \u0026ldquo;B\u0026rdquo;, \u0026ldquo;C\u0026rdquo;], keeping the first \u0026ldquo;A\u0026rdquo;.\nHow does case-insensitive mode work? If you uncheck \u0026ldquo;Case Sensitive\u0026rdquo;, then \u0026ldquo;Apple\u0026rdquo;, \u0026ldquo;apple\u0026rdquo;, and \u0026ldquo;APPLE\u0026rdquo; are treated as the same item. During deduplication, the first occurrence is kept (maintaining its original case).\nHow large lists can it handle? The tool can process lists with tens of thousands of items. For best performance, it is recommended to keep lists under 100,000 lines per operation.\n","permalink":"https://www.webpenson.com/en/tools/duplicate-remover/","summary":"\u003c!-- 1. SEO 结构化数据 (Schema.org) --\u003e\n\u003cscript type=\"application/ld+json\"\u003e\n{\n  \"@context\": \"https://schema.org\",\n  \"@type\": \"SoftwareApplication\",\n  \"name\": \"Online Duplicate Remover\",\n  \"applicationCategory\": \"UtilityApplication\",\n  \"operatingSystem\": \"Web\",\n  \"offers\": {\n    \"@type\": \"Offer\",\n    \"price\": \"0\",\n    \"priceCurrency\": \"USD\"\n  },\n  \"description\": \"Free online list deduplication tool. Supports multiple separators, case sensitivity option, quick duplicate removal with statistics.\"\n}\n\u003c/script\u003e\n\u003c!-- 2. 调用 Shortcode (工具核心) --\u003e\n\n\u003cdiv class=\"duplicate-remover-tool\"\u003e\n    \u003cstyle\u003e\n        .duplicate-remover-tool {\n            --primary-color: #059669;\n            --primary-hover: #047857;\n            --bg-color: #f8fafc;\n            --card-bg: #ffffff;\n            --text-main: #1e293b;\n            --text-muted: #64748b;\n            --border-color: #e2e8f0;\n            --radius: 12px;\n            --shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);\n            --success-color: #10b981;\n            --warning-color: #f59e0b;\n            --accent-bg: #ecfdf5;\n            --accent-text: #059669;\n        }\n\n        [data-theme=\"dark\"] .duplicate-remover-tool {\n            --bg-color: #0f172a;\n            --card-bg: #1e293b;\n            --text-main: #e2e8f0;\n            --text-muted: #94a3b8;\n            --border-color: #334155;\n            --accent-bg: #064e3b;\n            --accent-text: #34d399;\n        }\n\n        .duplicate-remover-tool * {\n            box-sizing: border-box;\n            margin: 0;\n            padding: 0;\n        }\n\n        .duplicate-remover-tool {\n            font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\n            background-color: var(--bg-color);\n            color: var(--text-main);\n            line-height: 1.6;\n            margin: 20px 0;\n        }\n\n        .dr-container {\n            max-width: 100%;\n            margin: 0;\n            padding: 24px;\n            background: var(--card-bg);\n            border-radius: var(--radius);\n            box-shadow: var(--shadow);\n        }\n\n        .dr-title {\n            font-size: 1.25rem;\n            font-weight: 700;\n            color: var(--text-main);\n            margin-bottom: 8px;\n        }\n\n        .dr-intro {\n            font-size: 14px;\n            color: var(--text-muted);\n            margin-bottom: 20px;\n        }\n\n        .dr-input-section {\n            margin-bottom: 20px;\n        }\n\n        .dr-label {\n            font-size: 14px;\n            font-weight: 600;\n            color: var(--text-main);\n            margin-bottom: 8px;\n            display: flex;\n            align-items: center;\n            justify-content: space-between;\n        }\n\n        .dr-btn-small {\n            padding: 4px 10px;\n            border: 1px solid var(--border-color);\n            border-radius: 6px;\n            background: transparent;\n            color: var(--text-muted);\n            font-size: 12px;\n            cursor: pointer;\n            transition: all 0.2s;\n        }\n\n        .dr-btn-small:hover {\n            background: var(--primary-color);\n            color: white;\n            border-color: var(--primary-color);\n        }\n\n        .dr-textarea {\n            width: 100%;\n            height: 200px;\n            padding: 12px;\n            border: 1px solid var(--border-color);\n            border-radius: 8px;\n            background: var(--card-bg);\n            color: var(--text-main);\n            font-size: 14px;\n            font-family: \"Consolas\", \"Monaco\", \"Courier New\", monospace;\n            resize: vertical;\n            transition: border-color 0.2s;\n        }\n\n        .dr-textarea:focus {\n            outline: none;\n            border-color: var(--primary-color);\n        }\n\n        .dr-textarea::placeholder {\n            color: var(--text-muted);\n        }\n\n        .dr-options {\n            display: flex;\n            flex-wrap: wrap;\n            gap: 16px;\n            margin-bottom: 20px;\n            padding: 16px;\n            background: var(--bg-color);\n            border-radius: 8px;\n        }\n\n        .dr-option {\n            display: flex;\n            align-items: center;\n            gap: 6px;\n        }\n\n        .dr-option input[type=\"checkbox\"] {\n            width: 16px;\n            height: 16px;\n            accent-color: var(--primary-color);\n        }\n\n        .dr-option label {\n            font-size: 13px;\n            color: var(--text-main);\n            cursor: pointer;\n        }\n\n        .dr-separator {\n            display: flex;\n            align-items: center;\n            gap: 8px;\n        }\n\n        .dr-separator label {\n            font-size: 13px;\n            color: var(--text-muted);\n        }\n\n        .dr-separator select {\n            padding: 6px 10px;\n            border: 1px solid var(--border-color);\n            border-radius: 6px;\n            background: var(--card-bg);\n            color: var(--text-main);\n            font-size: 13px;\n        }\n\n        .dr-actions {\n            display: flex;\n            gap: 12px;\n            flex-wrap: wrap;\n            margin-bottom: 20px;\n        }\n\n        .dr-btn {\n            padding: 10px 20px;\n            border: none;\n            border-radius: 8px;\n            font-size: 14px;\n            font-weight: 500;\n            cursor: pointer;\n            transition: all 0.2s;\n        }\n\n        .dr-btn-primary {\n            background: var(--primary-color);\n            color: white;\n        }\n\n        .dr-btn-primary:hover {\n            background: var(--primary-hover);\n        }\n\n        .dr-btn-secondary {\n            background: transparent;\n            border: 1px solid var(--border-color);\n            color: var(--text-muted);\n        }\n\n        .dr-btn-secondary:hover {\n            background: var(--bg-color);\n            color: var(--text-main);\n        }\n\n        .dr-output-section {\n            margin-top: 20px;\n        }\n\n        .dr-stats {\n            display: flex;\n            gap: 16px;\n            flex-wrap: wrap;\n            margin-bottom: 16px;\n        }\n\n        .dr-stat {\n            display: flex;\n            align-items: center;\n            gap: 6px;\n            padding: 8px 12px;\n            background: var(--bg-color);\n            border-radius: 8px;\n        }\n\n        .dr-stat-icon {\n            width: 20px;\n            height: 20px;\n        }\n\n        .dr-stat-value {\n            font-size: 16px;\n            font-weight: 600;\n            color: var(--accent-text);\n        }\n\n        .dr-stat-label {\n            font-size: 12px;\n            color: var(--text-muted);\n        }\n\n        .dr-stat.removed {\n            background: #fef2f2;\n        }\n\n        .dr-stat.removed .dr-stat-value {\n            color: #dc2626;\n        }\n\n        [data-theme=\"dark\"] .dr-stat.removed {\n            background: #450a0a;\n        }\n\n        [data-theme=\"dark\"] .dr-stat.removed .dr-stat-value {\n            color: #fca5a5;\n        }\n\n        .dr-stat.kept {\n            background: var(--accent-bg);\n        }\n\n        .dr-output-textarea {\n            height: 200px;\n        }\n\n        .dr-duplicates-section {\n            margin-top: 20px;\n        }\n\n        .dr-duplicates-title {\n            font-size: 14px;\n            font-weight: 600;\n            color: var(--text-main);\n            margin-bottom: 12px;\n            display: flex;\n            align-items: center;\n            gap: 8px;\n        }\n\n        .dr-duplicate-count {\n            padding: 2px 8px;\n            background: #fef2f2;\n            color: #dc2626;\n            border-radius: 12px;\n            font-size: 12px;\n        }\n\n        [data-theme=\"dark\"] .dr-duplicate-count {\n            background: #450a0a;\n            color: #fca5a5;\n        }\n\n        .dr-duplicate-list {\n            display: flex;\n            flex-wrap: wrap;\n            gap: 8px;\n        }\n\n        .dr-duplicate-item {\n            padding: 6px 12px;\n            background: #fef2f2;\n            border: 1px solid #fecaca;\n            border-radius: 6px;\n            font-size: 13px;\n            color: #dc2626;\n        }\n\n        [data-theme=\"dark\"] .dr-duplicate-item {\n            background: #450a0a;\n            border-color: #7f1d1d;\n            color: #fca5a5;\n        }\n    \u003c/style\u003e\n\n    \u003cdiv class=\"dr-container\"\u003e\n        \u003ch2 class=\"dr-title\"\u003eList Duplicate Remover\u003c/h2\u003e\n        \u003cp class=\"dr-intro\"\u003eQuickly remove duplicates from lists with multiple separator support and case sensitivity options.\u003c/p\u003e","title":"Online Duplicate Remover - Fast \u0026 Efficient List Deduplication"},{"content":" Binary Visualizer Visualize binary representation of numbers with bitwise operations and base conversion.\nEnter Number Decimal Binary Hex Binary View Operations Conversion Decimal 0 Hex 0x0 Binary 0b0 Octal 0o0 Bitwise Operations \u0026amp; AND | OR ^ XOR ~ A ~ B \u0026lt;\u0026lt; 左移 \u0026gt;\u0026gt; 右移 Calculate Result 38 What is Binary Visualizer? Binary Visualizer is a free online tool for visualizing the binary representation of numbers and performing various bitwise operations. Through an intuitive bit display, you can clearly see the state of each bit and understand how numbers are stored in computers.\nHow to Use This Tool? Enter Number: Enter any integer in the input field (supports decimal, binary, hexadecimal input). Select Radix: Choose the input number\u0026rsquo;s base from the dropdown menu. View Binary: View the number\u0026rsquo;s 32-bit binary representation in the \u0026ldquo;Binary View\u0026rdquo; tab. Bitwise Operations: Perform AND, OR, XOR, NOT, shift operations in the \u0026ldquo;Operations\u0026rdquo; tab. Base Conversion: View various base representations in the \u0026ldquo;Conversion\u0026rdquo; tab. Key Features Interactive Bit Map: Click any bit to toggle between 0 and 1 Base Conversion: Real-time conversion between binary, octal, decimal, hexadecimal Bitwise Operations: Support AND, OR, XOR, NOT, left shift, right shift Visual Results: Intuitive display of bit changes in operations Negative Number Support: Uses 32-bit two\u0026rsquo;s complement for negative numbers Bitwise Operations Operator Symbol Description AND \u0026amp; Result is 1 only if both bits are 1 OR ` ` XOR ^ Result is 1 if bits are different NOT ~ Bitwise complement Left Shift \u0026lt;\u0026lt; Shift bits left, fill with 0 Right Shift \u0026gt;\u0026gt; Shift bits right, fill with sign bit Common Applications Permission Management: Use bit masks to manage permission flags Color Processing: RGB color value bit operations Network Programming: IP address, subnet mask calculations Encryption: XOR encryption, bit confusion Data Structures: Bitmap indexes, Bloom filters Frequently Asked Questions (FAQ) Is this tool safe? Absolutely safe. This tool runs entirely in your browser (client-side processing). Your input data is not uploaded to any server.\nDoes it support negative numbers? Yes. This tool uses 32-bit two\u0026rsquo;s complement to represent negative numbers. For example, -1 in binary is all 1s (32 ones).\nWhat are bitwise operations used for? Bitwise operations are very useful in low-level programming:\nAND for mask operations, extracting specific bits OR for setting specific bits XOR for flipping specific bits or simple encryption Shift for multiplying or dividing by powers of 2 What is Two\u0026rsquo;s Complement? Two\u0026rsquo;s complement is the standard way computers represent signed integers. A positive number\u0026rsquo;s two\u0026rsquo;s complement is its binary representation, while a negative number\u0026rsquo;s two\u0026rsquo;s complement is the number inverted plus 1. This representation allows addition and subtraction to use the same hardware.\n","permalink":"https://www.webpenson.com/en/tools/binary-visualizer/","summary":"\u003c!-- 1. SEO 结构化数据 (Schema.org) --\u003e\n\u003cscript type=\"application/ld+json\"\u003e\n{\n  \"@context\": \"https://schema.org\",\n  \"@type\": \"SoftwareApplication\",\n  \"name\": \"Online Binary Visualizer\",\n  \"applicationCategory\": \"DeveloperApplication\",\n  \"operatingSystem\": \"Web\",\n  \"offers\": {\n    \"@type\": \"Offer\",\n    \"price\": \"0\",\n    \"priceCurrency\": \"USD\"\n  },\n  \"description\": \"Free online binary visualization tool with bitwise operations support. Convert between decimal, hex, binary. Interactive bit manipulation.\"\n}\n\u003c/script\u003e\n\u003c!-- 2. 调用 Shortcode (工具核心) --\u003e\n\n\u003cdiv class=\"binary-visualizer-tool\"\u003e\n    \u003cstyle\u003e\n        .binary-visualizer-tool {\n            --primary-color: #7c3aed;\n            --primary-hover: #6d28d9;\n            --bg-color: #f8fafc;\n            --card-bg: #ffffff;\n            --text-main: #1e293b;\n            --text-muted: #64748b;\n            --border-color: #e2e8f0;\n            --radius: 12px;\n            --shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);\n            --success-color: #10b981;\n            --accent-bg: #f5f3ff;\n            --accent-text: #7c3aed;\n            --bit-on: #10b981;\n            --bit-off: #e2e8f0;\n            --register-bg: #f6f8fa;\n        }\n\n        [data-theme=\"dark\"] .binary-visualizer-tool {\n            --bg-color: #0f172a;\n            --card-bg: #1e293b;\n            --text-main: #e2e8f0;\n            --text-muted: #94a3b8;\n            --border-color: #334155;\n            --accent-bg: #2e1f5e;\n            --accent-text: #c4b5fd;\n            --bit-on: #34d399;\n            --bit-off: #334155;\n            --register-bg: #1a2332;\n        }\n\n        .binary-visualizer-tool * {\n            box-sizing: border-box;\n            margin: 0;\n            padding: 0;\n        }\n\n        .binary-visualizer-tool {\n            font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\n            background-color: var(--bg-color);\n            color: var(--text-main);\n            line-height: 1.6;\n            margin: 20px 0;\n        }\n\n        .bv-container {\n            max-width: 100%;\n            margin: 0;\n            padding: 24px;\n            background: var(--card-bg);\n            border-radius: var(--radius);\n            box-shadow: var(--shadow);\n        }\n\n        .bv-title {\n            font-size: 1.25rem;\n            font-weight: 700;\n            color: var(--text-main);\n            margin-bottom: 8px;\n        }\n\n        .bv-intro {\n            font-size: 14px;\n            color: var(--text-muted);\n            margin-bottom: 20px;\n        }\n\n        .bv-input-section {\n            margin-bottom: 24px;\n        }\n\n        .bv-label {\n            font-size: 14px;\n            font-weight: 600;\n            color: var(--text-main);\n            margin-bottom: 8px;\n            display: block;\n        }\n\n        .bv-input-row {\n            display: flex;\n            gap: 12px;\n            flex-wrap: wrap;\n            align-items: center;\n        }\n\n        .bv-input {\n            flex: 1;\n            min-width: 200px;\n            padding: 12px 16px;\n            border: 2px solid var(--border-color);\n            border-radius: 8px;\n            font-size: 16px;\n            font-family: \"Consolas\", \"Monaco\", monospace;\n            background: var(--card-bg);\n            color: var(--text-main);\n            transition: border-color 0.2s;\n        }\n\n        .bv-input:focus {\n            outline: none;\n            border-color: var(--primary-color);\n        }\n\n        .bv-tabs {\n            display: flex;\n            gap: 8px;\n            margin-bottom: 16px;\n            flex-wrap: wrap;\n        }\n\n        .bv-tab {\n            padding: 8px 16px;\n            border: 1px solid var(--border-color);\n            border-radius: 8px;\n            background: transparent;\n            color: var(--text-muted);\n            font-size: 14px;\n            font-weight: 500;\n            cursor: pointer;\n            transition: all 0.2s;\n        }\n\n        .bv-tab:hover {\n            border-color: var(--primary-color);\n            color: var(--primary-color);\n        }\n\n        .bv-tab.active {\n            background: var(--primary-color);\n            border-color: var(--primary-color);\n            color: white;\n        }\n\n        .bv-panel {\n            display: none;\n        }\n\n        .bv-panel.active {\n            display: block;\n        }\n\n        .bv-radix-input {\n            display: flex;\n            gap: 8px;\n            align-items: center;\n            margin-bottom: 16px;\n        }\n\n        .bv-radix-input label {\n            font-size: 13px;\n            color: var(--text-muted);\n        }\n\n        .bv-radix-input select {\n            padding: 8px 12px;\n            border: 1px solid var(--border-color);\n            border-radius: 6px;\n            background: var(--card-bg);\n            color: var(--text-main);\n            font-size: 14px;\n            cursor: pointer;\n        }\n\n        .bv-binary-display {\n            background: var(--register-bg);\n            border: 1px solid var(--border-color);\n            border-radius: 12px;\n            padding: 20px;\n            margin-bottom: 16px;\n        }\n\n        .bv-binary-row {\n            display: flex;\n            gap: 8px;\n            flex-wrap: wrap;\n            justify-content: center;\n            margin-bottom: 16px;\n        }\n\n        .bv-bit {\n            width: 32px;\n            height: 40px;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            border-radius: 6px;\n            font-family: \"Consolas\", \"Monaco\", monospace;\n            font-size: 16px;\n            font-weight: 600;\n            cursor: pointer;\n            transition: all 0.2s;\n            background: var(--bit-off);\n            color: var(--text-muted);\n        }\n\n        .bv-bit.on {\n            background: var(--bit-on);\n            color: white;\n        }\n\n        .bv-bit:hover {\n            transform: scale(1.1);\n        }\n\n        .bv-bit-labels {\n            display: flex;\n            gap: 8px;\n            flex-wrap: wrap;\n            justify-content: center;\n        }\n\n        .bv-bit-label {\n            width: 32px;\n            text-align: center;\n            font-size: 10px;\n            color: var(--text-muted);\n            font-family: \"Consolas\", \"Monaco\", monospace;\n        }\n\n        .bv-values {\n            display: grid;\n            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));\n            gap: 12px;\n            margin-top: 16px;\n        }\n\n        .bv-value-card {\n            background: var(--accent-bg);\n            border-radius: 8px;\n            padding: 12px;\n            text-align: center;\n        }\n\n        .bv-value-label {\n            font-size: 12px;\n            color: var(--text-muted);\n            margin-bottom: 4px;\n        }\n\n        .bv-value-number {\n            font-size: 18px;\n            font-weight: 600;\n            color: var(--accent-text);\n            font-family: \"Consolas\", \"Monaco\", monospace;\n            word-break: break-all;\n        }\n\n        .bv-operations {\n            background: var(--register-bg);\n            border: 1px solid var(--border-color);\n            border-radius: 12px;\n            padding: 20px;\n            margin-bottom: 16px;\n        }\n\n        .bv-op-title {\n            font-size: 14px;\n            font-weight: 600;\n            color: var(--text-main);\n            margin-bottom: 12px;\n        }\n\n        .bv-op-row {\n            display: flex;\n            gap: 12px;\n            align-items: center;\n            flex-wrap: wrap;\n            margin-bottom: 12px;\n        }\n\n        .bv-op-row input {\n            flex: 1;\n            min-width: 120px;\n            padding: 10px;\n            border: 1px solid var(--border-color);\n            border-radius: 6px;\n            font-family: \"Consolas\", \"Monaco\", monospace;\n            font-size: 14px;\n            background: var(--card-bg);\n            color: var(--text-main);\n        }\n\n        .bv-op-row button {\n            padding: 10px 16px;\n            border: 1px solid var(--primary-color);\n            border-radius: 6px;\n            background: var(--primary-color);\n            color: white;\n            font-size: 14px;\n            font-weight: 500;\n            cursor: pointer;\n            transition: all 0.2s;\n        }\n\n        .bv-op-row button:hover {\n            background: var(--primary-hover);\n        }\n\n        .bv-op-result {\n            margin-top: 12px;\n            padding: 12px;\n            background: var(--accent-bg);\n            border-radius: 8px;\n        }\n\n        .bv-op-result-label {\n            font-size: 12px;\n            color: var(--text-muted);\n        }\n\n        .bv-op-result-value {\n            font-size: 20px;\n            font-weight: 600;\n            color: var(--accent-text);\n            font-family: \"Consolas\", \"Monaco\", monospace;\n        }\n\n        .bv-bitwise-results {\n            display: grid;\n            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n            gap: 12px;\n            margin-top: 16px;\n        }\n\n        .bv-bitwise-card {\n            background: var(--register-bg);\n            border: 1px solid var(--border-color);\n            border-radius: 8px;\n            padding: 12px;\n        }\n\n        .bv-bitwise-title {\n            font-size: 13px;\n            font-weight: 600;\n            color: var(--text-main);\n            margin-bottom: 8px;\n        }\n\n        .bv-bitwise-row {\n            display: flex;\n            gap: 8px;\n            flex-wrap: wrap;\n        }\n\n        .bv-bitwise-row span {\n            padding: 4px 8px;\n            border-radius: 4px;\n            font-size: 12px;\n            font-family: \"Consolas\", \"Monaco\", monospace;\n        }\n\n        .bv-bitwise-row .op-a {\n            background: #dbeafe;\n            color: #1e40af;\n        }\n\n        .bv-bitwise-row .op-b {\n            background: #fef3c7;\n            color: #92400e;\n        }\n\n        .bv-bitwise-row .op-r {\n            background: #d1fae5;\n            color: #065f46;\n        }\n    \u003c/style\u003e\n\n    \u003cdiv class=\"bv-container\"\u003e\n        \u003ch2 class=\"bv-title\"\u003eBinary Visualizer\u003c/h2\u003e\n        \u003cp class=\"bv-intro\"\u003eVisualize binary representation of numbers with bitwise operations and base conversion.\u003c/p\u003e","title":"Online Binary Visualizer - Bitwise Operations Calculator"},{"content":" JSON to TypeScript Type Definition Convert JSON data to TypeScript interface type definitions automatically. Supports nested objects and array type inference.\nJSON Input Format TypeScript Output Copy Generation Options Add Root Type Optional Properties (?) Readonly Properties Root Type Name: What is JSON to TypeScript Tool? JSON to TypeScript Tool is a free online tool for automatically converting JSON data to TypeScript interface type definitions. In TypeScript development, we often need to define types for JSON data. Manually writing these types is time-consuming and error-prone. This tool helps you automatically generate these types.\nHow to Use This Tool? Enter JSON: Paste or type the JSON data you want to convert in the left input box. Format JSON: Click the \u0026ldquo;Format\u0026rdquo; button to beautify the JSON format. Configure Options: Set options as needed (add root type, readonly properties, optional properties). Set Root Type Name: Customize the root interface name in the input field. Copy Result: Click the \u0026ldquo;Copy\u0026rdquo; button to copy the generated TypeScript code to clipboard. Key Features Automatic Type Inference: Intelligently analyze JSON data structure and automatically infer TypeScript types Nested Object Support: Support multi-level nested JSON objects with automatic sub-interface generation Array Type Handling: Automatically identify array element types, handle homogeneous and heterogeneous arrays Configuration Options: Add Root Type: Auto-generate root interface containing all properties Readonly Properties: Generate readonly properties, suitable for React/Redux projects Optional Properties (?): Mark all properties as optional Client-side Processing: Data stays on your device, protecting code privacy Type Inference Rules JSON Value Inferred TypeScript Type \u0026quot;text\u0026quot; string 123 number true / false boolean null null [1, 2, 3] number[] [{...}] Inferred element type + [] {...} Generate sub-interface Mixed Array (type1 | type2)[] Use Cases API Response Type Definition: Quickly generate type definitions for API response JSON Config File Typing: Generate types for JSON config files to ensure config correctness Database Model Definition: Generate TypeScript types for database query results Frontend State Management: Generate readonly type definitions for Redux/React state Data Validation: Combine with libraries like Zod for runtime validation Frequently Asked Questions (FAQ) Is this tool safe? Absolutely safe. This tool runs entirely in your browser (client-side processing). Your JSON data is not uploaded to any server.\nDoes it support nested JSON? Yes. This tool can handle JSON data with arbitrary nesting depth and automatically generate sub-interface definitions for each nested object.\nHow does it handle homogeneous and heterogeneous arrays? Homogeneous Array [1, 2, 3] → number[] Heterogeneous Array [1, \u0026quot;text\u0026quot;] → (number | string)[] What is the readonly option for? Checking the readonly option adds the readonly modifier to all properties in the generated type definition. In TypeScript, this means properties are read-only and cannot be reassigned. It\u0026rsquo;s suitable for:\nReact component props types Redux store state types Immutable data (Immutable.js) type definitions ","permalink":"https://www.webpenson.com/en/tools/json-to-typescript/","summary":"\u003c!-- 1. SEO 结构化数据 (Schema.org) --\u003e\n\u003cscript type=\"application/ld+json\"\u003e\n{\n  \"@context\": \"https://schema.org\",\n  \"@type\": \"SoftwareApplication\",\n  \"name\": \"Online JSON to TypeScript Type Definition Tool\",\n  \"applicationCategory\": \"DeveloperApplication\",\n  \"operatingSystem\": \"Web\",\n  \"offers\": {\n    \"@type\": \"Offer\",\n    \"price\": \"0\",\n    \"priceCurrency\": \"USD\"\n  },\n  \"description\": \"Free online JSON to TypeScript generator. Auto-generate interface type definitions with readonly and optional property support.\"\n}\n\u003c/script\u003e\n\u003c!-- 2. 调用 Shortcode (工具核心) --\u003e\n\n\u003cdiv class=\"json-ts-tool\"\u003e\n    \u003cstyle\u003e\n        .json-ts-tool {\n            --primary-color: #3178c6;\n            --primary-hover: #2a6db5;\n            --bg-color: #f8fafc;\n            --card-bg: #ffffff;\n            --text-main: #1e293b;\n            --text-muted: #64748b;\n            --border-color: #e2e8f0;\n            --radius: 12px;\n            --shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);\n            --success-color: #10b981;\n            --accent-bg: #eef2f8;\n            --accent-text: #3178c6;\n            --code-bg: #f6f8fa;\n            --code-border: #d1d9e0;\n        }\n\n        [data-theme=\"dark\"] .json-ts-tool {\n            --bg-color: #0f172a;\n            --card-bg: #1e293b;\n            --text-main: #e2e8f0;\n            --text-muted: #94a3b8;\n            --border-color: #334155;\n            --accent-bg: #1e3a5f;\n            --accent-text: #93c5fd;\n            --code-bg: #1a2332;\n            --code-border: #334155;\n        }\n\n        .json-ts-tool * {\n            box-sizing: border-box;\n            margin: 0;\n            padding: 0;\n        }\n\n        .json-ts-tool {\n            font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\n            background-color: var(--bg-color);\n            color: var(--text-main);\n            line-height: 1.6;\n            margin: 20px 0;\n        }\n\n        .json-ts-container {\n            max-width: 100%;\n            margin: 0;\n            padding: 24px;\n            background: var(--card-bg);\n            border-radius: var(--radius);\n            box-shadow: var(--shadow);\n        }\n\n        .json-ts-title {\n            font-size: 1.25rem;\n            font-weight: 700;\n            color: var(--text-main);\n            margin-bottom: 8px;\n        }\n\n        .json-ts-intro {\n            font-size: 14px;\n            color: var(--text-muted);\n            margin-bottom: 20px;\n        }\n\n        .json-ts-panels {\n            display: grid;\n            grid-template-columns: 1fr 1fr;\n            gap: 20px;\n        }\n\n        @media (max-width: 800px) {\n            .json-ts-panels {\n                grid-template-columns: 1fr;\n            }\n        }\n\n        .json-ts-panel {\n            display: flex;\n            flex-direction: column;\n        }\n\n        .json-ts-label {\n            font-size: 14px;\n            font-weight: 600;\n            color: var(--text-main);\n            margin-bottom: 8px;\n            display: flex;\n            align-items: center;\n            justify-content: space-between;\n        }\n\n        .json-ts-btn-small {\n            padding: 4px 10px;\n            border: 1px solid var(--border-color);\n            border-radius: 6px;\n            background: transparent;\n            color: var(--text-muted);\n            font-size: 12px;\n            cursor: pointer;\n            transition: all 0.2s;\n        }\n\n        .json-ts-btn-small:hover {\n            background: var(--primary-color);\n            color: white;\n            border-color: var(--primary-color);\n        }\n\n        .json-ts-textarea {\n            width: 100%;\n            height: 300px;\n            padding: 12px;\n            border: 1px solid var(--border-color);\n            border-radius: 8px;\n            background: var(--code-bg);\n            color: var(--text-main);\n            font-size: 14px;\n            font-family: \"Consolas\", \"Monaco\", \"Courier New\", monospace;\n            resize: vertical;\n            transition: border-color 0.2s;\n        }\n\n        .json-ts-textarea:focus {\n            outline: none;\n            border-color: var(--primary-color);\n        }\n\n        .json-ts-textarea::placeholder {\n            color: var(--text-muted);\n        }\n\n        .json-ts-options {\n            margin: 16px 0;\n            padding: 16px;\n            background: var(--bg-color);\n            border-radius: 8px;\n        }\n\n        .json-ts-options-title {\n            font-size: 14px;\n            font-weight: 600;\n            color: var(--text-main);\n            margin-bottom: 12px;\n        }\n\n        .json-ts-option-row {\n            display: flex;\n            flex-wrap: wrap;\n            gap: 16px;\n        }\n\n        .json-ts-option {\n            display: flex;\n            align-items: center;\n            gap: 6px;\n        }\n\n        .json-ts-option input[type=\"checkbox\"] {\n            width: 16px;\n            height: 16px;\n            accent-color: var(--primary-color);\n        }\n\n        .json-ts-option label {\n            font-size: 13px;\n            color: var(--text-main);\n            cursor: pointer;\n        }\n\n        .json-ts-error {\n            margin-top: 12px;\n            padding: 12px;\n            background: #fef2f2;\n            border: 1px solid #fecaca;\n            border-radius: 8px;\n            color: #dc2626;\n            font-size: 13px;\n            display: none;\n        }\n\n        [data-theme=\"dark\"] .json-ts-error {\n            background: #450a0a;\n            border-color: #7f1d1d;\n            color: #fca5a5;\n        }\n\n        .json-ts-error.show {\n            display: block;\n        }\n\n        .json-ts-root-type {\n            margin-top: 12px;\n        }\n\n        .json-ts-root-type label {\n            font-size: 13px;\n            color: var(--text-muted);\n            margin-right: 8px;\n        }\n\n        .json-ts-root-type input {\n            padding: 6px 10px;\n            border: 1px solid var(--border-color);\n            border-radius: 6px;\n            background: var(--card-bg);\n            color: var(--text-main);\n            font-size: 14px;\n            font-family: \"Consolas\", \"Monaco\", monospace;\n            width: 150px;\n        }\n\n        .json-ts-root-type input:focus {\n            outline: none;\n            border-color: var(--primary-color);\n        }\n    \u003c/style\u003e\n\n    \u003cdiv class=\"json-ts-container\"\u003e\n        \u003ch2 class=\"json-ts-title\"\u003eJSON to TypeScript Type Definition\u003c/h2\u003e\n        \u003cp class=\"json-ts-intro\"\u003eConvert JSON data to TypeScript interface type definitions automatically. Supports nested objects and array type inference.\u003c/p\u003e","title":"Online JSON to TypeScript Type Definition Generator"},{"content":" 哈希生成器 输入文本或上传文件，生成多种哈希值。支持 MD5、SHA-1、SHA-256 等常见算法。\n输入文本 或上传文件 拖放文件到此处 或点击选择文件 MD5 SHA-1 SHA-256 SHA-512 生成哈希 清空 计算中...\nMD5 复制 SHA-1 复制 SHA-256 复制 SHA-512 复制 What is Hash Generator? Hash Generator is a free online tool for calculating hash values (Hash) of text or files. Hash is an algorithm that converts data of any length into a fixed-length string, widely used in data integrity verification, password storage, digital signatures, and other fields.\nThis tool runs entirely in your browser without uploading data to the server, ensuring your data privacy and security.\nHow to Use This Tool? Our tool is designed to be intuitive with just a few simple steps:\nSelect Input Mode: Switch between \u0026ldquo;Text\u0026rdquo; and \u0026ldquo;File\u0026rdquo; modes. Enter Data: Text mode: Directly enter or paste the text you want to hash in the text box File mode: Drag and drop a file to the file area, or click to select a file Select Algorithm: Choose the hash algorithm you need (MD5, SHA-1, SHA-256, SHA-512). Get Results: Click the \u0026ldquo;Calculate Hash\u0026rdquo; button to view the hash value in the result area. Copy Results: Click the \u0026ldquo;Copy\u0026rdquo; button to copy the hash value to clipboard. Key Features Multiple Algorithms: Supports MD5, SHA-1, SHA-256, SHA-512 and more Dual Input: Text input and file drag-and-drop support Real-time Calculation: Instant hash generation as you type Copy to Clipboard: One-click copy of hash results Bilingual Support: Complete Chinese and English interface Client-side Processing: Data stays on your device, protecting your privacy Algorithm Comparison Algorithm Output Length Bits Security Use Case MD5 32 chars 128-bit ⚠️ Not recommended for security General checksum, file verification SHA-1 40 chars 160-bit ⚠️ Not recommended for security Git commits, certificate signing SHA-256 64 chars 256-bit ✅ Secure Security verification, blockchain SHA-512 128 chars 512-bit ✅ More Secure High security needs Applications File Integrity Check: Calculate hash after downloading to verify against official hash, confirm file hasn\u0026rsquo;t been tampered with Password Storage: Store password hashes in database instead of plain text; even if database is leaked, original passwords cannot be recovered Digital Signature: Used to verify data integrity and source Version Verification: Software releases include hash values for users to verify download file integrity Frequently Asked Questions (FAQ) Is this tool safe? Absolutely safe. This tool runs entirely in your browser (client-side processing). Your text or file is not uploaded to any server. All hash calculations are performed locally.\nCan I still use MD5 and SHA-1? MD5 and SHA-1 have known collision attack vulnerabilities, so they are not recommended for security-related scenarios (such as password storage, digital signatures). However, they are still suitable for non-security purposes like file integrity verification.\nFor security requirements, it is recommended to use SHA-256 or SHA-512 algorithms.\nWhat is the maximum file size supported? Browsers have certain limitations on file size (typically recommended not to exceed 100MB). For very large files, it may take longer calculation time or encounter browser memory limitations.\nWhy is the MD5 value different each time for the same content? If you find that the MD5 calculated for the same text is different each time, it may be because:\nThere are subtle differences in each text input (such as spaces, line breaks) Text encoding issues (MD5 values for UTF-8 and GB2312 encodings are different) Please ensure the input text is exactly the same.\n","permalink":"https://www.webpenson.com/en/tools/hash-generator/","summary":"\u003c!-- 1. SEO 结构化数据 (Schema.org) --\u003e\n\u003cscript type=\"application/ld+json\"\u003e\n{\n  \"@context\": \"https://schema.org\",\n  \"@type\": \"SoftwareApplication\",\n  \"name\": \"Online Hash Generator\",\n  \"applicationCategory\": \"DeveloperApplication\",\n  \"operatingSystem\": \"Web\",\n  \"offers\": {\n    \"@type\": \"Offer\",\n    \"price\": \"0\",\n    \"priceCurrency\": \"USD\"\n  },\n  \"description\": \"Free online hash generator supporting MD5, SHA-1, SHA-256, SHA-512 algorithms. Calculate hash from text or file drag-and-drop.\"\n}\n\u003c/script\u003e\n\u003c!-- 2. 调用 Shortcode (工具核心) --\u003e\n\n\u003cdiv class=\"hash-generator-tool\"\u003e\n    \u003cstyle\u003e\n        .hash-generator-tool {\n            --primary-color: #2563eb;\n            --primary-hover: #1d4ed8;\n            --bg-color: #f8fafc;\n            --card-bg: #ffffff;\n            --text-main: #1e293b;\n            --text-muted: #64748b;\n            --border-color: #e2e8f0;\n            --radius: 12px;\n            --shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);\n            --success-color: #10b981;\n            --hash-bg: #f1f5f9;\n            --hash-text: #334155;\n        }\n\n        [data-theme=\"dark\"] .hash-generator-tool {\n            --bg-color: #0f172a;\n            --card-bg: #1e293b;\n            --text-main: #e2e8f0;\n            --text-muted: #94a3b8;\n            --border-color: #334155;\n            --hash-bg: #1e293b;\n            --hash-text: #e2e8f0;\n        }\n\n        .hash-generator-tool * {\n            box-sizing: border-box;\n            margin: 0;\n            padding: 0;\n        }\n\n        .hash-generator-tool {\n            font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\n            background-color: var(--bg-color);\n            color: var(--text-main);\n            line-height: 1.6;\n            margin: 20px 0;\n        }\n\n        .hash-container {\n            max-width: 800px;\n            margin: 0;\n            padding: 24px;\n            background: var(--card-bg);\n            border-radius: var(--radius);\n            box-shadow: var(--shadow);\n        }\n\n        .hash-header {\n            margin-bottom: 20px;\n        }\n\n        .hash-title {\n            font-size: 18px;\n            font-weight: 600;\n            color: var(--text-main);\n            margin-bottom: 8px;\n        }\n\n        .hash-desc {\n            font-size: 14px;\n            color: var(--text-muted);\n        }\n\n        .hash-input-section {\n            margin-bottom: 20px;\n        }\n\n        .hash-label {\n            display: block;\n            font-size: 14px;\n            font-weight: 500;\n            color: var(--text-main);\n            margin-bottom: 8px;\n        }\n\n        .hash-textarea {\n            width: 100%;\n            min-height: 120px;\n            padding: 12px;\n            border: 1px solid var(--border-color);\n            border-radius: 8px;\n            background: var(--bg-color);\n            color: var(--text-main);\n            font-family: \"Consolas\", \"Monaco\", monospace;\n            font-size: 14px;\n            line-height: 1.5;\n            resize: vertical;\n            transition: border-color 0.2s;\n        }\n\n        .hash-textarea:focus {\n            outline: none;\n            border-color: var(--primary-color);\n        }\n\n        .hash-file-section {\n            margin-bottom: 20px;\n        }\n\n        .hash-dropzone {\n            border: 2px dashed var(--border-color);\n            border-radius: 8px;\n            padding: 32px;\n            text-align: center;\n            cursor: pointer;\n            transition: all 0.2s;\n        }\n\n        .hash-dropzone:hover,\n        .hash-dropzone.dragover {\n            border-color: var(--primary-color);\n            background: rgba(37, 99, 235, 0.05);\n        }\n\n        .hash-dropzone-icon {\n            width: 48px;\n            height: 48px;\n            margin: 0 auto 12px;\n            color: var(--text-muted);\n        }\n\n        .hash-dropzone-text {\n            font-size: 14px;\n            color: var(--text-muted);\n        }\n\n        .hash-dropzone-text strong {\n            color: var(--primary-color);\n        }\n\n        .hash-file-input {\n            display: none;\n        }\n\n        .hash-file-info {\n            display: flex;\n            align-items: center;\n            gap: 12px;\n            padding: 12px;\n            background: var(--hash-bg);\n            border-radius: 8px;\n            margin-top: 12px;\n        }\n\n        .hash-file-icon {\n            width: 32px;\n            height: 32px;\n            color: var(--primary-color);\n        }\n\n        .hash-file-details {\n            flex: 1;\n        }\n\n        .hash-file-name {\n            font-size: 14px;\n            font-weight: 500;\n            color: var(--text-main);\n        }\n\n        .hash-file-size {\n            font-size: 12px;\n            color: var(--text-muted);\n        }\n\n        .hash-file-remove {\n            padding: 6px;\n            border: none;\n            background: transparent;\n            color: var(--text-muted);\n            cursor: pointer;\n            border-radius: 4px;\n        }\n\n        .hash-file-remove:hover {\n            background: var(--border-color);\n            color: var(--text-main);\n        }\n\n        .hash-options {\n            display: flex;\n            flex-wrap: wrap;\n            gap: 12px;\n            margin-bottom: 20px;\n        }\n\n        .hash-option {\n            display: flex;\n            align-items: center;\n            gap: 8px;\n        }\n\n        .hash-option input {\n            cursor: pointer;\n        }\n\n        .hash-option label {\n            font-size: 14px;\n            color: var(--text-main);\n            cursor: pointer;\n        }\n\n        .hash-btn-row {\n            display: flex;\n            gap: 12px;\n            margin-bottom: 20px;\n        }\n\n        .hash-btn {\n            padding: 10px 20px;\n            border: none;\n            border-radius: 8px;\n            font-size: 14px;\n            font-weight: 500;\n            cursor: pointer;\n            transition: all 0.2s;\n        }\n\n        .hash-btn-primary {\n            background: var(--primary-color);\n            color: white;\n        }\n\n        .hash-btn-primary:hover {\n            background: var(--primary-hover);\n        }\n\n        .hash-btn-secondary {\n            background: var(--border-color);\n            color: var(--text-main);\n        }\n\n        .hash-btn-secondary:hover {\n            background: var(--text-muted);\n            color: white;\n        }\n\n        .hash-results {\n            display: none;\n        }\n\n        .hash-results.show {\n            display: block;\n        }\n\n        .hash-result-item {\n            margin-bottom: 16px;\n        }\n\n        .hash-result-header {\n            display: flex;\n            align-items: center;\n            justify-content: space-between;\n            margin-bottom: 8px;\n        }\n\n        .hash-result-label {\n            font-size: 14px;\n            font-weight: 600;\n            color: var(--text-main);\n        }\n\n        .hash-result-copy {\n            padding: 4px 8px;\n            border: none;\n            background: var(--border-color);\n            border-radius: 4px;\n            font-size: 12px;\n            color: var(--text-muted);\n            cursor: pointer;\n            transition: all 0.2s;\n        }\n\n        .hash-result-copy:hover {\n            background: var(--primary-color);\n            color: white;\n        }\n\n        .hash-result-copy.copied {\n            background: var(--success-color);\n            color: white;\n        }\n\n        .hash-result-value {\n            padding: 12px;\n            background: var(--hash-bg);\n            border-radius: 8px;\n            font-family: \"Consolas\", \"Monaco\", monospace;\n            font-size: 13px;\n            color: var(--hash-text);\n            word-break: break-all;\n            user-select: all;\n            cursor: pointer;\n        }\n\n        .hash-result-value:hover {\n            background: var(--border-color);\n        }\n\n        .hash-loading {\n            display: none;\n            text-align: center;\n            padding: 20px;\n        }\n\n        .hash-loading.show {\n            display: block;\n        }\n\n        .hash-spinner {\n            width: 32px;\n            height: 32px;\n            border: 3px solid var(--border-color);\n            border-top-color: var(--primary-color);\n            border-radius: 50%;\n            animation: hash-spin 1s linear infinite;\n            margin: 0 auto 12px;\n        }\n\n        @keyframes hash-spin {\n            to { transform: rotate(360deg); }\n        }\n\n        .hash-loading-text {\n            font-size: 14px;\n            color: var(--text-muted);\n        }\n\n        .hash-empty {\n            padding: 40px;\n            text-align: center;\n            color: var(--text-muted);\n        }\n    \u003c/style\u003e\n\n    \u003cdiv class=\"hash-container\"\u003e\n        \u003cdiv class=\"hash-header\"\u003e\n            \u003ch2 class=\"hash-title\" data-i18n=\"hash_title\"\u003e哈希生成器\u003c/h2\u003e\n            \u003cp class=\"hash-desc\" data-i18n=\"hash_desc\"\u003e输入文本或上传文件，生成多种哈希值。支持 MD5、SHA-1、SHA-256 等常见算法。\u003c/p\u003e","title":"Online Hash Generator - MD5 SHA-1 SHA-256 SHA-512"},{"content":" Length Weight Temperature Area Volume Data Value From Meter (m) Kilometer (km) Centimeter (cm) Millimeter (mm) Mile (mi) Yard (yd) Foot (ft) Inch (in) To Meter (m) Kilometer (km) Centimeter (cm) Millimeter (mm) Mile (mi) Yard (yd) Foot (ft) Inch (in) 0.001 km Value From Kilogram (kg) Gram (g) Milligram (mg) Ton (t) Pound (lb) Ounce (oz) To Kilogram (kg) Gram (g) Milligram (mg) Ton (t) Pound (lb) Ounce (oz) 2.20462 lb Value From Celsius (°C) Fahrenheit (°F) Kelvin (K) To Celsius (°C) Fahrenheit (°F) Kelvin (K) 0 °C Value From Square Meter (m²) Square Kilometer (km²) Square Centimeter (cm²) Hectare (ha) Acre Square Foot (ft²) To Square Meter (m²) Square Kilometer (km²) Square Centimeter (cm²) Hectare (ha) Acre Square Foot (ft²) 0.000001 km² Value From Liter (L) Milliliter (mL) Cubic Meter (m³) Gallon Quart Pint To Liter (L) Milliliter (mL) Cubic Meter (m³) Gallon Quart Pint 1 L Value From Byte (B) Kilobyte (KB) Megabyte (MB) Gigabyte (GB) Terabyte (TB) To Byte (B) Kilobyte (KB) Megabyte (MB) Gigabyte (GB) Terabyte (TB) 0.0009765625 MB What is Unit Converter? Unit Converter is a free online tool that helps you quickly convert values between different unit systems. Whether it\u0026rsquo;s length measurements in daily life, ingredient weights for cooking, or area and volume calculations for professional work, this tool handles it all with ease.\nThis tool runs entirely in your browser with no data upload required. It\u0026rsquo;s safe, reliable, and ready to use instantly.\nHow to Use This Tool? Our tool is designed to be intuitive with just a few simple steps:\nSelect Category: Click the tabs at the top (Length, Weight, Temperature, Area, Volume, Data) to choose the type of units you need to convert. Enter Value: Type the number you want to convert in the \u0026ldquo;Value\u0026rdquo; input field. Choose Units: Select the source unit \u0026ldquo;From\u0026rdquo; and target unit \u0026ldquo;To\u0026rdquo;. View Result: The converted result displays instantly in the result area below. Quick Values: Use shortcut buttons to quickly input common values (like 1 meter, 1 pound, etc.). Key Features Multiple Unit Support: Supports 6 categories with 40+ units for conversion. Real-time Conversion: Results update instantly as you type, no button clicks needed. Unit Swap: Click the swap button to quickly exchange source and target units. Quick Input: Provides shortcut buttons for common values to reduce manual entry. Dark Mode: Automatically adapts to system dark/light mode. Client-side Processing: Data stays on your device, protecting your privacy. Length Unit Conversion Supports conversion between the following length units:\nUnit Name Description m Meter International standard length unit km Kilometer 1000 meters, commonly used for distances cm Centimeter 0.01 meters, used for everyday measurements mm Millimeter 0.001 meters, used for precision measurements mi Mile Imperial length unit, approx 1609 meters yd Yard Imperial length unit, approx 0.914 meters ft Foot Imperial length unit, approx 0.305 meters in Inch Imperial length unit, 1 foot = 12 inches Weight Unit Conversion Supports conversion between the following weight units:\nUnit Name Description kg Kilogram International standard mass unit g Gram 0.001 kilograms, commonly used in cooking mg Milligram 0.001 grams, used for precision weighing t Ton 1000 kilograms, used for large objects lb Pound Imperial mass unit, approx 0.454 kg oz Ounce Imperial mass unit, commonly used for precious metals Temperature Unit Conversion Supports conversion between Celsius, Fahrenheit, and Kelvin:\nUnit Name Description °C Celsius Standard temperature unit, water boils at 100°C °F Fahrenheit Common in US/UK, water boils at 212°F K Kelvin Thermodynamic temperature, absolute zero is 0K Frequently Asked Questions (FAQ) Is this tool safe? Absolutely safe. This tool runs entirely in your browser (client-side processing). Your input data is not uploaded to any server. All calculations are performed locally.\nDoes it support batch conversion? Current version supports single-value conversion. For batch conversion, you can use the tool multiple times or use spreadsheet software with conversion formulas.\nWhat is the conversion precision? The tool uses JavaScript standard numeric operations with precision of 15-17 significant digits, which is more than sufficient for daily use and most professional needs.\nWhat data storage units are supported? Supports conversion between Bytes (B), Kilobytes (KB), Megabytes (MB), Gigabytes (GB), and Terabytes (TB) using binary conversion standard (1KB = 1024B).\n","permalink":"https://www.webpenson.com/en/tools/unit-converter/","summary":"\u003c!-- 1. SEO 结构化数据 (Schema.org) --\u003e\n\u003cscript type=\"application/ld+json\"\u003e\n{\n  \"@context\": \"https://schema.org\",\n  \"@type\": \"SoftwareApplication\",\n  \"name\": \"Online Unit Converter\",\n  \"applicationCategory\": \"UtilityApplication\",\n  \"operatingSystem\": \"Web\",\n  \"offers\": {\n    \"@type\": \"Offer\",\n    \"price\": \"0\",\n    \"priceCurrency\": \"USD\"\n  },\n  \"description\": \"Free online unit converter supporting length, weight, temperature, area, volume, and data storage units conversion.\"\n}\n\u003c/script\u003e\n\u003c!-- 2. 调用 Shortcode (工具核心) --\u003e\n\n\u003cdiv class=\"unit-converter-tool\"\u003e\n    \u003cstyle\u003e\n        .unit-converter-tool {\n            --primary-color: #2563eb;\n            --primary-hover: #1d4ed8;\n            --bg-color: #f8fafc;\n            --card-bg: #ffffff;\n            --text-main: #1e293b;\n            --text-muted: #64748b;\n            --border-color: #e2e8f0;\n            --radius: 12px;\n            --shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);\n            --success-color: #10b981;\n            --accent-bg: #eff6ff;\n            --accent-text: #1e40af;\n        }\n\n        [data-theme=\"dark\"] .unit-converter-tool {\n            --bg-color: #0f172a;\n            --card-bg: #1e293b;\n            --text-main: #e2e8f0;\n            --text-muted: #94a3b8;\n            --border-color: #334155;\n            --accent-bg: #1e3a5f;\n            --accent-text: #93c5fd;\n        }\n\n        .unit-converter-tool * {\n            box-sizing: border-box;\n            margin: 0;\n            padding: 0;\n        }\n\n        .unit-converter-tool {\n            font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\n            background-color: var(--bg-color);\n            color: var(--text-main);\n            line-height: 1.6;\n            margin: 20px 0;\n        }\n\n        .unit-container {\n            max-width: 800px;\n            margin: 0;\n            padding: 24px;\n            background: var(--card-bg);\n            border-radius: var(--radius);\n            box-shadow: var(--shadow);\n        }\n\n        .unit-tabs {\n            display: flex;\n            flex-wrap: wrap;\n            gap: 8px;\n            margin-bottom: 24px;\n            padding-bottom: 16px;\n            border-bottom: 1px solid var(--border-color);\n        }\n\n        .unit-tab {\n            padding: 8px 16px;\n            border: 1px solid var(--border-color);\n            border-radius: 8px;\n            background: transparent;\n            color: var(--text-muted);\n            font-size: 14px;\n            font-weight: 500;\n            cursor: pointer;\n            transition: all 0.2s;\n        }\n\n        .unit-tab:hover {\n            border-color: var(--primary-color);\n            color: var(--primary-color);\n        }\n\n        .unit-tab.active {\n            background: var(--primary-color);\n            border-color: var(--primary-color);\n            color: white;\n        }\n\n        .unit-panel {\n            display: none;\n        }\n\n        .unit-panel.active {\n            display: block;\n        }\n\n        .unit-converter-row {\n            display: flex;\n            gap: 16px;\n            align-items: flex-end;\n            margin-bottom: 16px;\n        }\n\n        @media (max-width: 600px) {\n            .unit-converter-row {\n                flex-direction: column;\n            }\n        }\n\n        .unit-input-group {\n            flex: 1;\n        }\n\n        .unit-label {\n            display: block;\n            font-size: 13px;\n            font-weight: 500;\n            color: var(--text-muted);\n            margin-bottom: 6px;\n        }\n\n        .unit-input {\n            width: 100%;\n            padding: 12px;\n            border: 1px solid var(--border-color);\n            border-radius: 8px;\n            background: var(--bg-color);\n            color: var(--text-main);\n            font-size: 16px;\n            font-family: \"Consolas\", \"Monaco\", monospace;\n            transition: border-color 0.2s;\n        }\n\n        .unit-input:focus {\n            outline: none;\n            border-color: var(--primary-color);\n        }\n\n        .unit-swap-btn {\n            padding: 12px;\n            border: 1px solid var(--border-color);\n            border-radius: 8px;\n            background: var(--card-bg);\n            color: var(--text-muted);\n            cursor: pointer;\n            transition: all 0.2s;\n            min-width: 48px;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n        }\n\n        .unit-swap-btn:hover {\n            background: var(--accent-bg);\n            color: var(--primary-color);\n            border-color: var(--primary-color);\n        }\n\n        .unit-select {\n            width: 100%;\n            padding: 12px;\n            border: 1px solid var(--border-color);\n            border-radius: 8px;\n            background: var(--bg-color);\n            color: var(--text-main);\n            font-size: 14px;\n            cursor: pointer;\n        }\n\n        .unit-select:focus {\n            outline: none;\n            border-color: var(--primary-color);\n        }\n\n        .unit-result {\n            padding: 16px;\n            background: var(--accent-bg);\n            border-radius: 8px;\n            border-left: 4px solid var(--primary-color);\n            margin-bottom: 16px;\n        }\n\n        .unit-result-value {\n            font-size: 24px;\n            font-weight: 600;\n            color: var(--accent-text);\n            font-family: \"Consolas\", \"Monaco\", monospace;\n            word-break: break-all;\n        }\n\n        .unit-result-unit {\n            font-size: 14px;\n            color: var(--text-muted);\n            margin-top: 4px;\n        }\n\n        .unit-conversion-list {\n            margin-top: 16px;\n            padding: 16px;\n            background: var(--bg-color);\n            border-radius: 8px;\n        }\n\n        .unit-conversion-title {\n            font-size: 14px;\n            font-weight: 600;\n            color: var(--text-main);\n            margin-bottom: 12px;\n        }\n\n        .unit-conversion-item {\n            display: flex;\n            justify-content: space-between;\n            padding: 8px 0;\n            border-bottom: 1px solid var(--border-color);\n            font-size: 13px;\n        }\n\n        .unit-conversion-item:last-child {\n            border-bottom: none;\n        }\n\n        .unit-conversion-item span:first-child {\n            color: var(--text-muted);\n        }\n\n        .unit-conversion-item span:last-child {\n            font-family: \"Consolas\", \"Monaco\", monospace;\n            color: var(--text-main);\n        }\n\n        .unit-quick-inputs {\n            display: flex;\n            gap: 8px;\n            margin-top: 12px;\n            flex-wrap: wrap;\n        }\n\n        .unit-quick-btn {\n            padding: 6px 12px;\n            border: 1px solid var(--border-color);\n            border-radius: 6px;\n            background: transparent;\n            color: var(--text-muted);\n            font-size: 12px;\n            cursor: pointer;\n        }\n\n        .unit-quick-btn:hover {\n            background: var(--primary-color);\n            color: white;\n            border-color: var(--primary-color);\n        }\n    \u003c/style\u003e\n\n    \u003cdiv class=\"unit-container\"\u003e\n        \u003cdiv class=\"unit-tabs\" id=\"unit-tabs\"\u003e\n            \u003cbutton class=\"unit-tab active\" data-tab=\"length\"\u003eLength\u003c/button\u003e\n            \u003cbutton class=\"unit-tab\" data-tab=\"weight\"\u003eWeight\u003c/button\u003e\n            \u003cbutton class=\"unit-tab\" data-tab=\"temperature\"\u003eTemperature\u003c/button\u003e\n            \u003cbutton class=\"unit-tab\" data-tab=\"area\"\u003eArea\u003c/button\u003e\n            \u003cbutton class=\"unit-tab\" data-tab=\"volume\"\u003eVolume\u003c/button\u003e\n            \u003cbutton class=\"unit-tab\" data-tab=\"data\"\u003eData\u003c/button\u003e\n        \u003c/div\u003e\n\n        \n        \u003cdiv class=\"unit-panel active\" id=\"panel-length\"\u003e\n            \u003cdiv class=\"unit-converter-row\"\u003e\n                \u003cdiv class=\"unit-input-group\"\u003e\n                    \u003clabel class=\"unit-label\"\u003eValue\u003c/label\u003e\n                    \u003cinput type=\"number\" class=\"unit-input\" id=\"length-value\" placeholder=\"Enter value\" value=\"1\" /\u003e\n                \u003c/div\u003e\n                \u003cdiv class=\"unit-input-group\"\u003e\n                    \u003clabel class=\"unit-label\"\u003eFrom\u003c/label\u003e\n                    \u003cselect class=\"unit-select\" id=\"length-from\"\u003e\n                        \u003coption value=\"m\"\u003eMeter (m)\u003c/option\u003e\n                        \u003coption value=\"km\"\u003eKilometer (km)\u003c/option\u003e\n                        \u003coption value=\"cm\"\u003eCentimeter (cm)\u003c/option\u003e\n                        \u003coption value=\"mm\"\u003eMillimeter (mm)\u003c/option\u003e\n                        \u003coption value=\"mi\"\u003eMile (mi)\u003c/option\u003e\n                        \u003coption value=\"yd\"\u003eYard (yd)\u003c/option\u003e\n                        \u003coption value=\"ft\"\u003eFoot (ft)\u003c/option\u003e\n                        \u003coption value=\"in\"\u003eInch (in)\u003c/option\u003e\n                    \u003c/select\u003e\n                \u003c/div\u003e\n                \u003cbutton class=\"unit-swap-btn\" onclick=\"unitSwap('length')\" title=\"Swap\"\u003e\n                    \u003csvg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\u003e\u003cpath d=\"M7 16V4M7 4L3 8M7 4L11 8M17 8V20M17 20L21 16M17 20L13 16\"/\u003e\u003c/svg\u003e\n                \u003c/button\u003e\n                \u003cdiv class=\"unit-input-group\"\u003e\n                    \u003clabel class=\"unit-label\"\u003eTo\u003c/label\u003e\n                    \u003cselect class=\"unit-select\" id=\"length-to\"\u003e\n                        \u003coption value=\"m\"\u003eMeter (m)\u003c/option\u003e\n                        \u003coption value=\"km\" selected\u003eKilometer (km)\u003c/option\u003e\n                        \u003coption value=\"cm\"\u003eCentimeter (cm)\u003c/option\u003e\n                        \u003coption value=\"mm\"\u003eMillimeter (mm)\u003c/option\u003e\n                        \u003coption value=\"mi\"\u003eMile (mi)\u003c/option\u003e\n                        \u003coption value=\"yd\"\u003eYard (yd)\u003c/option\u003e\n                        \u003coption value=\"ft\"\u003eFoot (ft)\u003c/option\u003e\n                        \u003coption value=\"in\"\u003eInch (in)\u003c/option\u003e\n                    \u003c/select\u003e\n                \u003c/div\u003e\n            \u003c/div\u003e\n            \u003cdiv class=\"unit-result\"\u003e\n                \u003cdiv class=\"unit-result-value\" id=\"length-result\"\u003e0.001\u003c/div\u003e\n                \u003cdiv class=\"unit-result-unit\"\u003ekm\u003c/div\u003e\n            \u003c/div\u003e\n            \u003cdiv class=\"unit-quick-inputs\" id=\"length-quick\"\u003e\u003c/div\u003e\n            \u003cdiv class=\"unit-conversion-list\" id=\"length-list\"\u003e\u003c/div\u003e\n        \u003c/div\u003e\n\n        \n        \u003cdiv class=\"unit-panel\" id=\"panel-weight\"\u003e\n            \u003cdiv class=\"unit-converter-row\"\u003e\n                \u003cdiv class=\"unit-input-group\"\u003e\n                    \u003clabel class=\"unit-label\"\u003eValue\u003c/label\u003e\n                    \u003cinput type=\"number\" class=\"unit-input\" id=\"weight-value\" placeholder=\"Enter value\" value=\"1\" /\u003e\n                \u003c/div\u003e\n                \u003cdiv class=\"unit-input-group\"\u003e\n                    \u003clabel class=\"unit-label\"\u003eFrom\u003c/label\u003e\n                    \u003cselect class=\"unit-select\" id=\"weight-from\"\u003e\n                        \u003coption value=\"kg\"\u003eKilogram (kg)\u003c/option\u003e\n                        \u003coption value=\"g\"\u003eGram (g)\u003c/option\u003e\n                        \u003coption value=\"mg\"\u003eMilligram (mg)\u003c/option\u003e\n                        \u003coption value=\"t\"\u003eTon (t)\u003c/option\u003e\n                        \u003coption value=\"lb\"\u003ePound (lb)\u003c/option\u003e\n                        \u003coption value=\"oz\"\u003eOunce (oz)\u003c/option\u003e\n                    \u003c/select\u003e\n                \u003c/div\u003e\n                \u003cbutton class=\"unit-swap-btn\" onclick=\"unitSwap('weight')\"\u003e\n                    \u003csvg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\u003e\u003cpath d=\"M7 16V4M7 4L3 8M7 4L11 8M17 8V20M17 20L21 16M17 20L13 16\"/\u003e\u003c/svg\u003e\n                \u003c/button\u003e\n                \u003cdiv class=\"unit-input-group\"\u003e\n                    \u003clabel class=\"unit-label\"\u003eTo\u003c/label\u003e\n                    \u003cselect class=\"unit-select\" id=\"weight-to\"\u003e\n                        \u003coption value=\"kg\"\u003eKilogram (kg)\u003c/option\u003e\n                        \u003coption value=\"g\"\u003eGram (g)\u003c/option\u003e\n                        \u003coption value=\"mg\"\u003eMilligram (mg)\u003c/option\u003e\n                        \u003coption value=\"t\"\u003eTon (t)\u003c/option\u003e\n                        \u003coption value=\"lb\" selected\u003ePound (lb)\u003c/option\u003e\n                        \u003coption value=\"oz\"\u003eOunce (oz)\u003c/option\u003e\n                    \u003c/select\u003e\n                \u003c/div\u003e\n            \u003c/div\u003e\n            \u003cdiv class=\"unit-result\"\u003e\n                \u003cdiv class=\"unit-result-value\" id=\"weight-result\"\u003e2.20462\u003c/div\u003e\n                \u003cdiv class=\"unit-result-unit\"\u003elb\u003c/div\u003e\n            \u003c/div\u003e\n            \u003cdiv class=\"unit-quick-inputs\" id=\"weight-quick\"\u003e\u003c/div\u003e\n            \u003cdiv class=\"unit-conversion-list\" id=\"weight-list\"\u003e\u003c/div\u003e\n        \u003c/div\u003e\n\n        \n        \u003cdiv class=\"unit-panel\" id=\"panel-temperature\"\u003e\n            \u003cdiv class=\"unit-converter-row\"\u003e\n                \u003cdiv class=\"unit-input-group\"\u003e\n                    \u003clabel class=\"unit-label\"\u003eValue\u003c/label\u003e\n                    \u003cinput type=\"number\" class=\"unit-input\" id=\"temperature-value\" placeholder=\"Enter value\" value=\"0\" /\u003e\n                \u003c/div\u003e\n                \u003cdiv class=\"unit-input-group\"\u003e\n                    \u003clabel class=\"unit-label\"\u003eFrom\u003c/label\u003e\n                    \u003cselect class=\"unit-select\" id=\"temperature-from\"\u003e\n                        \u003coption value=\"c\"\u003eCelsius (°C)\u003c/option\u003e\n                        \u003coption value=\"f\"\u003eFahrenheit (°F)\u003c/option\u003e\n                        \u003coption value=\"k\"\u003eKelvin (K)\u003c/option\u003e\n                    \u003c/select\u003e\n                \u003c/div\u003e\n                \u003cbutton class=\"unit-swap-btn\" onclick=\"unitSwap('temperature')\"\u003e\n                    \u003csvg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\u003e\u003cpath d=\"M7 16V4M7 4L3 8M7 4L11 8M17 8V20M17 20L21 16M17 20L13 16\"/\u003e\u003c/svg\u003e\n                \u003c/button\u003e\n                \u003cdiv class=\"unit-input-group\"\u003e\n                    \u003clabel class=\"unit-label\"\u003eTo\u003c/label\u003e\n                    \u003cselect class=\"unit-select\" id=\"temperature-to\"\u003e\n                        \u003coption value=\"c\" selected\u003eCelsius (°C)\u003c/option\u003e\n                        \u003coption value=\"f\"\u003eFahrenheit (°F)\u003c/option\u003e\n                        \u003coption value=\"k\"\u003eKelvin (K)\u003c/option\u003e\n                    \u003c/select\u003e\n                \u003c/div\u003e\n            \u003c/div\u003e\n            \u003cdiv class=\"unit-result\"\u003e\n                \u003cdiv class=\"unit-result-value\" id=\"temperature-result\"\u003e0\u003c/div\u003e\n                \u003cdiv class=\"unit-result-unit\"\u003e°C\u003c/div\u003e\n            \u003c/div\u003e\n            \u003cdiv class=\"unit-quick-inputs\" id=\"temperature-quick\"\u003e\u003c/div\u003e\n        \u003c/div\u003e\n\n        \n        \u003cdiv class=\"unit-panel\" id=\"panel-area\"\u003e\n            \u003cdiv class=\"unit-converter-row\"\u003e\n                \u003cdiv class=\"unit-input-group\"\u003e\n                    \u003clabel class=\"unit-label\"\u003eValue\u003c/label\u003e\n                    \u003cinput type=\"number\" class=\"unit-input\" id=\"area-value\" placeholder=\"Enter value\" value=\"1\" /\u003e\n                \u003c/div\u003e\n                \u003cdiv class=\"unit-input-group\"\u003e\n                    \u003clabel class=\"unit-label\"\u003eFrom\u003c/label\u003e\n                    \u003cselect class=\"unit-select\" id=\"area-from\"\u003e\n                        \u003coption value=\"m2\"\u003eSquare Meter (m²)\u003c/option\u003e\n                        \u003coption value=\"km2\"\u003eSquare Kilometer (km²)\u003c/option\u003e\n                        \u003coption value=\"cm2\"\u003eSquare Centimeter (cm²)\u003c/option\u003e\n                        \u003coption value=\"ha\"\u003eHectare (ha)\u003c/option\u003e\n                        \u003coption value=\"acre\"\u003eAcre\u003c/option\u003e\n                        \u003coption value=\"ft2\"\u003eSquare Foot (ft²)\u003c/option\u003e\n                    \u003c/select\u003e\n                \u003c/div\u003e\n                \u003cbutton class=\"unit-swap-btn\" onclick=\"unitSwap('area')\"\u003e\n                    \u003csvg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\u003e\u003cpath d=\"M7 16V4M7 4L3 8M7 4L11 8M17 8V20M17 20L21 16M17 20L13 16\"/\u003e\u003c/svg\u003e\n                \u003c/button\u003e\n                \u003cdiv class=\"unit-input-group\"\u003e\n                    \u003clabel class=\"unit-label\"\u003eTo\u003c/label\u003e\n                    \u003cselect class=\"unit-select\" id=\"area-to\"\u003e\n                        \u003coption value=\"m2\"\u003eSquare Meter (m²)\u003c/option\u003e\n                        \u003coption value=\"km2\" selected\u003eSquare Kilometer (km²)\u003c/option\u003e\n                        \u003coption value=\"cm2\"\u003eSquare Centimeter (cm²)\u003c/option\u003e\n                        \u003coption value=\"ha\"\u003eHectare (ha)\u003c/option\u003e\n                        \u003coption value=\"acre\"\u003eAcre\u003c/option\u003e\n                        \u003coption value=\"ft2\"\u003eSquare Foot (ft²)\u003c/option\u003e\n                    \u003c/select\u003e\n                \u003c/div\u003e\n            \u003c/div\u003e\n            \u003cdiv class=\"unit-result\"\u003e\n                \u003cdiv class=\"unit-result-value\" id=\"area-result\"\u003e0.000001\u003c/div\u003e\n                \u003cdiv class=\"unit-result-unit\"\u003ekm²\u003c/div\u003e\n            \u003c/div\u003e\n            \u003cdiv class=\"unit-quick-inputs\" id=\"area-quick\"\u003e\u003c/div\u003e\n            \u003cdiv class=\"unit-conversion-list\" id=\"area-list\"\u003e\u003c/div\u003e\n        \u003c/div\u003e\n\n        \n        \u003cdiv class=\"unit-panel\" id=\"panel-volume\"\u003e\n            \u003cdiv class=\"unit-converter-row\"\u003e\n                \u003cdiv class=\"unit-input-group\"\u003e\n                    \u003clabel class=\"unit-label\"\u003eValue\u003c/label\u003e\n                    \u003cinput type=\"number\" class=\"unit-input\" id=\"volume-value\" placeholder=\"Enter value\" value=\"1\" /\u003e\n                \u003c/div\u003e\n                \u003cdiv class=\"unit-input-group\"\u003e\n                    \u003clabel class=\"unit-label\"\u003eFrom\u003c/label\u003e\n                    \u003cselect class=\"unit-select\" id=\"volume-from\"\u003e\n                        \u003coption value=\"l\"\u003eLiter (L)\u003c/option\u003e\n                        \u003coption value=\"ml\"\u003eMilliliter (mL)\u003c/option\u003e\n                        \u003coption value=\"m3\"\u003eCubic Meter (m³)\u003c/option\u003e\n                        \u003coption value=\"gal\"\u003eGallon\u003c/option\u003e\n                        \u003coption value=\"qt\"\u003eQuart\u003c/option\u003e\n                        \u003coption value=\"pt\"\u003ePint\u003c/option\u003e\n                    \u003c/select\u003e\n                \u003c/div\u003e\n                \u003cbutton class=\"unit-swap-btn\" onclick=\"unitSwap('volume')\"\u003e\n                    \u003csvg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\u003e\u003cpath d=\"M7 16V4M7 4L3 8M7 4L11 8M17 8V20M17 20L21 16M17 20L13 16\"/\u003e\u003c/svg\u003e\n                \u003c/button\u003e\n                \u003cdiv class=\"unit-input-group\"\u003e\n                    \u003clabel class=\"unit-label\"\u003eTo\u003c/label\u003e\n                    \u003cselect class=\"unit-select\" id=\"volume-to\"\u003e\n                        \u003coption value=\"l\" selected\u003eLiter (L)\u003c/option\u003e\n                        \u003coption value=\"ml\"\u003eMilliliter (mL)\u003c/option\u003e\n                        \u003coption value=\"m3\"\u003eCubic Meter (m³)\u003c/option\u003e\n                        \u003coption value=\"gal\"\u003eGallon\u003c/option\u003e\n                        \u003coption value=\"qt\"\u003eQuart\u003c/option\u003e\n                        \u003coption value=\"pt\"\u003ePint\u003c/option\u003e\n                    \u003c/select\u003e\n                \u003c/div\u003e\n            \u003c/div\u003e\n            \u003cdiv class=\"unit-result\"\u003e\n                \u003cdiv class=\"unit-result-value\" id=\"volume-result\"\u003e1\u003c/div\u003e\n                \u003cdiv class=\"unit-result-unit\"\u003eL\u003c/div\u003e\n            \u003c/div\u003e\n            \u003cdiv class=\"unit-quick-inputs\" id=\"volume-quick\"\u003e\u003c/div\u003e\n            \u003cdiv class=\"unit-conversion-list\" id=\"volume-list\"\u003e\u003c/div\u003e\n        \u003c/div\u003e\n\n        \n        \u003cdiv class=\"unit-panel\" id=\"panel-data\"\u003e\n            \u003cdiv class=\"unit-converter-row\"\u003e\n                \u003cdiv class=\"unit-input-group\"\u003e\n                    \u003clabel class=\"unit-label\"\u003eValue\u003c/label\u003e\n                    \u003cinput type=\"number\" class=\"unit-input\" id=\"data-value\" placeholder=\"Enter value\" value=\"1\" /\u003e\n                \u003c/div\u003e\n                \u003cdiv class=\"unit-input-group\"\u003e\n                    \u003clabel class=\"unit-label\"\u003eFrom\u003c/label\u003e\n                    \u003cselect class=\"unit-select\" id=\"data-from\"\u003e\n                        \u003coption value=\"b\"\u003eByte (B)\u003c/option\u003e\n                        \u003coption value=\"kb\"\u003eKilobyte (KB)\u003c/option\u003e\n                        \u003coption value=\"mb\"\u003eMegabyte (MB)\u003c/option\u003e\n                        \u003coption value=\"gb\"\u003eGigabyte (GB)\u003c/option\u003e\n                        \u003coption value=\"tb\"\u003eTerabyte (TB)\u003c/option\u003e\n                    \u003c/select\u003e\n                \u003c/div\u003e\n                \u003cbutton class=\"unit-swap-btn\" onclick=\"unitSwap('data')\"\u003e\n                    \u003csvg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\u003e\u003cpath d=\"M7 16V4M7 4L3 8M7 4L11 8M17 8V20M17 20L21 16M17 20L13 16\"/\u003e\u003c/svg\u003e\n                \u003c/button\u003e\n                \u003cdiv class=\"unit-input-group\"\u003e\n                    \u003clabel class=\"unit-label\"\u003eTo\u003c/label\u003e\n                    \u003cselect class=\"unit-select\" id=\"data-to\"\u003e\n                        \u003coption value=\"b\"\u003eByte (B)\u003c/option\u003e\n                        \u003coption value=\"kb\"\u003eKilobyte (KB)\u003c/option\u003e\n                        \u003coption value=\"mb\" selected\u003eMegabyte (MB)\u003c/option\u003e\n                        \u003coption value=\"gb\"\u003eGigabyte (GB)\u003c/option\u003e\n                        \u003coption value=\"tb\"\u003eTerabyte (TB)\u003c/option\u003e\n                    \u003c/select\u003e\n                \u003c/div\u003e\n            \u003c/div\u003e\n            \u003cdiv class=\"unit-result\"\u003e\n                \u003cdiv class=\"unit-result-value\" id=\"data-result\"\u003e0.0009765625\u003c/div\u003e\n                \u003cdiv class=\"unit-result-unit\"\u003eMB\u003c/div\u003e\n            \u003c/div\u003e\n            \u003cdiv class=\"unit-quick-inputs\" id=\"data-quick\"\u003e\u003c/div\u003e\n            \u003cdiv class=\"unit-conversion-list\" id=\"data-list\"\u003e\u003c/div\u003e\n        \u003c/div\u003e\n    \u003c/div\u003e\n\n    \u003cscript\u003e\n        (function() {\n            \n            const units = {\n                length: {\n                    m: 1, km: 1000, cm: 0.01, mm: 0.001,\n                    mi: 1609.344, yd: 0.9144, ft: 0.3048, in: 0.0254\n                },\n                weight: {\n                    kg: 1, g: 0.001, mg: 0.000001, t: 1000,\n                    lb: 0.453592, oz: 0.0283495\n                },\n                area: {\n                    'm2': 1, 'km2': 1000000, 'cm2': 0.0001, 'ha': 10000,\n                    'acre': 4046.86, 'ft2': 0.092903\n                },\n                volume: {\n                    l: 1, ml: 0.001, m3: 1000, gal: 3.78541,\n                    qt: 0.946353, pt: 0.473176\n                },\n                data: {\n                    b: 1, kb: 1024, mb: 1048576, gb: 1073741824, tb: 1099511627776\n                }\n            };\n\n            \n            const labels = {\n                length: { m: 'm', km: 'km', cm: 'cm', mm: 'mm', mi: 'mi', yd: 'yd', ft: 'ft', in: 'in' },\n                weight: { kg: 'kg', g: 'g', mg: 'mg', t: 't', lb: 'lb', oz: 'oz' },\n                area: { 'm2': 'm²', 'km2': 'km²', 'cm2': 'cm²', 'ha': 'ha', 'acre': 'acre', 'ft2': 'ft²' },\n                volume: { l: 'L', ml: 'mL', m3: 'm³', gal: 'gal', qt: 'qt', pt: 'pt' },\n                data: { b: 'B', kb: 'KB', mb: 'MB', gb: 'GB', tb: 'TB' }\n            };\n            const tempLabels = { c: '°C', f: '°F', k: 'K' };\n\n            \n            const quickButtons = {\n                length: [\n                    { label: '1m', value: 1 },\n                    { label: '1000m', value: 1000 },\n                    { label: '1ft', value: 0.3048 },\n                    { label: '1mi', value: 1.60934 }\n                ],\n                weight: [\n                    { label: '1kg', value: 1 },\n                    { label: '1000g', value: 1000 },\n                    { label: '1lb', value: 0.453592 }\n                ],\n                temperature: [\n                    { label: '0°C (Freezing)', value: 0 },\n                    { label: '100°C (Boiling)', value: 100 },\n                    { label: '37°C (Body Temp)', value: 37 }\n                ],\n                area: [\n                    { label: '1m²', value: 1 },\n                    { label: '1ha', value: 10000 },\n                    { label: '1acre', value: 4046.86 }\n                ],\n                volume: [\n                    { label: '1L', value: 1 },\n                    { label: '1gal', value: 3.78541 },\n                    { label: '1m³', value: 1000 }\n                ],\n                data: [\n                    { label: '1KB', value: 1024 },\n                    { label: '1MB', value: 1048576 },\n                    { label: '1GB', value: 1073741824 }\n                ]\n            };\n\n            \n            function generateQuickButtons() {\n                Object.keys(quickButtons).forEach(type =\u003e {\n                    const container = document.getElementById(`${type}-quick`);\n                    if (!container) return;\n                    container.innerHTML = quickButtons[type].map(btn =\u003e\n                        `\u003cbutton class=\"unit-quick-btn\" onclick=\"unitQuick('${type}', ${btn.value})\"\u003e${btn.label}\u003c/button\u003e`\n                    ).join('');\n                });\n            }\n\n            \n            function generateConversionList(type) {\n                const container = document.getElementById(`${type}-list`);\n                if (!container) return;\n\n                const fromSelect = document.getElementById(`${type}-from`);\n                const valueInput = document.getElementById(`${type}-value`);\n                const value = parseFloat(valueInput.value) || 1;\n                const from = fromSelect.value;\n                const baseValue = value * units[type][from];\n\n                const listTitle = container.previousElementSibling?.classList.contains('unit-quick-inputs')\n                    ? 'All Conversions' : 'All Conversions';\n\n                let html = `\u003cdiv class=\"unit-conversion-title\"\u003e${listTitle}\u003c/div\u003e`;\n                Object.keys(units[type]).forEach(unit =\u003e {\n                    if (unit === from) return;\n                    const result = baseValue / units[type][unit];\n                    html += `\u003cdiv class=\"unit-conversion-item\"\u003e\n                        \u003cspan\u003e${labels[type][unit]}\u003c/span\u003e\n                        \u003cspan\u003e${formatNumber(result)}\u003c/span\u003e\n                    \u003c/div\u003e`;\n                });\n                container.innerHTML = html;\n            }\n\n            \n            function convert(type, value, from, to) {\n                if (type === 'temperature') {\n                    let celsius;\n                    if (from === 'c') celsius = value;\n                    else if (from === 'f') celsius = (value - 32) * 5 / 9;\n                    else celsius = value - 273.15;\n                    if (to === 'c') return celsius;\n                    else if (to === 'f') return celsius * 9 / 5 + 32;\n                    else return celsius + 273.15;\n                }\n                const baseValue = value * units[type][from];\n                return baseValue / units[type][to];\n            }\n\n            \n            function formatNumber(num) {\n                if (Math.abs(num) \u003c 0.000001 \u0026\u0026 num !== 0) {\n                    return num.toExponential(4);\n                }\n                if (Math.abs(num) \u003e= 1000000000) {\n                    return num.toExponential(4);\n                }\n                return parseFloat(num.toPrecision(10)).toString();\n            }\n\n            \n            function updateResult(type) {\n                const valueInput = document.getElementById(`${type}-value`);\n                const fromSelect = document.getElementById(`${type}-from`);\n                const toSelect = document.getElementById(`${type}-to`);\n                const resultDiv = document.getElementById(`${type}-result`);\n                const unitDiv = resultDiv.nextElementSibling;\n\n                const value = parseFloat(valueInput.value) || 0;\n                const from = fromSelect.value;\n                const to = toSelect.value;\n\n                const result = convert(type, value, from, to);\n                resultDiv.textContent = formatNumber(result);\n\n                if (type === 'temperature') {\n                    unitDiv.textContent = tempLabels[to];\n                } else {\n                    unitDiv.textContent = labels[type][to];\n                    generateConversionList(type);\n                }\n            }\n\n            \n            window.unitSwap = function(type) {\n                const fromSelect = document.getElementById(`${type}-from`);\n                const toSelect = document.getElementById(`${type}-to`);\n                const temp = fromSelect.value;\n                fromSelect.value = toSelect.value;\n                toSelect.value = temp;\n                updateResult(type);\n            };\n\n            \n            window.unitQuick = function(type, value) {\n                const input = document.getElementById(`${type}-value`);\n                input.value = value;\n                updateResult(type);\n            };\n\n            \n            document.querySelectorAll('.unit-tab').forEach(tab =\u003e {\n                tab.addEventListener('click', () =\u003e {\n                    document.querySelectorAll('.unit-tab').forEach(t =\u003e t.classList.remove('active'));\n                    document.querySelectorAll('.unit-panel').forEach(p =\u003e p.classList.remove('active'));\n                    tab.classList.add('active');\n                    document.getElementById(`panel-${tab.dataset.tab}`).classList.add('active');\n                });\n            });\n\n            \n            ['length', 'weight', 'temperature', 'area', 'volume', 'data'].forEach(type =\u003e {\n                const valueInput = document.getElementById(`${type}-value`);\n                const fromSelect = document.getElementById(`${type}-from`);\n                const toSelect = document.getElementById(`${type}-to`);\n\n                valueInput.addEventListener('input', () =\u003e updateResult(type));\n                fromSelect.addEventListener('change', () =\u003e updateResult(type));\n                toSelect.addEventListener('change', () =\u003e updateResult(type));\n            });\n\n            \n            generateQuickButtons();\n            ['length', 'weight', 'area', 'volume', 'data'].forEach(type =\u003e generateConversionList(type));\n            ['length', 'weight', 'temperature', 'area', 'volume', 'data'].forEach(updateResult);\n        })();\n    \u003c/script\u003e\n\u003c/div\u003e\n\u003ch3 id=\"what-is-unit-converter\"\u003eWhat is Unit Converter?\u003c/h3\u003e\n\u003cp\u003eUnit Converter is a free online tool that helps you quickly convert values between different unit systems. Whether it\u0026rsquo;s length measurements in daily life, ingredient weights for cooking, or area and volume calculations for professional work, this tool handles it all with ease.\u003c/p\u003e","title":"Online Unit Converter - Length Weight Temperature Area"},{"content":" 文本对比工具 0 行增加 0 行删除 原始文本 修改后文本 忽略大小写 忽略空白符 显示行号 对比 交换 清空 对比结果 请输入两段文本进行对比 增加 删除 What is Text Diff Tool? Text Diff Tool is a free online tool for comparing the differences between two texts and displaying changes in an intuitive way with highlighting. It uses the LCS (Longest Common Subsequence) algorithm to accurately identify added, deleted, and modified lines.\nWhether it\u0026rsquo;s code review, document comparison, or copy editing, this tool helps you quickly spot differences and save time.\nHow to Use This Tool? Enter Text: Enter or paste the text to compare in the left and right text boxes. Select Options: Check \u0026ldquo;Ignore Case\u0026rdquo; or \u0026ldquo;Ignore Whitespace\u0026rdquo; as needed. View Results: The diff results display in real-time in the comparison area below. Show Line Numbers: Enable the \u0026ldquo;Show Line Numbers\u0026rdquo; option to easily locate differences. Key Features Highlighting: Green highlights added lines, red highlights deleted lines LCS Algorithm: Uses Longest Common Subsequence for accurate diff detection Ignore Options: Supports ignoring case and whitespace Line Numbers: Optional display of line numbers for easy navigation Client-side Processing: Data stays on your device, protecting your privacy Diff Result Legend Color Meaning Description Green Added Lines in right text but not in left Red Deleted Lines in left text but not in right None Unchanged Lines that are the same, no action needed Use Cases Code Review: Compare code changes, quickly find modifications Document Comparison: Compare two versions of documents Copy Editing: Check changes before and after text editing Config Comparison: Compare differences in configuration files Data Verification: Quickly find changes in data tables Frequently Asked Questions (FAQ) Is this tool safe? Absolutely safe. This tool runs entirely in your browser (client-side processing). Your text is not uploaded to any server.\nHow large text can it handle? Browsers have limitations on the size of text that can be processed at once. It is recommended to keep text under 1MB (about 1 million characters) per comparison. For larger text, consider processing in batches.\nHow do I find the exact location of changes? Enable the \u0026ldquo;Show Line Numbers\u0026rdquo; option, then use line numbers to quickly locate where the differences are. Different lines are highlighted in color for easy identification.\nWhat\u0026rsquo;s the difference between Ignore Case and Ignore Whitespace? Ignore Case: Converts all letters to the same case for comparison. For example, \u0026ldquo;ABC\u0026rdquo; and \u0026ldquo;abc\u0026rdquo; are treated as identical. Ignore Whitespace: Ignores whitespace differences in text. For example, \u0026ldquo;hello world\u0026rdquo; and \u0026ldquo;hello world\u0026rdquo; are treated as identical. You can enable both options simultaneously for more flexible comparison results.\n","permalink":"https://www.webpenson.com/en/tools/diff-checker/","summary":"\u003c!-- 1. SEO 结构化数据 (Schema.org) --\u003e\n\u003cscript type=\"application/ld+json\"\u003e\n{\n  \"@context\": \"https://schema.org\",\n  \"@type\": \"SoftwareApplication\",\n  \"name\": \"Online Text Diff Tool\",\n  \"applicationCategory\": \"DeveloperApplication\",\n  \"operatingSystem\": \"Web\",\n  \"offers\": {\n    \"@type\": \"Offer\",\n    \"price\": \"0\",\n    \"priceCurrency\": \"USD\"\n  },\n  \"description\": \"Free online text diff tool with LCS algorithm. Highlights added and deleted lines. Perfect for code review and text comparison.\"\n}\n\u003c/script\u003e\n\u003c!-- 2. 调用 Shortcode (工具核心) --\u003e\n\n\u003cdiv class=\"diff-checker-tool\"\u003e\n    \u003cstyle\u003e\n        .diff-checker-tool {\n            --primary-color: #2563eb;\n            --primary-hover: #1d4ed8;\n            --bg-color: #f8fafc;\n            --card-bg: #ffffff;\n            --text-main: #1e293b;\n            --text-muted: #64748b;\n            --border-color: #e2e8f0;\n            --radius: 12px;\n            --shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);\n            --add-bg: #dcfce7;\n            --add-text: #166534;\n            --add-line-bg: #f0fdf4;\n            --del-bg: #fee2e2;\n            --del-text: #991b1b;\n            --del-line-bg: #fef2f2;\n            --diff-line-bg: #f1f5f9;\n            --diff-line-text: #475569;\n        }\n\n        [data-theme=\"dark\"] .diff-checker-tool {\n            --bg-color: #0f172a;\n            --card-bg: #1e293b;\n            --text-main: #e2e8f0;\n            --text-muted: #94a3b8;\n            --border-color: #334155;\n            --add-bg: #14532d;\n            --add-text: #86efac;\n            --add-line-bg: #052e16;\n            --del-bg: #7f1d1d;\n            --del-text: #fca5a5;\n            --del-line-bg: #1c0b0b;\n            --diff-line-bg: #1e293b;\n            --diff-line-text: #94a3b8;\n        }\n\n        .diff-checker-tool * {\n            box-sizing: border-box;\n            margin: 0;\n            padding: 0;\n        }\n\n        .diff-checker-tool {\n            font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\n            background-color: var(--bg-color);\n            color: var(--text-main);\n            line-height: 1.6;\n            margin: 20px 0;\n        }\n\n        .diff-container {\n            max-width: 100%;\n            margin: 0;\n            padding: 24px;\n            background: var(--card-bg);\n            border-radius: var(--radius);\n            box-shadow: var(--shadow);\n        }\n\n        .diff-header {\n            display: flex;\n            align-items: center;\n            justify-content: space-between;\n            margin-bottom: 20px;\n            flex-wrap: wrap;\n            gap: 12px;\n        }\n\n        .diff-title {\n            font-size: 18px;\n            font-weight: 600;\n            color: var(--text-main);\n        }\n\n        .diff-stats {\n            display: flex;\n            gap: 16px;\n            font-size: 14px;\n        }\n\n        .diff-stat {\n            display: flex;\n            align-items: center;\n            gap: 6px;\n        }\n\n        .diff-stat-add {\n            color: var(--add-text);\n        }\n\n        .diff-stat-del {\n            color: var(--del-text);\n        }\n\n        .diff-stat-chg {\n            color: var(--text-muted);\n        }\n\n        .diff-inputs {\n            display: grid;\n            grid-template-columns: 1fr 1fr;\n            gap: 16px;\n            margin-bottom: 16px;\n        }\n\n        @media (max-width: 768px) {\n            .diff-inputs {\n                grid-template-columns: 1fr;\n            }\n        }\n\n        .diff-input-group {\n            display: flex;\n            flex-direction: column;\n            gap: 8px;\n        }\n\n        .diff-label {\n            font-size: 14px;\n            font-weight: 500;\n            color: var(--text-main);\n        }\n\n        .diff-textarea {\n            width: 100%;\n            min-height: 150px;\n            padding: 12px;\n            border: 1px solid var(--border-color);\n            border-radius: 8px;\n            background: var(--bg-color);\n            color: var(--text-main);\n            font-family: \"Consolas\", \"Monaco\", monospace;\n            font-size: 13px;\n            line-height: 1.5;\n            resize: vertical;\n            transition: border-color 0.2s;\n        }\n\n        .diff-textarea:focus {\n            outline: none;\n            border-color: var(--primary-color);\n        }\n\n        .diff-buttons {\n            display: flex;\n            gap: 12px;\n            margin-bottom: 16px;\n            flex-wrap: wrap;\n        }\n\n        .diff-btn {\n            padding: 10px 20px;\n            border: none;\n            border-radius: 8px;\n            font-size: 14px;\n            font-weight: 500;\n            cursor: pointer;\n            transition: all 0.2s;\n        }\n\n        .diff-btn-primary {\n            background: var(--primary-color);\n            color: white;\n        }\n\n        .diff-btn-primary:hover {\n            background: var(--primary-hover);\n        }\n\n        .diff-btn-secondary {\n            background: var(--border-color);\n            color: var(--text-main);\n        }\n\n        .diff-btn-secondary:hover {\n            background: var(--text-muted);\n            color: white;\n        }\n\n        .diff-options {\n            display: flex;\n            gap: 16px;\n            margin-bottom: 16px;\n            flex-wrap: wrap;\n        }\n\n        .diff-option {\n            display: flex;\n            align-items: center;\n            gap: 6px;\n            font-size: 14px;\n            color: var(--text-muted);\n        }\n\n        .diff-option input {\n            cursor: pointer;\n        }\n\n        .diff-output {\n            border: 1px solid var(--border-color);\n            border-radius: 8px;\n            overflow: hidden;\n        }\n\n        .diff-output-header {\n            padding: 12px 16px;\n            background: var(--diff-line-bg);\n            border-bottom: 1px solid var(--border-color);\n            font-size: 13px;\n            color: var(--diff-line-text);\n            font-weight: 500;\n        }\n\n        .diff-output-content {\n            max-height: 400px;\n            overflow-y: auto;\n            font-family: \"Consolas\", \"Monaco\", monospace;\n            font-size: 13px;\n            line-height: 1.6;\n        }\n\n        .diff-line {\n            display: flex;\n            padding: 2px 16px;\n            border-bottom: 1px solid var(--border-color);\n        }\n\n        .diff-line:last-child {\n            border-bottom: none;\n        }\n\n        .diff-line-add {\n            background: var(--add-line-bg);\n        }\n\n        .diff-line-del {\n            background: var(--del-line-bg);\n        }\n\n        .diff-line-num {\n            min-width: 40px;\n            padding-right: 12px;\n            color: var(--text-muted);\n            user-select: none;\n            text-align: right;\n        }\n\n        .diff-line-marker {\n            min-width: 24px;\n            padding-right: 8px;\n            font-weight: 600;\n        }\n\n        .diff-line-add .diff-line-marker {\n            color: var(--add-text);\n        }\n\n        .diff-line-del .diff-line-marker {\n            color: var(--del-text);\n        }\n\n        .diff-line-content {\n            flex: 1;\n            white-space: pre-wrap;\n            word-break: break-all;\n        }\n\n        .diff-empty {\n            padding: 40px;\n            text-align: center;\n            color: var(--text-muted);\n        }\n\n        .diff-legend {\n            display: flex;\n            gap: 24px;\n            margin-top: 12px;\n            padding-top: 12px;\n            border-top: 1px solid var(--border-color);\n            font-size: 12px;\n            color: var(--text-muted);\n        }\n\n        .diff-legend-item {\n            display: flex;\n            align-items: center;\n            gap: 6px;\n        }\n\n        .diff-legend-add {\n            width: 16px;\n            height: 16px;\n            background: var(--add-bg);\n            border-radius: 4px;\n        }\n\n        .diff-legend-del {\n            width: 16px;\n            height: 16px;\n            background: var(--del-bg);\n            border-radius: 4px;\n        }\n    \u003c/style\u003e\n\n    \u003cdiv class=\"diff-container\"\u003e\n        \u003cdiv class=\"diff-header\"\u003e\n            \u003cspan class=\"diff-title\" data-i18n=\"diff_title\"\u003e文本对比工具\u003c/span\u003e\n            \u003cdiv class=\"diff-stats\"\u003e\n                \u003cspan class=\"diff-stat diff-stat-add\"\u003e\n                    \u003cspan id=\"diff-add-count\"\u003e0\u003c/span\u003e \u003cspan data-i18n=\"diff_added\"\u003e行增加\u003c/span\u003e\n                \u003c/span\u003e\n                \u003cspan class=\"diff-stat diff-stat-del\"\u003e\n                    \u003cspan id=\"diff-del-count\"\u003e0\u003c/span\u003e \u003cspan data-i18n=\"diff_removed\"\u003e行删除\u003c/span\u003e\n                \u003c/span\u003e\n            \u003c/div\u003e\n        \u003c/div\u003e\n\n        \u003cdiv class=\"diff-inputs\"\u003e\n            \u003cdiv class=\"diff-input-group\"\u003e\n                \u003clabel class=\"diff-label\" data-i18n=\"diff_original_text\"\u003e原始文本\u003c/label\u003e\n                \u003ctextarea id=\"diff-original\" class=\"diff-textarea\" \n                    placeholder=\"在此粘贴原始文本...\"\n                    data-i18n-placeholder=\"diff_original_placeholder\"\u003e\u003c/textarea\u003e\n            \u003c/div\u003e\n            \u003cdiv class=\"diff-input-group\"\u003e\n                \u003clabel class=\"diff-label\" data-i18n=\"diff_modified_text\"\u003e修改后文本\u003c/label\u003e\n                \u003ctextarea id=\"diff-modified\" class=\"diff-textarea\"\n                    placeholder=\"在此粘贴修改后文本...\"\n                    data-i18n-placeholder=\"diff_modified_placeholder\"\u003e\u003c/textarea\u003e\n            \u003c/div\u003e\n        \u003c/div\u003e\n\n        \u003cdiv class=\"diff-options\"\u003e\n            \u003clabel class=\"diff-option\"\u003e\n                \u003cinput type=\"checkbox\" id=\"diff-ignore-case\" /\u003e\n                \u003cspan data-i18n=\"diff_ignore_case\"\u003e忽略大小写\u003c/span\u003e\n            \u003c/label\u003e\n            \u003clabel class=\"diff-option\"\u003e\n                \u003cinput type=\"checkbox\" id=\"diff-ignore-whitespace\" /\u003e\n                \u003cspan data-i18n=\"diff_ignore_whitespace\"\u003e忽略空白符\u003c/span\u003e\n            \u003c/label\u003e\n            \u003clabel class=\"diff-option\"\u003e\n                \u003cinput type=\"checkbox\" id=\"diff-show-inline\" checked /\u003e\n                \u003cspan data-i18n=\"diff_inline\"\u003e显示行号\u003c/span\u003e\n            \u003c/label\u003e\n        \u003c/div\u003e\n\n        \u003cdiv class=\"diff-buttons\"\u003e\n            \u003cbutton class=\"diff-btn diff-btn-primary\" id=\"diff-compare-btn\" data-i18n=\"diff_compare\"\u003e对比\u003c/button\u003e\n            \u003cbutton class=\"diff-btn diff-btn-secondary\" id=\"diff-swap-btn\" data-i18n=\"diff_swap\"\u003e交换\u003c/button\u003e\n            \u003cbutton class=\"diff-btn diff-btn-secondary\" id=\"diff-clear-btn\" data-i18n=\"diff_clear\"\u003e清空\u003c/button\u003e\n        \u003c/div\u003e\n\n        \u003cdiv class=\"diff-output\"\u003e\n            \u003cdiv class=\"diff-output-header\" data-i18n=\"diff_result\"\u003e对比结果\u003c/div\u003e\n            \u003cdiv class=\"diff-output-content\" id=\"diff-result\"\u003e\n                \u003cdiv class=\"diff-empty\" data-i18n=\"diff_enter_text\"\u003e请输入两段文本进行对比\u003c/div\u003e\n            \u003c/div\u003e\n        \u003c/div\u003e\n\n        \u003cdiv class=\"diff-legend\"\u003e\n            \u003cdiv class=\"diff-legend-item\"\u003e\n                \u003cdiv class=\"diff-legend-add\"\u003e\u003c/div\u003e\n                \u003cspan data-i18n=\"diff_legend_add\"\u003e增加\u003c/span\u003e\n            \u003c/div\u003e\n            \u003cdiv class=\"diff-legend-item\"\u003e\n                \u003cdiv class=\"diff-legend-del\"\u003e\u003c/div\u003e\n                \u003cspan data-i18n=\"diff_legend_del\"\u003e删除\u003c/span\u003e\n            \u003c/div\u003e\n        \u003c/div\u003e\n    \u003c/div\u003e\n\n    \u003cscript\u003e\n        (function() {\n            \n            const translations = {\n                zh: {\n                    diff_title: '文本对比工具',\n                    diff_added: '行增加',\n                    diff_removed: '行删除',\n                    diff_original_text: '原始文本',\n                    diff_modified_text: '修改后文本',\n                    diff_original_placeholder: '在此粘贴原始文本...',\n                    diff_modified_placeholder: '在此粘贴修改后文本...',\n                    diff_ignore_case: '忽略大小写',\n                    diff_ignore_whitespace: '忽略空白符',\n                    diff_inline: '显示行号',\n                    diff_compare: '对比',\n                    diff_swap: '交换',\n                    diff_clear: '清空',\n                    diff_result: '对比结果',\n                    diff_enter_text: '请输入两段文本进行对比',\n                    diff_legend_add: '增加',\n                    diff_legend_del: '删除',\n                    diff_no_changes: '两段文本完全相同',\n                    diff_lines: '行'\n                },\n                en: {\n                    diff_title: 'Text Diff Tool',\n                    diff_added: 'added',\n                    diff_removed: 'removed',\n                    diff_original_text: 'Original Text',\n                    diff_modified_text: 'Modified Text',\n                    diff_original_placeholder: 'Paste original text here...',\n                    diff_modified_placeholder: 'Paste modified text here...',\n                    diff_ignore_case: 'Ignore Case',\n                    diff_ignore_whitespace: 'Ignore Whitespace',\n                    diff_inline: 'Show Line Numbers',\n                    diff_compare: 'Compare',\n                    diff_swap: 'Swap',\n                    diff_clear: 'Clear',\n                    diff_result: 'Comparison Result',\n                    diff_enter_text: 'Enter two texts to compare',\n                    diff_legend_add: 'Added',\n                    diff_legend_del: 'Removed',\n                    diff_no_changes: 'Texts are identical',\n                    diff_lines: 'lines'\n                }\n            };\n\n            const lang = document.documentElement.lang || 'zh';\n            const t = translations[lang] || translations.zh;\n\n            \n            document.querySelectorAll('[data-i18n]').forEach(el =\u003e {\n                const key = el.getAttribute('data-i18n');\n                if (t[key]) el.textContent = t[key];\n            });\n\n            document.querySelectorAll('[data-i18n-placeholder]').forEach(el =\u003e {\n                const key = el.getAttribute('data-i18n-placeholder');\n                if (t[key]) el.placeholder = t[key];\n});\n\n            \n            const originalTextarea = document.getElementById('diff-original');\n            const modifiedTextarea = document.getElementById('diff-modified');\n            const compareBtn = document.getElementById('diff-compare-btn');\n            const swapBtn = document.getElementById('diff-swap-btn');\n            const clearBtn = document.getElementById('diff-clear-btn');\n            const resultDiv = document.getElementById('diff-result');\n            const addCount = document.getElementById('diff-add-count');\n            const delCount = document.getElementById('diff-del-count');\n            const ignoreCase = document.getElementById('diff-ignore-case');\n            const ignoreWhitespace = document.getElementById('diff-ignore-whitespace');\n            const showInline = document.getElementById('diff-show-inline');\n\n            \n            function computeDiff(original, modified, options) {\n                const origLines = original.split('\\n');\n                const modLines = modified.split('\\n');\n\n                \n                const m = origLines.length;\n                const n = modLines.length;\n                const dp = Array(m + 1).fill(null).map(() =\u003e Array(n + 1).fill(0));\n\n                for (let i = 1; i \u003c= m; i++) {\n                    for (let j = 1; j \u003c= n; j++) {\n                        if (origLines[i - 1] === modLines[j - 1]) {\n                            dp[i][j] = dp[i - 1][j - 1] + 1;\n                        } else {\n                            dp[i][j] = Math.max(dp[i - 1][j], dp[i][j - 1]);\n                        }\n                    }\n                }\n\n                \n                const diff = [];\n                let i = m, j = n;\n                while (i \u003e 0 || j \u003e 0) {\n                    if (i \u003e 0 \u0026\u0026 j \u003e 0 \u0026\u0026 origLines[i - 1] === modLines[j - 1]) {\n                        diff.unshift({ type: 'same', origLine: i, modLine: j, content: origLines[i - 1] });\n                        i--; j--;\n                    } else if (j \u003e 0 \u0026\u0026 (i === 0 || dp[i][j - 1] \u003e= dp[i - 1][j])) {\n                        diff.unshift({ type: 'add', modLine: j, content: modLines[j - 1] });\n                        j--;\n                    } else {\n                        diff.unshift({ type: 'del', origLine: i, content: origLines[i - 1] });\n                        i--;\n                    }\n                }\n\n                return diff;\n            }\n\n            function applyOptions(text, options) {\n                if (options.ignoreCase) text = text.toLowerCase();\n                if (options.ignoreWhitespace) text = text.replace(/\\s+/g, ' ');\n                return text;\n            }\n\n            function renderDiff(diff, showLineNumbers) {\n                if (diff.length === 0) {\n                    return `\u003cdiv class=\"diff-empty\"\u003e${t.diff_enter_text}\u003c/div\u003e`;\n                }\n\n                let addCountVal = 0;\n                let delCountVal = 0;\n                let html = '';\n\n                diff.forEach(item =\u003e {\n                    if (item.type === 'same') {\n                        const lineNum = showLineNumbers ? `\u003cspan class=\"diff-line-num\"\u003e${item.origLine}\u003c/span\u003e` : '';\n                        html += `\u003cdiv class=\"diff-line\"\u003e\n                            ${lineNum}\n                            \u003cspan class=\"diff-line-marker\"\u003e\u0026nbsp;\u003c/span\u003e\n                            \u003cspan class=\"diff-line-content\"\u003e${escapeHtml(item.content)}\u003c/span\u003e\n                        \u003c/div\u003e`;\n                    } else if (item.type === 'add') {\n                        addCountVal++;\n                        const lineNum = showLineNumbers ? `\u003cspan class=\"diff-line-num\"\u003e${item.modLine}\u003c/span\u003e` : '';\n                        html += `\u003cdiv class=\"diff-line diff-line-add\"\u003e\n                            ${lineNum}\n                            \u003cspan class=\"diff-line-marker\"\u003e+\u003c/span\u003e\n                            \u003cspan class=\"diff-line-content\"\u003e${escapeHtml(item.content)}\u003c/span\u003e\n                        \u003c/div\u003e`;\n                    } else if (item.type === 'del') {\n                        delCountVal++;\n                        const lineNum = showLineNumbers ? `\u003cspan class=\"diff-line-num\"\u003e${item.origLine}\u003c/span\u003e` : '';\n                        html += `\u003cdiv class=\"diff-line diff-line-del\"\u003e\n                            ${lineNum}\n                            \u003cspan class=\"diff-line-marker\"\u003e-\u003c/span\u003e\n                            \u003cspan class=\"diff-line-content\"\u003e${escapeHtml(item.content)}\u003c/span\u003e\n                        \u003c/div\u003e`;\n                    }\n                });\n\n                addCount.textContent = addCountVal;\n                delCount.textContent = delCountVal;\n\n                return html;\n            }\n\n            function escapeHtml(text) {\n                const div = document.createElement('div');\n                div.textContent = text;\n                return div.innerHTML;\n            }\n\n            function compare() {\n                const original = originalTextarea.value;\n                const modified = modifiedTextarea.value;\n\n                if (!original.trim() \u0026\u0026 !modified.trim()) {\n                    resultDiv.innerHTML = `\u003cdiv class=\"diff-empty\"\u003e${t.diff_enter_text}\u003c/div\u003e`;\n                    addCount.textContent = '0';\n                    delCount.textContent = '0';\n                    return;\n                }\n\n                const options = {\n                    ignoreCase: ignoreCase.checked,\n                    ignoreWhitespace: ignoreWhitespace.checked\n                };\n\n                \n                let origLines = original.split('\\n');\n                let modLines = modified.split('\\n');\n\n                if (options.ignoreWhitespace) {\n                    origLines = origLines.map(l =\u003e l.replace(/\\s+/g, ' '));\n                    modLines = modLines.map(l =\u003e l.replace(/\\s+/g, ' '));\n                }\n\n                const diff = computeDiff(origLines.join('\\n'), modLines.join('\\n'), options);\n                const html = renderDiff(diff, showInline.checked);\n                resultDiv.innerHTML = html;\n            }\n\n            \n            compareBtn.addEventListener('click', compare);\n            swapBtn.addEventListener('click', () =\u003e {\n                const temp = originalTextarea.value;\n                originalTextarea.value = modifiedTextarea.value;\n                modifiedTextarea.value = temp;\n            });\n            clearBtn.addEventListener('click', () =\u003e {\n                originalTextarea.value = '';\n                modifiedTextarea.value = '';\n                resultDiv.innerHTML = `\u003cdiv class=\"diff-empty\"\u003e${t.diff_enter_text}\u003c/div\u003e`;\n                addCount.textContent = '0';\n                delCount.textContent = '0';\n            });\n\n            \n            ignoreCase.addEventListener('change', compare);\n            ignoreWhitespace.addEventListener('change', compare);\n            showInline.addEventListener('change', compare);\n        })();\n    \u003c/script\u003e\n\u003c/div\u003e\n\u003ch3 id=\"what-is-text-diff-tool\"\u003eWhat is Text Diff Tool?\u003c/h3\u003e\n\u003cp\u003eText Diff Tool is a free online tool for comparing the differences between two texts and displaying changes in an intuitive way with highlighting. It uses the LCS (Longest Common Subsequence) algorithm to accurately identify added, deleted, and modified lines.\u003c/p\u003e","title":"Online Text Diff Tool - Highlight Differences"},{"content":"Last Updated: April 2, 2026\nOur Mission In a data-driven era, privacy has become more precious than ever.\nThe初衷 (original intention) of creating this website is simple: we want to provide a suite of free, fast, and absolutely secure online tools, allowing you to handle daily tasks easily without installing cumbersome software.\nWe believe tools should be transparent, efficient, and completely under your control.\n️ Why Choose Us? Unlike traditional online tools, we adopt a \u0026ldquo;Local-First\u0026rdquo; technical architecture.\nData Stays on Your Device The files you upload and the content you input never leave your browser. All calculations, conversions, and processing are done locally on your device. We have no servers storing your data simply because no data is ever sent to us.\nLightning Fast Experience By leveraging your device\u0026rsquo;s computing power (instead of relying on remote server queues), our tools typically achieve millisecond response times. No upload wait times—just instant usage.\nCompletely Free We are committed to keeping core features free and open, ensuring everyone can enjoy the convenience brought by modern web technologies.\n️ Tech Stack As a tech enthusiast, I\u0026rsquo;m also happy to share the tech behind this site:\nHugo: Built with this blazingly fast static site generator. PaperMod: Customized based on this elegant and minimal theme. Vanilla JavaScript: Core tool functionalities are written in native JS to ensure zero dependencies and high performance. Contact \u0026amp; Feedback If you find any bugs or have a feature request, feel free to reach out:\nEmail: pxn626@outlook.com Hope these tools help make your work and life easier!\n","permalink":"https://www.webpenson.com/en/about/","summary":"\u003cp\u003e\u003cstrong\u003eLast Updated: April 2, 2026\u003c/strong\u003e\u003c/p\u003e\n\u003ch3 id=\"our-mission\"\u003eOur Mission\u003c/h3\u003e\n\u003cp\u003eIn a data-driven era, \u003cstrong\u003eprivacy\u003c/strong\u003e has become more precious than ever.\u003c/p\u003e\n\u003cp\u003eThe初衷 (original intention) of creating this website is simple: we want to provide a suite of \u003cstrong\u003efree, fast, and absolutely secure\u003c/strong\u003e online tools, allowing you to handle daily tasks easily without installing cumbersome software.\u003c/p\u003e\n\u003cp\u003eWe believe tools should be transparent, efficient, and completely under your control.\u003c/p\u003e\n\u003chr\u003e\n\u003ch3 id=\"-why-choose-us\"\u003e️ Why Choose Us?\u003c/h3\u003e\n\u003cp\u003eUnlike traditional online tools, we adopt a \u003cstrong\u003e\u0026ldquo;Local-First\u0026rdquo;\u003c/strong\u003e technical architecture.\u003c/p\u003e","title":"About"},{"content":" JSON Formatter \u0026amp; Validator Format and validate JSON data online, beautify JSON structure, and detect syntax errors. 2 Spaces 4 Spaces Sort Keys Minify JSON Format JSON Validate JSON Clear Copy Result What is a JSON Formatter \u0026amp; Validator? JSON (JavaScript Object Notation) is the most common data interchange format in development. However, when debugging APIs or handling config files, we often encounter JSON data that is minified into a single line, making it hard to read, or we need to check for syntax errors.\nThis Online JSON Toolbox not only beautifies your JSON structure but also provides advanced features like custom indentation, key sorting, and minification, making it an essential tool for frontend and backend debugging.\nHow to use this tool? Our tool is designed to be intuitive and easy to use:\nInput Data: Paste your raw JSON string into the input box. Configure Options: Indent Size: Choose between 2 spaces (compact view) or 4 spaces (standard view). Sort Keys: Check this to automatically sort JSON keys alphabetically, which is great for diffing. Minify JSON: Check this to remove all whitespace and newlines, compressing the JSON to its smallest size. Execute Action: Click “Format JSON” to beautify the code. Click “Validate JSON” to only check for syntax errors without changing the format. Click “Clear” to reset the input. Get Result: Once formatted, click “Copy Result” to use it. Key Features Flexible Indentation: Supports 2-space and 4-space indentation modes to meet different coding style requirements. Smart Key Sorting: Automatically sorts JSON object keys alphabetically. This is extremely useful when comparing two JSON files for differences. One-Click Minification: Quickly removes unnecessary whitespace, reducing payload size, perfect for production environments. Real-time Syntax Validation: Checks syntax during formatting, pinpointing missing brackets or quote errors accurately. Client-Side Security: All data processing happens locally in your browser. Your JSON data is never uploaded to any server, ensuring data security. Frequently Asked Questions (FAQ) Is this tool secure? Very secure. This tool runs entirely in your browser (pure client-side processing). Your JSON data is not uploaded to any server, so you can safely process configurations containing sensitive information.\nWhat does the \u0026ldquo;Sort Keys\u0026rdquo; feature do? When you check \u0026ldquo;Sort Keys\u0026rdquo;, the tool reorders the property names (Keys) of the JSON object. For example, it converts { \u0026quot;b\u0026quot;: 2, \u0026quot;a\u0026quot;: 1 } to { \u0026quot;a\u0026quot;: 1, \u0026quot;b\u0026quot;: 2 }. This is very useful when comparing two JSON objects for content equality (ignoring order).\nWhat is the use of Minifying JSON? The minify function removes all spaces, newlines, and indentation from the JSON. This is mainly used in production environments to significantly reduce file size and speed up network transmission.\n","permalink":"https://www.webpenson.com/en/tools/json-formatter/","summary":"\u003cdiv class=\"json-formatter-tool\"\u003e\n    \u003cstyle\u003e\n        .json-formatter-tool {\n            --primary-color: #2563eb;\n            --primary-hover: #1d4ed8;\n            --bg-color: #f8fafc;\n            --card-bg: #ffffff;\n            --text-main: #1e293b;\n            --text-muted: #64748b;\n            --border-color: #e2e8f0;\n            --radius: 12px;\n            --shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);\n            --error-color: #ef4444;\n            --success-color: #10b981;\n        }\n\n         \n        [data-theme=\"dark\"] .json-formatter-tool, \n        .dark .json-formatter-tool {\n            --bg-color: #0f172a;  \n            --card-bg: #1e293b;  \n            --text-main: #e2e8f0;  \n            --text-muted: #94a3b8;  \n            --border-color: #334155;  \n            --shadow: 0 4px 6px -1px rgb(0 0 0 / 0.3), 0 2px 4px -2px rgb(0 0 0 / 0.3);  \n        }\n\n        [data-theme=\"dark\"] .json-formatter-btn-secondary,\n        [data-theme=\"dark\"] #formatted-json{\n            background-color: #1e293b;\n        }\n\n        .json-formatter-tool * {\n            box-sizing: border-box;\n            margin: 0;\n            padding: 0;\n        }\n\n        .json-formatter-tool {\n            font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif;\n            background-color: var(--bg-color);\n            color: var(--text-main);\n            line-height: 1.6;\n            margin: 20px 0;\n        }\n\n        .json-formatter-container {\n            max-width: 100%;  \n            margin: 0;\n            padding: 0;\n            display: block;  \n        }\n\n        .json-formatter-card {\n            background: var(--card-bg);\n            border-radius: var(--radius);\n            box-shadow: var(--shadow);\n            padding: 24px;\n            border: 1px solid var(--border-color);\n            margin: 20px 0;  \n        }\n\n        .json-formatter-header {\n            margin-bottom: 20px;\n        }\n\n        .json-formatter-title {\n            font-size: 1.5rem;\n            font-weight: 700;\n            margin-bottom: 10px;\n            color: var(--text-main);\n        }\n\n        .json-formatter-intro {\n            font-size: 1rem;\n            color: var(--text-muted);\n        }\n\n        .json-formatter-workspace {\n            display: flex;\n            flex-direction: column;\n            gap: 20px;\n        }\n\n        .json-formatter-input-zone {\n            border: 2px dashed var(--border-color);\n            border-radius: var(--radius);\n            padding: 20px;\n            transition: all 0.3s;\n            background: #fafafa;\n        }\n\n        .json-formatter-input-zone:hover,\n        .json-formatter-input-zone.dragover {\n            border-color: var(--primary-color);\n            background: #eff6ff;\n        }\n\n        .json-formatter-textarea {\n            width: 100%;\n            height: 300px;\n            padding: 15px;\n            border: 1px solid var(--border-color);\n            border-radius: 8px;\n            resize: vertical;\n            font-family: monospace;\n            font-size: 14px;\n            outline: none;\n            background-color: white;\n            color: var(--text-main);  \n        }\n\n        [data-theme=\"dark\"] .json-formatter-textarea,\n        .dark .json-formatter-textarea {\n            background-color: #1e293b;  \n            color: #e2e8f0;  \n        }\n\n        .json-formatter-textarea:focus {\n            border-color: var(--primary-color);\n            box-shadow: 0 0 0 2px var(--primary-color);\n        }\n\n        .json-formatter-options {\n            display: flex;\n            gap: 20px;\n            flex-wrap: wrap;\n            margin-bottom: 15px;\n        }\n\n        .json-formatter-option {\n            display: flex;\n            align-items: center;\n            gap: 8px;\n        }\n\n        .json-formatter-action-bar {\n            display: flex;\n            gap: 15px;\n            align-items: center;\n            flex-wrap: wrap;\n        }\n\n        .json-formatter-btn {\n            padding: 12px 24px;\n            border-radius: 8px;\n            border: none;\n            font-weight: 600;\n            cursor: pointer;\n            transition: 0.2s;\n            font-size: 1rem;\n            display: inline-flex;\n            align-items: center;\n            gap: 8px;\n        }\n\n        .json-formatter-btn-primary {\n            background-color: var(--primary-color);\n            color: white;\n        }\n\n        .json-formatter-btn-primary:hover {\n            background-color: var(--primary-hover);\n            transform: translateY(-1px);\n        }\n\n        .json-formatter-btn-secondary {\n            background-color: white;\n            border: 1px solid var(--border-color);\n            color: var(--text-main);\n        }\n\n        .json-formatter-btn-secondary:hover {\n            background-color: #f1f5f9;\n        }\n\n        .json-formatter-btn:disabled {\n            opacity: 0.6;\n            cursor: not-allowed;\n            transform: none;\n        }\n\n        .json-formatter-result-zone {\n            margin-top: 20px;\n            display: none;\n        }\n\n        .json-formatter-result-zone.active {\n            display: block;\n            animation: fadeIn 0.5s;\n        }\n\n        .json-formatter-result-content {\n            background: #f1f5f9;\n            padding: 20px;\n            border-radius: 8px;\n            overflow-x: auto;\n            min-height: 100px;\n            position: relative;\n        }\n\n        .json-formatter-result-content pre {\n            margin: 0;\n            white-space: pre-wrap;\n            word-break: break-all;\n            font-family: monospace;\n        }\n\n        .json-formatter-status {\n            margin-top: 10px;\n            padding: 10px;\n            border-radius: 6px;\n            font-size: 0.9rem;\n            display: none;\n        }\n\n        .json-formatter-status.error {\n            background-color: #fef2f2;\n            color: var(--error-color);\n            border: 1px solid #fecaca;\n            display: block;\n        }\n\n        .json-formatter-status.success {\n            background-color: #f0fdf4;\n            color: var(--success-color);\n            border: 1px solid #bbf7d0;\n            display: block;\n        }\n\n        .json-formatter-loading-spinner {\n            display: none;\n            width: 24px;\n            height: 24px;\n            border: 3px solid #fff;\n            border-bottom-color: transparent;\n            border-radius: 50%;\n            animation: rotation 1s linear infinite;\n        }\n\n        .json-formatter-btn-primary.loading .json-formatter-loading-spinner {\n            display: inline-block;\n        }\n\n        .json-formatter-btn-primary.loading span {\n            margin-left: 8px;\n        }\n\n        @keyframes rotation {\n            0% { transform: rotate(0deg); }\n            100% { transform: rotate(360deg); }\n        }\n\n        @keyframes fadeIn {\n            from { opacity: 0; transform: translateY(10px); }\n            to { opacity: 1; transform: translateY(0); }\n        }\n    \u003c/style\u003e\n\n    \u003cdiv class=\"json-formatter-container\"\u003e\n        \u003cdiv class=\"json-formatter-card\"\u003e\n            \u003cdiv class=\"json-formatter-header\"\u003e\n                \n                \u003ch2 class=\"json-formatter-title\"\u003eJSON Formatter \u0026amp; Validator\u003c/h2\u003e\n                \n                \u003cp class=\"json-formatter-intro\"\u003e\n                    Format and validate JSON data online, beautify JSON structure, and detect syntax errors.\n                \u003c/p\u003e","title":"JSON Formatter \u0026 Validator"},{"content":" Base64 Encoder \u0026amp; Decoder Quickly convert text or files to Base64 format or decode back.\nInput Content Encode Decode Convert Clear Result What is Base64 Encoding? Base64 is a binary-to-text encoding scheme that represents binary data in an ASCII string format by translating it into a radix-64 representation.\nSimply put, it converts binary data (like an image) into a text string, making it safe to transmit over media that are designed to deal with textual data.\nHow to use this tool? Select Mode: Choose between \u0026ldquo;Encode to Base64\u0026rdquo; or \u0026ldquo;Decode from Base64\u0026rdquo;. Input Data: Paste your text or Base64 string into the input box. Convert: Click the button, and the result will appear instantly. Common Use Cases Embedding Images: Embedding small images directly into CSS or HTML code to reduce HTTP requests and speed up web page loading. Data Transmission: Transmitting binary data in HTTP requests where special characters might otherwise cause parsing errors. Simple Obfuscation: While not encryption, it is often used to hide plain text information to prevent immediate visual recognition. Frequently Asked Questions (FAQ) Is Base64 secure? No, Base64 is not encryption. It is simply an encoding scheme. Anyone can easily decode a Base64 string back to its original content. Therefore, never use Base64 to protect passwords or sensitive information.\nWhy is the Base64 string larger than the original? Base64 encoded data is approximately 33% larger than the original binary data. This is because it uses 4 characters to represent every 3 bytes of data.\n","permalink":"https://www.webpenson.com/en/tools/base64/","summary":"\u003cdiv class=\"tool-container\" id=\"main-tool\"\u003e\n    \u003cdiv class=\"tool-header\"\u003e\n        \u003ch3\u003eBase64 Encoder \u0026amp; Decoder\u003c/h3\u003e\n        \u003cp class=\"tool-desc\"\u003eQuickly convert text or files to Base64 format or decode back.\u003c/p\u003e\n    \u003c/div\u003e\n\n    \u003cdiv class=\"tool-workspace\"\u003e\n        \u003cdiv class=\"tool-input-group\"\u003e\n            \u003clabel for=\"main-input\"\u003eInput Content\u003c/label\u003e\n            \u003ctextarea id=\"main-input\" placeholder=\"Enter text or Base64 string here...\"\u003e\u003c/textarea\u003e\n        \u003c/div\u003e\n\n        \u003cdiv class=\"tool-options\"\u003e\n            \u003cdiv class=\"option-item\"\u003e\n                \u003cinput type=\"radio\" id=\"main-encode\" name=\"main-mode\" value=\"encode\" checked\u003e\n                \u003clabel for=\"main-encode\"\u003eEncode\u003c/label\u003e\n            \u003c/div\u003e\n            \u003cdiv class=\"option-item\"\u003e\n                \u003cinput type=\"radio\" id=\"main-decode\" name=\"main-mode\" value=\"decode\"\u003e\n                \u003clabel for=\"main-decode\"\u003eDecode\u003c/label\u003e\n            \u003c/div\u003e\n        \u003c/div\u003e\n\n        \u003cdiv class=\"tool-actions\"\u003e\n            \u003cbutton id=\"main-convert\" class=\"btn-primary\"\u003eConvert\u003c/button\u003e\n            \u003cbutton id=\"main-clear\" class=\"btn-secondary\"\u003eClear\u003c/button\u003e\n        \u003c/div\u003e\n\n        \u003cdiv class=\"tool-output-group\"\u003e\n            \u003clabel for=\"main-output\"\u003eResult\u003c/label\u003e\n            \u003ctextarea id=\"main-output\" readonly placeholder=\"\"\u003e\u003c/textarea\u003e\n        \u003c/div\u003e\n        \n        \u003cdiv id=\"main-status\" class=\"tool-status\"\u003e\u003c/div\u003e\n    \u003c/div\u003e\n\u003c/div\u003e\n\n\u003cstyle\u003e\n.tool-container { background: var(--code-bg); padding: 1.5rem; border-radius: 8px; border: 1px solid var(--border); margin: 1rem 0; }\n.tool-header { margin-bottom: 1rem; }\n.tool-header h3 { margin: 0 0 0.5rem 0; color: var(--primary); }\n.tool-desc { margin: 0; font-size: 0.9rem; color: var(--secondary); }\n.tool-workspace { display: flex; flex-direction: column; gap: 1rem; }\n.tool-input-group, .tool-output-group { display: flex; flex-direction: column; gap: 0.5rem; }\n.tool-input-group label, .tool-output-group label { font-weight: bold; font-size: 0.9rem; }\ntextarea { width: 100%; min-height: 120px; padding: 0.8rem; border: 1px solid var(--border); border-radius: 4px; background: var(--entry); color: var(--primary); font-family: monospace; resize: vertical; box-sizing: border-box; }\ntextarea:focus { outline: 2px solid var(--primary); border-color: transparent; }\n.tool-options { display: flex; gap: 1rem; background: var(--entry); padding: 0.5rem; border-radius: 4px; border: 1px solid var(--border); }\n.option-item { display: flex; align-items: center; gap: 0.3rem; }\n.tool-actions { display: flex; gap: 0.5rem; }\n.btn-primary, .btn-secondary { padding: 0.6rem 1.2rem; border: none; border-radius: 4px; cursor: pointer; font-weight: bold; transition: opacity 0.2s; }\n.btn-primary { background: var(--primary); color: var(--code-bg); }\n.btn-secondary { background: var(--border); color: var(--primary); }\n.btn-primary:hover, .btn-secondary:hover { opacity: 0.8; }\n.tool-status { font-size: 0.85rem; min-height: 1.2em; }\n.status-error { color: #ff4d4f; }\n.status-success { color: #52c41a; }\n\u003c/style\u003e\n\n\u003cscript\u003e\n(function() {\n    const container = document.getElementById('main-tool');\n    const input = document.getElementById('main-input');\n    const output = document.getElementById('main-output');\n    const convertBtn = document.getElementById('main-convert');\n    const clearBtn = document.getElementById('main-clear');\n    const status = document.getElementById('main-status');\n    \n    convertBtn.addEventListener('click', () =\u003e {\n        const mode = container.querySelector(`input[name=\"main-mode\"]:checked`).value;\n        const val = input.value.trim();\n        \n        if (!val) {\n            status.textContent = 'Please enter content';\n            status.className = 'tool-status status-error';\n            return;\n        }\n\n        try {\n            if (mode === 'encode') {\n                output.value = btoa(unescape(encodeURIComponent(val)));\n            } else {\n                output.value = decodeURIComponent(escape(atob(val)));\n            }\n            status.textContent = 'Success';\n            status.className = 'tool-status status-success';\n        } catch (e) {\n            output.value = '';\n            status.textContent = 'Format error, please check input';\n            status.className = 'tool-status status-error';\n        }\n    });\n\n    clearBtn.addEventListener('click', () =\u003e {\n        input.value = '';\n        output.value = '';\n        status.textContent = '';\n        status.className = 'tool-status';\n    });\n})();\n\u003c/script\u003e\n\u003ch3 id=\"what-is-base64-encoding\"\u003eWhat is Base64 Encoding?\u003c/h3\u003e\n\u003cp\u003eBase64 is a binary-to-text encoding scheme that represents binary data in an ASCII string format by translating it into a radix-64 representation.\u003c/p\u003e","title":"Online Base64 Encoder \u0026 Decoder - Free Tool"},{"content":" Color Format Converter Real-time convert color codes between Hex, RGB, and HSL with visual preview.\nHEX: #000000 RGB: rgb(0, 0, 0) HSL: hsl(0, 0%, 0%) ⚙️ Input Color Enter Hex, RGB or HSL value: 🎨 Generate Random Color What is a Color Format Converter? In frontend development, UI design, and web creation, switching between different color notations is a daily task. Designers might use Hex codes in Figma, while CSS stylesheets might require RGB values, or HSL for easier color manipulation.\nThis Online Color Converter is your all-in-one color assistant. It helps you instantly and accurately convert color codes between Hex, RGB, and HSL formats, providing an intuitive visual preview so you don\u0026rsquo;t have to do manual calculations, significantly boosting your workflow efficiency.\nHow to use this tool? Our tool is designed to be intuitive and requires just one step:\nInput Color: Paste or type your color value into the input box. It supports multiple formats like #ff0000, rgb(255, 0, 0), or hsl(0, 100%, 50%). Real-time Conversion: The tool automatically detects your input format and immediately calculates the corresponding values for the other two formats. Visual Preview: At the top of the tool, you can see a visual swatch of the color to ensure the conversion matches your visual expectation. Random Inspiration: Click the \u0026ldquo;Generate Random Color\u0026rdquo; button to get new color inspiration. Key Features Multi-Format Support: Perfectly supports bidirectional conversion between three mainstream color models: Hex, RGB, and HSL. Real-time Conversion: Whether converting Hex to RGB or HSL to Hex, the tool responds in milliseconds without needing extra buttons. Smart Parsing: Supports 3-digit shorthand Hex codes (e.g., #fff) and automatically expands them to 6 digits (#ffffff). Visual Feedback: Provides a large color preview swatch, ensuring \u0026ldquo;What You See Is What You Get\u0026rdquo;. Client-Side Processing: All calculations are performed locally in your browser, ensuring data privacy and instant speed. Understanding Color Formats Hex (Hexadecimal Color Code) Hex color codes are the most common format in web development, starting with # followed by 6 hexadecimal digits. The first two represent Red, the middle two Green, and the last two Blue. For example, #FF5733 represents a vibrant orange.\nRGB (Red Green Blue) RGB is a hardware-oriented color model that mixes colors using values (0-255) for Red, Green, and Blue channels. For example, rgb(255, 87, 51). It is the basis for how computer monitors display colors.\nHSL (Hue, Saturation, Lightness) HSL is a more human-intuitive color representation.\nH (Hue): An angle on the color wheel from 0-360 degrees (0 is Red, 120 is Green, 240 is Blue). S (Saturation): 0%-100%, representing color purity (0% is gray, 100% is fully saturated). L (Lightness): 0%-100%, representing brightness (0% is black, 100% is white). Frequently Asked Questions (FAQ) Why should I use HSL? HSL is more intuitive for tweaking colors than RGB. For instance, if you want to make a color \u0026ldquo;lighter\u0026rdquo; or \u0026ldquo;more vivid,\u0026rdquo; you simply adjust the L or S value in HSL, whereas in RGB, you would need to adjust three values simultaneously to maintain the hue.\nIs this tool accurate? Yes. This tool uses standard color mathematics algorithms to ensure precise correspondence within the sRGB color space.\nDoes it support Alpha transparency? The current version focuses on base color conversion (Hex, RGB, HSL). For transparency, you would typica\n","permalink":"https://www.webpenson.com/en/tools/color-converter/","summary":"\u003c!-- SEO Structured Data --\u003e\n\u003cscript type=\"application/ld+json\"\u003e\n{\n  \"@context\": \"https://schema.org\",\n  \"@type\": \"SoftwareApplication\",\n  \"name\": \"Color Format Converter\",\n  \"applicationCategory\": \"DeveloperApplication\",\n  \"operatingSystem\": \"Web\",\n  \"offers\": {\n    \"@type\": \"Offer\",\n    \"price\": \"0\",\n    \"priceCurrency\": \"USD\"\n  },\n  \"description\": \"Free online color converter for Hex, RGB, and HSL formats.\"\n}\n\u003c/script\u003e\n\u003cdiv class=\"tool-container\" id=\"color-tool\"\u003e\n    \u003cdiv class=\"tool-workspace\"\u003e\n        \u003cdiv class=\"tool-output-group\"\u003e\n            \u003ch3\u003eColor Format Converter\u003c/h3\u003e\n            \u003cp class=\"tool-desc\"\u003eReal-time convert color codes between Hex, RGB, and HSL with visual preview.\u003c/p\u003e\n            \n            \n            \u003cdiv class=\"color-preview\" id=\"color-preview\"\u003e\n                \u003cdiv class=\"color-swatch\" id=\"color-swatch\"\u003e\u003c/div\u003e\n                \u003cdiv class=\"color-values\"\u003e\n                    \u003cdiv class=\"color-value\" id=\"color-hex\"\u003eHEX: #000000\u003c/div\u003e\n                    \u003cdiv class=\"color-value\" id=\"color-rgb\"\u003eRGB: rgb(0, 0, 0)\u003c/div\u003e\n                    \u003cdiv class=\"color-value\" id=\"color-hsl\"\u003eHSL: hsl(0, 0%, 0%)\u003c/div\u003e\n                \u003c/div\u003e\n            \u003c/div\u003e\n        \u003c/div\u003e\n\n        \u003cdiv class=\"generator-panel\"\u003e\n            \u003ch4\u003e⚙️ Input Color\u003c/h4\u003e\n            \n            \u003cdiv class=\"config-row\"\u003e\n                \u003clabel for=\"color-input\"\u003eEnter Hex, RGB or HSL value:\u003c/label\u003e\n                \u003cinput type=\"text\" \n                       id=\"color-input\" \n                       class=\"tool-text-input\" \n                       placeholder=\"#ff0000 or rgb(255, 0, 0)\"\u003e\n                \u003cbutton id=\"color-generate\" class=\"btn-primary\"\u003e\n                    🎨 Generate Random Color\n                \u003c/button\u003e\n            \u003c/div\u003e\n            \n            \u003cdiv id=\"color-error\" class=\"error-msg\"\u003e\u003c/div\u003e\n        \u003c/div\u003e\n    \u003c/div\u003e\n\u003c/div\u003e\n\n\u003cscript\u003e\n(function() {\n    const input = document.getElementById('color-input');\n    const errorDiv = document.getElementById('color-error');\n    const swatch = document.getElementById('color-swatch');\n    const hexVal = document.getElementById('color-hex');\n    const rgbVal = document.getElementById('color-rgb');\n    const hslVal = document.getElementById('color-hsl');\n\n    \n    function generateRandomColor() {\n        const randomColor = '#' + Math.floor(Math.random()*16777215).toString(16).padStart(6, '0');\n        input.value = randomColor;\n        updateAllFormats(randomColor);\n    }\n\n    \n    function updateAllFormats(value) {\n        try {\n            \n            errorDiv.textContent = '';\n            \n            \n            let color = value.trim();\n            \n            \n            if (color.toLowerCase().startsWith('rgb')) {\n                const rgbMatch = color.match(/rgb\\((\\d+),\\s*(\\d+),\\s*(\\d+)\\)/i);\n                if (rgbMatch) {\n                    const r = parseInt(rgbMatch[1]);\n                    const g = parseInt(rgbMatch[2]);\n                    const b = parseInt(rgbMatch[3]);\n                    displayResults(r, g, b);\n                    return;\n                }\n            }\n            \n            \n            if (color.toLowerCase().startsWith('hsl')) {\n                const hslMatch = color.match(/hsl\\((\\d+),\\s*(\\d+)%,\\s*(\\d+)%\\)/i);\n                if (hslMatch) {\n                    \n                    \n                    const h = parseInt(hslMatch[1]);\n                    const s = parseInt(hslMatch[2]);\n                    const l = parseInt(hslMatch[3]);\n                    const rgb = hslToRgb(h, s, l);\n                    displayResults(rgb[0], rgb[1], rgb[2]);\n                    return;\n                }\n            }\n            \n            \n            if (!color.startsWith('#')) color = '#' + color;\n            \n            if (/^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/.test(color)) {\n                \n                if (color.length === 4) {\n                    const r = parseInt(color[1] + color[1], 16);\n                    const g = parseInt(color[2] + color[2], 16);\n                    const b = parseInt(color[3] + color[3], 16);\n                    displayResults(r, g, b);\n                } else {\n                    \n                    const r = parseInt(color.slice(1, 3), 16);\n                    const g = parseInt(color.slice(3, 5), 16);\n                    const b = parseInt(color.slice(5, 7), 16);\n                    displayResults(r, g, b);\n                }\n            } else {\n                throw new Error(\"Invalid Color Format\");\n            }\n        } catch (e) {\n            errorDiv.textContent = 'Invalid color format. Please enter like #ff0000, rgb(255, 0, 0) or hsl(0, 100%, 50%)';\n        }\n    }\n\n    \n    function displayResults(r, g, b) {\n        \n        swatch.style.backgroundColor = `rgb(${r}, ${g}, ${b})`;\n        \n        \n        const hex = `#${((1 \u003c\u003c 24) + (r \u003c\u003c 16) + (g \u003c\u003c 8) + b).toString(16).slice(1).toUpperCase()}`;\n        \n        \n        const hsl = rgbToHsl(r, g, b);\n        \n        \n        hexVal.textContent = `HEX: ${hex}`;\n        rgbVal.textContent = `RGB: rgb(${r}, ${g}, ${b})`;\n        hslVal.textContent = `HSL: hsl(${hsl.h}, ${hsl.s}%, ${hsl.l}%)`;\n    }\n\n    \n    function rgbToHsl(r, g, b) {\n        r /= 255; g /= 255; b /= 255;\n        const max = Math.max(r, g, b), min = Math.min(r, g, b);\n        let h, s, l = (max + min) / 2;\n\n        if (max === min) {\n            h = s = 0; \n        } else {\n            const d = max - min;\n            s = l \u003e 0.5 ? d / (2 - max - min) : d / (max + min);\n            switch(max) {\n                case r: h = (g - b) / d + (g \u003c b ? 6 : 0); break;\n                case g: h = (b - r) / d + 2; break;\n                case b: h = (r - g) / d + 4; break;\n            }\n            h /= 6;\n        }\n        return { \n            h: Math.round(h * 360), \n            s: Math.round(s * 100), \n            l: Math.round(l * 100) \n        };\n    }\n\n    \n    function hslToRgb(h, s, l) {\n        h /= 360; s /= 100; l /= 100;\n        let r, g, b;\n        if (s === 0) {\n            r = g = b = l; \n        } else {\n            const hue2rgb = (p, q, t) =\u003e {\n                if(t \u003c 0) t += 1;\n                if(t \u003e 1) t -= 1;\n                if(t \u003c 1/6) return p + (q - p) * 6 * t;\n                if(t \u003c 1/2) return q;\n                if(t \u003c 2/3) return p + (q - p) * (2/3 - t) * 6;\n                return p;\n            }\n            const q = l \u003c 0.5 ? l * (1 + s) : l + s - l * s;\n            const p = 2 * l - q;\n            r = hue2rgb(p, q, h + 1/3);\n            g = hue2rgb(p, q, h);\n            b = hue2rgb(p, q, h - 1/3);\n        }\n        return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];\n    }\n\n    \n    document.getElementById('color-generate').addEventListener('click', generateRandomColor);\n    \n    input.addEventListener('input', function() {\n        updateAllFormats(this.value);\n    });\n\n    \n    generateRandomColor();\n})();\n\u003c/script\u003e\n\n\u003cstyle\u003e\n \n.color-preview {\n    display: flex;\n    align-items: center;\n    gap: 20px;\n    background: #f9f9f9;\n    padding: 20px;\n    border-radius: 8px;\n    margin-bottom: 20px;\n    border: 1px solid #eee;\n}\n.color-swatch {\n    width: 100px;\n    height: 100px;\n    border-radius: 8px;\n    border: 2px solid #ddd;\n    box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n}\n.color-values {\n    flex: 1;\n}\n.color-value {\n    font-family: 'Courier New', monospace;\n    font-size: 1.1em;\n    margin: 8px 0;\n    padding: 4px 8px;\n    background: #fff;\n    border-left: 4px solid currentColor;\n}\n\u003c/style\u003e\n\u003ch3 id=\"what-is-a-color-format-converter\"\u003eWhat is a Color Format Converter?\u003c/h3\u003e\n\u003cp\u003eIn frontend development, UI design, and web creation, switching between different color notations is a daily task. Designers might use \u003cstrong\u003eHex\u003c/strong\u003e codes in Figma, while CSS stylesheets might require \u003cstrong\u003eRGB\u003c/strong\u003e values, or \u003cstrong\u003eHSL\u003c/strong\u003e for easier color manipulation.\u003c/p\u003e","title":"Online Color Converter - Hex, RGB, HSL Tool"},{"content":" Cron Expression Parser Parse and validate Cron expressions, visualize execution times, with quick presets.\nMinute 0-59 Hour 0-23 Day 1-31 Month 1-12 Weekday 0-6 Every Minute Hourly Daily Weekly Monthly Yearly Enter Cron Expression Parse Execution Description Execution Cycle Next Executions Copy Expression Reset What is Cron Expression? A Cron expression is a string format used to configure scheduled tasks, widely used in Linux systems, server scheduling, and various development frameworks. It consists of 5 fields representing minute, hour, day of month, month, and day of week.\nHow to Use This Tool? Select Preset: Click quick preset buttons (like \u0026ldquo;Daily\u0026rdquo;, \u0026ldquo;Weekly\u0026rdquo;) to generate common expressions. Enter Expression: Manually enter or modify Cron expression, e.g., 0 9 * * 1-5. Parse \u0026amp; Validate: Click \u0026ldquo;Parse\u0026rdquo; button to see human-readable description and next execution times. Copy \u0026amp; Use: Copy the generated expression to use in your server or code. Cron Expression Format Field Allowed Values Special Characters Minute 0-59 * , - / Hour 0-23 * , - / Day 1-31 * , - / Month 1-12 * , - / Weekday 0-6 * , - / Special Characters * - Matches all values , - Matches multiple values (e.g., 1,3,5) - - Matches range (e.g., 1-5) / - Step (e.g., */15 means every 15 units) FAQ Is this tool secure? Absolutely secure. This tool runs entirely in your browser; no data is uploaded to any server.\nHow to express \u0026ldquo;every day at 9 AM\u0026rdquo;? Enter 0 9 * * *, which means execute at 9:00 every day.\nWhat does 0 mean in the weekday field? In the weekday field, 0 represents Sunday, and 1-6 represents Monday through Saturday.\n","permalink":"https://www.webpenson.com/en/tools/cron-parser/","summary":"\u003cdiv class=\"cron-parser-tool\"\u003e\n    \u003cstyle\u003e\n        .cron-parser-tool {\n            --primary-color: #2563eb;\n            --primary-hover: #1d4ed8;\n            --bg-color: #f8fafc;\n            --card-bg: #ffffff;\n            --text-main: #1e293b;\n            --text-muted: #64748b;\n            --border-color: #e2e8f0;\n            --radius: 12px;\n            --shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);\n            --error-color: #ef4444;\n            --success-color: #10b981;\n            --warning-color: #f59e0b;\n        }\n\n        [data-theme=\"dark\"] .cron-parser-tool {\n            --bg-color: #0f172a;\n            --card-bg: #1e293b;\n            --text-main: #e2e8f0;\n            --text-muted: #94a3b8;\n            --border-color: #334155;\n            --shadow: 0 4px 6px -1px rgb(0 0 0 / 0.3);\n        }\n\n        .cron-parser-tool * {\n            box-sizing: border-box;\n            margin: 0;\n            padding: 0;\n        }\n\n        .cron-parser-tool {\n            font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif;\n            background-color: var(--bg-color);\n            color: var(--text-main);\n            line-height: 1.6;\n            margin: 20px 0;\n        }\n\n        .cron-parser-container {\n            max-width: 100%;\n            margin: 0;\n            padding: 0;\n        }\n\n        .cron-parser-card {\n            background: var(--card-bg);\n            border-radius: var(--radius);\n            box-shadow: var(--shadow);\n            padding: 24px;\n            border: 1px solid var(--border-color);\n            margin: 20px 0;\n        }\n\n        .cron-parser-title {\n            font-size: 1.5rem;\n            font-weight: 700;\n            margin-bottom: 10px;\n            color: var(--text-main);\n        }\n\n        .cron-parser-intro {\n            font-size: 1rem;\n            color: var(--text-muted);\n            margin-bottom: 20px;\n        }\n\n         \n        .cron-parser-input-section {\n            margin-bottom: 20px;\n        }\n\n        .cron-parser-label {\n            font-weight: 600;\n            margin-bottom: 8px;\n            display: block;\n            color: var(--text-main);\n        }\n\n        .cron-parser-input-group {\n            display: flex;\n            gap: 10px;\n            flex-wrap: wrap;\n        }\n\n        .cron-parser-input {\n            flex: 1;\n            min-width: 200px;\n            padding: 12px 16px;\n            border: 2px solid var(--border-color);\n            border-radius: 8px;\n            font-size: 1rem;\n            font-family: 'Consolas', 'Monaco', monospace;\n            outline: none;\n            transition: border-color 0.2s;\n            background: var(--card-bg);\n            color: var(--text-main);\n        }\n\n        .cron-parser-input:focus {\n            border-color: var(--primary-color);\n        }\n\n        .cron-parser-input.error {\n            border-color: var(--error-color);\n        }\n\n        .cron-parser-input.success {\n            border-color: var(--success-color);\n        }\n\n         \n        .cron-parser-presets {\n            display: flex;\n            flex-wrap: wrap;\n            gap: 8px;\n            margin-bottom: 20px;\n        }\n\n        .cron-parser-preset {\n            padding: 6px 12px;\n            background: #eff6ff;\n            border: 1px solid #bfdbfe;\n            border-radius: 20px;\n            font-size: 0.85rem;\n            cursor: pointer;\n            transition: all 0.2s;\n            color: var(--primary-color);\n        }\n\n        [data-theme=\"dark\"] .cron-parser-preset {\n            background: #1e293b;\n            border-color: #334155;\n        }\n\n        .cron-parser-preset:hover {\n            background: var(--primary-color);\n            color: white;\n        }\n\n         \n        .cron-parser-visual {\n            display: grid;\n            grid-template-columns: repeat(7, 1fr);\n            gap: 4px;\n            margin: 20px 0;\n            padding: 15px;\n            background: #f8fafc;\n            border-radius: 8px;\n        }\n\n        [data-theme=\"dark\"] .cron-parser-visual {\n            background: #0f172a;\n        }\n\n        .cron-parser-day-label {\n            text-align: center;\n            font-size: 0.75rem;\n            color: var(--text-muted);\n            padding: 4px;\n        }\n\n        .cron-parser-day-cell {\n            aspect-ratio: 1;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            border-radius: 4px;\n            font-size: 0.85rem;\n            background: #e2e8f0;\n            color: var(--text-muted);\n        }\n\n        [data-theme=\"dark\"] .cron-parser-day-cell {\n            background: #334155;\n            color: #94a3b8;\n        }\n\n        .cron-parser-day-cell.active {\n            background: var(--primary-color);\n            color: white;\n        }\n\n         \n        .cron-parser-result {\n            margin-top: 20px;\n        }\n\n        .cron-parser-result-card {\n            padding: 15px;\n            background: #f0fdf4;\n            border: 1px solid #bbf7d0;\n            border-radius: 8px;\n            margin-bottom: 15px;\n        }\n\n        [data-theme=\"dark\"] .cron-parser-result-card {\n            background: #064e3b;\n            border-color: #065f46;\n        }\n\n        .cron-parser-result-title {\n            font-weight: 600;\n            margin-bottom: 8px;\n            color: var(--text-main);\n        }\n\n        .cron-parser-result-content {\n            font-family: 'Consolas', monospace;\n            word-break: break-all;\n            color: #166534;\n        }\n\n        [data-theme=\"dark\"] .cron-parser-result-content {\n            color: #d1fae5;\n        }\n\n         \n        .cron-parser-next-runs {\n            margin-top: 15px;\n        }\n\n        .cron-parser-next-title {\n            font-weight: 600;\n            margin-bottom: 10px;\n            color: var(--text-main);\n        }\n\n        .cron-parser-next-list {\n            list-style: none;\n        }\n\n        .cron-parser-next-item {\n            padding: 8px 12px;\n            background: var(--card-bg);\n            border: 1px solid var(--border-color);\n            border-radius: 6px;\n            margin-bottom: 6px;\n            display: flex;\n            justify-content: space-between;\n            align-items: center;\n        }\n\n        .cron-parser-next-time {\n            font-family: 'Consolas', monospace;\n            font-weight: 500;\n        }\n\n        .cron-parser-next-countdown {\n            font-size: 0.85rem;\n            color: var(--text-muted);\n        }\n\n         \n        .cron-parser-btn {\n            padding: 10px 20px;\n            border-radius: 8px;\n            border: none;\n            font-weight: 600;\n            cursor: pointer;\n            transition: 0.2s;\n            font-size: 0.95rem;\n        }\n\n        .cron-parser-btn-primary {\n            background-color: var(--primary-color);\n            color: white;\n        }\n\n        .cron-parser-btn-primary:hover {\n            background-color: var(--primary-hover);\n        }\n\n        .cron-parser-btn-secondary {\n            background-color: white;\n            border: 1px solid var(--border-color);\n            color: var(--text-main);\n        }\n\n        [data-theme=\"dark\"] .cron-parser-btn-secondary {\n            background-color: #1e293b;\n        }\n\n        .cron-parser-btn-secondary:hover {\n            background-color: #f1f5f9;\n        }\n\n         \n        .cron-parser-error {\n            padding: 12px;\n            background: #fef2f2;\n            border: 1px solid #fecaca;\n            border-radius: 8px;\n            color: var(--error-color);\n            margin-top: 10px;\n            display: none;\n        }\n\n        .cron-parser-error.show {\n            display: block;\n        }\n\n         \n        .cron-parser-fields {\n            display: grid;\n            grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));\n            gap: 10px;\n            margin: 15px 0;\n            padding: 15px;\n            background: #fef3c7;\n            border-radius: 8px;\n        }\n\n        [data-theme=\"dark\"] .cron-parser-fields {\n            background: #78350f;\n        }\n\n        .cron-parser-field {\n            text-align: center;\n        }\n\n        .cron-parser-field-name {\n            font-weight: 600;\n            font-size: 0.9rem;\n            color: #92400e;\n        }\n\n        [data-theme=\"dark\"] .cron-parser-field-name {\n            color: #fde68a;\n        }\n\n        .cron-parser-field-range {\n            font-size: 0.8rem;\n            color: #b45309;\n        }\n\n        [data-theme=\"dark\"] .cron-parser-field-range {\n            color: #fcd34d;\n        }\n\n         \n        @media (max-width: 600px) {\n            .cron-parser-visual {\n                grid-template-columns: repeat(4, 1fr);\n            }\n            .cron-parser-presets {\n                flex-direction: column;\n            }\n        }\n    \u003c/style\u003e\n\n    \u003cdiv class=\"cron-parser-container\"\u003e\n        \u003cdiv class=\"cron-parser-card\"\u003e\n            \u003ch2 class=\"cron-parser-title\"\u003eCron Expression Parser\u003c/h2\u003e\n            \u003cp class=\"cron-parser-intro\"\u003eParse and validate Cron expressions, visualize execution times, with quick presets.\u003c/p\u003e","title":"Online Cron Expression Parser - Visualize Scheduled Tasks"},{"content":" JWT Decoder Parse JSON Web Token to view Header and Payload info.\nJWT Token Decode Token Clear Header Waiting for decode... Payload Waiting for decode... What is a JWT? JWT (JSON Web Token) is an open standard (RFC 7519) that defines a compact and self-contained way for securely transmitting information between parties as a JSON object. It is commonly used for authentication after a user logs in.\nA JWT typically consists of three parts, separated by dots .: Header, Payload, and Signature.\nHow to use this tool? Paste Token: Paste your long JWT string into the input box. Auto Parse: The tool will automatically split it into three parts and display the content as formatted JSON. Inspect: You can clearly see the User ID, Expiration Time (exp), and the signing algorithm. Why use a JWT Decoder? Debugging Authentication: Developers need to check if the Token has expired or if the user information inside is correct. Troubleshooting Permissions: Check if the user\u0026rsquo;s Role or Scope is correctly written in the Token. Security Checks: Verify if the Token\u0026rsquo;s signature is valid (requires secret key). Frequently Asked Questions (FAQ) Can I modify the content of a JWT? You can decode and view the content, but you cannot modify it arbitrarily. The third part of a JWT is the signature, which is generated based on the first two parts and a secret key. If you modify the content, the signature will become invalid, and the server will reject the Token.\nIs this tool secure? This tool runs entirely in your browser (client-side). Your Token is not sent to any server, so you can safely debug test environment tokens. However, for security reasons, please do not use any online tool with sensitive production tokens.\n","permalink":"https://www.webpenson.com/en/tools/jwt/","summary":"\u003cdiv class=\"tool-container\" id=\"main-tool\"\u003e\n    \u003cdiv class=\"tool-header\"\u003e\n        \u003ch3\u003eJWT Decoder\u003c/h3\u003e\n        \u003cp class=\"tool-desc\"\u003eParse JSON Web Token to view Header and Payload info.\u003c/p\u003e\n    \u003c/div\u003e\n\n    \u003cdiv class=\"tool-workspace\"\u003e\n        \u003cdiv class=\"tool-input-group\"\u003e\n            \u003clabel for=\"main-input\"\u003eJWT Token\u003c/label\u003e\n            \u003ctextarea id=\"main-input\" placeholder=\"Paste eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9... here\"\u003e\u003c/textarea\u003e\n        \u003c/div\u003e\n\n        \u003cdiv class=\"tool-actions\"\u003e\n            \u003cbutton id=\"main-decode\" class=\"btn-primary\"\u003eDecode Token\u003c/button\u003e\n            \u003cbutton id=\"main-clear\" class=\"btn-secondary\"\u003eClear\u003c/button\u003e\n        \u003c/div\u003e\n\n        \u003cdiv id=\"main-status\" class=\"tool-status\"\u003e\u003c/div\u003e\n\n        \u003cdiv class=\"jwt-result-grid\"\u003e\n            \u003cdiv class=\"jwt-result-item\"\u003e\n                \u003ch4\u003eHeader\u003c/h4\u003e\n                \u003cpre id=\"main-header\"\u003eWaiting for decode...\u003c/pre\u003e\n            \u003c/div\u003e\n            \u003cdiv class=\"jwt-result-item\"\u003e\n                \u003ch4\u003ePayload\u003c/h4\u003e\n                \u003cpre id=\"main-payload\"\u003eWaiting for decode...\u003c/pre\u003e\n            \u003c/div\u003e\n        \u003c/div\u003e\n    \u003c/div\u003e\n\u003c/div\u003e\n\n\u003cstyle\u003e\n.tool-container { background: var(--code-bg); padding: 1.5rem; border-radius: 8px; border: 1px solid var(--border); margin: 1rem 0; }\n.tool-header { margin-bottom: 1rem; }\n.tool-header h3 { margin: 0 0 0.5rem 0; color: var(--primary); }\n.tool-desc { margin: 0; font-size: 0.9rem; color: var(--secondary); }\n.tool-workspace { display: flex; flex-direction: column; gap: 1rem; }\n.tool-input-group { display: flex; flex-direction: column; gap: 0.5rem; }\n.tool-input-group label { font-weight: bold; font-size: 0.9rem; }\ntextarea { width: 100%; min-height: 100px; padding: 0.8rem; border: 1px solid var(--border); border-radius: 4px; background: var(--entry); color: var(--primary); font-family: monospace; resize: vertical; box-sizing: border-box; }\ntextarea:focus { outline: 2px solid var(--primary); border-color: transparent; }\n.tool-actions { display: flex; gap: 0.5rem; }\n.btn-primary, .btn-secondary { padding: 0.6rem 1.2rem; border: none; border-radius: 4px; cursor: pointer; font-weight: bold; transition: opacity 0.2s; }\n.btn-primary { background: var(--primary); color: var(--code-bg); }\n.btn-secondary { background: var(--border); color: var(--primary); }\n.btn-primary:hover, .btn-secondary:hover { opacity: 0.8; }\n.tool-status { font-size: 0.85rem; min-height: 1.2em; }\n.status-error { color: #ff4d4f; }\n.status-success { color: #52c41a; }\n.jwt-result-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }\n.jwt-result-item { background: var(--entry); padding: 1rem; border-radius: 4px; border: 1px solid var(--border); }\n.jwt-result-item h4 { margin: 0 0 0.5rem 0; color: var(--primary); font-size: 1rem; border-bottom: 1px solid var(--border); padding-bottom: 0.3rem; }\n.jwt-result-item pre { margin: 0; white-space: pre-wrap; word-wrap: break-word; font-size: 0.85rem; color: var(--secondary); }\n@media (max-width: 768px) { .jwt-result-grid { grid-template-columns: 1fr; } }\n\u003c/style\u003e\n\n\u003cscript\u003e\n(function() {\n    const input = document.getElementById('main-input');\n    const decodeBtn = document.getElementById('main-decode');\n    const clearBtn = document.getElementById('main-clear');\n    const headerOut = document.getElementById('main-header');\n    const payloadOut = document.getElementById('main-payload');\n    const status = document.getElementById('main-status');\n\n    function parseJwt(token) {\n        const base64Url = token.split('.')[1];\n        if (!base64Url) throw new Error('Invalid Token Format');\n        const base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');\n        const jsonPayload = decodeURIComponent(atob(base64).split('').map(function(c) {\n            return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);\n        }).join(''));\n        return JSON.parse(jsonPayload);\n    }\n\n    function parseHeader(token) {\n        const base64Url = token.split('.')[0];\n        if (!base64Url) throw new Error('Invalid Token Format');\n        const base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');\n        const jsonPayload = decodeURIComponent(atob(base64).split('').map(function(c) {\n            return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);\n        }).join(''));\n        return JSON.parse(jsonPayload);\n    }\n\n    decodeBtn.addEventListener('click', () =\u003e {\n        const val = input.value.trim();\n        if (!val) {\n            status.textContent = 'Please enter content';\n            status.className = 'tool-status status-error';\n            return;\n        }\n\n        try {\n            const header = parseHeader(val);\n            const payload = parseJwt(val);\n            \n            headerOut.textContent = JSON.stringify(header, null, 2);\n            payloadOut.textContent = JSON.stringify(payload, null, 2);\n            \n            status.textContent = 'Success';\n            status.className = 'tool-status status-success';\n        } catch (e) {\n            headerOut.textContent = 'Parse failed';\n            payloadOut.textContent = 'Parse failed';\n            status.textContent = 'Format error, please check input：' + e.message;\n            status.className = 'tool-status status-error';\n        }\n    });\n\n    clearBtn.addEventListener('click', () =\u003e {\n        input.value = '';\n        headerOut.textContent = 'Waiting for decode...';\n        payloadOut.textContent = 'Waiting for decode...';\n        status.textContent = '';\n        status.className = 'tool-status';\n    });\n})();\n\u003c/script\u003e\n\u003ch3 id=\"what-is-a-jwt\"\u003eWhat is a JWT?\u003c/h3\u003e\n\u003cp\u003eJWT (JSON Web Token) is an open standard (RFC 7519) that defines a compact and self-contained way for securely transmitting information between parties as a JSON object. It is commonly used for authentication after a user logs in.\u003c/p\u003e","title":"Online JWT Decoder - JSON Web Token Debugger"},{"content":" Lorem Ipsum Generator Generate standard dummy text for layout testing.\nParagraphs Sentences Words Quantity Generate Copy Clear Result What is Lorem Ipsum? Lorem Ipsum is standard dummy text used in printing, typesetting, and web design. It consists of Latin words that look like meaningful sentences but have no actual meaning.\nWhy use dummy text? Focus on Design: Real text can distract readers, making them focus on content rather than the layout. Visual Presentation: The letter distribution of Lorem Ipsum is relatively uniform, realistically reflecting the visual effect of fonts and typesetting. Fill Layout: Quickly fill the page to view the overall structure when content is not yet ready. How to use this tool? Select the type: Paragraphs, Sentences, or Words. Enter the quantity: e.g., generate 5 paragraphs. Click the \u0026ldquo;Generate\u0026rdquo; button to get the standard Lorem Ipsum text. ","permalink":"https://www.webpenson.com/en/tools/lorem-ipsum/","summary":"\u003cdiv class=\"tool-container\" id=\"main-tool\"\u003e\n    \u003cdiv class=\"tool-header\"\u003e\n        \u003ch3\u003eLorem Ipsum Generator\u003c/h3\u003e\n        \u003cp class=\"tool-desc\"\u003eGenerate standard dummy text for layout testing.\u003c/p\u003e\n    \u003c/div\u003e\n\n    \u003cdiv class=\"tool-workspace\"\u003e\n        \u003cdiv class=\"tool-options\"\u003e\n            \u003cdiv class=\"option-item\"\u003e\n                \u003cinput type=\"radio\" id=\"main-para\" name=\"main-mode\" value=\"para\" checked\u003e\n                \u003clabel for=\"main-para\"\u003eParagraphs\u003c/label\u003e\n            \u003c/div\u003e\n            \u003cdiv class=\"option-item\"\u003e\n                \u003cinput type=\"radio\" id=\"main-sent\" name=\"main-mode\" value=\"sent\"\u003e\n                \u003clabel for=\"main-sent\"\u003eSentences\u003c/label\u003e\n            \u003c/div\u003e\n            \u003cdiv class=\"option-item\"\u003e\n                \u003cinput type=\"radio\" id=\"main-word\" name=\"main-mode\" value=\"word\"\u003e\n                \u003clabel for=\"main-word\"\u003eWords\u003c/label\u003e\n            \u003c/div\u003e\n        \u003c/div\u003e\n\n        \u003cdiv class=\"tool-input-group\"\u003e\n            \u003clabel for=\"main-count\"\u003eQuantity\u003c/label\u003e\n            \u003cinput type=\"number\" id=\"main-count\" value=\"3\" min=\"1\" max=\"100\" class=\"tool-number-input\"\u003e\n        \u003c/div\u003e\n\n        \u003cdiv class=\"tool-actions\"\u003e\n            \u003cbutton id=\"main-generate\" class=\"btn-primary\"\u003eGenerate\u003c/button\u003e\n            \u003cbutton id=\"main-copy\" class=\"btn-secondary\"\u003eCopy\u003c/button\u003e\n            \u003cbutton id=\"main-clear\" class=\"btn-secondary\"\u003eClear\u003c/button\u003e\n        \u003c/div\u003e\n\n        \u003cdiv class=\"tool-output-group\"\u003e\n            \u003clabel for=\"main-output\"\u003eResult\u003c/label\u003e\n            \u003ctextarea id=\"main-output\" readonly placeholder=\"Generated text will appear here...\"\u003e\u003c/textarea\u003e\n        \u003c/div\u003e\n        \n        \u003cdiv id=\"main-status\" class=\"tool-status\"\u003e\u003c/div\u003e\n    \u003c/div\u003e\n\u003c/div\u003e\n\n\u003cstyle\u003e\n.tool-container { background: var(--code-bg); padding: 1.5rem; border-radius: 8px; border: 1px solid var(--border); margin: 1rem 0; }\n.tool-header { margin-bottom: 1rem; }\n.tool-header h3 { margin: 0 0 0.5rem 0; color: var(--primary); }\n.tool-desc { margin: 0; font-size: 0.9rem; color: var(--secondary); }\n.tool-workspace { display: flex; flex-direction: column; gap: 1rem; }\n.tool-options { display: flex; flex-wrap: wrap; gap: 1rem; background: var(--entry); padding: 0.5rem; border-radius: 4px; border: 1px solid var(--border); }\n.option-item { display: flex; align-items: center; gap: 0.3rem; }\n.tool-input-group { display: flex; flex-direction: column; gap: 0.5rem; }\n.tool-input-group label { font-weight: bold; font-size: 0.9rem; }\n.tool-number-input { width: 100%; padding: 0.8rem; border: 1px solid var(--border); border-radius: 4px; background: var(--entry); color: var(--primary); font-family: monospace; box-sizing: border-box; }\n.tool-number-input:focus { outline: 2px solid var(--primary); border-color: transparent; }\n.tool-actions { display: flex; gap: 0.5rem; }\n.btn-primary, .btn-secondary { padding: 0.6rem 1.2rem; border: none; border-radius: 4px; cursor: pointer; font-weight: bold; transition: opacity 0.2s; }\n.btn-primary { background: var(--primary); color: var(--code-bg); }\n.btn-secondary { background: var(--border); color: var(--primary); }\n.btn-primary:hover, .btn-secondary:hover { opacity: 0.8; }\n.tool-output-group { display: flex; flex-direction: column; gap: 0.5rem; }\n.tool-output-group label { font-weight: bold; font-size: 0.9rem; }\ntextarea { width: 100%; min-height: 150px; padding: 0.8rem; border: 1px solid var(--border); border-radius: 4px; background: var(--entry); color: var(--primary); font-family: monospace; resize: vertical; box-sizing: border-box; }\ntextarea:focus { outline: 2px solid var(--primary); border-color: transparent; }\n.tool-status { font-size: 0.85rem; min-height: 1.2em; }\n.status-error { color: #ff4d4f; }\n.status-success { color: #52c41a; }\n\u003c/style\u003e\n\n\u003cscript\u003e\n(function() {\n    const container = document.getElementById('main-tool');\n    const output = document.getElementById('main-output');\n    const countInput = document.getElementById('main-count');\n    const generateBtn = document.getElementById('main-generate');\n    const copyBtn = document.getElementById('main-copy');\n    const clearBtn = document.getElementById('main-clear');\n    const status = document.getElementById('main-status');\n\n    \n    const words = [\n        'lorem', 'ipsum', 'dolor', 'sit', 'amet', 'consectetur', 'adipiscing', 'elit',\n        'sed', 'do', 'eiusmod', 'tempor', 'incididunt', 'ut', 'labore', 'et', 'dolore',\n        'magna', 'aliqua', 'enim', 'ad', 'minim', 'veniam', 'quis', 'nostrud',\n        'exercitation', 'ullamco', 'laboris', 'nisi', 'aliquip', 'ex', 'ea', 'commodo',\n        'consequat', 'duis', 'aute', 'irure', 'in', 'reprehenderit', 'voluptate',\n        'velit', 'esse', 'cillum', 'fugiat', 'nulla', 'pariatur', 'excepteur', 'sint',\n        'occaecat', 'cupidatat', 'non', 'proident', 'sunt', 'culpa', 'qui', 'officia',\n        'deserunt', 'mollit', 'anim', 'id', 'est', 'laborum'\n    ];\n\n    \n    function generateSentence() {\n        const len = Math.floor(Math.random() * 10) + 5; \n        let sentence = [];\n        for (let i = 0; i \u003c len; i++) {\n            sentence.push(words[Math.floor(Math.random() * words.length)]);\n        }\n        return sentence.join(' ') + '.';\n    }\n\n    \n    function generateParagraph() {\n        const len = Math.floor(Math.random() * 4) + 3; \n        let para = [];\n        for (let i = 0; i \u003c len; i++) {\n            para.push(generateSentence());\n        }\n        return para.join(' ');\n    }\n\n    \n    function generateWords(count) {\n        let result = [];\n        for (let i = 0; i \u003c count; i++) {\n            result.push(words[Math.floor(Math.random() * words.length)]);\n        }\n        return result.join(' ');\n    }\n\n    generateBtn.addEventListener('click', () =\u003e {\n        const mode = container.querySelector(`input[name=\"main-mode\"]:checked`).value;\n        const count = parseInt(countInput.value) || 1;\n\n        let result = '';\n\n        if (mode === 'para') {\n            for (let i = 0; i \u003c count; i++) {\n                result += generateParagraph();\n                if (i \u003c count - 1) result += '\\n\\n';\n            }\n        } else if (mode === 'sent') {\n            for (let i = 0; i \u003c count; i++) {\n                result += generateSentence();\n                if (i \u003c count - 1) result += ' ';\n            }\n        } else if (mode === 'word') {\n            result = generateWords(count);\n        }\n\n        output.value = result;\n        status.textContent = 'Success';\n        status.className = 'tool-status status-success';\n    });\n\n    copyBtn.addEventListener('click', () =\u003e {\n        if (!output.value) {\n            status.textContent = 'Please enter content';\n            status.className = 'tool-status status-error';\n            return;\n        }\n        output.select();\n        document.execCommand('copy');\n        status.textContent = 'Copied to clipboard';\n        status.className = 'tool-status status-success';\n    });\n\n    clearBtn.addEventListener('click', () =\u003e {\n        output.value = '';\n        status.textContent = '';\n        status.className = 'tool-status';\n    });\n})();\n\u003c/script\u003e\n\u003ch3 id=\"what-is-lorem-ipsum\"\u003eWhat is Lorem Ipsum?\u003c/h3\u003e\n\u003cp\u003eLorem Ipsum is standard dummy text used in printing, typesetting, and web design. It consists of Latin words that look like meaningful sentences but have no actual meaning.\u003c/p\u003e","title":"Online Lorem Ipsum Generator - Random Paragraphs"},{"content":" Regex Tester \u0026amp; Explainer Test and validate regex expressions online with real-time match highlighting and syntax explanation.\nEmail Phone URL Date Color IP Address Regex Pattern Test Global Ignore Case Multiline Test Text 示例文本: 联系邮箱: test@example.com 联系电话: 010-12345678 网站: https://www.example.com 日期: 2026-05-15 颜色: #FF5733 IP地址: 192.168.1.100 Matches: 0 Groups: 0 Match Highlight Syntax Explanation Match Details Copy Text Clear What is Regular Expression? A Regular Expression (Regex) is a pattern used to match combinations of characters in text. It\u0026rsquo;s widely used in text processing, data validation, search and replace operations.\nHow to Use This Tool? Select Preset: Click preset buttons (like \u0026ldquo;Email\u0026rdquo;, \u0026ldquo;Phone\u0026rdquo;) to quickly load common patterns. Enter Pattern: Type or modify your regex pattern in the input field. Enter Test Text: Input the text you want to test in the text area below. View Results: See real-time match highlighting and group details. Common Regex Patterns Scenario Pattern Description Email [a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,} Match email addresses Phone \\d{3,4}-?\\d{7,8} Match domestic phone numbers URL https?://[^\\s]+ Match web links Date \\d{4}-\\d{2}-\\d{2} Match YYYY-MM-DD format Color #[0-9A-Fa-f]{6} Match hex color codes IP Address \\b\\d{1,3}\\.\\d{1,3}\\.\\d{1,3}\\.\\d{1,3}\\b Match IPv4 addresses FAQ Is this tool secure? Absolutely secure. This tool runs entirely in your browser; no data is uploaded to any server.\nWhat regex syntax is supported? This tool supports JavaScript regex syntax, including:\nCharacter classes: [abc], [^abc], \\d, \\w, \\s Quantifiers: *, +, ?, {n}, {n,}, {n,m} Anchors: ^, $, \\b Groups: (...), (?:...), (...) How to ignore case? Check the \u0026ldquo;Ignore Case\u0026rdquo; option to make pattern matching case-insensitive.\n","permalink":"https://www.webpenson.com/en/tools/regex-tester/","summary":"\u003cdiv class=\"regex-tester-tool\"\u003e\n    \u003cstyle\u003e\n        .regex-tester-tool {\n            --primary-color: #2563eb;\n            --primary-hover: #1d4ed8;\n            --bg-color: #f8fafc;\n            --card-bg: #ffffff;\n            --text-main: #1e293b;\n            --text-muted: #64748b;\n            --border-color: #e2e8f0;\n            --radius: 12px;\n            --shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);\n            --error-color: #ef4444;\n            --success-color: #10b981;\n            --match-bg: #fef3c7;\n            --group1-bg: #dbeafe;\n            --group2-bg: #dcfce7;\n            --group3-bg: #fae2e2;\n        }\n\n        [data-theme=\"dark\"] .regex-tester-tool {\n            --bg-color: #0f172a;\n            --card-bg: #1e293b;\n            --text-main: #e2e8f0;\n            --text-muted: #94a3b8;\n            --border-color: #334155;\n            --match-bg: #78350f;\n            --group1-bg: #1e3a5f;\n            --group2-bg: #14532d;\n            --group3-bg: #7f1d1d;\n        }\n\n        .regex-tester-tool * {\n            box-sizing: border-box;\n            margin: 0;\n            padding: 0;\n        }\n\n        .regex-tester-tool {\n            font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\n            background-color: var(--bg-color);\n            color: var(--text-main);\n            line-height: 1.6;\n            margin: 20px 0;\n        }\n\n        .regex-container {\n            max-width: 100%;\n            margin: 0;\n            padding: 0;\n        }\n\n        .regex-card {\n            background: var(--card-bg);\n            border-radius: var(--radius);\n            box-shadow: var(--shadow);\n            padding: 24px;\n            border: 1px solid var(--border-color);\n            margin: 20px 0;\n        }\n\n        .regex-title {\n            font-size: 1.5rem;\n            font-weight: 700;\n            margin-bottom: 10px;\n            color: var(--text-main);\n        }\n\n        .regex-intro {\n            font-size: 1rem;\n            color: var(--text-muted);\n            margin-bottom: 20px;\n        }\n\n         \n        .regex-presets {\n            display: flex;\n            flex-wrap: wrap;\n            gap: 8px;\n            margin-bottom: 20px;\n        }\n\n        .regex-preset {\n            padding: 6px 14px;\n            background: #eff6ff;\n            border: 1px solid #bfdbfe;\n            border-radius: 20px;\n            font-size: 0.85rem;\n            cursor: pointer;\n            transition: all 0.2s;\n            color: var(--primary-color);\n        }\n\n        [data-theme=\"dark\"] .regex-preset {\n            background: #1e293b;\n            border-color: #334155;\n        }\n\n        .regex-preset:hover {\n            background: var(--primary-color);\n            color: white;\n        }\n\n         \n        .regex-input-section {\n            margin-bottom: 20px;\n        }\n\n        .regex-label {\n            font-weight: 600;\n            margin-bottom: 8px;\n            display: block;\n            color: var(--text-main);\n        }\n\n        .regex-input-group {\n            display: flex;\n            gap: 10px;\n            flex-wrap: wrap;\n        }\n\n        .regex-input {\n            flex: 1;\n            min-width: 200px;\n            padding: 12px 16px;\n            border: 2px solid var(--border-color);\n            border-radius: 8px;\n            font-size: 1rem;\n            font-family: 'Consolas', 'Monaco', monospace;\n            outline: none;\n            transition: border-color 0.2s;\n            background: var(--card-bg);\n            color: var(--text-main);\n        }\n\n        .regex-input:focus{\n            border-color: var(--primary-color);\n        }\n\n        .regex-input.error {\n            border-color: var(--error-color);\n        }\n\n        .regex-input.success {\n            border-color: var(--success-color);\n        }\n\n         \n        .regex-options {\n            display: flex;\n            flex-wrap: wrap;\n            gap: 15px;\n            margin: 15px 0;\n            padding: 15px;\n            background: #f8fafc;\n            border-radius: 8px;\n        }\n\n        [data-theme=\"dark\"] .regex-options {\n            background: #0f172a;\n        }\n\n        .regex-option {\n            display: flex;\n            align-items: center;\n            gap: 6px;\n        }\n\n        .regex-option input[type=\"checkbox\"] {\n            width: 16px;\n            height: 16px;\n        }\n\n        .regex-option label {\n            font-size: 0.9rem;\n            cursor: pointer;\n        }\n\n         \n        .regex-textarea {\n            width: 100%;\n            min-height: 150px;\n            padding: 12px;\n            border: 2px solid var(--border-color);\n            border-radius: 8px;\n            font-family: 'Consolas', 'Monaco', monospace;\n            font-size: 0.95rem;\n            resize: vertical;\n            background: var(--card-bg);\n            color: var(--text-main);\n        }\n\n        .regex-textarea:focus {\n            border-color: var(--primary-color);\n            outline: none;\n        }\n\n         \n        .regex-result {\n            margin-top: 20px;\n        }\n\n        .regex-result-card {\n            padding: 15px;\n            background: #f0fdf4;\n            border: 1px solid #bbf7d0;\n            border-radius: 8px;\n            margin-bottom: 15px;\n        }\n\n        [data-theme=\"dark\"] .regex-result-card {\n            background: #064e3b;\n            border-color: #065f46;\n        }\n\n        .regex-result-title {\n            font-weight: 600;\n            margin-bottom: 10px;\n            color: var(--text-main);\n        }\n\n         \n        .regex-highlight-box {\n            padding: 15px;\n            background: var(--card-bg);\n            border: 1px solid var(--border-color);\n            border-radius: 8px;\n            font-family: 'Consolas', 'Monaco', monospace;\n            word-break: break-all;\n            white-space: pre-wrap;\n            line-height: 1.8;\n            max-height: 300px;\n            overflow-y: auto;\n        }\n\n        .regex-match {\n            background: var(--match-bg);\n            padding: 2px 4px;\n            border-radius: 3px;\n            font-weight: 500;\n        }\n\n        .regex-group-1 {\n            background: var(--group1-bg);\n        }\n\n        .regex-group-2 {\n            background: var(--group2-bg);\n        }\n\n        .regex-group-3 {\n            background: var(--group3-bg);\n        }\n\n         \n        .regex-explain {\n            padding: 15px;\n            background: #fef9c3;\n            border-radius: 8px;\n            font-size: 0.9rem;\n        }\n\n        [data-theme=\"dark\"] .regex-explain {\n            background: #78350f;\n        }\n\n        .regex-explain-item {\n            margin-bottom: 8px;\n            padding-left: 15px;\n            border-left: 3px solid var(--primary-color);\n        }\n\n        .regex-explain-item code {\n            background: rgba(0,0,0,0.1);\n            padding: 2px 6px;\n            border-radius: 4px;\n            font-family: monospace;\n        }\n\n         \n        .regex-btn {\n            padding: 10px 20px;\n            border-radius: 8px;\n            border: none;\n            font-weight: 600;\n            cursor: pointer;\n            transition: 0.2s;\n            font-size: 0.95rem;\n        }\n\n        .regex-btn-primary {\n            background-color: var(--primary-color);\n            color: white;\n        }\n\n        .regex-btn-primary:hover {\n            background-color: var(--primary-hover);\n        }\n\n        .regex-btn-secondary {\n            background-color: white;\n            border: 1px solid var(--border-color);\n            color: var(--text-main);\n        }\n\n        [data-theme=\"dark\"] .regex-btn-secondary {\n            background-color: #1e293b;\n        }\n\n        .regex-btn-secondary:hover {\n            background-color: #f1f5f9;\n        }\n\n         \n        .regex-error {\n            padding: 12px;\n            background: #fef2f2;\n            border: 1px solid #fecaca;\n            border-radius: 8px;\n            color: var(--error-color);\n            margin-top: 10px;\n            display: none;\n        }\n\n        .regex-error.show {\n            display: block;\n        }\n\n         \n        .regex-stats {\n            display: flex;\n            gap: 20px;\n            margin: 10px 0;\n            flex-wrap: wrap;\n        }\n\n        .regex-stat {\n            padding: 8px 16px;\n            background: #eff6ff;\n            border-radius: 20px;\n            font-size: 0.9rem;\n        }\n\n        [data-theme=\"dark\"] .regex-stat {\n            background: #1e293b;\n        }\n\n        .regex-stat strong {\n            color: var(--primary-color);\n        }\n    \u003c/style\u003e\n\n    \u003cdiv class=\"regex-container\"\u003e\n        \u003cdiv class=\"regex-card\"\u003e\n            \u003ch2 class=\"regex-title\"\u003eRegex Tester \u0026amp; Explainer\u003c/h2\u003e\n            \u003cp class=\"regex-intro\"\u003eTest and validate regex expressions online with real-time match highlighting and syntax explanation.\u003c/p\u003e","title":"Online Regex Tester - Real-time Match Highlighting"},{"content":" Specialized Lorem Ipsum Generator Generate fun placeholder text with specific themes.\nSelect Theme Food Corporate Tech Hipster Paragraphs Sentences Words Quantity Generate Copy Clear Result What is Specialized Lorem Ipsum? Specialized Lorem Ipsum is an extension of traditional Lorem Ipsum. Instead of obscure Latin, it generates placeholder text based on specific themes (e.g., food, corporate, tech).\nWhy use Specialized Lorem Ipsum? Add Fun: Compared to obscure Latin, fun themed text makes the design review process more relaxed. Realistic Scenarios: For example, using \u0026ldquo;Food Ipsum\u0026rdquo; for a food blog design直观ly shows the impact of long words (like \u0026ldquo;Cappuccino\u0026rdquo;) on layout. Inspiration: Specific vocabulary might bring unexpected inspiration to the design. How to use this tool? Select a theme: e.g., \u0026ldquo;Food\u0026rdquo;, \u0026ldquo;Corporate\u0026rdquo;, or \u0026ldquo;Tech\u0026rdquo;. Select the type: Paragraphs, Sentences, or Words. Enter the quantity and click \u0026ldquo;Generate\u0026rdquo;. ","permalink":"https://www.webpenson.com/en/tools/specialized-lorem/","summary":"\u003cdiv class=\"tool-container\" id=\"main-tool\"\u003e\n    \u003cdiv class=\"tool-header\"\u003e\n        \u003ch3\u003eSpecialized Lorem Ipsum Generator\u003c/h3\u003e\n        \u003cp class=\"tool-desc\"\u003eGenerate fun placeholder text with specific themes.\u003c/p\u003e\n    \u003c/div\u003e\n\n    \u003cdiv class=\"tool-workspace\"\u003e\n        \u003cdiv class=\"tool-theme-select\"\u003e\n            \u003clabel for=\"main-theme\"\u003eSelect Theme\u003c/label\u003e\n            \u003cselect id=\"main-theme\" class=\"tool-select\"\u003e\n                \u003coption value=\"food\"\u003eFood\u003c/option\u003e\n                \u003coption value=\"corporate\"\u003eCorporate\u003c/option\u003e\n                \u003coption value=\"tech\"\u003eTech\u003c/option\u003e\n                \u003coption value=\"hipster\"\u003eHipster\u003c/option\u003e\n            \u003c/select\u003e\n        \u003c/div\u003e\n\n        \u003cdiv class=\"tool-options\"\u003e\n            \u003cdiv class=\"option-item\"\u003e\n                \u003cinput type=\"radio\" id=\"main-para\" name=\"main-mode\" value=\"para\" checked\u003e\n                \u003clabel for=\"main-para\"\u003eParagraphs\u003c/label\u003e\n            \u003c/div\u003e\n            \u003cdiv class=\"option-item\"\u003e\n                \u003cinput type=\"radio\" id=\"main-sent\" name=\"main-mode\" value=\"sent\"\u003e\n                \u003clabel for=\"main-sent\"\u003eSentences\u003c/label\u003e\n            \u003c/div\u003e\n            \u003cdiv class=\"option-item\"\u003e\n                \u003cinput type=\"radio\" id=\"main-word\" name=\"main-mode\" value=\"word\"\u003e\n                \u003clabel for=\"main-word\"\u003eWords\u003c/label\u003e\n            \u003c/div\u003e\n        \u003c/div\u003e\n\n        \u003cdiv class=\"tool-input-group\"\u003e\n            \u003clabel for=\"main-count\"\u003eQuantity\u003c/label\u003e\n            \u003cinput type=\"number\" id=\"main-count\" value=\"3\" min=\"1\" max=\"50\" class=\"tool-number-input\"\u003e\n        \u003c/div\u003e\n\n        \u003cdiv class=\"tool-actions\"\u003e\n            \u003cbutton id=\"main-generate\" class=\"btn-primary\"\u003eGenerate\u003c/button\u003e\n            \u003cbutton id=\"main-copy\" class=\"btn-secondary\"\u003eCopy\u003c/button\u003e\n            \u003cbutton id=\"main-clear\" class=\"btn-secondary\"\u003eClear\u003c/button\u003e\n        \u003c/div\u003e\n\n        \u003cdiv class=\"tool-output-group\"\u003e\n            \u003clabel for=\"main-output\"\u003eResult\u003c/label\u003e\n            \u003ctextarea id=\"main-output\" readonly placeholder=\"Generated text will appear here...\"\u003e\u003c/textarea\u003e\n        \u003c/div\u003e\n        \n        \u003cdiv id=\"main-status\" class=\"tool-status\"\u003e\u003c/div\u003e\n    \u003c/div\u003e\n\u003c/div\u003e\n\n\u003cstyle\u003e\n.tool-container { background: var(--code-bg); padding: 1.5rem; border-radius: 8px; border: 1px solid var(--border); margin: 1rem 0; }\n.tool-header { margin-bottom: 1rem; }\n.tool-header h3 { margin: 0 0 0.5rem 0; color: var(--primary); }\n.tool-desc { margin: 0; font-size: 0.9rem; color: var(--secondary); }\n.tool-workspace { display: flex; flex-direction: column; gap: 1rem; }\n.tool-theme-select { display: flex; flex-direction: column; gap: 0.5rem; }\n.tool-theme-select label { font-weight: bold; font-size: 0.9rem; }\n.tool-select { padding: 0.8rem; border: 1px solid var(--border); border-radius: 4px; background: var(--entry); color: var(--primary); font-family: inherit; box-sizing: border-box; }\n.tool-select:focus { outline: 2px solid var(--primary); border-color: transparent; }\n.tool-options { display: flex; flex-wrap: wrap; gap: 1rem; background: var(--entry); padding: 0.5rem; border-radius: 4px; border: 1px solid var(--border); }\n.option-item { display: flex; align-items: center; gap: 0.3rem; }\n.tool-input-group { display: flex; flex-direction: column; gap: 0.5rem; }\n.tool-input-group label { font-weight: bold; font-size: 0.9rem; }\n.tool-number-input { width: 100%; padding: 0.8rem; border: 1px solid var(--border); border-radius: 4px; background: var(--entry); color: var(--primary); font-family: monospace; box-sizing: border-box; }\n.tool-number-input:focus { outline: 2px solid var(--primary); border-color: transparent; }\n.tool-actions { display: flex; gap: 0.5rem; }\n.btn-primary, .btn-secondary { padding: 0.6rem 1.2rem; border: none; border-radius: 4px; cursor: pointer; font-weight: bold; transition: opacity 0.2s; }\n.btn-primary { background: var(--primary); color: var(--code-bg); }\n.btn-secondary { background: var(--border); color: var(--primary); }\n.btn-primary:hover, .btn-secondary:hover { opacity: 0.8; }\n.tool-output-group { display: flex; flex-direction: column; gap: 0.5rem; }\n.tool-output-group label { font-weight: bold; font-size: 0.9rem; }\ntextarea { width: 100%; min-height: 150px; padding: 0.8rem; border: 1px solid var(--border); border-radius: 4px; background: var(--entry); color: var(--primary); font-family: monospace; resize: vertical; box-sizing: border-box; }\ntextarea:focus { outline: 2px solid var(--primary); border-color: transparent; }\n.tool-status { font-size: 0.85rem; min-height: 1.2em; }\n.status-error { color: #ff4d4f; }\n.status-success { color: #52c41a; }\n\u003c/style\u003e\n\n\u003cscript\u003e\n(function() {\n    const container = document.getElementById('main-tool');\n    const output = document.getElementById('main-output');\n    const countInput = document.getElementById('main-count');\n    const themeSelect = document.getElementById('main-theme');\n    const generateBtn = document.getElementById('main-generate');\n    const copyBtn = document.getElementById('main-copy');\n    const clearBtn = document.getElementById('main-clear');\n    const status = document.getElementById('main-status');\n\n    \n    const themes = {\n        food: [\n            'bacon', 'ipsum', 'dolor', 'meatball', 'sirloin', 'pancetta', 'salami', 'brisket',\n            'short', 'loin', 'ham', 'hock', 'beef', 'ribs', 'shoulder', 'clapton', 'pastrami',\n            'andouille', 'frankfurter', 'biltong', 'jerky', 'chicken', 'turkey', 'pork', 'chop',\n            'tenderloin', 'prosciutto', 'leberkas', 'swine', 'jowl', 'kebab', 'skirt', 'steak',\n            'cupcake', 'jelly', 'sweet', 'roll', 'topping', 'chocolate', 'bar', 'candy', 'canes',\n            'cotton', 'cake', 'pie', 'fruit', 'cake', 'danish', 'muffin', 'donut', 'macaroon'\n        ],\n        corporate: [\n            'synergy', 'ipsum', 'dolor', 'leverage', 'agile', 'paradigm', 'scalable', 'cross-platform',\n            'bandwidth', 'web', '2.0', 'strategic', 'initiative', 'holistic', 'empower', 'visionary',\n            'collaboration', 'backend', 'frontend', 'solution', 'value-added', 'disruptive', 'innovative',\n            'streamline', 'proactive', 'dynamic', 'best-of-breed', 'mission-critical', 'enterprise',\n            'deliverables', 'benchmark', 'pivot', 'growth', 'hacking', 'silicon', 'valley', 'startup',\n            'investor', 'pitch', 'deck', 'roi', 'kpi', 'q1', 'q2', 'q3', 'q4', 'fiscal', 'year'\n        ],\n        tech: [\n            'lorem', 'ipsum', 'dolor', 'algorithm', 'api', 'array', 'binary', 'bit', 'byte', 'cache',\n            'cloud', 'compile', 'cpu', 'cyber', 'data', 'database', 'debug', 'digital', 'dns', 'domain',\n            'encryption', 'ethernet', 'firewall', 'framework', 'frontend', 'git', 'github', 'gpu',\n            'hacker', 'hardware', 'html', 'http', 'https', 'icon', 'interface', 'internet', 'ip', 'java',\n            'javascript', 'json', 'kernel', 'keyboard', 'latency', 'linux', 'logic', 'machine', 'learning',\n            'mainframe', 'malware', 'memory', 'microservice', 'monitor', 'motherboard', 'mouse', 'network',\n            'node', 'object', 'operating', 'system', 'pixel', 'plugin', 'processor', 'program', 'python',\n            'ram', 'react', 'router', 'ruby', 'satellite', 'script', 'server', 'software', 'sql', 'ssl',\n            'syntax', 'tablet', 'tcp', 'terminal', 'token', 'typescript', 'unix', 'url', 'usb', 'user',\n            'interface', 'ux', 'variable', 'virtual', 'reality', 'virus', 'voip', 'webcam', 'widget',\n            'wifi', 'windows', 'worm', 'xml', 'zip'\n        ],\n        hipster: [\n            'artisan', 'ipsum', 'dolor', 'brooklyn', 'vaporware', 'etsy', 'pabst', 'authentic', 'next',\n            'level', 'seitan', 'locavore', 'cornhole', 'selvage', 'neutra', 'forage', 'ethical', 'food',\n            'truck', 'pbr\u0026b', 'tote', 'bag', 'portland', 'shabby', 'chic', 'occupy', 'single-origin',\n            'coffee', 'you', 'probably', 'haven\\'t', 'heard', 'of', 'them', 'squid', '90\\'s', 'pop-up',\n            ' biodiesel', 'tumblr', 'raw', 'denim', 'kogi', 'kitsch', 'synth', 'retro', 'mustache',\n            'williamsburg', 'polaroid', 'freegan', 'mumblecore', 'pickled', 'direct', 'trade', 'wabi-sabi',\n            'all', 'goddamn', 'day', 'gastropub', 'umami', 'glo-fi', 'assymetrical'\n        ]\n    };\n\n    \n    function generateSentence(wordList) {\n        const len = Math.floor(Math.random() * 10) + 5; \n        let sentence = [];\n        for (let i = 0; i \u003c len; i++) {\n            sentence.push(wordList[Math.floor(Math.random() * wordList.length)]);\n        }\n        return sentence.join(' ') + '.';\n    }\n\n    \n    function generateParagraph(wordList) {\n        const len = Math.floor(Math.random() * 4) + 3; \n        let para = [];\n        for (let i = 0; i \u003c len; i++) {\n            para.push(generateSentence(wordList));\n        }\n        return para.join(' ');\n    }\n\n    \n    function generateWords(wordList, count) {\n        let result = [];\n        for (let i = 0; i \u003c count; i++) {\n            result.push(wordList[Math.floor(Math.random() * wordList.length)]);\n        }\n        return result.join(' ');\n    }\n\n    generateBtn.addEventListener('click', () =\u003e {\n        const theme = themeSelect.value;\n        const mode = container.querySelector(`input[name=\"main-mode\"]:checked`).value;\n        const count = parseInt(countInput.value) || 1;\n        const wordList = themes[theme];\n\n        let result = '';\n\n        if (mode === 'para') {\n            for (let i = 0; i \u003c count; i++) {\n                result += generateParagraph(wordList);\n                if (i \u003c count - 1) result += '\\n\\n';\n            }\n        } else if (mode === 'sent') {\n            for (let i = 0; i \u003c count; i++) {\n                result += generateSentence(wordList);\n                if (i \u003c count - 1) result += ' ';\n            }\n        } else if (mode === 'word') {\n            result = generateWords(wordList, count);\n        }\n\n        output.value = result;\n        status.textContent = 'Success';\n        status.className = 'tool-status status-success';\n    });\n\n    copyBtn.addEventListener('click', () =\u003e {\n        if (!output.value) {\n            status.textContent = 'Please enter content';\n            status.className = 'tool-status status-error';\n            return;\n        }\n        output.select();\n        document.execCommand('copy');\n        status.textContent = 'Copied to clipboard';\n        status.className = 'tool-status status-success';\n    });\n\n    clearBtn.addEventListener('click', () =\u003e {\n        output.value = '';\n        status.textContent = '';\n        status.className = 'tool-status';\n    });\n})();\n\u003c/script\u003e\n\u003ch3 id=\"what-is-specialized-lorem-ipsum\"\u003eWhat is Specialized Lorem Ipsum?\u003c/h3\u003e\n\u003cp\u003eSpecialized Lorem Ipsum is an extension of traditional Lorem Ipsum. Instead of obscure Latin, it generates placeholder text based on specific themes (e.g., food, corporate, tech).\u003c/p\u003e","title":"Online Specialized Lorem Ipsum Generator - Themed Dummy Text"},{"content":" Enter SQL Code Format SQL Copy Result Formatted Result What is a SQL Formatter? During database development and operations, we often encounter complex SQL query statements. These statements can become difficult to read due to missing indentation, inconsistent casing, or lack of comments. SQL Formatter automatically converts messy SQL code into a clear, standardized format. It helps developers quickly locate logical errors and improves code readability during team collaboration.\nHow to use this tool? Our tool is designed to be intuitive and requires just a few steps:\nInput Data: Paste or type your raw SQL code into the left input box. Execute Action: Click the \u0026ldquo;Format SQL\u0026rdquo; button. Get Results: The right output box will immediately display the beautified and formatted SQL code. Copy \u0026amp; Use: Click the \u0026ldquo;Copy Result\u0026rdquo; button to paste the formatted code into your editor or database client. Core Features Intelligent Formatting: Automatically identifies SQL keywords (like SELECT, FROM, WHERE) and applies line breaks and indentation for optimal readability. Pure Client-Side Security: This tool runs entirely in your local browser. Your data will not be uploaded to any server, ensuring the privacy of your database code. Multi-Dialect Support: The underlying library supports standard SQL as well as common variants like T-SQL (SQL Server) and PL/SQL (Oracle). Instant Feedback: No network requests needed, processing happens instantly upon input, providing a smooth experience. Frequently Asked Questions (FAQ) Is this tool safe? Absolutely safe. This tool runs entirely in your browser locally (pure client-side processing). Your data will not be uploaded to any server.\nWhich database SQL syntax does it support? It currently supports standard SQL and common variants. If you have specific database syntax needs (like MySQL, PostgreSQL, Oracle), the tool aims to maintain general compatibility.\nWhy does the formatted code look different now? The purpose of the formatter is to standardize code style. It adjusts spaces, line breaks, and casing (usually keywords become uppercase or lowercase depending on configuration), but it does not alter the logical meaning of the SQL.\n","permalink":"https://www.webpenson.com/en/tools/sql-formatter/","summary":"\u003c!-- 1. SEO Structured Data (Schema.org JSON-LD) --\u003e\n\u003cscript type=\"application/ld+json\"\u003e\n{\n  \"@context\": \"https://schema.org\",\n  \"@type\": \"SoftwareApplication\",\n  \"name\": \"SQL Formatter\",\n  \"applicationCategory\": \"DeveloperApplication\",\n  \"operatingSystem\": \"Web\",\n  \"offers\": {\n    \"@type\": \"Offer\",\n    \"price\": \"0\",\n    \"priceCurrency\": \"USD\"\n  },\n  \"description\": \"A free online tool for beautifying SQL code, supporting various SQL dialects.\"\n}\n\u003c/script\u003e\n\u003c!-- 2. Call Shortcode (Tool Core) --\u003e\n\n\n\n\u003cscript src=\"/js/sql-formatter.min.js\"\u003e\u003c/script\u003e\n\n\u003cdiv class=\"tool-container sql-formatter\"\u003e\n  \u003cdiv class=\"input-group\"\u003e\n    \u003clabel for=\"sql-input\"\u003eEnter SQL Code\u003c/label\u003e\n    \u003ctextarea id=\"sql-input\" placeholder=\"Paste or type your SQL statement here...\"\u003e\u003c/textarea\u003e\n    \u003cdiv class=\"buttons\"\u003e\n      \u003cbutton type=\"button\" onclick=\"formatSQL()\"\u003eFormat SQL\u003c/button\u003e\n      \u003cbutton type=\"button\" onclick=\"copyResult()\"\u003eCopy Result\u003c/button\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n\n  \u003cdiv class=\"output-group\"\u003e\n    \u003clabel for=\"sql-output\"\u003eFormatted Result\u003c/label\u003e\n    \u003ctextarea id=\"sql-output\" readonly\u003e\u003c/textarea\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n\n\u003cscript\u003e\n  function formatSQL() {\n    const input = document.getElementById('sql-input').value;\n    const outputArea = document.getElementById('sql-output');\n    \n    if (!input.trim()) {\n      outputArea.value = 'Please enter some SQL code.';\n      return;\n    }\n\n    try {\n      \n      const formatted = window.sqlFormatter.format(input, {\n        language: 'sql',\n        indent: '  '\n      });\n      outputArea.value = formatted;\n    } catch (error) {\n      outputArea.value = 'Formatting Error: ' + error.message;\n    }\n  }\n\n  function copyResult() {\n    const output = document.getElementById('sql-output');\n    output.select();\n    \n    \n    document.execCommand('copy');\n    alert('Copied to clipboard!');\n  }\n\u003c/script\u003e\n\n\u003cstyle\u003e\n  .sql-formatter { \n    font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif; \n    max-width: 100%;\n    margin: 0 auto;\n  }\n  .input-group, .output-group { \n    margin-bottom: 1rem; \n    width: 100%;\n  }\n  textarea { \n    width: 100%; \n    min-height: 200px; \n    padding: 0.75rem; \n    border: 1px solid #ddd; \n    border-radius: 6px; \n    font-family: 'Courier New', monospace; \n    font-size: 0.95rem;\n    box-sizing: border-box;\n    resize: vertical;\n  }\n  .buttons { \n    margin-top: 0.75rem; \n    text-align: right;\n  }\n  .buttons button { \n    padding: 0.5rem 1.25rem; \n    margin-left: 0.5rem;\n    background: #007cba; \n    color: white; \n    border: none; \n    border-radius: 6px; \n    cursor: pointer; \n    font-size: 1rem;\n  }\n  .buttons button:hover { \n    background: #005a87; \n  }\n   \n  @media (max-width: 480px) {\n    .buttons button { margin-bottom: 0.5rem; }\n  }\n\u003c/style\u003e\n\u003ch3 id=\"what-is-a-sql-formatter\"\u003eWhat is a SQL Formatter?\u003c/h3\u003e\n\u003cp\u003eDuring database development and operations, we often encounter complex SQL query statements. These statements can become difficult to read due to missing indentation, inconsistent casing, or lack of comments. \u003cstrong\u003eSQL Formatter\u003c/strong\u003e automatically converts messy SQL code into a clear, standardized format. It helps developers quickly locate logical errors and improves code readability during team collaboration.\u003c/p\u003e","title":"Online SQL Formatter - Free SQL Code Beautifier"},{"content":" Text Case Converter Quickly convert text format, supports camelCase, snake_case, etc.\nInput Content UPPERCASE lowercase Title Case camelCase snake_case kebab-case Convert Clear Result What is Text Case Conversion? A text case converter helps you quickly change the capitalization format of a string. This is useful for programming naming conventions (e.g., changing user name to userName) or copywriting formatting (e.g., changing hello world to Hello World).\nSupported Formats UPPERCASE: All letters are capitalized. Often used for constants or emphasis. lowercase: All letters are lowercase. Often used for URLs or filenames. Title Case: The first letter of each word is capitalized. Often used for article headlines. camelCase: The first word is lowercase, and subsequent words start with a capital letter. Common in Java and JavaScript variable naming. snake_case: Words are connected by underscores, usually all lowercase. Common in Python variable naming. kebab-case: Words are connected by hyphens. Common for CSS class names or URLs. Common Use Cases Variable Naming: Quickly convert copied text into variable names that comply with coding standards. CSS Class Names: Rapidly generate kebab-case formatted class names. Title Normalization: Standardize the capitalization format of article titles. ","permalink":"https://www.webpenson.com/en/tools/text-case-converter/","summary":"\u003cdiv class=\"tool-container\" id=\"main-tool\"\u003e\n    \u003cdiv class=\"tool-header\"\u003e\n        \u003ch3\u003eText Case Converter\u003c/h3\u003e\n        \u003cp class=\"tool-desc\"\u003eQuickly convert text format, supports camelCase, snake_case, etc.\u003c/p\u003e\n    \u003c/div\u003e\n\n    \u003cdiv class=\"tool-workspace\"\u003e\n        \u003cdiv class=\"tool-input-group\"\u003e\n            \u003clabel for=\"main-input\"\u003eInput Content\u003c/label\u003e\n            \u003ctextarea id=\"main-input\" placeholder=\"Enter text here...\"\u003e\u003c/textarea\u003e\n        \u003c/div\u003e\n\n        \u003cdiv class=\"tool-options\"\u003e\n            \u003cdiv class=\"option-item\"\u003e\u003cinput type=\"radio\" id=\"main-upper\" name=\"main-mode\" value=\"upper\"\u003e\u003clabel for=\"main-upper\"\u003eUPPERCASE\u003c/label\u003e\u003c/div\u003e\n            \u003cdiv class=\"option-item\"\u003e\u003cinput type=\"radio\" id=\"main-lower\" name=\"main-mode\" value=\"lower\"\u003e\u003clabel for=\"main-lower\"\u003elowercase\u003c/label\u003e\u003c/div\u003e\n            \u003cdiv class=\"option-item\"\u003e\u003cinput type=\"radio\" id=\"main-title\" name=\"main-mode\" value=\"title\"\u003e\u003clabel for=\"main-title\"\u003eTitle Case\u003c/label\u003e\u003c/div\u003e\n            \u003cdiv class=\"option-item\"\u003e\u003cinput type=\"radio\" id=\"main-camel\" name=\"main-mode\" value=\"camel\"\u003e\u003clabel for=\"main-camel\"\u003ecamelCase\u003c/label\u003e\u003c/div\u003e\n            \u003cdiv class=\"option-item\"\u003e\u003cinput type=\"radio\" id=\"main-snake\" name=\"main-mode\" value=\"snake\"\u003e\u003clabel for=\"main-snake\"\u003esnake_case\u003c/label\u003e\u003c/div\u003e\n            \u003cdiv class=\"option-item\"\u003e\u003cinput type=\"radio\" id=\"main-kebab\" name=\"main-mode\" value=\"kebab\"\u003e\u003clabel for=\"main-kebab\"\u003ekebab-case\u003c/label\u003e\u003c/div\u003e\n        \u003c/div\u003e\n\n        \u003cdiv class=\"tool-actions\"\u003e\n            \u003cbutton id=\"main-convert\" class=\"btn-primary\"\u003eConvert\u003c/button\u003e\n            \u003cbutton id=\"main-clear\" class=\"btn-secondary\"\u003eClear\u003c/button\u003e\n        \u003c/div\u003e\n\n        \u003cdiv class=\"tool-output-group\"\u003e\n            \u003clabel for=\"main-output\"\u003eResult\u003c/label\u003e\n            \u003ctextarea id=\"main-output\" readonly placeholder=\"\"\u003e\u003c/textarea\u003e\n        \u003c/div\u003e\n        \n        \u003cdiv id=\"main-status\" class=\"tool-status\"\u003e\u003c/div\u003e\n    \u003c/div\u003e\n\u003c/div\u003e\n\n\u003cstyle\u003e\n \n.tool-container { background: var(--code-bg); padding: 1.5rem; border-radius: 8px; border: 1px solid var(--border); margin: 1rem 0; }\n.tool-header { margin-bottom: 1rem; }\n.tool-header h3 { margin: 0 0 0.5rem 0; color: var(--primary); }\n.tool-desc { margin: 0; font-size: 0.9rem; color: var(--secondary); }\n.tool-workspace { display: flex; flex-direction: column; gap: 1rem; }\n.tool-input-group, .tool-output-group { display: flex; flex-direction: column; gap: 0.5rem; }\n.tool-input-group label, .tool-output-group label { font-weight: bold; font-size: 0.9rem; }\ntextarea { width: 100%; min-height: 120px; padding: 0.8rem; border: 1px solid var(--border); border-radius: 4px; background: var(--entry); color: var(--primary); font-family: monospace; resize: vertical; box-sizing: border-box; }\ntextarea:focus { outline: 2px solid var(--primary); border-color: transparent; }\n.tool-options { display: flex; flex-wrap: wrap; gap: 1rem; background: var(--entry); padding: 0.5rem; border-radius: 4px; border: 1px solid var(--border); }\n.option-item { display: flex; align-items: center; gap: 0.3rem; }\n.tool-actions { display: flex; gap: 0.5rem; }\n.btn-primary, .btn-secondary { padding: 0.6rem 1.2rem; border: none; border-radius: 4px; cursor: pointer; font-weight: bold; transition: opacity 0.2s; }\n.btn-primary { background: var(--primary); color: var(--code-bg); }\n.btn-secondary { background: var(--border); color: var(--primary); }\n.btn-primary:hover, .btn-secondary:hover { opacity: 0.8; }\n.tool-status { font-size: 0.85rem; min-height: 1.2em; }\n.status-error { color: #ff4d4f; }\n.status-success { color: #52c41a; }\n\u003c/style\u003e\n\n\u003cscript\u003e\n(function() {\n    const container = document.getElementById('main-tool');\n    const input = document.getElementById('main-input');\n    const output = document.getElementById('main-output');\n    const convertBtn = document.getElementById('main-convert');\n    const clearBtn = document.getElementById('main-clear');\n    const status = document.getElementById('main-status');\n\n    \n    \n    function splitWords(str) {\n        \n        let spacedStr = str.replace(/[^a-zA-Z0-9]/g, ' ');\n        \n        \n        spacedStr = spacedStr.replace(/([a-z])([A-Z])/g, '$1 $2');\n        \n        return spacedStr.trim().split(/\\s+/).filter(w =\u003e w.length \u003e 0);\n    }\n\n    convertBtn.addEventListener('click', () =\u003e {\n        const mode = container.querySelector(`input[name=\"main-mode\"]:checked`).value;\n        const val = input.value.trim();\n\n        if (!val) {\n            status.textContent = 'Please enter content';\n            status.className = 'tool-status status-error';\n            return;\n        }\n\n        let result = '';\n\n        \n        if (mode === 'upper') {\n            result = val.toUpperCase();\n        } else if (mode === 'lower') {\n            result = val.toLowerCase();\n        } else {\n            \n            const words = splitWords(val);\n            \n            if (words.length === 0) {\n                status.textContent = 'Format error, please check input';\n                status.className = 'tool-status status-error';\n                return;\n            }\n\n            switch (mode) {\n                case 'title':\n                    \n                    result = words.map(w =\u003e w.charAt(0).toUpperCase() + w.slice(1).toLowerCase()).join(' ');\n                    break;\n\n                case 'camel':\n                    \n                    \n                    const capitalizedWords = words.map(w =\u003e w.charAt(0).toUpperCase() + w.slice(1).toLowerCase());\n                    \n                    if (capitalizedWords.length \u003e 0) {\n                        capitalizedWords[0] = capitalizedWords[0].toLowerCase();\n                    }\n                    \n                    result = capitalizedWords.join('');\n                    break;\n                \n                case 'snake':\n                    \n                    result = words.map(w =\u003e w.toLowerCase()).join('_');\n                    break;\n                \n                case 'kebab':\n                    \n                    result = words.map(w =\u003e w.toLowerCase()).join('-');\n                    break;\n            }\n        }\n\n        output.value = result;\n        status.textContent = 'Success';\n        status.className = 'tool-status status-success';\n    });\n\n    clearBtn.addEventListener('click', () =\u003e {\n        input.value = '';\n        output.value = '';\n        status.textContent = '';\n        status.className = 'tool-status';\n    });\n})();\n\u003c/script\u003e\n\u003ch3 id=\"what-is-text-case-conversion\"\u003eWhat is Text Case Conversion?\u003c/h3\u003e\n\u003cp\u003eA text case converter helps you quickly change the capitalization format of a string. This is useful for programming naming conventions (e.g., changing \u003ccode\u003euser name\u003c/code\u003e to \u003ccode\u003euserName\u003c/code\u003e) or copywriting formatting (e.g., changing \u003ccode\u003ehello world\u003c/code\u003e to \u003ccode\u003eHello World\u003c/code\u003e).\u003c/p\u003e","title":"Online Text Case Converter - CamelCase, Snake_case \u0026 More"},{"content":" Ultimate Dummy Text Generator All-in-one tool for English themes, Chinese (Classical/Modern), and functional test text.\nSelect Category English Themes Chinese Classical Chinese Modern Functional Select Style Paragraphs Sentences Words Quantity Generate Copy Clear Result What is the Ultimate Dummy Text Generator? This is a placeholder text tool that integrates multiple language styles and testing functions. It goes beyond Latin to cover a wide range of text generation, from classical literature to modern corporate jargon.\nWhy need different types of dummy text? Chinese Layout Testing: English cannot reflect the line-height and letter-spacing of Chinese fonts. Chinese dummy text restores the real reading experience. Atmosphere Creation: Classical: Suitable for traditional culture or art website design. Corporate: Suitable for enterprise backends or SaaS product design. Boundary Testing: Long Words: Tests if CSS handles word-wrapping correctly to prevent layout breaking. Emoji: Tests special character display on mobile or chat interfaces. Categories English Themes: Food, Tech, Corporate, etc. Chinese Series: Classical: Quotes from \u0026ldquo;Confucian Analects\u0026rdquo;, \u0026ldquo;Book of Songs\u0026rdquo;, etc. Modern Nonsense: Simulates news or corporate speak, looks like real articles. Functional Testing: Super long words, Emoji combinations, E-commerce promo text. ","permalink":"https://www.webpenson.com/en/tools/ultimate-dummy-text/","summary":"\u003cdiv class=\"tool-container\" id=\"main-tool\"\u003e\n    \u003cdiv class=\"tool-header\"\u003e\n        \u003ch3\u003eUltimate Dummy Text Generator\u003c/h3\u003e\n        \u003cp class=\"tool-desc\"\u003eAll-in-one tool for English themes, Chinese (Classical/Modern), and functional test text.\u003c/p\u003e\n    \u003c/div\u003e\n\n    \u003cdiv class=\"tool-workspace\"\u003e\n        \n        \u003cdiv class=\"tool-select-group\"\u003e\n            \u003clabel for=\"main-category\"\u003eSelect Category\u003c/label\u003e\n            \u003cselect id=\"main-category\" class=\"tool-select\"\u003e\n                \u003coption value=\"en_theme\"\u003eEnglish Themes\u003c/option\u003e\n                \u003coption value=\"zh_classical\"\u003eChinese Classical\u003c/option\u003e\n                \u003coption value=\"zh_modern\"\u003eChinese Modern\u003c/option\u003e\n                \u003coption value=\"functional\"\u003eFunctional\u003c/option\u003e\n            \u003c/select\u003e\n        \u003c/div\u003e\n\n        \n        \u003cdiv class=\"tool-select-group\"\u003e\n            \u003clabel for=\"main-style\"\u003eSelect Style\u003c/label\u003e\n            \u003cselect id=\"main-style\" class=\"tool-select\"\u003e\n                \n            \u003c/select\u003e\n        \u003c/div\u003e\n\n        \u003cdiv class=\"tool-options\"\u003e\n            \u003cdiv class=\"option-item\"\u003e\n                \u003cinput type=\"radio\" id=\"main-para\" name=\"main-mode\" value=\"para\" checked\u003e\n                \u003clabel for=\"main-para\"\u003eParagraphs\u003c/label\u003e\n            \u003c/div\u003e\n            \u003cdiv class=\"option-item\"\u003e\n                \u003cinput type=\"radio\" id=\"main-sent\" name=\"main-mode\" value=\"sent\"\u003e\n                \u003clabel for=\"main-sent\"\u003eSentences\u003c/label\u003e\n            \u003c/div\u003e\n            \u003cdiv class=\"option-item\"\u003e\n                \u003cinput type=\"radio\" id=\"main-word\" name=\"main-mode\" value=\"word\"\u003e\n                \u003clabel for=\"main-word\"\u003eWords\u003c/label\u003e\n            \u003c/div\u003e\n        \u003c/div\u003e\n\n        \u003cdiv class=\"tool-input-group\"\u003e\n            \u003clabel for=\"main-count\"\u003eQuantity\u003c/label\u003e\n            \u003cinput type=\"number\" id=\"main-count\" value=\"3\" min=\"1\" max=\"100\" class=\"tool-number-input\"\u003e\n        \u003c/div\u003e\n\n        \u003cdiv class=\"tool-actions\"\u003e\n            \u003cbutton id=\"main-generate\" class=\"btn-primary\"\u003eGenerate\u003c/button\u003e\n            \u003cbutton id=\"main-copy\" class=\"btn-secondary\"\u003eCopy\u003c/button\u003e\n            \u003cbutton id=\"main-clear\" class=\"btn-secondary\"\u003eClear\u003c/button\u003e\n        \u003c/div\u003e\n\n        \u003cdiv class=\"tool-output-group\"\u003e\n            \u003clabel for=\"main-output\"\u003eResult\u003c/label\u003e\n            \u003ctextarea id=\"main-output\" readonly placeholder=\"Generated text will appear here...\"\u003e\u003c/textarea\u003e\n        \u003c/div\u003e\n        \n        \u003cdiv id=\"main-status\" class=\"tool-status\"\u003e\u003c/div\u003e\n    \u003c/div\u003e\n\u003c/div\u003e\n\n\u003cstyle\u003e\n.tool-container { background: var(--code-bg); padding: 1.5rem; border-radius: 8px; border: 1px solid var(--border); margin: 1rem 0; }\n.tool-header { margin-bottom: 1rem; }\n.tool-header h3 { margin: 0 0 0.5rem 0; color: var(--primary); }\n.tool-desc { margin: 0; font-size: 0.9rem; color: var(--secondary); }\n.tool-workspace { display: flex; flex-direction: column; gap: 1rem; }\n.tool-select-group { display: flex; flex-direction: column; gap: 0.5rem; }\n.tool-select-group label { font-weight: bold; font-size: 0.9rem; }\n.tool-select { padding: 0.8rem; border: 1px solid var(--border); border-radius: 4px; background: var(--entry); color: var(--primary); font-family: inherit; box-sizing: border-box; }\n.tool-select:focus { outline: 2px solid var(--primary); border-color: transparent; }\n.tool-options { display: flex; flex-wrap: wrap; gap: 1rem; background: var(--entry); padding: 0.5rem; border-radius: 4px; border: 1px solid var(--border); }\n.option-item { display: flex; align-items: center; gap: 0.3rem; }\n.tool-input-group { display: flex; flex-direction: column; gap: 0.5rem; }\n.tool-input-group label { font-weight: bold; font-size: 0.9rem; }\n.tool-number-input { width: 100%; padding: 0.8rem; border: 1px solid var(--border); border-radius: 4px; background: var(--entry); color: var(--primary); font-family: monospace; box-sizing: border-box; }\n.tool-number-input:focus { outline: 2px solid var(--primary); border-color: transparent; }\n.tool-actions { display: flex; gap: 0.5rem; }\n.btn-primary, .btn-secondary { padding: 0.6rem 1.2rem; border: none; border-radius: 4px; cursor: pointer; font-weight: bold; transition: opacity 0.2s; }\n.btn-primary { background: var(--primary); color: var(--code-bg); }\n.btn-secondary { background: var(--border); color: var(--primary); }\n.btn-primary:hover, .btn-secondary:hover { opacity: 0.8; }\n.tool-output-group { display: flex; flex-direction: column; gap: 0.5rem; }\n.tool-output-group label { font-weight: bold; font-size: 0.9rem; }\ntextarea { width: 100%; min-height: 150px; padding: 0.8rem; border: 1px solid var(--border); border-radius: 4px; background: var(--entry); color: var(--primary); font-family: monospace; resize: vertical; box-sizing: border-box; }\ntextarea:focus { outline: 2px solid var(--primary); border-color: transparent; }\n.tool-status { font-size: 0.85rem; min-height: 1.2em; }\n.status-error { color: #ff4d4f; }\n.status-success { color: #52c41a; }\n\u003c/style\u003e\n\n\u003cscript\u003e\n(function() {\n    const container = document.getElementById('main-tool');\n    const output = document.getElementById('main-output');\n    const countInput = document.getElementById('main-count');\n    const categorySelect = document.getElementById('main-category');\n    const styleSelect = document.getElementById('main-style');\n    const generateBtn = document.getElementById('main-generate');\n    const copyBtn = document.getElementById('main-copy');\n    const clearBtn = document.getElementById('main-clear');\n    const status = document.getElementById('main-status');\n\n    \n    \n    \n    const enThemes = {\n        food: ['bacon', 'ipsum', 'dolor', 'meatball', 'sirloin', 'pancetta', 'salami', 'brisket', 'cupcake', 'jelly', 'sweet', 'roll', 'chocolate', 'candy', 'cotton', 'cake', 'pie', 'fruit', 'danish', 'muffin', 'donut'],\n        corporate: ['synergy', 'ipsum', 'dolor', 'leverage', 'agile', 'paradigm', 'scalable', 'bandwidth', 'strategic', 'initiative', 'holistic', 'empower', 'visionary', 'collaboration', 'backend', 'solution', 'disruptive', 'innovative', 'streamline', 'proactive'],\n        tech: ['lorem', 'ipsum', 'dolor', 'algorithm', 'api', 'array', 'binary', 'bit', 'byte', 'cache', 'cloud', 'compile', 'cpu', 'cyber', 'data', 'database', 'debug', 'digital', 'dns', 'encryption', 'ethernet', 'firewall', 'framework', 'git', 'github', 'gpu', 'hacker', 'html', 'javascript', 'json'],\n        hipster: ['artisan', 'ipsum', 'dolor', 'brooklyn', 'vaporware', 'etsy', 'pabst', 'authentic', 'next', 'level', 'seitan', 'locavore', 'cornhole', 'selvage', 'neutra', 'forage', 'ethical', 'food', 'truck', 'pbr\u0026b', 'tote', 'bag', 'portland', 'shabby', 'chic']\n    };\n\n    \n    const zhClassicalSentences = [\n        \"子曰学而时习之不亦说乎\", \"有朋自远方来不亦乐乎\", \"人不知而不愠不亦君子乎\",\n        \"关关雎鸠在河之洲\", \"窈窕淑女君子好逑\", \"参差荇菜左右流之\",\n        \"昔我往矣杨柳依依\", \"今我来思雨雪霏霏\", \"行道迟迟载渴载饥\",\n        \"大学之道在明明德\", \"在亲民在止于至善\", \"知止而后有定\",\n        \"天行健君子以自强不息\", \"地势坤君子以厚德载物\",\n        \"道可道非常道\", \"名可名非常名\", \"无名天地之始\", \"有名万物之母\",\n        \"故常无欲以观其妙\", \"常有欲以观其徼\"\n    ];\n\n    \n    const zhModernSentences = [\n        \"我们需要从多个维度对这一现象进行深度的剖析和解读\",\n        \"在当前的宏观环境下，如何把握底层逻辑是解决问题的关键\",\n        \"通过拉通对齐颗粒度，我们能够更好地赋能业务场景\",\n        \"这一举措旨在打通端到端的流程，实现价值闭环\",\n        \"关于这个问题，我们需要形成一套组合拳，打出差异化\",\n        \"我们要坚持长期主义，在不确定的环境中寻找确定性\",\n        \"通过复盘和迭代，不断优化我们的方法论\",\n        \"这是一个典型的通过技术手段解决业务痛点的案例\",\n        \"我们要充分利用现有的资源禀赋，实现降本增效\",\n        \"最终我们要达到的效果是用户心智的占领和市场份额的扩张\"\n    ];\n\n    \n    const functionalThemes = {\n        long_words: [\"Pneumonoultramicroscopicsilicovolcanoconiosis\", \"Supercalifragilisticexpialidocious\", \"Hippopotomonstrosesquippedaliophobia\", \"Floccinaucinihilipilification\", \"Antidisestablishmentarianism\", \"Honorable\", \"Incomprehensibilities\"],\n        emoji: [\"🍔🍟🍕🌭🍿🥓🥚🥞🧇🥐🥨🥯🥪\", \"😀😃😄😁😆😅😂🤣🥲🥹☺️😊😇🙂🙃😉😌😍🥰😘😗😙😚😋😛\", \"🚗🚕🚙🚌🚎🏎️🚓🚑🚒🚐🚚🚛🚜🛴🚲🛵🏍️\", \"🐶🐱🐭🐹🐰🦊🐻🐼🐨🐯🦁🐮🐷🐽🐸🐵🙈🙉🙊🐒\"],\n        ecommerce: [\"爆款推荐\", \"限时抢购\", \"全网最低\", \"正品保证\", \"极速发货\", \"七天无理由退换\", \"买一送一\", \"年终大促\", \"亏本冲量\", \"最后三天\", \"手慢无\", \"好评返现\", \"满减优惠\", \"券后价更低\"]\n    };\n\n    \n\n    \n    function updateStyleOptions() {\n        const category = categorySelect.value;\n        styleSelect.innerHTML = ''; \n\n        let options = [];\n        if (category === 'en_theme') {\n            options = [\n                {val: 'food', text: '美食 (Food)'},\n                {val: 'corporate', text: '商务 (Corporate)'},\n                {val: 'tech', text: '科技 (Tech)'},\n                {val: 'hipster', text: '潮人 (Hipster)'}\n            ];\n        } else if (category === 'zh_classical') {\n            options = [{val: 'classical', text: '古典诗词 (Classical)'}];\n        } else if (category === 'zh_modern') {\n            options = [{val: 'modern', text: '现代废话 (Modern Nonsense)'}];\n        } else if (category === 'functional') {\n            options = [\n                {val: 'long_words', text: '长单词测试 (Long Words)'},\n                {val: 'emoji', text: 'Emoji 表情 (Emoji)'},\n                {val: 'ecommerce', text: '电商文案 (E-commerce)'}\n            ];\n        }\n\n        options.forEach(opt =\u003e {\n            const el = document.createElement('option');\n            el.value = opt.val;\n            el.textContent = opt.text;\n            styleSelect.appendChild(el);\n        });\n    }\n\n    \n    function getCurrentWordList() {\n        const category = categorySelect.value;\n        const style = styleSelect.value;\n\n        if (category === 'en_theme') return enThemes[style];\n        if (category === 'functional') return functionalThemes[style];\n        return []; \n    }\n\n    \n    function getChineseSentencePool() {\n        const category = categorySelect.value;\n        if (category === 'zh_classical') return zhClassicalSentences;\n        if (category === 'zh_modern') return zhModernSentences;\n        return [];\n    }\n\n    \n    function generateSentence(wordList, isChinese) {\n        if (isChinese) {\n            \n            const pool = getChineseSentencePool();\n            return pool[Math.floor(Math.random() * pool.length)] + \"。\";\n        } else {\n            \n            const len = Math.floor(Math.random() * 8) + 4; \n            let sentence = [];\n            for (let i = 0; i \u003c len; i++) {\n                sentence.push(wordList[Math.floor(Math.random() * wordList.length)]);\n            }\n            \n            let text = sentence.join(' ');\n            return text.charAt(0).toUpperCase() + text.slice(1) + '.';\n        }\n    }\n\n    \n    function generateParagraph(wordList, isChinese) {\n        const sentCount = Math.floor(Math.random() * 3) + 2; \n        let para = [];\n        for (let i = 0; i \u003c sentCount; i++) {\n            para.push(generateSentence(wordList, isChinese));\n        }\n        return para.join(isChinese ? \"\" : \" \"); \n    }\n\n    \n    function generateWords(wordList, count, isChinese) {\n        let result = [];\n        for (let i = 0; i \u003c count; i++) {\n            result.push(wordList[Math.floor(Math.random() * wordList.length)]);\n        }\n        \n        return result.join(isChinese ? \" \" : \" \");\n    }\n\n    \n\n    generateBtn.addEventListener('click', () =\u003e {\n        const category = categorySelect.value;\n        const mode = container.querySelector(`input[name=\"main-mode\"]:checked`).value;\n        const count = parseInt(countInput.value) || 1;\n        \n        \n        const isChinese = (category === 'zh_classical' || category === 'zh_modern');\n        \n        const wordList = getCurrentWordList();\n\n        let result = '';\n\n        if (mode === 'para') {\n            for (let i = 0; i \u003c count; i++) {\n                result += generateParagraph(wordList, isChinese);\n                if (i \u003c count - 1) result += '\\n\\n';\n            }\n        } else if (mode === 'sent') {\n            for (let i = 0; i \u003c count; i++) {\n                result += generateSentence(wordList, isChinese);\n                if (i \u003c count - 1) result += (isChinese ? \"\" : \" \");\n            }\n        } else if (mode === 'word') {\n            result = generateWords(wordList, count, isChinese);\n        }\n\n        output.value = result;\n        status.textContent = 'Success';\n        status.className = 'tool-status status-success';\n    });\n\n    copyBtn.addEventListener('click', () =\u003e {\n        if (!output.value) {\n            status.textContent = 'Please enter content';\n            status.className = 'tool-status status-error';\n            return;\n        }\n        output.select();\n        document.execCommand('copy');\n        status.textContent = 'Copied to clipboard';\n        status.className = 'tool-status status-success';\n    });\n\n    clearBtn.addEventListener('click', () =\u003e {\n        output.value = '';\n        status.textContent = '';\n        status.className = 'tool-status';\n    });\n\n    \n    updateStyleOptions();\n    categorySelect.addEventListener('change', updateStyleOptions);\n\n})();\n\u003c/script\u003e\n\u003ch3 id=\"what-is-the-ultimate-dummy-text-generator\"\u003eWhat is the Ultimate Dummy Text Generator?\u003c/h3\u003e\n\u003cp\u003eThis is a placeholder text tool that integrates multiple language styles and testing functions. It goes beyond Latin to cover a wide range of text generation, from classical literature to modern corporate jargon.\u003c/p\u003e","title":"Online Ultimate Dummy Text Generator - CN/EN/Functional"},{"content":" Unix Timestamp Converter Convert current time to timestamp or timestamp to readable date.\nInput Content To Timestamp To Date Time Convert Current Time Clear Result What is Unix Timestamp? A Unix timestamp is the number of seconds that have elapsed since 00:00:00 Coordinated Universal Time (UTC), Thursday, 1 January 1970. It is widely used in computer systems and log files to record the time of events.\nWhy use this tool? Debugging Code: When handling time data returned by APIs, it is often necessary to verify if the timestamp is correct. Database Queries: Many databases (like MongoDB, MySQL) store time using the timestamp format. Cross-Timezone Collaboration: Timestamps are absolute and unaffected by time zones, making them ideal for global team collaboration. Common Use Cases Seconds vs. Milliseconds: Some systems (like Linux) use 10-digit second-level timestamps, while others (like JavaScript, Java) use 13-digit millisecond-level timestamps. This tool supports automatic recognition and conversion. Current Time: Quickly get the current Unix timestamp for testing purposes. ","permalink":"https://www.webpenson.com/en/tools/unix-timestamp/","summary":"\u003cdiv class=\"tool-container\" id=\"main-tool\"\u003e\n    \u003cdiv class=\"tool-header\"\u003e\n        \u003ch3\u003eUnix Timestamp Converter\u003c/h3\u003e\n        \u003cp class=\"tool-desc\"\u003eConvert current time to timestamp or timestamp to readable date.\u003c/p\u003e\n    \u003c/div\u003e\n\n    \u003cdiv class=\"tool-workspace\"\u003e\n        \u003cdiv class=\"tool-input-group\"\u003e\n            \u003clabel for=\"main-input\"\u003eInput Content\u003c/label\u003e\n            \u003ctextarea id=\"main-input\" placeholder=\"Enter date (e.g. 2026-03-31) or Timestamp...\"\u003e\u003c/textarea\u003e\n        \u003c/div\u003e\n\n        \u003cdiv class=\"tool-options\"\u003e\n            \u003cdiv class=\"option-item\"\u003e\n                \u003cinput type=\"radio\" id=\"main-to-ts\" name=\"main-mode\" value=\"to_ts\" checked\u003e\n                \u003clabel for=\"main-to-ts\"\u003eTo Timestamp\u003c/label\u003e\n            \u003c/div\u003e\n            \u003cdiv class=\"option-item\"\u003e\n                \u003cinput type=\"radio\" id=\"main-to-date\" name=\"main-mode\" value=\"to_date\"\u003e\n                \u003clabel for=\"main-to-date\"\u003eTo Date Time\u003c/label\u003e\n            \u003c/div\u003e\n        \u003c/div\u003e\n\n        \u003cdiv class=\"tool-actions\"\u003e\n            \u003cbutton id=\"main-convert\" class=\"btn-primary\"\u003eConvert\u003c/button\u003e\n            \u003cbutton id=\"main-now\" class=\"btn-secondary\"\u003eCurrent Time\u003c/button\u003e\n            \u003cbutton id=\"main-clear\" class=\"btn-secondary\"\u003eClear\u003c/button\u003e\n        \u003c/div\u003e\n\n        \u003cdiv class=\"tool-output-group\"\u003e\n            \u003clabel for=\"main-output\"\u003eResult\u003c/label\u003e\n            \u003ctextarea id=\"main-output\" readonly placeholder=\"\"\u003e\u003c/textarea\u003e\n        \u003c/div\u003e\n        \n        \u003cdiv id=\"main-status\" class=\"tool-status\"\u003e\u003c/div\u003e\n    \u003c/div\u003e\n\u003c/div\u003e\n\n\u003cstyle\u003e\n \n.tool-container { background: var(--code-bg); padding: 1.5rem; border-radius: 8px; border: 1px solid var(--border); margin: 1rem 0; }\n.tool-header { margin-bottom: 1rem; }\n.tool-header h3 { margin: 0 0 0.5rem 0; color: var(--primary); }\n.tool-desc { margin: 0; font-size: 0.9rem; color: var(--secondary); }\n.tool-workspace { display: flex; flex-direction: column; gap: 1rem; }\n.tool-input-group, .tool-output-group { display: flex; flex-direction: column; gap: 0.5rem; }\n.tool-input-group label, .tool-output-group label { font-weight: bold; font-size: 0.9rem; }\ntextarea { width: 100%; min-height: 100px; padding: 0.8rem; border: 1px solid var(--border); border-radius: 4px; background: var(--entry); color: var(--primary); font-family: monospace; resize: vertical; box-sizing: border-box; }\ntextarea:focus { outline: 2px solid var(--primary); border-color: transparent; }\n.tool-options { display: flex; gap: 1rem; background: var(--entry); padding: 0.5rem; border-radius: 4px; border: 1px solid var(--border); }\n.option-item { display: flex; align-items: center; gap: 0.3rem; }\n.tool-actions { display: flex; gap: 0.5rem; }\n.btn-primary, .btn-secondary { padding: 0.6rem 1.2rem; border: none; border-radius: 4px; cursor: pointer; font-weight: bold; transition: opacity 0.2s; }\n.btn-primary { background: var(--primary); color: var(--code-bg); }\n.btn-secondary { background: var(--border); color: var(--primary); }\n.btn-primary:hover, .btn-secondary:hover { opacity: 0.8; }\n.tool-status { font-size: 0.85rem; min-height: 1.2em; }\n.status-error { color: #ff4d4f; }\n.status-success { color: #52c41a; }\n\u003c/style\u003e\n\n\u003cscript\u003e\n(function() {\n    const container = document.getElementById('main-tool');\n    const input = document.getElementById('main-input');\n    const output = document.getElementById('main-output');\n    const convertBtn = document.getElementById('main-convert');\n    const nowBtn = document.getElementById('main-now');\n    const clearBtn = document.getElementById('main-clear');\n    const status = document.getElementById('main-status');\n\n    \n    nowBtn.addEventListener('click', () =\u003e {\n        const now = Date.now();\n        input.value = now;\n        status.textContent = 'Current timestamp loaded';\n        status.className = 'tool-status status-success';\n    });\n\n    convertBtn.addEventListener('click', () =\u003e {\n        const mode = container.querySelector(`input[name=\"main-mode\"]:checked`).value;\n        const val = input.value.trim();\n\n        if (!val) {\n            status.textContent = 'Please enter content';\n            status.className = 'tool-status status-error';\n            return;\n        }\n\n        try {\n            if (mode === 'to_ts') {\n                \n                const date = new Date(val);\n                if (isNaN(date.getTime())) throw new Error('Invalid Date');\n                output.value = date.getTime(); \n            } else {\n                \n                let ts = parseInt(val);\n                \n                if (val.length === 10) ts = ts * 1000;\n                \n                const date = new Date(ts);\n                output.value = date.toLocaleString();\n            }\n            status.textContent = 'Success';\n            status.className = 'tool-status status-success';\n        } catch (e) {\n            output.value = '';\n            status.textContent = 'Format error, please check input';\n            status.className = 'tool-status status-error';\n        }\n    });\n\n    clearBtn.addEventListener('click', () =\u003e {\n        input.value = '';\n        output.value = '';\n        status.textContent = '';\n        status.className = 'tool-status';\n    });\n})();\n\u003c/script\u003e\n\u003ch3 id=\"what-is-unix-timestamp\"\u003eWhat is Unix Timestamp?\u003c/h3\u003e\n\u003cp\u003eA Unix timestamp is the number of seconds that have elapsed since 00:00:00 Coordinated Universal Time (UTC), Thursday, 1 January 1970. It is widely used in computer systems and log files to record the time of events.\u003c/p\u003e","title":"Online Unix Timestamp Converter - Seconds \u0026 Milliseconds"},{"content":" URL Encoder \u0026amp; Decoder Handle special characters in URLs, support Chinese URL encoding.\nInput Content Encode Decode Convert Clear Result What is URL Encoding? URL encoding (also known as Percent-encoding) is a method to encode information in a Uniform Resource Identifier (URI). It replaces unsafe ASCII characters with a % followed by two hexadecimal digits.\nStandard URLs can only contain a specific set of ASCII characters. If a URL contains spaces, Chinese characters, or special symbols (like \u0026amp;, =, +), the browser might interpret them incorrectly. URL encoding converts these characters into a safe format (e.g., a space becomes %20).\nWhy use URL Encoding? Handling Non-ASCII Characters: When passing Chinese text or other non-English characters in URL parameters, encoding is mandatory to prevent garbled text. API Development: When constructing API requests, special characters in parameters must be encoded to be correctly received by the server. Preventing Truncation: Certain special characters (like #) are interpreted as anchors by browsers, which can cause subsequent parameters to be lost. Encoding prevents this issue. Frequently Asked Questions (FAQ) What does a space become in URL encoding? A space is typically encoded as %20. In some older standards or form submissions, it might also be encoded as a + sign.\nDo all characters need to be encoded? No. Only non-ASCII characters (like Chinese) and URL reserved characters (like ?, /, :, @, \u0026amp;, = when used as data rather than separators) need encoding. Alphanumeric characters usually do not.\n","permalink":"https://www.webpenson.com/en/tools/url/","summary":"\u003cdiv class=\"tool-container\" id=\"main-tool\"\u003e\n    \u003cdiv class=\"tool-header\"\u003e\n        \u003ch3\u003eURL Encoder \u0026amp; Decoder\u003c/h3\u003e\n        \u003cp class=\"tool-desc\"\u003eHandle special characters in URLs, support Chinese URL encoding.\u003c/p\u003e\n    \u003c/div\u003e\n\n    \u003cdiv class=\"tool-workspace\"\u003e\n        \u003cdiv class=\"tool-input-group\"\u003e\n            \u003clabel for=\"main-input\"\u003eInput Content\u003c/label\u003e\n            \u003ctextarea id=\"main-input\" placeholder=\"Enter URL or encoded string here...\"\u003e\u003c/textarea\u003e\n        \u003c/div\u003e\n\n        \u003cdiv class=\"tool-options\"\u003e\n            \u003cdiv class=\"option-item\"\u003e\n                \u003cinput type=\"radio\" id=\"main-encode\" name=\"main-mode\" value=\"encode\" checked\u003e\n                \u003clabel for=\"main-encode\"\u003eEncode\u003c/label\u003e\n            \u003c/div\u003e\n            \u003cdiv class=\"option-item\"\u003e\n                \u003cinput type=\"radio\" id=\"main-decode\" name=\"main-mode\" value=\"decode\"\u003e\n                \u003clabel for=\"main-decode\"\u003eDecode\u003c/label\u003e\n            \u003c/div\u003e\n        \u003c/div\u003e\n\n        \u003cdiv class=\"tool-actions\"\u003e\n            \u003cbutton id=\"main-convert\" class=\"btn-primary\"\u003eConvert\u003c/button\u003e\n            \u003cbutton id=\"main-clear\" class=\"btn-secondary\"\u003eClear\u003c/button\u003e\n        \u003c/div\u003e\n\n        \u003cdiv class=\"tool-output-group\"\u003e\n            \u003clabel for=\"main-output\"\u003eResult\u003c/label\u003e\n            \u003ctextarea id=\"main-output\" readonly placeholder=\"\"\u003e\u003c/textarea\u003e\n        \u003c/div\u003e\n        \n        \u003cdiv id=\"main-status\" class=\"tool-status\"\u003e\u003c/div\u003e\n    \u003c/div\u003e\n\u003c/div\u003e\n\n\u003cstyle\u003e\n \n.tool-container { background: var(--code-bg); padding: 1.5rem; border-radius: 8px; border: 1px solid var(--border); margin: 1rem 0; }\n.tool-header { margin-bottom: 1rem; }\n.tool-header h3 { margin: 0 0 0.5rem 0; color: var(--primary); }\n.tool-desc { margin: 0; font-size: 0.9rem; color: var(--secondary); }\n.tool-workspace { display: flex; flex-direction: column; gap: 1rem; }\n.tool-input-group, .tool-output-group { display: flex; flex-direction: column; gap: 0.5rem; }\n.tool-input-group label, .tool-output-group label { font-weight: bold; font-size: 0.9rem; }\ntextarea { width: 100%; min-height: 120px; padding: 0.8rem; border: 1px solid var(--border); border-radius: 4px; background: var(--entry); color: var(--primary); font-family: monospace; resize: vertical; box-sizing: border-box; }\ntextarea:focus { outline: 2px solid var(--primary); border-color: transparent; }\n.tool-options { display: flex; gap: 1rem; background: var(--entry); padding: 0.5rem; border-radius: 4px; border: 1px solid var(--border); }\n.option-item { display: flex; align-items: center; gap: 0.3rem; }\n.tool-actions { display: flex; gap: 0.5rem; }\n.btn-primary, .btn-secondary { padding: 0.6rem 1.2rem; border: none; border-radius: 4px; cursor: pointer; font-weight: bold; transition: opacity 0.2s; }\n.btn-primary { background: var(--primary); color: var(--code-bg); }\n.btn-secondary { background: var(--border); color: var(--primary); }\n.btn-primary:hover, .btn-secondary:hover { opacity: 0.8; }\n.tool-status { font-size: 0.85rem; min-height: 1.2em; }\n.status-error { color: #ff4d4f; }\n.status-success { color: #52c41a; }\n\u003c/style\u003e\n\n\u003cscript\u003e\n(function() {\n    const container = document.getElementById('main-tool');\n    const input = document.getElementById('main-input');\n    const output = document.getElementById('main-output');\n    const convertBtn = document.getElementById('main-convert');\n    const clearBtn = document.getElementById('main-clear');\n    const status = document.getElementById('main-status');\n    \n    convertBtn.addEventListener('click', () =\u003e {\n        const mode = container.querySelector(`input[name=\"main-mode\"]:checked`).value;\n        const val = input.value.trim();\n        \n        if (!val) {\n            status.textContent = 'Please enter content';\n            status.className = 'tool-status status-error';\n            return;\n        }\n\n        try {\n            if (mode === 'encode') {\n                output.value = encodeURIComponent(val);\n            } else {\n                output.value = decodeURIComponent(val);\n            }\n            status.textContent = 'Success';\n            status.className = 'tool-status status-success';\n        } catch (e) {\n            output.value = '';\n            status.textContent = 'Decode failed, check format';\n            status.className = 'tool-status status-error';\n        }\n    });\n\n    clearBtn.addEventListener('click', () =\u003e {\n        input.value = '';\n        output.value = '';\n        status.textContent = '';\n        status.className = 'tool-status';\n    });\n})();\n\u003c/script\u003e\n\u003ch3 id=\"what-is-url-encoding\"\u003eWhat is URL Encoding?\u003c/h3\u003e\n\u003cp\u003eURL encoding (also known as Percent-encoding) is a method to encode information in a Uniform Resource Identifier (URI). It replaces unsafe ASCII characters with a \u003ccode\u003e%\u003c/code\u003e followed by two hexadecimal digits.\u003c/p\u003e","title":"Online URL Encoder \u0026 Decoder - Percent-encoding Tool"},{"content":" 📋 Waiting... ⚙️ Rules Total Length: 15 Lowercase 1-2 至 Uppercase 1-2 至 Numbers 0-16 至 Symbols 0-0 至 🎲 Generate Password Entropy: 0 bits Why Password Strength Matters? Weak passwords are the number one cause of hacked accounts. Hackers use \u0026ldquo;brute force\u0026rdquo; attacks that can guess simple passwords like 123456 in milliseconds.\nWhat is Password Entropy? Entropy measures how unpredictable your password is.\nHigher Entropy: More possible combinations, making it exponentially harder to crack. Recommendation: Aim for at least 50 bits of entropy for important accounts. How to Create a Strong Password? Length is Key: Longer passwords are always better. Mix It Up: Use a combination of uppercase, lowercase, numbers, and symbols. Avoid Patterns: Don\u0026rsquo;t use birthdays or common words like \u0026ldquo;password\u0026rdquo;. ","permalink":"https://www.webpenson.com/en/tools/password-strength/","summary":"\u003cdiv class=\"tool-container\" id=\"main-tool\"\u003e\n    \u003cdiv class=\"tool-workspace\"\u003e\n        \n        \u003cdiv class=\"tool-output-group\"\u003e\n            \u003cdiv class=\"result-bar\"\u003e\n                \u003cinput type=\"text\" id=\"main-input\" readonly \n                       placeholder='Click generate or type password' \n                       class=\"tool-text-input\"\u003e\n                \u003cbutton id=\"main-copy\" class=\"btn-icon\" title='Copy'\u003e📋\u003c/button\u003e\n            \u003c/div\u003e\n            \u003cdiv class=\"strength-meter\"\u003e\n                \u003cdiv id=\"main-bar\" class=\"strength-bar\"\u003e\u003c/div\u003e\n            \u003c/div\u003e\n            \u003cdiv id=\"main-text\" class=\"tool-status\"\u003e\n                Waiting...\n            \u003c/div\u003e\n        \u003c/div\u003e\n\n        \n        \u003cdiv class=\"generator-panel\"\u003e\n            \u003ch4\u003e⚙️ Rules\u003c/h4\u003e\n            \n            \n            \u003cdiv class=\"config-row\"\u003e\n                \u003clabel\u003e\n                    Total Length: \n                    \u003cspan id=\"main-len-val\" class=\"badge\"\u003e15\u003c/span\u003e\n                \u003c/label\u003e\n                \u003cinput type=\"range\" id=\"main-len\" min=\"4\" max=\"64\" value=\"15\" class=\"tool-slider\"\u003e\n            \u003c/div\u003e\n\n            \u003cdiv class=\"config-grid\"\u003e\n                \n                \u003cdiv class=\"config-item\"\u003e\n                    \u003clabel\u003e\n                        Lowercase \n                        \u003cspan class=\"range-display\" id=\"main-lower-display\"\u003e1-2\u003c/span\u003e\n                    \u003c/label\u003e\n                    \u003cdiv class=\"range-control\"\u003e\n                        \u003cinput type=\"range\" class=\"mini-slider min-input\" data-type=\"lower\" data-target=\"min\" min=\"0\" max=\"20\" value=\"1\"\u003e\n                        \u003cspan class=\"sep\"\u003e至\u003c/span\u003e\n                        \u003cinput type=\"range\" class=\"mini-slider max-input\" data-type=\"lower\" data-target=\"max\" min=\"0\" max=\"20\" value=\"2\"\u003e\n                    \u003c/div\u003e\n                \u003c/div\u003e\n\n                \n                \u003cdiv class=\"config-item\"\u003e\n                    \u003clabel\u003e\n                        Uppercase \n                        \u003cspan class=\"range-display\" id=\"main-upper-display\"\u003e1-2\u003c/span\u003e\n                    \u003c/label\u003e\n                    \u003cdiv class=\"range-control\"\u003e\n                        \u003cinput type=\"range\" class=\"mini-slider min-input\" data-type=\"upper\" data-target=\"min\" min=\"0\" max=\"20\" value=\"1\"\u003e\n                        \u003cspan class=\"sep\"\u003e至\u003c/span\u003e\n                        \u003cinput type=\"range\" class=\"mini-slider max-input\" data-type=\"upper\" data-target=\"max\" min=\"0\" max=\"20\" value=\"2\"\u003e\n                    \u003c/div\u003e\n                \u003c/div\u003e\n\n                \n                \u003cdiv class=\"config-item\"\u003e\n                    \u003clabel\u003e\n                        Numbers \n                        \u003cspan class=\"range-display\" id=\"main-num-display\"\u003e0-16\u003c/span\u003e\n                    \u003c/label\u003e\n                    \u003cdiv class=\"range-control\"\u003e\n                        \u003cinput type=\"range\" class=\"mini-slider min-input\" data-type=\"number\" data-target=\"min\" min=\"0\" max=\"20\" value=\"0\"\u003e\n                        \u003cspan class=\"sep\"\u003e至\u003c/span\u003e\n                        \u003cinput type=\"range\" class=\"mini-slider max-input\" data-type=\"number\" data-target=\"max\" min=\"0\" max=\"20\" value=\"16\"\u003e\n                    \u003c/div\u003e\n                \u003c/div\u003e\n\n                \n                \u003cdiv class=\"config-item\"\u003e\n                    \u003clabel\u003e\n                        Symbols \n                        \u003cspan class=\"range-display\" id=\"main-sym-display\"\u003e0-0\u003c/span\u003e\n                    \u003c/label\u003e\n                    \u003cdiv class=\"range-control\"\u003e\n                        \u003cinput type=\"range\" class=\"mini-slider min-input\" data-type=\"symbol\" data-target=\"min\" min=\"0\" max=\"20\" value=\"0\"\u003e\n                        \u003cspan class=\"sep\"\u003e至\u003c/span\u003e\n                        \u003cinput type=\"range\" class=\"mini-slider max-input\" data-type=\"symbol\" data-target=\"max\" min=\"0\" max=\"20\" value=\"0\"\u003e\n                    \u003c/div\u003e\n                \u003c/div\u003e\n            \u003c/div\u003e\n            \n            \u003cbutton id=\"main-generate\" class=\"btn-primary full-width\"\u003e\n                🎲 Generate Password\n            \u003c/button\u003e\n            \u003cdiv id=\"main-error\" class=\"error-msg\"\u003e\u003c/div\u003e\n        \u003c/div\u003e\n\n        \n        \u003cdiv id=\"main-info\" class=\"tool-info\" style=\"display: none;\"\u003e\n            \u003cdiv class=\"tool-stats\"\u003e\n                \u003cspan\u003eEntropy:\u003c/span\u003e \n                \u003cstrong\u003e\u003cspan id=\"main-entropy\"\u003e0\u003c/span\u003e bits\u003c/strong\u003e\n            \u003c/div\u003e\n            \u003cdiv class=\"tool-checklist\"\u003e\n                \u003cul id=\"main-checklist\"\u003e\u003c/ul\u003e\n            \u003c/div\u003e\n        \u003c/div\u003e\n    \u003c/div\u003e\n\u003c/div\u003e\n\n\u003cscript\u003e\n(function() {\n    \n    const container = document.getElementById('main-tool');\n    if (!container) return;\n\n    const types = ['lower', 'upper', 'number', 'symbol'];\n    const inputs = {\n        totalLen: document.getElementById('main-len'),\n        lenVal: document.getElementById('main-len-val'),\n        minInputs: container.querySelectorAll('.min-input'),\n        maxInputs: container.querySelectorAll('.max-input'),\n        displays: {\n            lower: document.getElementById('main-lower-display'),\n            upper: document.getElementById('main-upper-display'),\n            number: document.getElementById('main-num-display'),\n            symbol: document.getElementById('main-sym-display')\n        }\n    };\n\n    \n    function updateConstraints(changedType, target) {\n        const totalLen = parseInt(inputs.totalLen.value);\n        \n        \n        let otherMins = 0;\n        types.forEach(t =\u003e {\n            if (t !== changedType) {\n                const minVal = parseInt(container.querySelector(`.min-input[data-type=\"${t}\"]`).value);\n                otherMins += minVal;\n            }\n        });\n\n        types.forEach(type =\u003e {\n            const minSlider = container.querySelector(`.min-input[data-type=\"${type}\"]`);\n            const maxSlider = container.querySelector(`.max-input[data-type=\"${type}\"]`);\n            const display = inputs.displays[type];\n\n            let currentMin = parseInt(minSlider.value);\n            let currentMax = parseInt(maxSlider.value);\n\n            \n            if (target === 'min' \u0026\u0026 type === changedType) {\n                if (currentMin \u003e currentMax) {\n                    maxSlider.value = currentMin; \n                    currentMax = currentMin;\n                }\n            }\n            if (target === 'max' \u0026\u0026 type === changedType) {\n                if (currentMax \u003c currentMin) {\n                    minSlider.value = currentMax; \n                    currentMin = currentMax;\n                }\n            }\n\n            \n            \n            const maxLimit = Math.max(currentMin, totalLen - otherMins);\n            \n            \n            maxSlider.max = maxLimit;\n            \n            \n            if (parseInt(maxSlider.value) \u003e maxLimit) {\n                maxSlider.value = maxLimit;\n                currentMax = maxLimit;\n            }\n\n            \n            display.textContent = `${currentMin}-${currentMax}`;\n        });\n    }\n\n    \n    inputs.totalLen.addEventListener('input', () =\u003e {\n        inputs.lenVal.textContent = inputs.totalLen.value;\n        updateConstraints('all', 'total'); \n    });\n\n    inputs.minInputs.forEach(input =\u003e {\n        input.addEventListener('input', () =\u003e {\n            updateConstraints(input.dataset.type, 'min');\n        });\n    });\n\n    inputs.maxInputs.forEach(input =\u003e {\n        input.addEventListener('input', () =\u003e {\n            updateConstraints(input.dataset.type, 'max');\n        });\n    });\n\n    \n    updateConstraints('all', 'init');\n\n    \n    \n    const input = document.getElementById('main-input');\n    const bar = document.getElementById('main-bar');\n    const text = document.getElementById('main-text');\n    const entropyVal = document.getElementById('main-entropy');\n    const infoPanel = document.getElementById('main-info');\n    const checklist = document.getElementById('main-checklist');\n    const errorMsg = document.getElementById('main-error');\n    const genBtn = document.getElementById('main-generate');\n    const copyBtn = document.getElementById('main-copy');\n\n    const chars = {\n        lower: 'abcdefghijklmnopqrstuvwxyz',\n        upper: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ',\n        number: '0123456789',\n        symbol: '!@#$%^\u0026*()_+-=[]{}|;:,.\u003c\u003e?'\n    };\n\n    function calculateEntropy(pwd) {\n        if (!pwd) return 0;\n        let pool = 0;\n        if (/[a-z]/.test(pwd)) pool += 26;\n        if (/[A-Z]/.test(pwd)) pool += 26;\n        if (/[0-9]/.test(pwd)) pool += 10;\n        if (/[^a-zA-Z0-9]/.test(pwd)) pool += 32;\n        return Math.floor(pwd.length * Math.log2(pool || 1));\n    }\n\n    function updateStrengthUI(pwd, actualStats = null) {\n        const entropy = calculateEntropy(pwd);\n        entropyVal.textContent = entropy;\n\n        let statusClass = '';\n        if (entropy \u003c 28) { statusClass = 'weak'; text.textContent = '🔴 太弱'; }\n        else if (entropy \u003c 40) { statusClass = 'medium'; text.textContent = '🟠 一般'; }\n        else if (entropy \u003c 60) { statusClass = 'strong'; text.textContent = '🟢 强壮'; }\n        else { statusClass = 'secure'; text.textContent = '🔵 非常强壮'; }\n\n        bar.className = `strength-bar ${statusClass}`;\n        text.className = `tool-status ${statusClass}`;\n\n        if (!actualStats || pwd.length === 0) {\n            checklist.innerHTML = `\u003cli\u003e请输入或生成密码\u003c/li\u003e`;\n            infoPanel.style.display = 'none';\n            return;\n        }\n\n        const items = [\n            { label: '总长度', count: pwd.length, required: true },\n            { label: '小写字母', count: actualStats.lower, required: actualStats.lower \u003e 0 },\n            { label: '大写字母', count: actualStats.upper, required: actualStats.upper \u003e 0 },\n            { label: '数字', count: actualStats.number, required: actualStats.number \u003e 0 },\n            { label: '特殊符号', count: actualStats.symbol, required: actualStats.symbol \u003e 0 }\n        ];\n\n        checklist.innerHTML = items.map(item =\u003e {\n            const statusIcon = item.required ? '✅' : '❌';\n            return `\u003cli class=\"check-item ${item.required ? 'pass' : 'fail'}\"\u003e\n                \u003cspan class=\"icon\"\u003e${statusIcon}\u003c/span\u003e\n                \u003cspan class=\"label\"\u003e${item.label}\u003c/span\u003e\n                \u003cspan class=\"count-badge\"\u003e${item.count}\u003c/span\u003e\n            \u003c/li\u003e`;\n        }).join('');\n\n        infoPanel.style.display = 'block';\n    }\n\n    function generatePassword() {\n        errorMsg.textContent = '';\n        const totalLen = parseInt(inputs.totalLen.value);\n        \n        \n        const config = {};\n        types.forEach(t =\u003e {\n            config[t] = {\n                min: parseInt(container.querySelector(`.min-input[data-type=\"${t}\"]`).value),\n                max: parseInt(container.querySelector(`.max-input[data-type=\"${t}\"]`).value)\n            };\n        });\n\n        \n        const minRequired = config.lower.min + config.upper.min + config.number.min + config.symbol.min;\n        if (minRequired \u003e totalLen) {\n            errorMsg.textContent = `❌ 错误：各项最小数量之和 (${minRequired}) 超过了总长度 (${totalLen})！`;\n            return;\n        }\n\n        let passwordChars = [];\n        let actualStats = { lower: 0, upper: 0, number: 0, symbol: 0 };\n\n        \n        const addChars = (type, count) =\u003e {\n            for(let i=0; i\u003ccount; i++) {\n                passwordChars.push(chars[type].charAt(Math.floor(Math.random() * chars[type].length)));\n            }\n            actualStats[type] += count;\n        };\n\n        addChars('lower', config.lower.min);\n        addChars('upper', config.upper.min);\n        addChars('number', config.number.min);\n        addChars('symbol', config.symbol.min);\n\n        \n        while (passwordChars.length \u003c totalLen) {\n            const currentCounts = { ...actualStats };\n            const type = types[Math.floor(Math.random() * types.length)];\n            \n            if (currentCounts[type] \u003c config[type].max) {\n                passwordChars.push(chars[type].charAt(Math.floor(Math.random() * chars[type].length)));\n                actualStats[type]++;\n            } else {\n                \n                passwordChars.push(chars.lower.charAt(Math.floor(Math.random() * chars.lower.length)));\n                actualStats.lower++;\n            }\n        }\n\n        \n        for (let i = passwordChars.length - 1; i \u003e 0; i--) {\n            const j = Math.floor(Math.random() * (i + 1));\n            [passwordChars[i], passwordChars[j]] = [passwordChars[j], passwordChars[i]];\n        }\n\n        const finalPwd = passwordChars.join('');\n        input.value = finalPwd;\n        updateStrengthUI(finalPwd, actualStats);\n    }\n\n    genBtn.addEventListener('click', generatePassword);\n    copyBtn.addEventListener('click', () =\u003e {\n        if(!input.value) return;\n        navigator.clipboard.writeText(input.value).then(() =\u003e {\n            copyBtn.textContent = '✅';\n            setTimeout(() =\u003e copyBtn.textContent = '📋', 1500);\n        });\n    });\n\n    generatePassword();\n})();\n\u003c/script\u003e\n\n\u003cstyle\u003e\n \n.tool-container { font-family: sans-serif; max-width: 600px; margin: 20px auto; padding: 20px; border: 1px solid #ddd; border-radius: 8px; background: #fff; }\n.tool-text-input { width: 100%; padding: 10px; font-size: 16px; box-sizing: border-box; }\n.btn-primary { width: 100%; padding: 10px; background: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer; margin-top: 15px; }\n.config-row { margin-bottom: 15px; }\n.tool-slider { width: 100%; }\n.config-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }\n.config-item { font-size: 14px; }\n.range-control { display: flex; align-items: center; gap: 5px; margin-top: 5px; }\n.mini-slider { flex: 1; }\n.sep { font-size: 12px; color: #666; }\n.badge { background: #eee; padding: 2px 6px; border-radius: 4px; font-weight: bold; }\n.range-display { float: right; font-weight: bold; color: #007bff; font-size: 12px; }\n\n \n.check-item { display: flex; justify-content: space-between; padding: 4px 0; border-bottom: 1px dashed #eee; }\n.check-item .icon { width: 20px; }\n.check-item .label { flex: 1; }\n.check-item .count-badge { background: #eee; padding: 0 6px; border-radius: 10px; font-family: monospace; min-width: 24px; text-align: center; }\n.check-item.pass { color: #059669; }\n.check-item.fail { color: #dc2626; }\n.error-msg { color: red; font-size: 12px; margin-top: 5px; }\n\u003c/style\u003e\n\u003ch3 id=\"why-password-strength-matters\"\u003eWhy Password Strength Matters?\u003c/h3\u003e\n\u003cp\u003eWeak passwords are the number one cause of hacked accounts. Hackers use \u0026ldquo;brute force\u0026rdquo; attacks that can guess simple passwords like \u003ccode\u003e123456\u003c/code\u003e in milliseconds.\u003c/p\u003e","title":"Password Strength Visualizer - Online Security Tool"},{"content":"Last Updated: April 2, 2026\nIntroduction Welcome to our website. We understand the importance of personal information to you and are committed to protecting your privacy and data security. This Privacy Policy explains how we handle your information when you use our online tools and services.\n1. Information We Collect Since our tools operate primarily on pure front-end technology, our collection of user data is extremely limited:\nNo Personal Information Collected: You do not need to register an account or provide your name, email, or phone number to use our tools (e.g., converters, calculators). Files and Data Processing: All files and data you upload or input are processed locally in your browser only. They are not uploaded to our servers or stored in our databases. Once processing is complete, the data is cleared from memory. Automatically Collected Technical Information: To optimize site performance and user experience, our server logs may automatically record some non-personal information, such as: Browser type and version Operating system Access time and date Referring website address 2. How We Use Information We use the technical information collected solely for the following purposes:\nSite Operation and Maintenance: Ensuring the website functions correctly. Analytics: Analyzing user habits to improve our tools and services. Security: Monitoring and preventing fraud or malicious attacks. 3. Third-Party Services and Advertising (Google AdSense) We may display third-party ads provided by Google on our website.\nGoogle AdSense: Google, as a third-party vendor, uses cookies to serve ads based on your visits. DART Cookie: Google\u0026rsquo;s use of the DART cookie enables it to serve ads to you and others based on your visits. You may opt out of the use of the DART cookie by visiting the Google Ad and Content Network Privacy Policy. 4. Use of Cookies Essential Cookies: Used for basic website functions (e.g., page navigation). Advertising Cookies: Set by third-party partners like Google to display ads relevant to you. Managing Settings: You can control the use of cookies through your browser settings. Most browsers allow you to refuse or accept cookies. Please note that if you disable cookies, some features of the website may not function properly. 5. Data Security We implement appropriate technical and organizational measures to protect your information. Given that our tools run locally on your device, your data has a high level of security during transmission and processing.\n6. Your Rights Under relevant laws and regulations, you have the following rights:\nRight to Access: You have the right to know if we hold your personal data. Right to Erasure: Since we do not store your personal data, there is no need for erasure requests. Right to Withdraw Consent: You can withdraw consent for cookies at any time through your browser settings. 7. Children\u0026rsquo;s Privacy Our services are not directed to children under 13 (or the age specified in your jurisdiction). We do not knowingly collect personal information from children.\n8. Changes to This Policy We may update this Privacy Policy from time to time. Any changes will be posted on this page with an updated \u0026ldquo;Last Updated\u0026rdquo; date.\n9. Contact Us If you have any questions about this Privacy Policy, please contact us at:\nEmail: pxn626@outlook.com ","permalink":"https://www.webpenson.com/en/privacy/","summary":"\u003cp\u003e\u003cstrong\u003eLast Updated: April 2, 2026\u003c/strong\u003e\u003c/p\u003e\n\u003ch3 id=\"introduction\"\u003eIntroduction\u003c/h3\u003e\n\u003cp\u003eWelcome to our website. We understand the importance of personal information to you and are committed to protecting your privacy and data security. This Privacy Policy explains how we handle your information when you use our online tools and services.\u003c/p\u003e\n\u003ch3 id=\"1-information-we-collect\"\u003e1. Information We Collect\u003c/h3\u003e\n\u003cp\u003eSince our tools operate primarily on \u003cstrong\u003epure front-end technology\u003c/strong\u003e, our collection of user data is extremely limited:\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003e\u003cstrong\u003eNo Personal Information Collected\u003c/strong\u003e: You do not need to register an account or provide your name, email, or phone number to use our tools (e.g., converters, calculators).\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eFiles and Data Processing\u003c/strong\u003e: All files and data you upload or input are processed \u003cstrong\u003elocally in your browser only\u003c/strong\u003e. They are \u003cstrong\u003enot\u003c/strong\u003e uploaded to our servers or stored in our databases. Once processing is complete, the data is cleared from memory.\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eAutomatically Collected Technical Information\u003c/strong\u003e: To optimize site performance and user experience, our server logs may automatically record some non-personal information, such as:\n\u003cul\u003e\n\u003cli\u003eBrowser type and version\u003c/li\u003e\n\u003cli\u003eOperating system\u003c/li\u003e\n\u003cli\u003eAccess time and date\u003c/li\u003e\n\u003cli\u003eReferring website address\u003c/li\u003e\n\u003c/ul\u003e\n\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch3 id=\"2-how-we-use-information\"\u003e2. How We Use Information\u003c/h3\u003e\n\u003cp\u003eWe use the technical information collected solely for the following purposes:\u003c/p\u003e","title":"Privacy Policy"}]