Spaces:

bep40
/

invoice

Running

App Files Files Community

bep40 commited on May 3, 2025

Commit

bfbccdc

verified ·

1 Parent(s): 6b84c10

Add 2 files

Browse files

Files changed (2) hide show

index.html +262 -235
prompts.txt +7 -1

index.html CHANGED Viewed

@@ -3,280 +3,307 @@
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
-  <title>Ứng dụng Tính giá và In Hóa Đơn</title>
   <script src="https://cdn.tailwindcss.com"></script>
-  <!-- jsPDF Library -->
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
   <style>
-    @media print {
-      body * {
-        visibility: hidden;
-      }
-      #invoice, #invoice * {
-        visibility: visible;
-      }
-      #invoice {
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        padding: 20px;
-        font-size: 14px;
-      }
-      #app, #printBtn, #downloadPdfBtn {
-        display: none;
-      }
     }
-    .invoice-table th, .invoice-table td {
-      border: 1px solid #ccc;
-      padding: 8px;
       text-align: center;
     }
   </style>
 </head>
-<body class="bg-gray-100 text-gray-800 font-sans">
-  <!-- Phần giao diện chính -->
-  <div id="app" class="max-w-6xl mx-auto p-6 bg-white rounded shadow-lg mt-10">
-    <h1 class="text-3xl font-bold mb-6 text-center text-blue-600">Ứng dụng Tính giá và In Hóa Đơn</h1>
-    <!-- Thông tin khách hàng -->
-    <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
-      <input id="customerName" type="text" placeholder="Tên khách hàng" class="border p-2 rounded">
-      <input id="customerAddress" type="text" placeholder="Địa chỉ" class="border p-2 rounded">
-      <input id="customerPhone" type="text" placeholder="Số điện thoại" class="border p-2 rounded">
-    </div>
-    <!-- Thông tin sản phẩm -->
-    <div class="grid grid-cols-1 md:grid-cols-6 gap-4 mb-4">
-      <input id="productIndex" type="number" placeholder="STT" class="border p-2 rounded text-center" disabled>
-      <input id="productCode" type="text" placeholder="Mã sản phẩm" class="border p-2 rounded">
-      <input id="productName" type="text" placeholder="Tên sản phẩm" class="border p-2 rounded">
-      <input id="price" type="number" placeholder="Đơn giá" class="border p-2 rounded text-right" oninput="calculateTotal()">
-      <input id="quantity" type="number" placeholder="Số lượng" class="border p-2 rounded text-center" oninput="calculateTotal()">
-      <input id="discount" type="number" placeholder="Chiết khấu (%)" class="border p-2 rounded text-center" oninput="calculateTotal()">
     </div>
-    <div class="mb-4">
-      <textarea id="note" placeholder="Ghi chú" class="border p-2 rounded w-full" rows="2"></textarea>
-    </div>
-    <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
-      <div>
-        <label class="block mb-2 font-semibold">Thành tiền:</label>
-        <input id="totalInput" type="text" class="border p-2 rounded w-full text-right font-bold" readonly>
       </div>
