Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"/> | |
| <meta content="width=1280, height=720, initial-scale=1.0" name="viewport"/> | |
| <title>Title – Neon Wave Hero</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: #000000; | |
| color: #ffffff; | |
| } | |
| .slide-container { | |
| width: 1280px; | |
| height: 720px; | |
| display: flex; | |
| flex-direction: column; | |
| position: relative; | |
| background-image: url('7PcGrwuA.png'); | |
| background-size: cover; | |
| background-position: center; | |
| background-repeat: no-repeat; | |
| } | |
| /* Overlay to darken background for text readability */ | |
| .overlay { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background-color: rgba(0, 0, 0, 0.65); | |
| z-index: 1; | |
| } | |
| /* Content Wrapper */ | |
| .content-wrapper { | |
| position: relative; | |
| z-index: 2; | |
| flex: 1; | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: center; | |
| padding: 0 80px; | |
| } | |
| .hackathon-badge { | |
| font-family: 'Roboto Mono', monospace; | |
| color: #00f3ff; | |
| border: 1px solid #00f3ff; | |
| padding: 8px 16px; | |
| display: inline-block; | |
| font-size: 14px; | |
| letter-spacing: 2px; | |
| text-transform: uppercase; | |
| margin-bottom: 24px; | |
| width: fit-content; | |
| background-color: rgba(0, 243, 255, 0.1); | |
| box-shadow: 0 0 10px rgba(0, 243, 255, 0.2); | |
| } | |
| .main-title { | |
| font-size: 64px; | |
| font-weight: 700; | |
| line-height: 1.1; | |
| margin-bottom: 16px; | |
| background: #ffffff; /* Fallback */ | |
| -webkit-background-clip: text; /* No gradient, just solid for safety per instructions, but let's make it styled differently */ | |
| color: #ffffff; | |
| text-shadow: 0 0 20px rgba(0, 243, 255, 0.4); | |
| } | |
| .main-title span { | |
| color: #00f3ff; | |
| } | |
| .subtitle { | |
| font-size: 28px; | |
| font-weight: 300; | |
| color: #e0e0e0; | |
| margin-bottom: 40px; | |
| letter-spacing: 0.5px; | |
| border-left: 4px solid #ff9933; /* Saffron accent */ | |
| padding-left: 20px; | |
| } | |
| .tagline { | |
| font-family: 'Roboto Mono', monospace; | |
| font-size: 18px; | |
| color: #ff9933; /* Saffron text */ | |
| letter-spacing: 3px; | |
| text-transform: uppercase; | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| } | |
| .tagline i { | |
| font-size: 12px; | |
| color: #555; | |
| } | |
| .footer { | |
| position: absolute; | |
| bottom: 40px; | |
| left: 80px; | |
| right: 80px; | |
| z-index: 2; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| border-top: 1px solid rgba(255, 255, 255, 0.2); | |
| padding-top: 20px; | |
| font-family: 'Roboto Mono', monospace; | |
| font-size: 14px; | |
| color: #888; | |
| } | |
| .footer-item { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| .footer-item i { | |
| color: #00f3ff; | |
| } | |
| /* Grid Decoration */ | |
| .grid-deco { | |
| position: absolute; | |
| top: 40px; | |
| right: 40px; | |
| display: flex; | |
| gap: 4px; | |
| z-index: 2; | |
| } | |
| .grid-dot { | |
| width: 4px; | |
| height: 4px; | |
| background-color: rgba(0, 243, 255, 0.5); | |
| } | |
| /* Scanline effect simulation */ | |
| .scanline { | |
| width: 100%; | |
| height: 2px; | |
| background: rgba(0, 243, 255, 0.1); | |
| position: absolute; | |
| bottom: 200px; | |
| left: 0; | |
| z-index: 1; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="slide-container"> | |
| <div class="overlay"></div> | |
| <div class="grid-deco"> | |
| <!-- Decorative dots simulating tech UI --> | |
| <div class="grid-dot"></div><div class="grid-dot"></div><div class="grid-dot"></div> | |
| <div class="grid-dot" style="opacity: 0.5"></div><div class="grid-dot" style="opacity: 0.2"></div> | |
| </div> | |
| <div class="content-wrapper"> | |
| <div class="hackathon-badge"> | |
| <p>Tech sprint Hackathon 2026 • TGF 2.0</p> | |
| </div> | |
| <h1 class="main-title"> | |
| Lightweight SOTA<br/> | |
| <span>Indic ASR + TTS</span> | |
| </h1> | |
| <div class="subtitle"> | |
| <p>From Voice to Intelligence</p> | |
| </div> | |
| <div class="tagline"> | |
| <p>Local <i class="fas fa-circle"></i> Open Source <i class="fas fa-circle"></i> Fast <i class="fas fa-circle"></i> Intelligent</p> | |
| </div> | |
| </div> | |
| <div class="footer"> | |
| <div class="footer-item"> | |
| <i class="fas fa-users"></i> | |
| <p>Team SvaraSynth</p> | |
| </div> | |
| <div class="footer-item"> | |
| <i class="fab fa-github"></i> | |
| <p>github.com/dummyjenil/shruti (Currently Private)</p> | |
| </div> | |
| <div class="footer-item"> | |
| <p>v0.1.0-alpha</p> | |
| </div> | |
| </div> | |
| <!-- Decorative lines --> | |
| <div class="scanline" style="top: 15%;"></div> | |
| <div class="scanline" style="top: 85%;"></div> | |
| </div> | |
| </body> | |
| </html> | |