mlv2boii 1.0.7 → 1.0.8

package/index.html

@@ -78,6 +78,37 @@
   /* game icons: 10% edge so dark art never melts into the canvas */
   .tile-img { outline: 1px solid rgba(255,255,255,0.1); outline-offset: -1px; }
 
+
+  /* Liquid glass: translucent fill, blur + saturation, bright top edge, light rim.
+     Used only on floating layers (header, sheets, toasts, controls). */
+  .glass {
+    background: rgba(255,255,255,0.06);
+    -webkit-backdrop-filter: blur(24px) saturate(180%);
+    backdrop-filter: blur(24px) saturate(180%);
+    box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), inset 0 -1px 0 rgba(255,255,255,0.04), 0 10px 32px rgba(0,0,0,0.45);
+  }
+  .glass-sheet {
+    background: rgba(28,28,31,0.55);
+    -webkit-backdrop-filter: blur(40px) saturate(180%);
+    backdrop-filter: blur(40px) saturate(180%);
+  }
+  .glass::before {
+    content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
+    background: linear-gradient(135deg, rgba(255,255,255,0.4), rgba(255,255,255,0.05) 40%, rgba(255,255,255,0.05) 60%, rgba(255,255,255,0.22));
+    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
+    -webkit-mask-composite: xor; mask-composite: exclude;
+  }
+  /* small controls: same edge light, no blur (nothing behind them to blur) */
+  .glass-lite { background: rgba(255,255,255,0.07); box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), inset 0 0 0 1px rgba(255,255,255,0.08); }
+  .glass-lite:hover { background: rgba(255,255,255,0.12); }
+  .chip-on { background: rgba(232,20,47,0.92); box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), inset 0 0 0 1px rgba(255,255,255,0.12); }
+  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
+    .glass { background: rgba(22,22,24,0.94); } .glass-sheet { background: rgba(18,18,20,0.97); }
+  }
+  @media (prefers-reduced-transparency: reduce) {
+    .glass, .glass-sheet { -webkit-backdrop-filter: none; backdrop-filter: none; background: #161618; }
+  }
+
   .no-scrollbar { scrollbar-width: none; }
   .no-scrollbar::-webkit-scrollbar { display: none; }
   * { scrollbar-width: thin; scrollbar-color: #2c2c30 transparent; }
@@ -89,31 +120,15 @@
   .rise { animation: rise 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; animation-delay: var(--d, 0s); }
   @media (prefers-reduced-motion: reduce) { .rise { animation: none; } }
 
-  /* Blank Overlay Lock Screen */
-  #blank-overlay {
-    position: fixed;
-    inset: 0;
-    background-color: #000000;
-    z-index: 99999;
-    display: flex;
-    transition: opacity 0.4s ease, visibility 0.4s ease;
-  }
-  #blank-overlay.unlocked {
-    opacity: 0;
-    visibility: hidden;
-    pointer-events: none;
-  }
 </style>
 </head>
 
 <body class="min-h-screen bg-ink-950 font-sans text-ink-50 antialiased">
 
-<!-- Blank Overlay Screen -->
-<div id="blank-overlay"></div>
-
 <!-- ================= HEADER ================= -->
-<header class="sticky top-0 z-40 border-b border-white/[0.08] bg-black/70 pt-[env(safe-area-inset-top)] backdrop-blur-xl backdrop-saturate-150">
-  <div class="page-x mx-auto flex h-14 max-w-5xl items-center gap-4">
+<header class="pointer-events-none sticky top-0 z-40 pt-[calc(env(safe-area-inset-top)+0.75rem)]">
+  <div class="page-x mx-auto max-w-5xl">
+  <div class="glass pointer-events-auto relative flex h-14 items-center gap-4 rounded-full pl-5 pr-2">
     <a href="#" class="flex shrink-0 items-center gap-2" aria-label="mlv2 home">
       <span class="h-2.5 w-2.5 rounded-full bg-red-500"></span>
       <span class="text-[17px] font-semibold tracking-[-0.02em]">mlv2</span>
