Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>InVitra - Your Fertility Journey Guide</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); | |
| } | |
| .ivf-timeline { | |
| position: relative; | |
| padding-left: 3rem; | |
| } | |
| .ivf-timeline::before { | |
| content: ''; | |
| position: absolute; | |
| left: 1.5rem; | |
| top: 0; | |
| bottom: 0; | |
| width: 2px; | |
| background: #8b5cf6; | |
| } | |
| .timeline-item { | |
| position: relative; | |
| margin-bottom: 2rem; | |
| } | |
| .timeline-item::before { | |
| content: ''; | |
| position: absolute; | |
| left: -3.5rem; | |
| top: 0.5rem; | |
| width: 1.5rem; | |
| height: 1.5rem; | |
| border-radius: 50%; | |
| background: #8b5cf6; | |
| border: 3px solid white; | |
| } | |
| .chat-bubble { | |
| border-radius: 1.5rem; | |
| max-width: 80%; | |
| } | |
| .user-bubble { | |
| background-color: #8b5cf6; | |
| color: white; | |
| border-bottom-right-radius: 0.5rem; | |
| } | |
| .bot-bubble { | |
| background-color: #f3f4f6; | |
| color: #1f2937; | |
| border-bottom-left-radius: 0.5rem; | |
| } | |
| .fade-in { | |
| animation: fadeIn 0.5s ease-in; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(10px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| </style> | |
| </head> | |
| <body class="gradient-bg min-h-screen font-sans"> | |
| <!-- Header --> | |
| <header class="bg-purple-600 text-white shadow-lg"> | |
| <div class="container mx-auto px-4 py-6"> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex items-center space-x-3"> | |
| <i class="fas fa-baby text-3xl"></i> | |
| <h1 class="text-2xl font-bold">InVitra</h1> | |
| </div> | |
| <nav> | |
| <ul class="flex space-x-6"> | |
| <li><a href="#resources" class="hover:text-purple-200 transition">Resources</a></li> | |
| <li><a href="#community" class="hover:text-purple-200 transition">Community</a></li> | |
| <li><a href="#specialists" class="hover:text-purple-200 transition">Specialists</a></li> | |
| </ul> | |
| </nav> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Hero Section --> | |
| <section class="py-16 px-4"> | |
| <div class="container mx-auto flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-10 md:mb-0"> | |
| <h2 class="text-4xl font-bold text-purple-800 mb-4">Your Personalized IVF Journey Guide</h2> | |
| <p class="text-lg text-gray-700 mb-6">Empowering women with knowledge, support, and personalized advice throughout every step of the IVF process.</p> | |
| <div class="flex space-x-4"> | |
| <button class="bg-purple-600 hover:bg-purple-700 text-white px-6 py-3 rounded-full font-medium transition shadow-lg"> | |
| Get Started | |
| </button> | |
| <button class="border-2 border-purple-600 text-purple-600 hover:bg-purple-50 px-6 py-3 rounded-full font-medium transition"> | |
| Learn More | |
| </button> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2"> | |
| <img src="https://images.unsplash.com/photo-1581595219315-a187dd40c322?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" | |
| alt="Supportive IVF journey" | |
| class="rounded-xl shadow-xl w-full h-auto max-h-96 object-cover"> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Main Content --> | |
| <main class="container mx-auto px-4 py-12"> | |
| <!-- IVF Process Timeline --> | |
| <section class="mb-20"> | |
| <h2 class="text-3xl font-bold text-center text-purple-800 mb-12">Understanding the IVF Process</h2> | |
| <div class="ivf-timeline max-w-3xl mx-auto"> | |
| <div class="timeline-item"> | |
| <h3 class="text-xl font-semibold text-purple-700 mb-2">1. Initial Consultation</h3> | |
| <p class="text-gray-700">Meet with a fertility specialist to discuss your medical history, perform tests, and create a personalized treatment plan.</p> | |
| </div> | |
| <div class="timeline-item"> | |
| <h3 class="text-xl font-semibold text-purple-700 mb-2">2. Ovarian Stimulation</h3> | |
| <p class="text-gray-700">You'll take fertility medications for 8-14 days to stimulate your ovaries to produce multiple eggs.</p> | |
| </div> | |
| <div class="timeline-item"> | |
| <h3 class="text-xl font-semibold text-purple-700 mb-2">3. Egg Retrieval</h3> | |
| <p class="text-gray-700">A minor surgical procedure where eggs are collected from your ovaries using ultrasound guidance.</p> | |
| </div> | |
| <div class="timeline-item"> | |
| <h3 class="text-xl font-semibold text-purple-700 mb-2">4. Fertilization</h3> | |
| <p class="text-gray-700">Eggs are combined with sperm in the lab. Fertilization may occur through conventional IVF or ICSI.</p> | |
| </div> | |
| <div class="timeline-item"> | |
| <h3 class="text-xl font-semibold text-purple-700 mb-2">5. Embryo Development</h3> | |
| <p class="text-gray-700">Fertilized eggs (embryos) are monitored for 3-5 days as they develop in the laboratory.</p> | |
| </div> | |
| <div class="timeline-item"> | |
| <h3 class="text-xl font-semibold text-purple-700 mb-2">6. Embryo Transfer</h3> | |
| <p class="text-gray-700">One or more healthy embryos are transferred to your uterus using a thin catheter.</p> | |
| </div> | |
| <div class="timeline-item"> | |
| <h3 class="text-xl font-semibold text-purple-700 mb-2">7. Pregnancy Test</h3> | |
| <p class="text-gray-700">About 9-14 days after embryo transfer, you'll have a blood test to check for pregnancy.</p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Interactive Advice Chat --> | |
| <section class="bg-white rounded-xl shadow-lg p-6 mb-20"> | |
| <h2 class="text-3xl font-bold text-center text-purple-800 mb-8">Ask Our IVF Advisor</h2> | |
| <div class="max-w-3xl mx-auto"> | |
| <div id="chat-container" class="h-96 overflow-y-auto mb-6 p-4 bg-gray-50 rounded-lg flex flex-col space-y-4"> | |
| <div class="bot-bubble chat-bubble p-4 self-start max-w-xs md:max-w-md fade-in"> | |
| <p>Hello! I'm here to help answer your questions about the IVF process. What would you like to know today?</p> | |
| </div> | |
| </div> | |
| <div class="flex"> | |
| <input type="text" id="user-input" placeholder="Ask about medications, side effects, success rates..." | |
| class="flex-grow px-4 py-3 border-2 border-purple-300 rounded-l-full focus:outline-none focus:border-purple-500"> | |
| <button id="send-btn" class="bg-purple-600 hover:bg-purple-700 text-white px-6 py-3 rounded-r-full transition"> | |
| <i class="fas fa-paper-plane"></i> | |
| </button> | |
| </div> | |
| <div class="mt-4 flex justify-center space-x-4"> | |
| <button class="quick-question bg-purple-100 hover:bg-purple-200 text-purple-700 px-4 py-2 rounded-full text-sm transition"> | |
| Medication side effects? | |
| </button> | |
| <button class="quick-question bg-purple-100 hover:bg-purple-200 text-purple-700 px-4 py-2 rounded-full text-sm transition"> | |
| Success rates by age? | |
| </button> | |
| <button class="quick-question bg-purple-100 hover:bg-purple-200 text-purple-700 px-4 py-2 rounded-full text-sm transition"> | |
| Emotional support tips? | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Resources Section --> | |
| <section id="resources" class="mb-20"> | |
| <h2 class="text-3xl font-bold text-center text-purple-800 mb-12">Helpful Resources</h2> | |
| <div class="grid md:grid-cols-3 gap-8"> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition"> | |
| <div class="h-48 bg-purple-100 flex items-center justify-center"> | |
| <i class="fas fa-book-medical text-6xl text-purple-600"></i> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-semibold text-purple-700 mb-3">IVF Medications Guide</h3> | |
| <p class="text-gray-600 mb-4">Comprehensive information about fertility drugs, their purposes, and potential side effects.</p> | |
| <a href="#" class="text-purple-600 font-medium hover:text-purple-800">Read More →</a> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition"> | |
| <div class="h-48 bg-purple-100 flex items-center justify-center"> | |
| <i class="fas fa-utensils text-6xl text-purple-600"></i> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-semibold text-purple-700 mb-3">Nutrition & IVF</h3> | |
| <p class="text-gray-600 mb-4">Dietary recommendations to support your fertility and IVF treatment success.</p> | |
| <a href="#" class="text-purple-600 font-medium hover:text-purple-800">Read More →</a> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition"> | |
| <div class="h-48 bg-purple-100 flex items-center justify-center"> | |
| <i class="fas fa-heart text-6xl text-purple-600"></i> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-semibold text-purple-700 mb-3">Emotional Wellness</h3> | |
| <p class="text-gray-600 mb-4">Strategies for managing stress and emotional challenges during your IVF journey.</p> | |
| <a href="#" class="text-purple-600 font-medium hover:text-purple-800">Read More →</a> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Community Section --> | |
| <section id="community" class="bg-purple-50 rounded-xl p-8 mb-20"> | |
| <div class="max-w-4xl mx-auto"> | |
| <h2 class="text-3xl font-bold text-center text-purple-800 mb-8">Join Our Supportive Community</h2> | |
| <div class="flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-8 md:mb-0"> | |
| <img src="https://images.unsplash.com/photo-1527525443983-6e60c75fff46?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=760&q=80" | |
| alt="Supportive community" | |
| class="rounded-lg shadow-md w-full"> | |
| </div> | |
| <div class="md:w-1/2 md:pl-8"> | |
| <h3 class="text-xl font-semibold text-purple-700 mb-4">You're Not Alone</h3> | |
| <p class="text-gray-700 mb-6">Connect with other women going through similar experiences. Share stories, ask questions, and find emotional support from those who truly understand.</p> | |
| <div class="space-y-4"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-comments text-purple-600 mr-4 text-xl"></i> | |
| <span>Private discussion forums</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <i class="fas fa-calendar-check text-purple-600 mr-4 text-xl"></i> | |
| <span>Live Q&A with specialists</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <i class="fas fa-hands-helping text-purple-600 mr-4 text-xl"></i> | |
| <span>Peer support groups</span> | |
| </div> | |
| </div> | |
| <button class="mt-6 bg-purple-600 hover:bg-purple-700 text-white px-6 py-3 rounded-full font-medium transition shadow"> | |
| Join Community | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <!-- Footer --> | |
| <footer class="bg-purple-900 text-white py-12"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid md:grid-cols-4 gap-8"> | |
| <div> | |
| <h3 class="text-xl font-bold mb-4">InVitra</h3> | |
| <p class="text-purple-200">Empowering women with knowledge and support throughout their fertility journey.</p> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold mb-4">Quick Links</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-purple-200 hover:text-white transition">Home</a></li> | |
| <li><a href="#" class="text-purple-200 hover:text-white transition">About Us</a></li> | |
| <li><a href="#" class="text-purple-200 hover:text-white transition">Resources</a></li> | |
| <li><a href="#" class="text-purple-200 hover:text-white transition">Community</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold mb-4">Support</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-purple-200 hover:text-white transition">FAQ</a></li> | |
| <li><a href="#" class="text-purple-200 hover:text-white transition">Privacy Policy</a></li> | |
| <li><a href="#" class="text-purple-200 hover:text-white transition">Terms of Service</a></li> | |
| <li><a href="#" class="text-purple-200 hover:text-white transition">Contact Us</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold mb-4">Connect With Us</h4> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="text-purple-200 hover:text-white text-2xl transition"><i class="fab fa-facebook"></i></a> | |
| <a href="#" class="text-purple-200 hover:text-white text-2xl transition"><i class="fab fa-instagram"></i></a> | |
| <a href="#" class="text-purple-200 hover:text-white text-2xl transition"><i class="fab fa-twitter"></i></a> | |
| <a href="#" class="text-purple-200 hover:text-white text-2xl transition"><i class="fab fa-pinterest"></i></a> | |
| </div> | |
| <p class="mt-4 text-purple-200">Subscribe to our newsletter</p> | |
| <div class="mt-2 flex"> | |
| <input type="email" placeholder="Your email" class="px-3 py-2 text-gray-800 rounded-l focus:outline-none w-full"> | |
| <button class="bg-purple-600 hover:bg-purple-700 px-4 rounded-r"><i class="fas fa-paper-plane"></i></button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="border-t border-purple-800 mt-8 pt-8 text-center text-purple-400"> | |
| <p>© 2023 InVitra. All rights reserved.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // IVF Knowledge Base | |
| const ivfKnowledge = { | |
| "medication side effects": { | |
| response: "Common IVF medication side effects may include:<br><br>" + | |
| "• Headaches<br>" + | |
| "• Mood swings<br>" + | |
| "• Bloating<br>" + | |
| "• Mild abdominal pain<br>" + | |
| "• Breast tenderness<br>" + | |
| "• Hot flashes<br><br>" + | |
| "Severe side effects like OHSS (Ovarian Hyperstimulation Syndrome) are rare but require immediate medical attention if you experience severe pain, nausea/vomiting, or sudden weight gain." | |
| }, | |
| "success rates by age": { | |
| response: "IVF success rates vary significantly by age:<br><br>" + | |
| "• Under 35: ~40-50% per cycle<br>" + | |
| "• 35-37: ~35-40% per cycle<br>" + | |
| "• 38-40: ~25-30% per cycle<br>" + | |
| "• 41-42: ~15-20% per cycle<br>" + | |
| "• Over 42: ~5-10% per cycle<br><br>" + | |
| "These are general statistics - your doctor can provide more personalized estimates based on your specific situation." | |
| }, | |
| "emotional support tips": { | |
| response: "Coping with IVF emotionally:<br><br>" + | |
| "1. Join a support group (like ours!)<br>" + | |
| "2. Practice mindfulness or meditation<br>" + | |
| "3. Communicate openly with your partner<br>" + | |
| "4. Set realistic expectations<br>" + | |
| "5. Take breaks when needed<br>" + | |
| "6. Consider counseling with a therapist specializing in fertility<br>" + | |
| "7. Maintain other interests outside of IVF<br><br>" + | |
| "Remember it's normal to feel a range of emotions during this process." | |
| }, | |
| "cost": { | |
| response: "IVF costs vary widely but typically range from $12,000-$20,000 per cycle in the US. This usually includes:<br><br>" + | |
| "• Medications ($3,000-$6,000)<br>" + | |
| "• Monitoring appointments<br>" + | |
| "• Egg retrieval procedure<br>" + | |
| "• Laboratory fees<br>" + | |
| "• Embryo transfer<br><br>" + | |
| "Additional costs may apply for genetic testing, frozen embryo transfers, or donor materials. Some insurance plans offer partial coverage." | |
| }, | |
| "timeline": { | |
| response: "A typical IVF cycle takes about 6-8 weeks from start to pregnancy test:<br><br>" + | |
| "1. Ovarian stimulation: 8-14 days<br>" + | |
| "2. Egg retrieval: 1 day procedure<br>" + | |
| "3. Fertilization & embryo development: 3-5 days<br>" + | |
| "4. Embryo transfer: 1 day procedure<br>" + | |
| "5. Wait for pregnancy test: 9-14 days<br><br>" + | |
| "Some protocols may vary this timeline, especially if using birth control pills first or freezing embryos for future transfer." | |
| }, | |
| "preparation": { | |
| response: "To prepare for IVF:<br><br>" + | |
| "• Stop smoking and limit alcohol<br>" + | |
| "• Maintain a healthy BMI<br>" + | |
| "• Take prenatal vitamins (especially folic acid)<br>" + | |
| "• Reduce caffeine intake<br>" + | |
| "• Manage stress through relaxation techniques<br>" + | |
| "• Review medications with your doctor<br>" + | |
| "• Consider acupuncture (some find it helpful)<br><br>" + | |
| "Your clinic will provide specific instructions for your protocol." | |
| }, | |
| "default": { | |
| response: "I'm here to help with your IVF questions. Could you please be more specific about what information you're looking for? For example, you could ask about:<br><br>" + | |
| "• Medication side effects<br>" + | |
| "• Success rates by age<br>" + | |
| "• Emotional support tips<br>" + | |
| "• IVF costs<br>" + | |
| "• The IVF timeline<br>" + | |
| "• How to prepare for IVF" | |
| } | |
| }; | |
| // Chat functionality | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const chatContainer = document.getElementById('chat-container'); | |
| const userInput = document.getElementById('user-input'); | |
| const sendBtn = document.getElementById('send-btn'); | |
| const quickQuestions = document.querySelectorAll('.quick-question'); | |
| function addMessage(message, isUser) { | |
| const messageDiv = document.createElement('div'); | |
| messageDiv.className = `${isUser ? 'user-bubble' : 'bot-bubble'} chat-bubble p-4 ${isUser ? 'self-end' : 'self-start'} max-w-xs md:max-w-md fade-in`; | |
| messageDiv.innerHTML = `<p>${message}</p>`; | |
| chatContainer.appendChild(messageDiv); | |
| chatContainer.scrollTop = chatContainer.scrollHeight; | |
| } | |
| function getResponse(question) { | |
| question = question.toLowerCase(); | |
| for (const key in ivfKnowledge) { | |
| if (question.includes(key)) { | |
| return ivfKnowledge[key].response; | |
| } | |
| } | |
| return ivfKnowledge.default.response; | |
| } | |
| function handleUserInput() { | |
| const question = userInput.value.trim(); | |
| if (question) { | |
| addMessage(question, true); | |
| userInput.value = ''; | |
| // Simulate typing indicator | |
| const typingIndicator = document.createElement('div'); | |
| typingIndicator.className = 'bot-bubble chat-bubble p-4 self-start max-w-xs md:max-w-md'; | |
| typingIndicator.innerHTML = '<div class="flex space-x-2"><div class="w-2 h-2 rounded-full bg-gray-400 animate-bounce"></div><div class="w-2 h-2 rounded-full bg-gray-400 animate-bounce" style="animation-delay: 0.2s"></div><div class="w-2 h-2 rounded-full bg-gray-400 animate-bounce" style="animation-delay: 0.4s"></div></div>'; | |
| chatContainer.appendChild(typingIndicator); | |
| chatContainer.scrollTop = chatContainer.scrollHeight; | |
| // Remove typing indicator after delay and show response | |
| setTimeout(() => { | |
| chatContainer.removeChild(typingIndicator); | |
| const response = getResponse(question); | |
| addMessage(response, false); | |
| }, 1000 + Math.random() * 1000); | |
| } | |
| } | |
| // Event listeners | |
| sendBtn.addEventListener('click', handleUserInput); | |
| userInput.addEventListener('keypress', function(e) { | |
| if (e.key === 'Enter') { | |
| handleUserInput(); | |
| } | |
| }); | |
| quickQuestions.forEach(button => { | |
| button.addEventListener('click', function() { | |
| userInput.value = this.textContent; | |
| handleUserInput(); | |
| }); | |
| }); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=clem/invitra" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |