Spaces:

Translsis
/

GTVT

Running

App Files Files Community

Translsis commited on Dec 16, 2025

Commit

cc9e8f2

verified ·

1 Parent(s): 0898674

Update index.html

Browse files

Files changed (1) hide show

index.html +257 -195

index.html CHANGED Viewed

@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>PDF Tab Viewer</title>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js"></script>
     <style>
         * {
@@ -15,9 +15,8 @@
         body {
             font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
             background: #2c3e50;
-            min-height: 100vh;
-            padding: 0;
-            margin: 0;
         }
         .container {
@@ -27,67 +26,60 @@
             background: white;
         }
-        .header {
             background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            padding: 12px 20px;
-            color: white;
             display: flex;
-            justify-content: space-between;
             align-items: center;
             flex-shrink: 0;
         }
-        .header h1 {
-            font-size: 1.3em;
             margin: 0;
         }
-        .upload-section {
-            padding: 15px 20px;
-            background: #f8f9fa;
-            border-bottom: 1px solid #dee2e6;
-            display: flex;
-            align-items: center;
-            gap: 15px;
-            flex-shrink: 0;
         }
-        .upload-area {
-            border: 2px dashed #667eea;
-            border-radius: 8px;
-            padding: 15px 25px;
-            background: white;
             cursor: pointer;
             transition: all 0.2s ease;
-            flex: 1;
-            display: flex;
-            align-items: center;
-            gap: 10px;
-        }
-        .upload-area:hover {
-            border-color: #764ba2;
-            background: #f8f9ff;
         }
-        .upload-area.dragover {
-            border-color: #764ba2;
-            background: #f0f0ff;
         }
-        .upload-icon {
-            font-size: 1.5em;
         }
-        .upload-text {
-            font-size: 0.95em;
-            color: #495057;
             font-weight: 600;
         }
-        .upload-hint {
-            color: #6c757d;
-            font-size: 0.85em;
         }
         #fileInput {
@@ -95,27 +87,33 @@
         }
         .file-count {
-            padding: 10px 20px;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
             color: white;
-            border-radius: 20px;
-            font-weight: bold;
             font-size: 0.9em;
-            white-space: nowrap;
         }
         .tabs {
             display: flex;
             background: #f8f9fa;
             padding: 0 10px;
             overflow-x: auto;
-            border-bottom: 2px solid #dee2e6;
-            gap: 3px;
             flex-shrink: 0;
         }
         .tabs::-webkit-scrollbar {
-            height: 6px;
         }
         .tabs::-webkit-scrollbar-track {
@@ -128,21 +126,24 @@
         }
         .tab {
-            padding: 10px 15px;
             cursor: pointer;
             border: none;
             background: transparent;
             color: #6c757d;
             font-weight: 500;
-            font-size: 0.85em;
             transition: all 0.2s ease;
             white-space: nowrap;
             position: relative;
-            border-radius: 8px 8px 0 0;
-            margin-top: 3px;
             display: flex;
             align-items: center;
-            gap: 6px;
         }
         .tab:hover {
@@ -158,159 +159,162 @@
         .tab.active::after {
             content: '';
             position: absolute;
-            bottom: -2px;
             left: 0;
             right: 0;
             height: 2px;
-            background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
         }
         .close-tab {
-            margin-left: 5px;
             color: #dc3545;
             font-weight: bold;
-            font-size: 1.1em;
             opacity: 0.6;
-            transition: opacity 0.2s;
         }
         .close-tab:hover {
             opacity: 1;
         }
         .content {
             flex: 1;
             overflow: hidden;
             display: flex;
             flex-direction: column;
         }
         .tab-content {
             display: none;
-            animation: fadeIn 0.3s ease;
         }
         .tab-content.active {
-            display: block;
-        }
-        @keyframes fadeIn {
-            from {
-                opacity: 0;
-                transform: translateY(10px);
-            }
-            to {
-                opacity: 1;
-                transform: translateY(0);
-            }
         }
-        .pdf-controls {
             display: flex;
-            justify-content: center;
             align-items: center;
-            gap: 12px;
-            padding: 10px;
-            background: #f8f9fa;
-            border-bottom: 1px solid #dee2e6;
-            flex-shrink: 0;
         }
-        .pdf-controls button {
-            padding: 8px 16px;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            color: white;
-            border: none;
-            border-radius: 6px;
-            cursor: pointer;
-            font-weight: 600;
-            font-size: 0.85em;
-            transition: all 0.2s ease;
         }
-        .pdf-controls button:hover:not(:disabled) {
-            transform: translateY(-1px);
-            box-shadow: 0 3px 8px rgba(102, 126, 234, 0.3);
         }
-        .pdf-controls button:disabled {
-            opacity: 0.4;
-            cursor: not-allowed;
         }
-        .pdf-controls span {
-            font-weight: 600;
-            font-size: 0.9em;
-            color: #495057;
         }
-        .pdf-viewer-container {
             flex: 1;
-            overflow: auto;
-            background: #525252;
             display: flex;
             align-items: center;
             justify-content: center;
-        }
-        .pdf-canvas {
-            display: block;
-            max-width: 100%;
-            height: auto;
-            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
-        }
-        .empty-state {
-            text-align: center;
-            padding: 100px 20px;
-            color: #6c757d;
         }
         .empty-state svg {
-            width: 150px;
-            height: 150px;
             margin-bottom: 20px;
             opacity: 0.5;
         }
         .empty-state h2 {
-            font-size: 1.8em;
             margin-bottom: 10px;
         }
-        .empty-state p {
-            font-size: 1.1em;
-        }
         .loading {
             text-align: center;
             padding: 50px;
-            color: #667eea;
             font-size: 1.2em;
             font-weight: bold;
         }
     </style>
 </head>
 <body>
     <div class="container">
-        <div class="header">
             <h1>📄 PDF Viewer</h1>
             <div class="file-count" id="fileCount" style="display: none;">0 file</div>
-        </div>
-        <div class="upload-section">
-            <div class="upload-area" id="uploadArea">
-                <div class="upload-icon">📁</div>
-                <div>
-                    <div class="upload-text">Chọn PDF</div>
-                    <div class="upload-hint">hoặc kéo thả (nhiều file)</div>
-                </div>
             </div>
-            <input type="file" id="fileInput" accept=".pdf" multiple>
         </div>
         <div class="tabs" id="tabs"></div>
         <div class="content" id="content">
             <div class="empty-state">
                 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
@@ -320,48 +324,58 @@
                     <line x1="16" y1="17" x2="8" y2="17"></line>
                 </svg>
                 <h2>Chưa có PDF nào</h2>
-                <p>Chọn hoặc kéo thả file PDF ở trên để bắt đầu xem</p>
             </div>
         </div>
     </div>
     <script>
-        // Setup PDF.js worker
         pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.worker.min.js';
-        const uploadArea = document.getElementById('uploadArea');
         const fileInput = document.getElementById('fileInput');
         const tabsContainer = document.getElementById('tabs');
         const contentContainer = document.getElementById('content');
         const fileCountEl = document.getElementById('fileCount');
         let pdfFiles = [];
         let pdfDocs = [];
         let currentPages = [];
-        let activeIndex = 0;
-        uploadArea.addEventListener('click', () => fileInput.click());
         fileInput.addEventListener('change', (e) => {
             handleFiles(e.target.files);
         });
-        uploadArea.addEventListener('dragover', (e) => {
             e.preventDefault();
-            uploadArea.classList.add('dragover');
         });
-        uploadArea.addEventListener('dragleave', () => {
-            uploadArea.classList.remove('dragover');
         });
-        uploadArea.addEventListener('drop', (e) => {
             e.preventDefault();
-            uploadArea.classList.remove('dragover');
             const files = Array.from(e.dataTransfer.files).filter(f => f.type === 'application/pdf');
             handleFiles(files);
         });
         function handleFiles(files) {
             if (files.length === 0) return;
@@ -377,14 +391,14 @@
                 addTab(file, fileIndex);
             });