@@ -123,10 +138,11 @@
       <span id="count-badge" class="hidden shrink-0 text-[13px] tabular-nums text-ink-400 sm:block"><span id="count-num">0</span>&nbsp;games</span>
       <div class="relative w-full max-w-[16rem]">
         <svg class="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-ink-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="11" cy="11" r="7"/><path d="m21 21-4.3-4.3"/></svg>
-        <input id="search" type="text" placeholder="Search games" aria-label="Search games" autocomplete="off" enterkeyhint="search" class="field pl-9" />
+        <input id="search" type="text" placeholder="Search games" aria-label="Search games" autocomplete="off" enterkeyhint="search" class="field rounded-full pl-9" />
       </div>
     </div>
   </div>
+  </div>
 </header>
 
 <!-- ================= MAIN ================= -->
@@ -179,10 +195,10 @@
           <p id="player-title" class="truncate text-[15px] font-semibold"></p>
         </div>
         <div class="flex shrink-0 items-center gap-2">
-          <a id="player-newtab" target="_blank" rel="noopener" title="Open in new tab" aria-label="Open in new tab" class="icon-btn">
+          <a id="player-newtab" target="_blank" rel="noopener" title="Open in new tab" aria-label="Open in new tab" class="glass-lite icon-btn">
             <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><path d="M15 3h6v6"/><path d="M10 14 21 3"/></svg>
           </a>
-          <button id="player-close" title="Close" aria-label="Close" class="icon-btn">
+          <button id="player-close" title="Close" aria-label="Close" class="glass-lite icon-btn">
             <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M18 6 6 18M6 6l12 12"/></svg>
           </button>
         </div>
@@ -196,9 +212,9 @@
 
 <!-- ================= ADMIN: PIN GATE ================= -->
 <div id="admin-login-modal" class="fixed inset-0 z-50 hidden">
-  <div class="absolute inset-0 bg-black/80 backdrop-blur-xl" data-admin-login-close></div>
+  <div class="absolute inset-0 bg-black/50 backdrop-blur-md" data-admin-login-close></div>
   <div class="absolute inset-0 flex items-center justify-center p-4">
-    <form id="admin-login-form" class="w-full max-w-[340px] rounded-[28px] bg-ink-900 p-6 opacity-0 ring-1 ring-white/10" data-fx>
+    <form id="admin-login-form" class="glass glass-sheet relative w-full max-w-[340px] rounded-[28px] p-6 opacity-0" data-fx>
       <p class="text-[19px] font-semibold">Enter PIN</p>
       <p class="mt-1.5 text-pretty text-[14px] text-ink-400">This unlocks the admin screen on this device. Write access is controlled by your Appwrite permissions.</p>
 
@@ -217,9 +233,9 @@
 
 <!-- ================= ADMIN: PANEL ================= -->
 <div id="admin-panel" class="fixed inset-0 z-50 hidden">
-  <div class="absolute inset-0 bg-black/80 backdrop-blur-xl" data-admin-panel-close></div>
+  <div class="absolute inset-0 bg-black/50 backdrop-blur-md" data-admin-panel-close></div>
   <div class="absolute inset-0 flex items-start justify-center p-0 sm:items-center sm:p-4">
-    <div id="admin-panel-card" class="relative flex h-full w-full flex-col bg-ink-900 opacity-0 sm:h-[85vh] sm:max-w-2xl sm:rounded-[32px] sm:ring-1 sm:ring-white/10" data-fx>
+    <div id="admin-panel-card" class="glass glass-sheet relative flex h-full w-full flex-col opacity-0 sm:h-[85vh] sm:max-w-2xl sm:rounded-[32px]" data-fx>
 
       <div class="flex h-14 shrink-0 items-center justify-between border-b border-white/[0.08] px-5 pt-[env(safe-area-inset-top)] box-content">
         <div>
@@ -228,7 +244,7 @@
         </div>
         <div class="flex items-center gap-2">
           <button id="admin-logout" class="btn btn-ghost">Lock</button>
-          <button data-admin-panel-close aria-label="Close" class="icon-btn">
+          <button data-admin-panel-close aria-label="Close" class="glass-lite icon-btn">
             <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M18 6 6 18M6 6l12 12"/></svg>
           </button>
         </div>
@@ -278,50 +294,6 @@
 <!-- ================= TOASTS ================= -->
 <div id="toast-root" class="fixed bottom-4 right-4 z-[60] flex flex-col items-end gap-2 pb-[env(safe-area-inset-bottom)]"></div>
 
