Hugging Face's logo

Spaces:
wavespeed
/
wan2.2
Running

App Files Community
1
liyangbing commited on
Commit
0d93ed2
·
1 Parent(s): 4887ea5

update

Browse files
Files changed (2) hide show
  1. index.html +58 -18
  2. style.css +237 -18
index.html CHANGED
@@ -1,19 +1,59 @@
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="en">
3
+ <head>
4
+ <meta charset="utf-8" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
+ <title>Wan 2.2 - Now Live on WaveSpeedAI</title>
7
+ <link rel="stylesheet" href="style.css" />
8
+ <meta http-equiv="refresh" content="5;url=https://wavespeed.ai" />
9
+ </head>
10
+ <body>
11
+ <nav class="top-nav">
12
+ <div class="nav-content">
13
+ <div class="nav-logo">WAN</div>
14
+ <div class="nav-links">
15
+ <a href="https://wavespeed.ai" class="nav-link">Home</a>
16
+ <a href="https://wavespeed.ai/docs" class="nav-link">Documentation</a>
17
+ <a href="https://wavespeed.ai/blog" class="nav-link">Blog</a>
18
+ <a href="https://wavespeed.ai" class="nav-button">Visit WaveSpeedAI →</a>
19
+ </div>
20
+ </div>
21
+ </nav>
22
+
23
+ <div class="container">
24
+ <div class="content">
25
+ <div class="logo-section">
26
+ <h1>Wan 2.2</h1>
27
+ </div>
28
+
29
+ <div class="announcement-section">
30
+ <p class="announcement">Now Live on WaveSpeedAI !!</p>
31
+ <div class="divider"></div>
32
+ </div>
33
+
34
+ <div class="features-section">
35
+ <div class="feature">
36
+ <h3>🚀 Enhanced Performance</h3>
37
+ <p>Experience lightning-fast speed and improved efficiency</p>
38
+ </div>
39
+ <div class="feature">
40
+ <h3>🎯 New Features</h3>
41
+ <p>Discover the latest innovations and capabilities</p>
42
+ </div>
43
+ <div class="feature">
44
+ <h3>🌟 Better Experience</h3>
45
+ <p>Enjoy a more intuitive and seamless interface</p>
46
+ </div>
47
+ </div>
48
+
49
+ <div class="redirect-section">
50
+ <p class="redirect-text">Redirecting to WaveSpeedAI...</p>
51
+ <div class="progress-bar">
52
+ <div class="progress"></div>
53
+ </div>
54
+ <a href="https://wavespeed.ai" class="cta-button">Visit Now →</a>
55
+ </div>
56
+ </div>
57
+ </div>
58
+ </body>
59
  </html>
style.css CHANGED
@@ -1,28 +1,247 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
  body {
2
- padding: 2rem;
3
- font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
4
  }
5
 
6
- h1 {
7
- font-size: 16px;
8
- margin-top: 0;
 
 
 
 
 
9
  }
10
 
11
- p {
12
- color: rgb(107, 114, 128);
13
- font-size: 15px;
14
- margin-bottom: 10px;
15
- margin-top: 5px;
16
  }
17
 
18
- .card {
19
- max-width: 620px;
20
- margin: 0 auto;
21
- padding: 16px;
22
- border: 1px solid lightgray;
23
- border-radius: 16px;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
24
  }
25
 
26
- .card p:last-child {
27
- margin-bottom: 0;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
28
  }
 
