From 8b65cd1284cb498e05dc8c4a5a5d3a802ba3d662 Mon Sep 17 00:00:00 2001 From: Grisha Date: Sat, 9 Nov 2024 19:43:50 +0400 Subject: [PATCH] create index.html --- index.html | 26 +++++++++++++++++++ script.js | 12 +++++++++ style.css | 75 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 113 insertions(+) create mode 100644 index.html create mode 100644 script.js create mode 100644 style.css diff --git a/index.html b/index.html new file mode 100644 index 0000000..869c96b --- /dev/null +++ b/index.html @@ -0,0 +1,26 @@ + + + + + + + Password Generator + + + + + +
+

Password Generator

+ +
+ +
+

Created with ❤️ by You

+
+
+ + + + + diff --git a/script.js b/script.js new file mode 100644 index 0000000..523500a --- /dev/null +++ b/script.js @@ -0,0 +1,12 @@ +function generatePassword() { + const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*()_+'; + const passwordLength = 12; // Length of the password to generate + let password = ''; + + for (let i = 0; i < passwordLength; i++) { + const randomIndex = Math.floor(Math.random() * characters.length); + password += characters[randomIndex]; + } + + document.getElementById('password').value = password; +} \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..de5eef0 --- /dev/null +++ b/style.css @@ -0,0 +1,75 @@ +/* General Body and Layout Styles */ +body { + font-family: 'Poppins', sans-serif; + background: linear-gradient(135deg, #6a82fb, #fc5c7d); + color: #fff; + margin: 0; + padding: 0; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; +} + +.container { + text-align: center; + background: rgba(0, 0, 0, 0.7); + padding: 30px 50px; + border-radius: 10px; + box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5); + width: 100%; + max-width: 400px; +} + +h1 { + font-size: 2.5rem; + margin-bottom: 20px; +} + +/* Password Display Styles */ +.password { + font-size: 1.8rem; + letter-spacing: 1px; + word-wrap: break-word; + background: #333; + color: #fff; + padding: 15px; + border: none; + border-radius: 8px; + margin-bottom: 20px; + width: 100%; + text-align: center; + box-sizing: border-box; +} + +.password:focus { + outline: none; + background: #444; +} + +/* Button Styles */ +button { + background: #ff66b2; + border: none; + color: #fff; + font-size: 1.2rem; + padding: 10px 30px; + border-radius: 30px; + cursor: pointer; + transition: background 0.3s; +} + +button:hover { + background: #ff3385; +} + +button:focus { + outline: none; +} + +/* Footer Styles */ +.footer { + margin-top: 20px; + font-size: 0.9rem; + color: #ccc; +} \ No newline at end of file