Upload 7 files

Dockerfile

@@ -0,0 +1,21 @@
+FROM python:3.11-slim
+
+WORKDIR /app
+
+RUN apt-get update && apt-get install -y --no-install-recommends \
+    gcc \
+    && rm -rf /var/lib/apt/lists/*
+
+COPY requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+
+COPY . .
+
+RUN mkdir -p /tmp/tds_uploads
+
+ENV PORT=7860
+ENV PYTHONUNBUFFERED=1
+
+EXPOSE 7860
+
+CMD ["python", "server.py"]

README.md

@@ -1,10 +1,44 @@
----
-title: Tds
-emoji: 📊
-colorFrom: gray
-colorTo: pink
-sdk: docker
-pinned: false
----
-
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# TDS Transfer
+
+**Secure QR-based file transfer. Files auto-delete in 5 minutes.**
+
+## Deploy on HuggingFace Spaces
+
+1. Create a new Space → Docker SDK
+2. Upload all files maintaining folder structure:
+   ```
+   tds-transfer/
+   ├── Dockerfile
+   ├── server.py
+   ├── requirements.txt
+   ├── templates/
+   │   └── index.html
+   └── static/
+       ├── css/style.css
+       └── js/app.js
+   ```
+3. Add Space secret: `APP_URL` = your HuggingFace Space URL  
+   Example: `https://yourname-tds-transfer.hf.space`
+
+4. Space auto-builds and deploys.
+
+## How it works
+
+- **Sender** generates a QR code (optionally attaches files)
+- **Receiver** scans QR with camera from the same app
+- Session lasts **5 minutes** then all files are permanently deleted
+- Works on any device — no install needed
+
+## Local dev
+
+```bash
+pip install -r requirements.txt
+python server.py
+# → http://localhost:7860
+```
+
+## Tech Stack
+- Flask + Flask-SocketIO (WebSockets for real-time)
+- jsQR (browser QR scanning)
+- qrcode (server QR generation)
+- Pure HTML/CSS/JS frontend — no framework

requirements.txt

@@ -0,0 +1,9 @@
+flask==3.0.3
+flask-socketio==5.3.6
+qrcode[pil]==7.4.2
+Pillow==10.4.0
+python-engineio==4.9.1
+python-socketio==5.11.3
+eventlet==0.36.1
+gunicorn==22.0.0
+Werkzeug==3.0.3

server.py

@@ -0,0 +1,167 @@
+import os
+import uuid
+import json
+import time
+import threading
+import qrcode
+import io
+import base64
+from datetime import datetime, timedelta
+from flask import Flask, request, jsonify, render_template, send_file
+from flask_socketio import SocketIO, emit, join_room
+from werkzeug.utils import secure_filename
+
+app = Flask(__name__)
+app.config['SECRET_KEY'] = os.environ.get('SECRET_KEY', 'tds-secret-2025')
+app.config['MAX_CONTENT_LENGTH'] = 500 * 1024 * 1024  # 500MB
+app.config['UPLOAD_FOLDER'] = '/tmp/tds_uploads'
+
+os.makedirs(app.config['UPLOAD_FOLDER'], exist_ok=True)
+
+socketio = SocketIO(app, cors_allowed_origins="*", async_mode='threading')
+
+# In-memory session store
+sessions = {}
+EXPIRY_SECONDS = 300  # 5 minutes
+
+def cleanup_expired():
+    while True:
+        time.sleep(30)
+        now = datetime.utcnow()
+        expired = [sid for sid, s in list(sessions.items()) if now > s['expires_at']]
+        for sid in expired:
+            s = sessions.pop(sid, {})
+            for f in s.get('files', []):
+                try:
+                    os.remove(f['path'])
+                except:
+                    pass
+            socketio.emit('session_expired', {'session_id': sid}, room=sid)
+
+threading.Thread(target=cleanup_expired, daemon=True).start()
+
+def generate_qr(data: str) -> str:
+    qr = qrcode.QRCode(version=1, box_size=8, border=2,
+                        error_correction=qrcode.constants.ERROR_CORRECT_H)
+    qr.add_data(data)
+    qr.make(fit=True)
+    img = qr.make_image(fill_color="white", back_color="black")
+    buf = io.BytesIO()
+    img.save(buf, format='PNG')
+    return base64.b64encode(buf.getvalue()).decode()
+
+@app.route('/')
+def index():
+    return render_template('index.html')
+
+@app.route('/api/session/create', methods=['POST'])
+def create_session():
+    data = request.json or {}
+    session_id = str(uuid.uuid4())
+    mode = data.get('mode', 'send')  # send | receive
+
+    user_info = {
+        'name': data.get('name', 'Anonymous'),
+        'cp': data.get('cp', ''),
+        'created_at': datetime.utcnow().isoformat()
+    }
+
+    sessions[session_id] = {
+        'id': session_id,
+        'mode': mode,
+        'user': user_info,
+        'files': [],
+        'created_at': datetime.utcnow(),
+        'expires_at': datetime.utcnow() + timedelta(seconds=EXPIRY_SECONDS),
+        'status': 'waiting',
+        'connected_peers': []
+    }
+
+    app_url = os.environ.get('APP_URL', request.host_url.rstrip('/'))
+    qr_url = f"{app_url}/session/{session_id}"
+    qr_img = generate_qr(qr_url)
+
+    return jsonify({
+        'session_id': session_id,
+        'qr_image': qr_img,
+        'qr_url': qr_url,
+        'expires_in': EXPIRY_SECONDS,
+        'mode': mode
+    })
+
+@app.route('/api/session/<session_id>', methods=['GET'])
+def get_session(session_id):
+    s = sessions.get(session_id)
+    if not s:
+        return jsonify({'error': 'Session not found or expired'}), 404
+    remaining = max(0, int((s['expires_at'] - datetime.utcnow()).total_seconds()))
+    return jsonify({
+        'session_id': session_id,
+        'mode': s['mode'],
+        'user': s['user'],
+        'status': s['status'],
+        'files': [{'name': f['name'], 'size': f['size'], 'type': f['type']} for f in s['files']],
+        'expires_in': remaining
+    })
+
+@app.route('/api/session/<session_id>/upload', methods=['POST'])
+def upload_file(session_id):
+    s = sessions.get(session_id)
+    if not s:
+        return jsonify({'error': 'Session expired'}), 404
+
+    uploaded = []
+    for file in request.files.getlist('files'):
+        filename = secure_filename(file.filename)
+        file_id = str(uuid.uuid4())
+        path = os.path.join(app.config['UPLOAD_FOLDER'], f"{file_id}_{filename}")
+        file.save(path)
+        size = os.path.getsize(path)
+        entry = {'id': file_id, 'name': filename, 'size': size,
+                 'type': file.content_type, 'path': path}
+        s['files'].append(entry)
+        uploaded.append({'name': filename, 'size': size, 'type': file.content_type})
+
+    s['status'] = 'ready'
+    socketio.emit('files_ready', {
+        'session_id': session_id,
+        'files': uploaded,
+        'user': s['user']
+    }, room=session_id)
+
+    return jsonify({'uploaded': len(uploaded), 'files': uploaded})
+
+@app.route('/api/session/<session_id>/download/<file_id>')
+def download_file(session_id, file_id):
+    s = sessions.get(session_id)
+    if not s:
+        return jsonify({'error': 'Session expired'}), 404
+    for f in s['files']:
+        if f['id'] == file_id:
+            return send_file(f['path'], as_attachment=True, download_name=f['name'])
+    return jsonify({'error': 'File not found'}), 404
+
+@app.route('/session/<session_id>')
+def session_page(session_id):
+    return render_template('index.html', prefill_session=session_id)
+
+@socketio.on('join_session')
+def on_join(data):
+    session_id = data.get('session_id')
+    if session_id in sessions:
+        join_room(session_id)
+        s = sessions[session_id]
+        s['connected_peers'].append(request.sid)
+        emit('peer_joined', {'session_id': session_id, 'status': s['status']}, room=session_id)
+
+@socketio.on('ping_session')
+def on_ping(data):
+    session_id = data.get('session_id')
+    if session_id in sessions:
+        s = sessions[session_id]
+        remaining = max(0, int((s['expires_at'] - datetime.utcnow()).total_seconds()))
+        emit('session_tick', {'expires_in': remaining, 'status': s['status']})
+
+if __name__ == '__main__':
+    port = int(os.environ.get('PORT', 7860))
+    socketio.run(app, host='0.0.0.0', port=port, debug=False)

static/css/style.css

@@ -0,0 +1,536 @@
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+:root {
+  --black: #080808;
+  --white: #ffffff;
+  --gray1: #111111;
+  --gray2: #1a1a1a;
+  --gray3: #2a2a2a;
+  --gray4: #444444;
+  --gray5: #888888;
+  --gray6: #bbbbbb;
+  --accent: #ffffff;
+  --blur: blur(3.5px);
+  --glass-bg: rgba(255,255,255,0.04);
+  --glass-border: rgba(255,255,255,0.09);
+  --radius: 16px;
+  --radius-sm: 10px;
+}
+
+html, body {
+  height: 100%;
+  background: var(--black);
+  color: var(--white);
+  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  font-size: 16px;
+  line-height: 1.6;
+  overflow-x: hidden;
+}
+
+/* Noise texture overlay */
+.noise {
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  z-index: 0;
+  opacity: 0.03;
+  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E");
+  background-size: 200px 200px;
+}
+
+/* HEADER */
+header {
+  position: fixed;
+  top: 0; left: 0; right: 0;
+  z-index: 100;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 18px 32px;
+  background: rgba(8,8,8,0.7);
+  backdrop-filter: var(--blur);
+  -webkit-backdrop-filter: var(--blur);
+  border-bottom: 0.5px solid var(--glass-border);
+}
+
+.logo {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  font-size: 18px;
+  font-weight: 700;
+  letter-spacing: 1px;
+}
+.logo em { font-style: normal; color: var(--gray5); font-weight: 400; }
+
+.status-bar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 12px;
+  color: var(--gray5);
+  letter-spacing: 1px;
+}
+.dot {
+  width: 7px; height: 7px;
+  border-radius: 50%;
+  background: var(--gray4);
+  display: inline-block;
+}
+.dot.connected { background: #4ade80; box-shadow: 0 0 6px #4ade80aa; }
+.dot.green { background: #4ade80; }
+
+/* MAIN */
+main {
+  min-height: 100vh;
+  padding-top: 80px;
+  position: relative;
+  z-index: 1;
+}
+
+/* VIEWS */
+.view {
+  display: none;
+  padding: 48px 32px;
+  max-width: 520px;
+  margin: 0 auto;
+  animation: fadeUp 0.4s ease;
+}
+.view.active { display: block; }
+
+@keyframes fadeUp {
+  from { opacity: 0; transform: translateY(20px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+
+/* HERO */
+.hero { margin-bottom: 52px; }
+.hero h1 {
+  font-size: clamp(42px, 8vw, 64px);
+  font-weight: 700;
+  line-height: 1.05;
+  letter-spacing: -2px;
+  margin-bottom: 16px;
+}
+.hero p { font-size: 15px; color: var(--gray5); }
+.hero strong { color: var(--white); }
+
+/* ACTION GRID */
+.action-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 16px;
+}
+
+.card-btn {
+  background: var(--glass-bg);
+  border: 0.5px solid var(--glass-border);
+  backdrop-filter: var(--blur);
+  -webkit-backdrop-filter: var(--blur);
+  border-radius: var(--radius);
+  padding: 28px 24px;
+  cursor: pointer;
+  color: var(--white);
+  text-align: left;
+  transition: background 0.2s, border-color 0.2s, transform 0.15s;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+.card-btn:hover {
+  background: rgba(255,255,255,0.08);
+  border-color: rgba(255,255,255,0.18);
+  transform: translateY(-2px);
+}
+.card-btn:active { transform: scale(0.98); }
+
+.card-icon {
+  width: 44px; height: 44px;
+  border: 0.5px solid var(--glass-border);
+  border-radius: var(--radius-sm);
+  display: flex; align-items: center; justify-content: center;
+}
+.card-icon svg { width: 22px; height: 22px; }
+
+.card-title { font-size: 16px; font-weight: 600; }
+.card-sub { font-size: 12px; color: var(--gray5); }
+
+/* BACK BAR */
+.back-bar { margin-bottom: 28px; }
+.back-bar button {
+  background: none;
+  border: none;
+  color: var(--gray5);
+  cursor: pointer;
+  font-size: 14px;
+  letter-spacing: 0.5px;
+  padding: 0;
+  transition: color 0.2s;
+}
+.back-bar button:hover { color: var(--white); }
+
+h2 {
+  font-size: 28px;
+  font-weight: 700;
+  letter-spacing: -0.5px;
+  margin-bottom: 28px;
+}
+
+/* FORM GLASS */
+.form-glass {
+  background: var(--glass-bg);
+  border: 0.5px solid var(--glass-border);
+  backdrop-filter: var(--blur);
+  -webkit-backdrop-filter: var(--blur);
+  border-radius: var(--radius);
+  padding: 32px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+label { font-size: 12px; color: var(--gray5); letter-spacing: 1px; text-transform: uppercase; }
+
+input[type=text] {
+  background: rgba(255,255,255,0.05);
+  border: 0.5px solid var(--glass-border);
+  border-radius: var(--radius-sm);
+  color: var(--white);
+  font-size: 15px;
+  padding: 12px 16px;
+  outline: none;
+  width: 100%;
+  transition: border-color 0.2s;
+  font-family: inherit;
+}
+input[type=text]:focus { border-color: rgba(255,255,255,0.35); }
+input[type=text]::placeholder { color: var(--gray4); }
+
+/* BUTTONS */
+.btn-primary {
+  background: var(--white);
+  color: var(--black);
+  border: none;
+  border-radius: var(--radius-sm);
+  padding: 14px 28px;
+  font-size: 15px;
+  font-weight: 700;
+  cursor: pointer;
+  width: 100%;
+  margin-top: 8px;
+  transition: opacity 0.2s, transform 0.15s;
+  letter-spacing: 0.3px;
+}
+.btn-primary:hover { opacity: 0.9; }
+.btn-primary:active { transform: scale(0.98); }
+
+/* QR */
+.qr-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 20px;
+  margin-bottom: 32px;
+}
+#qr-img {
+  width: 220px; height: 220px;
+  border-radius: var(--radius);
+  border: 0.5px solid var(--glass-border);
+  background: #fff;
+  padding: 8px;
+}
+
+.qr-timer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  font-size: 12px;
+  color: var(--gray5);
+  letter-spacing: 1px;
+  gap: 2px;
+}
+#qr-countdown {
+  font-size: 22px;
+  font-weight: 700;
+  color: var(--white);
+  font-variant-numeric: tabular-nums;
+}
+
+/* DROP ZONE */
+.file-drop-zone {
+  border: 0.5px dashed var(--gray3);
+  border-radius: var(--radius);
+  padding: 32px;
+  text-align: center;
+  cursor: pointer;
+  transition: border-color 0.2s, background 0.2s;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
+  color: var(--gray5);
+  margin-bottom: 20px;
+}
+.file-drop-zone:hover {
+  border-color: var(--gray5);
+  background: var(--glass-bg);
+}
+.file-drop-zone p { font-size: 14px; }
+.file-drop-zone small { font-size: 12px; color: var(--gray4); }
+
+.peer-status {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 13px;
+  color: #4ade80;
+  justify-content: center;
+  margin-top: 16px;
+}
+.peer-status.hidden { display: none; }
+
+/* CAMERA */
+.camera-wrap {
+  position: relative;
+  border-radius: var(--radius);
+  overflow: hidden;
+  background: var(--gray1);
+  aspect-ratio: 1;
+  max-width: 380px;
+  margin: 0 auto;
+}
+#camera-feed {
+  width: 100%; height: 100%;
+  object-fit: cover;
+  display: block;
+}
+.scan-frame {
+  position: absolute;
+  inset: 30px;
+  pointer-events: none;
+}
+.corner {
+  position: absolute;
+  width: 24px; height: 24px;
+  border-color: white;
+  border-style: solid;
+  opacity: 0.8;
+}
+.corner.tl { top: 0; left: 0; border-width: 2px 0 0 2px; }
+.corner.tr { top: 0; right: 0; border-width: 2px 2px 0 0; }
+.corner.bl { bottom: 0; left: 0; border-width: 0 0 2px 2px; }
+.corner.br { bottom: 0; right: 0; border-width: 0 2px 2px 0; }
+
+.scan-line {
+  position: absolute;
+  left: 0; right: 0;
+  height: 1.5px;
+  background: white;
+  opacity: 0.6;
+  animation: scanMove 2.5s ease-in-out infinite;
+}
+@keyframes scanMove {
+  0%,100% { top: 0; }
+  50% { top: 100%; }
+}
+
+.cam-overlay {
+  position: absolute;
+  inset: 0;
+  background: rgba(8,8,8,0.7);
+  backdrop-filter: var(--blur);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 20px;
+  color: var(--gray6);
+  font-size: 14px;
+  letter-spacing: 1px;
+}
+.cam-overlay.hidden { display: none; }
+
+/* PROCESSING */
+.process-center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 60vh;
+  gap: 24px;
+  text-align: center;
+}
+.process-center h2 { font-size: 24px; margin-bottom: 0; }
+.process-center p { color: var(--gray5); font-size: 14px; }
+
+.process-steps {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  margin-top: 16px;
+  width: 100%;
+  max-width: 280px;
+}
+.step {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  font-size: 13px;
+  color: var(--gray4);
+  transition: color 0.4s;
+  letter-spacing: 0.5px;
+}
+.step.done { color: var(--white); }
+.step-dot {
+  width: 8px; height: 8px;
+  border-radius: 50%;
+  background: var(--gray3);
+  border: 1px solid var(--gray4);
+  flex-shrink: 0;
+  transition: background 0.4s, border-color 0.4s;
+}
+.step.done .step-dot { background: var(--white); border-color: var(--white); }
+
+/* TRANSFER */
+.transfer-header {
+  text-align: center;
+  margin-bottom: 32px;
+}
+.transfer-anim {
+  display: flex;
+  justify-content: center;
+  margin-bottom: 24px;
+}
+.transfer-header h2 { font-size: 26px; }
+.transfer-header p { color: var(--gray5); font-size: 14px; }
+.transfer-header strong { color: var(--white); }
+
+.files-list {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  margin-bottom: 24px;
+}
+.file-item {
+  background: var(--glass-bg);
+  border: 0.5px solid var(--glass-border);
+  backdrop-filter: var(--blur);
+  border-radius: var(--radius-sm);
+  padding: 16px 20px;
+  display: flex;
+  align-items: center;
+  gap: 14px;
+}
+.file-icon {
+  width: 36px; height: 36px;
+  border: 0.5px solid var(--glass-border);
+  border-radius: 8px;
+  display: flex; align-items: center; justify-content: center;
+  flex-shrink: 0;
+}
+.file-name { font-size: 14px; font-weight: 500; flex: 1; word-break: break-all; }
+.file-size { font-size: 12px; color: var(--gray5); flex-shrink: 0; }
+
+.expire-note {
+  text-align: center;
+  font-size: 12px;
+  color: var(--gray4);
+  margin-top: 14px;
+  letter-spacing: 0.5px;
+}
+#dl-countdown { color: var(--white); font-weight: 600; }
+
+/* SUCCESS */
+.success-center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 70vh;
+  text-align: center;
+  gap: 16px;
+}
+.success-icon {
+  width: 80px; height: 80px;
+  border-radius: 50%;
+  border: 0.5px solid var(--glass-border);
+  background: var(--glass-bg);
+  backdrop-filter: var(--blur);
+  display: flex; align-items: center; justify-content: center;
+  margin-bottom: 8px;
+}
+.success-center h2 { font-size: 28px; }
+.success-center p { color: var(--gray5); }
+
+/* ---- ANIMATION 1: pulsing rings ---- */
+.loader-anim1 {
+  width: 52px; height: 52px;
+  display: inline-block;
+  position: relative;
+  flex-shrink: 0;
+}
+.loader-anim1::after, .loader-anim1::before {
+  content: '';
+  box-sizing: border-box;
+  width: 52px; height: 52px;
+  border-radius: 50%;
+  border: 2px solid #fff;
+  position: absolute;
+  left: 0; top: 0;
+  animation: anim1 2s linear infinite;
+}
+.loader-anim1::after { animation-delay: 1s; }
+@keyframes anim1 {
+  0%   { transform: scale(0); opacity: 1; }
+  100% { transform: scale(1); opacity: 0; }
+}
+
+/* ---- ANIMATION 2: data stream bars ---- */
+.loader-anim2 {
+  display: flex;
+  align-items: flex-end;
+  gap: 5px;
+  height: 52px;
+}
+.loader-anim2::before,
+.loader-anim2::after {
+  content: '';
+  display: block;
+}
+.bar {
+  width: 6px;
+  background: white;
+  border-radius: 2px;
+  animation: barPulse 1.2s ease-in-out infinite;
+}
+.bar:nth-child(1) { animation-delay: 0s;    height: 20px; }
+.bar:nth-child(2) { animation-delay: 0.15s; height: 32px; }
+.bar:nth-child(3) { animation-delay: 0.3s;  height: 48px; }
+.bar:nth-child(4) { animation-delay: 0.45s; height: 36px; }
+.bar:nth-child(5) { animation-delay: 0.6s;  height: 24px; }
+.bar:nth-child(6) { animation-delay: 0.75s; height: 40px; }
+.bar:nth-child(7) { animation-delay: 0.9s;  height: 28px; }
+
+@keyframes barPulse {
+  0%, 100% { opacity: 0.2; transform: scaleY(0.5); }
+  50%       { opacity: 1;   transform: scaleY(1); }
+}
+
+/* INFO BOX */
+.info-box {
+  background: var(--glass-bg);
+  border: 0.5px solid var(--glass-border);
+  border-radius: var(--radius-sm);
+  padding: 16px 20px;
+  font-size: 13px;
+  color: var(--gray5);
+  margin-bottom: 20px;
+  line-height: 1.7;
+}
+.info-box strong { color: var(--white); }
+
+@media (max-width: 480px) {
+  .action-grid { grid-template-columns: 1fr; }
+  header { padding: 16px 20px; }
+  .view { padding: 32px 20px; }
+}

