Skip to main content

IMPORTANT CODE GENERATORS

Image
By 
<!DOC TYPE html>
<html>
<head>
<title>Page Title</title>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'>
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Kanit:300,500,700'>
<style>
@charset "UTF-8";
body {
  min-height: 100vh;
  padding-top: 100px;
  background: linear-gradient(20deg, #b2085a 0%, #52149e 51%, #089bd1 95%);
  font-family: "Kanit", sans-serif;
  font-weight: 300;
}

.instructions {
  font-size: 0.9rem;
  text-align: left;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 500;
  margin: 0;
}

.title-wrapper {
  background: #af5095;
  padding: 2px 10px;
  color: white;
}

h1 {
  font-size: 1.1rem;
}

.inner-wrapper {
  padding: 20px;
}

.wrapper {
  overflow: hidden;
  margin: auto;
  width: 90%;
  max-width: 380px;
  background: white;
  border-radius: 5px;
  box-shadow: 3px 3px 2px rgba(0, 0, 0, 0.4);
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
          flex-flow: column wrap;
}
.wrapper .password-wrapper {
  position: relative;
  border: 2px solid lightgray;
  color: gray;
  padding: 2px 2px 2px 8px;
  border-radius: 5px;
  text-align: left;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: justify;
          justify-content: space-between;
}
.wrapper .password-wrapper .alert {
  position: absolute;
  padding: 0 5px;
  border-radius: 2px;
  width: 21ch;
  height: 89%;
  left: 2px;
  top: -100%;
  width: 96%;
  text-align: center;
  color: #333;
  opacity: 0;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
.wrapper .password-wrapper .alert.success {
  background: rgba(88, 216, 191, 0.9);
  opacity: 1;
}
.wrapper .password-wrapper .alert.fail {
  background: rgba(188, 90, 118, 0.9);
  color: white;
  opacity: 1;
}
.wrapper .password-wrapper .copy {
  height: 100%;
  width: 50px;
  background: #af5095;
  border: 0;
  color: white;
  border-radius: 2px;
  padding: 8px;
  cursor: pointer;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.wrapper .password-wrapper .copy:hover {
  background: #b762a0;
}
.wrapper .controls {
  text-align: left;
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
          flex-flow: column wrap;
}
.wrapper .controls .control {
  padding: 3px;
  border-bottom: 1px solid lightgray;
  width: 100%;
  margin: 2px;
}
.wrapper .controls .generate {
  width: 100%;
  border: 0;
  color: white;
  background: #af5095;
  border-radius: 3px;
  height: 25px;
  margin-top: 10px;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.wrapper .controls .generate:hover {
  background: #b762a0;
}

#length-box {
  width: 100%;
}
#length-box input {
  width: 100%;
}

input[type="checkbox"] {
  visibility: hidden;
}

label.check-label {
  position: relative;
}
label.check-label:before {
  content: "";
  height: 1rem;
  width: 1rem;
  left: -24px;
  top: 0;
  border: 0.5px solid lightgray;
  position: absolute;
  background: transparent;
  -webkit-transition: all 0.3s cubic-bezier(0, 0.82, 1, 1.81);
  transition: all 0.3s cubic-bezier(0, 0.82, 1, 1.81);
}

input[type="checkbox"]:checked + label.check-label:before {
  content: "?";
  font-family: "FontAwesome";
  font-size: 0.8rem;
  color: #58d8bf;
  text-align: center;
  background: #d4f5ef;
  -webkit-transition: all 0.3s cubic-bezier(0, 0.82, 1, 1.81);
  transition: all 0.3s cubic-bezier(0, 0.82, 1, 1.81);
}
</style>
</head>
<body>
<div class="wrapper">
  <div class="title-wrapper">
    <h1 class="title">Password Generator</h1>
  </div>
  <div class="inner-wrapper">
    <div class="password-wrapper">
    <div class="password-here" id="password-here">
    ----
  </div>
    <button id="copy" class="copy">Copy</button>
    <div class="alert" id="alert"><span class="message" id="message"></div>
  </div>
  <p class="instructions">Select your options and click the "generate" button. Your passord will appear above.</p>
  <div class="controls">
    <div class="control length" id="length-box" >
      <label for="length">Password Length</label>
      <input type="range" id='length' min="4" max="20"list="tickmarks">
      <datalist id="tickmarks">
        <option value="4" label="4">
        <option value="5">
        <option value="6">
        <option value="7">
        <option value="8">        
        <option value="9">
        <option value="10">
        <option value="11">
        <option value="12" label="12">
        <option value="13">
        <option value="14">
        <option value="15">
        <option value="16">
        <option value="17">
        <option value="18">
        <option value="19">
        <option value="20">
      </datalist>
    </div>
    <div class="control">
      <input type="checkbox" id="lowercase">
      <label class="check-label" for="lowercase"><span class="checkbox">Use lowercase letters</span></label>
    </div>
    <div class="control">
      <input type="checkbox" id="uppercase">
      <label class="check-label" for="uppercase"><span class="checkbox">Use uppercase letters</span></label>
    </div>
    <div class="control">
      <input type="checkbox" id="numbers">
      <label class="check-label" for="numbers"><span class="checkbox">Use numbers</span></label>
    </div>
    <div class="control">
      <input type="checkbox" id="punctuation">
      <label class="check-label" for="punctuation"><span class="checkbox">Use special characters</span></label>
    </div>
    <button class="generate" id="generate">Generate!</button>
  </div>
  </div>
</div>

<script src='https://cdn.jsdelivr.net/npm/clipboard@1/dist/clipboard.min.js'></script>
<script>
var clipboard = new Clipboard('.copy');
var lowercase = "abcdefghijklmnopqrstuvwxyz",
  uppercase = "ABCDEFGHIJKLMNOPQRSTUVWXYZ",
  numbers = "0123456789",
  punctuation = "!@#$%^&*()_+~`|}{[]:;?><,./-=",
  lowercaseInput = document.getElementById("lowercase"),
  uppercaseInput = document.getElementById("uppercase"),
  punctuationInput = document.getElementById("punctuation"),
  numbersInput = document.getElementById("numbers"),
  lengthInput = document.getElementById("length"),
  passwordFeild = document.getElementById("password-here"),
  generateButton = document.getElementById("generate"),
  copyButton = document.getElementById("copy"),
  plength,
  userPassword,
  passwordCharSet;

function generate() {
  userPassword = "";
  passwordCharSet = "";
  if (lowercaseInput.checked) {
    passwordCharSet += lowercase;
  }
  if (uppercaseInput.checked) {
    passwordCharSet += uppercase;
  }
  if (punctuationInput.checked) {
    passwordCharSet += punctuation;
  }
  if (numbersInput.checked) {
    passwordCharSet += numbers;
  }
  plength = Number(lengthInput.value);

  for (let i = 0; i < plength; i++) {
    userPassword += passwordCharSet.charAt(
      Math.floor(Math.random() * passwordCharSet.length)
    );
  }
  if (userPassword == "") {
    let alertbox = document.getElementById('alert');
    alertbox.innerHTML = "Please select an option before generating"
    alertbox.classList.add('fail');
    setTimeout(function(){ 
      alertbox.classList.remove('fail');
    }, 3000);
  } else {
    passwordFeild.innerHTML = userPassword;
  }
  copyButton.setAttribute("data-clipboard-text", userPassword)
}
generateButton.addEventListener("click", generate);

clipboard.on('success', function(e) {
    console.info('Action:', e.action);
    console.info('Text:', e.text);
    console.info('Trigger:', e.trigger);
    let alertbox = document.getElementById('alert');
    alertbox.innerHTML = "Copied!"
    alertbox.classList.add('success');
    setTimeout(function(){ 
      alertbox.classList.remove('success');
    }, 3000);
    
    e.clearSelection();
});

clipboard.on('error', function(e) {
    console.error('Action:', e.action);
    console.error('Trigger:', e.trigger);
  let alertbox = document.getElementById('alert');
    alertbox.innerHTML = "Try select the text to copy"
    alertbox.classList.add('fail');
    setTimeout(function(){ 
      alertbox.classList.remove('fail');
    }, 3000);
});
</script>
</body>
</html>
Labels:

Comments

Post a Comment

Popular posts from this blog

کراچی ٹیسٹ

By
کراچی ٹیسٹ ۔ نیوزی لینڈ کے خلاف جاری سیریز کا انجام بھی انگلینڈ سے مختلف نہیں نظر آ رہا کیونکہ حریف کوئی بھی ہو ہمارا اپنا مزاج ہے ہم اس خول سے باہر آنے کو تیار نہیں سو بات کر لیتے ہیں جاری ٹیسٹ کی تو جناب نیوزی لینڈ کے کین ولیم سن کی شاندار ڈبل سنچری کی بدولت نیوزی لینڈ کی ٹیم نے اپنی پہلی اننگز 600 سے زائد سکور کرنے کے بعد ڈکلئیر کر دی ہے اس طرح اسے پاکستان کے خلاف اب 170 کے لگھ بھگ لیڈ حاصل ہو گئی ہے اور ابھی کھیل میں 4 سے زائد سیشن باقی ہیں ظاہر ہے آپ نے درست اندازہ لگا لیا ،جی ہاں اب پاکستان کی جیت کا تو 0٪ بھی چانس نہیں ہے لیکن اس میچ پر نیوزی لینڈ کی گرفت مظبوط ہو چکی ہے اگر پاکستان کی ٹیم کم از کم 3 سیشن کھیلے اور 150 سے زائد سکور کر لے تو اس میچ میں مقابلہ ہو گا لیکن اگر پاکستان کی ٹیم اس میچ میں اپنی وکٹس تھرو کرنے کا سلسلہ جاری رکھے گی تو بہت کم چانس ہو گا کہ اس میچ کو بچایا جا سکے سرفراز کا کم بیک اور اس اننگز یعنی دوسری اننگز میں اس کا رول بہت اہم ہو گا لگ ایسے ہی رہا ہے کہ ہم بہت جلد سرفراز کو پاکستان کی ٹیسٹ ٹیم میں دوبارہ ایک کپتان کے طور پر دیکھ پائیں گے اگر پاکستا...
Post a Comment
Read more

عمل سے بنتی ہے زندگی جنت بھی اور جہنم بھی یہ خاکی اپنی فطرت میں نہ نوری ہے نہ ناری (علامہ اقبال )

By
  عمل س ے بنتی ہے زندگی جنت ب ھ ی اور   ج ہ نم ب ھ ی ی ہ خاکی اپنی فطرت می ں ن ہ نوری ہے ن ہ ناری                                     (علام ہ اقبال ) کسی کو وش کرنا ہو کسی کو کس کرنا ہو کسی کو ملنا ہو کسی کو بہت مس کرنا ہو                                         خریدار بلانا ہو کہ خریداری کرنی ہو                                        حا ل پوچھنا ہو کسی کی تیمارداری کرنی ہو وائے ناٹ مری جاں دل سے کھیل کھیل دل میں ہے مور سے زیادہ او نو نو عوام مشکل میں ہے                    ...
Post a Comment
Read more

Ideal social life .don,t tell a lie

By
 جھوٹ اور انسانی معاشرہ ۔۔ بنی نوع انسان کی ترقی کسی شارٹ ٹرم پالیسی کے نتیجے میں ممکن نہیں اس کے لیے جہد مسلسل می ضورت ہوتی ہے اور دنیا میں وہی اقوام رتبہ اور عزت پاتی ہیں جو محنت کو اپنا شعار بناتی ہیں ۔جو اقوام ترقی کی منازل تیزی سے طے کرتی ہیں وہ کسی معجزے کے نتیجے میں نہیں بلکہ محنت کو معجزہ بنا دیتی ہیں جب جب کوئی معاشرہ یا قوم محنت اور جہد مسلسل پر سچے دل سے کاربند ہو جاتی ہے اس کے لیے تحقیق کے دروازے کھلتے جاتے ہیں اور ان کی بلندیوں کا سفر شروع ہو جاتا ہے ۔لیکن بد قسمتی سے اگر کسی معاشرے میں سستی اور کائلی کی بری روایات یا عادات پیدا ہو جاتی ہیں تو ان کی ترقی کا سفر نہ صرف رک جاتا ہے بلکہ ان میں ترقی کے شارٹ روٹس پکڑنے کا رجعان پیدا ہو جاتا ہے ،کوئی بھی فرد یا معاشرہ اگر شارٹ کٹ کے ذریعے ترقی کرنے کی کوشش کرے گا تو اس کا باریک بینی سے جائزہ لیا جائے تو آپ کو پتہ چلے گا کہ اس معاشرہ مٰیں ایک برائی لازماََ نظر آئے گی اور وہ برائی ہے ،جھوٹ ، جھوٹ ایک لعنت ، جھوٹ ایک ایسی لعنت ہے کہ اس کے پیدا ہونے کے بعد پھرکسی بھی مذید برائی کے پیدا ہونے کے امکانات کئی گناہ بڑھ جاتے ہیں مثال ...
Post a Comment
Read more