Update templates/index.html

templates/index.html

@@ -24,7 +24,7 @@
       --text-primary: var(--primary-dark-ref);
       --text-secondary: #666666;
       --text-placeholder: #999999;
-      --text-email-on-light: rgba(27, 27, 29, 0.7); /* Lighter for email as per brief */
+      --text-email-on-light: rgba(27, 27, 29, 0.7);
 
       /* Typography */
       --font-main: 'Noto Sans', 'Poppins', sans-serif;
@@ -33,10 +33,9 @@
       /* UI Elements */
       --radius-sharp: 4px;
       --radius-softer: 6px;
-      --radius-profile-card: 12px; /* For profile cards */
+      --radius-profile-card: 12px;
       --shadow-none: none;
-      --shadow-interactive: 0 1px 3px rgba(0,0,0,0.07);
-      --shadow-profile-card: 0 4px 10px rgba(0,0,0,0.1); /* Softer, more modern shadow */
+      --shadow-profile-card: 0 4px 10px rgba(0,0,0,0.1);
 
       --nav-height: 60px;
     }
@@ -71,7 +70,6 @@
     }
     section.active { display: flex; flex-direction: column; }
 
-    /* Common Button Style (Red Accent) */
     button, .button-like {
       background: var(--accent-red);
       color: var(--text-on-accent);
@@ -105,7 +103,6 @@
       cursor: not-allowed;
     }
 
