Upload 4 files

app.py

@@ -0,0 +1,65 @@
+from flask import Flask, request, send_file, jsonify, render_template
+from flask_cors import CORS
+from PIL import Image
+import img2pdf
+import io
+
+app = Flask(__name__)
+CORS(app)
+
+FREE_IMAGE_LIMIT = 15
+
+# ✅ HOME PAGE (FIX FOR "NOT FOUND")
+@app.route("/")
+def home():
+    return render_template("index.html")
+
+
+@app.route("/convert", methods=["POST"])
+def convert():
+    files = request.files.getlist("images")
+
+    if not files or len(files) == 0:
+        return jsonify({"error": "No images provided."}), 400
+
+    if len(files) > FREE_IMAGE_LIMIT:
+        return jsonify({
+            "error": "limit_exceeded",
+            "message": f"Free plan allows up to {FREE_IMAGE_LIMIT} images.",
+            "count": len(files),
+            "limit": FREE_IMAGE_LIMIT
+        }), 403
+
+    image_bytes_list = []
+
+    for f in files:
+        try:
+            img = Image.open(f.stream)
+
+            if img.mode in ("RGBA", "P", "LA"):
+                img = img.convert("RGB")
+
+            buf = io.BytesIO()
+            img.save(buf, format="JPEG", quality=95)
+            buf.seek(0)
+
+            image_bytes_list.append(buf.read())
+
+        except Exception as e:
+            return jsonify({"error": f"Error in {f.filename}: {str(e)}"}), 400
+
+    try:
+        pdf_bytes = img2pdf.convert(image_bytes_list)
+    except Exception as e:
+        return jsonify({"error": f"PDF conversion failed: {str(e)}"}), 500
+
+    return send_file(
+        io.BytesIO(pdf_bytes),
+        mimetype="application/pdf",
+        as_attachment=True,
+        download_name="converted.pdf"
+    )
+
+
+if __name__ == "__main__":
+    app.run(debug=True, port=5000)

requirements.txt

@@ -0,0 +1,4 @@
+flask
+flask-cors
+Pillow
+img2pdf

static/style.css