static/js/app.js

@@ -0,0 +1,311 @@
+const socket = io();
+let currentSession = null;
+let currentMode = null;
+let countdownInterval = null;
+let scanInterval = null;
+let cameraStream = null;
+let selectedFiles = [];
+
+// --- SOCKET SETUP ---
+socket.on('connect', () => {
+  document.getElementById('conn-dot').className = 'dot connected';
+  document.getElementById('conn-label').textContent = 'Connected';
+});
+socket.on('disconnect', () => {
+  document.getElementById('conn-dot').className = 'dot';
+  document.getElementById('conn-label').textContent = 'Disconnected';
+});
+socket.on('peer_joined', (data) => {
+  document.getElementById('peer-status').classList.remove('hidden');
+});
+socket.on('files_ready', (data) => {
+  if (currentMode === 'receive') showTransfer(data);
+});
+socket.on('session_expired', () => {
+  alert('Session expired. Files deleted.');
+  goHome();
+});
+socket.on('session_tick', (data) => {
+  updateCountdown(data.expires_in);
+});
+
+// --- NAVIGATION ---
+function showView(id) {
+  document.querySelectorAll('.view').forEach(v => v.classList.remove('active'));
+  document.getElementById(id).classList.add('active');
+  window.scrollTo(0, 0);
+}
+
+function goHome() {
+  stopCamera();
+  clearInterval(countdownInterval);
+  currentSession = null;
+  currentMode = null;
+  selectedFiles = [];
+  showView('view-home');
+}
+
+// --- HOME ACTIONS ---
+function startFlow(mode) {
+  currentMode = mode;
+  document.getElementById('setup-title').textContent = mode === 'send' ? 'Who\'s sending?' : 'Who\'s receiving?';
+  document.getElementById('setup-btn').textContent = mode === 'send' ? 'Generate QR →' : 'Open Camera →';
+  showView('view-setup');
+}
+
+function generateCP() {
+  return Math.floor(10000000 + Math.random() * 89999999).toString();
+}
+
+async function confirmSetup() {
+  const name = document.getElementById('input-name').value.trim() || 'Anonymous';
+  const cp = document.getElementById('input-cp').value.trim() || generateCP();
+
+  if (currentMode === 'send') {
+    await createSendSession(name, cp);
+  } else {
+    await openCamera(name, cp);
+  }
+}
+
+// --- SENDER FLOW ---
+async function createSendSession(name, cp) {
+  showView('view-qr');
+  try {
+    const res = await fetch('/api/session/create', {
+      method: 'POST',
+      headers: {'Content-Type': 'application/json'},
+      body: JSON.stringify({mode: 'send', name, cp})
+    });
+    const data = await res.json();
+    currentSession = data;
+
+    document.getElementById('qr-img').src = `data:image/png;base64,${data.qr_image}`;
+    socket.emit('join_session', {session_id: data.session_id});
+    startCountdown(data.expires_in, 'qr-countdown');
+  } catch (e) {
+    alert('Failed to create session. Check server.');
+    goHome();
+  }
+}
+
+function handleDrop(e) {
+  e.preventDefault();
+  addFiles([...e.dataTransfer.files]);
+}
+
+function handleFileSelect(input) {
+  addFiles([...input.files]);
+}
+
+function addFiles(files) {
+  selectedFiles = [...selectedFiles, ...files];
+  const label = document.getElementById('files-attached');
+  label.textContent = `${selectedFiles.length} file(s) attached — ${formatBytes(selectedFiles.reduce((a,f) => a+f.size, 0))}`;
+  if (currentSession) uploadFiles();
+}
+
+async function uploadFiles() {
+  if (!currentSession || selectedFiles.length === 0) return;
+  const form = new FormData();
+  selectedFiles.forEach(f => form.append('files', f));
+  try {
+    await fetch(`/api/session/${currentSession.session_id}/upload`, {
+      method: 'POST', body: form
+    });
+  } catch (e) { console.error('Upload failed', e); }
+}
+
+// --- RECEIVER FLOW ---
+async function openCamera() {
+  showView('view-scan');
+  try {
+    cameraStream = await navigator.mediaDevices.getUserMedia({video: {facingMode: 'environment'}});
+    const video = document.getElementById('camera-feed');
+    video.srcObject = cameraStream;
+    video.play();
+    scanInterval = setInterval(() => scanFrame(video), 200);
+  } catch (e) {
+    alert('Camera access denied. Cannot scan QR.');
+    goHome();
+  }
+}
+
+function scanFrame(video) {
+  if (video.readyState !== video.HAVE_ENOUGH_DATA) return;
+  const canvas = document.createElement('canvas');
+  canvas.width = video.videoWidth;
+  canvas.height = video.videoHeight;
+  const ctx = canvas.getContext('2d');
+  ctx.drawImage(video, 0, 0);
+  const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+  const code = jsQR(imageData.data, imageData.width, imageData.height, {inversionAttempts: 'dontInvert'});
+  if (code) {
+    clearInterval(scanInterval);
+    stopCamera();
+    processScannedURL(code.data);
+  }
+}
+
+function stopCamera() {
+  clearInterval(scanInterval);
+  if (cameraStream) {
+    cameraStream.getTracks().forEach(t => t.stop());
+    cameraStream = null;
+  }
+}
+
+async function processScannedURL(url) {
+  showView('view-processing');
+  let sessionId = null;
+  try {
+    const u = new URL(url);
+    const parts = u.pathname.split('/');
+    sessionId = parts[parts.length - 1];
+  } catch {
+    sessionId = url;
+  }
+
+  await simulateStep('step1', 1000);
+  await simulateStep('step2', 1500);
+
+  try {
+    const res = await fetch(`/api/session/${sessionId}`);
+    if (!res.ok) throw new Error('Session not found');
+    const data = await res.json();
+    socket.emit('join_session', {session_id: sessionId});
+    currentSession = {session_id: sessionId};
+
+    await simulateStep('step3', 800);
+
+    if (data.files && data.files.length > 0) {
+      showTransfer({session_id: sessionId, user: data.user, files: data.files, expires_in: data.expires_in});
+    } else {
+      showReceiveWaiting(sessionId, data.user, data.expires_in);
+    }
+  } catch (e) {
+    alert('Session expired or not found.');
+    goHome();
+  }
+}
+
+async function receiveFromSession(sessionId) {
+  currentMode = 'receive';
+  currentSession = {session_id: sessionId};
+  showView('view-processing');
+  await simulateStep('step1', 600);
+  await simulateStep('step2', 1000);
+  try {
+    const res = await fetch(`/api/session/${sessionId}`);
+    if (!res.ok) throw new Error();
+    const data = await res.json();
+    socket.emit('join_session', {session_id: sessionId});
+    await simulateStep('step3', 600);
+    if (data.files && data.files.length > 0) {
+      showTransfer({session_id: sessionId, user: data.user, files: data.files, expires_in: data.expires_in});
+    } else {
+      showReceiveWaiting(sessionId, data.user, data.expires_in);
+    }
+  } catch {
+    alert('Session not found.');
+    goHome();
+  }
+}
+
+function simulateStep(stepId, delay) {
+  return new Promise(resolve => {
+    setTimeout(() => {
+      const el = document.getElementById(stepId);
+      if (el) el.classList.add('done');
+      resolve();
+    }, delay);
+  });
+}
+
+function showReceiveWaiting(sessionId, user, expiresIn) {
+  document.getElementById('proc-title').textContent = 'Waiting for files...';
+  document.getElementById('proc-sub').textContent = `Connected to ${user?.name || 'sender'}`;
+  startCountdown(expiresIn || 300, null);
+}
+
+function showTransfer(data) {
+  showView('view-transfer');
+  document.getElementById('sender-name').textContent = data.user?.name || 'Unknown';
+
+  // Build animation 2
+  const animEl = document.getElementById('transfer-anim');
+  animEl.innerHTML = '<div class="loader-anim2">' + Array(7).fill('<div class="bar"></div>').join('') + '</div>';
+
+  const list = document.getElementById('files-list');
+  list.innerHTML = '';
+
+  if (data.files && data.files.length > 0) {
+    data.files.forEach(f => {
+      const item = document.createElement('div');
+      item.className = 'file-item';
+      item.innerHTML = `
+        <div class="file-icon">
+          <svg viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="1.2" width="18" height="18">
+            <path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/>
+            <polyline points="14 2 14 8 20 8"/>
+          </svg>
+        </div>
+        <span class="file-name">${f.name}</span>
+        <span class="file-size">${formatBytes(f.size)}</span>
+      `;
+      list.appendChild(item);
+    });
+  } else {
+    list.innerHTML = `<div class="info-box">No files attached — only sender info shared.<br/><strong>From:</strong> ${data.user?.name || '—'}</div>`;
+    document.getElementById('download-all-btn').style.display = 'none';
+  }
+
+  startCountdown(data.expires_in || 300, 'dl-countdown');
+}
+
+async function downloadAll() {
+  if (!currentSession) return;
+  const res = await fetch(`/api/session/${currentSession.session_id}`);
+  const data = await res.json();
+  for (const f of (data.files || [])) {
+    const a = document.createElement('a');
+    a.href = `/api/session/${currentSession.session_id}/download/${f.id || ''}`;
+    a.download = f.name;
+    a.click();
+    await new Promise(r => setTimeout(r, 400));
+  }
+  setTimeout(() => showView('view-success'), 1000);
+}
+
+// --- UTILS ---
+function startCountdown(seconds, elementId) {
+  clearInterval(countdownInterval);
+  let remaining = seconds;
+  function tick() {
+    const m = Math.floor(remaining / 60);
+    const s = remaining % 60;
+    const str = `${m}:${s.toString().padStart(2, '0')}`;
+    if (elementId) {
+      const el = document.getElementById(elementId);
+      if (el) el.textContent = str;
+    }
+    if (currentSession) {
+      socket.emit('ping_session', {session_id: currentSession.session_id});
+    }
+    if (remaining <= 0) { clearInterval(countdownInterval); return; }
+    remaining--;
+  }
+  tick();
+  countdownInterval = setInterval(tick, 1000);
+}
+
+function updateCountdown(secs) {
+  // sync from server
+}
+
+function formatBytes(bytes) {
+  if (!bytes) return '—';
+  if (bytes < 1024) return bytes + ' B';
+  if (bytes < 1048576) return (bytes / 1024).toFixed(1) + ' KB';
+  return (bytes / 1048576).toFixed(1) + ' MB';
+}

