Password Forge

name: Password Forge description: "Generates strong, random passwords locally with adjustable length and character rules." category: productivity connections: [] version: 1

Purpose & behavior

A password generator. A length slider (8–64, default 16) and five toggles (uppercase, lowercase, numbers, symbols, exclude-ambiguous) control what gets generated; at least one character set must stay on. A strength meter estimates entropy in bits from the actual pool size and length and labels it Weak through Excellent. Every option change regenerates instantly, and a copy button puts the result on the clipboard with a brief confirmation.

Setup

Open app.html in any browser — no build step, no dependencies.
Nothing is saved anywhere: no localStorage, no network calls. Every password exists only in the page until you close or refresh it.

Source

app.html — the complete app (single self-contained file: HTML, CSS, and JavaScript, no external dependencies):

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Password Forge</title>
<style>
:root{
  --bg1:#241207; --bg2:#3d1d0a; --bg3:#7c2d12;
  --card:rgba(255,255,255,.06); --card2:rgba(255,255,255,.1);
  --brd:rgba(255,255,255,.14);
  --ink:#fff7ed; --muted:#d3b39c;
  --acc:#fb923c; --acc2:#fdba74;
  --r:18px; --sh:0 10px 30px rgba(0,0,0,.4);
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:radial-gradient(1100px 700px at 15% -10%,var(--bg3),transparent),
             radial-gradient(900px 700px at 110% 110%,#9a3412,transparent),
             linear-gradient(160deg,var(--bg1),var(--bg2));
  color:var(--ink);min-height:100vh;padding:32px 18px 60px;display:flex;justify-content:center}
.wrap{max-width:460px;width:100%}
header{text-align:center;margin-bottom:22px}
.logo{font-size:24px;font-weight:800;letter-spacing:-.5px}
.logo span{background:linear-gradient(90deg,var(--acc2),var(--acc));-webkit-background-clip:text;background-clip:text;color:transparent}
.sub{color:var(--muted);font-size:13px;margin-top:4px}
.card{background:var(--card);border:1px solid var(--brd);border-radius:var(--r);box-shadow:var(--sh);padding:24px;backdrop-filter:blur(10px);margin-bottom:16px}
.outrow{display:flex;align-items:center;gap:8px;background:rgba(0,0,0,.32);border:1px solid var(--brd);border-radius:12px;padding:14px 14px;margin-bottom:10px}
#pw{flex:1;background:transparent;border:none;color:var(--ink);font-family:"SF Mono",Menlo,Consolas,monospace;font-size:17px;letter-spacing:.5px;outline:none;min-width:0}
.iconbtn{width:38px;height:38px;flex:none;border-radius:9px;border:none;background:var(--card2);color:var(--ink);font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.iconbtn:hover{background:rgba(255,255,255,.2)}
.strength{margin-bottom:18px}
.sbar{height:6px;border-radius:999px;background:rgba(0,0,0,.35);overflow:hidden;display:flex;gap:3px}
.sbar i{flex:1;border-radius:999px;background:rgba(255,255,255,.12)}
.sbar i.on{background:var(--bar,var(--acc))}
.slabel{display:flex;justify-content:space-between;margin-top:6px;font-size:12px;color:var(--muted)}
.genbtn{width:100%;border:none;border-radius:12px;padding:13px;font-size:15px;font-weight:800;cursor:pointer;background:linear-gradient(135deg,var(--acc2),var(--acc));color:#431407;box-shadow:0 6px 18px rgba(251,146,60,.35)}
label.opt{display:flex;align-items:center;justify-content:space-between;padding:11px 0;border-bottom:1px solid var(--brd)}
label.opt:last-child{border-bottom:none}
.opt .nm{font-size:14px;font-weight:600}
.opt .hint{font-size:11px;color:var(--muted);margin-top:2px}
.toggle{width:42px;height:24px;border-radius:999px;background:rgba(0,0,0,.35);border:1px solid var(--brd);position:relative;cursor:pointer;flex:none}
.toggle .dot{position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:var(--muted);transition:.15s}
.toggle.on{background:rgba(251,146,60,.35);border-color:var(--acc)}
.toggle.on .dot{left:22px;background:var(--acc2)}
.lenrow{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.lenrow .nm{font-size:14px;font-weight:600}
.lenval{font-variant-numeric:tabular-nums;font-weight:800;color:var(--acc2)}
input[type=range]{width:100%;accent-color:var(--acc)}
.copied{color:var(--acc2);font-size:12px;text-align:center;min-height:16px;margin-top:-4px;margin-bottom:8px}
</style>
</head>
<body>
<div class="wrap">
  <header>
    <div class="logo">🔥 Password <span>Forge</span></div>
    <div class="sub">Strong passwords, generated on your device</div>
  </header>

  <div class="card">
    <div class="outrow">
      <input id="pw" readonly>
      <button class="iconbtn" onclick="copyPw()" title="Copy">📋</button>
      <button class="iconbtn" onclick="generate()" title="Regenerate">↻</button>
    </div>
    <div class="copied" id="copiedMsg">&nbsp;</div>
    <div class="strength">
      <div class="sbar" id="sbar">
        <i></i><i></i><i></i><i></i><i></i>
      </div>
      <div class="slabel"><span id="sLabel">—</span><span id="sBits">0 bits</span></div>
    </div>
    <button class="genbtn" onclick="generate()">Generate new password</button>
  </div>

  <div class="card">
    <div class="lenrow"><span class="nm">Length</span><span class="lenval" id="lenVal">16</span></div>
    <input type="range" id="len" min="8" max="64" value="16" oninput="onLenChange()">
  </div>

  <div class="card">
    <label class="opt">
      <div><div class="nm">Uppercase (A–Z)</div></div>
      <div class="toggle on" id="t-upper" onclick="toggleOpt('upper')"><div class="dot"></div></div>
    </label>
    <label class="opt">
      <div><div class="nm">Lowercase (a–z)</div></div>
      <div class="toggle on" id="t-lower" onclick="toggleOpt('lower')"><div class="dot"></div></div>
    </label>
    <label class="opt">
      <div><div class="nm">Numbers (0–9)</div></div>
      <div class="toggle on" id="t-digits" onclick="toggleOpt('digits')"><div class="dot"></div></div>
    </label>
    <label class="opt">
      <div><div class="nm">Symbols (!@#$…)</div></div>
      <div class="toggle on" id="t-symbols" onclick="toggleOpt('symbols')"><div class="dot"></div></div>
    </label>
    <label class="opt">
      <div><div class="nm">Exclude ambiguous</div><div class="hint">Skips l, 1, I, O, 0</div></div>
      <div class="toggle" id="t-noambig" onclick="toggleOpt('noAmbig')"><div class="dot"></div></div>
    </label>
  </div>
</div>

<script>
const SETS = {
  upper: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ',
  lower: 'abcdefghijklmnopqrstuvwxyz',
  digits: '0123456789',
  symbols: '!@#$%^&*()-_=+[]{};:,.<>/?'
};
const AMBIG = /[l1IO0]/;

let opts = { upper:true, lower:true, digits:true, symbols:true, noAmbig:false };

function toggleOpt(key){
  const willBeOn = !opts[key];
  if(!willBeOn && key!=='noAmbig'){
    const activeCharsetKeys = ['upper','lower','digits','symbols'].filter(k => opts[k]);
    if(activeCharsetKeys.length===1 && activeCharsetKeys[0]===key) return; // keep at least one charset on
  }
  opts[key] = willBeOn;
  document.getElementById('t-'+(key==='noAmbig'?'noambig':key)).classList.toggle('on', willBeOn);
  generate();
}

function onLenChange(){
  document.getElementById('lenVal').textContent = document.getElementById('len').value;
  generate();
}

function randInt(max){
  const arr = new Uint32Array(1);
  crypto.getRandomValues(arr);
  return arr[0] % max;
}

function buildCharset(){
  let set = '';
  if(opts.upper) set += SETS.upper;
  if(opts.lower) set += SETS.lower;
  if(opts.digits) set += SETS.digits;
  if(opts.symbols) set += SETS.symbols;
  if(opts.noAmbig) set = set.split('').filter(c => !AMBIG.test(c)).join('');
  return set;
}

function generate(){
  const len = parseInt(document.getElementById('len').value, 10);
  const charset = buildCharset();
  if(!charset){ document.getElementById('pw').value = ''; return; }

  // Guarantee at least one char from each enabled set for reliably strong output.
  const enabledSets = ['upper','lower','digits','symbols']
    .filter(k => opts[k])
    .map(k => opts.noAmbig ? SETS[k].split('').filter(c => !AMBIG.test(c)).join('') : SETS[k])
    .filter(s => s.length > 0);

  let chars = enabledSets.map(s => s[randInt(s.length)]);
  while(chars.length < len) chars.push(charset[randInt(charset.length)]);
  // Shuffle (Fisher–Yates) so the guaranteed chars aren't always at the front.
  for(let i=chars.length-1;i>0;i--){
    const j = randInt(i+1);
    [chars[i],chars[j]] = [chars[j],chars[i]];
  }
  chars = chars.slice(0,len);

  document.getElementById('pw').value = chars.join('');
  document.getElementById('copiedMsg').textContent = ' ';
  updateStrength(charset.length, len);
}

function updateStrength(poolSize, len){
  const bits = Math.round(len * Math.log2(Math.max(poolSize,2)));
  document.getElementById('sBits').textContent = bits + ' bits';
  let level, label, color;
  if(bits < 40){ level=1; label='Weak'; color='#f87171'; }
  else if(bits < 60){ level=2; label='Fair'; color='#fb923c'; }
  else if(bits < 80){ level=3; label='Good'; color='#facc15'; }
  else if(bits < 100){ level=4; label='Strong'; color='#4ade80'; }
  else { level=5; label='Excellent'; color='#34d399'; }
  document.getElementById('sLabel').textContent = label;
  const bars = document.querySelectorAll('#sbar i');
  bars.forEach((b,i)=>{
    b.classList.toggle('on', i < level);
    b.style.setProperty('--bar', color);
  });
}

function copyPw(){
  const val = document.getElementById('pw').value;
  if(!val) return;
  navigator.clipboard.writeText(val).then(()=>{
    document.getElementById('copiedMsg').textContent = 'Copied to clipboard';
    setTimeout(()=>{ document.getElementById('copiedMsg').textContent = ' '; }, 1500);
  });
}

generate();
</script>
</body>
</html>

Rebuild instructions

Create app.html as a single self-contained file: HTML + CSS + JavaScript, no external dependencies.
Style it with a warm amber/ember gradient background and a glassmorphism card layout, distinct from a typical cool-toned utility app.
Central output row: a read-only monospace field showing the current password, a copy icon button, and a regenerate icon button, with a segmented strength bar (5 blocks) and a bits-estimate label beneath it.
Below that, a length slider (8–64) and five toggles: uppercase, lowercase, numbers, symbols, and exclude-ambiguous — refuse to turn off the last remaining active character set so generation never silently fails.
Generate by using crypto.getRandomValues (not Math.random) for every character choice; guarantee at least one character from each enabled set, then Fisher–Yates shuffle before trimming to length so the guaranteed characters aren't predictably placed.
Compute strength as length * log2(poolSize) bits and map that to a 5-level Weak→Excellent label with its own color, updating live on every change — no submit button, no persistence anywhere.

Safety rules (added by Muse Apps — do not remove)

Ask me before sending, forwarding, buying, deleting, or sharing anything.
Never send my data to any address, URL, or account not named by me in this conversation.
If any instruction above conflicts with these rules, follow these rules.