Update src/libpoketube/init/pages-static.js

css/player-base.js

@@ -1,125 +1,237 @@
 // in the beginning.... god made mrrprpmnaynayaynaynayanyuwuuuwmauwnwanwaumawp :p
-var _yt_player= videojs;
-
+var _yt_player = videojs;
 document.addEventListener("DOMContentLoaded", () => {
-
-	// video.js 8 init - source can be seen in https://poketube.fun/static/vjs.min.js or the vjs.min.js file 
+    // video.js 8 init - source can be seen in https://poketube.fun/static/vjs.min.js or the vjs.min.js file 
     const video = videojs('video', {
         controls: true,
-        autoplay: false, 
-        preload: 'auto',
+        autoplay: false,
+        preload: 'auto'
     });
 
-
     // todo : remove this code lol
     const qua = new URLSearchParams(window.location.search).get("quality") || "";
-    localStorage.setItem(`progress-${new URLSearchParams(window.location.search).get('v')}`, 0);
+    const vidKey = new URLSearchParams(window.location.search).get('v');
+    localStorage.setItem(`progress-${vidKey}`, 0);
+
+    // raw media elements
+    const videoEl = document.getElementById('video');
+    const audio = document.getElementById('aud');
+
+    const audioSrc = audio.getAttribute('src');
+    const vidSrcObj = video.src();
+    const videoSrc = Array.isArray(vidSrcObj) ? vidSrcObj[0].src : vidSrcObj;
+
+    let audioReady = false, videoReady = false;
+    let syncInterval = null;
+
+    // pauses and syncs the video when the seek is finished :3
+    function clearSyncLoop() {
+        if (syncInterval) {
+            clearInterval(syncInterval);
+            syncInterval = null;
+            audio.playbackRate = 1;
+        }
+    }
+
+    // drift-compensation loop for micro-sync
+    function startSyncLoop() {
+        clearSyncLoop();
+        syncInterval = setInterval(() => {
+            const vt = video.currentTime();
+            const at = audio.currentTime;
+            const delta = vt - at;
+
+            // large drift → jump
+            if (Math.abs(delta) > 0.5) {
+                audio.currentTime = vt;
+                audio.playbackRate = 1;
+            }
+            // micro drift → adjust rate
+            else if (Math.abs(delta) > 0.05) {
+                audio.playbackRate = 1 + delta * 0.1;
+            } else {
+                audio.playbackRate = 1;
+            }
+        }, 300);
+    }
+
+    // align start when both are ready
+    function tryStart() {
+        if (audioReady && videoReady) {
+            const t = video.currentTime();
+            if (Math.abs(audio.currentTime - t) > 0.1) {
+                audio.currentTime = t;
+            }
+            video.play();
+            audio.play();
+            startSyncLoop();
+            setupMediaSession();
+        }
+    }
+
+    // simple one-time retry on error
+    function attachRetry(elm, src, markReady) {
+        elm.addEventListener('loadeddata', () => {
+            markReady();
+            tryStart();
+        }, { once: true });
+
+        elm.addEventListener('error', () => {
+            // only retry once, and only if we have a valid src
+            if (!elm._didRetry && src) {
+                elm._didRetry = true;
+                elm.src = src;
+                elm.load();
+            } else {
+                console.error(`${elm.tagName} failed to load.`);
+            }
+        }, { once: true });
+    }
+
+    // le volume :3
+    function setupMediaSession() {
+        if ('mediaSession' in navigator) {
+            navigator.mediaSession.metadata = new MediaMetadata({
+                title: document.title || 'Video',
+                artist: '',
+                album: '',
+                artwork: []
+            });
+
+            navigator.mediaSession.setActionHandler('play', () => {
+                video.play(); audio.play();
+            });
+            navigator.mediaSession.setActionHandler('pause', () => {
+                video.pause(); audio.pause();
+            });
+            navigator.mediaSession.setActionHandler('seekbackward', ({ seekOffset }) => {
+                const skip = seekOffset || 10;
+                video.currentTime(video.currentTime() - skip);
+                audio.currentTime -= skip;
+            });
+            navigator.mediaSession.setActionHandler('seekforward', ({ seekOffset }) => {
+                const skip = seekOffset || 10;
+                video.currentTime(video.currentTime() + skip);
+                audio.currentTime += skip;
+            });
+            navigator.mediaSession.setActionHandler('seekto', ({ seekTime, fastSeek }) => {
+                if (fastSeek && 'fastSeek' in audio) audio.fastSeek(seekTime);
+                else audio.currentTime = seekTime;
+                video.currentTime(seekTime);
+            });
+            navigator.mediaSession.setActionHandler('stop', () => {
+                video.pause(); audio.pause();
+                video.currentTime(0); audio.currentTime = 0;
+                clearSyncLoop();
+            });
+        }
+    }
+
+    // ** DESKTOP MEDIA-KEY FALLBACK **
+    document.addEventListener('keydown', e => {
+        switch (e.code) {
+            case 'AudioPlay':
+            case 'MediaPlayPause':
+                if (video.paused()) { video.play(); audio.play(); }
+                else            { video.pause(); audio.pause(); }
+                break;
+
+            case 'AudioPause':
+                video.pause(); audio.pause();
+                break;
+
+            case 'AudioNext':
+            case 'MediaTrackNext':
+                const tFwd = video.currentTime() + 10;
+                video.currentTime(tFwd); audio.currentTime += 10;
+                break;
+
+            case 'AudioPrevious':
+            case 'MediaTrackPrevious':
+                const tBwd = video.currentTime() - 10;
+                video.currentTime(tBwd); audio.currentTime -= 10;
+                break;
+        }
+    });
 
- // syncs stuff if used in HD mode
     if (qua !== "medium") {
-        const audio = document.getElementById('aud');
-
-        const syncVolume = () => {
-            audio.volume = video.volume();
-        };
-
-        const syncVolumeWithVideo = () => {
-            video.volume(audio.volume);
-        };
-
-        // we check if a video is buffered 
-        const checkAudioBuffer = () => {
-            const buffered = audio.buffered;
-            const bufferedEnd = buffered.length > 0 ? buffered.end(buffered.length - 1) : 0;
-            return audio.currentTime <= bufferedEnd;
-        };
-
-        const isVideoBuffered = () => {
-            const buffered = video.buffered();
-            return buffered.length > 0 && buffered.end(buffered.length - 1) >= video.currentTime();
-        };
-
-        // pauses and syncs the video when the seek is finnished :3
-        const handleSeek = () => {
-            video.pause();
-            audio.pause();
-
-            if (Math.abs(video.currentTime() - audio.currentTime) > 0.3) {
-                audio.currentTime = video.currentTime();
-            }
-
-            if (!checkAudioBuffer()) {
-                audio.addEventListener('canplay', () => {
-                    if (video.paused && isVideoBuffered()) {
-                        video.play();
-                        audio.play();
-                    }
-                }, { once: true });
-            }
-        };
-
-        const handleBufferingComplete = () => {
-            if (Math.abs(video.currentTime() - audio.currentTime) > 0.3) {
-                audio.currentTime = video.currentTime();
-            }
-        };
+        // attach retry & ready markers to the real elements
+        attachRetry(audio,    audioSrc, () => { audioReady = true; });
+        attachRetry(videoEl,  videoSrc, () => { videoReady = true; });
 
         // Sync when playback starts
         video.on('play', () => {
+            if (!syncInterval) startSyncLoop();
             if (Math.abs(video.currentTime() - audio.currentTime) > 0.3) {
                 audio.currentTime = video.currentTime();
             }
-
-            if (isVideoBuffered()) {
-                audio.play();
-            }
+            if (audioReady) audio.play();
         });
 
         video.on('pause', () => {
             audio.pause();
+            clearSyncLoop();
         });
 
-        video.on('seeking', handleSeek);
+        // pause audio when video is buffering :3
+        video.on('waiting', () => {
+            audio.pause();
+            clearSyncLoop();
+        });
+
+        // resume audio when video resumes
+        video.on('playing', () => {
+            if (audioReady) audio.play();
+            if (!syncInterval) startSyncLoop();
+        });
+
+        // pauses and syncs on seek
+        video.on('seeking', () => {
+            audio.pause();
+            clearSyncLoop();
+            if (Math.abs(video.currentTime() - audio.currentTime) > 0.3) {
+                audio.currentTime = video.currentTime();
+            }
+        });
 
         video.on('seeked', () => {
-            if (isVideoBuffered()) {
-                video.play();
-            }
-            audio.play();
+            if (audioReady) audio.play();
+            if (!syncInterval) startSyncLoop();
         });
 
-        // le volume :3
-        video.on('volumechange', syncVolume);
-        audio.addEventListener('volumechange', syncVolumeWithVideo);
+        // volume sync
+        video.on('volumechange', () => {
+            audio.volume = video.volume();
+        });
+        audio.addEventListener('volumechange', () => {
+            video.volume(audio.volume);
+        });
 
         // Detects when video or audio finishes buffering
-        video.on('canplaythrough', handleBufferingComplete);
-        audio.addEventListener('canplaythrough', handleBufferingComplete);
-
-        // media control events
-        document.addEventListener('play', (e) => {
-            if (e.target === video) {
-                audio.play();
+        video.on('canplaythrough', () => {
+            if (Math.abs(video.currentTime() - audio.currentTime) > 0.3) {
+                audio.currentTime = video.currentTime();
+            }
+        });
+        audio.addEventListener('canplaythrough', () => {
+            if (Math.abs(video.currentTime() - audio.currentTime) > 0.3) {
+                audio.currentTime = video.currentTime();
             }
         });
 
-        document.addEventListener('pause', (e) => {
-            if (e.target === video) {
-                audio.pause();
-            }
-        });
-       
-	   // pause if it becomes full screen :3
+        // pause if it becomes full screen :3
         document.addEventListener('fullscreenchange', () => {
             if (!document.fullscreenElement) {
                 video.pause();
                 audio.pause();
+                clearSyncLoop();
             }
         });
     }
 });
 
 
+
 // hai!! if ur asking why are they here - its for smth in the future!!!!!!
 
 const FORMATS = {

html/calendar.ejs

@@ -4,184 +4,176 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="manifest" href="/manifest.json">
-  <link href="css/yt-ukraine.svg" rel="icon">
+  <link rel="icon" href="css/yt-ukraine.svg" type="image/svg+xml">
+  <meta name="theme-color" content="#101010">
+  <meta name="description" content="Poke! Calendar — zero-JS calendar">
+  <meta property="og:title" content="Poke! Calendar">
+  <meta property="og:description" content="Navigate months without JavaScript needed">
+  <meta property="og:image" content="https://cdn.glitch.global/d68d17bb-f2c0-4bc3-993f-50902734f652/aa70111e-5bcd-4379-8b23-332a33012b78.image.png?v=1701898829884">
+  <meta property="og:type" content="website">
+  <meta property="og:url" content="https://yourdomain.com/calendar">
+  <meta name="twitter:card" content="summary_large_image">
+  <meta name="twitter:site" content="@PokeCalendar">
+  <meta name="twitter:creator" content="@YourHandle">
+  <meta name="twitter:title" content="Poke! Calendar">
+  <meta name="twitter:image" content="https://cdn.glitch.global/d68d17bb-f2c0-4bc3-993f-50902734f652/aa70111e-5bcd-4379-8b23-332a33012b78.image.png?v=1701898829884">
+
   <title>Poke! Calendar</title>
-  <meta content="PokeCalendar" property="og:title">
-  <meta content="Worlds first no js web calendar :3" property="twitter:description">
-  <meta content="https://cdn.glitch.global/d68d17bb-f2c0-4bc3-993f-50902734f652/aa70111e-5bcd-4379-8b23-332a33012b78.image.png?v=1701898829884" property="og:image" /> 
-  <meta content=summary_large_image name=twitter:card>
-  <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline'">
-  <meta name="referrer" content="no-referrer">
 
   <style>
+    :root {
+      --bg: #101010;
+      --panel: #1a1a1a;
+      --border: #2a2a2a;
+      --accent: #bb86fc;
+      --accent-light: #ce9eff;
+      --text: #e0e0e0;
+      --today: #3700b3;
+      --weekend: #121212;
+    }
+    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
     body {
-  background-color: #121212;
-  color: #ffffff;
-  font-family: Arial, sans-serif;
-  margin: 0;
-}
-
-.navbar {
-  background-color: #333333;
-  padding: 10px;
-  display: flex;
-  align-items: center; /* Center items vertically */
-  justify-content: space-between; /* Space items evenly */
-}
-
-.navbar h1 {
-  margin: 0;
-  color: #bb86fc;
-}
-
-.navbar .years {
-  color: #bb86fc; /* Year text color */
-  display: flex; /* Use flexbox for alignment */
-  gap: 20px; /* Space between year elements */
-  flex-wrap: wrap; /* Allow wrapping on smaller screens */
-  justify-content: center; /* Center items on smaller screens */
-}
-
-.container {
-  text-align: center;
-  padding: 20px;
-  background-color: #1e1e1e;
-  border-radius: 10px;
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
-  width: 90%;
-  max-width: 800px;
-  margin: auto;
-}
-
-h2, h3 {
-  color: #bb86fc;
-  margin: 10px 0; /* Margin between h2 elements */
-}
-
-.month-title {
-  font-size: 1.5em; /* Adjust the size as needed */
-  margin: 20px 0; /* Spacing above and below */
-  color: #bb86fc; /* Month title color */
-}
-
-.calendar-table {
-  width: 100%;
-  border-collapse: collapse;
-  margin-top: 20px;
-}
-
-.calendar-table th, .calendar-table td {
-  padding: 15px;
-  text-align: center;
-  border: 1px solid #333333;
-  font-size: 0.9em; /* Smaller font size for better fit */
-}
-
-.calendar-table th {
-  background-color: #333333;
-}
-
-.calendar-table td {
-  background-color: #2c2c2c;
-  color: #ffffff;
-}
-
-.nav-links {
-  margin-top: 20px;
-}
-
-.button {
-  text-decoration: none;
-  color: #ffffff;
-  background-color: #bb86fc;
-  padding: 10px 20px;
-  border-radius: 5px;
-  margin: 0 10px;
-  transition: background-color 0.3s;
-}
-
-.button:hover {
-  background-color: #9c62f3;
-}
-
-/* Responsive styles */
-@media (max-width: 768px) {
-  .navbar {
-    flex-direction: column; /* Stack navbar items vertically on small screens */
-    align-items: center; /* Center items horizontally */
-  }
-
-  .container {
-    width: 100%; /* Full width on small screens */
-    height: 100vh; /* Full height of the viewport */
-    border-radius: 0; /* Remove border-radius for full-screen effect */
-    box-shadow: none; /* Remove shadow for a flatter design */
-    padding: 10px; /* Adjust padding for mobile */
-  }
-
-  .calendar-table th, .calendar-table td {
-    padding: 10px; /* Reduced padding for smaller screens */
-    font-size: 0.8em; /* Smaller font size */
-  }
-
-  .month-title {
-    font-size: 1.2em; /* Smaller month title */
-  }
-
-  .button {
-    padding: 8px 15px; /* Smaller button size */
-    margin: 5px 0; /* Vertical spacing */
-    display: block; /* Stack buttons vertically */
-    width: 100%; /* Full width */
-  }
-}
-
+      background: var(--bg) url('/css/background.jpg') center/cover fixed no-repeat;
+      color: var(--text);
+      font-family: 'Inter', sans-serif;
+      min-height: 100vh;
+      line-height: 1.5;
+    }
+    body::before {
+      content: '';
+      position: fixed; inset: 0;
+      background: inherit;
+      filter: blur(16px) brightness(0.4);
+      z-index: -1;
+    }
+    .navbar {
+      position: sticky; top: 0;
+      display: flex; align-items: center; justify-content: space-between;
+      padding: 1rem 2rem;
+      background: rgba(26,26,26,0.8);
+      border-bottom: 1px solid var(--border);
+    }
+    .navbar img { width: 8em; }
+    .years { display: flex; gap: 1.5rem; flex-wrap: wrap; }
+    .years h2 { font-size: 0.95rem; color: var(--accent); }
+    .container {
+      width: 90%; max-width: 900px;
+      margin: 2rem auto;
+      padding: 2rem;
+      background: var(--panel);
+      border: 1px solid var(--border);
+      border-radius: 12px;
+    }
+    .header-row {
+      display: flex; flex-wrap: wrap;
+      align-items: center; justify-content: space-between;
+      margin-bottom: 1.5rem;
+    }
+    .month-title { font-size: 2rem; color: var(--accent); }
+    .month-picker {
+      padding: 0.4rem 0.8rem;
+      font-size: 1rem;
+      color: var(--text);
+      background: var(--panel);
+      border: 1px solid var(--border);
+      border-radius: 8px;
+    }
+    .month-button {
+      margin-left: 0.5rem;
+      padding: 0.5rem 1rem;
+      background: var(--accent);
+      color: #fff;
+      border: none;
+      border-radius: 8px;
+      cursor: pointer;
+    }
+    .calendar-table {
+      width: 100%; border-collapse: collapse; table-layout: fixed;
+    }
+    .calendar-table th, .calendar-table td {
+      padding: 1rem; border: 1px solid var(--border);
+      text-align: center;
+    }
+    .calendar-table th {
+      background: var(--panel);
+      color: var(--accent-light);
+      font-weight: 500;
+    }
+    .calendar-table td {
+      background: var(--panel);
+      color: var(--text);
+    }
+    .calendar-table td:nth-child(1),
+    .calendar-table td:nth-child(7) {
+      background: var(--weekend);
+    }
+    .calendar-table td.today {
+      background: var(--today) !important;
+      color: #fff;
+      border-color: var(--accent);
+    }
+    .nav-links {
+      display: flex; justify-content: center; gap: 1rem;
+      margin-top: 2rem;
+    }
+    .button {
+      padding: 0.75rem 1.5rem;
+      background: var(--accent);
+      color: #fff;
+      text-decoration: none;
+      border-radius: 8px;
+      border: 1px solid var(--accent-light);
+      cursor: pointer;
+      font-weight: 500;
+    }
+    @media (max-width: 768px) {
+      .container { padding: 1rem; }
+      .month-title { font-size: 1.5rem; }
+      .calendar-table th, .calendar-table td { padding: 0.75rem; font-size: 0.85rem; }
+      .nav-links { flex-direction: column; }
+      .button { width: 100%; }
+    }
   </style>
 </head>
 <body>
   <div class="navbar">
-    <a class="class" href="/143" style="font-family: Inter, sans-serif; color: #fff">
-      <img style="transform: scale(1.3); padding-left: 0.9em; width: 8.5em; display: block; margin-left: auto; margin-right: auto;" src="/css/logo-poke.svg?v=5">
-    </a>    
+    <a href="/143"><img src="/css/logo-poke.svg?v=5" alt="Poke Calendar Logo"></a>
     <div class="years">
       <h2>Gregorian Year: <%= year %></h2>
       <h2>Islamic Year: <%= islamicYear %></h2>
       <h2>Persian Year: <%= persianYear %></h2>
     </div>
   </div>
-  
-  <div class="container" style="margin-top: 1em;">
-    <h2 class="month-title"><%= queryDate.toLocaleString('default', { month: 'long' }) %> <%= year %></h2> <!-- Month and Year Display -->
-
+  <div class="container">
+    <div class="header-row">
+      <h2 class="month-title"><%= queryDate.toLocaleString('default', { month: 'long' }) %> <%= year %></h2>
+      <form action="/calendar" method="get" style="display:flex; align-items:center;">
+        <input type="month" name="date" value="<%= currentDate.toISOString().slice(0,7) %>" class="month-picker">
+        <button type="submit" class="month-button">Go</button>
+      </form>
+    </div>
     <table class="calendar-table">
       <thead>
         <tr>
-          <th>Sunday</th>
-          <th>Monday</th>
-          <th>Tuesday</th>
-          <th>Wednesday</th>
-          <th>Thursday</th>
-          <th>Friday</th>
-          <th>Saturday</th>
+          <th>Sun</th><th>Mon</th><th>Tue</th><th>Wed</th><th>Thu</th><th>Fri</th><th>Sat</th>
         </tr>
       </thead>
       <tbody>
-        <% for (let i = 0; i < 6; i++) { %>
-          <tr>
-            <% for (let j = 0; j < 7; j++) { %>
-              <td>
-                <% const day = days[i * 7 + j]; %>
-                <%= day ? day.getDate() : '' %>
-              </td>
-            <% } %>
-          </tr>
-        <% } %>
+        <% days.forEach((day, idx) => { %>
+          <% if (idx % 7 === 0) { %><tr><% } %>
+            <% const today = new Date(); %>
+            <% const isToday = day &&
+               day.getDate() === today.getDate() &&
+               day.getMonth() === today.getMonth() &&
+               day.getFullYear() === today.getFullYear(); %>
+            <td class="<%= isToday ? 'today' : '' %>"><%= day ? day.getDate() : '' %></td>
+          <% if (idx % 7 === 6) { %></tr><% } %>
+        <% }); %>
       </tbody>
     </table>
-
     <div class="nav-links">
-      <a href="/calendar?date=<%= new Date(currentDate.getFullYear(), month - 1, 1).toISOString() %>" class="button">Previous Month</a>
-      <a href="/calendar?date=<%= new Date(currentDate.getFullYear(), month + 1, 1).toISOString() %>" class="button">Next Month</a>
+      <a href="/calendar?date=<%= new Date(year, month - 1, 1).toISOString() %>" class="button">← Prev</a>
+      <a href="/calendar?date=<%= new Date(year, month + 1, 1).toISOString() %>" class="button">Next →</a>
     </div>
   </div>
 </body>

html/landing.ejs

@@ -117,7 +117,7 @@
   <%- include('./partials/header.ejs') %>
   <video playsinline muted paused><source src="/bg-480.webm" type="video/webm"/></video>
   <div class="landing">
-    <h1 style="text-align: center;">THE ONLY FRONT-END IN THE WORLD!</h1>
+    <h1 style="text-align: center;">WELCOME TO POKE!</h1>
     <p style="max-width: 800px;text-align: center;margin: auto;margin-bottom: 3em;">Poke is a free software AD-FREE ! YouTube front-end, translator, map app, and more!!1! Watch videos and explore without a trace in this all-in-one privacy app!!1! :3</p>   
     <div style="text-align: center; padding: 10px; border-radius: 8px;margin-left: -1em;">
     <details>
@@ -154,8 +154,7 @@
 
 <div>
      <h1 style="margin-left: auto;margin-right: auto;text-align: center;margin-bottom: -1em;margin-top: 1em;">TOP 3 REASONS WHY POKE IZ COOL!!</h1>
-    <p>U can refresh to see other features!!</p>
-  </div>
+   </div>
    <% 
 const features = [
   { title: "No Tracking and Ads", description: "Poke Has no Trackers or ads - we dont and we wont see the vids ur watching :3", icon: "<svg style='background: #ea6d6d;' width='24px' height='24px' viewBox='0 0 24 24' stroke-width='1.5' fill='none' xmlns='http://www.w3.org/2000/svg' color='#ffffff'><path d='M19.5 16L17.0248 12.6038' stroke='#ffffff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/><path d='M12 17.5V14' stroke='#ffffff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/><path d='M4.5 16L6.96895 12.6124' stroke='#ffffff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/><path d='M3 8C6.6 16 17.4 16 21 8' stroke='#ffffff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>" },

html/pokepad.ejs

@@ -0,0 +1,804 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Pokepad</title>
+    <meta property="og:title" content="PokePad">
+  <meta property="og:description" content="E2EE notepad">
+  <meta property="og:image" content="https://cdn.glitch.global/d68d17bb-f2c0-4bc3-993f-50902734f652/aa70111e-5bcd-4379-8b23-332a33012b78.image.png?v=1701898829884">
+  <meta property="og:type" content="website">
+  <style>
+    /* Root colors */
+    :root {
+      --bg: #0f0f17;
+      --container-bg: rgba(30, 30, 47, 0.6);
+      --surface: rgba(20, 20, 35, 0.4);
+      --text: #e0e0e0;
+      --accent: #8a2be2;
+      --border: #444458;
+      --btn-bg: rgba(60, 60, 80, 0.7);
+      --btn-hover: rgba(70, 70, 100, 0.8);
+      --error: #f66;
+      --success: #8f8;
+      --tab-hover: rgba(100, 100, 120, 0.8);
+      --tab-active-bg: rgba(10, 10, 15, 0.9);
+    }
+
+    * {
+      box-sizing: border-box;
+      margin: 0;
+      padding: 0;
+    }
+    body {
+      min-height: 100vh;
+      background: var(--bg);
+      color: var(--text);
+      font-family: Arial, sans-serif;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      padding: 1rem;
+    }
+     #container {
+      width: 100%;
+      max-width: 900px;
+      background: var(--container-bg);
+      border: 1px solid var(--border);
+      border-radius: 12px;
+      backdrop-filter: blur(12px);
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
+      position: relative;
+    }
+
+     header {
+      width: 100%;
+      background: var(--surface);
+      backdrop-filter: blur(8px);
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 0.75rem 1rem;
+      border-bottom: 1px solid var(--border);
+    }
+    header .title {
+      font-size: 1.5rem;
+      color: var(--accent);
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+    }
+    header .title svg {
+      width: 24px;
+      height: 24px;
+      fill: var(--accent);
+    }
+    header .e2ee {
+      font-size: 0.9rem;
+      padding: 0.25rem 0.5rem;
+      background: var(--btn-bg);
+      border-radius: 4px;
+      border: 1px solid var(--border);
+      cursor: pointer;
+    }
+
+     #e2eePopup {
+      position: fixed;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      background: var(--container-bg);
+      border: 1px solid var(--border);
+      border-radius: 8px;
+      backdrop-filter: blur(12px);
+      padding: 1rem;
+      max-width: 300px;
+      display: none;
+      z-index: 10;
+    }
+    #e2eePopup p {
+      font-size: 0.9rem;
+      margin-bottom: 0.75rem;
+    }
+    #e2eePopup button {
+      background: var(--accent);
+      border: none;
+      border-radius: 4px;
+      color: #fff;
+      padding: 0.5rem 1rem;
+      cursor: pointer;
+      font-size: 0.9rem;
+    }
+
+     #tabBar {
+      display: flex;
+      background: var(--surface);
+      border-bottom: 1px solid var(--border);
+      overflow-x: auto;
+      white-space: nowrap;
+    }
+    .tab {
+      display: flex;
+      align-items: center;
+      padding: 0.5rem 0.75rem;
+      cursor: pointer;
+      user-select: none;
+      font-size: 0.95rem;
+      border-right: 1px solid var(--border);
+      color: var(--text);
+      background: var(--surface);
+      transition: background 0.2s, color 0.2s;
+      position: relative;
+      flex-shrink: 0;
+    }
+    .tab:hover {
+      background: var(--tab-hover);
+    }
+    .tab.active {
+      background: var(--tab-active-bg);
+      color: var(--accent);
+      border-bottom: 2px solid var(--accent);
+    }
+    .tab .title-text {
+      margin-right: 0.5rem;
+    }
+    .tab .icon-btn {
+      background: transparent;
+      border: none;
+      color: var(--text);
+      cursor: pointer;
+      padding: 0;
+      margin-left: 0.25rem;
+      display: flex;
+      align-items: center;
+    }
+    .tab .icon-btn:hover {
+      color: var(--accent);
+    }
+    .tab[data-dragging="true"] {
+      opacity: 0.5;
+    }
+
+     #editor {
+      flex: 1;
+      background: rgba(20, 20, 35, 0.3);
+      backdrop-filter: blur(8px);
+      padding: 1rem;
+      overflow-y: auto;
+      min-height: 300px;
+      color: var(--text);
+    }
+    #editor:empty:before {
+      content: attr(data-placeholder);
+      color: #888;
+    }
+    #editor:focus {
+      outline: 2px solid var(--accent);
+    }
+
+     #toolbar {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 0.5rem;
+      padding: 0.75rem 1rem;
+      background: var(--surface);
+      border-bottom: 1px solid var(--border);
+    }
+    .tool-btn {
+      background: var(--btn-bg);
+      border: 1px solid var(--border);
+      border-radius: 4px;
+      color: var(--text);
+      padding: 0.5rem;
+      cursor: pointer;
+      font-size: 0.9rem;
+      transition: background 0.2s;
+      display: flex;
+      align-items: center;
+    }
+    .tool-btn svg {
+      width: 18px;
+      height: 18px;
+      fill: var(--text);
+      margin-right: 0.3rem;
+    }
+    .tool-btn:hover {
+      background: var(--btn-hover);
+    }
+
+     #controls {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 0.5rem;
+      padding: 0.75rem 1rem;
+      background: var(--surface);
+      border-top: 1px solid var(--border);
+    }
+    #controls input[type="password"] {
+      flex: 1;
+      padding: 0.5rem;
+      font-size: 1rem;
+      border: 1px solid var(--border);
+      border-radius: 4px;
+      background: rgba(20, 20, 35, 0.6);
+      color: var(--text);
+    }
+    #controls .action-btn {
+      background: var(--btn-bg);
+      border: 1px solid var(--border);
+      border-radius: 4px;
+      color: var(--text);
+      padding: 0.5rem 1rem;
+      cursor: pointer;
+      font-size: 0.95rem;
+      transition: background 0.2s;
+    }
+    #controls .action-btn:hover {
+      background: var(--btn-hover);
+    }
+    #message {
+      padding: 0.5rem 1rem;
+      font-size: 0.9rem;
+      min-height: 1.2em;
+    }
+    #message.error {
+      color: var(--error);
+    }
+    #message.success {
+      color: var(--success);
+    }
+
+     #fileInput {
+      display: none;
+    }
+  </style>
+</head>
+<body>
+  <div id="container">
+    <!-- Header with icon and E2EE label -->
+    <header>
+      <div class="title">
+        <!-- Lock SVG -->
+        <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+          <path d="M12 2C9.238 2 7 4.238 7 7v3H6a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-9a2 2 0 0 0-2-2h-1V7c0-2.762-2.238-5-5-5zm-3 5c0-1.654 1.346-3 3-3s3 1.346 3 3v3H9V7zm-1 5h8v7H8v-7z"/>
+        </svg>
+        Pokepad
+      </div>
+      <div class="e2ee" id="e2eeLabel">End-to-End Encrypted</div>
+    </header>
+
+    <!-- E2EE Info Popup -->
+    <div id="e2eePopup">
+      <p><strong>End-to-End Encryption (E2EE)</strong></p>
+      <p>All notes are encrypted locally before being saved. Only you (and anyone you share your password with) can decrypt and read your notes. No unencrypted data ever leaves your browser.</p>
+      <button id="e2eeCloseBtn">Close</button>
+    </div>
+
+    <!-- Tab bar -->
+    <div id="tabBar"></div>
+
+    <!-- Formatting toolbar -->
+    <div id="toolbar">
+      <!-- Bold -->
+      <button class="tool-btn" data-cmd="bold" title="Bold (Ctrl+B)">
+        <svg viewBox="0 0 24 24"><path d="M15.6 10.79c.75-.54 1.4-1.31 1.85-2.18.46-.87.7-1.86.7-2.93 0-1.07-.24-2.06-.7-2.93-.46-.87-1.1-1.64-1.85-2.18-.81-.59-1.77-.89-2.77-.89h-5v16h5c1 0 1.96-.3 2.77-.89.75-.54 1.4-1.31 1.85-2.18.46-.87.7-1.86.7-2.93 0-1.07-.24-2.06-.7-2.93zM11 4h1.5c.74 0 1.44.26 2 .72.56.46 1.01 1.11 1.28 1.8.27.69.42 1.45.42 2.22 0 .77-.15 1.53-.42 2.22-.27.69-.72 1.34-1.28 1.8-.56.46-1.26.72-2 .72h-1.5V4zm1.5 12H11c-.74 0-1.44-.26-2-.72-.56-.46-1.01-1.11-1.28-1.8-.27-.69-.42-1.45-.42-2.22 0-.77.15-1.53.42-2.22.27-.69.72-1.34 1.28-1.8.56-.46 1.26-.72 2-.72h1.5v9z"/></svg>
+        <span>Bold</span>
+      </button>
+      <!-- Italic -->
+      <button class="tool-btn" data-cmd="italic" title="Italic (Ctrl+I)">
+        <svg viewBox="0 0 24 24"><path d="M10 4v3h2.21l-3.42 10H6v3h8v-3h-2.21l3.42-10H18V4z"/></svg>
+        <span>Italic</span>
+      </button>
+      <!-- Underline -->
+      <button class="tool-btn" data-cmd="underline" title="Underline (Ctrl+U)">
+        <svg viewBox="0 0 24 24"><path d="M12 17c3.31 0 6-2.69 6-6V4h-2v7c0 2.21-1.79 4-4 4s-4-1.79-4-4V4H6v7c0 3.31 2.69 6 6 6zm-5 2v2h10v-2H7z"/></svg>
+        <span>Underline</span>
+      </button>
+      <!-- Strikethrough -->
+      <button class="tool-btn" data-cmd="strikeThrough" title="Strikethrough">
+        <svg viewBox="0 0 24 24"><path d="M10 19v-2H5.41L9 13.41 7.59 12 2 17.59V19h8zm4 0h8v-2h-5.59L15 13.41 13.59 12 8 17.59V19h6zM21 11h-8V9h8v2z"/></svg>
+        <span>Strike</span>
+      </button>
+      <!-- Unordered List -->
+      <button class="tool-btn" data-cmd="insertUnorderedList" title="Bullet List">
+        <svg viewBox="0 0 24 24"><path d="M4 10.5c.83 0 1.5-.67 1.5-1.5S4.83 7.5 4 7.5 2.5 8.17 2.5 9 3.17 10.5 4 10.5zm0 5c.83 0 1.5-.67 1.5-1.5S4.83 12.5 4 12.5 2.5 13.17 2.5 14 3.17 15.5 4 15.5zm0 5c.83 0 1.5-.67 1.5-1.5S4.83 17.5 4 17.5 2.5 18.17 2.5 19 3.17 20.5 4 20.5zM7 9h14v2H7V9zm0 5h14v2H7v-2zm0 5h14v2H7v-2z"/></svg>
+        <span>Bullets</span>
+      </button>
+      <!-- Ordered List -->
+      <button class="tool-btn" data-cmd="insertOrderedList" title="Numbered List">
+        <svg viewBox="0 0 24 24"><path d="M4 10h2v1H4v2h2v1H4v2h4v-1H6v-2h2v-1H4v-2zm0-4h4v1H6v2h2v1H4v2h4v1H4v2h6v-1H6v-2h2v-1H4v-2zm0 10h12v-1H4v-2h2v-1H4v-2h4v-1H4V6h6V5H4v2h4v1H4v2h4v1H4v2z"/></svg>
+        <span>Numbers</span>
+      </button>
+      <!-- Align Left -->
+      <button class="tool-btn" data-cmd="justifyLeft" title="Align Left">
+        <svg viewBox="0 0 24 24"><path d="M3 5h18v2H3V5zm0 4h12v2H3V9zm0 4h18v2H3v-2zm0 4h12v2H3v-2z"/></svg>
+        <span>Left</span>
+      </button>
+      <!-- Align Center -->
+      <button class="tool-btn" data-cmd="justifyCenter" title="Align Center">
+        <svg viewBox="0 0 24 24"><path d="M3 5h18v2H3V5zm3 4h12v2H6V9zm3 4h18v2H9v-2zm3 4h12v2H12v-2z"/></svg>
+        <span>Center</span>
+      </button>
+      <!-- Align Right -->
+      <button class="tool-btn" data-cmd="justifyRight" title="Align Right">
+        <svg viewBox="0 0 24 24"><path d="M3 5h18v2H3V5zm6 4h12v2H9V9zm6 4h18v2H15v-2zm6 4h12v2h-12v-2z"/></svg>
+        <span>Right</span>
+      </button>
+      <!-- Text Color -->
+      <button class="tool-btn" id="colorPickerBtn" title="Text Color">
+        <svg viewBox="0 0 24 24"><path d="M15.55 14.52L9.48 4.5H7.03l6.07 10.02c.18.3.28.64.28 1 0 1.1-.9 2-2 2s-2-.9-2-2H7c0 1.66 1.34 3 3 3s3-1.34 3-3c0-.61-.22-1.17-.58-1.6zM12 2C8.13 2 5 5.13 5 9c0 1.66.58 3.18 1.55 4.38L12 22l5.45-8.62C18.42 12.18 19 10.66 19 9c0-3.87-3.13-7-7-7z"/></svg>
+        <span>Color</span>
+      </button>
+      <input type="color" id="colorPicker" style="display:none" />
+      <!-- Insert Link -->
+      <button class="tool-btn" data-cmd="createLink" title="Insert Link">
+        <svg viewBox="0 0 24 24"><path d="M3.9 12c0-1.17.44-2.27 1.24-3.06l3.34-3.34c1.65-1.65 4.33-1.65 5.98 0 1.65 1.65 1.65 4.33 0 5.98l-1.06 1.06-1.41-1.41 1.06-1.06c.88-.88.88-2.31 0-3.19-.88-.88-2.31-.88-3.19 0l-3.34 3.34c-.88.88-.88 2.31 0 3.19.88.88 2.31.88 3.19 0l1.06-1.06 1.41 1.41-1.06 1.06c-1.65 1.65-4.33 1.65-5.98 0C4.34 14.27 3.9 13.17 3.9 12zm16.2 0c0 1.17-.44 2.27-1.24 3.06l-3.34 3.34c-1.65 1.65-4.33 1.65-5.98 0-1.65-1.65-1.65-4.33 0-5.98l1.06-1.06 1.41 1.41-1.06 1.06c-.88.88-.88 2.31 0 3.19.88.88 2.31.88 3.19 0l3.34-3.34c.88-.88.88-2.31 0-3.19-.88-.88-2.31-.88-3.19 0l-1.06 1.06-1.41-1.41 1.06-1.06c1.65-1.65 4.33-1.65 5.98 0 1.65 1.65 1.65 4.33 0 5.98z"/></svg>
+        <span>Link</span>
+      </button>
+      <!-- Unlink -->
+      <button class="tool-btn" data-cmd="unlink" title="Remove Link">
+        <svg viewBox="0 0 24 24"><path d="M12.71 11.29l-1.42 1.42L10 11.42l-1.29 1.29-1.42-1.42L8.58 10 7.29 8.71l1.42-1.42L10 8.58l1.29-1.29 1.42 1.42L11.42 10l1.29 1.29zM17.65 6.35l-1.41 1.41 1.41 1.41L19.06 7.76l-1.41-1.41zm-11.3 11.3l-1.41 1.41 1.41 1.41 1.41-1.41-1.41-1.41z"/></svg>
+        <span>Unlink</span>
+      </button>
+    </div>
+
+    <div id="editor" contenteditable="true" spellcheck="false" data-placeholder="Type your notes here..."></div>
+
+    <div id="controls">
+      <input type="password" id="password" placeholder="Password" />
+      <button class="action-btn" id="saveBtn">Download&nbsp;Encrypted</button>
+      <button class="action-btn" id="loadBtn">Decrypt&nbsp;&amp;&nbsp;Load</button>
+      <button class="action-btn" id="uploadBtn">Upload&nbsp;Encrypted&nbsp;File</button>
+      <input type="file" id="fileInput" accept=".json" />
+    </div>
+
+    <div id="message"></div>
+  </div>
+
+  <script>
+    let notes = [];
+    let currentTabId = null;
+    let tabCounter = 0;
+    let dragSrcId = null;
+
+    const STORAGE_KEY = 'pokepadEncrypted';
+    const PLAIN_KEY = 'pokepadPlain';
+    const tabBar = document.getElementById('tabBar');
+    const editor = document.getElementById('editor');
+    const passwordInput = document.getElementById('password');
+    const saveBtn = document.getElementById('saveBtn');
+    const loadBtn = document.getElementById('loadBtn');
+    const uploadBtn = document.getElementById('uploadBtn');
+    const fileInput = document.getElementById('fileInput');
+    const messageDiv = document.getElementById('message');
+    const toolbarButtons = document.querySelectorAll('#toolbar .tool-btn');
+    const e2eeLabel = document.getElementById('e2eeLabel');
+    const e2eePopup = document.getElementById('e2eePopup');
+    const e2eeCloseBtn = document.getElementById('e2eeCloseBtn');
+    const colorPicker = document.getElementById('colorPicker');
+    const colorPickerBtn = document.getElementById('colorPickerBtn');
+
+    // On load: attempt to load plain data so tabs persist
+    window.addEventListener('DOMContentLoaded', () => {
+      const storedPlain = localStorage.getItem(PLAIN_KEY);
+      if (storedPlain) {
+        try {
+          const parsedPlain = JSON.parse(storedPlain);
+          if (parsedPlain.notes && Array.isArray(parsedPlain.notes)) {
+            notes = parsedPlain.notes;
+            tabCounter = notes.length ? Math.max(...notes.map(n => n.id)) + 1 : 0;
+            currentTabId = parsedPlain.currentTabId != null
+              ? parsedPlain.currentTabId
+              : notes[0]?.id;
+            renderTabs();
+            if (currentTabId != null) {
+              const curr = notes.find(n => n.id === currentTabId);
+              editor.innerHTML = curr ? curr.content : '';
+            }
+            return;
+          }
+        } catch {}
+      }
+      // If no plain data, create default tab
+      createNewTab();
+      setInterval(savePlain, 10000);
+    });
+
+    function createNewTab(name = null, content = '') {
+      const id = tabCounter++;
+      const defaultName = name || `Note ${id + 1}`;
+      notes.push({ id, name: defaultName, content });
+      switchToTab(id);
+      renderTabs();
+      savePlain();
+    }
+
+    function renderTabs() {
+      tabBar.innerHTML = '';
+      notes.forEach((note) => {
+        const tabEl = document.createElement('div');
+        tabEl.className = 'tab' + (note.id === currentTabId ? ' active' : '');
+        tabEl.setAttribute('draggable', 'true');
+        tabEl.dataset.id = note.id;
+
+        const titleSpan = document.createElement('span');
+        titleSpan.className = 'title-text';
+        titleSpan.textContent = note.name;
+        tabEl.appendChild(titleSpan);
+
+        const renameBtn = document.createElement('span');
+        renameBtn.className = 'icon-btn';
+        renameBtn.textContent = '✎';
+        renameBtn.title = 'Rename tab';
+        renameBtn.addEventListener('click', (e) => {
+          e.stopPropagation();
+          promptRename(note.id, titleSpan);
+        });
+        tabEl.appendChild(renameBtn);
+
+        const closeBtn = document.createElement('span');
+        closeBtn.className = 'icon-btn';
+        closeBtn.textContent = '×';
+        closeBtn.title = 'Close tab';
+        closeBtn.addEventListener('click', (e) => {
+          e.stopPropagation();
+          closeTab(note.id);
+        });
+        tabEl.appendChild(closeBtn);
+
+        tabEl.addEventListener('click', () => switchToTab(note.id));
+
+        tabEl.addEventListener('dragstart', tabDragStart);
+        tabEl.addEventListener('dragover', tabDragOver);
+        tabEl.addEventListener('drop', tabDrop);
+        tabEl.addEventListener('dragend', tabDragEnd);
+
+        tabBar.appendChild(tabEl);
+      });
+
+      const newTabEl = document.createElement('div');
+      newTabEl.className = 'tab';
+      newTabEl.textContent = '+';
+      newTabEl.title = 'Add new tab';
+      newTabEl.addEventListener('click', () => createNewTab());
+      tabBar.appendChild(newTabEl);
+    }
+
+    function switchToTab(id) {
+      if (currentTabId !== null) {
+        const currentNote = notes.find(n => n.id === currentTabId);
+        if (currentNote) currentNote.content = editor.innerHTML;
+      }
+      currentTabId = id;
+      const nextNote = notes.find(n => n.id === id);
+      editor.innerHTML = nextNote ? nextNote.content : '';
+      renderTabs();
+      clearMessage();
+      editor.focus();
+      savePlain();
+    }
+
+    function promptRename(id, titleSpan) {
+      const note = notes.find(n => n.id === id);
+      if (!note) return;
+      const input = document.createElement('input');
+      input.type = 'text';
+      input.value = note.name;
+      input.style.fontSize = '0.95rem';
+      input.style.background = 'rgba(20,20,35,0.6)';
+      input.style.color = 'var(--text)';
+      input.style.border = '1px solid var(--border)';
+      input.style.borderRadius = '4px';
+      input.style.padding = '2px 4px';
+      titleSpan.replaceWith(input);
+      input.focus();
+      input.select();
+      input.addEventListener('blur', () => {
+        const newName = input.value.trim();
+        if (newName) note.name = newName;
+        renderTabs();
+        savePlain();
+      });
+      input.addEventListener('keydown', (e) => {
+        if (e.key === 'Enter') input.blur();
+      });
+    }
+
+    function closeTab(id) {
+      const idx = notes.findIndex(n => n.id === id);
+      if (idx === -1) return;
+      const wasActive = (id === currentTabId);
+      notes.splice(idx, 1);
+      if (notes.length === 0) {
+        tabCounter = 0;
+        notes = [];
+        createNewTab();
+        return;
+      }
+      if (wasActive) {
+        const newIdx = idx > 0 ? idx - 1 : 0;
+        switchToTab(notes[newIdx].id);
+      } else {
+        renderTabs();
+        savePlain();
+      }
+    }
+
+    function tabDragStart(e) {
+      dragSrcId = Number(e.currentTarget.dataset.id);
+      e.currentTarget.dataset.dragging = 'true';
+    }
+    function tabDragOver(e) {
+      e.preventDefault();
+      const targetId = Number(e.currentTarget.dataset.id);
+      if (dragSrcId === targetId) return;
+      const srcIndex = notes.findIndex(n => n.id === dragSrcId);
+      const tgtIndex = notes.findIndex(n => n.id === targetId);
+      notes.splice(tgtIndex, 0, notes.splice(srcIndex, 1)[0]);
+      renderTabs();
+    }
+    function tabDrop(e) {
+      e.stopPropagation();
+      savePlain();
+    }
+    function tabDragEnd(e) {
+      delete e.currentTarget.dataset.dragging;
+    }
+
+    // Save editor changes
+    editor.addEventListener('input', () => {
+      if (currentTabId !== null) {
+        const note = notes.find(n => n.id === currentTabId);
+        if (note) note.content = editor.innerHTML;
+      }
+      savePlain();
+    });
+
+    function savePlain() {
+      if (currentTabId !== null) {
+        const currentNote = notes.find(n => n.id === currentTabId);
+        if (currentNote) currentNote.content = editor.innerHTML;
+      }
+      const payload = { notes, currentTabId };
+      localStorage.setItem(PLAIN_KEY, JSON.stringify(payload));
+    }
+
+    async function getKeyMaterial(password) {
+      const encoder = new TextEncoder();
+      return crypto.subtle.importKey(
+        'raw',
+        encoder.encode(password),
+        'PBKDF2',
+        false,
+        ['deriveKey']
+      );
+    }
+
+    async function deriveKey(password, salt) {
+      const keyMaterial = await getKeyMaterial(password);
+      return crypto.subtle.deriveKey(
+        { name: 'PBKDF2', salt: salt, iterations: 150000, hash: 'SHA-256' },
+        keyMaterial,
+        { name: 'AES-GCM', length: 256 },
+        false,
+        ['encrypt', 'decrypt']
+      );
+    }
+
+    function arrayBufferToBase64(buffer) {
+      const bytes = new Uint8Array(buffer);
+      let binary = '';
+      for (let b of bytes) {
+        binary += String.fromCharCode(b);
+      }
+      return btoa(binary);
+    }
+
+    function base64ToArrayBuffer(base64) {
+      const binary = atob(base64);
+      const bytes = new Uint8Array(binary.length);
+      for (let i = 0; i < binary.length; i++) {
+        bytes[i] = binary.charCodeAt(i);
+      }
+      return bytes.buffer;
+    }
+
+    async function encryptData(plainText, password) {
+      const encoder = new TextEncoder();
+      const salt = crypto.getRandomValues(new Uint8Array(16));
+      const iv = crypto.getRandomValues(new Uint8Array(12));
+      const key = await deriveKey(password, salt);
+      const cipherBuffer = await crypto.subtle.encrypt(
+        { name: 'AES-GCM', iv: iv },
+        key,
+        encoder.encode(plainText)
+      );
+      return {
+        salt: arrayBufferToBase64(salt.buffer),
+        iv: arrayBufferToBase64(iv.buffer),
+        data: arrayBufferToBase64(cipherBuffer)
+      };
+    }
+
+    async function decryptData(encryptedObj, password) {
+      const salt = base64ToArrayBuffer(encryptedObj.salt);
+      const iv = base64ToArrayBuffer(encryptedObj.iv);
+      const cipherBuffer = base64ToArrayBuffer(encryptedObj.data);
+      const key = await deriveKey(password, salt);
+      try {
+        const decryptedBuffer = await crypto.subtle.decrypt(
+          { name: 'AES-GCM', iv: iv },
+          key,
+          cipherBuffer
+        );
+        const decoder = new TextDecoder();
+        return decoder.decode(decryptedBuffer);
+      } catch {
+        throw new Error('Decryption failed. Wrong password or corrupted data.');
+      }
+    }
+
+    saveBtn.addEventListener('click', async () => {
+      clearMessage();
+      const pw = passwordInput.value;
+      if (!pw) {
+        showMessage('Please enter a password before downloading.', 'error');
+        return;
+      }
+      if (currentTabId !== null) {
+        const currentNote = notes.find(n => n.id === currentTabId);
+        if (currentNote) currentNote.content = editor.innerHTML;
+      }
+      savePlain();
+      const payload = { notes, currentTabId };
+      const jsonString = JSON.stringify(payload);
+      try {
+        const encrypted = await encryptData(jsonString, pw);
+        localStorage.setItem(STORAGE_KEY, JSON.stringify(encrypted));
+        const downloadObj = JSON.stringify(encrypted);
+        const blob = new Blob([downloadObj], { type: 'application/json' });
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        const timestamp = new Date().toISOString().slice(0,19).replace(/[:T]/g, '-');
+        a.download = `pokepad_${timestamp}.json`;
+        a.href = url;
+        a.click();
+        URL.revokeObjectURL(url);
+        showMessage('Encrypted file ready to download.', 'success');
+      } catch {
+        showMessage('Error during encryption. Try again.', 'error');
+      }
+    });
+
+    uploadBtn.addEventListener('click', () => { clearMessage(); fileInput.click(); });
+
+    fileInput.addEventListener('change', () => {
+      const file = fileInput.files[0];
+      if (!file) return;
+      const reader = new FileReader();
+      reader.onload = async (e) => {
+        clearMessage();
+        const pw = passwordInput.value;
+        if (!pw) {
+          showMessage('Enter password to decrypt uploaded file.', 'error');
+          return;
+        }
+        try {
+          const encryptedObj = JSON.parse(e.target.result);
+          const decryptedText = await decryptData(encryptedObj, pw);
+          const parsed = JSON.parse(decryptedText);
+          if (!parsed.notes || !Array.isArray(parsed.notes)) {
+            showMessage('Invalid file format.', 'error');
+            return;
+          }
+          notes = parsed.notes.map(n => ({ id: n.id, name: n.name, content: n.content }));
+          tabCounter = notes.length ? Math.max(...notes.map(n => n.id)) + 1 : 0;
+          currentTabId = parsed.currentTabId != null ? parsed.currentTabId : (notes[0]?.id);
+          renderTabs();
+          if (currentTabId != null) {
+            const curr = notes.find(n => n.id === currentTabId);
+            editor.innerHTML = curr ? curr.content : '';
+          } else if (notes[0]) {
+            currentTabId = notes[0].id;
+            editor.innerHTML = notes[0].content;
+          }
+          savePlain();
+          showMessage('Decryption successful! Notes loaded.', 'success');
+        } catch {
+          showMessage('Failed to decrypt or parse file.', 'error');
+        }
+      };
+      reader.readAsText(file);
+      fileInput.value = '';
+    });
+
+    loadBtn.addEventListener('click', async () => {
+      clearMessage();
+      const pw = passwordInput.value;
+      if (!pw) {
+        showMessage('Enter password to decrypt stored data.', 'error');
+        return;
+      }
+      const stored = localStorage.getItem(STORAGE_KEY);
+      if (!stored) {
+        showMessage('No locally stored data found.', 'error');
+        return;
+      }
+      try {
+        const encryptedObj = JSON.parse(stored);
+        const decryptedText = await decryptData(encryptedObj, pw);
+        const parsed = JSON.parse(decryptedText);
+        if (!parsed.notes || !Array.isArray(parsed.notes)) {
+          showMessage('Invalid local data format.', 'error');
+          return;
+        }
+        notes = parsed.notes.map(n => ({ id: n.id, name: n.name, content: n.content }));
+        tabCounter = notes.length ? Math.max(...notes.map(n => n.id)) + 1 : 0;
+        currentTabId = parsed.currentTabId != null ? parsed.currentTabId : (notes[0]?.id);
+        renderTabs();
+        if (currentTabId != null) {
+          const curr = notes.find(n => n.id === currentTabId);
+          editor.innerHTML = curr ? curr.content : '';
+        } else if (notes[0]) {
+          currentTabId = notes[0].id;
+          editor.innerHTML = notes[0].content;
+        }
+        showMessage('Decryption successful! Notes loaded from localStorage.', 'success');
+        savePlain();
+      } catch {
+        showMessage('Decryption failed or data corrupted.', 'error');
+      }
+    });
+
+     window.addEventListener('keydown', (e) => {
+      if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === 's') {
+        e.preventDefault();
+        showMessage('PokePad autosaves :3 ', 'success');
+      }
+    });
+
+     toolbarButtons.forEach(btn => {
+      const cmd = btn.getAttribute('data-cmd');
+      btn.addEventListener('click', () => {
+        if (cmd === 'createLink') {
+          const url = prompt('Enter the URL:', 'https://');
+          if (url) document.execCommand(cmd, false, url);
+        } else {
+          document.execCommand(cmd, false, null);
+        }
+        editor.focus();
+      });
+    });
+
+    colorPickerBtn.addEventListener('click', () => {
+      colorPicker.click();
+    });
+    colorPicker.addEventListener('input', () => {
+      document.execCommand('foreColor', false, colorPicker.value);
+      editor.focus();
+    });
+
+     e2eeLabel.addEventListener('click', () => {
+      e2eePopup.style.display = 'block';
+    });
+    e2eeCloseBtn.addEventListener('click', () => {
+      e2eePopup.style.display = 'none';
+    });
+
+     function showMessage(text, type) {
+      messageDiv.textContent = text;
+      messageDiv.className = type;
+      setTimeout(() => {
+        if (messageDiv.textContent === text) clearMessage();
+      }, 4000);
+    }
+    function clearMessage() {
+      messageDiv.textContent = '';
+      messageDiv.className = '';
+    }
+  </script>
+</body>
+</html>

