Hugging Face's logo

Spaces:
Roberta2024
/
HuggingFaceSystem
Running

App Files Community
Roberta2024 commited on
Commit
6aea680
·
verified ·
1 Parent(s): 6021986

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +183 -19
index.html CHANGED
@@ -1,19 +1,183 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
+ :root {
9
+ --primary-color: #007bff;
10
+ --secondary-color: #e9ecef;
11
+ --text-color: #343a40;
12
+ --light-bg: #f8f9fa;
13
+ --white-bg: #ffffff;
14
+ --shadow-color: rgba(0, 0, 0, 0.08);
15
+ }
16
+
17
+ body {
18
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
19
+ margin: 0;
20
+ padding: 0;
21
+ background-color: var(--light-bg);
22
+ display: flex;
23
+ flex-direction: column;
24
+ align-items: center;
25
+ min-height: 100vh;
26
+ }
27
+
28
+ .header {
29
+ width: 100%;
30
+ padding: 40px 0;
31
+ text-align: center;
32
+ }
33
+
34
+ .header h1 {
35
+ color: var(--text-color);
36
+ margin: 0;
37
+ font-size: 2.5rem;
38
+ font-weight: 700;
39
+ }
40
+
41
+ .header h3 {
42
+ color: #6c757d;
43
+ margin: 10px 0 0;
44
+ font-size: 1rem;
45
+ font-weight: 400;
46
+ }
47
+
48
+ .container {
49
+ width: 90%;
50
+ max-width: 1200px;
51
+ background-color: var(--white-bg);
52
+ border-radius: 12px;
53
+ box-shadow: 0 10px 30px var(--shadow-color);
54
+ overflow: hidden;
55
+ margin-bottom: 40px;
56
+ }
57
+
58
+ .tab-container {
59
+ display: flex;
60
+ justify-content: flex-end;
61
+ padding: 10px;
62
+ background-color: var(--secondary-color);
63
+ border-bottom: 1px solid #dee2e6;
64
+ }
65
+
66
+ .tab-button {
67
+ padding: 10px 25px;
68
+ font-size: 1rem;
69
+ font-weight: 600;
70
+ cursor: pointer;
71
+ border: none;
72
+ background-color: transparent;
73
+ color: var(--text-color);
74
+ border-radius: 50px;
75
+ transition: all 0.3s ease;
76
+ position: relative;
77
+ overflow: hidden;
78
+ }
79
+
80
+ .tab-button::after {
81
+ content: '';
82
+ position: absolute;
83
+ left: 0;
84
+ bottom: 0;
85
+ width: 100%;
86
+ height: 3px;
87
+ background-color: transparent;
88
+ transform: translateY(100%);
89
+ transition: all 0.3s ease-out;
90
+ }
91
+
92
+ .tab-button:hover::after {
93
+ background-color: var(--primary-color);
94
+ transform: translateY(0);
95
+ }
96
+
97
+ .tab-button.active {
98
+ background-color: var(--primary-color);
99
+ color: var(--white-bg);
100
+ box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3);
101
+ }
102
+
103
+ .tab-button.active::after {
104
+ content: none;
105
+ }
106
+
107
+ .content-container {
108
+ padding: 20px;
109
+ }
110
+
111
+ .iframe-wrapper {
112
+ display: none;
113
+ width: 100%;
114
+ height: 600px;
115
+ border-radius: 10px;
116
+ box-shadow: 0 5px 20px var(--shadow-color);
117
+ overflow: hidden;
118
+ transition: all 0.5s ease;
119
+ }
120
+
121
+ .iframe-wrapper.active {
122
+ display: block;
123
+ }
124
+
125
+ iframe {
126
+ width: 100%;
127
+ height: 100%;
128
+ border: none;
129
+ }
130
+ </style>
131
+ </head>
132
+ <body>
133
+
134
+ <div class="header">
135
+ <h1>Hugging Face System</h1>
136
+ <h3>cjhuang@2025copyright</h3>
137
+ </div>
138
+
139
+ <div class="container">
140
+ <div class="tab-container">
141
+ <button class="tab-button active" onclick="showTab('tab1')">ESG爬蟲</button>
142
+ <button class="tab-button" onclick="showTab('tab2')">GEMINI 對話機器人</button>
143
+ </div>
144
+
145
+ <div class="content-container">
146
+ <div id="tab1" class="iframe-wrapper active">
147
+ <iframe
148
+ src="https://roberta2024-0825esgscraper.hf.space"
149
+ frameborder="0"
150
+ width="850"
151
+ height="450"
152
+ ></iframe>
153
+ </div>
154
+ <div id="tab2" class="iframe-wrapper">
155
+ <iframe
156
+ src="https://roberta2024-geminiapi.hf.space"
157
+ frameborder="0"
158
+ width="850"
159
+ height="450"
160
+ ></iframe>
161
+ </div>
162
+ </div>
163
+ </div>
164
+
165
+ <script>
166
+ function showTab(tabId) {
167
+ const allIframes = document.querySelectorAll('.iframe-wrapper');
168
+ allIframes.forEach(iframe => {
169
+ iframe.classList.remove('active');
170
+ });
171
+
172
+ const allButtons = document.querySelectorAll('.tab-button');
173
+ allButtons.forEach(button => {
174
+ button.classList.remove('active');
175
+ });
176
+
177
+ document.getElementById(tabId).classList.add('active');
178
+ document.querySelector(`[onclick="showTab('${tabId}')"]`).classList.add('active');
179
+ }
180
+ </script>
181
+
182
+ </body>
183
+ </html>