Spaces:

Translsis
/

GTVT

Running

App Files Files Community

Translsis commited on Dec 16, 2025

Commit

fdc530a

verified ·

1 Parent(s): 5e1a369

Update index.html

Browse files

Files changed (1) hide show

index.html +58 -33

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>HTML Tab Viewer</title>
     <style>
         * {
             margin: 0;
@@ -175,9 +175,9 @@
             }
         }
-        iframe {
             width: 100%;
-            height: 600px;
             border: 2px solid #e9ecef;
             border-radius: 10px;
             background: white;
@@ -205,18 +205,28 @@
         .empty-state p {
             font-size: 1.1em;
         }
     </style>
 </head>
 <body>
     <div class="container">
         <div class="header">
-            <h1>📂 HTML Auto Loader</h1>
-            <p>Tự động load tất cả file HTML trong thư mục</p>
         </div>
         <div class="file-list-section">
             <div class="file-list-title">
-                <span>📁 File HTML trong thư mục:</span>
                 <span class="file-count" id="fileCount">Đang tìm...</span>
             </div>
             <div class="file-list" id="fileList"></div>
@@ -227,11 +237,14 @@
         <div class="content" id="content">
             <div class="empty-state">
                 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                    <path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"></path>
-                    <polyline points="13 2 13 9 20 9"></polyline>
                 </svg>
                 <h2>Chưa có file nào được chọn</h2>
-                <p>Nhấn nút "Chọn file HTML" ở trên để bắt đầu</p>
             </div>
         </div>
     </div>
@@ -242,14 +255,14 @@
         const contentContainer = document.getElementById('content');
         const fileCount = document.getElementById('fileCount');
-        // Danh sách file HTML trong thư mục (thêm tên file của bạn vào đây)
-        const htmlFiles = [
-            'index.html',
-            'page1.html',
-            'page2.html',
-            'contact.html',
-            'about.html'
-            // Thêm tên file HTML của bạn vào đây
         ];
         let activeFiles = [];
@@ -258,15 +271,15 @@
         init();
         function init() {
-            if (htmlFiles.length === 0) {
                 fileCount.textContent = 'Không có file';
                 return;
             }
-            fileCount.textContent = `${htmlFiles.length} file`;
             // Create file list
-            htmlFiles.forEach((fileName, index) => {
                 const fileItem = document.createElement('div');
                 fileItem.className = 'file-item';
                 fileItem.innerHTML = `📄 ${fileName}`;
@@ -293,7 +306,7 @@
         }
         function loadAllFiles() {
-            htmlFiles.forEach((fileName, index) => {
                 activeFiles.push(fileName);
                 const fileItems = fileListContainer.querySelectorAll('.file-item');
                 fileItems[index].classList.add('active');
@@ -315,19 +328,28 @@
             tabContent.className = 'tab-content' + (index === 0 ? ' active' : '');
             tabContent.dataset.file = fileName;
-            // Create iframe to load the file
-            const iframe = document.createElement('iframe');
-            iframe.src = fileName;
-            iframe.sandbox = 'allow-scripts allow-same-origin allow-forms allow-modals allow-popups';
-            iframe.onerror = function() {
                 tabContent.innerHTML = `
-                    <div style="text-align: center; padding: 50px; color: #dc3545;">
-                        <h2>❌ Không thể load file</h2>
-                        <p>${fileName} không tồn tại hoặc không thể truy cập</p>
                     </div>
                 `;
             };
-            tabContent.appendChild(iframe);
             contentContainer.innerHTML = '';
             contentContainer.appendChild(tabContent);
@@ -365,11 +387,14 @@
                 contentContainer.innerHTML = `
                     <div class="empty-state">
                         <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                            <path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"></path>
-                            <polyline points="13 2 13 9 20 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</p>
                     </div>
                 `;
             }

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>PDF Tab Viewer</title>
     <style>
         * {
             margin: 0;
             }
         }
+        .pdf-viewer {
             width: 100%;
+            height: 700px;
             border: 2px solid #e9ecef;
             border-radius: 10px;
             background: white;
         .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>
         </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>
             <div class="file-list" id="fileList"></div>
         <div class="content" id="content">
             <div class="empty-state">
                 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <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>
+                    <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>
             </div>
         </div>
     </div>
         const contentContainer = document.getElementById('content');
         const fileCount = 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 = [];
         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}`;
         }
         function loadAllFiles() {
+            pdfFiles.forEach((fileName, index) => {
                 activeFiles.push(fileName);
                 const fileItems = fileListContainer.querySelectorAll('.file-item');
                 fileItems[index].classList.add('active');
             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.appendChild(pdfEmbed);
             contentContainer.innerHTML = '';
             contentContainer.appendChild(tabContent);
                 contentContainer.innerHTML = `
                     <div class="empty-state">
                         <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <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>
+                            <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>
                     </div>
                 `;
             }