55 lines
3.5 KiB
HTML
55 lines
3.5 KiB
HTML
|
<!-- ═══════════════ PASSWORD ═══════════════ -->
|
|||
|
|
<div class="page" id="page-password">
|
|||
|
|
<button class="back-btn" onclick="showPage('home')">← Back to Tools</button>
|
|||
|
|
<div class="section-header">
|
|||
|
|
<h2><i class="fas fa-key" style="color:var(--red)"></i> Password Generator</h2>
|
|||
|
|
<p>Generate cryptographically secure passwords.</p>
|
|||
|
|
</div>
|
|||
|
|
<div style="max-width:640px;">
|
|||
|
|
<div class="pw-display" id="pwDisplay" onclick="copyText(this.textContent)">Click "Generate" to create a password</div>
|
|||
|
|
<div class="strength-bar"><div class="strength-bar-fill" id="pwStrength"></div></div>
|
|||
|
|
<div style="display:flex;align-items:center;gap:12px;margin:16px 0;">
|
|||
|
|
<label style="font-size:0.85rem;color:var(--text-secondary);white-space:nowrap;">Length: <strong id="pwLenLabel">16</strong></label>
|
|||
|
|
<input type="range" id="pwLength" min="4" max="128" value="16" oninput="document.getElementById('pwLenLabel').textContent=this.value" />
|
|||
|
|
</div>
|
|||
|
|
<div class="checkbox-group">
|
|||
|
|
<label><input type="checkbox" id="pwUpper" checked /> Uppercase (A-Z)</label>
|
|||
|
|
<label><input type="checkbox" id="pwLower" checked /> Lowercase (a-z)</label>
|
|||
|
|
<label><input type="checkbox" id="pwNumbers" checked /> Numbers (0-9)</label>
|
|||
|
|
<label><input type="checkbox" id="pwSymbols" /> Symbols (!@#$%)</label>
|
|||
|
|
</div>
|
|||
|
|
<div class="btn-group">
|
|||
|
|
<button class="btn btn-primary" onclick="generatePassword()"><i class="fas fa-sync"></i> Generate</button>
|
|||
|
|
<button class="btn btn-green" onclick="copyText(document.getElementById('pwDisplay').textContent)"><i class="fas fa-copy"></i> Copy</button>
|
|||
|
|
</div>
|
|||
|
|
<div id="pwBatch" style="margin-top:16px;"></div>
|
|||
|
|
<div class="api-usage">
|
|||
|
|
<button class="api-usage-toggle" onclick="toggleApiUsage(this)"><span><i class="fas fa-terminal"></i> API Usage <span class="badge">REST</span></span><i class="fas fa-chevron-down"></i></button>
|
|||
|
|
<div class="api-usage-body">
|
|||
|
|
<div class="api-baseurl-note">All examples use <code>BASE_URL</code> — set it to your deployment URL.</div>
|
|||
|
|
<div class="api-endpoint">
|
|||
|
|
<span class="api-method post">POST</span><span class="api-path">/api/password</span>
|
|||
|
|
<div class="api-desc">Generate cryptographically secure passwords with configurable rules.</div>
|
|||
|
|
<div class="api-code"><button class="api-code-copy" onclick="copyApiCode(this)">Copy</button><span class="kw">const</span> <span class="var">BASE_URL</span> = <span class="str">"http://localhost:3000"</span>;
|
|||
|
|
|
|||
|
|
<span class="kw">const</span> res = <span class="kw">await</span> <span class="fn">fetch</span>(<span class="var">`${BASE_URL}/api/password`</span>, {
|
|||
|
|
method: <span class="str">"POST"</span>,
|
|||
|
|
headers: { <span class="str">"Content-Type"</span>: <span class="str">"application/json"</span> },
|
|||
|
|
body: JSON.<span class="fn">stringify</span>({
|
|||
|
|
length: 24, <span class="cm">// 4–128 (default: 16)</span>
|
|||
|
|
uppercase: true, <span class="cm">// include A-Z</span>
|
|||
|
|
lowercase: true, <span class="cm">// include a-z</span>
|
|||
|
|
numbers: true, <span class="cm">// include 0-9</span>
|
|||
|
|
symbols: true, <span class="cm">// include !@#$%...</span>
|
|||
|
|
count: 5 <span class="cm">// 1–20 passwords at once</span>
|
|||
|
|
})
|
|||
|
|
});
|
|||
|
|
<span class="kw">const</span> data = <span class="kw">await</span> res.<span class="fn">json</span>();
|
|||
|
|
<span class="cm">// → { success: true, passwords: ["xK#9mL...", "Qw!7pR...", ...] }</span></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|