Update public/index.html

public/index.html

@@ -152,13 +152,8 @@
   .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; }
+  .url-upload-wrap { display: none; }
+  .url-btn { display: none; }
 
   /* 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; }
@@ -184,7 +179,7 @@
 
   <!-- Steps -->
   <div class="steps">
-    <div class="step active" id="step1"><span class="step-num">01</span> Upload APK</div>
+    <div class="step active" id="step1"><span class="step-num">01</span> Load APK</div>
     <div class="step" id="step2"><span class="step-num">02</span> Edit Characters</div>
     <div class="step" id="step3"><span class="step-num">03</span> Export Patched APK</div>
   </div>
@@ -192,22 +187,6 @@
   <!-- Tool status -->
   <div class="tool-status" id="toolStatus"></div>
 
-  <!-- Upload -->
-  <div class="upload-zone" id="uploadZone">
-    <div class="upload-icon">📦</div>
-    <div class="upload-title">Drop SuperCity.apk here</div>
-    <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>
@@ -336,114 +315,36 @@ fetch('/tools').then(r => r.json()).then(tools => {
   }
 }).catch(() => {});
 
-// ── UPLOAD ─────────────────────────────────────────────────────────
-const uploadZone = document.getElementById('uploadZone');
-const apkInput   = document.getElementById('apkInput');
-
-uploadZone.addEventListener('click', () => apkInput.click());
-uploadZone.addEventListener('dragover', e => { e.preventDefault(); uploadZone.classList.add('drag-over'); });
-uploadZone.addEventListener('dragleave', () => uploadZone.classList.remove('drag-over'));
-uploadZone.addEventListener('drop', e => { e.preventDefault(); uploadZone.classList.remove('drag-over'); if (e.dataTransfer.files[0]) uploadAPK(e.dataTransfer.files[0]); });
-apkInput.addEventListener('change', () => { if (apkInput.files[0]) uploadAPK(apkInput.files[0]); });
-
-function uploadAPK(file) {
-  if (!file.name.endsWith('.apk')) { showToast('Only .apk files', true); return; }
-
+// ── AUTO-INIT ──────────────────────────────────────────────────────
+(function initFromServer() {
   const wrap  = document.getElementById('progressWrap');
   const bar   = document.getElementById('progressBar');
   const label = document.getElementById('progressLabel');
   wrap.style.display = 'block';
-  bar.style.width = '0%';
-  label.textContent = 'Uploading…';
-
-  const form = new FormData();
-  form.append('apk', file);
+  bar.style.width = '30%';
+  label.textContent = 'Loading APK…';
 
-  const xhr = new XMLHttpRequest();
-  xhr.open('POST', '/upload');
-
-  xhr.upload.onprogress = e => {
-    if (e.lengthComputable) {
-      const pct = Math.round(e.loaded / e.total * 80);
-      bar.style.width = pct + '%';
-      label.textContent = `Uploading… ${pct}%`;
-    }
-  };
-
-  xhr.onload = () => {
-    bar.style.width = '100%';
-    label.textContent = 'Parsing characters…';
-    if (xhr.status === 200) {
-      const data = JSON.parse(xhr.responseText);
+  fetch('/init')
+    .then(r => { if (!r.ok) return r.json().then(e => { throw new Error(e.error); }); return r.json(); })
+    .then(data => {
+      bar.style.width = '100%';
       sessionToken = data.token;
       originalRaw  = data.characters;
       parseCharacters(data.characters);
       wrap.style.display = 'none';
       document.getElementById('fileInfoBar').style.display = 'flex';
       document.getElementById('fileInfoBar').innerHTML = `
-        <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>`;
+        <div class="file-info">📦 <span class="file-info-name">super-city-2.010.64-mod-t-5play.apk</span>
+        &nbsp;·&nbsp; ${characters.length} characters loaded</div>`;
       document.getElementById('editorLayout').style.display = 'grid';
-      document.getElementById('urlUploadWrap').style.display = 'none';
       setStep(2);
       showToast(`✔ Loaded ${characters.length} characters`);
-    } else {
+    })
+    .catch(err => {
       wrap.style.display = 'none';
-      const err = JSON.parse(xhr.responseText);
-      showToast('Error: ' + err.error, true);
-    }
-  };
-
-  xhr.onerror = () => { wrap.style.display = 'none'; showToast('Upload failed', true); };
-  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);
-  });
-}
+      showToast('Failed to load APK: ' + err.message, true);
+    });
+})();
 
 // ── PARSE ──────────────────────────────────────────────────────────
 function parseCharacters(raw) {