-            if (newFiles.length > 0) {
                 switchTab(startIndex);
             }
         }
         function addTab(file, index) {
             const tab = document.createElement('button');
-            tab.className = 'tab' + (index === 0 ? ' active' : '');
             tab.innerHTML = `
                 <span>📄</span>
                 <span>${file.name}</span>
@@ -392,16 +406,14 @@
             `;
             tab.onclick = () => switchTab(index);
             tab.dataset.index = index;
             tabsContainer.appendChild(tab);
             const tabContent = document.createElement('div');
-            tabContent.className = 'tab-content' + (index === 0 ? ' active' : '');
             tabContent.dataset.index = index;
             tabContent.innerHTML = '<div class="loading">⏳ Đang tải PDF...</div>';
-            contentContainer.innerHTML = '';
-            const allContents = document.querySelectorAll('.tab-content');
-            allContents.forEach(c => contentContainer.appendChild(c));
             contentContainer.appendChild(tabContent);
             loadPDF(file, index, tabContent);
@@ -415,18 +427,36 @@
                 pdfDocs[index] = pdf;
                 currentPages[index] = 1;
-                container.innerHTML = `
-                    <div class="pdf-controls">
-                        <button onclick="changePage(${index}, -1)">◀ Trang trước</button>
-                        <span>Trang <span id="pageNum${index}">1</span> / <span id="pageCount${index}">${pdf.numPages}</span></span>
-                        <button onclick="changePage(${index}, 1)">Trang sau ▶</button>
-                    </div>
-                    <div class="pdf-viewer-container">
-                        <canvas id="pdfCanvas${index}" class="pdf-canvas"></canvas>
-                    </div>
-                `;
-                renderPage(index, 1);
             } catch (error) {
                 container.innerHTML = `
                     <div style="text-align: center; padding: 50px; color: #dc3545;">
@@ -437,32 +467,52 @@
             }
         }
-        async function renderPage(index, pageNum) {
-            const pdf = pdfDocs[index];
-            const page = await pdf.getPage(pageNum);
-            const canvas = document.getElementById(`pdfCanvas${index}`);
-            const context = canvas.getContext('2d');
-            const viewport = page.getViewport({scale: 1.5});
-            canvas.height = viewport.height;
-            canvas.width = viewport.width;
-            await page.render({
-                canvasContext: context,
-                viewport: viewport
-            }).promise;
-            currentPages[index] = pageNum;
-            document.getElementById(`pageNum${index}`).textContent = pageNum;
         }
-        function changePage(index, delta) {
-            const newPage = currentPages[index] + delta;
-            const pdf = pdfDocs[index];
-            if (newPage >= 1 && newPage <= pdf.numPages) {
-                renderPage(index, newPage);
             }
         }
@@ -478,6 +528,15 @@
             contents.forEach((content) => {
                 content.classList.toggle('active', parseInt(content.dataset.index) === index);
             });
         }
         function closeTab(index) {
@@ -488,11 +547,11 @@
             const tab = tabsContainer.querySelector(`[data-index="${index}"]`);
             if (tab) tab.remove();
-            const content = contentContainer.querySelector(`[data-index="${index}"]`);
             if (content) content.remove();
-            const tabs = tabsContainer.querySelectorAll('.tab');
-            tabs.forEach((tab) => {
                 const idx = parseInt(tab.dataset.index);
                 if (idx > index) {
                     tab.dataset.index = idx - 1;
@@ -502,8 +561,7 @@
                 }
             });
-            const contents = contentContainer.querySelectorAll('.tab-content');
-            contents.forEach((content) => {
                 const idx = parseInt(content.dataset.index);
                 if (idx > index) {
                     content.dataset.index = idx - 1;
@@ -512,6 +570,10 @@
             if (pdfFiles.length === 0) {
                 fileCountEl.style.display = 'none';
                 contentContainer.innerHTML = `
                     <div class="empty-state">
                         <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
@@ -521,13 +583,13 @@
                             <line x1="16" y1="17" x2="8" y2="17"></line>
                         </svg>
                         <h2>Chưa có PDF nào</h2>
-                        <p>Chọn hoặc kéo thả file PDF ở trên để bắt đầu xem</p>
                     </div>
                 `;
             } else {
                 fileCountEl.textContent = `${pdfFiles.length} file`;
-                if (activeIndex >= pdfFiles.length) {
-                    switchTab(Math.max(0, pdfFiles.length - 1));
                 }
             }
         }

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>PDF Viewer</title>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js"></script>
     <style>
         * {
         body {
             font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
             background: #2c3e50;
+            height: 100vh;
+            overflow: hidden;
         }
         .container {
             background: white;
         }
+        /* Menu Bar */
+        .menubar {
             background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            padding: 8px 15px;
             display: flex;
             align-items: center;
+            gap: 15px;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
             flex-shrink: 0;
         }
+        .menubar h1 {
+            font-size: 1.1em;
+            color: white;
             margin: 0;
+            font-weight: 600;
         }
+        .menubar-spacer {
+            flex: 1;
         }
+        .btn {
+            padding: 6px 14px;
+            background: rgba(255,255,255,0.2);
+            color: white;
+            border: 1px solid rgba(255,255,255,0.3);
+            border-radius: 5px;
             cursor: pointer;
+            font-weight: 500;
+            font-size: 0.85em;
             transition: all 0.2s ease;
+            white-space: nowrap;
         }
+        .btn:hover:not(:disabled) {
+            background: rgba(255,255,255,0.3);
+            transform: translateY(-1px);
         }
+        .btn:disabled {
+            opacity: 0.4;
+            cursor: not-allowed;
         }
+        .btn-primary {
+            background: white;
+            color: #667eea;
+            border-color: white;
             font-weight: 600;
         }
+        .btn-primary:hover {
+            background: #f8f9fa;
         }
         #fileInput {
         }
         .file-count {
+            padding: 6px 12px;
+            background: rgba(255,255,255,0.9);
+            color: #667eea;
+            border-radius: 15px;
+            font-weight: 600;
+            font-size: 0.85em;
+        }
+        .page-info {
             color: white;
             font-size: 0.9em;
+            font-weight: 500;
         }
+        /* Tabs */
         .tabs {
             display: flex;
             background: #f8f9fa;
             padding: 0 10px;
             overflow-x: auto;
+            border-bottom: 1px solid #dee2e6;
+            gap: 2px;
             flex-shrink: 0;
         }
         .tabs::-webkit-scrollbar {
+            height: 5px;
         }
         .tabs::-webkit-scrollbar-track {
         }
         .tab {
+            padding: 8px 12px;
             cursor: pointer;
             border: none;
             background: transparent;
             color: #6c757d;
             font-weight: 500;
+            font-size: 0.8em;
             transition: all 0.2s ease;
             white-space: nowrap;
             position: relative;
+            border-radius: 6px 6px 0 0;
+            margin-top: 2px;
             display: flex;
             align-items: center;
+            gap: 5px;
+            max-width: 200px;
+            overflow: hidden;
+            text-overflow: ellipsis;
         }
         .tab:hover {
         .tab.active::after {
             content: '';
             position: absolute;
+            bottom: -1px;
             left: 0;
             right: 0;
             height: 2px;
+            background: #667eea;
         }
         .close-tab {
+            margin-left: auto;
             color: #dc3545;
             font-weight: bold;
+            font-size: 1em;
             opacity: 0.6;
+            padding: 0 4px;
         }
         .close-tab:hover {
             opacity: 1;
         }
+        /* Content Area */
         .content {
             flex: 1;
             overflow: hidden;
             display: flex;
             flex-direction: column;
+            background: #525252;
         }
         .tab-content {
             display: none;
+            flex: 1;
+            overflow: auto;
         }
         .tab-content.active {
+            display: flex;
+            flex-direction: column;
         }
+        .pdf-viewer-container {
+            flex: 1;
+            overflow: auto;
+            background: #525252;
+            padding: 20px;
             display: flex;
+            flex-direction: column;
             align-items: center;
+            gap: 20px;
         }
+        .pdf-viewer-container::-webkit-scrollbar {
+            width: 10px;
         }
+        .pdf-viewer-container::-webkit-scrollbar-track {
+            background: #3a3a3a;
         }
+        .pdf-viewer-container::-webkit-scrollbar-thumb {
+            background: #667eea;
+            border-radius: 5px;
         }
+        .pdf-page {
+            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
+            background: white;
         }
+        .empty-state {
             flex: 1;
             display: flex;
+            flex-direction: column;
             align-items: center;
             justify-content: center;
+            color: #aaa;
+            padding: 50px;
         }
         .empty-state svg {
+            width: 100px;
+            height: 100px;
             margin-bottom: 20px;
             opacity: 0.5;
         }
         .empty-state h2 {
+            font-size: 1.5em;
             margin-bottom: 10px;
         }
         .loading {
             text-align: center;
             padding: 50px;
+            color: white;
             font-size: 1.2em;
             font-weight: bold;
         }
+        /* Drag and Drop Overlay */
+        .drop-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(102, 126, 234, 0.95);
+            display: none;
+            align-items: center;
+            justify-content: center;
+            z-index: 9999;
+        }
+        .drop-overlay.active {
+            display: flex;
+        }
+        .drop-message {
+            color: white;
+            font-size: 2em;
+            font-weight: bold;
+            text-align: center;
+        }
     </style>
 </head>
 <body>
+    <div class="drop-overlay" id="dropOverlay">
+        <div class="drop-message">📄 Thả file PDF vào đây</div>
+    </div>
     <div class="container">
+        <!-- Menu Bar -->
+        <div class="menubar">
             <h1>📄 PDF Viewer</h1>
+            <label for="fileInput" class="btn btn-primary">
+                📁 Mở file
+            </label>
+            <input type="file" id="fileInput" accept=".pdf" multiple>
             <div class="file-count" id="fileCount" style="display: none;">0 file</div>
+            <div class="menubar-spacer"></div>
+            <div class="page-info" id="pageInfo" style="display: none;">
+                Trang <span id="currentPage">1</span> / <span id="totalPages">1</span>
             </div>
+            <button class="btn" id="prevPage" style="display: none;">◀</button>
+            <button class="btn" id="nextPage" style="display: none;">▶</button>
         </div>
+        <!-- Tabs -->
         <div class="tabs" id="tabs"></div>
+        <!-- Content -->
         <div class="content" id="content">
             <div class="empty-state">
                 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                     <line x1="16" y1="17" x2="8" y2="17"></line>
                 </svg>
                 <h2>Chưa có PDF nào</h2>
+                <p>Nhấn "Mở file" hoặc kéo thả file PDF vào đây</p>
             </div>
         </div>
     </div>
     <script>
         pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.worker.min.js';
         const fileInput = document.getElementById('fileInput');
         const tabsContainer = document.getElementById('tabs');
         const contentContainer = document.getElementById('content');
         const fileCountEl = document.getElementById('fileCount');
+        const pageInfo = document.getElementById('pageInfo');
+        const currentPageEl = document.getElementById('currentPage');
+        const totalPagesEl = document.getElementById('totalPages');
+        const prevPageBtn = document.getElementById('prevPage');
+        const nextPageBtn = document.getElementById('nextPage');
+        const dropOverlay = document.getElementById('dropOverlay');
         let pdfFiles = [];
         let pdfDocs = [];
         let currentPages = [];
+        let activeIndex = -1;
+        // File input
         fileInput.addEventListener('change', (e) => {
             handleFiles(e.target.files);
         });
+        // Global drag and drop
+        document.body.addEventListener('dragover', (e) => {
             e.preventDefault();
+            dropOverlay.classList.add('active');
         });
+        document.body.addEventListener('dragleave', (e) => {
+            if (e.target === document.body) {
+                dropOverlay.classList.remove('active');
+            }
         });
+        document.body.addEventListener('drop', (e) => {
             e.preventDefault();
+            dropOverlay.classList.remove('active');
             const files = Array.from(e.dataTransfer.files).filter(f => f.type === 'application/pdf');
             handleFiles(files);
         });
+        // Page navigation
+        prevPageBtn.addEventListener('click', () => scrollToPrevPage());
+        nextPageBtn.addEventListener('click', () => scrollToNextPage());
         function handleFiles(files) {
             if (files.length === 0) return;
                 addTab(file, fileIndex);
             });
+            if (activeIndex === -1) {
                 switchTab(startIndex);
             }
         }
         function addTab(file, index) {
             const tab = document.createElement('button');
+            tab.className = 'tab';
             tab.innerHTML = `
                 <span>📄</span>
                 <span>${file.name}</span>
             `;
             tab.onclick = () => switchTab(index);
             tab.dataset.index = index;
+            tab.title = file.name;
             tabsContainer.appendChild(tab);
             const tabContent = document.createElement('div');
+            tabContent.className = 'tab-content';
             tabContent.dataset.index = index;
             tabContent.innerHTML = '<div class="loading">⏳ Đang tải PDF...</div>';
             contentContainer.appendChild(tabContent);
             loadPDF(file, index, tabContent);
                 pdfDocs[index] = pdf;
                 currentPages[index] = 1;
+                const viewerContainer = document.createElement('div');
+                viewerContainer.className = 'pdf-viewer-container';
+                viewerContainer.dataset.index = index;
+                // Render all pages
+                for (let pageNum = 1; pageNum <= pdf.numPages; pageNum++) {
+                    const page = await pdf.getPage(pageNum);
+                    const viewport = page.getViewport({scale: 1.5});
+                    const canvas = document.createElement('canvas');
+                    canvas.className = 'pdf-page';
+                    canvas.height = viewport.height;
+                    canvas.width = viewport.width;
+                    canvas.dataset.page = pageNum;
+                    const context = canvas.getContext('2d');
+                    await page.render({
+                        canvasContext: context,
+                        viewport: viewport
+                    }).promise;
+                    viewerContainer.appendChild(canvas);
+                }
+                container.innerHTML = '';
+                container.appendChild(viewerContainer);
+                // Setup scroll tracking
+                viewerContainer.addEventListener('scroll', () => updateCurrentPage(index, viewerContainer));
             } catch (error) {
                 container.innerHTML = `
                     <div style="text-align: center; padding: 50px; color: #dc3545;">
             }
         }
