comparing 880353f46da3e49b30075801e002390f1b0d48d8 and main on dunkirk.sh/serif

.github/images/preview.webp

This is a binary file and will not be displayed.

.github/images/settings.webp

This is a binary file and will not be displayed.

+25

LICENSE.md

···

       1
       1
       +
       The MIT License (MIT)

     

       2
       2
       +
       =====================

     

       3
       3
       +
       

     

       4
       4
       +
       Copyright © `2025` `Kieran Klukas`

     

       5
       5
       +
       

     

       6
       6
       +
       Permission is hereby granted, free of charge, to any person

     

       7
       7
       +
       obtaining a copy of this software and associated documentation

     

       8
       8
       +
       files (the “Software”), to deal in the Software without

     

       9
       9
       +
       restriction, including without limitation the rights to use,

     

       10
       10
       +
       copy, modify, merge, publish, distribute, sublicense, and/or sell

     

       11
       11
       +
       copies of the Software, and to permit persons to whom the

     

       12
       12
       +
       Software is furnished to do so, subject to the following

     

       13
       13
       +
       conditions:

     

       14
       14
       +
       

     

       15
       15
       +
       The above copyright notice and this permission notice shall be

     

       16
       16
       +
       included in all copies or substantial portions of the Software.

     

       17
       17
       +
       

     

       18
       18
       +
       THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND,

     

       19
       19
       +
       EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES

     

       20
       20
       +
       OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND

     

       21
       21
       +
       NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT

     

       22
       22
       +
       HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,

     

       23
       23
       +
       WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING

     

       24
       24
       +
       FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR

     

       25
       25
       +
       OTHER DEALINGS IN THE SOFTWARE.

+44

README.md

···

       1
       1
       +
       # Bluesky Community Verifications

     

       2
       2
       +
       

     

       3
       3
       +
       <img src="https://cachet.dunkirk.sh/emojis/bluesky/r" height="175" align="right" alt="Bluesky logo">

     

       4
       4
       +
       

     

       5
       5
       +
       > ### Verify profiles you trust 💙

     

       6
       6
       +
       >

     

       7
       7
       +
       > A userscript that lets you appoint your own trusted verifiers and display verifications from their `app.bsky.graph.verification` collection.

     

       8
       8
       +
       >

     

       9
       9
       +
       > ⚠️ **extremely rapidly iterating so nothing is stable** - so far everything is still backwards compatible though!

     

       10
       10
       +
       

     

       11
       11
       +
       ## 🏗️ Usage

     

       12
       12
       +
       

     

       13
       13
       +
       By default we have `bsky.app`, `nytimes.com`, `wired.com`, and `theathletic.bsky.social` as trusted verifiers. You can add more by going to bluesky settings and clicking on "Community Verifications"

     

       14
       14
       +
       

     

       15
       15
       +
       That will open a modal where you can add more trusted verifiers and modify how the verification badge looks.

     

       16
       16
       +
       

     

       17
       17
       +
       ![preview](https://raw.githubusercontent.com/taciturnaxolotl/serif/main/.github/images/preview.webp)

     

       18
       18
       +
       

     

       19
       19
       +
       ## 🔧 Installation

     

       20
       20
       +
       

     

       21
       21
       +
       1. Install a userscript manager for your browser:

     

       22
       22
       +
         - Chrome: [Tampermonkey](https://chrome.google.com/webstore/detail/tampermonkey/dhdgffkkebhmkfjojejmpbldmpobfkfo)

     

       23
       23
       +
         - Firefox: [Tampermonkey](https://addons.mozilla.org/en-US/firefox/addon/tampermonkey/)

     

       24
       24
       +
         - Safari: [Tampermonkey](https://apps.apple.com/app/tampermonkey/id1482490089)

     

       25
       25
       +
         - Edge: [Tampermonkey](https://microsoftedge.microsoft.com/addons/detail/tampermonkey/iikmkjmpaadaobahmlepeloendndfphd)

     

       26
       26
       +
         - Opera: [Tampermonkey](https://addons.opera.com/en/extensions/details/tampermonkey-beta/)

     

       27
       27
       +
       

     

       28
       28
       +
       2. Click [here](https://github.com/taciturnaxolotl/serif/raw/refs/heads/main/bluesky-community-verifications.user.js) to install the script.

     

       29
       29
       +
       

     

       30
       30
       +
       ## 📜 License

     

       31
       31
       +
       

     

       32
       32
       +
       The code is licensed under `AGPL 3.0`! That means AGPL 3.0 requires publishing source code changes when the software is used over a network, guaranteeing that users can access the code. All artwork and images are copyright reserved but may be used with proper attribution to the authors.

     

       33
       33
       +
       

     

       34
       34
       +
       <p align="center">

     

       35
       35
       +
       	<img src="https://raw.githubusercontent.com/taciturnaxolotl/carriage/master/.github/images/line-break.svg" />

     

       36
       36
       +
       </p>

     

       37
       37
       +
       

     

       38
       38
       +
       <p align="center">

     

       39
       39
       +
       	<i><code>&copy 2025-present <a href="https://github.com/taciturnaxolotl">Kieran Klukas</a></code></i>

     

       40
       40
       +
       </p>

     

       41
       41
       +
       

     

       42
       42
       +
       <p align="center">

     

       43
       43
       +
       	<a href="https://github.com/taciturnaxolotl/serif/blob/master/LICENSE.md"><img src="https://img.shields.io/static/v1.svg?style=for-the-badge&label=License&message=MIT&logoColor=d9e0ee&colorA=363a4f&colorB=b7bdf8"/></a>

     

       44
       44
       +
       </p>

+12

bluesky-community-verifications.meta.js

···

       1
       1
       +
       // ==UserScript==

     

       2
       2
       +
       // @name         Bluesky Community Verifications

     

       3
       3
       +
       // @namespace    https://tangled.sh/@dunkirk.sh/serif/verifications

     

       4
       4
       +
       // @version      0.2.1

     

       5
       5
       +
       // @description  Shows verification badges from trusted community members on Bluesky

     

       6
       6
       +
       // @author       Kieran Klukas

     

       7
       7
       +
       // @match        https://bsky.app/*

     

       8
       8
       +
       // @grant        none

     

       9
       9
       +
       // @run-at       document-end

     

       10
       10
       +
       // @updateURL    https://tangled.sh/@dunkirk.sh/serif/raw/main/bluesky-community-verifications.user.meta.js

     

       11
       11
       +
       // @downloadURL  https://tangled.sh/@dunkirk.sh/serif/raw/main/bluesky-community-verifications.user.js

     

       12
       12
       +
       // ==/UserScript==

+890 -220

bluesky-community-verifications.user.js

···

       1
       1
       +
       // ==UserScript==

     

       2
       2
       +
       // @name         Bluesky Community Verifications

     

       3
       3
       +
       // @namespace    https://tangled.sh/@dunkirk.sh/serif/verifications

     

       4
       4
       +
       // @version      0.2.1

     

       5
       5
       +
       // @description  Shows verification badges from trusted community members on Bluesky

     

       6
       6
       +
       // @author       Kieran Klukas

     

       7
       7
       +
       // @match        https://bsky.app/*

     

       8
       8
       +
       // @grant        none

     

       9
       9
       +
       // @run-at       document-end

     

       10
       10
       +
       // @updateURL    https://tangled.sh/@dunkirk.sh/serif/raw/main/bluesky-community-verifications.user.meta.js

     

       11
       11
       +
       // @downloadURL  https://tangled.sh/@dunkirk.sh/serif/raw/main/bluesky-community-verifications.user.js

     

       12
       12
       +
       // ==/UserScript==

     

       13
       13
       +
       

     

       1
       14
        
       (() => {

     

       2
       15
        
         // Script has already been initialized check

     

       3
       16
        
         if (window.bskyTrustedUsersInitialized) {

     
···

       12
       25
        
         const TRUSTED_USERS_STORAGE_KEY = "bsky_trusted_users";

     

       13
       26
        
         const VERIFICATION_CACHE_STORAGE_KEY = "bsky_verification_cache";

     

       14
       27
        
         const CACHE_EXPIRY_TIME = 24 * 60 * 60 * 1000; // 24 hours

     

       28
       28
       +
         const BADGE_TYPE_STORAGE_KEY = "bsky_verification_badge_type";

     

       29
       29
       +
         const BADGE_COLOR_STORAGE_KEY = "bsky_verification_badge_color";

     

       30
       30
       +
       

     

       31
       31
       +
         // Default badge configuration

     

       32
       32
       +
         const DEFAULT_BADGE_TYPE = "checkmark";

     

       33
       33
       +
         const DEFAULT_BADGE_COLOR = "#0070ff";

     

       34
       34
       +
       

     

       35
       35
       +
         // Functions to get/set badge configuration

     

       36
       36
       +
         const getBadgeType = () => {

     

       37
       37
       +
           return localStorage.getItem(BADGE_TYPE_STORAGE_KEY) || DEFAULT_BADGE_TYPE;

     

       38
       38
       +
         };

     

       39
       39
       +
       

     

       40
       40
       +
         const getBadgeColor = () => {

     

       41
       41
       +
           return localStorage.getItem(BADGE_COLOR_STORAGE_KEY) || DEFAULT_BADGE_COLOR;

     

       42
       42
       +
         };

     

       43
       43
       +
       

     

       44
       44
       +
         const saveBadgeType = (type) => {

     

       45
       45
       +
           localStorage.setItem(BADGE_TYPE_STORAGE_KEY, type);

     

       46
       46
       +
         };

     

       47
       47
       +
       

     

       48
       48
       +
         const saveBadgeColor = (color) => {

     

       49
       49
       +
           localStorage.setItem(BADGE_COLOR_STORAGE_KEY, color);

     

       50
       50
       +
         };

     

       51
       51
       +
       

     

       52
       52
       +
         const getBadgeContent = (type) => {

     

       53
       53
       +
           switch (type) {

     

       54
       54
       +
             case "checkmark":

     

       55
       55
       +
               return "✓";

     

       56
       56
       +
             case "star":

     

       57
       57
       +
               return "★";

     

       58
       58
       +
             case "heart":

     

       59
       59
       +
               return "♥";

     

       60
       60
       +
             case "shield":

     

       61
       61
       +
               return "🛡️";

     

       62
       62
       +
             case "lock":

     

       63
       63
       +
               return "🔒";

     

       64
       64
       +
             case "verified":

     

       65
       65
       +
               return `<svg viewBox="0 0 24 24" width="16" height="16">

     

       66
       66
       +
                         <path fill="white" d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"></path>

     

       67
       67
       +
                       </svg>`;

     

       68
       68
       +
             default:

     

       69
       69
       +
               return "✓";

     

       70
       70
       +
           }

     

       71
       71
       +
         };

     

       15
       72
        
       

     

       16
       73
        
         // Function to get trusted users from local storage

     

       17
       74
        
         const getTrustedUsers = () => {

     
···

       23
       80
        
         const saveTrustedUsers = (users) => {

     

       24
       81
        
           localStorage.setItem(TRUSTED_USERS_STORAGE_KEY, JSON.stringify(users));

     

       25
       82
        
         };

     

       83
       83
       +
       

     

       84
       84
       +
         // Populate default trusted users if not already set

     

       85
       85
       +
         if (!localStorage.getItem(TRUSTED_USERS_STORAGE_KEY)) {

     

       86
       86
       +
           const defaultTrustedUsers = [

     

       87
       87
       +
             "bsky.app",

     

       88
       88
       +
             "nytimes.com",

     

       89
       89
       +
             "wired.com",

     

       90
       90
       +
             "theathletic.bsky.social",

     

       91
       91
       +
           ];

     

       92
       92
       +
           saveTrustedUsers(defaultTrustedUsers);

     

       93
       93
       +
           console.log("Added default trusted users:", defaultTrustedUsers);

     

       94
       94
       +
         }

     

       26
       95
        
       

     

       27
       96
        
         // Function to add a trusted user

     

       28
       97
        
         const addTrustedUser = (handle) => {

     
···

       68
       137
        
           return cacheEntry && Date.now() - cacheEntry.timestamp < CACHE_EXPIRY_TIME;

     

       69
       138
        
         };

     

       70
       139
        
       

     

       140
       140
       +
         // Function to remove a specific user from the verification cache

     

       141
       141
       +
         const removeUserFromCache = (handle) => {

     

       142
       142
       +
           const cache = getVerificationCache();

     

       143
       143
       +
           if (cache[handle]) {

     

       144
       144
       +
             delete cache[handle];

     

       145
       145
       +
             saveVerificationCache(cache);

     

       146
       146
       +
             console.log(`Removed ${handle} from verification cache`);

     

       147
       147
       +
           }

     

       148
       148
       +
         };

     

       149
       149
       +
       

     

       71
       150
        
         const clearCache = () => {

     

       72
       151
        
           localStorage.removeItem(VERIFICATION_CACHE_STORAGE_KEY);

     

       73
       152
        
           console.log("Verification cache cleared");

     
···

       180
       259
        
       

     

       181
       260
        
           console.log(`${profileDid} is not verified by any trusted users`);

     

       182
       261
        
       

     

       183
       183
       -
           // Add recheck button even when no verifications are found

     

       184
       184
       -
           createPillButtons();

     

       185
       185
       -
       

     

       186
       262
        
           return false;

     

       187
       263
        
         };

     

       188
       264
        
       

     

       189
       189
       -
         // Function to create a pill with recheck and settings buttons

     

       190
       190
       -
         const createPillButtons = () => {

     

       191
       191
       -
           // Remove existing buttons if any

     

       192
       192
       -
           const existingPill = document.getElementById(

     

       193
       193
       -
             "trusted-users-pill-container",

     

       265
       265
       +
         // Function to display verification badge on the profile

     

       266
       266
       +
         const displayVerificationBadge = (verifierHandles) => {

     

       267
       267
       +
           // Find the profile header or name element to add the badge to

     

       268
       268
       +
           const nameElements = document.querySelectorAll(

     

       269
       269
       +
             '[data-testid="profileHeaderDisplayName"]',

     

       194
       270
        
           );

     

       195
       195
       -
           if (existingPill) {

     

       196
       196
       -
             existingPill.remove();

     

       197
       197
       -
           }

     

       198
       198
       -
       

     

       199
       199
       -
           // Create pill container

     

       200
       200
       -
           const pillContainer = document.createElement("div");

     

       201
       201
       -
           pillContainer.id = "trusted-users-pill-container";

     

       202
       202
       -
           pillContainer.style.cssText = `

     

       203
       203
       -
             position: fixed;

     

       204
       204
       -
             bottom: 20px;

     

       205
       205
       -
             right: 20px;

     

       206
       206
       -
             z-index: 10000;

     

       207
       207
       -
             display: flex;

     

       208
       208
       -
             border-radius: 20px;

     

       209
       209
       -
             overflow: hidden;

     

       210
       210
       -
             box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);

     

       211
       211
       -
           `;

     

       212
       212
       -
       

     

       213
       213
       -
           // Create recheck button (left half of pill)

     

       214
       214
       -
           const recheckButton = document.createElement("button");

     

       215
       215
       -
           recheckButton.id = "trusted-users-recheck-button";

     

       216
       216
       -
           recheckButton.innerHTML = "↻ Recheck";

     

       217
       217
       -
           recheckButton.style.cssText = `

     

       218
       218
       -
             padding: 10px 15px;

     

       219
       219
       -
             background-color: #2D578D;

     

       220
       220
       -
             color: white;

     

       221
       221
       -
             border: none;

     

       222
       222
       -
             cursor: pointer;

     

       223
       223
       -
             font-weight: bold;

     

       224
       224
       -
             border-top-left-radius: 20px;

     

       225
       225
       -
             border-bottom-left-radius: 20px;

     

       226
       226
       -
           `;

     

       227
       227
       -
       

     

       228
       228
       -
           // Add click event to recheck

     

       229
       229
       -
           recheckButton.addEventListener("click", async () => {

     

       230
       230
       -
             if (currentProfileDid) {

     

       231
       231
       -
               // Remove any existing badges when rechecking

     

       232
       232
       -
               const existingBadge = document.getElementById(

     

       233
       233
       -
                 "user-trusted-verification-badge",

     

       234
       234
       -
               );

     

       235
       235
       -
               if (existingBadge) {

     

       236
       236
       -
                 existingBadge.remove();

     

       237
       237
       -
               }

     

       238
       238
       -
       

     

       239
       239
       -
               // Show loading state

     

       240
       240
       -
               recheckButton.innerHTML = "⟳ Checking...";

     

       241
       241
       -
               recheckButton.disabled = true;

     

       271
       271
       +
           const nameElement = nameElements[nameElements.length - 1];

     

       242
       272
        
       

     

       243
       243
       -
               // Recheck verifications

     

       244
       244
       -
               await checkTrustedUserVerifications(currentProfileDid);

     

       273
       273
       +
           console.log("nameElement", nameElement);

     

       245
       274
        
       

     

       246
       246
       -
               // Reset button

     

       247
       247
       -
               recheckButton.innerHTML = "↻ Recheck";

     

       248
       248
       -
               recheckButton.disabled = false;

     

       275
       275
       +
           if (nameElement) {

     

       276
       276
       +
             // Remove existing badge if present

     

       277
       277
       +
             const existingBadge = document.getElementById(

     

       278
       278
       +
               "user-trusted-verification-badge",

     

       279
       279
       +
             );

     

       280
       280
       +
             if (existingBadge) {

     

       281
       281
       +
               existingBadge.remove();

     

       249
       282
        
             }

     

       250
       250
       -
           });

     

       251
       283
        
       

     

       252
       252
       -
           // Create vertical divider

     

       253
       253
       -
           const divider = document.createElement("div");

     

       254
       254
       -
           divider.style.cssText = `

     

       255
       255
       -
             width: 1px;

     

       256
       256
       -
             background-color: rgba(255, 255, 255, 0.3);

     

       257
       257
       -
           `;

     

       284
       284
       +
             const badge = document.createElement("span");

     

       285
       285
       +
             badge.id = "user-trusted-verification-badge";

     

       258
       286
        
       

     

       259
       259
       -
           // Create settings button (right half of pill)

     

       260
       260
       -
           const settingsButton = document.createElement("button");

     

       261
       261
       -
           settingsButton.id = "bsky-trusted-settings-button";

     

       262
       262
       -
           settingsButton.textContent = "Settings";

     

       263
       263
       -
           settingsButton.style.cssText = `

     

       264
       264
       -
             padding: 10px 15px;

     

       265
       265
       -
             background-color: #2D578D;

     

       266
       266
       -
             color: white;

     

       267
       267
       -
             border: none;

     

       268
       268
       -
             cursor: pointer;

     

       269
       269
       -
             font-weight: bold;

     

       270
       270
       -
             border-top-right-radius: 20px;

     

       271
       271
       -
             border-bottom-right-radius: 20px;

     

       272
       272
       -
           `;

     

       287
       287
       +
             // Get user badge preferences

     

       288
       288
       +
             const badgeType = getBadgeType();

     

       289
       289
       +
             const badgeColor = getBadgeColor();

     

       273
       290
        
       

     

       274
       274
       -
           // Add elements to pill

     

       275
       275
       -
           pillContainer.appendChild(recheckButton);

     

       276
       276
       -
           pillContainer.appendChild(divider);

     

       277
       277
       -
           pillContainer.appendChild(settingsButton);

     

       291
       291
       +
             // Set badge content based on type

     

       292
       292
       +
             badge.innerHTML = getBadgeContent(badgeType);

     

       278
       293
        
       

     

       279
       279
       -
           // Add pill to page

     

       280
       280
       -
           document.body.appendChild(pillContainer);

     

       294
       294
       +
             // check if there is a div with button underneath

     

       295
       295
       +
             // Check if this user is verified by Bluesky

     

       296
       296
       +
             const isBlueskyVerified = nameElement.querySelector("div button");

     

       297
       297
       +
             if (isBlueskyVerified) isBlueskyVerified.remove();

     

       281
       298
        
       

     

       282
       282
       -
           // Add event listener to settings button

     

       283
       283
       -
           settingsButton.addEventListener("click", () => {

     

       284
       284
       -
             if (settingsModal) {

     

       285
       285
       -
               settingsModal.style.display = "flex";

     

       286
       286
       -
               updateTrustedUsersList();

     

       287
       287
       -
             } else {

     

       288
       288
       -
               createSettingsModal();

     

       289
       289
       -
             }

     

       290
       290
       -
           });

     

       291
       291
       -
         };

     

       299
       299
       +
             // Create tooltip text with all verifiers

     

       300
       300
       +
             const verifiersText =

     

       301
       301
       +
               verifierHandles.length > 1

     

       302
       302
       +
                 ? `Verified by: ${verifierHandles.join(", ")}`

     

       303
       303
       +
                 : `Verified by ${verifierHandles[0]}`;

     

       292
       304
        
       

     

       293
       293
       -
         // Legacy function kept for compatibility but redirects to the new implementation

     

       294
       294
       -
         const addRecheckButton = () => {

     

       295
       295
       -
           createPillButtons();

     

       296
       296
       -
         };

     

       305
       305
       +
             badge.title = verifiersText;

     

       306
       306
       +
             badge.style.cssText = `

     

       307
       307
       +
               background-color: ${badgeColor};

     

       308
       308
       +
               color: white;

     

       309
       309
       +
               border-radius: 50%;

     

       310
       310
       +
               width: 22px;

     

       311
       311
       +
               height: 22px;

     

       312
       312
       +
               margin-left: 8px;

     

       313
       313
       +
               font-size: 14px;

     

       314
       314
       +
               font-weight: bold;

     

       315
       315
       +
               cursor: help;

     

       316
       316
       +
               display: inline-flex;

     

       317
       317
       +
               align-items: center;

     

       318
       318
       +
               justify-content: center;

     

       319
       319
       +
               vertical-align: 5px;

     

       320
       320
       +
             `;

     

       297
       321
        
       

     

       298
       298
       -
         // Function to display verification badge on the profile

     

       299
       299
       -
         const displayVerificationBadge = (verifierHandles) => {

     

       300
       300
       -
           // Find the profile header or name element to add the badge to

     

       301
       301
       -
           const nameElement = document.querySelector(

     

       302
       302
       -
             '[data-testid="profileHeaderDisplayName"]',

     

       303
       303
       -
           );

     

       322
       322
       +
             // Add a click event to show all verifiers

     

       323
       323
       +
             badge.addEventListener("click", (e) => {

     

       324
       324
       +
               e.stopPropagation();

     

       325
       325
       +
               showVerifiersPopup(verifierHandles);

     

       326
       326
       +
             });

     

       304
       327
        
       

     

       305
       305
       -
           if (nameElement) {

     

       306
       306
       -
             // Check if badge already exists

     

       307
       307
       -
             if (!document.getElementById("user-trusted-verification-badge")) {

     

       308
       308
       -
               const badge = document.createElement("span");

     

       309
       309
       -
               badge.id = "user-trusted-verification-badge";

     

       310
       310
       -
               badge.innerHTML = "✓";

     

       311
       311
       -
       

     

       312
       312
       -
               // Create tooltip text with all verifiers

     

       313
       313
       -
               const verifiersText =

     

       314
       314
       -
                 verifierHandles.length > 1

     

       315
       315
       -
                   ? `Verified by: ${verifierHandles.join(", ")}`

     

       316
       316
       -
                   : `Verified by ${verifierHandles[0]}`;

     

       317
       317
       -
       

     

       318
       318
       -
               badge.title = verifiersText;

     

       319
       319
       -
               badge.style.cssText = `

     

       320
       320
       -
                 background-color: #0070ff;

     

       321
       321
       -
                 color: white;

     

       322
       322
       -
                 border-radius: 50%;

     

       323
       323
       -
                 width: 18px;

     

       324
       324
       -
                 height: 18px;

     

       325
       325
       -
                 margin-left: 8px;

     

       326
       326
       -
                 font-size: 12px;

     

       327
       327
       -
                 font-weight: bold;

     

       328
       328
       -
                 cursor: help;

     

       329
       329
       -
                 display: inline-flex;

     

       330
       330
       -
                 align-items: center;

     

       331
       331
       -
                 justify-content: center;

     

       332
       332
       -
               `;

     

       333
       333
       -
       

     

       334
       334
       -
               // Add a click event to show all verifiers

     

       335
       335
       -
               badge.addEventListener("click", (e) => {

     

       336
       336
       -
                 e.stopPropagation();

     

       337
       337
       -
                 showVerifiersPopup(verifierHandles);

     

       338
       338
       -
               });

     

       339
       339
       -
       

     

       340
       340
       -
               nameElement.appendChild(badge);

     

       341
       341
       -
             }

     

       328
       328
       +
             nameElement.appendChild(badge);

     

       342
       329
        
           }

     

       343
       343
       -
       

     

       344
       344
       -
           // Also add pill buttons when verification is found

     

       345
       345
       -
           createPillButtons();

     

       346
       330
        
         };

     

       347
       331
        
       

     

       348
       332
        
         // Function to show a popup with all verifiers

     
···

       454
       438
        
             btn.addEventListener("click", (e) => {

     

       455
       439
        
               const handle = e.target.getAttribute("data-handle");

     

       456
       440
        
               removeTrustedUser(handle);

     

       441
       441
       +
               removeUserFromCache(handle);

     

       457
       442
        
               updateTrustedUsersList();

     

       458
       443
        
             });

     

       459
       444
        
           }

     

       460
       445
        
         };

     

       461
       446
        
       

     

       447
       447
       +
         const searchUsers = async (searchQuery) => {

     

       448
       448
       +
           if (!searchQuery || searchQuery.length < 2) return [];

     

       449
       449
       +
       

     

       450
       450
       +
           try {

     

       451
       451
       +
             const response = await fetch(

     

       452
       452
       +
               `https://public.api.bsky.app/xrpc/app.bsky.actor.searchActors?term=${encodeURIComponent(searchQuery)}&limit=5`,

     

       453
       453
       +
             );

     

       454
       454
       +
             const data = await response.json();

     

       455
       455
       +
             return data.actors || [];

     

       456
       456
       +
           } catch (error) {

     

       457
       457
       +
             console.error("Error searching for users:", error);

     

       458
       458
       +
             return [];

     

       459
       459
       +
           }

     

       460
       460
       +
         };

     

       461
       461
       +
       

     

       462
       462
       +
         // Function to create and show the autocomplete dropdown

     

       463
       463
       +
         const showAutocompleteResults = (results, inputElement) => {

     

       464
       464
       +
           // Remove existing dropdown if any

     

       465
       465
       +
           const existingDropdown = document.getElementById("autocomplete-dropdown");

     

       466
       466
       +
           if (existingDropdown) existingDropdown.remove();

     

       467
       467
       +
       

     

       468
       468
       +
           if (results.length === 0) return;

     

       469
       469
       +
       

     

       470
       470
       +
           // Create dropdown

     

       471
       471
       +
           const dropdown = document.createElement("div");

     

       472
       472
       +
           dropdown.id = "autocomplete-dropdown";

     

       473
       473
       +
           dropdown.style.cssText = `

     

       474
       474
       +
             position: absolute;

     

       475
       475
       +
             background-color: #2A2E3D;

     

       476
       476
       +
             border: 1px solid #444;

     

       477
       477
       +
             border-radius: 4px;

     

       478
       478
       +
             box-shadow: 0 4px 8px rgba(0,0,0,0.2);

     

       479
       479
       +
             max-height: 300px;

     

       480
       480
       +
             overflow-y: auto;

     

       481
       481
       +
             width: ${inputElement.offsetWidth}px;

     

       482
       482
       +
             z-index: 10002;

     

       483
       483
       +
             margin-top: 2px;

     

       484
       484
       +
           `;

     

       485
       485
       +
       

     

       486
       486
       +
           // Position dropdown below input

     

       487
       487
       +
           const inputRect = inputElement.getBoundingClientRect();

     

       488
       488
       +
           dropdown.style.left = `${inputRect.left}px`;

     

       489
       489
       +
           dropdown.style.top = `${inputRect.bottom}px`;

     

       490
       490
       +
       

     

       491
       491
       +
           // Add results to dropdown

     

       492
       492
       +
           for (const user of results) {

     

       493
       493
       +
             const userItem = document.createElement("div");

     

       494
       494
       +
             userItem.className = "autocomplete-item";

     

       495
       495
       +
             userItem.style.cssText = `

     

       496
       496
       +
               display: flex;

     

       497
       497
       +
               align-items: center;

     

       498
       498
       +
               padding: 8px 12px;

     

       499
       499
       +
               cursor: pointer;

     

       500
       500
       +
               color: white;

     

       501
       501
       +
               border-bottom: 1px solid #444;

     

       502
       502
       +
             `;

     

       503
       503
       +
             userItem.onmouseover = () => {

     

       504
       504
       +
               userItem.style.backgroundColor = "#3A3F55";

     

       505
       505
       +
             };

     

       506
       506
       +
             userItem.onmouseout = () => {

     

       507
       507
       +
               userItem.style.backgroundColor = "";

     

       508
       508
       +
             };

     

       509
       509
       +
       

     

       510
       510
       +
             // Add profile picture

     

       511
       511
       +
             const avatar = document.createElement("img");

     

       512
       512
       +
             avatar.src = user.avatar || "https://bsky.app/static/default-avatar.png";

     

       513
       513
       +
             avatar.style.cssText = `

     

       514
       514
       +
               width: 32px;

     

       515
       515
       +
               height: 32px;

     

       516
       516
       +
               border-radius: 50%;

     

       517
       517
       +
               margin-right: 10px;

     

       518
       518
       +
               object-fit: cover;

     

       519
       519
       +
             `;

     

       520
       520
       +
       

     

       521
       521
       +
             // Add user info

     

       522
       522
       +
             const userInfo = document.createElement("div");

     

       523
       523
       +
             userInfo.style.cssText = `

     

       524
       524
       +
               display: flex;

     

       525
       525
       +
               flex-direction: column;

     

       526
       526
       +
             `;

     

       527
       527
       +
       

     

       528
       528
       +
             const displayName = document.createElement("div");

     

       529
       529
       +
             displayName.textContent = user.displayName || user.handle;

     

       530
       530
       +
             displayName.style.fontWeight = "bold";

     

       531
       531
       +
       

     

       532
       532
       +
             const handle = document.createElement("div");

     

       533
       533
       +
             handle.textContent = user.handle;

     

       534
       534
       +
             handle.style.fontSize = "0.8em";

     

       535
       535
       +
             handle.style.opacity = "0.8";

     

       536
       536
       +
       

     

       537
       537
       +
             userInfo.appendChild(displayName);

     

       538
       538
       +
             userInfo.appendChild(handle);

     

       539
       539
       +
       

     

       540
       540
       +
             userItem.appendChild(avatar);

     

       541
       541
       +
             userItem.appendChild(userInfo);

     

       542
       542
       +
       

     

       543
       543
       +
             // Handle click on user item

     

       544
       544
       +
             userItem.addEventListener("click", () => {

     

       545
       545
       +
               inputElement.value = user.handle;

     

       546
       546
       +
               dropdown.remove();

     

       547
       547
       +
             });

     

       548
       548
       +
       

     

       549
       549
       +
             dropdown.appendChild(userItem);

     

       550
       550
       +
           }

     

       551
       551
       +
       

     

       552
       552
       +
           document.body.appendChild(dropdown);

     

       553
       553
       +
       

     

       554
       554
       +
           // Close dropdown when clicking outside

     

       555
       555
       +
           document.addEventListener("click", function closeDropdown(e) {

     

       556
       556
       +
             if (e.target !== inputElement && !dropdown.contains(e.target)) {

     

       557
       557
       +
               dropdown.remove();

     

       558
       558
       +
               document.removeEventListener("click", closeDropdown);

     

       559
       559
       +
             }

     

       560
       560
       +
           });

     

       561
       561
       +
         };

     

       562
       562
       +
       

     

       563
       563
       +
         // Function to import verifications from the current user

     

       564
       564
       +
         const importVerificationsFromSelf = async () => {

     

       565
       565
       +
           try {

     

       566
       566
       +
             // Check if we can determine the current user

     

       567
       567
       +
             const bskyStorageData = localStorage.getItem("BSKY_STORAGE");

     

       568
       568
       +
             let userData = null;

     

       569
       569
       +
       

     

       570
       570
       +
             if (bskyStorageData) {

     

       571
       571
       +
               try {

     

       572
       572
       +
                 const bskyStorage = JSON.parse(bskyStorageData);

     

       573
       573
       +
                 if (bskyStorage.session.currentAccount) {

     

       574
       574
       +
                   userData = bskyStorage.session.currentAccount;

     

       575
       575
       +
                 }

     

       576
       576
       +
               } catch (error) {

     

       577
       577
       +
                 console.error("Error parsing BSKY_STORAGE data:", error);

     

       578
       578
       +
               }

     

       579
       579
       +
             }

     

       580
       580
       +
       

     

       581
       581
       +
             if (!userData || !userData.handle) {

     

       582
       582
       +
               alert(

     

       583
       583
       +
                 "Could not determine your Bluesky handle. Please ensure you're logged in.",

     

       584
       584
       +
               );

     

       585
       585
       +
               return;

     

       586
       586
       +
             }

     

       587
       587
       +
       

     

       588
       588
       +
             if (!userData || !userData.handle) {

     

       589
       589
       +
               alert(

     

       590
       590
       +
                 "Unable to determine your Bluesky handle. Make sure you're logged in.",

     

       591
       591
       +
               );

     

       592
       592
       +
               return;

     

       593
       593
       +
             }

     

       594
       594
       +
       

     

       595
       595
       +
             const userHandle = userData.handle;

     

       596
       596
       +
       

     

       597
       597
       +
             // Show loading state

     

       598
       598
       +
             const importButton = document.getElementById("importVerificationsBtn");

     

       599
       599
       +
             const originalText = importButton.textContent;

     

       600
       600
       +
             importButton.textContent = "Importing...";

     

       601
       601
       +
             importButton.disabled = true;

     

       602
       602
       +
       

     

       603
       603
       +
             // Fetch verification records from the user's account with pagination

     

       604
       604
       +
             let allRecords = [];

     

       605
       605
       +
             let cursor = null;

     

       606
       606
       +
             let hasMore = true;

     

       607
       607
       +
       

     

       608
       608
       +
             while (hasMore) {

     

       609
       609
       +
               const url = cursor

     

       610
       610
       +
                 ? `https://bsky.social/xrpc/com.atproto.repo.listRecords?repo=${userHandle}&collection=app.bsky.graph.verification&cursor=${cursor}`

     

       611
       611
       +
                 : `https://bsky.social/xrpc/com.atproto.repo.listRecords?repo=${userHandle}&collection=app.bsky.graph.verification`;

     

       612
       612
       +
       

     

       613
       613
       +
               const verificationResponse = await fetch(url);

     

       614
       614
       +
               const data = await verificationResponse.json();

     

       615
       615
       +
       

     

       616
       616
       +
               if (data.records && data.records.length > 0) {

     

       617
       617
       +
                 allRecords = [...allRecords, ...data.records];

     

       618
       618
       +
               }

     

       619
       619
       +
       

     

       620
       620
       +
               if (data.cursor) {

     

       621
       621
       +
                 cursor = data.cursor;

     

       622
       622
       +
               } else {

     

       623
       623
       +
                 hasMore = false;

     

       624
       624
       +
               }

     

       625
       625
       +
             }

     

       626
       626
       +
       

     

       627
       627
       +
             const verificationData = { records: allRecords };

     

       628
       628
       +
       

     

       629
       629
       +
             if (!verificationData.records || verificationData.records.length === 0) {

     

       630
       630
       +
               alert("No verification records found in your account.");

     

       631
       631
       +
               importButton.textContent = originalText;

     

       632
       632
       +
               importButton.disabled = false;

     

       633
       633
       +
               return;

     

       634
       634
       +
             }

     

       635
       635
       +
       

     

       636
       636
       +
             // Extract the handles of verified users

     

       637
       637
       +
             const verifiedUsers = [];

     

       638
       638
       +
             for (const record of verificationData.records) {

     

       639
       639
       +
               console.log(record.value.handle);

     

       640
       640
       +
               verifiedUsers.push(record.value.handle);

     

       641
       641
       +
             }

     

       642
       642
       +
       

     

       643
       643
       +
             // Add all found users to trusted users

     

       644
       644
       +
             let addedCount = 0;

     

       645
       645
       +
             for (const handle of verifiedUsers) {

     

       646
       646
       +
               const existingUsers = getTrustedUsers();

     

       647
       647
       +
               if (!existingUsers.includes(handle)) {

     

       648
       648
       +
                 addTrustedUser(handle);

     

       649
       649
       +
                 addedCount++;

     

       650
       650
       +
               }

     

       651
       651
       +
             }

     

       652
       652
       +
       

     

       653
       653
       +
             // Update the UI

     

       654
       654
       +
             updateTrustedUsersList();

     

       655
       655
       +
       

     

       656
       656
       +
             // Reset button state

     

       657
       657
       +
             importButton.textContent = originalText;

     

       658
       658
       +
             importButton.disabled = false;

     

       659
       659
       +
       

     

       660
       660
       +
             // Show result

     

       661
       661
       +
             alert(

     

       662
       662
       +
               `Successfully imported ${addedCount} verified users from your account.`,

     

       663
       663
       +
             );

     

       664
       664
       +
           } catch (error) {

     

       665
       665
       +
             console.error("Error importing verifications:", error);

     

       666
       666
       +
             alert("Error importing verifications. Check console for details.");

     

       667
       667
       +
             const importButton = document.getElementById("importVerificationsBtn");

     

       668
       668
       +
             if (importButton) {

     

       669
       669
       +
               importButton.textContent = "Import Verifications";

     

       670
       670
       +
               importButton.disabled = false;

     

       671
       671
       +
             }

     

       672
       672
       +
           }

     

       673
       673
       +
         };

     

       674
       674
       +
       

     

       675
       675
       +
         const addSettingsButton = () => {

     

       676
       676
       +
           // Check if we're on the settings page

     

       677
       677
       +
           if (!window.location.href.includes("bsky.app/settings")) {

     

       678
       678
       +
             return;

     

       679
       679
       +
           }

     

       680
       680
       +
       

     

       681
       681
       +
           // Check if our button already exists to avoid duplicates

     

       682
       682
       +
           if (document.getElementById("community-verifications-settings-button")) {

     

       683
       683
       +
             return;

     

       684
       684
       +
           }

     

       685
       685
       +
       

     

       686
       686
       +
           // Find the right place to insert our button (after content-and-media link)

     

       687
       687
       +
           const contentMediaLink = document.querySelector(

     

       688
       688
       +
             'a[href="/settings/content-and-media"]',

     

       689
       689
       +
           );

     

       690
       690
       +
           if (!contentMediaLink) {

     

       691
       691
       +
             console.log("Could not find content-and-media link to insert after");

     

       692
       692
       +
             return;

     

       693
       693
       +
           }

     

       694
       694
       +
       

     

       695
       695
       +
           // Clone the existing link and modify it

     

       696
       696
       +
           const verificationButton = contentMediaLink.cloneNode(true);

     

       697
       697
       +
           verificationButton.id = "community-verifications-settings-button";

     

       698
       698
       +
           verificationButton.href = "#"; // No actual link, we'll handle click with JS

     

       699
       699
       +
           verificationButton.setAttribute("aria-label", "Community Verifications");

     

       700
       700
       +
       

     

       701
       701
       +
           const highlightColor =

     

       702
       702
       +
             verificationButton.firstChild.style.backgroundColor || "rgb(30,41,54)";

     

       703
       703
       +
       

     

       704
       704
       +
           // Add hover effect to highlight the button

     

       705
       705
       +
           verificationButton.addEventListener("mouseover", () => {

     

       706
       706
       +
             verificationButton.firstChild.style.backgroundColor = highlightColor;

     

       707
       707
       +
           });

     

       708
       708
       +
       

     

       709
       709
       +
           verificationButton.addEventListener("mouseout", () => {

     

       710
       710
       +
             verificationButton.firstChild.style.backgroundColor = null;

     

       711
       711
       +
           });

     

       712
       712
       +
       

     

       713
       713
       +
           // Update the text content

     

       714
       714
       +
           const textDiv = verificationButton.querySelector(".css-146c3p1");

     

       715
       715
       +
           if (textDiv) {

     

       716
       716
       +
             textDiv.textContent = "Community Verifications";

     

       717
       717
       +
           }

     

       718
       718
       +
       

     

       719
       719
       +
           // Update the icon

     

       720
       720
       +
           const iconDiv = verificationButton.querySelector(

     

       721
       721
       +
             ".css-175oi2r[style*='width: 28px']",

     

       722
       722
       +
           );

     

       723
       723
       +
           if (iconDiv) {

     

       724
       724
       +
             iconDiv.innerHTML = `

     

       725
       725
       +
               <svg fill="none" width="28" viewBox="0 0 24 24" height="28" style="color: rgb(241, 243, 245);">

     

       726
       726
       +
                 <path fill="hsl(211, 20%, 95.3%)" d="M21.2,9.3c-0.5-0.5-1.1-0.7-1.8-0.7h-2.3V6.3c0-2.1-1.7-3.7-3.7-3.7h-3c-2.1,0-3.7,1.7-3.7,3.7v2.3H4.6

     

       727
       727
       +
                 c-0.7,0-1.3,0.3-1.8,0.7c-0.5,0.5-0.7,1.1-0.7,1.8v9.3c0,0.7,0.3,1.3,0.7,1.8c0.5,0.5,1.1,0.7,1.8,0.7h14.9c0.7,0,1.3-0.3,1.8-0.7

     

       728
       728
       +
                 c0.5-0.5,0.7-1.1,0.7-1.8v-9.3C22,10.4,21.7,9.8,21.2,9.3z M14.1,15.6l-1.3,1.3c-0.1,0.1-0.3,0.2-0.5,0.2c-0.2,0-0.3-0.1-0.5-0.2l-3.3-3.3

     

       729
       729
       +
                 c-0.1-0.1-0.2-0.3-0.2-0.5c0-0.2,0.1-0.3,0.2-0.5l1.3-1.3c0.1-0.1,0.3-0.2,0.5-0.2c0.2,0,0.3,0.1,0.5,0.2l1.5,1.5l4.2-4.2

     

       730
       730
       +
                 c0.1-0.1,0.3-0.2,0.5-0.2c0.2,0,0.3,0.1,0.5,0.2l1.3,1.3c0.1,0.1,0.2,0.3,0.2,0.5c0,0.2-0.1,0.3-0.2,0.5L14.1,15.6z M9.7,6.3

     

       731
       731
       +
                 c0-0.9,0.7-1.7,1.7-1.7h3c0.9,0,1.7,0.7,1.7,1.7v2.3H9.7V6.3z"/>

     

       732
       732
       +
               </svg>

     

       733
       733
       +
             `;

     

       734
       734
       +
           }

     

       735
       735
       +
       

     

       736
       736
       +
           // Insert our button after the content-and-media link

     

       737
       737
       +
           const parentElement = contentMediaLink.parentElement;

     

       738
       738
       +
           parentElement.insertBefore(

     

       739
       739
       +
             verificationButton,

     

       740
       740
       +
             contentMediaLink.nextSibling,

     

       741
       741
       +
           );

     

       742
       742
       +
       

     

       743
       743
       +
           // Add click event to open our settings modal

     

       744
       744
       +
           verificationButton.addEventListener("click", (e) => {

     

       745
       745
       +
             e.preventDefault();

     

       746
       746
       +
             if (settingsModal) {

     

       747
       747
       +
               settingsModal.style.display = "flex";

     

       748
       748
       +
               updateTrustedUsersList();

     

       749
       749
       +
             } else {

     

       750
       750
       +
               createSettingsModal();

     

       751
       751
       +
             }

     

       752
       752
       +
           });

     

       753
       753
       +
       

     

       754
       754
       +
           console.log("Added Community Verifications button to settings page");

     

       755
       755
       +
         };

     

       756
       756
       +
       

     

       462
       757
        
         // Function to create the settings modal

     

       463
       758
        
         const createSettingsModal = () => {

     

       464
       759
        
           // Create modal container

     

       465
       760
        
           settingsModal = document.createElement("div");

     

       466
       761
        
           settingsModal.id = "bsky-trusted-settings-modal";

     

       467
       762
        
           settingsModal.style.cssText = `

     

       468
       468
       -
             display: none;

     

       763
       763
       +
             display: flex;

     

       469
       764
        
             position: fixed;

     

       470
       765
        
             top: 0;

     

       471
       766
        
             left: 0;

     
···

       492
       787
        
           const modalHeader = document.createElement("div");

     

       493
       788
        
           modalHeader.innerHTML = `<h2 style="margin-top: 0;">Trusted Bluesky Users</h2>`;

     

       494
       789
        
       

     

       790
       790
       +
           const badgeCustomization = document.createElement("div");

     

       791
       791
       +
           badgeCustomization.style.cssText = `

     

       792
       792
       +
             margin-top: 15px;

     

       793
       793
       +
             padding-top: 15px;

     

       794
       794
       +
             border-top: 1px solid #eee;

     

       795
       795
       +
           `;

     

       796
       796
       +
       

     

       797
       797
       +
           badgeCustomization.innerHTML = `

     

       798
       798
       +
             <h2 style="margin-top: 0; color: white;">Badge Customization</h3>

     

       799
       799
       +
       

     

       800
       800
       +
             <div style="margin-bottom: 1rem;">

     

       801
       801
       +
               <p style="margin-bottom: 8px; color: white;">Badge Type:</p>

     

       802
       802
       +
               <div style="display: flex; flex-wrap: wrap; gap: 10px;">

     

       803
       803
       +
                 <label style="display: flex; align-items: center; cursor: pointer; color: white;">

     

       804
       804
       +
                   <input type="radio" name="badgeType" value="checkmark" ${getBadgeType() === "checkmark" ? "checked" : ""}>

     

       805
       805
       +
                   <span style="margin-left: 5px;">Checkmark (✓)</span>

     

       806
       806
       +
                 </label>

     

       807
       807
       +
                 <label style="display: flex; align-items: center; cursor: pointer; color: white;">

     

       808
       808
       +
                   <input type="radio" name="badgeType" value="star" ${getBadgeType() === "star" ? "checked" : ""}>

     

       809
       809
       +
                   <span style="margin-left: 5px;">Star (★)</span>

     

       810
       810
       +
                 </label>

     

       811
       811
       +
                 <label style="display: flex; align-items: center; cursor: pointer; color: white;">

     

       812
       812
       +
                   <input type="radio" name="badgeType" value="heart" ${getBadgeType() === "heart" ? "checked" : ""}>

     

       813
       813
       +
                   <span style="margin-left: 5px;">Heart (♥)</span>

     

       814
       814
       +
                 </label>

     

       815
       815
       +
                 <label style="display: flex; align-items: center; cursor: pointer; color: white;">

     

       816
       816
       +
                   <input type="radio" name="badgeType" value="shield" ${getBadgeType() === "shield" ? "checked" : ""}>

     

       817
       817
       +
                   <span style="margin-left: 5px;">Shield (🛡️)</span>

     

       818
       818
       +
                 </label>

     

       819
       819
       +
                 <label style="display: flex; align-items: center; cursor: pointer; color: white;">

     

       820
       820
       +
                   <input type="radio" name="badgeType" value="lock" ${getBadgeType() === "lock" ? "checked" : ""}>

     

       821
       821
       +
                   <span style="margin-left: 5px;">Lock (🔒)</span>

     

       822
       822
       +
                 </label>

     

       823
       823
       +
                 <label style="display: flex; align-items: center; cursor: pointer; color: white;">

     

       824
       824
       +
                   <input type="radio" name="badgeType" value="verified" ${getBadgeType() === "verified" ? "checked" : ""}>

     

       825
       825
       +
                   <span style="margin-left: 5px;">Verified</span>

     

       826
       826
       +
                 </label>

     

       827
       827
       +
               </div>

     

       828
       828
       +
             </div>

     

       829
       829
       +
       

     

       830
       830
       +
             <div>

     

       831
       831
       +
               <p style="margin-bottom: 8px; color: white;">Badge Color:</p>

     

       832
       832
       +
               <div style="display: flex; align-items: center;">

     

       833
       833
       +
                 <input type="color" id="badgeColorPicker" value="${getBadgeColor()}" style="margin-right: 10px;">

     

       834
       834
       +
                 <span id="badgeColorPreview" style="display: inline-block; width: 24px; height: 24px; background-color: ${getBadgeColor()}; border-radius: 50%; margin-right: 10px;"></span>

     

       835
       835
       +
                 <button id="resetBadgeColor" style="padding: 5px 10px; background: #473A3A; color: white; border: none; border-radius: 4px; cursor: pointer;">Reset to Default</button>

     

       836
       836
       +
               </div>

     

       837
       837
       +
             </div>

     

       838
       838
       +
       

     

       839
       839
       +
             <div style="margin-top: 20px; margin-bottom: 1rem;">

     

       840
       840
       +
               <p style="color: white;">Preview:</p>

     

       841
       841
       +
               <div style="display: flex; align-items: center; margin-top: 8px;">

     

       842
       842
       +
                 <span style="color: white; font-weight: bold;">User Name</span>

     

       843
       843
       +
                 <span id="badgePreview" style="

     

       844
       844
       +
                   background-color: ${getBadgeColor()};

     

       845
       845
       +
                   color: white;

     

       846
       846
       +
                   border-radius: 50%;

     

       847
       847
       +
                   width: 22px;

     

       848
       848
       +
                   height: 22px;

     

       849
       849
       +
                   margin-left: 8px;

     

       850
       850
       +
                   font-size: 14px;

     

       851
       851
       +
                   font-weight: bold;

     

       852
       852
       +
                   display: inline-flex;

     

       853
       853
       +
                   align-items: center;

     

       854
       854
       +
                   justify-content: center;

     

       855
       855
       +
                 ">${getBadgeContent(getBadgeType())}</span>

     

       856
       856
       +
               </div>

     

       857
       857
       +
             </div>

     

       858
       858
       +
           `;

     

       859
       859
       +
       

     

       860
       860
       +
           // Add the badge customization section to the modal content

     

       861
       861
       +
           modalContent.appendChild(badgeCustomization);

     

       862
       862
       +
       

     

       863
       863
       +
           // Add event listeners for the badge customization controls

     

       864
       864
       +
           setTimeout(() => {

     

       865
       865
       +
             // Badge type selection

     

       866
       866
       +
             const badgeTypeRadios = document.querySelectorAll(

     

       867
       867
       +
               'input[name="badgeType"]',

     

       868
       868
       +
             );

     

       869
       869
       +
             for (const radio of badgeTypeRadios) {

     

       870
       870
       +
               radio.addEventListener("change", (e) => {

     

       871
       871
       +
                 const selectedType = e.target.value;

     

       872
       872
       +
                 saveBadgeType(selectedType);

     

       873
       873
       +
                 updateBadgePreview();

     

       874
       874
       +
               });

     

       875
       875
       +
             }

     

       876
       876
       +
       

     

       877
       877
       +
             // Badge color picker

     

       878
       878
       +
             const colorPicker = document.getElementById("badgeColorPicker");

     

       879
       879
       +
             const colorPreview = document.getElementById("badgeColorPreview");

     

       880
       880
       +
       

     

       881
       881
       +
             colorPicker.addEventListener("input", (e) => {

     

       882
       882
       +
               const selectedColor = e.target.value;

     

       883
       883
       +
               colorPreview.style.backgroundColor = selectedColor;

     

       884
       884
       +
               saveBadgeColor(selectedColor);

     

       885
       885
       +
               updateBadgePreview();

     

       886
       886
       +
             });

     

       887
       887
       +
       

     

       888
       888
       +
             // Reset color button

     

       889
       889
       +
             const resetColorBtn = document.getElementById("resetBadgeColor");

     

       890
       890
       +
             resetColorBtn.addEventListener("click", () => {

     

       891
       891
       +
               colorPicker.value = DEFAULT_BADGE_COLOR;

     

       892
       892
       +
               colorPreview.style.backgroundColor = DEFAULT_BADGE_COLOR;

     

       893
       893
       +
               saveBadgeColor(DEFAULT_BADGE_COLOR);

     

       894
       894
       +
               updateBadgePreview();

     

       895
       895
       +
             });

     

       896
       896
       +
       

     

       897
       897
       +
             // Function to update the badge preview

     

       898
       898
       +
             function updateBadgePreview() {

     

       899
       899
       +
               const badgePreview = document.getElementById("badgePreview");

     

       900
       900
       +
               const selectedType = getBadgeType();

     

       901
       901
       +
               const selectedColor = getBadgeColor();

     

       902
       902
       +
       

     

       903
       903
       +
               badgePreview.innerHTML = getBadgeContent(selectedType);

     

       904
       904
       +
               badgePreview.style.backgroundColor = selectedColor;

     

       905
       905
       +
             }

     

       906
       906
       +
       

     

       907
       907
       +
             // Initialize preview

     

       908
       908
       +
             updateBadgePreview();

     

       909
       909
       +
           }, 100);

     

       910
       910
       +
       

     

       495
       911
        
           // Create input form

     

       496
       912
        
           const form = document.createElement("div");

     

       497
       913
        
           form.innerHTML = `

     

       498
       498
       -
             <p>Add Bluesky handles you trust:</p>

     

       499
       499
       -
             <div style="display: flex; margin-bottom: 15px;">

     

       500
       500
       -
               <input id="trustedUserInput" type="text" placeholder="username.bsky.social" style="flex: 1; padding: 8px; margin-right: 10px; border: 1px solid #ccc; border-radius: 4px;">

     

       501
       501
       -
               <button id="addTrustedUserBtn" style="background-color: #2D578D; color: white; border: none; border-radius: 4px; padding: 8px 15px; cursor: pointer;">Add</button>

     

       502
       502
       -
             </div>

     

       914
       914
       +
               <p>Add Bluesky handles you trust:</p>

     

       915
       915
       +
               <div style="display: flex; margin-bottom: 15px; position: relative;">

     

       916
       916
       +
                 <input id="trustedUserInput" type="text" placeholder="Search for a user..." style="flex: 1; padding: 8px; margin-right: 10px; border: 1px solid #ccc; border-radius: 4px;">

     

       917
       917
       +
                 <button id="addTrustedUserBtn" style="background-color: #2D578D; color: white; border: none; border-radius: 4px; padding: 8px 15px; cursor: pointer;">Add</button>

     

       918
       918
       +
               </div>

     

       919
       919
       +
             `;

     

       920
       920
       +
       

     

       921
       921
       +
           // Create import button

     

       922
       922
       +
           const importContainer = document.createElement("div");

     

       923
       923
       +
           importContainer.style.cssText = `

     

       924
       924
       +
             margin-top: 10px;

     

       925
       925
       +
             margin-bottom: 15px;

     

       503
       926
        
           `;

     

       504
       927
        
       

     

       928
       928
       +
           const importButton = document.createElement("button");

     

       929
       929
       +
           importButton.id = "importVerificationsBtn";

     

       930
       930
       +
           importButton.textContent = "Import Your Verifications";

     

       931
       931
       +
           importButton.style.cssText = `

     

       932
       932
       +
             background-color: #2D578D;

     

       933
       933
       +
             color: white;

     

       934
       934
       +
             border: none;

     

       935
       935
       +
             border-radius: 4px;

     

       936
       936
       +
             padding: 8px 15px;

     

       937
       937
       +
             cursor: pointer;

     

       938
       938
       +
             width: 100%;

     

       939
       939
       +
           `;

     

       940
       940
       +
       

     

       941
       941
       +
           importButton.addEventListener("click", importVerificationsFromSelf);

     

       942
       942
       +
           importContainer.appendChild(importButton);

     

       943
       943
       +
       

     

       505
       944
        
           // Create trusted users list

     

       506
       945
        
           const trustedUsersList = document.createElement("div");

     

       507
       946
        
           trustedUsersList.id = "trustedUsersList";

     
···

       554
       993
        
           // Assemble modal

     

       555
       994
        
           modalContent.appendChild(modalHeader);

     

       556
       995
        
           modalContent.appendChild(form);

     

       996
       996
       +
           modalContent.appendChild(importContainer);

     

       557
       997
        
           modalContent.appendChild(trustedUsersList);

     

       558
       998
        
           modalContent.appendChild(cacheControls);

     

       559
       999
        
           modalContent.appendChild(closeButton);

     
···

       561
       1001
        
       

     

       562
       1002
        
           // Add to document

     

       563
       1003
        
           document.body.appendChild(settingsModal);

     

       1004
       1004
       +
       

     

       1005
       1005
       +
           const userInput = document.getElementById("trustedUserInput");

     

       1006
       1006
       +
       

     

       1007
       1007
       +
           // Add input event for autocomplete

     

       1008
       1008
       +
           let debounceTimeout;

     

       1009
       1009
       +
           userInput.addEventListener("input", (e) => {

     

       1010
       1010
       +
             clearTimeout(debounceTimeout);

     

       1011
       1011
       +
             debounceTimeout = setTimeout(async () => {

     

       1012
       1012
       +
               const searchQuery = e.target.value.trim();

     

       1013
       1013
       +
               if (searchQuery.length >= 2) {

     

       1014
       1014
       +
                 const results = await searchUsers(searchQuery);

     

       1015
       1015
       +
                 showAutocompleteResults(results, userInput);

     

       1016
       1016
       +
               } else {

     

       1017
       1017
       +
                 const dropdown = document.getElementById("autocomplete-dropdown");

     

       1018
       1018
       +
                 if (dropdown) dropdown.remove();

     

       1019
       1019
       +
               }

     

       1020
       1020
       +
             }, 300); // Debounce for 300ms

     

       1021
       1021
       +
           });

     

       564
       1022
        
       

     

       565
       1023
        
           // Event listeners

     

       566
       1024
        
           closeButton.addEventListener("click", () => {

     

       567
       1025
        
             settingsModal.style.display = "none";

     

       568
       1026
        
           });

     

       569
       1027
        
       

     

       1028
       1028
       +
           // Function to add a user from the input field

     

       1029
       1029
       +
           const addUserFromInput = () => {

     

       1030
       1030
       +
             const input = document.getElementById("trustedUserInput");

     

       1031
       1031
       +
             const handle = input.value.trim();

     

       1032
       1032
       +
             if (handle) {

     

       1033
       1033
       +
               addTrustedUser(handle);

     

       1034
       1034
       +
               input.value = "";

     

       1035
       1035
       +
               updateTrustedUsersList();

     

       1036
       1036
       +
       

     

       1037
       1037
       +
               // Remove dropdown if present

     

       1038
       1038
       +
               const dropdown = document.getElementById("autocomplete-dropdown");

     

       1039
       1039
       +
               if (dropdown) dropdown.remove();

     

       1040
       1040
       +
             }

     

       1041
       1041
       +
           };

     

       1042
       1042
       +
       

     

       570
       1043
        
           // Add trusted user button event

     

       571
       1044
        
           document

     

       572
       1045
        
             .getElementById("addTrustedUserBtn")

     

       573
       573
       -
             .addEventListener("click", () => {

     

       574
       574
       -
               const input = document.getElementById("trustedUserInput");

     

       575
       575
       -
               const handle = input.value.trim();

     

       576
       576
       -
               if (handle) {

     

       577
       577
       -
                 addTrustedUser(handle);

     

       578
       578
       -
                 input.value = "";

     

       579
       579
       -
                 updateTrustedUsersList();

     

       580
       580
       -
               }

     

       581
       581
       -
             });

     

       1046
       1046
       +
             .addEventListener("click", addUserFromInput);

     

       1047
       1047
       +
       

     

       1048
       1048
       +
           // Add keydown event to input for Enter key

     

       1049
       1049
       +
           userInput.addEventListener("keydown", (e) => {

     

       1050
       1050
       +
             if (e.key === "Enter") {

     

       1051
       1051
       +
               e.preventDefault();

     

       1052
       1052
       +
               addUserFromInput();

     

       1053
       1053
       +
             }

     

       1054
       1054
       +
           });

     

       582
       1055
        
       

     

       583
       1056
        
           // Close modal when clicking outside

     

       584
       1057
        
           settingsModal.addEventListener("click", (e) => {

     
···

       591
       1064
        
           updateTrustedUsersList();

     

       592
       1065
        
         };

     

       593
       1066
        
       

     

       594
       594
       -
         // Function to create the settings UI if it doesn't exist yet

     

       595
       595
       -
         const createSettingsUI = () => {

     

       596
       596
       -
           // Create pill with buttons

     

       597
       597
       -
           createPillButtons();

     

       598
       598
       -
       

     

       599
       599
       -
           // Create the settings modal if it doesn't exist yet

     

       600
       600
       -
           if (!settingsModal) {

     

       601
       601
       -
             createSettingsModal();

     

       602
       602
       -
           }

     

       603
       603
       -
         };

     

       604
       604
       -
       

     

       605
       1067
        
         // Function to check the current profile

     

       606
       1068
        
         const checkCurrentProfile = () => {

     

       607
       1069
        
           const currentUrl = window.location.href;

     

       608
       608
       -
           if (currentUrl.includes("bsky.app/profile/")) {

     

       1070
       1070
       +
           // Only trigger on profile pages

     

       1071
       1071
       +
           if (

     

       1072
       1072
       +
             currentUrl.match(/bsky\.app\/profile\/[^\/]+$/) ||

     

       1073
       1073
       +
             currentUrl.match(/bsky\.app\/profile\/[^\/]+\/follows/) ||

     

       1074
       1074
       +
             currentUrl.match(/bsky\.app\/profile\/[^\/]+\/followers/)

     

       1075
       1075
       +
           ) {

     

       609
       1076
        
             const handle = currentUrl.split("/profile/")[1].split("/")[0];

     

       610
       610
       -
             console.log("Extracted handle:", handle);

     

       611
       611
       -
       

     

       612
       612
       -
             // Create and add the settings UI (only once)

     

       613
       613
       -
             createSettingsUI();

     

       1077
       1077
       +
             console.log("Detected profile page for:", handle);

     

       614
       1078
        
       

     

       615
       1079
        
             // Fetch user profile data

     

       616
       1080
        
             fetch(

     

       617
       617
       -
               `https://bsky.social/xrpc/com.atproto.repo.getRecord?repo=${handle}&collection=app.bsky.actor.profile&rkey=self`,

     

       1081
       1081
       +
               `https://public.api.bsky.app/xrpc/com.atproto.repo.getRecord?repo=${handle}&collection=app.bsky.actor.profile&rkey=self`,

     

       618
       1082
        
             )

     

       619
       1083
        
               .then((response) => response.json())

     

       620
       1084
        
               .then((data) => {

     
···

       624
       1088
        
                 const did = data.uri.split("/")[2];

     

       625
       1089
        
                 console.log("User DID:", did);

     

       626
       1090
        
       

     

       627
       627
       -
                 // Now fetch the app.bsky.graph.verification data specifically

     

       628
       628
       -
                 fetch(

     

       629
       629
       -
                   `https://bsky.social/xrpc/com.atproto.repo.listRecords?repo=${handle}&collection=app.bsky.graph.verification`,

     

       630
       630
       -
                 )

     

       631
       631
       -
                   .then((response) => response.json())

     

       632
       632
       -
                   .then((verificationData) => {

     

       633
       633
       -
                     console.log("Verification data:", verificationData);

     

       634
       634
       -
                     if (

     

       635
       635
       -
                       verificationData.records &&

     

       636
       636
       -
                       verificationData.records.length > 0

     

       637
       637
       -
                     ) {

     

       638
       638
       -
                       console.log(

     

       639
       639
       -
                         "User has app.bsky.graph.verification:",

     

       640
       640
       -
                         verificationData.records,

     

       641
       641
       -
                       );

     

       642
       642
       -
                     } else {

     

       643
       643
       -
                       console.log("User does not have app.bsky.graph.verification");

     

       644
       644
       -
                     }

     

       645
       645
       -
       

     

       646
       646
       -
                     // Check if any trusted users have verified this profile using the DID

     

       647
       647
       -
                     checkTrustedUserVerifications(did);

     

       648
       648
       -
                   })

     

       649
       649
       -
                   .catch((verificationError) => {

     

       650
       650
       -
                     console.error(

     

       651
       651
       -
                       "Error fetching verification data:",

     

       652
       652
       -
                       verificationError,

     

       653
       653
       -
                     );

     

       654
       654
       -
                   });

     

       1091
       1091
       +
                 // Check if any trusted users have verified this profile using the DID

     

       1092
       1092
       +
                 checkTrustedUserVerifications(did);

     

       655
       1093
        
               })

     

       656
       1094
        
               .catch((error) => {

     

       657
       1095
        
                 console.error("Error checking profile:", error);

     

       658
       1096
        
               });

     

       659
       1097
        
       

     

       660
       1098
        
             console.log("Bluesky profile detected");

     

       1099
       1099
       +
           } else {

     

       1100
       1100
       +
             // Not on a profile page, reset state

     

       1101
       1101
       +
             currentProfileDid = null;

     

       1102
       1102
       +
             profileVerifiers = [];

     

       1103
       1103
       +
       

     

       1104
       1104
       +
             // Remove UI elements if present

     

       1105
       1105
       +
             const existingBadge = document.getElementById(

     

       1106
       1106
       +
               "user-trusted-verification-badge",

     

       1107
       1107
       +
             );

     

       1108
       1108
       +
             if (existingBadge) {

     

       1109
       1109
       +
               existingBadge.remove();

     

       1110
       1110
       +
             }

     

       661
       1111
        
           }

     

       662
       1112
        
         };

     

       663
       1113
        
       

     

       664
       664
       -
         // Initial check

     

       665
       665
       -
         checkCurrentProfile();

     

       1114
       1114
       +
         const checkUserLinksOnPage = async () => {

     

       1115
       1115
       +
           // Look for profile links with handles

     

       1116
       1116
       +
           // Find all profile links and filter to get only one link per parent

     

       1117
       1117
       +
           const allProfileLinks = Array.from(

     

       1118
       1118
       +
             document.querySelectorAll('a[href^="/profile/"]:not(:has(*))'),

     

       1119
       1119
       +
           );

     

       1120
       1120
       +
       

     

       1121
       1121
       +
           // Use a Map to keep track of parent elements and their first child link

     

       1122
       1122
       +
           const parentMap = new Map();

     

       1123
       1123
       +
       

     

       1124
       1124
       +
           // For each link, store only the first one found for each parent

     

       1125
       1125
       +
           for (const link of allProfileLinks) {

     

       1126
       1126
       +
             const parent = link.parentElement;

     

       1127
       1127
       +
             if (parent && !parentMap.has(parent)) {

     

       1128
       1128
       +
               parentMap.set(parent, link);

     

       1129
       1129
       +
             }

     

       1130
       1130
       +
           }

     

       1131
       1131
       +
       

     

       1132
       1132
       +
           // Get only the first link for each parent

     

       1133
       1133
       +
           const profileLinks = Array.from(parentMap.values());

     

       1134
       1134
       +
       

     

       1135
       1135
       +
           if (profileLinks.length === 0) return;

     

       1136
       1136
       +
       

     

       1137
       1137
       +
           console.log(`Found ${profileLinks.length} possible user links on page`);

     

       1138
       1138
       +
       

     

       1139
       1139
       +
           // Process profile links to identify user containers

     

       1140
       1140
       +
           for (const link of profileLinks) {

     

       1141
       1141
       +
             try {

     

       1142
       1142
       +
               // Check if we already processed this link

     

       1143
       1143
       +
               if (link.getAttribute("data-verification-checked") === "true") continue;

     

       1144
       1144
       +
       

     

       1145
       1145
       +
               // Mark as checked

     

       1146
       1146
       +
               link.setAttribute("data-verification-checked", "true");

     

       1147
       1147
       +
       

     

       1148
       1148
       +
               // Extract handle from href

     

       1149
       1149
       +
               const handle = link.getAttribute("href").split("/profile/")[1];

     

       1150
       1150
       +
               if (!handle) continue;

     

       1151
       1151
       +
       

     

       1152
       1152
       +
               // check if there is anything after the handle

     

       1153
       1153
       +
               const handleTrailing = handle.split("/").length > 1;

     

       1154
       1154
       +
               if (handleTrailing) continue;

     

       1155
       1155
       +
       

     

       1156
       1156
       +
               // Find parent container that might contain the handle and verification icon

     

       1157
       1157
       +
               // Look for containers where this link is followed by another link with the same handle

     

       1158
       1158
       +
               const parent = link.parentElement;

     

       1159
       1159
       +
       

     

       1160
       1160
       +
               // If we found a container with the verification icon

     

       1161
       1161
       +
               if (parent) {

     

       1162
       1162
       +
                 // Check if this user already has our verification badge

     

       1163
       1163
       +
                 if (parent.querySelector(".trusted-user-inline-badge")) continue;

     

       1164
       1164
       +
       

     

       1165
       1165
       +
                 try {

     

       1166
       1166
       +
                   // Fetch user profile data to get DID

     

       1167
       1167
       +
                   const response = await fetch(

     

       1168
       1168
       +
                     `https://public.api.bsky.app/xrpc/com.atproto.repo.getRecord?repo=${handle}&collection=app.bsky.actor.profile&rkey=self`,

     

       1169
       1169
       +
                   );

     

       1170
       1170
       +
                   const data = await response.json();

     

       1171
       1171
       +
       

     

       1172
       1172
       +
                   // Extract the DID from the profile data

     

       1173
       1173
       +
                   const did = data.uri.split("/")[2];

     

       1174
       1174
       +
       

     

       1175
       1175
       +
                   // Check if this user is verified by our trusted users

     

       1176
       1176
       +
                   const trustedUsers = getTrustedUsers();

     

       1177
       1177
       +
                   let isVerified = false;

     

       1178
       1178
       +
                   const verifiers = [];

     

       1179
       1179
       +
       

     

       1180
       1180
       +
                   // Check cache first for each trusted user

     

       1181
       1181
       +
                   for (const trustedUser of trustedUsers) {

     

       1182
       1182
       +
                     const cachedData = getCachedVerifications(trustedUser);

     

       1183
       1183
       +
       

     

       1184
       1184
       +
                     if (cachedData && isCacheValid(cachedData)) {

     

       1185
       1185
       +
                       // Use cached verification data

     

       1186
       1186
       +
                       const records = cachedData.records;

     

       1187
       1187
       +
       

     

       1188
       1188
       +
                       for (const record of records) {

     

       1189
       1189
       +
                         if (record.value && record.value.subject === did) {

     

       1190
       1190
       +
                           isVerified = true;

     

       1191
       1191
       +
                           verifiers.push(trustedUser);

     

       1192
       1192
       +
                           break;

     

       1193
       1193
       +
                         }

     

       1194
       1194
       +
                       }

     

       1195
       1195
       +
                     }

     

       1196
       1196
       +
                   }

     

       1197
       1197
       +
       

     

       1198
       1198
       +
                   // If verified, add a small badge

     

       1199
       1199
       +
                   if (isVerified && verifiers.length > 0) {

     

       1200
       1200
       +
                     // Create a badge element

     

       1201
       1201
       +
                     const smallBadge = document.createElement("span");

     

       1202
       1202
       +
                     smallBadge.className = "trusted-user-inline-badge";

     

       1203
       1203
       +
       

     

       1204
       1204
       +
                     // Get user badge preferences

     

       1205
       1205
       +
                     const badgeType = getBadgeType();

     

       1206
       1206
       +
                     const badgeColor = getBadgeColor();

     

       1207
       1207
       +
       

     

       1208
       1208
       +
                     smallBadge.innerHTML = getBadgeContent(badgeType);

     

       1209
       1209
       +
       

     

       1210
       1210
       +
                     // Create tooltip text with all verifiers

     

       1211
       1211
       +
                     const verifiersText =

     

       1212
       1212
       +
                       verifiers.length > 1

     

       1213
       1213
       +
                         ? `Verified by: ${verifiers.join(", ")}`

     

       1214
       1214
       +
                         : `Verified by ${verifiers[0]}`;

     

       1215
       1215
       +
       

     

       1216
       1216
       +
                     smallBadge.title = verifiersText;

     

       1217
       1217
       +
                     smallBadge.style.cssText = `

     

       1218
       1218
       +
                       background-color: ${badgeColor};

     

       1219
       1219
       +
                       color: white;

     

       1220
       1220
       +
                       border-radius: 50%;

     

       1221
       1221
       +
                       width: 16px;

     

       1222
       1222
       +
                       height: 16px;

     

       1223
       1223
       +
                       font-size: 11px;

     

       1224
       1224
       +
                       font-weight: bold;

     

       1225
       1225
       +
                       cursor: help;

     

       1226
       1226
       +
                       display: inline-flex;

     

       1227
       1227
       +
                       align-items: center;

     

       1228
       1228
       +
                       justify-content: center;

     

       1229
       1229
       +
                       margin-left: 4px;

     

       1230
       1230
       +
                     `;

     

       1231
       1231
       +
       

     

       1232
       1232
       +
                     // Add click event to show verifiers

     

       1233
       1233
       +
                     smallBadge.addEventListener("click", (e) => {

     

       1234
       1234
       +
                       e.stopPropagation();

     

       1235
       1235
       +
                       showVerifiersPopup(verifiers);

     

       1236
       1236
       +
                     });

     

       1237
       1237
       +
       

     

       1238
       1238
       +
                     // Insert badge after the SVG element

     

       1239
       1239
       +
                     parent.firstChild.after(smallBadge);

     

       1240
       1240
       +
                     parent.style.flexDirection = "row";

     

       1241
       1241
       +
                     parent.style.alignItems = "center";

     

       1242
       1242
       +
       

     

       1243
       1243
       +
                     // Look for verification SVG icon in the parent and remove it if it exists

     

       1244
       1244
       +
                     const badgeSvgIcon = Array.from(parent.childNodes).find(

     

       1245
       1245
       +
                       (node) =>

     

       1246
       1246
       +
                         node.nodeType === Node.ELEMENT_NODE &&

     

       1247
       1247
       +
                         node.tagName === "DIV" &&

     

       1248
       1248
       +
                         node.querySelector("svg"),

     

       1249
       1249
       +
                     );

     

       1250
       1250
       +
                     if (badgeSvgIcon) {

     

       1251
       1251
       +
                       badgeSvgIcon.remove();

     

       1252
       1252
       +
                     }

     

       1253
       1253
       +
                   }

     

       1254
       1254
       +
                 } catch (error) {

     

       1255
       1255
       +
                   console.error(`Error checking verification for ${handle}:`, error);

     

       1256
       1256
       +
                 }

     

       1257
       1257
       +
               }

     

       1258
       1258
       +
             } catch (error) {

     

       1259
       1259
       +
               console.error("Error processing profile link:", error);

     

       1260
       1260
       +
             }

     

       1261
       1261
       +
           }

     

       1262
       1262
       +
         };

     

       1263
       1263
       +
       

     

       1264
       1264
       +
         const observeContentChanges = () => {

     

       1265
       1265
       +
           // Use a debounced function to check for new user links

     

       1266
       1266
       +
           const debouncedCheck = () => {

     

       1267
       1267
       +
             clearTimeout(window.userLinksCheckTimeout);

     

       1268
       1268
       +
             window.userLinksCheckTimeout = setTimeout(() => {

     

       1269
       1269
       +
               checkUserLinksOnPage();

     

       1270
       1270
       +
             }, 300);

     

       1271
       1271
       +
           };

     

       1272
       1272
       +
       

     

       1273
       1273
       +
           // Create a mutation observer that watches for DOM changes

     

       1274
       1274
       +
           const observer = new MutationObserver((mutations) => {

     

       1275
       1275
       +
             let hasRelevantChanges = false;

     

       1276
       1276
       +
       

     

       1277
       1277
       +
             // Check if any mutations involve adding new nodes

     

       1278
       1278
       +
             for (const mutation of mutations) {

     

       1279
       1279
       +
               if (mutation.addedNodes.length > 0) {

     

       1280
       1280
       +
                 for (const node of mutation.addedNodes) {

     

       1281
       1281
       +
                   if (node.nodeType === Node.ELEMENT_NODE) {

     

       1282
       1282
       +
                     // Check if this element or its children might contain profile links

     

       1283
       1283
       +
                     if (

     

       1284
       1284
       +
                       node.querySelector('a[href^="/profile/"]') ||

     

       1285
       1285
       +
                       (node.tagName === "A" &&

     

       1286
       1286
       +
                         node.getAttribute("href")?.startsWith("/profile/"))

     

       1287
       1287
       +
                     ) {

     

       1288
       1288
       +
                       hasRelevantChanges = true;

     

       1289
       1289
       +
                       break;

     

       1290
       1290
       +
                     }

     

       1291
       1291
       +
                   }

     

       1292
       1292
       +
                 }

     

       1293
       1293
       +
               }

     

       1294
       1294
       +
               if (hasRelevantChanges) break;

     

       1295
       1295
       +
             }

     

       1296
       1296
       +
       

     

       1297
       1297
       +
             if (hasRelevantChanges) {

     

       1298
       1298
       +
               debouncedCheck();

     

       1299
       1299
       +
             }

     

       1300
       1300
       +
           });

     

       1301
       1301
       +
       

     

       1302
       1302
       +
           // Observe the entire document for content changes that might include profile links

     

       1303
       1303
       +
           observer.observe(document.body, { childList: true, subtree: true });

     

       1304
       1304
       +
       

     

       1305
       1305
       +
           // Also check periodically for posts that might have been loaded but not caught by the observer

     

       1306
       1306
       +
           setInterval(debouncedCheck, 5000);

     

       1307
       1307
       +
         };

     

       1308
       1308
       +
       

     

       1309
       1309
       +
         // Wait for DOM to be fully loaded before initializing

     

       1310
       1310
       +
         document.addEventListener("DOMContentLoaded", () => {

     

       1311
       1311
       +
           // Initial check for user links

     

       1312
       1312
       +
           checkUserLinksOnPage();

     

       1313
       1313
       +
       

     

       1314
       1314
       +
           // Initial check

     

       1315
       1315
       +
           setTimeout(checkCurrentProfile, 2000);

     

       1316
       1316
       +
       

     

       1317
       1317
       +
           // Add settings button if we're on the settings page

     

       1318
       1318
       +
           if (window.location.href.includes("bsky.app/settings")) {

     

       1319
       1319
       +
             // Wait for the content-and-media link to appear before adding our button

     

       1320
       1320
       +
             const waitForSettingsLink = setInterval(() => {

     

       1321
       1321
       +
               const contentMediaLink = document.querySelector(

     

       1322
       1322
       +
                 'a[href="/settings/content-and-media"]',

     

       1323
       1323
       +
               );

     

       1324
       1324
       +
               if (contentMediaLink) {

     

       1325
       1325
       +
                 clearInterval(waitForSettingsLink);

     

       1326
       1326
       +
                 addSettingsButton();

     

       1327
       1327
       +
               }

     

       1328
       1328
       +
             }, 200);

     

       1329
       1329
       +
           }

     

       1330
       1330
       +
         });

     

       1331
       1331
       +
       

     

       1332
       1332
       +
         // Start observing for content changes to detect newly loaded posts

     

       1333
       1333
       +
         observeContentChanges();

     

       666
       1334
        
       

     

       667
       1335
        
         // Set up a MutationObserver to watch for URL changes

     

       668
       1336
        
         const observeUrlChanges = () => {

     
···

       670
       1338
        
       

     

       671
       1339
        
           const observer = new MutationObserver(() => {

     

       672
       1340
        
             if (location.href !== lastUrl) {

     

       1341
       1341
       +
               const oldUrl = lastUrl;

     

       673
       1342
        
               lastUrl = location.href;

     

       674
       674
       -
               console.log("URL changed to:", location.href);

     

       1343
       1343
       +
               console.log("URL changed from:", oldUrl, "to:", location.href);

     

       675
       1344
        
       

     

       676
       676
       -
               // Remove any existing badges when URL changes

     

       1345
       1345
       +
               // Reset current profile DID

     

       1346
       1346
       +
               currentProfileDid = null;

     

       1347
       1347
       +
               profileVerifiers = [];

     

       1348
       1348
       +
       

     

       1349
       1349
       +
               // Clean up UI elements

     

       677
       1350
        
               const existingBadge = document.getElementById(

     

       678
       1351
        
                 "user-trusted-verification-badge",

     

       679
       1352
        
               );

     
···

       681
       1354
        
                 existingBadge.remove();

     

       682
       1355
        
               }

     

       683
       1356
        
       

     

       684
       684
       -
               // Remove the pill container when URL changes

     

       685
       685
       -
               const existingPill = document.getElementById(

     

       686
       686
       -
                 "trusted-users-pill-container",

     

       687
       687
       -
               );

     

       688
       688
       -
               if (existingPill) {

     

       689
       689
       -
                 existingPill.remove();

     

       1357
       1357
       +
               // Check if we're on a profile page now

     

       1358
       1358
       +
               setTimeout(checkCurrentProfile, 500); // Small delay to ensure DOM has updated

     

       1359
       1359
       +
       

     

       1360
       1360
       +
               if (window.location.href.includes("bsky.app/settings")) {

     

       1361
       1361
       +
                 // Give the page a moment to fully load

     

       1362
       1362
       +
                 setTimeout(addSettingsButton, 200);

     

       690
       1363
        
               }

     

       691
       691
       -
       

     

       692
       692
       -
               // Check if we're on a profile page now

     

       693
       693
       -
               checkCurrentProfile();

     

       694
       1364
        
             }

     

       695
       1365
        
           });

     

       696
       1366

site/favicon/apple-touch-icon.png

This is a binary file and will not be displayed.

site/favicon/favicon-96x96.png

This is a binary file and will not be displayed.

site/favicon/favicon.ico

This is a binary file and will not be displayed.

+26

site/favicon/favicon.svg

···

       1
       1
       +
       <svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><svg viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg">

     

       2
       2
       +
         <defs></defs>

     

       3
       3
       +
         <path d="M120.27,7.69 C117.89,5.31 114.72,4 111.36,4 C108,4 104.83,5.31 102.45,7.69 C97.54,12.61 97.54,20.61 102.45,25.53 C104.83,27.91 108,29.22 111.36,29.22 C114.73,29.22 117.89,27.91 120.28,25.53 C125.19,20.61 125.19,12.61 120.27,7.69 Z M106.38,11.63 C107.71,10.3 109.48,9.57 111.35,9.57 C113.22,9.57 115,10.3 116.33,11.63 C119.08,14.38 119.08,18.85 116.33,21.59 C115,22.92 113.23,23.65 111.35,23.65 C109.47,23.65 107.7,22.92 106.38,21.59 C103.64,18.85 103.64,14.38 106.38,11.63 Z" fill="#E2A610"></path>

     

       4
       4
       +
         <path d="M105.51,30.95 L97.04,22.47 L103.08,16.42 C104.42,15.08 106.59,15.08 107.94,16.42 L111.56,20.04 C112.9,21.38 112.9,23.55 111.56,24.89 L105.51,30.95 Z" fill="#FFCA28"></path>

     

       5
       5
       +
         <path d="M107.69,28.76 C107.69,28.76 109.02,26.09 105.45,22.52 C101.88,18.95 99.18,20.32 99.18,20.32 L97.04,22.47 L105.51,30.95 L107.69,28.76 Z" fill="#E2A610"></path>

     

       6
       6
       +
         <path d="M120.7,65.63 A58.33 58.37 0 1 1 4.04,65.63 A58.33 58.37 0 1 1 120.7,65.63 Z" fill="#FFCA28"></path>

     

       7
       7
       +
         <path d="M109.66,65.63 A47.29 47.32 0 1 1 15.08,65.63 A47.29 47.32 0 1 1 109.66,65.63 Z" fill="#FFFFFF"></path>

     

       8
       8
       +
         <path d="M68.78,72.05 L62.37,99.76 L55.96,72.05 L28.26,65.63 L55.96,59.22 L62.37,31.5 L68.78,59.22 L96.48,65.63 Z" fill="#E0C3AB"></path>

     

       9
       9
       +
         <path d="M71.43,65.63 L86.49,89.77 L62.37,74.7 L38.25,89.77 L53.31,65.63 L38.25,41.5 L62.37,56.56 L86.49,41.5 Z" fill="#B2947C"></path>

     

       10
       10
       +
         <path d="M50.45,86.94 C50.45,86.94 63.27,77.85 68.13,72.99 C73,68.14 83.26,53.87 83.26,53.87 C86.01,50.82 89.1,43.11 89.96,40.87 C90.05,40.63 89.82,40.39 89.58,40.48 C87.62,41.23 81.41,43.68 77.08,46.44 C71.67,49.9 61.99,57.81 57.48,62.32 C52.97,66.83 47.11,75.52 43.78,80.25 C41,84.21 37.52,91.57 36.47,93.86 C36.35,94.11 36.61,94.37 36.86,94.26 C39.22,93.27 46.87,89.9 50.45,86.94 Z" fill="#212121" opacity="0.32"></path>

     

       11
       11
       +
         <path d="M82.66,52.46 C85.52,48.81 88.23,41.62 89.03,39.39 C89.13,39.12 88.87,38.86 88.59,38.95 C86.36,39.75 79.18,42.47 75.53,45.33 C71.18,48.74 56.71,60.63 56.71,60.63 L67.36,71.29 C67.37,71.29 79.25,56.81 82.66,52.46 Z" fill="#F44336"></path>

     

       12
       12
       +
         <path d="M41.41,79.48 C38.55,83.13 35.84,90.32 35.04,92.55 C34.94,92.82 35.2,93.08 35.48,92.99 C37.71,92.19 44.89,89.47 48.54,86.61 C52.89,83.2 67.36,71.31 67.36,71.31 L56.7,60.65 C56.7,60.65 44.82,75.12 41.41,79.48 Z" fill="#2F7889"></path>

     

       13
       13
       +
         <path d="M69.59,65.98 A7.56 7.57 0 1 1 54.47,65.98 A7.56 7.57 0 1 1 69.59,65.98 Z" fill="#94D1E0"></path>

     

       14
       14
       +
         <path d="M90.46,37.52 L90.46,37.52 C89.12,36.18 89.12,34 90.46,32.66 L94.02,29.1 L98.88,33.96 L95.33,37.52 C93.98,38.87 91.8,38.87 90.46,37.52 Z" fill="#F44336"></path>

     

       15
       15
       +
         <path d="M34.28,93.74 L34.28,93.74 C35.62,95.08 35.62,97.26 34.28,98.6 L30.72,102.16 L25.86,97.3 L29.41,93.74 C30.76,92.4 32.94,92.4 34.28,93.74 Z" fill="#B2947C"></path>

     

       16
       16
       +
         <path d="M102.1,65.63 L102.1,65.63 C102.1,63.73 103.64,62.19 105.54,62.19 L110.56,62.19 L110.56,69.07 L105.54,69.07 C103.64,69.07 102.1,67.53 102.1,65.63 Z" fill="#E0C3AB"></path>

     

       17
       17
       +
         <path d="M22.65,65.63 L22.65,65.63 C22.65,67.53 21.11,69.07 19.21,69.07 L14.19,69.07 L14.19,62.19 L19.21,62.19 C21.11,62.19 22.65,63.73 22.65,65.63 Z" fill="#E0C3AB"></path>

     

       18
       18
       +
         <path d="M90.46,93.74 L90.46,93.74 C91.8,92.4 93.98,92.4 95.32,93.74 L98.87,97.3 L94.01,102.16 L90.45,98.6 C89.12,97.26 89.12,95.09 90.46,93.74 Z" fill="#B2947C"></path>

     

       19
       19
       +
         <path d="M34.28,37.52 L34.28,37.52 C32.94,38.86 30.76,38.86 29.42,37.52 L25.87,33.96 L30.73,29.1 L34.29,32.66 C35.62,34 35.62,36.18 34.28,37.52 Z" fill="#B2947C"></path>

     

       20
       20
       +
         <path d="M62.37,105.38 L62.37,105.38 C64.27,105.38 65.81,106.92 65.81,108.82 L65.81,113.85 L58.94,113.85 L58.94,108.82 C58.93,106.92 60.47,105.38 62.37,105.38 Z" fill="#E0C3AB"></path>

     

       21
       21
       +
         <path d="M62.37,25.88 L62.37,25.88 C60.47,25.88 58.93,24.34 58.93,22.44 L58.93,17.41 L65.8,17.41 L65.8,22.44 C65.81,24.34 64.27,25.88 62.37,25.88 Z" fill="#E0C3AB"></path>

     

       22
       22
       +
         <path d="M111.16,65.63 Q111.16,85.852 96.87,100.151 Q82.58,114.45 62.37,114.45 Q42.16,114.45 27.87,100.151 Q13.58,85.852 13.58,65.63 Q13.58,45.408 27.87,31.109 Q42.16,16.81 62.37,16.81 Q82.58,16.81 96.87,31.109 Q111.16,45.408 111.16,65.63 Z M108.16,65.63 Q108.16,46.65 94.748,33.23 Q81.337,19.81 62.37,19.81 Q43.403,19.81 29.992,33.23 Q16.58,46.65 16.58,65.63 Q16.58,84.609 29.992,98.03 Q43.403,111.45 62.37,111.45 Q81.337,111.45 94.748,98.03 Q108.16,84.609 108.16,65.63 Z" fill="#E2A610"></path>

     

       23
       23
       +
         <path d="M8.72,64.92 C8.72,64.92 6.6,54.18 12.25,40.88 C20.59,21.26 38.6,10.46 57.97,9.62 C72.5,8.99 80.88,13.78 80.88,13.78 C80.88,13.78 69.06,12.81 60.91,13.17 C41.25,14.04 27.59,23.01 18.23,38.35 C10.53,50.99 8.72,64.92 8.72,64.92 Z" fill="#FFF59D"></path>

     

       24
       24
       +
       </svg><style>@media (prefers-color-scheme: light) { :root { filter: none; } }

     

       25
       25
       +
       @media (prefers-color-scheme: dark) { :root { filter: none; } }

     

       26
       26
       +
       </style></svg>

+21

site/favicon/site.webmanifest

···

       1
       1
       +
       {

     

       2
       2
       +
         "name": "Serif.blue",

     

       3
       3
       +
         "short_name": "Serif.blue",

     

       4
       4
       +
         "icons": [

     

       5
       5
       +
           {

     

       6
       6
       +
             "src": "/web-app-manifest-192x192.png",

     

       7
       7
       +
             "sizes": "192x192",

     

       8
       8
       +
             "type": "image/png",

     

       9
       9
       +
             "purpose": "maskable"

     

       10
       10
       +
           },

     

       11
       11
       +
           {

     

       12
       12
       +
             "src": "/web-app-manifest-512x512.png",

     

       13
       13
       +
             "sizes": "512x512",

     

       14
       14
       +
             "type": "image/png",

     

       15
       15
       +
             "purpose": "maskable"

     

       16
       16
       +
           }

     

       17
       17
       +
         ],

     

       18
       18
       +
         "theme_color": "#B6E2FF",

     

       19
       19
       +
         "background_color": "#B6E2FF",

     

       20
       20
       +
         "display": "standalone"

     

       21
       21
       +
       }

site/favicon/web-app-manifest-192x192.png

This is a binary file and will not be displayed.

site/favicon/web-app-manifest-512x512.png

This is a binary file and will not be displayed.

+262

site/index.html

···

       1
       1
       +
       <!doctype html>

     

       2
       2
       +
       <html lang="en">

     

       3
       3
       +
           <head>

     

       4
       4
       +
               <meta charset="UTF-8" />

     

       5
       5
       +
               <meta name="viewport" content="width=device-width, initial-scale=1.0" />

     

       6
       6
       +
       

     

       7
       7
       +
               <link

     

       8
       8
       +
                   rel="icon"

     

       9
       9
       +
                   type="image/png"

     

       10
       10
       +
                   href="/favicon/favicon-96x96.png"

     

       11
       11
       +
                   sizes="96x96"

     

       12
       12
       +
               />

     

       13
       13
       +
               <link rel="icon" type="image/svg+xml" href="/favicon/favicon.svg" />

     

       14
       14
       +
               <link rel="shortcut icon" href="/favicon/favicon.ico" />

     

       15
       15
       +
               <link

     

       16
       16
       +
                   rel="apple-touch-icon"

     

       17
       17
       +
                   sizes="180x180"

     

       18
       18
       +
                   href="/favicon/apple-touch-icon.png"

     

       19
       19
       +
               />

     

       20
       20
       +
               <meta name="apple-mobile-web-app-title" content="Serif.blue" />

     

       21
       21
       +
               <link rel="manifest" href="/favicon/site.webmanifest" />

     

       22
       22
       +
       

     

       23
       23
       +
               <meta

     

       24
       24
       +
                   name="description"

     

       25
       25
       +
                   content="Serif.blue - Fancy projects by Kieran"

     

       26
       26
       +
               />

     

       27
       27
       +
               <meta name="color-scheme" content="light" />

     

       28
       28
       +
       

     

       29
       29
       +
               <meta property="og:title" content="Serif.blue" />

     

       30
       30
       +
               <meta property="og:type" content="website" />

     

       31
       31
       +
               <meta property="og:url" content="https://serif.blue/" />

     

       32
       32
       +
               <meta property="og:image" content="/og.png" />

     

       33
       33
       +
       

     

       34
       34
       +
               <link rel="me" href="https://dunkirk.sh" />

     

       35
       35
       +
               <link rel="me" href="https://bsky.app/profile/dunkirk.sh" />

     

       36
       36
       +
               <link rel="me" href="https://github.com/taciturnaxolotl" />

     

       37
       37
       +
       

     

       38
       38
       +
               <title>Serif.blue</title>

     

       39
       39
       +
               <style>

     

       40
       40
       +
                   :root {

     

       41
       41
       +
                       --alice-blue: #d9f0ffff;

     

       42
       42
       +
                       --light-sky-blue: #a3d5ffff;

     

       43
       43
       +
                       --light-sky-blue-2: #83c9f4ff;

     

       44
       44
       +
                       --medium-slate-blue: #6f73d2ff;

     

       45
       45
       +
                       --glaucous: #7681b3ff;

     

       46
       46
       +
                   }

     

       47
       47
       +
       

     

       48
       48
       +
                   html,

     

       49
       49
       +
                   body {

     

       50
       50
       +
                       height: 100%;

     

       51
       51
       +
                       margin: 0;

     

       52
       52
       +
                       padding: 0;

     

       53
       53
       +
                   }

     

       54
       54
       +
       

     

       55
       55
       +
                   body {

     

       56
       56
       +
                       font-family: "Georgia", serif;

     

       57
       57
       +
                       background-color: var(--alice-blue);

     

       58
       58
       +
                       color: #333;

     

       59
       59
       +
                       line-height: 1.6;

     

       60
       60
       +
                       max-width: 1200px;

     

       61
       61
       +
                       margin: 0 auto;

     

       62
       62
       +
                       display: flex;

     

       63
       63
       +
                       flex-direction: column;

     

       64
       64
       +
                   }

     

       65
       65
       +
       

     

       66
       66
       +
                   .container {

     

       67
       67
       +
                       max-width: 800px;

     

       68
       68
       +
                       margin: 0 auto;

     

       69
       69
       +
                       padding: 20px;

     

       70
       70
       +
                       flex: 1 0 auto;

     

       71
       71
       +
                   }

     

       72
       72
       +
       

     

       73
       73
       +
                   header {

     

       74
       74
       +
                       background-color: var(--medium-slate-blue);

     

       75
       75
       +
                       color: white;

     

       76
       76
       +
                       padding: 2rem 1rem;

     

       77
       77
       +
                       text-align: center;

     

       78
       78
       +
                       margin-bottom: 20px;

     

       79
       79
       +
                       border-bottom: 1px solid var(--light-sky-blue);

     

       80
       80
       +
                   }

     

       81
       81
       +
       

     

       82
       82
       +
                   header h1 {

     

       83
       83
       +
                       margin: 0;

     

       84
       84
       +
                       font-size: 2.5rem;

     

       85
       85
       +
                       letter-spacing: 0.5px;

     

       86
       86
       +
                   }

     

       87
       87
       +
       

     

       88
       88
       +
                   header p {

     

       89
       89
       +
                       margin: 0.5rem 0 0;

     

       90
       90
       +
                       font-style: italic;

     

       91
       91
       +
                       opacity: 0.9;

     

       92
       92
       +
                   }

     

       93
       93
       +
       

     

       94
       94
       +
                   main {

     

       95
       95
       +
                       padding: 30px;

     

       96
       96
       +
                       background-color: white;

     

       97
       97
       +
                       border-radius: 5px;

     

       98
       98
       +
                       margin-top: 20px;

     

       99
       99
       +
                       box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);

     

       100
       100
       +
                   }

     

       101
       101
       +
       

     

       102
       102
       +
                   main h2 {

     

       103
       103
       +
                       color: var(--medium-slate-blue);

     

       104
       104
       +
                       border-bottom: 2px solid var(--light-sky-blue);

     

       105
       105
       +
                       padding-bottom: 10px;

     

       106
       106
       +
                       margin-top: 0;

     

       107
       107
       +
                   }

     

       108
       108
       +
       

     

       109
       109
       +
                   .card {

     

       110
       110
       +
                       background-color: var(--alice-blue);

     

       111
       111
       +
                       border-radius: 5px;

     

       112
       112
       +
                       padding: 25px;

     

       113
       113
       +
                       margin-bottom: 25px;

     

       114
       114
       +
                       box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);

     

       115
       115
       +
                       border-left: 4px solid var(--light-sky-blue);

     

       116
       116
       +
                   }

     

       117
       117
       +
       

     

       118
       118
       +
                   .card h3 {

     

       119
       119
       +
                       color: var(--glaucous);

     

       120
       120
       +
                       margin-top: 0;

     

       121
       121
       +
                   }

     

       122
       122
       +
       

     

       123
       123
       +
                   .btn {

     

       124
       124
       +
                       display: inline-block;

     

       125
       125
       +
                       background-color: var(--medium-slate-blue);

     

       126
       126
       +
                       color: white;

     

       127
       127
       +
                       padding: 8px 16px;

     

       128
       128
       +
                       border-radius: 4px;

     

       129
       129
       +
                       text-decoration: none;

     

       130
       130
       +
                       transition: background-color 0.3s;

     

       131
       131
       +
                       font-family: Arial, sans-serif;

     

       132
       132
       +
                       font-size: 0.9rem;

     

       133
       133
       +
                       letter-spacing: 0.5px;

     

       134
       134
       +
                       margin-right: 10px;

     

       135
       135
       +
                       margin-bottom: 10px;

     

       136
       136
       +
                   }

     

       137
       137
       +
       

     

       138
       138
       +
                   .btn:hover {

     

       139
       139
       +
                       background-color: var(--glaucous);

     

       140
       140
       +
                   }

     

       141
       141
       +
       

     

       142
       142
       +
                   .btn-bsky {

     

       143
       143
       +
                       background-color: var(--bsky-blue);

     

       144
       144
       +
                   }

     

       145
       145
       +
       

     

       146
       146
       +
                   .btn-bsky:hover {

     

       147
       147
       +
                       background-color: #0066cc;

     

       148
       148
       +
                   }

     

       149
       149
       +
       

     

       150
       150
       +
                   code {

     

       151
       151
       +
                       background-color: var(--light-sky-blue);

     

       152
       152
       +
                       padding: 2px 4px;

     

       153
       153
       +
                       border-radius: 4px;

     

       154
       154
       +
                       font-family: monospace;

     

       155
       155
       +
                       font-size: 0.9rem;

     

       156
       156
       +
                       letter-spacing: 0.5px;

     

       157
       157
       +
                   }

     

       158
       158
       +
       

     

       159
       159
       +
                   footer {

     

       160
       160
       +
                       text-align: center;

     

       161
       161
       +
                       padding: 20px;

     

       162
       162
       +
                       color: var(--glaucous);

     

       163
       163
       +
                       font-size: 0.9rem;

     

       164
       164
       +
                       border-top: 1px solid var(--light-sky-blue);

     

       165
       165
       +
                       flex-shrink: 0;

     

       166
       166
       +
                   }

     

       167
       167
       +
               </style>

     

       168
       168
       +
           </head>

     

       169
       169
       +
           <body>

     

       170
       170
       +
               <header>

     

       171
       171
       +
                   <h1>Serif.blue</h1>

     

       172
       172
       +
                   <p>Fancy projects by Kieran</p>

     

       173
       173
       +
               </header>

     

       174
       174
       +
       

     

       175
       175
       +
               <div class="container">

     

       176
       176
       +
                   <main>

     

       177
       177
       +
                       <h2>Some fancy tools</h2>

     

       178
       178
       +
                       <p>Hiiiii :)</p>

     

       179
       179
       +
                       <p>

     

       180
       180
       +
                           This is a random collection of tools and such that I have

     

       181
       181
       +
                           made / collected. It's fairly empty rn but should fill up

     

       182
       182
       +
                           quickly enough!

     

       183
       183
       +
                       </p>

     

       184
       184
       +
       

     

       185
       185
       +
                       <div class="card">

     

       186
       186
       +
                           <h3>Community Verifications</h3>

     

       187
       187
       +
                           <p>

     

       188
       188
       +
                               This tool allows you to designate trusted verifiers in

     

       189
       189
       +
                               the Bluesky ecosystem. When these trusted accounts

     

       190
       190
       +
                               verify other users, you'll see verification badges next

     

       191
       191
       +
                               to those profiles while browsing Bluesky.

     

       192
       192
       +
                           </p>

     

       193
       193
       +
                           <a

     

       194
       194
       +
                               href="https://tangled.sh/@dunkirk.sh/serif/raw/main/bluesky-community-verifications.user.js"

     

       195
       195
       +
                               class="btn"

     

       196
       196
       +
                               >Install with Tampermonkey</a

     

       197
       197
       +
                           >

     

       198
       198
       +
                       </div>

     

       199
       199
       +
       

     

       200
       200
       +
                       <div class="card">

     

       201
       201
       +
                           <h3>

     

       202
       202
       +
                               Dynamic bluesky (and various assorted services) pfps!

     

       203
       203
       +
                           </h3>

     

       204
       204
       +
                           <p>

     

       205
       205
       +
                               I made this inspired by

     

       206
       206
       +
                               <a

     

       207
       207
       +
                                   href="https://bsky.app/profile/did:plc:gq4fo3u6tqzzdkjlwzpb23tj"

     

       208
       208
       +
                                   >@dame.is</a

     

       209
       209
       +
                               >'s (dame.is's sounds hilarious lol) profile picture

     

       210
       210
       +
                               which changes with a sky gradient every hour. I wanted

     

       211
       211
       +
                               to do something similar but my profile picture has me in

     

       212
       212
       +
                               the foreground so I had to do some masking shenanagins

     

       213
       213
       +
                               to get it to work.

     

       214
       214
       +
                           </p>

     

       215
       215
       +
                           <p>

     

       216
       216
       +
                               Anyway if you want to set this up for yourself then grab

     

       217
       217
       +
                               a background removed version of your profile from

     

       218
       218
       +
                               <a href="https://remove.bg">remove.bg</a> (low res

     

       219
       219
       +
                               preview version is fine since this will just be a mask)

     

       220
       220
       +
                               and then run

     

       221
       221
       +
                               <code

     

       222
       222
       +
                                   >magick pfp-removebg-preview.png -alpha extract

     

       223
       223
       +
                                   pfp_matte.png</code

     

       224
       224
       +
                               >. Now you can head over to the timeline site linked

     

       225
       225
       +
                               below and customize your timeline! When you are done

     

       226
       226
       +
                               simply download the zip and extract it wherever you want

     

       227
       227
       +
                               it to live. Then <code>crontab -e</code> and add your

     

       228
       228
       +
                               script (<code

     

       229
       229
       +
                                   >2 * * * * /home/usrname/pfp/bsky-pfp-updates.sh

     

       230
       230
       +
                                   >/dev/null 2>&1</code

     

       231
       231
       +
                               >) to run 2 minutes after the hour (or at really

     

       232
       232
       +
                               whatever time you want)!

     

       233
       233
       +
                           </p>

     

       234
       234
       +
                           <p>

     

       235
       235
       +
                               btw you need to make the script executable and then run

     

       236
       236
       +
                               it once manually to generate the config

     

       237
       237
       +
                           </p>

     

       238
       238
       +
                           <a href="/pfp-updates" class="btn"

     

       239
       239
       +
                               >Customize your gradients!</a

     

       240
       240
       +
                           >

     

       241
       241
       +
                       </div>

     

       242
       242
       +
       

     

       243
       243
       +
                       <div class="card">

     

       244
       244
       +
                           <h3>More things soon?</h3>

     

       245
       245
       +
                           <p>

     

       246
       246
       +
                               Yeah probably lol; I just need to find the right next

     

       247
       247
       +
                               project 🤔

     

       248
       248
       +
                           </p>

     

       249
       249
       +
                       </div>

     

       250
       250
       +
                   </main>

     

       251
       251
       +
               </div>

     

       252
       252
       +
       

     

       253
       253
       +
               <footer>

     

       254
       254
       +
                   <p>

     

       255
       255
       +
                       Made with 💙 by <a href="https://dunkirk.sh">Kieran Klukas</a> |

     

       256
       256
       +
                       <a href="https://bsky.app/profile/dunkirk.sh">

     

       257
       257
       +
                           @dunkirk.sh on Bluesky

     

       258
       258
       +
                       </a>

     

       259
       259
       +
                   </p>

     

       260
       260
       +
               </footer>

     

       261
       261
       +
           </body>

     

       262
       262
       +
       </html>

site/og.png

This is a binary file and will not be displayed.

+204

site/og.svg

···

       1
       1
       +
       <?xml version="1.0" encoding="UTF-8" standalone="no"?>

     

       2
       2
       +
       <svg

     

       3
       3
       +
          version="1.1"

     

       4
       4
       +
          width="1200"

     

       5
       5
       +
          height="630"

     

       6
       6
       +
          id="svg22"

     

       7
       7
       +
          sodipodi:docname="og.svg"

     

       8
       8
       +
          inkscape:version="1.4.2 (ebf0e940d0, 2025-05-08)"

     

       9
       9
       +
          inkscape:export-filename="og.png"

     

       10
       10
       +
          inkscape:export-xdpi="96"

     

       11
       11
       +
          inkscape:export-ydpi="96"

     

       12
       12
       +
          xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"

     

       13
       13
       +
          xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"

     

       14
       14
       +
          xmlns="http://www.w3.org/2000/svg"

     

       15
       15
       +
          xmlns:svg="http://www.w3.org/2000/svg">

     

       16
       16
       +
         <defs

     

       17
       17
       +
            id="defs22">

     

       18
       18
       +
           <rect

     

       19
       19
       +
              x="309.78151"

     

       20
       20
       +
              y="154.89076"

     

       21
       21
       +
              width="787.36134"

     

       22
       22
       +
              height="260.30252"

     

       23
       23
       +
              id="rect1" />

     

       24
       24
       +
           <rect

     

       25
       25
       +
              x="309.78152"

     

       26
       26
       +
              y="154.89076"

     

       27
       27
       +
              width="787.36133"

     

       28
       28
       +
              height="260.30252"

     

       29
       29
       +
              id="rect1-9" />

     

       30
       30
       +
         </defs>

     

       31
       31
       +
         <sodipodi:namedview

     

       32
       32
       +
            id="namedview22"

     

       33
       33
       +
            pagecolor="#ffffff"

     

       34
       34
       +
            bordercolor="#000000"

     

       35
       35
       +
            borderopacity="0.25"

     

       36
       36
       +
            inkscape:showpageshadow="2"

     

       37
       37
       +
            inkscape:pageopacity="0.0"

     

       38
       38
       +
            inkscape:pagecheckerboard="0"

     

       39
       39
       +
            inkscape:deskcolor="#d1d1d1"

     

       40
       40
       +
            inkscape:zoom="0.9296875"

     

       41
       41
       +
            inkscape:cx="571.15966"

     

       42
       42
       +
            inkscape:cy="248.47059"

     

       43
       43
       +
            inkscape:window-width="2256"

     

       44
       44
       +
            inkscape:window-height="1504"

     

       45
       45
       +
            inkscape:window-x="0"

     

       46
       46
       +
            inkscape:window-y="0"

     

       47
       47
       +
            inkscape:window-maximized="1"

     

       48
       48
       +
            inkscape:current-layer="svg21" />

     

       49
       49
       +
         <svg

     

       50
       50
       +
            viewBox="0 0 128 128"

     

       51
       51
       +
            version="1.1"

     

       52
       52
       +
            id="svg21"

     

       53
       53
       +
            width="100%"

     

       54
       54
       +
            height="100%"

     

       55
       55
       +
            transform="translate(536)">

     

       56
       56
       +
           <defs

     

       57
       57
       +
              id="defs1" />

     

       58
       58
       +
           <rect

     

       59
       59
       +
              style="fill:#b7e2ff;stroke:#9fb4de;stroke-width:0.212711"

     

       60
       60
       +
              id="rect22"

     

       61
       61
       +
              width="243.5968"

     

       62
       62
       +
              height="127.78729"

     

       63
       63
       +
              x="-57.798409"

     

       64
       64
       +
              y="0.10635584"

     

       65
       65
       +
              sodipodi:insensitive="true" />

     

       66
       66
       +
           <path

     

       67
       67
       +
              d="m -23.077937,6.6686188 c -0.595,-0.5950003 -1.3875,-0.9225003 -2.2275,-0.9225003 -0.84,0 -1.6325,0.3275 -2.2275,0.9225003 -1.2275,1.2300002 -1.2275,3.2300002 0,4.4600002 0.595,0.595 1.3875,0.9225 2.2275,0.9225 0.8425,0 1.6325,-0.3275 2.23,-0.9225 1.2275,-1.23 1.2275,-3.23 -0.002,-4.4600002 z m -3.4725,0.9850002 c 0.3325,-0.3325002 0.775,-0.5150002 1.2425,-0.5150002 0.4675,0 0.9125,0.1825 1.245,0.5150002 0.6875,0.6875 0.6875,1.805 0,2.49 -0.3325,0.3325 -0.775,0.515 -1.245,0.515 -0.47,0 -0.9125,-0.1825 -1.2425,-0.515 -0.685,-0.685 -0.685,-1.8025 0,-2.49 z"

     

       68
       68
       +
              fill="#e2a610"

     

       69
       69
       +
              id="path1"

     

       70
       70
       +
              style="stroke-width:0.25" />

     

       71
       71
       +
           <path

     

       72
       72
       +
              d="m -26.767937,12.483619 -2.1175,-2.12 1.51,-1.5125 c 0.335,-0.335 0.8775,-0.335 1.215,0 l 0.905,0.905 c 0.335,0.335 0.335,0.8775 0,1.2125 z"

     

       73
       73
       +
              fill="#ffca28"

     

       74
       74
       +
              id="path2"

     

       75
       75
       +
              style="stroke-width:0.25" />

     

       76
       76
       +
           <path

     

       77
       77
       +
              d="m -26.222937,11.936119 c 0,0 0.3325,-0.6675 -0.56,-1.56 -0.8925,-0.8925 -1.5675,-0.55 -1.5675,-0.55 l -0.535,0.5375 2.1175,2.12 z"

     

       78
       78
       +
              fill="#e2a610"

     

       79
       79
       +
              id="path3"

     

       80
       80
       +
              style="stroke-width:0.25" />

     

       81
       81
       +
           <path

     

       82
       82
       +
              d="m -22.970437,21.153619 a 14.5825,14.5925 0 1 1 -29.165,0 14.5825,14.5925 0 1 1 29.165,0 z"

     

       83
       83
       +
              fill="#ffca28"

     

       84
       84
       +
              id="path4"

     

       85
       85
       +
              style="stroke-width:0.25" />

     

       86
       86
       +
           <path

     

       87
       87
       +
              d="m -25.730437,21.153619 a 11.8225,11.83 0 1 1 -23.645,0 11.8225,11.83 0 1 1 23.645,0 z"

     

       88
       88
       +
              fill="#ffffff"

     

       89
       89
       +
              id="path5"

     

       90
       90
       +
              style="stroke-width:0.25" />

     

       91
       91
       +
           <path

     

       92
       92
       +
              d="m -35.950437,22.758619 -1.6025,6.9275 -1.6025,-6.9275 -6.925,-1.605 6.925,-1.6025 1.6025,-6.93 1.6025,6.93 6.925,1.6025 z"

     

       93
       93
       +
              fill="#e0c3ab"

     

       94
       94
       +
              id="path6"

     

       95
       95
       +
              style="stroke-width:0.25" />

     

       96
       96
       +
           <path

     

       97
       97
       +
              d="m -35.287937,21.153619 3.765,6.035 -6.03,-3.7675 -6.03,3.7675 3.765,-6.035 -3.765,-6.0325 6.03,3.765 6.03,-3.765 z"

     

       98
       98
       +
              fill="#b2947c"

     

       99
       99
       +
              id="path7"

     

       100
       100
       +
              style="stroke-width:0.25" />

     

       101
       101
       +
           <path

     

       102
       102
       +
              d="m -40.532937,26.481119 c 0,0 3.205,-2.2725 4.42,-3.4875 1.2175,-1.2125 3.7825,-4.78 3.7825,-4.78 0.6875,-0.7625 1.46,-2.69 1.675,-3.25 0.0225,-0.06 -0.035,-0.12 -0.095,-0.0975 -0.49,0.1875 -2.0425,0.8 -3.125,1.49 -1.3525,0.865 -3.7725,2.8425 -4.9,3.97 -1.1275,1.1275 -2.5925,3.3 -3.425,4.4825 -0.695,0.99 -1.565,2.83 -1.8275,3.4025 -0.03,0.0625 0.035,0.1275 0.0975,0.1 0.59,-0.2475 2.5025,-1.09 3.3975,-1.83 z"

     

       103
       103
       +
              fill="#212121"

     

       104
       104
       +
              opacity="0.32"

     

       105
       105
       +
              id="path8"

     

       106
       106
       +
              style="stroke-width:0.25" />

     

       107
       107
       +
           <path

     

       108
       108
       +
              d="m -32.480437,17.861119 c 0.715,-0.9125 1.3925,-2.71 1.5925,-3.2675 0.025,-0.0675 -0.04,-0.1325 -0.11,-0.11 -0.5575,0.2 -2.3525,0.88 -3.265,1.595 -1.0875,0.8525 -4.705,3.825 -4.705,3.825 l 2.6625,2.665 c 0.002,0 2.9725,-3.62 3.825,-4.7075 z"

     

       109
       109
       +
              fill="#f44336"

     

       110
       110
       +
              id="path9"

     

       111
       111
       +
              style="stroke-width:0.25" />

     

       112
       112
       +
           <path

     

       113
       113
       +
              d="m -42.792937,24.616119 c -0.715,0.9125 -1.3925,2.71 -1.5925,3.2675 -0.025,0.0675 0.04,0.1325 0.11,0.11 0.5575,-0.2 2.3525,-0.88 3.265,-1.595 1.0875,-0.8525 4.705,-3.825 4.705,-3.825 l -2.665,-2.665 c 0,0 -2.97,3.6175 -3.8225,4.7075 z"

     

       114
       114
       +
              fill="#2f7889"

     

       115
       115
       +
              id="path10"

     

       116
       116
       +
              style="stroke-width:0.25" />

     

       117
       117
       +
           <path

     

       118
       118
       +
              d="m -35.747937,21.241119 a 1.89,1.8925 0 1 1 -3.78,0 1.89,1.8925 0 1 1 3.78,0 z"

     

       119
       119
       +
              fill="#94d1e0"

     

       120
       120
       +
              id="path11"

     

       121
       121
       +
              style="stroke-width:0.25" />

     

       122
       122
       +
           <path

     

       123
       123
       +
              d="m -30.530437,14.126119 v 0 c -0.335,-0.335 -0.335,-0.88 0,-1.215 l 0.89,-0.89 1.215,1.215 -0.8875,0.89 c -0.3375,0.3375 -0.8825,0.3375 -1.2175,0 z"

     

       124
       124
       +
              fill="#f44336"

     

       125
       125
       +
              id="path12"

     

       126
       126
       +
              style="stroke-width:0.25" />

     

       127
       127
       +
           <path

     

       128
       128
       +
              d="m -44.575437,28.181119 v 0 c 0.335,0.335 0.335,0.88 0,1.215 l -0.89,0.89 -1.215,-1.215 0.8875,-0.89 c 0.3375,-0.335 0.8825,-0.335 1.2175,0 z"

     

       129
       129
       +
              fill="#b2947c"

     

       130
       130
       +
              id="path13"

     

       131
       131
       +
              style="stroke-width:0.25" />

     

       132
       132
       +
           <path

     

       133
       133
       +
              d="m -27.620437,21.153619 v 0 c 0,-0.475 0.385,-0.86 0.86,-0.86 h 1.255 v 1.72 h -1.255 c -0.475,0 -0.86,-0.385 -0.86,-0.86 z"

     

       134
       134
       +
              fill="#e0c3ab"

     

       135
       135
       +
              id="path14"

     

       136
       136
       +
              style="stroke-width:0.25" />

     

       137
       137
       +
           <path

     

       138
       138
       +
              d="m -47.482937,21.153619 v 0 c 0,0.475 -0.385,0.86 -0.86,0.86 h -1.255 v -1.72 h 1.255 c 0.475,0 0.86,0.385 0.86,0.86 z"

     

       139
       139
       +
              fill="#e0c3ab"

     

       140
       140
       +
              id="path15"

     

       141
       141
       +
              style="stroke-width:0.25" />

     

       142
       142
       +
           <path

     

       143
       143
       +
              d="m -30.530437,28.181119 v 0 c 0.335,-0.335 0.88,-0.335 1.215,0 l 0.8875,0.89 -1.215,1.215 -0.89,-0.89 c -0.3325,-0.335 -0.3325,-0.8775 0.002,-1.215 z"

     

       144
       144
       +
              fill="#b2947c"

     

       145
       145
       +
              id="path16"

     

       146
       146
       +
              style="stroke-width:0.25" />

     

       147
       147
       +
           <path

     

       148
       148
       +
              d="m -44.575437,14.126119 v 0 c -0.335,0.335 -0.88,0.335 -1.215,0 l -0.8875,-0.89 1.215,-1.215 0.89,0.89 c 0.3325,0.335 0.3325,0.88 -0.002,1.215 z"

     

       149
       149
       +
              fill="#b2947c"

     

       150
       150
       +
              id="path17"

     

       151
       151
       +
              style="stroke-width:0.25" />

     

       152
       152
       +
           <path

     

       153
       153
       +
              d="m -37.552937,31.091119 v 0 c 0.475,0 0.86,0.385 0.86,0.86 v 1.2575 h -1.7175 v -1.2575 c -0.002,-0.475 0.3825,-0.86 0.8575,-0.86 z"

     

       154
       154
       +
              fill="#e0c3ab"

     

       155
       155
       +
              id="path18"

     

       156
       156
       +
              style="stroke-width:0.25" />

     

       157
       157
       +
           <path

     

       158
       158
       +
              d="m -37.552937,11.216119 v 0 c -0.475,0 -0.86,-0.385 -0.86,-0.86 v -1.2575 h 1.7175 v 1.2575 c 0.002,0.475 -0.3825,0.86 -0.8575,0.86 z"

     

       159
       159
       +
              fill="#e0c3ab"

     

       160
       160
       +
              id="path19"

     

       161
       161
       +
              style="stroke-width:0.25" />

     

       162
       162
       +
           <path

     

       163
       163
       +
              d="m -25.355437,21.153619 q 0,5.0555 -3.5725,8.63025 -3.5725,3.57475 -8.625,3.57475 -5.0525,0 -8.625,-3.57475 -3.5725,-3.57475 -3.5725,-8.63025 0,-5.0555 3.5725,-8.63025 3.5725,-3.57475 8.625,-3.57475 5.0525,0 8.625,3.57475 3.5725,3.57475 3.5725,8.63025 z m -0.75,0 q 0,-4.745 -3.353,-8.1 -3.35275,-3.355 -8.0945,-3.355 -4.74175,0 -8.0945,3.355 -3.353,3.355 -3.353,8.1 0,4.74475 3.353,8.1 3.35275,3.355 8.0945,3.355 4.74175,0 8.0945,-3.355 3.353,-3.35525 3.353,-8.1 z"

     

       164
       164
       +
              fill="#e2a610"

     

       165
       165
       +
              id="path20"

     

       166
       166
       +
              style="stroke-width:0.25" />

     

       167
       167
       +
           <path

     

       168
       168
       +
              d="m -50.965437,20.976119 c 0,0 -0.53,-2.685 0.8825,-6.01 2.085,-4.905 6.5875,-7.6050002 11.43,-7.8150002 3.6325,-0.1575 5.7275,1.0400002 5.7275,1.0400002 0,0 -2.955,-0.2425 -4.9925,-0.1525 -4.915,0.2175 -8.33,2.46 -10.67,6.295 -1.925,3.16 -2.3775,6.6425 -2.3775,6.6425 z"

     

       169
       169
       +
              fill="#fff59d"

     

       170
       170
       +
              id="path21"

     

       171
       171
       +
              style="stroke-width:0.25" />

     

       172
       172
       +
           <text

     

       173
       173
       +
              xml:space="preserve"

     

       174
       174
       +
              transform="matrix(0.20317468,0,0,0.2031746,-79.435012,10.708496)"

     

       175
       175
       +
              id="text1"

     

       176
       176
       +
              style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:146.667px;font-family:Serif;-inkscape-font-specification:'Serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;text-align:center;writing-mode:lr-tb;direction:ltr;white-space:pre;shape-inside:url(#rect1);display:inline;fill:#6f73d2;fill-opacity:1;stroke:none;stroke-width:0.895748"

     

       177
       177
       +
              x="358.14536"

     

       178
       178
       +
              y="0"><tspan

     

       179
       179
       +
                x="342.45196"

     

       180
       180
       +
                y="284.65655"

     

       181
       181
       +
                id="tspan4">Serif.blue</tspan></text>

     

       182
       182
       +
           <text

     

       183
       183
       +
              xml:space="preserve"

     

       184
       184
       +
              transform="matrix(0.20317449,0,0,0.2031746,-79.065988,41.636014)"

     

       185
       185
       +
              id="text1-5"

     

       186
       186
       +
              style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:48px;font-family:Serif;-inkscape-font-specification:'Serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;text-align:start;writing-mode:lr-tb;direction:ltr;white-space:pre;shape-inside:url(#rect1-9);display:inline;fill:#6f73d2;fill-opacity:1;stroke:none;stroke-width:0.895748"

     

       187
       187
       +
              x="323.03906"

     

       188
       188
       +
              y="0"><tspan

     

       189
       189
       +
                x="379.77832"

     

       190
       190
       +
                y="197.35938"

     

       191
       191
       +
                id="tspan6"><tspan

     

       192
       192
       +
                  style="text-align:center;text-anchor:middle"

     

       193
       193
       +
                  id="tspan5">little tweaks, projects, and </tspan></tspan><tspan

     

       194
       194
       +
                x="428.3877"

     

       195
       195
       +
                y="257.35938"

     

       196
       196
       +
                id="tspan10"><tspan

     

       197
       197
       +
                  style="text-align:center;text-anchor:middle"

     

       198
       198
       +
                  id="tspan7">userscripts for atproto</tspan></tspan></text>

     

       199
       199
       +
         </svg>

     

       200
       200
       +
         <style

     

       201
       201
       +
            id="style21">@media (prefers-color-scheme: light) { :root { filter: none; } }

     

       202
       202
       +
       @media (prefers-color-scheme: dark) { :root { filter: none; } }

     

       203
       203
       +
       </style>

     

       204
       204
       +
       </svg>

+1225

site/pfp-updates/bsky-pfp-updates.sh

···

       1
       1
       +
       #!/usr/bin/env bash

     

       2
       2
       +
       

     

       3
       3
       +
       # Dynamic Profile Picture Updater

     

       4
       4
       +
       # Automatically updates your profile pictures across platforms based on time and weather

     

       5
       5
       +
       # Usage: ./auto_pfp.sh [options]

     

       6
       6
       +
       

     

       7
       7
       +
       set -euo pipefail

     

       8
       8
       +
       

     

       9
       9
       +
       # Default configuration

     

       10
       10
       +
       SCRIPT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"

     

       11
       11
       +
       CONFIG_FILE="${SCRIPT_DIR}/config.json"

     

       12
       12
       +
       IMAGES_DIR="${SCRIPT_DIR}/rendered_timelines"

     

       13
       13
       +
       LOG_FILE="${SCRIPT_DIR}/auto_pfp.log"

     

       14
       14
       +
       SESSION_FILE="${SCRIPT_DIR}/.bluesky_session"

     

       15
       15
       +
       DEFAULT_TIMELINE="sunny"

     

       16
       16
       +
       

     

       17
       17
       +
       # Colors for output

     

       18
       18
       +
       RED='\033[0;31m'

     

       19
       19
       +
       GREEN='\033[0;32m'

     

       20
       20
       +
       YELLOW='\033[1;33m'

     

       21
       21
       +
       BLUE='\033[0;34m'

     

       22
       22
       +
       NC='\033[0m' # No Color

     

       23
       23
       +
       

     

       24
       24
       +
       # Logging function

     

       25
       25
       +
       log() {

     

       26
       26
       +
           local level="$1"

     

       27
       27
       +
           shift

     

       28
       28
       +
           local message="$*"

     

       29
       29
       +
           local timestamp=$(date '+%Y-%m-%d %H:%M:%S')

     

       30
       30
       +
           echo -e "${timestamp} - ${level} - ${message}" | tee -a "$LOG_FILE" >&2

     

       31
       31
       +
       }

     

       32
       32
       +
       

     

       33
       33
       +
       log_info() { log "${BLUE}[INFO]${NC}" "$@"; }

     

       34
       34
       +
       log_success() { log "${GREEN}[SUCCESS]${NC}" "$@"; }

     

       35
       35
       +
       log_warning() { log "${YELLOW}[WARNING]${NC}" "$@"; }

     

       36
       36
       +
       log_error() { log "${RED}[ERROR]${NC}" "$@"; }

     

       37
       37
       +
       

     

       38
       38
       +
       # Check dependencies

     

       39
       39
       +
       check_dependencies() {

     

       40
       40
       +
           local missing_deps=()

     

       41
       41
       +
       

     

       42
       42
       +
           if ! command -v curl &> /dev/null; then

     

       43
       43
       +
               missing_deps+=("curl")

     

       44
       44
       +
           fi

     

       45
       45
       +
       

     

       46
       46
       +
           if ! command -v jq &> /dev/null; then

     

       47
       47
       +
               missing_deps+=("jq")

     

       48
       48
       +
           fi

     

       49
       49
       +
           

     

       50
       50
       +
           if ! command -v sha256sum &> /dev/null; then

     

       51
       51
       +
               missing_deps+=("sha256sum")

     

       52
       52
       +
           fi

     

       53
       53
       +
       

     

       54
       54
       +
           if [ ${#missing_deps[@]} -ne 0 ]; then

     

       55
       55
       +
               log_error "Missing required dependencies:"

     

       56
       56
       +
               for dep in "${missing_deps[@]}"; do

     

       57
       57
       +
                   echo "  - $dep"

     

       58
       58
       +
               done

     

       59
       59
       +
               exit 1

     

       60
       60
       +
           fi

     

       61
       61
       +
       }

     

       62
       62
       +
       

     

       63
       63
       +
       # Create default config file

     

       64
       64
       +
       create_default_config() {

     

       65
       65
       +
           cat > "$CONFIG_FILE" << 'EOF'

     

       66
       66
       +
       {

     

       67
       67
       +
         "platforms": {

     

       68
       68
       +
           "bluesky": {

     

       69
       69
       +
             "enabled": true,

     

       70
       70
       +
             "handle": "your-handle.bsky.social",

     

       71
       71
       +
             "password": "your-app-password"

     

       72
       72
       +
           },

     

       73
       73
       +
           "slack": {

     

       74
       74
       +
             "enabled": false,

     

       75
       75
       +
             "user_token": ""

     

       76
       76
       +
           }

     

       77
       77
       +
         },

     

       78
       78
       +
         "weather": {

     

       79
       79
       +
           "enabled": false,

     

       80
       80
       +
           "api_key": "",

     

       81
       81
       +
           "location": "auto",

     

       82
       82
       +
           "timeline_mapping": {

     

       83
       83
       +
             "clear": "sunny",

     

       84
       84
       +
             "clouds": "cloudy",

     

       85
       85
       +
             "rain": "rainy",

     

       86
       86
       +
             "drizzle": "rainy",

     

       87
       87
       +
             "thunderstorm": "stormy",

     

       88
       88
       +
             "snow": "snowy",

     

       89
       89
       +
             "mist": "cloudy",

     

       90
       90
       +
             "fog": "cloudy"

     

       91
       91
       +
           }

     

       92
       92
       +
         },

     

       93
       93
       +
         "settings": {

     

       94
       94
       +
           "default_timeline": "sunny",

     

       95
       95
       +
           "images_dir": "./rendered_timelines"

     

       96
       96
       +
         }

     

       97
       97
       +
       }

     

       98
       98
       +
       EOF

     

       99
       99
       +
           log_info "Created default config file: $CONFIG_FILE"

     

       100
       100
       +
           log_warning "Please edit the config file with your platform credentials"

     

       101
       101
       +
       }

     

       102
       102
       +
       

     

       103
       103
       +
       # Load configuration

     

       104
       104
       +
       load_config() {

     

       105
       105
       +
           if [ ! -f "$CONFIG_FILE" ]; then

     

       106
       106
       +
               log_warning "Config file not found, creating default..."

     

       107
       107
       +
               create_default_config

     

       108
       108
       +
               exit 1

     

       109
       109
       +
           fi

     

       110
       110
       +
       

     

       111
       111
       +
           # Read platform settings

     

       112
       112
       +
           BLUESKY_ENABLED=$(jq -r '.platforms.bluesky.enabled' "$CONFIG_FILE")

     

       113
       113
       +
           BLUESKY_HANDLE=$(jq -r '.platforms.bluesky.handle' "$CONFIG_FILE")

     

       114
       114
       +
           BLUESKY_PASSWORD=$(jq -r '.platforms.bluesky.password' "$CONFIG_FILE")

     

       115
       115
       +
           SLACK_ENABLED=$(jq -r '.platforms.slack.enabled' "$CONFIG_FILE")

     

       116
       116
       +
           SLACK_USER_TOKEN=$(jq -r '.platforms.slack.user_token' "$CONFIG_FILE")

     

       117
       117
       +
       

     

       118
       118
       +
           # Read weather settings

     

       119
       119
       +
           WEATHER_ENABLED=$(jq -r '.weather.enabled' "$CONFIG_FILE")

     

       120
       120
       +
           WEATHER_API_KEY=$(jq -r '.weather.api_key' "$CONFIG_FILE")

     

       121
       121
       +
           WEATHER_LOCATION=$(jq -r '.weather.location' "$CONFIG_FILE")

     

       122
       122
       +
       

     

       123
       123
       +
           # Read general settings

     

       124
       124
       +
           DEFAULT_TIMELINE=$(jq -r '.settings.default_timeline' "$CONFIG_FILE")

     

       125
       125
       +
           IMAGES_DIR=$(jq -r '.settings.images_dir' "$CONFIG_FILE")

     

       126
       126
       +
       

     

       127
       127
       +
           # Validate at least one platform is enabled and configured

     

       128
       128
       +
           local enabled_platforms=()

     

       129
       129
       +
       

     

       130
       130
       +
           # Check Bluesky

     

       131
       131
       +
           if [ "$BLUESKY_ENABLED" = "true" ]; then

     

       132
       132
       +
               if [ "$BLUESKY_HANDLE" = "your-handle.bsky.social" ] || [ "$BLUESKY_HANDLE" = "null" ] || [ -z "$BLUESKY_HANDLE" ]; then

     

       133
       133
       +
                   log_warning "Bluesky enabled but handle not configured - will be skipped"

     

       134
       134
       +
                   BLUESKY_ENABLED="false"

     

       135
       135
       +
               elif [ "$BLUESKY_PASSWORD" = "your-app-password" ] || [ "$BLUESKY_PASSWORD" = "null" ] || [ -z "$BLUESKY_PASSWORD" ]; then

     

       136
       136
       +
                   log_warning "Bluesky enabled but password not configured - will be skipped"

     

       137
       137
       +
                   BLUESKY_ENABLED="false"

     

       138
       138
       +
               else

     

       139
       139
       +
                   enabled_platforms+=("Bluesky")

     

       140
       140
       +
               fi

     

       141
       141
       +
           fi

     

       142
       142
       +
       

     

       143
       143
       +
           # Check Slack

     

       144
       144
       +
           if [ "$SLACK_ENABLED" = "true" ]; then

     

       145
       145
       +
               if [ -z "$SLACK_USER_TOKEN" ] || [ "$SLACK_USER_TOKEN" = "null" ]; then

     

       146
       146
       +
                   log_warning "Slack enabled but no user token provided - will be skipped"

     

       147
       147
       +
                   SLACK_ENABLED="false"

     

       148
       148
       +
               else

     

       149
       149
       +
                   enabled_platforms+=("Slack")

     

       150
       150
       +
               fi

     

       151
       151
       +
           fi

     

       152
       152
       +
       

     

       153
       153
       +
           # Ensure at least one platform is enabled

     

       154
       154
       +
           if [ ${#enabled_platforms[@]} -eq 0 ]; then

     

       155
       155
       +
               log_error "No platforms are properly configured. Please check your config file."

     

       156
       156
       +
               exit 1

     

       157
       157
       +
           fi

     

       158
       158
       +
       

     

       159
       159
       +
           # Convert relative paths to absolute

     

       160
       160
       +
           if [[ ! "$IMAGES_DIR" =~ ^/ ]]; then

     

       161
       161
       +
               IMAGES_DIR="${SCRIPT_DIR}/${IMAGES_DIR}"

     

       162
       162
       +
           fi

     

       163
       163
       +
       

     

       164
       164
       +
           log_info "Loaded configuration with enabled platforms: ${enabled_platforms[*]}"

     

       165
       165
       +
       }

     

       166
       166
       +
       

     

       167
       167
       +
       # Authenticate with Bluesky

     

       168
       168
       +
       authenticate_bluesky() {

     

       169
       169
       +
           if [ "$BLUESKY_ENABLED" != "true" ]; then

     

       170
       170
       +
               return 1

     

       171
       171
       +
           fi

     

       172
       172
       +
       

     

       173
       173
       +
           log_info "Authenticating with Bluesky..."

     

       174
       174
       +
       

     

       175
       175
       +
           local auth_response

     

       176
       176
       +
           auth_response=$(curl -s -X POST \

     

       177
       177
       +
               "https://bsky.social/xrpc/com.atproto.server.createSession" \

     

       178
       178
       +
               -H "Content-Type: application/json" \

     

       179
       179
       +
               -d "{\"identifier\":\"$BLUESKY_HANDLE\",\"password\":\"$BLUESKY_PASSWORD\"}")

     

       180
       180
       +
       

     

       181
       181
       +
           if echo "$auth_response" | jq -e '.accessJwt' > /dev/null 2>&1; then

     

       182
       182
       +
               echo "$auth_response" > "$SESSION_FILE"

     

       183
       183
       +
               log_success "Successfully authenticated with Bluesky"

     

       184
       184
       +
               return 0

     

       185
       185
       +
           else

     

       186
       186
       +
               log_error "Bluesky authentication failed: $(echo "$auth_response" | jq -r '.message // "Unknown error"')"

     

       187
       187
       +
               return 1

     

       188
       188
       +
           fi

     

       189
       189
       +
       }

     

       190
       190
       +
       

     

       191
       191
       +
       # Get session token

     

       192
       192
       +
       get_session_token() {

     

       193
       193
       +
           if [ ! -f "$SESSION_FILE" ]; then

     

       194
       194
       +
               return 1

     

       195
       195
       +
           fi

     

       196
       196
       +
       

     

       197
       197
       +
           # Check if session is still valid (sessions typically last 24 hours)

     

       198
       198
       +
           local session_age=$(($(date +%s) - $(stat -c %Y "$SESSION_FILE" 2>/dev/null || echo 0)))

     

       199
       199
       +
           if [ $session_age -gt 86400 ]; then  # 24 hours

     

       200
       200
       +
               log_info "Session expired, re-authenticating..."

     

       201
       201
       +
               rm -f "$SESSION_FILE"

     

       202
       202
       +
               return 1

     

       203
       203
       +
           fi

     

       204
       204
       +
       

     

       205
       205
       +
           jq -r '.accessJwt' "$SESSION_FILE" 2>/dev/null || return 1

     

       206
       206
       +
       }

     

       207
       207
       +
       

     

       208
       208
       +
       # Calculate SHA256 hash of image file

     

       209
       209
       +
       calculate_image_hash() {

     

       210
       210
       +
           local image_path="$1"

     

       211
       211
       +
           if [ ! -f "$image_path" ]; then

     

       212
       212
       +
               return 1

     

       213
       213
       +
           fi

     

       214
       214
       +
           sha256sum "$image_path" | cut -d' ' -f1

     

       215
       215
       +
       }

     

       216
       216
       +
       

     

       217
       217
       +
       # Get blob reference from ATProto record

     

       218
       218
       +
       get_cached_blob() {

     

       219
       219
       +
           local weather_type="$1"

     

       220
       220
       +
           local hour="$2"

     

       221
       221
       +
           local image_hash="$3"

     

       222
       222
       +
           local token="$4"

     

       223
       223
       +
           local did

     

       224
       224
       +
           

     

       225
       225
       +
           did=$(jq -r '.did' "$SESSION_FILE")

     

       226
       226
       +
           local rkey="${weather_type}_hour_${hour}"

     

       227
       227
       +
           

     

       228
       228
       +
           # Validate DID

     

       229
       229
       +
           if [ -z "$did" ] || [ "$did" = "null" ]; then

     

       230
       230
       +
               log_error "Could not get DID from session file"

     

       231
       231
       +
               return 1

     

       232
       232
       +
           fi

     

       233
       233
       +
           

     

       234
       234
       +
           log_info "Checking for cached blob: $weather_type hour $hour (DID: ${did:0:20}...)"

     

       235
       235
       +
           

     

       236
       236
       +
           # Try to get existing record

     

       237
       237
       +
           local record_response

     

       238
       238
       +
           record_response=$(curl -s \

     

       239
       239
       +
               "https://bsky.social/xrpc/com.atproto.repo.getRecord?repo=$did&collection=pfp.updates.${weather_type}&rkey=$rkey" \

     

       240
       240
       +
               -H "Authorization: Bearer $token")

     

       241
       241
       +
           

     

       242
       242
       +
           if echo "$record_response" | jq -e '.value' > /dev/null 2>&1; then

     

       243
       243
       +
               local stored_hash=$(echo "$record_response" | jq -r '.value.imageHash // empty')

     

       244
       244
       +
               local stored_blob=$(echo "$record_response" | jq -c '.value.blobRef // empty')

     

       245
       245
       +
               

     

       246
       246
       +
               if [ "$stored_hash" = "$image_hash" ] && [ -n "$stored_blob" ] && [ "$stored_blob" != "empty" ]; then

     

       247
       247
       +
                   log_success "Found cached blob with matching hash"

     

       248
       248
       +
                   echo "$stored_blob"

     

       249
       249
       +
                   return 0

     

       250
       250
       +
               else

     

       251
       251
       +
                   log_info "Cached blob found but hash mismatch or missing blob reference"

     

       252
       252
       +
                   return 1

     

       253
       253
       +
               fi

     

       254
       254
       +
           else

     

       255
       255
       +
               log_info "No cached blob record found"

     

       256
       256
       +
               return 1

     

       257
       257
       +
           fi

     

       258
       258
       +
       }

     

       259
       259
       +
       

     

       260
       260
       +
       # Store blob reference in ATProto record

     

       261
       261
       +
       store_blob_reference() {

     

       262
       262
       +
           local weather_type="$1"

     

       263
       263
       +
           local hour="$2"

     

       264
       264
       +
           local image_hash="$3"

     

       265
       265
       +
           local blob_ref="$4"

     

       266
       266
       +
           local token="$5"

     

       267
       267
       +
           local did

     

       268
       268
       +
           

     

       269
       269
       +
           did=$(jq -r '.did' "$SESSION_FILE")

     

       270
       270
       +
           local rkey="${weather_type}_hour_${hour}"

     

       271
       271
       +
           

     

       272
       272
       +
           # Validate DID

     

       273
       273
       +
           if [ -z "$did" ] || [ "$did" = "null" ]; then

     

       274
       274
       +
               log_error "Could not get DID from session file"

     

       275
       275
       +
               return 1

     

       276
       276
       +
           fi

     

       277
       277
       +
           

     

       278
       278
       +
           log_info "Storing blob reference for $weather_type hour $hour (DID: ${did:0:20}...)"

     

       279
       279
       +
           

     

       280
       280
       +
           # Create record data

     

       281
       281
       +
           local record_data

     

       282
       282
       +
           record_data=$(jq -n \

     

       283
       283
       +
               --arg type_field "pfp.updates.${weather_type}" \

     

       284
       284
       +
               --arg hash "$image_hash" \

     

       285
       285
       +
               --argjson blob "$blob_ref" \

     

       286
       286
       +
               --arg weather "$weather_type" \

     

       287
       287
       +
               --arg hour "$hour" \

     

       288
       288
       +
               --arg timestamp "$(date -u +%Y-%m-%dT%H:%M:%S.%3NZ)" \

     

       289
       289
       +
               '{

     

       290
       290
       +
                   "$type": $type_field,

     

       291
       291
       +
                   "timeline": $weather,

     

       292
       292
       +
                   "hour": $hour,

     

       293
       293
       +
                   "imageHash": $hash,

     

       294
       294
       +
                   "blobRef": $blob,

     

       295
       295
       +
                   "createdAt": $timestamp

     

       296
       296
       +
               }')

     

       297
       297
       +
           

     

       298
       298
       +
           log_info "Record data: $record_data"

     

       299
       299
       +
           

     

       300
       300
       +
           # Create the request payload using direct JSON construction

     

       301
       301
       +
           local request_payload

     

       302
       302
       +
           request_payload=$(jq -n \

     

       303
       303
       +
               --arg repo "$did" \

     

       304
       304
       +
               --arg collection "pfp.updates.${weather_type}" \

     

       305
       305
       +
               --arg rkey "$rkey" \

     

       306
       306
       +
               --argjson record "$record_data" \

     

       307
       307
       +
               '{

     

       308
       308
       +
                   "repo": $repo,

     

       309
       309
       +
                   "collection": $collection,

     

       310
       310
       +
                   "rkey": $rkey,

     

       311
       311
       +
                   "record": $record

     

       312
       312
       +
               }')

     

       313
       313
       +
           

     

       314
       314
       +
           log_info "Request payload preview: $(echo "$request_payload" | jq -c '.' | head -c 200)..."

     

       315
       315
       +
           

     

       316
       316
       +
           # Validate the payload has required fields

     

       317
       317
       +
           if ! echo "$request_payload" | jq -e '.repo' > /dev/null 2>&1; then

     

       318
       318
       +
               log_error "Request payload missing 'repo' field"

     

       319
       319
       +
               log_error "DID value: '$did'"

     

       320
       320
       +
               log_error "Full payload: $request_payload"

     

       321
       321
       +
               return 1

     

       322
       322
       +
           fi

     

       323
       323
       +
           

     

       324
       324
       +
           # In dry run mode, don't actually store

     

       325
       325
       +
           if [ "${DRY_RUN:-false}" = "true" ]; then

     

       326
       326
       +
               log_info "DRY RUN MODE - Would store blob reference"

     

       327
       327
       +
               return 0

     

       328
       328
       +
           fi

     

       329
       329
       +
           

     

       330
       330
       +
           # Store the record

     

       331
       331
       +
           local store_response

     

       332
       332
       +
           store_response=$(curl -s -X POST \

     

       333
       333
       +
               "https://bsky.social/xrpc/com.atproto.repo.putRecord" \

     

       334
       334
       +
               -H "Authorization: Bearer $token" \

     

       335
       335
       +
               -H "Content-Type: application/json" \

     

       336
       336
       +
               -d "$request_payload")

     

       337
       337
       +
           

     

       338
       338
       +
           if echo "$store_response" | jq -e '.uri' > /dev/null 2>&1; then

     

       339
       339
       +
               log_success "Successfully stored blob reference"

     

       340
       340
       +
               return 0

     

       341
       341
       +
           else

     

       342
       342
       +
               log_error "Failed to store blob reference: $(echo "$store_response" | jq -r '.message // "Unknown error"')"

     

       343
       343
       +
               log_error "Full response: $store_response"

     

       344
       344
       +
               return 1

     

       345
       345
       +
           fi

     

       346
       346
       +
       }

     

       347
       347
       +
       

     

       348
       348
       +
       # Upload image as blob

     

       349
       349
       +
       upload_blob() {

     

       350
       350
       +
           local image_path="$1"

     

       351
       351
       +
           local token="$2"

     

       352
       352
       +
       

     

       353
       353
       +
           if [ ! -f "$image_path" ]; then

     

       354
       354
       +
               log_error "Image file not found: $image_path"

     

       355
       355
       +
               return 1

     

       356
       356
       +
           fi

     

       357
       357
       +
       

     

       358
       358
       +
           # Check image file size (should be reasonable)

     

       359
       359
       +
           local file_size=$(stat -c%s "$image_path" 2>/dev/null || echo 0)

     

       360
       360
       +
           if [ "$file_size" -lt 1000 ]; then

     

       361
       361
       +
               log_error "Image file too small ($file_size bytes): $image_path"

     

       362
       362
       +
               return 1

     

       363
       363
       +
           fi

     

       364
       364
       +
       

     

       365
       365
       +
           if [ "$file_size" -gt 10000000 ]; then  # 10MB limit

     

       366
       366
       +
               log_error "Image file too large ($file_size bytes): $image_path"

     

       367
       367
       +
               return 1

     

       368
       368
       +
           fi

     

       369
       369
       +
       

     

       370
       370
       +
           log_info "Uploading image: $(basename "$image_path") ($(numfmt --to=iec "$file_size"))"

     

       371
       371
       +
       

     

       372
       372
       +
           local upload_response

     

       373
       373
       +
           upload_response=$(curl -s -X POST \

     

       374
       374
       +
               "https://bsky.social/xrpc/com.atproto.repo.uploadBlob" \

     

       375
       375
       +
               -H "Authorization: Bearer $token" \

     

       376
       376
       +
               -H "Content-Type: image/jpeg" \

     

       377
       377
       +
               --data-binary "@$image_path")

     

       378
       378
       +
       

     

       379
       379
       +
           if echo "$upload_response" | jq -e '.blob' > /dev/null 2>&1; then

     

       380
       380
       +
               local blob_result

     

       381
       381
       +
               blob_result=$(echo "$upload_response" | jq -c '.blob')

     

       382
       382
       +
               log_success "Successfully uploaded image"

     

       383
       383
       +
               log_info "Blob data: $blob_result"

     

       384
       384
       +
               echo "$blob_result"

     

       385
       385
       +
               return 0

     

       386
       386
       +
           else

     

       387
       387
       +
               local error_type=$(echo "$upload_response" | jq -r '.error // "Unknown"')

     

       388
       388
       +
               local error_msg=$(echo "$upload_response" | jq -r '.message // "Unknown error"')

     

       389
       389
       +
       

     

       390
       390
       +
               if [ "$error_type" = "ExpiredToken" ] || echo "$error_msg" | grep -qi "expired"; then

     

       391
       391
       +
                   log_error "Token has expired - session needs refresh"

     

       392
       392
       +
                   # Remove the expired session file so it will be regenerated

     

       393
       393
       +
                   rm -f "$SESSION_FILE"

     

       394
       394
       +
                   return 2  # Special return code for expired token

     

       395
       395
       +
               else

     

       396
       396
       +
                   log_error "Failed to upload image: $error_msg"

     

       397
       397
       +
                   log_error "Full response: $upload_response"

     

       398
       398
       +
                   return 1

     

       399
       399
       +
               fi

     

       400
       400
       +
           fi

     

       401
       401
       +
       }

     

       402
       402
       +
       

     

       403
       403
       +
       # Get or upload blob with caching

     

       404
       404
       +
       get_or_upload_blob() {

     

       405
       405
       +
           local image_path="$1"

     

       406
       406
       +
           local weather_type="$2"

     

       407
       407
       +
           local hour="$3"

     

       408
       408
       +
           local token="$4"

     

       409
       409
       +
           

     

       410
       410
       +
           if [ ! -f "$image_path" ]; then

     

       411
       411
       +
               log_error "Image file not found: $image_path"

     

       412
       412
       +
               return 1

     

       413
       413
       +
           fi

     

       414
       414
       +
           

     

       415
       415
       +
           # Calculate image hash

     

       416
       416
       +
           local image_hash

     

       417
       417
       +
           image_hash=$(calculate_image_hash "$image_path")

     

       418
       418
       +
           if [ -z "$image_hash" ]; then

     

       419
       419
       +
               log_error "Failed to calculate image hash"

     

       420
       420
       +
               return 1

     

       421
       421
       +
           fi

     

       422
       422
       +
           

     

       423
       423
       +
           log_info "Image hash: $image_hash"

     

       424
       424
       +
           

     

       425
       425
       +
           # Try to get cached blob

     

       426
       426
       +
           local cached_blob

     

       427
       427
       +
           if cached_blob=$(get_cached_blob "$weather_type" "$hour" "$image_hash" "$token"); then

     

       428
       428
       +
               log_success "Using cached blob reference"

     

       429
       429
       +
               echo "$cached_blob"

     

       430
       430
       +
               return 0

     

       431
       431
       +
           fi

     

       432
       432
       +
           

     

       433
       433
       +
           # No cache hit, upload the blob

     

       434
       434
       +
           log_info "No valid cache found, uploading new blob..."

     

       435
       435
       +
           local new_blob

     

       436
       436
       +
           new_blob=$(upload_blob "$image_path" "$token")

     

       437
       437
       +
           

     

       438
       438
       +
           if [ -n "$new_blob" ]; then

     

       439
       439
       +
               # Store the blob reference for future use

     

       440
       440
       +
               if store_blob_reference "$weather_type" "$hour" "$image_hash" "$new_blob" "$token"; then

     

       441
       441
       +
                   log_success "Blob uploaded and cached successfully"

     

       442
       442
       +
               else

     

       443
       443
       +
                   log_warning "Blob uploaded but failed to cache reference"

     

       444
       444
       +
               fi

     

       445
       445
       +
               echo "$new_blob"

     

       446
       446
       +
               return 0

     

       447
       447
       +
           else

     

       448
       448
       +
               log_error "Failed to upload blob"

     

       449
       449
       +
               return 1

     

       450
       450
       +
           fi

     

       451
       451
       +
       }

     

       452
       452
       +
       

     

       453
       453
       +
       # List all cached blobs

     

       454
       454
       +
       list_cached_blobs() {

     

       455
       455
       +
           local token="$1"

     

       456
       456
       +
           local did

     

       457
       457
       +
           

     

       458
       458
       +
           did=$(jq -r '.did' "$SESSION_FILE")

     

       459
       459
       +
           

     

       460
       460
       +
           log_info "Listing cached blob records..."

     

       461
       461
       +
           

     

       462
       462
       +
           # Get list of available timelines to check each collection

     

       463
       463
       +
           local timelines=()

     

       464
       464
       +
           if [ -d "$IMAGES_DIR" ]; then

     

       465
       465
       +
               for timeline_dir in "$IMAGES_DIR"/*; do

     

       466
       466
       +
                   if [ -d "$timeline_dir" ]; then

     

       467
       467
       +
                       timelines+=($(basename "$timeline_dir"))

     

       468
       468
       +
                   fi

     

       469
       469
       +
               done

     

       470
       470
       +
           fi

     

       471
       471
       +
           

     

       472
       472
       +
           local total_records=0

     

       473
       473
       +
           echo "Cached blob records:"

     

       474
       474
       +
           

     

       475
       475
       +
           for timeline in "${timelines[@]}"; do

     

       476
       476
       +
               # List records in each timeline collection

     

       477
       477
       +
               local list_response

     

       478
       478
       +
               list_response=$(curl -s \

     

       479
       479
       +
                   "https://bsky.social/xrpc/com.atproto.repo.listRecords?repo=$did&collection=pfp.updates.${timeline}" \

     

       480
       480
       +
                   -H "Authorization: Bearer $token" 2>/dev/null)

     

       481
       481
       +
               

     

       482
       482
       +
               if echo "$list_response" | jq -e '.records' > /dev/null 2>&1; then

     

       483
       483
       +
                   local timeline_count=$(echo "$list_response" | jq '.records | length')

     

       484
       484
       +
                   if [ "$timeline_count" -gt 0 ]; then

     

       485
       485
       +
                       echo "  $timeline timeline:"

     

       486
       486
       +
                       echo "$list_response" | jq -r '.records[] | "    hour \(.value.hour) - Hash: \(.value.imageHash[0:12])... (Created: \(.value.createdAt))"'

     

       487
       487
       +
                       total_records=$((total_records + timeline_count))

     

       488
       488
       +
                   fi

     

       489
       489
       +
               fi

     

       490
       490
       +
           done

     

       491
       491
       +
           

     

       492
       492
       +
           echo "Total cached records: $total_records"

     

       493
       493
       +
       }

     

       494
       494
       +
       

     

       495
       495
       +
       # Clean up old cached blobs (optional maintenance function)

     

       496
       496
       +
       cleanup_cached_blobs() {

     

       497
       497
       +
           local token="$1"

     

       498
       498
       +
           local days_to_keep="${2:-30}"  # Keep records for 30 days by default

     

       499
       499
       +
           local did

     

       500
       500
       +
           

     

       501
       501
       +
           did=$(jq -r '.did' "$SESSION_FILE")

     

       502
       502
       +
           

     

       503
       503
       +
           log_info "Cleaning up cached blobs older than $days_to_keep days..."

     

       504
       504
       +
           

     

       505
       505
       +
           # Get current timestamp minus retention period

     

       506
       506
       +
           local cutoff_date

     

       507
       507
       +
           cutoff_date=$(date -u -d "$days_to_keep days ago" +%Y-%m-%dT%H:%M:%S.%3NZ)

     

       508
       508
       +
           

     

       509
       509
       +
           # Get list of available timelines to check each collection

     

       510
       510
       +
           local timelines=()

     

       511
       511
       +
           if [ -d "$IMAGES_DIR" ]; then

     

       512
       512
       +
               for timeline_dir in "$IMAGES_DIR"/*; do

     

       513
       513
       +
                   if [ -d "$timeline_dir" ]; then

     

       514
       514
       +
                       timelines+=($(basename "$timeline_dir"))

     

       515
       515
       +
                   fi

     

       516
       516
       +
               done

     

       517
       517
       +
           fi

     

       518
       518
       +
           

     

       519
       519
       +
           local deleted_count=0

     

       520
       520
       +
           

     

       521
       521
       +
           for timeline in "${timelines[@]}"; do

     

       522
       522
       +
               # List all records in this timeline collection

     

       523
       523
       +
               local list_response

     

       524
       524
       +
               list_response=$(curl -s \

     

       525
       525
       +
                   "https://bsky.social/xrpc/com.atproto.repo.listRecords?repo=$did&collection=pfp.updates.${timeline}" \

     

       526
       526
       +
                   -H "Authorization: Bearer $token" 2>/dev/null)

     

       527
       527
       +
               

     

       528
       528
       +
               if echo "$list_response" | jq -e '.records' > /dev/null 2>&1; then

     

       529
       529
       +
                   # Find records older than cutoff

     

       530
       530
       +
                   local old_records

     

       531
       531
       +
                   old_records=$(echo "$list_response" | jq --arg cutoff "$cutoff_date" '.records[] | select(.value.createdAt < $cutoff)')

     

       532
       532
       +
                   

     

       533
       533
       +
                   if [ -n "$old_records" ]; then

     

       534
       534
       +
                       echo "$old_records" | jq -r '.uri' | while read -r record_uri; do

     

       535
       535
       +
                           local rkey=$(echo "$record_uri" | sed 's/.*\///')

     

       536
       536
       +
                           log_info "Deleting old record: $timeline/$rkey"

     

       537
       537
       +
                           

     

       538
       538
       +
                           curl -s -X POST \

     

       539
       539
       +
                               "https://bsky.social/xrpc/com.atproto.repo.deleteRecord" \

     

       540
       540
       +
                               -H "Authorization: Bearer $token" \

     

       541
       541
       +
                               -H "Content-Type: application/json" \

     

       542
       542
       +
                               -d "{\"repo\":\"$did\",\"collection\":\"pfp.updates.${timeline}\",\"rkey\":\"$rkey\"}" > /dev/null

     

       543
       543
       +
                           

     

       544
       544
       +
                           deleted_count=$((deleted_count + 1))

     

       545
       545
       +
                       done

     

       546
       546
       +
                   fi

     

       547
       547
       +
               fi

     

       548
       548
       +
           done

     

       549
       549
       +
           

     

       550
       550
       +
           if [ "$deleted_count" -eq 0 ]; then

     

       551
       551
       +
               log_info "No old records found to clean up"

     

       552
       552
       +
           else

     

       553
       553
       +
               log_success "Deleted $deleted_count old records"

     

       554
       554
       +
           fi

     

       555
       555
       +
       }

     

       556
       556
       +
       

     

       557
       557
       +
       # Update profile picture

     

       558
       558
       +
       update_profile_picture() {

     

       559
       559
       +
           local blob_ref="$1"

     

       560
       560
       +
           local token="$2"

     

       561
       561
       +
           local did

     

       562
       562
       +
       

     

       563
       563
       +
           # Validate blob reference

     

       564
       564
       +
           if [ -z "$blob_ref" ] || [ "$blob_ref" = "null" ]; then

     

       565
       565
       +
               log_error "Invalid blob reference provided"

     

       566
       566
       +
               return 1

     

       567
       567
       +
           fi

     

       568
       568
       +
       

     

       569
       569
       +
           # Validate blob reference format

     

       570
       570
       +
           if ! echo "$blob_ref" | jq -e '.ref' > /dev/null 2>&1; then

     

       571
       571
       +
               log_error "Blob reference missing required 'ref' field: $blob_ref"

     

       572
       572
       +
               return 1

     

       573
       573
       +
           fi

     

       574
       574
       +
       

     

       575
       575
       +
           # Get DID from session

     

       576
       576
       +
           did=$(jq -r '.did' "$SESSION_FILE")

     

       577
       577
       +
       

     

       578
       578
       +
           log_info "Updating profile picture..."

     

       579
       579
       +
           log_info "Using blob: $blob_ref"

     

       580
       580
       +
       

     

       581
       581
       +
           # Get current profile

     

       582
       582
       +
           local current_profile

     

       583
       583
       +
           current_profile=$(curl -s \

     

       584
       584
       +
               "https://bsky.social/xrpc/com.atproto.repo.getRecord?repo=$did&collection=app.bsky.actor.profile&rkey=self" \

     

       585
       585
       +
               -H "Authorization: Bearer $token")

     

       586
       586
       +
       

     

       587
       587
       +
           log_info "Current profile response: $current_profile"

     

       588
       588
       +
       

     

       589
       589
       +
           local profile_data

     

       590
       590
       +
           if echo "$current_profile" | jq -e '.value' > /dev/null 2>&1; then

     

       591
       591
       +
               # Update existing profile - PRESERVE ALL EXISTING FIELDS

     

       592
       592
       +
               profile_data=$(echo "$current_profile" | jq --argjson avatar "$blob_ref" '.value | .avatar = $avatar')

     

       593
       593
       +
               log_info "Updating existing profile (preserving existing fields)"

     

       594
       594
       +
           else

     

       595
       595
       +
               log_error "No existing profile found - cannot safely create new profile"

     

       596
       596
       +
               log_error "Please manually restore your profile in the Bluesky app first"

     

       597
       597
       +
               return 1

     

       598
       598
       +
           fi

     

       599
       599
       +
       

     

       600
       600
       +
           log_info "Profile data to send: $profile_data"

     

       601
       601
       +
       

     

       602
       602
       +
           # Validate profile data before sending

     

       603
       603
       +
           if ! echo "$profile_data" | jq -e '.avatar' > /dev/null 2>&1; then

     

       604
       604
       +
               log_error "Generated profile data is invalid"

     

       605
       605
       +
               return 1

     

       606
       606
       +
           fi

     

       607
       607
       +
       

     

       608
       608
       +
           # Double-check we're preserving important fields

     

       609
       609
       +
           local display_name=$(echo "$profile_data" | jq -r '.displayName // empty')

     

       610
       610
       +
           local description=$(echo "$profile_data" | jq -r '.description // empty')

     

       611
       611
       +
       

     

       612
       612
       +
           if [ -n "$display_name" ]; then

     

       613
       613
       +
               log_info "Preserving display name: $display_name"

     

       614
       614
       +
           fi

     

       615
       615
       +
       

     

       616
       616
       +
           if [ -n "$description" ]; then

     

       617
       617
       +
               log_info "Preserving description: $(echo "$description" | head -c 50)..."

     

       618
       618
       +
           fi

     

       619
       619
       +
       

     

       620
       620
       +
           # Create the request payload

     

       621
       621
       +
           local request_payload

     

       622
       622
       +
           request_payload=$(jq -n \

     

       623
       623
       +
               --arg repo "$did" \

     

       624
       624
       +
               --arg collection "app.bsky.actor.profile" \

     

       625
       625
       +
               --arg rkey "self" \

     

       626
       626
       +
               --argjson record "$profile_data" \

     

       627
       627
       +
               '{repo: $repo, collection: $collection, rkey: $rkey, record: $record}')

     

       628
       628
       +
       

     

       629
       629
       +
           log_info "Request payload: $request_payload"

     

       630
       630
       +
       

     

       631
       631
       +
           # In dry run mode, don't actually update

     

       632
       632
       +
           if [ "${DRY_RUN:-false}" = "true" ]; then

     

       633
       633
       +
               log_info "DRY RUN MODE - Would send profile update with avatar"

     

       634
       634
       +
               log_info "DRY RUN MODE - Profile fields would be preserved"

     

       635
       635
       +
               return 0

     

       636
       636
       +
           fi

     

       637
       637
       +
       

     

       638
       638
       +
           # Update profile

     

       639
       639
       +
           local update_response

     

       640
       640
       +
           update_response=$(curl -s -X POST \

     

       641
       641
       +
               "https://bsky.social/xrpc/com.atproto.repo.putRecord" \

     

       642
       642
       +
               -H "Authorization: Bearer $token" \

     

       643
       643
       +
               -H "Content-Type: application/json" \

     

       644
       644
       +
               -d "$request_payload")

     

       645
       645
       +
       

     

       646
       646
       +
           log_info "Update response: $update_response"

     

       647
       647
       +
       

     

       648
       648
       +
           if echo "$update_response" | jq -e '.uri' > /dev/null 2>&1; then

     

       649
       649
       +
               log_success "Successfully updated profile picture"

     

       650
       650
       +
               return 0

     

       651
       651
       +
           else

     

       652
       652
       +
               log_error "Failed to update profile picture: $(echo "$update_response" | jq -r '.message // "Unknown error"')"

     

       653
       653
       +
               log_error "Full error response: $update_response"

     

       654
       654
       +
               return 1

     

       655
       655
       +
           fi

     

       656
       656
       +
       }

     

       657
       657
       +
       

     

       658
       658
       +
       # Update Slack profile picture

     

       659
       659
       +
       update_slack_profile_picture() {

     

       660
       660
       +
           local image_path="$1"

     

       661
       661
       +
       

     

       662
       662
       +
           if [ "$SLACK_ENABLED" != "true" ] || [ -z "$SLACK_USER_TOKEN" ] || [ "$SLACK_USER_TOKEN" = "null" ]; then

     

       663
       663
       +
               log_info "Slack integration disabled or not configured"

     

       664
       664
       +
               return 0

     

       665
       665
       +
           fi

     

       666
       666
       +
       

     

       667
       667
       +
           if [ ! -f "$image_path" ]; then

     

       668
       668
       +
               log_error "Image file not found for Slack: $image_path"

     

       669
       669
       +
               return 1

     

       670
       670
       +
           fi

     

       671
       671
       +
       

     

       672
       672
       +
           log_info "Updating Slack profile picture..."

     

       673
       673
       +
       

     

       674
       674
       +
           # First, upload the image to Slack

     

       675
       675
       +
           local upload_response

     

       676
       676
       +
           upload_response=$(curl -s -X POST \

     

       677
       677
       +
               "https://slack.com/api/users.setPhoto" \

     

       678
       678
       +
               -H "Authorization: Bearer $SLACK_USER_TOKEN" \

     

       679
       679
       +
               -F "image=@$image_path")

     

       680
       680
       +
       

     

       681
       681
       +
           if echo "$upload_response" | jq -e '.ok' > /dev/null 2>&1; then

     

       682
       682
       +
               local ok_status=$(echo "$upload_response" | jq -r '.ok')

     

       683
       683
       +
               if [ "$ok_status" = "true" ]; then

     

       684
       684
       +
                   log_success "Successfully updated Slack profile picture"

     

       685
       685
       +
                   return 0

     

       686
       686
       +
               else

     

       687
       687
       +
                   local error_msg=$(echo "$upload_response" | jq -r '.error // "Unknown error"')

     

       688
       688
       +
                   log_error "Failed to update Slack profile picture: $error_msg"

     

       689
       689
       +
       

     

       690
       690
       +
                   # Handle common errors

     

       691
       691
       +
                   case "$error_msg" in

     

       692
       692
       +
                       "invalid_auth")

     

       693
       693
       +
                           log_error "Invalid Slack token - please check your user token"

     

       694
       694
       +
                           ;;

     

       695
       695
       +
                       "not_authed")

     

       696
       696
       +
                           log_error "Authentication failed - token may be expired"

     

       697
       697
       +
                           ;;

     

       698
       698
       +
                       "missing_scope")

     

       699
       699
       +
                           log_error "Token missing required scope - needs 'users.profile:write'"

     

       700
       700
       +
                           ;;

     

       701
       701
       +
                       "too_large")

     

       702
       702
       +
                           log_error "Image file too large for Slack"

     

       703
       703
       +
                           ;;

     

       704
       704
       +
                   esac

     

       705
       705
       +
                   return 1

     

       706
       706
       +
               fi

     

       707
       707
       +
           else

     

       708
       708
       +
               log_error "Invalid response from Slack API: $upload_response"

     

       709
       709
       +
               return 1

     

       710
       710
       +
           fi

     

       711
       711
       +
       }

     

       712
       712
       +
       

     

       713
       713
       +
       # Get weather-based timeline

     

       714
       714
       +
       get_weather_timeline() {

     

       715
       715
       +
           if [ "$WEATHER_ENABLED" != "true" ] || [ -z "$WEATHER_API_KEY" ] || [ "$WEATHER_API_KEY" = "null" ]; then

     

       716
       716
       +
               log_info "Weather integration disabled, using default timeline: $DEFAULT_TIMELINE"

     

       717
       717
       +
               echo "$DEFAULT_TIMELINE"

     

       718
       718
       +
               return 0

     

       719
       719
       +
           fi

     

       720
       720
       +
       

     

       721
       721
       +
           log_info "Fetching weather data..."

     

       722
       722
       +
       

     

       723
       723
       +
           local lat lon

     

       724
       724
       +
       

     

       725
       725
       +
           if [ "$WEATHER_LOCATION" = "auto" ]; then

     

       726
       726
       +
               # Auto-detect location from IP

     

       727
       727
       +
               local ip_data

     

       728
       728
       +
               ip_data=$(curl -s "http://ip-api.com/json/" --connect-timeout 10)

     

       729
       729
       +
       

     

       730
       730
       +
               if echo "$ip_data" | jq -e '.lat' > /dev/null 2>&1; then

     

       731
       731
       +
                   lat=$(echo "$ip_data" | jq -r '.lat')

     

       732
       732
       +
                   lon=$(echo "$ip_data" | jq -r '.lon')

     

       733
       733
       +
                   local city=$(echo "$ip_data" | jq -r '.city')

     

       734
       734
       +
                   local country=$(echo "$ip_data" | jq -r '.country')

     

       735
       735
       +
                   log_info "Auto-detected location: $city, $country"

     

       736
       736
       +
               else

     

       737
       737
       +
                   log_warning "Could not auto-detect location, using default timeline"

     

       738
       738
       +
                   echo "$DEFAULT_TIMELINE"

     

       739
       739
       +
                   return 0

     

       740
       740
       +
               fi

     

       741
       741
       +
           else

     

       742
       742
       +
               # Use provided location (assume it's "lat,lon" or city name)

     

       743
       743
       +
               if [[ "$WEATHER_LOCATION" =~ ^-?[0-9]+\.?[0-9]*,-?[0-9]+\.?[0-9]*$ ]]; then

     

       744
       744
       +
                   # It's coordinates

     

       745
       745
       +
                   lat=$(echo "$WEATHER_LOCATION" | cut -d',' -f1)

     

       746
       746
       +
                   lon=$(echo "$WEATHER_LOCATION" | cut -d',' -f2)

     

       747
       747
       +
               else

     

       748
       748
       +
                   # It's a city name, geocode it

     

       749
       749
       +
                   local geocode_response

     

       750
       750
       +
                   geocode_response=$(curl -s "http://api.openweathermap.org/geo/1.0/direct?q=$WEATHER_LOCATION&limit=1&appid=$WEATHER_API_KEY")

     

       751
       751
       +
       

     

       752
       752
       +
                   if echo "$geocode_response" | jq -e '.[0].lat' > /dev/null 2>&1; then

     

       753
       753
       +
                       lat=$(echo "$geocode_response" | jq -r '.[0].lat')

     

       754
       754
       +
                       lon=$(echo "$geocode_response" | jq -r '.[0].lon')

     

       755
       755
       +
                       log_info "Geocoded location: $WEATHER_LOCATION"

     

       756
       756
       +
                   else

     

       757
       757
       +
                       log_warning "Could not geocode location: $WEATHER_LOCATION"

     

       758
       758
       +
                       echo "$DEFAULT_TIMELINE"

     

       759
       759
       +
                       return 0

     

       760
       760
       +
                   fi

     

       761
       761
       +
               fi

     

       762
       762
       +
           fi

     

       763
       763
       +
       

     

       764
       764
       +
           # Get current weather

     

       765
       765
       +
           local weather_response

     

       766
       766
       +
           weather_response=$(curl -s "http://api.openweathermap.org/data/2.5/weather?lat=$lat&lon=$lon&appid=$WEATHER_API_KEY" --connect-timeout 10)

     

       767
       767
       +
       

     

       768
       768
       +
           if echo "$weather_response" | jq -e '.weather[0].main' > /dev/null 2>&1; then

     

       769
       769
       +
               local weather_main=$(echo "$weather_response" | jq -r '.weather[0].main' | tr '[:upper:]' '[:lower:]')

     

       770
       770
       +
               local weather_desc=$(echo "$weather_response" | jq -r '.weather[0].description')

     

       771
       771
       +
               log_info "Current weather: $weather_desc"

     

       772
       772
       +
       

     

       773
       773
       +
               # Map weather to timeline

     

       774
       774
       +
               local timeline

     

       775
       775
       +
               timeline=$(jq -r ".weather.timeline_mapping.\"$weather_main\" // \"$DEFAULT_TIMELINE\"" "$CONFIG_FILE")

     

       776
       776
       +
       

     

       777
       777
       +
               # Check if the mapped timeline exists

     

       778
       778
       +
               if [ ! -d "$IMAGES_DIR/$timeline" ]; then

     

       779
       779
       +
                   log_warning "Timeline '$timeline' not found, falling back to default: $DEFAULT_TIMELINE"

     

       780
       780
       +
                   echo "$DEFAULT_TIMELINE"

     

       781
       781
       +
               else

     

       782
       782
       +
                   log_info "Weather mapped to timeline: $timeline"

     

       783
       783
       +
                   echo "$timeline"

     

       784
       784
       +
               fi

     

       785
       785
       +
           else

     

       786
       786
       +
               log_warning "Could not fetch weather data, using default timeline"

     

       787
       787
       +
               echo "$DEFAULT_TIMELINE"

     

       788
       788
       +
           fi

     

       789
       789
       +
       }

     

       790
       790
       +
       

     

       791
       791
       +
       # Get current hour image path

     

       792
       792
       +
       get_hour_image_path() {

     

       793
       793
       +
           local timeline="$1"

     

       794
       794
       +
           local hour=$(date +%H)

     

       795
       795
       +
           # Remove leading zero to avoid octal interpretation, then pad with zero

     

       796
       796
       +
           local hour_decimal=$((10#$hour))  # Force decimal interpretation

     

       797
       797
       +
           local hour_padded=$(printf "%02d" "$hour_decimal")

     

       798
       798
       +
           local image_path="$IMAGES_DIR/$timeline/hour_${hour_padded}.jpg"

     

       799
       799
       +
       

     

       800
       800
       +
           if [ -f "$image_path" ]; then

     

       801
       801
       +
               echo "$image_path"

     

       802
       802
       +
               return 0

     

       803
       803
       +
           else

     

       804
       804
       +
               log_warning "Image not found: $image_path" >&2

     

       805
       805
       +
       

     

       806
       806
       +
               # Try fallback to default timeline

     

       807
       807
       +
               if [ "$timeline" != "$DEFAULT_TIMELINE" ]; then

     

       808
       808
       +
                   local fallback_path="$IMAGES_DIR/$DEFAULT_TIMELINE/hour_${hour_padded}.jpg"

     

       809
       809
       +
                   if [ -f "$fallback_path" ]; then

     

       810
       810
       +
                       log_info "Using fallback image: $fallback_path" >&2

     

       811
       811
       +
                       echo "$fallback_path"

     

       812
       812
       +
                       return 0

     

       813
       813
       +
                   fi

     

       814
       814
       +
               fi

     

       815
       815
       +
       

     

       816
       816
       +
               return 1

     

       817
       817
       +
           fi

     

       818
       818
       +
       }

     

       819
       819
       +
       

     

       820
       820
       +
       # List available timelines

     

       821
       821
       +
       list_timelines() {

     

       822
       822
       +
           if [ ! -d "$IMAGES_DIR" ]; then

     

       823
       823
       +
               log_error "Images directory not found: $IMAGES_DIR"

     

       824
       824
       +
               return 1

     

       825
       825
       +
           fi

     

       826
       826
       +
       

     

       827
       827
       +
           echo "Available timelines:"

     

       828
       828
       +
           for timeline_dir in "$IMAGES_DIR"/*; do

     

       829
       829
       +
               if [ -d "$timeline_dir" ]; then

     

       830
       830
       +
                   local timeline_name=$(basename "$timeline_dir")

     

       831
       831
       +
                   local image_count=$(find "$timeline_dir" -name "hour_*.jpg" | wc -l)

     

       832
       832
       +
                   echo "  - $timeline_name ($image_count images)"

     

       833
       833
       +
               fi

     

       834
       834
       +
           done

     

       835
       835
       +
       }

     

       836
       836
       +
       

     

       837
       837
       +
       # Test mode - show what would be used

     

       838
       838
       +
       test_mode() {

     

       839
       839
       +
           local timeline

     

       840
       840
       +
           timeline=$(get_weather_timeline)

     

       841
       841
       +
       

     

       842
       842
       +
           local image_path

     

       843
       843
       +
           image_path=$(get_hour_image_path "$timeline")

     

       844
       844
       +
       

     

       845
       845
       +
           local hour=$(date +%H)

     

       846
       846
       +
       

     

       847
       847
       +
           echo "=== Test Mode ==="

     

       848
       848
       +
           echo "Current time: $(date)"

     

       849
       849
       +
           echo "Current hour: $hour"

     

       850
       850
       +
           echo "Weather enabled: $WEATHER_ENABLED"

     

       851
       851
       +
           echo "Selected timeline: $timeline"

     

       852
       852
       +
           echo "Image path: $image_path"

     

       853
       853
       +
       

     

       854
       854
       +
           if [ -f "$image_path" ]; then

     

       855
       855
       +
               echo "✓ Image exists"

     

       856
       856
       +
               echo "Image size: $(du -h "$image_path" | cut -f1)"

     

       857
       857
       +
               

     

       858
       858
       +
               # Show hash info in test mode

     

       859
       859
       +
               local test_hash=$(calculate_image_hash "$image_path")

     

       860
       860
       +
               echo "Image hash: $test_hash"

     

       861
       861
       +
           else

     

       862
       862
       +
               echo "✗ Image not found"

     

       863
       863
       +
       

     

       864
       864
       +
               # Show available alternatives

     

       865
       865
       +
               echo ""

     

       866
       866
       +
               echo "Available timelines:"

     

       867
       867
       +
               list_timelines

     

       868
       868
       +
               return 1

     

       869
       869
       +
           fi

     

       870
       870
       +
       

     

       871
       871
       +
           # Show weather info if enabled

     

       872
       872
       +
           if [ "$WEATHER_ENABLED" = "true" ] && [ -n "$WEATHER_API_KEY" ] && [ "$WEATHER_API_KEY" != "null" ]; then

     

       873
       873
       +
               echo ""

     

       874
       874
       +
               echo "Weather integration: enabled"

     

       875
       875
       +
               echo "Location setting: $WEATHER_LOCATION"

     

       876
       876
       +
           else

     

       877
       877
       +
               echo ""

     

       878
       878
       +
               echo "Weather integration: disabled (using default timeline)"

     

       879
       879
       +
           fi

     

       880
       880
       +
       

     

       881
       881
       +
           # Show platform info

     

       882
       882
       +
           echo ""

     

       883
       883
       +
           echo "Enabled platforms:"

     

       884
       884
       +
           if [ "$BLUESKY_ENABLED" = "true" ]; then

     

       885
       885
       +
               echo "  ✓ Bluesky ($BLUESKY_HANDLE)"

     

       886
       886
       +
           else

     

       887
       887
       +
               echo "  ✗ Bluesky (disabled or not configured)"

     

       888
       888
       +
           fi

     

       889
       889
       +
       

     

       890
       890
       +
           if [ "$SLACK_ENABLED" = "true" ]; then

     

       891
       891
       +
               echo "  ✓ Slack"

     

       892
       892
       +
           else

     

       893
       893
       +
               echo "  ✗ Slack (disabled or not configured)"

     

       894
       894
       +
           fi

     

       895
       895
       +
           

     

       896
       896
       +
           # Show caching info

     

       897
       897
       +
           echo ""

     

       898
       898
       +
           echo "Blob caching: enabled for Bluesky uploads"

     

       899
       899
       +
           local hour_decimal=$((10#$hour))

     

       900
       900
       +
           local hour_padded=$(printf "%02d" "$hour_decimal")

     

       901
       901
       +
           echo "Cache key would be: ${timeline}_hour_${hour_padded}"

     

       902
       902
       +
       }

     

       903
       903
       +
       

     

       904
       904
       +
       # Modified update_pfp function to use caching

     

       905
       905
       +
       update_pfp() {

     

       906
       906
       +
           log_info "Starting profile picture update..."

     

       907
       907
       +
       

     

       908
       908
       +
           # Determine timeline based on weather

     

       909
       909
       +
           local timeline

     

       910
       910
       +
           timeline=$(get_weather_timeline)

     

       911
       911
       +
           log_info "Using timeline: $timeline"

     

       912
       912
       +
       

     

       913
       913
       +
           # Get appropriate image for current hour

     

       914
       914
       +
           local image_path

     

       915
       915
       +
           image_path=$(get_hour_image_path "$timeline")

     

       916
       916
       +
       

     

       917
       917
       +
           if [ -z "$image_path" ]; then

     

       918
       918
       +
               log_error "No suitable image found for current time"

     

       919
       919
       +
               return 1

     

       920
       920
       +
           fi

     

       921
       921
       +
       

     

       922
       922
       +
           log_info "Selected image: $image_path"

     

       923
       923
       +
       

     

       924
       924
       +
           # Get current hour for caching

     

       925
       925
       +
           local current_hour=$(date +%H)

     

       926
       926
       +
           local hour_decimal=$((10#$current_hour))

     

       927
       927
       +
           local hour_padded=$(printf "%02d" "$hour_decimal")

     

       928
       928
       +
       

     

       929
       929
       +
           # Dry run mode - don't actually upload

     

       930
       930
       +
           if [ "${DRY_RUN:-false}" = "true" ]; then

     

       931
       931
       +
               log_info "DRY RUN MODE - Would upload: $image_path"

     

       932
       932
       +
               log_info "Image size: $(stat -c%s "$image_path" 2>/dev/null | numfmt --to=iec)"

     

       933
       933
       +
               local test_hash=$(calculate_image_hash "$image_path")

     

       934
       934
       +
               log_info "Image hash: $test_hash"

     

       935
       935
       +
               log_info "Would cache as: $timeline hour $hour_padded"

     

       936
       936
       +
               if [ "$BLUESKY_ENABLED" = "true" ]; then

     

       937
       937
       +
                   log_info "DRY RUN MODE - Would update Bluesky profile"

     

       938
       938
       +
               fi

     

       939
       939
       +
               if [ "$SLACK_ENABLED" = "true" ]; then

     

       940
       940
       +
                   log_info "DRY RUN MODE - Would update Slack profile"

     

       941
       941
       +
               fi

     

       942
       942
       +
               log_info "DRY RUN MODE - No changes made"

     

       943
       943
       +
               return 0

     

       944
       944
       +
           fi

     

       945
       945
       +
       

     

       946
       946
       +
           local bluesky_success=false

     

       947
       947
       +
           local slack_success=false

     

       948
       948
       +
       

     

       949
       949
       +
           # Update Bluesky with caching

     

       950
       950
       +
           if [ "$BLUESKY_ENABLED" = "true" ]; then

     

       951
       951
       +
               log_info "Updating Bluesky profile picture with caching..."

     

       952
       952
       +
       

     

       953
       953
       +
               # Get session token

     

       954
       954
       +
               local token

     

       955
       955
       +
               token=$(get_session_token)

     

       956
       956
       +
       

     

       957
       957
       +
               if [ -z "$token" ] || [ "$token" = "null" ]; then

     

       958
       958
       +
                   log_info "No valid session found, authenticating..."

     

       959
       959
       +
                   if ! authenticate_bluesky; then

     

       960
       960
       +
                       log_error "Failed to authenticate with Bluesky"

     

       961
       961
       +
                   else

     

       962
       962
       +
                       token=$(get_session_token)

     

       963
       963
       +
                   fi

     

       964
       964
       +
               fi

     

       965
       965
       +
       

     

       966
       966
       +
               if [ -n "$token" ] && [ "$token" != "null" ]; then

     

       967
       967
       +
                   # Get or upload blob with caching

     

       968
       968
       +
                   local blob_ref

     

       969
       969
       +
                   blob_ref=$(get_or_upload_blob "$image_path" "$timeline" "$hour_padded" "$token")

     

       970
       970
       +
       

     

       971
       971
       +
                   # If operation failed due to expired token, try re-authenticating once

     

       972
       972
       +
                   if [ -z "$blob_ref" ]; then

     

       973
       973
       +
                       log_info "Failed to get blob, trying to re-authenticate..."

     

       974
       974
       +
                       rm -f "$SESSION_FILE"  # Remove expired session

     

       975
       975
       +
                       if authenticate_bluesky; then

     

       976
       976
       +
                           token=$(get_session_token)

     

       977
       977
       +
                           if [ -n "$token" ] && [ "$token" != "null" ]; then

     

       978
       978
       +
                               blob_ref=$(get_or_upload_blob "$image_path" "$timeline" "$hour_padded" "$token")

     

       979
       979
       +
                           fi

     

       980
       980
       +
                       fi

     

       981
       981
       +
                   fi

     

       982
       982
       +
       

     

       983
       983
       +
                   if [ -n "$blob_ref" ]; then

     

       984
       984
       +
                       # Update profile picture

     

       985
       985
       +
                       if update_profile_picture "$blob_ref" "$token"; then

     

       986
       986
       +
                           bluesky_success=true

     

       987
       987
       +
                       fi

     

       988
       988
       +
                   fi

     

       989
       989
       +
               else

     

       990
       990
       +
                   log_error "Could not obtain valid Bluesky session token"

     

       991
       991
       +
               fi

     

       992
       992
       +
           fi

     

       993
       993
       +
       

     

       994
       994
       +
           # Update Slack (independent of Bluesky success)

     

       995
       995
       +
           if [ "$SLACK_ENABLED" = "true" ]; then

     

       996
       996
       +
               if update_slack_profile_picture "$image_path"; then

     

       997
       997
       +
                   slack_success=true

     

       998
       998
       +
               fi

     

       999
       999
       +
           fi

     

       1000
       1000
       +
       

     

       1001
       1001
       +
           # Report results

     

       1002
       1002
       +
           local updated_services=()

     

       1003
       1003
       +
           local failed_services=()

     

       1004
       1004
       +
       

     

       1005
       1005
       +
           if [ "$BLUESKY_ENABLED" = "true" ]; then

     

       1006
       1006
       +
               if [ "$bluesky_success" = "true" ]; then

     

       1007
       1007
       +
                   updated_services+=("Bluesky")

     

       1008
       1008
       +
               else

     

       1009
       1009
       +
                   failed_services+=("Bluesky")

     

       1010
       1010
       +
               fi

     

       1011
       1011
       +
           fi

     

       1012
       1012
       +
       

     

       1013
       1013
       +
           if [ "$SLACK_ENABLED" = "true" ]; then

     

       1014
       1014
       +
               if [ "$slack_success" = "true" ]; then

     

       1015
       1015
       +
                   updated_services+=("Slack")

     

       1016
       1016
       +
               else

     

       1017
       1017
       +
                   failed_services+=("Slack")

     

       1018
       1018
       +
               fi

     

       1019
       1019
       +
           fi

     

       1020
       1020
       +
       

     

       1021
       1021
       +
           # Final status

     

       1022
       1022
       +
           if [ ${#updated_services[@]} -gt 0 ]; then

     

       1023
       1023
       +
               log_success "Successfully updated: ${updated_services[*]}"

     

       1024
       1024
       +
           fi

     

       1025
       1025
       +
       

     

       1026
       1026
       +
           if [ ${#failed_services[@]} -gt 0 ]; then

     

       1027
       1027
       +
               log_error "Failed to update: ${failed_services[*]}"

     

       1028
       1028
       +
           fi

     

       1029
       1029
       +
       

     

       1030
       1030
       +
           # Return success if at least one service updated

     

       1031
       1031
       +
           if [ ${#updated_services[@]} -gt 0 ]; then

     

       1032
       1032
       +
               return 0

     

       1033
       1033
       +
           else

     

       1034
       1034
       +
               return 1

     

       1035
       1035
       +
           fi

     

       1036
       1036
       +
       }

     

       1037
       1037
       +
       

     

       1038
       1038
       +
       # Show help

     

       1039
       1039
       +
       show_help() {

     

       1040
       1040
       +
           cat << EOF

     

       1041
       1041
       +
       Dynamic Profile Picture Updater

     

       1042
       1042
       +
       

     

       1043
       1043
       +
       Automatically updates your profile pictures across multiple platforms based on time and weather.

     

       1044
       1044
       +
       Uses ATProto record caching to avoid re-uploading identical images.

     

       1045
       1045
       +
       

     

       1046
       1046
       +
       Usage: $0 [options]

     

       1047
       1047
       +
       

     

       1048
       1048
       +
       Options:

     

       1049
       1049
       +
           -c, --config FILE       Use custom config file (default: $CONFIG_FILE)

     

       1050
       1050
       +
           -t, --test             Test mode - show what would be used without updating

     

       1051
       1051
       +
           -d, --dry-run          Dry run - authenticate and prepare but don't actually update

     

       1052
       1052
       +
           -l, --list             List available timelines

     

       1053
       1053
       +
           -f, --force TIMELINE   Force use of specific timeline (ignore weather)

     

       1054
       1054
       +
           --list-cache           List all cached blob references

     

       1055
       1055
       +
           --cleanup-cache [DAYS] Clean up cached blobs older than DAYS (default: 30)

     

       1056
       1056
       +
           --clear-cache          Delete all cached blob references (USE WITH CAUTION)

     

       1057
       1057
       +
           -h, --help             Show this help message

     

       1058
       1058
       +
       

     

       1059
       1059
       +
       Configuration:

     

       1060
       1060
       +
           Edit $CONFIG_FILE to set your platform credentials and preferences.

     

       1061
       1061
       +
           

     

       1062
       1062
       +
           Supported platforms:

     

       1063
       1063
       +
           - Bluesky: Set handle and app password

     

       1064
       1064
       +
           - Slack: Set user token (xoxp-...) with users.profile:write scope

     

       1065
       1065
       +
           

     

       1066
       1066
       +
           Blob Caching:

     

       1067
       1067
       +
           Images are uploaded once and cached in ATProto records at:

     

       1068
       1068
       +
           pfp.updates.{timeline}.{timeline}_hour_{HH}

     

       1069
       1069
       +
           

     

       1070
       1070
       +
           Each record contains:

     

       1071
       1071
       +
           - Image SHA256 hash for change detection

     

       1072
       1072
       +
           - Blob reference for reuse

     

       1073
       1073
       +
           - Metadata (timeline, hour, creation time)

     

       1074
       1074
       +
           

     

       1075
       1075
       +
           Examples of cache locations:

     

       1076
       1076
       +
           - pfp.updates.sunny.sunny_hour_09

     

       1077
       1077
       +
           - pfp.updates.rainy.rainy_hour_14

     

       1078
       1078
       +
           - pfp.updates.cloudy.cloudy_hour_23

     

       1079
       1079
       +
           

     

       1080
       1080
       +
       Examples:

     

       1081
       1081
       +
           $0                     # Update profile pictures (uses cache when possible)

     

       1082
       1082
       +
           $0 --test              # Test what would be used

     

       1083
       1083
       +
           $0 --list-cache        # Show all cached blob references

     

       1084
       1084
       +
           $0 --cleanup-cache 7   # Remove cached blobs older than 7 days

     

       1085
       1085
       +
           $0 --force sunny       # Force sunny timeline

     

       1086
       1086
       +
       

     

       1087
       1087
       +
       For automated updates, add to crontab:

     

       1088
       1088
       +
           # Update 2 minutes after every hour

     

       1089
       1089
       +
           2 * * * * $0 >/dev/null 2>&1

     

       1090
       1090
       +
       EOF

     

       1091
       1091
       +
       }

     

       1092
       1092
       +
       

     

       1093
       1093
       +
       # Parse command line arguments

     

       1094
       1094
       +
       parse_args() {

     

       1095
       1095
       +
           FORCE_TIMELINE=""

     

       1096
       1096
       +
       

     

       1097
       1097
       +
           while [[ $# -gt 0 ]]; do

     

       1098
       1098
       +
               case $1 in

     

       1099
       1099
       +
                   -c|--config)

     

       1100
       1100
       +
                       CONFIG_FILE="$2"

     

       1101
       1101
       +
                       shift 2

     

       1102
       1102
       +
                       ;;

     

       1103
       1103
       +
                   -t|--test)

     

       1104
       1104
       +
                       load_config

     

       1105
       1105
       +
                       test_mode

     

       1106
       1106
       +
                       exit $?

     

       1107
       1107
       +
                       ;;

     

       1108
       1108
       +
                   -d|--dry-run)

     

       1109
       1109
       +
                       DRY_RUN=true

     

       1110
       1110
       +
                       shift

     

       1111
       1111
       +
                       ;;

     

       1112
       1112
       +
                   -l|--list)

     

       1113
       1113
       +
                       load_config

     

       1114
       1114
       +
                       list_timelines

     

       1115
       1115
       +
                       exit 0

     

       1116
       1116
       +
                       ;;

     

       1117
       1117
       +
                   -f|--force)

     

       1118
       1118
       +
                       FORCE_TIMELINE="$2"

     

       1119
       1119
       +
                       shift 2

     

       1120
       1120
       +
                       ;;

     

       1121
       1121
       +
                   --list-cache)

     

       1122
       1122
       +
                       load_config

     

       1123
       1123
       +
                       check_dependencies

     

       1124
       1124
       +
                       

     

       1125
       1125
       +
                       # Get session token

     

       1126
       1126
       +
                       local token

     

       1127
       1127
       +
                       token=$(get_session_token)

     

       1128
       1128
       +
                       if [ -z "$token" ] || [ "$token" = "null" ]; then

     

       1129
       1129
       +
                           if ! authenticate_bluesky; then

     

       1130
       1130
       +
                               log_error "Failed to authenticate with Bluesky"

     

       1131
       1131
       +
                               exit 1

     

       1132
       1132
       +
                           else

     

       1133
       1133
       +
                               token=$(get_session_token)

     

       1134
       1134
       +
                           fi

     

       1135
       1135
       +
                       fi

     

       1136
       1136
       +
                       

     

       1137
       1137
       +
                       list_cached_blobs "$token"

     

       1138
       1138
       +
                       exit $?

     

       1139
       1139
       +
                       ;;

     

       1140
       1140
       +
                   --cleanup-cache)

     

       1141
       1141
       +
                       local cleanup_days="30"

     

       1142
       1142
       +
                       if [[ "$2" =~ ^[0-9]+$ ]]; then

     

       1143
       1143
       +
                           cleanup_days="$2"

     

       1144
       1144
       +
                           shift

     

       1145
       1145
       +
                       fi

     

       1146
       1146
       +
                       

     

       1147
       1147
       +
                       load_config

     

       1148
       1148
       +
                       check_dependencies

     

       1149
       1149
       +
                       

     

       1150
       1150
       +
                       # Get session token

     

       1151
       1151
       +
                       local token

     

       1152
       1152
       +
                       token=$(get_session_token)

     

       1153
       1153
       +
                       if [ -z "$token" ] || [ "$token" = "null" ]; then

     

       1154
       1154
       +
                           if ! authenticate_bluesky; then

     

       1155
       1155
       +
                               log_error "Failed to authenticate with Bluesky"

     

       1156
       1156
       +
                               exit 1

     

       1157
       1157
       +
                           else

     

       1158
       1158
       +
                               token=$(get_session_token)

     

       1159
       1159
       +
                           fi

     

       1160
       1160
       +
                       fi

     

       1161
       1161
       +
                       

     

       1162
       1162
       +
                       cleanup_cached_blobs "$token" "$cleanup_days"

     

       1163
       1163
       +
                       exit $?

     

       1164
       1164
       +
                       ;;

     

       1165
       1165
       +
                   --clear-cache)

     

       1166
       1166
       +
                       echo "WARNING: This will delete ALL cached blob references!"

     

       1167
       1167
       +
                       echo "You will need to re-upload all images on next use."

     

       1168
       1168
       +
                       read -p "Are you sure? (y/N): " -n 1 -r

     

       1169
       1169
       +
                       echo

     

       1170
       1170
       +
                       if [[ $REPLY =~ ^[Yy]$ ]]; then

     

       1171
       1171
       +
                           load_config

     

       1172
       1172
       +
                           check_dependencies

     

       1173
       1173
       +
                           

     

       1174
       1174
       +
                           # Get session token

     

       1175
       1175
       +
                           local token

     

       1176
       1176
       +
                           token=$(get_session_token)

     

       1177
       1177
       +
                           if [ -z "$token" ] || [ "$token" = "null" ]; then

     

       1178
       1178
       +
                               if ! authenticate_bluesky; then

     

       1179
       1179
       +
                                   log_error "Failed to authenticate with Bluesky"

     

       1180
       1180
       +
                                   exit 1

     

       1181
       1181
       +
                               else

     

       1182
       1182
       +
                                   token=$(get_session_token)

     

       1183
       1183
       +
                               fi

     

       1184
       1184
       +
                           fi

     

       1185
       1185
       +
                           

     

       1186
       1186
       +
                           cleanup_cached_blobs "$token" "0"  # Delete all

     

       1187
       1187
       +
                           log_success "Cache cleared"

     

       1188
       1188
       +
                       else

     

       1189
       1189
       +
                           log_info "Cache clear cancelled"

     

       1190
       1190
       +
                       fi

     

       1191
       1191
       +
                       exit 0

     

       1192
       1192
       +
                       ;;

     

       1193
       1193
       +
                   -h|--help)

     

       1194
       1194
       +
                       show_help

     

       1195
       1195
       +
                       exit 0

     

       1196
       1196
       +
                       ;;

     

       1197
       1197
       +
                   *)

     

       1198
       1198
       +
                       echo "Unknown option: $1"

     

       1199
       1199
       +
                       show_help

     

       1200
       1200
       +
                       exit 1

     

       1201
       1201
       +
                       ;;

     

       1202
       1202
       +
               esac

     

       1203
       1203
       +
           done

     

       1204
       1204
       +
       }

     

       1205
       1205
       +
       

     

       1206
       1206
       +
       # Override weather function if timeline is forced

     

       1207
       1207
       +
       if [ -n "${FORCE_TIMELINE:-}" ]; then

     

       1208
       1208
       +
           get_weather_timeline() {

     

       1209
       1209
       +
               echo "$FORCE_TIMELINE"

     

       1210
       1210
       +
           }

     

       1211
       1211
       +
       fi

     

       1212
       1212
       +
       

     

       1213
       1213
       +
       # Main execution

     

       1214
       1214
       +
       main() {

     

       1215
       1215
       +
           parse_args "$@"

     

       1216
       1216
       +
           check_dependencies

     

       1217
       1217
       +
           load_config

     

       1218
       1218
       +
       

     

       1219
       1219
       +
           if ! update_pfp; then

     

       1220
       1220
       +
               exit 1

     

       1221
       1221
       +
           fi

     

       1222
       1222
       +
       }

     

       1223
       1223
       +
       

     

       1224
       1224
       +
       # Run main function

     

       1225
       1225
       +
       main "$@"

+2241

site/pfp-updates/index.html

···

       1
       1
       +
       <!doctype html>

     

       2
       2
       +
       <html lang="en">

     

       3
       3
       +
           <head>

     

       4
       4
       +
               <meta charset="UTF-8" />

     

       5
       5
       +
               <meta name="viewport" content="width=device-width, initial-scale=1.0" />

     

       6
       6
       +
       

     

       7
       7
       +
               <link

     

       8
       8
       +
                   rel="icon"

     

       9
       9
       +
                   type="image/png"

     

       10
       10
       +
                   href="/favicon/favicon-96x96.png"

     

       11
       11
       +
                   sizes="96x96"

     

       12
       12
       +
               />

     

       13
       13
       +
               <link rel="icon" type="image/svg+xml" href="/favicon/favicon.svg" />

     

       14
       14
       +
               <link rel="shortcut icon" href="/favicon/favicon.ico" />

     

       15
       15
       +
               <link

     

       16
       16
       +
                   rel="apple-touch-icon"

     

       17
       17
       +
                   sizes="180x180"

     

       18
       18
       +
                   href="/favicon/apple-touch-icon.png"

     

       19
       19
       +
               />

     

       20
       20
       +
               <meta name="apple-mobile-web-app-title" content="Serif.blue" />

     

       21
       21
       +
               <link rel="manifest" href="/favicon/site.webmanifest" />

     

       22
       22
       +
       

     

       23
       23
       +
               <meta

     

       24
       24
       +
                   name="description"

     

       25
       25
       +
                   content="Serif.blue - Fancy projects by Kieran"

     

       26
       26
       +
               />

     

       27
       27
       +
               <meta name="color-scheme" content="light" />

     

       28
       28
       +
       

     

       29
       29
       +
               <meta property="og:title" content="Serif.blue - pfp gradient builder" />

     

       30
       30
       +
               <meta property="og:type" content="website" />

     

       31
       31
       +
               <meta property="og:url" content="https://serif.blue/pfp-updates" />

     

       32
       32
       +
               <meta property="og:image" content="/og.png" />

     

       33
       33
       +
       

     

       34
       34
       +
               <link rel="me" href="https://dunkirk.sh" />

     

       35
       35
       +
               <link rel="me" href="https://bsky.app/profile/dunkirk.sh" />

     

       36
       36
       +
               <link rel="me" href="https://github.com/taciturnaxolotl" />

     

       37
       37
       +
       

     

       38
       38
       +
               <title>Sky Gradient Timeline Builder</title>

     

       39
       39
       +
               <style>

     

       40
       40
       +
                   body {

     

       41
       41
       +
                       font-family: Arial, sans-serif;

     

       42
       42
       +
                       max-width: 1400px;

     

       43
       43
       +
                       margin: 0 auto;

     

       44
       44
       +
                       padding: 20px;

     

       45
       45
       +
                       background: #f5f5f5;

     

       46
       46
       +
                   }

     

       47
       47
       +
       

     

       48
       48
       +
                   .container {

     

       49
       49
       +
                       display: grid;

     

       50
       50
       +
                       grid-template-columns: 350px 1fr;

     

       51
       51
       +
                       gap: 20px;

     

       52
       52
       +
                       margin-bottom: 20px;

     

       53
       53
       +
                   }

     

       54
       54
       +
       

     

       55
       55
       +
                   .sidebar {

     

       56
       56
       +
                       background: white;

     

       57
       57
       +
                       padding: 20px;

     

       58
       58
       +
                       border-radius: 8px;

     

       59
       59
       +
                       box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);

     

       60
       60
       +
                       height: fit-content;

     

       61
       61
       +
                       overflow-y: auto;

     

       62
       62
       +
                       overflow-x: auto;

     

       63
       63
       +
                       max-height: 90vh;

     

       64
       64
       +
                       word-wrap: break-word;

     

       65
       65
       +
                       overflow-wrap: break-word;

     

       66
       66
       +
                   }

     

       67
       67
       +
       

     

       68
       68
       +
                   .timeline-area {

     

       69
       69
       +
                       background: white;

     

       70
       70
       +
                       padding: 20px;

     

       71
       71
       +
                       border-radius: 8px;

     

       72
       72
       +
                       box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);

     

       73
       73
       +
                   }

     

       74
       74
       +
       

     

       75
       75
       +
                   .upload-section {

     

       76
       76
       +
                       margin-bottom: 20px;

     

       77
       77
       +
                       padding: 15px;

     

       78
       78
       +
                       border: 2px dashed #ddd;

     

       79
       79
       +
                       border-radius: 8px;

     

       80
       80
       +
                       text-align: center;

     

       81
       81
       +
                   }

     

       82
       82
       +
       

     

       83
       83
       +
                   .timeline-selector {

     

       84
       84
       +
                       margin-bottom: 20px;

     

       85
       85
       +
                   }

     

       86
       86
       +
       

     

       87
       87
       +
                   .timeline-tabs {

     

       88
       88
       +
                       display: flex;

     

       89
       89
       +
                       flex-wrap: wrap;

     

       90
       90
       +
                       gap: 5px;

     

       91
       91
       +
                       margin-bottom: 10px;

     

       92
       92
       +
                   }

     

       93
       93
       +
       

     

       94
       94
       +
                   .timeline-tab {

     

       95
       95
       +
                       padding: 8px 12px;

     

       96
       96
       +
                       border: 1px solid #ddd;

     

       97
       97
       +
                       border-radius: 4px;

     

       98
       98
       +
                       cursor: pointer;

     

       99
       99
       +
                       font-size: 12px;

     

       100
       100
       +
                       background: #f8f9fa;

     

       101
       101
       +
                       transition: all 0.2s;

     

       102
       102
       +
                   }

     

       103
       103
       +
       

     

       104
       104
       +
                   .timeline-tab.active {

     

       105
       105
       +
                       background: #007bff;

     

       106
       106
       +
                       color: white;

     

       107
       107
       +
                       border-color: #007bff;

     

       108
       108
       +
                   }

     

       109
       109
       +
       

     

       110
       110
       +
                   .timeline-tab:hover {

     

       111
       111
       +
                       background: #e9ecef;

     

       112
       112
       +
                   }

     

       113
       113
       +
       

     

       114
       114
       +
                   .timeline-tab.active:hover {

     

       115
       115
       +
                       background: #0056b3;

     

       116
       116
       +
                   }

     

       117
       117
       +
       

     

       118
       118
       +
                   .new-timeline {

     

       119
       119
       +
                       display: flex;

     

       120
       120
       +
                       gap: 5px;

     

       121
       121
       +
                       margin-bottom: 15px;

     

       122
       122
       +
                   }

     

       123
       123
       +
       

     

       124
       124
       +
                   .timeline-grid {

     

       125
       125
       +
                       display: grid;

     

       126
       126
       +
                       grid-template-columns: repeat(24, 1fr);

     

       127
       127
       +
                       gap: 2px;

     

       128
       128
       +
                       margin-bottom: 20px;

     

       129
       129
       +
                       border: 1px solid #ddd;

     

       130
       130
       +
                       border-radius: 4px;

     

       131
       131
       +
                       padding: 10px;

     

       132
       132
       +
                       background: #f8f9fa;

     

       133
       133
       +
                   }

     

       134
       134
       +
       

     

       135
       135
       +
                   .hour-slot {

     

       136
       136
       +
                       aspect-ratio: 1;

     

       137
       137
       +
                       border: 1px solid #ccc;

     

       138
       138
       +
                       border-radius: 3px;

     

       139
       139
       +
                       cursor: pointer;

     

       140
       140
       +
                       display: flex;

     

       141
       141
       +
                       align-items: center;

     

       142
       142
       +
                       justify-content: center;

     

       143
       143
       +
                       font-size: 10px;

     

       144
       144
       +
                       font-weight: bold;

     

       145
       145
       +
                       position: relative;

     

       146
       146
       +
                       transition: all 0.2s;

     

       147
       147
       +
                   }

     

       148
       148
       +
       

     

       149
       149
       +
                   .hour-slot:hover {

     

       150
       150
       +
                       border-color: #007bff;

     

       151
       151
       +
                       transform: scale(1.1);

     

       152
       152
       +
                       z-index: 10;

     

       153
       153
       +
                   }

     

       154
       154
       +
       

     

       155
       155
       +
                   .hour-slot.selected {

     

       156
       156
       +
                       border: 2px solid #007bff;

     

       157
       157
       +
                       box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);

     

       158
       158
       +
                   }

     

       159
       159
       +
       

     

       160
       160
       +
                   .color-input {

     

       161
       161
       +
                       width: 60px;

     

       162
       162
       +
                       height: 30px;

     

       163
       163
       +
                       border: none;

     

       164
       164
       +
                       border-radius: 4px;

     

       165
       165
       +
                       cursor: pointer;

     

       166
       166
       +
                       margin: 0 5px;

     

       167
       167
       +
                   }

     

       168
       168
       +
       

     

       169
       169
       +
                   .slider-group {

     

       170
       170
       +
                       margin: 10px 0;

     

       171
       171
       +
                       display: flex;

     

       172
       172
       +
                       align-items: center;

     

       173
       173
       +
                       gap: 10px;

     

       174
       174
       +
                   }

     

       175
       175
       +
       

     

       176
       176
       +
                   .slider {

     

       177
       177
       +
                       flex: 1;

     

       178
       178
       +
                       height: 6px;

     

       179
       179
       +
                       border-radius: 3px;

     

       180
       180
       +
                       background: #ddd;

     

       181
       181
       +
                       outline: none;

     

       182
       182
       +
                   }

     

       183
       183
       +
       

     

       184
       184
       +
                   .value-display {

     

       185
       185
       +
                       min-width: 40px;

     

       186
       186
       +
                       font-weight: bold;

     

       187
       187
       +
                   }

     

       188
       188
       +
       

     

       189
       189
       +
                   .preview-canvas {

     

       190
       190
       +
                       max-width: 200px;

     

       191
       191
       +
                       border: 1px solid #ddd;

     

       192
       192
       +
                       border-radius: 8px;

     

       193
       193
       +
                       margin: 10px 0;

     

       194
       194
       +
                   }

     

       195
       195
       +
       

     

       196
       196
       +
                   .btn {

     

       197
       197
       +
                       padding: 8px 12px;

     

       198
       198
       +
                       border: none;

     

       199
       199
       +
                       border-radius: 4px;

     

       200
       200
       +
                       cursor: pointer;

     

       201
       201
       +
                       font-size: 12px;

     

       202
       202
       +
                       transition: all 0.2s;

     

       203
       203
       +
                       margin: 2px;

     

       204
       204
       +
                   }

     

       205
       205
       +
       

     

       206
       206
       +
                   .btn-primary {

     

       207
       207
       +
                       background: #007bff;

     

       208
       208
       +
                       color: white;

     

       209
       209
       +
                   }

     

       210
       210
       +
                   .btn-success {

     

       211
       211
       +
                       background: #28a745;

     

       212
       212
       +
                       color: white;

     

       213
       213
       +
                   }

     

       214
       214
       +
                   .btn-danger {

     

       215
       215
       +
                       background: #dc3545;

     

       216
       216
       +
                       color: white;

     

       217
       217
       +
                   }

     

       218
       218
       +
                   .btn-secondary {

     

       219
       219
       +
                       background: #6c757d;

     

       220
       220
       +
                       color: white;

     

       221
       221
       +
                   }

     

       222
       222
       +
                   .btn-warning {

     

       223
       223
       +
                       background: #ffc107;

     

       224
       224
       +
                       color: black;

     

       225
       225
       +
                   }

     

       226
       226
       +
       

     

       227
       227
       +
                   .btn:hover {

     

       228
       228
       +
                       transform: translateY(-1px);

     

       229
       229
       +
                       box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);

     

       230
       230
       +
                   }

     

       231
       231
       +
       

     

       232
       232
       +
                   .status {

     

       233
       233
       +
                       margin: 10px 0;

     

       234
       234
       +
                       padding: 10px;

     

       235
       235
       +
                       border-radius: 4px;

     

       236
       236
       +
                       display: none;

     

       237
       237
       +
                   }

     

       238
       238
       +
       

     

       239
       239
       +
                   .status.error {

     

       240
       240
       +
                       background: #ffe6e6;

     

       241
       241
       +
                       color: #d00;

     

       242
       242
       +
                       display: block;

     

       243
       243
       +
                   }

     

       244
       244
       +
                   .status.success {

     

       245
       245
       +
                       background: #e6ffe6;

     

       246
       246
       +
                       color: #060;

     

       247
       247
       +
                       display: block;

     

       248
       248
       +
                   }

     

       249
       249
       +
       

     

       250
       250
       +
                   .hour-labels {

     

       251
       251
       +
                       display: grid;

     

       252
       252
       +
                       grid-template-columns: repeat(24, 1fr);

     

       253
       253
       +
                       gap: 2px;

     

       254
       254
       +
                       margin-bottom: 5px;

     

       255
       255
       +
                       padding: 0 10px;

     

       256
       256
       +
                   }

     

       257
       257
       +
       

     

       258
       258
       +
                   .hour-label {

     

       259
       259
       +
                       text-align: center;

     

       260
       260
       +
                       font-size: 10px;

     

       261
       261
       +
                       color: #666;

     

       262
       262
       +
                   }

     

       263
       263
       +
       

     

       264
       264
       +
                   .config-export {

     

       265
       265
       +
                       margin-top: 20px;

     

       266
       266
       +
                       padding: 15px;

     

       267
       267
       +
                       border: 1px solid #ddd;

     

       268
       268
       +
                       border-radius: 4px;

     

       269
       269
       +
                       background: #f8f9fa;

     

       270
       270
       +
                   }

     

       271
       271
       +
       

     

       272
       272
       +
                   .timeline-info {

     

       273
       273
       +
                       font-size: 12px;

     

       274
       274
       +
                       color: #666;

     

       275
       275
       +
                       margin-bottom: 15px;

     

       276
       276
       +
                       padding: 10px;

     

       277
       277
       +
                       background: #e3f2fd;

     

       278
       278
       +
                       border-radius: 4px;

     

       279
       279
       +
                   }

     

       280
       280
       +
               </style>

     

       281
       281
       +
           </head>

     

       282
       282
       +
           <body>

     

       283
       283
       +
               <h1>🌅 Sky Gradient Timeline Builder</h1>

     

       284
       284
       +
       

     

       285
       285
       +
               <div class="container">

     

       286
       286
       +
                   <div class="sidebar">

     

       287
       287
       +
                       <div class="upload-section">

     

       288
       288
       +
                           <h3>Upload Images</h3>

     

       289
       289
       +
                           <div>

     

       290
       290
       +
                               <label>Base Image:</label><br />

     

       291
       291
       +
                               <input type="file" id="baseImage" accept="image/*" />

     

       292
       292
       +
                           </div>

     

       293
       293
       +
                           <br />

     

       294
       294
       +
                           <div>

     

       295
       295
       +
                               <label>Matte:</label><br />

     

       296
       296
       +
                               <input type="file" id="matteImage" accept="image/*" />

     

       297
       297
       +
                           </div>

     

       298
       298
       +
                           <div class="status" id="uploadStatus"></div>

     

       299
       299
       +
                       </div>

     

       300
       300
       +
       

     

       301
       301
       +
                       <div>

     

       302
       302
       +
                           <h3>Hour Settings</h3>

     

       303
       303
       +
                           <div

     

       304
       304
       +
                               id="hourInfo"

     

       305
       305
       +
                               style="

     

       306
       306
       +
                                   font-size: 12px;

     

       307
       307
       +
                                   color: #666;

     

       308
       308
       +
                                   margin-bottom: 10px;

     

       309
       309
       +
                               "

     

       310
       310
       +
                           >

     

       311
       311
       +
                               Click an hour slot to configure

     

       312
       312
       +
                           </div>

     

       313
       313
       +
       

     

       314
       314
       +
                           <div

     

       315
       315
       +
                               style="

     

       316
       316
       +
                                   display: flex;

     

       317
       317
       +
                                   align-items: center;

     

       318
       318
       +
                                   gap: 10px;

     

       319
       319
       +
                                   margin: 15px 0;

     

       320
       320
       +
                               "

     

       321
       321
       +
                           >

     

       322
       322
       +
                               <label>From:</label>

     

       323
       323
       +
                               <input

     

       324
       324
       +
                                   type="color"

     

       325
       325
       +
                                   id="color1"

     

       326
       326
       +
                                   class="color-input"

     

       327
       327
       +
                                   value="#4682b4"

     

       328
       328
       +
                               />

     

       329
       329
       +
                               <label>To:</label>

     

       330
       330
       +
                               <input

     

       331
       331
       +
                                   type="color"

     

       332
       332
       +
                                   id="color2"

     

       333
       333
       +
                                   class="color-input"

     

       334
       334
       +
                                   value="#87ceeb"

     

       335
       335
       +
                               />

     

       336
       336
       +
                           </div>

     

       337
       337
       +
       

     

       338
       338
       +
                           <div class="slider-group">

     

       339
       339
       +
                               <label>Background:</label>

     

       340
       340
       +
                               <input

     

       341
       341
       +
                                   type="range"

     

       342
       342
       +
                                   id="bgIntensity"

     

       343
       343
       +
                                   class="slider"

     

       344
       344
       +
                                   min="0"

     

       345
       345
       +
                                   max="100"

     

       346
       346
       +
                                   value="40"

     

       347
       347
       +
                               />

     

       348
       348
       +
                               <span class="value-display" id="bgValue">40%</span>

     

       349
       349
       +
                           </div>

     

       350
       350
       +
       

     

       351
       351
       +
                           <div class="slider-group">

     

       352
       352
       +
                               <label>Foreground:</label>

     

       353
       353
       +
                               <input

     

       354
       354
       +
                                   type="range"

     

       355
       355
       +
                                   id="fgIntensity"

     

       356
       356
       +
                                   class="slider"

     

       357
       357
       +
                                   min="0"

     

       358
       358
       +
                                   max="50"

     

       359
       359
       +
                                   value="8"

     

       360
       360
       +
                               />

     

       361
       361
       +
                               <span class="value-display" id="fgValue">8%</span>

     

       362
       362
       +
                           </div>

     

       363
       363
       +
       

     

       364
       364
       +
                           <button

     

       365
       365
       +
                               onclick="applyToSelectedHour()"

     

       366
       366
       +
                               class="btn btn-success"

     

       367
       367
       +
                               style="width: 100%; margin-top: 10px"

     

       368
       368
       +
                           >

     

       369
       369
       +
                               Apply to Selected Hour

     

       370
       370
       +
                           </button>

     

       371
       371
       +
       

     

       372
       372
       +
                           <h4>Preview</h4>

     

       373
       373
       +
                           <canvas

     

       374
       374
       +
                               id="previewCanvas"

     

       375
       375
       +
                               class="preview-canvas"

     

       376
       376
       +
                               width="150"

     

       377
       377
       +
                               height="150"

     

       378
       378
       +
                           ></canvas>

     

       379
       379
       +
       

     

       380
       380
       +
                           <canvas

     

       381
       381
       +
                               id="renderCanvas"

     

       382
       382
       +
                               style="display: none"

     

       383
       383
       +
                               width="400"

     

       384
       384
       +
                               height="400"

     

       385
       385
       +
                           ></canvas>

     

       386
       386
       +
                       </div>

     

       387
       387
       +
       

     

       388
       388
       +
                       <div class="config-export">

     

       389
       389
       +
                           <h4>Export Config</h4>

     

       390
       390
       +
                           <button

     

       391
       391
       +
                               onclick="copyAllTimelines()"

     

       392
       392
       +
                               class="btn btn-warning"

     

       393
       393
       +
                               style="width: 100%; margin-bottom: 10px"

     

       394
       394
       +
                           >

     

       395
       395
       +
                               📋 Copy All Timelines

     

       396
       396
       +
                           </button>

     

       397
       397
       +
       

     

       398
       398
       +
                           <label style="font-size: 12px; color: #666"

     

       399
       399
       +
                               >Config Output:</label

     

       400
       400
       +
                           >

     

       401
       401
       +
                           <textarea

     

       402
       402
       +
                               id="configOutput"

     

       403
       403
       +
                               readonly

     

       404
       404
       +
                               style="

     

       405
       405
       +
                                   width: 100%;

     

       406
       406
       +
                                   height: 120px;

     

       407
       407
       +
                                   font-family: monospace;

     

       408
       408
       +
                                   font-size: 10px;

     

       409
       409
       +
                                   resize: vertical;

     

       410
       410
       +
                                   margin-top: 5px;

     

       411
       411
       +
                                   padding: 8px;

     

       412
       412
       +
                                   border: 1px solid #ddd;

     

       413
       413
       +
                                   border-radius: 4px;

     

       414
       414
       +
                                   word-break: break-all;

     

       415
       415
       +
                                   white-space: pre-wrap;

     

       416
       416
       +
                                   overflow-wrap: break-word;

     

       417
       417
       +
                               "

     

       418
       418
       +
                           ></textarea>

     

       419
       419
       +
                           <button

     

       420
       420
       +
                               onclick="copyToClipboard()"

     

       421
       421
       +
                               class="btn btn-success"

     

       422
       422
       +
                               style="width: 100%; margin-top: 5px"

     

       423
       423
       +
                           >

     

       424
       424
       +
                               📋 Copy to Clipboard

     

       425
       425
       +
                           </button>

     

       426
       426
       +
       

     

       427
       427
       +
                           <hr style="margin: 15px 0" />

     

       428
       428
       +
       

     

       429
       429
       +
                           <h4>Import Config</h4>

     

       430
       430
       +
                           <label style="font-size: 12px; color: #666"

     

       431
       431
       +
                               >Paste Config (auto-imports):</label

     

       432
       432
       +
                           >

     

       433
       433
       +
                           <textarea

     

       434
       434
       +
                               id="bulkConfigInput"

     

       435
       435
       +
                               placeholder="Paste timeline config here..."

     

       436
       436
       +
                               style="

     

       437
       437
       +
                                   width: 100%;

     

       438
       438
       +
                                   height: 80px;

     

       439
       439
       +
                                   font-family: monospace;

     

       440
       440
       +
                                   font-size: 10px;

     

       441
       441
       +
                                   resize: vertical;

     

       442
       442
       +
                                   margin-top: 5px;

     

       443
       443
       +
                                   padding: 8px;

     

       444
       444
       +
                                   border: 1px solid #ddd;

     

       445
       445
       +
                                   border-radius: 4px;

     

       446
       446
       +
                               "

     

       447
       447
       +
                           ></textarea>

     

       448
       448
       +
                       </div>

     

       449
       449
       +
                   </div>

     

       450
       450
       +
       

     

       451
       451
       +
                   <div class="main-area">

     

       452
       452
       +
                       <div class="timeline-area">

     

       453
       453
       +
                           <div class="timeline-selector">

     

       454
       454
       +
                               <h3 style="margin-top: 0">Weather Timelines</h3>

     

       455
       455
       +
                               <div class="timeline-info">

     

       456
       456
       +
                                   Create different timelines for various weather

     

       457
       457
       +
                                   conditions. Each timeline defines how your profile

     

       458
       458
       +
                                   picture should look throughout the day.

     

       459
       459
       +
                               </div>

     

       460
       460
       +
       

     

       461
       461
       +
                               <div class="new-timeline">

     

       462
       462
       +
                                   <input

     

       463
       463
       +
                                       type="text"

     

       464
       464
       +
                                       id="newTimelineName"

     

       465
       465
       +
                                       placeholder="Timeline name (e.g. sunny, rainy, cloudy)"

     

       466
       466
       +
                                       style="flex: 1; padding: 8px"

     

       467
       467
       +
                                   />

     

       468
       468
       +
                                   <button

     

       469
       469
       +
                                       onclick="createTimeline()"

     

       470
       470
       +
                                       class="btn btn-success"

     

       471
       471
       +
                                   >

     

       472
       472
       +
                                       Create

     

       473
       473
       +
                                   </button>

     

       474
       474
       +
                               </div>

     

       475
       475
       +
       

     

       476
       476
       +
                               <div class="timeline-tabs" id="timelineTabs">

     

       477
       477
       +
                                   <div

     

       478
       478
       +
                                       class="timeline-tab active"

     

       479
       479
       +
                                       data-timeline="sunny"

     

       480
       480
       +
                                   >

     

       481
       481
       +
                                       Sunny

     

       482
       482
       +
                                   </div>

     

       483
       483
       +
                               </div>

     

       484
       484
       +
       

     

       485
       485
       +
                               <div style="margin: 10px 0">

     

       486
       486
       +
                                   <button

     

       487
       487
       +
                                       onclick="duplicateTimeline()"

     

       488
       488
       +
                                       class="btn btn-secondary"

     

       489
       489
       +
                                   >

     

       490
       490
       +
                                       Duplicate Current

     

       491
       491
       +
                                   </button>

     

       492
       492
       +
                                   <button

     

       493
       493
       +
                                       onclick="deleteTimeline()"

     

       494
       494
       +
                                       class="btn btn-danger"

     

       495
       495
       +
                                   >

     

       496
       496
       +
                                       Delete Current

     

       497
       497
       +
                                   </button>

     

       498
       498
       +
                               </div>

     

       499
       499
       +
                           </div>

     

       500
       500
       +
       

     

       501
       501
       +
                           <div>

     

       502
       502
       +
                               <h4>

     

       503
       503
       +
                                   24-Hour Timeline:

     

       504
       504
       +
                                   <span id="currentTimelineName">Sunny</span>

     

       505
       505
       +
                               </h4>

     

       506
       506
       +
                               <div class="hour-labels">

     

       507
       507
       +
                                   <div class="hour-label">0</div>

     

       508
       508
       +
                                   <div class="hour-label">1</div>

     

       509
       509
       +
                                   <div class="hour-label">2</div>

     

       510
       510
       +
                                   <div class="hour-label">3</div>

     

       511
       511
       +
                                   <div class="hour-label">4</div>

     

       512
       512
       +
                                   <div class="hour-label">5</div>

     

       513
       513
       +
                                   <div class="hour-label">6</div>

     

       514
       514
       +
                                   <div class="hour-label">7</div>

     

       515
       515
       +
                                   <div class="hour-label">8</div>

     

       516
       516
       +
                                   <div class="hour-label">9</div>

     

       517
       517
       +
                                   <div class="hour-label">10</div>

     

       518
       518
       +
                                   <div class="hour-label">11</div>

     

       519
       519
       +
                                   <div class="hour-label">12</div>

     

       520
       520
       +
                                   <div class="hour-label">13</div>

     

       521
       521
       +
                                   <div class="hour-label">14</div>

     

       522
       522
       +
                                   <div class="hour-label">15</div>

     

       523
       523
       +
                                   <div class="hour-label">16</div>

     

       524
       524
       +
                                   <div class="hour-label">17</div>

     

       525
       525
       +
                                   <div class="hour-label">18</div>

     

       526
       526
       +
                                   <div class="hour-label">19</div>

     

       527
       527
       +
                                   <div class="hour-label">20</div>

     

       528
       528
       +
                                   <div class="hour-label">21</div>

     

       529
       529
       +
                                   <div class="hour-label">22</div>

     

       530
       530
       +
                                   <div class="hour-label">23</div>

     

       531
       531
       +
                               </div>

     

       532
       532
       +
                               <div class="timeline-grid" id="timelineGrid">

     

       533
       533
       +
                                   <!-- Hours 0-23 will be generated here -->

     

       534
       534
       +
                               </div>

     

       535
       535
       +
       

     

       536
       536
       +
                               <div style="margin-top: 20px">

     

       537
       537
       +
                                   <h4>Bulk Actions</h4>

     

       538
       538
       +
                                   <div

     

       539
       539
       +
                                       style="

     

       540
       540
       +
                                           display: flex;

     

       541
       541
       +
                                           gap: 10px;

     

       542
       542
       +
                                           flex-wrap: wrap;

     

       543
       543
       +
                                           margin-bottom: 15px;

     

       544
       544
       +
                                       "

     

       545
       545
       +
                                   >

     

       546
       546
       +
                                       <button

     

       547
       547
       +
                                           onclick="loadPreset('dawn', [5,6,7])"

     

       548
       548
       +
                                           class="btn btn-secondary"

     

       549
       549
       +
                                       >

     

       550
       550
       +
                                           Dawn (5-7)

     

       551
       551
       +
                                       </button>

     

       552
       552
       +
                                       <button

     

       553
       553
       +
                                           onclick="loadPreset('morning', [8,9,10,11])"

     

       554
       554
       +
                                           class="btn btn-secondary"

     

       555
       555
       +
                                       >

     

       556
       556
       +
                                           Morning (8-11)

     

       557
       557
       +
                                       </button>

     

       558
       558
       +
                                       <button

     

       559
       559
       +
                                           onclick="loadPreset('afternoon', [12,13,14,15,16])"

     

       560
       560
       +
                                           class="btn btn-secondary"

     

       561
       561
       +
                                       >

     

       562
       562
       +
                                           Afternoon (12-16)

     

       563
       563
       +
                                       </button>

     

       564
       564
       +
                                       <button

     

       565
       565
       +
                                           onclick="loadPreset('sunset', [17,18,19])"

     

       566
       566
       +
                                           class="btn btn-secondary"

     

       567
       567
       +
                                       >

     

       568
       568
       +
                                           Sunset (17-19)

     

       569
       569
       +
                                       </button>

     

       570
       570
       +
                                       <button

     

       571
       571
       +
                                           onclick="loadPreset('night', [20,21,22,23,0,1,2,3,4])"

     

       572
       572
       +
                                           class="btn btn-secondary"

     

       573
       573
       +
                                       >

     

       574
       574
       +
                                           Night (20-4)

     

       575
       575
       +
                                       </button>

     

       576
       576
       +
                                   </div>

     

       577
       577
       +
       

     

       578
       578
       +
                                   <div

     

       579
       579
       +
                                       style="

     

       580
       580
       +
                                           border: 1px solid #ddd;

     

       581
       581
       +
                                           padding: 10px;

     

       582
       582
       +
                                           border-radius: 4px;

     

       583
       583
       +
                                           background: #f8f9fa;

     

       584
       584
       +
                                       "

     

       585
       585
       +
                                   >

     

       586
       586
       +
                                       <h5 style="margin: 0 0 10px 0">Custom Range</h5>

     

       587
       587
       +
                                       <div

     

       588
       588
       +
                                           style="

     

       589
       589
       +
                                               display: flex;

     

       590
       590
       +
                                               gap: 5px;

     

       591
       591
       +
                                               align-items: center;

     

       592
       592
       +
                                               margin-bottom: 10px;

     

       593
       593
       +
                                           "

     

       594
       594
       +
                                       >

     

       595
       595
       +
                                           <label style="font-size: 12px">From:</label>

     

       596
       596
       +
                                           <input

     

       597
       597
       +
                                               type="number"

     

       598
       598
       +
                                               id="rangeStart"

     

       599
       599
       +
                                               min="0"

     

       600
       600
       +
                                               max="23"

     

       601
       601
       +
                                               value="9"

     

       602
       602
       +
                                               style="width: 50px; padding: 4px"

     

       603
       603
       +
                                           />

     

       604
       604
       +
                                           <label style="font-size: 12px">To:</label>

     

       605
       605
       +
                                           <input

     

       606
       606
       +
                                               type="number"

     

       607
       607
       +
                                               id="rangeEnd"

     

       608
       608
       +
                                               min="0"

     

       609
       609
       +
                                               max="23"

     

       610
       610
       +
                                               value="11"

     

       611
       611
       +
                                               style="width: 50px; padding: 4px"

     

       612
       612
       +
                                           />

     

       613
       613
       +
                                           <button

     

       614
       614
       +
                                               onclick="applyCurrentToRange()"

     

       615
       615
       +
                                               class="btn btn-success"

     

       616
       616
       +
                                               style="font-size: 11px"

     

       617
       617
       +
                                           >

     

       618
       618
       +
                                               Apply Current

     

       619
       619
       +
                                           </button>

     

       620
       620
       +
                                       </div>

     

       621
       621
       +
                                       <div style="font-size: 11px; color: #666">

     

       622
       622
       +
                                           Uses current gradient & intensity settings

     

       623
       623
       +
                                           for the specified hour range

     

       624
       624
       +
                                       </div>

     

       625
       625
       +
                                   </div>

     

       626
       626
       +
                               </div>

     

       627
       627
       +
                           </div>

     

       628
       628
       +
                       </div>

     

       629
       629
       +
       

     

       630
       630
       +
                       <div id="renderGallery" style="margin-top: 20px">

     

       631
       631
       +
                           <div

     

       632
       632
       +
                               style="

     

       633
       633
       +
                                   background: white;

     

       634
       634
       +
                                   padding: 20px;

     

       635
       635
       +
                                   padding-top: 5px;

     

       636
       636
       +
                                   border-radius: 8px;

     

       637
       637
       +
                                   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);

     

       638
       638
       +
                               "

     

       639
       639
       +
                           >

     

       640
       640
       +
                               <h3>🖼️ Render Gallery</h3>

     

       641
       641
       +
       

     

       642
       642
       +
                               <div

     

       643
       643
       +
                                   style="

     

       644
       644
       +
                                       display: flex;

     

       645
       645
       +
                                       justify-content: space-between;

     

       646
       646
       +
                                       align-items: center;

     

       647
       647
       +
                                       margin-bottom: 15px;

     

       648
       648
       +
                                       flex-wrap: wrap;

     

       649
       649
       +
                                       gap: 10px;

     

       650
       650
       +
                                   "

     

       651
       651
       +
                               >

     

       652
       652
       +
                                   <div

     

       653
       653
       +
                                       id="galleryInfo"

     

       654
       654
       +
                                       style="font-size: 14px; color: #666"

     

       655
       655
       +
                                   >

     

       656
       656
       +
                                       Ready to render timelines

     

       657
       657
       +
                                   </div>

     

       658
       658
       +
                                   <div style="display: flex; gap: 10px">

     

       659
       659
       +
                                       <button

     

       660
       660
       +
                                           onclick="renderAllTimelines()"

     

       661
       661
       +
                                           class="btn btn-success"

     

       662
       662
       +
                                       >

     

       663
       663
       +
                                           🎨 Render All

     

       664
       664
       +
                                       </button>

     

       665
       665
       +
                                       <button

     

       666
       666
       +
                                           onclick="downloadAllRendered()"

     

       667
       667
       +
                                           class="btn btn-primary"

     

       668
       668
       +
                                           id="downloadAllBtn"

     

       669
       669
       +
                                           disabled

     

       670
       670
       +
                                       >

     

       671
       671
       +
                                           💾 Download ZIP

     

       672
       672
       +
                                       </button>

     

       673
       673
       +
                                       <button

     

       674
       674
       +
                                           onclick="clearGallery()"

     

       675
       675
       +
                                           class="btn btn-danger"

     

       676
       676
       +
                                       >

     

       677
       677
       +
                                           🗑️ Clear Gallery

     

       678
       678
       +
                                       </button>

     

       679
       679
       +
                                   </div>

     

       680
       680
       +
                               </div>

     

       681
       681
       +
       

     

       682
       682
       +
                               <div

     

       683
       683
       +
                                   id="bulkProgress"

     

       684
       684
       +
                                   style="margin-bottom: 15px; display: none"

     

       685
       685
       +
                               >

     

       686
       686
       +
                                   <div

     

       687
       687
       +
                                       style="

     

       688
       688
       +
                                           background: #e9ecef;

     

       689
       689
       +
                                           border-radius: 4px;

     

       690
       690
       +
                                           overflow: hidden;

     

       691
       691
       +
                                       "

     

       692
       692
       +
                                   >

     

       693
       693
       +
                                       <div

     

       694
       694
       +
                                           id="progressBar"

     

       695
       695
       +
                                           style="

     

       696
       696
       +
                                               background: #28a745;

     

       697
       697
       +
                                               height: 20px;

     

       698
       698
       +
                                               width: 0%;

     

       699
       699
       +
                                               transition: width 0.3s;

     

       700
       700
       +
                                           "

     

       701
       701
       +
                                       ></div>

     

       702
       702
       +
                                   </div>

     

       703
       703
       +
                                   <div

     

       704
       704
       +
                                       id="progressText"

     

       705
       705
       +
                                       style="

     

       706
       706
       +
                                           font-size: 12px;

     

       707
       707
       +
                                           text-align: center;

     

       708
       708
       +
                                           margin-top: 5px;

     

       709
       709
       +
                                       "

     

       710
       710
       +
                                   >

     

       711
       711
       +
                                       0/0

     

       712
       712
       +
                                   </div>

     

       713
       713
       +
                               </div>

     

       714
       714
       +
       

     

       715
       715
       +
                               <div

     

       716
       716
       +
                                   id="galleryContent"

     

       717
       717
       +
                                   style="

     

       718
       718
       +
                                       display: grid;

     

       719
       719
       +
                                       grid-template-columns: repeat(

     

       720
       720
       +
                                           auto-fill,

     

       721
       721
       +
                                           minmax(120px, 1fr)

     

       722
       722
       +
                                       );

     

       723
       723
       +
                                       gap: 15px;

     

       724
       724
       +
                                       min-height: 100px;

     

       725
       725
       +
                                       border: 2px dashed #ddd;

     

       726
       726
       +
                                       border-radius: 8px;

     

       727
       727
       +
                                       padding: 20px;

     

       728
       728
       +
                                       align-items: center;

     

       729
       729
       +
                                       justify-content: center;

     

       730
       730
       +
                                   "

     

       731
       731
       +
                               >

     

       732
       732
       +
                                   <div

     

       733
       733
       +
                                       id="galleryPlaceholder"

     

       734
       734
       +
                                       style="

     

       735
       735
       +
                                           grid-column: 1 / -1;

     

       736
       736
       +
                                           text-align: center;

     

       737
       737
       +
                                           color: #999;

     

       738
       738
       +
                                           font-style: italic;

     

       739
       739
       +
                                       "

     

       740
       740
       +
                                   >

     

       741
       741
       +
                                       Click "Render All" to generate images and see

     

       742
       742
       +
                                       them here

     

       743
       743
       +
                                   </div>

     

       744
       744
       +
                               </div>

     

       745
       745
       +
                           </div>

     

       746
       746
       +
                       </div>

     

       747
       747
       +
                   </div>

     

       748
       748
       +
               </div>

     

       749
       749
       +
       

     

       750
       750
       +
               <script>

     

       751
       751
       +
                   let baseImg = null;

     

       752
       752
       +
                   let matteImg = null;

     

       753
       753
       +
                   let selectedHour = 0;

     

       754
       754
       +
                   let currentTimeline = "sunny";

     

       755
       755
       +
       

     

       756
       756
       +
                   // Preset configurations

     

       757
       757
       +
                   const presets = {

     

       758
       758
       +
                       dawn: {

     

       759
       759
       +
                           color1: "#ff6b35",

     

       760
       760
       +
                           color2: "#f7931e",

     

       761
       761
       +
                           backgroundIntensity: 45,

     

       762
       762
       +
                           foregroundIntensity: 8,

     

       763
       763
       +
                       },

     

       764
       764
       +
                       morning: {

     

       765
       765
       +
                           color1: "#87ceeb",

     

       766
       766
       +
                           color2: "#4682b4",

     

       767
       767
       +
                           backgroundIntensity: 35,

     

       768
       768
       +
                           foregroundIntensity: 5,

     

       769
       769
       +
                       },

     

       770
       770
       +
                       afternoon: {

     

       771
       771
       +
                           color1: "#4682b4",

     

       772
       772
       +
                           color2: "#daa520",

     

       773
       773
       +
                           backgroundIntensity: 30,

     

       774
       774
       +
                           foregroundIntensity: 5,

     

       775
       775
       +
                       },

     

       776
       776
       +
                       sunset: {

     

       777
       777
       +
                           color1: "#ff4500",

     

       778
       778
       +
                           color2: "#8b0000",

     

       779
       779
       +
                           backgroundIntensity: 50,

     

       780
       780
       +
                           foregroundIntensity: 10,

     

       781
       781
       +
                       },

     

       782
       782
       +
                       night: {

     

       783
       783
       +
                           color1: "#191970",

     

       784
       784
       +
                           color2: "#000000",

     

       785
       785
       +
                           backgroundIntensity: 55,

     

       786
       786
       +
                           foregroundIntensity: 12,

     

       787
       787
       +
                       },

     

       788
       788
       +
                   };

     

       789
       789
       +
       

     

       790
       790
       +
                   // Timeline data structure - initialize with proper presets

     

       791
       791
       +
                   let timelines = {

     

       792
       792
       +
                       sunny: {},

     

       793
       793
       +
                   };

     

       794
       794
       +
       

     

       795
       795
       +
                   // Initialize the default sunny timeline with presets

     

       796
       796
       +
                   for (let hour = 0; hour < 24; hour++) {

     

       797
       797
       +
                       if (hour >= 5 && hour <= 7) {

     

       798
       798
       +
                           timelines.sunny[hour] = { ...presets.dawn };

     

       799
       799
       +
                       } else if (hour >= 8 && hour <= 11) {

     

       800
       800
       +
                           timelines.sunny[hour] = { ...presets.morning };

     

       801
       801
       +
                       } else if (hour >= 12 && hour <= 16) {

     

       802
       802
       +
                           timelines.sunny[hour] = { ...presets.afternoon };

     

       803
       803
       +
                       } else if (hour >= 17 && hour <= 19) {

     

       804
       804
       +
                           timelines.sunny[hour] = { ...presets.sunset };

     

       805
       805
       +
                       } else {

     

       806
       806
       +
                           timelines.sunny[hour] = { ...presets.night };

     

       807
       807
       +
                       }

     

       808
       808
       +
                   }

     

       809
       809
       +
       

     

       810
       810
       +
                   // Default hour configuration

     

       811
       811
       +
                   const defaultHourConfig = {

     

       812
       812
       +
                       color1: "#4682b4",

     

       813
       813
       +
                       color2: "#87ceeb",

     

       814
       814
       +
                       backgroundIntensity: 40,

     

       815
       815
       +
                       foregroundIntensity: 8,

     

       816
       816
       +
                   };

     

       817
       817
       +
       

     

       818
       818
       +
                   function initializeTimeline() {

     

       819
       819
       +
                       // Create hour slots

     

       820
       820
       +
                       const grid = document.getElementById("timelineGrid");

     

       821
       821
       +
                       grid.innerHTML = "";

     

       822
       822
       +
       

     

       823
       823
       +
                       for (let hour = 0; hour < 24; hour++) {

     

       824
       824
       +
                           const slot = document.createElement("div");

     

       825
       825
       +
                           slot.className = "hour-slot";

     

       826
       826
       +
                           slot.dataset.hour = hour;

     

       827
       827
       +
                           slot.textContent = hour;

     

       828
       828
       +
                           slot.onclick = () => selectHour(hour);

     

       829
       829
       +
       

     

       830
       830
       +
                           // Initialize with appropriate preset if not exists

     

       831
       831
       +
                           if (!timelines[currentTimeline][hour]) {

     

       832
       832
       +
                               timelines[currentTimeline][hour] =

     

       833
       833
       +
                                   getDefaultConfigForHour(hour);

     

       834
       834
       +
                           }

     

       835
       835
       +
       

     

       836
       836
       +
                           grid.appendChild(slot);

     

       837
       837
       +
                       }

     

       838
       838
       +
       

     

       839
       839
       +
                       updateTimelineDisplay();

     

       840
       840
       +
                       selectHour(0);

     

       841
       841
       +
                   }

     

       842
       842
       +
       

     

       843
       843
       +
                   function getDefaultConfigForHour(hour) {

     

       844
       844
       +
                       // Apply appropriate preset based on hour

     

       845
       845
       +
                       if (hour >= 5 && hour <= 7) {

     

       846
       846
       +
                           return { ...presets.dawn };

     

       847
       847
       +
                       } else if (hour >= 8 && hour <= 11) {

     

       848
       848
       +
                           return { ...presets.morning };

     

       849
       849
       +
                       } else if (hour >= 12 && hour <= 16) {

     

       850
       850
       +
                           return { ...presets.afternoon };

     

       851
       851
       +
                       } else if (hour >= 17 && hour <= 19) {

     

       852
       852
       +
                           return { ...presets.sunset };

     

       853
       853
       +
                       } else {

     

       854
       854
       +
                           return { ...presets.night };

     

       855
       855
       +
                       }

     

       856
       856
       +
                   }

     

       857
       857
       +
       

     

       858
       858
       +
                   function selectHour(hour) {

     

       859
       859
       +
                       selectedHour = hour;

     

       860
       860
       +
       

     

       861
       861
       +
                       // Update UI selection

     

       862
       862
       +
                       document.querySelectorAll(".hour-slot").forEach((slot) => {

     

       863
       863
       +
                           slot.classList.remove("selected");

     

       864
       864
       +
                       });

     

       865
       865
       +
                       document

     

       866
       866
       +
                           .querySelector(`[data-hour="${hour}"]`)

     

       867
       867
       +
                           .classList.add("selected");

     

       868
       868
       +
       

     

       869
       869
       +
                       // Load hour configuration

     

       870
       870
       +
                       const config = timelines[currentTimeline][hour] || {

     

       871
       871
       +
                           ...defaultHourConfig,

     

       872
       872
       +
                       };

     

       873
       873
       +
                       document.getElementById("color1").value = config.color1;

     

       874
       874
       +
                       document.getElementById("color2").value = config.color2;

     

       875
       875
       +
                       document.getElementById("bgIntensity").value =

     

       876
       876
       +
                           config.backgroundIntensity;

     

       877
       877
       +
                       document.getElementById("fgIntensity").value =

     

       878
       878
       +
                           config.foregroundIntensity;

     

       879
       879
       +
       

     

       880
       880
       +
                       // Update displays

     

       881
       881
       +
                       document.getElementById("bgValue").textContent =

     

       882
       882
       +
                           config.backgroundIntensity + "%";

     

       883
       883
       +
                       document.getElementById("fgValue").textContent =

     

       884
       884
       +
                           config.foregroundIntensity + "%";

     

       885
       885
       +
                       document.getElementById("hourInfo").textContent =

     

       886
       886
       +
                           `Configuring hour ${hour} (${hour === 0 ? "12" : hour > 12 ? hour - 12 : hour}${hour < 12 ? "AM" : "PM"})`;

     

       887
       887
       +
       

     

       888
       888
       +
                       updatePreview();

     

       889
       889
       +
                   }

     

       890
       890
       +
       

     

       891
       891
       +
                   function applyToSelectedHour() {

     

       892
       892
       +
                       const config = {

     

       893
       893
       +
                           color1: document.getElementById("color1").value,

     

       894
       894
       +
                           color2: document.getElementById("color2").value,

     

       895
       895
       +
                           backgroundIntensity: parseInt(

     

       896
       896
       +
                               document.getElementById("bgIntensity").value,

     

       897
       897
       +
                           ),

     

       898
       898
       +
                           foregroundIntensity: parseInt(

     

       899
       899
       +
                               document.getElementById("fgIntensity").value,

     

       900
       900
       +
                           ),

     

       901
       901
       +
                       };

     

       902
       902
       +
       

     

       903
       903
       +
                       timelines[currentTimeline][selectedHour] = config;

     

       904
       904
       +
                       updateTimelineDisplay();

     

       905
       905
       +
                       showStatus("Hour " + selectedHour + " updated!", "success");

     

       906
       906
       +
                   }

     

       907
       907
       +
       

     

       908
       908
       +
                   function updateTimelineDisplay() {

     

       909
       909
       +
                       document.querySelectorAll(".hour-slot").forEach((slot) => {

     

       910
       910
       +
                           const hour = parseInt(slot.dataset.hour);

     

       911
       911
       +
                           const config = timelines[currentTimeline][hour];

     

       912
       912
       +
       

     

       913
       913
       +
                           if (config) {

     

       914
       914
       +
                               const gradient = `linear-gradient(135deg, ${config.color1}, ${config.color2})`;

     

       915
       915
       +
                               slot.style.background = gradient;

     

       916
       916
       +
                               slot.style.color = "white";

     

       917
       917
       +
                               slot.style.textShadow = "1px 1px 2px rgba(0,0,0,0.8)";

     

       918
       918
       +
                           } else {

     

       919
       919
       +
                               slot.style.background = "#f8f9fa";

     

       920
       920
       +
                               slot.style.color = "#666";

     

       921
       921
       +
                               slot.style.textShadow = "none";

     

       922
       922
       +
                           }

     

       923
       923
       +
                       });

     

       924
       924
       +
                   }

     

       925
       925
       +
       

     

       926
       926
       +
                   function createTimeline() {

     

       927
       927
       +
                       const name = document

     

       928
       928
       +
                           .getElementById("newTimelineName")

     

       929
       929
       +
                           .value.trim();

     

       930
       930
       +
                       if (!name) {

     

       931
       931
       +
                           showStatus("Please enter a timeline name!", "error");

     

       932
       932
       +
                           return;

     

       933
       933
       +
                       }

     

       934
       934
       +
       

     

       935
       935
       +
                       if (timelines[name]) {

     

       936
       936
       +
                           showStatus("Timeline already exists!", "error");

     

       937
       937
       +
                           return;

     

       938
       938
       +
                       }

     

       939
       939
       +
       

     

       940
       940
       +
                       // Create new timeline with proper presets for each hour

     

       941
       941
       +
                       timelines[name] = {};

     

       942
       942
       +
                       for (let hour = 0; hour < 24; hour++) {

     

       943
       943
       +
                           timelines[name][hour] = getDefaultConfigForHour(hour);

     

       944
       944
       +
                       }

     

       945
       945
       +
       

     

       946
       946
       +
                       // Add tab

     

       947
       947
       +
                       const tab = document.createElement("div");

     

       948
       948
       +
                       tab.className = "timeline-tab";

     

       949
       949
       +
                       tab.dataset.timeline = name;

     

       950
       950
       +
                       tab.textContent = name;

     

       951
       951
       +
                       tab.onclick = () => switchTimeline(name);

     

       952
       952
       +
                       document.getElementById("timelineTabs").appendChild(tab);

     

       953
       953
       +
       

     

       954
       954
       +
                       // Switch to new timeline

     

       955
       955
       +
                       switchTimeline(name);

     

       956
       956
       +
                       document.getElementById("newTimelineName").value = "";

     

       957
       957
       +
                       showStatus(

     

       958
       958
       +
                           `Timeline "${name}" created with default presets!`,

     

       959
       959
       +
                           "success",

     

       960
       960
       +
                       );

     

       961
       961
       +
                   }

     

       962
       962
       +
       

     

       963
       963
       +
                   function switchTimeline(timelineName) {

     

       964
       964
       +
                       currentTimeline = timelineName;

     

       965
       965
       +
       

     

       966
       966
       +
                       // Update tab selection

     

       967
       967
       +
                       document.querySelectorAll(".timeline-tab").forEach((tab) => {

     

       968
       968
       +
                           tab.classList.remove("active");

     

       969
       969
       +
                       });

     

       970
       970
       +
                       document

     

       971
       971
       +
                           .querySelector(`[data-timeline="${timelineName}"]`)

     

       972
       972
       +
                           .classList.add("active");

     

       973
       973
       +
       

     

       974
       974
       +
                       document.getElementById("currentTimelineName").textContent =

     

       975
       975
       +
                           timelineName;

     

       976
       976
       +
                       updateTimelineDisplay();

     

       977
       977
       +
                       selectHour(selectedHour);

     

       978
       978
       +
                   }

     

       979
       979
       +
       

     

       980
       980
       +
                   function duplicateTimeline() {

     

       981
       981
       +
                       const newName = prompt(

     

       982
       982
       +
                           `Enter name for copy of "${currentTimeline}":`,

     

       983
       983
       +
                       );

     

       984
       984
       +
                       if (!newName || timelines[newName]) {

     

       985
       985
       +
                           showStatus(

     

       986
       986
       +
                               "Invalid name or timeline already exists!",

     

       987
       987
       +
                               "error",

     

       988
       988
       +
                           );

     

       989
       989
       +
                           return;

     

       990
       990
       +
                       }

     

       991
       991
       +
       

     

       992
       992
       +
                       // Deep copy current timeline

     

       993
       993
       +
                       timelines[newName] = JSON.parse(

     

       994
       994
       +
                           JSON.stringify(timelines[currentTimeline]),

     

       995
       995
       +
                       );

     

       996
       996
       +
       

     

       997
       997
       +
                       // Add tab

     

       998
       998
       +
                       const tab = document.createElement("div");

     

       999
       999
       +
                       tab.className = "timeline-tab";

     

       1000
       1000
       +
                       tab.dataset.timeline = newName;

     

       1001
       1001
       +
                       tab.textContent = newName;

     

       1002
       1002
       +
                       tab.onclick = () => switchTimeline(newName);

     

       1003
       1003
       +
                       document.getElementById("timelineTabs").appendChild(tab);

     

       1004
       1004
       +
       

     

       1005
       1005
       +
                       switchTimeline(newName);

     

       1006
       1006
       +
                       showStatus(`Timeline "${newName}" created as copy!`, "success");

     

       1007
       1007
       +
                   }

     

       1008
       1008
       +
       

     

       1009
       1009
       +
                   function deleteTimeline() {

     

       1010
       1010
       +
                       if (Object.keys(timelines).length <= 1) {

     

       1011
       1011
       +
                           showStatus("Cannot delete the last timeline!", "error");

     

       1012
       1012
       +
                           return;

     

       1013
       1013
       +
                       }

     

       1014
       1014
       +
       

     

       1015
       1015
       +
                       if (!confirm(`Delete timeline "${currentTimeline}"?`)) return;

     

       1016
       1016
       +
       

     

       1017
       1017
       +
                       // Remove timeline

     

       1018
       1018
       +
                       delete timelines[currentTimeline];

     

       1019
       1019
       +
       

     

       1020
       1020
       +
                       // Remove tab

     

       1021
       1021
       +
                       document

     

       1022
       1022
       +
                           .querySelector(`[data-timeline="${currentTimeline}"]`)

     

       1023
       1023
       +
                           .remove();

     

       1024
       1024
       +
       

     

       1025
       1025
       +
                       // Switch to first available timeline

     

       1026
       1026
       +
                       const firstTimeline = Object.keys(timelines)[0];

     

       1027
       1027
       +
                       switchTimeline(firstTimeline);

     

       1028
       1028
       +
       

     

       1029
       1029
       +
                       showStatus(`Timeline "${currentTimeline}" deleted!`, "success");

     

       1030
       1030
       +
                   }

     

       1031
       1031
       +
       

     

       1032
       1032
       +
                   function loadPreset(presetName, hours) {

     

       1033
       1033
       +
                       // Get current UI settings

     

       1034
       1034
       +
                       const config = {

     

       1035
       1035
       +
                           color1: document.getElementById("color1").value,

     

       1036
       1036
       +
                           color2: document.getElementById("color2").value,

     

       1037
       1037
       +
                           backgroundIntensity: parseInt(

     

       1038
       1038
       +
                               document.getElementById("bgIntensity").value,

     

       1039
       1039
       +
                           ),

     

       1040
       1040
       +
                           foregroundIntensity: parseInt(

     

       1041
       1041
       +
                               document.getElementById("fgIntensity").value,

     

       1042
       1042
       +
                           ),

     

       1043
       1043
       +
                       };

     

       1044
       1044
       +
       

     

       1045
       1045
       +
                       // Apply current settings to specified hours

     

       1046
       1046
       +
                       hours.forEach((hour) => {

     

       1047
       1047
       +
                           timelines[currentTimeline][hour] = { ...config };

     

       1048
       1048
       +
                       });

     

       1049
       1049
       +
       

     

       1050
       1050
       +
                       updateTimelineDisplay();

     

       1051
       1051
       +
                       showStatus(

     

       1052
       1052
       +
                           `Applied current settings to ${presetName} hours: ${hours.join(", ")}`,

     

       1053
       1053
       +
                           "success",

     

       1054
       1054
       +
                       );

     

       1055
       1055
       +
                   }

     

       1056
       1056
       +
       

     

       1057
       1057
       +
                   function applyCurrentToRange() {

     

       1058
       1058
       +
                       const start = parseInt(

     

       1059
       1059
       +
                           document.getElementById("rangeStart").value,

     

       1060
       1060
       +
                       );

     

       1061
       1061
       +
                       const end = parseInt(document.getElementById("rangeEnd").value);

     

       1062
       1062
       +
       

     

       1063
       1063
       +
                       if (start < 0 || start > 23 || end < 0 || end > 23) {

     

       1064
       1064
       +
                           showStatus("Hours must be between 0 and 23!", "error");

     

       1065
       1065
       +
                           return;

     

       1066
       1066
       +
                       }

     

       1067
       1067
       +
       

     

       1068
       1068
       +
                       const config = {

     

       1069
       1069
       +
                           color1: document.getElementById("color1").value,

     

       1070
       1070
       +
                           color2: document.getElementById("color2").value,

     

       1071
       1071
       +
                           backgroundIntensity: parseInt(

     

       1072
       1072
       +
                               document.getElementById("bgIntensity").value,

     

       1073
       1073
       +
                           ),

     

       1074
       1074
       +
                           foregroundIntensity: parseInt(

     

       1075
       1075
       +
                               document.getElementById("fgIntensity").value,

     

       1076
       1076
       +
                           ),

     

       1077
       1077
       +
                       };

     

       1078
       1078
       +
       

     

       1079
       1079
       +
                       // Generate hour range (handle wrap-around)

     

       1080
       1080
       +
                       let hours = [];

     

       1081
       1081
       +
                       if (start <= end) {

     

       1082
       1082
       +
                           for (let i = start; i <= end; i++) {

     

       1083
       1083
       +
                               hours.push(i);

     

       1084
       1084
       +
                           }

     

       1085
       1085
       +
                       } else {

     

       1086
       1086
       +
                           // Wrap around (e.g., 22 to 2 = 22,23,0,1,2)

     

       1087
       1087
       +
                           for (let i = start; i <= 23; i++) {

     

       1088
       1088
       +
                               hours.push(i);

     

       1089
       1089
       +
                           }

     

       1090
       1090
       +
                           for (let i = 0; i <= end; i++) {

     

       1091
       1091
       +
                               hours.push(i);

     

       1092
       1092
       +
                           }

     

       1093
       1093
       +
                       }

     

       1094
       1094
       +
       

     

       1095
       1095
       +
                       // Apply config to all hours in range

     

       1096
       1096
       +
                       hours.forEach((hour) => {

     

       1097
       1097
       +
                           timelines[currentTimeline][hour] = { ...config };

     

       1098
       1098
       +
                       });

     

       1099
       1099
       +
       

     

       1100
       1100
       +
                       updateTimelineDisplay();

     

       1101
       1101
       +
                       showStatus(

     

       1102
       1102
       +
                           `Applied current settings to hours: ${hours.join(", ")}`,

     

       1103
       1103
       +
                           "success",

     

       1104
       1104
       +
                       );

     

       1105
       1105
       +
                   }

     

       1106
       1106
       +
       

     

       1107
       1107
       +
                   function copyAllTimelines() {

     

       1108
       1108
       +
                       const config = {

     

       1109
       1109
       +
                           timelines: timelines,

     

       1110
       1110
       +
                           metadata: {

     

       1111
       1111
       +
                               created: new Date().toISOString(),

     

       1112
       1112
       +
                               tool: "Sky Gradient Timeline Builder",

     

       1113
       1113
       +
                           },

     

       1114
       1114
       +
                       };

     

       1115
       1115
       +
       

     

       1116
       1116
       +
                       const configText = JSON.stringify(config, null, 2);

     

       1117
       1117
       +
                       document.getElementById("configOutput").value = configText;

     

       1118
       1118
       +
                       showStatus("All timelines ready to copy!", "success");

     

       1119
       1119
       +
                   }

     

       1120
       1120
       +
       

     

       1121
       1121
       +
                   function renderCurrentHour() {

     

       1122
       1122
       +
                       if (!baseImg || !matteImg) {

     

       1123
       1123
       +
                           showStatus("Please upload both images first!", "error");

     

       1124
       1124
       +
                           return;

     

       1125
       1125
       +
                       }

     

       1126
       1126
       +
       

     

       1127
       1127
       +
                       const color1 = document.getElementById("color1").value;

     

       1128
       1128
       +
                       const color2 = document.getElementById("color2").value;

     

       1129
       1129
       +
                       const bgIntensity = parseInt(

     

       1130
       1130
       +
                           document.getElementById("bgIntensity").value,

     

       1131
       1131
       +
                       );

     

       1132
       1132
       +
                       const fgIntensity = parseInt(

     

       1133
       1133
       +
                           document.getElementById("fgIntensity").value,

     

       1134
       1134
       +
                       );

     

       1135
       1135
       +
       

     

       1136
       1136
       +
                       // Use the full-size render canvas

     

       1137
       1137
       +
                       const canvas = document.getElementById("renderCanvas");

     

       1138
       1138
       +
                       const ctx = canvas.getContext("2d");

     

       1139
       1139
       +
       

     

       1140
       1140
       +
                       // Set canvas size to match base image

     

       1141
       1141
       +
                       canvas.width = baseImg.width;

     

       1142
       1142
       +
                       canvas.height = baseImg.height;

     

       1143
       1143
       +
       

     

       1144
       1144
       +
                       // Create gradient

     

       1145
       1145
       +
                       const gradient = createGradient(

     

       1146
       1146
       +
                           canvas.width,

     

       1147
       1147
       +
                           canvas.height,

     

       1148
       1148
       +
                           color1,

     

       1149
       1149
       +
                           color2,

     

       1150
       1150
       +
                       );

     

       1151
       1151
       +
       

     

       1152
       1152
       +
                       // Clear canvas

     

       1153
       1153
       +
                       ctx.clearRect(0, 0, canvas.width, canvas.height);

     

       1154
       1154
       +
       

     

       1155
       1155
       +
                       // Create background layer

     

       1156
       1156
       +
                       const backgroundLayer = blendImages(

     

       1157
       1157
       +
                           baseImg,

     

       1158
       1158
       +
                           gradient,

     

       1159
       1159
       +
                           bgIntensity,

     

       1160
       1160
       +
                       );

     

       1161
       1161
       +
                       ctx.drawImage(backgroundLayer, 0, 0);

     

       1162
       1162
       +
       

     

       1163
       1163
       +
                       // Create and apply foreground layer

     

       1164
       1164
       +
                       let foregroundLayer;

     

       1165
       1165
       +
                       if (fgIntensity === 0) {

     

       1166
       1166
       +
                           foregroundLayer = baseImg;

     

       1167
       1167
       +
                       } else {

     

       1168
       1168
       +
                           foregroundLayer = blendImages(

     

       1169
       1169
       +
                               baseImg,

     

       1170
       1170
       +
                               gradient,

     

       1171
       1171
       +
                               fgIntensity,

     

       1172
       1172
       +
                           );

     

       1173
       1173
       +
                       }

     

       1174
       1174
       +
       

     

       1175
       1175
       +
                       // Apply masking

     

       1176
       1176
       +
                       const maskedForeground = document.createElement("canvas");

     

       1177
       1177
       +
                       maskedForeground.width = canvas.width;

     

       1178
       1178
       +
                       maskedForeground.height = canvas.height;

     

       1179
       1179
       +
                       const maskCtx = maskedForeground.getContext("2d");

     

       1180
       1180
       +
       

     

       1181
       1181
       +
                       maskCtx.drawImage(foregroundLayer, 0, 0);

     

       1182
       1182
       +
       

     

       1183
       1183
       +
                       // Create proper alpha mask

     

       1184
       1184
       +
                       const matteDataCanvas = document.createElement("canvas");

     

       1185
       1185
       +
                       matteDataCanvas.width = matteImg.width;

     

       1186
       1186
       +
                       matteDataCanvas.height = matteImg.height;

     

       1187
       1187
       +
                       const matteDataCtx = matteDataCanvas.getContext("2d");

     

       1188
       1188
       +
                       matteDataCtx.drawImage(matteImg, 0, 0);

     

       1189
       1189
       +
       

     

       1190
       1190
       +
                       const imageData = matteDataCtx.getImageData(

     

       1191
       1191
       +
                           0,

     

       1192
       1192
       +
                           0,

     

       1193
       1193
       +
                           matteImg.width,

     

       1194
       1194
       +
                           matteImg.height,

     

       1195
       1195
       +
                       );

     

       1196
       1196
       +
                       const data = imageData.data;

     

       1197
       1197
       +
       

     

       1198
       1198
       +
                       for (let i = 0; i < data.length; i += 4) {

     

       1199
       1199
       +
                           const brightness =

     

       1200
       1200
       +
                               (data[i] + data[i + 1] + data[i + 2]) / 3;

     

       1201
       1201
       +
                           if (brightness > 128) {

     

       1202
       1202
       +
                               data[i + 3] = 255;

     

       1203
       1203
       +
                           } else {

     

       1204
       1204
       +
                               data[i + 3] = 0;

     

       1205
       1205
       +
                           }

     

       1206
       1206
       +
                           data[i] = 255;

     

       1207
       1207
       +
                           data[i + 1] = 255;

     

       1208
       1208
       +
                           data[i + 2] = 255;

     

       1209
       1209
       +
                       }

     

       1210
       1210
       +
       

     

       1211
       1211
       +
                       matteDataCtx.putImageData(imageData, 0, 0);

     

       1212
       1212
       +
       

     

       1213
       1213
       +
                       maskCtx.globalCompositeOperation = "destination-in";

     

       1214
       1214
       +
                       maskCtx.drawImage(

     

       1215
       1215
       +
                           matteDataCanvas,

     

       1216
       1216
       +
                           0,

     

       1217
       1217
       +
                           0,

     

       1218
       1218
       +
                           canvas.width,

     

       1219
       1219
       +
                           canvas.height,

     

       1220
       1220
       +
                       );

     

       1221
       1221
       +
       

     

       1222
       1222
       +
                       ctx.globalCompositeOperation = "source-over";

     

       1223
       1223
       +
                       ctx.drawImage(maskedForeground, 0, 0);

     

       1224
       1224
       +
       

     

       1225
       1225
       +
                       // Enable download button

     

       1226
       1226
       +
                       document.getElementById("downloadBtn").disabled = false;

     

       1227
       1227
       +
                       showStatus(

     

       1228
       1228
       +
                           `Hour ${selectedHour} rendered at full resolution!`,

     

       1229
       1229
       +
                           "success",

     

       1230
       1230
       +
                       );

     

       1231
       1231
       +
                   }

     

       1232
       1232
       +
       

     

       1233
       1233
       +
                   function downloadRendered() {

     

       1234
       1234
       +
                       const canvas = document.getElementById("renderCanvas");

     

       1235
       1235
       +
                       if (canvas.width === 400 && canvas.height === 400) {

     

       1236
       1236
       +
                           showStatus("Please render first!", "error");

     

       1237
       1237
       +
                           return;

     

       1238
       1238
       +
                       }

     

       1239
       1239
       +
       

     

       1240
       1240
       +
                       // Create download

     

       1241
       1241
       +
                       const link = document.createElement("a");

     

       1242
       1242
       +
                       const timelineName = currentTimeline;

     

       1243
       1243
       +
                       const hour = selectedHour.toString().padStart(2, "0");

     

       1244
       1244
       +
                       link.download = `${timelineName}_hour_${hour}.jpg`;

     

       1245
       1245
       +
       

     

       1246
       1246
       +
                       // Convert to JPEG for smaller file size

     

       1247
       1247
       +
                       link.href = canvas.toDataURL("image/jpeg", 0.95);

     

       1248
       1248
       +
                       link.click();

     

       1249
       1249
       +
       

     

       1250
       1250
       +
                       showStatus(`Downloaded: ${link.download}`, "success");

     

       1251
       1251
       +
                   }

     

       1252
       1252
       +
       

     

       1253
       1253
       +
                   // Auto-import on paste

     

       1254
       1254
       +
                   document

     

       1255
       1255
       +
                       .getElementById("bulkConfigInput")

     

       1256
       1256
       +
                       .addEventListener("paste", function (e) {

     

       1257
       1257
       +
                           // Small delay to let the paste complete

     

       1258
       1258
       +
                           setTimeout(() => {

     

       1259
       1259
       +
                               const configText = this.value.trim();

     

       1260
       1260
       +
                               if (configText && configText.startsWith("{")) {

     

       1261
       1261
       +
                                   importConfigToTimelines();

     

       1262
       1262
       +
                               }

     

       1263
       1263
       +
                           }, 100);

     

       1264
       1264
       +
                       });

     

       1265
       1265
       +
       

     

       1266
       1266
       +
                   // Bulk rendering

     

       1267
       1267
       +
                   let renderedImages = {};

     

       1268
       1268
       +
       

     

       1269
       1269
       +
                   function renderAllTimelines() {

     

       1270
       1270
       +
                       if (!baseImg || !matteImg) {

     

       1271
       1271
       +
                           showStatus("Please upload both images first!", "error");

     

       1272
       1272
       +
                           return;

     

       1273
       1273
       +
                       }

     

       1274
       1274
       +
       

     

       1275
       1275
       +
                       if (Object.keys(timelines).length === 0) {

     

       1276
       1276
       +
                           showStatus("No timelines to render!", "error");

     

       1277
       1277
       +
                           return;

     

       1278
       1278
       +
                       }

     

       1279
       1279
       +
       

     

       1280
       1280
       +
                       // Clear previous renders

     

       1281
       1281
       +
                       renderedImages = {};

     

       1282
       1282
       +
       

     

       1283
       1283
       +
                       // Show progress bar

     

       1284
       1284
       +
                       document.getElementById("bulkProgress").style.display = "block";

     

       1285
       1285
       +
                       document.getElementById("downloadAllBtn").disabled = true;

     

       1286
       1286
       +
       

     

       1287
       1287
       +
                       // Clear gallery

     

       1288
       1288
       +
                       document.getElementById("galleryContent").innerHTML = "";

     

       1289
       1289
       +
       

     

       1290
       1290
       +
                       // Count total hours to render

     

       1291
       1291
       +
                       const timelineNames = Object.keys(timelines);

     

       1292
       1292
       +
                       let totalHours = 0;

     

       1293
       1293
       +
                       let currentHour = 0;

     

       1294
       1294
       +
       

     

       1295
       1295
       +
                       timelineNames.forEach((timelineName) => {

     

       1296
       1296
       +
                           const hours = Object.keys(timelines[timelineName]);

     

       1297
       1297
       +
                           totalHours += hours.length;

     

       1298
       1298
       +
                       });

     

       1299
       1299
       +
       

     

       1300
       1300
       +
                       updateProgress(0, totalHours);

     

       1301
       1301
       +
                       updateGalleryInfo(0, totalHours, timelineNames.length);

     

       1302
       1302
       +
                       showStatus(

     

       1303
       1303
       +
                           `Rendering all timelines: ${timelineNames.length} timelines, ${totalHours} hours total`,

     

       1304
       1304
       +
                           "success",

     

       1305
       1305
       +
                       );

     

       1306
       1306
       +
       

     

       1307
       1307
       +
                       // Render all timelines sequentially

     

       1308
       1308
       +
                       let timelineIndex = 0;

     

       1309
       1309
       +
       

     

       1310
       1310
       +
                       function renderNextTimeline() {

     

       1311
       1311
       +
                           if (timelineIndex >= timelineNames.length) {

     

       1312
       1312
       +
                               // All done!

     

       1313
       1313
       +
                               document.getElementById("downloadAllBtn").disabled =

     

       1314
       1314
       +
                                   false;

     

       1315
       1315
       +
                               showStatus(

     

       1316
       1316
       +
                                   `Render complete! ${totalHours} images rendered.`,

     

       1317
       1317
       +
                                   "success",

     

       1318
       1318
       +
                               );

     

       1319
       1319
       +
                               return;

     

       1320
       1320
       +
                           }

     

       1321
       1321
       +
       

     

       1322
       1322
       +
                           const timelineName = timelineNames[timelineIndex];

     

       1323
       1323
       +
                           const timelineConfig = timelines[timelineName];

     

       1324
       1324
       +
                           const hours = Object.keys(timelineConfig).sort(

     

       1325
       1325
       +
                               (a, b) => parseInt(a) - parseInt(b),

     

       1326
       1326
       +
                           );

     

       1327
       1327
       +
       

     

       1328
       1328
       +
                           renderedImages[timelineName] = {};

     

       1329
       1329
       +
       

     

       1330
       1330
       +
                           let hourIndex = 0;

     

       1331
       1331
       +
       

     

       1332
       1332
       +
                           function renderNextHour() {

     

       1333
       1333
       +
                               if (hourIndex >= hours.length) {

     

       1334
       1334
       +
                                   // Timeline done, move to next

     

       1335
       1335
       +
                                   timelineIndex++;

     

       1336
       1336
       +
                                   setTimeout(renderNextTimeline, 10);

     

       1337
       1337
       +
                                   return;

     

       1338
       1338
       +
                               }

     

       1339
       1339
       +
       

     

       1340
       1340
       +
                               const hour = hours[hourIndex];

     

       1341
       1341
       +
                               const hourConfig = timelineConfig[hour];

     

       1342
       1342
       +
       

     

       1343
       1343
       +
                               // Render this hour

     

       1344
       1344
       +
                               const imageData = renderHourToDataURL(hourConfig);

     

       1345
       1345
       +
                               if (imageData) {

     

       1346
       1346
       +
                                   renderedImages[timelineName][hour] = imageData;

     

       1347
       1347
       +
                                   currentHour++;

     

       1348
       1348
       +
                                   updateProgress(currentHour, totalHours);

     

       1349
       1349
       +
                                   updateGalleryInfo(

     

       1350
       1350
       +
                                       currentHour,

     

       1351
       1351
       +
                                       totalHours,

     

       1352
       1352
       +
                                       timelineNames.length,

     

       1353
       1353
       +
                                   );

     

       1354
       1354
       +
       

     

       1355
       1355
       +
                                   // Add to gallery

     

       1356
       1356
       +
                                   addToGallery(timelineName, hour, imageData);

     

       1357
       1357
       +
                               }

     

       1358
       1358
       +
       

     

       1359
       1359
       +
                               hourIndex++;

     

       1360
       1360
       +
                               // Small delay to keep UI responsive

     

       1361
       1361
       +
                               setTimeout(renderNextHour, 100);

     

       1362
       1362
       +
                           }

     

       1363
       1363
       +
       

     

       1364
       1364
       +
                           renderNextHour();

     

       1365
       1365
       +
                       }

     

       1366
       1366
       +
       

     

       1367
       1367
       +
                       renderNextTimeline();

     

       1368
       1368
       +
                   }

     

       1369
       1369
       +
       

     

       1370
       1370
       +
                   function addToGallery(timelineName, hour, imageDataURL) {

     

       1371
       1371
       +
                       const gallery = document.getElementById("galleryContent");

     

       1372
       1372
       +
       

     

       1373
       1373
       +
                       // Remove placeholder if it exists

     

       1374
       1374
       +
                       const placeholder =

     

       1375
       1375
       +
                           document.getElementById("galleryPlaceholder");

     

       1376
       1376
       +
                       if (placeholder) {

     

       1377
       1377
       +
                           placeholder.remove();

     

       1378
       1378
       +
                           // Reset gallery styles

     

       1379
       1379
       +
                           gallery.style.minHeight = "auto";

     

       1380
       1380
       +
                           gallery.style.border = "none";

     

       1381
       1381
       +
                           gallery.style.alignItems = "stretch";

     

       1382
       1382
       +
                           gallery.style.justifyContent = "stretch";

     

       1383
       1383
       +
                       }

     

       1384
       1384
       +
       

     

       1385
       1385
       +
                       const item = document.createElement("div");

     

       1386
       1386
       +
                       item.style.cssText = `

     

       1387
       1387
       +
                       border: 1px solid #ddd;

     

       1388
       1388
       +
                       border-radius: 8px;

     

       1389
       1389
       +
                       overflow: hidden;

     

       1390
       1390
       +
                       background: white;

     

       1391
       1391
       +
                       transition: transform 0.2s, box-shadow 0.2s;

     

       1392
       1392
       +
                       cursor: pointer;

     

       1393
       1393
       +
                   `;

     

       1394
       1394
       +
       

     

       1395
       1395
       +
                       const hourPadded = hour.toString().padStart(2, "0");

     

       1396
       1396
       +
       

     

       1397
       1397
       +
                       item.innerHTML = `

     

       1398
       1398
       +
                       <img src="${imageDataURL}" style="width: 100%; height: 80px; object-fit: cover;">

     

       1399
       1399
       +
                       <div style="padding: 8px; text-align: center;">

     

       1400
       1400
       +
                           <div style="font-size: 11px; font-weight: bold; color: #333;">${timelineName}</div>

     

       1401
       1401
       +
                           <div style="font-size: 10px; color: #666;">Hour ${hourPadded}</div>

     

       1402
       1402
       +
                       </div>

     

       1403
       1403
       +
                   `;

     

       1404
       1404
       +
       

     

       1405
       1405
       +
                       // Add hover effect

     

       1406
       1406
       +
                       item.addEventListener("mouseenter", () => {

     

       1407
       1407
       +
                           item.style.transform = "scale(1.05)";

     

       1408
       1408
       +
                           item.style.boxShadow = "0 4px 15px rgba(0,0,0,0.2)";

     

       1409
       1409
       +
                       });

     

       1410
       1410
       +
       

     

       1411
       1411
       +
                       item.addEventListener("mouseleave", () => {

     

       1412
       1412
       +
                           item.style.transform = "scale(1)";

     

       1413
       1413
       +
                           item.style.boxShadow = "none";

     

       1414
       1414
       +
                       });

     

       1415
       1415
       +
       

     

       1416
       1416
       +
                       // Click to download individual image

     

       1417
       1417
       +
                       item.addEventListener("click", () => {

     

       1418
       1418
       +
                           const link = document.createElement("a");

     

       1419
       1419
       +
                           link.href = imageDataURL;

     

       1420
       1420
       +
                           link.download = `${timelineName}_hour_${hourPadded}.jpg`;

     

       1421
       1421
       +
                           link.click();

     

       1422
       1422
       +
                           showStatus(

     

       1423
       1423
       +
                               `Downloaded ${timelineName} hour ${hourPadded}`,

     

       1424
       1424
       +
                               "success",

     

       1425
       1425
       +
                           );

     

       1426
       1426
       +
                       });

     

       1427
       1427
       +
       

     

       1428
       1428
       +
                       gallery.appendChild(item);

     

       1429
       1429
       +
                   }

     

       1430
       1430
       +
       

     

       1431
       1431
       +
                   function updateGalleryInfo(current, total, timelineCount) {

     

       1432
       1432
       +
                       const info = document.getElementById("galleryInfo");

     

       1433
       1433
       +
                       info.textContent = `${current}/${total} images rendered across ${timelineCount} timeline(s)`;

     

       1434
       1434
       +
                   }

     

       1435
       1435
       +
       

     

       1436
       1436
       +
                   function clearGallery() {

     

       1437
       1437
       +
                       const gallery = document.getElementById("galleryContent");

     

       1438
       1438
       +
                       gallery.innerHTML = "";

     

       1439
       1439
       +
       

     

       1440
       1440
       +
                       // Reset gallery to placeholder state

     

       1441
       1441
       +
                       gallery.style.minHeight = "100px";

     

       1442
       1442
       +
                       gallery.style.border = "2px dashed #ddd";

     

       1443
       1443
       +
                       gallery.style.alignItems = "center";

     

       1444
       1444
       +
                       gallery.style.justifyContent = "center";

     

       1445
       1445
       +
                       gallery.style.padding = "20px";

     

       1446
       1446
       +
       

     

       1447
       1447
       +
                       // Add placeholder back

     

       1448
       1448
       +
                       const placeholder = document.createElement("div");

     

       1449
       1449
       +
                       placeholder.id = "galleryPlaceholder";

     

       1450
       1450
       +
                       placeholder.style.cssText =

     

       1451
       1451
       +
                           "grid-column: 1 / -1; text-align: center; color: #999; font-style: italic;";

     

       1452
       1452
       +
                       placeholder.textContent =

     

       1453
       1453
       +
                           'Click "Render All" to generate images and see them here';

     

       1454
       1454
       +
                       gallery.appendChild(placeholder);

     

       1455
       1455
       +
       

     

       1456
       1456
       +
                       // Reset state

     

       1457
       1457
       +
                       renderedImages = {};

     

       1458
       1458
       +
                       document.getElementById("downloadAllBtn").disabled = true;

     

       1459
       1459
       +
                       document.getElementById("galleryInfo").textContent =

     

       1460
       1460
       +
                           "Ready to render timelines";

     

       1461
       1461
       +
                       showStatus("Gallery cleared", "success");

     

       1462
       1462
       +
                   }

     

       1463
       1463
       +
       

     

       1464
       1464
       +
                   function renderAllFromConfig() {

     

       1465
       1465
       +
                       if (!baseImg || !matteImg) {

     

       1466
       1466
       +
                           showStatus("Please upload both images first!", "error");

     

       1467
       1467
       +
                           return;

     

       1468
       1468
       +
                       }

     

       1469
       1469
       +
       

     

       1470
       1470
       +
                       const configText = document

     

       1471
       1471
       +
                           .getElementById("bulkConfigInput")

     

       1472
       1472
       +
                           .value.trim();

     

       1473
       1473
       +
                       if (!configText) {

     

       1474
       1474
       +
                           showStatus("Please paste a config to render!", "error");

     

       1475
       1475
       +
                           return;

     

       1476
       1476
       +
                       }

     

       1477
       1477
       +
       

     

       1478
       1478
       +
                       let config;

     

       1479
       1479
       +
                       try {

     

       1480
       1480
       +
                           config = JSON.parse(configText);

     

       1481
       1481
       +
                       } catch (e) {

     

       1482
       1482
       +
                           showStatus("Invalid JSON config!", "error");

     

       1483
       1483
       +
                           return;

     

       1484
       1484
       +
                       }

     

       1485
       1485
       +
       

     

       1486
       1486
       +
                       // Validate config structure

     

       1487
       1487
       +
                       if (!config.timelines) {

     

       1488
       1488
       +
                           showStatus(

     

       1489
       1489
       +
                               'Config must have "timelines" property!',

     

       1490
       1490
       +
                               "error",

     

       1491
       1491
       +
                           );

     

       1492
       1492
       +
                           return;

     

       1493
       1493
       +
                       }

     

       1494
       1494
       +
       

     

       1495
       1495
       +
                       // Clear previous renders

     

       1496
       1496
       +
                       renderedImages = {};

     

       1497
       1497
       +
       

     

       1498
       1498
       +
                       // Show progress bar

     

       1499
       1499
       +
                       document.getElementById("bulkProgress").style.display = "block";

     

       1500
       1500
       +
                       document.getElementById("downloadAllBtn").disabled = true;

     

       1501
       1501
       +
       

     

       1502
       1502
       +
                       // Count total hours to render

     

       1503
       1503
       +
                       const timelines = Object.keys(config.timelines);

     

       1504
       1504
       +
                       let totalHours = 0;

     

       1505
       1505
       +
                       let currentHour = 0;

     

       1506
       1506
       +
       

     

       1507
       1507
       +
                       timelines.forEach((timeline) => {

     

       1508
       1508
       +
                           const hours = Object.keys(config.timelines[timeline]);

     

       1509
       1509
       +
                           totalHours += hours.length;

     

       1510
       1510
       +
                       });

     

       1511
       1511
       +
       

     

       1512
       1512
       +
                       updateProgress(0, totalHours);

     

       1513
       1513
       +
                       showStatus(

     

       1514
       1514
       +
                           `Starting bulk render: ${timelines.length} timelines, ${totalHours} hours total`,

     

       1515
       1515
       +
                           "success",

     

       1516
       1516
       +
                       );

     

       1517
       1517
       +
       

     

       1518
       1518
       +
                       // Render all timelines sequentially with small delays for UI responsiveness

     

       1519
       1519
       +
                       let timelineIndex = 0;

     

       1520
       1520
       +
       

     

       1521
       1521
       +
                       function renderNextTimeline() {

     

       1522
       1522
       +
                           if (timelineIndex >= timelines.length) {

     

       1523
       1523
       +
                               // All done!

     

       1524
       1524
       +
                               document.getElementById("downloadAllBtn").disabled =

     

       1525
       1525
       +
                                   false;

     

       1526
       1526
       +
                               showStatus(

     

       1527
       1527
       +
                                   `Bulk render complete! ${totalHours} images rendered.`,

     

       1528
       1528
       +
                                   "success",

     

       1529
       1529
       +
                               );

     

       1530
       1530
       +
                               return;

     

       1531
       1531
       +
                           }

     

       1532
       1532
       +
       

     

       1533
       1533
       +
                           const timelineName = timelines[timelineIndex];

     

       1534
       1534
       +
                           const timelineConfig = config.timelines[timelineName];

     

       1535
       1535
       +
                           const hours = Object.keys(timelineConfig);

     

       1536
       1536
       +
       

     

       1537
       1537
       +
                           renderedImages[timelineName] = {};

     

       1538
       1538
       +
       

     

       1539
       1539
       +
                           let hourIndex = 0;

     

       1540
       1540
       +
       

     

       1541
       1541
       +
                           function renderNextHour() {

     

       1542
       1542
       +
                               if (hourIndex >= hours.length) {

     

       1543
       1543
       +
                                   // Timeline done, move to next

     

       1544
       1544
       +
                                   timelineIndex++;

     

       1545
       1545
       +
                                   setTimeout(renderNextTimeline, 10);

     

       1546
       1546
       +
                                   return;

     

       1547
       1547
       +
                               }

     

       1548
       1548
       +
       

     

       1549
       1549
       +
                               const hour = hours[hourIndex];

     

       1550
       1550
       +
                               const hourConfig = timelineConfig[hour];

     

       1551
       1551
       +
       

     

       1552
       1552
       +
                               // Render this hour

     

       1553
       1553
       +
                               const imageData = renderHourToDataURL(hourConfig);

     

       1554
       1554
       +
                               if (imageData) {

     

       1555
       1555
       +
                                   renderedImages[timelineName][hour] = imageData;

     

       1556
       1556
       +
                                   currentHour++;

     

       1557
       1557
       +
                                   updateProgress(currentHour, totalHours);

     

       1558
       1558
       +
                               }

     

       1559
       1559
       +
       

     

       1560
       1560
       +
                               hourIndex++;

     

       1561
       1561
       +
                               // Small delay to keep UI responsive

     

       1562
       1562
       +
                               setTimeout(renderNextHour, 50);

     

       1563
       1563
       +
                           }

     

       1564
       1564
       +
       

     

       1565
       1565
       +
                           renderNextHour();

     

       1566
       1566
       +
                       }

     

       1567
       1567
       +
       

     

       1568
       1568
       +
                       renderNextTimeline();

     

       1569
       1569
       +
                   }

     

       1570
       1570
       +
       

     

       1571
       1571
       +
                   function renderHourToDataURL(config) {

     

       1572
       1572
       +
                       try {

     

       1573
       1573
       +
                           // Create a temporary canvas for this render

     

       1574
       1574
       +
                           const canvas = document.createElement("canvas");

     

       1575
       1575
       +
                           const ctx = canvas.getContext("2d");

     

       1576
       1576
       +
       

     

       1577
       1577
       +
                           // Set canvas size to match base image

     

       1578
       1578
       +
                           canvas.width = baseImg.width;

     

       1579
       1579
       +
                           canvas.height = baseImg.height;

     

       1580
       1580
       +
       

     

       1581
       1581
       +
                           // Create gradient

     

       1582
       1582
       +
                           const gradient = createGradient(

     

       1583
       1583
       +
                               canvas.width,

     

       1584
       1584
       +
                               canvas.height,

     

       1585
       1585
       +
                               config.color1,

     

       1586
       1586
       +
                               config.color2,

     

       1587
       1587
       +
                           );

     

       1588
       1588
       +
       

     

       1589
       1589
       +
                           // Clear canvas

     

       1590
       1590
       +
                           ctx.clearRect(0, 0, canvas.width, canvas.height);

     

       1591
       1591
       +
       

     

       1592
       1592
       +
                           // Create background layer

     

       1593
       1593
       +
                           const backgroundLayer = blendImages(

     

       1594
       1594
       +
                               baseImg,

     

       1595
       1595
       +
                               gradient,

     

       1596
       1596
       +
                               config.backgroundIntensity,

     

       1597
       1597
       +
                           );

     

       1598
       1598
       +
                           ctx.drawImage(backgroundLayer, 0, 0);

     

       1599
       1599
       +
       

     

       1600
       1600
       +
                           // Create and apply foreground layer

     

       1601
       1601
       +
                           let foregroundLayer;

     

       1602
       1602
       +
                           if (config.foregroundIntensity === 0) {

     

       1603
       1603
       +
                               foregroundLayer = baseImg;

     

       1604
       1604
       +
                           } else {

     

       1605
       1605
       +
                               foregroundLayer = blendImages(

     

       1606
       1606
       +
                                   baseImg,

     

       1607
       1607
       +
                                   gradient,

     

       1608
       1608
       +
                                   config.foregroundIntensity,

     

       1609
       1609
       +
                               );

     

       1610
       1610
       +
                           }

     

       1611
       1611
       +
       

     

       1612
       1612
       +
                           // Apply masking

     

       1613
       1613
       +
                           const maskedForeground = document.createElement("canvas");

     

       1614
       1614
       +
                           maskedForeground.width = canvas.width;

     

       1615
       1615
       +
                           maskedForeground.height = canvas.height;

     

       1616
       1616
       +
                           const maskCtx = maskedForeground.getContext("2d");

     

       1617
       1617
       +
       

     

       1618
       1618
       +
                           maskCtx.drawImage(foregroundLayer, 0, 0);

     

       1619
       1619
       +
       

     

       1620
       1620
       +
                           // Create proper alpha mask

     

       1621
       1621
       +
                           const matteDataCanvas = document.createElement("canvas");

     

       1622
       1622
       +
                           matteDataCanvas.width = matteImg.width;

     

       1623
       1623
       +
                           matteDataCanvas.height = matteImg.height;

     

       1624
       1624
       +
                           const matteDataCtx = matteDataCanvas.getContext("2d");

     

       1625
       1625
       +
                           matteDataCtx.drawImage(matteImg, 0, 0);

     

       1626
       1626
       +
       

     

       1627
       1627
       +
                           const imageData = matteDataCtx.getImageData(

     

       1628
       1628
       +
                               0,

     

       1629
       1629
       +
                               0,

     

       1630
       1630
       +
                               matteImg.width,

     

       1631
       1631
       +
                               matteImg.height,

     

       1632
       1632
       +
                           );

     

       1633
       1633
       +
                           const data = imageData.data;

     

       1634
       1634
       +
       

     

       1635
       1635
       +
                           for (let i = 0; i < data.length; i += 4) {

     

       1636
       1636
       +
                               const brightness =

     

       1637
       1637
       +
                                   (data[i] + data[i + 1] + data[i + 2]) / 3;

     

       1638
       1638
       +
                               if (brightness > 128) {

     

       1639
       1639
       +
                                   data[i + 3] = 255;

     

       1640
       1640
       +
                               } else {

     

       1641
       1641
       +
                                   data[i + 3] = 0;

     

       1642
       1642
       +
                               }

     

       1643
       1643
       +
                               data[i] = 255;

     

       1644
       1644
       +
                               data[i + 1] = 255;

     

       1645
       1645
       +
                               data[i + 2] = 255;

     

       1646
       1646
       +
                           }

     

       1647
       1647
       +
       

     

       1648
       1648
       +
                           matteDataCtx.putImageData(imageData, 0, 0);

     

       1649
       1649
       +
       

     

       1650
       1650
       +
                           maskCtx.globalCompositeOperation = "destination-in";

     

       1651
       1651
       +
                           maskCtx.drawImage(

     

       1652
       1652
       +
                               matteDataCanvas,

     

       1653
       1653
       +
                               0,

     

       1654
       1654
       +
                               0,

     

       1655
       1655
       +
                               canvas.width,

     

       1656
       1656
       +
                               canvas.height,

     

       1657
       1657
       +
                           );

     

       1658
       1658
       +
       

     

       1659
       1659
       +
                           ctx.globalCompositeOperation = "source-over";

     

       1660
       1660
       +
                           ctx.drawImage(maskedForeground, 0, 0);

     

       1661
       1661
       +
       

     

       1662
       1662
       +
                           // Return as JPEG data URL

     

       1663
       1663
       +
                           return canvas.toDataURL("image/jpeg", 0.95);

     

       1664
       1664
       +
                       } catch (e) {

     

       1665
       1665
       +
                           console.error("Failed to render hour:", e);

     

       1666
       1666
       +
                           return null;

     

       1667
       1667
       +
                       }

     

       1668
       1668
       +
                   }

     

       1669
       1669
       +
       

     

       1670
       1670
       +
                   function updateProgress(current, total) {

     

       1671
       1671
       +
                       const percentage = total > 0 ? (current / total) * 100 : 0;

     

       1672
       1672
       +
                       document.getElementById("progressBar").style.width =

     

       1673
       1673
       +
                           percentage + "%";

     

       1674
       1674
       +
                       document.getElementById("progressText").textContent =

     

       1675
       1675
       +
                           `${current}/${total}`;

     

       1676
       1676
       +
                   }

     

       1677
       1677
       +
       

     

       1678
       1678
       +
                   async function downloadAllRendered() {

     

       1679
       1679
       +
                       if (Object.keys(renderedImages).length === 0) {

     

       1680
       1680
       +
                           showStatus("No rendered images to download!", "error");

     

       1681
       1681
       +
                           return;

     

       1682
       1682
       +
                       }

     

       1683
       1683
       +
       

     

       1684
       1684
       +
                       showStatus("Preparing download...", "success");

     

       1685
       1685
       +
       

     

       1686
       1686
       +
                       // Simple approach: create individual downloads if ZIP fails

     

       1687
       1687
       +
                       try {

     

       1688
       1688
       +
                           // Try to load JSZip if not available

     

       1689
       1689
       +
                           if (typeof JSZip === "undefined") {

     

       1690
       1690
       +
                               showStatus("Loading ZIP library...", "success");

     

       1691
       1691
       +
                               await loadJSZip();

     

       1692
       1692
       +
                           }

     

       1693
       1693
       +
       

     

       1694
       1694
       +
                           await createZipDownload();

     

       1695
       1695
       +
                       } catch (e) {

     

       1696
       1696
       +
                           console.error("ZIP download failed:", e);

     

       1697
       1697
       +
                           showStatus(

     

       1698
       1698
       +
                               "ZIP failed, downloading individual files...",

     

       1699
       1699
       +
                               "warning",

     

       1700
       1700
       +
                           );

     

       1701
       1701
       +
                           downloadIndividualFiles();

     

       1702
       1702
       +
                       }

     

       1703
       1703
       +
                   }

     

       1704
       1704
       +
       

     

       1705
       1705
       +
                   function loadJSZip() {

     

       1706
       1706
       +
                       return new Promise((resolve, reject) => {

     

       1707
       1707
       +
                           const script = document.createElement("script");

     

       1708
       1708
       +
                           script.src =

     

       1709
       1709
       +
                               "https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js";

     

       1710
       1710
       +
                           script.onload = resolve;

     

       1711
       1711
       +
                           script.onerror = reject;

     

       1712
       1712
       +
                           document.head.appendChild(script);

     

       1713
       1713
       +
                       });

     

       1714
       1714
       +
                   }

     

       1715
       1715
       +
       

     

       1716
       1716
       +
                   async function createZipDownload() {

     

       1717
       1717
       +
                       const zip = new JSZip();

     

       1718
       1718
       +
       

     

       1719
       1719
       +
                       // First, fetch and add the shell script to the root

     

       1720
       1720
       +
                       try {

     

       1721
       1721
       +
                           showStatus("Including shell script...", "success");

     

       1722
       1722
       +
                           try {

     

       1723
       1723
       +
                               // Try local copy first, then relative path, then original source as fallback

     

       1724
       1724
       +
                               const scriptUrls = ["/pfp-updates/bsky-pfp-updates.sh"];

     

       1725
       1725
       +
       

     

       1726
       1726
       +
                               let scriptContent = null;

     

       1727
       1727
       +
                               for (const url of scriptUrls) {

     

       1728
       1728
       +
                                   try {

     

       1729
       1729
       +
                                       const scriptResponse = await fetch(url);

     

       1730
       1730
       +
                                       if (scriptResponse.ok) {

     

       1731
       1731
       +
                                           scriptContent = await scriptResponse.text();

     

       1732
       1732
       +
                                           break;

     

       1733
       1733
       +
                                       }

     

       1734
       1734
       +
                                   } catch (err) {

     

       1735
       1735
       +
                                       console.log(

     

       1736
       1736
       +
                                           `Failed to fetch from ${url}:`,

     

       1737
       1737
       +
                                           err,

     

       1738
       1738
       +
                                       );

     

       1739
       1739
       +
                                       // Continue to next URL

     

       1740
       1740
       +
                                   }

     

       1741
       1741
       +
                               }

     

       1742
       1742
       +
       

     

       1743
       1743
       +
                               if (scriptContent) {

     

       1744
       1744
       +
                                   zip.file("bsky-pfp-updates.sh", scriptContent);

     

       1745
       1745
       +
                               } else {

     

       1746
       1746
       +
                                   throw new Error(

     

       1747
       1747
       +
                                       "Could not load script from any source",

     

       1748
       1748
       +
                                   );

     

       1749
       1749
       +
                               }

     

       1750
       1750
       +
                           } catch (error) {

     

       1751
       1751
       +
                               showStatus(

     

       1752
       1752
       +
                                   "Warning: Could not include shell script, continuing without it...",

     

       1753
       1753
       +
                                   "warning",

     

       1754
       1754
       +
                               );

     

       1755
       1755
       +
                               console.error("Script loading error:", error);

     

       1756
       1756
       +
                           }

     

       1757
       1757
       +
                       } catch (e) {

     

       1758
       1758
       +
                           console.error("Failed to fetch shell script:", e);

     

       1759
       1759
       +
                           showStatus(

     

       1760
       1760
       +
                               "Warning: Could not fetch shell script, continuing without it...",

     

       1761
       1761
       +
                               "warning",

     

       1762
       1762
       +
                           );

     

       1763
       1763
       +
                       }

     

       1764
       1764
       +
       

     

       1765
       1765
       +
                       // Add the timeline config to the root

     

       1766
       1766
       +
                       const config = {

     

       1767
       1767
       +
                           timelines: timelines,

     

       1768
       1768
       +
                           metadata: {

     

       1769
       1769
       +
                               created: new Date().toISOString(),

     

       1770
       1770
       +
                               tool: "Sky Gradient Timeline Builder",

     

       1771
       1771
       +
                               version: "1.0",

     

       1772
       1772
       +
                           },

     

       1773
       1773
       +
                       };

     

       1774
       1774
       +
                       const configText = JSON.stringify(config, null, 2);

     

       1775
       1775
       +
                       zip.file("timeline_config.json", configText);

     

       1776
       1776
       +
       

     

       1777
       1777
       +
                       // Create rendered_timelines folder and add all images

     

       1778
       1778
       +
                       const renderedFolder = zip.folder("rendered_timelines");

     

       1779
       1779
       +
       

     

       1780
       1780
       +
                       for (const [timelineName, timelineImages] of Object.entries(

     

       1781
       1781
       +
                           renderedImages,

     

       1782
       1782
       +
                       )) {

     

       1783
       1783
       +
                           const timelineFolder = renderedFolder.folder(timelineName);

     

       1784
       1784
       +
       

     

       1785
       1785
       +
                           for (const [hour, imageDataURL] of Object.entries(

     

       1786
       1786
       +
                               timelineImages,

     

       1787
       1787
       +
                           )) {

     

       1788
       1788
       +
                               // Convert data URL to binary data

     

       1789
       1789
       +
                               const base64Data = imageDataURL.split(",")[1];

     

       1790
       1790
       +
                               const binaryData = atob(base64Data);

     

       1791
       1791
       +
                               const bytes = new Uint8Array(binaryData.length);

     

       1792
       1792
       +
                               for (let i = 0; i < binaryData.length; i++) {

     

       1793
       1793
       +
                                   bytes[i] = binaryData.charCodeAt(i);

     

       1794
       1794
       +
                               }

     

       1795
       1795
       +
       

     

       1796
       1796
       +
                               const hourPadded = hour.padStart(2, "0");

     

       1797
       1797
       +
                               timelineFolder.file(`hour_${hourPadded}.jpg`, bytes);

     

       1798
       1798
       +
                           }

     

       1799
       1799
       +
                       }

     

       1800
       1800
       +
       

     

       1801
       1801
       +
                       // Generate and download ZIP

     

       1802
       1802
       +
                       showStatus("Creating ZIP file...", "success");

     

       1803
       1803
       +
                       const content = await zip.generateAsync({

     

       1804
       1804
       +
                           type: "blob",

     

       1805
       1805
       +
                           compression: "DEFLATE",

     

       1806
       1806
       +
                           compressionOptions: { level: 6 },

     

       1807
       1807
       +
                       });

     

       1808
       1808
       +
       

     

       1809
       1809
       +
                       // Create download link

     

       1810
       1810
       +
                       const link = document.createElement("a");

     

       1811
       1811
       +
                       const url = URL.createObjectURL(content);

     

       1812
       1812
       +
                       link.href = url;

     

       1813
       1813
       +
                       link.download = "bluesky-pfp-updates.zip";

     

       1814
       1814
       +
       

     

       1815
       1815
       +
                       // Trigger download

     

       1816
       1816
       +
                       document.body.appendChild(link);

     

       1817
       1817
       +
                       link.click();

     

       1818
       1818
       +
                       document.body.removeChild(link);

     

       1819
       1819
       +
       

     

       1820
       1820
       +
                       // Cleanup

     

       1821
       1821
       +
                       setTimeout(() => URL.revokeObjectURL(url), 1000);

     

       1822
       1822
       +
       

     

       1823
       1823
       +
                       showStatus("ZIP file downloaded with shell script!", "success");

     

       1824
       1824
       +
                   }

     

       1825
       1825
       +
       

     

       1826
       1826
       +
                   function importConfigToTimelines() {

     

       1827
       1827
       +
                       const configText = document

     

       1828
       1828
       +
                           .getElementById("bulkConfigInput")

     

       1829
       1829
       +
                           .value.trim();

     

       1830
       1830
       +
                       if (!configText) {

     

       1831
       1831
       +
                           showStatus("Please paste a config to import!", "error");

     

       1832
       1832
       +
                           return;

     

       1833
       1833
       +
                       }

     

       1834
       1834
       +
       

     

       1835
       1835
       +
                       let config;

     

       1836
       1836
       +
                       try {

     

       1837
       1837
       +
                           config = JSON.parse(configText);

     

       1838
       1838
       +
                       } catch (e) {

     

       1839
       1839
       +
                           showStatus("Invalid JSON config!", "error");

     

       1840
       1840
       +
                           return;

     

       1841
       1841
       +
                       }

     

       1842
       1842
       +
       

     

       1843
       1843
       +
                       // Validate config structure

     

       1844
       1844
       +
                       if (!config.timelines) {

     

       1845
       1845
       +
                           showStatus(

     

       1846
       1846
       +
                               'Config must have "timelines" property!',

     

       1847
       1847
       +
                               "error",

     

       1848
       1848
       +
                           );

     

       1849
       1849
       +
                           return;

     

       1850
       1850
       +
                       }

     

       1851
       1851
       +
       

     

       1852
       1852
       +
                       // Clear existing timelines (except keep one if empty)

     

       1853
       1853
       +
                       const wasEmpty = Object.keys(timelines).length === 0;

     

       1854
       1854
       +
                       timelines = {};

     

       1855
       1855
       +
       

     

       1856
       1856
       +
                       // Clear existing tabs

     

       1857
       1857
       +
                       document.getElementById("timelineTabs").innerHTML = "";

     

       1858
       1858
       +
       

     

       1859
       1859
       +
                       // Import all timelines from config

     

       1860
       1860
       +
                       const importedTimelines = Object.keys(config.timelines);

     

       1861
       1861
       +
                       let importedCount = 0;

     

       1862
       1862
       +
       

     

       1863
       1863
       +
                       for (const [timelineName, timelineConfig] of Object.entries(

     

       1864
       1864
       +
                           config.timelines,

     

       1865
       1865
       +
                       )) {

     

       1866
       1866
       +
                           // Validate timeline structure

     

       1867
       1867
       +
                           if (typeof timelineConfig !== "object") {

     

       1868
       1868
       +
                               showStatus(

     

       1869
       1869
       +
                                   `Invalid timeline structure for "${timelineName}"`,

     

       1870
       1870
       +
                                   "warning",

     

       1871
       1871
       +
                               );

     

       1872
       1872
       +
                               continue;

     

       1873
       1873
       +
                           }

     

       1874
       1874
       +
       

     

       1875
       1875
       +
                           // Convert timeline config to our format

     

       1876
       1876
       +
                           timelines[timelineName] = {};

     

       1877
       1877
       +
       

     

       1878
       1878
       +
                           for (const [hour, hourConfig] of Object.entries(

     

       1879
       1879
       +
                               timelineConfig,

     

       1880
       1880
       +
                           )) {

     

       1881
       1881
       +
                               const hourNum = parseInt(hour);

     

       1882
       1882
       +
                               if (

     

       1883
       1883
       +
                                   hourNum >= 0 &&

     

       1884
       1884
       +
                                   hourNum <= 23 &&

     

       1885
       1885
       +
                                   hourConfig.color1 &&

     

       1886
       1886
       +
                                   hourConfig.color2

     

       1887
       1887
       +
                               ) {

     

       1888
       1888
       +
                                   timelines[timelineName][hourNum] = {

     

       1889
       1889
       +
                                       color1: hourConfig.color1,

     

       1890
       1890
       +
                                       color2: hourConfig.color2,

     

       1891
       1891
       +
                                       backgroundIntensity:

     

       1892
       1892
       +
                                           hourConfig.backgroundIntensity || 40,

     

       1893
       1893
       +
                                       foregroundIntensity:

     

       1894
       1894
       +
                                           hourConfig.foregroundIntensity || 8,

     

       1895
       1895
       +
                                   };

     

       1896
       1896
       +
                               }

     

       1897
       1897
       +
                           }

     

       1898
       1898
       +
       

     

       1899
       1899
       +
                           // Create tab for this timeline

     

       1900
       1900
       +
                           const tab = document.createElement("div");

     

       1901
       1901
       +
                           tab.className = "timeline-tab";

     

       1902
       1902
       +
                           tab.dataset.timeline = timelineName;

     

       1903
       1903
       +
                           tab.textContent = timelineName;

     

       1904
       1904
       +
                           tab.onclick = () => switchTimeline(timelineName);

     

       1905
       1905
       +
                           document.getElementById("timelineTabs").appendChild(tab);

     

       1906
       1906
       +
       

     

       1907
       1907
       +
                           importedCount++;

     

       1908
       1908
       +
                       }

     

       1909
       1909
       +
       

     

       1910
       1910
       +
                       if (importedCount === 0) {

     

       1911
       1911
       +
                           showStatus("No valid timelines found in config!", "error");

     

       1912
       1912
       +
                           // Restore default if nothing imported

     

       1913
       1913
       +
                           timelines.sunny = {};

     

       1914
       1914
       +
                           for (let hour = 0; hour < 24; hour++) {

     

       1915
       1915
       +
                               timelines.sunny[hour] = getDefaultConfigForHour(hour);

     

       1916
       1916
       +
                           }

     

       1917
       1917
       +
                           const tab = document.createElement("div");

     

       1918
       1918
       +
                           tab.className = "timeline-tab active";

     

       1919
       1919
       +
                           tab.dataset.timeline = "sunny";

     

       1920
       1920
       +
                           tab.textContent = "sunny";

     

       1921
       1921
       +
                           tab.onclick = () => switchTimeline("sunny");

     

       1922
       1922
       +
                           document.getElementById("timelineTabs").appendChild(tab);

     

       1923
       1923
       +
                           currentTimeline = "sunny";

     

       1924
       1924
       +
                       } else {

     

       1925
       1925
       +
                           // Switch to first imported timeline

     

       1926
       1926
       +
                           const firstTimeline = importedTimelines[0];

     

       1927
       1927
       +
                           currentTimeline = firstTimeline;

     

       1928
       1928
       +
                           document

     

       1929
       1929
       +
                               .querySelector(`[data-timeline="${firstTimeline}"]`)

     

       1930
       1930
       +
                               .classList.add("active");

     

       1931
       1931
       +
                           document.getElementById("currentTimelineName").textContent =

     

       1932
       1932
       +
                               firstTimeline;

     

       1933
       1933
       +
                       }

     

       1934
       1934
       +
       

     

       1935
       1935
       +
                       // Update UI

     

       1936
       1936
       +
                       initializeTimeline();

     

       1937
       1937
       +
       

     

       1938
       1938
       +
                       showStatus(

     

       1939
       1939
       +
                           `Successfully imported ${importedCount} timeline(s): ${importedTimelines.join(", ")}`,

     

       1940
       1940
       +
                           "success",

     

       1941
       1941
       +
                       );

     

       1942
       1942
       +
       

     

       1943
       1943
       +
                       // Clear the config input

     

       1944
       1944
       +
                       document.getElementById("bulkConfigInput").value = "";

     

       1945
       1945
       +
                   }

     

       1946
       1946
       +
       

     

       1947
       1947
       +
                   function downloadIndividualFiles() {

     

       1948
       1948
       +
                       let downloadCount = 0;

     

       1949
       1949
       +
                       const totalFiles = Object.values(renderedImages).reduce(

     

       1950
       1950
       +
                           (sum, timeline) => sum + Object.keys(timeline).length,

     

       1951
       1951
       +
                           0,

     

       1952
       1952
       +
                       );

     

       1953
       1953
       +
       

     

       1954
       1954
       +
                       for (const [timelineName, timelineImages] of Object.entries(

     

       1955
       1955
       +
                           renderedImages,

     

       1956
       1956
       +
                       )) {

     

       1957
       1957
       +
                           for (const [hour, imageDataURL] of Object.entries(

     

       1958
       1958
       +
                               timelineImages,

     

       1959
       1959
       +
                           )) {

     

       1960
       1960
       +
                               const hourPadded = hour.padStart(2, "0");

     

       1961
       1961
       +
                               const filename = `${timelineName}_hour_${hourPadded}.jpg`;

     

       1962
       1962
       +
       

     

       1963
       1963
       +
                               // Create download link

     

       1964
       1964
       +
                               const link = document.createElement("a");

     

       1965
       1965
       +
                               link.href = imageDataURL;

     

       1966
       1966
       +
                               link.download = filename;

     

       1967
       1967
       +
       

     

       1968
       1968
       +
                               // Trigger download with small delay

     

       1969
       1969
       +
                               setTimeout(() => {

     

       1970
       1970
       +
                                   document.body.appendChild(link);

     

       1971
       1971
       +
                                   link.click();

     

       1972
       1972
       +
                                   document.body.removeChild(link);

     

       1973
       1973
       +
                                   downloadCount++;

     

       1974
       1974
       +
       

     

       1975
       1975
       +
                                   if (downloadCount === totalFiles) {

     

       1976
       1976
       +
                                       showStatus(

     

       1977
       1977
       +
                                           `Downloaded ${totalFiles} individual files!`,

     

       1978
       1978
       +
                                           "success",

     

       1979
       1979
       +
                                       );

     

       1980
       1980
       +
                                   }

     

       1981
       1981
       +
                               }, downloadCount * 100); // 100ms delay between downloads

     

       1982
       1982
       +
                           }

     

       1983
       1983
       +
                       }

     

       1984
       1984
       +
       

     

       1985
       1985
       +
                       showStatus(

     

       1986
       1986
       +
                           `Starting ${totalFiles} individual downloads...`,

     

       1987
       1987
       +
                           "success",

     

       1988
       1988
       +
                       );

     

       1989
       1989
       +
                   }

     

       1990
       1990
       +
       

     

       1991
       1991
       +
                   function copyToClipboard() {

     

       1992
       1992
       +
                       const textarea = document.getElementById("configOutput");

     

       1993
       1993
       +
                       if (!textarea.value.trim()) {

     

       1994
       1994
       +
                           showStatus(

     

       1995
       1995
       +
                               "Nothing to copy! Generate a config first.",

     

       1996
       1996
       +
                               "error",

     

       1997
       1997
       +
                           );

     

       1998
       1998
       +
                           return;

     

       1999
       1999
       +
                       }

     

       2000
       2000
       +
       

     

       2001
       2001
       +
                       textarea.select();

     

       2002
       2002
       +
                       document.execCommand("copy");

     

       2003
       2003
       +
       

     

       2004
       2004
       +
                       // Try the modern API as fallback

     

       2005
       2005
       +
                       if (navigator.clipboard) {

     

       2006
       2006
       +
                           navigator.clipboard

     

       2007
       2007
       +
                               .writeText(textarea.value)

     

       2008
       2008
       +
                               .then(() => {

     

       2009
       2009
       +
                                   showStatus(

     

       2010
       2010
       +
                                       "Config copied to clipboard!",

     

       2011
       2011
       +
                                       "success",

     

       2012
       2012
       +
                                   );

     

       2013
       2013
       +
                               })

     

       2014
       2014
       +
                               .catch(() => {

     

       2015
       2015
       +
                                   showStatus(

     

       2016
       2016
       +
                                       "Please manually copy the text",

     

       2017
       2017
       +
                                       "error",

     

       2018
       2018
       +
                                   );

     

       2019
       2019
       +
                               });

     

       2020
       2020
       +
                       } else {

     

       2021
       2021
       +
                           showStatus(

     

       2022
       2022
       +
                               "Config selected - press Ctrl+C to copy",

     

       2023
       2023
       +
                               "success",

     

       2024
       2024
       +
                           );

     

       2025
       2025
       +
                       }

     

       2026
       2026
       +
                   }

     

       2027
       2027
       +
       

     

       2028
       2028
       +
                   function showStatus(message, type) {

     

       2029
       2029
       +
                       const status = document.getElementById("uploadStatus");

     

       2030
       2030
       +
                       status.textContent = message;

     

       2031
       2031
       +
                       status.className = `status ${type}`;

     

       2032
       2032
       +
                       setTimeout(() => (status.style.display = "none"), 3000);

     

       2033
       2033
       +
                   }

     

       2034
       2034
       +
       

     

       2035
       2035
       +
                   // Image upload handlers

     

       2036
       2036
       +
                   document

     

       2037
       2037
       +
                       .getElementById("baseImage")

     

       2038
       2038
       +
                       .addEventListener("change", function (e) {

     

       2039
       2039
       +
                           const file = e.target.files[0];

     

       2040
       2040
       +
                           if (file) {

     

       2041
       2041
       +
                               const reader = new FileReader();

     

       2042
       2042
       +
                               reader.onload = function (e) {

     

       2043
       2043
       +
                                   const img = new Image();

     

       2044
       2044
       +
                                   img.onload = function () {

     

       2045
       2045
       +
                                       baseImg = img;

     

       2046
       2046
       +
                                       showStatus("Base image loaded!", "success");

     

       2047
       2047
       +
                                       updatePreview();

     

       2048
       2048
       +
                                   };

     

       2049
       2049
       +
                                   img.src = e.target.result;

     

       2050
       2050
       +
                               };

     

       2051
       2051
       +
                               reader.readAsDataURL(file);

     

       2052
       2052
       +
                           }

     

       2053
       2053
       +
                       });

     

       2054
       2054
       +
       

     

       2055
       2055
       +
                   document

     

       2056
       2056
       +
                       .getElementById("matteImage")

     

       2057
       2057
       +
                       .addEventListener("change", function (e) {

     

       2058
       2058
       +
                           const file = e.target.files[0];

     

       2059
       2059
       +
                           if (file) {

     

       2060
       2060
       +
                               const reader = new FileReader();

     

       2061
       2061
       +
                               reader.onload = function (e) {

     

       2062
       2062
       +
                                   const img = new Image();

     

       2063
       2063
       +
                                   img.onload = function () {

     

       2064
       2064
       +
                                       matteImg = img;

     

       2065
       2065
       +
                                       showStatus("Matte loaded!", "success");

     

       2066
       2066
       +
                                       updatePreview();

     

       2067
       2067
       +
                                   };

     

       2068
       2068
       +
                                   img.src = e.target.result;

     

       2069
       2069
       +
                               };

     

       2070
       2070
       +
                               reader.readAsDataURL(file);

     

       2071
       2071
       +
                           }

     

       2072
       2072
       +
                       });

     

       2073
       2073
       +
       

     

       2074
       2074
       +
                   // Slider updates

     

       2075
       2075
       +
                   document

     

       2076
       2076
       +
                       .getElementById("bgIntensity")

     

       2077
       2077
       +
                       .addEventListener("input", function () {

     

       2078
       2078
       +
                           document.getElementById("bgValue").textContent =

     

       2079
       2079
       +
                               this.value + "%";

     

       2080
       2080
       +
                           updatePreview();

     

       2081
       2081
       +
                       });

     

       2082
       2082
       +
       

     

       2083
       2083
       +
                   document

     

       2084
       2084
       +
                       .getElementById("fgIntensity")

     

       2085
       2085
       +
                       .addEventListener("input", function () {

     

       2086
       2086
       +
                           document.getElementById("fgValue").textContent =

     

       2087
       2087
       +
                               this.value + "%";

     

       2088
       2088
       +
                           updatePreview();

     

       2089
       2089
       +
                       });

     

       2090
       2090
       +
       

     

       2091
       2091
       +
                   document

     

       2092
       2092
       +
                       .getElementById("color1")

     

       2093
       2093
       +
                       .addEventListener("change", updatePreview);

     

       2094
       2094
       +
                   document

     

       2095
       2095
       +
                       .getElementById("color2")

     

       2096
       2096
       +
                       .addEventListener("change", updatePreview);

     

       2097
       2097
       +
       

     

       2098
       2098
       +
                   function updatePreview() {

     

       2099
       2099
       +
                       if (!baseImg || !matteImg) return;

     

       2100
       2100
       +
       

     

       2101
       2101
       +
                       const canvas = document.getElementById("previewCanvas");

     

       2102
       2102
       +
                       const ctx = canvas.getContext("2d");

     

       2103
       2103
       +
       

     

       2104
       2104
       +
                       const color1 = document.getElementById("color1").value;

     

       2105
       2105
       +
                       const color2 = document.getElementById("color2").value;

     

       2106
       2106
       +
                       const bgIntensity = parseInt(

     

       2107
       2107
       +
                           document.getElementById("bgIntensity").value,

     

       2108
       2108
       +
                       );

     

       2109
       2109
       +
                       const fgIntensity = parseInt(

     

       2110
       2110
       +
                           document.getElementById("fgIntensity").value,

     

       2111
       2111
       +
                       );

     

       2112
       2112
       +
       

     

       2113
       2113
       +
                       // Create gradient

     

       2114
       2114
       +
                       const gradient = createGradient(

     

       2115
       2115
       +
                           canvas.width,

     

       2116
       2116
       +
                           canvas.height,

     

       2117
       2117
       +
                           color1,

     

       2118
       2118
       +
                           color2,

     

       2119
       2119
       +
                       );

     

       2120
       2120
       +
       

     

       2121
       2121
       +
                       // Clear canvas

     

       2122
       2122
       +
                       ctx.clearRect(0, 0, canvas.width, canvas.height);

     

       2123
       2123
       +
       

     

       2124
       2124
       +
                       // Create background layer

     

       2125
       2125
       +
                       const backgroundLayer = blendImages(

     

       2126
       2126
       +
                           baseImg,

     

       2127
       2127
       +
                           gradient,

     

       2128
       2128
       +
                           bgIntensity,

     

       2129
       2129
       +
                       );

     

       2130
       2130
       +
                       ctx.drawImage(

     

       2131
       2131
       +
                           backgroundLayer,

     

       2132
       2132
       +
                           0,

     

       2133
       2133
       +
                           0,

     

       2134
       2134
       +
                           canvas.width,

     

       2135
       2135
       +
                           canvas.height,

     

       2136
       2136
       +
                       );

     

       2137
       2137
       +
       

     

       2138
       2138
       +
                       // Create and apply foreground layer

     

       2139
       2139
       +
                       let foregroundLayer;

     

       2140
       2140
       +
                       if (fgIntensity === 0) {

     

       2141
       2141
       +
                           foregroundLayer = baseImg;

     

       2142
       2142
       +
                       } else {

     

       2143
       2143
       +
                           foregroundLayer = blendImages(

     

       2144
       2144
       +
                               baseImg,

     

       2145
       2145
       +
                               gradient,

     

       2146
       2146
       +
                               fgIntensity,

     

       2147
       2147
       +
                           );

     

       2148
       2148
       +
                       }

     

       2149
       2149
       +
       

     

       2150
       2150
       +
                       // Apply masking

     

       2151
       2151
       +
                       const maskedForeground = document.createElement("canvas");

     

       2152
       2152
       +
                       maskedForeground.width = canvas.width;

     

       2153
       2153
       +
                       maskedForeground.height = canvas.height;

     

       2154
       2154
       +
                       const maskCtx = maskedForeground.getContext("2d");

     

       2155
       2155
       +
       

     

       2156
       2156
       +
                       maskCtx.drawImage(

     

       2157
       2157
       +
                           foregroundLayer,

     

       2158
       2158
       +
                           0,

     

       2159
       2159
       +
                           0,

     

       2160
       2160
       +
                           canvas.width,

     

       2161
       2161
       +
                           canvas.height,

     

       2162
       2162
       +
                       );

     

       2163
       2163
       +
       

     

       2164
       2164
       +
                       // Create proper alpha mask

     

       2165
       2165
       +
                       const matteDataCanvas = document.createElement("canvas");

     

       2166
       2166
       +
                       matteDataCanvas.width = matteImg.width;

     

       2167
       2167
       +
                       matteDataCanvas.height = matteImg.height;

     

       2168
       2168
       +
                       const matteDataCtx = matteDataCanvas.getContext("2d");

     

       2169
       2169
       +
                       matteDataCtx.drawImage(matteImg, 0, 0);

     

       2170
       2170
       +
       

     

       2171
       2171
       +
                       const imageData = matteDataCtx.getImageData(

     

       2172
       2172
       +
                           0,

     

       2173
       2173
       +
                           0,

     

       2174
       2174
       +
                           matteImg.width,

     

       2175
       2175
       +
                           matteImg.height,

     

       2176
       2176
       +
                       );

     

       2177
       2177
       +
                       const data = imageData.data;

     

       2178
       2178
       +
       

     

       2179
       2179
       +
                       for (let i = 0; i < data.length; i += 4) {

     

       2180
       2180
       +
                           const brightness =

     

       2181
       2181
       +
                               (data[i] + data[i + 1] + data[i + 2]) / 3;

     

       2182
       2182
       +
                           if (brightness > 128) {

     

       2183
       2183
       +
                               data[i + 3] = 255;

     

       2184
       2184
       +
                           } else {

     

       2185
       2185
       +
                               data[i + 3] = 0;

     

       2186
       2186
       +
                           }

     

       2187
       2187
       +
                           data[i] = 255;

     

       2188
       2188
       +
                           data[i + 1] = 255;

     

       2189
       2189
       +
                           data[i + 2] = 255;

     

       2190
       2190
       +
                       }

     

       2191
       2191
       +
       

     

       2192
       2192
       +
                       matteDataCtx.putImageData(imageData, 0, 0);

     

       2193
       2193
       +
       

     

       2194
       2194
       +
                       maskCtx.globalCompositeOperation = "destination-in";

     

       2195
       2195
       +
                       maskCtx.drawImage(

     

       2196
       2196
       +
                           matteDataCanvas,

     

       2197
       2197
       +
                           0,

     

       2198
       2198
       +
                           0,

     

       2199
       2199
       +
                           canvas.width,

     

       2200
       2200
       +
                           canvas.height,

     

       2201
       2201
       +
                       );

     

       2202
       2202
       +
       

     

       2203
       2203
       +
                       ctx.globalCompositeOperation = "source-over";

     

       2204
       2204
       +
                       ctx.drawImage(maskedForeground, 0, 0);

     

       2205
       2205
       +
                   }

     

       2206
       2206
       +
       

     

       2207
       2207
       +
                   function createGradient(width, height, color1, color2) {

     

       2208
       2208
       +
                       const gradCanvas = document.createElement("canvas");

     

       2209
       2209
       +
                       gradCanvas.width = width;

     

       2210
       2210
       +
                       gradCanvas.height = height;

     

       2211
       2211
       +
                       const gradCtx = gradCanvas.getContext("2d");

     

       2212
       2212
       +
       

     

       2213
       2213
       +
                       const gradient = gradCtx.createLinearGradient(0, 0, 0, height);

     

       2214
       2214
       +
                       gradient.addColorStop(0, color1);

     

       2215
       2215
       +
                       gradient.addColorStop(1, color2);

     

       2216
       2216
       +
       

     

       2217
       2217
       +
                       gradCtx.fillStyle = gradient;

     

       2218
       2218
       +
                       gradCtx.fillRect(0, 0, width, height);

     

       2219
       2219
       +
       

     

       2220
       2220
       +
                       return gradCanvas;

     

       2221
       2221
       +
                   }

     

       2222
       2222
       +
       

     

       2223
       2223
       +
                   function blendImages(base, overlay, intensity) {

     

       2224
       2224
       +
                       const blendCanvas = document.createElement("canvas");

     

       2225
       2225
       +
                       blendCanvas.width = base.width;

     

       2226
       2226
       +
                       blendCanvas.height = base.height;

     

       2227
       2227
       +
                       const blendCtx = blendCanvas.getContext("2d");

     

       2228
       2228
       +
       

     

       2229
       2229
       +
                       blendCtx.drawImage(base, 0, 0);

     

       2230
       2230
       +
                       blendCtx.globalCompositeOperation = "overlay";

     

       2231
       2231
       +
                       blendCtx.globalAlpha = intensity / 100;

     

       2232
       2232
       +
                       blendCtx.drawImage(overlay, 0, 0, base.width, base.height);

     

       2233
       2233
       +
       

     

       2234
       2234
       +
                       return blendCanvas;

     

       2235
       2235
       +
                   }

     

       2236
       2236
       +
       

     

       2237
       2237
       +
                   // Initialize

     

       2238
       2238
       +
                   initializeTimeline();

     

       2239
       2239
       +
               </script>

     

       2240
       2240
       +
           </body>

     

       2241
       2241
       +
       </html>

Compare changes