Spaces:
Sleeping
Sleeping
| <!DOCTYPE html> | |
| <html lang="zh-TW"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Hugging Face System</title> | |
| <style> | |
| body { | |
| font-family: Arial, sans-serif; | |
| margin: 0; | |
| padding: 20px; | |
| background-color: #f4f4f4; | |
| } | |
| .tab-container { | |
| width: 100%; | |
| max-width: 900px; /* 根據 iframe 寬度調整 */ | |
| margin: 0 auto; | |
| background: #fff; | |
| box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); | |
| border-radius: 8px; | |
| overflow: hidden; | |
| } | |
| .tab-header { | |
| display: flex; | |
| justify-content: flex-end; /* 將頁籤容器內容靠右對齊 */ | |
| list-style: none; | |
| padding: 0; | |
| margin: 0; | |
| border-bottom: 2px solid #ccc; | |
| } | |
| .tab-header li { | |
| padding: 10px 15px; | |
| cursor: pointer; | |
| border: 1px solid transparent; | |
| border-bottom: none; | |
| margin-bottom: -2px; /* 使邊框與下劃線重疊 */ | |
| transition: background-color 0.3s, color 0.3s; | |
| font-weight: bold; | |
| } | |
| .tab-header li:hover { | |
| background-color: #eee; | |
| } | |
| .tab-header li.active { | |
| color: #007bff; | |
| border-color: #ccc; | |
| border-bottom: 2px solid #fff; /* 覆蓋下邊線，形成選中效果 */ | |
| background-color: #fff; | |
| } | |
| .tab-content { | |
| padding: 0px; | |
| } | |
| .tab-pane { | |
| display: none; /* 默認隱藏所有內容 */ | |
| } | |
| .tab-pane.active { | |
| display: block; /* 顯示選中的內容 */ | |
| } | |
| /* 調整 iframe 樣式 */ | |
| .tab-pane iframe { | |
| display: block; | |
| margin: 0 auto; /* 使 iframe 居中 */ | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="tab-container"> | |
| <ul class="tab-header"> | |
| <li class="tab-link active" data-tab="tab-1">多圖片文字辨識工具（Groq API｜CSV／DOCX）</li> | |
| <li class="tab-link" data-tab="tab-2">ESG爬蟲</li> | |
| </ul> | |
| <div class="tab-content"> | |
| <div id="tab-1" class="tab-pane active"> | |
| <iframe | |
| src="https://123sabrina-mmml-2025.hf.space" | |
| frameborder="0" | |
| width="850" | |
| height="450" | |
| ></iframe> | |
| </div> | |
| <div id="tab-2" class="tab-pane"> | |
| <iframe | |
| src="https://roberta2024-0825esgscraper.hf.space" | |
| frameborder="0" | |
| width="850" | |
| height="450" | |
| ></iframe> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', () => { | |
| const tabs = document.querySelectorAll('.tab-link'); | |
| const tabPanes = document.querySelectorAll('.tab-pane'); | |
| tabs.forEach(tab => { | |
| tab.addEventListener('click', () => { | |
| const targetTab = tab.getAttribute('data-tab'); | |
| // 移除所有頁籤的 active 類別 | |
| tabs.forEach(t => t.classList.remove('active')); | |
| // 隱藏所有內容面板 | |
| tabPanes.forEach(pane => pane.classList.remove('active')); | |
| // 設置當前點擊的頁籤為 active | |
| tab.classList.add('active'); | |
| // 顯示對應的內容面板 | |
| document.getElementById(targetTab).classList.add('active'); | |
| }); | |
| }); | |
| // 默認激活第一個頁籤 | |
| // 在 HTML 中已設置第一個頁籤和內容為 active，這段代碼可以保險起見保留，但目前非必要 | |
| // document.querySelector('.tab-link').click(); | |
| }); | |
| </script> | |
| </body> | |
| </html> |