This commit is contained in:
Kenwood 2025-09-19 20:33:59 -04:00
parent 77c189e874
commit 87f4640400
3 changed files with 252 additions and 203 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 928 KiB

View File

@ -7,11 +7,11 @@
"url": "https://www.f-list.net/c/alice%20prairie" "url": "https://www.f-list.net/c/alice%20prairie"
}, },
{ {
"name": "Orchid", "name": "Zae & Nil",
"volume": 106, "volume": 115,
"color": "#18632a", "color": "#6C2C2A",
"url": "https://www.f-list.net/c/orchid", "url": "https://www.f-list.net/c/Zae",
"image": "characters/orchid.png" "image": "characters/Makanix_Internal.png"
} }
], ],
"settings": { "settings": {
@ -53,6 +53,19 @@
{ {
"date": 1752559908, "date": 1752559908,
"text": "Won a bet with a beast of a anjanath, turns out he fit after all~" "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~"
} }
] ]
} }

View File

@ -1,47 +1,74 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head>
<head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Cumtanks.snowusne.net</title> <title>Cumtanks.snowsune.net</title>
<!-- Open Graph / Discord --> <!-- Open Graph / Discord -->
<meta property="og:type" content="website" /> <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" /> <meta property="og:image" content="/preview.png" />
<!-- Twitter --> <!-- Twitter -->
<meta name="twitter:card" content="summary_large_image" /> <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" /> <meta name="twitter:image" content="/preview.png" />
<link rel="stylesheet" href="styles.css" /> <link rel="stylesheet" href="styles.css" />
<script src="https://cdn.jsdelivr.net/npm/timesago@1"></script> <script src="https://cdn.jsdelivr.net/npm/timesago@1"></script>
</head> </head>
<body> <body>
<img src="preview.png" alt="Preview" style="display:none;" aria-hidden="true" /> <img
src="preview.png"
alt="Preview"
style="display: none"
aria-hidden="true"
/>
<div class="container"> <div class="container">
<div class="tank-container"> <div class="tank-container">
<img src="Alice_close_up_sheath_background.png" alt="Tank Background Back" <img
class="background-image background-image-back" /> src="Alice_close_up_sheath_background.png"
<img src="Alice_close_up_sheath_shot.png" alt="Tank Background Foreground" alt="Tank Background Back"
class="background-image background-image-fore" /> class="background-image background-image-back"
/>
<img
src="Alice_close_up_sheath_shot.png"
alt="Tank Background Foreground"
class="background-image background-image-fore"
/>
<!-- Liquid layers will be inserted here by JavaScript! --> <!-- Liquid layers will be inserted here by JavaScript! -->
<div class="artist-link"> <div class="artist-link">
<a href="https://x.com/Raven4Seth" target="_blank" rel="noopener noreferrer">Art by SethRaven4</a> <a
href="https://x.com/Raven4Seth"
target="_blank"
rel="noopener noreferrer"
>Art by SethRaven4</a
>
</div> </div>
</div> </div>
<div class="settings"> <div class="settings">
<h2>Settings</h2> <h2>Settings</h2>
<label> <label>
Tank Top Offset (px): Tank Top Offset (px):
<input type="number" id="tankTopOffset" value="22" min="0" max="800" /> <input
type="number"
id="tankTopOffset"
value="22"
min="0"
max="800"
/>
</label> </label>
<label> <label>
Tank Bottom Offset (px): Tank Bottom Offset (px):
<input type="number" id="tankBottomOffset" value="40" min="0" max="800" /> <input
type="number"
id="tankBottomOffset"
value="40"
min="0"
max="800"
/>
</label> </label>
</div> </div>
<div class="logbook"> <div class="logbook">
@ -90,9 +117,9 @@
// Set background: image if present, else color // Set background: image if present, else color
if (liquid.image) { if (liquid.image) {
layer.style.backgroundImage = `url(${liquid.image})`; layer.style.backgroundImage = `url(${liquid.image})`;
layer.style.backgroundSize = "660px"; layer.style.backgroundSize = "800px";
layer.style.backgroundRepeat = "no-repeat"; layer.style.backgroundRepeat = "no-repeat";
layer.style.backgroundPosition = "right 110px top 0px"; layer.style.backgroundPosition = "right 50px top 0px";
layer.style.backgroundColor = liquid.color; layer.style.backgroundColor = liquid.color;
} else { } else {
layer.style.backgroundImage = ""; layer.style.backgroundImage = "";
@ -144,9 +171,12 @@
logList.innerHTML = ""; logList.innerHTML = "";
if (tankData.logs) { if (tankData.logs) {
const now = Date.now() / 1000; const now = Date.now() / 1000;
tankData.logs.forEach(log => { tankData.logs.forEach((log) => {
const li = document.createElement("li"); const li = document.createElement("li");
let epoch = typeof log.date === 'number' ? log.date : Date.parse(log.date) / 1000; let epoch =
typeof log.date === "number"
? log.date
: Date.parse(log.date) / 1000;
const ageHours = (now - epoch) / 3600; const ageHours = (now - epoch) / 3600;
// Color interpolation: 0h = #fff, 8h = #888 // Color interpolation: 0h = #fff, 8h = #888
@ -170,11 +200,13 @@
li.classList.add("log-shimmer"); li.classList.add("log-shimmer");
} }
li.textContent = `${window.timesago ? timesago(epoch * 1000) : log.date} — ${log.text}`; li.textContent = `${
window.timesago ? timesago(epoch * 1000) : log.date
} — ${log.text}`;
logList.appendChild(li); logList.appendChild(li);
}); });
// Auto-scroll to bottom // Auto-scroll to bottom
const logbookDiv = document.querySelector('.logbook'); const logbookDiv = document.querySelector(".logbook");
if (logbookDiv) logbookDiv.scrollTop = logbookDiv.scrollHeight; if (logbookDiv) logbookDiv.scrollTop = logbookDiv.scrollHeight;
} }
} }
@ -203,12 +235,16 @@
<footer class="tiny-footer"> <footer class="tiny-footer">
<span> <span>
Art by Art by
<a href="https://x.com/Raven4Seth" target="_blank" rel="noopener noreferrer">SethRave4</a> <a
href="https://x.com/Raven4Seth"
target="_blank"
rel="noopener noreferrer"
>SethRave4</a
>
&bull; Message &bull; Message
<a href="mailto:vixi@snowsune.net">vixi@snowsune.net</a> for <a href="mailto:vixi@snowsune.net">vixi@snowsune.net</a> for
questions/comments/anything! questions/comments/anything!
</span> </span>
</footer> </footer>
</body> </body>
</html> </html>