-    /* --- Uploader & History Styles (Keep as is from previous version) --- */
     .uploader { display: flex; flex-direction: column; gap: 16px; width: 100%; max-width: 480px; margin: auto; }
     .file-input-area { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 25px 20px; border: 2px dashed var(--border-medium); border-radius: var(--radius-softer); background-color: var(--surface-primary); cursor: pointer; transition: border-color 0.2s, background-color 0.2s; text-align: center; }
     .file-input-area:hover, .file-input-area.dragover { border-color: var(--accent-red); background-color: #fff5f5; }
@@ -137,205 +134,46 @@
     .history-item-url { font-size: 0.75em; color: var(--text-secondary); word-break: break-all; display: block; text-decoration: none; font-family: var(--font-mono); }
     .history-item-url:hover { color: var(--accent-red); text-decoration: underline;}
     .history-item button { padding: 7px 10px; font-size: 0.75rem; min-width: 80px; }
-    /* --- END Uploader & History Styles --- */
 
-
-    /* Profile UI - Revamped */
     .profile-container {
         display: flex;
         flex-direction: column;
         align-items: center;
-        gap: 24px; /* Increased spacing between profile sections */
-        padding: 16px 0; /* Padding for top/bottom within the section */
-        width: 100%;
-        max-width: 450px; /* Control max width */
-        margin: auto; /* Center it */
-    }
-
-    .profile-header {
-        text-align: center;
-        margin-bottom: 16px; /* Space below header */
-    }
-    .profile-avatar-wrapper {
-        position: relative;
-        width: 120px; /* Avatar size */
-        height: 120px;
-        margin: 0 auto 20px auto; /* Centered, space below */
-    }
-    .profile-avatar {
-        width: 100%;
-        height: 100%;
-        border-radius: 50%;
-        object-fit: cover;
-        border: 3px solid var(--surface-primary); /* Inner border to lift from ring */
-        box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* Subtle shadow on avatar */
-        position: relative;
-        z-index: 2;
-    }
-    .profile-avatar-ring {
-        position: absolute;
-        top: -5px; left: -5px; right: -5px; bottom: -5px; /* Make it slightly larger than avatar */
-        border-radius: 50%;
-        border: 2px dotted var(--accent-red);
-        animation: rotateRing 20s linear infinite;
-        z-index: 1;
-    }
-    @keyframes rotateRing {
-        from { transform: rotate(0deg); }
-        to { transform: rotate(360deg); }
-    }
-
-    .profile-name {
-        font-family: var(--font-mono); /* Pixel-style font */
-        font-size: 1.8rem; /* Prominent name */
-        color: var(--text-primary);
-        margin-bottom: 4px;
-        letter-spacing: 0.5px; /* Adjust for "pixel" feel */
-    }
-    .profile-email {
-        font-family: var(--font-main); /* Clean sans-serif */
-        font-size: 0.95rem;
-        color: var(--text-email-on-light); /* Lighter email text */
-    }
-
-    .profile-action-card {
-        background-color: var(--surface-primary);
-        border-radius: var(--radius-profile-card);
-        padding: 16px;
+        gap: 24px;
+        padding: 16px 0;
         width: 100%;
-        box-shadow: var(--shadow-profile-card);
-        text-align: center;
-    }
-    .portfolio-button {
-        display: inline-flex; /* Changed to inline-flex to behave like a button */
-        align-items: center;
-        justify-content: center;
-        gap: 8px;
-        background-color: var(--accent-red);
-        color: var(--text-on-accent);
-        font-family: var(--font-main);
-        font-size: 1rem;
-        font-weight: 500;
-        padding: 12px 24px;
-        border-radius: var(--radius-sharp); /* Sharp radius for button itself */
-        text-decoration: none;
-        text-transform: uppercase;
-        letter-spacing: 0.5px;
-        transition: background-color 0.15s ease;
-        width: auto; /* Let it size by content or set a min-width */
-        min-width: 200px;
-    }
-    .portfolio-button:hover {
-        background-color: var(--accent-red-hover);
-    }
-    .portfolio-button .material-icons {
-        font-size: 20px; /* Icon size in button */
-    }
-
-
-    .profile-social-links {
-        display: grid;
-        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); /* Responsive grid */
-        gap: 16px;
-        width: 100%;
-        padding: 0 8px; /* Slight horizontal padding for the grid */
-    }
-    .social-link-card {
-        background-color: var(--surface-primary);
-        border-radius: var(--radius-profile-card);
-        padding: 16px;
-        box-shadow: var(--shadow-profile-card);
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-        text-decoration: none;
-        color: var(--text-primary);
-        gap: 8px;
-        transition: transform 0.2s ease, box-shadow 0.2s ease;
-        min-height: 100px; /* Ensure cards have some height */
-    }
-    .social-link-card:hover {
-        transform: translateY(-3px) scale(1.03);
-        box-shadow: 0 6px 12px rgba(0,0,0,0.12);
-        color: var(--accent-red); /* Change text/icon color on hover */
-    }
+        max-width: 450px;
+        margin: auto;
+    }
+    .profile-header { text-align: center; margin-bottom: 16px; }
+    .profile-avatar-wrapper { position: relative; width: 120px; height: 120px; margin: 0 auto 20px auto; }
+    .profile-avatar { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 3px solid var(--surface-primary); box-shadow: 0 2px 4px rgba(0,0,0,0.1); position: relative; z-index: 2; }
+    .profile-avatar-ring { position: absolute; top: -5px; left: -5px; right: -5px; bottom: -5px; border-radius: 50%; border: 2px dotted var(--accent-red); animation: rotateRing 20s linear infinite; z-index: 1; }
+    @keyframes rotateRing { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
+    .profile-name { font-family: var(--font-mono); font-size: 1.8rem; color: var(--text-primary); margin-bottom: 4px; letter-spacing: 0.5px; }
+    .profile-email { font-family: var(--font-main); font-size: 0.95rem; color: var(--text-email-on-light); }
+    .profile-action-card { background-color: var(--surface-primary); border-radius: var(--radius-profile-card); padding: 16px; width: 100%; box-shadow: var(--shadow-profile-card); text-align: center; }
+    .portfolio-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background-color: var(--accent-red); color: var(--text-on-accent); font-family: var(--font-main); font-size: 1rem; font-weight: 500; padding: 12px 24px; border-radius: var(--radius-sharp); text-decoration: none; text-transform: uppercase; letter-spacing: 0.5px; transition: background-color 0.15s ease; width: auto; min-width: 200px; }
+    .portfolio-button:hover { background-color: var(--accent-red-hover); }
+    .portfolio-button .material-icons { font-size: 20px; }
+    .profile-social-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 16px; width: 100%; padding: 0 8px; }
+    .social-link-card { background-color: var(--surface-primary); border-radius: var(--radius-profile-card); padding: 16px; box-shadow: var(--shadow-profile-card); display: flex; flex-direction: column; align-items: center; justify-content: center; text-decoration: none; color: var(--text-primary); gap: 8px; transition: transform 0.2s ease, box-shadow 0.2s ease, color 0.2s ease; min-height: 100px; }
+    .social-link-card:hover { transform: translateY(-3px) scale(1.03); box-shadow: 0 6px 12px rgba(0,0,0,0.12); color: var(--accent-red); }
     .social-link-card .social-icon {
-        font-size: 2rem; /* Placeholder for icon size */
-        width: 32px; /* If using SVGs, control size here */
-        height: 32px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        /* Basic Text Icon Styling - REPLACE WITH SVGS or ICON FONT */
-        font-family: var(--font-mono);
-        font-weight: bold;
-        border: 1px solid var(--border-light);
-        border-radius: 50%;
-        line-height: 30px; /* Center text icon */
-        transition: color 0.2s ease, border-color 0.2s ease;
-    }
-    .social-link-card:hover .social-icon {
-      color: var(--accent-red);
-      border-color: var(--accent-red);
+        width: 28px; /* SVG size */
+        height: 28px;
+        fill: currentColor; /* Inherits color from .social-link-card for hover effect */
+        transition: fill 0.2s ease;
     }
