From 979e655d4d7121ecdd2ed5aec065c38435f8e357 Mon Sep 17 00:00:00 2001
From: cosmo <cptncosmo@gmail.com>
Date: Mon, 16 Mar 2026 03:16:39 +0100
Subject: [PATCH] Add dynamic support for avatar.png or logo.png in header

---
 index.html |  1 +
 script.js  | 23 +++++++++++++++++++++++
 styles.css | 12 ++++++++++++
 3 files changed, 36 insertions(+)

diff --git a/index.html b/index.html
index 850b802..a310c27 100644
--- a/index.html
+++ b/index.html
@@ -26,6 +26,7 @@
     
     <!-- Dynamic Header Section -->
     <header class="glass-panel text-center">
+      <img id="site-logo" class="site-logo hidden" alt="Site Logo">
       <h1 id="site-title" class="glitch-text" data-text="Loading...">Loading...</h1>
       <p id="site-intro" class="subtitle">Fetching configuration...</p>
       
diff --git a/script.js b/script.js
index 97b2812..5431d8d 100644
--- a/script.js
+++ b/script.js
@@ -33,6 +33,7 @@ async function fetchConfig() {
     config = await res.json();
     populateUI();
     setupEventListeners();
+    loadLogo();
   } catch (error) {
     console.error("Failed to load config.json", error);
     document.getElementById('site-title').innerText = "Error loading config";
@@ -40,6 +41,28 @@ async function fetchConfig() {
   }
 }
 
+// Check for avatar.png or logo.png to display in header
+function loadLogo() {
+  const logoEl = document.getElementById('site-logo');
+  const imagesToTry = ['avatar.png', 'logo.png'];
+  
+  function tryNextImage(index) {
+    if (index >= imagesToTry.length) return; // None found
+    
+    const img = new Image();
+    img.onload = () => {
+      logoEl.src = imagesToTry[index];
+      logoEl.classList.remove('hidden');
+    };
+    img.onerror = () => {
+      tryNextImage(index + 1);
+    };
+    img.src = imagesToTry[index];
+  }
+  
+  tryNextImage(0);
+}
+
 // Render dynamic elements based on config
 function populateUI() {
   // Populate Text
diff --git a/styles.css b/styles.css
index 7f66e85..5b72605 100644
--- a/styles.css
+++ b/styles.css
@@ -127,6 +127,18 @@ h2 {
 .text-center { text-align: center; }
 .hidden { display: none !important; }
 
+/* Logo */
+.site-logo {
+  max-width: 150px;
+  max-height: 150px;
+  border-radius: 50%;
+  margin-bottom: 1.5rem;
+  box-shadow: 0 0 20px rgba(0,229,255,0.3);
+  border: 2px solid rgba(255,255,255,0.1);
+  object-fit: cover;
+  animation: fadeIn 0.5s ease-out;
+}
+
 /* Colors & Neons */
 .icon-blue { color: var(--neon-blue); text-shadow: 0 0 10px var(--neon-blue); }
 .icon-red { color: var(--neon-red); text-shadow: 0 0 10px var(--neon-red); }