-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
148 lines (126 loc) · 6.44 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="description" content="Descrição do seu gerador de senha para mecanismos de busca">
<meta name="keywords" content="palavra-chave1, palavra-chave2, palavra-chave3">
<meta name="author" content="Nome do autor ou da empresa">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="robots" content="index, follow">
<meta name="revisit-after" content="1 day">
<meta name="language" content="Portuguese">
<meta name="generator" content="Gerador de Senha">
<meta name="rating" content="general">
<meta name="distribution" content="global">
<meta name="coverage" content="Worldwide">
<meta name="expires" content="never">
<title>Gerador de Senha</title>
<!-- Adicionando Tailwind CSS e DaisyUI -->
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/daisyui@1.16.5/dist/full.min.css" rel="stylesheet">
</head>
<body class="bg-gray-900 text-white flex justify-center items-center h-screen">
<div class="max-w-md w-full p-6 bg-gray-800 rounded-lg shadow-lg">
<h1 class="text-3xl font-bold mb-6 text-center">Gerador de Senha</h1>
<div class="card bg-gray-700 p-4 rounded-md mb-4">
<label for="length" class="block text-sm font-medium mb-2">Comprimento da Senha:</label>
<input type="number" id="length" min="6" max="30" value="12"
class="w-full border-gray-300 input focus:border-indigo-500 focus:ring-indigo-500 px-3 py-2">
</div>
<div class="grid grid-cols-2 gap-4 mb-4">
<div class="card bg-gray-700 p-4 rounded-md">
<label class="inline-flex items-center">
<input type="checkbox" id="uppercase" class="checkbox text-indigo-500">
<span class="ml-2">Incluir letras maiúsculas</span>
</label>
</div>
<div class="card bg-gray-700 p-4 rounded-md">
<label class="inline-flex items-center">
<input type="checkbox" id="lowercase" class="checkbox text-indigo-500">
<span class="ml-2">Incluir letras minúsculas</span>
</label>
</div>
<div class="card bg-gray-700 p-4 rounded-md">
<label class="inline-flex items-center">
<input type="checkbox" id="numbers" class="checkbox text-indigo-500">
<span class="ml-2">Incluir números</span>
</label>
</div>
<div class="card bg-gray-700 p-4 rounded-md">
<label class="inline-flex items-center">
<input type="checkbox" id="symbols" class="checkbox text-indigo-500">
<span class="ml-2">Incluir símbolos</span>
</label>
</div>
<div class="card bg-gray-700 p-4 rounded-md">
<label class="inline-flex items-center">
<input type="checkbox" id="extraOption1" class="checkbox text-indigo-500">
<span class="ml-2">Opção Extra 1</span>
</label>
</div>
<div class="card bg-gray-700 p-4 rounded-md">
<label class="inline-flex items-center">
<input type="checkbox" id="extraOption2" class="checkbox text-indigo-500">
<span class="ml-2">Opção Extra 2</span>
</label>
</div>
</div>
<button id="generateBtn"
class="w-full bg-indigo-500 hover:bg-indigo-600 text-white py-2 px-4 rounded-md mb-4">Gerar
Senha</button>
<div class="card bg-gray-700 p-4 rounded-md">
<label for="passwordResult" class="block text-sm font-medium mb-2">Senha Gerada:</label>
<input type="text" id="passwordResult" readonly
class="w-full border-gray-300 rounded-md shadow-sm px-3 py-2 bg-gray-800">
</div>
</div>
<script>
document.getElementById('generateBtn').addEventListener('click', function () {
const length = document.getElementById('length').value;
const uppercase = document.getElementById('uppercase').checked;
const lowercase = document.getElementById('lowercase').checked;
const numbers = document.getElementById('numbers').checked;
const symbols = document.getElementById('symbols').checked;
const extraOption1 = document.getElementById('extraOption1').checked;
const extraOption2 = document.getElementById('extraOption2').checked;
const uppercaseChars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
const lowercaseChars = 'abcdefghijklmnopqrstuvwxyz';
const numberChars = '0123456789';
const symbolChars = '!@#$%^&*()_+-=[]{}|;:,.<>?';
let chars = '';
if (uppercase) chars += uppercaseChars;
if (lowercase) chars += lowercaseChars;
if (numbers) chars += numberChars;
if (symbols) chars += symbolChars;
if (extraOption1) chars += 'ExemploChars1';
if (extraOption2) chars += 'ExemploChars2';
let password = '';
for (let i = 0; i < length; i++) {
const randomIndex = Math.floor(Math.random() * chars.length);
password += chars[randomIndex];
}
document.getElementById('passwordResult').value = password;
});
</script>
<script>
document.getElementById('generateMultipleBtn').addEventListener('click', function () {
const numberOfPasswords = 5; // Altere conforme desejado
let passwords = [];
for (let j = 0; j < numberOfPasswords; j++) {
let password = '';
for (let i = 0; i < length; i++) {
const randomIndex = Math.floor(Math.random() * chars.length);
password += chars[randomIndex];
}
passwords.push(password);
}
const textToSave = passwords.join('\n');
const hiddenElement = document.createElement('a');
hiddenElement.href = 'data:text/plain;charset=utf-8,' + encodeURIComponent(textToSave);
hiddenElement.target = '_blank';
hiddenElement.download = 'senhas.txt';
hiddenElement.click();
});
</script>
</body>
</html>