-      <button onclick="addToInvoice()" class="bg-green-500 text-white px-4 py-3 rounded hover:bg-green-600 transition">
-        ➕ Thêm vào hóa đơn
-      </button>
-    </div>
-    <!-- Bảng hóa đơn -->
-    <div class="overflow-x-auto">
-      <table class="min-w-full border-collapse border border-gray-300">
-        <thead>
-          <tr class="bg-gray-200">
-            <th class="border border-gray-300 px-4 py-2">STT</th>
-            <th class="border border-gray-300 px-4 py-2">Mã SP</th>
-            <th class="border border-gray-300 px-4 py-2">Tên SP</th>
-            <th class="border border-gray-300 px-4 py-2">SL</th>
-            <th class="border border-gray-300 px-4 py-2">Đơn giá</th>
-            <th class="border border-gray-300 px-4 py-2">Chiết khấu (%)</th>
-            <th class="border border-gray-300 px-4 py-2">Thành tiền</th>
-          </tr>
-        </thead>
-        <tbody id="invoiceTableBody">
-          <!-- Sản phẩm sẽ được thêm ở đây -->
-        </tbody>
-      </table>
-    </div>
-    <!-- Nút hành động -->
-    <div class="flex justify-center gap-4 mt-6">
-      <button onclick="window.print()" id="printBtn" class="bg-blue-500 text-white px-6 py-2 rounded hover:bg-blue-600 transition">
-        🖨️ In Hóa Đơn
-      </button>
-      <button onclick="downloadPDF()" id="downloadPdfBtn" class="bg-purple-500 text-white px-6 py-2 rounded hover:bg-purple-600 transition">
-        📄 Xuất PDF
-      </button>
-    </div>
-  </div>
-  <!-- Phần in hóa đơn -->
-  <div id="invoice" class="hidden print:block p-6 bg-white max-w-3xl mx-auto">
-    <div class="text-center mb-4">
-      <img src="https://via.placeholder.com/100x50.png?text=LOGO" alt="Logo công ty" class="mx-auto mb-2">
-      <h2 class="text-2xl font-bold">HÓA ĐƠN BÁN HÀNG</h2>
-      <p class="text-sm text-gray-500">Ngày: <span id="invoiceDate"></span></p>
-    </div>
-    <!-- Thông tin khách hàng -->
-    <div class="mb-4">
-      <p><strong>Tên khách hàng:</strong> <span id="printCustomerName"></span></p>
-      <p><strong>Địa chỉ:</strong> <span id="printCustomerAddress"></span></p>
-      <p><strong>Điện thoại:</strong> <span id="printCustomerPhone"></span></p>
-    </div>
-    <!-- Bảng in -->
-    <table class="min-w-full border-collapse border border-gray-300 invoice-table">
-      <thead>
-        <tr class="bg-gray-200">
-          <th class="border border-gray-300 px-4 py-2">STT</th>
-          <th class="border border-gray-300 px-4 py-2">Mã SP</th>
-          <th class="border border-gray-300 px-4 py-2">Tên SP</th>
-          <th class="border border-gray-300 px-4 py-2">SL</th>
-          <th class="border border-gray-300 px-4 py-2">Đơn giá</th>
-          <th class="border border-gray-300 px-4 py-2">Chiết khấu (%)</th>
-          <th class="border border-gray-300 px-4 py-2">Thành tiền</th>
-        </tr>
-      </thead>
-      <tbody id="invoicePrintBody">
-        <!-- Dữ liệu sản phẩm sẽ được thêm ở đây -->
-      </tbody>
-    </table>
-    <div class="mt-6 text-right font-bold text-xl">
-      Tổng cộng: <span id="totalPrintAmount">0</span> VNĐ
     </div>
-    <div class="mt-4">
-      <p><strong>Ghi chú:</strong> <span id="printNote"></span></p>
-    </div>
-    <p class="mt-6 text-center text-sm text-gray-500">Cảm ơn quý khách và hẹn gặp lại!</p>
-  </div>
   <script>
-    let total = 0;
-    let index = 1;
-    function calculateTotal() {
-      const price = parseFloat(document.getElementById('price').value) || 0;
-      const quantity = parseFloat(document.getElementById('quantity').value) || 0;
-      const discount = parseFloat(document.getElementById('discount').value) || 0;
-      const discountAmount = price * quantity * (discount / 100);
-      const finalAmount = price * quantity - discountAmount;
-      document.getElementById('totalInput').value = finalAmount.toLocaleString('vi-VN') + " VNĐ";
     }
