mobile improvements, particles for mobile, hekate's protection widget

website/assets/style.css

@@ -140,4 +140,26 @@ webring-container {
   #oneko {
     display: none;
   }
+  .include88x31 {
+    display: none;
+  }
+  .results {
+    margin-top: 20px !important;
+  }
+  #lastfm > img {
+    width: 50px;
+    height: 50px;
+  }
+  #lastfm > div > h1 {
+    font-size: 30px;
+  }
+  #lastfm > div > span:nth-child(2) {
+    font-size: 20px !important;
+  }
+  #lastfm > div > span:nth-child(3) {
+    font-size: 17px !important;
+  }
+  .repeating-bg {
+    background: white;
+  }
 }

website/index.html

@@ -38,13 +38,26 @@ __TEMPLATE_HEAD__
                     106, 97, 64,
                     100, 117, 99, 107, 46, 99, 111, 109]))</span></p>
             <a href="assets/key.txt">Signing PGP key downloadable here.</a>
-
-            <h2>Include my 88x31 into your website! (hotlinking allowed!)</h2>
-            <pre>
+            <div class="include88x31">
+                <h2>Include my 88x31 into your website! (hotlinking allowed!)</h2>
+                <pre>
 &lt;a href="https://sad.ovh"&gt;
 &lt;img src="https://sad.ovh/assets/binkies/sadovh.png"&gt;
 &lt;/a&gt;
             </pre>
+            </div>
+            <div class="results"
+                style="text-align:center;width: 200px;background-color: #fff;color: #000;display: block;padding: 10px;border: 1px solid;margin: 0 auto;font-family: 'times';font-size: '15pt';">
+                <p style="margin: 0">This page is protected by a</p>
+                <h1 class="title" style="margin: 0">TAPIR</h1>
+                <img class="image" style="max-width: 160px;border: 1px solid" alt="TAPIR"
+                    src="https://i.ibb.co/10FV850/tapir.jpg">
+                <p class="description">Tapirs have changed very little over the past 20 million years.</p>
+                <small>
+                    <a style="color: #000" href="https://hekate.neocities.org">Want your own? Visit
+                        hekate.neocities.org!</a>
+                </small>
+            </div>
         </div>
         <div class="paper donations">
             <h1>donations</h1>
@@ -92,7 +105,8 @@ __TEMPLATE_HEAD__
                     <img src="/assets/binkies/unnick.png" width="88" height="31" alt="unnick">
                 </picture>
             </a>
-            <a href="https://github.com/NotNite/eightyeightthirtyone" class="hasBadge" aria-label="View eighteightthirty.one's source code">
+            <a href="https://github.com/NotNite/eightyeightthirtyone" class="hasBadge"
+                aria-label="View eighteightthirty.one's source code">
                 <img src="/assets/binkies/eighteightthirtyone.png" alt="eightyeightthirty.one" width="88" height="31">
             </a>
         </div>
@@ -105,7 +119,8 @@ __TEMPLATE_HEAD__
                 <script src="https://palette.nekoweb.org/webring.js"></script>
             </webring-container>
 
-            <iframe title="the bucket webring" id="bucket-webring" style="width: 100%; height: 3rem; border: none;margin-top:5px;"
+            <iframe title="the bucket webring" id="bucket-webring"
+                style="width: 100%; height: 3rem; border: none;margin-top:5px;"
                 src="https://webring.bucketfish.me/embed.html?name=☹️☹️☹️.ovh&lightmode=true"></iframe>
         </div>
 

website/scripts/particles.ts

@@ -93,3 +93,18 @@ document.documentElement.addEventListener("mousemove", (event) => {
   const particle = new Particle(event.pageX, event.pageY);
   particles.push(particle);
 });
+
+document.documentElement.addEventListener("touchmove", function(e) {
+  for(let i = 0; i < e.touches.length; i++) {
+    if (Date.now() - lastMoveTimestamp < 50) {
+      return;
+    }
+  
+    lastMoveTimestamp = Date.now();
+    const touch = e.touches.item(i);
+    if(!touch) return;
+
+    const particle = new Particle(touch.pageX, touch.pageY);
+    particles.push(particle);
+  }
+}, false);

website/templates/head.html

@@ -25,7 +25,9 @@
     <script src="scripts/oneko.js"></script>
     <link rel="icon" type="image/x-icon" href="/assets/favicon.png">
     <script>
+        if(location.hostname !== "127.0.0.1" && location.hostname !== "localhost") {
         !function(t,e){var o,n,p,r;e.__SV||(window.posthog=e,e._i=[],e.init=function(i,s,a){function g(t,e){var o=e.split(".");2==o.length&&(t=t[o[0]],e=o[1]),t[e]=function(){t.push([e].concat(Array.prototype.slice.call(arguments,0)))}}(p=t.createElement("script")).type="text/javascript",p.async=!0,p.src=s.api_host.replace(".i.posthog.com","-assets.i.posthog.com")+"/static/array.js",(r=t.getElementsByTagName("script")[0]).parentNode.insertBefore(p,r);var u=e;for(void 0!==a?u=e[a]=[]:a="posthog",u.people=u.people||[],u.toString=function(t){var e="posthog";return"posthog"!==a&&(e+="."+a),t||(e+=" (stub)"),e},u.people.toString=function(){return u.toString(1)+".people (stub)"},o="capture identify alias people.set people.set_once set_config register register_once unregister opt_out_capturing has_opted_out_capturing opt_in_capturing reset isFeatureEnabled onFeatureFlags getFeatureFlag getFeatureFlagPayload reloadFeatureFlags group updateEarlyAccessFeatureEnrollment getEarlyAccessFeatures getActiveMatchingSurveys getSurveys getNextSurveyStep onSessionId setPersonProperties".split(" "),n=0;n<o.length;n++)g(u,o[n]);e._i.push([i,s,a])},e.__SV=1)}(document,window.posthog||[]);
         posthog.init('phc_NdFhf5ih8CZhTqVhnmVKpUVqZhIGJQYp6d0uGy5UIOH',{api_host:'https://anal.sad.ovh', person_profiles: 'always'
             })
+        }
     </script>