-<!-- Konami Code Script with 1-Hour Expiration -->
-<script>
-  (function() {
-    const STORAGE_KEY = 'mlv2_unlocked_expiry';
-    const ONE_HOUR_MS = 60 * 60 * 1000; // 1 hour in milliseconds
-    const overlay = document.getElementById('blank-overlay');
-
-    // Check on page load if unlock session is still valid
-    const savedExpiry = localStorage.getItem(STORAGE_KEY);
-    if (savedExpiry && Date.now() < parseInt(savedExpiry, 10)) {
-      overlay.classList.add('unlocked');
-    }
-
-    const konamiCode = [
-      'ArrowUp', 'ArrowUp', 
-      'ArrowDown', 'ArrowDown', 
-      'ArrowLeft', 'ArrowRight', 
-      'ArrowLeft', 'ArrowRight', 
-      'b', 'a', 'Enter'
-    ];
-    let konamiIndex = 0;
-
-    document.addEventListener('keydown', (e) => {
-      const key = e.key.length === 1 ? e.key.toLowerCase() : e.key;
-      const targetKey = konamiCode[konamiIndex].length === 1 
-        ? konamiCode[konamiIndex].toLowerCase() 
-        : konamiCode[konamiIndex];
-
-      if (key === targetKey) {
-        konamiIndex++;
-        if (konamiIndex === konamiCode.length) {
-          // Unlock website and save expiration time for 1 hour
-          overlay.classList.add('unlocked');
-          const expiryTime = Date.now() + ONE_HOUR_MS;
-          localStorage.setItem(STORAGE_KEY, expiryTime.toString());
-          konamiIndex = 0;
-        }
-      } else {
-        konamiIndex = 0;
-      }
-    });
-  })();
-</script>
-
 <script src="https://cdn.jsdelivr.net/npm/appwrite@26.2.0"></script>
 <script type="module">
 import { animate, stagger, inView } from "https://cdn.jsdelivr.net/npm/motion@12/+esm";
@@ -389,7 +361,7 @@ function toast(message, tone = "default") {
   const root = el("toast-root");
   const node = document.createElement("div");
   const toneClasses = tone === "error" ? "text-red-300" : "text-ink-50";
-  node.className = `rounded-full ${toneClasses} bg-ink-800/90 backdrop-blur-xl px-4 py-2.5 text-[14px] ring-1 ring-white/10 opacity-0`;
+  node.className = `glass glass-sheet relative rounded-full ${toneClasses} px-4 py-2.5 text-[14px] opacity-0`;
   node.textContent = message;
   root.appendChild(node);
   fx(node, { opacity: [0, 1], y: [8, 0] }, { duration: 0.25, ease: "easeOut" });
@@ -422,7 +394,7 @@ function renderCategoryBar() {
     .map((c) => {
       const active = c === activeCategory;
       return `<button data-cat="${escapeHtml(c)}" aria-pressed="${active}" class="chip ${
-        active ? "bg-red-500 text-white" : "bg-white/[0.07] text-ink-300 hover:bg-white/[0.12] hover:text-ink-50"
+        active ? "chip-on text-white" : "glass-lite text-ink-300 hover:text-ink-50"
       }">${escapeHtml(c)}</button>`;
     })
     .join("");
@@ -673,7 +645,7 @@ async function renderAdminList() {
         <label class="hidden shrink-0 items-center gap-2 text-[13px] text-ink-300 sm:flex">
           <input type="checkbox" data-field="enabled" data-id="${g.$id}" ${g.enabled === false ? "" : "checked"} class="h-4 w-4 accent-red-500" /> On
         </label>
-        <button data-delete="${g.$id}" title="Delete" aria-label="Delete" class="icon-btn hover:!text-red-400">
+        <button data-delete="${g.$id}" title="Delete" aria-label="Delete" class="glass-lite icon-btn hover:!text-red-400">
           <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2m3 0-1 14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2L4 6"/></svg>
         </button>
       </div>`

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mlv2boii",
-  "version": "1.0.7",
+  "version": "1.0.8",
   "description": "",
   "main": "index.js",
   "scripts": {