-    .social-link-card span { /* Label for social icon */
-        font-family: var(--font-main);
-        font-size: 0.8rem;
-        font-weight: 500;
-        text-align: center;
-    }
-
+    .social-link-card span { font-family: var(--font-main); font-size: 0.8rem; font-weight: 500; text-align: center; }
 
-    /* Bottom Nav */
-    .bottom-nav {
-      position: fixed;
-      bottom: 0;
-      left: 0;
-      right: 0;
-      width: 100%;
-      background: var(--surface-primary);
-      display: flex;
-      justify-content: space-around;
-      align-items: stretch;
-      border-top: 1px solid var(--border-light);
-      padding-bottom: env(safe-area-inset-bottom);
-      height: calc(var(--nav-height) + env(safe-area-inset-bottom));
-      box-shadow: var(--shadow-none);
-    }
-    .nav-item {
-      flex: 1;
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      align-items: center;
-      font-size: 0.7rem;
-      color: var(--text-secondary);
-      cursor: pointer;
-      transition: color 0.15s ease;
-      padding-top: 5px;
-      padding-bottom: 3px;
-      position: relative;
-    }
+    .bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; width: 100%; background: var(--surface-primary); display: flex; justify-content: space-around; align-items: stretch; border-top: 1px solid var(--border-light); padding-bottom: env(safe-area-inset-bottom); height: calc(var(--nav-height) + env(safe-area-inset-bottom)); box-shadow: var(--shadow-none); }
+    .nav-item { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; font-size: 0.7rem; color: var(--text-secondary); cursor: pointer; transition: color 0.15s ease; padding-top: 5px; padding-bottom: 3px; position: relative; }
     .nav-item:hover { color: var(--text-primary); }
     .nav-item.active { color: var(--accent-red); font-weight: 700; }
-    .nav-item.active::after {
-        content: '';
-        position: absolute;
-        bottom: 5px;
-        left: 50%;
-        transform: translateX(-50%);
-        width: 5px;
-        height: 5px;
-        background-color: var(--accent-red);
-        border-radius: 50%;
-    }
-    .nav-item .material-icons {
-      font-size: 24px;
-      margin-bottom: 2px;
-    }
+    .nav-item.active::after { content: ''; position: absolute; bottom: 5px; left: 50%; transform: translateX(-50%); width: 5px; height: 5px; background-color: var(--accent-red); border-radius: 50%; }
+    .nav-item .material-icons { font-size: 24px; margin-bottom: 2px; }
 
