Hugging Face's logo

Spaces:
123Sabrina
/
api_2
Running

App Files Community
123Sabrina commited on
Commit
26d2b4d
·
verified ·
1 Parent(s): 5eed81b

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +188 -19
index.html CHANGED
@@ -1,19 +1,188 @@
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
+ <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@300;400;700&display=swap" rel="stylesheet">
8
+ <style>
9
+ :root {
10
+ --primary-color: #007bff;
11
+ --secondary-color: #6c757d;
12
+ --background-color: #f8f9fa;
13
+ --card-background: #ffffff;
14
+ --text-color: #343a40;
15
+ --border-color: #e9ecef;
16
+ --header-height: 80px;
17
+ --nav-height: 50px;
18
+ }
19
+
20
+ body {
21
+ font-family: 'Noto Sans TC', sans-serif;
22
+ margin: 0;
23
+ padding: 0;
24
+ background-color: var(--background-color);
25
+ color: var(--text-color);
26
+ line-height: 1.6;
27
+ }
28
+
29
+ header {
30
+ background-color: var(--card-background);
31
+ padding: 20px 40px;
32
+ text-align: center;
33
+ border-bottom: 3px solid var(--primary-color);
34
+ box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
35
+ display: flex;
36
+ flex-direction: column;
37
+ align-items: center;
38
+ justify-content: center;
39
+ height: var(--header-height);
40
+ }
41
+
42
+ h1 {
43
+ color: var(--primary-color);
44
+ margin: 0;
45
+ font-size: 2.8em;
46
+ font-weight: 700;
47
+ letter-spacing: 1.5px;
48
+ }
49
+
50
+ h2 {
51
+ color: var(--secondary-color);
52
+ margin: 8px 0 0;
53
+ font-size: 1.2em;
54
+ font-weight: 300;
55
+ }
56
+
57
+ nav {
58
+ background-color: var(--primary-color);
59
+ padding: 0 20px;
60
+ text-align: right; /* 將內容靠右對齊 */
61
+ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
62
+ height: var(--nav-height);
63
+ display: flex;
64
+ justify-content: flex-end; /* 將項目靠右排列 */
65
+ align-items: center;
66
+ }
67
+
68
+ nav a {
69
+ color: #ffffff;
70
+ text-decoration: none;
71
+ padding: 15px 30px;
72
+ display: inline-block;
73
+ font-weight: 400;
74
+ font-size: 1.1em;
75
+ transition: background-color 0.3s ease, transform 0.2s ease;
76
+ border-radius: 5px;
77
+ }
78
+
79
+ nav a:hover {
80
+ background-color: rgba(255, 255, 255, 0.2);
81
+ transform: translateY(-2px);
82
+ }
83
+
84
+ .container {
85
+ padding: 30px;
86
+ text-align: center;
87
+ max-width: 1200px;
88
+ margin: 20px auto;
89
+ background-color: var(--card-background);
90
+ border-radius: 12px;
91
+ box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
92
+ border: 1px solid var(--border-color);
93
+ }
94
+
95
+ h3 {
96
+ color: var(--primary-color);
97
+ font-size: 2.2em;
98
+ margin-bottom: 25px;
99
+ font-weight: 700;
100
+ position: relative;
101
+ display: inline-block;
102
+ padding-bottom: 10px;
103
+ }
104
+
105
+ h3::after {
106
+ content: '';
107
+ position: absolute;
108
+ left: 50%;
109
+ bottom: 0;
110
+ transform: translateX(-50%);
111
+ width: 80px;
112
+ height: 3px;
113
+ background-color: var(--primary-color);
114
+ border-radius: 2px;
115
+ }
116
+
117
+ iframe {
118
+ width: 95%;
119
+ height: 800px;
120
+ border: 1px solid var(--border-color);
121
+ border-radius: 10px;
122
+ box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
123
+ transition: all 0.3s ease-in-out;
124
+ margin-top: 20px;
125
+ }
126
+
127
+ iframe:hover {
128
+ box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
129
+ transform: translateY(-3px);
130
+ }
131
+
132
+ /* 響應式設計 */
133
+ @media (max-width: 768px) {
134
+ header {
135
+ padding: 15px 20px;
136
+ height: auto;
137
+ }
138
+ h1 {
139
+ font-size: 2em;
140
+ }
141
+ h2 {
142
+ font-size: 1em;
143
+ }
144
+ nav {
145
+ justify-content: center; /* 在小螢幕上置中導覽列 */
146
+ }
147
+ nav a {
148
+ padding: 10px 15px;
149
+ font-size: 1em;
150
+ }
151
+ .container {
152
+ padding: 15px;
153
+ margin: 10px auto;
154
+ }
155
+ h3 {
156
+ font-size: 1.8em;
157
+ margin-bottom: 20px;
158
+ }
159
+ iframe {
160
+ width: 100%;
161
+ height: 600px;
162
+ }
163
+ }
164
+ </style>
165
+ </head>
166
+ <body>
167
+
168
+ <header>
169
+ <h1>Hugging Face System</h1>
170
+ <h2>123Sabrina@2025copyright</h2>
171
+ </header>
172
+
173
+ <nav>
174
+ <a href="#tool">多圖片文字辨識工具（Groq API｜CSV／DOCX）</a>
175
+ </nav>
176
+
177
+ <div class="container">
178
+ <h3 id="tool">多圖片文字辨識工具（Groq API｜CSV／DOCX）</h3>
179
+ <iframe
180
+ src="https://123sabrina-mmml-2025.hf.space"
181
+ frameborder="0"
182
+ width="850"
183
+ height="450">
184
+ </iframe>
185
+ </div>
186
+
187
+ </body>
188
+ </html>