Hugging Face's logo

Spaces:
123Sabrina
/
0825_ESG
Sleeping

App Files Community
123Sabrina commited on
Commit
d59cae2
·
verified ·
1 Parent(s): 80a5d4e

Upload system.txt

Browse files
Files changed (1) hide show
  1. system.txt +133 -0
system.txt ADDED
@@ -0,0 +1,133 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="zh-TW">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Hugging Face System</title>
7
+ <style>
8
+ body {
9
+ font-family: Arial, sans-serif;
10
+ margin: 0;
11
+ padding: 20px;
12
+ background-color: #f4f4f4;
13
+ }
14
+
15
+ .tab-container {
16
+ width: 100%;
17
+ max-width: 900px; /* 根據 iframe 寬度調整 */
18
+ margin: 0 auto;
19
+ background: #fff;
20
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
21
+ border-radius: 8px;
22
+ overflow: hidden;
23
+ }
24
+
25
+ .tab-header {
26
+ display: flex;
27
+ justify-content: flex-end; /* 將頁籤容器內容靠右對齊 */
28
+ list-style: none;
29
+ padding: 0;
30
+ margin: 0;
31
+ border-bottom: 2px solid #ccc;
32
+ }
33
+
34
+ .tab-header li {
35
+ padding: 10px 15px;
36
+ cursor: pointer;
37
+ border: 1px solid transparent;
38
+ border-bottom: none;
39
+ margin-bottom: -2px; /* 使邊框與下劃線重疊 */
40
+ transition: background-color 0.3s, color 0.3s;
41
+ font-weight: bold;
42
+ }
43
+
44
+ .tab-header li:hover {
45
+ background-color: #eee;
46
+ }
47
+
48
+ .tab-header li.active {
49
+ color: #007bff;
50
+ border-color: #ccc;
51
+ border-bottom: 2px solid #fff; /* 覆蓋下邊線，形成選中效果 */
52
+ background-color: #fff;
53
+ }
54
+
55
+ .tab-content {
56
+ padding: 0px;
57
+ }
58
+
59
+ .tab-pane {
60
+ display: none; /* 默認隱藏所有內容 */
61
+ }
62
+
63
+ .tab-pane.active {
64
+ display: block; /* 顯示選中的內容 */
65
+ }
66
+
67
+ /* 調整 iframe 樣式 */
68
+ .tab-pane iframe {
69
+ display: block;
70
+ margin: 0 auto; /* 使 iframe 居中 */
71
+ }
72
+ </style>
73
+ </head>
74
+ <body>
75
+
76
+ <div class="tab-container">
77
+ <ul class="tab-header">
78
+ <li class="tab-link active" data-tab="tab-1">多圖片文字辨識工具（Groq API｜CSV／DOCX）</li>
79
+ <li class="tab-link" data-tab="tab-2">ESG爬蟲</li>
80
+ </ul>
81
+
82
+ <div class="tab-content">
83
+ <div id="tab-1" class="tab-pane active">
84
+ <iframe
85
+ src="https://123sabrina-mmml-2025.hf.space"
86
+ frameborder="0"
87
+ width="850"
88
+ height="450"
89
+ ></iframe>
90
+ </div>
91
+
92
+ <div id="tab-2" class="tab-pane">
93
+ <iframe
94
+ src="https://roberta2024-0825esgscraper.hf.space"
95
+ frameborder="0"
96
+ width="850"
97
+ height="450"
98
+ ></iframe>
99
+ </div>
100
+ </div>
101
+ </div>
102
+
103
+ <script>
104
+ document.addEventListener('DOMContentLoaded', () => {
105
+ const tabs = document.querySelectorAll('.tab-link');
106
+ const tabPanes = document.querySelectorAll('.tab-pane');
107
+
108
+ tabs.forEach(tab => {
109
+ tab.addEventListener('click', () => {
110
+ const targetTab = tab.getAttribute('data-tab');
111
+
112
+ // 移除所有頁籤的 active 類別
113
+ tabs.forEach(t => t.classList.remove('active'));
114
+
115
+ // 隱藏所有內容面板
116
+ tabPanes.forEach(pane => pane.classList.remove('active'));
117
+
118
+ // 設置當前點擊的頁籤為 active
119
+ tab.classList.add('active');
120
+
121
+ // 顯示對應的內容面板
122
+ document.getElementById(targetTab).classList.add('active');
123
+ });
124
+ });
125
+
126
+ // 默認激活第一個頁籤
127
+ // 在 HTML 中已設置第一個頁籤和內容為 active，這段代碼可以保險起見保留，但目前非必要
128
+ // document.querySelector('.tab-link').click();
129
+ });
130
+ </script>
131
+
132
+ </body>
133
+ </html>