Spaces:
Running
Running
It will only happen if a person fill volunteer form then the counter increases by 1 and does not change forever. Start by 0 - Follow Up Deployment
b627d2f verified | <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>TruthLens Foundation | Youth-led Transparency Initiative</title> | |
| <meta name="description" content="Join TruthLens Foundation in our mission for government transparency and accountability. Youth-led initiative fighting corruption through RTI and public awareness."> | |
| <meta name="keywords" content="TruthLens, RTI, transparency, accountability, youth movement, anti-corruption, Bihar governance"> | |
| <link rel="canonical" href="https://truthlensfoundation.org" /> | |
| <meta property="og:title" content="TruthLens Foundation | Youth-led Transparency Initiative"> | |
| <meta property="og:description" content="Join our mission for government transparency and accountability. Youth-led initiative fighting corruption through RTI."> | |
| <meta property="og:type" content="website"> | |
| <meta property="og:url" content="https://truthlensfoundation.org"> | |
| <meta property="og:image" content="https://truthlensfoundation.org/images/og-image.jpg"> | |
| <meta name="twitter:card" content="summary_large_image"> | |
| <link rel="icon" href="/favicon.ico" type="image/x-icon"> | |
| <link rel="apple-touch-icon" href="/apple-touch-icon.png"> | |
| <!-- Preconnect to CDNs for faster loading --> | |
| <link rel="preconnect" href="https://cdn.tailwindcss.com"> | |
| <link rel="preconnect" href="https://cdnjs.cloudflare.com"> | |
| <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, #4f46e5 0%, #10b981 100%); | |
| } | |
| .form-shadow { | |
| box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| } | |
| .success-message { | |
| opacity: 0; | |
| transform: translateY(20px); | |
| transition: all 0.3s ease; | |
| } | |
| .success-message.show { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50"> | |
| <!-- Header Section with improved semantic markup --> | |
| <header class="gradient-bg text-white py-12" role="banner"> | |
| <div class="container mx-auto px-4"> | |
| <div class="max-w-3xl mx-auto text-center"> | |
| <h1 class="text-4xl md:text-5xl font-bold mb-4">TruthLens Foundation</h1> | |
| <p class="text-xl md:text-2xl font-light"</p> | |
| <p class="text-lg italic mt-2">"Empowered to Question, Inspired to Act."</p> | |
| <div class="mt-6 bg-white bg-opacity-20 rounded-lg p-4 inline-block"> | |
| <div class="flex items-center justify-center space-x-2"> | |
| <i class="fas fa-users text-2xl"></i> | |
| <span class="text-2xl font-bold" id="counter">1,287</span> | |
| <span>people standing against corruption</span> | |
| </div> | |
| </div> | |
| <div class="mt-8"> | |
| <i class="fas fa-hands-helping text-4xl opacity-80"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Main Content with ARIA landmark --> | |
| <main class="container mx-auto px-4 py-12" role="main"> | |
| <div class="flex flex-col lg:flex-row gap-12"> | |
| <!-- About Section --> | |
| <div class="lg:w-1/2"> | |
| <div class="bg-white rounded-xl p-8 shadow-lg"> | |
| <h2 class="text-3xl font-bold text-gray-800 mb-6">About TruthLens Foundation</h2> | |
| <div class="space-y-6 text-gray-700"> | |
| <p>TruthLens Foundation is a youth-led, citizen-powered NGO dedicated to truth, transparency, and accountability in governance. We aim to empower the public with tools like the Right to Information (RTI), and raise awareness of how power and public money are used.</p> | |
| <p>Founded by Saharsh Kumar, a passionate student currently studying in Class 7 at ALLEN Career Institute, the foundation believes that even young voices can lead big change.</p> | |
| <p>We have not yet exposed any major scams, but based on our preliminary investigations, Bihar remains a region of high suspicion in public spending and governance. Our mission is ongoing, and we invite you to be a part of it.</p> | |
| </div> | |
| <div class="mt-8 bg-red-50 rounded-lg p-6 border border-red-200"> | |
| <h3 class="text-xl font-semibold text-red-800 mb-3">Our Current Focus: Bihar Corruption</h3> | |
| <p class="text-gray-700 mb-4">Based on our preliminary investigations, Bihar has emerged as a region of particular concern regarding corruption and misuse of public funds. We are actively:</p> | |
| <ul class="space-y-3"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-search text-red-500 mt-1 mr-2"></i> | |
| <span>Investigating suspicious government contracts and expenditures</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-file-alt text-red-500 mt-1 mr-2"></i> | |
| <span>Filing RTI applications to uncover hidden information</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-users text-red-500 mt-1 mr-2"></i> | |
| <span>Building a network of local volunteers to gather evidence</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-bullhorn text-red-500 mt-1 mr-2"></i> | |
| <span>Raising public awareness about corruption patterns</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <div class="mt-8 bg-blue-50 rounded-lg p-6 border border-blue-100"> | |
| <h3 class="text-xl font-semibold text-blue-800 mb-3">Why Volunteer With Us?</h3> | |
| <ul class="space-y-3"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> | |
| <span>Make a real difference in governance transparency</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> | |
| <span>Learn valuable skills in civic engagement</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> | |
| <span>Be part of a youth-led movement for change</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> | |
| <span>Flexible volunteering opportunities</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Form Section --> | |
| <div class="lg:w-1/2"> | |
| <div class="bg-white rounded-xl p-8 shadow-lg form-shadow"> | |
| <h2 class="text-3xl font-bold text-gray-800 mb-2">Volunteer Application</h2> | |
| <p class="text-gray-600 mb-8">Join us in our mission for transparency and accountability</p> | |
| <form id="volunteerForm" onsubmit="prepareEmail(event)" class="space-y-6"> | |
| <!-- Full Name --> | |
| <div> | |
| <label for="fullName" class="block text-sm font-medium text-gray-700 mb-1">Full Name <span class="text-red-500">*</span></label> | |
| <input type="text" id="fullName" name="fullName" required class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition"> | |
| </div> | |
| <!-- Age --> | |
| <div> | |
| <label for="age" class="block text-sm font-medium text-gray-700 mb-1">Age <span class="text-red-500">*</span></label> | |
| <input type="number" id="age" name="age" required min="13" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition"> | |
| </div> | |
| <!-- Contact Number --> | |
| <div> | |
| <label for="contactNumber" class="block text-sm font-medium text-gray-700 mb-1">Contact Number (With Country Code, +xy) <span class="text-red-500">*</span></label> | |
| <input type="tel" id="contactNumber" name="contactNumber" required class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition"> | |
| </div> | |
| <!-- City & State --> | |
| <div> | |
| <label for="location" class="block text-sm font-medium text-gray-700 mb-1">City & State <span class="text-red-500">*</span></label> | |
| <input type="text" id="location" name="location" required class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition"> | |
| </div> | |
| <!-- Why Volunteer --> | |
| <div> | |
| <label for="whyVolunteer" class="block text-sm font-medium text-gray-700 mb-1">Why do you want to volunteer? (Optional)</label> | |
| <textarea id="whyVolunteer" name="whyVolunteer" rows="3" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition"></textarea> | |
| </div> | |
| <!-- Skills --> | |
| <div> | |
| <label for="skills" class="block text-sm font-medium text-gray-700 mb-1">Skills (Optional)</label> | |
| <div class="space-y-2"> | |
| <div class="grid grid-cols-2 md:grid-cols-3 gap-2"> | |
| <div> | |
| <input type="checkbox" id="writing" name="skills" value="Writing" class="hidden peer"> | |
| <label for="writing" class="inline-flex items-center justify-between px-4 py-2 text-gray-700 bg-white border border-gray-200 rounded-lg cursor-pointer peer-checked:border-blue-500 peer-checked:bg-blue-50 peer-checked:text-blue-600"> | |
| <div class="w-full text-center">Writing</div> | |
| </label> | |
| </div> | |
| <div> | |
| <input type="checkbox" id="rti" name="skills" value="RTI Knowledge" class="hidden peer"> | |
| <label for="rti" class="inline-flex items-center justify-between px-4 py-2 text-gray-700 bg-white border border-gray-200 rounded-lg cursor-pointer peer-checked:border-blue-500 peer-checked:bg-blue-50 peer-checked:text-blue-600"> | |
| <div class="w-full text-center">RTI Knowledge</div> | |
| </label> | |
| </div> | |
| <div> | |
| <input type="checkbox" id="tech" name="skills" value="Tech Skills" class="hidden peer"> | |
| <label for="tech" class="inline-flex items-center justify-between px-4 py-2 text-gray-700 bg-white border border-gray-200 rounded-lg cursor-pointer peer-checked:border-blue-500 peer-checked:bg-blue-50 peer-checked:text-blue-600"> | |
| <div class="w-full text-center">Tech Skills</div> | |
| </label> | |
| </div> | |
| <div> | |
| <input type="checkbox" id="legal" name="skills" value="Legal Knowledge" class="hidden peer"> | |
| <label for="legal" class="inline-flex items-center justify-between px-4 py-2 text-gray-700 bg-white border border-gray-200 rounded-lg cursor-pointer peer-checked:border-blue-500 peer-checked:bg-blue-50 peer-checked:text-blue-600"> | |
| <div class="w-full text-center">Legal Knowledge</div> | |
| </label> | |
| </div> | |
| <div> | |
| <input type="checkbox" id="research" name="skills" value="Research" class="hidden peer"> | |
| <label for="research" class="inline-flex items-center justify-between px-4 py-2 text-gray-700 bg-white border border-gray-200 rounded-lg cursor-pointer peer-checked:border-blue-500 peer-checked:bg-blue-50 peer-checked:text-blue-600"> | |
| <div class="w-full text-center">Research</div> | |
| </label> | |
| </div> | |
| <div> | |
| <input type="checkbox" id="other" name="skills" value="Other" class="hidden peer"> | |
| <label for="other" class="inline-flex items-center justify-between px-4 py-2 text-gray-700 bg-white border border-gray-200 rounded-lg cursor-pointer peer-checked:border-blue-500 peer-checked:bg-blue-50 peer-checked:text-blue-600"> | |
| <div class="w-full text-center">Other</div> | |
| </label> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Signature --> | |
| <div> | |
| <label for="signature" class="block text-sm font-medium text-gray-700 mb-1">Signature <span class="text-red-500">*</span></label> | |
| <div class="flex flex-col sm:flex-row gap-4"> | |
| <input type="text" id="signature" name="signature" required placeholder="Type your full name as signature" class="flex-grow px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition"> | |
| <div class="relative"> | |
| <input type="file" id="signatureUpload" name="signatureUpload" accept="image/*" class="absolute inset-0 w-full h-full opacity-0 cursor-pointer"> | |
| <label for="signatureUpload" class="inline-flex items-center justify-center px-4 py-3 bg-gray-100 border border-gray-300 rounded-lg cursor-pointer hover:bg-gray-200 transition"> | |
| <i class="fas fa-upload mr-2"></i> Upload Signature | |
| </label> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Submit Button --> | |
| <div class="pt-4"> | |
| <button type="submit" class="w-full gradient-bg text-white font-bold py-4 px-6 rounded-lg hover:opacity-90 transition transform hover:-translate-y-1 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"> | |
| Apply Now | |
| </button> | |
| </div> | |
| </form> | |
| <!-- Success Message (hidden by default) --> | |
| <div id="successMessage" class="success-message mt-8 p-6 bg-green-50 border border-green-200 rounded-lg text-center"> | |
| <i class="fas fa-check-circle text-green-500 text-5xl mb-4"></i> | |
| <h3 class="text-2xl font-bold text-green-800 mb-2">Thank You!</h3> | |
| <p class="text-green-700">Thank you for applying to TruthLens Foundation. We'll contact you shortly.</p> | |
| </div> | |
| <!-- Disclaimer --> | |
| <div class="mt-8 text-sm text-gray-500 border-t pt-6"> | |
| <p><strong>Disclaimer:</strong> Volunteers may be requested to pay small RTI filing fees (usually ₹10 to ₹20) if they are involved in RTI-related work. RTIs are filed every 2 months. All volunteer contributions are voluntary. No legal or financial obligations are imposed beyond agreed support.</p> | |
| <p class="mt-4">If you have any questions, reach out to: <a href="mailto:saharshkumar450@gmail.com" class="text-blue-600 hover:underline">saharshkumar450@gmail.com</a></p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <!-- Footer with improved semantic markup --> | |
| <footer class="bg-gray-800 text-white py-8" role="contentinfo"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <div class="mb-4 md:mb-0"> | |
| <h3 class="text-xl font-bold">TruthLens Foundation</h3> | |
| <p class="text-gray-400" >"Empowered to Question, Inspired to Act."</p> | |
| </div> | |
| <div class="flex space-x-4"> | |
| <a href="mailto:saharshkumar450@gmail.com" class="text-gray-300 hover:text-white transition"> | |
| <i class="fas fa-envelope text-xl"></i> | |
| </a> | |
| <a href="/volunteers.html" class="text-gray-300 hover:text-white transition"> | |
| <i class="fas fa-users text-xl"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div class="mt-6 text-center text-gray-400 text-sm"> | |
| <p>© 2023 TruthLens Foundation. All rights reserved.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Counter animation | |
| function animateCounter() { | |
| const counter = document.getElementById('counter'); | |
| const target = 1287; | |
| let current = 0; | |
| const increment = target / 50; | |
| const timer = setInterval(() => { | |
| current += increment; | |
| if (current >= target) { | |
| clearInterval(timer); | |
| current = target; | |
| } | |
| counter.textContent = Math.floor(current).toLocaleString(); | |
| }, 20); | |
| } | |
| // Run counter when page loads | |
| window.addEventListener('load', animateCounter); | |
| function prepareEmail(event) { | |
| event.preventDefault(); | |
| const form = event.target; | |
| const fullName = form.querySelector('#fullName').value; | |
| const age = form.querySelector('#age').value; | |
| const contactNumber = form.querySelector('#contactNumber').value; | |
| const location = form.querySelector('#location').value; | |
| const whyVolunteer = form.querySelector('#whyVolunteer').value; | |
| // Get selected skills | |
| const skillCheckboxes = form.querySelectorAll('input[name="skills"]:checked'); | |
| const skills = Array.from(skillCheckboxes).map(cb => cb.value).join(', '); | |
| const signature = form.querySelector('#signature').value; | |
| // Compose email body | |
| const subject = 'New Volunteer Application'; | |
| const body = `New Volunteer Application:\n\n` + | |
| `Full Name: ${fullName}\n` + | |
| `Age: ${age}\n` + | |
| `Contact Number: ${contactNumber}\n` + | |
| `Location: ${location}\n` + | |
| `Why Volunteer: ${whyVolunteer}\n` + | |
| `Skills: ${skills || 'None specified'}\n` + | |
| `Signature: ${signature}\n`; | |
| // Open mail client | |
| window.location.href = `mailto:saharshkumar450@gmail.com?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`; | |
| // Show success message | |
| document.getElementById('successMessage').classList.add('show'); | |
| document.getElementById('successMessage').scrollIntoView({ behavior: 'smooth' }); | |
| } | |
| // For signature upload preview (not implemented in this demo) | |
| document.getElementById('signatureUpload').addEventListener('change', function(e) { | |
| if (this.files && this.files[0]) { | |
| console.log('Signature image selected:', this.files[0].name); | |
| } | |
| }); | |
| </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=Saharshgood/truthlensfoundation" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |