Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Yadgir Water Supply - Complaint Management</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet"> | |
| <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet"> | |
| <style> | |
| body { | |
| font-family: 'Poppins', sans-serif; | |
| background-color: #f0f9ff; | |
| } | |
| .water-wave { | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .water-wave::after { | |
| content: ""; | |
| position: absolute; | |
| bottom: 0; | |
| left: 0; | |
| right: 0; | |
| height: 20px; | |
| background: url('data:image/svg+xml;utf8,<svg viewBox="0 0 1200 120" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none"><path d="M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,32.43,512.34,53.67,583,72.05c69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.84,104.45-29.34C989.49,25,1113-14.29,1200,52.47V0Z" fill="%230089d9" opacity=".25"/><path d="M0,0V15.81C13,36.92,27.64,56.86,47.69,72.05,99.41,111.27,165,111,224.58,91.58c31.15-10.15,60.09-26.07,89.67-39.8,40.92-19,84.73-46,130.83-49.67,36.26-2.85,70.9,9.42,98.6,31.56,31.77,25.39,62.32,62,103.63,73,40.44,10.79,81.35-6.69,119.13-24.28s75.16-39,116.92-43.05c59.73-5.85,113.28,22.88,168.9,38.84,30.2,8.66,59,6.17,87.09-7.5,22.43-10.89,48-26.93,60.65-49.24V0Z" fill="%230089d9" opacity=".5"/><path d="M0,0V5.63C149.93,59,314.09,71.32,475.83,42.57c43-7.64,84.23-20.12,127.61-26.46,59-8.63,112.48,12.24,165.56,35.4C827.93,77.22,886,95.24,951.2,90c86.53-7,172.46-45.71,248.8-84.81V0Z" fill="%230089d9"/></svg>') repeat-x; | |
| background-size: 1200px 100px; | |
| animation: wave 15s linear infinite; | |
| } | |
| @keyframes wave { | |
| 0% { background-position-x: 0; } | |
| 100% { background-position-x: 1200px; } | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen flex flex-col"> | |
| <!-- Header --> | |
| <header class="bg-blue-600 text-white shadow-lg water-wave"> | |
| <div class="container mx-auto px-4 py-6"> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex items-center space-x-2"> | |
| <i data-feather="droplet" class="w-8 h-8"></i> | |
| <h1 class="text-2xl font-bold">Yadgir Water Supply</h1> | |
| </div> | |
| <nav class="hidden md:flex space-x-8"> | |
| <a href="#" class="hover:text-blue-200 font-medium">Home</a> | |
| <a href="complaints.html" class="hover:text-blue-200 font-medium">File Complaint</a> | |
| <a href="track.html" class="hover:text-blue-200 font-medium">Track Complaint</a> | |
| <a href="about.html" class="hover:text-blue-200 font-medium">About</a> | |
| </nav> | |
| <button class="md:hidden" id="mobile-menu-button"> | |
| <i data-feather="menu" class="w-6 h-6"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Hero Section --> | |
| <section class="bg-gradient-to-r from-blue-500 to-blue-700 text-white py-20"> | |
| <div class="container mx-auto px-4 text-center" data-aos="fade-up"> | |
| <h1 class="text-4xl md:text-5xl font-bold mb-6">Water Supply Complaint Management System</h1> | |
| <p class="text-xl mb-8 max-w-2xl mx-auto">A digital platform for residents of Yadgir District to report and track water supply issues efficiently.</p> | |
| <div class="flex flex-col sm:flex-row justify-center gap-4"> | |
| <a href="complaints.html" class="bg-white text-blue-600 hover:bg-blue-50 font-bold py-3 px-6 rounded-lg shadow-lg transition duration-300">File a Complaint</a> | |
| <a href="track.html" class="bg-blue-800 hover:bg-blue-900 font-bold py-3 px-6 rounded-lg shadow-lg transition duration-300">Track Complaint</a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Features Section --> | |
| <section class="py-16 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">How It Works</h2> | |
| <div class="grid md:grid-cols-3 gap-8"> | |
| <div class="bg-blue-50 p-6 rounded-xl shadow-md hover:shadow-lg transition duration-300" data-aos="fade-up"> | |
| <div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mb-4 mx-auto"> | |
| <i data-feather="edit" class="w-8 h-8 text-blue-600"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold text-center mb-3 text-gray-800">File Complaint</h3> | |
| <p class="text-gray-600 text-center">Report water supply issues quickly through our simple online form with location tracking.</p> | |
| </div> | |
| <div class="bg-blue-50 p-6 rounded-xl shadow-md hover:shadow-lg transition duration-300" data-aos="fade-up" data-aos-delay="100"> | |
| <div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mb-4 mx-auto"> | |
| <i data-feather="clock" class="w-8 h-8 text-blue-600"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold text-center mb-3 text-gray-800">Real-time Tracking</h3> | |
| <p class="text-gray-600 text-center">Monitor your complaint status in real-time with SMS and email notifications.</p> | |
| </div> | |
| <div class="bg-blue-50 p-6 rounded-xl shadow-md hover:shadow-lg transition duration-300" data-aos="fade-up" data-aos-delay="200"> | |
| <div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mb-4 mx-auto"> | |
| <i data-feather="check-circle" class="w-8 h-8 text-blue-600"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold text-center mb-3 text-gray-800">Resolution</h3> | |
| <p class="text-gray-600 text-center">Our team works diligently to resolve issues with transparent progress updates.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Stats Section --> | |
| <section class="py-16 bg-blue-600 text-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid md:grid-cols-4 gap-8 text-center"> | |
| <div data-aos="fade-up"> | |
| <div class="text-4xl font-bold mb-2">1,250+</div> | |
| <div class="text-blue-100">Complaints Resolved</div> | |
| </div> | |
| <div data-aos="fade-up" data-aos-delay="100"> | |
| <div class="text-4xl font-bold mb-2">98%</div> | |
| <div class="text-blue-100">Satisfaction Rate</div> | |
| </div> | |
| <div data-aos="fade-up" data-aos-delay="200"> | |
| <div class="text-4xl font-bold mb-2">24h</div> | |
| <div class="text-blue-100">Average Resolution Time</div> | |
| </div> | |
| <div data-aos="fade-up" data-aos-delay="300"> | |
| <div class="text-4xl font-bold mb-2">15+</div> | |
| <div class="text-blue-100">Villages Covered</div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- App Download Section --> | |
| <section class="py-16 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-8 md:mb-0" data-aos="fade-right"> | |
| <h2 class="text-3xl font-bold mb-4 text-gray-800">Download Our Mobile App</h2> | |
| <p class="text-gray-600 mb-6">Manage your water supply complaints on the go with our Android application available on the Play Store.</p> | |
| <div class="flex flex-col sm:flex-row gap-4"> | |
| <a href="#" class="flex items-center bg-gray-800 hover:bg-gray-900 text-white py-3 px-6 rounded-lg shadow transition duration-300"> | |
| <i data-feather="download" class="mr-2"></i> | |
| <div> | |
| <div class="text-xs">GET IT ON</div> | |
| <div class="font-bold">Google Play</div> | |
| </div> | |
| </a> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2 flex justify-center" data-aos="fade-left"> | |
| <img src="https://via.placeholder.com/300x500" alt="Mobile App Screenshot" class="rounded-lg shadow-xl max-h-96"> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-gray-800 text-white py-8 mt-auto"> | |
| <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">Yadgir Water Supply</h3> | |
| <p class="text-gray-400">A DBOT project for efficient water supply complaint management in Yadgir District, Karnataka.</p> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-4">Quick Links</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Home</a></li> | |
| <li><a href="complaints.html" class="text-gray-400 hover:text-white transition">File Complaint</a></li> | |
| <li><a href="track.html" class="text-gray-400 hover:text-white transition">Track Complaint</a></li> | |
| <li><a href="about.html" class="text-gray-400 hover:text-white transition">About Us</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-4">Contact</h4> | |
| <ul class="space-y-2 text-gray-400"> | |
| <li class="flex items-center"><i data-feather="mail" class="w-4 h-4 mr-2"></i> complaints@yadgirwater.org</li> | |
| <li class="flex items-center"><i data-feather="phone" class="w-4 h-4 mr-2"></i> 080-23456789</li> | |
| <li class="flex items-center"><i data-feather="map-pin" class="w-4 h-4 mr-2"></i> Yadgir, Karnataka</li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-4">Follow Us</h4> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="text-gray-400 hover:text-white transition"><i data-feather="facebook"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white transition"><i data-feather="twitter"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white transition"><i data-feather="instagram"></i></a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-700 mt-8 pt-6 text-center text-gray-400"> | |
| <p>© 2023 Yadgir Water Supply DBOT Project. All rights reserved.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <!-- Mobile Menu --> | |
| <div id="mobile-menu" class="fixed inset-0 bg-black bg-opacity-75 z-50 hidden"> | |
| <div class="absolute right-0 top-0 w-64 h-full bg-white shadow-lg"> | |
| <div class="p-4 flex justify-end"> | |
| <button id="close-mobile-menu"> | |
| <i data-feather="x" class="w-6 h-6"></i> | |
| </button> | |
| </div> | |
| <nav class="flex flex-col p-4 space-y-4"> | |
| <a href="#" class="text-gray-800 hover:text-blue-600 font-medium py-2">Home</a> | |
| <a href="complaints.html" class="text-gray-800 hover:text-blue-600 font-medium py-2">File Complaint</a> | |
| <a href="track.html" class="text-gray-800 hover:text-blue-600 font-medium py-2">Track Complaint</a> | |
| <a href="about.html" class="text-gray-800 hover:text-blue-600 font-medium py-2">About</a> | |
| </nav> | |
| </div> | |
| </div> | |
| <script> | |
| AOS.init(); | |
| feather.replace(); | |
| // Mobile menu toggle | |
| const mobileMenuButton = document.getElementById('mobile-menu-button'); | |
| const mobileMenu = document.getElementById('mobile-menu'); | |
| const closeMobileMenu = document.getElementById('close-mobile-menu'); | |
| mobileMenuButton.addEventListener('click', () => { | |
| mobileMenu.classList.remove('hidden'); | |
| }); | |
| closeMobileMenu.addEventListener('click', () => { | |
| mobileMenu.classList.add('hidden'); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |