Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> | |
| <meta name="description" content="Voluide - Confidential HIV Support Assistant for South Africa"> | |
| <meta name="keywords" content="HIV, South Africa, AIDS, support, testing, treatment"> | |
| <title>Voluide - HIV Support Assistant</title> | |
| <link rel="icon" href="favicon.ico" type="image/x-icon"> | |
| <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> | |
| <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> | |
| <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"> | |
| <link rel="manifest" href="/site.webmanifest"> | |
| <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"> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: '#001f3f', | |
| secondary: '#34a853', | |
| accent: '#001f3f', | |
| lightblue: '#e8f0fe', | |
| darkblue: '#001f3f', | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Open Sans', sans-serif; | |
| line-height: 1.6; | |
| } | |
| .language-selector:hover .language-dropdown { | |
| display: block; | |
| } | |
| .chatbot-container { | |
| min-height: 500px; | |
| border-radius: 12px; | |
| box-shadow: 0 4px 12px rgba(0,0,0,0.1); | |
| } | |
| .quick-link-card { | |
| transition: all 0.3s ease; | |
| } | |
| .quick-link-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 20px rgba(0,0,0,0.1); | |
| } | |
| .emergency-card { | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { | |
| box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.4); | |
| } | |
| 70% { | |
| box-shadow: 0 0 0 10px rgba(220, 38, 38, 0); | |
| } | |
| 100% { | |
| box-shadow: 0 0 0 0 rgba(220, 38, 38, 0); | |
| } | |
| } | |
| /* Chatbase chatbot styling */ | |
| #chatbase-widget { | |
| width: 100% ; | |
| height: 500px ; | |
| border-radius: 12px ; | |
| border: none ; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50"> | |
| <!-- Header --> | |
| <header class="bg-white shadow-sm"> | |
| <div class="container mx-auto px-4 py-4 flex justify-between items-center"> | |
| <div class="flex items-center space-x-2"> | |
| <i class="fas fa-heartbeat text-3xl text-primary"></i> | |
| <h1 class="text-2xl font-bold text-primary">Voluide <span class="text-gray-600 font-medium">HIV Support Assistant</span></h1> | |
| </div> | |
| <!-- Mobile menu button --> | |
| <button class="md:hidden focus:outline-none" id="mobile-menu-button"> | |
| <i class="fas fa-bars text-2xl text-gray-700"></i> | |
| </button> | |
| <!-- Desktop Navigation --> | |
| <nav class="hidden md:flex space-x-8"> | |
| <a href="#" class="text-primary font-medium border-b-2 border-primary pb-1">Home</a> | |
| <a href="#chat" class="text-gray-600 hover:text-primary transition">Chat Support</a> | |
| <a href="#stories" class="text-gray-600 hover:text-primary transition">Uplifting Videos</a> | |
| <a href="#emergency" class="text-gray-600 hover:text-primary transition">Emergency Support</a> | |
| </nav> | |
| </div> | |
| <!-- Mobile Navigation --> | |
| <div class="md:hidden hidden bg-white py-4 px-4" id="mobile-menu"> | |
| <div class="flex flex-col space-y-4"> | |
| <a href="#" class="text-primary font-medium">Home</a> | |
| <a href="#chat" class="text-gray-600">Chat Support</a> | |
| <a href="#stories" class="text-gray-600">Uplifting Videos</a> | |
| <a href="#emergency" class="text-gray-600">Emergency Support</a> | |
| <a href="#resources" class="text-gray-600">Resources</a> | |
| <div class="pt-4 border-t border-gray-200"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Hero Section --> | |
| <section class="bg-gradient-to-r from-primary to-accent text-white py-16"> | |
| <div class="container mx-auto px-4"> | |
| <div class="max-w-3xl mx-auto text-center"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4">Confidential Support For You</h2> | |
| <p class="text-xl mb-8">Welcome to Voluide! This is a safe, friendly space where you can learn about HIV, find support, and feel encouraged. Explore uplifting videos, helpful resources, and confidential guidance anytime you need it. We’re here to make learning and getting support easy, positive, and safe, just for you.</p> | |
| <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-6"> | |
| <a href="#chat" class="bg-white text-primary font-bold py-3 px-6 rounded-full hover:bg-gray-100 transition shadow-md">Chat Now with Our Assistant</a> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- HIV Awareness Section --> | |
| <section class="py-12 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="max-w-6xl mx-auto grid grid-cols-1 md:grid-cols-2 gap-8 items-stretch"> | |
| <img src="https://images.unsplash.com/photo-1605102786340-5d7929a3f7c3?q=80&w=1167&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" | |
| alt="HIV Awareness Image" | |
| class="w-full h-full object-cover rounded-lg shadow-md"> | |
| <div class="prose"> | |
| <h3 class="text-2xl font-bold text-primary mb-4">What is HIV? 💙</h3> | |
| <p>HIV stands for <strong>Human Immunodeficiency Virus</strong>. It is a virus that attacks the immune system, which is your body's natural defense against illness.</p> | |
| <ul class="list-disc list-inside space-y-2"> | |
| <li>HIV does not mean the end of life. With the right care, people living with HIV can stay healthy and live long, happy lives.</li> | |
| <li>It cannot be spread through hugs, handshakes, or sharing food. HIV spreads only through specific body fluids, like blood or sexual contact.</li> | |
| <li>Getting tested and taking medicine can help people with HIV stay healthy and prevent passing it to others.</li> | |
| </ul> | |
| </div> | |
| </section> | |
| <!-- Chatbot Section --> | |
| <section id="chat" class="bg-gradient-to-r from-primary to-accent"> | |
| <div class="text-center mb-4 rounded-lg p-2"> | |
| <h2 class="text-3xl font-bold mb-2 text-white">Here For You 24/7💬</h2> | |
| </div> | |
| <div class="chatbot-container bg-white p-4"> | |
| <!-- Chatbase chatbot iframe --> | |
| <iframe | |
| src="https://www.chatbase.co/chatbot-iframe/DEk1C1MVNoYTq5Ui25yXJ" | |
| width="100%" | |
| style="height: 100%; min-height: 500px" | |
| frameborder="0"> | |
| </iframe> | |
| </div> | |
| <div class="mt-6 text-center text-white text-sm"> | |
| <p>For immediate crisis support, please see our <a href="#emergency" class="text-white underline">emergency contacts</a>.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Encouraging Stories Section --> | |
| <section id="stories" class="py-16 bg-white"> | |
| <div class="container mx-auto px-2"> | |
| <div class="max-w-6xl mx-auto text-center"> | |
| <h2 class="text-3xl font-bold text-gray-800">Uplifting Videos🌻</h2> | |
| <p class="mt-0 text-gray-600 max-w-2xl mx-auto mb-8"> | |
| Discover uplifting stories of courage and strength from people living with HIV | |
| </p> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <div class="aspect-w-16 aspect-h-9"> | |
| <iframe | |
| width="560" | |
| height="315" | |
| src="https://www.youtube.com/embed/fkX-4MGVMzQ?si=gO2i8b4IwcVNK76R" | |
| title="YouTube video player" | |
| frameborder="0" | |
| allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" | |
| referrerpolicy="strict-origin-when-cross-origin" | |
| allowfullscreen | |
| class="w-full rounded-lg shadow-md"> | |
| </iframe> | |
| </div> | |
| <div class="aspect-w-16 aspect-h-9"> | |
| <iframe | |
| width="560" | |
| height="315" | |
| src="https://www.youtube.com/embed/NdENm_EHekM" | |
| title="YouTube video player" | |
| frameborder="0" | |
| allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" | |
| referrerpolicy="strict-origin-when-cross-origin" | |
| allowfullscreen | |
| class="w-full rounded-lg shadow-md"> | |
| </iframe> | |
| </div> | |
| <div class="aspect-w-16 aspect-h-9"> | |
| <iframe | |
| width="560" | |
| height="315" | |
| src="https://www.youtube.com/embed/PsUE4GbqFJk" | |
| title="YouTube video player" | |
| frameborder="0" | |
| allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" | |
| referrerpolicy="strict-origin-when-cross-origin" | |
| allowfullscreen | |
| class="w-full rounded-lg shadow-md"> | |
| </iframe> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Emergency Contacts --> | |
| <section id="emergency" class="py-16 bg-gray-300"> | |
| <div class="container mx-auto px-4"> | |
| <div class="max-w-4xl mx-auto"> | |
| <div class="emergency-card bg-white border-l-4 border-red-600 p-6 rounded-lg shadow-md mb-8"> | |
| <div class="flex flex-col lg:flex-row items-start gap-6"> | |
| <div class="flex-1"> | |
| <div class="flex items-start mb-4"> | |
| <div class="bg-red-100 p-3 rounded-full mr-4"> | |
| <i class="fas fa-exclamation-triangle text-red-600 text-xl"></i> | |
| </div> | |
| <div> | |
| <h3 class="text-xl font-bold mb-2 text-gray-800">Emergency Support</h3> | |
| <p class="text-gray-600 mb-4">If you're in crisis or need immediate help, contact these services:</p> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 gap-4"> | |
| <div class="bg-red-50 p-3 rounded-lg"> | |
| <p class="font-bold text-red-700">Suicide Crisis Line</p> | |
| <p class="text-gray-800">0800 567 567</p> | |
| </div> | |
| <div class="bg-red-50 p-3 rounded-lg"> | |
| <p class="font-bold text-red-700">GBV Command Centre</p> | |
| <p class="text-gray-800">0800 428 428</p> | |
| </div> | |
| <div class="bg-red-50 p-3 rounded-lg"> | |
| <p class="font-bold text-red-700">AIDS Helpline</p> | |
| <p class="text-gray-800">0800 012 322</p> | |
| </div> | |
| <div class="bg-red-50 p-3 rounded-lg"> | |
| <p class="font-bold text-red-700">Childline</p> | |
| <p class="text-gray-800">0800 055 555</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex-shrink-0"> | |
| <img | |
| src="https://images.unsplash.com/photo-1606560180292-6c80f7d724ac?q=80&w=1074&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" | |
| alt="Support and care" | |
| class="w-48 h-60 object-contain rounded-lg shadow-sm" | |
| > | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-gray-800 text-white py-12"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> | |
| <div> | |
| <h4 class="text-xl font-bold mb-4">Voluide</h4> | |
| <p class="text-gray-300 mb-4">Providing confidential HIV support and information to South Africans.</p> | |
| <div class="flex space-x-4"> | |
| <span class="text-gray-300"><i class="fab fa-facebook-f"></i></span> | |
| <span class="text-gray-300"><i class="fab fa-twitter"></i></span> | |
| <span class="text-gray-300"><i class="fab fa-instagram"></i></span> | |
| </div> | |
| </div> | |
| <div> | |
| <h5 class="font-bold mb-4">Quick Links</h5> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-300 hover:text-white transition">Home</a></li> | |
| <li><a href="#chat" class="text-gray-300 hover:text-white transition">Chat Support</a></li> | |
| <li><a href="#stories" class="text-gray-300 hover:text-white transition">Uplifting videos</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h5 class="font-bold mb-4">Health Resources</h5> | |
| <ul class="space-y-2"> | |
| <li><a href="#emergency" class="text-gray-300 hover:text-white transition">Emergency Contacts</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h5 class="font-bold mb-4">Languages</h5> | |
| <div> | |
| <a href="#" class="text-gray-300 hover:text-white transition">Volaide can understand and respond in all South African languages</a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-700 mt-12 pt-8 text-center text-gray-400"> | |
| <p>© 2025 Voluide HIV Support Assistant. All rights reserved.</p> | |
| <p class="mt-2 text-sm">In partnership with South African Department of Health.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <!-- Back to Top Button --> | |
| <button id="back-to-top" class="fixed bottom-8 right-8 bg-primary text-white w-12 h-12 rounded-full shadow-lg flex items-center justify-center hidden"> | |
| <i class="fas fa-arrow-up"></i> | |
| </button> | |
| <script> | |
| // Mobile menu toggle | |
| document.getElementById('mobile-menu-button').addEventListener('click', function() { | |
| const menu = document.getElementById('mobile-menu'); | |
| menu.classList.toggle('hidden'); | |
| }); | |
| // Back to top button | |
| const backToTopButton = document.getElementById('back-to-top'); | |
| window.addEventListener('scroll', function() { | |
| if (window.pageYOffset > 300) { | |
| backToTopButton.classList.remove('hidden'); | |
| } else { | |
| backToTopButton.classList.add('hidden'); | |
| } | |
| }); | |
| backToTopButton.addEventListener('click', function() { | |
| window.scrollTo({ | |
| top: 0, | |
| behavior: 'smooth' | |
| }); | |
| }); | |
| // Smooth scrolling for anchor links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function (e) { | |
| e.preventDefault(); | |
| const targetId = this.getAttribute('href'); | |
| if (targetId === '#') return; | |
| const targetElement = document.querySelector(targetId); | |
| if (targetElement) { | |
| targetElement.scrollIntoView({ | |
| behavior: 'smooth' | |
| }); | |
| // Close mobile menu if open | |
| const mobileMenu = document.getElementById('mobile-menu'); | |
| if (!mobileMenu.classList.contains('hidden')) { | |
| mobileMenu.classList.add('hidden'); | |
| } | |
| } | |
| }); | |
| }); | |
| </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=TeeYah15/voluide-bot" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |