Erstellen sie sich ein Passwort mit bestimmten Muster , oder einfach ein Zufallspasswort erstellen lassen
Code
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>passwort generator</title>
</head>
<body>
<style>
#allpw{
background:rgba(0,0,188,0.7);
color: #FFF;
overflow-x: hidden;
padding:10px;
max-width:500px;
width:90vw;
text-align:center;
margin:0 auto;
}
button.pg-btn{
background-color: #31ac5a;
border: 3px solid #31ac5a;
color: #FFF;
padding:10px 50px;
display: inline-block;
border-radius: 3px;
cursor:pointer;
}
button.pg-btn-2{
background: none;
}
.pg-sm-btn{
padding:10px;
display: inline-block;
color: #FFF;
border-radius: 3px;
}
.pg-sm-btn-1{
background-color: #31ac5a;
border: 3px solid #31ac5a;
}
.pg-sm-btn-2{
background-color: #8dc63f;
border: 3px solid #8dc63f;
}
#smallpassword, #password{
border: 3px solid #fff;
padding:10px;
display: inline-block;
border-radius: 3px;
min-width: 150px;
color: #000;
font-size: inherit;
line-height: inherit;
background: #ccc;
cursor:no-drop;
}
#statistics{
padding:10px;
background: #bd4396;
width: 100%;
}
.chkcontainer {
display: block;
font-size: 22px;
user-select: none;
}
.chkcontainer input[type='checkbox'] {
position: absolute;
}
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 21px;
width: 21px;
background-color: #eee;
border-radius: 2px;
color: #000;
}
input[type='checkbox']:checked ~ .checkmark {
background-color:rgba(0,160,0,0.6);
}
.checkmark:after {
content: "";
position: absolute;
}
.chkcontainer input[type='checkbox']:checked ~ .checkmark:after {
display: block;
}
.chkcontainer .checkmark:after {
left: 9px;
top: 5px;
width: 5px;
height: 10px;
border: solid white;
border-width: 0 3px 3px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
span.chktext{
margin-left: 30px;
font-size: 0.6em !important;
}
input.chckinnertextbox{
border: 3px solid #fff;
display: inline-block !important;
border-radius: 3px;
color: #000 !important;
}
.opaczero{
opacity: 0;
height: 1px;
overflow: hidden;
}
.form-horizontal{
display:flex;
min-height:30px;
text-align:center;
}
@media only screen and (max-width:400px) {
#allpw{
width:100%;
}
}
@media only screen and (min-width:300px) {
form{
display:flex;
flex-direction:column;
}
}
</style>
<div id="allpw">
<div class="row info">
<div class="col-md-8">
<p class="pg-label">Generator von sicheren Passwörtern</p>
<p class="pg-text">Verwende diesen kostenlosen Passwortgenerator zur Erstellung extrem sicherer Kennwörter, die schwer zu knacken oder zu erraten sind. Wähle einfach die Kriterien des von Ihnen benötigten Passworts aus und klicken Sie auf „Passwort(e) generieren“. Denke daran: Je mehr Optionen Du aussuchen, umso sicherer das Passwort.</p>
</div>
</div>
<div class="row info">
<div class="col-md-8">
<div class="row">
<div class="text-center col-md-5">
<button type="button" class="pg-btn" id="btndefine">BESTIMME PASSWORT</button>
</div>
<div class="text-center col-md-2">
<span>ODER</span>
</div>
<div class="text-center col-md-5">
<button type="button" class="pg-btn pg-btn-2" id="btnrandom">ZUFALLSPASSWORT ERSTELLEN</button>
</div>
</div>
</div>
</div>
<div class="row info">
<div class="col-md-8">
<div class="row">
<div class="text-left col-md-5 opaczero" id="pwordDefine">
<form class="form-inline" method="get" onsubmit="generate(); return false;">
<div id="charset" class="section">
<div id="charset-checkboxes">
<div class="form-horizontal preset-charset">
<label class="chkcontainer">
<input type="checkbox" checked="" id="charset-0">
<span class="checkmark"></span>
<span class="chktext">Einschließlich Nummern <small>( eg. 123456 )</small></span>
</label>
</div>
<div class="form-horizontal preset-charset">
<label class="chkcontainer">
<input type="checkbox" checked="" id="charset-1">
<span class="checkmark"></span>
<span class="chktext"> Einschließlich Kleinbuchstaben
<small>( eg. abcdefgh )</small>
</span>
</label>
</div>
<div class="form-horizontal preset-charset">
<div class="checkbox">
<label class="chkcontainer">
<input type="checkbox" checked="" id="charset-2">
<span class="checkmark"></span>
<span class="chktext"> Einschließlich Großbuchstaben <small>( eg. ABCDEFGH )</small></span>
</label>
</div>
</div>
<div class="form-horizontal preset-charset">
<div class="checkbox">
<label class="chkcontainer">
<input type="checkbox" id="charset-3">
<span class="checkmark"></span>
<span class="chktext">Einschließlich Symbole <small>( eg. {}[]()/\'"~,;:. )</small></span>
</label>
</div>
</div>
<div class="form-horizontal preset-charset">
<div class="checkbox">
<label class="chkcontainer">
<input type="checkbox" id="charset-4">
<span class="checkmark"></span>
<span class="chktext">Leerzeichen <small>( )</small></span>
</label>
</div>
</div>
<div class="form-horizontal">
<div class="checkbox">
<label class="chkcontainer" for="custom" id="customlabel">
<input type="checkbox" id="custom"/>
<span class="checkmark"></span>
<span class="chktext">Anpassen: <input type="text" class="chckinnertextbox" id="customchars" value="" size="15" style="width:10em; font-size:80%; line-height:1.5" oninput="document.getElementById('custom').checked=true;"> </span>
</label>
</div>
</div>
<div class="form-horizontal">
<div class="checkbox">
<label><input type="radio" name="type" id="by-length" checked="checked"> Länge: </label>
<input type="number" min="0" value="10" id="length" style="width:4em" class="chckinnertextbox" oninput="document.getElementById('by-length').checked=true;"> Zeichen </div>
</div>
<div class="form-horizontal">
<div class="checkbox">
<label><input type="radio" name="type" id="by-entropy"> Entropie: </label>
<input type="number" min="0" value="128" step="any" id="entropy" style="width:4em" class="chckinnertextbox" oninput="document.getElementById('by-entropy').checked=true;"> Bits </div>
</div>
</div>
</div>
<br><br>
<button type="submit" class="pg-sm-btn pg-sm-btn-1">GENERIEREN</button><br>
<span id="password"> </span>
<button type="button" class="pg-sm-btn pg-sm-btn-1 copytoclipboard">KOPIEREN</button>
</form>
</div>
<div class="text-center col-md-5 opaczero" id="pwordRandom">
<div class="form-horizontal">
<span id="smallpassword"> </span>
<button type="button" class="pg-sm-btn pg-sm-btn-1 copytoclipboard">KOPIEREN</button>
</div>
</div>
<div class="row info">
<p class="opaczero" id="statistics"><p>
</div>
</div>
<script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js'></script>
<script id="rendered-js" >
$(document).ready(function () {
$('#btndefine').click(function () {
$('#pwordRandom').addClass('opaczero');
$('#statistics, #pwordDefine').removeClass('opaczero');
$('html,body').animate({
scrollTop: $("#pwordDefine").offset().top });
});
$('#btnrandom').click(function () {
$('#pwordRandom').removeClass('opaczero');
$('#statistics, #pwordDefine').addClass('opaczero');
generate();
$('html,body').animate({
scrollTop: $("#pwordRandom").offset().top });
});
$('button.copytoclipboard').click(function () {
var el = $(this).parent().find('span');
if (el.html() != ' ' && el.text() != '' && el.text() != ' ') {
$(this).text('KOPIERT!').addClass('pg-sm-btn-2').removeClass('pg-sm-btn-1');
var el = $(this).parent().find('span');
copyToClipboard(el);
}
});
$('#customchars').keyup(function () {
var txt = $(this).val();
if (txt == '') {
$('div.preset-charset').show();
$('#charset-0, #charset-1, #charset-2').prop('checked', true);
$('#custom').prop('checked', false);
} else {
$('#custom').prop('checked', true);
$('div.preset-charset').hide().find('input').prop('checked', false);
}
});
$('#customlabel').click(function () {
if ($('input#custom').is(':checked')) {
$('#custom').prop('checked', false);
$('div.preset-charset').show();
$('#charset-0, #charset-1, #charset-2').prop('checked', true);
} else {
$('#custom').prop('checked', true);
$('#customchars').focus();
}
$('#customchars').val('');
});
});
function copyToClipboard(element) {
var $temp = $("<input>");
$("body").append($temp);
$temp.val($(element).text()).select();
document.execCommand("copy");
$temp.remove();
}
//use strict ";
var CHARACTER_SETS = [[true, "Numbers ", "0123456789 "],
[true, "Lowercase ", "abcdefghijklmnopqrstuvwxyz "],
[false, "Uppercase ", "ABCDEFGHIJKLMNOPQRSTUVWXYZ "],
[false, "ASCII symbols ", "!\"#$%" + String.fromCharCode(38) + "'()*+,-./:;" + String.fromCharCode(60) + "=>?@[\\]^_`{|}~"],
[false, "Space", " "]];
var passwordText = document.createTextNode("");
var smallPasswordText = document.createTextNode("");
var statisticsText = document.createTextNode("\u00A0");
document.getElementById("password").appendChild(passwordText);
document.getElementById("smallpassword").appendChild(smallPasswordText);
document.getElementById("statistics").appendChild(statisticsText);
function generate() {
$('button.copytoclipboard').text('KOPIEREN').addClass('pg-sm-btn-1').removeClass('pg-sm-btn-2');
var charsetStr = "";
CHARACTER_SETS.forEach(function (entry, i) {
if (document.getElementById("charset-" + i).checked) charsetStr += entry[2];
});
if (document.getElementById("custom").checked) {
charsetStr += document.getElementById("customchars").value;
}
charsetStr = charsetStr.replace(/ /, "\u00A0");
var charset = [];
for (var i = 0; charsetStr.length > i; i++) {if (window.CP.shouldStopExecution(0)) break;
var c = charsetStr.charCodeAt(i);
var s = null;
if (0xD800 > c || c >= 0xE000) s = charsetStr.charAt(i);else
if (c >= 0xD800 ? 0xDC00 > c : false) {
if (charsetStr.length > i + 1) {
var d = charsetStr.charCodeAt(i + 1);
if (d >= 0xDC00 ? 0xE000 > d : false) {
s = charsetStr.substr(i, 2);
i++;
}
}
} else if (d >= 0xDC00 ? 0xE000 > d : false) i++;else
throw "Assertion error";if (s != null ? charset.indexOf(s) == -1 : false) charset.push(s);
}window.CP.exitedLoop(0);
var password = "";
var statistics = "";
if (charset.length == 0)
alert("Bitte markieren Sie mindestens ein Kästchen");else
if (document.getElementById("by-entropy").checked ? charset.length == 1 : false)
alert("Error: Need at least 2 distinct characters in set");else
{
var length;
if (document.getElementById("by-length").checked) length = parseInt(document.getElementById("length").value, 10);else
if (document.getElementById("by-entropy").checked) length = Math.ceil(parseFloat(document.getElementById("entropy").value) * Math.log(2) / Math.log(charset.length));else
throw "Assertion error";
if (0 > length) alert("Negative Passwortlänge");else
if (length > 10000) alert("Passwort ist zu lang");else
{
for (var i = 0; length > i; i++) {if (window.CP.shouldStopExecution(1)) break;
password += charset[randomInt(charset.length)];
}window.CP.exitedLoop(1);
var entropy = Math.log(charset.length) * length / Math.log(2);
var entropystr;
if (70 > entropy) entropystr = entropy.toFixed(2);else
if (200 > entropy) entropystr = entropy.toFixed(1);else
entropystr = entropy.toFixed(0);
statistics = "Länge = " + length + " Schriftzeichen, \u00A0\u00A0Charset size = " + charset.length + " Symbole, \u00A0\u00A0Entropie = " + entropystr + " Bits";
}
}
passwordText.data = password;
smallPasswordText.data = password;
statisticsText.data = statistics;
}
function randomInt(n) {
var x = randomIntMathRandom(n);
x = (x + randomIntBrowserCrypto(n)) % n;
return x;
}
function randomIntMathRandom(n) {
var x = Math.floor(Math.random() * n);
if (0 > x || x >= n) throw "Arithmetic exception";
return x;
}
var cryptoObject = null;
function randomIntBrowserCrypto(n) {
if (cryptoObject == null) return 0;
var x = new Uint32Array(1);
do {if (window.CP.shouldStopExecution(2)) break;cryptoObject.getRandomValues(x);} while (x[0] - x[0] % n > 4294967296 - n);window.CP.exitedLoop(2);
return x[0] % n;
}
function initCrypto() {
var textNode = document.createTextNode("\u2717");
if ("crypto" in window) cryptoObject = crypto;else
if ("msCrypto" in window) cryptoObject = msCrypto;else
return;if (!("getRandomValues" in cryptoObject) || !("Uint32Array" in window) || typeof Uint32Array != "function") cryptoObject = null;else
textNode.data = "\u2713";
}
initCrypto();
//# sourceURL=pen.js
</script>
<script src="https://cpwebassets.codepen.io/assets/editor/iframe/iframeRefreshCSS-4793b73c6332f7f14a9b6bba5d5e62748e9d1bd0b5c52d7af6376f3d1c625d7e.js"></script>
</body>
</html>