<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Lock Button</title>
<style>
:root { font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; }
body { padding: 24px; }
.row { display: flex; align-items: center; gap: 12px; }
button.lock {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 10px 14px;
border: 1px solid rgba(0,0,0,.2);
border-radius: 10px;
background: white;
cursor: pointer;
user-select: none;
}
button.lock:hover { filter: brightness(0.98); }
button.lock:active { transform: translateY(1px); }
button.lock:focus-visible { outline: 3px solid rgba(0,0,0,.35); outline-offset: 2px; }
.icon { width: 18px; height: 18px; display: inline-block; }
.status { opacity: .75; }
</style>
</head>
<body>
<div class="row">
<button id="lockBtn" class="lock" type="button" aria-pressed="false">
<span id="iconSlot" class="icon" aria-hidden="true"></span>
<span id="labelSlot">Locked</span>
</button>
<!-- Demo control: remove later and wire to real auth -->
<button id="toggleLogin" type="button">Toggle login</button>
</div>
<p class="status" id="statusLine">Logged out</p>
<script>
// --- Inline SVG icons (no libraries) ---
const ICON_LOCK_CLOSED = `
<svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2">
<path d="M7 11V8a5 5 0 0 1 10 0v3" />
<rect x="5" y="11" width="14" height="10" rx="2" />
</svg>
`;
const ICON_LOCK_OPEN = `
<svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2">
<path d="M17 11V8a5 5 0 0 0-9.5-2" />
<rect x="5" y="11" width="14" height="10" rx="2" />
</svg>
`;
// --- State ---
let loggedIn = false;
const lockBtn = document.getElementById("lockBtn");
const iconSlot = document.getElementById("iconSlot");
const labelSlot = document.getElementById("labelSlot");
const statusLine = document.getElementById("statusLine");
const toggleLogin = document.getElementById("toggleLogin");
function render() {
if (loggedIn) {
iconSlot.innerHTML = ICON_LOCK_OPEN;
labelSlot.textContent = "Unlocked";
lockBtn.setAttribute("aria-pressed", "true");
lockBtn.setAttribute("aria-label", "Unlocked (logged in)");
statusLine.textContent = "Logged in";
} else {
iconSlot.innerHTML = ICON_LOCK_CLOSED;
labelSlot.textContent = "Locked";
lockBtn.setAttribute("aria-pressed", "false");
lockBtn.setAttribute("aria-label", "Locked (logged out)");
statusLine.textContent = "Logged out";
}
}
// Click on lock button could open login modal when logged out,
// or open account menu when logged in. For now, just show behavior.
lockBtn.addEventListener("click", () => {
if (!loggedIn) {
alert("You’re logged out. Show login UI here.");
} else {
alert("You’re logged in. Show account/settings here.");
}
});
// Demo toggle (wire to real auth later)
toggleLogin.addEventListener("click", () => {
loggedIn = !loggedIn;
render();
});
render();
</script>
</body>
</html>
