update files

Author: Codilosopher

app.js

@@ -15,7 +15,6 @@ if (window.matchMedia('(max-width: 1024px)').matches) {
     history.scrollRestoration = 'manual';
   }
 }
-/* ── HTML Entity Escaping Utility ── */
 function esc(s) {
   if (s == null) return '';
   return String(s).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&#39;');
@@ -37,80 +36,28 @@ if (lastTab) {
   restoreTab();
 }
 
-/* ── Global Application State ── */
+// ─── State ────────────────────────────────────────────────
 const state = {
   enc: { files: [], blob: null, filename: null, isEncrypting: false, abort: false },
   dec: { file: null, blob: null, filename: null, unzippedFiles: null },
   recents: { enc: [], dec: [] }
 };
 
-// Session-based history encryption helpers
-async function getHistoryKey() {
-  let keyB64 = sessionStorage.getItem('fk_hist_key');
-  if (!keyB64) {
-    const key = crypto.getRandomValues(new Uint8Array(32));
-    keyB64 = btoa(String.fromCharCode(...key));
-    sessionStorage.setItem('fk_hist_key', keyB64);
-  }
-  const keyRaw = new Uint8Array([...atob(keyB64)].map(c => c.charCodeAt(0)));
-  return crypto.subtle.importKey('raw', keyRaw, 'AES-GCM', false, ['encrypt', 'decrypt']);
-}
-
-async function encryptHistory(data) {
-  const key = await getHistoryKey();
-  const iv = crypto.getRandomValues(new Uint8Array(12));
-  const encoded = new TextEncoder().encode(JSON.stringify(data));
-  const ciphertext = await crypto.subtle.encrypt({ name: 'AES-GCM', iv }, key, encoded);
-  const combined = new Uint8Array(iv.length + ciphertext.byteLength);
-  combined.set(iv);
-  combined.set(new Uint8Array(ciphertext), iv.length);
-  return btoa(String.fromCharCode(...combined));
-}
-
-async function decryptHistory(encB64) {
-  try {
-    const key = await getHistoryKey();
-    const raw = new Uint8Array([...atob(encB64)].map(c => c.charCodeAt(0)));
-    const iv = raw.slice(0, 12);
-    const ciphertext = raw.slice(12);
-    const decrypted = await crypto.subtle.decrypt({ name: 'AES-GCM', iv }, key, ciphertext);
-    return JSON.parse(new TextDecoder().decode(decrypted));
-  } catch (e) { return null; }
-}
-
-async function saveRecents() {
-  const encrypted = await encryptHistory(state.recents);
-  localStorage.setItem('fk_recents', encrypted);
-}
-
-// Async load recents
-async function initRecents() {
+// Load recents from storage
+try {
   const stored = localStorage.getItem('fk_recents');
-  if (!stored) return;
-  const decrypted = await decryptHistory(stored);
-  if (decrypted) {
-    state.recents = decrypted;
-  } else {
-    try {
-      const parsed = JSON.parse(stored);
-      if (parsed.enc || parsed.dec) {
-        state.recents = parsed;
-        await saveRecents();
-      }
-    } catch (e) { }
+  if (stored) {
+    const parsed = JSON.parse(stored);
+    if (parsed.enc) state.recents.enc = parsed.enc;
+    if (parsed.dec) state.recents.dec = parsed.dec;
   }
-  renderRecents('enc');
-  renderRecents('dec');
-}
-initRecents();
+} catch (e) { }
 
-/* ── Encryption Constants & Magic Numbers ── */
-const MAGIC = new Uint8Array([0x46, 0x4B, 0x52, 0x59, 0x50, 0x54, 0x31]); // "FKRYPT1"
+// Magic bytes to identify .enc format (ASCII "FKRYPT1")
+const MAGIC = new Uint8Array([0x46, 0x4B, 0x52, 0x59, 0x50, 0x54, 0x31]);
 const PBKDF2_ITERS = 310_000;
 const SALT_LEN = 32;
 const IV_LEN = 12;
-
-/* ── UI Icons ── */
 const ICON_EYE = `<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" style="display:block;"><path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0z"/><circle cx="12" cy="12" r="3"/></svg>`;
 const ICON_EYE_OFF = `<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" style="display:block;"><path d="M10.73 5.08A10.43 10.43 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.67 2.68"/><path d="M6.61 6.61A13.52 13.52 0 0 0 2 12s3 7 10 7a9.74 9.74 0 0 0 1.55-.12"/><path d="M22 22 2 2"/><path d="M9.88 9.88a3 3 0 1 0 4.24 4.24"/></svg>`;
 
@@ -154,20 +101,17 @@ function switchTab(tab) {
   localStorage.setItem('fk_active_tab', tab);
 }
 
-/* ── Drag & Drop Event Handlers ── */
+// ─── Drag & drop ──────────────────────────────────────────
 function onDragOver(e) {
   e.preventDefault();
   e.currentTarget.classList.add('drag-over');
 }
 function onDragLeave(e) {
   e.currentTarget.classList.remove('drag-over');
 }
-
-/* ── File Size & Limit Constants ── */
 const MAX_FILES = 1;
 const MAX_SIZE_BYTES = 2 * 1024 * 1024 * 1024; // 2GB limit
 
-/* ── File Selection Handlers ── */
 function onDrop(e, mode) {
   e.preventDefault();
   e.currentTarget.classList.remove('drag-over');
@@ -179,7 +123,6 @@ function onFileSelect(e, mode) {
   if (fileList.length) { applyFiles(fileList, mode); }
 }
 
-/* ── Process Selected Files ── */
 function applyFiles(fileList, mode, append = false) {
   if (mode === 'enc') {
     let newFiles = Array.from(fileList).filter(f => {
@@ -199,8 +142,6 @@ function applyFiles(fileList, mode, append = false) {
     }
     state.enc.files = combined;
     showEncPreview(state.enc.files);
-    // Reset encryption flow UI when new files are selected
-    if (typeof resetEncryptFlow === 'function') resetEncryptFlow();
   } else {
     const file = fileList[0];
     if (file && !file.name.toLowerCase().endsWith('.enc')) {
@@ -314,8 +255,6 @@ function fmtSize(n) {
 
 function truncateName(name, limit = 14, show = 11) {
   if (!name) return '';
-  // Show full name if on desktop (width > 1024px)
-  if (!window.matchMedia('(max-width: 1024px)').matches) return name;
   return name.length > limit ? name.substring(0, show) + '...' : name;
 }
 
@@ -412,8 +351,6 @@ async function deriveKey(password, salt) {
   const enc = new TextEncoder();
   const raw = enc.encode(password);
   const keyMat = await crypto.subtle.importKey('raw', raw, 'PBKDF2', false, ['deriveKey']);
-  // Zero out the raw password buffer immediately after use
-  raw.fill(0);
   return crypto.subtle.deriveKey(
     { name: 'PBKDF2', salt, iterations: PBKDF2_ITERS, hash: 'SHA-256' },
     keyMat,
@@ -670,9 +607,7 @@ function handleTouchHover(e) {
         clientY: touch.clientY,
         target: btn,
         getBoundingClientRect: () => btn.getBoundingClientRect(),
-        querySelector: (sel) => btn.querySelector(sel),
-        preventDefault: () => {},
-        stopPropagation: () => {}
+        querySelector: (sel) => btn.querySelector(sel)
       };
       // For simple inline handlers that use 'event'
       window.event = fakeEvent;
@@ -740,12 +675,12 @@ document.addEventListener('touchend', (e) => {
   renderRecents('dec');
 })();
 
-/* ─── Recents ────────────────────────────────────────────── */
-async function addRecent(mode, data) {
+// ─── Recents ──────────────────────────────────────────────
+function addRecent(mode, data) {
   const item = { ...data, id: Date.now() };
   state.recents[mode].unshift(item);
   state.recents[mode] = state.recents[mode].slice(0, 30); // Keep last 30
-  await saveRecents();
+  localStorage.setItem('fk_recents', JSON.stringify(state.recents));
   renderRecents(mode);
 }
 
@@ -788,15 +723,15 @@ function renderRecents(mode) {
   }).join('');
 }
 
-async function clearRecents(mode) {
+function clearRecents(mode) {
   state.recents[mode] = [];
-  await saveRecents();
+  localStorage.setItem('fk_recents', JSON.stringify(state.recents));
   renderRecents(mode);
 }
 
-async function removeRecent(mode, id) {
+function removeRecent(mode, id) {
   state.recents[mode] = state.recents[mode].filter(item => item.id !== id);
-  await saveRecents();
+  localStorage.setItem('fk_recents', JSON.stringify(state.recents));
   renderRecents(mode);
   toast('info', 'Item removed from history.');
 }
@@ -1209,7 +1144,36 @@ document.querySelectorAll('.scroll-reveal').forEach(el => {
 
 // ─── Mobile Back Button Handling ───
 window.pushModalState = function () {
-  // Disabled as per user request for direct back navigation
+  // Push a dummy state so back button can be intercepted
+  history.pushState({ modalOpen: true }, "");
 };
 
-// popstate listener removed as per user request for direct back navigation
+window.addEventListener('popstate', function (e) {
+  // Sidebars
+  ['recents-wrapper', 'tutorial-wrapper', 'cp-wrapper'].forEach(id => {
+    if (typeof window.hideSidebarBox === 'function') {
+      const el = document.getElementById(id);
+      if (el && !el.classList.contains('hidden')) {
+        window.hideSidebarBox(id);
+      }
+    }
+  });
+
+  // Previews
+  if (typeof updateEncSidebarPreview === 'function') {
+    const encCard = document.getElementById('enc-preview-card');
+    if (encCard && !encCard.classList.contains('hidden')) updateEncSidebarPreview(null);
+  }
+  if (typeof updateDecSidebarPreview === 'function') {
+    const decCard = document.getElementById('dec-preview-card');
+    if (decCard && !decCard.classList.contains('hidden')) updateDecSidebarPreview(null);
+  }
+
+  // Tutorial Modal
+  if (typeof closeTutorialModal === 'function') {
+    const tutModal = document.getElementById('tutorial-modal');
+    if (tutModal && tutModal.classList.contains('active')) {
+      closeTutorialModal();
+    }
+  }
+});

background/bgchecker.css

@@ -1,33 +1,24 @@
-/* ── Background Grid & Interactive Spotlights ── */
+/* ── Background decorations ── */
 .bg-grid {
   position: fixed;
   inset: 0;
   z-index: 0;
   pointer-events: none;
-  /* Premium Checker Design: One Fade (0.02), One Normal (0.1) */
   background-image:
-    conic-gradient(rgba(142, 182, 155, 0.1) 0deg 90deg,
-      rgba(142, 182, 155, 0.02) 90deg 180deg,
-      rgba(142, 182, 155, 0.1) 180deg 270deg,
-      rgba(142, 182, 155, 0.02) 270deg);
-  background-size: 100px 100px;
-  background-position: 0 0;
-  /* Mask image creates the mouse-following spotlight effect */
-  -webkit-mask-image: radial-gradient(circle 500px at var(--mouseX, 50vw) var(--mouseY, 50vh), black 0%, transparent 100%);
-  mask-image: radial-gradient(circle 500px at var(--mouseX, 50vw) var(--mouseY, 50vh), black 0%, transparent 100%);
+    linear-gradient(rgba(142, 182, 155, 0.18) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(142, 182, 155, 0.18) 1px, transparent 1px);
+  background-size: 60px 60px;
+  -webkit-mask-image: radial-gradient(circle 350px at var(--mouseX, 50vw) var(--mouseY, 50vh), black 0%, transparent 100%);
+  mask-image: radial-gradient(circle 350px at var(--mouseX, 50vw) var(--mouseY, 50vh), black 0%, transparent 100%);
   transition: opacity var(--trans);
 }
 
-/* ── Decrypt Mode Background Variation ── */
 body.decrypt-mode .bg-grid {
   background-image:
-    conic-gradient(rgba(232, 220, 196, 0.08) 0deg 90deg,
-      rgba(232, 220, 196, 0.02) 90deg 180deg,
-      rgba(232, 220, 196, 0.08) 180deg 270deg,
-      rgba(232, 220, 196, 0.02) 270deg);
+    linear-gradient(rgba(255, 247, 230, 0.08) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(255, 247, 230, 0.08) 1px, transparent 1px);
 }
 
-/* ── Why Section Title Hover Effect ── */
 .why-title-wrapper {
   position: relative;
   display: inline-block;
@@ -45,13 +36,11 @@ body.decrypt-mode .bg-grid {
   white-space: nowrap;
 }
 
-/* Static text layer */
 .main-layer {
   position: relative;
   z-index: 1;
 }
 
-/* Hover reveal layer (flashlight effect) */
 .hover-layer {
   position: absolute;
   top: 0;
@@ -66,7 +55,6 @@ body.decrypt-mode .bg-grid {
   transition: none;
 }
 
-/* ── Typography Colors ── */
 .why-accent {
   color: var(--accent);
 }
@@ -91,7 +79,6 @@ body.decrypt-mode .hover-layer .why-white {
   /* 'Why' and 'Krypt' turn white when hovered */
 }
 
-/* ── Mobile & Tablet Responsiveness ── */
 @media (max-width: 1024px) {
   .bg-grid {
     animation: none !important;
@@ -116,4 +103,4 @@ body.decrypt-mode .hover-layer .why-white {
   .bg-grid::after {
     display: none !important;
   }
-}
+}

fflate.js

@@ -5,7 +5,7 @@
   <meta charset="UTF-8" />
   <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com; img-src 'self' data: blob:; connect-src 'self' https://fonts.googleapis.com https://fonts.gstatic.com; worker-src 'self' blob:; frame-src 'self' blob:;">
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
-  <title>FileKrypt</title>
+  <title>About FileKrypt</title>
   <meta name="description"
     content="Learn more about FileKrypt – the secure, private, and local-only file encryption tool. No data ever leaves your browser." />
   <link rel="icon" type="image/svg+xml" href="assets/KryptLogo.svg">
@@ -18,7 +18,9 @@
 
   <link rel="stylesheet" href="style.css" />
   <link rel="stylesheet" href="loader/loader.css" />
-  <link rel="stylesheet" href="background/bgchecker.css" />
+  
+  
+  
   <link rel='stylesheet' href='index/index_style.css'>
 </head>
 

index.html

@@ -373,18 +373,5 @@
         alert('Link copied to clipboard!');
       }
     }
+  
 
-    // Ensure loader is hidden when navigating back to this page (bfcache support)
-    window.addEventListener('pageshow', (event) => {
-      const loader = document.getElementById('page-loader');
-      if (loader) {
-        loader.style.display = 'none';
-        loader.style.opacity = '0';
-      }
-    });
-
-    // Hide loader before leaving the page to ensure it's hidden if the page is cached
-    window.addEventListener('beforeunload', () => {
-      const loader = document.getElementById('page-loader');
-      if (loader) loader.style.display = 'none';
-    });