Upload 9 files

.gitattributes

@@ -33,3 +33,4 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+backend/cloudflared.exe filter=lfs diff=lfs merge=lfs -text

Dockerfile

@@ -0,0 +1,19 @@
+FROM python:3.9-slim
+
+WORKDIR /app
+
+# Copy the entire directory
+COPY . /app
+
+# Install dependencies
+RUN pip install --no-cache-dir -r backend/requirements.txt
+
+# Hugging Face Spaces strictly requires port 7860
+ENV PORT=7860
+EXPOSE 7860
+
+# Change to backend directory so paths resolve correctly
+WORKDIR /app/backend
+
+# Start the application
+CMD ["python", "main.py"]

backend/.env

@@ -0,0 +1 @@
+NGROK_AUTH_TOKEN=3EP4bgLY76Kdvsr2pq283IA4xb5_hteEFzQq3fMJVb7JJa8X

backend/cloudflared.exe

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:f141cded099c239171ad2cea6fb5da0fdaa2bd36104c3074d883f9546519eba7
+size 53886304

backend/cloudflared.log

@@ -0,0 +1,37 @@
+{"level":"info","time":"2026-05-29T09:09:56Z","message":"Thank you for trying Cloudflare Tunnel. Doing so, without a Cloudflare account, is a quick way to experiment and try it out. However, be aware that these account-less Tunnels have no uptime guarantee, are subject to the Cloudflare Online Services Terms of Use (https://www.cloudflare.com/website-terms/), and Cloudflare reserves the right to investigate your use of Tunnels for violations of such terms. If you intend to use Tunnels in production you should use a pre-created named tunnel by following: https://developers.cloudflare.com/cloudflare-one/connections/connect-apps"}
+{"level":"info","time":"2026-05-29T09:09:56Z","message":"Requesting new quick Tunnel on trycloudflare.com..."}
+{"level":"info","time":"2026-05-29T09:10:04Z","message":"+--------------------------------------------------------------------------------------------+"}
+{"level":"info","time":"2026-05-29T09:10:04Z","message":"|  Your quick Tunnel has been created! Visit it at (it may take some time to be reachable):  |"}
+{"level":"info","time":"2026-05-29T09:10:04Z","message":"|  https://save-entered-advance-tuning.trycloudflare.com                                     |"}
+{"level":"info","time":"2026-05-29T09:10:04Z","message":"+--------------------------------------------------------------------------------------------+"}
+{"level":"info","time":"2026-05-29T09:10:04Z","message":"Cannot determine default configuration path. No file [config.yml config.yaml] in [~/.cloudflared ~/.cloudflare-warp ~/cloudflare-warp]"}
+{"level":"info","time":"2026-05-29T09:10:04Z","message":"Version 2026.5.0 (Checksum f141cded099c239171ad2cea6fb5da0fdaa2bd36104c3074d883f9546519eba7)"}
+{"level":"info","time":"2026-05-29T09:10:04Z","message":"GOOS: windows, GOVersion: go1.26.2, GoArch: amd64"}
+{"level":"info","time":"2026-05-29T09:10:04Z","message":"Settings: map[ha-connections:1 logfile:C:\\Users\\atul\\.gemini\\antigravity\\scratch\\RadarDrop\\backend\\cloudflared.log protocol:quic url:http://localhost:8000]"}
+{"level":"info","time":"2026-05-29T09:10:04Z","message":"cloudflared will not automatically update on Windows systems."}
+{"level":"info","time":"2026-05-29T09:10:04Z","message":"Generated Connector ID: c005171b-ad77-4597-8fc4-5861aef9257e"}
+{"level":"info","time":"2026-05-29T09:10:04Z","message":"Initial protocol quic"}
+{"level":"info","time":"2026-05-29T09:10:04Z","message":"ICMP proxy will use 10.19.14.16 as source for IPv4"}
+{"level":"info","time":"2026-05-29T09:10:05Z","message":"ICMP proxy will use 2409:4041:2e30:9448:e013:af9f:c011:83e0 in zone Wi-Fi as source for IPv6"}
+{"level":"info","time":"2026-05-29T09:10:05Z","message":"cloudflared does not support loading the system root certificate pool on Windows. Please use --origin-ca-pool <PATH> to specify the path to the certificate pool"}
+{"level":"info","time":"2026-05-29T09:10:05Z","message":"ICMP proxy will use 10.19.14.16 as source for IPv4"}
+{"level":"info","event":0,"ip":"2606:4700:a0::6","connIndex":0,"time":"2026-05-29T09:10:05Z","message":"Tunnel connection curve preferences: [X25519MLKEM768 CurveID(65074) CurveP256]"}
+{"level":"info","time":"2026-05-29T09:10:05Z","message":"ICMP proxy will use 2409:4041:2e30:9448:e013:af9f:c011:83e0 in zone Wi-Fi as source for IPv6"}
+{"level":"info","time":"2026-05-29T09:10:05Z","message":"Starting metrics server on 127.0.0.1:20241/metrics"}
+{"level":"info","event":0,"connection":"3f747645-5bec-4e17-8e1b-52ddb64c9461","connIndex":0,"location":"amd01","ip":"2606:4700:a0::6","protocol":"quic","time":"2026-05-29T09:10:06Z","message":"Registered tunnel connection"}
+{"level":"error","event":0,"ip":"2606:4700:a0::6","connIndex":0,"error":"failed to accept QUIC stream: timeout: no recent network activity","time":"2026-05-29T09:13:52Z","message":"failed to accept incoming stream requests"}
+{"level":"error","event":0,"ip":"2606:4700:a0::6","connIndex":0,"error":"timeout: no recent network activity","time":"2026-05-29T09:13:52Z","message":"failed to run the datagram handler"}
+{"level":"error","event":0,"ip":"2606:4700:a0::6","connIndex":0,"error":"accept stream listener encountered a failure while serving","time":"2026-05-29T09:13:53Z","message":"failed to serve tunnel connection"}
+{"level":"error","event":0,"ip":"2606:4700:a0::6","connIndex":0,"error":"accept stream listener encountered a failure while serving","time":"2026-05-29T09:14:03Z","message":"Serve tunnel error"}
+{"level":"info","event":0,"ip":"2606:4700:a0::6","connIndex":0,"time":"2026-05-29T09:14:03Z","message":"Retrying connection in up to 1s"}
+{"level":"info","event":0,"ip":"2606:4700:a0::6","connIndex":0,"time":"2026-05-29T09:14:04Z","message":"Tunnel connection curve preferences: [X25519MLKEM768 CurveID(65074) CurveP256]"}
+{"level":"info","event":0,"connection":"03935aa8-4a2e-4f9a-be3b-3ce4eb540ea8","connIndex":0,"location":"amd01","ip":"2606:4700:a0::6","protocol":"quic","time":"2026-05-29T09:14:04Z","message":"Registered tunnel connection"}
+{"level":"info","time":"2026-05-29T10:33:16Z","message":"Initiating graceful shutdown due to signal terminated ..."}
+{"level":"error","event":0,"ip":"2606:4700:a0::6","connIndex":0,"error":"context canceled","time":"2026-05-29T10:33:16Z","message":"failed to run the datagram handler"}
+{"level":"error","event":0,"ip":"2606:4700:a0::6","connIndex":0,"error":"accept stream listener encountered a failure while serving","time":"2026-05-29T10:33:16Z","message":"failed to serve tunnel connection"}
+{"level":"error","event":0,"ip":"2606:4700:a0::6","connIndex":0,"error":"accept stream listener encountered a failure while serving","time":"2026-05-29T10:33:16Z","message":"Serve tunnel error"}
+{"level":"info","event":0,"ip":"2606:4700:a0::6","connIndex":0,"time":"2026-05-29T10:33:16Z","message":"Retrying connection in up to 1s"}
+{"level":"error","connIndex":0,"time":"2026-05-29T10:33:16Z","message":"Connection terminated"}
+{"level":"error","time":"2026-05-29T10:33:16Z","message":"no more connections active and exiting"}
+{"level":"info","time":"2026-05-29T10:33:16Z","message":"Tunnel server stopped"}
+{"level":"info","time":"2026-05-29T10:33:16Z","message":"Metrics server stopped"}

