Create script.js

static/script.js

@@ -0,0 +1,266 @@
+/* ──────────────────────────── Three.js 3D PDF icon ──── */
+(function () {
+  const container = document.getElementById('three-header');
+  if (!container || typeof THREE === "undefined") return;
+
+  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');
+const toast = document.getElementById('toast');
+
+if (dropZone && fileInput) {
+  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`;
+
+    if (countDot) {
+      countDot.className = 'count-dot' + (n >= FREE_LIMIT ? ' danger' : n >= 10 ? ' warn' : '');
+    }
+  } 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}" alt="preview ${i + 1}" loading="lazy" />
+      <span class="order-badge">${i + 1}</span>
+      <button class="remove-btn" onclick="removeFile(${i})" title="Remove">
+        <svg viewBox="0 0 24 24" fill="none" stroke-width="2.5" stroke-linecap="round">
+          <line x1="18" y1="6" x2="6" y2="18"></line>
+          <line x1="6" y1="6" x2="18" y2="18"></line>
+        </svg>
+      </button>
+    `;
+    previewGrid.appendChild(item);
+  });
+
+  convertBtn.disabled = n === 0;
+  clearBtn.style.display = n > 0 ? 'block' : 'none';
+}
+
+async function convertToPDF() {
+  if (selectedFiles.length === 0) {
+    showToast("Please select at least one image.");
+    return;
+  }
+
+  if (selectedFiles.length > FREE_LIMIT) {
+    showPremiumDialog();
+    return;
+  }
+
+  setLoading(true);
+
+  const formData = new FormData();
+  selectedFiles.forEach(({ file }) => {
+    formData.append('images', file);
+  });
+
+  try {
+    const res = await fetch('/convert', {
+      method: 'POST',
+      body: formData
+    });
+
+    const contentType = res.headers.get("content-type") || "";
+
+    if (!res.ok) {
+      let errorMessage = "Conversion failed.";
+
+      if (contentType.includes("application/json")) {
+        const json = await res.json();
+
+        if (json.error === "limit_exceeded") {
+          showPremiumDialog();
+          errorMessage = json.message || "Free limit reached.";
+        } else {
+          errorMessage = json.error || json.message || errorMessage;
+        }
+      }
+
+      showToast(errorMessage);
+      return;
+    }
+
+    const blob = await res.blob();
+    const url = window.URL.createObjectURL(blob);
+
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = 'converted.pdf';
+    document.body.appendChild(a);
+    a.click();
+    a.remove();
+
+    window.URL.revokeObjectURL(url);
+    showToast('PDF downloaded successfully!');
+  } catch (err) {
+    console.error(err);
+    showToast('Server error. Please try again.');
+  } finally {
+    setLoading(false);
+  }
+}
+
+function setLoading(on) {
+  convertBtn.disabled = on;
+  btnLabel.style.display = on ? 'none' : 'inline';
+  loadingBar.style.display = on ? 'block' : 'none';
+}
+
+function showPremiumDialog() {
+  overlay.classList.add('show');
+}
+
+function closeDialog(e) {
+  if (!e || e.target === overlay) {
+    overlay.classList.remove('show');
+  }
+}
+
+function showToast(msg) {
+  toast.textContent = msg;
+  toast.classList.add('show');
+  setTimeout(() => toast.classList.remove('show'), 3000);
+}
+
+window.removeFile = removeFile;
+window.clearAll = clearAll;
+window.convertToPDF = convertToPDF;
+window.closeDialog = closeDialog;
+window.showToast = showToast;