···
+
<meta charset="UTF-8" />
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
href="/favicon/favicon-96x96.png"
+
<link rel="icon" type="image/svg+xml" href="/favicon/favicon.svg" />
+
<link rel="shortcut icon" href="/favicon/favicon.ico" />
+
href="/favicon/apple-touch-icon.png"
+
<meta name="apple-mobile-web-app-title" content="Serif.blue" />
+
<link rel="manifest" href="/favicon/site.webmanifest" />
+
content="Serif.blue - Fancy projects by Kieran"
+
<meta name="color-scheme" content="light" />
+
<meta property="og:title" content="Serif.blue - pfp gradient builder" />
+
<meta property="og:type" content="website" />
+
<meta property="og:url" content="https://serif.blue/pfp-updates" />
+
<meta property="og:image" content="/og.png" />
+
<link rel="me" href="https://dunkirk.sh" />
+
<link rel="me" href="https://bsky.app/profile/dunkirk.sh" />
+
<link rel="me" href="https://github.com/taciturnaxolotl" />
+
<title>Sky Gradient Timeline Builder</title>
+
font-family: Arial, sans-serif;
+
grid-template-columns: 300px 1fr;
+
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+
overflow-wrap: break-word;
+
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+
border: 2px dashed #ddd;
+
border: 1px solid #ddd;
+
.timeline-tab.active:hover {
+
grid-template-columns: repeat(24, 1fr);
+
border: 1px solid #ddd;
+
border: 1px solid #ccc;
+
justify-content: center;
+
border: 2px solid #007bff;
+
box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
+
border: 1px solid #ddd;
+
transform: translateY(-1px);
+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+
grid-template-columns: repeat(24, 1fr);
+
border: 1px solid #ddd;
+
<h1>🌅 Sky Gradient Timeline Builder</h1>
+
<div class="container">
+
<div class="upload-section">
+
<label>Base Image:</label><br />
+
<input type="file" id="baseImage" accept="image/*" />
+
<label>Matte:</label><br />
+
<input type="file" id="matteImage" accept="image/*" />
+
<div class="status" id="uploadStatus"></div>
+
Click an hour slot to configure
+
<div class="slider-group">
+
<label>Background:</label>
+
<span class="value-display" id="bgValue">40%</span>
+
<div class="slider-group">
+
<label>Foreground:</label>
+
<span class="value-display" id="fgValue">8%</span>
+
onclick="applyToSelectedHour()"
+
class="btn btn-success"
+
style="width: 100%; margin-top: 10px"
+
<div class="config-export">
+
onclick="copyAllTimelines()"
+
class="btn btn-warning"
+
style="width: 100%; margin-bottom: 10px"
+
<label style="font-size: 12px; color: #666"
+
font-family: monospace;
+
border: 1px solid #ddd;
+
overflow-wrap: break-word;
+
onclick="copyToClipboard()"
+
class="btn btn-success"
+
style="width: 100%; margin-top: 5px"
+
<hr style="margin: 15px 0" />
+
<label style="font-size: 12px; color: #666"
+
>Paste Config (auto-imports):</label
+
placeholder="Paste timeline config here..."
+
font-family: monospace;
+
border: 1px solid #ddd;
+
<div class="timeline-area">
+
<div class="timeline-selector">
+
<h3>Weather Timelines</h3>
+
<div class="timeline-info">
+
Create different timelines for various weather
+
conditions. Each timeline defines how your profile
+
picture should look throughout the day.
+
<div class="new-timeline">
+
placeholder="Timeline name (e.g. sunny, rainy, cloudy)"
+
style="flex: 1; padding: 8px"
+
onclick="createTimeline()"
+
class="btn btn-success"
+
<div class="timeline-tabs" id="timelineTabs">
+
<div class="timeline-tab active" data-timeline="sunny">
+
<div style="margin: 10px 0">
+
onclick="duplicateTimeline()"
+
class="btn btn-secondary"
+
onclick="deleteTimeline()"
+
<span id="currentTimelineName">Sunny</span>
+
<div class="hour-labels">
+
<div class="hour-label">0</div>
+
<div class="hour-label">1</div>
+
<div class="hour-label">2</div>
+
<div class="hour-label">3</div>
+
<div class="hour-label">4</div>
+
<div class="hour-label">5</div>
+
<div class="hour-label">6</div>
+
<div class="hour-label">7</div>
+
<div class="hour-label">8</div>
+
<div class="hour-label">9</div>
+
<div class="hour-label">10</div>
+
<div class="hour-label">11</div>
+
<div class="hour-label">12</div>
+
<div class="hour-label">13</div>
+
<div class="hour-label">14</div>
+
<div class="hour-label">15</div>
+
<div class="hour-label">16</div>
+
<div class="hour-label">17</div>
+
<div class="hour-label">18</div>
+
<div class="hour-label">19</div>
+
<div class="hour-label">20</div>
+
<div class="hour-label">21</div>
+
<div class="hour-label">22</div>
+
<div class="hour-label">23</div>
+
<div class="timeline-grid" id="timelineGrid">
+
<!-- Hours 0-23 will be generated here -->
+
<div style="margin-top: 20px">
+
onclick="loadPreset('dawn', [5,6,7])"
+
class="btn btn-secondary"
+
onclick="loadPreset('morning', [8,9,10,11])"
+
class="btn btn-secondary"
+
onclick="loadPreset('afternoon', [12,13,14,15,16])"
+
class="btn btn-secondary"
+
onclick="loadPreset('sunset', [17,18,19])"
+
class="btn btn-secondary"
+
onclick="loadPreset('night', [20,21,22,23,0,1,2,3,4])"
+
class="btn btn-secondary"
+
border: 1px solid #ddd;
+
<h5 style="margin: 0 0 10px 0">Custom Range</h5>
+
<label style="font-size: 12px">From:</label>
+
style="width: 50px; padding: 4px"
+
<label style="font-size: 12px">To:</label>
+
style="width: 50px; padding: 4px"
+
onclick="applyCurrentToRange()"
+
class="btn btn-success"
+
style="font-size: 11px"
+
<div style="font-size: 11px; color: #666">
+
Uses current gradient & intensity settings for
+
the specified hour range
+
<div id="renderGallery" style="margin-top: 20px">
+
<h3>🖼️ Render Gallery</h3>
+
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+
justify-content: space-between;
+
<div id="galleryInfo" style="font-size: 14px; color: #666">
+
Ready to render timelines
+
<div style="display: flex; gap: 10px">
+
onclick="renderAllTimelines()"
+
class="btn btn-success"
+
onclick="downloadAllRendered()"
+
class="btn btn-primary"
+
<button onclick="clearGallery()" class="btn btn-danger">
+
style="margin-bottom: 15px; display: none"
+
transition: width 0.3s;
+
grid-template-columns: repeat(
+
border: 2px dashed #ddd;
+
justify-content: center;
+
id="galleryPlaceholder"
+
Click "Render All" to generate images and see them here
+
let currentTimeline = "sunny";
+
// Preset configurations
+
backgroundIntensity: 45,
+
foregroundIntensity: 8,
+
backgroundIntensity: 35,
+
foregroundIntensity: 5,
+
backgroundIntensity: 30,
+
foregroundIntensity: 5,
+
backgroundIntensity: 50,
+
foregroundIntensity: 10,
+
backgroundIntensity: 55,
+
foregroundIntensity: 12,
+
// Timeline data structure - initialize with proper presets
+
// Initialize the default sunny timeline with presets
+
for (let hour = 0; hour < 24; hour++) {
+
if (hour >= 5 && hour <= 7) {
+
timelines.sunny[hour] = { ...presets.dawn };
+
} else if (hour >= 8 && hour <= 11) {
+
timelines.sunny[hour] = { ...presets.morning };
+
} else if (hour >= 12 && hour <= 16) {
+
timelines.sunny[hour] = { ...presets.afternoon };
+
} else if (hour >= 17 && hour <= 19) {
+
timelines.sunny[hour] = { ...presets.sunset };
+
timelines.sunny[hour] = { ...presets.night };
+
// Default hour configuration
+
const defaultHourConfig = {
+
backgroundIntensity: 40,
+
foregroundIntensity: 8,
+
function initializeTimeline() {
+
const grid = document.getElementById("timelineGrid");
+
for (let hour = 0; hour < 24; hour++) {
+
const slot = document.createElement("div");
+
slot.className = "hour-slot";
+
slot.dataset.hour = hour;
+
slot.textContent = hour;
+
slot.onclick = () => selectHour(hour);
+
// Initialize with appropriate preset if not exists
+
if (!timelines[currentTimeline][hour]) {
+
timelines[currentTimeline][hour] =
+
getDefaultConfigForHour(hour);
+
grid.appendChild(slot);
+
updateTimelineDisplay();
+
function getDefaultConfigForHour(hour) {
+
// Apply appropriate preset based on hour
+
if (hour >= 5 && hour <= 7) {
+
return { ...presets.dawn };
+
} else if (hour >= 8 && hour <= 11) {
+
return { ...presets.morning };
+
} else if (hour >= 12 && hour <= 16) {
+
return { ...presets.afternoon };
+
} else if (hour >= 17 && hour <= 19) {
+
return { ...presets.sunset };
+
return { ...presets.night };
+
function selectHour(hour) {
+
document.querySelectorAll(".hour-slot").forEach((slot) => {
+
slot.classList.remove("selected");
+
.querySelector(`[data-hour="${hour}"]`)
+
.classList.add("selected");
+
// Load hour configuration
+
const config = timelines[currentTimeline][hour] || {
+
document.getElementById("color1").value = config.color1;
+
document.getElementById("color2").value = config.color2;
+
document.getElementById("bgIntensity").value =
+
config.backgroundIntensity;
+
document.getElementById("fgIntensity").value =
+
config.foregroundIntensity;
+
document.getElementById("bgValue").textContent =
+
config.backgroundIntensity + "%";
+
document.getElementById("fgValue").textContent =
+
config.foregroundIntensity + "%";
+
document.getElementById("hourInfo").textContent =
+
`Configuring hour ${hour} (${hour === 0 ? "12" : hour > 12 ? hour - 12 : hour}${hour < 12 ? "AM" : "PM"})`;
+
function applyToSelectedHour() {
+
color1: document.getElementById("color1").value,
+
color2: document.getElementById("color2").value,
+
backgroundIntensity: parseInt(
+
document.getElementById("bgIntensity").value,
+
foregroundIntensity: parseInt(
+
document.getElementById("fgIntensity").value,
+
timelines[currentTimeline][selectedHour] = config;
+
updateTimelineDisplay();
+
showStatus("Hour " + selectedHour + " updated!", "success");
+
function updateTimelineDisplay() {
+
document.querySelectorAll(".hour-slot").forEach((slot) => {
+
const hour = parseInt(slot.dataset.hour);
+
const config = timelines[currentTimeline][hour];
+
const gradient = `linear-gradient(135deg, ${config.color1}, ${config.color2})`;
+
slot.style.background = gradient;
+
slot.style.color = "white";
+
slot.style.textShadow = "1px 1px 2px rgba(0,0,0,0.8)";
+
slot.style.background = "#f8f9fa";
+
slot.style.color = "#666";
+
slot.style.textShadow = "none";
+
function createTimeline() {
+
.getElementById("newTimelineName")
+
showStatus("Please enter a timeline name!", "error");
+
showStatus("Timeline already exists!", "error");
+
// Create new timeline with proper presets for each hour
+
for (let hour = 0; hour < 24; hour++) {
+
timelines[name][hour] = getDefaultConfigForHour(hour);
+
const tab = document.createElement("div");
+
tab.className = "timeline-tab";
+
tab.dataset.timeline = name;
+
tab.textContent = name;
+
tab.onclick = () => switchTimeline(name);
+
document.getElementById("timelineTabs").appendChild(tab);
+
// Switch to new timeline
+
document.getElementById("newTimelineName").value = "";
+
`Timeline "${name}" created with default presets!`,
+
function switchTimeline(timelineName) {
+
currentTimeline = timelineName;
+
// Update tab selection
+
document.querySelectorAll(".timeline-tab").forEach((tab) => {
+
tab.classList.remove("active");
+
.querySelector(`[data-timeline="${timelineName}"]`)
+
.classList.add("active");
+
document.getElementById("currentTimelineName").textContent =
+
updateTimelineDisplay();
+
selectHour(selectedHour);
+
function duplicateTimeline() {
+
const newName = prompt(
+
`Enter name for copy of "${currentTimeline}":`,
+
if (!newName || timelines[newName]) {
+
"Invalid name or timeline already exists!",
+
// Deep copy current timeline
+
timelines[newName] = JSON.parse(
+
JSON.stringify(timelines[currentTimeline]),
+
const tab = document.createElement("div");
+
tab.className = "timeline-tab";
+
tab.dataset.timeline = newName;
+
tab.textContent = newName;
+
tab.onclick = () => switchTimeline(newName);
+
document.getElementById("timelineTabs").appendChild(tab);
+
switchTimeline(newName);
+
showStatus(`Timeline "${newName}" created as copy!`, "success");
+
function deleteTimeline() {
+
if (Object.keys(timelines).length <= 1) {
+
showStatus("Cannot delete the last timeline!", "error");
+
if (!confirm(`Delete timeline "${currentTimeline}"?`)) return;
+
delete timelines[currentTimeline];
+
.querySelector(`[data-timeline="${currentTimeline}"]`)
+
// Switch to first available timeline
+
const firstTimeline = Object.keys(timelines)[0];
+
switchTimeline(firstTimeline);
+
showStatus(`Timeline "${currentTimeline}" deleted!`, "success");
+
function loadPreset(presetName, hours) {
+
// Get current UI settings
+
color1: document.getElementById("color1").value,
+
color2: document.getElementById("color2").value,
+
backgroundIntensity: parseInt(
+
document.getElementById("bgIntensity").value,
+
foregroundIntensity: parseInt(
+
document.getElementById("fgIntensity").value,
+
// Apply current settings to specified hours
+
hours.forEach((hour) => {
+
timelines[currentTimeline][hour] = { ...config };
+
updateTimelineDisplay();
+
`Applied current settings to ${presetName} hours: ${hours.join(", ")}`,
+
function applyCurrentToRange() {
+
const start = parseInt(
+
document.getElementById("rangeStart").value,
+
const end = parseInt(document.getElementById("rangeEnd").value);
+
if (start < 0 || start > 23 || end < 0 || end > 23) {
+
showStatus("Hours must be between 0 and 23!", "error");
+
color1: document.getElementById("color1").value,
+
color2: document.getElementById("color2").value,
+
backgroundIntensity: parseInt(
+
document.getElementById("bgIntensity").value,
+
foregroundIntensity: parseInt(
+
document.getElementById("fgIntensity").value,
+
// Generate hour range (handle wrap-around)
+
for (let i = start; i <= end; i++) {
+
// Wrap around (e.g., 22 to 2 = 22,23,0,1,2)
+
for (let i = start; i <= 23; i++) {
+
for (let i = 0; i <= end; i++) {
+
// Apply config to all hours in range
+
hours.forEach((hour) => {
+
timelines[currentTimeline][hour] = { ...config };
+
updateTimelineDisplay();
+
`Applied current settings to hours: ${hours.join(", ")}`,
+
function copyAllTimelines() {
+
created: new Date().toISOString(),
+
tool: "Sky Gradient Timeline Builder",
+
const configText = JSON.stringify(config, null, 2);
+
document.getElementById("configOutput").value = configText;
+
showStatus("All timelines ready to copy!", "success");
+
function renderCurrentHour() {
+
if (!baseImg || !matteImg) {
+
showStatus("Please upload both images first!", "error");
+
const color1 = document.getElementById("color1").value;
+
const color2 = document.getElementById("color2").value;
+
const bgIntensity = parseInt(
+
document.getElementById("bgIntensity").value,
+
const fgIntensity = parseInt(
+
document.getElementById("fgIntensity").value,
+
// Use the full-size render canvas
+
const canvas = document.getElementById("renderCanvas");
+
const ctx = canvas.getContext("2d");
+
// Set canvas size to match base image
+
canvas.width = baseImg.width;
+
canvas.height = baseImg.height;
+
const gradient = createGradient(
+
ctx.clearRect(0, 0, canvas.width, canvas.height);
+
// Create background layer
+
const backgroundLayer = blendImages(
+
ctx.drawImage(backgroundLayer, 0, 0);
+
// Create and apply foreground layer
+
if (fgIntensity === 0) {
+
foregroundLayer = baseImg;
+
foregroundLayer = blendImages(
+
const maskedForeground = document.createElement("canvas");
+
maskedForeground.width = canvas.width;
+
maskedForeground.height = canvas.height;
+
const maskCtx = maskedForeground.getContext("2d");
+
maskCtx.drawImage(foregroundLayer, 0, 0);
+
// Create proper alpha mask
+
const matteDataCanvas = document.createElement("canvas");
+
matteDataCanvas.width = matteImg.width;
+
matteDataCanvas.height = matteImg.height;
+
const matteDataCtx = matteDataCanvas.getContext("2d");
+
matteDataCtx.drawImage(matteImg, 0, 0);
+
const imageData = matteDataCtx.getImageData(
+
const data = imageData.data;
+
for (let i = 0; i < data.length; i += 4) {
+
(data[i] + data[i + 1] + data[i + 2]) / 3;
+
if (brightness > 128) {
+
matteDataCtx.putImageData(imageData, 0, 0);
+
maskCtx.globalCompositeOperation = "destination-in";
+
ctx.globalCompositeOperation = "source-over";
+
ctx.drawImage(maskedForeground, 0, 0);
+
// Enable download button
+
document.getElementById("downloadBtn").disabled = false;
+
`Hour ${selectedHour} rendered at full resolution!`,
+
function downloadRendered() {
+
const canvas = document.getElementById("renderCanvas");
+
if (canvas.width === 400 && canvas.height === 400) {
+
showStatus("Please render first!", "error");
+
const link = document.createElement("a");
+
const timelineName = currentTimeline;
+
const hour = selectedHour.toString().padStart(2, "0");
+
link.download = `${timelineName}_hour_${hour}.jpg`;
+
// Convert to JPEG for smaller file size
+
link.href = canvas.toDataURL("image/jpeg", 0.95);
+
showStatus(`Downloaded: ${link.download}`, "success");
+
// Auto-import on paste
+
.getElementById("bulkConfigInput")
+
.addEventListener("paste", function (e) {
+
// Small delay to let the paste complete
+
const configText = this.value.trim();
+
if (configText && configText.startsWith("{")) {
+
importConfigToTimelines();
+
let renderedImages = {};
+
function renderAllTimelines() {
+
if (!baseImg || !matteImg) {
+
showStatus("Please upload both images first!", "error");
+
if (Object.keys(timelines).length === 0) {
+
showStatus("No timelines to render!", "error");
+
// Clear previous renders
+
document.getElementById("bulkProgress").style.display = "block";
+
document.getElementById("downloadAllBtn").disabled = true;
+
document.getElementById("galleryContent").innerHTML = "";
+
// Count total hours to render
+
const timelineNames = Object.keys(timelines);
+
timelineNames.forEach((timelineName) => {
+
const hours = Object.keys(timelines[timelineName]);
+
totalHours += hours.length;
+
updateProgress(0, totalHours);
+
updateGalleryInfo(0, totalHours, timelineNames.length);
+
`Rendering all timelines: ${timelineNames.length} timelines, ${totalHours} hours total`,
+
// Render all timelines sequentially
+
function renderNextTimeline() {
+
if (timelineIndex >= timelineNames.length) {
+
document.getElementById("downloadAllBtn").disabled =
+
`Render complete! ${totalHours} images rendered.`,
+
const timelineName = timelineNames[timelineIndex];
+
const timelineConfig = timelines[timelineName];
+
const hours = Object.keys(timelineConfig).sort(
+
(a, b) => parseInt(a) - parseInt(b),
+
renderedImages[timelineName] = {};
+
function renderNextHour() {
+
if (hourIndex >= hours.length) {
+
// Timeline done, move to next
+
setTimeout(renderNextTimeline, 10);
+
const hour = hours[hourIndex];
+
const hourConfig = timelineConfig[hour];
+
const imageData = renderHourToDataURL(hourConfig);
+
renderedImages[timelineName][hour] = imageData;
+
updateProgress(currentHour, totalHours);
+
addToGallery(timelineName, hour, imageData);
+
// Small delay to keep UI responsive
+
setTimeout(renderNextHour, 100);
+
function addToGallery(timelineName, hour, imageDataURL) {
+
const gallery = document.getElementById("galleryContent");
+
// Remove placeholder if it exists
+
document.getElementById("galleryPlaceholder");
+
// Reset gallery styles
+
gallery.style.minHeight = "auto";
+
gallery.style.border = "none";
+
gallery.style.alignItems = "stretch";
+
gallery.style.justifyContent = "stretch";
+
const item = document.createElement("div");
+
border: 1px solid #ddd;
+
transition: transform 0.2s, box-shadow 0.2s;
+
const hourPadded = hour.toString().padStart(2, "0");
+
<img src="${imageDataURL}" style="width: 100%; height: 80px; object-fit: cover;">
+
<div style="padding: 8px; text-align: center;">
+
<div style="font-size: 11px; font-weight: bold; color: #333;">${timelineName}</div>
+
<div style="font-size: 10px; color: #666;">Hour ${hourPadded}</div>
+
item.addEventListener("mouseenter", () => {
+
item.style.transform = "scale(1.05)";
+
item.style.boxShadow = "0 4px 15px rgba(0,0,0,0.2)";
+
item.addEventListener("mouseleave", () => {
+
item.style.transform = "scale(1)";
+
item.style.boxShadow = "none";
+
// Click to download individual image
+
item.addEventListener("click", () => {
+
const link = document.createElement("a");
+
link.href = imageDataURL;
+
link.download = `${timelineName}_hour_${hourPadded}.jpg`;
+
`Downloaded ${timelineName} hour ${hourPadded}`,
+
gallery.appendChild(item);
+
function updateGalleryInfo(current, total, timelineCount) {
+
const info = document.getElementById("galleryInfo");
+
info.textContent = `${current}/${total} images rendered across ${timelineCount} timeline(s)`;
+
function clearGallery() {
+
const gallery = document.getElementById("galleryContent");
+
gallery.innerHTML = "";
+
// Reset gallery to placeholder state
+
gallery.style.minHeight = "100px";
+
gallery.style.border = "2px dashed #ddd";
+
gallery.style.alignItems = "center";
+
gallery.style.justifyContent = "center";
+
gallery.style.padding = "20px";
+
// Add placeholder back
+
const placeholder = document.createElement("div");
+
placeholder.id = "galleryPlaceholder";
+
placeholder.style.cssText =
+
"grid-column: 1 / -1; text-align: center; color: #999; font-style: italic;";
+
placeholder.textContent =
+
'Click "Render All" to generate images and see them here';
+
gallery.appendChild(placeholder);
+
document.getElementById("downloadAllBtn").disabled = true;
+
document.getElementById("galleryInfo").textContent =
+
"Ready to render timelines";
+
showStatus("Gallery cleared", "success");
+
function renderAllFromConfig() {
+
if (!baseImg || !matteImg) {
+
showStatus("Please upload both images first!", "error");
+
const configText = document
+
.getElementById("bulkConfigInput")
+
showStatus("Please paste a config to render!", "error");
+
config = JSON.parse(configText);
+
showStatus("Invalid JSON config!", "error");
+
// Validate config structure
+
if (!config.timelines) {
+
'Config must have "timelines" property!',
+
// Clear previous renders
+
document.getElementById("bulkProgress").style.display = "block";
+
document.getElementById("downloadAllBtn").disabled = true;
+
// Count total hours to render
+
const timelines = Object.keys(config.timelines);
+
timelines.forEach((timeline) => {
+
const hours = Object.keys(config.timelines[timeline]);
+
totalHours += hours.length;
+
updateProgress(0, totalHours);
+
`Starting bulk render: ${timelines.length} timelines, ${totalHours} hours total`,
+
// Render all timelines sequentially with small delays for UI responsiveness
+
function renderNextTimeline() {
+
if (timelineIndex >= timelines.length) {
+
document.getElementById("downloadAllBtn").disabled =
+
`Bulk render complete! ${totalHours} images rendered.`,
+
const timelineName = timelines[timelineIndex];
+
const timelineConfig = config.timelines[timelineName];
+
const hours = Object.keys(timelineConfig);
+
renderedImages[timelineName] = {};
+
function renderNextHour() {
+
if (hourIndex >= hours.length) {
+
// Timeline done, move to next
+
setTimeout(renderNextTimeline, 10);
+
const hour = hours[hourIndex];
+
const hourConfig = timelineConfig[hour];
+
const imageData = renderHourToDataURL(hourConfig);
+
renderedImages[timelineName][hour] = imageData;
+
updateProgress(currentHour, totalHours);
+
// Small delay to keep UI responsive
+
setTimeout(renderNextHour, 50);
+
function renderHourToDataURL(config) {
+
// Create a temporary canvas for this render
+
const canvas = document.createElement("canvas");
+
const ctx = canvas.getContext("2d");
+
// Set canvas size to match base image
+
canvas.width = baseImg.width;
+
canvas.height = baseImg.height;
+
const gradient = createGradient(
+
ctx.clearRect(0, 0, canvas.width, canvas.height);
+
// Create background layer
+
const backgroundLayer = blendImages(
+
config.backgroundIntensity,
+
ctx.drawImage(backgroundLayer, 0, 0);
+
// Create and apply foreground layer
+
if (config.foregroundIntensity === 0) {
+
foregroundLayer = baseImg;
+
foregroundLayer = blendImages(
+
config.foregroundIntensity,
+
const maskedForeground = document.createElement("canvas");
+
maskedForeground.width = canvas.width;
+
maskedForeground.height = canvas.height;
+
const maskCtx = maskedForeground.getContext("2d");
+
maskCtx.drawImage(foregroundLayer, 0, 0);
+
// Create proper alpha mask
+
const matteDataCanvas = document.createElement("canvas");
+
matteDataCanvas.width = matteImg.width;
+
matteDataCanvas.height = matteImg.height;
+
const matteDataCtx = matteDataCanvas.getContext("2d");
+
matteDataCtx.drawImage(matteImg, 0, 0);
+
const imageData = matteDataCtx.getImageData(
+
const data = imageData.data;
+
for (let i = 0; i < data.length; i += 4) {
+
(data[i] + data[i + 1] + data[i + 2]) / 3;
+
if (brightness > 128) {
+
matteDataCtx.putImageData(imageData, 0, 0);
+
maskCtx.globalCompositeOperation = "destination-in";
+
ctx.globalCompositeOperation = "source-over";
+
ctx.drawImage(maskedForeground, 0, 0);
+
// Return as JPEG data URL
+
return canvas.toDataURL("image/jpeg", 0.95);
+
console.error("Failed to render hour:", e);
+
function updateProgress(current, total) {
+
const percentage = total > 0 ? (current / total) * 100 : 0;
+
document.getElementById("progressBar").style.width =
+
document.getElementById("progressText").textContent =
+
async function downloadAllRendered() {
+
if (Object.keys(renderedImages).length === 0) {
+
showStatus("No rendered images to download!", "error");
+
showStatus("Preparing download...", "success");
+
// Simple approach: create individual downloads if ZIP fails
+
// Try to load JSZip if not available
+
if (typeof JSZip === "undefined") {
+
showStatus("Loading ZIP library...", "success");
+
await createZipDownload();
+
console.error("ZIP download failed:", e);
+
"ZIP failed, downloading individual files...",
+
downloadIndividualFiles();
+
return new Promise((resolve, reject) => {
+
const script = document.createElement("script");
+
"https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js";
+
script.onload = resolve;
+
script.onerror = reject;
+
document.head.appendChild(script);
+
async function createZipDownload() {
+
const zip = new JSZip();
+
// First, fetch and add the shell script to the root
+
showStatus("Including shell script...", "success");
+
// Try local copy first, then relative path, then original source as fallback
+
const scriptUrls = ["/pfp-updates/bsky-pfp-updates.sh"];
+
let scriptContent = null;
+
for (const url of scriptUrls) {
+
const scriptResponse = await fetch(url);
+
if (scriptResponse.ok) {
+
scriptContent = await scriptResponse.text();
+
`Failed to fetch from ${url}:`,
+
// Continue to next URL
+
zip.file("bsky-pfp-updates.sh", scriptContent);
+
"Could not load script from any source",
+
"Warning: Could not include shell script, continuing without it...",
+
console.error("Script loading error:", error);
+
console.error("Failed to fetch shell script:", e);
+
"Warning: Could not fetch shell script, continuing without it...",
+
// Add the timeline config to the root
+
created: new Date().toISOString(),
+
tool: "Sky Gradient Timeline Builder",
+
const configText = JSON.stringify(config, null, 2);
+
zip.file("timeline_config.json", configText);
+
// Create rendered_timelines folder and add all images
+
const renderedFolder = zip.folder("rendered_timelines");
+
for (const [timelineName, timelineImages] of Object.entries(
+
const timelineFolder = renderedFolder.folder(timelineName);
+
for (const [hour, imageDataURL] of Object.entries(
+
// Convert data URL to binary data
+
const base64Data = imageDataURL.split(",")[1];
+
const binaryData = atob(base64Data);
+
const bytes = new Uint8Array(binaryData.length);
+
for (let i = 0; i < binaryData.length; i++) {
+
bytes[i] = binaryData.charCodeAt(i);
+
const hourPadded = hour.padStart(2, "0");
+
timelineFolder.file(`hour_${hourPadded}.jpg`, bytes);
+
// Generate and download ZIP
+
showStatus("Creating ZIP file...", "success");
+
const content = await zip.generateAsync({
+
compression: "DEFLATE",
+
compressionOptions: { level: 6 },
+
// Create download link
+
const link = document.createElement("a");
+
const url = URL.createObjectURL(content);
+
link.download = "bluesky-pfp-updates.zip";
+
document.body.appendChild(link);
+
document.body.removeChild(link);
+
setTimeout(() => URL.revokeObjectURL(url), 1000);
+
showStatus("ZIP file downloaded with shell script!", "success");
+
function importConfigToTimelines() {
+
const configText = document
+
.getElementById("bulkConfigInput")
+
showStatus("Please paste a config to import!", "error");
+
config = JSON.parse(configText);
+
showStatus("Invalid JSON config!", "error");
+
// Validate config structure
+
if (!config.timelines) {
+
'Config must have "timelines" property!',
+
// Clear existing timelines (except keep one if empty)
+
const wasEmpty = Object.keys(timelines).length === 0;
+
document.getElementById("timelineTabs").innerHTML = "";
+
// Import all timelines from config
+
const importedTimelines = Object.keys(config.timelines);
+
for (const [timelineName, timelineConfig] of Object.entries(
+
// Validate timeline structure
+
if (typeof timelineConfig !== "object") {
+
`Invalid timeline structure for "${timelineName}"`,
+
// Convert timeline config to our format
+
timelines[timelineName] = {};
+
for (const [hour, hourConfig] of Object.entries(
+
const hourNum = parseInt(hour);
+
timelines[timelineName][hourNum] = {
+
color1: hourConfig.color1,
+
color2: hourConfig.color2,
+
hourConfig.backgroundIntensity || 40,
+
hourConfig.foregroundIntensity || 8,
+
// Create tab for this timeline
+
const tab = document.createElement("div");
+
tab.className = "timeline-tab";
+
tab.dataset.timeline = timelineName;
+
tab.textContent = timelineName;
+
tab.onclick = () => switchTimeline(timelineName);
+
document.getElementById("timelineTabs").appendChild(tab);
+
if (importedCount === 0) {
+
showStatus("No valid timelines found in config!", "error");
+
// Restore default if nothing imported
+
for (let hour = 0; hour < 24; hour++) {
+
timelines.sunny[hour] = getDefaultConfigForHour(hour);
+
const tab = document.createElement("div");
+
tab.className = "timeline-tab active";
+
tab.dataset.timeline = "sunny";
+
tab.textContent = "sunny";
+
tab.onclick = () => switchTimeline("sunny");
+
document.getElementById("timelineTabs").appendChild(tab);
+
currentTimeline = "sunny";
+
// Switch to first imported timeline
+
const firstTimeline = importedTimelines[0];
+
currentTimeline = firstTimeline;
+
.querySelector(`[data-timeline="${firstTimeline}"]`)
+
.classList.add("active");
+
document.getElementById("currentTimelineName").textContent =
+
`Successfully imported ${importedCount} timeline(s): ${importedTimelines.join(", ")}`,
+
// Clear the config input
+
document.getElementById("bulkConfigInput").value = "";
+
function downloadIndividualFiles() {
+
const totalFiles = Object.values(renderedImages).reduce(
+
(sum, timeline) => sum + Object.keys(timeline).length,
+
for (const [timelineName, timelineImages] of Object.entries(
+
for (const [hour, imageDataURL] of Object.entries(
+
const hourPadded = hour.padStart(2, "0");
+
const filename = `${timelineName}_hour_${hourPadded}.jpg`;
+
// Create download link
+
const link = document.createElement("a");
+
link.href = imageDataURL;
+
link.download = filename;
+
// Trigger download with small delay
+
document.body.appendChild(link);
+
document.body.removeChild(link);
+
if (downloadCount === totalFiles) {
+
`Downloaded ${totalFiles} individual files!`,
+
}, downloadCount * 100); // 100ms delay between downloads
+
`Starting ${totalFiles} individual downloads...`,
+
function copyToClipboard() {
+
const textarea = document.getElementById("configOutput");
+
if (!textarea.value.trim()) {
+
"Nothing to copy! Generate a config first.",
+
document.execCommand("copy");
+
// Try the modern API as fallback
+
if (navigator.clipboard) {
+
.writeText(textarea.value)
+
"Config copied to clipboard!",
+
"Please manually copy the text",
+
"Config selected - press Ctrl+C to copy",
+
function showStatus(message, type) {
+
const status = document.getElementById("uploadStatus");
+
status.textContent = message;
+
status.className = `status ${type}`;
+
setTimeout(() => (status.style.display = "none"), 3000);
+
// Image upload handlers
+
.getElementById("baseImage")
+
.addEventListener("change", function (e) {
+
const file = e.target.files[0];
+
const reader = new FileReader();
+
reader.onload = function (e) {
+
const img = new Image();
+
img.onload = function () {
+
showStatus("Base image loaded!", "success");
+
img.src = e.target.result;
+
reader.readAsDataURL(file);
+
.getElementById("matteImage")
+
.addEventListener("change", function (e) {
+
const file = e.target.files[0];
+
const reader = new FileReader();
+
reader.onload = function (e) {
+
const img = new Image();
+
img.onload = function () {
+
showStatus("Matte loaded!", "success");
+
img.src = e.target.result;
+
reader.readAsDataURL(file);
+
.getElementById("bgIntensity")
+
.addEventListener("input", function () {
+
document.getElementById("bgValue").textContent =
+
.getElementById("fgIntensity")
+
.addEventListener("input", function () {
+
document.getElementById("fgValue").textContent =
+
.getElementById("color1")
+
.addEventListener("change", updatePreview);
+
.getElementById("color2")
+
.addEventListener("change", updatePreview);
+
function updatePreview() {
+
if (!baseImg || !matteImg) return;
+
const canvas = document.getElementById("previewCanvas");
+
const ctx = canvas.getContext("2d");
+
const color1 = document.getElementById("color1").value;
+
const color2 = document.getElementById("color2").value;
+
const bgIntensity = parseInt(
+
document.getElementById("bgIntensity").value,
+
const fgIntensity = parseInt(
+
document.getElementById("fgIntensity").value,
+
const gradient = createGradient(
+
ctx.clearRect(0, 0, canvas.width, canvas.height);
+
// Create background layer
+
const backgroundLayer = blendImages(
+
// Create and apply foreground layer
+
if (fgIntensity === 0) {
+
foregroundLayer = baseImg;
+
foregroundLayer = blendImages(
+
const maskedForeground = document.createElement("canvas");
+
maskedForeground.width = canvas.width;
+
maskedForeground.height = canvas.height;
+
const maskCtx = maskedForeground.getContext("2d");
+
// Create proper alpha mask
+
const matteDataCanvas = document.createElement("canvas");
+
matteDataCanvas.width = matteImg.width;
+
matteDataCanvas.height = matteImg.height;
+
const matteDataCtx = matteDataCanvas.getContext("2d");
+
matteDataCtx.drawImage(matteImg, 0, 0);
+
const imageData = matteDataCtx.getImageData(
+
const data = imageData.data;
+
for (let i = 0; i < data.length; i += 4) {
+
(data[i] + data[i + 1] + data[i + 2]) / 3;
+
if (brightness > 128) {
+
matteDataCtx.putImageData(imageData, 0, 0);
+
maskCtx.globalCompositeOperation = "destination-in";
+
ctx.globalCompositeOperation = "source-over";
+
ctx.drawImage(maskedForeground, 0, 0);
+
function createGradient(width, height, color1, color2) {
+
const gradCanvas = document.createElement("canvas");
+
gradCanvas.width = width;
+
gradCanvas.height = height;
+
const gradCtx = gradCanvas.getContext("2d");
+
const gradient = gradCtx.createLinearGradient(0, 0, 0, height);
+
gradient.addColorStop(0, color1);
+
gradient.addColorStop(1, color2);
+
gradCtx.fillStyle = gradient;
+
gradCtx.fillRect(0, 0, width, height);
+
function blendImages(base, overlay, intensity) {
+
const blendCanvas = document.createElement("canvas");
+
blendCanvas.width = base.width;
+
blendCanvas.height = base.height;
+
const blendCtx = blendCanvas.getContext("2d");
+
blendCtx.drawImage(base, 0, 0);
+
blendCtx.globalCompositeOperation = "overlay";
+
blendCtx.globalAlpha = intensity / 100;
+
blendCtx.drawImage(overlay, 0, 0, base.width, base.height);
dunkirk.sh