Spaces:

evildeity
/

HackOdisha

Sleeping

App Files Files Community

Shreyas commited on Sep 8

Commit

4347500

verified ·

1 Parent(s): a5ddd1b

Upload index.html

Browse files

Files changed (1) hide show

templates/index.html +93 -0

templates/index.html CHANGED Viewed

	@@ -0,0 +1,93 @@

+<!DOCTYPE html>
+<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>