+        function updateCurrentPage(index, container) {
+            if (index !== activeIndex) return;
+            const pages = container.querySelectorAll('.pdf-page');
+            const containerRect = container.getBoundingClientRect();
+            const containerCenter = containerRect.top + containerRect.height / 2;
+            let closestPage = 1;
+            let closestDistance = Infinity;
+            pages.forEach((page, idx) => {
+                const pageRect = page.getBoundingClientRect();
+                const pageCenter = pageRect.top + pageRect.height / 2;
+                const distance = Math.abs(pageCenter - containerCenter);
+                if (distance < closestDistance) {
+                    closestDistance = distance;
+                    closestPage = idx + 1;
+                }
+            });
+            currentPages[index] = closestPage;
+            currentPageEl.textContent = closestPage;
+        }
+        function scrollToPrevPage() {
+            const container = contentContainer.querySelector(`.tab-content.active .pdf-viewer-container`);
+            if (!container) return;
+            const targetPage = Math.max(1, currentPages[activeIndex] - 1);
+            scrollToPage(container, targetPage);
         }
+        function scrollToNextPage() {
+            const container = contentContainer.querySelector(`.tab-content.active .pdf-viewer-container`);
+            if (!container) return;
+            const pdf = pdfDocs[activeIndex];
+            const targetPage = Math.min(pdf.numPages, currentPages[activeIndex] + 1);
+            scrollToPage(container, targetPage);
+        }
+        function scrollToPage(container, pageNum) {
+            const page = container.querySelector(`[data-page="${pageNum}"]`);
+            if (page) {
+                page.scrollIntoView({ behavior: 'smooth', block: 'center' });
             }
         }
             contents.forEach((content) => {
                 content.classList.toggle('active', parseInt(content.dataset.index) === index);
             });