-    /* Animations */
     @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
     @keyframes fadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
   </style>
@@ -343,7 +181,6 @@
 <body>
   <main>
     <section id="uploadSection" class="active">
-      <!-- Uploader HTML (from previous version, unchanged) -->
       <div class="uploader">
         <label for="fileInput" class="file-input-area">
           <i class="material-icons">upload_file</i>
@@ -363,7 +200,6 @@
     </section>
 
     <section id="historySection">
-      <!-- History HTML (from previous version, unchanged) -->
       <div class="history-list" id="historyList"></div>
     </section>
 
@@ -380,32 +216,30 @@
 
         <div class="profile-action-card portfolio-cta-card">
           <a href="https://www.adityadevarshi.online/" target="_blank" rel="noopener noreferrer" class="portfolio-button">
-            <i class="material-icons">visibility</i> <!-- Or 'work', 'language', 'auto_stories' -->
+            <i class="material-icons">visibility</i>
             <span>View My Work</span>
           </a>
         </div>
 
         <div class="profile-social-links">
           <a href="https://github.com/devarshiadi/" target="_blank" rel="noopener noreferrer" class="social-link-card" aria-label="GitHub Profile">
-            <i class="social-icon github-icon">G</i> <!-- Replace with actual SVG/Icon -->
+            <svg class="social-icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg>
             <span>GitHub</span>
           </a>
           <a href="https://www.linkedin.com/in/aditya-devarshi/" target="_blank" rel="noopener noreferrer" class="social-link-card" aria-label="LinkedIn Profile">
-            <i class="social-icon linkedin-icon">L</i> <!-- Replace with actual SVG/Icon -->
+            <svg class="social-icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"/></svg>
             <span>LinkedIn</span>
           </a>
           <a href="https://www.instagram.com/curseofwitcher/" target="_blank" rel="noopener noreferrer" class="social-link-card" aria-label="Instagram Profile">
-            <i class="social-icon instagram-icon">I</i> <!-- Replace with actual SVG/Icon -->
+            <svg class="social-icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c.001-3.403-2.758-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/></svg>
             <span>Instagram</span>
           </a>
-          <!-- You can add a 4th item here for a 2x2 grid if desired -->
         </div>
       </div>
     </section>
   </main>
 
   <nav class="bottom-nav">
-    <!-- Nav HTML (from previous version, unchanged) -->
     <div class="nav-item active" data-target="uploadSection">
       <i class="material-icons">home</i> Home
     </div>
@@ -418,7 +252,8 @@
   </nav>
 
   <script>
-    // JavaScript (from previous version, largely unchanged for core functionality)
+    const BASE_URL = 'https://triflix-uploadkro2.hf.space'; // Define Base URL
+
     const navItems = document.querySelectorAll('.nav-item');
     const sections = document.querySelectorAll('section');
     const uploadBtn = document.getElementById('uploadBtn');
