Update public/index.html

public/index.html

@@ -4,7 +4,8 @@
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Super City — Character Editor</title>
-<link href="https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;500;600;700&family=Share+Tech+Mono&display=swap" rel="stylesheet">
+<link href="https://fonts.cdnfonts.com/css/copper-black" rel="stylesheet">
+<link href="https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap" rel="stylesheet">
 <style>
   :root {
     --bg: #0a0c10;
@@ -28,7 +29,7 @@
   body {
     background: var(--bg);
     color: var(--text);
-    font-family: 'Rajdhani', sans-serif;
+    font-family: 'Copper Black', serif;
     font-size: 15px;
     min-height: 100vh;
   }
@@ -81,7 +82,7 @@
   .panel-header { padding: 10px 14px; background: rgba(0,200,255,0.06); border-bottom: 1px solid var(--border); font-size: 11px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--accent); display: flex; align-items: center; gap: 8px; }
   .panel-header .count { margin-left: auto; font-family: 'Share Tech Mono', monospace; font-size: 12px; color: var(--text-dim); font-weight: 400; letter-spacing: 0; }
   .search-wrap { padding: 10px; border-bottom: 1px solid var(--border); }
-  .search-input { width: 100%; background: var(--bg); border: 1px solid var(--border-bright); color: var(--text-bright); font-family: 'Rajdhani', sans-serif; font-size: 14px; padding: 8px 10px 8px 30px; border-radius: 3px; outline: none; transition: border-color 0.2s; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='%235a7080' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.099zm-5.242 1.656a5.5 5.5 0 1 1 0-11 5.5 5.5 0 0 1 0 11z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: 10px center; }
+  .search-input { width: 100%; background: var(--bg); border: 1px solid var(--border-bright); color: var(--text-bright); font-family: 'Copper Black', serif; font-size: 14px; padding: 8px 10px 8px 30px; border-radius: 3px; outline: none; transition: border-color 0.2s; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='%235a7080' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.099zm-5.242 1.656a5.5 5.5 0 1 1 0-11 5.5 5.5 0 0 1 0 11z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: 10px center; }
   .search-input:focus { border-color: var(--accent); }
   .search-input::placeholder { color: var(--text-dim); }
   .char-list { max-height: 520px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--border-bright) transparent; }
@@ -130,7 +131,7 @@
 
   /* ACTIONS */
   .actions-bar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
