Spaces:
Running
Running
This is for a hackthon demo ,, so make it accordingly, better cool vibes - Follow Up Deployment
7dc8ee2
verified
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>VitalEdge | AI-Powered Health Companion</title> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap" rel="stylesheet"> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/aws-sdk/2.1048.0/aws-sdk.min.js"></script> | |
| <style> | |
| :root { | |
| --primary: #00f0ff; | |
| --secondary: #ff2df2; | |
| --accent: #7b2dff; | |
| --dark: #05051e; | |
| --darker: #010112; | |
| --light: #f0f0ff; | |
| --gray: #1a1a2e; | |
| --gradient: linear-gradient(135deg, var(--primary), var(--secondary)); | |
| --glow: 0 0 15px rgba(0, 240, 255, 0.7); | |
| } | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font-family: 'Space Grotesk', sans-serif; | |
| background-color: var(--dark); | |
| color: var(--light); | |
| overflow-x: hidden; | |
| line-height: 1.6; | |
| } | |
| .container { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| padding: 0 2rem; | |
| } | |
| /* Header */ | |
| header { | |
| padding: 2rem 0; | |
| position: relative; | |
| z-index: 100; | |
| } | |
| nav { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| .logo { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| font-size: 1.5rem; | |
| font-weight: 700; | |
| color: var(--light); | |
| text-decoration: none; | |
| } | |
| .logo-icon { | |
| width: 32px; | |
| height: 32px; | |
| background: var(--gradient); | |
| border-radius: 8px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .nav-links { | |
| display: flex; | |
| gap: 2rem; | |
| } | |
| .nav-links a { | |
| color: var(--light); | |
| text-decoration: none; | |
| font-weight: 500; | |
| position: relative; | |
| transition: all 0.3s ease; | |
| } | |
| .nav-links a:hover { | |
| color: var(--primary); | |
| } | |
| .nav-links a::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: -5px; | |
| left: 0; | |
| width: 0; | |
| height: 2px; | |
| background: var(--gradient); | |
| transition: width 0.3s ease; | |
| } | |
| .nav-links a:hover::after { | |
| width: 100%; | |
| } | |
| .cta-button { | |
| background: var(--gradient); | |
| color: var(--dark); | |
| padding: 0.75rem 1.5rem; | |
| border-radius: 50px; | |
| font-weight: 600; | |
| text-decoration: none; | |
| transition: all 0.3s ease; | |
| border: none; | |
| cursor: pointer; | |
| font-size: 1rem; | |
| } | |
| .cta-button:hover { | |
| transform: translateY(-3px); | |
| box-shadow: var(--glow), 0 10px 20px rgba(0, 240, 255, 0.4); | |
| filter: brightness(1.1); | |
| } | |
| /* Hero Section */ | |
| .hero { | |
| padding: 6rem 0; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .hero-content { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: flex-start; | |
| gap: 2rem; | |
| max-width: 600px; | |
| position: relative; | |
| z-index: 2; | |
| } | |
| .hero h1 { | |
| font-size: 4rem; | |
| font-weight: 700; | |
| line-height: 1.1; | |
| background: linear-gradient(to right, var(--light), var(--primary), var(--secondary)); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| margin-bottom: 1rem; | |
| text-shadow: 0 0 10px rgba(0, 240, 255, 0.3); | |
| animation: textFlicker 5s infinite alternate; | |
| } | |
| @keyframes textFlicker { | |
| 0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% { | |
| text-shadow: | |
| 0 0 10px rgba(0, 240, 255, 0.5), | |
| 0 0 20px rgba(0, 240, 255, 0.3), | |
| 0 0 30px rgba(123, 45, 255, 0.2); | |
| } | |
| 20%, 22%, 24%, 55% { | |
| text-shadow: none; | |
| } | |
| } | |
| .hero p { | |
| font-size: 1.25rem; | |
| color: rgba(255, 255, 255, 0.8); | |
| margin-bottom: 1.5rem; | |
| } | |
| .hero-buttons { | |
| display: flex; | |
| gap: 1rem; | |
| } | |
| .secondary-button { | |
| background: transparent; | |
| color: var(--light); | |
| padding: 0.75rem 1.5rem; | |
| border-radius: 50px; | |
| font-weight: 600; | |
| text-decoration: none; | |
| transition: all 0.3s ease; | |
| border: 2px solid var(--gray); | |
| } | |
| .secondary-button:hover { | |
| border-color: var(--primary); | |
| color: var(--primary); | |
| } | |
| .hero-image { | |
| position: absolute; | |
| right: -100px; | |
| top: 50%; | |
| transform: translateY(-50%); | |
| width: 600px; | |
| height: 600px; | |
| background: radial-gradient(circle, rgba(0, 240, 255, 0.1) 0%, rgba(0, 240, 255, 0) 70%); | |
| border-radius: 50%; | |
| z-index: 1; | |
| } | |
| .hero-image::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: url('https://images.unsplash.com/photo-1579684385127-1ef15d508118?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=880&q=80') center/cover no-repeat; | |
| border-radius: 20px; | |
| transform: rotate(10deg) scale(0.9); | |
| box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3); | |
| } | |
| /* Floating Elements */ | |
| .floating-element { | |
| position: absolute; | |
| border-radius: 50%; | |
| filter: blur(40px); | |
| opacity: 0.7; | |
| z-index: 0; | |
| } | |
| .floating-1 { | |
| width: 300px; | |
| height: 300px; | |
| background: var(--primary); | |
| top: 10%; | |
| left: 10%; | |
| animation: float 8s ease-in-out infinite; | |
| } | |
| .floating-2 { | |
| width: 200px; | |
| height: 200px; | |
| background: var(--secondary); | |
| bottom: 20%; | |
| right: 15%; | |
| animation: float 6s ease-in-out infinite reverse; | |
| } | |
| .floating-3 { | |
| width: 150px; | |
| height: 150px; | |
| background: var(--primary); | |
| top: 60%; | |
| left: 30%; | |
| animation: float 5s ease-in-out infinite 2s; | |
| } | |
| @keyframes float { | |
| 0% { | |
| transform: translateY(0) rotate(0deg); | |
| filter: blur(40px); | |
| } | |
| 25% { | |
| filter: blur(50px); | |
| } | |
| 50% { | |
| transform: translateY(-30px) rotate(5deg); | |
| filter: blur(40px); | |
| } | |
| 75% { | |
| filter: blur(30px); | |
| } | |
| 100% { | |
| transform: translateY(0) rotate(0deg); | |
| filter: blur(40px); | |
| } | |
| } | |
| /* Features Section */ | |
| .section { | |
| padding: 6rem 0; | |
| position: relative; | |
| } | |
| .section-title { | |
| font-size: 2.5rem; | |
| font-weight: 700; | |
| margin-bottom: 3rem; | |
| text-align: center; | |
| background: linear-gradient(to right, var(--light), var(--primary)); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| } | |
| .features-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); | |
| gap: 2rem; | |
| } | |
| .feature-card { | |
| background: rgba(26, 26, 46, 0.5); | |
| border-radius: 16px; | |
| padding: 2rem; | |
| transition: all 0.3s ease; | |
| position: relative; | |
| overflow: hidden; | |
| z-index: 1; | |
| backdrop-filter: blur(12px); | |
| border: 1px solid rgba(0, 240, 255, 0.2); | |
| box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); | |
| } | |
| .feature-card::before { | |
| content: ''; | |
| position: absolute; | |
| inset: -2px; | |
| background: linear-gradient(135deg, var(--primary), var(--secondary)); | |
| z-index: -2; | |
| filter: blur(10px); | |
| opacity: 0; | |
| transition: opacity 0.3s ease; | |
| } | |
| .feature-card:hover::before { | |
| opacity: 0.7; | |
| } | |
| .feature-card:hover { | |
| transform: translateY(-10px); | |
| box-shadow: 0 10px 30px rgba(0, 240, 255, 0.1); | |
| } | |
| .feature-card::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: linear-gradient(135deg, rgba(0, 240, 255, 0.1), rgba(123, 45, 255, 0.1)); | |
| z-index: -1; | |
| opacity: 0; | |
| transition: opacity 0.3s ease; | |
| } | |
| .feature-card:hover::before { | |
| opacity: 1; | |
| } | |
| .feature-icon { | |
| width: 60px; | |
| height: 60px; | |
| background: var(--gradient); | |
| border-radius: 12px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| margin-bottom: 1.5rem; | |
| font-size: 1.5rem; | |
| } | |
| .feature-title { | |
| font-size: 1.5rem; | |
| font-weight: 600; | |
| margin-bottom: 1rem; | |
| color: var(--light); | |
| } | |
| .feature-description { | |
| color: rgba(255, 255, 255, 0.7); | |
| font-size: 1rem; | |
| } | |
| /* Tech Stack */ | |
| .tech-stack { | |
| display: flex; | |
| justify-content: center; | |
| flex-wrap: wrap; | |
| gap: 2rem; | |
| margin-top: 3rem; | |
| } | |
| .tech-item { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| gap: 0.5rem; | |
| } | |
| .tech-icon { | |
| width: 80px; | |
| height: 80px; | |
| background: rgba(255, 255, 255, 0.05); | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 2rem; | |
| transition: all 0.3s ease; | |
| } | |
| .tech-icon:hover { | |
| background: rgba(0, 240, 255, 0.1); | |
| transform: scale(1.1); | |
| } | |
| .tech-name { | |
| font-size: 0.9rem; | |
| color: rgba(255, 255, 255, 0.7); | |
| } | |
| /* Testimonials */ | |
| .testimonials { | |
| background: rgba(42, 42, 58, 0.3); | |
| border-radius: 20px; | |
| padding: 3rem; | |
| margin-top: 3rem; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .testimonial-card { | |
| background: rgba(10, 10, 20, 0.7); | |
| border-radius: 15px; | |
| padding: 2rem; | |
| margin-bottom: 1.5rem; | |
| position: relative; | |
| border: 1px solid rgba(255, 255, 255, 0.05); | |
| } | |
| .testimonial-text { | |
| font-style: italic; | |
| color: rgba(255, 255, 255, 0.9); | |
| margin-bottom: 1rem; | |
| } | |
| .testimonial-author { | |
| display: flex; | |
| align-items: center; | |
| gap: 1rem; | |
| } | |
| .author-avatar { | |
| width: 50px; | |
| height: 50px; | |
| border-radius: 50%; | |
| background: var(--gradient); | |
| } | |
| .author-info h4 { | |
| font-weight: 600; | |
| margin-bottom: 0.2rem; | |
| } | |
| .author-info p { | |
| color: rgba(255, 255, 255, 0.6); | |
| font-size: 0.9rem; | |
| } | |
| /* CTA Section */ | |
| .cta-section { | |
| text-align: center; | |
| padding: 6rem 0; | |
| position: relative; | |
| } | |
| .cta-section h2 { | |
| font-size: 2.5rem; | |
| font-weight: 700; | |
| margin-bottom: 1.5rem; | |
| background: linear-gradient(to right, var(--light), var(--primary)); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| } | |
| .cta-section p { | |
| max-width: 600px; | |
| margin: 0 auto 2rem; | |
| color: rgba(255, 255, 255, 0.8); | |
| font-size: 1.1rem; | |
| } | |
| /* Footer */ | |
| footer { | |
| background: var(--darker); | |
| padding: 4rem 0 2rem; | |
| } | |
| .footer-content { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); | |
| gap: 2rem; | |
| margin-bottom: 3rem; | |
| } | |
| .footer-column h3 { | |
| font-size: 1.2rem; | |
| font-weight: 600; | |
| margin-bottom: 1.5rem; | |
| color: var(--light); | |
| } | |
| .footer-links { | |
| list-style: none; | |
| } | |
| .footer-links li { | |
| margin-bottom: 0.75rem; | |
| } | |
| .footer-links a { | |
| color: rgba(255, 255, 255, 0.6); | |
| text-decoration: none; | |
| transition: all 0.3s ease; | |
| } | |
| .footer-links a:hover { | |
| color: var(--primary); | |
| } | |
| .social-links { | |
| display: flex; | |
| gap: 1rem; | |
| margin-top: 1.5rem; | |
| } | |
| .social-link { | |
| width: 40px; | |
| height: 40px; | |
| border-radius: 50%; | |
| background: rgba(255, 255, 255, 0.05); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| transition: all 0.3s ease; | |
| } | |
| .social-link:hover { | |
| background: var(--primary); | |
| color: var(--dark); | |
| transform: translateY(-3px); | |
| } | |
| .footer-bottom { | |
| border-top: 1px solid rgba(255, 255, 255, 0.05); | |
| padding-top: 2rem; | |
| text-align: center; | |
| color: rgba(255, 255, 255, 0.4); | |
| font-size: 0.9rem; | |
| } | |
| /* Animations */ | |
| @keyframes pulse { | |
| 0% { | |
| transform: scale(1); | |
| opacity: 1; | |
| } | |
| 50% { | |
| transform: scale(1.05); | |
| opacity: 0.8; | |
| } | |
| 100% { | |
| transform: scale(1); | |
| opacity: 1; | |
| } | |
| } | |
| .pulse { | |
| animation: pulse 3s infinite; | |
| } | |
| /* 3D Visualization */ | |
| .tech-visualization { | |
| position: relative; | |
| height: 600px; | |
| background: var(--darker); | |
| overflow: hidden; | |
| } | |
| #threejs-container { | |
| width: 100%; | |
| height: 100%; | |
| } | |
| .visualization-caption { | |
| position: absolute; | |
| bottom: 50px; | |
| left: 50px; | |
| max-width: 500px; | |
| z-index: 10; | |
| } | |
| .visualization-caption h3 { | |
| font-size: 2rem; | |
| margin-bottom: 1rem; | |
| } | |
| /* AWS Architecture */ | |
| .aws-architecture { | |
| padding: 6rem 0; | |
| background: rgba(10, 10, 20, 0.5); | |
| position: relative; | |
| } | |
| .architecture-diagram { | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| margin: 3rem auto; | |
| max-width: 900px; | |
| } | |
| .architecture-node { | |
| width: 80px; | |
| height: 80px; | |
| border-radius: 50%; | |
| background: var(--gradient); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 1.5rem; | |
| color: var(--dark); | |
| position: relative; | |
| z-index: 2; | |
| box-shadow: 0 5px 20px rgba(0, 240, 255, 0.3); | |
| transition: all 0.3s ease; | |
| } | |
| .architecture-node:hover { | |
| transform: scale(1.2); | |
| } | |
| .architecture-node::after { | |
| content: attr(data-tooltip); | |
| position: absolute; | |
| top: -50px; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| background: rgba(0,0,0,0.8); | |
| color: white; | |
| padding: 0.5rem 1rem; | |
| border-radius: 5px; | |
| font-size: 0.9rem; | |
| white-space: nowrap; | |
| opacity: 0; | |
| transition: opacity 0.3s ease; | |
| } | |
| .architecture-node:hover::after { | |
| opacity: 1; | |
| } | |
| .architecture-line { | |
| flex-grow: 1; | |
| height: 3px; | |
| background: var(--gradient); | |
| position: relative; | |
| } | |
| .architecture-line::after { | |
| content: ''; | |
| position: absolute; | |
| right: 0; | |
| top: -5px; | |
| width: 15px; | |
| height: 15px; | |
| background: var(--secondary); | |
| transform: rotate(45deg); | |
| } | |
| .architecture-caption { | |
| text-align: center; | |
| max-width: 600px; | |
| margin: 0 auto; | |
| color: rgba(255,255,255,0.8); | |
| } | |
| /* Responsive */ | |
| @media (max-width: 1024px) { | |
| .hero-image { | |
| opacity: 0.3; | |
| right: -200px; | |
| } | |
| } | |
| @media (max-width: 768px) { | |
| .hero h1 { | |
| font-size: 2.5rem; | |
| } | |
| .hero p { | |
| font-size: 1.1rem; | |
| } | |
| .hero-image { | |
| display: none; | |
| } | |
| .nav-links { | |
| display: none; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Floating Background Elements --> | |
| <div class="floating-element floating-1"></div> | |
| <div class="floating-element floating-2"></div> | |
| <div class="floating-element floating-3"></div> | |
| <!-- Header --> | |
| <header class="container"> | |
| <nav> | |
| <a href="#" class="logo"> | |
| <div class="logo-icon"> | |
| <i class="fas fa-heartbeat"></i> | |
| </div> | |
| VitalEdge | |
| </a> | |
| <div class="nav-links"> | |
| <a href="#features">Features</a> | |
| <a href="#technology">Technology</a> | |
| <a href="#testimonials">Testimonials</a> | |
| <a href="#pricing">Pricing</a> | |
| </div> | |
| <a href="#cta" class="cta-button">Get Early Access</a> | |
| </nav> | |
| </header> | |
| <!-- Hero Section --> | |
| <section class="hero container"> | |
| <div class="hero-content"> | |
| <h1>The Future of Personalized Health Monitoring</h1> | |
| <p>VitalEdge combines cutting-edge AI, IoT, and Edge Computing to deliver real-time health insights and personalized coaching right on your wearable device.</p> | |
| <div class="hero-buttons"> | |
| <a href="#cta" class="cta-button pulse"> | |
| <i class="fas fa-rocket"></i> Join Beta | |
| </a> | |
| <a href="#features" class="secondary-button"> | |
| <i class="fas fa-play-circle"></i> Watch Demo | |
| </a> | |
| </div> | |
| </div> | |
| <div class="hero-image"></div> | |
| </section> | |
| <!-- AI/IoT Animation Visualization --> | |
| <div class="cyber-grid"></div> | |
| <style> | |
| .cyber-grid { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| z-index: -1; | |
| background: | |
| linear-gradient(var(--darker) 1px, transparent 1px) 0 -1px, | |
| linear-gradient(90deg, var(--darker) 1px, transparent 1px) -1px 0; | |
| background-size: 30px 30px; | |
| background-color: var(--dark); | |
| opacity: 0.3; | |
| } | |
| .iot-animation-container { | |
| height: 600px; | |
| position: relative; | |
| overflow: hidden; | |
| background: radial-gradient(circle at center, var(--darker) 0%, var(--dark) 100%); | |
| } | |
| .iot-device { | |
| position: absolute; | |
| width: 80px; | |
| height: 80px; | |
| border-radius: 50%; | |
| background: var(--gradient); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 1.5rem; | |
| box-shadow: 0 0 15px rgba(0, 240, 255, 0.5); | |
| opacity: 0; | |
| } | |
| .data-connection { | |
| position: absolute; | |
| height: 2px; | |
| background: var(--primary); | |
| transform-origin: left center; | |
| opacity: 0; | |
| box-shadow: 0 0 5px var(--primary); | |
| } | |
| .ai-bot { | |
| position: absolute; | |
| width: 100px; | |
| height: 100px; | |
| border-radius: 50%; | |
| background: conic-gradient(from 180deg, var(--accent), var(--secondary)); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 2rem; | |
| opacity: 0; | |
| box-shadow: 0 0 20px rgba(123, 45, 255, 0.5); | |
| } | |
| .health-record { | |
| position: absolute; | |
| width: 120px; | |
| height: 80px; | |
| background: rgba(255,255,255,0.1); | |
| border-radius: 10px; | |
| backdrop-filter: blur(5px); | |
| border: 1px solid rgba(0,240,255,0.3); | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| font-size: 0.8rem; | |
| text-align: center; | |
| padding: 10px; | |
| opacity: 0; | |
| } | |
| </style> | |
| <section class="iot-animation-container" style="height: 80vh;"> | |
| <div class="demo-title"> | |
| <h2>Hackathon Demo</h2> | |
| <p>Live AI Health Monitoring System</p> | |
| <div class="demo-stats"> | |
| <div class="stat-item"> | |
| <div class="stat-value" id="heartrate">--</div> | |
| <div class="stat-label">BPM</div> | |
| </div> | |
| <div class="stat-item"> | |
| <div class="stat-value" id="oxygen">--</div> | |
| <div class="stat-label">SpO2 %</div> | |
| </div> | |
| <div class="stat-item"> | |
| <div class="stat-value" id="stress">--</div> | |
| <div class="stat-label">Stress Lvl</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="iot-device" style="top: 20%; left: 20%"> | |
| <i class="fas fa-watch-fitness"></i> | |
| </div> | |
| <div class="iot-device" style="top: 60%; left: 15%"> | |
| <i class="fas fa-heartbeat"></i> | |
| </div> | |
| <div class="iot-device" style="top: 40%; left: 80%"> | |
| <i class="fas fa-mobile-alt"></i> | |
| </div> | |
| <div class="ai-bot" style="top: 50%; left: 50%; transform: translate(-50%, -50%)"> | |
| <i class="fas fa-robot"></i> | |
| </div> | |
| <div class="health-record" style="top: 25%; left: 50%"> | |
| Real-time ECG Analysis | |
| </div> | |
| <div class="health-record" style="top: 70%; left: 50%"> | |
| Predictive Health Insights | |
| </div> | |
| <div class="visualization-caption"> | |
| <h3>Our <span class="gradient-text">AI+IoT Health</span> Ecosystem</h3> | |
| <p>See how devices, AI, and health data work together in real-time</p> | |
| </div> | |
| </section> | |
| <script> | |
| // Animation sequence for IoT/AI visualization | |
| function animateIoT() { | |
| const devices = document.querySelectorAll('.iot-device'); | |
| const connections = []; | |
| const aiBot = document.querySelector('.ai-bot'); | |
| const records = document.querySelectorAll('.health-record'); | |
| // Create data connections | |
| devices.forEach(device => { | |
| const rect = device.getBoundingClientRect(); | |
| const botRect = aiBot.getBoundingClientRect(); | |
| const connection = document.createElement('div'); | |
| connection.className = 'data-connection'; | |
| const length = Math.sqrt( | |
| Math.pow(botRect.left - rect.left, 2) + | |
| Math.pow(botRect.top - rect.top, 2) | |
| ); | |
| const angle = Math.atan2( | |
| botRect.top - rect.top, | |
| botRect.left - rect.left | |
| ) * 180 / Math.PI; | |
| connection.style.width = `${length}px`; | |
| connection.style.left = `${rect.left + rect.width/2}px`; | |
| connection.style.top = `${rect.top + rect.height/2}px`; | |
| connection.style.transform = `rotate(${angle}deg)`; | |
| document.querySelector('.iot-animation-container').appendChild(connection); | |
| connections.push(connection); | |
| }); | |
| // Animation timeline | |
| let delay = 0; | |
| // Show devices | |
| devices.forEach((device, i) => { | |
| setTimeout(() => { | |
| device.style.opacity = 1; | |
| device.style.animation = 'pulse 2s infinite'; | |
| device.style.animationDelay = `${i * 0.3}s`; | |
| }, delay); | |
| delay += 300; | |
| }); | |
| // Show connections | |
| setTimeout(() => { | |
| connections.forEach(conn => { | |
| conn.style.opacity = 0.7; | |
| conn.style.transition = 'opacity 0.5s ease'; | |
| }); | |
| }, delay); | |
| delay += 500; | |
| // Show AI bot | |
| setTimeout(() => { | |
| aiBot.style.opacity = 1; | |
| aiBot.style.animation = 'pulse 2s infinite'; | |
| }, delay); | |
| delay += 500; | |
| // Show health records | |
| records.forEach((record, i) => { | |
| setTimeout(() => { | |
| record.style.opacity = 1; | |
| record.style.transform = `translateY(${i % 2 ? '10px' : '-10px'})`; | |
| record.style.transition = 'all 0.5s ease'; | |
| }, delay + i * 300); | |
| // Floating animation | |
| setTimeout(() => { | |
| record.style.animation = ` | |
| float 3s ease-in-out infinite ${i * 0.3}s | |
| `; | |
| }, delay + records.length * 300); | |
| }); | |
| // Animate connections | |
| setInterval(() => { | |
| connections.forEach(conn => { | |
| if (Math.random() > 0.7) { | |
| conn.style.opacity = 0.3; | |
| setTimeout(() => { | |
| conn.style.opacity = 0.7; | |
| }, 200); | |
| } | |
| }); | |
| }, 300); | |
| } | |
| document.addEventListener('DOMContentLoaded', function() { | |
| animateIoT(); | |
| // Demo data simulation | |
| const heartRate = document.getElementById('heartrate'); | |
| const oxygen = document.getElementById('oxygen'); | |
| const stress = document.getElementById('stress'); | |
| let hr = 72; | |
| let spo2 = 98; | |
| let stressLvl = 35; | |
| setInterval(() => { | |
| hr = Math.max(60, Math.min(120, hr + (Math.random() * 4 - 2))); | |
| spo2 = Math.max(92, Math.min(100, spo2 + (Math.random() * 1 - 0.5))); | |
| stressLvl = Math.max(15, Math.min(90, stressLvl + (Math.random() * 10 - 5))); | |
| heartRate.textContent = Math.round(hr); | |
| oxygen.textContent = Math.round(spo2); | |
| stress.textContent = Math.round(stressLvl); | |
| // Change colors based on values | |
| heartRate.style.color = hr > 90 ? '#ff2df2' : '#00f0ff'; | |
| oxygen.style.color = spo2 < 94 ? '#ff2df2' : '#00f0ff'; | |
| stress.style.color = stressLvl > 70 ? '#ff2df2' : '#00f0ff'; | |
| }, 1000); | |
| // Make pulses more pronounced for demo | |
| setInterval(() => { | |
| document.querySelectorAll('.iot-device').forEach(device => { | |
| device.style.transform = 'scale(1.2)'; | |
| setTimeout(() => { | |
| device.style.transform = 'scale(1)'; | |
| }, 200); | |
| }); | |
| }, 3000); | |
| }); | |
| // Add floating animation | |
| const style = document.createElement('style'); | |
| style.innerHTML = ` | |
| @keyframes float { | |
| 0% { transform: translateY(0) rotate(0deg); } | |
| 25% { transform: translateY(-5px) rotate(2deg); } | |
| 50% { transform: translateY(0) rotate(0deg); } | |
| 75% { transform: translateY(5px) rotate(-2deg); } | |
| 100% { transform: translateY(0) rotate(0deg); } | |
| } | |
| `; | |
| document.head.appendChild(style); | |
| </script> | |
| <!-- Features Section --> | |
| <section id="features" class="section container"> | |
| <h2 class="section-title">Why VitalEdge?</h2> | |
| <div class="features-grid"> | |
| <div class="feature-card"> | |
| <div class="feature-icon"> | |
| <i class="fas fa-bolt"></i> | |
| </div> | |
| <h3 class="feature-title">Real-time Processing</h3> | |
| <p class="feature-description">Edge computing enables instant health analysis without cloud latency, giving you immediate feedback on your vitals.</p> | |
| </div> | |
| <div class="feature-card"> | |
| <div class="feature-icon"> | |
| <i class="fas fa-brain"></i> | |
| </div> | |
| <h3 class="feature-title">AI-Powered Insights</h3> | |
| <p class="feature-description">Our AWS-powered generative AI learns your unique patterns to provide hyper-personalized health recommendations.</p> | |
| </div> | |
| <div class="feature-card"> | |
| <div class="feature-icon"> | |
| <i class="fas fa-shield-alt"></i> | |
| </div> | |
| <h3 class="feature-title">Privacy First</h3> | |
| <p class="feature-description">Your sensitive health data stays on your device with our local processing architecture, never touching the cloud.</p> | |
| </div> | |
| <div class="feature-card"> | |
| <div class="feature-icon"> | |
| <i class="fas fa-network-wired"></i> | |
| </div> | |
| <h3 class="feature-title">5G Connected</h3> | |
| <p class="feature-description">Ultra-low latency 5G connectivity ensures seamless synchronization when cloud processing is needed.</p> | |
| </div> | |
| <div class="feature-card"> | |
| <div class="feature-icon"> | |
| <i class="fas fa-chart-line"></i> | |
| </div> | |
| <h3 class="feature-title">Predictive Analytics</h3> | |
| <p class="feature-description">Our models can predict potential health issues before they become serious, giving you time to take action.</p> | |
| </div> | |
| <div class="feature-card"> | |
| <div class="feature-icon"> | |
| <i class="fas fa-robot"></i> | |
| </div> | |
| <h3 class="feature-title">AI Health Coach</h3> | |
| <p class="feature-description">Your personal AI coach adapts to your lifestyle, providing just-in-time guidance for optimal wellbeing.</p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Technology Section --> | |
| <section id="technology" class="section container"> | |
| <h2 class="section-title">Powered By Cutting-Edge Tech</h2> | |
| <div class="tech-stack"> | |
| <div class="tech-item"> | |
| <div class="tech-icon"> | |
| <i class="fab fa-aws"></i> | |
| </div> | |
| <span class="tech-name">AWS Generative AI</span> | |
| </div> | |
| <div class="tech-item"> | |
| <div class="tech-icon"> | |
| <i class="fas fa-microchip"></i> | |
| </div> | |
| <span class="tech-name">Edge Computing</span> | |
| </div> | |
| <div class="tech-item"> | |
| <div class="tech-icon"> | |
| <i class="fas fa-wifi"></i> | |
| </div> | |
| <span class="tech-name">5G Networks</span> | |
| </div> | |
| <div class="tech-item"> | |
| <div class="tech-icon"> | |
| <i class="fas fa-bluetooth-b"></i> | |
| </div> | |
| <span class="tech-name">IoT Sensors</span> | |
| </div> | |
| <div class="tech-item"> | |
| <div class="tech-icon"> | |
| <i class="fas fa-lock"></i> | |
| </div> | |
| <span class="tech-name">Blockchain</span> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- AWS Architecture --> | |
| <section class="aws-architecture"> | |
| <div class="container"> | |
| <h2 class="section-title">Our <span class="gradient-text">AWS Edge AI</span> Architecture</h2> | |
| <div class="architecture-diagram"> | |
| <div class="architecture-node" data-tooltip="IoT Device"> | |
| <i class="fas fa-microchip"></i> | |
| </div> | |
| <div class="architecture-line"></div> | |
| <div class="architecture-node" data-tooltip="AWS IoT Greengrass"> | |
| <i class="fab fa-aws"></i> | |
| </div> | |
| <div class="architecture-line"></div> | |
| <div class="architecture-node" data-tooltip="Edge Lambda"> | |
| <i class="fas fa-bolt"></i> | |
| </div> | |
| <div class="architecture-line"></div> | |
| <div class="architecture-node" data-tooltip="Sagemaker Neo"> | |
| <i class="fas fa-brain"></i> | |
| </div> | |
| <div class="architecture-line"></div> | |
| <div class="architecture-node" data-tooltip="Personalized Insights"> | |
| <i class="fas fa-chart-line"></i> | |
| </div> | |
| </div> | |
| <div class="architecture-caption"> | |
| <p>Data flows through our optimized edge AI pipeline, reducing latency by 90% compared to cloud-only solutions</p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Testimonials --> | |
| <section id="testimonials" class="section container"> | |
| <h2 class="section-title">Trusted By Health Pioneers</h2> | |
| <div class="testimonials"> | |
| <div class="testimonial-card"> | |
| <p class="testimonial-text">"VitalEdge detected irregular heart patterns that my doctor missed. The AI analysis likely saved my life by catching early signs of atrial fibrillation."</p> | |
| <div class="testimonial-author"> | |
| <div class="author-avatar"></div> | |
| <div class="author-info"> | |
| <h4>Dr. Sarah Chen</h4> | |
| <p>Cardiologist, Stanford Health</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="testimonial-card"> | |
| <p class="testimonial-text">"As a biohacker, I've tried every health wearable. VitalEdge is the first that provides truly actionable insights with its edge AI processing."</p> | |
| <div class="testimonial-author"> | |
| <div class="author-avatar"></div> | |
| <div class="author-info"> | |
| <h4>Mark Williams</h4> | |
| <p>Professional Athlete</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- CTA Section --> | |
| <section id="cta" class="cta-section container"> | |
| <h2>Ready to Transform Your Health?</h2> | |
| <p>Join our exclusive beta program and be among the first to experience the future of personalized health monitoring.</p> | |
| <a href="#" class="cta-button pulse"> | |
| <i class="fas fa-user-plus"></i> Apply for Beta Access | |
| </a> | |
| </section> | |
| <!-- Footer --> | |
| <footer> | |
| <div class="container"> | |
| <div class="footer-content"> | |
| <div class="footer-column"> | |
| <h3>VitalEdge</h3> | |
| <p>The future of health monitoring powered by AI, IoT, and Edge Computing.</p> | |
| <div class="social-links"> | |
| <a href="#" class="social-link"><i class="fab fa-twitter"></i></a> | |
| <a href="#" class="social-link"><i class="fab fa-linkedin-in"></i></a> | |
| <a href="#" class="social-link"><i class="fab fa-github"></i></a> | |
| <a href="#" class="social-link"><i class="fab fa-youtube"></i></a> | |
| </div> | |
| </div> | |
| <div class="footer-column"> | |
| <h3>Product</h3> | |
| <ul class="footer-links"> | |
| <li><a href="#">Features</a></li> | |
| <li><a href="#">Technology</a></li> | |
| <li><a href="#">Pricing</a></li> | |
| <li><a href="#">Roadmap</a></li> | |
| </ul> | |
| </div> | |
| <div class="footer-column"> | |
| <h3>Resources</h3> | |
| <ul class="footer-links"> | |
| <li><a href="#">Documentation</a></li> | |
| <li><a href="#">API</a></li> | |
| <li><a href="#">Developers</a></li> | |
| <li><a href="#">Research</a></li> | |
| </ul> | |
| </div> | |
| <div class="footer-column"> | |
| <h3>Company</h3> | |
| <ul class="footer-links"> | |
| <li><a href="#">About</a></li> | |
| <li><a href="#">Careers</a></li> | |
| <li><a href="#">Blog</a></li> | |
| <li><a href="#">Contact</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="footer-bottom"> | |
| <p>© 2023 VitalEdge Technologies. All rights reserved. | <a href="#">Privacy Policy</a> | <a href="#">Terms of Service</a></p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Three.js Neural Network Visualization | |
| const initThreeJS = () => { | |
| const container = document.getElementById('threejs-container'); | |
| const width = container.clientWidth; | |
| const height = container.clientHeight; | |
| // Scene setup | |
| const scene = new THREE.Scene(); | |
| scene.background = new THREE.Color(0x0a0a14); | |
| const camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000); | |
| camera.position.z = 30; | |
| const renderer = new THREE.WebGLRenderer({ antialias: true }); | |
| renderer.setSize(width, height); | |
| container.appendChild(renderer.domElement); | |
| // Controls | |
| const controls = new THREE.OrbitControls(camera, renderer.domElement); | |
| controls.enableDamping = true; | |
| controls.dampingFactor = 0.05; | |
| controls.autoRotate = true; | |
| controls.autoRotateSpeed = 0.5; | |
| // Create neural network structure | |
| const createNeuralNetwork = () => { | |
| const group = new THREE.Group(); | |
| // Create layers | |
| const layerCount = 5; | |
| const nodesPerLayer = 8; | |
| const spacing = 5; | |
| // Nodes material | |
| const nodeMaterial = new THREE.MeshBasicMaterial({ | |
| color: 0x00f0ff, | |
| transparent: true, | |
| opacity: 0.8 | |
| }); | |
| // Connections material | |
| const connectionMaterial = new THREE.LineBasicMaterial({ | |
| color: 0x7b2dff, | |
| transparent: true, | |
| opacity: 0.3 | |
| }); | |
| // Create nodes and connections | |
| for (let l = 0; l < layerCount; l++) { | |
| const layerNodes = []; | |
| // Create nodes in this layer | |
| for (let n = 0; n < nodesPerLayer; n++) { | |
| const radius = 0.5; | |
| const geometry = new THREE.SphereGeometry(radius, 16, 16); | |
| const node = new THREE.Mesh(geometry, nodeMaterial); | |
| node.position.x = (l - (layerCount/2 - 0.5)) * spacing; | |
| node.position.y = (n - (nodesPerLayer/2 - 0.5)) * spacing; | |
| group.add(node); | |
| layerNodes.push(node); | |
| // If not first layer, connect to previous layer | |
| if (l > 0) { | |
| for (let p = 0; p < nodesPerLayer; p++) { | |
| const points = []; | |
| points.push(new THREE.Vector3( | |
| node.position.x - spacing/2, | |
| node.position.y, | |
| node.position.z | |
| )); | |
| points.push(new THREE.Vector3( | |
| node.position.x - spacing/2, | |
| (p - (nodesPerLayer/2 - 0.5)) * spacing, | |
| node.position.z | |
| )); | |
| const lineGeometry = new THREE.BufferGeometry().setFromPoints(points); | |
| const line = new THREE.Line(lineGeometry, connectionMaterial); | |
| group.add(line); | |
| } | |
| } | |
| } | |
| } | |
| return group; | |
| }; | |
| const nn = createNeuralNetwork(); | |
| scene.add(nn); | |
| // Pulsing animation for nodes | |
| const pulseNodes = () => { | |
| nn.children.forEach(child => { | |
| if (child instanceof THREE.Mesh) { | |
| const scale = 1 + Math.sin(Date.now() * 0.002) * 0.2; | |
| child.scale.set(scale, scale, scale); | |
| } | |
| }); | |
| }; | |
| // Animation loop | |
| const animate = () => { | |
| requestAnimationFrame(animate); | |
| pulseNodes(); | |
| controls.update(); | |
| renderer.render(scene, camera); | |
| }; | |
| animate(); | |
| // Handle resize | |
| window.addEventListener('resize', () => { | |
| const width = container.clientWidth; | |
| const height = container.clientHeight; | |
| camera.aspect = width / height; | |
| camera.updateProjectionMatrix(); | |
| renderer.setSize(width, height); | |
| }); | |
| }; | |
| // Initialize when DOM is loaded | |
| document.addEventListener('DOMContentLoaded', initThreeJS); | |
| // Simple animation for elements when they come into view | |
| const observer = new IntersectionObserver((entries) => { | |
| entries.forEach(entry => { | |
| if (entry.isIntersecting) { | |
| entry.target.classList.add('animate'); | |
| } | |
| }); | |
| }, { | |
| threshold: 0.1 | |
| }); | |
| document.querySelectorAll('.feature-card, .tech-item, .testimonial-card').forEach(el => { | |
| observer.observe(el); | |
| }); | |
| // Theme toggle (simplified for this example) | |
| const themeToggle = document.createElement('button'); | |
| themeToggle.innerHTML = '<i class="fas fa-moon"></i>'; | |
| themeToggle.style.position = 'fixed'; | |
| themeToggle.style.bottom = '20px'; | |
| themeToggle.style.right = '20px'; | |
| themeToggle.style.width = '50px'; | |
| themeToggle.style.height = '50px'; | |
| themeToggle.style.borderRadius = '50%'; | |
| themeToggle.style.background = 'var(--gradient)'; | |
| themeToggle.style.color = 'var(--dark)'; | |
| themeToggle.style.border = 'none'; | |
| themeToggle.style.cursor = 'pointer'; | |
| themeToggle.style.zIndex = '1000'; | |
| themeToggle | |
| </html> |