diff --git a/www/characters/Makanix_Internal.png b/www/characters/Makanix_Internal.png new file mode 100644 index 0000000..e5ec05f Binary files /dev/null and b/www/characters/Makanix_Internal.png differ diff --git a/www/data.json b/www/data.json index 52f3ef4..748bee7 100644 --- a/www/data.json +++ b/www/data.json @@ -7,11 +7,11 @@ "url": "https://www.f-list.net/c/alice%20prairie" }, { - "name": "Orchid", - "volume": 106, - "color": "#18632a", - "url": "https://www.f-list.net/c/orchid", - "image": "characters/orchid.png" + "name": "Zae & Nil", + "volume": 115, + "color": "#6C2C2A", + "url": "https://www.f-list.net/c/Zae", + "image": "characters/Makanix_Internal.png" } ], "settings": { @@ -53,6 +53,19 @@ { "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~" } ] } diff --git a/www/index.html b/www/index.html index da6e936..20c3ec0 100644 --- a/www/index.html +++ b/www/index.html @@ -1,214 +1,250 @@ + + + + Cumtanks.snowsune.net - - - - Cumtanks.snowusne.net + + + + - - - - + + + + - - - - + + + - - - - - - -
-
- Tank Background Back - Tank Background Foreground - -
- Art by SethRaven4 + + +
+
+ Tank Background Back + Tank Background Foreground + +
+ Art by SethRaven4 +
+
+
+

Settings

+ + +
+
+
    -
    -

    Settings

    - - -
    -
    -
      -
      -
      - - const tankContainerHeight = tankContainer.offsetHeight; - const tankTopOffset = tankData.settings.tankTopOffset; - const tankBottomOffset = tankData.settings.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"; - - // Set background: image if present, else color - if (liquid.image) { - layer.style.backgroundImage = `url(${liquid.image})`; - layer.style.backgroundSize = "660px"; - layer.style.backgroundRepeat = "no-repeat"; - layer.style.backgroundPosition = "right 110px top 0px"; - layer.style.backgroundColor = liquid.color; - } else { - layer.style.backgroundImage = ""; - layer.style.backgroundColor = liquid.color; - } - - // Create the label - const label = document.createElement("div"); - label.className = "liquid-label"; - - // If there's a URL, make it a clickable link - if (liquid.url) { - const link = document.createElement("a"); - link.href = liquid.url; - link.textContent = `${liquid.name} (${liquid.volume}%)`; - link.className = "liquid-link"; - label.appendChild(link); - } else { - label.textContent = `${liquid.name} (${liquid.volume}%)`; - } - - cumulativeVolume += liquid.volume; - - // Shift label left if cumulative volume is under 20% - if (cumulativeVolume < 20) { - label.style.left = "18%"; - label.style.transform = "translate(-30%, -50%)"; - } else { - label.style.left = "50%"; - label.style.transform = "translate(-50%, -50%)"; - } - - // Calculate height based on volume percentage - const height = (liquid.volume / 100) * tankHeight; - layer.style.height = `${height}px`; - - // Position from bottom, stacking up, starting at tankBottomOffset - layer.style.bottom = `${currentHeight + tankBottomOffset}px`; - currentHeight += height; - - // Add the label to the layer - layer.appendChild(label); - tankContainer.appendChild(layer); - }); - } - - 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 - ); - updateTank(); - updateLogbook(); - } - - // Event listeners - tankTopOffsetInput.addEventListener("change", updateSettings); - tankBottomOffsetInput.addEventListener("change", updateSettings); - - // Initial load - loadData(); - - - - - - - \ No newline at end of file + + + +