backend/main.py

@@ -0,0 +1,288 @@
+import os
+import sys
+import io
+import socket
+import subprocess
+import threading
+import mimetypes
+import json
+from pathlib import Path
+from datetime import datetime
+from typing import Optional
+
+sys.stdout = open(sys.stdout.fileno(), mode='w', encoding='utf-8', buffering=1)
+
+import qrcode
+import uvicorn
+from fastapi import FastAPI, UploadFile, File, HTTPException, WebSocket, WebSocketDisconnect
+from fastapi.responses import FileResponse, JSONResponse, Response, HTMLResponse
+from fastapi.middleware.cors import CORSMiddleware
+from dotenv import load_dotenv
+from pyngrok import ngrok, conf
+
+load_dotenv()
+
+# ─── Config ───────────────────────────────────────────────────────────────────
+PORT         = int(os.environ.get("PORT", 8000))
+BASE_DIR     = Path(__file__).resolve().parent
+FRONTEND_DIR = BASE_DIR.parent / "frontend"
+UPLOAD_DIR   = BASE_DIR / "uploads"
+URL_FILE     = BASE_DIR / "public_url.txt"
+UPLOAD_DIR.mkdir(exist_ok=True)
+
+# ─── Rooms State ─────────────────────────────────────────────────────────────
+# { "room_code": { "clients": [WebSocket], "messages": [dict] } }
+rooms = {}
+
+# ─── Kill any process already on PORT ────────────────────────────────────────
+def free_port(port: int):
+    try:
+        result = subprocess.run(["netstat", "-ano"], capture_output=True, text=True)
+        for line in result.stdout.splitlines():
+            if f":{port}" in line and "LISTENING" in line:
+                pid = line.strip().split()[-1]
+                subprocess.run(["taskkill", "/F", "/PID", pid], capture_output=True)
+                print(f"  [~] Freed port {port} (killed PID {pid})")
+    except Exception:
+        pass
+
+# ─── App ─────────────────────────────────────────────────────────────────────
+app = FastAPI(title="RadarDrop v2")
+app.add_middleware(CORSMiddleware, allow_origins=["*"],
+                   allow_methods=["*"], allow_headers=["*"])
+
+# ─── Helpers ─────────────────────────────────────────────────────────────────
+def get_local_ip() -> str:
+    try:
+        s = socket.socket(socket.AF_INET, socket.SOCK_DGRAM)
+        s.connect(("8.8.8.8", 80))
+        ip = s.getsockname()[0]
+        s.close()
+        return ip
+    except Exception:
+        return "127.0.0.1"
+
+def human_size(n: int) -> str:
+    for unit in ("B", "KB", "MB", "GB"):
+        if n < 1024:
+            return f"{n:.1f} {unit}"
+        n /= 1024
+    return f"{n:.1f} TB"
+
+def make_qr_png(url: str) -> bytes:
+    img = qrcode.make(url)
+    buf = io.BytesIO()
+    img.save(buf, format="PNG")
+    buf.seek(0)
+    return buf.read()
+
+def get_public_url() -> Optional[str]:
+    try:
+        txt = URL_FILE.read_text().strip()
+        return txt if txt else None
+    except Exception:
+        return None
+
+# ─── Ngrok Tunnel ────────────────────────────────────────────────────────────
+def start_ngrok_tunnel(port: int):
+    URL_FILE.write_text("", encoding="utf-8")
+    
+    auth_token = os.environ.get("NGROK_AUTH_TOKEN")
+    if not auth_token:
+        print("\n  [!] NGROK_AUTH_TOKEN is missing in .env file.")
+        print("  [!] Running strictly on Local Network.")
+        URL_FILE.write_text("FAILED", encoding="utf-8")
+        return
+
+    try:
+        ngrok.set_auth_token(auth_token)
+        # Suppress verbose ngrok logs
+        conf.get_default().log_event_callback = lambda log: None
+        
+        domain = os.environ.get("NGROK_DOMAIN")
+        if domain:
+            tunnel = ngrok.connect(port, domain=domain)
+        else:
+            tunnel = ngrok.connect(port)
+            
+        public_url = tunnel.public_url
+        URL_FILE.write_text(public_url, encoding="utf-8")
+        print(f"\n  [PUBLIC] Tunnel live: {public_url}")
+        print(f"  [PUBLIC] Share with anyone!\n")
+    except Exception as e:
+        print(f"\n  [WARN] Ngrok failed: {e}")
+        URL_FILE.write_text("FAILED", encoding="utf-8")
+
+async def broadcast_to_room(room_code: str, message: dict):
+    if room_code in rooms:
+        for client in rooms[room_code]["clients"]:
+            try:
+                await client.send_json(message)
+            except Exception:
+                pass
+
+# ─── WebSockets (Chat & Live Sync) ─────────────────────────────���─────────────
+@app.websocket("/ws/{room_code}")
+async def websocket_endpoint(websocket: WebSocket, room_code: str):
+    await websocket.accept()
+    if room_code not in rooms:
+        rooms[room_code] = {"clients": [], "messages": []}
+        (UPLOAD_DIR / room_code).mkdir(exist_ok=True)
+    
+    rooms[room_code]["clients"].append(websocket)
+    
+    # Send chat history to new connection
+    for msg in rooms[room_code]["messages"]:
+        await websocket.send_json(msg)
+        
+    try:
+        while True:
+            data = await websocket.receive_text()
+            payload = json.loads(data)
+            if payload.get("type") == "chat":
+                msg = {
+                    "type": "chat",
+                    "sender": payload.get("sender", "Anonymous"),
+                    "text": payload.get("text"),
+                    "timestamp": datetime.now().strftime("%H:%M")
+                }
+                rooms[room_code]["messages"].append(msg)
+                await broadcast_to_room(room_code, msg)
+    except WebSocketDisconnect:
+        rooms[room_code]["clients"].remove(websocket)
+    except Exception as e:
+        if websocket in rooms[room_code]["clients"]:
+            rooms[room_code]["clients"].remove(websocket)
+
+# ─── Routes ──────────────────────────────────────────────────────────────────
+
+@app.api_route("/", methods=["GET", "HEAD"], response_class=HTMLResponse)
+async def serve_index():
+    return HTMLResponse((FRONTEND_DIR / "index.html").read_text(encoding="utf-8"))
+
+@app.get("/ip")
+async def get_ip():
+    ip         = get_local_ip()
+    public_url = get_public_url()
+    failed     = public_url == "FAILED"
+    return {
+        "local_url":     f"http://{ip}:{PORT}",
+        "public_url":    None if (not public_url or failed) else public_url,
+        "tunnel_status": "failed" if failed else ("live" if public_url else "connecting"),
+    }
+
+@app.get("/qr")
+async def local_qr(room: str = ""):
+    url = f"http://{get_local_ip()}:{PORT}"
+    if room: url += f"?room={room}"
+    return Response(content=make_qr_png(url), media_type="image/png")
+
+@app.get("/qr/public")
+async def public_qr(room: str = ""):
+    url = get_public_url()
+    if not url or url == "FAILED":
+        raise HTTPException(503, "Tunnel not ready yet")
+    if room: url += f"?room={room}"
+    return Response(content=make_qr_png(url), media_type="image/png")
+
+# ─── Room File Routes ────────────────────────────────────────────────────────
+
+@app.get("/api/rooms/{room_code}/files")
+async def list_files(room_code: str):
+    room_dir = UPLOAD_DIR / room_code
+    room_dir.mkdir(exist_ok=True)
+    
+    files = []
+    for f in sorted(room_dir.iterdir(), key=lambda x: x.stat().st_mtime, reverse=True):
+        if f.is_file():
+            stat = f.stat()
+            mime, _ = mimetypes.guess_type(f.name)
+            files.append({
+                "name":     f.name,
+                "size":     stat.st_size,
+                "size_hr":  human_size(stat.st_size),
+                "mime":     mime or "application/octet-stream",
+                "modified": datetime.fromtimestamp(stat.st_mtime).strftime("%Y-%m-%d %H:%M"),
+            })
+    return JSONResponse(files)
+
+@app.post("/api/rooms/{room_code}/upload")
+async def upload(room_code: str, file: UploadFile = File(...)):
+    room_dir = UPLOAD_DIR / room_code
+    room_dir.mkdir(exist_ok=True)
+    
+    dest = room_dir / file.filename
+    stem = Path(file.filename).stem
+    suffix = Path(file.filename).suffix
+    n = 1
+    while dest.exists():
+        dest = room_dir / f"{stem} ({n}){suffix}"; n += 1
+        
+    dest.write_bytes(await file.read())
+    
+    # Broadcast to room that files updated
+    await broadcast_to_room(room_code, {"type": "files_updated"})
+    
+    return {"filename": dest.name}
+
+@app.get("/api/rooms/{room_code}/download/{filename}")
+async def download(room_code: str, filename: str):
+    p = UPLOAD_DIR / room_code / filename
+    if not p.exists():
+        raise HTTPException(404, "Not found")
+    return FileResponse(p, filename=filename)
+
+@app.delete("/api/rooms/{room_code}/files/{filename}")
+async def delete(room_code: str, filename: str):
+    p = UPLOAD_DIR / room_code / filename
+    if not p.exists():
+        raise HTTPException(404, "Not found")
+    p.unlink()
+    
+    await broadcast_to_room(room_code, {"type": "files_updated"})
+    return {"ok": True}
+
+# ─── Entry Point ─────────────────────────────────────────────────────────────
+if __name__ == "__main__":
+    ip = get_local_ip()
+    
+    # If we are NOT running on Hugging Face Spaces, free port and prompt for Ngrok
+    is_huggingface = os.environ.get("SPACE_ID") is not None
+    
+    if not is_huggingface:
+        free_port(PORT)
+        if not os.environ.get("NGROK_AUTH_TOKEN"):
+        print("\n" + "="*55)
+        print("  [!] FIXED URL SETUP REQUIRED")
+        print("  To get a fixed URL, you need a free Ngrok account.")
+        print("  1. Go to: https://dashboard.ngrok.com/get-started/your-authtoken")
+        print("  2. Copy your Authtoken.")
+        print("  3. (Optional) Claim your free static domain at: https://dashboard.ngrok.com/cloud-edge/domains")
+        print("  (Or leave blank and press Enter to use Local Network only)")
+        print("="*55)
+        token = input("  Enter Ngrok Authtoken: ").strip()
+        if token:
+            domain = input("  (Optional) Enter your Ngrok Static Domain (e.g., xxx.ngrok-free.app) or leave blank: ").strip()
+            with open(BASE_DIR / ".env", "w") as f:
+                f.write(f"NGROK_AUTH_TOKEN={token}\n")
+                if domain:
+                    f.write(f"NGROK_DOMAIN={domain}\n")
+            os.environ["NGROK_AUTH_TOKEN"] = token
+            if domain:
+                os.environ["NGROK_DOMAIN"] = domain
+            print("  [+] Saved to .env!")
+        else:
+            print("  [-] No token provided. Running in Local Mode only.")
+
+        threading.Thread(target=start_ngrok_tunnel, args=(PORT,), daemon=True).start()
+
+    print("\n" + "=" * 55)
+    print("  RadarDrop v2 is LIVE")
+    print(f"  Local  : http://localhost:{PORT}")
+    if is_huggingface:
+        print("  Running in Hugging Face Space")
+    else:
+        print(f"  Network: http://{ip}:{PORT}")
+    print("=" * 55 + "\n")
+
+    uvicorn.run(app, host="0.0.0.0", port=PORT)

