Mercurial

changeset 211:a6d8d32a0261

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
[MrJuneJune] Simple animations for darkmode.
author MrJuneJune <me@mrjunejune.com>
date Sun, 15 Feb 2026 21:38:23 -0800
parents 0abed117e623
children 84826b3c655b
files mrjunejune/src/index.html mrjunejune/src/offline.html mrjunejune/src/parts/base_head.html mrjunejune/src/public/pwa-register.js
diffstat 4 files changed, 49 insertions(+), 9 deletions(-) [+]
line wrap: on
line diff
--- a/mrjunejune/src/index.html	Sun Feb 15 15:47:38 2026 -0800
+++ b/mrjunejune/src/index.html	Sun Feb 15 21:38:23 2026 -0800
@@ -29,6 +29,41 @@
           margin-bottom: 0.75em;
         }
       }
+
+      #background {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        pointer-events: none;
+        z-index: 0;
+      }
+
+      #game {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        pointer-events: none;
+        z-index: 1;
+        cursor: default;
+      }
+
+      #game.active {
+        pointer-events: auto;
+        z-index: 100;
+      }
+
+      #gameUI {
+        position: fixed;
+        top: 10px;
+        right: 10px;
+        pointer-events: auto;
+        z-index: 101;
+        cursor: pointer;
+      }
     </style>
   </head>
   <body>
@@ -53,10 +88,14 @@
          <li><a href="/resume">Resume</a> - My professional experiences </li>
          <li><a href="/tools">Tools</a> - Things I made for myself </li>
        </ul> 
+       <canvas id="background"></canvas>
+       <canvas id="game"></canvas>
+       <canvas id="gameUI"></canvas>
      </main>
      {{/parts/footer.html}}
   </body>
   <script>
+    // Epi image
     let arr = Array.from({ length: 18 }, (_, i) => i+1);
     function setRandomImages() {
       const randomIndex = Math.floor(Math.random() * arr.length);
@@ -69,4 +108,5 @@
     }
     setRandomImages();
   </script>
+  <script src="/public/dog-game.js"></script>
 </html>
--- a/mrjunejune/src/offline.html	Sun Feb 15 15:47:38 2026 -0800
+++ b/mrjunejune/src/offline.html	Sun Feb 15 21:38:23 2026 -0800
@@ -14,7 +14,7 @@
         min-height: 100vh;
         margin: 0;
         padding: 20px;
-        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        background: linear-gradient(135deg, #544e43 0%, #3a3630 100%);
         color: white;
         text-align: center;
       }
@@ -34,7 +34,7 @@
         padding: 12px 32px;
         font-size: 1em;
         background: white;
-        color: #667eea;
+        color: #544e43;
         border: none;
         border-radius: 8px;
         cursor: pointer;
--- a/mrjunejune/src/parts/base_head.html	Sun Feb 15 15:47:38 2026 -0800
+++ b/mrjunejune/src/parts/base_head.html	Sun Feb 15 21:38:23 2026 -0800
@@ -1,6 +1,6 @@
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
-<meta name="theme-color" content="#2337ff">
+<meta name="theme-color" content="#544e43">
 <link rel="icon" type="image/svg+xml" href="/public/epi_all_colors.svg">
 <link rel="manifest" href="/public/manifest.json">
 <link rel="apple-touch-icon" href="/public/epi_all_colors.svg">
--- a/mrjunejune/src/public/pwa-register.js	Sun Feb 15 15:47:38 2026 -0800
+++ b/mrjunejune/src/public/pwa-register.js	Sun Feb 15 21:38:23 2026 -0800
@@ -4,7 +4,7 @@
     navigator.serviceWorker
       .register('/public/sw.js')
       .then((registration) => {
-        console.log('[PWA] Service Worker registered:', registration.scope);
+        // console.log('[PWA] Service Worker registered:', registration.scope);
 
         // Check for updates periodically
         setInterval(() => {
@@ -72,11 +72,11 @@
 
   document.body.appendChild(installBtn);
 
-  // setTimeout(() => {
-  //   installBtn.style.opacity = '0';
-  //   installBtn.style.transition = 'opacity 0.3s';
-  //   setTimeout(() => installBtn.remove(), 300);
-  // }, 10000);
+  setTimeout(() => {
+    installBtn.style.opacity = '0';
+    installBtn.style.transition = 'opacity 0.3s';
+    setTimeout(() => installBtn.remove(), 300);
+  }, 5000);
 }
 
 window.addEventListener('appinstalled', () => {