Spaces:

Sinketji
/

Perplexity.ai-agent-pro

Paused

App Files Files Community

Sinketji commited on Dec 13, 2025

Commit

0964456

verified ·

1 Parent(s): 4cd620f

Update app/static/index.html

Browse files

Files changed (1) hide show

app/static/index.html +637 -682

app/static/index.html CHANGED Viewed

@@ -1,704 +1,659 @@
-<!doctype html>
 <html lang="en">
 <head>
-  <meta charset="utf-8"/>
-  <meta name="viewport" content="width=device-width,initial-scale=1"/>
-  <title>Perplexity HF Playground</title>
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/tokyo-night-dark.min.css">
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/12.0.2/marked.min.js"></script>
-  <style>
-    :root{
-      --bg0:#070A12;
-      --bg1:#0B1030;
-      --card: rgba(255,255,255,.06);
-      --stroke: rgba(255,255,255,.10);
-      --text:#EAF0FF;
-      --muted: rgba(234,240,255,.72);
-      --neon1:#7C3AED;
-      --neon2:#22D3EE;
-      --neon3:#A3FF12;
-      --shadow: 0 20px 70px rgba(0,0,0,.55);
-      --radius: 18px;
-    }
-    *{ box-sizing:border-box; }
-    html,body{ height:100%; }
-    body{
-      margin:0;
-      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
-      color: var(--text);
-      background:
-        radial-gradient(1200px 800px at 10% 10%, rgba(124,58,237,.25), transparent 60%),
-        radial-gradient(1200px 800px at 90% 20%, rgba(34,211,238,.20), transparent 60%),
-        radial-gradient(1200px 800px at 50% 90%, rgba(163,255,18,.14), transparent 55%),
-        linear-gradient(180deg, var(--bg0), var(--bg1));
-      overflow-x:hidden;
-    }
-    .wrap{ max-width: 1100px; margin: 0 auto; padding: 18px 14px 34px; }
-    .topbar{
-      display:flex; gap:12px; align-items:center; justify-content:space-between;
-      margin-bottom: 14px;
-    }
-    .brand{ display:flex; align-items:center; gap:10px; user-select:none; }
-    .logo{
-      width:38px;height:38px;border-radius:12px;
-      background: linear-gradient(135deg, rgba(124,58,237,.9), rgba(34,211,238,.9));
-      box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 18px 40px rgba(124,58,237,.20);
-    }
-    .brand h1{ font-size: 15px; letter-spacing: .3px; margin:0; line-height: 1.2; }
-    .brand p{ margin:0; color: var(--muted); font-size: 12px; }
-    .grid{ display:grid; grid-template-columns: 360px 1fr; gap: 14px; }
-    @media (max-width: 980px){ .grid{ grid-template-columns: 1fr; } }
-    .card{
-      background: var(--card);
-      border: 1px solid var(--stroke);
-      border-radius: var(--radius);
-      box-shadow: var(--shadow);
-      backdrop-filter: blur(10px);
-      overflow:hidden;
-    }
-    .card .hd{
-      padding: 12px 12px;
-      border-bottom: 1px solid rgba(255,255,255,.08);
-      display:flex; align-items:center; justify-content:space-between; gap:10px;
-    }
-    .hd .t{ font-size: 13px; color: rgba(234,240,255,.92); letter-spacing: .25px; }
-    .chip{
-      font-size: 11px; padding: 5px 10px; border-radius: 999px;
-      background: rgba(34,211,238,.10);
-      border: 1px solid rgba(34,211,238,.20);
-      color: rgba(234,240,255,.95);
-    }
-    .body{ padding: 12px; }
-    label{ font-size: 12px; color: var(--muted); display:block; margin-bottom: 6px; }
-    input, select, textarea{
-      width:100%;
-      color: var(--text);
-      background: rgba(0,0,0,.28);
-      border: 1px solid rgba(255,255,255,.12);
-      border-radius: 12px;
-      padding: 10px 10px;
-      outline:none;
-    }
-    textarea{ min-height: 88px; resize: vertical; }
-    input:focus, select:focus, textarea:focus{
-      border-color: rgba(34,211,238,.45);
-      box-shadow: 0 0 0 4px rgba(34,211,238,.10);
-    }
-    .row{ display:grid; grid-template-columns: 1fr 1fr; gap: 10px; }
-    @media (max-width: 980px){ .row{ grid-template-columns: 1fr; } }
-    .btn{
-      width:100%;
-      border: 1px solid rgba(255,255,255,.14);
-      background: linear-gradient(135deg, rgba(124,58,237,.85), rgba(34,211,238,.85));
-      padding: 11px 12px;
-      border-radius: 14px;
-      color: #061018;
-      font-weight: 800;
-      letter-spacing: .2px;
-      cursor:pointer;
-      box-shadow: 0 16px 40px rgba(34,211,238,.12);
-    }
-    .btn:disabled{ opacity:.55; cursor:not-allowed; }
-    .subbtn{
-      border: 1px solid rgba(255,255,255,.14);
-      background: rgba(255,255,255,.06);
-      padding: 10px 12px;
-      border-radius: 14px;
-      color: var(--text);
-      cursor:pointer;
-    }
-    .chat{
-      height: calc(100vh - 160px);
-      min-height: 520px;
-      display:flex;
-      flex-direction:column;
-    }
-    .msgs{
-      flex:1;
-      overflow:auto;
-      padding: 14px 12px;
-      display:flex;
-      flex-direction:column;
-      gap: 10px;
-    }
-    .bubble{
-      max-width: 92%;
-      padding: 12px 12px;
-      border-radius: 16px;
-      border: 1px solid rgba(255,255,255,.12);
-      background: rgba(0,0,0,.25);
-      white-space: normal;
-    }
-    .me{
-      align-self:flex-end;
-      background: rgba(124,58,237,.18);
-      border-color: rgba(124,58,237,.22);
-    }
-    .ai{
-      align-self:flex-start;
-      background: rgba(34,211,238,.10);
-      border-color: rgba(34,211,238,.18);
-    }
-    .composer{
-      padding: 12px;
-      border-top: 1px solid rgba(255,255,255,.08);
-      display:grid;
-      grid-template-columns: 1fr 120px;
-      gap: 10px;
-    }
-    @media (max-width: 520px){
-      .composer{ grid-template-columns: 1fr; }
-    }
-    .tabs{
-      display:flex;
-      gap:8px;
-      padding: 10px 12px 0;
-      flex-wrap: wrap;
-    }
-    .tab{
-      font-size: 12px;
-      padding: 8px 10px;
-      border-radius: 999px;
-      border: 1px solid rgba(255,255,255,.12);
-      background: rgba(255,255,255,.05);
-      color: rgba(234,240,255,.88);
-      cursor:pointer;
-    }
-    .tab.active{
-      background: rgba(163,255,18,.12);
-      border-color: rgba(163,255,18,.22);
-    }
-    /* Code canvas */
-    pre{
-      overflow:auto;
-      padding: 0;
-      margin: 10px 0;
-      border-radius: 14px;
-      border: 1px solid rgba(255,255,255,.10);
-      background: rgba(0,0,0,.42);
-    }
-    .codeWrap{
-      border-radius: 14px;
-      border: 1px solid rgba(255,255,255,.10);
-      background: rgba(0,0,0,.44);
-      overflow:hidden;
-      margin: 10px 0;
-    }
-    .codeTop{
-      display:flex;
-      align-items:center;
-      justify-content:space-between;
-      gap:10px;
-      padding: 8px 10px;
-      border-bottom: 1px solid rgba(255,255,255,.08);
-      background: linear-gradient(90deg, rgba(124,58,237,.15), rgba(34,211,238,.10));
-    }
-    .dots{ display:flex; gap:6px; align-items:center; }
-    .dot{ width:10px; height:10px; border-radius: 999px; opacity:.9; }
-    .dot.r{ background:#ff5f56; }
-    .dot.y{ background:#ffbd2e; }
-    .dot.g{ background:#27c93f; }
-    .copyBtn{
-      border: 1px solid rgba(255,255,255,.12);
-      background: rgba(255,255,255,.06);
-      color: rgba(234,240,255,.92);
-      padding: 6px 10px;
-      border-radius: 10px;
-      font-size: 12px;
-      cursor:pointer;
-    }
-    .small{ font-size: 11px; color: rgba(234,240,255,.68); }
-    .mono{ font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
-  </style>
 </head>
 <body>
-  <div class="wrap">
-    <div class="topbar">
-      <div class="brand">
-        <div class="logo"></div>
-        <div>
-          <h1>Perplexity HF Playground</h1>
-          <p>HF Docker proxy + code canvas + citations</p>
-        </div>
-      </div>
-      <span class="chip" id="statusChip">Idle</span>
-    </div>
-    <div class="grid">
-      <div class="card">
-        <div class="hd">
-          <div class="t">Settings</div>
-          <button class="subbtn" id="btnLoadModels">Reload models</button>
         </div>
-        <div class="body">
-          <label>Backend URL (optional)</label>
-          <input id="backendUrl" placeholder="Leave empty if UI served from same Space" />
-          <div style="height:10px"></div>
-          <label>Perplexity API Key (frontend)</label>
-          <input id="apiKey" type="password" placeholder="pplx-..." />
-          <div style="height:10px"></div>
-          <div class="row">
-            <div>
-              <label>Model</label>
-              <select id="model"></select>
             </div>
-            <div>
-              <label>Temperature</label>
-              <input id="temp" type="number" step="0.1" min="0" max="2" value="0.2"/>
-            </div>
-          </div>
-          <div style="height:10px"></div>
-          <label>System prompt</label>
-          <textarea id="systemPrompt">You are a precise, helpful assistant. Output clean answers and include code when needed.</textarea>
-          <div style="height:10px"></div>
-          <div class="row">
-            <div>
-              <label>Upload (PDF/TXT)</label>
-              <input id="file" type="file" accept=".pdf,.txt,text/plain,application/pdf"/>
-              <div class="small" style="margin-top:6px">PDF/TXT will be extracted on the server and appended to the prompt.</div>
-            </div>
-            <div>
-              <label>Streaming</label>
-              <select id="stream">
-                <option value="false" selected>Off (stable)</option>
-                <option value="true">On (SSE passthrough)</option>
-              </select>
-              <div class="small" style="margin-top:6px">Streaming is best-effort; if glitchy, keep it OFF.</div>
-            </div>
-          </div>
-          <div style="height:12px"></div>
-          <button class="btn" id="btnClear">Clear chat</button>
-        </div>
-      </div>
-      <div class="card chat">
-        <div class="hd">
-          <div class="t">Chat</div>
-          <div class="small" id="hint">Tip: ask for code; it will render in a colorful canvas.</div>
-        </div>
-        <div class="tabs">
-          <button class="tab active" data-tab="answer">Answer</button>
-          <button class="tab" data-tab="citations">Citations</button>
-          <button class="tab" data-tab="raw">Raw JSON</button>
-        </div>
-        <div class="msgs" id="msgs"></div>
-        <div class="composer">
-          <textarea id="prompt" placeholder="Ask anything… (Shift+Enter for newline)"></textarea>
-          <button class="btn" id="btnSend">Send</button>
-        </div>
-      </div>
-    </div>
-  </div>
-<script>
-  const els = {
-    backendUrl: document.getElementById('backendUrl'),
-    apiKey: document.getElementById('apiKey'),
-    model: document.getElementById('model'),
-    temp: document.getElementById('temp'),
-    systemPrompt: document.getElementById('systemPrompt'),
-    file: document.getElementById('file'),
-    stream: document.getElementById('stream'),
-    btnSend: document.getElementById('btnSend'),
-    btnClear: document.getElementById('btnClear'),
-    btnLoadModels: document.getElementById('btnLoadModels'),
-    msgs: document.getElementById('msgs'),
-    prompt: document.getElementById('prompt'),
-    statusChip: document.getElementById('statusChip'),
-    tabs: [...document.querySelectorAll('.tab')],
-  };
-  const state = {
-    tab: "answer",
-    lastRaw: null,
-    lastCitations: [],
-    // conversation history WITHOUT system; we will always prepend system at request time
-    messages: [], // {role, content} alternating user/assistant
-  };
-  function setStatus(text){ els.statusChip.textContent = text; }
-  function baseUrl(){
-    let u = els.backendUrl.value.trim();
-    if (!u) u = location.origin; // same Space by default
-    return u.replace(/\/+$/,'');
-  }
-  function esc(s){
-    return (s ?? "").replace(/[&<>"]/g, c => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;'}[c]));
-  }
-  function addBubble(role, html){
-    const div = document.createElement('div');
-    div.className = 'bubble ' + (role === 'user' ? 'me' : 'ai');
-    div.innerHTML = html;
-    els.msgs.appendChild(div);
-    els.msgs.scrollTop = els.msgs.scrollHeight;
-    return div;
-  }
-  function renderMarkdownInto(container, text){
-    const raw = text || "";
-    let think = "";
-    let answer = raw;
-    const start = raw.indexOf("<think>");
-    const end = raw.indexOf("</think>");
-    if (start !== -1 && end !== -1 && end > start){
-      think = raw.slice(start + 7, end).trim();
-      answer = (raw.slice(0, start) + raw.slice(end + 8)).trim();
-    }
-    container.innerHTML = marked.parse(answer);
-    if (think){
-      const details = document.createElement('details');
-      details.style.marginTop = "10px";
-      details.innerHTML = `
-        <summary class="small">Thinking (model internal)</summary>
-        <pre class="mono" style="padding:12px;margin:10px 0;background:rgba(0,0,0,.35);border-radius:14px;border:1px solid rgba(255,255,255,.10)">${esc(think)}</pre>
-      `;
-      container.appendChild(details);
-    }
-    decorateCodeBlocks(container);
-  }
-  function decorateCodeBlocks(root){
-    const pres = root.querySelectorAll('pre code');
-    pres.forEach(code => {
-      hljs.highlightElement(code);
-      const pre = code.parentElement;
-      // already wrapped?
-      if (pre.parentElement && pre.parentElement.classList && pre.parentElement.classList.contains('codeWrap')) return;
-      const wrap = document.createElement('div');
-      wrap.className = 'codeWrap';
-      const top = document.createElement('div');
-      top.className = 'codeTop';
-      top.innerHTML = `
-        <div class="dots">
-          <span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
-          <span class="small" style="margin-left:8px">code</span>
-        </div>
-      `;
-      const btn = document.createElement('button');
-      btn.className = 'copyBtn';
-      btn.textContent = 'Copy';
-      btn.onclick = async () => {
-        await navigator.clipboard.writeText(code.innerText);
-        const old = btn.textContent;
-        btn.textContent = 'Copied';
-        setTimeout(() => btn.textContent = old, 1200);
-      };
-      top.appendChild(btn);
-      pre.parentNode.insertBefore(wrap, pre);
-      wrap.appendChild(top);
-      wrap.appendChild(pre);
-    });
-  }
-  function syncTabs(){
-    els.tabs.forEach(t => t.classList.toggle('active', t.dataset.tab === state.tab));
-    renderPanels();
-  }
-  function renderPanels(){
-    [...els.msgs.querySelectorAll('[data-panel="1"]')].forEach(n => n.remove());
-    if (state.tab === "citations"){
-      const html = (state.lastCitations?.length)
-        ? `<div><div class="small">Citations</div><ol>${state.lastCitations.map(u => `<li><a href="${esc(u)}" target="_blank" rel="noreferrer" style="color:#A3FF12">${esc(u)}</a></li>`).join('')}</ol></div>`
-        : `<div class="small">No citations found in last response.</div>`;
-      const b = addBubble('assistant', html);
-      b.dataset.panel = "1";
-    }
-    if (state.tab === "raw"){
-      const raw = state.lastRaw ? JSON.stringify(state.lastRaw, null, 2) : "No raw response yet.";
-      const b = addBubble('assistant', `<div class="small">Raw JSON</div><pre class="mono" style="padding:12px">${esc(raw)}</pre>`);
-      b.dataset.panel = "1";
-    }
-  }
-  async function loadModels(){
-    const url = baseUrl() + "/api/models";
-    const res = await fetch(url);
-    const data = await res.json();
-    if (!data.ok) throw new Error("Failed to load models");
-    els.model.innerHTML = data.models.map(m => `<option value="${esc(m)}">${esc(m)}</option>`).join('');
-  }
-  // ---- Build messages for request (Correct logic maintained) ----
-  function buildMessagesForRequest(userText){
-    const system = els.systemPrompt.value;
-    // Prepend system prompt to the conversation history
-    return [{role:"system", content: system}, ...state.messages, {role:"user", content: userText}];
-  }
-  async function sendNonStreaming(userText){
-    const url = baseUrl();
-    const key = els.apiKey.value.trim();
-    const model = els.model.value;
-    const temperature = parseFloat(els.temp.value || "0.2");
-    const file = els.file.files && els.file.files[0] ? els.file.files[0] : null;
-    if (file){
-      // For file upload, use the specific /api/chat-upload endpoint (note: may not support multi-turn history depending on backend implementation)
-      const form = new FormData();
-      form.append("api_key", key);
-      form.append("model", model);
-      form.append("prompt", userText);
-      form.append("system_prompt", els.systemPrompt.value);
-      form.append("stream", "false");
-      form.append("file", file);
-      const res = await fetch(url + "/api/chat-upload", { method:"POST", body: form });
-      const data = await res.json();
-      if (!data.ok) throw new Error(data.detail || "Request failed");
-      return data;
-    } else {
-      // Standard chat endpoint
-      const payload = {
-        api_key: key,
-        model,
-        messages: buildMessagesForRequest(userText),
-        temperature,
-        stream: false
-      };
-      const res = await fetch(url + "/api/chat", {
-        method:"POST",
-        headers:{ "Content-Type":"application/json" },
-        body: JSON.stringify(payload)
-      });
-      const data = await res.json();
-      if (!data.ok) throw new Error(data.detail || "Request failed");
-      return data;
-    }
-  }
-  async function sendStreaming(userText){
-    const url = baseUrl();
-    const key = els.apiKey.value.trim();
-    const model = els.model.value;
-    const temperature = parseFloat(els.temp.value || "0.2");
-    const payload = {
-        api_key: key,
-        model,
-        messages: buildMessagesForRequest(userText),
-        temperature,
-        stream: true
-    };
-    const res = await fetch(url + "/api/chat", {
-      method:"POST",
-      headers:{ "Content-Type":"application/json" },
-      body: JSON.stringify(payload)
-    });
-    if (!res.ok) throw new Error("Streaming request failed");
-    // Streaming bubble (single bubble only; onSend will NOT add another assistant bubble)
-    const bubble = addBubble('assistant',
-      `<div class="small" id="streamLabel">Streaming…</div><div class="streamBox"></div>`
-    );
-    const streamLabel = bubble.querySelector("#streamLabel");
-    const streamBox = bubble.querySelector(".streamBox");
-    const reader = res.body.getReader();
-    const decoder = new TextDecoder();
-    let buf = "";
-    let combined = "";
-    while(true){
-      const {value, done} = await reader.read();
-      if (done) break;
-      buf += decoder.decode(value, {stream:true});
-      const lines = buf.split("\n");
-      buf = lines.pop() || "";
-      for (const line of lines){
-        const trimmed = line.trim();
-        if (!trimmed) continue;
-        let jsonText = trimmed.startsWith("data:") ? trimmed.slice(5).trim() : trimmed;
-        if (jsonText === "[DONE]") continue;
-        try{
-          const obj = JSON.parse(jsonText);
-          const delta = obj?.choices?.[0]?.delta?.content;
-          const msg = obj?.choices?.[0]?.message?.content;
-          if (delta) combined += delta;
-          else if (msg) combined = msg; // Final message in some non-chunked scenarios
-          // Update UI
-          streamBox.innerHTML = marked.parse(combined);
-          decorateCodeBlocks(streamBox);
-          els.msgs.scrollTop = els.msgs.scrollHeight;
-        }catch(e){
-          // ignore non-JSON lines
         }
-      }
-    }
-    streamLabel.textContent = "Answer";
-    // Return the final combined content for history update
-    return { ok:true, content: combined, citations: [], raw: { streaming: true } };
-  }
-  // --- UPDATED onSend FUNCTION with fixes ---
-  async function onSend(){
-    const userText = els.prompt.value.trim();
-    if (!userText) return;
-    const key = els.apiKey.value.trim();
-    if (!key){
-      alert("Enter API key first.");
-      return;
-    }
-    els.btnSend.disabled = true;
-    setStatus("Working");
-    // 1. Show user bubble immediately (but DON'T add to history yet)
-    addBubble('user', `<div>${esc(userText)}</div>`);
-    els.prompt.value = ""; // Clear prompt immediately
-    // Check if a file was selected before the call
-    const fileSelected = els.file.files.length > 0;
-    try{
-      const useStream = (els.stream.value === "true");
-      // 2. Perform API request
-      const data = useStream ? await sendStreaming(userText) : await sendNonStreaming(userText);
-      // 3. Save panels data
-      state.lastRaw = data.raw || data;
-      state.lastCitations = data.citations || [];
-      // 4. Render assistant only in non-stream mode (stream already rendered live)
-      if (!useStream){
-        const container = document.createElement('div');
-        renderMarkdownInto(container, data.content || "");
-        addBubble('assistant', container.innerHTML);
-      }
-      // 5. Update history ONLY after successful response (FIX)
-      state.messages.push({ role:"user", content: userText });
-      state.messages.push({ role:"assistant", content: data.content || "" });
-      // 6. Clear File Input after successful use (Improvement)
-      if (fileSelected) {
-          els.file.value = '';
-      }
-      syncTabs();
-    }catch(err){
-      // 7. Handle Error and show error bubble
-      addBubble('assistant', `<div class="small">Error</div><pre class="mono" style="padding:12px">${esc(err?.message || String(err))}</pre>`);
-      // 8. Error hone par user prompt ko wapas input field mein daalna (UX Improvement)
-      els.prompt.value = userText;
-    }finally{
-      els.btnSend.disabled = false;
-      setStatus("Idle");
-    }
-  }
-  els.btnSend.addEventListener('click', onSend);
-  els.prompt.addEventListener('keydown', (e)=>{
-    if (e.key === "Enter" && !e.shiftKey){
-      e.preventDefault();
-      onSend();
-    }
-  });
-  els.btnClear.addEventListener('click', ()=>{
-    state.messages = [];
-    state.lastRaw = null;
-    state.lastCitations = [];
-    els.msgs.innerHTML = "";
-    els.file.value = ''; // Clear file input as well
-    setStatus("Idle");
-  });
-  els.tabs.forEach(btn => btn.addEventListener('click', ()=>{
-    state.tab = btn.dataset.tab;
-    syncTabs();
-  }));
-  els.btnLoadModels.addEventListener('click', async ()=>{
-    try{
-      setStatus("Loading models");
-      await loadModels();
-      setStatus("Idle");
-    }catch(e){
-      setStatus("Model load failed");
-      alert("Failed to load models. Check backend URL (or keep it empty if same Space).");
-    }
-  });
-  (async function init(){
-    // Load saved settings from localStorage
-    els.backendUrl.value = localStorage.getItem("pplx_backend") || "";
-    els.apiKey.value = localStorage.getItem("pplx_key") || "";
-    els.systemPrompt.value = localStorage.getItem("pplx_system") || els.systemPrompt.value;
-    // Save settings when they change
-    els.backendUrl.addEventListener('change', ()=> localStorage.setItem("pplx_backend", els.backendUrl.value.trim()));
-    els.apiKey.addEventListener('change', ()=> localStorage.setItem("pplx_key", els.apiKey.value.trim()));
-    els.systemPrompt.addEventListener('change', ()=> localStorage.setItem("pplx_system", els.systemPrompt.value));
-    // Initial model load
-    try{ await loadModels(); } catch(_){ /* ok */ }
-  })();
-</script>
 </body>
-</html>

+<!DOCTYPE html>
 <html lang="en">
 <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+    <title>Blox City RP - Ultimate Edition</title>
+    <style>
+        body { margin: 0; overflow: hidden; background: #87CEEB; font-family: 'Verdana', sans-serif; user-select: none; -webkit-user-select: none; }
+        #game-ui { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; }
+        /* HUD */
+        #hud-top { position: absolute; top: 10px; left: 10px; right: 10px; display: flex; justify-content: space-between; pointer-events: auto; }
+        .stat-box { background: rgba(0, 0, 0, 0.7); color: white; padding: 10px 15px; border-radius: 12px; font-weight: bold; border: 2px solid #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.5); display: flex; align-items: center; gap: 8px; font-size: 14px; }
+        /* ALERTS */
+        #message-area { position: absolute; top: 15%; width: 100%; text-align: center; color: #fff; font-size: 24px; text-shadow: 2px 2px 0 #000; font-weight: 900; pointer-events: none; opacity: 0; transition: opacity 0.5s; z-index: 20; }
+        /* CONTROLS */
+        .controls-area { position: absolute; bottom: 20px; pointer-events: auto; display: flex; gap: 15px; }
+        #controls-left { left: 20px; flex-direction: column; align-items: center; }
+        #controls-right { right: 20px; align-items: flex-end; flex-direction: column-reverse; }
+        .btn { background: rgba(255, 255, 255, 0.25); backdrop-filter: blur(5px); border: 2px solid rgba(255,255,255,0.6); border-radius: 50%; color: white; display: flex; justify-content: center; align-items: center; font-size: 20px; touch-action: manipulation; box-shadow: 0 4px 10px rgba(0,0,0,0.4); transition: transform 0.1s; cursor: pointer; }
+        .btn:active { transform: scale(0.9); background: rgba(255, 255, 255, 0.5); }
+        .dpad-row { display: flex; gap: 8px; }
+        .dpad-btn { width: 55px; height: 55px; }
+        .action-btn { width: 70px; height: 70px; margin-bottom: 15px; background: rgba(255, 193, 7, 0.8); border-color: #FFD54F; font-weight: bold; font-size: 12px; flex-direction: column; text-align: center; line-height: 1.1; color: #000; }
+        .jump-btn { width: 75px; height: 75px; background: rgba(33, 150, 243, 0.6); border-color: #64B5F6; }
+        .summon-btn { width: 50px; height: 50px; background: rgba(156, 39, 176, 0.6); border-color: #BA68C8; font-size: 20px; margin-bottom: 10px; }
+        /* COOKING UI */
+        #cooking-container { display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 200px; background: #222; padding: 15px; border-radius: 10px; border: 3px solid #fff; pointer-events: none; text-align: center; color: white; z-index: 50; }
+        #cooking-bar-bg { width: 100%; height: 15px; background: #444; margin-top: 5px; border-radius: 10px; overflow: hidden; }
+        #cooking-bar-fill { width: 0%; height: 100%; background: #00E676; }
+        /* VEHICLE MENU */
+        #vehicle-menu { display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90%; max-width: 350px; max-height: 60vh; background: #fff; border-radius: 15px; box-shadow: 0 20px 50px rgba(0,0,0,0.8); overflow-y: auto; pointer-events: auto; padding: 15px; z-index: 100; font-family: sans-serif; }
+        #vehicle-menu h3 { margin: 0 0 10px 0; text-align: center; color: #333; border-bottom: 2px solid #eee; padding-bottom: 5px; }
+        .v-item { display: flex; align-items: center; justify-content: space-between; padding: 10px; border-bottom: 1px solid #f0f0f0; }
+        .v-btn { background: #2196F3; color: white; border: none; padding: 6px 12px; border-radius: 15px; font-weight: bold; cursor: pointer; font-size: 12px; }
+        #close-menu { display: block; width: 100%; padding: 10px; margin-top: 15px; background: #f44336; color: white; border: none; border-radius: 8px; font-weight: bold; }
+    </style>
 </head>
 <body>
+    <!-- UI LAYER -->
+    <div id="game-ui">
+        <div id="hud-top">
+            <div class="stat-box">💵 $<span id="money-display">500</span></div>
+            <div class="stat-box" style="flex:1; justify-content: center; margin: 0 10px;">
+                <span id="job-display">🏠 Explore City</span>
+            </div>
         </div>
+        <div id="message-area">Welcome to Blox City!</div>
+        <div id="cooking-container">
+            COOKING...
+            <div id="cooking-bar-bg"><div id="cooking-bar-fill"></div></div>
+        </div>
+        <div class="controls-area" id="controls-left">
+            <div class="dpad-row"><div class="btn dpad-btn" id="btn-up">⬆️</div></div>
+            <div class="dpad-row">
+                <div class="btn dpad-btn" id="btn-left">⬅️</div>
+                <div class="btn dpad-btn" id="btn-down">⬇️</div>
+                <div class="btn dpad-btn" id="btn-right">➡️</div>
             </div>
+        </div>
+        <div class="controls-area" id="controls-right">
+            <div class="btn summon-btn" id="btn-summon">🚗</div>
+            <div class="btn action-btn" id="context-btn">Action</div>
+            <div class="btn jump-btn" id="btn-jump">JUMP</div>
+        </div>
+    </div>
+    <!-- MENUS -->
+    <div id="vehicle-menu">
+        <h3>Garage (All Free!)</h3>
+        <div id="vehicle-list"></div>
+        <button id="close-menu">Close</button>
+    </div>
+    <!-- 3D ENGINE -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
+    <script>
+        /** --- CONFIG --- */
+        const STATE = {
+            money: 500,
+            isCooking: false,
+            holdingFood: false,
+            currentOrder: null,
+            inVehicle: null,
+            canJump: true,
+            velocity: new THREE.Vector3(),
+            keys: { w: false, a: false, s: false, d: false },
+            ownedVehicles: ['Scooter', 'Sedan', 'SportBike', 'SuperCar', 'Truck'], // All unlocked
+        };
+        const VEHICLES_DB = [
+            { name: 'Scooter', speed: 0.8, color: 0xFF5722, type: 'bike' },
+            { name: 'SportBike', speed: 1.5, color: 0x00E676, type: 'bike' },
+            { name: 'Sedan', speed: 1.2, color: 0x2196F3, type: 'car' },
+            { name: 'Truck', speed: 1.0, color: 0x5D4037, type: 'car' },
+            { name: 'SuperCar', speed: 2.2, color: 0xD50000, type: 'car' },
+            { name: 'Police', speed: 1.8, color: 0x111111, type: 'car' }
+        ];
+        /** --- SCENE SETUP --- */
+        const scene = new THREE.Scene();
+        scene.background = new THREE.Color(0x87CEEB);
+        scene.fog = new THREE.Fog(0x87CEEB, 20, 120);
+        const camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 1000);
+        const renderer = new THREE.WebGLRenderer({ antialias: true });
+        renderer.setSize(window.innerWidth, window.innerHeight);
+        renderer.shadowMap.enabled = true;
+        renderer.shadowMap.type = THREE.PCFSoftShadowMap;
+        document.body.appendChild(renderer.domElement);
+        // Lights
+        const ambLight = new THREE.AmbientLight(0xffffff, 0.6);
+        scene.add(ambLight);
+        const dirLight = new THREE.DirectionalLight(0xffffff, 0.7);
+        dirLight.position.set(50, 100, 50);
+        dirLight.castShadow = true;
+        dirLight.shadow.mapSize.width = 2048;
+        dirLight.shadow.mapSize.height = 2048;
+        dirLight.shadow.camera.left = -60; dirLight.shadow.camera.right = 60;
+        dirLight.shadow.camera.top = 60; dirLight.shadow.camera.bottom = -60;
+        scene.add(dirLight);
+        /** --- TEXTURE GENERATORS --- */
+        function createTexture(color, type='plain') {
+            const cvs = document.createElement('canvas');
+            cvs.width = 64; cvs.height = 64;
+            const ctx = cvs.getContext('2d');
+            ctx.fillStyle = color;
+            ctx.fillRect(0,0,64,64);
+            if(type === 'brick') {
+                ctx.fillStyle = 'rgba(0,0,0,0.1)';
+                ctx.fillRect(0, 0, 64, 2); ctx.fillRect(0, 32, 64, 2);
+                ctx.fillRect(32, 0, 2, 32); ctx.fillRect(0, 32, 2, 32);
+            }
+            if(type === 'checkered') {
+                ctx.fillStyle = '#ffffff';
+                ctx.fillRect(0,0,32,32); ctx.fillRect(32,32,32,32);
+                ctx.fillStyle = '#000000';
+                ctx.fillRect(32,0,32,32); ctx.fillRect(0,32,32,32);
+            }
+            if(type === 'face') {
+                ctx.fillStyle = '#FFCC80'; ctx.fillRect(0,0,64,64);
+                ctx.fillStyle = 'black';
+                ctx.fillRect(15, 20, 8, 8); // Eye L
+                ctx.fillRect(41, 20, 8, 8); // Eye R
+                ctx.fillRect(20, 45, 24, 4); // Mouth
+            }
+            const tex = new THREE.CanvasTexture(cvs);
+            tex.magFilter = THREE.NearestFilter;
+            return tex;
+        }
+        const MATS = {
+            grass: new THREE.MeshLambertMaterial({ color: 0x4CAF50 }),
+            road: new THREE.MeshLambertMaterial({ color: 0x333333 }),
+            sidewalk: new THREE.MeshLambertMaterial({ color: 0x9E9E9E }),
+            skin: new THREE.MeshLambertMaterial({ color: 0xFFCC80 }),
+            face: new THREE.MeshLambertMaterial({ map: createTexture(null, 'face') }),
+            brickRed: new THREE.MeshLambertMaterial({ map: createTexture('#E57373', 'brick') }),
+            brickBlue: new THREE.MeshLambertMaterial({ map: createTexture('#64B5F6', 'brick') }),
+            floorCheck: new THREE.MeshLambertMaterial({ map: createTexture(null, 'checkered') }),
+            glass: new THREE.MeshPhongMaterial({ color: 0x81D4FA, transparent: true, opacity: 0.6, shininess: 100 }),
+            wood: new THREE.MeshLambertMaterial({ color: 0x8D6E63 }),
+            metal: new THREE.MeshStandardMaterial({ color: 0xAAAAAA, roughness: 0.2 })
+        };
+        MATS.floorCheck.map.repeat.set(4,4);
+        MATS.floorCheck.map.wrapS = THREE.RepeatWrapping;
+        MATS.floorCheck.map.wrapT = THREE.RepeatWrapping;
+        /** --- WORLD BUILDER --- */
+        // Ground
+        const ground = new THREE.Mesh(new THREE.PlaneGeometry(400, 400), MATS.grass);
+        ground.rotation.x = -Math.PI/2;
+        ground.receiveShadow = true;
+        scene.add(ground);
+        // Road Helper
+        function addRoad(x, z, w, l, rotated=false) {
+            const r = new THREE.Mesh(new THREE.PlaneGeometry(w, l), MATS.road);
+            r.rotation.x = -Math.PI/2;
+            if(rotated) r.rotation.z = Math.PI/2;
+            r.position.set(x, 0.02, z);
+            r.receiveShadow = true;
+            scene.add(r);
+            // Sidewalks
+            const sw1 = new THREE.Mesh(new THREE.PlaneGeometry(2, l), MATS.sidewalk);
+            sw1.rotation.x = -Math.PI/2;
+            if(rotated) sw1.rotation.z = Math.PI/2;
+            // Calculations simplified for demo
+            if(rotated) sw1.position.set(x, 0.03, z - w/2 - 1);
+            else sw1.position.set(x - w/2 - 1, 0.03, z);
+            scene.add(sw1);
+            const sw2 = sw1.clone();
+            if(rotated) sw2.position.set(x, 0.03, z + w/2 + 1);
+            else sw2.position.set(x + w/2 + 1, 0.03, z);
+            scene.add(sw2);
+        }
+        // Layout: Main Road (Z axis), Cross Road (X axis)
+        addRoad(0, 0, 14, 400);
+        addRoad(0, 0, 400, 14, true);
+        // --- PARK (Green Zone) ---
+        const parkGroup = new THREE.Group();
+        parkGroup.position.set(40, 0, 40);
+        const parkBase = new THREE.Mesh(new THREE.BoxGeometry(50, 0.5, 50), MATS.grass);
+        parkBase.position.y = 0.25;
+        parkGroup.add(parkBase);
+        // Trees
+        for(let i=0; i<8; i++) {
+            const tree = new THREE.Group();
+            const trunk = new THREE.Mesh(new THREE.CylinderGeometry(0.5, 0.7, 3), MATS.wood);
+            trunk.position.y = 1.5;
+            const leaves = new THREE.Mesh(new THREE.ConeGeometry(3, 6, 8), new THREE.MeshLambertMaterial({color:0x2E7D32}));
+            leaves.position.y = 5;
+            tree.add(trunk, leaves);
+            tree.position.set((Math.random()-0.5)*40, 0, (Math.random()-0.5)*40);
+            parkGroup.add(tree);
+        }
+        // Bench
+        const bench = new THREE.Group();
+        const seat = new THREE.Mesh(new THREE.BoxGeometry(4, 0.2, 1), MATS.wood);
+        seat.position.y = 1;
+        const leg1 = new THREE.Mesh(new THREE.BoxGeometry(0.2, 1, 1), MATS.metal);
+        leg1.position.set(-1.8, 0.5, 0);
+        const leg2 = leg1.clone(); leg2.position.set(1.8, 0.5, 0);
+        bench.add(seat, leg1, leg2);
+        bench.position.set(0, 0, 0);
+        parkGroup.add(bench);
+        scene.add(parkGroup);
+        // --- RESTAURANT (Detailed Interior) ---
+        const restGroup = new THREE.Group();
+        restGroup.position.set(-40, 0, 40);
+        // Floor
+        const floor = new THREE.Mesh(new THREE.BoxGeometry(30, 0.2, 20), MATS.floorCheck);
+        floor.position.y = 0.1;
+        restGroup.add(floor);
+        // Walls (leaving gaps)
+        const wallMat = new THREE.MeshLambertMaterial({color: 0xFFEB3B});
+        const wallBack = new THREE.Mesh(new THREE.BoxGeometry(30, 8, 1), wallMat);
+        wallBack.position.set(0, 4, -10);
+        const wallLeft = new THREE.Mesh(new THREE.BoxGeometry(1, 8, 20), wallMat);
+        wallLeft.position.set(-15, 4, 0);
+        const wallRight = new THREE.Mesh(new THREE.BoxGeometry(1, 8, 20), wallMat);
+        wallRight.position.set(15, 4, 0);
+        const roof = new THREE.Mesh(new THREE.BoxGeometry(32, 1, 22), new THREE.MeshLambertMaterial({color: 0xFBC02D}));
+        roof.position.y = 8.5;
+        restGroup.add(wallBack, wallLeft, wallRight, roof);
+        // Kitchen
+        const counter = new THREE.Mesh(new THREE.BoxGeometry(15, 2.5, 2), new THREE.MeshLambertMaterial({color:0xffffff}));
+        counter.position.set(0, 1.25, -4);
+        restGroup.add(counter);
+        // Machines
+        const grill = new THREE.Mesh(new THREE.BoxGeometry(3, 2, 2), new THREE.MeshLambertMaterial({color:0x333333}));
+        grill.position.set(-3, 1.5, -9);
+        restGroup.add(grill); // Grill at back wall
+        const fryer = new THREE.Mesh(new THREE.BoxGeometry(2, 2, 2), new THREE.MeshLambertMaterial({color:0xCCCCCC}));
+        fryer.position.set(2, 1.5, -9);
+        restGroup.add(fryer);
+        // Tables & Chairs
+        function addTable(x, z) {
+            const t = new THREE.Mesh(new THREE.CylinderGeometry(2, 2, 1.5), new THREE.MeshLambertMaterial({color:0xD32F2F}));
+            t.position.set(x, 0.75, z);
+            restGroup.add(t);
+        }
+        addTable(-8, 5); addTable(8, 5); addTable(-8, 0); addTable(8, 0);
+        // Sign
+        const sign = new THREE.Mesh(new THREE.BoxGeometry(20, 3, 1), new THREE.MeshBasicMaterial({color:0xD50000}));
+        sign.position.set(0, 10, 10);
+        restGroup.add(sign);
+        // NPC
+        function createNPC(x, z, color) {
+            const npc = new THREE.Group();
+            const nBody = new THREE.Mesh(new THREE.BoxGeometry(0.8, 1, 0.4), new THREE.MeshLambertMaterial({color: color}));
+            nBody.position.y = 1.5;
+            const nHead = new THREE.Mesh(new THREE.BoxGeometry(0.5, 0.5, 0.5), MATS.skin);
+            nHead.position.y = 2.3;
+            npc.add(nBody, nHead);
+            npc.position.set(x, 0, z);
+            return npc;
+        }
+        restGroup.add(createNPC(0, -6, 0x4CAF50)); // Cashier/Customer
+        restGroup.add(createNPC(10, 5, 0x9C27B0)); // Customer eating
+        restGroup.userData = { type: 'restaurant' };
+        scene.add(restGroup);
+        // --- HOUSES ---
+        const buildings = [];
+        function buildDetailedHouse(x, z, color) {
+            const hGroup = new THREE.Group();
+            hGroup.position.set(x, 0, z);
+            // Main structure
+            const body = new THREE.Mesh(new THREE.BoxGeometry(10, 8, 10), new THREE.MeshLambertMaterial({map: MATS.brickRed.map, color: color}));
+            body.position.y = 4;
+            hGroup.add(body);
+            // Roof
+            const roof = new THREE.Mesh(new THREE.ConeGeometry(9, 4, 4), MATS.wood);
+            roof.position.y = 10;
+            roof.rotation.y = Math.PI/4;
+            hGroup.add(roof);
+            // Door
+            const door = new THREE.Mesh(new THREE.BoxGeometry(2.5, 4.5, 0.5), MATS.wood);
+            door.position.set(0, 2.25, 5.1);
+            hGroup.add(door);
+            // Door Knob
+            const knob = new THREE.Mesh(new THREE.SphereGeometry(0.15), new THREE.MeshBasicMaterial({color:0xFFD700}));
+            knob.position.set(0.8, 2.25, 5.4);
+            hGroup.add(knob);
+            // Windows
+            const winGeo = new THREE.BoxGeometry(2.5, 2.5, 0.5);
+            const w1 = new THREE.Mesh(winGeo, MATS.glass); w1.position.set(-2.5, 5, 5.1);
+            const w2 = new THREE.Mesh(winGeo, MATS.glass); w2.position.set(2.5, 5, 5.1);
+            hGroup.add(w1, w2);
+            // Fence
+            const fenceGeo = new THREE.BoxGeometry(0.2, 1.5, 0.2);
+            for(let i=-6; i<=6; i+=2) {
+                const p = new THREE.Mesh(fenceGeo, new THREE.MeshLambertMaterial({color:0xffffff}));
+                p.position.set(i, 0.75, 7);
+                hGroup.add(p);
+            }
+            hGroup.userData = { type: 'house', deliveryPoint: new THREE.Vector3(x, 1, z+8) };
+            buildings.push(hGroup);
+            scene.add(hGroup);
+        }
+        // Generate Neighborhood
+        for(let i=0; i<4; i++) {
+            buildDetailedHouse(-40, -40 - (i*25), 0xFFCDD2);
+            buildDetailedHouse(40, -40 - (i*25), 0xBBDEFB);
+            buildDetailedHouse(-40 - (i*25), 80, 0xFFF9C4);
+        }
+        /** --- PLAYER & VEHICLES --- */
+        const player = new THREE.Group();
+        // Head
+        const pHead = new THREE.Mesh(new THREE.BoxGeometry(0.6, 0.6, 0.6), MATS.face);
+        pHead.position.y = 2.7;
+        // Body
+        const pTorso = new THREE.Mesh(new THREE.BoxGeometry(0.9, 1.1, 0.45), new THREE.MeshLambertMaterial({color:0x1976D2}));
+        pTorso.position.y = 1.85;
+        // Arms
+        const pArmL = new THREE.Mesh(new THREE.BoxGeometry(0.35, 1.1, 0.35), MATS.skin); pArmL.position.set(-0.7, 1.85, 0);
+        const pArmR = new THREE.Mesh(new THREE.BoxGeometry(0.35, 1.1, 0.35), MATS.skin); pArmR.position.set(0.7, 1.85, 0);
+        // Legs
+        const pLegL = new THREE.Mesh(new THREE.BoxGeometry(0.4, 1.2, 0.4), new THREE.MeshLambertMaterial({color:0x212121})); pLegL.position.set(-0.25, 0.6, 0);
+        const pLegR = new THREE.Mesh(new THREE.BoxGeometry(0.4, 1.2, 0.4), new THREE.MeshLambertMaterial({color:0x212121})); pLegR.position.set(0.25, 0.6, 0);
+        // Food Held
+        const foodItem = new THREE.Group();
+        const burger = new THREE.Mesh(new THREE.CylinderGeometry(0.25, 0.25, 0.15), new THREE.MeshLambertMaterial({color:0x795548}));
+        const bunTop = new THREE.Mesh(new THREE.SphereGeometry(0.26, 8, 8, 0, 6.3, 0, 1.5), new THREE.MeshLambertMaterial({color:0xFFA000}));
+        bunTop.position.y = 0.1;
+        foodItem.add(burger, bunTop);
+        foodItem.position.set(0, -0.5, 0.4);
+        foodItem.rotation.x = Math.PI/4;
+        foodItem.visible = false;
+        pArmR.add(foodItem);
+        player.add(pHead, pTorso, pArmL, pArmR, pLegL, pLegR);
+        player.position.set(0, 0, 20);
+        player.castShadow = true;
+        scene.add(player);
+        const worldVehicles = [];
+        function spawnVehicle(data, x, z) {
+            const vGroup = new THREE.Group();
+            vGroup.position.set(x, 0.5, z);
+            const matBody = new THREE.MeshPhongMaterial({color: data.color, shininess: 80});
+            const matDark = new THREE.MeshLambertMaterial({color: 0x222222});
+            if(data.type === 'car') {
+                // Detailed Car Body
+                const chassis = new THREE.Mesh(new THREE.BoxGeometry(2, 0.8, 4), matBody);
+                chassis.position.y = 0.6;
+                vGroup.add(chassis);
+                const cabin = new THREE.Mesh(new THREE.BoxGeometry(1.8, 0.7, 2.2), matBody);
+                cabin.position.set(0, 1.3, -0.3);
+                vGroup.add(cabin);
+                // Windows
+                const windshield = new THREE.Mesh(new THREE.PlaneGeometry(1.6, 0.6), MATS.glass);
+                windshield.position.set(0, 1.35, 0.81); windshield.rotation.x = -0.3;
+                vGroup.add(windshield);
+                // Headlights
+                const hl1 = new THREE.Mesh(new THREE.CircleGeometry(0.2, 16), new THREE.MeshBasicMaterial({color:0xFFFACD}));
+                hl1.position.set(-0.6, 0.6, 2.01); vGroup.add(hl1);
+                const hl2 = hl1.clone(); hl2.position.set(0.6, 0.6, 2.01); vGroup.add(hl2);
+                // Wheels (Detailed)
+                const wGeo = new THREE.CylinderGeometry(0.4, 0.4, 0.3, 16); wGeo.rotateZ(Math.PI/2);
+                const pos = [[1, 0.4, 1.2], [-1, 0.4, 1.2], [1, 0.4, -1.2], [-1, 0.4, -1.2]];
+                pos.forEach(p => {
+                    const w = new THREE.Mesh(wGeo, matDark); w.position.set(...p); vGroup.add(w);
+                    // Rims
+                    const rim = new THREE.Mesh(new THREE.CylinderGeometry(0.2, 0.2, 0.31, 8), new THREE.MeshStandardMaterial({color:0xCCCCCC}));
+                    rim.rotation.z = Math.PI/2; w.add(rim);
+                });
+            } else {
+                // Bike
+                const body = new THREE.Mesh(new THREE.BoxGeometry(0.2, 0.5, 1.5), matBody);
+                body.position.y = 0.6; vGroup.add(body);
+                // Handle
+                const handle = new THREE.Mesh(new THREE.BoxGeometry(1, 0.1, 0.1), matDark);
+                handle.position.set(0, 1.2, 0.5); vGroup.add(handle);
+                // Wheels
+                const wGeo = new THREE.CylinderGeometry(0.4, 0.4, 0.1, 16); wGeo.rotateZ(Math.PI/2);
+                const w1 = new THREE.Mesh(wGeo, matDark); w1.position.set(0, 0.4, 0.8); vGroup.add(w1);
+                const w2 = new THREE.Mesh(wGeo, matDark); w2.position.set(0, 0.4, -0.8); vGroup.add(w2);
+            }
+            vGroup.userData = { isVehicle: true, info: data };
+            worldVehicles.push(vGroup);
+            scene.add(vGroup);
+            return vGroup;
+        }
+        // Spawn Initial Vehicle
+        spawnVehicle(VEHICLES_DB[2], 5, 15);
+        /** --- INPUTS & LOGIC --- */
+        const keys = STATE.keys;
+        document.addEventListener('keydown', e => {
+            const k = e.key.toLowerCase();
+            if(keys[k] !== undefined) keys[k] = true;
+            if(e.code === 'Space') jump();
+            if(k === 'e') action();
+        });
+        document.addEventListener('keyup', e => {
+            const k = e.key.toLowerCase();
+            if(keys[k] !== undefined) keys[k] = false;
+        });
+        // Touch
+        const bindBtn = (id, key) => {
+            const el = document.getElementById(id);
+            el.addEventListener('touchstart', (e)=>{e.preventDefault(); keys[key]=true});
+            el.addEventListener('touchend', (e)=>{e.preventDefault(); keys[key]=false});
+        };
+        bindBtn('btn-up','w'); bindBtn('btn-down','s'); bindBtn('btn-left','a'); bindBtn('btn-right','d');
+        document.getElementById('btn-jump').addEventListener('touchstart', (e)=>{e.preventDefault(); jump()});
+        document.getElementById('context-btn').addEventListener('touchstart', (e)=>{e.preventDefault(); action()});
+        document.getElementById('context-btn').addEventListener('click', action);
+        function jump() {
+            if(!STATE.inVehicle && STATE.canJump) {
+                STATE.velocity.y = 0.5; STATE.canJump = false;
+            }
+        }
+        function showMsg(txt) {
+            const el = document.getElementById('message-area');
+            el.innerText = txt; el.style.opacity=1;
+            setTimeout(()=>el.style.opacity=0, 2500);
+        }
+        function action() {
+            // Exit Vehicle
+            if(STATE.inVehicle) {
+                const v = STATE.inVehicle;
+                player.position.copy(v.position).add(new THREE.Vector3(3, 0, 0));
+                player.visible = true;
+                STATE.inVehicle = null;
+                return;
+            }
+            // Enter Vehicle
+            if(!STATE.inVehicle) {
+                let closest = null, minD = 5;
+                worldVehicles.forEach(v => {
+                    if(player.position.distanceTo(v.position) < minD) { minD = player.position.distanceTo(v.position); closest = v; }
+                });
+                if(closest) {
+                    STATE.inVehicle = closest;
+                    player.visible = false;
+                    showMsg("Driving " + closest.userData.info.name);
+                    return;
+                }
+            }
+            // Cooking
+            if(player.position.distanceTo(restGroup.position) < 20 && !STATE.holdingFood && !STATE.isCooking) {
+                STATE.isCooking = true;
+                document.getElementById('cooking-container').style.display = 'block';
+                let prog = 0;
+                const iv = setInterval(()=>{
+                    prog += 4;
+                    document.getElementById('cooking-bar-fill').style.width = prog + '%';
+                    if(prog>=100) {
+                        clearInterval(iv);
+                        STATE.isCooking = false;
+                        STATE.holdingFood = true;
+                        foodItem.visible = true;
+                        document.getElementById('cooking-container').style.display = 'none';
+                        // Mission
+                        const h = buildings[Math.floor(Math.random()*buildings.length)];
+                        STATE.currentOrder = { target: h, reward: 50 };
+                        document.getElementById('job-display').innerText = "🏠 Deliver Food!";
+                        showMsg("Order Ready! Find the House!");
+                        // Marker
+                        if(window.marker) scene.remove(window.marker);
+                        window.marker = new THREE.Mesh(new THREE.ConeGeometry(1,2,4), new THREE.MeshBasicMaterial({color:0xFFFF00}));
+                        window.marker.rotation.x = Math.PI;
+                        window.marker.position.copy(h.position).add(new THREE.Vector3(0, 12, 0));
+                        scene.add(window.marker);
+                    }
+                }, 100);
+                return;
+            }
+            // Deliver
+            if(STATE.holdingFood && STATE.currentOrder) {
+                if(player.position.distanceTo(STATE.currentOrder.target.userData.deliveryPoint) < 6) {
+                    STATE.money += STATE.currentOrder.reward;
+                    document.getElementById('money-display').innerText = STATE.money;
+                    STATE.holdingFood = false;
+                    foodItem.visible = false;
+                    STATE.currentOrder = null;
+                    document.getElementById('job-display').innerText = "🍔 Return to Restaurant";
+                    showMsg("Delivered! +$50");
+                    if(window.marker) { scene.remove(window.marker); window.marker=null; }
+                    return;
+                }
+            }
+        }
+        // --- SHOP / SUMMON UI ---
+        const menu = document.getElementById('vehicle-menu');
+        document.getElementById('btn-summon').onclick = () => {
+            menu.style.display = 'block';
+            const list = document.getElementById('vehicle-list');
+            list.innerHTML = '';
+            VEHICLES_DB.forEach(v => {
+                const div = document.createElement('div');
+                div.className = 'v-item';
+                div.innerHTML = `<b>${v.name}</b> <button class="v-btn">RIDE</button>`;
+                div.querySelector('button').onclick = () => {
+                    spawnVehicle(v, player.position.x+2, player.position.z);
+                    menu.style.display = 'none';
+                };
+                list.appendChild(div);
+            });
+        };
+        document.getElementById('close-menu').onclick = () => menu.style.display='none';
+        /** --- GAME LOOP --- */
+        function animate() {
+            requestAnimationFrame(animate);
+            // Context Button Text
+            let txt = "Action";
+            if(STATE.inVehicle) txt = "EXIT";
+            else if(player.position.distanceTo(restGroup.position) < 20 && !STATE.holdingFood) txt = "COOK";
+            else if(STATE.currentOrder && player.position.distanceTo(STATE.currentOrder.target.userData.deliveryPoint)<6) txt = "DELIVER";
+            else {
+                 worldVehicles.forEach(v => { if(player.position.distanceTo(v.position)<5) txt="DRIVE"; });
+            }
+            document.getElementById('context-btn').innerText = txt;
+            // Physics
+            if(STATE.inVehicle) {
+                const v = STATE.inVehicle;
+                const speed = v.userData.info.speed * 0.5;
+                if(keys.w) v.translateZ(speed);
+                if(keys.s) v.translateZ(-speed/2);
+                if(keys.a) v.rotation.y += 0.05;
+                if(keys.d) v.rotation.y -= 0.05;
+                // Camera
+                const off = new THREE.Vector3(0, 6, -10).applyAxisAngle(new THREE.Vector3(0,1,0), v.rotation.y);
+                camera.position.lerp(v.position.clone().add(off), 0.1);
+                camera.lookAt(v.position);
+                player.position.copy(v.position); // Sync hidden player
+            } else {
+                const speed = 0.3;
+                if(keys.w) player.translateZ(speed);
+                if(keys.s) player.translateZ(-speed);
+                if(keys.a) player.rotation.y += 0.08;
+                if(keys.d) player.rotation.y -= 0.08;
+                // Gravity
+                if(!STATE.canJump) {
+                    STATE.velocity.y -= 0.03;
+                    player.position.y += STATE.velocity.y;
+                    if(player.position.y <= 0) {
+                        player.position.y = 0; STATE.canJump = true; STATE.velocity.y = 0;
+                    }
+                }
+                // Camera
+                const off = new THREE.Vector3(0, 7, -9).applyAxisAngle(new THREE.Vector3(0,1,0), player.rotation.y);
+                camera.position.lerp(player.position.clone().add(off), 0.1);
+                camera.lookAt(player.position.clone().add(new THREE.Vector3(0, 3, 0)));
+                // Anim
+                if(keys.w || keys.s) {
+                    const t = Date.now() * 0.01;
+                    pLegL.rotation.x = Math.sin(t)*0.5;
+                    pLegR.rotation.x = -Math.sin(t)*0.5;
+                    pArmL.rotation.x = -Math.sin(t)*0.5;
+                    pArmR.rotation.x = Math.sin(t)*0.5;
+                }
+            }
+            if(window.marker) window.marker.rotation.y += 0.05;
+            renderer.render(scene, camera);
         }
+        animate();
+        window.onresize = () => {
+            camera.aspect = window.innerWidth/window.innerHeight;
+            camera.updateProjectionMatrix();
+            renderer.setSize(window.innerWidth, window.innerHeight);
+        };
+    </script>
 </body>
+</html>