-    function addToInvoice() {
-      const code = document.getElementById('productCode').value.trim();
-      const name = document.getElementById('productName').value.trim();
-      const price = parseFloat(document.getElementById('price').value);
-      const quantity = parseFloat(document.getElementById('quantity').value);
-      const discount = parseFloat(document.getElementById('discount').value);
-      const note = document.getElementById('note').value.trim();
-      if (!name || isNaN(price) || isNaN(quantity) || price <= 0 || quantity <= 0) {
-        alert("Vui lòng nhập đầy đủ thông tin hợp lệ!");
         return;
       }
-      const discountAmount = price * quantity * (discount / 100);
-      const amount = price * quantity - discountAmount;
-      // Thêm vào bảng hiển thị
-      const row = document.createElement('tr');
-      row.innerHTML = `
-        <td class="border border-gray-300 px-4 py-2">${index}</td>
-        <td class="border border-gray-300 px-4 py-2">${code}</td>
-        <td class="border border-gray-300 px-4 py-2">${name}</td>
-        <td class="border border-gray-300 px-4 py-2 text-center">${quantity}</td>
-        <td class="border border-gray-300 px-4 py-2 text-right">${price.toLocaleString('vi-VN')}</td>
-        <td class="border border-gray-300 px-4 py-2 text-center">${discount}</td>
-        <td class="border border-gray-300 px-4 py-2 text-right">${amount.toLocaleString('vi-VN')}</td>
-      `;
-      document.getElementById('invoiceTableBody').appendChild(row);
-      // Thêm vào phần in
-      const printRow = document.createElement('tr');
-      printRow.innerHTML = `
-        <td class="border border-gray-300 px-4 py-2">${index}</td>
-        <td class="border border-gray-300 px-4 py-2">${code}</td>
-        <td class="border border-gray-300 px-4 py-2">${name}</td>
-        <td class="border border-gray-300 px-4 py-2 text-center">${quantity}</td>
-        <td class="border border-gray-300 px-4 py-2 text-right">${price.toLocaleString('vi-VN')}</td>
-        <td class="border border-gray-300 px-4 py-2 text-center">${discount}</td>
-        <td class="border border-gray-300 px-4 py-2 text-right">${amount.toLocaleString('vi-VN')}</td>
-      `;
-      document.getElementById('invoicePrintBody').appendChild(printRow);
-      // Cập nhật tổng
-      total += amount;
-      document.getElementById('totalPrintAmount').textContent = total.toLocaleString('vi-VN') + " VNĐ";
-      // Cập nhật thông tin khách hàng và ghi chú
-      document.getElementById('printCustomerName').textContent = document.getElementById('customerName').value;
-      document.getElementById('printCustomerAddress').textContent = document.getElementById('customerAddress').value;
-      document.getElementById('printCustomerPhone').textContent = document.getElementById('customerPhone').value;
-      document.getElementById('printNote').textContent = note;
-      // Cập nhật ngày
-      const today = new Date().toLocaleDateString('vi-VN');
-      document.getElementById('invoiceDate').textContent = today;
-      // Cập nhật số thứ tự
-      document.getElementById('productIndex').value = index++;
-      // Reset form
-      document.getElementById('productCode').value = '';
-      document.getElementById('productName').value = '';
-      document.getElementById('price').value = '';
-      document.getElementById('quantity').value = '';
-      document.getElementById('discount').value = '0';
-      document.getElementById('note').value = '';
-      document.getElementById('totalInput').value = '';
     }
-    function downloadPDF() {
-      const { jsPDF } = window.jspdf;
-      const doc = new jsPDF();
-      // Tạo nội dung PDF từ phần in hóa đơn
-      const invoice = document.getElementById("invoice");
-      const tempContainer = document.createElement("div");
-      tempContainer.innerHTML = invoice.innerHTML;
-      tempContainer.style.position = "absolute";
-      tempContainer.style.left = "-9999px";
-      document.body.appendChild(tempContainer);
-      const tables = tempContainer.querySelectorAll("table");
-      tables.forEach(table => {
-        table.style.width = "100%";
-        table.style.fontSize = "12px";
-        const rows = table.querySelectorAll("tr");
-        rows.forEach(row => {
-          row.style.border = "1px solid #000";
         });
-      });
-      const html = tempContainer.innerHTML;
-      const divToPrint = document.createElement("div");
-      divToPrint.innerHTML = html;
-      document.body.appendChild(divToPrint);
-      doc.html(divToPrint, {
-        callback: function (doc) {
-          doc.save("HoaDon_BanHang.pdf");
-          document.body.removeChild(divToPrint);
-        },
-        x: 10,
-        y: 10,
-        width: 180,
-        windowWidth: 600
-      });
     }
