mini-tools.uk/password.html at main · knsjd25/mini-tools.uk · GitHub

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
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />

  <title id="meta-title">Secure Random Password Generator 2026 | Private & Strong — Mini-Tools</title>
  <meta name="description" id="meta-desc" content="Generate strong, random passwords instantly with our secure online tool. 100% private, client-side generation using industry-standard cryptography. No data is ever stored." />
  <meta name="keywords" content="secure password generator, random password creator, strong password tool, private password gen, offline password maker, cryptographically secure" />
  <link rel="canonical" href="https://mini-tools.uk/pass.html" />

  <link rel="alternate" hreflang="en" href="https://mini-tools.uk/pass.html?lang=en" />
  <link rel="alternate" hreflang="zh-Hans" href="https://mini-tools.uk/pass.html?lang=zh" />
  <link rel="alternate" hreflang="es" href="https://mini-tools.uk/pass.html?lang=es" />
  <link rel="alternate" hreflang="fr" href="https://mini-tools.uk/pass.html?lang=fr" />
  <link rel="alternate" hreflang="de" href="https://mini-tools.uk/pass.html?lang=de" />

  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "SoftwareApplication",
    "name": "Mini-Tools Secure Password Generator",
    "operatingSystem": "Web",
    "applicationCategory": "SecurityApplication",
    "description": "A high-security random password generator that uses browser-based cryptography to ensure no data ever leaves your device.",
    "offers": { "@type": "Offer", "price": "0", "priceCurrency": "USD" }
  }
  </script>

  <script async src="https://cdn.tailwindcss.com"></script>
  <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;600;800&display=swap" rel="stylesheet">

  <style>
    body { font-family: 'Plus Jakarta Sans', sans-serif; background-color: #f8fafc; scroll-behavior: smooth; }
    .pwd-display { font-family: 'Monaco', 'Consolas', monospace; letter-spacing: 0.05em; word-break: break-all; }
    .strength-bar { transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); height: 6px; border-radius: 3px; }
    input[type=range] { -webkit-appearance: none; background: #e2e8f0; height: 6px; border-radius: 5px; }
    input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; background: #2563eb; border-radius: 50%; cursor: pointer; border: 4px solid white; box-shadow: 0 4px 10px rgba(0,0,0,0.1); }
    .prose h2 { font-weight: 800; color: #0f172a; font-size: 1.5rem; margin-top: 2rem; margin-bottom: 1rem; }
    .config-card { transition: all 0.2s; }
    .config-card:hover { border-color: #cbd5e1; }
  </style>
</head>
<body class="min-h-screen flex flex-col">

  <nav class="bg-white/90 backdrop-blur-md sticky top-0 z-50 border-b border-slate-200">
    <div class="max-w-7xl mx-auto px-6 py-4 flex justify-between items-center">
      <div class="flex items-center gap-3">
        <a href="/" id="home-link" class="w-10 h-10 bg-blue-700 rounded-xl flex items-center justify-center text-white font-black shadow">M</a>
        <span class="text-xl font-extrabold text-slate-900 leading-none">Mini-Tools<span class="text-blue-600">.uk</span></span>
      </div>
      <select id="lang-select" class="bg-slate-100 px-3 py-1.5 rounded-lg text-sm font-bold outline-none cursor-pointer border-none focus:ring-2 focus:ring-blue-500">
        <option value="en">🇬🇧 English</option>
        <option value="zh">🇨🇳 简体中文</option>
        <option value="es">🇪🇸 Español</option>
        <option value="fr">🇫🇷 Français</option>
        <option value="de">🇩🇪 Deutsch</option>
      </select>
    </div>
  </nav>

  <main class="max-w-3xl mx-auto px-6 py-12 flex-1">
    <header class="mb-10 text-center">
      <div class="mb-4">
        <span class="bg-blue-50 text-blue-600 text-[10px] font-black px-3 py-1 rounded-full uppercase tracking-tighter">
          🔒 100% Private: Generated Locally
        </span>
      </div>
      <h1 id="page-title" class="text-4xl lg:text-5xl font-extrabold text-slate-900 mb-4 tracking-tight">
        Secure Password Generator
      </h1>
      <p id="page-desc" class="text-lg text-slate-500 max-w-xl mx-auto leading-relaxed">
        Create cryptographically strong passwords instantly. No data is sent to our servers.
      </p>
    </header>

    <div class="bg-white p-8 rounded-3xl border border-slate-100 shadow-sm space-y-8">

      <div class="relative bg-slate-900 p-8 rounded-2xl flex flex-col items-center justify-center min-h-[120px]">
        <div id="pwd-output" class="pwd-display text-2xl md:text-3xl font-bold text-white text-center w-full">••••••••</div>
        <div class="absolute bottom-4 right-4 flex gap-2">
            <button onclick="generate()" class="p-2 bg-white/5 hover:bg-white/10 text-slate-400 rounded-lg transition-all" title="Regenerate">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" /></svg>
            </button>
            <button onclick="copyPwd()" class="p-2 bg-white/10 hover:bg-blue-600 text-white rounded-lg transition-all active:scale-90" id="btn-copy-main">
                <svg id="copy-icon" class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" /></svg>
            </button>
        </div>
      </div>

      <div class="space-y-3">
        <div class="flex justify-between text-[10px] font-black text-slate-400 uppercase tracking-widest">
          <span id="label-strength">Password Strength</span>
          <span id="strength-text">---</span>
        </div>
        <div class="w-full bg-slate-100 h-2 rounded-full overflow-hidden">
          <div id="strength-bar" class="strength-bar w-0 bg-slate-300"></div>
        </div>
      </div>

      <div class="space-y-6 pt-4">
        <div>
          <div class="flex justify-between mb-4">
            <label id="label-length" class="text-sm font-bold text-slate-700">Password Length</label>
            <span id="length-val" class="text-blue-600 font-black text-xl">16</span>
          </div>
          <input type="range" id="input-length" min="6" max="64" value="16" class="w-full cursor-pointer" oninput="updateConfig()">
        </div>

        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
          <label class="config-card flex items-center gap-3 p-4 bg-slate-50 rounded-2xl cursor-pointer border border-transparent">
            <input type="checkbox" id="chk-upper" checked onchange="updateConfig()" class="w-5 h-5 rounded border-slate-300 text-blue-600 focus:ring-blue-500">
            <span id="opt-upper" class="text-sm font-bold text-slate-700">Uppercase (A-Z)</span>
          </label>
          <label class="config-card flex items-center gap-3 p-4 bg-slate-50 rounded-2xl cursor-pointer border border-transparent">
            <input type="checkbox" id="chk-lower" checked onchange="updateConfig()" class="w-5 h-5 rounded border-slate-300 text-blue-600 focus:ring-blue-500">
            <span id="opt-lower" class="text-sm font-bold text-slate-700">Lowercase (a-z)</span>
          </label>
          <label class="config-card flex items-center gap-3 p-4 bg-slate-50 rounded-2xl cursor-pointer border border-transparent">
            <input type="checkbox" id="chk-num" checked onchange="updateConfig()" class="w-5 h-5 rounded border-slate-300 text-blue-600 focus:ring-blue-500">
            <span id="opt-num" class="text-sm font-bold text-slate-700">Numbers (0-9)</span>
          </label>
          <label class="config-card flex items-center gap-3 p-4 bg-slate-50 rounded-2xl cursor-pointer border border-transparent">
            <input type="checkbox" id="chk-sym" checked onchange="updateConfig()" class="w-5 h-5 rounded border-slate-300 text-blue-600 focus:ring-blue-500">
            <span id="opt-sym" class="text-sm font-bold text-slate-700">Symbols (!@#)</span>
          </label>
        </div>
      </div>

      <button id="btn-gen" onclick="generate()" class="w-full py-5 bg-blue-600 hover:bg-blue-700 text-white font-black rounded-2xl shadow-xl shadow-blue-100 transition-all active:scale-[0.98] text-lg uppercase tracking-wider">
        Generate Strong Password
      </button>
    </div>

    <article class="prose max-w-none border-t border-slate-200 pt-16">
      <div id="seo-en">
        <h2>How does our Secure Password Generator work?</h2>
        <p>Your security is our priority. Unlike other online tools, Mini-Tools.uk uses the <strong>Web Crypto API</strong>, a cryptographically secure random number generator built into your modern browser. This ensures that your passwords are 100% random and, more importantly, <strong>never leave your device</strong>.</p>


        <h3>What makes a password strong in 2026?</h3>
        <p>A strong password should be a combination of complexity and length. Security experts recommend a minimum of <strong>12 to 16 characters</strong>. By mixing uppercase letters, numbers, and special symbols, you increase the entropy, making it virtually impossible for brute-force attacks to succeed.</p>

        <h3>Privacy & Local Processing</h3>
        <p>We believe in <strong>Zero-Trust</strong> architecture. Our source code is lightweight and executes entirely on the client side. We don't use cookies to track your passwords, and we don't have a database to store them. You are in full control.</p>
      </div>

      <div id="seo-zh" style="display: none;">
        <h2>为什么选择 Mini-Tools 密码生成器？</h2>
        <p>在数字时代，一个高强度的密码是您账户安全的最后一道防线。我们的<strong>随机密码生成器</strong>采用了最先进的浏览器加密技术 (Web Crypto API)。</p>
        <h3>我们的优势：</h3>
        <ul>
          <li><strong>隐私第一</strong>：所有密码均在您的电脑或手机本地生成，绝不上传服务器。</li>
          <li><strong>真正随机</strong>：不同于普通的数学随机函数，我们使用密码学级别的真随机数。</li>
          <li><strong>完全免费</strong>：无广告、无需注册，即开即用。</li>
        </ul>
        <p>专家建议：请为每个重要的账户设置不同的、长度在 16 位以上的复杂密码。</p>
      </div>
    </article>
  </main>

  <footer class="bg-white border-t border-slate-100 py-12 mt-20">
    <div class="max-w-3xl mx-auto px-6 text-center">
      <div class="flex justify-center gap-6 mb-4 text-xs font-bold text-slate-400 uppercase tracking-widest">
        <a href="/" class="hover:text-blue-600">Home</a>
        <a href="/tax.html" class="hover:text-blue-600">Tax</a>
        <a href="/unit.html" class="hover:text-blue-600">Unit</a>
      </div>
      <p class="text-[10px] text-slate-300 font-bold uppercase tracking-widest">
        © 2026 MINI-TOOLS.UK — SECURE LOCAL CRYPTOGRAPHY
      </p>
    </div>
  </footer>

  <script>
    const i18n = {
      en: {
        metaTitle: "Secure Random Password Generator 2026 | Private & Strong",
        metaDesc: "Create strong, random passwords instantly. 100% private, client-side generation. No data stored. Strongest cryptography for 2026 security.",
        title: "Secure Password Generator", desc: "Create cryptographically strong passwords instantly. No data is sent to our servers.",
        length: "Password Length", btnGen: "Generate Strong Password", strength: "Password Strength",
        optUpper: "Uppercase (A-Z)", optLower: "Lowercase (a-z)", optNum: "Numbers (0-9)", optSym: "Symbols (!@#)",
        levels: ["Very Weak", "Weak", "Good", "Extremely Strong"]
      },
      zh: {
        metaTitle: "随机密码生成器 2026 | 高强度 & 隐私安全",
        metaDesc: "即时生成高强度随机密码。100% 本地浏览器生成，隐私无忧，不上传任何数据。符合 2026 安全标准。",
        title: "随机密码生成器", desc: "即时生成符合密码学强度的高级随机密码。所有数据均在本地处理。",
        length: "自定义密码长度", btnGen: "生成高强度密码", strength: "密码安全性强度",
        optUpper: "包含大写字母 (A-Z)", optLower: "包含小写字母 (a-z)", optNum: "包含数字 (0-9)", optSym: "包含符号 (!@#)",
        levels: ["安全性极低", "安全性弱", "安全性良好", "极其安全 (推荐)"]
      }
    };

    const charset = {
      upper: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ',
      lower: 'abcdefghijklmnopqrstuvwxyz',
      num: '0123456789',
      sym: '!@#$%^&*()_+~`|}{[]:;?><,./-='
    };

    function getLang() {
      return new URLSearchParams(window.location.search).get('lang') || 'en';
    }

    function updateUI() {
      const lang = getLang();
      const data = i18n[lang] || i18n['en'];

      document.title = data.metaTitle;
      document.getElementById('page-title').innerText = data.title;
      document.getElementById('page-desc').innerText = data.desc;
      document.getElementById('label-length').innerText = data.length;
      document.getElementById('btn-gen').innerText = data.btnGen;
      document.getElementById('label-strength').innerText = data.strength;
      document.getElementById('opt-upper').innerText = data.optUpper;
      document.getElementById('opt-lower').innerText = data.optLower;
      document.getElementById('opt-num').innerText = data.optNum;
      document.getElementById('opt-sym').innerText = data.optSym;

      document.getElementById('seo-zh').style.display = (lang === 'zh') ? 'block' : 'none';
      document.getElementById('seo-en').style.display = (lang === 'zh') ? 'none' : 'block';

      document.getElementById('lang-select').value = lang;
      document.getElementById('home-link').href = "/?lang=" + lang;
      generate();
    }

    function updateConfig() {
      document.getElementById('length-val').innerText = document.getElementById('input-length').value;
      generate();
    }

    function generate() {
      const len = document.getElementById('input-length').value;
      let chars = "";
      if(document.getElementById('chk-upper').checked) chars += charset.upper;
      if(document.getElementById('chk-lower').checked) chars += charset.lower;
      if(document.getElementById('chk-num').checked) chars += charset.num;
      if(document.getElementById('chk-sym').checked) chars += charset.sym;

      const output = document.getElementById('pwd-output');
      if(chars === "") {
        output.innerText = "Select Options";
        output.classList.add('text-red-400');
        return;
      }
      output.classList.remove('text-red-400');

      let password = "";
      const array = new Uint32Array(parseInt(len));
      window.crypto.getRandomValues(array);

      for (let i = 0; i < len; i++) {
        password += chars[array[i] % chars.length];
      }

      output.innerText = password;
      updateStrength(password, len);
    }

    function updateStrength(pwd, len) {
      let score = 0;
      if (len >= 12) score++;
      if (len >= 16) score++;
      const hasUpper = /[A-Z]/.test(pwd);
      const hasLower = /[a-z]/.test(pwd);
      const hasNum = /[0-9]/.test(pwd);
      const hasSym = /[^A-Za-z0-9]/.test(pwd);

      if (hasUpper && hasLower && hasNum && hasSym) score += 2;
      else if ((hasUpper || hasLower) && hasNum && hasSym) score += 1;

      const scoreIndex = Math.min(Math.max(score - 1, 0), 3);

      const lang = getLang();
      const levels = i18n[lang].levels;
      const bar = document.getElementById('strength-bar');
      const text = document.getElementById('strength-text');

      const colors = ['bg-red-500', 'bg-orange-400', 'bg-yellow-400', 'bg-emerald-500'];
      const widths = ['w-1/4', 'w-2/4', 'w-3/4', 'w-full'];

      bar.className = `strength-bar h-full rounded-full ${colors[scoreIndex]} ${widths[scoreIndex]}`;
      text.innerText = levels[scoreIndex];
      text.className = `text-xs font-black ${scoreIndex >= 2 ? 'text-emerald-600' : 'text-orange-600'}`;
    }

    function copyPwd() {
      const pwd = document.getElementById('pwd-output').innerText;
      if(pwd === "Select Options") return;
      navigator.clipboard.writeText(pwd).then(() => {
        const btn = document.getElementById('btn-copy-main');
        const icon = document.getElementById('copy-icon');
        const original = icon.innerHTML;
        icon.innerHTML = '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />';
        btn.classList.replace('bg-white/10', 'bg-emerald-500');
        setTimeout(() => {
            icon.innerHTML = original;
            btn.classList.replace('bg-emerald-500', 'bg-white/10');
        }, 2000);
      });
    }

    document.getElementById('lang-select').addEventListener('change', (e) => {
      window.location.href = `?lang=${e.target.value}`;
    });

    window.onload = updateUI;
  </script>
</body>
</html>