| | <!DOCTYPE html> |
| | <html lang="en"> |
| | <head> |
| | <meta charset="UTF-8"> |
| | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| | <title>Roll-to-Roll Electrophoretic Display Technology</title> |
| | <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> |
| | <script src="https://cdn.tailwindcss.com"></script> |
| | <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
| | <script src="https://unpkg.com/feather-icons"></script> |
| | <style> |
| | .gradient-bg { |
| | background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
| | } |
| | .glass-effect { |
| | background: rgba(255, 255, 255, 0.95); |
| | backdrop-filter: blur(10px); |
| | } |
| | .hover-lift { |
| | transition: all 0.3s ease; |
| | } |
| | .hover-lift:hover { |
| | transform: translateY(-5px); |
| | box-shadow: 0 20px 40px rgba(0,0,0,0.1); |
| | } |
| | .tech-line { |
| | background: linear-gradient(90deg, #667eea 0%, #764ba2 100%); |
| | height: 2px; |
| | width: 100%; |
| | } |
| | @keyframes float { |
| | 0%, 100% { transform: translateY(0px); } |
| | 50% { transform: translateY(-20px); } |
| | } |
| | .float-animation { |
| | animation: float 6s ease-in-out infinite; |
| | } |
| | .scroll-indicator { |
| | animation: bounce 2s infinite; |
| | } |
| | @keyframes bounce { |
| | 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } |
| | 40% { transform: translateY(-10px); } |
| | 60% { transform: translateY(-5px); } |
| | } |
| | </style> |
| | </head> |
| | <body class="bg-gray-50"> |
| | |
| | <nav class="fixed top-0 w-full glass-effect z-50 border-b border-gray-200"> |
| | <div class="container mx-auto px-6 py-4"> |
| | <div class="flex items-center justify-between"> |
| | <div class="flex items-center space-x-3"> |
| | <div class="w-10 h-10 gradient-bg rounded-lg flex items-center justify-center"> |
| | <i data-feather="layers" class="w-6 h-6 text-white"></i> |
| | </div> |
| | <span class="text-xl font-bold text-gray-800">E-P Display Tech</span> |
| | </div> |
| | <div class="hidden md:flex space-x-8"> |
| | <a href="#overview" class="text-gray-600 hover:text-purple-600 transition">Overview</a> |
| | <a href="#architecture" class="text-gray-600 hover:text-purple-600 transition">Architecture</a> |
| | <a href="#manufacturing" class="text-gray-600 hover:text-purple-600 transition">Manufacturing</a> |
| | <a href="#applications" class="text-gray-600 hover:text-purple-600 transition">Applications</a> |
| | <a href="#claims" class="text-gray-600 hover:text-purple-600 transition">IP Claims</a> |
| | </div> |
| | <button class="md:hidden" onclick="toggleMobileMenu()"> |
| | <i data-feather="menu" class="w-6 h-6 text-gray-600"></i> |
| | </button> |
| | </div> |
| | </div> |
| | |
| | <div id="mobileMenu" class="hidden md:hidden bg-white border-t border-gray-200"> |
| | <div class="px-6 py-4 space-y-3"> |
| | <a href="#overview" class="block text-gray-600 hover:text-purple-600">Overview</a> |
| | <a href="#architecture" class="block text-gray-600 hover:text-purple-600">Architecture</a> |
| | <a href="#manufacturing" class="block text-gray-600 hover:text-purple-600">Manufacturing</a> |
| | <a href="#applications" class="block text-gray-600 hover:text-purple-600">Applications</a> |
| | <a href="#claims" class="block text-gray-600 hover:text-purple-600">IP Claims</a> |
| | </div> |
| | </div> |
| | </nav> |
| |
|
| | |
| | <section class="gradient-bg text-white pt-32 pb-20 overflow-hidden"> |
| | <div class="container mx-auto px-6"> |
| | <div class="flex flex-col lg:flex-row items-center"> |
| | <div class="lg:w-1/2 mb-10 lg:mb-0"> |
| | <h1 class="text-4xl lg:text-6xl font-bold mb-6 leading-tight"> |
| | Low-Cost Roll-to-Roll Electrophoretic Display Technology |
| | </h1> |
| | <p class="text-xl mb-8 text-purple-100"> |
| | Revolutionary cost-optimized electrophoretic displays for mass production using printed electrodes and binary microcapsules. |
| | </p> |
| | <div class="flex flex-wrap gap-4"> |
| | <button onclick="scrollToSection('overview')" class="bg-white text-purple-600 px-8 py-3 rounded-full font-semibold hover:bg-purple-50 transition"> |
| | Learn More |
| | </button> |
| | <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"> |
| | View Applications |
| | </button> |
| | </div> |
| | </div> |
| | <div class="lg:w-1/2 flex justify-center"> |
| | <div class="float-animation"> |
| | <div class="w-80 h-80 bg-white/10 backdrop-blur-lg rounded-3xl flex items-center justify-center"> |
| | <div class="text-center"> |
| | <i data-feather="monitor" class="w-32 h-32 mx-auto mb-4"></i> |
| | <p class="text-lg font-semibold">Ultra-Low Cost<br>Reflective Display</p> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | <div class="scroll-indicator text-center mt-10"> |
| | <i data-feather="chevron-down" class="w-8 h-8 mx-auto"></i> |
| | </div> |
| | </section> |
| |
|
| | |
| | <section id="overview" class="py-20"> |
| | <div class="container mx-auto px-6"> |
| | <div class="text-center mb-12"> |
| | <h2 class="text-4xl font-bold text-gray-800 mb-4">Technology Overview</h2> |
| | <div class="tech-line w-24 mx-auto mb-6"></div> |
| | <p class="text-xl text-gray-600 max-w-3xl mx-auto"> |
| | A cost-optimized electrophoretic display designed for mass production using roll-to-roll printed electrodes and simplified addressing schemes. |
| | </p> |
| | </div> |
| |
|
| | <div class="grid md:grid-cols-3 gap-8 mb-12"> |
| | <div class="bg-white rounded-xl p-8 hover-lift"> |
| | <div class="w-16 h-16 gradient-bg rounded-lg flex items-center justify-center mb-6"> |
| | <i data-feather="dollar-sign" class="w-8 h-8 text-white"></i> |
| | </div> |
| | <h3 class="text-2xl font-bold text-gray-800 mb-4">Ultra-Low Cost</h3> |
| | <p class="text-gray-600"> |
| | Eliminates complex backplanes and uses commodity printing inks and plastics for maximum cost reduction. |
| | </p> |
| | </div> |
| |
|
| | <div class="bg-white rounded-xl p-8 hover-lift"> |
| | <div class="w-16 h-16 gradient-bg rounded-lg flex items-center justify-center mb-6"> |
| | <i data-feather="zap" class="w-8 h-8 text-white"></i> |
| | </div> |
| | <h3 class="text-2xl font-bold text-gray-800 mb-4">High Throughput</h3> |
| | <p class="text-gray-600"> |
| | Designed for roll-to-roll manufacturing with minimal registration steps and single-pass lamination. |
| | </p> |
| | </div> |
| |
|
| | <div class="bg-white rounded-xl p-8 hover-lift"> |
| | <div class="w-16 h-16 gradient-bg rounded-lg flex items-center justify-center mb-6"> |
| | <i data-feather="battery" class="w-8 h-8 text-white"></i> |
| | </div> |
| | <h3 class="text-2xl font-bold text-gray-800 mb-4">Zero Power Display</h3> |
| | <p class="text-gray-600"> |
| | Reflective technology that maintains images without power, perfect for signage and labels. |
| | </p> |
| | </div> |
| | </div> |
| |
|
| | |
| | <div class="bg-gradient-to-r from-purple-50 to-indigo-50 rounded-2xl p-8"> |
| | <h3 class="text-2xl font-bold text-gray-800 mb-6">Key Design Goals</h3> |
| | <div class="grid md:grid-cols-2 gap-6"> |
| | <div class="flex items-start space-x-3"> |
| | <div class="w-6 h-6 rounded-full bg-purple-600 flex items-center justify-center flex-shrink-0 mt-1"> |
| | <i data-feather="check" class="w-4 h-4 text-white"></i> |
| | </div> |
| | <p class="text-gray-700">Reduce per-unit material and process cost</p> |
| | </div> |
| | <div class="flex items-start space-x-3"> |
| | <div class="w-6 h-6 rounded-full bg-purple-600 flex items-center justify-center flex-shrink-0 mt-1"> |
| | <i data-feather="check" class="w-4 h-4 text-white"></i> |
| | </div> |
| | <p class="text-gray-700">Avoid active-matrix TFT backplanes</p> |
| | </div> |
| | <div class="flex items-start space-x-3"> |
| | <div class="w-6 h-6 rounded-full bg-purple-600 flex items-center justify-center flex-shrink-0 mt-1"> |
| | <i data-feather="check" class="w-4 h-4 text-white"></i> |
| | </div> |
| | <p class="text-gray-700">Enable high throughput roll-to-roll manufacturing</p> |
| | </div> |
| | <div class="flex items-start space-x-3"> |
| | <div class="w-6 h-6 rounded-full bg-purple-600 flex items-center justify-center flex-shrink-0 mt-1"> |
| | <i data-feather="check" class="w-4 h-4 text-white"></i> |
| | </div> |
| | <p class="text-gray-700">Provide acceptable contrast for signage and labels</p> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | </section> |
| |
|
| | |
| | <section id="architecture" class="py-20 bg-gray-100"> |
| | <div class="container mx-auto px-6"> |
| | <div class="text-center mb-12"> |
| | <h2 class="text-4xl font-bold text-gray-800 mb-4">System Architecture</h2> |
| | <div class="tech-line w-24 mx-auto mb-6"></div> |
| | </div> |
| |
|
| | <div class="bg-white rounded-2xl p-8 mb-8"> |
| | <h3 class="text-2xl font-bold text-gray-800 mb-6">Stack Overview</h3> |
| | <div class="space-y-4"> |
| | <div class="flex items-center space-x-4 p-4 bg-gray-50 rounded-lg"> |
| | <div class="w-12 h-12 gradient-bg rounded-lg flex items-center justify-center"> |
| | <span class="text-white font-bold">1</span> |
| | </div> |
| | <div class="flex-1"> |
| | <h4 class="font-semibold text-gray-800">Top Protective Film</h4> |
| | <p class="text-gray-600">Thin PET or similar transparent protective layer</p> |
| | </div> |
| | </div> |
| | <div class="flex items-center space-x-4 p-4 bg-gray-50 rounded-lg"> |
| | <div class="w-12 h-12 gradient-bg rounded-lg flex items-center justify-center"> |
| | <span class="text-white font-bold">2</span> |
| | </div> |
| | <div class="flex-1"> |
| | <h4 class="font-semibold text-gray-800">Capsule Sheet</h4> |
| | <p class="text-gray-600">Binary microcapsules in polymer matrix</p> |
| | </div> |
| | </div> |
| | <div class="flex items-center space-x-4 p-4 bg-gray-50 rounded-lg"> |
| | <div class="w-12 h-12 gradient-bg rounded-lg flex items-center justify-center"> |
| | <span class="text-white font-bold">3</span> |
| | </div> |
| | <div class="flex-1"> |
| | <h4 class="font-semibold text-gray-800">Patterned Top Electrodes</h4> |
| | <p class="text-gray-600">Printed conductive traces segmented into columns</p> |
| | </div> |
| | </div> |
| | <div class="flex items-center space-x-4 p-4 bg-gray-50 rounded-lg"> |
| | <div class="w-12 h-12 gradient-bg rounded-lg flex items-center justify-center"> |
| | <span class="text-white font-bold">4</span> |
| | </div> |
| | <div class="flex-1"> |
| | <h4 class="font-semibold text-gray-800">Bottom Common Electrode</h4> |
| | <p class="text-gray-600">Continuous foil or printed plane</p> |
| | </div> |
| | </div> |
| | <div class="flex items-center space-x-4 p-4 bg-gray-50 rounded-lg"> |
| | <div class="w-12 h-12 gradient-bg rounded-lg flex items-center justify-center"> |
| | <span class="text-white font-bold">5</span> |
| | </div> |
| | <div class="flex-1"> |
| | <h4 class="font-semibold text-gray-800">Edge Driver Assembly</h4> |
| | <p class="text-gray-600">Low-cost driver ICs with welded connections</p> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| |
|
| | <div class="grid md:grid-cols-2 gap-8"> |
| | <div class="bg-white rounded-xl p-8"> |
| | <h3 class="text-xl font-bold text-gray-800 mb-4">Electrical Addressing</h3> |
| | <ul class="space-y-3"> |
| | <li class="flex items-start space-x-3"> |
| | <i data-feather="arrow-right" class="w-5 h-5 text-purple-600 mt-1"></i> |
| | <p class="text-gray-700">Cluster columns with bipolar driver ICs</p> |
| | </li> |
| | <li class="flex items-start space-x-3"> |
| | <i data-feather="arrow-right" class="w-5 h-5 text-purple-600 mt-1"></i> |
| | <p class="text-gray-700">Two-step waveforms for particle movement</p> |
| | </li> |
| | <li class="flex items-start space-x-3"> |
| | <i data-feather="arrow-right" class="w-5 h-5 text-purple-600 mt-1"></i> |
| | <p class="text-gray-700">No per-pixel state memory required</p> |
| | </li> |
| | <li class="flex items-start space-x-3"> |
| | <i data-feather="arrow-right" class="w-5 h-5 text-purple-600 mt-1"></i> |
| | <p class="text-gray-700">Periodic reversal maintenance pulses</p> |
| | </li> |
| | </ul> |
| | </div> |
| |
|
| | <div class="bg-white rounded-xl p-8"> |
| | <h3 class="text-xl font-bold text-gray-800 mb-4">Core Advantages</h3> |
| | <ul class="space-y-3"> |
| | <li class="flex items-start space-x-3"> |
| | <i data-feather="check-circle" class="w-5 h-5 text-green-600 mt-1"></i> |
| | <p class="text-gray-700">Printed electrodes replace microfabrication</p> |
| | </li> |
| | <li class="flex items-start space-x-3"> |
| | <i data-feather="check-circle" class="w-5 h-5 text-green-600 mt-1"></i> |
| | <p class="text-gray-700">Single-particle binary capsules</p> |
| | </li> |
| | <li class="flex items-start space-x-3"> |
| | <i data-feather="check-circle" class="w-5 h-5 text-green-600 mt-1"></i> |
| | <p class="text-gray-700">Coarse cluster addressing reduces complexity</p> |
| | </li> |
| | <li class="flex items-start space-x-3"> |
| | <i data-feather="check-circle" class="w-5 h-5 text-green-600 mt-1"></i> |
| | <p class="text-gray-700">Single-pass lamination process</p> |
| | </li> |
| | </ul> |
| | </div> |
| | </div> |
| | </div> |
| | </section> |
| |
|
| | |
| | <section id="manufacturing" class="py-20"> |
| | <div class="container mx-auto px-6"> |
| | <div class="text-center mb-12"> |
| | <h2 class="text-4xl font-bold text-gray-800 mb-4">Manufacturing Process</h2> |
| | <div class="tech-line w-24 mx-auto mb-6"></div> |
| | <p class="text-xl text-gray-600 max-w-3xl mx-auto"> |
| | Roll-to-roll production flow designed for maximum efficiency and minimum cost |
| | </p> |
| | </div> |
| |
|
| | <div class="relative"> |
| | <div class="absolute left-1/2 transform -translate-x-1/2 h-full w-1 bg-purple-200"></div> |
| | <div class="space-y-12"> |
| | <div class="flex items-center"> |
| | <div class="w-1/2 pr-8 text-right"> |
| | <h3 class="text-xl font-bold text-gray-800">Step 1: Bottom Electrode</h3> |
| | <p class="text-gray-600 mt-2">Print bottom common electrode or laminate foil onto PET web</p> |
| | </div> |
| | <div class="w-12 h-12 gradient-bg rounded-full flex items-center justify-center z-10"> |
| | <span class="text-white font-bold">1</span> |
| | </div> |
| | <div class="w-1/2 pl-8"></div> |
| | </div> |
| |
|
| | <div class="flex items-center"> |
| | <div class="w-1/2 pr-8"></div> |
| | <div class="w-12 h-12 gradient-bg rounded-full flex items-center justify-center z-10"> |
| | <span class="text-white font-bold">2</span> |
| | </div> |
| | <div class="w-1/2 pl-8"> |
| | <h3 class="text-xl font-bold text-gray-800">Step 2: Capsule Coating</h3> |
| | <p class="text-gray-600 mt-2">Coat capsule-containing polymer matrix in single wide-slot die step</p> |
| | </div> |
| | </div> |
| |
|
| | <div class="flex items-center"> |
| | <div class="w-1/2 pr-8 text-right"> |
| | <h3 class="text-xl font-bold text-gray-800">Step 3: Top Electrode Printing</h3> |
| | <p class="text-gray-600 mt-2">Print patterned top electrodes with flexographic or gravure printing</p> |
| | </div> |
| | <div class="w-12 h-12 gradient-bg rounded-full flex items-center justify-center z-10"> |
| | <span class="text-white font-bold">3</span> |
| | </div> |
| | <div class="w-1/2 pl-8"></div> |
| | </div> |
| |
|
| | <div class="flex items-center"> |
| | <div class="w-1/2 pr-8"></div> |
| | <div class="w-12 h-12 gradient-bg rounded-full flex items-center justify-center z-10"> |
| | <span class="text-white font-bold">4</span> |
| | </div> |
| | <div class="w-1/2 pl-8"> |
| | <h3 class="text-xl font-bold text-gray-800">Step 4: L |