-    // Thiết lập giá chiết khấu mặc định là 0 nếu không nhập
-    document.getElementById('discount').addEventListener('input', function () {
-      if (this.value === '') {
-        this.value = '0';
-      }
-      calculateTotal();
-    });
   </script>
 <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-qwensite.hf.space/logo.svg" alt="qwensite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-qwensite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >QwenSite</a> - 🧬 <a href="https://enzostvs-qwensite.hf.space?remix=bep40/invoice" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 </html>

 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+  <title>Ứng dụng PDF Viewer với Thumbnail & Slideshow</title>
   <script src="https://cdn.tailwindcss.com"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.4.120/pdf.min.js"></script>
   <style>
+    .highlight {
+      background-color: yellow;
+      font-weight: bold;
     }
+    .thumbnail {
+      position: relative;
+      cursor: pointer;
+      transition: transform 0.2s ease, box-shadow 0.2s ease;
+    }
+    .thumbnail:hover {
+      transform: scale(1.05);
+      box-shadow: 0 0 12px rgba(0, 0, 0, 0.2);
+    }
+    .thumbnail img {
+      width: 100%;
+      height: auto;
+      border-radius: 8px;
+    }
+    .thumbnail .title {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      background: rgba(0,0,0,0.6);
+      color: white;
       text-align: center;
+      padding: 4px 0;
+      font-size: 14px;
+      border-bottom-left-radius: 8px;
+      border-bottom-right-radius: 8px;
+    }
+    #pdfViewer canvas {
+      display: block;
+      margin: 0 auto;
+      max-width: 100%;
+      height: auto;
+      border-radius: 8px;
+    }
+    .text-layer {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      pointer-events: none;
+      z-index: 10;
+      font-size: 16px;
+      line-height: 1.5;
     }
   </style>
 </head>
+<body class="bg-gray-100 text-gray-800 font-sans min-h-screen flex flex-col items-center">
+  <header class="w-full bg-gradient-to-r from-indigo-600 to-purple-700 text-white py-5 shadow-md">
+    <h1 class="text-3xl font-bold text-center">Ứng dụng PDF Viewer với Thumbnail & Tìm kiếm</h1>
+    <p class="text-center mt-1 text-sm">Xem, trình chiếu và tìm kiếm văn bản trong file PDF</p>
+  </header>
+  <main class="max-w-7xl w-full mx-auto p-6 mt-6 flex flex-col gap-6">
+    <!-- Danh sách PDF dạng thumbnail -->
+    <div class="border border-gray-300 rounded-lg p-4 bg-gray-50">
+      <h2 class="text-lg font-semibold mb-3">Chọn tài liệu PDF:</h2>
+      <div id="pdfGrid" class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-4"></div>
     </div>
+    <!-- Khung xem PDF -->
+    <div class="flex flex-col items-center">
+      <div id="pdfViewer" class="relative border border-gray-300 rounded-lg p-4 bg-gray-100 min-h-96 w-full max-w-4xl">
+        <p class="text-center text-gray-400 mt-20">Chọn một file PDF từ danh sách để xem</p>
       </div>
