| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Dickson Okere Youths Foundation - Empowering Young Leaders</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"> |
| <script src="https://checkout.flutterwave.com/v3.js"></script> |
| <style> |
| .hero-gradient { |
| background: linear-gradient(135deg, rgba(21,101,192,0.9) 0%, rgba(25,118,210,0.9) 50%, rgba(66,165,245,0.9) 100%); |
| } |
| .donate-btn { |
| transition: all 0.3s ease; |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); |
| } |
| .donate-btn:hover { |
| transform: translateY(-3px); |
| box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); |
| } |
| .impact-card { |
| transition: transform 0.3s ease, box-shadow 0.3s ease; |
| } |
| .impact-card:hover { |
| transform: translateY(-5px); |
| box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); |
| } |
| .testimonial-card { |
| background: rgba(255, 255, 255, 0.9); |
| backdrop-filter: blur(10px); |
| } |
| .nav-link { |
| position: relative; |
| } |
| .nav-link::after { |
| content: ''; |
| position: absolute; |
| width: 0; |
| height: 2px; |
| bottom: 0; |
| left: 0; |
| background-color: #1976D2; |
| transition: width 0.3s ease; |
| } |
| .nav-link:hover::after { |
| width: 100%; |
| } |
| .floating-btn { |
| animation: float 3s ease-in-out infinite; |
| } |
| @keyframes float { |
| 0% { transform: translateY(0px); } |
| 50% { transform: translateY(-10px); } |
| 100% { transform: translateY(0px); } |
| } |
| .membership-btn { |
| background: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%); |
| color: white; |
| transition: all 0.3s ease; |
| } |
| .membership-btn:hover { |
| transform: translateY(-2px); |
| box-shadow: 0 6px 12px rgba(239, 68, 68, 0.2); |
| } |
| |
| |
| .slider-container { |
| position: relative; |
| width: 100%; |
| height: 500px; |
| overflow: hidden; |
| } |
| .slider { |
| display: flex; |
| transition: transform 0.5s ease-in-out; |
| height: 100%; |
| } |
| .slide { |
| min-width: 100%; |
| height: 100%; |
| position: relative; |
| } |
| .slide img { |
| width: 100%; |
| height: 100%; |
| object-fit: cover; |
| } |
| .slide-overlay { |
| position: absolute; |
| bottom: 0; |
| left: 0; |
| right: 0; |
| background: rgba(0, 0, 0, 0.6); |
| color: white; |
| padding: 2rem; |
| } |
| .slider-nav { |
| position: absolute; |
| bottom: 20px; |
| left: 50%; |
| transform: translateX(-50%); |
| display: flex; |
| gap: 10px; |
| } |
| .slider-dot { |
| width: 12px; |
| height: 12px; |
| border-radius: 50%; |
| background: rgba(255, 255, 255, 0.5); |
| cursor: pointer; |
| } |
| .slider-dot.active { |
| background: white; |
| } |
| .slider-arrow { |
| position: absolute; |
| top: 50%; |
| transform: translateY(-50%); |
| background: rgba(0, 0, 0, 0.5); |
| color: white; |
| border: none; |
| padding: 1rem; |
| cursor: pointer; |
| border-radius: 50%; |
| z-index: 10; |
| } |
| .slider-arrow.left { |
| left: 20px; |
| } |
| .slider-arrow.right { |
| right: 20px; |
| } |
| </style> |
| </head> |
| <body class="font-sans bg-gray-50"> |
| |
| <header class="bg-white shadow-sm sticky top-0 z-50"> |
| <div class="container mx-auto px-4 py-3 flex justify-between items-center"> |
| <div class="flex items-center"> |
| <div class="w-12 h-12 bg-blue-600 rounded-full flex items-center justify-center text-white font-bold text-xl mr-3">DOYF</div> |
| <h1 class="text-xl font-bold text-blue-800">Dickson Okere Youths Foundation</h1> |
| </div> |
| <nav class="hidden md:flex space-x-8"> |
| <a href="#home" class="nav-link text-gray-700 hover:text-blue-600">Home</a> |
| <a href="#about" class="nav-link text-gray-700 hover:text-blue-600">About</a> |
| <a href="#programs" class="nav-link text-gray-700 hover:text-blue-600">Programs</a> |
| <a href="#impact" class="nav-link text-gray-700 hover:text-blue-600">Impact</a> |
| <a href="#contact" class="nav-link text-gray-700 hover:text-blue-600">Contact</a> |
| <a href="https://docs.google.com/forms/d/e/1FAIpQLSeXYJKRYkXBqe4rmtGG5_SPNiif1fG_jSEa02p49YVpkeX-5w/viewform?usp=header" target="_blank" class="membership-btn px-4 py-2 rounded-full font-medium"> |
| Join Us <i class="fas fa-user-plus ml-1"></i> |
| </a> |
| </nav> |
| <button class="md:hidden text-gray-700" id="mobile-menu-button"> |
| <i class="fas fa-bars text-2xl"></i> |
| </button> |
| </div> |
| |
| <div class="md:hidden hidden bg-white py-4 px-4 shadow-md" id="mobile-menu"> |
| <a href="#home" class="block py-2 text-gray-700 hover:text-blue-600">Home</a> |
| <a href="#about" class="block py-2 text-gray-700 hover:text-blue-600">About</a> |
| <a href="#programs" class="block py-2 text-gray-700 hover:text-blue-600">Programs</a> |
| <a href="#impact" class="block py-2 text-gray-700 hover:text-blue-600">Impact</a> |
| <a href="#contact" class="block py-2 text-gray-700 hover:text-blue-600">Contact</a> |
| <a href="https://docs.google.com/forms/d/e/1FAIpQLSeXYJKRYkXBqe4rmtGG5_SPNiif1fG_jSEa02p49YVpkeX-5w/viewform?usp=header" target="_blank" class="block mt-3 w-full membership-btn text-white py-2 px-4 rounded-lg text-center"> |
| Join Us <i class="fas fa-user-plus ml-1"></i> |
| </a> |
| <button onclick="openDonationModal()" class="mt-3 w-full bg-blue-600 text-white py-2 px-4 rounded-lg hover:bg-blue-700 transition"> |
| Donate Now |
| </button> |
| </div> |
| </header> |
|
|
| |
| <section id="home" class="hero-gradient text-white py-20 md:py-32 relative overflow-hidden"> |
| <div class="absolute inset-0 bg-black opacity-20"></div> |
| <div class="container mx-auto px-4 relative z-10"> |
| <div class="max-w-3xl"> |
| <h1 class="text-4xl md:text-5xl font-bold mb-6 leading-tight">Empowering the Next Generation of African Leaders</h1> |
| <p class="text-xl mb-8">We provide education, mentorship, and opportunities to underprivileged youth across Nigeria, helping them realize their full potential.</p> |
| <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4"> |
| <button onclick="openDonationModal()" class="donate-btn bg-white text-blue-600 font-bold py-3 px-8 rounded-full hover:bg-gray-100"> |
| Donate Now <i class="fas fa-heart ml-2"></i> |
| </button> |
| <a href="#programs" class="bg-transparent border-2 border-white text-white font-bold py-3 px-8 rounded-full hover:bg-white hover:text-blue-600 transition"> |
| Our Programs <i class="fas fa-arrow-right ml-2"></i> |
| </a> |
| <a href="https://docs.google.com/forms/d/e/1FAIpQLSeXYJKRYkXBqe4rmtGG5_SPNiif1fG_jSEa02p49YVpkeX-5w/viewform?usp=header" target="_blank" class="membership-btn font-bold py-3 px-8 rounded-full hover:opacity-90 transition"> |
| Become a Member <i class="fas fa-user-plus ml-2"></i> |
| </a> |
| </div> |
| </div> |
| </div> |
| <div class="absolute bottom-0 left-0 right-0 h-16 bg-gradient-to-t from-gray-50 to-transparent"></div> |
| </section> |
|
|
| |
| <section class="slider-container"> |
| <div class="slider"> |
| |
| <div class="slide"> |
| <img src="https://images.unsplash.com/photo-1522202176988-66273c2fd55f?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Entrepreneurial Skills"> |
| <div class="slide-overlay"> |
| <h2 class="text-3xl font-bold mb-2">Entrepreneurial Skills Development</h2> |
| <p class="text-lg">Empowering youth with practical business skills for self-reliance and economic growth.</p> |
| </div> |
| </div> |
| |
| |
| <div class="slide"> |
| <img src="https://images.unsplash.com/photo-1521791055366-0d553872125f?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Leadership Development"> |
| <div class="slide-overlay"> |
| <h2 class="text-3xl font-bold mb-2">Leadership Development</h2> |
| <p class="text-lg">Training the next generation of ethical leaders for Nigeria and Africa.</p> |
| </div> |
| </div> |
| |
| |
| <div class="slide"> |
| <img src="https://images.unsplash.com/photo-1529333166437-7750a6dd5a70?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Social Emancipation"> |
| <div class="slide-overlay"> |
| <h2 class="text-3xl font-bold mb-2">Social Emancipation</h2> |
| <p class="text-lg">Promoting social awareness, civic responsibility and community development.</p> |
| </div> |
| </div> |
| |
| |
| <div class="slide"> |
| <img src="https://images.unsplash.com/photo-1582638423482-a90640357638?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MjB8fHlvdXRocyUyMGVtcG93ZXJtZW50fGVufDB8fDB8fHww" alt="Youth Empowerment"> |
| <div class="slide-overlay"> |
| <h2 class="text-3xl font-bold mb-2">Youth Empowerment</h2> |
| <p class="text-lg">Providing resources, mentorship and opportunities for youth to thrive.</p> |
| </div> |
| </div> |
| |
| |
| <div class="slide"> |
| <img src="https://images.unsplash.com/photo-1542744173-8e7e53415bb0?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Advocacy Campaigns"> |
| <div class="slide-overlay"> |
| <h2 class="text-3xl font-bold mb-2">Advocacy Campaigns</h2> |
| <p class="text-lg">Championing youth rights, social justice and positive societal change.</p> |
| </div> |
| </div> |
| |
| |
| <div class="slide"> |
| <img src="https://images.unsplash.com/photo-1507679799987-c73779587ccf?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Community Services"> |
| <div class="slide-overlay"> |
| <h2 class="text-3xl font-bold mb-2">Community Services</h2> |
| <p class="text-lg">Engaging youth in projects that address local challenges and improve communities.</p> |
| </div> |
| </div> |
| </div> |
| |
| <button class="slider-arrow left" onclick="prevSlide()"> |
| <i class="fas fa-chevron-left"></i> |
| </button> |
| <button class="slider-arrow right" onclick="nextSlide()"> |
| <i class="fas fa-chevron-right"></i> |
| </button> |
| |
| <div class="slider-nav"> |
| <div class="slider-dot active" onclick="goToSlide(0)"></div> |
| <div class="slider-dot" onclick="goToSlide(1)"></div> |
| <div class="slider-dot" onclick="goToSlide(2)"></div> |
| <div class="slider-dot" onclick="goToSlide(3)"></div> |
| <div class="slider-dot" onclick="goToSlide(4)"></div> |
| <div class="slider-dot" onclick="goToSlide(5)"></div> |
| </div> |
| </section> |
|
|
| |
| <section class="bg-white py-12"> |
| <div class="container mx-auto px-4"> |
| <div class="bg-white rounded-xl shadow-lg p-6 grid grid-cols-1 md:grid-cols-4 gap-6 divide-y md:divide-y-0 md:divide-x divide-gray-200"> |
| <div class="text-center p-4"> |
| <div class="text-4xl font-bold text-blue-600 mb-2">5,000+</div> |
| <div class="text-gray-600">Youths Empowered</div> |
| </div> |
| <div class="text-center p-4"> |
| <div class="text-4xl font-bold text-blue-600 mb-2">120+</div> |
| <div class="text-gray-600">Communities Reached</div> |
| </div> |
| <div class="text-center p-4"> |
| <div class="text-4xl font-bold text-blue-600 mb-2">15</div> |
| <div class="text-gray-600">Educational Programs</div> |
| </div> |
| <div class="text-center p-4"> |
| <div class="text-4xl font-bold text-blue-600 mb-2">100%</div> |
| <div class="text-gray-600">Transparent Operations</div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="about" class="py-20 bg-gray-50"> |
| <div class="container mx-auto px-4"> |
| <div class="flex flex-col md:flex-row items-center"> |
| <div class="md:w-1/2 mb-10 md:mb-0 md:pr-10"> |
| <h2 class="text-3xl font-bold text-gray-800 mb-6">About Dickson Okere Youths Foundation</h2> |
| <p class="text-gray-600 mb-4">Dickson Okere Youths Foundation (DOYF) is a non-profit organization dedicated to advocating, pursuing and engaging in youths capacity building projects that will Stimulate Entrepreneurial Skills, Leadership Development and Social Emancipation of young people in Nigeria and Africa in general.</p> |
| <p class="text-gray-600 mb-6">Our team is passionately committed to creating positive change in the social spaces of Africa through entrepreneurial skills acquisition and empowerment programs, leadership development conferences, seminars, trainings, workshops, community services and advocacy campaigns/programs.</p> |
| <div class="flex space-x-4"> |
| <div class="bg-blue-100 p-4 rounded-lg"> |
| <i class="fas fa-eye text-blue-600 text-2xl mb-2"></i> |
| <h3 class="font-bold text-gray-800">Our Vision</h3> |
| <p class="text-gray-600 text-sm">A Nigeria where every youth has equal opportunities to succeed.</p> |
| </div> |
| <div class="bg-green-100 p-4 rounded-lg"> |
| <i class="fas fa-bullseye text-green-600 text-2xl mb-2"></i> |
| <h3 class="font-bold text-gray-800">Our Mission</h3> |
| <p class="text-gray-600 text-sm">Redirecting and Refocusing the Interest and Strength of Young People on issues that builds progressive society, national peace and unity.</p> |
| </div> |
| </div> |
| </div> |
| <div class="md:w-1/2 relative"> |
| <div class="bg-blue-600 rounded-xl overflow-hidden shadow-xl"> |
| <img src="https://images.unsplash.com/photo-1522202176988-66273c2fd55f?ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80" alt="Youth empowerment" class="w-full h-auto opacity-90"> |
| <div class="absolute inset-0 flex items-center justify-center"> |
| <button class="bg-white bg-opacity-90 rounded-full p-4 text-blue-600 hover:bg-opacity-100 transition"> |
| <i class="fas fa-play text-2xl"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="mt-16"> |
| <h2 class="text-3xl font-bold text-gray-800 mb-8 text-center">Our Core Values</h2> |
| <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-6"> |
| <div class="bg-white p-6 rounded-lg shadow-md text-center"> |
| <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4"> |
| <i class="fas fa-handshake text-blue-600 text-2xl"></i> |
| </div> |
| <h3 class="font-bold text-gray-800 mb-2">Diplomacy</h3> |
| <p class="text-gray-600 text-sm">We approach challenges with tact and strategic thinking</p> |
| </div> |
| <div class="bg-white p-6 rounded-lg shadow-md text-center"> |
| <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4"> |
| <i class="fas fa-comments text-green-600 text-2xl"></i> |
| </div> |
| <h3 class="font-bold text-gray-800 mb-2">Dialogue</h3> |
| <p class="text-gray-600 text-sm">Open communication is key to understanding and progress</p> |
| </div> |
| <div class="bg-white p-6 rounded-lg shadow-md text-center"> |
| <div class="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-4"> |
| <i class="fas fa-shield-alt text-purple-600 text-2xl"></i> |
| </div> |
| <h3 class="font-bold text-gray-800 mb-2">Integrity</h3> |
| <p class="text-gray-600 text-sm">We uphold the highest ethical standards in all we do</p> |
| </div> |
| <div class="bg-white p-6 rounded-lg shadow-md text-center"> |
| <div class="w-16 h-16 bg-yellow-100 rounded-full flex items-center justify-center mx-auto mb-4"> |
| <i class="fas fa-users text-yellow-600 text-2xl"></i> |
| </div> |
| <h3 class="font-bold text-gray-800 mb-2">Leadership</h3> |
| <p class="text-gray-600 text-sm">We lead by example and inspire others to do the same</p> |
| </div> |
| <div class="bg-white p-6 rounded-lg shadow-md text-center"> |
| <div class="w-16 h-16 bg-red-100 rounded-full flex items-center justify-center mx-auto mb-4"> |
| <i class="fas fa-exchange-alt text-red-600 text-2xl"></i> |
| </div> |
| <h3 class="font-bold text-gray-800 mb-2">Negotiation</h3> |
| <p class="text-gray-600 text-sm">Finding common ground for mutual benefit</p> |
| </div> |
| <div class="bg-white p-6 rounded-lg shadow-md text-center"> |
| <div class="w-16 h-16 bg-indigo-100 rounded-full flex items-center justify-center mx-auto mb-4"> |
| <i class="fas fa-brain text-indigo-600 text-2xl"></i> |
| </div> |
| <h3 class="font-bold text-gray-800 mb-2">Possibility Mindset</h3> |
| <p class="text-gray-600 text-sm">We believe in the potential of every young person</p> |
| </div> |
| <div class="bg-white p-6 rounded-lg shadow-md text-center"> |
| <div class="w-16 h-16 bg-pink-100 rounded-full flex items-center justify-center mx-auto mb-4"> |
| <i class="fas fa-hands-helping text-pink-600 text-2xl"></i> |
| </div> |
| <h3 class="font-bold text-gray-800 mb-2">Community Service</h3> |
| <p class="text-gray-600 text-sm">Giving back to uplift those around us</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="programs" class="py-20 bg-white"> |
| <div class="container mx-auto px-4"> |
| <div class="text-center mb-16"> |
| <h2 class="text-3xl font-bold text-gray-800 mb-4">Our Programs</h2> |
| <p class="text-gray-600 max-w-2xl mx-auto">Our programs anchor on the three cardinal points of "Entrepreneurial Skills Acquisitions and Empowerment; Leadership Development; and Social Emancipation of Young People".</p> |
| </div> |
| |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> |
| |
| <div class="bg-white rounded-xl shadow-md overflow-hidden impact-card"> |
| <div class="h-48 bg-blue-100 flex items-center justify-center"> |
| <i class="fas fa-graduation-cap text-blue-600 text-6xl"></i> |
| </div> |
| <div class="p-6"> |
| <h3 class="text-xl font-bold text-gray-800 mb-3">Entrepreneurial Skills</h3> |
| <p class="text-gray-600 mb-4">Comprehensive training programs to equip youth with practical business and vocational skills for self-reliance.</p> |
| <a href="#" class="text-blue-600 font-medium hover:underline">Learn more <i class="fas fa-arrow-right ml-1"></i></a> |
| </div> |
| </div> |
| |
| |
| <div class="bg-white rounded-xl shadow-md overflow-hidden impact-card"> |
| <div class="h-48 bg-green-100 flex items-center justify-center"> |
| <i class="fas fa-laptop-code text-green-600 text-6xl"></i> |
| </div> |
| <div class="p-6"> |
| <h3 class="text-xl font-bold text-gray-800 mb-3">Leadership Development</h3> |
| <p class="text-gray-600 mb-4">Conferences, seminars and workshops to develop ethical leadership qualities in young people.</p> |
| <a href="#" class="text-blue-600 font-medium hover:underline">Learn more <i class="fas fa-arrow-right ml-1"></i></a> |
| </div> |
| </div> |
| |
| |
| <div class="bg-white rounded-xl shadow-md overflow-hidden impact-card"> |
| <div class="h-48 bg-purple-100 flex items-center justify-center"> |
| <i class="fas fa-hands-helping text-purple-600 text-6xl"></i> |
| </div> |
| <div class="p-6"> |
| <h3 class="text-xl font-bold text-gray-800 mb-3">Social Emancipation</h3> |
| <p class="text-gray-600 mb-4">Programs that promote social awareness, civic responsibility and community development.</p> |
| <a href="#" class="text-blue-600 font-medium hover:underline">Learn more <i class="fas fa-arrow-right ml-1"></i></a> |
| </div> |
| </div> |
| |
| |
| <div class="bg-white rounded-xl shadow-md overflow-hidden impact-card"> |
| <div class="h-48 bg-yellow-100 flex items-center justify-center"> |
| <i class="fas fa-briefcase text-yellow-600 text-6xl"></i> |
| </div> |
| <div class="p-6"> |
| <h3 class="text-xl font-bold text-gray-800 mb-3">Youth Empowerment</h3> |
| <p class="text-gray-600 mb-4">Initiatives that provide resources, mentorship and opportunities for youth to thrive.</p> |
| <a href="#" class="text-blue-600 font-medium hover:underline">Learn more <i class="fas fa-arrow-right ml-1"></i></a> |
| </div> |
| </div> |
| |
| |
| <div class="bg-white rounded-xl shadow-md overflow-hidden impact-card"> |
| <div class="h-48 bg-red-100 flex items-center justify-center"> |
| <i class="fas fa-heartbeat text-red-600 text-6xl"></i> |
| </div> |
| <div class="p-6"> |
| <h3 class="text-xl font-bold text-gray-800 mb-3">Advocacy Campaigns</h3> |
| <p class="text-gray-600 mb-4">Programs that champion youth rights, social justice and positive societal change.</p> |
| <a href="#" class="text-blue-600 font-medium hover:underline">Learn more <i class="fas fa-arrow-right ml-1"></i></a> |
| </div> |
| </div> |
| |
| |
| <div class="bg-white rounded-xl shadow-md overflow-hidden impact-card"> |
| <div class="h-48 bg-indigo-100 flex items-center justify-center"> |
| <i class="fas fa-hand-holding-heart text-indigo-600 text-6xl"></i> |
| </div> |
| <div class="p-6"> |
| <h3 class="text-xl font-bold text-gray-800 mb-3">Community Services</h3> |
| <p class="text-gray-600 mb-4">Engaging youth in projects that address local challenges and improve communities.</p> |
| <a href="#" class="text-blue-600 font-medium hover:underline">Learn more <i class="fas fa-arrow-right ml-1"></i></a> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="impact" class="py-20 bg-gray-50"> |
| <div class="container mx-auto px-4"> |
| <div class="text-center mb-16"> |
| <h2 class="text-3xl font-bold text-gray-800 mb-4">Our Impact</h2> |
| <p class="text-gray-600 max-w-2xl mx-auto">Real stories of transformation from the youth we've empowered through our programs.</p> |
| </div> |
| |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> |
| |
| <div class="bg-white rounded-xl shadow-lg overflow-hidden testimonial-card"> |
| <div class="p-6"> |
| <div class="flex items-center mb-4"> |
| <div class="w-16 h-16 rounded-full overflow-hidden bg-blue-100 flex items-center justify-center"> |
| <i class="fas fa-user text-blue-600 text-3xl"></i> |
| </div> |
| <div class="ml-4"> |
| <h4 class="font-bold text-gray-800">Amina Yusuf</h4> |
| <p class="text-gray-600 text-sm">Entrepreneurship Program</p> |
| </div> |
| </div> |
| <p class="text-gray-700 mb-4 italic">"The business skills I learned from DOYF helped me start my fashion design business that now employs 3 other young people in my community."</p> |
| <div class="flex text-yellow-400"> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="bg-white rounded-xl shadow-lg overflow-hidden testimonial-card"> |
| <div class="p-6"> |
| <div class="flex items-center mb-4"> |
| <div class="w-16 h-16 rounded-full overflow-hidden bg-green-100 flex items-center justify-center"> |
| <i class="fas fa-user text-green-600 text-3xl"></i> |
| </div> |
| <div class="ml-4"> |
| <h4 class="font-bold text-gray-800">Emeka Okafor</h4> |
| <p class="text-gray-600 text-sm">Leadership Development</p> |
| </div> |
| </div> |
| <p class="text-gray-700 mb-4 italic">"The leadership training transformed my perspective. I now lead a community development initiative that has improved sanitation in our neighborhood."</p> |
| <div class="flex text-yellow-400"> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star-half-alt"></i> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="bg-white rounded-xl shadow-lg overflow-hidden testimonial-card"> |
| <div class="p-6"> |
| <div class="flex items-center mb-4"> |
| <div class="w-16 h-16 rounded-full overflow-hidden bg-purple-100 flex items-center justify-center"> |
| <i class="fas fa-user text-purple-600 text-3xl"></i> |
| </div> |
| <div class="ml-4"> |
| <h4 class="font-bold text-gray-800">Chioma Adeleke</h4> |
| <p class="text-gray-600 text-sm">Social Advocacy</p> |
| </div> |
| </div> |
| <p class="text-gray-700 mb-4 italic">"DOYF's advocacy program gave me the platform to champion girls' education in my state. We've helped 50 girls return to school so far."</p> |
| <div class="flex text-yellow-400"> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="text-center mt-12"> |
| <button onclick="openDonationModal()" class="bg-blue-600 text-white font-bold py-3 px-8 rounded-full hover:bg-blue-700 transition donate-btn"> |
| Support Our Work <i class="fas fa-hands-helping ml-2"></i> |
| </button> |
| <a href="https://docs.google.com/forms/d/e/1FAIpQLSeXYJKRYkXBqe4rmtGG5_SPNiif1fG_jSEa02p49YVpkeX-5w/viewform?usp=header" target="_blank" class="ml-4 membership-btn font-bold py-3 px-8 rounded-full hover:opacity-90 transition inline-block"> |
| Join Our Community <i class="fas fa-user-plus ml-2"></i> |
| </a> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-16 bg-white"> |
| <div class="container mx-auto px-4"> |
| <div class="text-center mb-12"> |
| <h2 class="text-2xl font-bold text-gray-800 mb-4">Our Trusted Partners</h2> |
| <p class="text-gray-600 max-w-2xl mx-auto">We collaborate with organizations that share our vision for youth empowerment.</p> |
| </div> |
| |
| <div class="flex flex-wrap justify-center items-center gap-8 md:gap-16"> |
| <div class="w-32 h-20 bg-gray-100 flex items-center justify-center rounded-lg p-4"> |
| <i class="fas fa-building text-gray-500 text-3xl"></i> |
| </div> |
| <div class="w-32 h-20 bg-gray-100 flex items-center justify-center rounded-lg p-4"> |
| <i class="fas fa-university text-gray-500 text-3xl"></i> |
| </div> |
| <div class="w-32 h-20 bg-gray-100 flex items-center justify-center rounded-lg p-4"> |
| <i class="fas fa-globe-africa text-gray-500 text-3xl"></i> |
| </div> |
| <div class="w-32 h-20 bg-gray-100 flex items-center justify-center rounded-lg p-4"> |
| <i class="fas fa-handshake text-gray-500 text-3xl"></i> |
| </div> |
| <div class="w-32 h-20 bg-gray-100 flex items-center justify-center rounded-lg p-4"> |
| <i class="fas fa-leaf text-gray-500 text-3xl"></i> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-20 bg-blue-600 text-white"> |
| <div class="container mx-auto px-4 text-center"> |
| <h2 class="text-3xl font-bold mb-6">Join Us in Making a Difference</h2> |
| <p class="text-xl mb-8 max-w-3xl mx-auto">Your support helps us reach more young people with life-changing opportunities. Every contribution makes an impact.</p> |
| <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-6"> |
| <button onclick="openDonationModal()" class="bg-white text-blue-600 font-bold py-3 px-8 rounded-full hover:bg-gray-100 transition donate-btn"> |
| Donate Now <i class="fas fa-donate ml-2"></i> |
| </button> |
| <a href="#contact" class="bg-transparent border-2 border-white text-white font-bold py-3 px-8 rounded-full hover:bg-white hover:text-blue-600 transition"> |
| Become a Partner <i class="fas fa-handshake ml-2"></i> |
| </a> |
| <a href="https://docs.google.com/forms/d/e/1FAIpQLSeXYJKRYkXBqe4rmtGG5_SPNiif1fG_jSEa02p49YVpkeX-5w/viewform?usp=header" target="_blank" class="membership-btn font-bold py-3 px-8 rounded-full hover:opacity-90 transition"> |
| Join as Member <i class="fas fa-user-plus ml-2"></i> |
| </a> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="contact" class="py-20 bg-gray-50"> |
| <div class="container mx-auto px-4"> |
| <div class="flex flex-col md:flex-row"> |
| <div class="md:w-1/2 mb-10 md:mb-0 md:pr-10"> |
| <h2 class="text-3xl font-bold text-gray-800 mb-6">Get In Touch</h2> |
| <p class="text-gray-600 mb-6">We'd love to hear from you! Whether you have questions about our programs, want to volunteer, or explore partnership opportunities.</p> |
| |
| <div class="space-y-4"> |
| <div class="flex items-start"> |
| <div class="bg-blue-100 p-3 rounded-full mr-4"> |
| <i class="fas fa-map-marker-alt text-blue-600"></i> |
| </div> |
| <div> |
| <h4 class="font-bold text-gray-800">Our Office</h4> |
| <p class="text-gray-600">34 Magbon Segun Street off Dangote Refinery Road LFZ Ibeju Lekki, Lagos</p> |
| </div> |
| </div> |
| |
| <div class="flex items-start"> |
| <div class="bg-green-100 p-3 rounded-full mr-4"> |
| <i class="fas fa-envelope text-green-600"></i> |
| </div> |
| <div> |
| <h4 class="font-bold text-gray-800">Email Us</h4> |
| <p class="text-gray-600">doyf.ngo@gmail.com</p> |
| </div> |
| </div> |
| |
| <div class="flex items-start"> |
| <div class="bg-purple-100 p-3 rounded-full mr-4"> |
| <i class="fas fa-phone-alt text-purple-600"></i> |
| </div> |
| <div> |
| <h4 class="font-bold text-gray-800">Call Us</h4> |
| <p class="text-gray-600">+234 705 994 1850</p> |
| <p class="text-gray-600">+234 705 035 3051</p> |
| <p class="text-gray-600">+234 706 540 1371</p> |
| </div> |
| </div> |
| </div> |
| |
| <div class="mt-8"> |
| <h4 class="font-bold text-gray-800 mb-4">Follow Us</4> |
| <div class="flex space-x-4"> |
| <a href="#" class="bg-blue-600 text-white p-3 rounded-full hover:bg-blue-700 transition"> |
| <i class="fab fa-facebook-f"></i> |
| </a> |
| <a href="#" class="bg-blue-400 text-white p-3 rounded-full hover:bg-blue-500 transition"> |
| <i class="fab fa-twitter"></i> |
| </a> |
| <a href="#" class="bg-pink-600 text-white p-3 rounded-full hover:bg-pink-700 transition"> |
| <i class="fab fa-instagram"></i> |
| </a> |
| <a href="#" class="bg-blue-700 text-white p-3 rounded-full hover:bg-blue-800 transition"> |
| <i class="fab fa-linkedin-in"></i> |
| </a> |
| <a href="#" class="bg-red-600 text-white p-3 rounded-full hover:bg-red-700 transition"> |
| <i class="fab fa-youtube"></i> |
| </a> |
| </div> |
| </div> |
| </div> |
| |
| <div class="md:w-1/2"> |
| <div class="bg-white rounded-xl shadow-md p-8"> |
| <h3 class="text-2xl font-bold text-gray-800 mb-6">Send Us a Message</h3> |
| <div class="text-center py-8"> |
| <i class="fas fa-envelope-open-text text-5xl text-blue-600 mb-4"></i> |
| <p class="text-gray-600 mb-6">We'd love to hear from you! Click the button below to send us a message through our contact form.</p> |
| <a href="https://docs.google.com/forms/d/e/1FAIpQLSfl4EUyPGMHZXcSJV2q9XfW9Sw37JJjoEEO4qP1HbFuG1inqw/viewform?usp=header" target="_blank" class="inline-block bg-blue-600 text-white font-bold py-3 px-8 rounded-lg hover:bg-blue-700 transition"> |
| Go to Contact Form <i class="fas fa-external-link-alt ml-2"></i> |
| </a> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <footer class="bg-gray-900 text-white py-12"> |
| <div class="container mx-auto px-4"> |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> |
| <div> |
| <div class="flex items-center mb-4"> |
| <div class="w-10 h-10 bg-blue-600 rounded-full flex items-center justify-center text-white font-bold text-lg mr-2">DOYF</div> |
| <h3 class="text-lg font-bold">Dickson Okere Youths Foundation</h3> |
| </div> |
| <p class="text-gray-400 mb-4">Empowering young Nigerians through education, skills development, and leadership training.</p> |
| <div class="flex space-x-4"> |
| <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-facebook-f"></i></a> |
| <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-twitter"></i></a> |
| <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-instagram"></i></a> |
| <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-linkedin-in"></i></a> |
| </div> |
| </div> |
| |
| <div> |
| <h4 class="text-lg font-bold mb-4">Quick Links</h4> |
| <ul class="space-y-2"> |
| <li><a href="#home" class="text-gray-400 hover:text-white transition">Home</a></li> |
| <li><a href="#about" class="text-gray-400 hover:text-white transition">About Us</a></li> |
| <li><a href="#programs" class="text-gray-400 hover:text-white transition">Our Programs</a></li> |
| <li><a href="#impact" class="text-gray-400 hover:text-white transition">Impact Stories</a></li> |
| <li><a href="#contact" class="text-gray-400 hover:text-white transition">Contact Us</a></li> |
| </ul> |
| </div> |
| |
| <div> |
| <h4 class="text-lg font-bold mb-4">Our Programs</h4> |
| <ul class="space-y-2"> |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Entrepreneurial Skills</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Leadership Development</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Social Emancipation</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Youth Empowerment</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Advocacy Campaigns</a></li> |
| </ul> |
| </div> |
| |
| <div> |
| <h4 class="text-lg font-bold mb-4">Newsletter</h4> |
| <p class="text-gray-400 mb-4">You will be automatically added to our newsletter after registering to receive updates on our programs and impact.</p> |
| |
| |
| |
| |
| <p class="text-gray-400 text-sm mt-4">We respect your privacy. Unsubscribe at any time.</p> |
| <a href="https://docs.google.com/forms/d/e/1FAIpQLSeXYJKRYkXBqe4rmtGG5_SPNiif1fG_jSEa02p49YVpkeX-5w/viewform?usp=header" target="_blank" class="mt-4 inline-block membership-btn text-white font-bold py-2 px-6 rounded-lg hover:opacity-90 transition"> |
| Become a Member <i class="fas fa-user-plus ml-1"></i> |
| </a> |
| </div> |
| </div> |
| |
| <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center"> |
| <p class="text-gray-400 mb-4 md:mb-0">© 2023 Dickson Okere Youths Foundation. All rights reserved.</p> |
| <div class="flex space-x-6"> |
| <a href="#" class="text-gray-400 hover:text-white transition">Privacy Policy</a> |
| <a href="#" class="text-gray-400 hover:text-white transition">Terms of Service</a> |
| <a href="#" class="text-gray-400 hover:text-white transition">Financial Reports</a> |
| </div> |
| </div> |
| </div> |
| </footer> |
|
|
| |
| <div class="fixed bottom-6 right-6 flex flex-col space-y-4"> |
| <button onclick="openDonationModal()" class="bg-blue-600 text-white p-4 rounded-full shadow-xl hover:bg-blue-700 transition floating-btn"> |
| <i class="fas fa-donate text-xl"></i> |
| </button> |
| <a href="https://docs.google.com/forms/d/e/1FAIpQLSeXYJKRYkXBqe4rmtGG5_SPNiif1fG_jSEa02p49YVpkeX-5w/viewform?usp=header" target="_blank" class="membership-btn text-white p-4 rounded-full shadow-xl hover:opacity-90 transition floating-btn"> |
| <i class="fas fa-user-plus text-xl"></i> |
| </a> |
| </div> |
|
|
| |
| <div id="donation-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden"> |
| <div class="bg-white rounded-xl shadow-2xl max-w-md w-full mx-4 overflow-hidden"> |
| <div class="bg-blue-600 text-white p-6"> |
| <div class="flex justify-between items-center"> |
| <h3 class="text-xl font-bold">Support Our Cause</h3> |
| <button onclick="closeDonationModal()" class="text-white hover:text-gray-200"> |
| <i class="fas fa-times"></i> |
| </button> |
| </div> |
| <p class="mt-2 opacity-90">Your donation helps empower Nigerian youth</p> |
| </div> |
| |
| <div class="p-6"> |
| <div class="mb-6"> |
| <label class="block text-gray-700 font-medium mb-2">Donation Amount (NGN)</label> |
| <div class="grid grid-cols-3 gap-3"> |
| <button onclick="setDonationAmount(5000)" class="donation-option bg-gray-100 hover:bg-blue-100 border border-gray-300 rounded-lg py-2 px-4 transition">₦5,000</button> |
| <button onclick="setDonationAmount(10000)" class="donation-option bg-gray-100 hover:bg-blue-100 border border-gray-300 rounded-lg py-2 px-4 transition">₦10,000</button> |
| <button onclick="setDonationAmount(25000)" class="donation-option bg-gray-100 hover:bg-blue-100 border border-gray-300 rounded-lg py-2 px-4 transition">₦25,000</button> |
| <button onclick="setDonationAmount(50000)" class="donation-option bg-gray-100 hover:bg-blue-100 border border-gray-300 rounded-lg py-2 px-4 transition">₦50,000</button> |
| <button onclick="setDonationAmount(100000)" class="donation-option bg-gray-100 hover:bg-blue-100 border border-gray-300 rounded-lg py-2 px-4 transition">₦100,000</button> |
| <button onclick="setDonationAmount(0)" class="donation-option bg-gray-100 hover:bg-blue-100 border border-gray-300 rounded-lg py-2 px-4 transition">Custom</button> |
| </div> |
| </div> |
| |
| <div class="mb-6"> |
| <label for="custom-amount" class="block text-gray-700 font-medium mb-2">Or Enter Custom Amount</label> |
| <div class="relative"> |
| <span class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-500">₦</span> |
| <input type="number" id="custom-amount" placeholder="Enter amount" class="w-full pl-8 pr-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"> |
| </div> |
| </div> |
| |
| <div class="mb-6"> |
| <label class="block text-gray-700 font-medium mb-2">Donation Type</label> |
| <div class="space-y-2"> |
| <label class="flex items-center"> |
| <input type="radio" name="donation-type" value="one-time" checked class="mr-2"> |
| <span>One-time Donation</span> |
| </label> |
| <label class="flex items-center"> |
| <input type="radio" name="donation-type" value="monthly" class="mr-2"> |
| <span>Monthly Recurring Donation</span> |
| </label> |
| </div> |
| </div> |
| |
| <div class="mb-6"> |
| <label for="full-name" class="block text-gray-700 font-medium mb-2">Full Name</label> |
| <input type="text" id="full-name" placeholder="Your name" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"> |
| </div> |
| |
| <div class="mb-6"> |
| <label for="email" class="block text-gray-700 font-medium mb-2">Email Address</label> |
| <input type="email" id="email" placeholder="Your email" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"> |
| </div> |
| |
| <button onclick="processDonation()" class="w-full bg-blue-600 text-white font-bold py-3 px-4 rounded-lg hover:bg-blue-700 transition flex items-center justify-center"> |
| Proceed to Payment <i class="fas fa-arrow-right ml-2"></i> |
| </button> |
| |
| <div class="mt-4 text-center text-sm text-gray-500"> |
| <p>Secure payment processed by Flutterwave</p> |
| <div class="flex justify-center mt-2"> |
| <img src="https://flutterwave.com/images/logo/full.svg" alt="Flutterwave" class="h-6"> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div id="success-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden"> |
| <div class="bg-white rounded-xl shadow-2xl max-w-md w-full mx-4 p-8 text-center"> |
| <div class="w-20 h-20 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-6"> |
| <i class="fas fa-check text-green-600 text-3xl"></i> |
| </div> |
| <h3 class="text-2xl font-bold text-gray-800 mb-3">Thank You!</h3> |
| <p class="text-gray-600 mb-6">Your donation has been successfully processed. You'll receive a receipt via email shortly.</p> |
| <button onclick="closeSuccessModal()" class="bg-blue-600 text-white font-bold py-2 px-6 rounded-lg hover:bg-blue-700 transition"> |
| Close |
| </button> |
| </div> |
| </div> |
|
|
| <script> |
| |
| document.getElementById('mobile-menu-button').addEventListener('click', function() { |
| const menu = document.getElementById('mobile-menu'); |
| menu.classList.toggle('hidden'); |
| }); |
| |
| |
| function openDonationModal() { |
| document.getElementById('donation-modal').classList.remove('hidden'); |
| document.body.style.overflow = 'hidden'; |
| } |
| |
| function closeDonationModal() { |
| document.getElementById('donation-modal').classList.add('hidden'); |
| document.body.style.overflow = 'auto'; |
| } |
| |
| function setDonationAmount(amount) { |
| const customAmountInput = document.getElementById('custom-amount'); |
| if (amount > 0) { |
| customAmountInput.value = amount; |
| } else { |
| customAmountInput.value = ''; |
| customAmountInput.focus(); |
| } |
| |
| |
| const options = document.querySelectorAll('.donation-option'); |
| options.forEach(option => { |
| if (parseInt(option.textContent.replace(/[^0-9]/g, '')) === amount || |
| (amount === 0 && option.textContent.trim() === 'Custom')) { |
| option.classList.add('bg-blue-100', 'border-blue-500'); |
| option.classList.remove('bg-gray-100', 'border-gray-300'); |
| } else { |
| option.classList.remove('bg-blue-100', 'border-blue-500'); |
| option.classList.add('bg-gray-100', 'border-gray-300'); |
| } |
| }); |
| } |
| |
| function processDonation() { |
| const amount = document.getElementById('custom-amount').value; |
| const name = document.getElementById('full-name').value; |
| const email = document.getElementById('email').value; |
| const donationType = document.querySelector('input[name="donation-type"]:checked').value; |
| |
| if (!amount || amount <= 0) { |
| alert('Please enter a valid donation amount'); |
| return; |
| } |
| |
| if (!name || !email) { |
| alert('Please fill in your name and email'); |
| return; |
| } |
| |
| |
| makeFlutterwavePayment(amount, name, email, donationType); |
| } |
| |
| function makeFlutterwavePayment(amount, name, email, donationType) { |
| FlutterwaveCheckout({ |
| public_key: "FLWPUBK_TEST-XXXXXXXXXXXXXXXX-X", |
| tx_ref: "DOYF_" + Date.now(), |
| amount: amount, |
| currency: "NGN", |
| payment_options: "card, banktransfer, ussd", |
| customer: { |
| email: email, |
| name: name |
| }, |
| customizations: { |
| title: "Dickson Okere Youths Foundation", |
| description: donationType === 'one-time' ? 'One-time Donation' : 'Monthly Recurring Donation', |
| logo: "logo.png" |
| }, |
| callback: function(response) { |
| |
| console.log(response); |
| closeDonationModal(); |
| showSuccessModal(); |
| |
| |
| |
| }, |
| onclose: function() { |
| |
| console.log("Payment modal closed"); |
| } |
| }); |
| } |
| |
| function showSuccessModal() { |
| document.getElementById('success-modal').classList.remove('hidden'); |
| document.body.style.overflow = 'hidden'; |
| } |
| |
| function closeSuccessModal() { |
| document.getElementById('success-modal').classList.add('hidden'); |
| document.body.style.overflow = 'auto'; |
| } |
| |
| |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { |
| anchor.addEventListener('click', function (e) { |
| e.preventDefault(); |
| |
| const targetId = this.getAttribute('href'); |
| const targetElement = document.querySelector(targetId); |
| |
| if (targetElement) { |
| window.scrollTo({ |
| top: targetElement.offsetTop - 80, |
| behavior: 'smooth' |
| }); |
| |
| |
| document.getElementById('mobile-menu').classList.add('hidden'); |
| } |
| }); |
| }); |
| |
| |
| let currentSlide = 0; |
| const slides = document.querySelectorAll('.slide'); |
| const dots = document.querySelectorAll('.slider-dot'); |
| const totalSlides = slides.length; |
| let slideInterval; |
| |
| function updateSlider() { |
| const slider = document.querySelector('.slider'); |
| slider.style.transform = `translateX(-${currentSlide * 100}%)`; |
| |
| |
| dots.forEach((dot, index) => { |
| if (index === currentSlide) { |
| dot.classList.add('active'); |
| } else { |
| dot.classList.remove('active'); |
| } |
| }); |
| } |
| |
| function nextSlide() { |
| currentSlide = (currentSlide + 1) % totalSlides; |
| updateSlider(); |
| resetInterval(); |
| } |
| |
| function prevSlide() { |
| currentSlide = (currentSlide - 1 + totalSlides) % totalSlides; |
| updateSlider(); |
| resetInterval(); |
| } |
| |
| function goToSlide(index) { |
| currentSlide = index; |
| updateSlider(); |
| resetInterval(); |
| } |
| |
| function resetInterval() { |
| clearInterval(slideInterval); |
| slideInterval = setInterval(nextSlide, 5000); |
| } |
| |
| |
| function initSlider() { |
| updateSlider(); |
| slideInterval = setInterval(nextSlide, 5000); |
| } |
| |
| |
| window.addEventListener('load', initSlider); |
| </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://huggingface.co/proxy/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://huggingface.co/proxy/enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://huggingface.co/proxy/enzostvs-deepsite.hf.space?remix=Chidex12/doyf3" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
|
|
