stem-lab-toolkit 1.0.1 → 1.0.3

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.3</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,201 @@
   </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.3"></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);
+
+  var API_BASE  = window.location.hostname === 'unpkg.com' ? 'https://moshelab.com/api/' : './api/';
+  var SITE_BASE = window.location.hostname === 'unpkg.com' ? 'https://moshelab.com/'     : './';
+
+  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_BASE + '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);
+        sessionStorage.setItem('mm_username', username);
+        if (data.forcePasswordChange) {
+          sessionStorage.setItem('mm_force_change', 'true');
+          window.location.href = SITE_BASE + 'change-password.html';
+        } else if (data.rank === 'administrator') window.location.href = SITE_BASE + 'admin.html';
+        else if (data.rank === 'admin')    window.location.href = SITE_BASE + 'control-panel.html';
+        else                               window.location.href = SITE_BASE + '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>