Hugging Face's logo

Spaces:
caustino
/
Display
Running

App Files Community
caustino commited on
Commit
8a42ea1
·
verified ·
1 Parent(s): e23fd0c

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +356 -19
index.html CHANGED
@@ -1,19 +1,356 @@
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>Roll-to-Roll Electrophoretic Display Technology</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <script src="https://unpkg.com/feather-icons"></script>
11
+ <style>
12
+ .gradient-bg {
13
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
14
+ }
15
+ .glass-effect {
16
+ background: rgba(255, 255, 255, 0.95);
17
+ backdrop-filter: blur(10px);
18
+ }
19
+ .hover-lift {
20
+ transition: all 0.3s ease;
21
+ }
22
+ .hover-lift:hover {
23
+ transform: translateY(-5px);
24
+ box-shadow: 0 20px 40px rgba(0,0,0,0.1);
25
+ }
26
+ .tech-line {
27
+ background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
28
+ height: 2px;
29
+ width: 100%;
30
+ }
31
+ @keyframes float {
32
+ 0%, 100% { transform: translateY(0px); }
33
+ 50% { transform: translateY(-20px); }
34
+ }
35
+ .float-animation {
36
+ animation: float 6s ease-in-out infinite;
37
+ }
38
+ .scroll-indicator {
39
+ animation: bounce 2s infinite;
40
+ }
41
+ @keyframes bounce {
42
+ 0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
43
+ 40% { transform: translateY(-10px); }
44
+ 60% { transform: translateY(-5px); }
45
+ }
46
+ </style>
47
+ </head>
48
+ <body class="bg-gray-50">
49
+ <!-- Navigation -->
50
+ <nav class="fixed top-0 w-full glass-effect z-50 border-b border-gray-200">
51
+ <div class="container mx-auto px-6 py-4">
52
+ <div class="flex items-center justify-between">
53
+ <div class="flex items-center space-x-3">
54
+ <div class="w-10 h-10 gradient-bg rounded-lg flex items-center justify-center">
55
+ <i data-feather="layers" class="w-6 h-6 text-white"></i>
56
+ </div>
57
+ <span class="text-xl font-bold text-gray-800">E-P Display Tech</span>
58
+ </div>
59
+ <div class="hidden md:flex space-x-8">
60
+ <a href="#overview" class="text-gray-600 hover:text-purple-600 transition">Overview</a>
61
+ <a href="#architecture" class="text-gray-600 hover:text-purple-600 transition">Architecture</a>
62
+ <a href="#manufacturing" class="text-gray-600 hover:text-purple-600 transition">Manufacturing</a>
63
+ <a href="#applications" class="text-gray-600 hover:text-purple-600 transition">Applications</a>
64
+ <a href="#claims" class="text-gray-600 hover:text-purple-600 transition">IP Claims</a>
65
+ </div>
66
+ <button class="md:hidden" onclick="toggleMobileMenu()">
67
+ <i data-feather="menu" class="w-6 h-6 text-gray-600"></i>
68
+ </button>
69
+ </div>
70
+ </div>
71
+ <!-- Mobile Menu -->
72
+ <div id="mobileMenu" class="hidden md:hidden bg-white border-t border-gray-200">
73
+ <div class="px-6 py-4 space-y-3">
74
+ <a href="#overview" class="block text-gray-600 hover:text-purple-600">Overview</a>
75
+ <a href="#architecture" class="block text-gray-600 hover:text-purple-600">Architecture</a>
76
+ <a href="#manufacturing" class="block text-gray-600 hover:text-purple-600">Manufacturing</a>
77
+ <a href="#applications" class="block text-gray-600 hover:text-purple-600">Applications</a>
78
+ <a href="#claims" class="block text-gray-600 hover:text-purple-600">IP Claims</a>
79
+ </div>
80
+ </div>
81
+ </nav>
82
+
83
+ <!-- Hero Section -->
84
+ <section class="gradient-bg text-white pt-32 pb-20 overflow-hidden">
85
+ <div class="container mx-auto px-6">
86
+ <div class="flex flex-col lg:flex-row items-center">
87
+ <div class="lg:w-1/2 mb-10 lg:mb-0">
88
+ <h1 class="text-4xl lg:text-6xl font-bold mb-6 leading-tight">
89
+ Low-Cost Roll-to-Roll Electrophoretic Display Technology
90
+ </h1>
91
+ <p class="text-xl mb-8 text-purple-100">
92
+ Revolutionary cost-optimized electrophoretic displays for mass production using printed electrodes and binary microcapsules.
93
+ </p>
94
+ <div class="flex flex-wrap gap-4">
95
+ <button onclick="scrollToSection('overview')" class="bg-white text-purple-600 px-8 py-3 rounded-full font-semibold hover:bg-purple-50 transition">
96
+ Learn More
97
+ </button>
98
+ <button onclick="scrollToSection('applications')" class="border-2 border-white px-8 py-3 rounded-full font-semibold hover:bg-white hover:text-purple-600 transition">
99
+ View Applications
100
+ </button>
101
+ </div>
102
+ </div>
103
+ <div class="lg:w-1/2 flex justify-center">
104
+ <div class="float-animation">
105
+ <div class="w-80 h-80 bg-white/10 backdrop-blur-lg rounded-3xl flex items-center justify-center">
106
+ <div class="text-center">
107
+ <i data-feather="monitor" class="w-32 h-32 mx-auto mb-4"></i>
108
+ <p class="text-lg font-semibold">Ultra-Low Cost<br>Reflective Display</p>
109
+ </div>
110
+ </div>
111
+ </div>
112
+ </div>
113
+ </div>
114
+ </div>
115
+ <div class="scroll-indicator text-center mt-10">
116
+ <i data-feather="chevron-down" class="w-8 h-8 mx-auto"></i>
117
+ </div>
118
+ </section>
119
+
120
+ <!-- Overview Section -->
121
+ <section id="overview" class="py-20">
122
+ <div class="container mx-auto px-6">
123
+ <div class="text-center mb-12">
124
+ <h2 class="text-4xl font-bold text-gray-800 mb-4">Technology Overview</h2>
125
+ <div class="tech-line w-24 mx-auto mb-6"></div>
126
+ <p class="text-xl text-gray-600 max-w-3xl mx-auto">
127
+ A cost-optimized electrophoretic display designed for mass production using roll-to-roll printed electrodes and simplified addressing schemes.
128
+ </p>
129
+ </div>
130
+
131
+ <div class="grid md:grid-cols-3 gap-8 mb-12">
132
+ <div class="bg-white rounded-xl p-8 hover-lift">
133
+ <div class="w-16 h-16 gradient-bg rounded-lg flex items-center justify-center mb-6">
134
+ <i data-feather="dollar-sign" class="w-8 h-8 text-white"></i>
135
+ </div>
136
+ <h3 class="text-2xl font-bold text-gray-800 mb-4">Ultra-Low Cost</h3>
137
+ <p class="text-gray-600">
138
+ Eliminates complex backplanes and uses commodity printing inks and plastics for maximum cost reduction.
139
+ </p>
140
+ </div>
141
+
142
+ <div class="bg-white rounded-xl p-8 hover-lift">
143
+ <div class="w-16 h-16 gradient-bg rounded-lg flex items-center justify-center mb-6">
144
+ <i data-feather="zap" class="w-8 h-8 text-white"></i>
145
+ </div>
146
+ <h3 class="text-2xl font-bold text-gray-800 mb-4">High Throughput</h3>
147
+ <p class="text-gray-600">
148
+ Designed for roll-to-roll manufacturing with minimal registration steps and single-pass lamination.
149
+ </p>
150
+ </div>
151
+
152
+ <div class="bg-white rounded-xl p-8 hover-lift">
153
+ <div class="w-16 h-16 gradient-bg rounded-lg flex items-center justify-center mb-6">
154
+ <i data-feather="battery" class="w-8 h-8 text-white"></i>
155
+ </div>
156
+ <h3 class="text-2xl font-bold text-gray-800 mb-4">Zero Power Display</h3>
157
+ <p class="text-gray-600">
158
+ Reflective technology that maintains images without power, perfect for signage and labels.
159
+ </p>
160
+ </div>
161
+ </div>
162
+
163
+ <!-- Key Features -->
164
+ <div class="bg-gradient-to-r from-purple-50 to-indigo-50 rounded-2xl p-8">
165
+ <h3 class="text-2xl font-bold text-gray-800 mb-6">Key Design Goals</h3>
166
+ <div class="grid md:grid-cols-2 gap-6">
167
+ <div class="flex items-start space-x-3">
168
+ <div class="w-6 h-6 rounded-full bg-purple-600 flex items-center justify-center flex-shrink-0 mt-1">
169
+ <i data-feather="check" class="w-4 h-4 text-white"></i>
170
+ </div>
171
+ <p class="text-gray-700">Reduce per-unit material and process cost</p>
172
+ </div>
173
+ <div class="flex items-start space-x-3">
174
+ <div class="w-6 h-6 rounded-full bg-purple-600 flex items-center justify-center flex-shrink-0 mt-1">
175
+ <i data-feather="check" class="w-4 h-4 text-white"></i>
176
+ </div>
177
+ <p class="text-gray-700">Avoid active-matrix TFT backplanes</p>
178
+ </div>
179
+ <div class="flex items-start space-x-3">
180
+ <div class="w-6 h-6 rounded-full bg-purple-600 flex items-center justify-center flex-shrink-0 mt-1">
181
+ <i data-feather="check" class="w-4 h-4 text-white"></i>
182
+ </div>
183
+ <p class="text-gray-700">Enable high throughput roll-to-roll manufacturing</p>
184
+ </div>
185
+ <div class="flex items-start space-x-3">
186
+ <div class="w-6 h-6 rounded-full bg-purple-600 flex items-center justify-center flex-shrink-0 mt-1">
187
+ <i data-feather="check" class="w-4 h-4 text-white"></i>
188
+ </div>
189
+ <p class="text-gray-700">Provide acceptable contrast for signage and labels</p>
190
+ </div>
191
+ </div>
192
+ </div>
193
+ </div>
194
+ </section>
195
+
196
+ <!-- System Architecture -->
197
+ <section id="architecture" class="py-20 bg-gray-100">
198
+ <div class="container mx-auto px-6">
199
+ <div class="text-center mb-12">
200
+ <h2 class="text-4xl font-bold text-gray-800 mb-4">System Architecture</h2>
201
+ <div class="tech-line w-24 mx-auto mb-6"></div>
202
+ </div>
203
+
204
+ <div class="bg-white rounded-2xl p-8 mb-8">
205
+ <h3 class="text-2xl font-bold text-gray-800 mb-6">Stack Overview</h3>
206
+ <div class="space-y-4">
207
+ <div class="flex items-center space-x-4 p-4 bg-gray-50 rounded-lg">
208
+ <div class="w-12 h-12 gradient-bg rounded-lg flex items-center justify-center">
209
+ <span class="text-white font-bold">1</span>
210
+ </div>
211
+ <div class="flex-1">
212
+ <h4 class="font-semibold text-gray-800">Top Protective Film</h4>
213
+ <p class="text-gray-600">Thin PET or similar transparent protective layer</p>
214
+ </div>
215
+ </div>
216
+ <div class="flex items-center space-x-4 p-4 bg-gray-50 rounded-lg">
217
+ <div class="w-12 h-12 gradient-bg rounded-lg flex items-center justify-center">
218
+ <span class="text-white font-bold">2</span>
219
+ </div>
220
+ <div class="flex-1">
221
+ <h4 class="font-semibold text-gray-800">Capsule Sheet</h4>
222
+ <p class="text-gray-600">Binary microcapsules in polymer matrix</p>
223
+ </div>
224
+ </div>
225
+ <div class="flex items-center space-x-4 p-4 bg-gray-50 rounded-lg">
226
+ <div class="w-12 h-12 gradient-bg rounded-lg flex items-center justify-center">
227
+ <span class="text-white font-bold">3</span>
228
+ </div>
229
+ <div class="flex-1">
230
+ <h4 class="font-semibold text-gray-800">Patterned Top Electrodes</h4>
231
+ <p class="text-gray-600">Printed conductive traces segmented into columns</p>
232
+ </div>
233
+ </div>
234
+ <div class="flex items-center space-x-4 p-4 bg-gray-50 rounded-lg">
235
+ <div class="w-12 h-12 gradient-bg rounded-lg flex items-center justify-center">
236
+ <span class="text-white font-bold">4</span>
237
+ </div>
238
+ <div class="flex-1">
239
+ <h4 class="font-semibold text-gray-800">Bottom Common Electrode</h4>
240
+ <p class="text-gray-600">Continuous foil or printed plane</p>
241
+ </div>
242
+ </div>
243
+ <div class="flex items-center space-x-4 p-4 bg-gray-50 rounded-lg">
244
+ <div class="w-12 h-12 gradient-bg rounded-lg flex items-center justify-center">
245
+ <span class="text-white font-bold">5</span>
246
+ </div>
247
+ <div class="flex-1">
248
+ <h4 class="font-semibold text-gray-800">Edge Driver Assembly</h4>
249
+ <p class="text-gray-600">Low-cost driver ICs with welded connections</p>
250
+ </div>
251
+ </div>
252
+ </div>
253
+ </div>
254
+
255
+ <div class="grid md:grid-cols-2 gap-8">
256
+ <div class="bg-white rounded-xl p-8">
257
+ <h3 class="text-xl font-bold text-gray-800 mb-4">Electrical Addressing</h3>
258
+ <ul class="space-y-3">
259
+ <li class="flex items-start space-x-3">
260
+ <i data-feather="arrow-right" class="w-5 h-5 text-purple-600 mt-1"></i>
261
+ <p class="text-gray-700">Cluster columns with bipolar driver ICs</p>
262
+ </li>
263
+ <li class="flex items-start space-x-3">
264
+ <i data-feather="arrow-right" class="w-5 h-5 text-purple-600 mt-1"></i>
265
+ <p class="text-gray-700">Two-step waveforms for particle movement</p>
266
+ </li>
267
+ <li class="flex items-start space-x-3">
268
+ <i data-feather="arrow-right" class="w-5 h-5 text-purple-600 mt-1"></i>
269
+ <p class="text-gray-700">No per-pixel state memory required</p>
270
+ </li>
271
+ <li class="flex items-start space-x-3">
272
+ <i data-feather="arrow-right" class="w-5 h-5 text-purple-600 mt-1"></i>
273
+ <p class="text-gray-700">Periodic reversal maintenance pulses</p>
274
+ </li>
275
+ </ul>
276
+ </div>
277
+
278
+ <div class="bg-white rounded-xl p-8">
279
+ <h3 class="text-xl font-bold text-gray-800 mb-4">Core Advantages</h3>
280
+ <ul class="space-y-3">
281
+ <li class="flex items-start space-x-3">
282
+ <i data-feather="check-circle" class="w-5 h-5 text-green-600 mt-1"></i>
283
+ <p class="text-gray-700">Printed electrodes replace microfabrication</p>
284
+ </li>
285
+ <li class="flex items-start space-x-3">
286
+ <i data-feather="check-circle" class="w-5 h-5 text-green-600 mt-1"></i>
287
+ <p class="text-gray-700">Single-particle binary capsules</p>
288
+ </li>
289
+ <li class="flex items-start space-x-3">
290
+ <i data-feather="check-circle" class="w-5 h-5 text-green-600 mt-1"></i>
291
+ <p class="text-gray-700">Coarse cluster addressing reduces complexity</p>
292
+ </li>
293
+ <li class="flex items-start space-x-3">
294
+ <i data-feather="check-circle" class="w-5 h-5 text-green-600 mt-1"></i>
295
+ <p class="text-gray-700">Single-pass lamination process</p>
296
+ </li>
297
+ </ul>
298
+ </div>
299
+ </div>
300
+ </div>
301
+ </section>
302
+
303
+ <!-- Manufacturing Process -->
304
+ <section id="manufacturing" class="py-20">
305
+ <div class="container mx-auto px-6">
306
+ <div class="text-center mb-12">
307
+ <h2 class="text-4xl font-bold text-gray-800 mb-4">Manufacturing Process</h2>
308
+ <div class="tech-line w-24 mx-auto mb-6"></div>
309
+ <p class="text-xl text-gray-600 max-w-3xl mx-auto">
310
+ Roll-to-roll production flow designed for maximum efficiency and minimum cost
311
+ </p>
312
+ </div>
313
+
314
+ <div class="relative">
315
+ <div class="absolute left-1/2 transform -translate-x-1/2 h-full w-1 bg-purple-200"></div>
316
+ <div class="space-y-12">
317
+ <div class="flex items-center">
318
+ <div class="w-1/2 pr-8 text-right">
319
+ <h3 class="text-xl font-bold text-gray-800">Step 1: Bottom Electrode</h3>
320
+ <p class="text-gray-600 mt-2">Print bottom common electrode or laminate foil onto PET web</p>
321
+ </div>
322
+ <div class="w-12 h-12 gradient-bg rounded-full flex items-center justify-center z-10">
323
+ <span class="text-white font-bold">1</span>
324
+ </div>
325
+ <div class="w-1/2 pl-8"></div>
326
+ </div>
327
+
328
+ <div class="flex items-center">
329
+ <div class="w-1/2 pr-8"></div>
330
+ <div class="w-12 h-12 gradient-bg rounded-full flex items-center justify-center z-10">
331
+ <span class="text-white font-bold">2</span>
332
+ </div>
333
+ <div class="w-1/2 pl-8">
334
+ <h3 class="text-xl font-bold text-gray-800">Step 2: Capsule Coating</h3>
335
+ <p class="text-gray-600 mt-2">Coat capsule-containing polymer matrix in single wide-slot die step</p>
336
+ </div>
337
+ </div>
338
+
339
+ <div class="flex items-center">
340
+ <div class="w-1/2 pr-8 text-right">
341
+ <h3 class="text-xl font-bold text-gray-800">Step 3: Top Electrode Printing</h3>
342
+ <p class="text-gray-600 mt-2">Print patterned top electrodes with flexographic or gravure printing</p>
343
+ </div>
344
+ <div class="w-12 h-12 gradient-bg rounded-full flex items-center justify-center z-10">
345
+ <span class="text-white font-bold">3</span>
346
+ </div>
347
+ <div class="w-1/2 pl-8"></div>
348
+ </div>
349
+
350
+ <div class="flex items-center">
351
+ <div class="w-1/2 pr-8"></div>
352
+ <div class="w-12 h-12 gradient-bg rounded-full flex items-center justify-center z-10">
353
+ <span class="text-white font-bold">4</span>
354
+ </div>
355
+ <div class="w-1/2 pl-8">
356
+ <h3 class="text-xl font-bold text-gray-800">Step 4: L