-  .btn { padding: 10px 22px; border: none; cursor: pointer; font-family: 'Rajdhani', sans-serif; font-size: 14px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; border-radius: 3px; transition: all 0.2s; display: flex; align-items: center; gap: 6px; }
+  .btn { padding: 10px 22px; border: none; cursor: pointer; font-family: 'Copper Black', serif; font-size: 14px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; border-radius: 3px; transition: all 0.2s; display: flex; align-items: center; gap: 6px; }
   .btn-primary { background: var(--accent); color: #000; }
   .btn-primary:hover { background: #30dfff; box-shadow: 0 0 20px rgba(0,200,255,0.4); }
   .btn-secondary { background: transparent; color: var(--text); border: 1px solid var(--border-bright); }
@@ -150,6 +151,15 @@
   .tool-badge.ok { background: rgba(61,220,151,0.1); color: var(--civilian); border: 1px solid rgba(61,220,151,0.3); }
   .tool-badge.missing { background: rgba(255,68,85,0.1); color: var(--danger); border: 1px solid rgba(255,68,85,0.3); }
 
+  /* URL UPLOAD */
+  .url-upload-wrap { margin-top: 12px; }
+  .url-upload-inner { display: flex; align-items: center; gap: 10px; background: var(--panel); border: 1px solid var(--border); border-radius: 4px; padding: 10px 14px; }
+  .url-label { font-family: 'Share Tech Mono', monospace; font-size: 11px; color: var(--text-dim); letter-spacing: 1px; white-space: nowrap; }
+  .url-input { flex: 1; background: var(--bg); border: 1px solid var(--border-bright); color: var(--text-bright); font-family: 'Share Tech Mono', monospace; font-size: 12px; padding: 7px 10px; border-radius: 3px; outline: none; transition: border-color 0.2s; }
+  .url-input:focus { border-color: var(--accent); }
+  .url-input::placeholder { color: var(--text-dim); }
+  .url-btn { padding: 7px 16px; font-size: 12px; white-space: nowrap; }
+
   /* TOAST */
   .toast { position: fixed; bottom: 30px; right: 30px; background: var(--panel); border: 1px solid var(--accent); color: var(--text-bright); padding: 12px 20px; border-radius: 4px; font-size: 14px; font-weight: 600; letter-spacing: 1px; box-shadow: 0 4px 20px rgba(0,0,0,0.5); transform: translateY(80px); opacity: 0; transition: all 0.3s cubic-bezier(0.34,1.56,0.64,1); z-index: 1000; }
   .toast.show { transform: translateY(0); opacity: 1; }
@@ -189,6 +199,15 @@
     <div class="upload-sub">or click to browse · .apk files only · max 200 MB</div>
     <input type="file" id="apkInput" accept=".apk">
   </div>
+  <!-- URL Upload -->
+  <div class="url-upload-wrap" id="urlUploadWrap">
+    <div class="url-upload-inner">
+      <span class="url-label">or load from URL</span>
+      <input class="url-input" type="text" id="apkUrlInput" placeholder="https://example.com/SuperCity.apk">
+      <button class="btn btn-secondary url-btn" onclick="uploadFromUrl()">⬇ Load URL</button>
+    </div>
+  </div>
+
   <div class="progress-wrap" id="progressWrap">
     <div class="progress-label" id="progressLabel">Uploading…</div>
     <div class="progress-bar-outer"><div class="progress-bar-inner" id="progressBar"></div></div>
@@ -365,6 +384,7 @@ function uploadAPK(file) {
         <div class="file-info">📦 <span class="file-info-name">${file.name}</span>
         &nbsp;·&nbsp; ${characters.length} characters loaded &nbsp;·&nbsp; session: ${sessionToken.split('_')[0]}</div>`;
       document.getElementById('editorLayout').style.display = 'grid';
+      document.getElementById('urlUploadWrap').style.display = 'none';
       setStep(2);
       showToast(`✔ Loaded ${characters.length} characters`);
     } else {
@@ -378,6 +398,53 @@ function uploadAPK(file) {
   xhr.send(form);
 }
 
+function uploadFromUrl() {
+  const url = document.getElementById('apkUrlInput').value.trim();
+  if (!url) { showToast('Enter a URL first', true); return; }
+  if (!url.toLowerCase().endsWith('.apk')) { showToast('URL must point to a .apk file', true); return; }
+
+  const wrap  = document.getElementById('progressWrap');
+  const bar   = document.getElementById('progressBar');
+  const label = document.getElementById('progressLabel');
+  wrap.style.display = 'block';
+  bar.style.width = '10%';
+  label.textContent = 'Fetching APK from URL…';
+
+  fetch('/upload-url', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ url }),
+  })
+  .then(res => {
+    bar.style.width = '80%';
+    label.textContent = 'Parsing characters…';
+    if (!res.ok) return res.json().then(e => { throw new Error(e.error); });
+    return res.json();
+  })
+  .then(data => {
+    bar.style.width = '100%';
+    sessionToken = data.token;
+    originalRaw  = data.characters;
+    parseCharacters(data.characters);
+    wrap.style.display = 'none';
+    const fname = url.split('/').pop();
+    document.getElementById('fileInfoBar').style.display = 'flex';
+    document.getElementById('fileInfoBar').innerHTML = `
+      <div class="file-info">🌐 <span class="file-info-name">${fname}</span>
+      &nbsp;·&nbsp; ${characters.length} characters loaded &nbsp;·&nbsp; session: ${sessionToken.split('_')[0]}</div>`;
+    document.getElementById('editorLayout').style.display = 'grid';
+    document.getElementById('urlUploadWrap').style.display = 'none';
+    document.getElementById('uploadZone').style.display = 'none';
+    setStep(2);
+    showToast(`✔ Loaded ${characters.length} characters from URL`);
+  })
+  .catch(err => {
+    wrap.style.display = 'none';
+    bar.style.width = '0%';
+    showToast('Error: ' + err.message, true);
+  });
+}
+
 // ── PARSE ──────────────────────────────────────────────────────────
 function parseCharacters(raw) {
   characters = [];