Format and add home link

Rhettanifiy
mak
2025-09-26 12:44:07 -04:00 · 2025-09-26 12:40:29 -04:00 · 2025-09-19 20:33:59 -04:00 · 2025-07-15 12:05:15 -04:00 · 2025-07-08 11:16:10 -04:00 · 2025-07-03 15:29:33 -04:00
14 changed files with 250 additions and 26 deletions
--- a/update.sh
+++ b/update.sh
@ -1,2 +1,4 @@
 #!/bin/bash
+chmod 644 www/data.json
+
 rsync -avz --delete www/* joe@snowsunehost:/opt/cumtanks.snowsune.net/www --progress
--- a/www/Composite.png
+++ b/www/Composite.png
--- a/www/characters/Makanix_Internal.png
+++ b/www/characters/Makanix_Internal.png
--- a/www/characters/ceirus.png
+++ b/www/characters/ceirus.png
--- a/www/characters/orchid.png
+++ b/www/characters/orchid.png
--- a/www/characters/orchid.png~
+++ b/www/characters/orchid.png~
--- a/www/characters/rhettan.png
+++ b/www/characters/rhettan.png
--- a/www/characters/rich.png
+++ b/www/characters/rich.png
--- a/www/characters/zae.png
+++ b/www/characters/zae.png
--- a/www/characters/zae.png~
+++ b/www/characters/zae.png~
--- a/www/data.json
+++ b/www/data.json
@ -7,20 +7,70 @@
      "url": "https://www.f-list.net/c/alice%20prairie"
    },
    {
-      "name": "Bear Cum",
-      "volume": 9,
-      "color": "#523a33",
-      "url": "https://www.f-list.net/c/Glyren"
-    },
-    {
-      "name": "Kan'vi Cum (Glowing)",
-      "volume": 18,
-      "color": "#FF56BD",
-      "url": "https://www.f-list.net/c/Zae"
+      "name": "Rhettan",
+      "volume": 40,
+      "color": "#f1f2f2",
+      "url": "https://www.f-list.net/c/alice%20prairie",
+      "image": "characters/rhettan.png"
    }
  ],
  "settings": {
-    "tankTopOffset": 265,
+    "tankTopOffset": 360,
    "tankBottomOffset": 101
-  }
+  },
+  "logs": [
+    { "date": 1746126240, "text": "Added 1% Coyote Cum." },
+    { "date": 1751396678, "text": "CV'd Zae~" },
+    { "date": 1751407200, "text": "Zae added 41% Kan'vi Cum" },
+    { "date": 1751547600, "text": "Added 1% Coyote Cum." },
+    { "date": 1751569534, "text": "Dumped 39% into Ky-Li" },
+    { "date": 1751574910, "text": "Luka pours in a little kittycum~" },
+    { "date": 1751940097, "text": "Devoured Rich in a locker room~" },
+    {
+      "date": 1751942400,
+      "text": "Rich didn't hold up in the heat."
+    },
+    {
+      "date": 1751942580,
+      "text": "Impossible to keep this fox down! leaking him all over my toes <3"
+    },
+    {
+      "date": 1751943180,
+      "text": "Giving up! Theres more fox between my toes and on my roommate's bed than in my balls~"
+    },
+    {
+      "date": 1752109080,
+      "text": "Creamed, gushed poor Zae oops~"
+    },
+    {
+      "date": 1752109080,
+      "text": "\"leaeked\" the last of that kittycum out~"
+    },
+    {
+      "date": 1752119470,
+      "text": "All it took was a little pawjob to empty out~"
+    },
+    {
+      "date": 1752559908,
+      "text": "Won a bet with a beast of a anjanath, turns out he fit after all~"
+    },
+    {
+      "date": 1752977551,
+      "text": "Finally time to churn a bit of this beast down"
+    },
+    { "date": 1753675451, "text": "GLORP! Nothing left~" },
+    {
+      "date": 1754448094,
+      "text": "Kai didn't really have a good sense of what was going on~"
+    },
+    {
+      "date": 1754626707,
+      "text": "Happy vore day everyone! And in the spirit of the holiday.. im keeping these two Kan'Vi~"
+    },
+    { "date": 1758328457, "text": "New day~ empty yote >:3" },
+    {
+      "date": 1758585605,
+      "text": "Glorp~ Couldn't wait for fresh filler, Rhettan will have to do~"
+    }
+  ]
 }
--- a/www/favicon.ico
+++ b/www/favicon.ico
--- a/www/index.html
+++ b/www/index.html
@ -4,22 +4,31 @@
 <head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Cumtanks.snowusne.net</title>
+  <title>Cumtanks.snowsune.net</title>

  <!-- Open Graph / Discord -->
  <meta property="og:type" content="website" />
-  <meta property="og:title" content="cumtanks.snowusne.net" />
+  <meta property="og:title" content="cumtanks.snowsune.net" />
  <meta property="og:image" content="/preview.png" />

  <!-- Twitter -->
  <meta name="twitter:card" content="summary_large_image" />
-  <meta name="twitter:title" content="cumtanks.snowusne.net" />
+  <meta name="twitter:title" content="cumtanks.snowsune.net" />
  <meta name="twitter:image" content="/preview.png" />

  <link rel="stylesheet" href="styles.css" />
+  <script src="https://cdn.jsdelivr.net/npm/timesago@1"></script>
 </head>

 <body>
+  <img src="preview.png" alt="Preview" style="display: none" aria-hidden="true" />
+  <div class="homepage-link">
+    <a href="https://snowsune.net" title="Back to snowsune.net">
+      <img src="https://snowsune.net/static/stickers/bep_bounce.gif" alt="Home"
+        style="width: 20px; height: 20px; vertical-align: middle; margin-right: 5px;">
+      Back to snowsune.net!
+    </a>
+  </div>
  <div class="container">
    <div class="tank-container">
      <img src="Alice_close_up_sheath_background.png" alt="Tank Background Back"
@ -42,6 +51,9 @@
        <input type="number" id="tankBottomOffset" value="40" min="0" max="800" />
      </label>
    </div>
+    <div class="logbook">
+      <ul id="logList"></ul>
+    </div>
  </div>

  <script>
@ -57,6 +69,7 @@
        const response = await fetch("data.json");
        tankData = await response.json();
        updateTank();
+        updateLogbook();
      } catch (error) {
        console.error("Error loading tank data:", error);
      }
@ -72,14 +85,26 @@
      const tankContainerHeight = tankContainer.offsetHeight;
      const tankTopOffset = tankData.settings.tankTopOffset;
      const tankBottomOffset = tankData.settings.tankBottomOffset;
-      const tankHeight = tankContainerHeight - tankTopOffset - tankBottomOffset;
+      const tankHeight =
+        tankContainerHeight - tankTopOffset - tankBottomOffset;
      let currentHeight = 0;
      let cumulativeVolume = 0;

      tankData.liquids.forEach((liquid, i) => {
        const layer = document.createElement("div");
        layer.className = "liquid-layer";
-        layer.style.backgroundColor = liquid.color;
+
+        // Set background: image if present, else color
+        if (liquid.image) {
+          layer.style.backgroundImage = `url(${liquid.image})`;
+          layer.style.backgroundSize = "800px";
+          layer.style.backgroundRepeat = "no-repeat";
+          layer.style.backgroundPosition = "right 50px top 0px";
+          layer.style.backgroundColor = liquid.color;
+        } else {
+          layer.style.backgroundImage = "";
+          layer.style.backgroundColor = liquid.color;
+        }

        // Create the label
        const label = document.createElement("div");
@ -100,11 +125,11 @@

        // Shift label left if cumulative volume is under 20%
        if (cumulativeVolume < 20) {
-          label.style.left = '18%';
-          label.style.transform = 'translate(-30%, -50%)';
+          label.style.left = "18%";
+          label.style.transform = "translate(-30%, -50%)";
        } else {
-          label.style.left = '50%';
-          label.style.transform = 'translate(-50%, -50%)';
+          label.style.left = "50%";
+          label.style.transform = "translate(-50%, -50%)";
        }

        // Calculate height based on volume percentage
@ -121,13 +146,60 @@
      });
    }

+    function updateLogbook() {
+      const logList = document.getElementById("logList");
+      logList.innerHTML = "";
+      if (tankData.logs) {
+        const now = Date.now() / 1000;
+        tankData.logs.forEach((log) => {
+          const li = document.createElement("li");
+          let epoch =
+            typeof log.date === "number"
+              ? log.date
+              : Date.parse(log.date) / 1000;
+          const ageHours = (now - epoch) / 3600;
+
+          // Color interpolation: 0h = #fff, 8h = #888
+          let color;
+          if (ageHours <= 0) {
+            color = "#fff";
+          } else if (ageHours >= 8) {
+            color = "#888";
+          } else {
+            // Linear interpolation between #fff and #888
+            const t = ageHours / 8;
+            const r = Math.round(255 + (136 - 255) * t);
+            const g = Math.round(255 + (136 - 255) * t);
+            const b = Math.round(255 + (136 - 255) * t);
+            color = `rgb(${r},${g},${b})`;
+          }
+          li.style.color = color;
+
+          // Add shimmer class if less than 8 hours old
+          if (ageHours < 8) {
+            li.classList.add("log-shimmer");
+          }
+
+          li.textContent = `${window.timesago ? timesago(epoch * 1000) : log.date
+            } — ${log.text}`;
+          logList.appendChild(li);
+        });
+        // Auto-scroll to bottom
+        const logbookDiv = document.querySelector(".logbook");
+        if (logbookDiv) logbookDiv.scrollTop = logbookDiv.scrollHeight;
+      }
+    }
+
    // Update settings
    function updateSettings() {
      if (!tankData) return;

      tankData.settings.tankTopOffset = parseInt(tankTopOffsetInput.value);
-      tankData.settings.tankBottomOffset = parseInt(tankBottomOffsetInput.value);
+      tankData.settings.tankBottomOffset = parseInt(
+        tankBottomOffsetInput.value
+      );
      updateTank();
+      updateLogbook();
    }

    // Event listeners
@ -141,12 +213,13 @@
  <!-- Footer -->
  <footer class="tiny-footer">
    <span>
-      Art by <a href="https://x.com/Raven4Seth" target="_blank" rel="noopener noreferrer">SethRave4</a>
-      &bull;
-      Message <a href="mailto:vixi@snowsune.net">vixi@snowsune.net</a> for questions/comments/anything!
+      Art by
+      <a href="https://x.com/Raven4Seth" target="_blank" rel="noopener noreferrer">SethRave4</a>
+      &bull; Message
+      <a href="mailto:vixi@snowsune.net">vixi@snowsune.net</a> for
+      questions/comments/anything!
    </span>
  </footer>
-
 </body>

 </html>
--- a/www/styles.css
+++ b/www/styles.css
@ -72,6 +72,9 @@ h1 {
  transition: all 0.3s ease;
  z-index: 2;
  overflow: hidden;
+  background-position: top center;
+  background-repeat: no-repeat;
+  background-size: contain;
 }

 .liquid-layer > div {
@ -174,3 +177,99 @@ h1 {
 .tiny-footer a:hover {
  color: #fff;
 }
+
+.logbook {
+  position: absolute;
+  left: 24px;
+  top: 20px;
+  width: 260px;
+  height: 850px;
+  background: rgba(30, 30, 40, 0.95);
+  border: 4px solid #000;
+  box-sizing: border-box;
+  font-size: 0.85em;
+  color: #eee;
+  overflow-y: auto;
+  z-index: 10;
+  padding: 16px 10px 16px 16px;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+}
+
+.logbook h2 {
+  font-size: 1em;
+  margin: 0 0 8px 0;
+  color: #fff;
+  text-align: left;
+}
+
+#logList {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  font-size: 0.85em;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+#logList li {
+  color: #ccc;
+  font-size: 0.95em;
+  word-break: break-word;
+}
+
+.log-shimmer {
+  background: linear-gradient(
+    90deg,
+    #fff 0%,
+    #f8f8ff 20%,
+    #ffe 40%,
+    #fff 60%,
+    #e0e0e0 80%,
+    #fff 100%
+  );
+  background-size: 400% 100%;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  animation: shimmer 6s linear infinite;
+  font-weight: bold;
+  filter: drop-shadow(0 0 2px #fff8);
+}
+
+@keyframes shimmer {
+  0% {
+    background-position: 400% 0;
+  }
+  100% {
+    background-position: 0 0;
+  }
+}
+
+.homepage-link {
+  position: fixed;
+  top: 20px;
+  right: 20px;
+  z-index: 1000;
+}
+
+.homepage-link a {
+  display: inline-block;
+  padding: 8px 16px;
+  background: rgba(0, 0, 0, 0.7);
+  color: #fff;
+  text-decoration: none;
+  border-radius: 6px;
+  font-size: 14px;
+  font-weight: bold;
+  transition: all 0.3s ease;
+  border: 2px solid rgba(255, 255, 255, 0.2);
+}
+
+.homepage-link a:hover {
+  background: rgba(255, 255, 255, 0.9);
+  color: #23232b;
+  border-color: rgba(255, 255, 255, 0.8);
+  transform: translateY(-1px);
+}
Author	SHA1	Message	Date
Snowsune	f495711b01	Format and add home link	2025-09-26 12:44:07 -04:00
Snowsune	99e7ddc991	Rhettanifiy	2025-09-26 12:40:29 -04:00
Kenwood	87f4640400	mak	2025-09-19 20:33:59 -04:00
Kenwood	77c189e874	Slursh~	2025-07-15 12:05:15 -04:00
Kenwood	d89a686789	A lil more time passed	2025-07-08 11:16:10 -04:00
Kenwood	7658e811ea	add style	2025-07-03 15:29:33 -04:00
Kenwood	69943d15ec	Add shimmer	2025-07-03 15:25:15 -04:00
Kenwood	2b9ca9ad31	Add logbook	2025-07-03 15:07:31 -04:00
Kenwood	46d0008b72	Fix first image	2025-07-03 14:58:03 -04:00
Kenwood	5370e12afb	Add image bkgrounds	2025-07-02 11:34:14 -04:00