@@ -0,0 +1,422 @@
+/* ── Reset & Base ────────────────────────────────────────── */
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+:root {
+  --bg: #f5f4f0;
+  --surface: #ffffff;
+  --surface2: #f9f8f5;
+  --border: rgba(0,0,0,0.10);
+  --border-strong: rgba(0,0,0,0.18);
+  --text-primary: #1a1a1a;
+  --text-secondary: #6b6b68;
+  --text-muted: #9b9b98;
+  --accent: #5048c8;
+  --accent-light: #eeedfe;
+  --accent-text: #3c3489;
+  --danger: #e24b4a;
+  --danger-light: #fcebeb;
+  --danger-text: #a32d2d;
+  --success: #1d9e75;
+  --success-light: #e1f5ee;
+  --success-text: #085041;
+  --amber: #ba7517;
+  --amber-light: #faeeda;
+  --amber-text: #633806;
+  --radius-sm: 6px;
+  --radius-md: 8px;
+  --radius-lg: 14px;
+  --radius-xl: 20px;
+  --shadow: 0 2px 12px rgba(0,0,0,0.08), 0 0 0 0.5px rgba(0,0,0,0.08);
+}
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  background: var(--bg);
+  color: var(--text-primary);
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 2rem 1rem 4rem;
+  line-height: 1.6;
+}
+
+/* ── Header ─────────────────────────────────────────────── */
+header {
+  text-align: center;
+  margin-bottom: 2.5rem;
+}
+
+.logo-wrap {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 60px; height: 60px;
+  background: var(--accent-light);
+  border-radius: var(--radius-lg);
+  border: 0.5px solid rgba(83,74,183,0.2);
+  margin-bottom: 1rem;
+}
+
+.logo-wrap svg { width: 30px; height: 30px; }
+
+header h1 {
+  font-size: 26px;
+  font-weight: 600;
+  color: var(--text-primary);
+  letter-spacing: -0.3px;
+}
+
+header p {
+  font-size: 15px;
+  color: var(--text-secondary);
+  margin-top: 4px;
+}
+
+/* ── Main card ───────────────────────────────────────────── */
+main {
+  width: 100%;
+  max-width: 720px;
+}
+
+.card {
+  background: var(--surface);
+  border-radius: var(--radius-xl);
+  border: 0.5px solid var(--border);
+  box-shadow: var(--shadow);
+  padding: 2rem;
+}
+
+/* ── Drop zone ───────────────────────────────────────────── */
+#drop-zone {
+  border: 1.5px dashed var(--border-strong);
+  border-radius: var(--radius-lg);
+  padding: 3rem 2rem;
+  text-align: center;
+  cursor: pointer;
+  transition: border-color 0.15s, background 0.15s;
+  background: var(--surface2);
+  position: relative;
+}
+
+#drop-zone:hover, #drop-zone.drag-over {
+  border-color: var(--accent);
+  background: var(--accent-light);
+}
+
+#drop-zone input[type="file"] {
+  position: absolute; inset: 0;
+  opacity: 0; cursor: pointer; width: 100%; height: 100%;
+}
+
+.drop-icon {
+  width: 48px; height: 48px;
+  margin: 0 auto 1rem;
+  background: var(--accent-light);
+  border-radius: var(--radius-md);
+  display: flex; align-items: center; justify-content: center;
+  border: 0.5px solid rgba(83,74,183,0.2);
+}
+
+.drop-icon svg { width: 24px; height: 24px; }
+
+#drop-zone h2 {
+  font-size: 16px;
+  font-weight: 500;
+  color: var(--text-primary);
+  margin-bottom: 4px;
+}
+
+#drop-zone p {
+  font-size: 13px;
+  color: var(--text-muted);
+}
+
+/* ── Limit badge ─────────────────────────────────────────── */
+.limit-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  background: var(--amber-light);
+  color: var(--amber-text);
+  font-size: 12px;
+  font-weight: 500;
+  padding: 4px 10px;
+  border-radius: 99px;
+  margin-top: 0.75rem;
+  border: 0.5px solid rgba(186,117,23,0.2);
+}
+
+/* ── Counter bar ─────────────────────────────────────────── */
+#counter-bar {
+  display: none;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: 1.25rem;
+  padding: 0.6rem 0.9rem;
+  background: var(--surface2);
+  border-radius: var(--radius-md);
+  border: 0.5px solid var(--border);
+  font-size: 13px;
+  color: var(--text-secondary);
+}
+
+#counter-bar.visible { display: flex; }
+
+#counter-bar .count-num {
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+.count-dot {
+  width: 6px; height: 6px;
+  border-radius: 50%;
+  background: var(--success);
+  display: inline-block;
+  margin-right: 4px;
+}
+
+.count-dot.warn { background: var(--amber); }
+.count-dot.danger { background: var(--danger); }
+
+/* ── Image preview grid ──────────────────────────────────── */
+#preview-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
+  gap: 10px;
+  margin-top: 1.25rem;
+}
+
+.preview-item {
+  position: relative;
+  aspect-ratio: 1;
+  border-radius: var(--radius-md);
+  overflow: hidden;
+  border: 0.5px solid var(--border);
+  background: var(--surface2);
+}
+
+.preview-item img {
+  width: 100%; height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+.preview-item .remove-btn {
+  position: absolute;
+  top: 5px; right: 5px;
+  width: 22px; height: 22px;
+  border-radius: 50%;
+  background: rgba(0,0,0,0.55);
+  border: none;
+  cursor: pointer;
+  display: flex; align-items: center; justify-content: center;
+  opacity: 0;
+  transition: opacity 0.15s;
+}
+
+.preview-item:hover .remove-btn { opacity: 1; }
+
+.preview-item .remove-btn svg {
+  width: 12px; height: 12px;
+  stroke: #fff;
+}
+
+.preview-item .order-badge {
+  position: absolute;
+  bottom: 5px; left: 5px;
+  background: rgba(0,0,0,0.5);
+  color: #fff;
+  font-size: 11px;
+  padding: 1px 5px;
+  border-radius: 4px;
+}
+
+/* ── Actions ─────────────────────────────────────────────── */
+.actions {
+  display: flex;
+  gap: 10px;
+  margin-top: 1.5rem;
+}
+
+button {
+  font-family: inherit;
+  cursor: pointer;
+  border-radius: var(--radius-md);
+  font-size: 14px;
+  font-weight: 500;
+  padding: 10px 18px;
+  transition: opacity 0.15s, transform 0.1s;
+  border: 0.5px solid var(--border-strong);
+}
+
+button:active { transform: scale(0.98); }
+
+.btn-primary {
+  background: var(--accent);
+  color: #fff;
+  border-color: transparent;
+  flex: 1;
+  display: flex; align-items: center; justify-content: center; gap: 8px;
+}
+
+.btn-primary:hover { opacity: 0.88; }
+.btn-primary:disabled { opacity: 0.4; cursor: not-allowed; }
+
+.btn-ghost {
+  background: transparent;
+  color: var(--text-secondary);
+}
+
+.btn-ghost:hover {
+  background: var(--surface2);
+  color: var(--text-primary);
+}
+
+/* ── Toast ───────────────────────────────────────────────── */
+#toast {
+  position: fixed;
+  bottom: 2rem; left: 50%;
+  transform: translateX(-50%) translateY(12px);
+  background: var(--text-primary);
+  color: #fff;
+  font-size: 13px;
+  padding: 10px 18px;
+  border-radius: 99px;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.2s, transform 0.2s;
+  white-space: nowrap;
+  z-index: 200;
+}
+
+#toast.show {
+  opacity: 1;
+  transform: translateX(-50%) translateY(0);
+}
+
+/* ── Overlay + Premium dialog ────────────────────────────── */
+#overlay {
+  display: none;
+  position: fixed; inset: 0;
+  background: rgba(0,0,0,0.45);
+  z-index: 100;
+  align-items: center; justify-content: center;
+  padding: 1rem;
+}
+
+#overlay.show { display: flex; }
+
+#premium-dialog {
+  background: var(--surface);
+  border-radius: var(--radius-xl);
+  border: 0.5px solid var(--border);
+  box-shadow: 0 20px 60px rgba(0,0,0,0.18);
+  padding: 2rem;
+  max-width: 400px;
+  width: 100%;
+  text-align: center;
+  animation: pop-in 0.22s ease;
+}
+
+@keyframes pop-in {
+  from { transform: scale(0.9) translateY(12px); opacity: 0; }
+  to   { transform: scale(1) translateY(0);      opacity: 1; }
+}
+
+.dialog-icon {
+  width: 60px; height: 60px;
+  border-radius: var(--radius-lg);
+  background: var(--amber-light);
+  display: flex; align-items: center; justify-content: center;
+  margin: 0 auto 1.25rem;
+  border: 0.5px solid rgba(186,117,23,0.2);
+}
+
+.dialog-icon svg { width: 28px; height: 28px; }
+
+#premium-dialog h2 {
+  font-size: 19px;
+  font-weight: 600;
+  margin-bottom: 0.5rem;
+}
+
+#premium-dialog p {
+  font-size: 14px;
+  color: var(--text-secondary);
+  margin-bottom: 1.5rem;
+  line-height: 1.6;
+}
+
+.perks {
+  list-style: none;
+  text-align: left;
+  margin-bottom: 1.75rem;
+}
+
+.perks li {
+  font-size: 13px;
+  color: var(--text-secondary);
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 5px 0;
+}
+
+.perk-check {
+  width: 18px; height: 18px;
+  border-radius: 50%;
+  background: var(--success-light);
+  display: flex; align-items: center; justify-content: center;
+  flex-shrink: 0;
+}
+
+.perk-check svg { width: 10px; height: 10px; stroke: var(--success); }
+
+.dialog-actions {
+  display: flex; flex-direction: column; gap: 8px;
+}
+
+.btn-upgrade {
+  background: linear-gradient(135deg, #5048c8 0%, #7f77dd 100%);
+  color: #fff;
+  border: none;
+  padding: 12px;
+  font-size: 15px;
+  border-radius: var(--radius-md);
+  width: 100%;
+}
+
+.btn-upgrade:hover { opacity: 0.88; }
+
+.btn-close-dialog {
+  background: transparent;
+  border: 0.5px solid var(--border-strong);
+  color: var(--text-secondary);
+  padding: 10px;
+  width: 100%;
+  border-radius: var(--radius-md);
+}
+
+/* ── Progress bar (inside btn) ───────────────────────────── */
+#loading-bar {
+  display: none;
+  height: 3px;
+  background: rgba(255,255,255,0.3);
+  border-radius: 2px;
+  overflow: hidden;
+  width: 120px;
+}
+
+#loading-bar-fill {
+  height: 100%;
+  background: #fff;
+  border-radius: 2px;
+  animation: slide 1s infinite;
+}
+
+@keyframes slide {
+  0%   { width: 0%; margin-left: 0; }
+  50%  { width: 60%; margin-left: 20%; }
+  100% { width: 0%; margin-left: 100%; }
+}

