Add dynamic support for avatar.png or logo.png in header

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>
       

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

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); }