Mercurial

diff mrjunejune/src/index.html @ 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 3468e2fe8d88
children
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>