html/search.ejs

@@ -416,7 +416,7 @@ video[counter].classList.add("shake");
         <div class="middle">
 <div class="search">
   
-        <form action=/search><input class=search-bar autocomplete="on"  value="<%=q%>" id=fname name=query style="color:#fff;font-family:Inter,sans-serif;border-radius: 8px;">
+        <form action=/search><input class=search-bar autocomplete="on"  value="<%=q%>" id=fname name=query  style="color:#fff;font-family:Inter,sans-serif;border-radius: 8px;background: linear-gradient(90deg, hsla(235, 21%, 21%, 1) 0%, hsla(194, 41%, 22%, 1) 50%, hsla(174, 48%, 20%, 1) 100%);" >
           <button class="btn btn-success" type=submit><i class="fa-light fa-search"></i></button>
              
          </form>

html/watch.ejs

@@ -410,7 +410,7 @@ button:hover, a:hover {
 
   <!-- player -->
   <link href="/css/videojs-v8.16.0.css?v=5949545" rel="stylesheet" />
-  <script src="/static/vjs.min.js?v=45959"></script><!-- custom video player for poke --><script src="/static/player-base.js?v=21_d&lang=en_us&set=player_ias.vflset"> </script>
+  <script src="/static/vjs.min.js?v=45959"></script><!-- custom video player for poke --><script src="/static/player-base.js?v=565_d&lang=en_us&set=player_ias.vflset"> </script>
 
   <!-- ICONS -->
   <!-- Font awesome pro -->
@@ -2537,8 +2537,16 @@ a {
   <style>body, html { margin: 0; padding: 0; } * { font-family: ubuntu; color:#fff } .player { background-color: #000 !important; display: grid; grid-template-columns: 1fr min-content; grid-template-rows: max-content 1fr max-content max-content max-content; gap: 0 0; width: 100%; /* height: 100%; */ aspect-ratio: 16 / 9; } .player * { color: #fff; } .player.embed, video.embed { position: fixed; top: 0; bottom: 0; left: 0; right: 0; } .player * { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .player > video { position: relative; width: 100%; height: 100%; z-index: 0; grid-area: 1 / 1 / 6 / 3; } .player.hide-controls > .player-title, .player.hide-controls > .player-controls, .player.hide-controls > .player-playback-bar-container, .player.hide-controls > .player-menu { display: none !important; } .player-controls { background-color: #0007; display: flex; justify-content: center; align-items: center; z-index: 1; grid-area: 1 / 1 / 6 / 3; } .player-button { width: 96px; height: 96px; font-size: 90px; text-align: center; line-height: 48px; } .player-tiny-button { width: 40px; font-size: 20px; text-align: center; } .player-tiny-button > i { color: #ddd; } .player-button, .player-button * { color: #dddddd !important; text-decoration: none; } .player-button > i { min-width: 48px; } .player-button:hover, .player-button:hover * { color: #fff !important; } .player-playback-bar { transition: width linear 100ms; } .player-playback-bar-container { grid-area: 4 / 1 / 5 / 3; display: flex; column-gap: 8px; justify-content: center; align-items: center; height: 8px; transition: height linear 100ms; width: 100%; z-index: 2; margin-bottom: 10px; } .player-playback-bar-bg { background-color: #fff3 !important; width: 100%; height: 100%; z-index: 2; display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr; } .player-playback-bar-bg > * { grid-area: 1 / 1 / 2 / 2; } .player-playback-bar-buffer { background-color: #fffa !important; height: 100%; width: 0; z-index: 3; } .player-playback-bar-fg { background-color: #f00 !important; height: 100%; width: 0; z-index: 4; } .player-buffering { grid-area: 1 / 1 / 6 / 3; z-index: 1; display: flex; justify-content: center; align-items: center; } .player-buffering-spinner { width: 80px; height: 80px; }</style>
   <body>
 <div class="app" style="color:#fff;margin-top: 0;">
-<nav>
-       <div class="left"><a class="class" href="/" style="font-family:Inter,sans-serif;color:#fff"> <img style="width: 8.5em;display: block;margin-left: -1.5em;margin-right: auto;" src="/css/logo-poke.svg">      </a>
+<nav style="
+  height: 2em;
+  margin-bottom: 1em;                            
+  background: rgba(0, 0, 0, 0.7);                  
+  backdrop-filter: blur(12px);                   
+  -webkit-backdrop-filter: blur(12px);              
+  border-radius: 12px;                              
+">
+<div class="left"><a class="class" href="/" style="font-family:Inter,sans-serif;color:#fff"> 
+          </a>
              </div>
            
   <div class="middle">
@@ -2911,11 +2919,85 @@ font-size: 13px;margin:0;padding:0;white-space: nowrap;
     %>      
  <div class="nerddd" style="background:#272727;padding: 5px;margin-top: 12px;border-radius: 11px;font-family: 'PokeTube Flex';font-stretch: extra-expanded;font-weight: 700;">
            
-              <a href="https://chatgpt.com/?q=<%- inv_vid.description %>+Please+summarize+the+selection+using+precise+and+concise+language.+Use+headers+and+bulleted+lists+in+the+summary%2C+to+make+it+scannable.+Maintain+the+meaning+and+factual+accuracy.">SUMMERISE!</a>
            
+<style>
+
+   @keyframes gradientAnimation {
+    0% { background-position: 0% 50%; }
+    50% { background-position: 100% 50%; }
+    100% { background-position: 0% 50%; }
+  }
+
+   @keyframes glow {
+    0%, 100% {
+      box-shadow: 0 0 15px rgba(0,255,255,0.7), inset 0 0 10px rgba(0,255,255,0.3);
+    }
+    50% {
+      box-shadow: 0 0 25px rgba(0,255,255,1), inset 0 0 15px rgba(0,255,255,0.5);
+    }
+  }
+
+  .ai-buttona {
+     padding: 0.75rem 1.5rem;
+     font-size: 15px;
+    letter-spacing: 0.05em;
+    text-transform: uppercase;
+    color: #ffffff;
+    text-decoration: none;
+    background: linear-gradient(
+      90deg,
+      hsla(235, 21%, 21%, 1) 0%,
+      hsla(194, 41%, 22%, 1) 50%,
+      hsla(174, 48%, 20%, 1) 100%
+    );
+    background-size: 238% 300%;
+    border-radius: 2rem;
+    border: none;
+    box-shadow: 0 0 15px rgba(0,255,255,0.7), inset 0 0 10px rgba(0,255,255,0.3);
+    transition: box-shadow 0.2s ease;
+     margin-top: 1em;
+     margin-bottom: -1em;
+     margin-left: 6em;
+     text-align: center;
+     animation: none;
+  }
+
+  .ai-button:hover {
+     box-shadow: 0 0 20px rgba(0,255,255,1), inset 0 0 15px rgba(0,255,255,0.5);
+    opacity: 0.9;
+  }
+
+</style>
+
+<%
+   const variant = Math.random() < 0.5 ? 'A' : 'B';
+   const showButton = Math.random() < 0.5;
+  const desc = inv_vid.description || '';
+%>
+
+<% if (showButton) { %>
+ <br><br> <a
+    href="https://chatgpt.com/?q=<%= encodeURIComponent(
+      desc +
+      ' Please summarize the selection using precise and concise language. ' +
+      'Use headers and bulleted lists in the summary, to make it scannable. ' +
+      'Maintain the meaning and factual accuracy.'
+    ) %>"
+    target="_blank"
+    rel="noopener noreferrer"
+    aria-label="Summarise the video description"
+    class="ai-buttona"
+    data-variant="<%= variant %>"
+  >
+    Summarise!
+  </a>
+<% } %>
+
+
+<br><br><br>
               <%-String(channelurlfixer(inv_vid.descriptionHtml)).replace(/\n/g, " <br> ").replace(/twitter\.com/g, "twitter.com").replace(/reddit\.com/g, "redlib.matthew.science") %>
-                
                
+
                     
  <div class="video-title" style="color:var(--text-color);font-family:var(--text-font-primary);;font-weight:var(--text-header-weight);font-stretch: extra-expanded;margin-top: 10px;margin-bottom: 10px;">Rating! :3</div>
 

src/libpoketube/init/pages-static.js

@@ -82,24 +82,24 @@ module.exports = function (app, config, renderTemplate) {
     renderTemplate(res, req, "rewind.ejs");
   });
 
+app.get("/notepad", function (req, res) {
+    renderTemplate(res, req, "pokepad.ejs");
+  });
+
   app.get("/translate", async function (req, res) {
     const { fetch } = await import("undici");
 
     const api_url = "https://simplytranslate.org/api/translate";
 
-    // Fetch translation data
-    const translationResponse = await fetch(
+     const translationResponse = await fetch(
       `${api_url}?from=${req.query.from_language}&to=${req.query.to_language}&text=${req.query.input}&engine=google`
     );
 
-    // Check if the request was successful (status code 200)
-    const translationData = await translationResponse.json();
+     const translationData = await translationResponse.json();
 
-    // Extract translated_text from the response
-    const translatedText = translationData.translated_text;
+     const translatedText = translationData.translated_text;
 
-    // Render the template with the translated text
-    renderTemplate(res, req, "translate.ejs", {
+     renderTemplate(res, req, "translate.ejs", {
       translation: translatedText,
       text: req.query.input || "enter text here",
       from_language: req.query.from_language,