commit 846f7d2c2500a3a1b8c61dd27905442a95519cea
Author: CaffeineFueled <hello@ittavern.com>
Date:   Mon Mar 3 21:04:38 2025 +0100

    initial commit

diff --git a/README.md b/README.md
new file mode 100644
index 0000000..52e12ea
--- /dev/null
+++ b/README.md
@@ -0,0 +1,11 @@
+# Generic JS Password Generator
+
+Really simple JS-only password generator with various options. Feedback is appreciated.
+
+**[Live Version](https://ittavern.com/password-generator/)**
+
+# TODO
+
+- [ ] Add License
+- [ ] check random function (pseudo?)
+- [ ] some UI changes
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..d24134b
--- /dev/null
+++ b/index.html
@@ -0,0 +1,234 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Generic Password Generator</title>
+<style type="text/css" media="screen">
+    /* Add style rules here */
+            /* Container styles */
+        .pg-container {
+            background-color: #fff;
+            padding: 20px;
+            border-radius: 6px;
+            box-shadow: 0 1px 3px rgba(27,31,35,0.12), 0 8px 24px rgba(27,31,35,0.12);
+            width: 300px;
+            margin: auto;
+        }
+        /* Header styles */
+        .pg-header {
+            font-size: 24px;
+            font-weight: 600;
+            margin-bottom: 10px;
+            color: #24292e;
+        }
+        /* Password display area styles */
+        .password-display {
+            font-family: monospace;
+            padding: 10px;
+            border: 1px solid #d1d5da;
+            border-radius: 4px;
+            margin-bottom: 10px;
+            overflow-x: auto;
+            white-space: nowrap;
+            background-color: #f6f8fa;
+            position: relative;
+        }
+        /* Password item styles */
+        .password-item {
+            display: flex;
+            align-items: center;
+            margin-bottom: 5px;
+        }
+        .password-item span {
+            flex-grow: 1;
+        }
+        /* Copy button styles */
+        .copy-button {
+            margin-right: 10px;
+            background-color: #007bff;
+            border: none;
+            color: white;
+            padding: 3px 7px;
+            border-radius: 4px;
+            cursor: pointer;
+            font-size: 12px;
+        }
+        .copy-button:hover {
+            background-color: #0056b3;
+        }
+        /* Generate button styles */
+        .generate-button {
+            background-color: #28a745;
+            border: none;
+            color: white;
+            padding: 10px 20px;
+            text-align: center;
+            text-decoration: none;
+            display: inline-block;
+            font-size: 16px;
+            border-radius: 6px;
+            cursor: pointer;
+            width: 100%;
+            margin-bottom: 10px;
+        }
+        .generate-button:hover {
+            background-color: #218838;
+        }
+        /* Options section styles */
+        .options {
+            margin-bottom: 10px;
+        }
+        .options label {
+            display: block;
+            margin-bottom: 5px;
+        }
+        /* Password length option styles */
+        .length-option {
+            margin-bottom: 10px;
+        }
+        .length-option label {
+            display: block;
+            margin-bottom: 5px;
+        }
+        /* Exclude characters section styles */
+        .exclude-chars {
+            margin-bottom: 10px;
+        }
+        .exclude-chars label {
+            display: block;
+            margin-bottom: 5px;
+        }
+        /* Highlight class for copied password */
+        .highlight {
+            background-color: orange;
+        }
+        /* Spoiler section styles */
+        .spoiler {
+            margin-top: 10px;
+        }
+        .spoiler-content {
+            display: none;
+            margin-top: 5px;
+        }
+        .spoiler-button {
+            background-color: #6c757d;
+            border: none;
+            color: white;
+            padding: 5px 10px;
+            border-radius: 4px;
+            cursor: pointer;
+        }
+        .spoiler-button:hover {
+            background-color: #5a6268;
+        }
+</style>
+
+<script>
+    /* Function to generate passwords based on user inputs */
+    function generatePasswords() {
+        const length = parseInt(document.getElementById('passwordLength').value);
+        const excludeChars = document.getElementById('excludeChars').value;
+        let charset = "";
+        if (document.getElementById('includeLowercase').checked) {
+            charset += "abcdefghijklmnopqrstuvwxyz";
+        }
+        if (document.getElementById('includeUppercase').checked) {
+            charset += "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
+        }
+        if (document.getElementById('includeNumbers').checked) {
+            charset += "0123456789";
+        }
+        if (document.getElementById('includeSpecialChars').checked) {
+            charset += "!@#$%^&*()_+~`|}{[]:;?><,./-=";
+        }
+
+        // Remove excluded characters from the charset
+        const filteredCharset = charset.split('').filter(char => !excludeChars.includes(char)).join('');
+
+        let passwords = [];
+        for (let j = 0; j < 15; j++) {
+            let password = "";
+            for (let i = 0; i < length; i++) {
+                const randomIndex = Math.floor(Math.random() * filteredCharset.length);
+                password += filteredCharset[randomIndex];
+            }
+            passwords.push(password);
+        }
+
+        // Display the generated passwords
+        const passwordDisplay = document.getElementById('passwordDisplay');
+        passwordDisplay.innerHTML = "";
+        passwords.forEach(password => {
+            const passwordItem = document.createElement('div');
+            passwordItem.className = 'password-item';
+            const passwordText = document.createElement('span');
+            passwordText.textContent = password;
+            const copyButton = document.createElement('button');
+            copyButton.className = 'copy-button';
+            copyButton.textContent = 'Copy';
+            copyButton.onclick = () => copyToClipboard(passwordText);
+
+            passwordItem.appendChild(copyButton);
+            passwordItem.appendChild(passwordText);
+            passwordDisplay.appendChild(passwordItem);
+        });
+    }
+
+    /* Function to copy password to clipboard */
+    function copyToClipboard(element) {
+        const text = element.textContent;
+        navigator.clipboard.writeText(text).then(() => {
+            element.classList.add('highlight');
+            setTimeout(() => {
+                element.classList.remove('highlight');
+            }, 1000);
+        });
+    }
+
+    /* Function to toggle the visibility of the spoiler content */
+    function toggleSpoiler() {
+        const spoilerContent = document.getElementById('spoilerContent');
+        if (spoilerContent.style.display === "none" || spoilerContent.style.display === "") {
+            spoilerContent.style.display = "block";
+        } else {
+            spoilerContent.style.display = "none";
+        }
+    }
+</script>
+
+<div class="pg-container">
+        <!-- Password display area -->
+        <div class="password-display" id="passwordDisplay">Your Passwords</div>
+        <!-- Password length input -->
+        <div class="length-option">
+            <label for="passwordLength">Password Length (1-256):</label>
+            <input type="number" id="passwordLength" min="1" max="256" value="24">
+        </div>
+        <!-- Options for character inclusion -->
+        <div class="options">
+            <label><input type="checkbox" id="includeLowercase" checked> Include Lowercase Letters</label>
+            <label><input type="checkbox" id="includeUppercase" checked> Include Uppercase Letters</label>
+            <label><input type="checkbox" id="includeNumbers" checked> Include Numbers</label>
+            <label><input type="checkbox" id="includeSpecialChars" checked> Include Special Characters</label>
+        </div>
+        <!-- Exclude characters input -->
+        <div class="exclude-chars">
+            <label for="excludeChars">Exclude Characters:</label>
+            <input type="text" id="excludeChars" placeholder="e.g., abc123!@#">
+        </div>
+        <!-- Generate passwords button -->
+        <button class="generate-button" onclick="generatePasswords()">Generate Passwords</button>
+        <!-- Spoiler section for character examples -->
+        <div class="spoiler">
+            <button class="spoiler-button" onclick="toggleSpoiler()">Show/Hide Examples of Characters</button>
+            <div class="spoiler-content" id="spoilerContent">
+                <div>Lowercase: abcdefghijklmnopqrstuvwxyz</div>
+                <div>Uppercase: ABCDEFGHIJKLMNOPQRSTUVWXYZ</div>
+                <div>Numbers: 0123456789</div>
+                <div>Special Characters: !@#$%^&*()_+~`|}{[]:;?><,./-=\</div>
+            </div>
+        </div>
+    </div>
+</body>
+</html>
+
