stem-lab-toolkit 1.0.1 → 1.0.2

package/css/style.css

@@ -50,8 +50,9 @@ a { color: inherit; text-decoration: none; }
 }
 
 .logo-img {
-  height: 28px;
+  height: 40px;
   width: auto;
+  border-radius: 8px;
 }
 
 .site-nav {
@@ -611,3 +612,4 @@ a { color: inherit; text-decoration: none; }
   transition: background .15s, color .15s;
 }
 .nav-calc-btn:hover { background: var(--surface); color: var(--text); }
+

package/index.html

@@ -25,7 +25,6 @@
       user-select: none;
     }
 
-    /* Header */
     .calc-header {
       display: flex;
       align-items: center;
@@ -64,7 +63,6 @@
       letter-spacing: .05em;
     }
 
-    /* Display */
     .calc-display {
       padding: 12px 24px 20px;
       text-align: right;
@@ -95,7 +93,6 @@
       transition: font-size .1s;
     }
 
-    /* Scientific row */
     .sci-rows {
       background: #111;
       border-bottom: 1px solid rgba(255,255,255,.06);
@@ -127,7 +124,6 @@
     .btn-sci:active { background: rgba(255,255,255,.1); }
     .btn-sci.inv-active { color: #ff9f0a; }
 
-    /* Main buttons */
     .calc-buttons {
       display: grid;
       grid-template-columns: repeat(4, 1fr);
@@ -156,8 +152,8 @@
     .btn-zero  { grid-column: span 2; justify-content: flex-start; padding-left: 30px; }
     .btn-eq    { background: #ff9f0a; color: #fff; }
 
-    /* PIN overlay */
-    .pin-overlay {
+    /* Login overlay */
+    .login-overlay {
       position: fixed;
       inset: 0;
       background: rgba(0,0,0,.75);
@@ -167,97 +163,84 @@
       z-index: 999;
       backdrop-filter: blur(8px);
     }
+    .login-overlay.hidden { display: none; }
 
-    .pin-overlay.hidden { display: none; }
-
-    .pin-box {
+    .login-box {
       background: #1c1c1e;
       border-radius: 20px;
-      padding: 32px 28px 24px;
+      padding: 32px 28px 28px;
       width: 300px;
       box-shadow: 0 32px 80px rgba(0,0,0,.6);
       border: 1px solid rgba(255,255,255,.08);
       text-align: center;
     }
 
-    .pin-box h2 {
+    .login-box h2 {
       font-size: 1rem;
       font-weight: 600;
       color: #fff;
       margin-bottom: 4px;
     }
 
-    .pin-box p {
+    .login-box p {
       font-size: 0.8rem;
       color: rgba(255,255,255,.4);
       margin-bottom: 24px;
     }
 
-    .pin-dots {
-      display: flex;
-      justify-content: center;
-      gap: 14px;
-      margin-bottom: 28px;
-    }
-
-    .pin-dot {
-      width: 13px;
-      height: 13px;
-      border-radius: 50%;
-      border: 2px solid rgba(255,255,255,.2);
-      background: transparent;
-      transition: all .15s;
-    }
-
-    .pin-dot.filled { background: #ff9f0a; border-color: #ff9f0a; }
-    .pin-dot.error  { background: #ff3b30; border-color: #ff3b30; }
-
-    .pin-keypad {
-      display: grid;
-      grid-template-columns: repeat(3, 1fr);
-      gap: 10px;
-      margin-bottom: 16px;
-    }
-
-    .pin-key {
-      padding: 15px;
-      border: none;
-      border-radius: 12px;
+    .login-field {
+      width: 100%;
       background: rgba(255,255,255,.08);
-      font-size: 1.1rem;
-      font-weight: 500;
+      border: 1px solid rgba(255,255,255,.12);
+      border-radius: 10px;
       color: #fff;
-      cursor: pointer;
-      transition: background .1s;
+      font-size: 0.9rem;
+      padding: 11px 14px;
+      margin-bottom: 10px;
+      outline: none;
+      font-family: inherit;
+      transition: border-color .15s;
     }
+    .login-field:focus { border-color: #ff9f0a; }
+    .login-field::placeholder { color: rgba(255,255,255,.3); }
 
-    .pin-key:hover  { background: rgba(255,255,255,.14); }
-    .pin-key:active { background: rgba(255,255,255,.2); }
-
-    .pin-key.del {
-      font-size: 0.85rem;
-      background: transparent;
-      color: rgba(255,255,255,.5);
+    .login-submit {
+      width: 100%;
+      background: #ff9f0a;
+      color: #fff;
+      border: none;
+      border-radius: 10px;
+      font-size: 0.9rem;
+      font-weight: 600;
+      padding: 12px;
+      cursor: pointer;
+      margin-top: 4px;
+      font-family: inherit;
+      transition: filter .1s;
     }
+    .login-submit:hover { filter: brightness(1.1); }
+    .login-submit:active { filter: brightness(0.9); }
+    .login-submit:disabled { opacity: .5; cursor: not-allowed; filter: none; }
 
-    .pin-error {
-      font-size: 0.8rem;
+    .login-error {
+      font-size: 0.78rem;
       color: #ff3b30;
       min-height: 1.2em;
-      margin-bottom: 8px;
+      margin: 8px 0 0;
     }
 
-    .pin-cancel {
+    .login-cancel {
       background: none;
       border: none;
-      color: rgba(255,255,255,.4);
-      font-size: 0.85rem;
+      color: rgba(255,255,255,.35);
+      font-size: 0.82rem;
       cursor: pointer;
-      padding: 6px;
+      padding: 10px 6px 0;
+      font-family: inherit;
     }
-
-    .pin-cancel:hover { color: rgba(255,255,255,.7); }
+    .login-cancel:hover { color: rgba(255,255,255,.6); }
   </style>
+  <link rel="icon" type="image/png" href="/assets/favicon.png">
 </head>
 <body>
 
@@ -265,10 +248,10 @@
 
   <div class="calc-header">
     <div class="calc-logo-wrap" id="calc-logo" style="cursor:pointer;">
-      <div class="calc-logo-icon">∑</div>
+      <div class="calc-logo-icon">&#8721;</div>
       <span class="calc-logo-text">SciCalc Pro</span>
     </div>
-    <span class="calc-mode-indicator" id="mode-indicator">DEG</span><span style="font-size:0.6rem;color:rgba(255,255,255,.2);margin-left:8px;">v1.0.0</span>
+    <span class="calc-mode-indicator" id="mode-indicator">DEG</span><span style="font-size:0.6rem;color:rgba(255,255,255,.2);margin-left:8px;">v1.0.5</span>
   </div>
 
   <div class="calc-display">
@@ -283,12 +266,12 @@
       <button class="btn-sci" data-sci="sin">sin</button>
       <button class="btn-sci" data-sci="cos">cos</button>
       <button class="btn-sci" data-sci="tan">tan</button>
-      <button class="btn-sci" data-sci="pi">π</button>
+      <button class="btn-sci" data-sci="pi">&#960;</button>
       <button class="btn-sci" data-sci="e">e</button>
     </div>
     <div class="sci-row">
-      <button class="btn-sci" data-sci="sq">x²</button>
-      <button class="btn-sci" data-sci="sqrt">√x</button>
+      <button class="btn-sci" data-sci="sq">x&#178;</button>
+      <button class="btn-sci" data-sci="sqrt">&#8730;x</button>
       <button class="btn-sci" data-sci="log">log</button>
       <button class="btn-sci" data-sci="ln">ln</button>
       <button class="btn-sci" data-sci="open">(</button>
@@ -299,19 +282,19 @@
   <!-- Standard buttons -->
   <div class="calc-buttons">
     <button class="btn btn-func" data-action="clear">AC</button>
-    <button class="btn btn-func" data-action="sign">+/−</button>
+    <button class="btn btn-func" data-action="sign">+/&#8722;</button>
     <button class="btn btn-func" data-action="percent">%</button>
-    <button class="btn btn-op"   data-action="op" data-op="÷">÷</button>
+    <button class="btn btn-op"   data-action="op" data-op="&#247;">&#247;</button>
 
     <button class="btn btn-num" data-action="digit" data-digit="7">7</button>
     <button class="btn btn-num" data-action="digit" data-digit="8">8</button>
     <button class="btn btn-num" data-action="digit" data-digit="9">9</button>
-    <button class="btn btn-op"  data-action="op" data-op="×">×</button>
+    <button class="btn btn-op"  data-action="op" data-op="&#215;">&#215;</button>
 
     <button class="btn btn-num" data-action="digit" data-digit="4">4</button>
     <button class="btn btn-num" data-action="digit" data-digit="5">5</button>
     <button class="btn btn-num" data-action="digit" data-digit="6">6</button>
-    <button class="btn btn-op"  data-action="op" data-op="−">−</button>
+    <button class="btn btn-op"  data-action="op" data-op="&#8722;">&#8722;</button>
 
     <button class="btn btn-num" data-action="digit" data-digit="1">1</button>
     <button class="btn btn-num" data-action="digit" data-digit="2">2</button>
@@ -324,35 +307,194 @@
   </div>
 </div>
 
-<!-- PIN overlay -->
-<div class="pin-overlay hidden" id="pin-overlay">
-  <div class="pin-box">
-    <h2>Enter PIN</h2>
-    <p>Enter your access code</p>
-    <div class="pin-dots" id="pin-dots">
-      <div class="pin-dot" id="d0"></div>
-      <div class="pin-dot" id="d1"></div>
-      <div class="pin-dot" id="d2"></div>
-      <div class="pin-dot" id="d3"></div>
-    </div>
-    <div class="pin-error" id="pin-error"></div>
-    <div class="pin-keypad">
-      <button class="pin-key" data-k="1">1</button>
-      <button class="pin-key" data-k="2">2</button>
-      <button class="pin-key" data-k="3">3</button>
-      <button class="pin-key" data-k="4">4</button>
-      <button class="pin-key" data-k="5">5</button>
-      <button class="pin-key" data-k="6">6</button>
-      <button class="pin-key" data-k="7">7</button>
-      <button class="pin-key" data-k="8">8</button>
-      <button class="pin-key" data-k="9">9</button>
-      <button class="pin-key del" data-k="del">⌫</button>
-      <button class="pin-key" data-k="0">0</button>
-      <button class="pin-key del" data-k="cancel" style="font-size:.75rem;">cancel</button>
-    </div>
+<!-- Login overlay — revealed by triple-clicking the logo -->
+<div class="login-overlay hidden" id="login-overlay">
+  <div class="login-box">
+    <h2>Sign In</h2>
+    <p>Enter your credentials to continue</p>
+    <input class="login-field" id="login-user" type="text" placeholder="Username" autocomplete="username" spellcheck="false">
+    <input class="login-field" id="login-pass" type="password" placeholder="Password" autocomplete="current-password">
+    <div class="login-error" id="login-error"></div>
+    <button class="login-submit" id="login-btn">Sign In</button>
+    <br>
+    <button class="login-cancel" id="login-cancel">Cancel</button>
   </div>
 </div>
 
-<script src="./js/main.js?v=2"></script>
+<script src="./js/main.js?v=1.0.5"></script>
+
+<!-- Matrix Easter egg -->
+<div id="matrix-overlay" style="display:none;position:fixed;inset:0;z-index:9999;background:#000;overflow:hidden;">
+  <canvas id="matrix-canvas" style="display:block;width:100%;height:100%;"></canvas>
+  <div id="matrix-msg" style="position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;pointer-events:none;"></div>
+</div>
+<script>
+function triggerMatrixEgg() {
+  pressClear();
+  var overlay = document.getElementById('matrix-overlay');
+  var canvas  = document.getElementById('matrix-canvas');
+  var msgBox  = document.getElementById('matrix-msg');
+  var ctx     = canvas.getContext('2d');
+  overlay.style.display = 'block';
+  overlay.style.opacity = '1';
+
+  canvas.width  = window.innerWidth;
+  canvas.height = window.innerHeight;
+
+  var cols   = Math.floor(canvas.width / 16);
+  var drops  = Array.from({length: cols}, function() { return Math.random() * -50 | 0; });
+  var chars  = 'アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789@#$%';
+
+  function drawMatrix() {
+    ctx.fillStyle = 'rgba(0,0,0,0.05)';
+    ctx.fillRect(0, 0, canvas.width, canvas.height);
+    ctx.font = '15px monospace';
+    for (var i = 0; i < drops.length; i++) {
+      var ch = chars[Math.random() * chars.length | 0];
+      ctx.fillStyle = drops[i] < 2 ? '#afffaf' : '#00ff41';
+      ctx.fillText(ch, i * 16, drops[i] * 16);
+      if (drops[i] * 16 > canvas.height && Math.random() > 0.975) drops[i] = 0;
+      drops[i]++;
+    }
+  }
+
+  var messages = ['ACCESS GRANTED', 'WELCOME HACKER', 'MM GAMES UNLOCKED'];
+  msgBox.innerHTML = messages.map(function(m, i) {
+    return '<div style="font-family:monospace;font-size:clamp(20px,4vw,40px);font-weight:bold;color:#00ff41;'
+      + 'text-shadow:0 0 20px #00ff41,0 0 40px #00ff41;letter-spacing:4px;opacity:0;'
+      + 'animation:mfade .4s ease ' + (i * 0.35) + 's forwards;">' + m + '</div>';
+  }).join('');
+
+  var style = document.createElement('style');
+  style.textContent = '@keyframes mfade{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}';
+  document.head.appendChild(style);
+
+  var raf = setInterval(drawMatrix, 40);
+
+  setTimeout(function() {
+    var fade = 1;
+    var fi = setInterval(function() {
+      fade -= 0.05;
+      overlay.style.opacity = Math.max(0, fade);
+      if (fade <= 0) {
+        clearInterval(fi);
+        clearInterval(raf);
+        overlay.style.display = 'none';
+        overlay.style.opacity = '1';
+        msgBox.innerHTML = '';
+        style.remove();
+      }
+    }, 40);
+  }, 3000);
+}
+</script>
+
+<script>
+(function () {
+  var logo    = document.getElementById('calc-logo');
+  var overlay = document.getElementById('login-overlay');
+  var userEl  = document.getElementById('login-user');
+  var passEl  = document.getElementById('login-pass');
+  var btn     = document.getElementById('login-btn');
+  var errEl   = document.getElementById('login-error');
+  var cancelBtn = document.getElementById('login-cancel');
+
+  var failCount  = 0;
+  var lockedUntil = 0;
+
+  // Triple-click detection
+  var clicks = 0;
+  var clickTimer = null;
+  logo.addEventListener('click', function () {
+    clicks++;
+    if (clicks === 1) {
+      clickTimer = setTimeout(function () { clicks = 0; }, 500);
+    }
+    if (clicks >= 3) {
+      clearTimeout(clickTimer);
+      clicks = 0;
+      openLogin();
+    }
+  });
+
+  function openLogin() {
+    errEl.textContent = '';
+    userEl.value = '';
+    passEl.value = '';
+    btn.disabled = false;
+    overlay.classList.remove('hidden');
+    setTimeout(function () { userEl.focus(); }, 50);
+  }
+
+  function closeLogin() {
+    overlay.classList.add('hidden');
+  }
+
+  cancelBtn.addEventListener('click', closeLogin);
+
+  overlay.addEventListener('click', function (e) {
+    if (e.target === overlay) closeLogin();
+  });
+
+  document.addEventListener('keydown', function (e) {
+    if (!overlay.classList.contains('hidden') && e.key === 'Escape') closeLogin();
+  });
+
+  passEl.addEventListener('keydown', function (e) {
+    if (e.key === 'Enter') doLogin();
+  });
+  userEl.addEventListener('keydown', function (e) {
+    if (e.key === 'Enter') passEl.focus();
+  });
+
+  btn.addEventListener('click', doLogin);
+
+  async function doLogin() {
+    var now = Date.now();
+    if (now < lockedUntil) {
+      var secs = Math.ceil((lockedUntil - now) / 1000);
+      errEl.textContent = 'Too many attempts. Wait ' + secs + 's.';
+      return;
+    }
+    var username = userEl.value.trim();
+    var password = passEl.value;
+    if (!username || !password) { errEl.textContent = 'Enter username and password.'; return; }
+    btn.disabled = true;
+    errEl.textContent = '';
+    try {
+      var res  = await fetch('./api/login', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ username: username, password: password }),
+      });
+      var data = await res.json();
+      if (data.success) {
+        sessionStorage.setItem('mm_auth', 'true');
+        sessionStorage.setItem('mm_rank', data.rank);
+        sessionStorage.setItem('mm_token', data.token);
+        if (data.rank === 'administrator') window.location.href = './admin.html';
+        else if (data.rank === 'admin')    window.location.href = './control-panel.html';
+        else                               window.location.href = './browse.html';
+      } else {
+        failCount++;
+        if (failCount >= 5) {
+          lockedUntil = Date.now() + 60000;
+          failCount = 0;
+          errEl.textContent = 'Too many attempts. Locked for 60 seconds.';
+        } else {
+          errEl.textContent = 'Invalid credentials.';
+        }
+        btn.disabled = false;
+        passEl.value = '';
+        passEl.focus();
+      }
+    } catch (err) {
+      errEl.textContent = 'Connection error. Try again.';
+      btn.disabled = false;
+    }
+  }
+})();
+</script>
+
 </body>
 </html>

package/js/admin.js

@@ -1,16 +1,16 @@
-if (!localStorage.getItem('mm_admin_session')) {
-  window.location.replace('./browse.html');
-}
-
 let games = [];
 
-function getAdminPin() {
-  return sessionStorage.getItem('mm_admin_pin') || '1234';
+function getToken() {
+  return sessionStorage.getItem('mm_token') || '';
+}
+
+function authHeaders() {
+  return { 'Content-Type': 'application/json', 'Authorization': 'Bearer ' + getToken() };
 }
 
 async function loadGames() {
   try {
-    const res = await fetch('./api/games/all');
+    const res = await fetch('./api/games/all', { headers: authHeaders() });
     if (!res.ok) throw new Error();
     games = await res.json();
   } catch {
@@ -27,8 +27,8 @@ async function saveGames() {
   try {
     const res = await fetch('./api/games', {
       method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ adminPin: getAdminPin(), games }),
+      headers: authHeaders(),
+      body: JSON.stringify({ games }),
     });
     if (!res.ok) throw new Error();
     return true;
@@ -135,34 +135,125 @@ document.getElementById('table-body').addEventListener('change', async e => {
   showFeedback('table-feedback', ok ? 'Visibility updated.' : 'Updated locally (API unavailable).', ok ? 'ok' : 'error');
 });
 
-// Change PINs
-document.getElementById('pin-save-btn').addEventListener('click', async () => {
-  const newAdmin = document.getElementById('pin-admin').value.trim();
-  const newUser  = document.getElementById('pin-user').value.trim();
+// ── User Management ───────────────────────────────────────────────────────────
+
+async function loadUsers() {
+  try {
+    const res = await fetch('./api/users', { headers: authHeaders() });
+    if (!res.ok) throw new Error();
+    const users = await res.json();
+    renderUsers(users);
+  } catch {
+    document.getElementById('users-tbody').innerHTML =
+      '<tr><td colspan="3" style="color:var(--muted);text-align:center;padding:24px;">Unable to load users.</td></tr>';
+  }
+}
+
+const RANK_CLASS = { administrator: 'rank-administrator', admin: 'rank-admin', user: 'rank-user' };
 
-  if (!newAdmin && !newUser) {
-    showFeedback('pin-feedback', 'Enter at least one new PIN.', 'error');
+function renderUsers(users) {
+  const tbody = document.getElementById('users-tbody');
+  if (!users.length) {
+    tbody.innerHTML = '<tr><td colspan="3" style="text-align:center;padding:24px;color:var(--muted);">No users.</td></tr>';
+    return;
+  }
+  tbody.innerHTML = users.map(u => `
+    <tr>
+      <td style="font-weight:500;">${u.username}</td>
+      <td>
+        <select class="rank-select" data-user="${u.username}" data-orig="${u.rank}">
+          <option value="user" ${u.rank==='user'?'selected':''}>user</option>
+          <option value="admin" ${u.rank==='admin'?'selected':''}>admin</option>
+          <option value="administrator" ${u.rank==='administrator'?'selected':''}>administrator</option>
+        </select>
+      </td>
+      <td style="display:flex;gap:6px;flex-wrap:wrap;padding:6px 8px;">
+        <button class="btn btn-sm btn-primary" data-action="update-rank" data-user="${u.username}">Save Rank</button>
+        <button class="btn btn-sm btn-ghost"   data-action="reset-pass"  data-user="${u.username}">Reset Password</button>
+        <button class="btn btn-sm btn-danger"  data-action="del-user"    data-user="${u.username}">Delete</button>
+      </td>
+    </tr>
+  `).join('');
+}
+
+document.getElementById('users-tbody').addEventListener('click', async e => {
+  const btn = e.target.closest('[data-action]');
+  if (!btn) return;
+  const action = btn.dataset.action;
+  const username = btn.dataset.user;
+
+  if (action === 'update-rank') {
+    const row = btn.closest('tr');
+    const sel = row.querySelector('select.rank-select');
+    const rank = sel.value;
+    try {
+      const res = await fetch('./api/users/update', {
+        method: 'POST', headers: authHeaders(), body: JSON.stringify({ username, rank }),
+      });
+      const data = await res.json();
+      if (!res.ok) throw new Error(data.error);
+      showFeedback('users-feedback', `${username} rank updated to ${rank}.`, 'ok');
+      loadUsers();
+    } catch (err) {
+      showFeedback('users-feedback', err.message || 'Failed.', 'error');
+    }
+  }
+
+  if (action === 'reset-pass') {
+    const newPass = prompt(`New password for "${username}":`);
+    if (!newPass) return;
+    try {
+      const res = await fetch('./api/users/reset-password', {
+        method: 'POST', headers: authHeaders(), body: JSON.stringify({ username, password: newPass }),
+      });
+      const data = await res.json();
+      if (!res.ok) throw new Error(data.error);
+      showFeedback('users-feedback', `Password reset for ${username}.`, 'ok');
+    } catch (err) {
+      showFeedback('users-feedback', err.message || 'Failed.', 'error');
+    }
+  }
+
+  if (action === 'del-user') {
+    if (!confirm(`Delete user "${username}"?`)) return;
+    try {
+      const res = await fetch('./api/users/delete', {
+        method: 'POST', headers: authHeaders(), body: JSON.stringify({ username }),
+      });
+      const data = await res.json();
+      if (!res.ok) throw new Error(data.error);
+      showFeedback('users-feedback', `${username} deleted.`, 'ok');
+      loadUsers();
+    } catch (err) {
+      showFeedback('users-feedback', err.message || 'Failed.', 'error');
+    }
+  }
+});
+
+document.getElementById('add-user-btn').addEventListener('click', async () => {
+  const username = document.getElementById('new-username').value.trim();
+  const password = document.getElementById('new-password').value;
+  const rank     = document.getElementById('new-rank').value;
+
+  if (!username || !password) {
+    showFeedback('add-user-feedback', 'Username and password are required.', 'error');
     return;
   }
 
   try {
-    const res = await fetch('./api/pins', {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ adminPin: getAdminPin(), newAdmin, newUser }),
+    const res = await fetch('./api/users/add', {
+      method: 'POST', headers: authHeaders(), body: JSON.stringify({ username, password, rank }),
     });
     const data = await res.json();
-    if (!res.ok) {
-      showFeedback('pin-feedback', data.error || 'Failed.', 'error');
-      return;
-    }
-    if (newAdmin) sessionStorage.setItem('mm_admin_pin', newAdmin);
-    document.getElementById('pin-admin').value = '';
-    document.getElementById('pin-user').value  = '';
-    showFeedback('pin-feedback', 'PINs updated.', 'ok');
-  } catch {
-    showFeedback('pin-feedback', 'API unavailable.', 'error');
+    if (!res.ok) throw new Error(data.error);
+    document.getElementById('new-username').value = '';
+    document.getElementById('new-password').value = '';
+    showFeedback('add-user-feedback', `User "${username}" added.`, 'ok');
+    loadUsers();
+  } catch (err) {
+    showFeedback('add-user-feedback', err.message || 'Failed.', 'error');
   }
 });
 
 loadGames();
+loadUsers();

package/js/games.js

@@ -131,7 +131,7 @@ function renderGotd() {
 
   section.innerHTML = `
     <div class="section-title">Game of the Day</div>
-    <a href="./game.html?slug=${gotd.slug}" class="gotd-card">
+    <a href="./tool.html?slug=${gotd.slug}" class="gotd-card">
       ${thumbHtml}
       <div>
         <div class="gotd-label">⭐ Featured Today</div>
@@ -159,7 +159,7 @@ function renderGrid() {
   }
 
   grid.innerHTML = games.map(g => `
-    <a href="./game.html?slug=${g.slug}" class="game-card">
+    <a href="./tool.html?slug=${g.slug}" class="game-card">
       ${cardThumb(g)}
       <div class="game-card-body">
         <div class="game-card-name">${g.name}</div>