Password generator written with Astro
banana.tngl.sh
1---
2import "../styles/global.css"
3---
4
5<html lang="en">
6 <head>
7 <meta charset="utf-8" />
8 <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
9 <meta name="viewport" content="width=device-width" />
10 <title>Password Generator</title>
11 </head>
12 <script>
13 const display = document.getElementById("password");
14 const wrapper = document.getElementById("box")
15 const wordsResponse = await fetch("/words.txt");
16 if (!wordsResponse.ok) {
17 throw new Error(`Error!: ${wordsResponse.status}`);
18 }
19 const wordsFile = await wordsResponse.text();
20 const words = wordsFile
21 .split("\n")
22 .filter((word) => word.trim() !== "");
23
24 const charsResponse = await fetch("/chars.txt");
25 if (!charsResponse.ok) {
26 throw new Error(`Error!: ${charsResponse.status}`);
27 }
28 const charsFile = await charsResponse.text();
29 const chars = charsFile
30 .split("\n")
31 .filter((char) => char.trim() !== "");
32
33 let password = ""
34 for (let i = 0; i < 6; i++) {
35 const randomWord = Math.floor(Math.random() * words.length);
36 password += words[randomWord] + " "
37 }
38 for (let i = 0; i < 6; i++) {
39 const randomChar = Math.floor(Math.random() * chars.length);
40 password += chars[randomChar]
41 }
42
43 display.textContent = "•".repeat(password.length)
44 display.style.setProperty("color", "#ffffff")
45 wrapper.style.setProperty("border-color", "oklch(20.8% 0.042 265.755)")
46 wrapper?.addEventListener("mouseenter", () => {
47 display.textContent = password
48 })
49 wrapper?.addEventListener("mouseleave", () => {
50 display.textContent = "•".repeat(password.length)
51 })
52 wrapper?.addEventListener("mousedown", () => {
53 navigator.clipboard.writeText(password)
54 display.style.setProperty("color", "#83c472")
55 wrapper.style.setProperty("border-color", "#83c472")
56 display.textContent = "Copied to clipboard..."
57 setTimeout(() => {
58 display.style.setProperty("color", "#ffffff")
59 wrapper.style.setProperty("border-color", "oklch(20.8% 0.042 265.755)")
60 if (wrapper.matches(":hover")) {
61 display.textContent = password
62 } else {
63 display.textContent = "•".repeat(password.length)
64 }
65 }, 1000)
66 })
67 document.addEventListener("keydown", (event) => {
68 if (event.code == "Space") {
69 display.style.setProperty("color", "#8672c4")
70 wrapper.style.setProperty("border-color", "#8672c4")
71 display.textContent = "Reloading..."
72 setTimeout(() => {
73 location.reload()
74 }, 500)
75 }
76 })
77 </script>
78 <body class="bg-black flex justify-center align-middle min-h-svh font-display font-bold">
79 <div id="box" class="m-auto pt-[4rem] pb-[4rem] min-w-[50%] max-w-[90%] pl-[6rem] pr-[6rem] border-2 border-[#7289c4] flex flex-col
80 hover:cursor-pointer hover:scale-105 active:scale-95 transition-transform duration-150 ease-in hover:ease-out
81 ">
82 <span id="password" class="text-[#7289c4] text-3xl text-center transition-colors duration-150 ease-in hover:ease-out overflow-clip">Generating...</span>
83 <span class="text-slate-700 text-md w-full text-center mt-[1rem]">[click] to copy | [hover] to view | [space] to reload</span>
84 </div>
85 </body>
86</html>