backend/public_url.txt

@@ -0,0 +1 @@
+https://generic-gorged-trial.ngrok-free.dev

backend/requirements.txt

@@ -0,0 +1,11 @@
+fastapi==0.111.0
+uvicorn==0.30.1
+python-multipart==0.0.9
+qrcode[pil]==7.4.2
+Pillow==10.3.0
+aiofiles==23.2.1
+pyngrok==7.2.0
+
+websockets
+python-dotenv
+pyngrok

frontend/index.html

@@ -0,0 +1,470 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8"/>
+<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
+<title>RadarDrop v2</title>
+<style>
+  @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+
+  *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
+
+  :root{
+    --bg:#000;
+    --surface:rgba(255,255,255,0.04);
+    --surface-hover:rgba(255,255,255,0.08);
+    --border:rgba(255,255,255,0.1);
+    --text:#fff;
+    --muted:rgba(255,255,255,0.45);
+    --glow:rgba(255,255,255,0.12);
+    --danger:rgba(255,80,80,0.85);
+    --green:rgba(80,255,140,0.85);
+  }
+
+  html,body{height:100%;background:var(--bg);color:var(--text);font-family:'Inter',system-ui,sans-serif;overflow:hidden}
+
+  /* ── Layout ── */
+  .app-container{display:none;grid-template-columns:300px 1fr 340px;height:100vh}
+  .app-container.active{display:grid}
+
+  /* ── Landing Page ── */
+  .landing{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100vh;text-align:center}
+  .landing.hidden{display:none}
+  .brand-title{font-size:3rem;font-weight:700;letter-spacing:1px;margin-bottom:8px;display:flex;align-items:center;gap:16px}
+  .brand-dot{width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 0 16px #fff,0 0 32px #fff}
+  .landing-sub{color:var(--muted);font-size:1.1rem;margin-bottom:40px}
+  
+  .room-box{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:32px;width:100%;max-width:400px}
+  .input-code{width:100%;background:rgba(0,0,0,0.3);border:1px solid var(--border);color:#fff;font-size:1.5rem;text-align:center;padding:16px;border-radius:12px;letter-spacing:8px;outline:none;font-family:monospace;transition:border .2s}
+  .input-code:focus{border-color:rgba(255,255,255,0.5)}
+  .input-code::placeholder{color:var(--muted);letter-spacing:2px;font-family:'Inter',sans-serif;font-size:1rem}
+  
+  .btn{
+    display:inline-flex;align-items:center;justify-content:center;gap:8px;
+    padding:12px 24px;border-radius:10px;font-size:.9rem;font-weight:600;
+    cursor:pointer;transition:all .2s;border:1px solid var(--border);
+    background:rgba(255,255,255,0.08);color:#fff;font-family:inherit;width:100%;
+  }
+  .btn:hover{background:rgba(255,255,255,0.15);border-color:rgba(255,255,255,0.3);transform:translateY(-1px)}
+  .btn-primary{background:#fff;color:#000;border:none}
+  .btn-primary:hover{background:rgba(255,255,255,0.85);box-shadow:0 0 16px var(--glow)}
+  .btn-sm{padding:6px 14px;font-size:.75rem;border-radius:8px;width:auto}
+  .btn-danger{background:rgba(255,50,50,0.1);border-color:rgba(255,80,80,0.3);color:rgba(255,130,130,1)}
+  
+  .divider{display:flex;align-items:center;text-align:center;color:var(--muted);font-size:.8rem;margin:24px 0}
+  .divider::before,.divider::after{content:'';flex:1;border-bottom:1px solid var(--border)}
+  .divider:not(:empty)::before{margin-right:.5em}
+  .divider:not(:empty)::after{margin-left:.5em}
+
+  /* ── Sidebar (Left) ── */
+  .sidebar{
+    background:rgba(255,255,255,0.02);border-right:1px solid var(--border);
+    display:flex;flex-direction:column;align-items:center;padding:24px 16px;gap:24px;overflow-y:auto;
+  }
+  .room-badge{background:#fff;color:#000;padding:6px 16px;border-radius:20px;font-weight:700;letter-spacing:2px;font-size:1.1rem;font-family:monospace}
+  
+  /* ── Radar SVG ── */
+  .radar-wrap{position:relative;width:180px;height:180px}
+  .radar-wrap svg{width:100%;height:100%}
+  .radar-ring{fill:none;stroke:rgba(255,255,255,0.15);stroke-width:1}
+  .radar-sweep{transform-origin:90px 90px;animation:sweep 3s linear infinite}
+  @keyframes sweep{to{transform:rotate(360deg)}}
+  .radar-dot{fill:#fff;animation:blink 2s ease-in-out infinite}
+  @keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}
+  .blip{fill:#fff;opacity:0;animation:blipAnim 4s ease-in-out infinite}
+  @keyframes blipAnim{0%,100%{opacity:0}40%{opacity:.9}60%{opacity:.9}80%{opacity:0}}
+
+  /* ── QR Toggle ── */
+  .qr-wrap{width:100%;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:16px;display:flex;flex-direction:column;align-items:center;gap:10px}
+  .qr-wrap img{width:140px;height:140px;border-radius:8px;border:2px solid rgba(255,255,255,0.1)}
+  .qr-toggle{display:flex;width:100%;border:1px solid var(--border);border-radius:8px;overflow:hidden}
+  .qr-tab{flex:1;padding:6px;font-size:.7rem;font-weight:600;text-align:center;cursor:pointer;border:none;background:transparent;color:var(--muted);transition:all .2s}
+  .qr-tab.active{background:rgba(255,255,255,0.15);color:#fff}
+  .public-url-text{font-size:.65rem;color:var(--muted);word-break:break-all;text-align:center}
+
+  /* ── Main area (Center) ── */
+  .main{display:flex;flex-direction:column;padding:32px;overflow-y:auto}
+  .section-title{font-size:.75rem;text-transform:uppercase;letter-spacing:2px;color:var(--muted);margin-bottom:16px}
+  
+  .drop-zone{
+    border:2px dashed rgba(255,255,255,0.2);border-radius:16px;
+    padding:40px 20px;text-align:center;cursor:pointer;
+    background:var(--surface);transition:all .2s;margin-bottom:32px;
+  }
+  .drop-zone:hover,.drop-zone.drag-over{border-color:rgba(255,255,255,0.5);background:var(--surface-hover)}
+  .drop-icon{font-size:2.5rem;margin-bottom:8px;display:block}
+  #fileInput{display:none}
+
+  /* ── File list ── */
+  .files-grid{display:flex;flex-direction:column;gap:8px}
+  .file-card{
+    display:flex;align-items:center;gap:16px;
+    background:var(--surface);border:1px solid var(--border);
+    border-radius:12px;padding:12px 16px;transition:transform .2s;
+  }
+  .file-card:hover{background:var(--surface-hover);transform:translateX(4px)}
+  .file-icon{font-size:1.5rem;width:40px;text-align:center}
+  .file-info{flex:1;min-width:0}
+  .file-name{font-size:.85rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+  .file-meta{font-size:.65rem;color:var(--muted);margin-top:4px}
+
+  /* ── Chat area (Right) ── */
+  .chat-panel{
+    background:rgba(255,255,255,0.015);border-left:1px solid var(--border);
+    display:flex;flex-direction:column;height:100vh;
+  }
+  .chat-header{padding:20px;border-bottom:1px solid var(--border);font-weight:600;font-size:.9rem;display:flex;align-items:center;gap:10px}
+  .chat-messages{flex:1;padding:20px;overflow-y:auto;display:flex;flex-direction:column;gap:16px}
+  
+  .chat-msg{display:flex;flex-direction:column;align-items:flex-start;max-width:85%}
+  .chat-msg.self{align-items:flex-end;align-self:flex-end}
+  .msg-sender{font-size:.65rem;color:var(--muted);margin-bottom:4px;margin-left:4px}
+  .chat-msg.self .msg-sender{margin-right:4px}
+  .msg-bubble{background:var(--surface);border:1px solid var(--border);padding:10px 14px;border-radius:14px;font-size:.85rem;line-height:1.4;word-wrap:break-word}
+  .chat-msg.self .msg-bubble{background:rgba(255,255,255,0.1);border-color:rgba(255,255,255,0.2)}
+  .msg-time{font-size:.6rem;color:var(--muted);margin-top:4px;align-self:flex-end}
+
+  .chat-input-wrap{padding:16px;border-top:1px solid var(--border);display:flex;gap:10px;background:rgba(0,0,0,0.5)}
+  .chat-input{flex:1;background:var(--surface);border:1px solid var(--border);color:#fff;padding:12px 16px;border-radius:24px;outline:none;font-size:.85rem;font-family:inherit;transition:border .2s}
+  .chat-input:focus{border-color:rgba(255,255,255,0.4)}
+  .chat-send{background:#fff;color:#000;border:none;width:40px;height:40px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .2s}
+  .chat-send:hover{transform:scale(1.05)}
+
+  /* ── Toast ── */
+  .toast-wrap{position:fixed;top:24px;right:24px;display:flex;flex-direction:column;gap:10px;z-index:9999}
+  .toast{
+    background:rgba(255,255,255,0.1);backdrop-filter:blur(16px);
+    border:1px solid var(--border);border-radius:10px;
+    padding:12px 18px;font-size:.8rem;animation:toastIn .3s ease;
+  }
+  .toast.success{border-color:rgba(80,255,140,0.4);color:rgba(180,255,200,1)}
+  @keyframes toastIn{from{opacity:0;transform:translateX(30px)}to{opacity:1;transform:none}}
+
+  /* ── Name Modal ── */
+  .modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.8);backdrop-filter:blur(4px);display:none;align-items:center;justify-content:center;z-index:100}
+  .modal-overlay.active{display:flex}
+</style>
+</head>
+<body>
+
+<div class="toast-wrap" id="toastWrap"></div>
+
+<!-- Name Modal -->
+<div class="modal-overlay" id="nameModal">
+  <div class="room-box">
+    <h2 style="margin-bottom:8px">What's your name?</h2>
+    <p class="landing-sub" style="margin-bottom:20px;font-size:.9rem">This will be shown in the room chat.</p>
+    <input type="text" id="usernameInput" class="input-code" placeholder="Enter name" style="letter-spacing:normal;text-align:left;font-family:inherit;margin-bottom:16px">
+    <button class="btn btn-primary" onclick="setName()">Continue</button>
+  </div>
+</div>
+
+<!-- Landing -->
+<div class="landing" id="landingPage">
+  <div class="brand-title"><span class="brand-dot"></span> RadarDrop</div>
+  <div class="landing-sub">Private, secure, real-time file sharing rooms.</div>
+  
+  <div class="room-box">
+    <button class="btn btn-primary" style="padding:16px;font-size:1.05rem" onclick="createRoom()">＋ Create New Room</button>
+    <div class="divider">OR</div>
+    <input type="text" id="joinCode" class="input-code" placeholder="PIN" maxlength="4" style="margin-bottom:12px">
+    <button class="btn" onclick="joinRoom()">Join Room</button>
+  </div>
+</div>
+
+<!-- Main App -->
+<div class="app-container" id="app">
+  
+  <!-- Sidebar -->
+  <aside class="sidebar">
+    <div style="font-weight:700;font-size:1.1rem;display:flex;align-items:center;gap:8px">
+      <span class="brand-dot" style="width:10px;height:10px"></span> RadarDrop
+    </div>
+    
+    <div style="text-align:center;margin-top:10px">
+      <div style="font-size:.7rem;color:var(--muted);text-transform:uppercase;letter-spacing:1px;margin-bottom:6px">Room Code</div>
+      <div class="room-badge" id="roomBadge">----</div>
+    </div>
+
+    <!-- Radar -->
+    <div class="radar-wrap">
+      <svg viewBox="0 0 180 180" xmlns="http://www.w3.org/2000/svg">
+        <circle cx="90" cy="90" r="88" fill="rgba(255,255,255,0.02)"/>
+        <circle class="radar-ring" cx="90" cy="90" r="70"/>
+        <circle class="radar-ring" cx="90" cy="90" r="45"/>
+        <circle class="radar-ring" cx="90" cy="90" r="20"/>
+        <line x1="90" y1="10" x2="90" y2="170" stroke="rgba(255,255,255,0.1)"/>
+        <line x1="10" y1="90" x2="170" y2="90" stroke="rgba(255,255,255,0.1)"/>
+        <g class="radar-sweep">
+          <defs>
+            <radialGradient id="sweepGrad" cx="90" cy="90" r="70" gradientUnits="userSpaceOnUse">
+              <stop offset="0%" stop-color="rgba(255,255,255,0)"/>
+              <stop offset="100%" stop-color="rgba(255,255,255,0.2)"/>
+            </radialGradient>
+          </defs>
+          <path d="M90,90 L90,20 A70,70 0 0,1 160,90 Z" fill="url(#sweepGrad)"/>
+          <line x1="90" y1="90" x2="90" y2="20" stroke="rgba(255,255,255,0.8)" stroke-width="1.5"/>
+        </g>
+        <circle class="blip" cx="120" cy="50" r="3"/>
+        <circle class="blip" cx="60" cy="120" r="2" style="animation-delay:1.5s"/>
+        <circle class="radar-dot" cx="90" cy="90" r="3"/>
+      </svg>
+    </div>
+
+    <!-- QR -->
+    <div class="qr-wrap">
+      <div class="qr-toggle">
+        <button class="qr-tab active" id="tabLocal" onclick="switchQR('local')">Local</button>
+        <button class="qr-tab" id="tabPublic" onclick="switchQR('public')">Internet</button>
+      </div>
+      <img id="qrImg" src="" alt="QR Code"/>
+      <div class="public-url-text" id="publicUrlText" style="margin-top:4px">Loading tunnel...</div>
+    </div>
+    
+    <button class="btn btn-danger btn-sm" onclick="leaveRoom()" style="margin-top:auto">← Leave Room</button>
+  </aside>
+
+  <!-- Center: Files -->
+  <main class="main">
+    <div class="section-title">Share Files</div>
+    <div class="drop-zone" id="dropZone" onclick="document.getElementById('fileInput').click()">
+      <span class="drop-icon">📡</span>
+      <div style="font-weight:600;font-size:1.1rem;margin-bottom:6px">Drop files here</div>
+      <div style="font-size:.8rem;color:var(--muted)">or click to browse</div>
+      <input type="file" id="fileInput" multiple/>
+    </div>
+
+    <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:12px">
+      <div class="section-title" style="margin:0">Room Files</div>
+    </div>
+    <div class="files-grid" id="filesList"></div>
+  </main>
+
+  <!-- Right: Chat -->
+  <aside class="chat-panel">
+    <div class="chat-header">
+      💬 Room Chat
+    </div>
+    <div class="chat-messages" id="chatMsgs">
+      <div style="text-align:center;color:var(--muted);font-size:.75rem;margin:auto">Chat history is synced automatically.</div>
+    </div>
+    <div class="chat-input-wrap">
+      <input type="text" id="chatInput" class="chat-input" placeholder="Type a message..." autocomplete="off">
+      <button class="chat-send" onclick="sendChat()">
+        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>
+      </button>
+    </div>
+  </aside>
+</div>
+
+<script>
+// ── State ──────────────────────────────────────────────────────────────────
+let roomCode = null;
+let username = localStorage.getItem('radardrop_name') || '';
+let ws = null;
+let publicUrl = null;
+let localUrl = null;
+
+// ── Init ───────────────────────────────────────────────────────────────────
+window.onload = async () => {
+  if(!username) {
+    document.getElementById('nameModal').classList.add('active');
+  }
+  
+  // Check URL params for room invite
+  const params = new URLSearchParams(window.location.search);
+  const invite = params.get('room');
+  if(invite && invite.length === 4){
+    document.getElementById('joinCode').value = invite;
+  }
+  
+  // Load IP for QR codes
+  try{
+    const r = await fetch('/ip');
+    const d = await r.json();
+    localUrl = d.local_url;
+    publicUrl = d.public_url;
+  }catch(e){}
+};
+
+function setName(){
+  const val = document.getElementById('usernameInput').value.trim();
+  if(!val) return;
+  username = val;
+  localStorage.setItem('radardrop_name', username);
+  document.getElementById('nameModal').classList.remove('active');
+}
+
+function toast(msg, type='success'){
+  const el = document.createElement('div');
+  el.className = `toast ${type}`;
+  el.textContent = msg;
+  document.getElementById('toastWrap').appendChild(el);
+  setTimeout(()=>{ el.style.opacity='0'; el.style.transition='opacity .4s'; setTimeout(()=>el.remove(),400); }, 3000);
+}
+
+// ── Rooms ──────────────────────────────────────────────────────────────────
+function generateCode(){ return Math.floor(1000 + Math.random() * 9000).toString(); }
+
+function createRoom(){
+  const code = generateCode();
+  enterRoom(code);
+}
+
+function joinRoom(){
+  const code = document.getElementById('joinCode').value.trim();
+  if(code.length !== 4) return toast('Enter 4 digit PIN', 'error');
+  enterRoom(code);
+}
+
+function enterRoom(code){
+  roomCode = code;
+  document.getElementById('landingPage').classList.add('hidden');
+  document.getElementById('app').classList.add('active');
+  document.getElementById('roomBadge').textContent = code;
+  
+  // Update URL without reload
+  const newUrl = window.location.protocol + "//" + window.location.host + window.location.pathname + "?room=" + code;
+  window.history.pushState({path:newUrl},'',newUrl);
+  
+  switchQR('local');
+  loadFiles();
+  connectWS();
+}
+
+function leaveRoom(){
+  if(ws) ws.close();
+  roomCode = null;
+  document.getElementById('app').classList.remove('active');
+  document.getElementById('landingPage').classList.remove('hidden');
+  window.history.pushState({},'',window.location.pathname);
+}
+
+function switchQR(mode){
+  const img = document.getElementById('qrImg');
+  const txt = document.getElementById('publicUrlText');
+  document.getElementById('tabLocal').classList.toggle('active', mode==='local');
+  document.getElementById('tabPublic').classList.toggle('active', mode==='public');
+  
+  if(mode === 'local'){
+    img.src = `/qr?room=${roomCode}&t=${Date.now()}`;
+    txt.textContent = 'Works on Local Wi-Fi';
+  } else {
+    if(publicUrl && publicUrl !== 'FAILED'){
+      img.src = `/qr/public?room=${roomCode}&t=${Date.now()}`;
+      txt.textContent = publicUrl;
+    } else {
+      img.src = '';
+      txt.textContent = 'Tunnel not active';
+    }
+  }
+}
+
+// ── WebSockets ─────────────────────────────────────────────────────────────
+function connectWS(){
+  if(ws) ws.close();
+  const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+  const wsUrl = `${protocol}//${window.location.host}/ws/${roomCode}`;
+  
+  ws = new WebSocket(wsUrl);
+  ws.onmessage = (e) => {
+    const data = JSON.parse(e.data);
+    if(data.type === 'chat'){
+      renderMessage(data);
+    } else if(data.type === 'files_updated'){
+      loadFiles();
+    }
+  };
+  ws.onclose = () => {
+    if(roomCode) setTimeout(connectWS, 2000); // Reconnect if still in room
+  };
+}
+
+function renderMessage(msg){
+  const box = document.getElementById('chatMsgs');
+  const isSelf = msg.sender === username;
+  const el = document.createElement('div');
+  el.className = `chat-msg ${isSelf ? 'self' : ''}`;
+  el.innerHTML = `
+    <div class="msg-sender">${isSelf ? 'You' : msg.sender}</div>
+    <div class="msg-bubble">${msg.text}</div>
+    <div class="msg-time">${msg.timestamp || ''}</div>
+  `;
+  box.appendChild(el);
+  box.scrollTop = box.scrollHeight;
+}
+
+function sendChat(){
+  const input = document.getElementById('chatInput');
+  const text = input.value.trim();
+  if(!text || !ws) return;
+  ws.send(JSON.stringify({type: 'chat', sender: username, text: text}));
+  input.value = '';
+}
+
+document.getElementById('chatInput').addEventListener('keypress', e => {
+  if(e.key === 'Enter') sendChat();
+});
+
+// ── Files ──────────────────────────────────────────────────────────────────
+function fileIcon(mime=''){
+  if(mime.startsWith('image/'))  return '🖼️';
+  if(mime.startsWith('video/'))  return '🎬';
+  if(mime.startsWith('audio/'))  return '🎵';
+  if(mime.includes('pdf'))       return '📄';
+  if(mime.includes('zip'))       return '🗜️';
+  if(mime.includes('text')||mime.includes('json')||mime.includes('javascript')) return '📝';
+  return '📄';
+}
+
+async function loadFiles(){
+  if(!roomCode) return;
+  try{
+    const r = await fetch(`/api/rooms/${roomCode}/files`);
+    const files = await r.json();
+    const el = document.getElementById('filesList');
+    if(!files.length){
+      el.innerHTML = `<div style="text-align:center;padding:40px;color:var(--muted)">No files in this room yet.</div>`;
+      return;
+    }
+    el.innerHTML = files.map(f=>`
+      <div class="file-card">
+        <div class="file-icon">${fileIcon(f.mime)}</div>
+        <div class="file-info">
+          <div class="file-name" title="${f.name}">${f.name}</div>
+          <div class="file-meta">${f.size_hr} · ${f.modified}</div>
+        </div>
+        <div style="display:flex;gap:6px">
+          <a href="/api/rooms/${roomCode}/download/${encodeURIComponent(f.name)}" download class="btn btn-sm">⬇</a>
+          <button class="btn btn-sm btn-danger" onclick="deleteFile('${f.name.replace(/'/g,"\\'")}')">✕</button>
+        </div>
+      </div>
+    `).join('');
+  }catch(e){
+    console.error(e);
+  }
+}
+
+async function deleteFile(name){
+  if(!confirm(`Delete "${name}"?`)) return;
+  const r = await fetch(`/api/rooms/${roomCode}/files/${encodeURIComponent(name)}`, {method:'DELETE'});
+  if(r.ok) toast('Deleted', 'success');
+}
+
+const dz = document.getElementById('dropZone');
+dz.ondragover = e => { e.preventDefault(); dz.classList.add('drag-over'); };
+dz.ondragleave = () => dz.classList.remove('drag-over');
+dz.ondrop = e => { e.preventDefault(); dz.classList.remove('drag-over'); uploadFiles([...e.dataTransfer.files]); };
+document.getElementById('fileInput').onchange = e => uploadFiles([...e.target.files]);
+
+async function uploadFiles(files){
+  if(!files.length || !roomCode) return;
+  for(let f of files){
+    const fd = new FormData(); fd.append('file', f);
+    await fetch(`/api/rooms/${roomCode}/upload`, { method:'POST', body:fd });
+  }
+  toast(`Uploaded ${files.length} file(s)`, 'success');
+}
+</script>
+</body>
+</html>