Spaces:

Translsis
/

GTVT

Running

App Files Files Community

Translsis commited on Dec 16, 2025

Commit

5e1a369

verified ·

1 Parent(s): 8afa753

Update index.html

Browse files

Files changed (1) hide show

index.html +393 -19

index.html CHANGED Viewed

@@ -1,19 +1,393 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="vi">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>HTML Tab Viewer</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        body {
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            min-height: 100vh;
+            padding: 20px;
+        }
+        .container {
+            max-width: 1400px;
+            margin: 0 auto;
+            background: white;
+            border-radius: 20px;
+            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+            overflow: hidden;
+        }
+        .header {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            padding: 30px;
+            color: white;
+            text-align: center;
+        }
+        .header h1 {
+            font-size: 2.5em;
+            margin-bottom: 10px;
+            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
+        }
+        .file-list-section {
+            padding: 20px 30px;
+            background: #f8f9fa;
+            border-bottom: 2px solid #e9ecef;
+        }
+        .file-list-title {
+            font-size: 1.2em;
+            color: #495057;
+            margin-bottom: 15px;
+            font-weight: 600;
+        }
+        .file-list {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+            gap: 10px;
+        }
+        .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);
+        }
+        .file-item:hover {
+            border-color: #667eea;
+            transform: translateY(-2px);
+            box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
+        }
+        .file-item.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: white;
+            border-color: #667eea;
+        }
+        .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);
+            display: inline-block;
+        }
+        .tabs {
+            display: flex;
+            background: #f8f9fa;
+            padding: 0 20px;
+            overflow-x: auto;
+            border-bottom: 3px solid #e9ecef;
+        }
+        .tabs::-webkit-scrollbar {
+            height: 8px;
+        }
+        .tabs::-webkit-scrollbar-track {
+            background: #f1f1f1;
+        }
+        .tabs::-webkit-scrollbar-thumb {
+            background: #667eea;
+            border-radius: 4px;
+        }
+        .tab {
+            padding: 15px 25px;
+            cursor: pointer;
+            border: none;
+            background: transparent;
+            color: #6c757d;
+            font-weight: 600;
+            transition: all 0.3s ease;
+            white-space: nowrap;
+            position: relative;
+            border-radius: 10px 10px 0 0;
+            margin-top: 5px;
+        }
+        .tab:hover {
+            background: rgba(102, 126, 234, 0.1);
+            color: #667eea;
+        }
+        .tab.active {
+            background: white;
+            color: #667eea;
+            box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
+        }
+        .tab.active::after {
+            content: '';
+            position: absolute;
+            bottom: -3px;
+            left: 0;
+            right: 0;
+            height: 3px;
+            background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
+        }
+        .content {
+            padding: 30px;
+            min-height: 500px;
+        }
+        .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);
+            }
+        }
+        iframe {
+            width: 100%;
+            height: 600px;
+            border: 2px solid #e9ecef;
+            border-radius: 10px;
+            background: white;
+            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+        }
+        .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;
+        }
+    </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>
+        </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">
+                    <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>
+    <script>
+        const fileListContainer = document.getElementById('fileList');
+        const tabsContainer = document.getElementById('tabs');
+        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 = [];
+        // Initialize
+        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}`;
+                fileItem.onclick = () => toggleFile(fileName, index, fileItem);
+                fileListContainer.appendChild(fileItem);
+            });
+            // 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);
+            }
+        }
+        function loadAllFiles() {
+            htmlFiles.forEach((fileName, index) => {
+                activeFiles.push(fileName);
+                const fileItems = fileListContainer.querySelectorAll('.file-item');
+                fileItems[index].classList.add('active');
+                addTab(fileName, index);
+            });
+        }
+        function addTab(fileName, 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);
+            tabsContainer.appendChild(tab);
+            // Create content
+            const tabContent = document.createElement('div');
+            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);
+            // Update content container
+            const existingContents = contentContainer.querySelectorAll('.tab-content');
+            if (existingContents.length > 0) {
+                existingContents.forEach(content => {
+                    if (content !== tabContent) {
+                        contentContainer.appendChild(content);
+                    }
+                });
+            }
+        }
+        function removeTab(fileName) {
+            // 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]);
+                }
+            }
+            // Remove content
+            const content = contentContainer.querySelector(`[data-file="${fileName}"]`);
+            if (content) content.remove();
+            // Show empty state if no files
+            if (activeFiles.length === 0) {
+                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>
+                `;
+            }
+        }
+        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>