{"id":272,"date":"2023-06-29T03:54:11","date_gmt":"2023-06-29T00:54:11","guid":{"rendered":"https:\/\/tamoza.net\/?p=272"},"modified":"2026-05-12T19:05:22","modified_gmt":"2026-05-12T19:05:22","slug":"password-generator","status":"publish","type":"post","link":"https:\/\/test.tamoza.xyz\/?p=272","title":{"rendered":"Password Generator"},"content":{"rendered":"\n<br>\n<br>\n<br>\n\n\n\n<p class=\"has-text-align-center wp-block-paragraph\" style=\"font-size:29px\"><strong>Create strong passwords with Password Generator<\/strong><\/p>\n\n\n\n<!-- Tamoza Password Generator \u2014 Glassmorphism Style -->\n<!-- Paste this entire block into a WordPress \"Custom HTML\" block -->\n\n<style>\n\/* === Password Generator \u2014 Tamoza Glassmorphism === *\/\n.tamoza-pwdgen {\n    --pg-start: #6366F1;\n    --pg-end: #22D3EE;\n    --pg-gradient: linear-gradient(135deg, #6366F1, #22D3EE);\n    --pg-glass-bg: rgba(255, 255, 255, 0.05);\n    --pg-glass-border: rgba(255, 255, 255, 0.1);\n    --pg-glass-hover: rgba(255, 255, 255, 0.08);\n    --pg-radius: 16px;\n    --pg-radius-sm: 8px;\n    --pg-radius-pill: 9999px;\n\n    max-width: 560px;\n    margin: 2rem auto;\n    background: var(--pg-glass-bg);\n    backdrop-filter: blur(12px);\n    -webkit-backdrop-filter: blur(12px);\n    border: 1px solid var(--pg-glass-border);\n    border-radius: var(--pg-radius);\n    padding: 2rem;\n    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);\n    font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Roboto, sans-serif;\n    color: rgba(255, 255, 255, 0.87);\n}\n\n\/* Title *\/\n.tamoza-pwdgen-title {\n    font-size: 1.25rem;\n    font-weight: 600;\n    color: #ffffff;\n    margin-bottom: 1.5rem;\n    padding-bottom: 0.75rem;\n    border-bottom: 1px solid rgba(255, 255, 255, 0.05);\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n.tamoza-pwdgen-title::before {\n    content: '';\n    width: 4px;\n    height: 20px;\n    background: var(--pg-gradient);\n    border-radius: var(--pg-radius-pill);\n    flex-shrink: 0;\n}\n\n\/* Password Display *\/\n.tamoza-pwdgen-display {\n    position: relative;\n    margin-bottom: 1rem;\n}\n.tamoza-pwdgen-display input {\n    width: 100%;\n    height: 52px;\n    color: #ffffff;\n    background: rgba(255, 255, 255, 0.03);\n    font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', 'Consolas', monospace;\n    font-size: 1rem;\n    font-weight: 500;\n    border-radius: var(--pg-radius-sm);\n    letter-spacing: 1.2px;\n    border: 1px solid var(--pg-glass-border);\n    padding: 0 3rem 0 1rem;\n    outline: none;\n    transition: border-color 0.2s ease, box-shadow 0.2s ease;\n}\n.tamoza-pwdgen-display input:focus {\n    border-color: var(--pg-start);\n    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);\n}\n.tamoza-pwdgen-copy {\n    position: absolute;\n    right: 8px;\n    top: 50%;\n    transform: translateY(-50%);\n    background: none;\n    border: none;\n    cursor: pointer;\n    color: rgba(255, 255, 255, 0.4);\n    padding: 6px;\n    border-radius: 6px;\n    transition: all 0.2s ease;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n.tamoza-pwdgen-copy:hover {\n    color: var(--pg-end);\n    background: rgba(34, 211, 238, 0.08);\n}\n.tamoza-pwdgen-copy svg {\n    width: 20px;\n    height: 20px;\n}\n.tamoza-pwdgen-copy.copied {\n    color: #22D3EE;\n}\n\n\/* Strength Indicator *\/\n.tamoza-pwdgen-strength {\n    width: 100%;\n    height: 4px;\n    background: rgba(255, 255, 255, 0.06);\n    border-radius: var(--pg-radius-pill);\n    margin-bottom: 1.5rem;\n    overflow: hidden;\n}\n.tamoza-pwdgen-strength-bar {\n    height: 100%;\n    width: 50%;\n    border-radius: var(--pg-radius-pill);\n    transition: width 0.3s ease, background 0.3s ease;\n}\n.tamoza-pwdgen-strength-bar.weak {\n    width: 20%;\n    background: #EF4444;\n}\n.tamoza-pwdgen-strength-bar.medium {\n    width: 50%;\n    background: #F59E0B;\n}\n.tamoza-pwdgen-strength-bar.strong {\n    width: 100%;\n    background: var(--pg-gradient);\n}\n\n\/* Length Slider *\/\n.tamoza-pwdgen-length {\n    margin-bottom: 1.25rem;\n}\n.tamoza-pwdgen-length-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    margin-bottom: 0.5rem;\n}\n.tamoza-pwdgen-length-label {\n    font-size: 0.875rem;\n    font-weight: 500;\n    color: rgba(255, 255, 255, 0.7);\n}\n.tamoza-pwdgen-length-value {\n    font-size: 0.875rem;\n    font-weight: 600;\n    color: var(--pg-end);\n    background: rgba(34, 211, 238, 0.08);\n    padding: 2px 10px;\n    border-radius: var(--pg-radius-pill);\n    border: 1px solid rgba(34, 211, 238, 0.2);\n}\n\n\/* Range Slider *\/\n.tamoza-pwdgen input[type=\"range\"] {\n    -webkit-appearance: none;\n    appearance: none;\n    width: 100%;\n    height: 6px;\n    background: rgba(255, 255, 255, 0.06);\n    border-radius: var(--pg-radius-pill);\n    outline: none;\n    cursor: pointer;\n}\n.tamoza-pwdgen input[type=\"range\"]::-webkit-slider-thumb {\n    -webkit-appearance: none;\n    appearance: none;\n    width: 20px;\n    height: 20px;\n    background: var(--pg-gradient);\n    border-radius: 50%;\n    cursor: pointer;\n    box-shadow: 0 0 8px rgba(99, 102, 241, 0.3);\n    border: 2px solid rgba(255, 255, 255, 0.2);\n    transition: box-shadow 0.2s ease;\n}\n.tamoza-pwdgen input[type=\"range\"]::-webkit-slider-thumb:hover {\n    box-shadow: 0 0 16px rgba(99, 102, 241, 0.5);\n}\n.tamoza-pwdgen input[type=\"range\"]::-moz-range-thumb {\n    width: 20px;\n    height: 20px;\n    background: var(--pg-gradient);\n    border-radius: 50%;\n    cursor: pointer;\n    box-shadow: 0 0 8px rgba(99, 102, 241, 0.3);\n    border: 2px solid rgba(255, 255, 255, 0.2);\n}\n\n\/* Settings *\/\n.tamoza-pwdgen-settings-label {\n    font-size: 0.875rem;\n    font-weight: 500;\n    color: rgba(255, 255, 255, 0.7);\n    margin-bottom: 0.75rem;\n    display: block;\n}\n.tamoza-pwdgen-options {\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    gap: 0.5rem;\n    list-style: none;\n    padding: 0;\n    margin: 0 0 1.25rem;\n}\n.tamoza-pwdgen-option {\n    display: flex;\n    align-items: center;\n    gap: 0.5rem;\n    padding: 8px 10px;\n    border-radius: var(--pg-radius-sm);\n    transition: background 0.2s ease;\n}\n.tamoza-pwdgen-option:hover {\n    background: var(--pg-glass-hover);\n}\n\n\/* Custom Checkbox *\/\n.tamoza-pwdgen-option input[type=\"checkbox\"] {\n    -webkit-appearance: none;\n    appearance: none;\n    width: 18px;\n    height: 18px;\n    border: 1.5px solid rgba(255, 255, 255, 0.2);\n    border-radius: 4px;\n    cursor: pointer;\n    position: relative;\n    flex-shrink: 0;\n    transition: all 0.2s ease;\n    background: transparent;\n}\n.tamoza-pwdgen-option input[type=\"checkbox\"]:checked {\n    background: var(--pg-gradient);\n    border-color: transparent;\n}\n.tamoza-pwdgen-option input[type=\"checkbox\"]:checked::after {\n    content: '';\n    position: absolute;\n    left: 5px;\n    top: 2px;\n    width: 5px;\n    height: 9px;\n    border: solid #ffffff;\n    border-width: 0 2px 2px 0;\n    transform: rotate(45deg);\n}\n.tamoza-pwdgen-option label {\n    font-size: 0.8125rem;\n    color: rgba(255, 255, 255, 0.6);\n    cursor: pointer;\n    transition: color 0.2s ease;\n    user-select: none;\n}\n.tamoza-pwdgen-option:hover label {\n    color: rgba(255, 255, 255, 0.85);\n}\n.tamoza-pwdgen-option input[type=\"checkbox\"]:checked + label {\n    color: rgba(255, 255, 255, 0.85);\n}\n\n\/* Generate Button *\/\n.tamoza-pwdgen-btn {\n    width: 100%;\n    color: #ffffff;\n    border: none;\n    outline: none;\n    cursor: pointer;\n    background: var(--pg-gradient);\n    font-family: inherit;\n    font-size: 0.9375rem;\n    font-weight: 600;\n    padding: 0.875rem;\n    border-radius: var(--pg-radius-sm);\n    text-transform: uppercase;\n    letter-spacing: 0.05em;\n    transition: all 0.2s ease;\n    box-shadow: 0 4px 16px rgba(99, 102, 241, 0.2);\n}\n.tamoza-pwdgen-btn:hover {\n    box-shadow: 0 6px 24px rgba(99, 102, 241, 0.35);\n    transform: translateY(-1px);\n}\n.tamoza-pwdgen-btn:active {\n    transform: translateY(0);\n    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.2);\n}\n\n\/* Responsive *\/\n@media (max-width: 480px) {\n    .tamoza-pwdgen {\n        padding: 1.25rem;\n        margin: 1rem 0;\n    }\n    .tamoza-pwdgen-options {\n        grid-template-columns: 1fr;\n    }\n}\n<\/style>\n\n<div class=\"tamoza-pwdgen\">\n    <div class=\"tamoza-pwdgen-title\">Password Generator<\/div>\n\n    <!-- Password Display -->\n    <div class=\"tamoza-pwdgen-display\">\n        <input type=\"text\" id=\"tamoza-pwd-output\" disabled>\n        <button class=\"tamoza-pwdgen-copy\" id=\"tamoza-pwd-copy\" aria-label=\"Copy password\">\n            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"9\" y=\"9\" width=\"13\" height=\"13\" rx=\"2\" ry=\"2\"\/><path d=\"M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1\"\/><\/svg>\n        <\/button>\n    <\/div>\n\n    <!-- Strength Indicator -->\n    <div class=\"tamoza-pwdgen-strength\">\n        <div class=\"tamoza-pwdgen-strength-bar\" id=\"tamoza-pwd-strength\"><\/div>\n    <\/div>\n\n    <!-- Length Slider -->\n    <div class=\"tamoza-pwdgen-length\">\n        <div class=\"tamoza-pwdgen-length-header\">\n            <span class=\"tamoza-pwdgen-length-label\">Password Length<\/span>\n            <span class=\"tamoza-pwdgen-length-value\" id=\"tamoza-pwd-length-val\">15<\/span>\n        <\/div>\n        <input type=\"range\" id=\"tamoza-pwd-slider\" min=\"1\" max=\"30\" value=\"15\" step=\"1\">\n    <\/div>\n\n    <!-- Settings -->\n    <span class=\"tamoza-pwdgen-settings-label\">Password Settings<\/span>\n    <ul class=\"tamoza-pwdgen-options\">\n        <li class=\"tamoza-pwdgen-option\">\n            <input type=\"checkbox\" id=\"tamoza-lowercase\" checked>\n            <label for=\"tamoza-lowercase\">Lowercase (a-z)<\/label>\n        <\/li>\n        <li class=\"tamoza-pwdgen-option\">\n            <input type=\"checkbox\" id=\"tamoza-uppercase\">\n            <label for=\"tamoza-uppercase\">Uppercase (A-Z)<\/label>\n        <\/li>\n        <li class=\"tamoza-pwdgen-option\">\n            <input type=\"checkbox\" id=\"tamoza-numbers\">\n            <label for=\"tamoza-numbers\">Numbers (0-9)<\/label>\n        <\/li>\n        <li class=\"tamoza-pwdgen-option\">\n            <input type=\"checkbox\" id=\"tamoza-symbols\">\n            <label for=\"tamoza-symbols\">Symbols (!-$^+)<\/label>\n        <\/li>\n        <li class=\"tamoza-pwdgen-option\">\n            <input type=\"checkbox\" id=\"tamoza-exc-dup\">\n            <label for=\"tamoza-exc-dup\">Exclude Duplicate<\/label>\n        <\/li>\n        <li class=\"tamoza-pwdgen-option\">\n            <input type=\"checkbox\" id=\"tamoza-spaces\">\n            <label for=\"tamoza-spaces\">Include Spaces<\/label>\n        <\/li>\n    <\/ul>\n\n    <!-- Generate Button -->\n    <button class=\"tamoza-pwdgen-btn\" id=\"tamoza-pwd-generate\">Generate Password<\/button>\n<\/div>\n\n<script>\n(function() {\n    const slider = document.getElementById('tamoza-pwd-slider');\n    const lengthVal = document.getElementById('tamoza-pwd-length-val');\n    const output = document.getElementById('tamoza-pwd-output');\n    const strengthBar = document.getElementById('tamoza-pwd-strength');\n    const copyBtn = document.getElementById('tamoza-pwd-copy');\n    const generateBtn = document.getElementById('tamoza-pwd-generate');\n    const checkboxes = document.querySelectorAll('.tamoza-pwdgen-option input[type=\"checkbox\"]');\n\n    const characters = {\n        lowercase: 'abcdefghijklmnopqrstuvwxyz',\n        uppercase: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ',\n        numbers: '0123456789',\n        symbols: '^!$%&|[](){}:;.,*+-#@<>~'\n    };\n\n    function generatePassword() {\n        let staticPassword = '';\n        let randomPassword = '';\n        let excludeDuplicate = false;\n        let passLength = slider.value;\n\n        checkboxes.forEach(function(cb) {\n            if (cb.checked) {\n                var id = cb.id.replace('tamoza-', '');\n                if (id !== 'exc-dup' && id !== 'spaces') {\n                    if (characters[id]) staticPassword += characters[id];\n                } else if (id === 'spaces') {\n                    staticPassword += '  ' + staticPassword + '  ';\n                } else if (id === 'exc-dup') {\n                    excludeDuplicate = true;\n                }\n            }\n        });\n\n        if (staticPassword.length === 0) {\n            output.value = '';\n            return;\n        }\n\n        for (var i = 0; i < passLength; i++) {\n            var randomChar = staticPassword[Math.floor(Math.random() * staticPassword.length)];\n            if (excludeDuplicate) {\n                if (!randomPassword.includes(randomChar) || randomChar === ' ') {\n                    randomPassword += randomChar;\n                } else {\n                    i--;\n                }\n            } else {\n                randomPassword += randomChar;\n            }\n        }\n        output.value = randomPassword;\n    }\n\n    function updateStrength() {\n        var val = parseInt(slider.value);\n        strengthBar.className = 'tamoza-pwdgen-strength-bar';\n        if (val <= 8) {\n            strengthBar.classList.add('weak');\n        } else if (val <= 16) {\n            strengthBar.classList.add('medium');\n        } else {\n            strengthBar.classList.add('strong');\n        }\n    }\n\n    function updateSlider() {\n        lengthVal.textContent = slider.value;\n        generatePassword();\n        updateStrength();\n    }\n\n    function copyPassword() {\n        if (!output.value) return;\n        navigator.clipboard.writeText(output.value);\n        copyBtn.classList.add('copied');\n        copyBtn.innerHTML = '<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"\/><\/svg>';\n        setTimeout(function() {\n            copyBtn.classList.remove('copied');\n            copyBtn.innerHTML = '<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"9\" y=\"9\" width=\"13\" height=\"13\" rx=\"2\" ry=\"2\"\/><path d=\"M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1\"\/><\/svg>';\n        }, 1500);\n    }\n\n    slider.addEventListener('input', updateSlider);\n    generateBtn.addEventListener('click', generatePassword);\n    copyBtn.addEventListener('click', copyPassword);\n\n    \/\/ Initialize\n    updateSlider();\n})();\n<\/script>\n\n\n\n\n<br>\n<br>\n<br>\n","protected":false},"excerpt":{"rendered":"<p>Create strong passwords with Password Generator Password Generator Password Length 15 Password Settings Lowercase (a-z) Uppercase (A-Z) Numbers (0-9) Symbols (!-$^+) Exclude Duplicate Include Spaces&#8230;<\/p>\n","protected":false},"author":1,"featured_media":296,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-272","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-onlinetools"],"_links":{"self":[{"href":"https:\/\/test.tamoza.xyz\/index.php?rest_route=\/wp\/v2\/posts\/272","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/test.tamoza.xyz\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/test.tamoza.xyz\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/test.tamoza.xyz\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/test.tamoza.xyz\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=272"}],"version-history":[{"count":5,"href":"https:\/\/test.tamoza.xyz\/index.php?rest_route=\/wp\/v2\/posts\/272\/revisions"}],"predecessor-version":[{"id":741,"href":"https:\/\/test.tamoza.xyz\/index.php?rest_route=\/wp\/v2\/posts\/272\/revisions\/741"}],"wp:attachment":[{"href":"https:\/\/test.tamoza.xyz\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=272"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/test.tamoza.xyz\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=272"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/test.tamoza.xyz\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=272"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}