templates/index.html

@@ -0,0 +1,358 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Image to PDF Converter</title>
+  <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
+
+  <!-- Three.js for the 3D rotating PDF icon in the header -->
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
+</head>
+<body>
+
+<!-- ── 3D Canvas header ──────────────────────────────────── -->
+<div id="three-header" style="width:120px;height:120px;margin:0 auto 1rem;"></div>
+
+<header>
+  <h1>Image to PDF</h1>
+  <p>Upload images, arrange them, and download a ready PDF — free up to 15 images.</p>
+</header>
+
+<main>
+  <div class="card">
+
+    <!-- Drop zone -->
+    <div id="drop-zone">
+      <input type="file" id="file-input" multiple accept="image/png,image/jpeg,image/webp,image/gif,image/bmp" />
+      <div class="drop-icon">
+        <!-- upload icon -->
+        <svg viewBox="0 0 24 24" fill="none" stroke="#5048c8" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
+          <polyline points="16 16 12 12 8 16"></polyline>
+          <line x1="12" y1="12" x2="12" y2="21"></line>
+          <path d="M20.39 18.39A5 5 0 0 0 18 9h-1.26A8 8 0 1 0 3 16.3"></path>
+        </svg>
+      </div>
+      <h2>Drop images here or click to browse</h2>
+      <p>PNG, JPG, WEBP, GIF, BMP · Free tier: up to 15 images</p>
+      <div class="limit-badge">
+        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <circle cx="12" cy="12" r="10"></circle>
+          <line x1="12" y1="8" x2="12" y2="12"></line>
+          <line x1="12" y1="16" x2="12.01" y2="16"></line>
+        </svg>
+        Free plan: 15 images max
+      </div>
+    </div>
+
+    <!-- Counter bar -->
+    <div id="counter-bar">
+      <span>
+        <span class="count-dot" id="count-dot"></span>
+        <span class="count-num" id="count-num">0</span> image(s) selected
+      </span>
+      <span id="count-limit-text" style="font-size:12px;color:var(--text-muted);">0 / 15 free slots used</span>
+    </div>
+
+    <!-- Preview grid -->
+    <div id="preview-grid"></div>
+
+    <!-- Actions -->
+    <div class="actions">
+      <button class="btn-ghost" id="clear-btn" onclick="clearAll()" style="display:none;">Clear all</button>
+      <button class="btn-primary" id="convert-btn" disabled onclick="convertToPDF()">
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
+          <polyline points="14 2 14 8 20 8"></polyline>
+        </svg>
+        <span id="btn-label">Convert to PDF</span>
+        <div id="loading-bar"><div id="loading-bar-fill"></div></div>
+      </button>
+    </div>
+
+  </div>
+</main>
+
+<!-- ── Toast ─────────────────────────────────────────────── -->
+<div id="toast"></div>
+
+<!-- ── Premium dialog overlay ────────────────────────────── -->
+<div id="overlay" onclick="closeDialog(event)">
+  <div id="premium-dialog">
+    <div class="dialog-icon">
+      <!-- crown / star icon -->
+      <svg viewBox="0 0 24 24" fill="none" stroke="#ba7517" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
+        <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon>
+      </svg>
+    </div>
+    <h2>Upgrade to Premium</h2>
+    <p>You've reached the <strong>15-image limit</strong> for the free plan. Unlock unlimited conversions and more with Premium.</p>
+    <ul class="perks">
+      <li>
+        <span class="perk-check">
+          <svg viewBox="0 0 24 24" fill="none" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>
+        </span>
+        Unlimited images per PDF
+      </li>
+      <li>
+        <span class="perk-check">
+          <svg viewBox="0 0 24 24" fill="none" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>
+        </span>
+        Custom page sizes & orientation
+      </li>
+      <li>
+        <span class="perk-check">
+          <svg viewBox="0 0 24 24" fill="none" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>
+        </span>
+        Password-protected PDFs
+      </li>
+      <li>
+        <span class="perk-check">
+          <svg viewBox="0 0 24 24" fill="none" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>
+        </span>
+        Priority conversion speed
+      </li>
+    </ul>
+    <div class="dialog-actions">
+      <button class="btn-upgrade" onclick="showToast('Redirecting to checkout…')">Upgrade Now — $4.99 / mo</button>
+      <button class="btn-close-dialog" onclick="closeDialog()">Maybe later</button>
+    </div>
+  </div>
+</div>
+
+<!-- ── Scripts ────────────────────────────────────────────── -->
+<script>
+/* ──────────────────────────── Three.js 3D PDF icon ──── */
+(function () {
+  const container = document.getElementById('three-header');
+  const W = 120, H = 120;
+
+  const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
+  renderer.setPixelRatio(window.devicePixelRatio);
+  renderer.setSize(W, H);
+  container.appendChild(renderer.domElement);
+
+  const scene = new THREE.Scene();
+  const camera = new THREE.PerspectiveCamera(38, W / H, 0.1, 100);
+  camera.position.set(0, 0, 5);
+
+  scene.add(new THREE.AmbientLight(0xffffff, 0.6));
+  const dirLight = new THREE.DirectionalLight(0xffffff, 0.9);
+  dirLight.position.set(4, 6, 4);
+  scene.add(dirLight);
+
+  const bodyGeo = new THREE.BoxGeometry(1.4, 1.8, 0.12);
+  const bodyMat = new THREE.MeshStandardMaterial({ color: 0xffffff });
+  const body = new THREE.Mesh(bodyGeo, bodyMat);
+  scene.add(body);
+
+  const cornerShape = new THREE.Shape();
+  cornerShape.moveTo(0, 0);
+  cornerShape.lineTo(0.38, 0);
+  cornerShape.lineTo(0, -0.38);
+  cornerShape.closePath();
+
+  const cornerGeo = new THREE.ExtrudeGeometry(cornerShape, { depth: 0.13, bevelEnabled: false });
+  const cornerMat = new THREE.MeshStandardMaterial({ color: 0x5048c8 });
+  const corner = new THREE.Mesh(cornerGeo, cornerMat);
+  corner.position.set(0.7, 0.9, 0);
+  scene.add(corner);
+
+  const stripeGeo = new THREE.BoxGeometry(0.9, 0.06, 0.14);
+  const stripeMat = new THREE.MeshStandardMaterial({ color: 0xe24b4a });
+
+  [-0.2, 0.1, 0.4].forEach(y => {
+    const s = new THREE.Mesh(stripeGeo, stripeMat);
+    s.position.set(-0.12, y, 0);
+    scene.add(s);
+  });
+
+  const planeGeo = new THREE.PlaneGeometry(1.45, 1.85);
+  const planeMat = new THREE.MeshStandardMaterial({ color: 0x5048c8 });
+  const plane = new THREE.Mesh(planeGeo, planeMat);
+  plane.position.set(0.10, -0.10, -0.20);
+  scene.add(plane);
+
+  function animate() {
+    requestAnimationFrame(animate);
+    body.rotation.y += 0.012;
+    corner.rotation.y = body.rotation.y;
+    plane.rotation.y = body.rotation.y;
+    scene.children.forEach(c => { if (c.isMesh) c.rotation.y = body.rotation.y; });
+    renderer.render(scene, camera);
+  }
+  animate();
+})();
+
+/* ──────────────────────────── App state ───────────────── */
+const FREE_LIMIT = 15;
+let selectedFiles = [];
+
+const dropZone    = document.getElementById('drop-zone');
+const fileInput   = document.getElementById('file-input');
+const previewGrid = document.getElementById('preview-grid');
+const counterBar  = document.getElementById('counter-bar');
+const countNum    = document.getElementById('count-num');
+const countDot    = document.getElementById('count-dot');
+const countLimit  = document.getElementById('count-limit-text');
+const convertBtn  = document.getElementById('convert-btn');
+const btnLabel    = document.getElementById('btn-label');
+const loadingBar  = document.getElementById('loading-bar');
+const clearBtn    = document.getElementById('clear-btn');
+const overlay     = document.getElementById('overlay');
+
+/* drag & drop */
+dropZone.addEventListener('dragover', e => {
+  e.preventDefault();
+  dropZone.classList.add('drag-over');
+});
+
+dropZone.addEventListener('dragleave', () => dropZone.classList.remove('drag-over'));
+
+dropZone.addEventListener('drop', e => {
+  e.preventDefault();
+  dropZone.classList.remove('drag-over');
+  addFiles(e.dataTransfer.files);
+});
+
+fileInput.addEventListener('change', () => {
+  addFiles(fileInput.files);
+  fileInput.value = '';
+});
+
+function addFiles(fileList) {
+  const incoming = Array.from(fileList).filter(f => f.type.startsWith('image/'));
+  const newTotal = selectedFiles.length + incoming.length;
+
+  if (newTotal > FREE_LIMIT) {
+    const allowed = incoming.slice(0, FREE_LIMIT - selectedFiles.length);
+    allowed.forEach(pushFile);
+    updateUI();
+    showPremiumDialog();
+    return;
+  }
+
+  incoming.forEach(pushFile);
+  updateUI();
+}
+
+function pushFile(file) {
+  const url = URL.createObjectURL(file);
+  selectedFiles.push({ file, url });
+}
+
+function removeFile(index) {
+  URL.revokeObjectURL(selectedFiles[index].url);
+  selectedFiles.splice(index, 1);
+  updateUI();
+}
+
+function clearAll() {
+  selectedFiles.forEach(f => URL.revokeObjectURL(f.url));
+  selectedFiles = [];
+  updateUI();
+}
+
+function updateUI() {
+  const n = selectedFiles.length;
+
+  if (n > 0) {
+    counterBar.classList.add('visible');
+    countNum.textContent = n;
+    countLimit.textContent = `${n} / ${FREE_LIMIT} free slots used`;
+  } else {
+    counterBar.classList.remove('visible');
+  }
+
+  previewGrid.innerHTML = '';
+
+  selectedFiles.forEach(({ url }, i) => {
+    const item = document.createElement('div');
+    item.className = 'preview-item';
+    item.innerHTML = `
+      <img src="${url}" />
+      <span class="order-badge">${i + 1}</span>
+      <button class="remove-btn" onclick="removeFile(${i})">✕</button>
+    `;
+    previewGrid.appendChild(item);
+  });
+
+  convertBtn.disabled = n === 0;
+  clearBtn.style.display = n > 0 ? 'block' : 'none';
+}
+
+/* ──────────────────────────── FIXED CONVERT FUNCTION ───────────────── */
+async function convertToPDF() {
+  if (selectedFiles.length === 0) return;
+
+  if (selectedFiles.length > FREE_LIMIT) {
+    showPremiumDialog();
+    return;
+  }
+
+  setLoading(true);
+
+  const formData = new FormData();
+  selectedFiles.forEach(({ file }) => {
+    formData.append('images', file);
+  });
+
+  try {
+    // ✅ FIXED LINE (IMPORTANT)
+    const res = await fetch('/convert', {
+      method: 'POST',
+      body: formData
+    });
+
+    if (!res.ok) {
+      const json = await res.json().catch(() => ({}));
+
+      if (json.error === 'limit_exceeded') {
+        showPremiumDialog();
+      } else {
+        showToast(json.error || 'Conversion failed');
+      }
+      return;
+    }
+
+    const blob = await res.blob();
+    const link = document.createElement('a');
+    link.href = URL.createObjectURL(blob);
+    link.download = 'converted.pdf';
+    link.click();
+
+    showToast('PDF downloaded successfully!');
+  } catch (err) {
+    showToast('Server not running. Run python app.py');
+  } finally {
+    setLoading(false);
+  }
+}
+
+function setLoading(on) {
+  convertBtn.disabled = on;
+  btnLabel.style.display = on ? 'none' : 'inline';
+  loadingBar.style.display = on ? 'block' : 'none';
+}
+
+/* ──────────────────────────── Premium dialog ───────────────── */
+function showPremiumDialog() {
+  overlay.classList.add('show');
+}
+
+function closeDialog(e) {
+  if (!e || e.target === overlay) {
+    overlay.classList.remove('show');
+  }
+}
+
+/* ──────────────────────────── Toast ───────────────── */
+function showToast(msg) {
+  const t = document.getElementById('toast');
+  t.textContent = msg;
+  t.classList.add('show');
+  setTimeout(() => t.classList.remove('show'), 3000);
+}
+</script>
+</body>
+</html>