Our Mission Medical Center
Preview
Edit
Download
Run
Download Options
HTML File
Download as .html file
CSS File
Download as .css file
JavaScript File
Download as .js file
Combined HTML
All code in one HTML file
Project ZIP
All files in a ZIP archive
Cancel
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Our Mission - Medical Center</title> </head> <body class="bg-gradient-to-br from-blue-50 via-cyan-50 to-teal-50 min-h-screen"> <!-- Healthcare Pattern Overlay --> <div class="fixed inset-0 healthcare-pattern pointer-events-none"></div> <!-- Floating Medical Elements --> <div class="absolute top-16 left-8 w-6 h-6 text-blue-500 healing-wave opacity-60">?</div> <div class="absolute top-32 right-12 w-6 h-6 text-cyan-500 heartbeat-pulse opacity-70" style="animation-delay: 1s;">❤️</div> <div class="absolute top-48 left-20 w-6 h-6 text-teal-500 healing-wave opacity-50" style="animation-delay: 2s;">?</div> <div class="absolute top-64 right-32 w-6 h-6 text-green-500 medical-cross-float opacity-60" style="animation-delay: 3s;">?</div> <!-- Our Mission Section --> <section class="relative py-20 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto"> <!-- Animated Background Elements --> <div class="absolute top-20 left-12 w-20 h-20 text-blue-300 ambulance-glide opacity-30"> <svg fill="currentColor" viewBox="0 0 24 24"> <path d="M18.92,6.01C18.72,5.42 18.16,5 17.5,5H15V7H17.5L18.92,6.01M20,8H17V10H20V8M20,11H17V13H20V11M18.5,14C19.33,14 20,14.67 20,15.5C20,16.33 19.33,17 18.5,17C17.67,17 17,16.33 17,15.5C17,14.67 17.67,14 18.5,14M6,7.5C6,6.67 6.67,6 7.5,6C8.33,6 9,6.67 9,7.5C9,8.33 8.33,9 7.5,9C6.67,9 6,8.33 6,7.5M4.5,9C5.33,9 6,9.67 6,10.5C6,11.33 5.33,12 4.5,12C3.67,12 3,11.33 3,10.5C3,9.67 3.67,9 4.5,9M7,18C7,16.89 7.89,16 9,16H14C15.11,16 16,16.89 16,18V19H7V18Z"/> </svg> </div> <div class="absolute top-40 right-16 w-16 h-16 text-cyan-400 stethoscope-sway opacity-25"> <svg fill="currentColor" viewBox="0 0 24 24"> <path d="M19,8A3,3 0 0,0 16,11C16,11.35 16.06,11.69 16.17,12L14,14.17V17A2,2 0 0,1 12,19A2,2 0 0,1 10,17V14.17L2.83,7H5.17L12,13.83L18.83,7H21.17L19,9.17C19.35,9.06 19.69,9 20,9A3,3 0 0,0 19,8M19,10A1,1 0 0,1 18,11A1,1 0 0,1 17,10A1,1 0 0,1 18,9A1,1 0 0,1 19,10Z"/> </svg> </div> <div class="absolute top-60 left-32 w-12 h-12 text-teal-400 medicine-bottle-shake opacity-20"> <svg fill="currentColor" viewBox="0 0 24 24"> <path d="M6,2V8H4V10H5L6,21H18L19,10H20V8H18V2H6M8,4H16V8H8V4M7.2,10H16.8L16,19H8L7.2,10Z"/> </svg> </div> <!-- Header --> <div class="text-center mb-16 fade-in-up"> <div class="inline-block mb-6"> <div class="w-24 h-24 mx-auto mb-6 healing-pulse"> <svg class="w-full h-full text-blue-600" fill="currentColor" viewBox="0 0 24 24"> <path d="M12,2L13.09,8.26L22,9L13.09,9.74L12,16L10.91,9.74L2,9L10.91,8.26L12,2M6.5,12.5L7.5,16.5L11.5,17.5L7.5,18.5L6.5,22.5L5.5,18.5L1.5,17.5L5.5,16.5L6.5,12.5M17.5,12.5L18.5,16.5L22.5,17.5L18.5,18.5L17.5,22.5L16.5,18.5L12.5,17.5L16.5,16.5L17.5,12.5Z"/> </svg> </div> </div> <h2 class="text-6xl md:text-7xl font-bold medical-text mb-6 source-sans-font">Our Mission</h2> <div class="flex justify-center mb-8"> <div class="w-8 h-1 bg-blue-500 rounded-full mx-1"></div> <div class="w-16 h-1 bg-cyan-500 rounded-full mx-1"></div> <div class="w-8 h-1 bg-teal-500 rounded-full mx-1"></div> </div> <p class="text-2xl text-gray-700 max-w-4xl mx-auto leading-relaxed font-medium"> ? Providing compassionate, world-class healthcare with cutting-edge medical technology and patient-centered care for our community ? </p> </div> <!-- Main Mission Statement --> <div class="sterile-texture rounded-3xl shadow-2xl p-8 md:p-12 mb-16 fade-in-up healthcare-glow medical-grid"> <div class="grid lg:grid-cols-2 gap-12 items-center"> <div class="fade-in-left"> <h3 class="text-4xl font-bold text-gray-800 mb-6 source-sans-font">Excellence in Healthcare! ?</h3> <p class="text-xl text-gray-600 mb-6 leading-relaxed"> At our medical center, we are committed to delivering exceptional healthcare services with compassion, integrity, and clinical excellence. Our mission is to improve the health and well-being of our community through innovative treatments, advanced medical technology, and personalized patient care. Every patient receives our full attention, respect, and the highest quality medical care available. </p> <div class="space-y-4"> <div class="flex items-center space-x-4"> <div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center"> <span class="text-2xl">?</span> </div> <span class="text-gray-700 font-semibold text-lg">Expert Medical Care</span> </div> <div class="flex items-center space-x-4"> <div class="w-12 h-12 bg-cyan-100 rounded-full flex items-center justify-center"> <span class="text-2xl">❤️</span> </div> <span class="text-gray-700 font-semibold text-lg">Compassionate Service</span> </div> <div class="flex items-center space-x-4"> <div class="w-12 h-12 bg-teal-100 rounded-full flex items-center justify-center"> <span class="text-2xl">?</span> </div> <span class="text-gray-700 font-semibold text-lg">Advanced Technology</span> </div> </div> </div> <div class="fade-in-right"> <div class="relative"> <div class="patient-care"> <svg class="w-full h-64 text-blue-500" fill="currentColor" viewBox="0 0 24 24"> <path d="M12,2L13.09,8.26L22,9L13.09,9.74L12,16L10.91,9.74L2,9L10.91,8.26L12,2M6.5,12.5L7.5,16.5L11.5,17.5L7.5,18.5L6.5,22.5L5.5,18.5L1.5,17.5L5.5,16.5L6.5,12.5M17.5,12.5L18.5,16.5L22.5,17.5L18.5,18.5L17.5,22.5L16.5,18.5L12.5,17.5L16.5,16.5L17.5,12.5Z" opacity="0.8"/> <circle cx="12" cy="9" r="2" fill="#0ea5e9" opacity="0.9"/> <circle cx="8" cy="7" r="1.5" fill="#06b6d4" opacity="0.7"/> <circle cx="16" cy="8" r="1.5" fill="#10b981" opacity="0.8"/> <circle cx="12" cy="13" r="2" fill="#059669" opacity="0.6"/> <rect x="10" y="11" width="4" height="1" fill="#0ea5e9" opacity="0.9"/> </svg> </div> <div class="absolute inset-0 bg-gradient-to-r from-blue-300 via-cyan-300 to-teal-300 rounded-full blur-3xl opacity-30"></div> </div> </div> </div> </div> <!-- Services Grid --> <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6 mb-16"> <!-- Emergency Care --> <div class="medical-gradient rounded-2xl p-6 shadow-lg medical-hover fade-in-up" style="animation-delay: 0.2s;"> <div class="w-16 h-16 bg-red-200 rounded-2xl flex items-center justify-center mb-6 icon-medical"> <span class="text-3xl">?</span> </div> <h4 class="text-2xl font-bold text-gray-800 mb-4 source-sans-font">Emergency Care</h4> <p class="text-gray-600 leading-relaxed"> 24/7 emergency services with rapid response teams, advanced life support, and immediate critical care. </p> </div> <!-- Specialized Surgery --> <div class="medical-gradient rounded-2xl p-6 shadow-lg medical-hover fade-in-up" style="animation-delay: 0.4s;"> <div class="w-16 h-16 bg-blue-200 rounded-2xl flex items-center justify-center mb-6 icon-medical"> <span class="text-3xl">⚕️</span> </div> <h4 class="text-2xl font-bold text-gray-800 mb-4 source-sans-font">Specialized Surgery</h4> <p class="text-gray-600 leading-relaxed"> State-of-the-art surgical suites with minimally invasive procedures and expert surgical teams. </p> </div> <!-- Diagnostic Services --> <div class="medical-gradient rounded-2xl p-6 shadow-lg medical-hover fade-in-up" style="animation-delay: 0.6s;"> <div class="w-16 h-16 bg-cyan-200 rounded-2xl flex items-center justify-center mb-6 icon-medical"> <span class="text-3xl">?</span> </div> <h4 class="text-2xl font-bold text-gray-800 mb-4 source-sans-font">Diagnostic Services</h4> <p class="text-gray-600 leading-relaxed"> Advanced imaging, laboratory services, and diagnostic testing with rapid, accurate results. </p> </div> <!-- Patient Care --> <div class="medical-gradient rounded-2xl p-6 shadow-lg medical-hover fade-in-up" style="animation-delay: 0.8s;"> <div class="w-16 h-16 bg-teal-200 rounded-2xl flex items-center justify-center mb-6 icon-medical"> <span class="text-3xl">?</span> </div> <h4 class="text-2xl font-bold text-gray-800 mb-4 source-sans-font">Patient Care</h4> <p class="text-gray-600 leading-relaxed"> Comprehensive patient support services, family care coordination, and personalized treatment plans. </p> </div> </div> <!-- Statistics Section --> <div class="bg-gradient-to-r from-blue-600 via-cyan-600 to-teal-600 rounded-3xl p-8 md:p-12 text-white scale-in mb-16"> <div class="text-center mb-10"> <h3 class="text-4xl font-bold mb-4 source-sans-font">Healthcare Excellence! ?</h3> <p class="text-xl text-blue-100">Committed to serving our community with outstanding medical care</p> </div> <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6 text-center"> <div class="fade-in-up" style="animation-delay: 0.2s;"> <div class="text-4xl mb-2">?⚕️</div> <div class="text-4xl md:text-5xl font-bold mb-2" data-count="200">0</div> <div class="text-blue-100 text-lg">Medical Professionals</div> </div> <div class="fade-in-up" style="animation-delay: 0.4s;"> <div class="text-4xl mb-2">?</div> <div class="text-4xl md:text-5xl font-bold mb-2" data-count="25000">0</div> <div class="text-blue-100 text-lg">Patients Served Annually</div> </div> <div class="fade-in-up" style="animation-delay: 0.6s;"> <div class="text-4xl mb-2">⚕️</div> <div class="text-4xl md:text-5xl font-bold mb-2" data-count="20">0</div> <div class="text-blue-100 text-lg">Medical Specialties</div> </div> <div class="fade-in-up" style="animation-delay: 0.8s;"> <div class="text-4xl mb-2">❤️</div> <div class="text-4xl md:text-5xl font-bold mb-2" data-count="98">0</div> <div class="text-blue-100 text-lg">% Patient Satisfaction</div> </div> </div> </div> <!-- Call to Action --> <div class="text-center fade-in-up"> <div class="bg-gradient-to-r from-gray-800 via-slate-700 to-gray-900 rounded-3xl p-10 shadow-2xl"> <h3 class="text-4xl font-bold text-white mb-6 source-sans-font">Your Health, Our Priority! ?</h3> <p class="text-xl text-gray-300 mb-8 max-w-2xl mx-auto"> Experience exceptional healthcare with our dedicated medical team. From routine check-ups to specialized treatments, we're here to support your health journey every step of the way. </p> <div class="flex flex-col sm:flex-row gap-4 justify-center"> <button class="bg-gradient-to-r from-blue-500 to-cyan-500 text-white font-bold py-4 px-8 rounded-full text-lg shadow-lg hover:shadow-xl transform hover:scale-105 transition-all duration-300 source-sans-font"> Schedule Appointment ? </button> <button class="bg-transparent border-3 border-blue-400 text-blue-400 hover:bg-blue-400 hover:text-white font-bold py-4 px-8 rounded-full text-lg transition-all duration-300 source-sans-font"> Emergency Services ? </button> </div> </div> </div> </section> </body> </html>
CSS
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Source+Sans+Pro:wght@300;400;500;600;700&display=swap'); body { font-family: 'Inter', sans-serif; } .source-sans-font { font-family: 'Source Sans Pro', sans-serif; } .fade-in-up { opacity: 0; transform: translateY(30px); transition: all 1.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .fade-in-up.animate { opacity: 1; transform: translateY(0); } .fade-in-left { opacity: 0; transform: translateX(-30px); transition: all 1.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .fade-in-left.animate { opacity: 1; transform: translateX(0); } .fade-in-right { opacity: 0; transform: translateX(30px); transition: all 1.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .fade-in-right.animate { opacity: 1; transform: translateX(0); } .scale-in { opacity: 0; transform: scale(0.85); transition: all 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .scale-in.animate { opacity: 1; transform: scale(1); } .heartbeat-pulse { animation: heartbeatPulse 2s ease-in-out infinite; } @keyframes heartbeatPulse { 0%, 100% { transform: scale(1); } 10% { transform: scale(1.1); } 20% { transform: scale(1); } 30% { transform: scale(1.15); } 40% { transform: scale(1); } } .medical-cross-float { animation: medicalCrossFloat 4s ease-in-out infinite; } @keyframes medicalCrossFloat { 0%, 100% { transform: translateY(0px) rotate(0deg); } 50% { transform: translateY(-12px) rotate(2deg); } } .stethoscope-sway { animation: stethoscopeSway 5s ease-in-out infinite; } @keyframes stethoscopeSway { 0%, 100% { transform: rotate(0deg) translateY(0px); } 25% { transform: rotate(3deg) translateY(-5px); } 50% { transform: rotate(0deg) translateY(-8px); } 75% { transform: rotate(-3deg) translateY(-3px); } } .medical-text { background: linear-gradient(135deg, #0ea5e9, #06b6d4, #10b981, #059669); background-size: 300% 300%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: medicalFlow 4s ease-in-out infinite; } @keyframes medicalFlow { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } .healthcare-glow { animation: healthcareGlow 4s ease-in-out infinite; } @keyframes healthcareGlow { 0%, 100% { box-shadow: 0 0 25px rgba(14, 165, 233, 0.3), 0 0 50px rgba(16, 185, 129, 0.2); } 50% { box-shadow: 0 0 35px rgba(14, 165, 233, 0.5), 0 0 70px rgba(16, 185, 129, 0.3); } } .medical-hover { transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .medical-hover:hover { transform: translateY(-8px) scale(1.02); box-shadow: 0 15px 35px rgba(14, 165, 233, 0.15); } .icon-medical { transition: all 0.4s ease; } .icon-medical:hover { transform: scale(1.15) rotate(5deg); } .healthcare-pattern { background-image: radial-gradient(circle at 25% 25%, rgba(14, 165, 233, 0.1) 0%, transparent 50%), radial-gradient(circle at 75% 75%, rgba(16, 185, 129, 0.1) 0%, transparent 50%), radial-gradient(circle at 50% 50%, rgba(6, 182, 212, 0.05) 0%, transparent 50%); } .ambulance-glide { animation: ambulanceGlide 6s ease-in-out infinite; } @keyframes ambulanceGlide { 0%, 100% { transform: translateX(0px) translateY(0px); } 25% { transform: translateX(20px) translateY(-5px); } 50% { transform: translateX(35px) translateY(-8px); } 75% { transform: translateX(15px) translateY(-3px); } } .healing-pulse { animation: healingPulse 3s ease-in-out infinite; } @keyframes healingPulse { 0%, 100% { transform: scale(1); opacity: 0.9; } 50% { transform: scale(1.05); opacity: 1; } } .medical-gradient { background: linear-gradient(135deg, rgba(219, 234, 254, 0.9), rgba(209, 250, 229, 0.7)); backdrop-filter: blur(10px); } .ecg-wave { animation: ecgWave 3s linear infinite; } @keyframes ecgWave { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } .medicine-bottle-shake { animation: medicineBottleShake 4s ease-in-out infinite; } @keyframes medicineBottleShake { 0%, 100% { transform: rotate(0deg) scale(1); } 25% { transform: rotate(2deg) scale(1.02); } 50% { transform: rotate(0deg) scale(1.05); } 75% { transform: rotate(-2deg) scale(1.02); } } .patient-care { animation: patientCare 5s ease-in-out infinite; } @keyframes patientCare { 0%, 100% { transform: translateY(0px) scale(1); } 50% { transform: translateY(-10px) scale(1.03); } } .healing-wave { animation: healingWave 8s ease-in-out infinite; } @keyframes healingWave { 0%, 100% { transform: translateY(0px) rotate(0deg); opacity: 0.7; } 25% { transform: translateY(-15px) rotate(2deg); opacity: 1; } 50% { transform: translateY(-20px) rotate(0deg); opacity: 0.9; } 75% { transform: translateY(-10px) rotate(-2deg); opacity: 0.8; } } .medical-grid { background-image: linear-gradient(rgba(14, 165, 233, 0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(14, 165, 233, 0.08) 1px, transparent 1px); background-size: 30px 30px; } .sterile-texture { background: linear-gradient(45deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 252, 0.9) 25%, rgba(255, 255, 255, 0.95) 50%, rgba(241, 245, 249, 0.9) 75%, rgba(255, 255, 255, 0.95) 100%); } .vital-signs { animation: vitalSigns 2.5s ease-in-out infinite; } @keyframes vitalSigns { 0%, 100% { opacity: 0.8; transform: scaleY(1); } 50% { opacity: 1; transform: scaleY(1.1); } }
JavaScript
// Intersection Observer for animations const observerOptions = { threshold: 0.1, rootMargin: '0px 0px -50px 0px' }; const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { entry.target.classList.add('animate'); } }); }, observerOptions); // Observe all animated elements document.querySelectorAll('.fade-in-up, .fade-in-left, .fade-in-right, .scale-in').forEach(el => { observer.observe(el); }); // Counter animation for statistics function animateCounter(element, target, duration = 2500) { let start = 0; const increment = target / (duration / 16); const timer = setInterval(() => { start += increment; if (start >= target) { element.textContent = target; clearInterval(timer); } else { element.textContent = Math.floor(start); } }, 16); } // Animate statistics when they come into view const statsObserver = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { const statElements = entry.target.querySelectorAll('[data-count]'); statElements.forEach((el, index) => { setTimeout(() => { const target = parseInt(el.getAttribute('data-count')); animateCounter(el, target); }, index * 200); }); statsObserver.unobserve(entry.target); } }); }, observerOptions); const statsSection = document.querySelector('.bg-gradient-to-r.from-blue-600'); if (statsSection) { statsObserver.observe(statsSection); } // Create floating medical elements effect function createMedicalEffect() { const medicalItems = ['?', '❤️', '?', '?', '⚕️', '?', '?', '?']; const item = document.createElement('div'); item.textContent = medicalItems[Math.floor(Math.random() * medicalItems.length)]; item.style.position = 'fixed'; item.style.left = Math.random() * window.innerWidth + 'px'; item.style.top = '-50px'; item.style.fontSize = '18px'; item.style.pointerEvents = 'none'; item.style.zIndex = '1000'; item.style.transition = 'all 6s ease-out'; item.style.opacity = '0.6'; document.body.appendChild(item); setTimeout(() => { item.style.top = window.innerHeight + 'px'; item.style.transform = `rotate(${Math.random() * 360}deg) translateX(${(Math.random() - 0.5) * 100}px)`; }, 100); setTimeout(() => { item.remove(); }, 6000); } // Create medical effects periodically setInterval(createMedicalEffect, 3000); // Enhanced hover effects for medical cards document.querySelectorAll('.medical-hover').forEach(card => { card.addEventListener('mouseenter', function() { this.style.transform = 'translateY(-8px) scale(1.02)'; this.style.boxShadow = '0 15px 35px rgba(14, 165, 233, 0.2)'; }); card.addEventListener('mouseleave', function() { this.style.transform = 'translateY(0) scale(1)'; this.style.boxShadow = ''; }); }); // Add heartbeat effect on scroll window.addEventListener('scroll', () => { const scrolled = window.pageYOffset; const heartElements = document.querySelectorAll('.heartbeat-pulse'); heartElements.forEach((element, index) => { const speed = 0.1 + (index * 0.05); const beat = Math.sin(scrolled * 0.01 + index) * 2; element.style.transform = `translateY(${scrolled * speed}px) scale(${1 + beat * 0.02})`; }); }); // Interactive medical effect on click document.querySelectorAll('.icon-medical').forEach(icon => { icon.addEventListener('click', function() { this.style.transform = 'scale(1.3) rotate(10deg)'; this.style.transition = 'all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55)'; // Create burst of medical items for (let i = 0; i < 4; i++) { setTimeout(() => { const rect = this.getBoundingClientRect(); const medicalBurst = document.createElement('div'); const medicalItems = ['✨', '?', '?', '⚕️']; medicalBurst.textContent = medicalItems[i]; medicalBurst.style.position = 'fixed'; medicalBurst.style.left = rect.left + rect.width/2 + 'px'; medicalBurst.style.top = rect.top + rect.height/2 + 'px'; medicalBurst.style.fontSize = '16px'; medicalBurst.style.pointerEvents = 'none'; medicalBurst.style.zIndex = '1001'; medicalBurst.style.transition = 'all 1s ease-out'; document.body.appendChild(medicalBurst); setTimeout(() => { medicalBurst.style.transform = `translate(${(Math.random() - 0.5) * 100}px, ${-50 - Math.random() * 50}px) rotate(${Math.random() * 360}deg)`; medicalBurst.style.opacity = '0'; }, 50); setTimeout(() => { medicalBurst.remove(); }, 1000); }, i * 80); } setTimeout(() => { this.style.transform = 'scale(1) rotate(0deg)'; this.style.transition = 'all 0.4s ease'; }, 300); }); }); // Stethoscope sway effect on mouse movement document.addEventListener('mousemove', (e) => { const stethoscopes = document.querySelectorAll('.stethoscope-sway'); const mouseX = e.clientX / window.innerWidth; const mouseY = e.clientY / window.innerHeight; stethoscopes.forEach((stethoscope, index) => { const intensity = 0.2 + (index * 0.1); const swayX = (mouseX - 0.5) * intensity * 5; const swayY = (mouseY - 0.5) * intensity * 3; stethoscope.style.transform += ` translate(${swayX}px, ${swayY}px)`; }); }); // ECG wave effect function createECGWave() { const wave = document.createElement('div'); wave.style.position = 'fixed'; wave.style.bottom = '20px'; wave.style.left = '-100px'; wave.style.width = '100px'; wave.style.height = '2px'; wave.style.backgroundColor = '#0ea5e9'; wave.style.opacity = '0.7'; wave.style.pointerEvents = 'none'; wave.style.zIndex = '999'; wave.classList.add('ecg-wave'); document.body.appendChild(wave); setTimeout(() => { wave.remove(); }, 3000); } // Create ECG waves periodically setInterval(createECGWave, 5000); // Vital signs monitor effect function createVitalSigns() { const vitals = document.createElement('div'); vitals.textContent = '?'; vitals.style.position = 'fixed'; vitals.style.top = Math.random() * (window.innerHeight * 0.3) + 'px'; vitals.style.right = '20px'; vitals.style.fontSize = '14px'; vitals.style.pointerEvents = 'none'; vitals.style.zIndex = '999'; vitals.style.transition = 'all 1.5s ease-out'; vitals.classList.add('vital-signs'); document.body.appendChild(vitals); setTimeout(() => { vitals.style.opacity = '0'; vitals.style.transform = 'translateX(50px)'; }, 100); setTimeout(() => { vitals.remove(); }, 1500); } // Create vital signs periodically setInterval(createVitalSigns, 3000);
Output Preview
Desktop
Mobile
Fullscreen