+            // Update page info
+            if (pdfDocs[index]) {
+                pageInfo.style.display = 'block';
+                prevPageBtn.style.display = 'inline-block';
+                nextPageBtn.style.display = 'inline-block';
+                totalPagesEl.textContent = pdfDocs[index].numPages;
+                currentPageEl.textContent = currentPages[index] || 1;
+            }
         }
         function closeTab(index) {
             const tab = tabsContainer.querySelector(`[data-index="${index}"]`);
             if (tab) tab.remove();
+            const content = contentContainer.querySelector(`.tab-content[data-index="${index}"]`);
             if (content) content.remove();
+            // Update indices
+            tabsContainer.querySelectorAll('.tab').forEach((tab) => {
                 const idx = parseInt(tab.dataset.index);
                 if (idx > index) {
                     tab.dataset.index = idx - 1;
                 }
             });
+            contentContainer.querySelectorAll('.tab-content').forEach((content) => {
                 const idx = parseInt(content.dataset.index);
                 if (idx > index) {
                     content.dataset.index = idx - 1;
             if (pdfFiles.length === 0) {
                 fileCountEl.style.display = 'none';
+                pageInfo.style.display = 'none';
+                prevPageBtn.style.display = 'none';
+                nextPageBtn.style.display = 'none';
+                activeIndex = -1;
                 contentContainer.innerHTML = `
                     <div class="empty-state">
                         <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                             <line x1="16" y1="17" x2="8" y2="17"></line>
                         </svg>
                         <h2>Chưa có PDF nào</h2>
+                        <p>Nhấn "Mở file" hoặc kéo thả file PDF vào đây</p>
                     </div>
                 `;
             } else {
                 fileCountEl.textContent = `${pdfFiles.length} file`;
+                if (activeIndex >= pdfFiles.length || activeIndex === index) {
+                    switchTab(Math.max(0, Math.min(index, pdfFiles.length - 1)));
                 }
             }
         }