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

Bay Nazeer Bhuto The Great Leader

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

صحافی کا قتل یا قلم کا سر قلم

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

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

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