+      <!-- Điều hướng trang -->
+      <div class="flex justify-between items-center w-full max-w-4xl mt-4">
+        <button onclick="prevPage()" id="prevBtn" class="bg-gray-500 text-white px-4 py-2 rounded hover:bg-gray-600 transition disabled:opacity-50 disabled:cursor-not-allowed">⬅️ Trang trước</button>
+        <span id="pageInfo" class="text-lg font-semibold">Trang: 1 / 1</span>
+        <button onclick="nextPage()" id="nextBtn" class="bg-gray-500 text-white px-4 py-2 rounded hover:bg-gray-600 transition disabled:opacity-50 disabled:cursor-not-allowed">Trang sau ➡️</button>
+      </div>
+      <!-- Slideshow controls -->
+      <div class="flex gap-4 items-center mt-4">
+        <button onclick="startSlideshow()" class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 transition">▶️ Bắt đầu Slideshow</button>
+        <button onclick="stopSlideshow()" class="bg-red-500 text-white px-4 py-2 rounded hover:bg-red-600 transition">⏹️ Dừng Slideshow</button>
+        <span>Chuyển trang mỗi:</span>
+        <select id="intervalSelect" class="border rounded px-3 py-1">
+          <option value="2000">2 giây</option>
+          <option value="3000" selected>3 giây</option>
+          <option value="5000">5 giây</option>
+        </select>
+      </div>
+      <!-- Tìm kiếm nội dung -->
+      <div class="flex gap-2 items-center mt-6 w-full max-w-4xl">
+        <input type="text" id="searchText" placeholder="Nhập từ khóa tìm kiếm..." class="border p-2 rounded flex-grow focus:ring-2 focus:ring-blue-400 outline-none">
+        <button onclick="searchText()" class="bg-green-500 text-white px-4 py-2 rounded hover:bg-green-600 transition">🔍 Tìm kiếm</button>
+      </div>
     </div>
+  </main>
+  <footer class="mt-10 text-gray-500 text-center pb-4 text-sm">
+    &copy; 2025 - Ứng dụng xem PDF với trang bìa, slideshow và tìm kiếm
+  </footer>
   <script>
+    const pdfViewer = document.getElementById('pdfViewer');
+    const pageInfo = document.getElementById('pageInfo');
+    const prevBtn = document.getElementById('prevBtn');
+    const nextBtn = document.getElementById('nextBtn');
+    const pdfGrid = document.getElementById('pdfGrid');
+    const searchTextEl = document.getElementById('searchText');
+    const intervalSelect = document.getElementById('intervalSelect');
+    let pdfDocs = [];
+    let currentDocIndex = -1;
+    let currentPage = 1;
+    let totalPages = 0;
+    let currentHighlight = '';
+    let slideshowInterval = null;
+    // Danh sách file PDF mẫu
+    const pdfFiles = [
+      { name: 'Tài liệu 1', url: 'files/document1.pdf', thumb: 'files/thumb1.jpg' },
+      { name: 'Tài liệu 2', url: 'files/document2.pdf', thumb: 'files/thumb2.jpg' },
+      { name: 'Tài liệu 3', url: 'files/document3.pdf', thumb: 'files/thumb3.jpg' },
+      { name: 'Tài liệu 4', url: 'files/document4.pdf', thumb: 'files/thumb4.jpg' },
+      { name: 'Tài liệu 5', url: 'files/document5.pdf', thumb: 'files/thumb5.jpg' }
+    ];
+    // Tạo thumbnail và danh sách PDF
+    function updatePdfGrid() {
+      pdfGrid.innerHTML = '';
+      pdfFiles.forEach((file, index) => {
+        const div = document.createElement('div');
+        div.className = 'thumbnail';
+        div.innerHTML = `
+          <img src="${file.thumb}" alt="${file.name}" class="w-full h-auto object-cover">
+          <div class="title">${file.name}</div>
+        `;
+        div.onclick = () => {
+          currentDocIndex = index;
+          currentPage = 1;
+          currentHighlight = '';
+          loadPdf(index);
+        };
+        pdfGrid.appendChild(div);
+      });
     }
