Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"/> | |
| <meta content="width=1280, height=720, initial-scale=1.0" name="viewport"/> | |
| <title>Table – Comparison Neon</title> | |
| <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/> | |
| <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;600;700&family=Roboto+Mono:wght@300;400;500&display=swap" rel="stylesheet"/> | |
| <link href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.0/css/all.min.css" rel="stylesheet"/> | |
| <style> | |
| body { | |
| margin: 0; | |
| padding: 0; | |
| width: 1280px; | |
| height: 720px; | |
| overflow: hidden; | |
| font-family: 'Space Grotesk', sans-serif; | |
| background-color: #050505; | |
| color: #ffffff; | |
| } | |
| .slide-container { | |
| width: 1280px; | |
| height: 720px; | |
| display: flex; | |
| flex-direction: column; | |
| position: relative; | |
| background-color: #050505; | |
| /* Simple grid pattern using SVG for background */ | |
| background-image: url('data:image/svg+xml,%3Csvg width="60" height="60" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M59 1H1v58h58V1zM0 0h60v60H0V0z" fill="%231a1a1a" fill-opacity="0.2"/%3E%3C/svg%3E'); | |
| } | |
| /* Ambient glow spots */ | |
| .glow-spot { | |
| position: absolute; | |
| width: 500px; | |
| height: 500px; | |
| border-radius: 50%; | |
| background-color: #00f3ff; | |
| opacity: 0.05; | |
| filter: blur(80px); | |
| z-index: 0; | |
| } | |
| .glow-top-right { top: -100px; right: -100px; } | |
| .glow-bottom-left { bottom: -100px; left: -100px; background-color: #ff9933; } | |
| /* Header Section */ | |
| .header { | |
| padding: 40px 60px 20px 60px; | |
| z-index: 2; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: flex-end; | |
| border-bottom: 1px solid rgba(255, 255, 255, 0.1); | |
| } | |
| .title-group { | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .tag { | |
| font-family: 'Roboto Mono', monospace; | |
| color: #00f3ff; | |
| font-size: 14px; | |
| letter-spacing: 2px; | |
| margin-bottom: 8px; | |
| text-transform: uppercase; | |
| } | |
| .title { | |
| font-size: 42px; | |
| font-weight: 700; | |
| color: #ffffff; | |
| margin: 0; | |
| line-height: 1.1; | |
| } | |
| .title span { | |
| color: #ff9933; | |
| } | |
| .legend { | |
| display: flex; | |
| gap: 20px; | |
| font-family: 'Roboto Mono', monospace; | |
| font-size: 12px; | |
| } | |
| .legend-item { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| color: #aaa; | |
| } | |
| .legend-icon { | |
| width: 16px; | |
| height: 16px; | |
| border-radius: 4px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 10px; | |
| } | |
| /* Content Area */ | |
| .content { | |
| flex: 1; | |
| padding: 30px 60px; | |
| z-index: 2; | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: center; | |
| } | |
| /* Comparison Table Grid */ | |
| .comparison-table { | |
| width: 100%; | |
| border-collapse: separate; | |
| border-spacing: 0 10px; | |
| position: relative; | |
| } | |
| .comparison-table th { | |
| text-align: left; | |
| padding: 15px 20px; | |
| font-family: 'Roboto Mono', monospace; | |
| font-size: 14px; | |
| color: #888; | |
| font-weight: 500; | |
| border-bottom: 2px solid rgba(255, 255, 255, 0.1); | |
| text-transform: uppercase; | |
| } | |
| .comparison-table th.our-col { | |
| color: #00f3ff; | |
| border-bottom-color: #00f3ff; | |
| background: rgba(0, 243, 255, 0.05); | |
| border-radius: 8px 8px 0 0; | |
| text-align: center; | |
| } | |
| .comparison-table td { | |
| padding: 18px 20px; | |
| background: rgba(20, 20, 25, 0.4); | |
| border-top: 1px solid rgba(255, 255, 255, 0.05); | |
| border-bottom: 1px solid rgba(255, 255, 255, 0.05); | |
| font-size: 15px; | |
| color: #ccc; | |
| } | |
| .comparison-table td:first-child { | |
| border-left: 1px solid rgba(255, 255, 255, 0.05); | |
| border-radius: 8px 0 0 8px; | |
| font-weight: 600; | |
| color: #fff; | |
| width: 25%; | |
| } | |
| .comparison-table td:last-child { | |
| border-right: 1px solid rgba(255, 255, 255, 0.05); | |
| border-radius: 0 8px 8px 0; | |
| } | |
| /* "Ours" Column Highlight */ | |
| .comparison-table td.our-col { | |
| background: rgba(0, 243, 255, 0.1); | |
| border-color: rgba(0, 243, 255, 0.3); | |
| color: #fff; | |
| font-weight: 700; | |
| text-align: center; | |
| position: relative; | |
| box-shadow: 0 0 20px rgba(0, 0, 0, 0.3); | |
| } | |
| /* Row styling */ | |
| .table-row { | |
| transition: transform 0.2s ease; | |
| } | |
| .table-row:hover td { | |
| background: rgba(255, 255, 255, 0.08); | |
| border-color: rgba(255, 255, 255, 0.2); | |
| } | |
| .table-row:hover td.our-col { | |
| background: rgba(0, 243, 255, 0.15); | |
| border-color: #00f3ff; | |
| transform: scale(1.02); | |
| z-index: 10; | |
| } | |
| /* Status Icons */ | |
| .check { color: #00ff9d; } | |
| .cross { color: #ff4444; opacity: 0.6; } | |
| .dash { color: #888; } | |
| .partial { color: #ffcc00; } | |
| .our-highlight { | |
| color: #00f3ff; | |
| text-shadow: 0 0 8px rgba(0, 243, 255, 0.5); | |
| } | |
| /* Winner Badge */ | |
| .winner-badge { | |
| position: absolute; | |
| top: -25px; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| background: #00f3ff; | |
| color: #000; | |
| padding: 4px 12px; | |
| border-radius: 12px; | |
| font-size: 10px; | |
| font-weight: 700; | |
| text-transform: uppercase; | |
| box-shadow: 0 0 10px #00f3ff; | |
| white-space: nowrap; | |
| } | |
| /* Bottom highlight bar */ | |
| .highlight-bar { | |
| position: absolute; | |
| bottom: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 4px; | |
| background: #00f3ff; | |
| opacity: 0.5; | |
| box-shadow: 0 0 15px rgba(0, 243, 255, 0.8); | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="slide-container"> | |
| <!-- Background Glows --> | |
| <div class="glow-spot glow-top-right"></div> | |
| <div class="glow-spot glow-bottom-left"></div> | |
| <!-- Header --> | |
| <div class="header"> | |
| <div class="title-group"> | |
| <div class="tag">COMPETITIVE LANDSCAPE</div> | |
| <h1 class="title">Innovation vs <span>Existing Tools</span></h1> | |
| </div> | |
| <div class="legend"> | |
| <div class="legend-item"><div class="legend-icon check"><i class="fas fa-check"></i></div><p>Native / Strong</p></div> | |
| <div class="legend-item"><div class="legend-icon partial"><i class="fas fa-exclamation-circle"></i></div><p>Partial / Limited</p></div> | |
| <div class="legend-item"><div class="legend-icon cross"><i class="fas fa-times"></i></div><p>Missing / Poor</p></div> | |
| </div> | |
| </div> | |
| <!-- Comparison Table Content --> | |
| <div class="content"> | |
| <table class="comparison-table"> | |
| <thead> | |
| <tr> | |
| <th>Feature</th> | |
| <th class="our-col"> | |
| <div class="winner-badge">Our Solution</div> | |
| Ours (SOTA) | |
| </th> | |
| <th>Cloud APIs</th> | |
| <th>Whisper-L</th> | |
| <th>Coqui TTS</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr class="table-row"> | |
| <td><i class="fas fa-server mr-2 text-gray-500"></i> Local-First Privacy</td> | |
| <td class="our-col"><i class="fas fa-check check"></i> Yes (100%)</td> | |
| <td class="text-center"><i class="fas fa-times cross"></i> No</td> | |
| <td class="text-center"><i class="fas fa-check check"></i> Yes</td> | |
| <td class="text-center"><i class="fas fa-check check"></i> Yes</td> | |
| </tr> | |
| <tr class="table-row"> | |
| <td><i class="fas fa-stopwatch mr-2 text-gray-500"></i> Per-Char Timestamps</td> | |
| <td class="our-col"><i class="fas fa-check check"></i> Native</td> | |
| <td class="text-center"><i class="fas fa-minus dash"></i> Word-only</td> | |
| <td class="text-center"><i class="fas fa-exclamation-circle partial"></i> Token-level</td> | |
| <td class="text-center"><span class="dash">N/A</span></td> | |
| </tr> | |
| <tr class="table-row"> | |
| <td><i class="fas fa-language mr-2 text-gray-500"></i> Indic Language Focus</td> | |
| <td class="our-col"><i class="fas fa-check check"></i> Optimized</td> | |
| <td class="text-center"><i class="fas fa-exclamation-circle partial"></i> Mixed</td> | |
| <td class="text-center"><i class="fas fa-check check"></i> Good</td> | |
| <td class="text-center"><i class="fas fa-minus dash"></i> TTS Only</td> | |
| </tr> | |
| <tr class="table-row"> | |
| <td><i class="fas fa-bolt mr-2 text-gray-500"></i> Processing Speed (1hr)</td> | |
| <td class="our-col"><i class="fas fa-rocket our-highlight"></i> ~1 min</td> | |
| <td class="text-center"><span class="partial">Network Dep.</span></td> | |
| <td class="text-center"><span class="cross">Slow (~10m)</span></td> | |
| <td class="text-center"><span class="dash">N/A</span></td> | |
| </tr> | |
| <tr class="table-row"> | |
| <td><i class="fas fa-brain mr-2 text-gray-500"></i> Speaker Memory</td> | |
| <td class="our-col"><i class="fas fa-check check"></i> Built-in</td> | |
| <td class="text-center"><i class="fas fa-times cross"></i> No</td> | |
| <td class="text-center"><i class="fas fa-times cross"></i> No</td> | |
| <td class="text-center"><i class="fas fa-times cross"></i> No</td> | |
| </tr> | |
| <tr class="table-row"> | |
| <td><i class="fas fa-robot mr-2 text-gray-500"></i> Agent Integration</td> | |
| <td class="our-col"><i class="fas fa-check check"></i> Native API</td> | |
| <td class="text-center"><i class="fas fa-times cross"></i> DIY</td> | |
| <td class="text-center"><i class="fas fa-times cross"></i> DIY</td> | |
| <td class="text-center"><i class="fas fa-times cross"></i> DIY</td> | |
| </tr> | |
| <tr class="table-row"> | |
| <td><i class="fas fa-coins mr-2 text-gray-500"></i> Cost (Offline)</td> | |
| <td class="our-col"><span class="our-highlight">$0</span></td> | |
| <td class="text-center"><span class="cross">$$ / min</span></td> | |
| <td class="text-center"><span class="check">$0</span></td> | |
| <td class="text-center"><span class="check">$0</span></td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| <!-- Bottom Highlight --> | |
| <div class="highlight-bar"></div> | |
| </div> | |
| </body> | |
| </html> | |