Password Generator
Required:
HTML
CSS
JS
Demo
HTML
<div class="password-generator"> <div class="password-content"> <div class="checkbox"> <label> <input type="checkbox" id="check-numbers" checked="checked" name="check-number"> <span class="checkbox-title">Include Numbers</span> [ 0 1 2 3 4 5 6 7 8 9 ] </label> </div> <div class="checkbox"> <label> <input type="checkbox" checked="checked" id="check-lower" name="check-lower"> <span class="checkbox-title">Include Lowercase Letters</span> [ a b c d e f g h ... x y z ] </label> </div> <div class="checkbox"> <label> <input type="checkbox" checked="checked" id="check-upper" name="check-upper"> <span class="checkbox-title">Include Uppercase Letters</span> [ A B C D E F G H ... X Y Z ] </label> </div> <div class="checkbox all-special-char"> <label> <input type="checkbox" id="password-allow-special" name="password-allow-special"> <span class="checkbox-title">+ Include Special Symbols</span> [ ~ ! @ # $ % ^ & * ( ) - _ = + [ ] { } ; : , . < > / ? ] </label> </div> <div class="password-special-characters"> <div class="checkbox"> <span> ~ </span> <input type="hidden" name="specialcharacter[]" value="0" /> <input type="checkbox" name="specialcharacter[]" id="special-1" value="~" checked="checked"> <label for="special-1"></label> </div> <div class="checkbox"> <span> ! </span><input type="hidden" name="specialcharacter[]" value="0" /> <input type="checkbox" name="specialcharacter[]" id="special-2" value="!" checked="checked"> <label for="special-2"></label> </div> <div class="checkbox"> <span> @ </span> <input type="hidden" name="specialcharacter[]" value="0" /> <input type="checkbox" name="specialcharacter[]" id="special-3" value="@" checked="checked"> <label for="special-3"></label> </div> <div class="checkbox"> <span> # </span> <input type="hidden" name="specialcharacter[]" value="0" /> <input type="checkbox" name="specialcharacter[]" id="special-4" value="#" checked="checked"> <label for="special-4"></label> </div> <div class="checkbox"> <span> $ </span><input type="hidden" name="specialcharacter[]" value="0" /> <input type="checkbox" name="specialcharacter[]" id="special-5" value="$" checked="checked"> <label for="special-5"></label> </div> <div class="checkbox"> <span> % </span><input type="hidden" name="specialcharacter[]" value="0" /> <input type="checkbox" name="specialcharacter[]" id="special-6" value="%" checked="checked"> <label for="special-6"></label> </div> <div class="checkbox"> <span> ^ </span> <input type="hidden" name="specialcharacter[]" value="0" /> <input type="checkbox" name="specialcharacter[]" id="special-7" value="^" checked="checked"> <label for="special-7"></label> </div> <div class="checkbox"> <span> & </span><input type="hidden" name="specialcharacter[]" value="0" /> <input type="checkbox" name="specialcharacter[]" id="special-8" value="&" checked="checked"> <label for="special-8"></label> </div> <div class="checkbox"> <span> * </span> <input type="hidden" name="specialcharacter[]" value="0" /> <input type="checkbox" name="specialcharacter[]" id="special-9" value="*" checked="checked"> <label for="special-9"></label> </div> <div class="checkbox"> <span> ( </span><input type="hidden" name="specialcharacter[]" value="0" /> <input type="checkbox" name="specialcharacter[]" id="special-10" value="(" checked="checked"> <label for="special-10"></label> </div> <div class="checkbox"> <span> ) </span> <input type="hidden" name="specialcharacter[]" value="0" /> <input type="checkbox" name="specialcharacter[]" id="special-11" value=")" checked="checked"> <label for="special-11"></label> </div> <div class="checkbox"> <span> - </span><input type="hidden" name="specialcharacter[]" value="0" /> <input type="checkbox" name="specialcharacter[]" id="special-12" value="-" checked="checked"> <label for="special-12"></label> </div> <div class="checkbox"> <span> _ </span><input type="hidden" name="specialcharacter[]" value="0" /> <input type="checkbox" name="specialcharacter[]" id="special-13" value="_" checked="checked"> <label for="special-13"></label> </div> <div class="checkbox"> <span> = </span> <input type="hidden" name="specialcharacter[]" value="0" /> <input type="checkbox" name="specialcharacter[]" id="special-14" value="=" checked="checked"> <label for="special-14"></label> </div> <div class="checkbox"> <span> + </span><input type="hidden" name="specialcharacter[]" value="0" /> <input type="checkbox" name="specialcharacter[]" id="special-15" value="+" checked="checked"> <label for="special-15"></label> </div> <div class="checkbox"> <span> [ </span> <input type="hidden" name="specialcharacter[]" value="0" /> <input type="checkbox" name="specialcharacter[]" id="special-16" value="[" checked="checked"> <label for="special-16"></label> </div> <div class="checkbox"> <span> ] </span><input type="hidden" name="specialcharacter[]" value="0" /> <input type="checkbox" name="specialcharacter[]" id="special-17" value="]" checked="checked"> <label for="special-17"></label> </div> <div class="checkbox"> <span> { </span><input type="hidden" name="specialcharacter[]" value="0" /> <input type="checkbox" name="specialcharacter[]" id="special-18" value="{" checked="checked"> <label for="special-18"></label> </div> <div class="checkbox"> <span> } </span><input type="hidden" name="specialcharacter[]" value="0" /> <input type="checkbox" name="specialcharacter[]" id="special-19" value="}" checked="checked"> <label for="special-19"></label> </div> <div class="checkbox"> <span> ; </span><input type="hidden" name="specialcharacter[]" value="0" /> <input type="checkbox" name="specialcharacter[]" id="special-20" value=";" checked="checked"> <label for="special-20"></label> </div> <div class="checkbox"> <span> : </span><input type="hidden" name="specialcharacter[]" value="0" /> <input type="checkbox" name="specialcharacter[]" id="special-21" value=":" checked="checked"> <label for="special-21"></label> </div> <div class="checkbox"> <span> , </span> <input type="hidden" name="specialcharacter[]" value="0" /> <input type="checkbox" name="specialcharacter[]" id="special-22" value="," checked="checked"> <label for="special-22"></label> </div> <div class="checkbox"> <span> . </span> <input type="hidden" name="specialcharacter[]" value="0" /> <input type="checkbox" name="specialcharacter[]" id="special-23" value="." checked="checked"> <label for="special-23"></label> </div> <div class="checkbox"> <span> < </span><input type="hidden" name="specialcharacter[]" value="0" /> <input type="checkbox" name="specialcharacter[]" id="special-24" value="<" checked="checked"> <label for="special-24"></label> </div> <div class="checkbox"> <span> > </span><input type="hidden" name="specialcharacter[]" value="0" /> <input type="checkbox" name="specialcharacter[]" id="special-25" value=">" checked="checked"> <label for="special-25"></label> </div> <div class="checkbox"> <span> / </span><input type="hidden" name="specialcharacter[]" value="0" /> <input type="checkbox" name="specialcharacter[]" id="special-26" value="/" checked="checked"> <label for="special-26"></label> </div> <div class="checkbox"> <span> ? </span><input type="hidden" name="specialcharacter[]" value="0" /> <input type="checkbox" name="specialcharacter[]" id="special-27" value="?" checked="checked"> <label for="special-27"></label> </div> <div class="clear"></div> <a class="uncheck-all">Uncheck All Special Characters</a> </div> <div class="checkbox"> <label> <input type="checkbox" checked="checked" id="check-avoid-special" name="check-avoid-special"> <span class="checkbox-title">Exclude Similar Characters</span> [ 0 O I 1 l ] </label> </div> <div class="select-box"> <select id="password-length" name="password-length"></select> <label for="password-length"><span>Password Length (Minimum Length = 8 Characters)</span></label> </div> <div class="clear"></div> <div class="select-box"> <select id="password-quantity" name="password-quantity"></select> <label for="password-quantity">Password Quantity</label> </div> </div> <button class="password-button">Generate Password</button> <div class="password-result"> <textarea id="password-text"></textarea> </div></div>
CSS
/* --- Password Generator --- */.password-generator {background-color: #444D58;margin-left: auto;margin-right: auto;padding: 13px !important;text-align: left;border-radius: 3px;}.password-content {background-color: #fff;padding: 13px !important;border: 1px solid #E8E8E8;border-radius: 3px;}.checkbox-title {display: inline-block;margin-top: 5px !important;margin-bottom: 5px !important;color: #09F;font-size: 17px !important;}.checkbox label {margin-top: 0px !important;margin-bottom: 0px !important;font-size: 12px;}.select-box {display: inline-flex;width: 100%;margin-top: 5px;vertical-align: middle;}.select-box select {width: 75px;}.select-box label {margin-left: 7px;margin-top: 13px !important;margin-bottom: 0px !important;font-size: 15px;}.password-special-characters {margin-left: 20px;}.password-special-characters .checkbox {display: inline-block;margin-right: 7px;}.password-special-characters .checkbox p {display: block;margin-bottom: 0px !important;margin-right: 5px !important;text-align: center;}.password-special-characters .checkbox input[type=checkbox] + label {display: inline-block;background-image: url('https://framework.sabali.co/icons/buttons/switch-off-small.png');width: 45px;height: 30px;margin-top: 0px !important;padding: 0px;}.password-special-characters .checkbox input[type=checkbox]:checked + label {display: inline-block;background-image: url('https://framework.sabali.co/icons/buttons/switch-on-small.png');width: 45px;height: 30px;margin-top: 0px !important;padding: 0px;}.uncheck-all {display: block;margin-top: 15px !important;margin-bottom: 15px !important;}.password-button {display: block;background-color: #4095ef;width: 80%;max-width: 300px;margin-top: 21px;margin-left: auto;margin-right: auto;margin-bottom: 21px;padding-top: 11px;padding-left: 19px;padding-right: 19px;padding-bottom: 11px;color: #ecf0f1 !important;text-align: center;font-size: 21px;border: none;border-radius: 3px;}.password-button:hover {background-color: #1e62d0;}.password-result input {display: block;margin-left: auto;margin-right: auto; font-size: 17px !important;text-align: center;}#password-text {display: none; }
Javascript
window.addEventListener('DOMContentLoaded', function() { function randomString(e, s) { e = isNaN(e) ? 32 : e; var t, c, o = s.length; if (o) for (; --o;) t = s[c = Math.floor(Math.random() * (o + 1))], s[c] = s[o], s[o] = t; var a = ""; for (i = 0; i < e; i++) a += s[Math.floor(Math.random() * s.length)]; return a } $(document).ready(function() { $(".password-special-characters").hide(500), $('.password-special-characters input[type="checkbox"]').each(function() { $(this).prop("checked", !1) }); for (var e = [], s = 4; s <= 32; s++) e.push("<option value=" + s + ">" + s + "</option>"); $("#password-length").html(e.join("")), $("#password-length").val("8"); var t = []; for (s = 1; s <= 10; s++) t.push("<option value=" + s + ">" + s + "</option>"); t.push("<option value=15>15</option>"), t.push("<option value=20>20</option>"), t.push("<option value=30>30</option>"), $("#password-quantity").html(t.join("")), $('input[type="checkbox"]').each(function() { $(this).closest("label").find("p").css({ color: "black" }) }), $('input[type="checkbox"]:checked').each(function() { $(this).closest("label").find("p").css({ color: "#09F" }) }), $('input[type="checkbox"]').click(function() { $(this).is(":checked") ? $(this).closest("label").find("p").css({ color: "#09F" }) : $(this).closest("label").find("p").css({ color: "black" }) }), $(".uncheck-all").click(function() { $("#password-allow-special").is(":checked") ? ($("#password-allow-special").prop("checked", !1), $("#password-allow-special").closest("label").find("p").css({ color: "black" }), $('.password-special-characters input[type="checkbox"]').each(function() { $(this).closest(".checkbox").find("label").css({ color: "black" }), $(this).prop("checked", !1) })) : ($("#password-allow-special").prop("checked", !0), $("#password-allow-special").closest("label").find("p").css({ color: "#09F" }), $(".password-special-characters").find(":checkbox").each(function() { $(this).closest(".checkbox").find("label").css({ color: "#09F" }), $(this).prop("checked", !0) })) }), $("#password-allow-special").click(function() { $(this).is(":checked") ? ($(".password-special-characters").show(500), $(".password-special-characters").find(":checkbox").each(function() { $(this).closest(".checkbox").find("label").css({ color: "#09F" }), $(this).prop("checked", !0) })) : ($(".password-special-characters").hide(500), $('.password-special-characters input[type="checkbox"]').each(function() { $(this).prop("checked", !1) })) }), $(".password-button").click(function(e) { e.preventDefault(); var s = []; $('input[type="checkbox"]').each(function() { var e = ""; if ($(this).is(":checked")) { if ("check-numbers" == (e = $(this).attr("id"))) for (var t = 0; t <= 9; t++) s.push(t); if ("check-lower" == e) for (t = 97; t <= 122; t++) s.push(String.fromCharCode(t)); if ("check-upper" == e) for (t = 65; t <= 90; t++) s.push(String.fromCharCode(t)); var c; "check-avoid-special" == e && ((c = s.indexOf(0)) > -1 && s.splice(c, 1), (c = s.indexOf("O")) > -1 && s.splice(c, 1), (c = s.indexOf("I")) > -1 && s.splice(c, 1), (c = s.indexOf(1)) > -1 && s.splice(c, 1), (c = s.indexOf("l")) > -1 && s.splice(c, 1)), "password-allow-special" == e || "on" != $(this).val() && s.push($(this).val()) } s.join() }), s.join(); var t = $("#password-length").val(), c = $("#password-quantity").val(), o = ""; if ($(".password-result").html(""), c > 1) { for (var a = 1; a <= c; a++) { var i = randomString(t, s); $(document.createElement("input")).attr({ type: "text", value: i }).appendTo(".password-result"), o = "" == o ? i : o + "\n" + i } $(".password-result").append("<textarea id='password-text'></textarea>"), $("#password-text").text(o), $('input[type="text"]').css({ width: "80%" }), $(".password-result").find("textarea").keyup(), $(".password-result").css("height", "auto") } else i = randomString(t, s), $(document.createElement("input")).attr({ type: "text", value: i }).appendTo(".password-result"), $('input[type="text"]'), $("#password-text").hide() }), $(".password-result").on("keyup", "textarea", function(e) { $(this).css("height", "auto"), $(this).height(this.scrollHeight) }) })})
Fatal error: Uncaught Error: Call to undefined function seo_url() in /home/sabalico/public_html/blueprint/pages/documentation.php:186Stack trace:#0 /home/sabalico/public_html/index.php(86): include()#1 {main} thrown in /home/sabalico/public_html/blueprint/pages/documentation.php on line 186