From f495711b01256f41229e56218d2efa4de6127306 Mon Sep 17 00:00:00 2001 From: Snowsune Date: Fri, 26 Sep 2025 12:44:07 -0400 Subject: [PATCH] Format and add home link --- www/index.html | 443 +++++++++++++++++++++++-------------------------- www/styles.css | 27 +++ 2 files changed, 236 insertions(+), 234 deletions(-) diff --git a/www/index.html b/www/index.html index 20c3ec0..80e4f7c 100644 --- a/www/index.html +++ b/www/index.html @@ -1,250 +1,225 @@ - - - - Cumtanks.snowsune.net - - - - + + + + Cumtanks.snowsune.net - - - - + + + + - - - + + + + - - -
-
- Tank Background Back - Tank Background Foreground - -
- Art by SethRaven4 -
-
-
-

Settings

- - -
-
-
    + + + + + + +
    + + Home + Back to snowsune.net! + +
    +
    +
    + Tank Background Back + Tank Background Foreground + +
    + Art by SethRaven4
    +
    +

    Settings

    + + +
    +
    +
      +
      +
      - + // Clear existing liquid layers + const existingLayers = document.querySelectorAll(".liquid-layer"); + existingLayers.forEach((layer) => layer.remove()); - - - - + 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 = "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"); + 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 diff --git a/www/styles.css b/www/styles.css index 8db344a..b5a52f2 100644 --- a/www/styles.css +++ b/www/styles.css @@ -246,3 +246,30 @@ h1 { 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); +}