+    // Load file PDF từ URL
+    function loadPdf(index) {
+      const file = pdfFiles[index];
+      pdfjsLib.getDocument(file.url).promise.then(pdf => {
+        pdfDocs[index] = pdf;
+        totalPages = pdf.numPages;
+        pageInfo.textContent = `Trang: 1 / ${totalPages}`;
+        renderPage(currentPage);
+        enableNavigationButtons();
+      });
+    }
+    // Render trang PDF
+    function renderPage(pageNumber) {
+      if (currentDocIndex === -1) {
+        pdfViewer.innerHTML = '<p class="text-center text-gray-400 mt-20">Vui lòng chọn một file PDF từ danh sách.</p>';
         return;
       }
+      const pdf = pdfDocs[currentDocIndex];
+      if (!pdf) {
+        pdfViewer.innerHTML = '<p class="text-center text-gray-400 mt-20">Đang tải tài liệu...</p>';
+        return;
+      }
+      pdf.getPage(pageNumber).then(page => {
+        pdfViewer.innerHTML = '';
+        const viewport = page.getViewport({ scale: 1.5 });
+        const canvas = document.createElement('canvas');
+        const context = canvas.getContext('2d');
+        canvas.height = viewport.height;
+        canvas.width = viewport.width;
+        const renderContext = {
+          canvasContext: context,
+          viewport: viewport
+        };
+        pdfViewer.appendChild(canvas);
+        page.render(renderContext).promise.then(() => {
+          if (currentHighlight.trim() !== '') {
+            renderTextLayer(page, currentHighlight);
+          }
+        });
+      });
+    }
+    // Vẽ lớp văn bản để highlight
+    function renderTextLayer(page, highlightText) {
+      const viewport = page.getViewport({ scale: 1.5 });
+      const textLayer = document.createElement('div');
+      textLayer.className = 'text-layer';
+      pdfViewer.appendChild(textLayer);
+      page.getTextContent().then(textContent => {
+        textLayer.innerHTML = '';
+        textContent.items.forEach(item => {
+          const x = item.transform[4];
+          const y = viewport.height - item.transform[5];
+          const span = document.createElement('span');
+          span.style.position = 'absolute';
+          span.style.left = `${x}px`;
+          span.style.top = `${y}px`;
+          span.style.fontSize = `${viewport.scale * 14}px`;
+          span.style.pointerEvents = 'auto';
+          span.innerHTML = item.str.replace(new RegExp(`(${highlightText})`, 'gi'), '<span class="highlight">$1</span>');
+          textLayer.appendChild(span);
+        });
+      });
+    }
+    // Điều hướng trang
+    function nextPage() {
+      if (currentDocIndex === -1) return;
+      if (currentPage < totalPages) {
+        currentPage++;
+        pageInfo.textContent = `Trang: ${currentPage} / ${totalPages}`;
+        renderPage(currentPage);
+      }
+      enableNavigationButtons();
     }
+    function prevPage() {
+      if (currentDocIndex === -1) return;
+      if (currentPage > 1) {
+        currentPage--;
+        pageInfo.textContent = `Trang: ${currentPage} / ${totalPages}`;
+        renderPage(currentPage);
+      }
+      enableNavigationButtons();
+    }
+    function enableNavigationButtons() {
+      prevBtn.disabled = currentPage <= 1;
+      nextBtn.disabled = currentPage >= totalPages;
+    }
+    // Tìm kiếm văn bản trong PDF
+    function searchText() {
+      const query = searchTextEl.value.trim();
+      if (!query) return alert("Vui lòng nhập từ khóa để tìm kiếm.");
+      if (currentDocIndex === -1) return alert("Vui lòng chọn một file PDF từ danh sách.");
+      const pdf = pdfDocs[currentDocIndex];
+      let found = false;
+      for (let i = 1; i <= pdf.numPages; i++) {
+        pdf.getPage(i).then(page => {
+          page.getTextContent().then(textContent => {
+            const text = textContent.items.map(item => item.str).join(' ').toLowerCase();
+            if (text.includes(query.toLowerCase())) {
+              currentPage = i;
+              pageInfo.textContent = `Trang: ${currentPage} / ${totalPages}`;
+              currentHighlight = query;
+              renderPage(currentPage);
+              found = true;
+            }
+          });
         });
+      }
+      setTimeout(() => {
+        if (!found) alert(`Không tìm thấy từ khóa "${query}" trong tài liệu này.`);
+      }, 1500);
+    }
+    // Chức năng slideshow
+    function startSlideshow() {
+      if (currentDocIndex === -1 || totalPages <= 1) return;
+      stopSlideshow(); // Dừng nếu đang chạy
+      const interval = parseInt(intervalSelect.value);
+      slideshowInterval = setInterval(() => {
+        if (currentPage < totalPages) {
+          currentPage++;
+          pageInfo.textContent = `Trang: ${currentPage} / ${totalPages}`;
+          renderPage(currentPage);
+        } else {
+          stopSlideshow();
+        }
+      }, interval);
     }
