Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>AutVid AI - Video Emotion Analysis</title> | |
| <style> | |
| * { margin:0; padding:0; box-sizing:border-box; } | |
| body { | |
| font-family: 'Arial', sans-serif; | |
| background: linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 50%, #16213e 100%); | |
| color: #ffffff; overflow-x: hidden; min-height: 100vh; | |
| } | |
| .particles { position: fixed; top:0; left:0; width:100%; height:100%; pointer-events:none; z-index:1; } | |
| .particle { position:absolute; width:4px; height:4px; background: rgba(0,255,255,0.6); border-radius:50%; animation: float 6s ease-in-out infinite; } | |
| .particle:nth-child(1){top:20%;left:10%;animation-delay:0s;} | |
| .particle:nth-child(2){top:30%;left:80%;animation-delay:1s;} | |
| .particle:nth-child(3){top:70%;left:20%;animation-delay:2s;} | |
| .particle:nth-child(4){top:80%;left:70%;animation-delay:3s;} | |
| .particle:nth-child(5){top:10%;left:50%;animation-delay:4s;} | |
| .particle:nth-child(6){top:60%;left:90%;animation-delay:5s;} | |
| @keyframes float { 0%,100%{transform: translateY(0) rotate(0); opacity:0.6;} 50%{transform: translateY(-20px) rotate(180deg); opacity:1;} } | |
| .header { position:relative; z-index:10; padding:2rem 0; text-align:center; } | |
| .logo { | |
| font-size:2.5rem; font-weight:bold; | |
| background: linear-gradient(45deg, #00ffff, #ff00ff); | |
| -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; | |
| animation: glow 2s ease-in-out infinite alternate; | |
| } | |
| @keyframes glow { from{filter:drop-shadow(0 0 10px rgba(0,255,255,.5));} to{filter:drop-shadow(0 0 20px rgba(255,0,255,.8));} } | |
| .main-content { position:relative; z-index:10; max-width:1200px; margin:0 auto; padding:4rem 2rem; text-align:center; } | |
| .hero-title { | |
| font-size:3.5rem; font-weight:800; margin-bottom:1.5rem; | |
| background: linear-gradient(135deg, #ffffff, #00ffff); | |
| -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; | |
| animation: slideInDown 1s ease-out; | |
| } | |
| .hero-subtitle { | |
| font-size:1.3rem; margin-bottom:3rem; color:#b0b0b0; max-width:800px; margin-left:auto; margin-right:auto; line-height:1.6; | |
| animation: slideInUp 1s ease-out .3s both; | |
| } | |
| .features { display:grid; grid-template-columns:repeat(auto-fit, minmax(300px,1fr)); gap:2rem; margin:4rem 0; animation: fadeIn 1s ease-out .6s both; } | |
| .feature-card { | |
| background: rgba(255,255,255,0.05); backdrop-filter: blur(10px); | |
| border:1px solid rgba(255,255,255,0.1); border-radius:15px; padding:2rem; transition: all .3s ease; position:relative; overflow:hidden; | |
| } | |
| .feature-card::before { content:''; position:absolute; top:0; left:-100%; width:100%; height:100%; background: linear-gradient(90deg, transparent, rgba(0,255,255,.1), transparent); transition:left .6s; } | |
| .feature-card:hover::before{ left:100%; } | |
| .feature-card:hover{ transform: translateY(-10px); border-color: rgba(0,255,255,.3); box-shadow: 0 20px 40px rgba(0,255,255,.1); } | |
| .feature-icon{ font-size:3rem; margin-bottom:1rem; } | |
| .feature-title{ font-size:1.5rem; font-weight:bold; margin-bottom:1rem; color:#00ffff; } | |
| .feature-description{ color:#ccc; line-height:1.6; } | |
| .cta-section { margin:5rem 0; animation: fadeIn 1s ease-out .9s both; } | |
| .try-model-btn { | |
| display:inline-block; padding:1.2rem 3rem; font-size:1.4rem; font-weight:bold; | |
| text-decoration:none; color:#000; background: linear-gradient(45deg, #00ffff, #ff00ff); | |
| border-radius:50px; cursor:pointer; border:none; text-transform:uppercase; letter-spacing:2px; transition: all .3s ease; | |
| } | |
| .try-model-btn:hover{ transform: translateY(-3px); box-shadow: 0 15px 30px rgba(0,255,255,.4); color:#fff; } | |
| @keyframes slideInDown { from{opacity:0; transform:translateY(-50px);} to{opacity:1; transform:translateY(0);} } | |
| @keyframes slideInUp { from{opacity:0; transform:translateY(50px);} to{opacity:1; transform:translateY(0);} } | |
| @keyframes fadeIn { from{opacity:0;} to{opacity:1;} } | |
| @media (max-width:768px){ .hero-title{font-size:2.5rem;} .hero-subtitle{font-size:1.1rem;} .features{grid-template-columns:1fr;} } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="particles"> | |
| <div class="particle"></div><div class="particle"></div><div class="particle"></div> | |
| <div class="particle"></div><div class="particle"></div><div class="particle"></div> | |
| </div> | |
| <header class="header"><div class="logo">AutVid AI</div></header> | |
| <main class="main-content"> | |
| <h1 class="hero-title">Decode Emotions from Video & Audio</h1> | |
| <p class="hero-subtitle">AutVid AI analyzes video, audio, and text together to provide emotion insights in real time.</p> | |
| <section class="cta-section"> | |
| <button class="try-model-btn" onclick="window.location.href='/model'">Try Model</button> | |
| </section> | |
| <section class="features"> | |
| <div class="feature-card"><div class="feature-icon">🎥</div><h3 class="feature-title">Video</h3><p class="feature-description">Detect facial emotions with precision.</p></div> | |
| <div class="feature-card"><div class="feature-icon">🎵</div><h3 class="feature-title">Voice</h3><p class="feature-description">Analyze tone, pitch, rhythm, and patterns.</p></div> | |
| <div class="feature-card"><div class="feature-icon">🧠</div><h3 class="feature-title">AI Fusion</h3><p class="feature-description">Combine multimodal insights for accurate results.</p></div> | |
| </section> | |
| </main> | |
| </body> | |
| </html> | |