@@ -435,55 +270,62 @@
     let infoTimeout = null;
 
     function displayInfoMessage(message, type = 'info', persistent = false) {
-        if (infoTimeout && !persistent) clearTimeout(infoTimeout);
-        uploadInfo.textContent = message;
-        uploadInfo.className = 'info';
-        if (type === 'error') {
-            uploadInfo.classList.add('error-message');
-        } else if (type === 'success') {
-             uploadInfo.classList.add('success-message');
-        }
+        if (uploadInfo) {
+            if (infoTimeout && !persistent) clearTimeout(infoTimeout);
+            uploadInfo.textContent = message;
+            uploadInfo.className = 'info';
+            if (type === 'error') {
+                uploadInfo.classList.add('error-message');
+            } else if (type === 'success') {
+                uploadInfo.classList.add('success-message');
+            }
 
-        if (message && !persistent && (type === 'error' || message === "Please select a file first.")) {
-            infoTimeout = setTimeout(() => {
-                if (uploadInfo.textContent === message) {
-                    uploadInfo.textContent = "";
-                    uploadInfo.className = 'info';
-                }
-            }, 3000);
+            if (message && !persistent && (type === 'error' || message === "Please select a file first.")) {
+                infoTimeout = setTimeout(() => {
+                    if (uploadInfo.textContent === message) {
+                        uploadInfo.textContent = "";
+                        uploadInfo.className = 'info';
+                    }
+                }, 3000);
+            }
         }
     }
 
     function resetUploadUI(clearMessage = true) {
-        fileInput.value = '';
-        fileNameDisplay.textContent = 'No file selected';
-        uploadBtn.disabled = true;
-        progressContainer.style.display = 'none';
-        progressBar.style.width = '0%';
+        if (fileInput) fileInput.value = '';
+        if (fileNameDisplay) fileNameDisplay.textContent = 'No file selected';
+        if (uploadBtn) uploadBtn.disabled = true;
+        if (progressContainer) progressContainer.style.display = 'none';
+        if (progressBar) progressBar.style.width = '0%';
         if (clearMessage) {
             displayInfoMessage("");
         }
-        loader.style.display = 'none';
-        shareLinkContainer.style.display = 'none';
-        shareLinkContainer.innerHTML = '';
-        progressBar.style.background = 'var(--accent-red)';
+        if (loader) loader.style.display = 'none';
+        if (shareLinkContainer) {
+            shareLinkContainer.style.display = 'none';
+            shareLinkContainer.innerHTML = '';
+        }
+        if (progressBar) progressBar.style.background = 'var(--accent-red)';
+    }
+
+    if (navItems.length) {
+        navItems.forEach(item => {
+          item.addEventListener('click', () => {
+            navItems.forEach(i => i.classList.remove('active'));
+            item.classList.add('active');
+            const targetId = item.dataset.target;
+            sections.forEach(sec => {
+              sec.classList.toggle('active', sec.id === targetId);
+            });
+            if (targetId === 'historySection') {
+                loadHistory();
+            }
+          });
+        });
     }
 
-    navItems.forEach(item => {
-      item.addEventListener('click', () => {
-        navItems.forEach(i => i.classList.remove('active'));
-        item.classList.add('active');
-        const targetId = item.dataset.target;
-        sections.forEach(sec => {
-          sec.classList.toggle('active', sec.id === targetId);
-        });
-        if (targetId === 'historySection') {
-            loadHistory();
-        }
-      });
-    });
 
-    if (fileInput) { // Ensure elements exist before adding listeners
+    if (fileInput && fileInputArea && fileNameDisplay && uploadBtn && progressContainer && progressBar && uploadInfo && shareLinkContainer && loader) {
         fileInput.addEventListener('change', () => {
           if (fileInput.files.length > 0) {
             fileNameDisplay.textContent = fileInput.files[0].name;
@@ -542,6 +384,7 @@
     }
     
     function loadHistory() {
+      if (!historyList) return;
       const data = JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]');
       historyList.innerHTML = '';
       if (data.length === 0) {
@@ -552,13 +395,16 @@
         const el = document.createElement('div');
         el.className = 'history-item';
         const dateStr = entry.timestamp ? new Date(entry.timestamp).toLocaleDateString() : '';
+        // Ensure entry.url is a full URL (new entries will be, old ones might not if not migrated)
+        const fullUrl = entry.url.startsWith('http') ? entry.url : `${BASE_URL}${entry.url}`;
+
         el.innerHTML = `
           <div class="history-item-info">
             <div class="history-item-name">${entry.name}</div>
-            <a href="${entry.url}" target="_blank" rel="noopener noreferrer" class="history-item-url">${entry.url.length > 50 ? entry.url.substring(0,50)+'...' : entry.url}</a>
+            <a href="${fullUrl}" target="_blank" rel="noopener noreferrer" class="history-item-url">${fullUrl.length > 50 ? fullUrl.substring(0,50)+'...' : fullUrl}</a>
             ${dateStr ? `<span style="font-size:0.7em; color:var(--text-placeholder); display:block; margin-top:2px;">${dateStr}</span>` : ''}
           </div>
-          <button data-url="${entry.url}">Copy</button>
+          <button data-url="${fullUrl}">Copy</button>
         `;
         historyList.appendChild(el);
         el.querySelector('button').addEventListener('click', function() {
@@ -567,7 +413,7 @@
       });
     }
     
-    if (uploadBtn) { // Ensure elements exist
+    if (uploadBtn && fileInput && loader && progressContainer && progressBar && uploadInfo && shareLinkContainer) {
         uploadBtn.addEventListener('click', () => {
           const file = fileInput.files[0];
           if (!file) {
@@ -601,29 +447,34 @@
             if (xhr.status === 200) {
               try {
                 const response = JSON.parse(xhr.responseText);
+                // Prepend BASE_URL if download_url is relative
+                const fullDownloadUrl = response.download_url.startsWith('http') ? response.download_url : `${BASE_URL}${response.download_url}`;
+
                 progressBar.style.width = '100%';
                 displayInfoMessage('Upload Complete!', 'success', true);
                 
                 shareLinkContainer.innerHTML = `
                   <p>Share Link:</p>
                   <div class="share-link-display">
-                    <input type="text" value="${response.download_url}" id="shareableLinkInput-${Date.now()}" readonly>
-                    <button data-url="${response.download_url}">Copy</button>
+                    <input type="text" value="${fullDownloadUrl}" id="shareableLinkInput-${Date.now()}" readonly>
+                    <button data-url="${fullDownloadUrl}">Copy</button>
                   </div>
                 `;
                 shareLinkContainer.style.display = 'block';
                 shareLinkContainer.querySelector('button').addEventListener('click', function() {
                     const inputId = this.previousElementSibling.id;
                     const linkInput = document.getElementById(inputId);
-                    linkInput.select();
-                    linkInput.setSelectionRange(0, 99999);
-                    copyToClipboard(this.dataset.url, this);
+                    if (linkInput) {
+                        linkInput.select();
+                        linkInput.setSelectionRange(0, 99999);
+                        copyToClipboard(this.dataset.url, this);
+                    }
                 });
 
                 const historyData = JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]');
                 historyData.unshift({ 
                     name: response.filename || file.name, 
-                    url: response.download_url,
+                    url: fullDownloadUrl, // Store the full URL
                     timestamp: Date.now()
                 });
                 localStorage.setItem(STORAGE_KEY, JSON.stringify(historyData.slice(0, 20)));
@@ -635,28 +486,28 @@
               } catch (e) {
                 console.error("Error parsing server response:", e);
                 displayInfoMessage('Error processing response.', 'error', true);
-                progressBar.style.width = '0%';
+                if(progressBar) progressBar.style.width = '0%';
               }
             } else {
               displayInfoMessage(`Upload failed. Status: ${xhr.status}`, 'error', true);
-              progressBar.style.background = '#dc3545';
+              if(progressBar) progressBar.style.background = '#dc3545';
             }
           };
 
           xhr.onerror = () => {
-            loader.style.display = 'none';
+            if(loader) loader.style.display = 'none';
             displayInfoMessage('Upload error. Check connection.', 'error', true);
-            progressBar.style.background = '#dc3545';
+            if(progressBar) progressBar.style.background = '#dc3545';
           };
 
-          xhr.open('POST', '/upload/', true);
+          xhr.open('POST', '/upload/', true); // DO NOT CHANGE BACKEND
           xhr.send(formData);
         });
     }
 
     // Initial load
-    if (typeof resetUploadUI === 'function') resetUploadUI(); // Check if function exists
-    document.querySelector('.nav-item[data-target="uploadSection"]')?.click(); // Check if element exists
+    if (typeof resetUploadUI === 'function') resetUploadUI();
+    document.querySelector('.nav-item[data-target="uploadSection"]')?.click();
 
   </script>
 </body>