templates/index.html

@@ -0,0 +1,172 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8"/>
+<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+<title>TDS Transfer</title>
+<link rel="stylesheet" href="/static/css/style.css"/>
+<script src="https://cdn.jsdelivr.net/npm/socket.io-client@4.7.2/dist/socket.io.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/jsqr@1.4.0/dist/jsQR.js"></script>
+</head>
+<body>
+
+<div class="noise"></div>
+
+<header>
+  <div class="logo">
+    <svg width="32" height="32" viewBox="0 0 32 32" fill="none">
+      <line x1="4" y1="8" x2="18" y2="8" stroke="white" stroke-width="2.5" stroke-linecap="square"/>
+      <line x1="11" y1="8" x2="11" y2="24" stroke="white" stroke-width="2.5" stroke-linecap="square"/>
+      <path d="M20,8 L20,24 M20,8 L26,8 Q30,8 30,14 Q30,20 26,20 L20,20" stroke="white" stroke-width="2.5" stroke-linecap="square" stroke-linejoin="round" fill="none"/>
+    </svg>
+    <span>TDS <em>Transfer</em></span>
+  </div>
+  <div class="status-bar">
+    <span class="dot" id="conn-dot"></span>
+    <span id="conn-label">Connecting...</span>
+  </div>
+</header>
+
+<main>
+
+  <!-- HOME -->
+  <section id="view-home" class="view active">
+    <div class="hero">
+      <h1>Secure<br/>File Transfer</h1>
+      <p>Instant. Encrypted in transit. Auto-deleted in <strong>5 minutes</strong>.</p>
+    </div>
+    <div class="action-grid">
+      <button class="card-btn" onclick="startFlow('send')">
+        <div class="card-icon">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+            <path d="M12 19V5M5 12l7-7 7 7"/>
+          </svg>
+        </div>
+        <span class="card-title">Send Files</span>
+        <span class="card-sub">Generate QR → receiver scans</span>
+      </button>
+      <button class="card-btn" onclick="startFlow('receive')">
+        <div class="card-icon">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+            <path d="M12 5v14M5 12l7 7 7-7"/>
+          </svg>
+        </div>
+        <span class="card-title">Receive Files</span>
+        <span class="card-sub">Scan QR from sender</span>
+      </button>
+    </div>
+  </section>
+
+  <!-- SETUP -->
+  <section id="view-setup" class="view">
+    <div class="back-bar"><button onclick="goHome()">← Back</button></div>
+    <h2 id="setup-title">Setup</h2>
+    <div class="form-glass">
+      <label>Your name</label>
+      <input type="text" id="input-name" placeholder="Ex: Ion Popescu" autocomplete="off"/>
+      <label>Personal Code (optional)</label>
+      <input type="text" id="input-cp" placeholder="Auto-generated if empty" autocomplete="off"/>
+      <button class="btn-primary" id="setup-btn" onclick="confirmSetup()">Continue →</button>
+    </div>
+  </section>
+
+  <!-- QR SHOW (sender) -->
+  <section id="view-qr" class="view">
+    <div class="back-bar"><button onclick="goHome()">← Cancel</button></div>
+    <h2>Share this QR</h2>
+    <div class="qr-wrap">
+      <img id="qr-img" src="" alt="QR Code"/>
+      <div class="qr-timer">
+        <span id="qr-countdown">5:00</span>
+        <span>remaining</span>
+      </div>
+    </div>
+    <div class="file-drop-zone" id="drop-zone"
+         onclick="document.getElementById('file-input').click()"
+         ondragover="event.preventDefault()"
+         ondrop="handleDrop(event)">
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.2" width="40" height="40">
+        <path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M17 8l-5-5-5 5M12 3v12"/>
+      </svg>
+      <p>Drop files here or click to attach</p>
+      <small id="files-attached">No files attached — only your info will be shared</small>
+    </div>
+    <input type="file" id="file-input" multiple style="display:none" onchange="handleFileSelect(this)"/>
+    <div id="peer-status" class="peer-status hidden">
+      <span class="dot green"></span> Receiver connected
+    </div>
+  </section>
+
+  <!-- SCANNING -->
+  <section id="view-scan" class="view">
+    <div class="back-bar"><button onclick="goHome()">← Cancel</button></div>
+    <h2>Scan QR Code</h2>
+    <div class="camera-wrap">
+      <video id="camera-feed" autoplay playsinline muted></video>
+      <div class="scan-frame">
+        <div class="corner tl"></div>
+        <div class="corner tr"></div>
+        <div class="corner bl"></div>
+        <div class="corner br"></div>
+        <div class="scan-line"></div>
+      </div>
+      <div class="cam-overlay" id="scan-overlay">
+        <div class="loader-anim1"></div>
+        <p>Scanning...</p>
+      </div>
+    </div>
+  </section>
+
+  <!-- PROCESSING -->
+  <section id="view-processing" class="view">
+    <div class="process-center">
+      <div class="loader-anim1" id="proc-loader"></div>
+      <h2 id="proc-title">Connecting to session...</h2>
+      <p id="proc-sub">Establishing secure channel</p>
+      <div class="process-steps">
+        <div class="step" id="step1"><span class="step-dot"></span> QR Decoded</div>
+        <div class="step" id="step2"><span class="step-dot"></span> Session Verified</div>
+        <div class="step" id="step3"><span class="step-dot"></span> Files Ready</div>
+      </div>
+    </div>
+  </section>
+
+  <!-- TRANSFER READY -->
+  <section id="view-transfer" class="view">
+    <div class="transfer-header">
+      <div class="transfer-anim" id="transfer-anim">
+        <div class="loader-anim2"></div>
+      </div>
+      <h2 id="transfer-title">Transfer Ready</h2>
+      <p id="transfer-sub">From: <strong id="sender-name">—</strong></p>
+    </div>
+    <div id="files-list" class="files-list"></div>
+    <button class="btn-primary" id="download-all-btn" onclick="downloadAll()">Download All</button>
+    <p class="expire-note">Files auto-delete in <span id="dl-countdown">5:00</span></p>
+  </section>
+
+  <!-- SUCCESS -->
+  <section id="view-success" class="view">
+    <div class="success-center">
+      <div class="success-icon">
+        <svg viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" width="48" height="48">
+          <polyline points="20 6 9 17 4 12"/>
+        </svg>
+      </div>
+      <h2>Transfer Complete</h2>
+      <p>Files delivered successfully.</p>
+      <button class="btn-primary" onclick="goHome()">New Transfer</button>
+    </div>
+  </section>
+
+</main>
+
+<script src="/static/js/app.js"></script>
+<script>
+  const prefillSession = "{{ prefill_session if prefill_session else '' }}";
+  if (prefillSession) {
+    window.addEventListener('load', () => receiveFromSession(prefillSession));
+  }
+</script>
+</body>
+</html>