1
+ /* Navigation Styles */
2
+ .top-nav {
3
+ position: fixed;
4
+ top: 0;
5
+ left: 0;
6
+ right: 0;
7
+ background: rgba(26, 26, 26, 0.95);
8
+ backdrop-filter: blur(10px);
9
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
10
+ z-index: 1000;
11
+ padding: 1rem 0;
12
+ }
13
+
14
+ .nav-content {
15
+ max-width: 1200px;
16
+ margin: 0 auto;
17
+ padding: 0 2rem;
18
+ display: flex;
19
+ justify-content: space-between;
20
+ align-items: center;
21
+ }
22
+
23
+ .nav-logo {
24
+ font-size: 1.5rem;
25
+ font-weight: bold;
26
+ color: white;
27
+ letter-spacing: 2px;
28
+ }
29
+
30
+ .nav-links {
31
+ display: flex;
32
+ gap: 2rem;
33
+ align-items: center;
34
+ }
35
+
36
+ .nav-link {
37
+ color: #aaa;
38
+ text-decoration: none;
39
+ font-size: 0.95rem;
40
+ transition: color 0.3s ease;
41
+ }
42
+
43
+ .nav-link:hover {
44
+ color: white;
45
+ }
46
+
47
+ .nav-button {
48
+ background: #4CAF50;
49
+ color: white;
50
+ padding: 0.5rem 1.2rem;
51
+ border-radius: 20px;
52
+ text-decoration: none;
53
+ font-size: 0.95rem;
54
+ font-weight: 500;
55
+ transition: all 0.3s ease;
56
+ }
57
+
58
+ .nav-button:hover {
59
+ background: #45a049;
60
+ transform: translateY(-1px);
61
+ }
62
+
63
+ /* Existing Styles */
64
  body {
65
+ margin: 0;
66
+ padding: 0;
67
+ font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
68
+ background: linear-gradient(135deg, #1a1a1a, #2a2a2a);
69
+ color: white;
70
+ min-height: 100vh;
71
+ display: flex;
72
+ align-items: center;
73
+ justify-content: center;
74
+ }
75
+
76
+ .container {
77
+ text-align: center;
78
+ padding: 2rem;
79
+ max-width: 800px;
80
+ width: 100%;
81
+ margin-top: 4rem; /* Add space for fixed navigation */
82
+ }
83
+
84
+ .content {
85
+ animation: fadeIn 1s ease-in;
86
+ }
87
+
88
+ .logo-section {
89
+ margin-bottom: 2rem;
90
  }
91
 
92
+ h1, h2 {
93
+ margin: 0.5rem 0;
94
+ font-size: 3.5rem;
95
+ font-weight: bold;
96
+ background: linear-gradient(45deg, #fff, #e0e0e0);
97
+ -webkit-background-clip: text;
98
+ -webkit-text-fill-color: transparent;
99
+ text-shadow: 0 0 30px rgba(255,255,255,0.1);
100
  }
101
 
102
+ .announcement-section {
103
+ margin: 2rem 0;
 
 
 
104
  }
105
 
106
+ .announcement {
107
+ font-size: 2rem;
108
+ color: #4CAF50;
109
+ margin: 1rem 0;
110
+ font-weight: bold;
111
+ text-shadow: 0 0 10px rgba(76,175,80,0.3);
112
+ }
113
+
114
+ .divider {
115
+ height: 2px;
116
+ background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
117
+ margin: 2rem auto;
118
+ width: 60%;
119
+ }
120
+
121
+ .features-section {
122
+ display: grid;
123
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
124
+ gap: 2rem;
125
+ margin: 3rem 0;
126
+ }
127
+
128
+ .feature {
129
+ padding: 1.5rem;
130
+ background: rgba(255,255,255,0.05);
131
+ border-radius: 12px;
132
+ transition: transform 0.3s ease;
133
+ }
134
+
135
+ .feature:hover {
136
+ transform: translateY(-5px);
137
+ background: rgba(255,255,255,0.08);
138
+ }
139
+
140
+ .feature h3 {
141
+ font-size: 1.2rem;
142
+ margin: 0 0 1rem 0;
143
+ color: #fff;
144
+ }
145
+
146
+ .feature p {
147
+ color: #aaa;
148
+ font-size: 0.95rem;
149
+ line-height: 1.5;
150
+ margin: 0;
151
+ }
152
+
153
+ .redirect-section {
154
+ margin-top: 3rem;
155
+ }
156
+
157
+ .redirect-text {
158
+ color: #888;
159
+ font-size: 1rem;
160
+ margin: 1rem 0;
161
+ animation: pulse 2s infinite;
162
+ }
163
+
164
+ .progress-bar {
165
+ width: 200px;
166
+ height: 4px;
167
+ background: rgba(255,255,255,0.1);
168
+ border-radius: 2px;
169
+ margin: 1rem auto;
170
+ overflow: hidden;
171
+ }
172
+
173
+ .progress {
174
+ height: 100%;
175
+ background: #4CAF50;
176
+ animation: progress 5s linear;
177
+ }
178
+
179
+ .cta-button {
180
+ display: inline-block;
181
+ padding: 0.8rem 1.5rem;
182
+ background: #4CAF50;
183
+ color: white;
184
+ text-decoration: none;
185
+ border-radius: 25px;
186
+ font-weight: bold;
187
+ margin-top: 1rem;
188
+ transition: all 0.3s ease;
189
+ }
190
+
191
+ .cta-button:hover {
192
+ background: #45a049;
193
+ transform: scale(1.05);
194
+ }
195
+
196
+ @keyframes fadeIn {
197
+ from { opacity: 0; transform: translateY(-20px); }
198
+ to { opacity: 1; transform: translateY(0); }
199
+ }
200
+
201
+ @keyframes pulse {
202
+ 0% { opacity: 0.6; }
203
+ 50% { opacity: 1; }
204
+ 100% { opacity: 0.6; }
205
+ }
206
+
207
+ @keyframes progress {
208
+ from { width: 0; }
209
+ to { width: 100%; }
210
+ }
211
+
212
+ @media (max-width: 768px) {
213
+ .nav-content {
214
+ padding: 0 1rem;
215
+ }
216
+
217
+ .nav-links {
218
+ gap: 1rem;
219
+ }
220
+
221
+ .nav-link {
222
+ display: none; /* Hide less important links on mobile */
223
+ }
224
+
225
+ .nav-button {
226
+ display: block; /* Keep the login button visible */
227
+ }
228
  }
229
 
230
+ @media (max-width: 600px) {
231
+ h1, h2 {
232
+ font-size: 2.5rem;
233
+ }
234
+
235
+ .announcement {
236
+ font-size: 1.5rem;
237
+ }
238
+
239
+ .features-section {
240
+ grid-template-columns: 1fr;
241
+ gap: 1rem;
242
+ }
243
+
244
+ .container {
245
+ padding: 1rem;
246
+ }
247
  }