+    function stopSlideshow() {
+      if (slideshowInterval) clearInterval(slideshowInterval);
+    }
+    // Khởi động ứng dụng
+    updatePdfGrid();
   </script>
 <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-qwensite.hf.space/logo.svg" alt="qwensite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-qwensite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >QwenSite</a> - 🧬 <a href="https://enzostvs-qwensite.hf.space?remix=bep40/invoice" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 </html>

prompts.txt CHANGED Viewed

@@ -1,4 +1,10 @@
 Tạo 1 app tính giá và in hoá đơn theo mẫu
 Tạo 1 app tính giá và in hoá đơn theo mẫu có logo, hoá đơn có các thông tin số thứ tự, mã sản phẩm, tên sản phẩm, số lượng, đơn giá, giá chiết khấu, tên khách hàng, địa chỉ, số điện thoại, ghi chú
 Tạo 1 app tính giá và in hoá đơn theo mẫu có logo, hoá đơn có các thông tin số thứ tự, mã sản phẩm, tên sản phẩm, số lượng, đơn giá, giá chiết khấu, tên khách hàng, địa chỉ, số điện thoại, ghi chú
-Tạo 1 app tính giá và in hoá đơn theo mẫu có logo, hoá đơn có các thông tin số thứ tự, mã sản phẩm, tên sản phẩm, số lượng, đơn giá, giá chiết khấu, tên khách hàng, địa chỉ, số điện thoại, ghi chú. Có thể in ra file pdf

 Tạo 1 app tính giá và in hoá đơn theo mẫu
 Tạo 1 app tính giá và in hoá đơn theo mẫu có logo, hoá đơn có các thông tin số thứ tự, mã sản phẩm, tên sản phẩm, số lượng, đơn giá, giá chiết khấu, tên khách hàng, địa chỉ, số điện thoại, ghi chú
 Tạo 1 app tính giá và in hoá đơn theo mẫu có logo, hoá đơn có các thông tin số thứ tự, mã sản phẩm, tên sản phẩm, số lượng, đơn giá, giá chiết khấu, tên khách hàng, địa chỉ, số điện thoại, ghi chú
+Tạo 1 app tính giá và in hoá đơn theo mẫu có logo, hoá đơn có các thông tin số thứ tự, mã sản phẩm, tên sản phẩm, số lượng, đơn giá, giá chiết khấu, tên khách hàng, địa chỉ, số điện thoại, ghi chú. Có thể in ra file pdf
+Tạo app xem file PDF dạng slideshow và tìm kiếm được text trên file pdf
+Tạo app xem file PDF dạng slideshow và tìm kiếm được text và tương tác trên file pdf có sẵn
+Tạo app danh sách các file PDF dạng slideshow và tìm kiếm được text trên file pdf
+Tạo app danh sách file PDF có sẵn dạng slideshow và tìm kiếm được text trên file pdf
+Tạo app xem danh sách file PDF có sẵn dạng lưới và xem slideshow và tìm kiếm được text trên file pdf
+Tạo app danh sách file PDF có sẵn trình bày dưới hình thức trang bìa và xem dạng slideshow và tìm kiếm được text trên file pdf