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

Ideal social life .don,t tell a lie

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

Bay Nazeer Bhuto The Great Leader

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

کراچی ٹیسٹ

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