Update index.html

index.html

@@ -40,58 +40,66 @@
             text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
         }
 
-        .file-list-section {
-            padding: 20px 30px;
+        .upload-section {
+            padding: 40px;
             background: #f8f9fa;
             border-bottom: 2px solid #e9ecef;
+            text-align: center;
         }
 
-        .file-list-title {
-            font-size: 1.2em;
-            color: #495057;
-            margin-bottom: 15px;
-            font-weight: 600;
+        .upload-area {
+            border: 3px dashed #667eea;
+            border-radius: 15px;
+            padding: 60px 20px;
+            background: white;
+            transition: all 0.3s ease;
+            cursor: pointer;
         }
 
-        .file-list {
-            display: grid;
-            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-            gap: 10px;
+        .upload-area:hover {
+            border-color: #764ba2;
+            background: #f8f9ff;
+            transform: translateY(-5px);
+            box-shadow: 0 10px 30px rgba(102, 126, 234, 0.2);
         }
 
-        .file-item {
-            background: white;
-            padding: 12px 18px;
-            border-radius: 8px;
-            cursor: pointer;
-            transition: all 0.3s ease;
-            border: 2px solid #e9ecef;
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
+        .upload-area.dragover {
+            border-color: #764ba2;
+            background: #f0f0ff;
+            transform: scale(1.02);
         }
 
-        .file-item:hover {
-            border-color: #667eea;
-            transform: translateY(-2px);
-            box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
+        .upload-icon {
+            font-size: 4em;
+            margin-bottom: 20px;
         }
 
-        .file-item.active {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            color: white;
-            border-color: #667eea;
+        .upload-text {
+            font-size: 1.3em;
+            color: #495057;
+            margin-bottom: 10px;
+            font-weight: 600;
+        }
+
+        .upload-hint {
+            color: #6c757d;
+            font-size: 1em;
+        }
+
+        #fileInput {
+            display: none;
         }
 
         .file-count {
-            background: white;
-            padding: 8px 15px;
-            border-radius: 20px;
-            font-weight: bold;
-            color: #667eea;
-            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+            margin-top: 20px;
+            padding: 15px 30px;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: white;
+            border-radius: 30px;
             display: inline-block;
+            font-weight: bold;
+            font-size: 1.1em;
+            box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
         }
 
         .tabs {
@@ -100,6 +108,7 @@
             padding: 0 20px;
             overflow-x: auto;
             border-bottom: 3px solid #e9ecef;
+            gap: 5px;
         }
 
         .tabs::-webkit-scrollbar {
@@ -127,6 +136,9 @@
             position: relative;
             border-radius: 10px 10px 0 0;
             margin-top: 5px;
+            display: flex;
+            align-items: center;
+            gap: 8px;
         }
 
         .tab:hover {
@@ -150,6 +162,18 @@
             background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
         }
 
+        .close-tab {
+            margin-left: 8px;
+            color: #dc3545;
+            font-weight: bold;
+            opacity: 0.6;
+            transition: opacity 0.2s;
+        }
+
+        .close-tab:hover {
+            opacity: 1;
+        }
+
         .content {
             padding: 30px;
             min-height: 500px;
@@ -180,7 +204,7 @@
             height: 700px;
             border: 2px solid #e9ecef;
             border-radius: 10px;
-            background: white;
+            background: #f8f9fa;
             box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
         }
 
@@ -205,31 +229,23 @@
         .empty-state p {
             font-size: 1.1em;
         }
-
-        .error-message {
-            text-align: center;
-            padding: 50px;
-            color: #dc3545;
-        }
-
-        .error-message h2 {
-            margin-bottom: 10px;
-        }
     </style>
 </head>
 <body>
     <div class="container">
         <div class="header">
-            <h1>📄 PDF Auto Loader</h1>
-            <p>Tự động load tất cả file PDF trong thư mục</p>
+            <h1>📄 PDF Tab Viewer</h1>
+            <p>Chọn hoặc kéo thả nhiều file PDF để xem</p>
         </div>
 
-        <div class="file-list-section">
-            <div class="file-list-title">
-                <span>📁 File PDF trong thư mục:</span>
-                <span class="file-count" id="fileCount">Đang tìm...</span>
+        <div class="upload-section">
+            <div class="upload-area" id="uploadArea">
+                <div class="upload-icon">📁</div>
+                <div class="upload-text">Nhấn để chọn file PDF</div>
+                <div class="upload-hint">hoặc kéo thả file vào đây (có thể chọn nhiều file)</div>
             </div>
-            <div class="file-list" id="fileList"></div>
+            <input type="file" id="fileInput" accept=".pdf" multiple>
+            <div class="file-count" id="fileCount" style="display: none;">0 file đã chọn</div>
         </div>
 
         <div class="tabs" id="tabs"></div>
@@ -241,149 +257,153 @@
                     <polyline points="14 2 14 8 20 8"></polyline>
                     <line x1="16" y1="13" x2="8" y2="13"></line>
                     <line x1="16" y1="17" x2="8" y2="17"></line>
-                    <polyline points="10 9 9 9 8 9"></polyline>
                 </svg>
-                <h2>Chưa có file nào được chọn</h2>
-                <p>Nhấn vào tên file ở trên để xem PDF</p>
+                <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>
-        const fileListContainer = document.getElementById('fileList');
+        const uploadArea = document.getElementById('uploadArea');
+        const fileInput = document.getElementById('fileInput');
         const tabsContainer = document.getElementById('tabs');
         const contentContainer = document.getElementById('content');
-        const fileCount = document.getElementById('fileCount');
+        const fileCountEl = document.getElementById('fileCount');
         
-        // Danh sách file PDF trong thư mục (thêm tên file của bạn vào đây)
-        const pdfFiles = [
-            'document1.pdf',
-            'report.pdf',
-            'presentation.pdf',
-            'manual.pdf',
-            'guide.pdf'
-            // Thêm tên file PDF của bạn vào đây
-        ];
-
-        let activeFiles = [];
-
-        // Initialize
-        init();
-
-        function init() {
-            if (pdfFiles.length === 0) {
-                fileCount.textContent = 'Không có file';
-                return;
-            }
-
-            fileCount.textContent = `${pdfFiles.length} file`;
-
-            // Create file list
-            pdfFiles.forEach((fileName, index) => {
-                const fileItem = document.createElement('div');
-                fileItem.className = 'file-item';
-                fileItem.innerHTML = `📄 ${fileName}`;
-                fileItem.onclick = () => toggleFile(fileName, index, fileItem);
-                fileListContainer.appendChild(fileItem);
+        let pdfFiles = [];
+        let activeIndex = 0;
+
+        // Click to select files
+        uploadArea.addEventListener('click', () => {
+            fileInput.click();
+        });
+
+        // File input change
+        fileInput.addEventListener('change', (e) => {
+            handleFiles(e.target.files);
+        });
+
+        // Drag and drop
+        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;
+
+            const newFiles = Array.from(files);
+            pdfFiles = [...pdfFiles, ...newFiles];
+
+            // Update file count
+            fileCountEl.style.display = 'inline-block';
+            fileCountEl.textContent = `${pdfFiles.length} file đã chọn`;
+
+            // Add new tabs and content
+            newFiles.forEach((file, idx) => {
+                const fileIndex = pdfFiles.length - newFiles.length + idx;
+                addTab(file, fileIndex);
             });
 
-            // Auto load all files
-            loadAllFiles();
-        }
-
-        function toggleFile(fileName, index, element) {
-            if (activeFiles.includes(fileName)) {
-                // Remove file
-                activeFiles = activeFiles.filter(f => f !== fileName);
-                element.classList.remove('active');
-                removeTab(fileName);
-            } else {
-                // Add file
-                activeFiles.push(fileName);
-                element.classList.add('active');
-                addTab(fileName, activeFiles.length - 1);
+            // Activate first new file
+            if (newFiles.length > 0) {
+                switchTab(pdfFiles.length - newFiles.length);
             }
         }
 
-        function loadAllFiles() {
-            pdfFiles.forEach((fileName, index) => {
-                activeFiles.push(fileName);
-                const fileItems = fileListContainer.querySelectorAll('.file-item');
-                fileItems[index].classList.add('active');
-                addTab(fileName, index);
-            });
-        }
-
-        function addTab(fileName, index) {
+        function addTab(file, index) {
             // Create tab
             const tab = document.createElement('button');
-            tab.className = 'tab' + (index === 0 ? ' active' : '');
-            tab.textContent = fileName;
-            tab.dataset.file = fileName;
-            tab.onclick = () => switchTab(fileName);
+            tab.className = 'tab' + (pdfFiles.length === 1 ? ' active' : '');
+            tab.innerHTML = `
+                <span>📄</span>
+                <span>${file.name}</span>
+                <span class="close-tab" onclick="event.stopPropagation(); closeTab(${index})">×</span>
+            `;
+            tab.onclick = () => switchTab(index);
+            tab.dataset.index = index;
             tabsContainer.appendChild(tab);
 
             // Create content
             const tabContent = document.createElement('div');
-            tabContent.className = 'tab-content' + (index === 0 ? ' active' : '');
-            tabContent.dataset.file = fileName;
-
-            // Create embed/object to display PDF
-            const pdfEmbed = document.createElement('embed');
-            pdfEmbed.src = fileName;
-            pdfEmbed.type = 'application/pdf';
-            pdfEmbed.className = 'pdf-viewer';
-            
-            // Fallback if PDF can't be displayed
-            pdfEmbed.onerror = function() {
-                tabContent.innerHTML = `
-                    <div class="error-message">
-                        <h2>❌ Không thể hiển thị PDF</h2>
-                        <p><strong>${fileName}</strong> không tồn tại hoặc không thể truy cập</p>
-                        <p style="margin-top: 15px;">
-                            <a href="${fileName}" target="_blank" style="color: #667eea; text-decoration: none; font-weight: bold;">
-                                🔗 Thử mở trực tiếp file này
-                            </a>
-                        </p>
-                    </div>
-                `;
+            tabContent.className = 'tab-content' + (pdfFiles.length === 1 ? ' active' : '');
+            tabContent.dataset.index = index;
+
+            // Create PDF viewer
+            const reader = new FileReader();
+            reader.onload = function(e) {
+                const embed = document.createElement('embed');
+                embed.src = e.target.result;
+                embed.type = 'application/pdf';
+                embed.className = 'pdf-viewer';
+                tabContent.appendChild(embed);
             };
-
-            tabContent.appendChild(pdfEmbed);
+            reader.readAsDataURL(file);
 
             contentContainer.innerHTML = '';
+            const allContents = document.querySelectorAll('.tab-content');
+            allContents.forEach(c => contentContainer.appendChild(c));
             contentContainer.appendChild(tabContent);
+        }
+
+        function switchTab(index) {
+            activeIndex = index;
             
-            // Update content container
-            const existingContents = contentContainer.querySelectorAll('.tab-content');
-            if (existingContents.length > 0) {
-                existingContents.forEach(content => {
-                    if (content !== tabContent) {
-                        contentContainer.appendChild(content);
-                    }
-                });
-            }
+            // Update tabs
+            const tabs = tabsContainer.querySelectorAll('.tab');
+            tabs.forEach((tab, i) => {
+                tab.classList.toggle('active', parseInt(tab.dataset.index) === index);
+            });
+
+            // Update content
+            const contents = contentContainer.querySelectorAll('.tab-content');
+            contents.forEach((content, i) => {
+                content.classList.toggle('active', parseInt(content.dataset.index) === index);
+            });
         }
 
-        function removeTab(fileName) {
+        function closeTab(index) {
+            // Remove from array
+            pdfFiles.splice(index, 1);
+
             // Remove tab
-            const tab = tabsContainer.querySelector(`[data-file="${fileName}"]`);
-            if (tab) {
-                const wasActive = tab.classList.contains('active');
-                tab.remove();
-                
-                // If removed tab was active, activate first remaining tab
-                if (wasActive && activeFiles.length > 0) {
-                    switchTab(activeFiles[0]);
-                }
-            }
+            const tab = tabsContainer.querySelector(`[data-index="${index}"]`);
+            if (tab) tab.remove();
 
             // Remove content
-            const content = contentContainer.querySelector(`[data-file="${fileName}"]`);
+            const content = contentContainer.querySelector(`[data-index="${index}"]`);
             if (content) content.remove();
 
-            // Show empty state if no files
-            if (activeFiles.length === 0) {
+            // Update indices
+            const tabs = tabsContainer.querySelectorAll('.tab');
+            tabs.forEach((tab, i) => {
+                if (parseInt(tab.dataset.index) > index) {
+                    tab.dataset.index = parseInt(tab.dataset.index) - 1;
+                }
+            });
+
+            const contents = contentContainer.querySelectorAll('.tab-content');
+            contents.forEach((content, i) => {
+                if (parseInt(content.dataset.index) > index) {
+                    content.dataset.index = parseInt(content.dataset.index) - 1;
+                }
+            });
+
+            // Update file count
+            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">
@@ -391,28 +411,19 @@
                             <polyline points="14 2 14 8 20 8"></polyline>
                             <line x1="16" y1="13" x2="8" y2="13"></line>
                             <line x1="16" y1="17" x2="8" y2="17"></line>
-                            <polyline points="10 9 9 9 8 9"></polyline>
                         </svg>
-                        <h2>Chưa có file nào được chọn</h2>
-                        <p>Nhấn vào tên file ở trên để xem PDF</p>
+                        <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 đã chọn`;
+                // Switch to first tab if active was closed
+                if (activeIndex >= pdfFiles.length) {
+                    switchTab(Math.max(0, pdfFiles.length - 1));
+                }
             }
         }
-
-        function switchTab(fileName) {
-            // Update tabs
-            const tabs = tabsContainer.querySelectorAll('.tab');
-            tabs.forEach(tab => {
-                tab.classList.toggle('active', tab.dataset.file === fileName);
-            });
-
-            // Update content
-            const contents = contentContainer.querySelectorAll('.tab-content');
-            contents.forEach(content => {
-                content.classList.toggle('active', content.dataset.file === fileName);
-            });
-        }
     </script>
 </body>
 </html>