<एचटीएमएल>
<सिर>
<शीर्षक>पृष्ठ शीर्षक
<लिंक rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'>
<लिंक rel='stylesheet' href='https://fonts.googleapis.com/css?family=Kanit:300,500,700'>
<शैली>
@charset "UTF-8";
शरीर {
न्यूनतम-ऊंचाई: 100vh;
पैडिंग-टॉप: 100 पीएक्स;
बैकग्राउंड: लीनियर-ग्रेडिएंट (20 डिग्री, #b2085a 0%, #52149e 51%, #089bd1 95%);
फ़ॉन्ट-फ़ैमिली: "कानित", संस-सेरिफ़;
फ़ॉन्ट-वजन: 300;
}
।निर्देश {
फ़ॉन्ट-आकार: 0.9rem;
पाठ-संरेखण: बाएँ;
}
एच1, एच2, एच3, एच4, एच5, एच6 {
फ़ॉन्ट-वजन: 500;
मार्जिन: 0;
}
शीर्षक-आवरण {
पृष्ठभूमि: #af5095;
पैडिंग: 2px 10px;
रंग सफेद;
}
एच1 {
फ़ॉन्ट-आकार: 1.1rem;
}
भीतरी आवरण {
पैडिंग: 20 पीएक्स;
}
रैपर {
ओवर फलो हिडेन;
मार्जिन: ऑटो;
चौड़ाई: 90%;
अधिकतम-चौड़ाई: 380 पीएक्स;
पृष्ठभूमि: सफेद;
सीमा-त्रिज्या: 5px;
बॉक्स-छाया: 3px 3px 2px आरजीबीए (0, 0, 0, 0.4);
प्रदर्शन: -वेबकिट-बॉक्स;
डिस्प्ले: फ्लेक्स;
-वेबकिट-बॉक्स-ओरिएंट: वर्टिकल;
-वेबकिट-बॉक्स-दिशा: सामान्य;
फ्लेक्स-फ्लो: कॉलम रैप;
}
.रैपर .पासवर्ड-आवरण {
स्थिति: रिश्तेदार;
बॉर्डर: 2px सॉलिड लाइटग्रे;
रंग: ग्रे;
पैडिंग: 2px 2px 2px 8px;
सीमा-त्रिज्या: 5px;
पाठ-संरेखण: बाएँ;
प्रदर्शन: -वेबकिट-बॉक्स;
डिस्प्ले: फ्लेक्स;
-वेबकिट-बॉक्स-पैक: औचित्य;
जस्टिफाई-कंटेंट: स्पेस-बीच;
}
.रैपर .पासवर्ड-रैपर .अलर्ट {
स्थिति: निरपेक्ष;
पैडिंग: 0 5 पीएक्स;
सीमा-त्रिज्या: 2px;
चौड़ाई: 21ch;
ऊंचाई: 89%;
बायां: 2 पीएक्स;
सर्वोच्च 100%;
चौड़ाई: 96%;
पाठ-संरेखण: केंद्र;
रंग: #333;
अपारदर्शिता: 0;
-वेबकिट-संक्रमण: सभी 0.5 सहजता;
संक्रमण: सभी 0.5 आसानी;
}
.आवरण .पासवर्ड-आवरण .चेतावनी.सफलता {
पृष्ठभूमि: आरजीबीए (88, 216, 191, 0.9);
अपारदर्शिता: 1;
}
.आवरण .पासवर्ड-आवरण .अलर्ट .विफल {
पृष्ठभूमि: आरजीबीए (188, 90, 118, 0.9);
रंग सफेद;
अपारदर्शिता: 1;
}
.आवरण .पासवर्ड-आवरण .प्रतिलिपि {
ऊंचाई: 100%;
चौड़ाई: 50 पीएक्स;
पृष्ठभूमि: #af5095;
सीमा: 0;
रंग सफेद;
सीमा-त्रिज्या: 2px;
पैडिंग: 8 पीएक्स;
कर्सर: सूचक;
-वेबकिट-संक्रमण: सभी 0.3 आसानी;
संक्रमण: सभी 0.3 आसानी;
}
.आवरण .पासवर्ड-आवरण .कॉपी: होवर {
पृष्ठभूमि: #b762a0;
}
.आवरण .नियंत्रण {
पाठ-संरेखण: बाएँ;
प्रदर्शन: -वेबकिट-बॉक्स;
डिस्प्ले: फ्लेक्स;
-वेबकिट-बॉक्स-ओरिएंट: वर्टिकल;
-वेबकिट-बॉक्स-दिशा: सामान्य;
फ्लेक्स-फ्लो: कॉलम रैप;
}
.आवरण .नियंत्रण .नियंत्रण {
पैडिंग: 3 पीएक्स;
बॉर्डर-बॉटम: 1px सॉलिड लाइटग्रे;
चौड़ाई: 100%;
मार्जिन: 2 पीएक्स;
}
.आवरण .नियंत्रण .उत्पन्न {
चौड़ाई: 100%;
सीमा: 0;
रंग सफेद;
पृष्ठभूमि: #af5095;
सीमा-त्रिज्या: 3px;
ऊंचाई: 25 पीएक्स;
मार्जिन-टॉप: 10 पीएक्स;
-वेबकिट-संक्रमण: सभी 0.3 आसानी;
संक्रमण: सभी 0.3 आसानी;
}
.आवरण .नियंत्रण .उत्पन्न: होवर {
पृष्ठभूमि: #b762a0;
}
#लंबाई-बॉक्स {
चौड़ाई: 100%;
}
#लंबाई-बॉक्स इनपुट {
चौड़ाई: 100%;
}
इनपुट [प्रकार = "चेकबॉक्स"] {
दृश्यता: छिपा हुआ;
}
लेबल.चेक-लेबल {
स्थिति: रिश्तेदार;
}
लेबल.चेक-लेबल: पहले {
संतुष्ट: "";
ऊंचाई: 1रेम;
चौड़ाई: 1रेम;
बायां: -24 पीएक्स;
शीर्ष: 0;
बॉर्डर: 0.5px सॉलिड लाइटग्रे;
स्थिति: निरपेक्ष;
पृष्ठभूमि: पारदर्शी;
-वेबकिट-संक्रमण: सभी 0.3 क्यूबिक-बेज़ियर (0, 0.82, 1, 1.81);
संक्रमण: सभी 0.3 घन-बेज़ियर (0, 0.82, 1, 1.81);
}
इनपुट [प्रकार = "चेकबॉक्स"]: चेक किया गया + लेबल। चेक-लेबल: { से पहले
संतुष्ट: "?";
फ़ॉन्ट-परिवार: "FontAwesome";
फ़ॉन्ट-आकार: 0.8rem;
रंग: #58d8bf;
पाठ-संरेखण: केंद्र;
पृष्ठभूमि: #d4f5ef;
-वेबकिट-संक्रमण: सभी 0.3 क्यूबिक-बेज़ियर (0, 0.82, 1, 1.81);
संक्रमण: सभी 0.3 घन-बेज़ियर (0, 0.82, 1, 1.81);
}
<शरीर>
<स्क्रिप्ट>
var क्लिपबोर्ड = नया क्लिपबोर्ड ('प्रतिलिपि');
var लोअरकेस = "abcdefghijklmnopqrstuvwxyz",
अपरकेस = "ABCDEFGHIJKLMNOPQRSTUVWXYZ",
नंबर = "0123456789",
विराम चिह्न = "!@#$%^&*()_+~`|}{[]:;?><,./-=",
लोअरकेस इनपुट = document.getElementById ("लोअरकेस"),
अपरकेस इनपुट = दस्तावेज़.getElementById ("अपरकेस"),
विराम चिह्न इनपुट = दस्तावेज़.getElementById ("विराम चिह्न"),
संख्या इनपुट = दस्तावेज़.getElementById ("नंबर"),
लंबाई इनपुट = दस्तावेज़.getElementById ("लंबाई"),
पासवर्डफिल्ड = दस्तावेज़.getElementById ("पासवर्ड-यहाँ"),
जेनरेटबटन = दस्तावेज़.getElementById ("उत्पन्न"),
कॉपीबटन = दस्तावेज़.getElementById ("कॉपी"),
लम्बाई,
उपयोगकर्ता पासवर्ड,
पासवर्ड चारसेट;
समारोह उत्पन्न () {
उपयोगकर्ता पासवर्ड = "";
पासवर्ड चारसेट = "";
अगर (लोअरकेस इनपुट। चेक किया गया) {
पासवर्ड चारसेट + = लोअरकेस;
}
अगर (अपरकेस इनपुट। चेक किया गया) {
पासवर्ड चारसेट + = अपरकेस;
}
अगर (विराम चिह्न इनपुट। चेक किया गया) {
पासवर्ड चारसेट + = विराम चिह्न;
}
अगर (संख्या इनपुट। चेक किया गया) {
पासवर्ड चारसेट + = नंबर;
}
लम्बाई = संख्या (लंबाई इनपुट। मूल्य);
के लिए (चलो मैं = 0; मैं <लंबाई; i++) {
userPassword + = पासवर्डCharSet.charAt (
गणित.मंजिल (गणित.यादृच्छिक () * पासवर्ड चारसेट.लंबाई)
);
}
अगर (उपयोगकर्ता पासवर्ड == "") {
चलो अलर्टबॉक्स = दस्तावेज़.getElementById ('चेतावनी');
alertbox.innerHTML = "जेनरेट करने से पहले कृपया एक विकल्प चुनें"
अलर्टबॉक्स.क्लासलिस्ट.एड ('विफल');
सेटटाइमआउट (फ़ंक्शन () {
अलर्टबॉक्स.क्लासलिस्ट.रिमूव ('विफल');
}, 3000);
} अन्य {
PasswordFeild.innerHTML = userPassword;
}
copyButton.setAttribute ("डेटा-क्लिपबोर्ड-टेक्स्ट", यूजरपासवर्ड)
}
GenerateButton.addEventListener ("क्लिक करें", जनरेट करें);
क्लिपबोर्ड.ऑन ('सफलता', फ़ंक्शन (ई) {
कंसोल.इन्फो ('एक्शन:', ई.एक्शन);
कंसोल.इन्फो ('पाठ:', e.text);
कंसोल.इन्फो ('ट्रिगर:', e.trigger);
चलो अलर्टबॉक्स = दस्तावेज़.getElementById ('चेतावनी');
अलर्टबॉक्स.इनरएचटीएमएल = "कॉपी किया गया!"
अलर्टबॉक्स.क्लासलिस्ट.एड ('सफलता');
सेटटाइमआउट (फ़ंक्शन () {
अलर्टबॉक्स.क्लासलिस्ट.रिमूव ('सफलता');
}, 3000);
e.clearSelection ();
});
क्लिपबोर्ड.ऑन ('त्रुटि', फ़ंक्शन (ई) {
कंसोल.एरर ('एक्शन:', ई.एक्शन);
कंसोल.एरर ('ट्रिगर:', ई.ट्रिगर);
चलो अलर्टबॉक्स = दस्तावेज़.getElementById ('चेतावनी');
alertbox.innerHTML = "कॉपी करने के लिए टेक्स्ट को चुनने की कोशिश करें"
अलर्टबॉक्स.क्लासलिस्ट.एड ('विफल');
सेटटाइमआउट (फ़ंक्शन () {
अलर्टबॉक्स.क्लासलिस्ट.रिमूव ('विफल');
}, 3000);
});
पासवर्ड जेनरेटर
----
<बटन आईडी = "कॉपी" क्लास = "कॉपी"> कॉपी करें
अपने विकल्पों का चयन करें और "जनरेट" बटन पर क्लिक करें। आपका पासवर्ड ऊपर दिखाई देगा।
<लेबल के लिए = "लंबाई"> पासवर्ड की लंबाई
<इनपुट प्रकार = "रेंज" आईडी = 'लंबाई' मिनट = "4" अधिकतम = "20" सूची = "टिकमार्क">
<डेटालिस्ट आईडी = "टिकमार्क">
<विकल्प मूल्य = "4" लेबल = "4">
<विकल्प मूल्य = "5">
<विकल्प मूल्य = "6">
<विकल्प मूल्य = "7">
<विकल्प मूल्य = "8">
<विकल्प मूल्य = "9">
<विकल्प मूल्य = "10">
<विकल्प मूल्य = "11">
<विकल्प मूल्य = "12" लेबल = "12">
<विकल्प मूल्य = "13">
<विकल्प मूल्य = "14">
<विकल्प मूल्य = "15">
<विकल्प मूल्य = "16">
<विकल्प मूल्य = "17">
<विकल्प मूल्य = "18">
<विकल्प मूल्य = "19">
<विकल्प मूल्य = "20">
<इनपुट प्रकार = "चेकबॉक्स" आईडी = "लोअरकेस">
<लेबल क्लास="चेक-लेबल" के लिए="लोअरकेस"><स्पैन क्लास="चेकबॉक्स">लोअरकेस अक्षरों का प्रयोग करें
<इनपुट प्रकार = "चेकबॉक्स" आईडी = "अपरकेस">
<लेबल क्लास="चेक-लेबल" के लिए="अपरकेस">अपरकेस अक्षरों का प्रयोग करें
<इनपुट प्रकार = "चेकबॉक्स" आईडी = "संख्या">
<लेबल क्लास="चेक-लेबल" फॉर="नंबर्स">नंबरों का इस्तेमाल करें
<इनपुट प्रकार = "चेकबॉक्स" आईडी = "विराम चिह्न">
<लेबल वर्ग = "चेक-लेबल" के लिए = "विराम चिह्न"> विशेष वर्णों का प्रयोग करें
<बटन वर्ग = "उत्पन्न करें" आईडी = "उत्पन्न करें"> उत्पन्न करें!