Hugging Face's logo

Spaces:
Nagadevan
/
rwssdcomplient
Running

App Files Community
Nagadevan commited on
Commit
dfd5bc8
·
verified ·
1 Parent(s): 407f01d

create android apps and website for customer complaints management and redressal system for water supply Infrastructure DBOT project in yadgir district in karnataka. - Initial Deployment

Browse files
Files changed (5) hide show
  1. README.md +6 -4
  2. about.html +271 -0
  3. complaints.html +247 -0
  4. index.html +225 -18
  5. track.html +293 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Rwssdcomplient
3
- emoji: 🐢
4
- colorFrom: green
5
  colorTo: pink
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: rwssdcomplient
3
+ emoji: 🐳
4
+ colorFrom: pink
5
  colorTo: pink
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
about.html ADDED
@@ -0,0 +1,271 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>About - Yadgir Water Supply</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
9
+ <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
11
+ <script src="https://unpkg.com/feather-icons"></script>
12
+ <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
13
+ <style>
14
+ body {
15
+ font-family: 'Poppins', sans-serif;
16
+ }
17
+ .team-member:hover img {
18
+ transform: scale(1.05);
19
+ }
20
+ </style>
21
+ </head>
22
+ <body class="bg-gray-50">
23
+ <!-- Header -->
24
+ <header class="bg-blue-600 text-white shadow-lg">
25
+ <div class="container mx-auto px-4 py-6">
26
+ <div class="flex justify-between items-center">
27
+ <div class="flex items-center space-x-2">
28
+ <i data-feather="droplet" class="w-8 h-8"></i>
29
+ <h1 class="text-2xl font-bold">Yadgir Water Supply</h1>
30
+ </div>
31
+ <nav class="hidden md:flex space-x-8">
32
+ <a href="index.html" class="hover:text-blue-200 font-medium">Home</a>
33
+ <a href="complaints.html" class="hover:text-blue-200 font-medium">File Complaint</a>
34
+ <a href="track.html" class="hover:text-blue-200 font-medium">Track Complaint</a>
35
+ <a href="#" class="text-blue-200 font-medium">About</a>
36
+ </nav>
37
+ <button class="md:hidden" id="mobile-menu-button">
38
+ <i data-feather="menu" class="w-6 h-6"></i>
39
+ </button>
40
+ </div>
41
+ </div>
42
+ </header>
43
+
44
+ <!-- Main Content -->
45
+ <main class="container mx-auto px-4 py-8">
46
+ <!-- About Section -->
47
+ <section class="mb-16">
48
+ <div class="max-w-4xl mx-auto bg-white rounded-xl shadow-md overflow-hidden" data-aos="fade-up">
49
+ <div class="bg-blue-600 text-white p-6">
50
+ <h1 class="text-2xl font-bold">About Yadgir Water Supply DBOT Project</h1>
51
+ </div>
52
+
53
+ <div class="p-6 space-y-6">
54
+ <div class="flex flex-col md:flex-row gap-6">
55
+ <div class="md:w-1/2">
56
+ <img src="https://via.placeholder.com/600x400" alt="Water Supply Project" class="rounded-lg shadow-md w-full">
57
+ </div>
58
+ <div class="md:w-1/2">
59
+ <h2 class="text-xl font-bold text-gray-800 mb-4">Our Mission</h2>
60
+ <p class="text-gray-600 mb-4">To provide reliable, clean, and sustainable water supply to all residents of Yadgir District through innovative infrastructure development and efficient complaint management systems.</p>
61
+ <p class="text-gray-600">The DBOT (Design, Build, Operate, Transfer) model ensures that the water supply infrastructure is developed with the highest standards and maintained effectively throughout the project lifecycle.</p>
62
+ </div>
63
+ </div>
64
+
65
+ <div class="bg-blue-50 p-6 rounded-lg">
66
+ <h2 class="text-xl font-bold text-gray-800 mb-4">Project Highlights</h2>
67
+ <ul class="space-y-3">
68
+ <li class="flex items-start">
69
+ <i data-feather="check-circle" class="w-5 h-5 text-blue-600 mt-1 mr-2"></i>
70
+ <span class="text-gray-700">Coverage of 15+ villages in Yadgir District</span>
71
+ </li>
72
+ <li class="flex items-start">
73
+ <i data-feather="check-circle" class="w-5 h-5 text-blue-600 mt-1 mr-2"></i>
74
+ <span class="text-gray-700">24/7 complaint management system</span>
75
+ </li>
76
+ <li class="flex items-start">
77
+ <i data-feather="check-circle" class="w-5 h-5 text-blue-600 mt-1 mr-2"></i>
78
+ <span class="text-gray-700">Average resolution time under 24 hours</span>
79
+ </li>
80
+ <li class="flex items-start">
81
+ <i data-feather="check-circle" class="w-5 h-5 text-blue-600 mt-1 mr-2"></i>
82
+ <span class="text-gray-700">Transparent tracking system for all complaints</span>
83
+ </li>
84
+ <li class="flex items-start">
85
+ <i data-feather="check-circle" class="w-5 h-5 text-blue-600 mt-1 mr-2"></i>
86
+ <span class="text-gray-700">Mobile app for convenient access</span>
87
+ </li>
88
+ </ul>
89
+ </div>
90
+ </div>
91
+ </div>
92
+ </section>
93
+
94
+ <!-- Team Section -->
95
+ <section class="mb-16">
96
+ <div class="max-w-4xl mx-auto">
97
+ <h2 class="text-2xl font-bold text-center mb-8 text-gray-800">Our Team</h2>
98
+ <div class="grid md:grid-cols-3 gap-6">
99
+ <div class="team-member bg-white rounded-xl shadow-md overflow-hidden transition duration-300 hover:shadow-lg" data-aos="fade-up">
100
+ <img src="https://via.placeholder.com/400x300" alt="Team Member" class="w-full h-48 object-cover">
101
+ <div class="p-6">
102
+ <h3 class="text-lg font-bold text-gray-800">Dr. Rajesh Kumar</h3>
103
+ <p class="text-blue-600 mb-2">Project Director</p>
104
+ <p class="text-gray-600 text-sm">With over 15 years of experience in water infrastructure projects across Karnataka.</p>
105
+ </div>
106
+ </div>
107
+ <div class="team-member bg-white rounded-xl shadow-md overflow-hidden transition duration-300 hover:shadow-lg" data-aos="fade-up" data-aos-delay="100">
108
+ <img src="https://via.placeholder.com/400x300" alt="Team Member" class="w-full h-48 object-cover">
109
+ <div class="p-6">
110
+ <h3 class="text-lg font-bold text-gray-800">Priya Sharma</h3>
111
+ <p class="text-blue-600 mb-2">Operations Manager</p>
112
+ <p class="text-gray-600 text-sm">Specializes in complaint management systems and customer service excellence.</p>
113
+ </div>
114
+ </div>
115
+ <div class="team-member bg-white rounded-xl shadow-md overflow-hidden transition duration-300 hover:shadow-lg" data-aos="fade-up" data-aos-delay="200">
116
+ <img src="https://via.placeholder.com/400x300" alt="Team Member" class="w-full h-48 object-cover">
117
+ <div class="p-6">
118
+ <h3 class="text-lg font-bold text-gray-800">Mahesh Patel</h3>
119
+ <p class="text-blue-600 mb-2">Field Supervisor</p>
120
+ <p class="text-gray-600 text-sm">Leads our on-ground team of technicians for quick resolution of water supply issues.</p>
121
+ </div>
122
+ </div>
123
+ </div>
124
+ </div>
125
+ </section>
126
+
127
+ <!-- Contact Section -->
128
+ <section>
129
+ <div class="max-w-4xl mx-auto bg-white rounded-xl shadow-md overflow-hidden" data-aos="fade-up">
130
+ <div class="bg-blue-600 text-white p-6">
131
+ <h1 class="text-2xl font-bold">Contact Us</h1>
132
+ </div>
133
+
134
+ <div class="p-6">
135
+ <div class="grid md:grid-cols-2 gap-8">
136
+ <div>
137
+ <h2 class="text-xl font-bold text-gray-800 mb-4">Get In Touch</h2>
138
+ <div class="space-y-4">
139
+ <div class="flex items-start">
140
+ <i data-feather="mail" class="w-5 h-5 text-blue-600 mt-1 mr-3"></i>
141
+ <div>
142
+ <h3 class="font-medium text-gray-800">Email</h3>
143
+ <p class="text-gray-600">complaints@yadgirwater.org</p>
144
+ </div>
145
+ </div>
146
+ <div class="flex items-start">
147
+ <i data-feather="phone" class="w-5 h-5 text-blue-600 mt-1 mr-3"></i>
148
+ <div>
149
+ <h3 class="font-medium text-gray-800">Phone</h3>
150
+ <p class="text-gray-600">080-23456789 (Office)</p>
151
+ <p class="text-gray-600">9876543210 (24/7 Helpline)</p>
152
+ </div>
153
+ </div>
154
+ <div class="flex items-start">
155
+ <i data-feather="map-pin" class="w-5 h-5 text-blue-600 mt-1 mr-3"></i>
156
+ <div>
157
+ <h3 class="font-medium text-gray-800">Address</h3>
158
+ <p class="text-gray-600">Yadgir Water Supply Project Office</p>
159
+ <p class="text-gray-600">Near DC Office, Yadgir</p>
160
+ <p class="text-gray-600">Karnataka - 585201</p>
161
+ </div>
162
+ </div>
163
+ </div>
164
+ </div>
165
+
166
+ <div>
167
+ <h2 class="text-xl font-bold text-gray-800 mb-4">Send Us a Message</h2>
168
+ <form class="space-y-4">
169
+ <div>
170
+ <label for="contact-name" class="block text-gray-700 font-medium mb-1">Name</label>
171
+ <input type="text" id="contact-name" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
172
+ </div>
173
+ <div>
174
+ <label for="contact-email" class="block text-gray-700 font-medium mb-1">Email</label>
175
+ <input type="email" id="contact-email" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
176
+ </div>
177
+ <div>
178
+ <label for="contact-subject" class="block text-gray-700 font-medium mb-1">Subject</label>
179
+ <input type="text" id="contact-subject" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
180
+ </div>
181
+ <div>
182
+ <label for="contact-message" class="block text-gray-700 font-medium mb-1">Message</label>
183
+ <textarea id="contact-message" rows="3" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"></textarea>
184
+ </div>
185
+ <button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-6 rounded-lg shadow-md transition duration-300">
186
+ Send Message
187
+ </button>
188
+ </form>
189
+ </div>
190
+ </div>
191
+ </div>
192
+ </div>
193
+ </section>
194
+ </main>
195
+
196
+ <!-- Footer -->
197
+ <footer class="bg-gray-800 text-white py-8 mt-12">
198
+ <div class="container mx-auto px-4">
199
+ <div class="grid md:grid-cols-4 gap-8">
200
+ <div>
201
+ <h3 class="text-xl font-bold mb-4">Yadgir Water Supply</h3>
202
+ <p class="text-gray-400">A DBOT project for efficient water supply complaint management in Yadgir District, Karnataka.</p>
203
+ </div>
204
+ <div>
205
+ <h4 class="font-bold mb-4">Quick Links</h4>
206
+ <ul class="space-y-2">
207
+ <li><a href="index.html" class="text-gray-400 hover:text-white transition">Home</a></li>
208
+ <li><a href="complaints.html" class="text-gray-400 hover:text-white transition">File Complaint</a></li>
209
+ <li><a href="track.html" class="text-gray-400 hover:text-white transition">Track Complaint</a></li>
210
+ <li><a href="#" class="text-gray-400 hover:text-white transition">About Us</a></li>
211
+ </ul>
212
+ </div>
213
+ <div>
214
+ <h4 class="font-bold mb-4">Contact</h4>
215
+ <ul class="space-y-2 text-gray-400">
216
+ <li class="flex items-center"><i data-feather="mail" class="w-4 h-4 mr-2"></i> complaints@yadgirwater.org</li>
217
+ <li class="flex items-center"><i data-feather="phone" class="w-4 h-4 mr-2"></i> 080-23456789</li>
218
+ <li class="flex items-center"><i data-feather="map-pin" class="w-4 h-4 mr-2"></i> Yadgir, Karnataka</li>
219
+ </ul>
220
+ </div>
221
+ <div>
222
+ <h4 class="font-bold mb-4">Follow Us</h4>
223
+ <div class="flex space-x-4">
224
+ <a href="#" class="text-gray-400 hover:text-white transition"><i data-feather="facebook"></i></a>
225
+ <a href="#" class="text-gray-400 hover:text-white transition"><i data-feather="twitter"></i></a>
226
+ <a href="#" class="text-gray-400 hover:text-white transition"><i data-feather="instagram"></i></a>
227
+ </div>
228
+ </div>
229
+ </div>
230
+ <div class="border-t border-gray-700 mt-8 pt-6 text-center text-gray-400">
231
+ <p>&copy; 2023 Yadgir Water Supply DBOT Project. All rights reserved.</p>
232
+ </div>
233
+ </div>
234
+ </footer>
235
+
236
+ <!-- Mobile Menu -->
237
+ <div id="mobile-menu" class="fixed inset-0 bg-black bg-opacity-75 z-50 hidden">
238
+ <div class="absolute right-0 top-0 w-64 h-full bg-white shadow-lg">
239
+ <div class="p-4 flex justify-end">
240
+ <button id="close-mobile-menu">
241
+ <i data-feather="x" class="w-6 h-6"></i>
242
+ </button>
243
+ </div>
244
+ <nav class="flex flex-col p-4 space-y-4">
245
+ <a href="index.html" class="text-gray-800 hover:text-blue-600 font-medium py-2">Home</a>
246
+ <a href="complaints.html" class="text-gray-800 hover:text-blue-600 font-medium py-2">File Complaint</a>
247
+ <a href="track.html" class="text-gray-800 hover:text-blue-600 font-medium py-2">Track Complaint</a>
248
+ <a href="#" class="text-blue-600 font-medium py-2">About</a>
249
+ </nav>
250
+ </div>
251
+ </div>
252
+
253
+ <script>
254
+ AOS.init();
255
+ feather.replace();
256
+
257
+ // Mobile menu toggle
258
+ const mobileMenuButton = document.getElementById('mobile-menu-button');
259
+ const mobileMenu = document.getElementById('mobile-menu');
260
+ const closeMobileMenu = document.getElementById('close-mobile-menu');
261
+
262
+ mobileMenuButton.addEventListener('click', () => {
263
+ mobileMenu.classList.remove('hidden');
264
+ });
265
+
266
+ closeMobileMenu.addEventListener('click', () => {
267
+ mobileMenu.classList.add('hidden');
268
+ });
269
+ </script>
270
+ </body>
271
+ </html>
complaints.html ADDED
@@ -0,0 +1,247 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>File Complaint - Yadgir Water Supply</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
9
+ <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
11
+ <script src="https://unpkg.com/feather-icons"></script>
12
+ <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
13
+ <style>
14
+ body {
15
+ font-family: 'Poppins', sans-serif;
16
+ }
17
+ .map-container {
18
+ height: 300px;
19
+ width: 100%;
20
+ }
21
+ </style>
22
+ </head>
23
+ <body class="bg-gray-50">
24
+ <!-- Header -->
25
+ <header class="bg-blue-600 text-white shadow-lg">
26
+ <div class="container mx-auto px-4 py-6">
27
+ <div class="flex justify-between items-center">
28
+ <div class="flex items-center space-x-2">
29
+ <i data-feather="droplet" class="w-8 h-8"></i>
30
+ <h1 class="text-2xl font-bold">Yadgir Water Supply</h1>
31
+ </div>
32
+ <nav class="hidden md:flex space-x-8">
33
+ <a href="index.html" class="hover:text-blue-200 font-medium">Home</a>
34
+ <a href="#" class="text-blue-200 font-medium">File Complaint</a>
35
+ <a href="track.html" class="hover:text-blue-200 font-medium">Track Complaint</a>
36
+ <a href="about.html" class="hover:text-blue-200 font-medium">About</a>
37
+ </nav>
38
+ <button class="md:hidden" id="mobile-menu-button">
39
+ <i data-feather="menu" class="w-6 h-6"></i>
40
+ </button>
41
+ </div>
42
+ </div>
43
+ </header>
44
+
45
+ <!-- Main Content -->
46
+ <main class="container mx-auto px-4 py-8">
47
+ <div class="max-w-4xl mx-auto bg-white rounded-xl shadow-md overflow-hidden" data-aos="fade-up">
48
+ <div class="bg-blue-600 text-white p-6">
49
+ <h1 class="text-2xl font-bold">File a Water Supply Complaint</h1>
50
+ <p class="mt-2">Report issues with water supply in your area</p>
51
+ </div>
52
+
53
+ <form class="p-6 space-y-6">
54
+ <div class="grid md:grid-cols-2 gap-6">
55
+ <div>
56
+ <label for="name" class="block text-gray-700 font-medium mb-2">Full Name</label>
57
+ <input type="text" id="name" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" required>
58
+ </div>
59
+ <div>
60
+ <label for="phone" class="block text-gray-700 font-medium mb-2">Phone Number</label>
61
+ <input type="tel" id="phone" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" required>
62
+ </div>
63
+ </div>
64
+
65
+ <div>
66
+ <label for="email" class="block text-gray-700 font-medium mb-2">Email Address</label>
67
+ <input type="email" id="email" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
68
+ </div>
69
+
70
+ <div class="grid md:grid-cols-2 gap-6">
71
+ <div>
72
+ <label for="village" class="block text-gray-700 font-medium mb-2">Village/Town</label>
73
+ <select id="village" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" required>
74
+ <option value="">Select your village</option>
75
+ <option value="yadgir">Yadgir</option>
76
+ <option value="shahapur">Shahapur</option>
77
+ <option value="gurmitkal">Gurmitkal</option>
78
+ <option value="hunsagi">Hunsagi</option>
79
+ <option value="other">Other</option>
80
+ </select>
81
+ </div>
82
+ <div>
83
+ <label for="ward" class="block text-gray-700 font-medium mb-2">Ward Number</label>
84
+ <input type="text" id="ward" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
85
+ </div>
86
+ </div>
87
+
88
+ <div>
89
+ <label for="address" class="block text-gray-700 font-medium mb-2">Full Address</label>
90
+ <textarea id="address" rows="3" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" required></textarea>
91
+ </div>
92
+
93
+ <div>
94
+ <label class="block text-gray-700 font-medium mb-2">Select Complaint Type</label>
95
+ <div class="grid md:grid-cols-2 gap-4">
96
+ <label class="flex items-center space-x-3 bg-gray-50 p-4 rounded-lg cursor-pointer hover:bg-gray-100">
97
+ <input type="radio" name="complaintType" value="no_water" class="h-5 w-5 text-blue-600">
98
+ <span>No Water Supply</span>
99
+ </label>
100
+ <label class="flex items-center space-x-3 bg-gray-50 p-4 rounded-lg cursor-pointer hover:bg-gray-100">
101
+ <input type="radio" name="complaintType" value="low_pressure" class="h-5 w-5 text-blue-600">
102
+ <span>Low Water Pressure</span>
103
+ </label>
104
+ <label class="flex items-center space-x-3 bg-gray-50 p-4 rounded-lg cursor-pointer hover:bg-gray-100">
105
+ <input type="radio" name="complaintType" value="leakage" class="h-5 w-5 text-blue-600">
106
+ <span>Pipe Leakage</span>
107
+ </label>
108
+ <label class="flex items-center space-x-3 bg-gray-50 p-4 rounded-lg cursor-pointer hover:bg-gray-100">
109
+ <input type="radio" name="complaintType" value="quality" class="h-5 w-5 text-blue-600">
110
+ <span>Water Quality Issue</span>
111
+ </label>
112
+ <label class="flex items-center space-x-3 bg-gray-50 p-4 rounded-lg cursor-pointer hover:bg-gray-100">
113
+ <input type="radio" name="complaintType" value="other" class="h-5 w-5 text-blue-600">
114
+ <span>Other Issue</span>
115
+ </label>
116
+ </div>
117
+ </div>
118
+
119
+ <div>
120
+ <label for="description" class="block text-gray-700 font-medium mb-2">Complaint Description</label>
121
+ <textarea id="description" rows="4" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" placeholder="Please describe your issue in detail..." required></textarea>
122
+ </div>
123
+
124
+ <div>
125
+ <label class="block text-gray-700 font-medium mb-2">Location on Map</label>
126
+ <div class="map-container bg-gray-200 rounded-lg mb-2" id="map">
127
+ <!-- Map will be loaded here -->
128
+ </div>
129
+ <button type="button" class="text-blue-600 hover:text-blue-800 flex items-center">
130
+ <i data-feather="map-pin" class="w-4 h-4 mr-1"></i>
131
+ <span>Use Current Location</span>
132
+ </button>
133
+ </div>
134
+
135
+ <div>
136
+ <label for="photo" class="block text-gray-700 font-medium mb-2">Upload Photo (Optional)</label>
137
+ <div class="flex items-center justify-center w-full">
138
+ <label class="flex flex-col items-center justify-center w-full h-32 border-2 border-gray-300 border-dashed rounded-lg cursor-pointer bg-gray-50 hover:bg-gray-100">
139
+ <div class="flex flex-col items-center justify-center pt-5 pb-6">
140
+ <i data-feather="upload" class="w-8 h-8 text-gray-500 mb-2"></i>
141
+ <p class="text-sm text-gray-500">Click to upload or drag and drop</p>
142
+ </div>
143
+ <input id="photo" type="file" class="hidden" accept="image/*">
144
+ </label>
145
+ </div>
146
+ </div>
147
+
148
+ <div class="flex items-center">
149
+ <input id="terms" type="checkbox" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded" required>
150
+ <label for="terms" class="ml-2 block text-sm text-gray-700">
151
+ I agree to the <a href="#" class="text-blue-600 hover:text-blue-800">terms and conditions</a>
152
+ </label>
153
+ </div>
154
+
155
+ <div class="pt-4">
156
+ <button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-4 rounded-lg shadow-md transition duration-300 flex items-center justify-center">
157
+ <i data-feather="send" class="w-5 h-5 mr-2"></i>
158
+ Submit Complaint
159
+ </button>
160
+ </div>
161
+ </form>
162
+ </div>
163
+ </main>
164
+
165
+ <!-- Footer -->
166
+ <footer class="bg-gray-800 text-white py-8 mt-12">
167
+ <div class="container mx-auto px-4">
168
+ <div class="grid md:grid-cols-4 gap-8">
169
+ <div>
170
+ <h3 class="text-xl font-bold mb-4">Yadgir Water Supply</h3>
171
+ <p class="text-gray-400">A DBOT project for efficient water supply complaint management in Yadgir District, Karnataka.</p>
172
+ </div>
173
+ <div>
174
+ <h4 class="font-bold mb-4">Quick Links</h4>
175
+ <ul class="space-y-2">
176
+ <li><a href="index.html" class="text-gray-400 hover:text-white transition">Home</a></li>
177
+ <li><a href="#" class="text-gray-400 hover:text-white transition">File Complaint</a></li>
178
+ <li><a href="track.html" class="text-gray-400 hover:text-white transition">Track Complaint</a></li>
179
+ <li><a href="about.html" class="text-gray-400 hover:text-white transition">About Us</a></li>
180
+ </ul>
181
+ </div>
182
+ <div>
183
+ <h4 class="font-bold mb-4">Contact</h4>
184
+ <ul class="space-y-2 text-gray-400">
185
+ <li class="flex items-center"><i data-feather="mail" class="w-4 h-4 mr-2"></i> complaints@yadgirwater.org</li>
186
+ <li class="flex items-center"><i data-feather="phone" class="w-4 h-4 mr-2"></i> 080-23456789</li>
187
+ <li class="flex items-center"><i data-feather="map-pin" class="w-4 h-4 mr-2"></i> Yadgir, Karnataka</li>
188
+ </ul>
189
+ </div>
190
+ <div>
191
+ <h4 class="font-bold mb-4">Follow Us</h4>
192
+ <div class="flex space-x-4">
193
+ <a href="#" class="text-gray-400 hover:text-white transition"><i data-feather="facebook"></i></a>
194
+ <a href="#" class="text-gray-400 hover:text-white transition"><i data-feather="twitter"></i></a>
195
+ <a href="#" class="text-gray-400 hover:text-white transition"><i data-feather="instagram"></i></a>
196
+ </div>
197
+ </div>
198
+ </div>
199
+ <div class="border-t border-gray-700 mt-8 pt-6 text-center text-gray-400">
200
+ <p>&copy; 2023 Yadgir Water Supply DBOT Project. All rights reserved.</p>
201
+ </div>
202
+ </div>
203
+ </footer>
204
+
205
+ <!-- Mobile Menu -->
206
+ <div id="mobile-menu" class="fixed inset-0 bg-black bg-opacity-75 z-50 hidden">
207
+ <div class="absolute right-0 top-0 w-64 h-full bg-white shadow-lg">
208
+ <div class="p-4 flex justify-end">
209
+ <button id="close-mobile-menu">
210
+ <i data-feather="x" class="w-6 h-6"></i>
211
+ </button>
212
+ </div>
213
+ <nav class="flex flex-col p-4 space-y-4">
214
+ <a href="index.html" class="text-gray-800 hover:text-blue-600 font-medium py-2">Home</a>
215
+ <a href="#" class="text-blue-600 font-medium py-2">File Complaint</a>
216
+ <a href="track.html" class="text-gray-800 hover:text-blue-600 font-medium py-2">Track Complaint</a>
217
+ <a href="about.html" class="text-gray-800 hover:text-blue-600 font-medium py-2">About</a>
218
+ </nav>
219
+ </div>
220
+ </div>
221
+
222
+ <script>
223
+ AOS.init();
224
+ feather.replace();
225
+
226
+ // Mobile menu toggle
227
+ const mobileMenuButton = document.getElementById('mobile-menu-button');
228
+ const mobileMenu = document.getElementById('mobile-menu');
229
+ const closeMobileMenu = document.getElementById('close-mobile-menu');
230
+
231
+ mobileMenuButton.addEventListener('click', () => {
232
+ mobileMenu.classList.remove('hidden');
233
+ });
234
+
235
+ closeMobileMenu.addEventListener('click', () => {
236
+ mobileMenu.classList.add('hidden');
237
+ });
238
+
239
+ // Simple map initialization placeholder
240
+ document.addEventListener('DOMContentLoaded', function() {
241
+ const mapElement = document.getElementById('map');
242
+ mapElement.innerHTML = '<div class="flex items-center justify-center h-full text-gray-500"><i data-feather="map" class="w-12 h-12 mr-2"></i><span>Map will load here</span></div>';
243
+ feather.replace();
244
+ });
245
+ </script>
246
+ </body>
247
+ </html>
index.html CHANGED
@@ -1,19 +1,226 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
19
  </html>
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Yadgir Water Supply - Complaint Management</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
9
+ <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
11
+ <script src="https://unpkg.com/feather-icons"></script>
12
+ <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
13
+ <style>
14
+ body {
15
+ font-family: 'Poppins', sans-serif;
16
+ background-color: #f0f9ff;
17
+ }
18
+ .water-wave {
19
+ position: relative;
20
+ overflow: hidden;
21
+ }
22
+ .water-wave::after {
23
+ content: "";
24
+ position: absolute;
25
+ bottom: 0;
26
+ left: 0;
27
+ right: 0;
28
+ height: 20px;
29
+ 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;
30
+ background-size: 1200px 100px;
31
+ animation: wave 15s linear infinite;
32
+ }
33
+ @keyframes wave {
34
+ 0% { background-position-x: 0; }
35
+ 100% { background-position-x: 1200px; }
36
+ }
37
+ </style>
38
+ </head>
39
+ <body class="min-h-screen flex flex-col">
40
+ <!-- Header -->
41
+ <header class="bg-blue-600 text-white shadow-lg water-wave">
42
+ <div class="container mx-auto px-4 py-6">
43
+ <div class="flex justify-between items-center">
44
+ <div class="flex items-center space-x-2">
45
+ <i data-feather="droplet" class="w-8 h-8"></i>
46
+ <h1 class="text-2xl font-bold">Yadgir Water Supply</h1>
47
+ </div>
48
+ <nav class="hidden md:flex space-x-8">
49
+ <a href="#" class="hover:text-blue-200 font-medium">Home</a>
50
+ <a href="complaints.html" class="hover:text-blue-200 font-medium">File Complaint</a>
51
+ <a href="track.html" class="hover:text-blue-200 font-medium">Track Complaint</a>
52
+ <a href="about.html" class="hover:text-blue-200 font-medium">About</a>
53
+ </nav>
54
+ <button class="md:hidden" id="mobile-menu-button">
55
+ <i data-feather="menu" class="w-6 h-6"></i>
56
+ </button>
57
+ </div>
58
+ </div>
59
+ </header>
60
+
61
+ <!-- Hero Section -->
62
+ <section class="bg-gradient-to-r from-blue-500 to-blue-700 text-white py-20">
63
+ <div class="container mx-auto px-4 text-center" data-aos="fade-up">
64
+ <h1 class="text-4xl md:text-5xl font-bold mb-6">Water Supply Complaint Management System</h1>
65
+ <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>
66
+ <div class="flex flex-col sm:flex-row justify-center gap-4">
67
+ <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>
68
+ <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>
69
+ </div>
70
+ </div>
71
+ </section>
72
+
73
+ <!-- Features Section -->
74
+ <section class="py-16 bg-white">
75
+ <div class="container mx-auto px-4">
76
+ <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">How It Works</h2>
77
+ <div class="grid md:grid-cols-3 gap-8">
78
+ <div class="bg-blue-50 p-6 rounded-xl shadow-md hover:shadow-lg transition duration-300" data-aos="fade-up">
79
+ <div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mb-4 mx-auto">
80
+ <i data-feather="edit" class="w-8 h-8 text-blue-600"></i>
81
+ </div>
82
+ <h3 class="text-xl font-semibold text-center mb-3 text-gray-800">File Complaint</h3>
83
+ <p class="text-gray-600 text-center">Report water supply issues quickly through our simple online form with location tracking.</p>
84
+ </div>
85
+ <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">
86
+ <div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mb-4 mx-auto">
87
+ <i data-feather="clock" class="w-8 h-8 text-blue-600"></i>
88
+ </div>
89
+ <h3 class="text-xl font-semibold text-center mb-3 text-gray-800">Real-time Tracking</h3>
90
+ <p class="text-gray-600 text-center">Monitor your complaint status in real-time with SMS and email notifications.</p>
91
+ </div>
92
+ <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">
93
+ <div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mb-4 mx-auto">
94
+ <i data-feather="check-circle" class="w-8 h-8 text-blue-600"></i>
95
+ </div>
96
+ <h3 class="text-xl font-semibold text-center mb-3 text-gray-800">Resolution</h3>
97
+ <p class="text-gray-600 text-center">Our team works diligently to resolve issues with transparent progress updates.</p>
98
+ </div>
99
+ </div>
100
+ </div>
101
+ </section>
102
+
103
+ <!-- Stats Section -->
104
+ <section class="py-16 bg-blue-600 text-white">
105
+ <div class="container mx-auto px-4">
106
+ <div class="grid md:grid-cols-4 gap-8 text-center">
107
+ <div data-aos="fade-up">
108
+ <div class="text-4xl font-bold mb-2">1,250+</div>
109
+ <div class="text-blue-100">Complaints Resolved</div>
110
+ </div>
111
+ <div data-aos="fade-up" data-aos-delay="100">
112
+ <div class="text-4xl font-bold mb-2">98%</div>
113
+ <div class="text-blue-100">Satisfaction Rate</div>
114
+ </div>
115
+ <div data-aos="fade-up" data-aos-delay="200">
116
+ <div class="text-4xl font-bold mb-2">24h</div>
117
+ <div class="text-blue-100">Average Resolution Time</div>
118
+ </div>
119
+ <div data-aos="fade-up" data-aos-delay="300">
120
+ <div class="text-4xl font-bold mb-2">15+</div>
121
+ <div class="text-blue-100">Villages Covered</div>
122
+ </div>
123
+ </div>
124
+ </div>
125
+ </section>
126
+
127
+ <!-- App Download Section -->
128
+ <section class="py-16 bg-white">
129
+ <div class="container mx-auto px-4">
130
+ <div class="flex flex-col md:flex-row items-center">
131
+ <div class="md:w-1/2 mb-8 md:mb-0" data-aos="fade-right">
132
+ <h2 class="text-3xl font-bold mb-4 text-gray-800">Download Our Mobile App</h2>
133
+ <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>
134
+ <div class="flex flex-col sm:flex-row gap-4">
135
+ <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">
136
+ <i data-feather="download" class="mr-2"></i>
137
+ <div>
138
+ <div class="text-xs">GET IT ON</div>
139
+ <div class="font-bold">Google Play</div>
140
+ </div>
141
+ </a>
142
+ </div>
143
+ </div>
144
+ <div class="md:w-1/2 flex justify-center" data-aos="fade-left">
145
+ <img src="https://via.placeholder.com/300x500" alt="Mobile App Screenshot" class="rounded-lg shadow-xl max-h-96">
146
+ </div>
147
+ </div>
148
+ </div>
149
+ </section>
150
+
151
+ <!-- Footer -->
152
+ <footer class="bg-gray-800 text-white py-8 mt-auto">
153
+ <div class="container mx-auto px-4">
154
+ <div class="grid md:grid-cols-4 gap-8">
155
+ <div>
156
+ <h3 class="text-xl font-bold mb-4">Yadgir Water Supply</h3>
157
+ <p class="text-gray-400">A DBOT project for efficient water supply complaint management in Yadgir District, Karnataka.</p>
158
+ </div>
159
+ <div>
160
+ <h4 class="font-bold mb-4">Quick Links</h4>
161
+ <ul class="space-y-2">
162
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Home</a></li>
163
+ <li><a href="complaints.html" class="text-gray-400 hover:text-white transition">File Complaint</a></li>
164
+ <li><a href="track.html" class="text-gray-400 hover:text-white transition">Track Complaint</a></li>
165
+ <li><a href="about.html" class="text-gray-400 hover:text-white transition">About Us</a></li>
166
+ </ul>
167
+ </div>
168
+ <div>
169
+ <h4 class="font-bold mb-4">Contact</h4>
170
+ <ul class="space-y-2 text-gray-400">
171
+ <li class="flex items-center"><i data-feather="mail" class="w-4 h-4 mr-2"></i> complaints@yadgirwater.org</li>
172
+ <li class="flex items-center"><i data-feather="phone" class="w-4 h-4 mr-2"></i> 080-23456789</li>
173
+ <li class="flex items-center"><i data-feather="map-pin" class="w-4 h-4 mr-2"></i> Yadgir, Karnataka</li>
174
+ </ul>
175
+ </div>
176
+ <div>
177
+ <h4 class="font-bold mb-4">Follow Us</h4>
178
+ <div class="flex space-x-4">
179
+ <a href="#" class="text-gray-400 hover:text-white transition"><i data-feather="facebook"></i></a>
180
+ <a href="#" class="text-gray-400 hover:text-white transition"><i data-feather="twitter"></i></a>
181
+ <a href="#" class="text-gray-400 hover:text-white transition"><i data-feather="instagram"></i></a>
182
+ </div>
183
+ </div>
184
+ </div>
185
+ <div class="border-t border-gray-700 mt-8 pt-6 text-center text-gray-400">
186
+ <p>&copy; 2023 Yadgir Water Supply DBOT Project. All rights reserved.</p>
187
+ </div>
188
+ </div>
189
+ </footer>
190
+
191
+ <!-- Mobile Menu -->
192
+ <div id="mobile-menu" class="fixed inset-0 bg-black bg-opacity-75 z-50 hidden">
193
+ <div class="absolute right-0 top-0 w-64 h-full bg-white shadow-lg">
194
+ <div class="p-4 flex justify-end">
195
+ <button id="close-mobile-menu">
196
+ <i data-feather="x" class="w-6 h-6"></i>
197
+ </button>
198
+ </div>
199
+ <nav class="flex flex-col p-4 space-y-4">
200
+ <a href="#" class="text-gray-800 hover:text-blue-600 font-medium py-2">Home</a>
201
+ <a href="complaints.html" class="text-gray-800 hover:text-blue-600 font-medium py-2">File Complaint</a>
202
+ <a href="track.html" class="text-gray-800 hover:text-blue-600 font-medium py-2">Track Complaint</a>
203
+ <a href="about.html" class="text-gray-800 hover:text-blue-600 font-medium py-2">About</a>
204
+ </nav>
205
+ </div>
206
+ </div>
207
+
208
+ <script>
209
+ AOS.init();
210
+ feather.replace();
211
+
212
+ // Mobile menu toggle
213
+ const mobileMenuButton = document.getElementById('mobile-menu-button');
214
+ const mobileMenu = document.getElementById('mobile-menu');
215
+ const closeMobileMenu = document.getElementById('close-mobile-menu');
216
+
217
+ mobileMenuButton.addEventListener('click', () => {
218
+ mobileMenu.classList.remove('hidden');
219
+ });
220
+
221
+ closeMobileMenu.addEventListener('click', () => {
222
+ mobileMenu.classList.add('hidden');
223
+ });
224
+ </script>
225
+ </body>
226
  </html>
track.html ADDED
@@ -0,0 +1,293 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Track Complaint - Yadgir Water Supply</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
9
+ <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
11
+ <script src="https://unpkg.com/feather-icons"></script>
12
+ <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
13
+ <style>
14
+ body {
15
+ font-family: 'Poppins', sans-serif;
16
+ }
17
+ .status-pending {
18
+ border-left: 4px solid #f59e0b;
19
+ }
20
+ .status-inprogress {
21
+ border-left: 4px solid #3b82f6;
22
+ }
23
+ .status-resolved {
24
+ border-left: 4px solid #10b981;
25
+ }
26
+ .status-rejected {
27
+ border-left: 4px solid #ef4444;
28
+ }
29
+ </style>
30
+ </head>
31
+ <body class="bg-gray-50">
32
+ <!-- Header -->
33
+ <header class="bg-blue-600 text-white shadow-lg">
34
+ <div class="container mx-auto px-4 py-6">
35
+ <div class="flex justify-between items-center">
36
+ <div class="flex items-center space-x-2">
37
+ <i data-feather="droplet" class="w-8 h-8"></i>
38
+ <h1 class="text-2xl font-bold">Yadgir Water Supply</h1>
39
+ </div>
40
+ <nav class="hidden md:flex space-x-8">
41
+ <a href="index.html" class="hover:text-blue-200 font-medium">Home</a>
42
+ <a href="complaints.html" class="hover:text-blue-200 font-medium">File Complaint</a>
43
+ <a href="#" class="text-blue-200 font-medium">Track Complaint</a>
44
+ <a href="about.html" class="hover:text-blue-200 font-medium">About</a>
45
+ </nav>
46
+ <button class="md:hidden" id="mobile-menu-button">
47
+ <i data-feather="menu" class="w-6 h-6"></i>
48
+ </button>
49
+ </div>
50
+ </div>
51
+ </header>
52
+
53
+ <!-- Main Content -->
54
+ <main class="container mx-auto px-4 py-8">
55
+ <div class="max-w-4xl mx-auto">
56
+ <div class="bg-white rounded-xl shadow-md overflow-hidden mb-8" data-aos="fade-up">
57
+ <div class="bg-blue-600 text-white p-6">
58
+ <h1 class="text-2xl font-bold">Track Your Complaint</h1>
59
+ <p class="mt-2">Check the status of your submitted water supply complaint</p>
60
+ </div>
61
+
62
+ <div class="p-6">
63
+ <div class="mb-6">
64
+ <label for="complaintId" class="block text-gray-700 font-medium mb-2">Complaint ID</label>
65
+ <div class="flex">
66
+ <input type="text" id="complaintId" placeholder="Enter your complaint ID" class="flex-grow px-4 py-2 border border-gray-300 rounded-l-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
67
+ <button class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-r-lg transition duration-300">
68
+ Track
69
+ </button>
70
+ </div>
71
+ </div>
72
+
73
+ <div class="text-center">
74
+ <p class="text-gray-600">OR</p>
75
+ <button class="mt-4 text-blue-600 hover:text-blue-800 font-medium flex items-center justify-center mx-auto">
76
+ <i data-feather="smartphone" class="w-5 h-5 mr-2"></i>
77
+ Track using registered mobile number
78
+ </button>
79
+ </div>
80
+ </div>
81
+ </div>
82
+
83
+ <!-- Sample Complaint Status (hidden by default) -->
84
+ <div id="complaint-status" class="hidden bg-white rounded-xl shadow-md overflow-hidden" data-aos="fade-up">
85
+ <div class="p-6 border-b border-gray-200">
86
+ <div class="flex justify-between items-center">
87
+ <div>
88
+ <h2 class="text-xl font-bold text-gray-800">Complaint #WS2023001234</h2>
89
+ <p class="text-gray-600">Submitted on: 15 June 2023, 10:45 AM</p>
90
+ </div>
91
+ <span class="px-3 py-1 rounded-full text-sm font-medium bg-green-100 text-green-800">Resolved</span>
92
+ </div>
93
+ </div>
94
+
95
+ <div class="p-6">
96
+ <div class="mb-6">
97
+ <h3 class="text-lg font-semibold text-gray-800 mb-3">Complaint Details</h3>
98
+ <div class="bg-gray-50 p-4 rounded-lg">
99
+ <div class="grid md:grid-cols-2 gap-4">
100
+ <div>
101
+ <p class="text-gray-600">Complaint Type</p>
102
+ <p class="font-medium">No Water Supply</p>
103
+ </div>
104
+ <div>
105
+ <p class="text-gray-600">Location</p>
106
+ <p class="font-medium">Ward 5, Yadgir</p>
107
+ </div>
108
+ <div>
109
+ <p class="text-gray-600">Registered By</p>
110
+ <p class="font-medium">Ramesh Kumar</p>
111
+ </div>
112
+ <div>
113
+ <p class="text-gray-600">Contact</p>
114
+ <p class="font-medium">9876543210</p>
115
+ </div>
116
+ </div>
117
+ <div class="mt-4">
118
+ <p class="text-gray-600">Description</p>
119
+ <p class="font-medium">No water supply since yesterday morning in our area. The taps are completely dry.</p>
120
+ </div>
121
+ </div>
122
+ </div>
123
+
124
+ <div>
125
+ <h3 class="text-lg font-semibold text-gray-800 mb-3">Status Timeline</h3>
126
+ <div class="space-y-4">
127
+ <div class="status-resolved bg-white p-4 rounded-lg shadow-sm">
128
+ <div class="flex items-start">
129
+ <div class="flex-shrink-0 h-10 w-10 rounded-full bg-green-100 flex items-center justify-center">
130
+ <i data-feather="check" class="w-5 h-5 text-green-600"></i>
131
+ </div>
132
+ <div class="ml-4">
133
+ <div class="flex items-center justify-between">
134
+ <h4 class="text-md font-medium text-gray-800">Complaint Resolved</h4>
135
+ <span class="text-sm text-gray-500">16 June 2023, 11:30 AM</span>
136
+ </div>
137
+ <p class="mt-1 text-gray-600">The water supply has been restored. The issue was due to a valve malfunction which has been fixed.</p>
138
+ </div>
139
+ </div>
140
+ </div>
141
+
142
+ <div class="status-inprogress bg-white p-4 rounded-lg shadow-sm">
143
+ <div class="flex items-start">
144
+ <div class="flex-shrink-0 h-10 w-10 rounded-full bg-blue-100 flex items-center justify-center">
145
+ <i data-feather="tool" class="w-5 h-5 text-blue-600"></i>
146
+ </div>
147
+ <div class="ml-4">
148
+ <div class="flex items-center justify-between">
149
+ <h4 class="text-md font-medium text-gray-800">Work In Progress</h4>
150
+ <span class="text-sm text-gray-500">16 June 2023, 9:15 AM</span>
151
+ </div>
152
+ <p class="mt-1 text-gray-600">Our team has identified the issue and is working on it. Expected resolution within 2 hours.</p>
153
+ </div>
154
+ </div>
155
+ </div>
156
+
157
+ <div class="status-pending bg-white p-4 rounded-lg shadow-sm">
158
+ <div class="flex items-start">
159
+ <div class="flex-shrink-0 h-10 w-10 rounded-full bg-yellow-100 flex items-center justify-center">
160
+ <i data-feather="clock" class="w-5 h-5 text-yellow-600"></i>
161
+ </div>
162
+ <div class="ml-4">
163
+ <div class="flex items-center justify-between">
164
+ <h4 class="text-md font-medium text-gray-800">Complaint Registered</h4>
165
+ <span class="text-sm text-gray-500">15 June 2023, 10:45 AM</span>
166
+ </div>
167
+ <p class="mt-1 text-gray-600">Your complaint has been registered and assigned to our field team. They will inspect the issue shortly.</p>
168
+ </div>
169
+ </div>
170
+ </div>
171
+ </div>
172
+ </div>
173
+
174
+ <div class="mt-8">
175
+ <h3 class="text-lg font-semibold text-gray-800 mb-3">Attachments</h3>
176
+ <div class="flex space-x-4">
177
+ <div class="border border-gray-200 rounded-lg p-3 flex items-center">
178
+ <i data-feather="image" class="w-6 h-6 text-gray-500 mr-2"></i>
179
+ <span class="text-sm">photo_1.jpg</span>
180
+ </div>
181
+ </div>
182
+ </div>
183
+
184
+ <div class="mt-8 pt-6 border-t border-gray-200">
185
+ <h3 class="text-lg font-semibold text-gray-800 mb-3">Rate Your Experience</h3>
186
+ <div class="flex items-center space-x-2">
187
+ <button class="text-gray-400 hover:text-yellow-400 transition">
188
+ <i data-feather="star" class="w-6 h-6"></i>
189
+ </button>
190
+ <button class="text-gray-400 hover:text-yellow-400 transition">
191
+ <i data-feather="star" class="w-6 h-6"></i>
192
+ </button>
193
+ <button class="text-gray-400 hover:text-yellow-400 transition">
194
+ <i data-feather="star" class="w-6 h-6"></i>
195
+ </button>
196
+ <button class="text-gray-400 hover:text-yellow-400 transition">
197
+ <i data-feather="star" class="w-6 h-6"></i>
198
+ </button>
199
+ <button class="text-gray-400 hover:text-yellow-400 transition">
200
+ <i data-feather="star" class="w-6 h-6"></i>
201
+ </button>
202
+ </div>
203
+ <textarea class="mt-3 w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" rows="2" placeholder="Additional feedback (optional)"></textarea>
204
+ <button class="mt-2 bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded-lg transition duration-300">
205
+ Submit Feedback
206
+ </button>
207
+ </div>
208
+ </div>
209
+ </div>
210
+ </div>
211
+ </main>
212
+
213
+ <!-- Footer -->
214
+ <footer class="bg-gray-800 text-white py-8 mt-12">
215
+ <div class="container mx-auto px-4">
216
+ <div class="grid md:grid-cols-4 gap-8">
217
+ <div>
218
+ <h3 class="text-xl font-bold mb-4">Yadgir Water Supply</h3>
219
+ <p class="text-gray-400">A DBOT project for efficient water supply complaint management in Yadgir District, Karnataka.</p>
220
+ </div>
221
+ <div>
222
+ <h4 class="font-bold mb-4">Quick Links</h4>
223
+ <ul class="space-y-2">
224
+ <li><a href="index.html" class="text-gray-400 hover:text-white transition">Home</a></li>
225
+ <li><a href="complaints.html" class="text-gray-400 hover:text-white transition">File Complaint</a></li>
226
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Track Complaint</a></li>
227
+ <li><a href="about.html" class="text-gray-400 hover:text-white transition">About Us</a></li>
228
+ </ul>
229
+ </div>
230
+ <div>
231
+ <h4 class="font-bold mb-4">Contact</h4>
232
+ <ul class="space-y-2 text-gray-400">
233
+ <li class="flex items-center"><i data-feather="mail" class="w-4 h-4 mr-2"></i> complaints@yadgirwater.org</li>
234
+ <li class="flex items-center"><i data-feather="phone" class="w-4 h-4 mr-2"></i> 080-23456789</li>
235
+ <li class="flex items-center"><i data-feather="map-pin" class="w-4 h-4 mr-2"></i> Yadgir, Karnataka</li>
236
+ </ul>
237
+ </div>
238
+ <div>
239
+ <h4 class="font-bold mb-4">Follow Us</h4>
240
+ <div class="flex space-x-4">
241
+ <a href="#" class="text-gray-400 hover:text-white transition"><i data-feather="facebook"></i></a>
242
+ <a href="#" class="text-gray-400 hover:text-white transition"><i data-feather="twitter"></i></a>
243
+ <a href="#" class="text-gray-400 hover:text-white transition"><i data-feather="instagram"></i></a>
244
+ </div>
245
+ </div>
246
+ </div>
247
+ <div class="border-t border-gray-700 mt-8 pt-6 text-center text-gray-400">
248
+ <p>&copy; 2023 Yadgir Water Supply DBOT Project. All rights reserved.</p>
249
+ </div>
250
+ </div>
251
+ </footer>
252
+
253
+ <!-- Mobile Menu -->
254
+ <div id="mobile-menu" class="fixed inset-0 bg-black bg-opacity-75 z-50 hidden">
255
+ <div class="absolute right-0 top-0 w-64 h-full bg-white shadow-lg">
256
+ <div class="p-4 flex justify-end">
257
+ <button id="close-mobile-menu">
258
+ <i data-feather="x" class="w-6 h-6"></i>
259
+ </button>
260
+ </div>
261
+ <nav class="flex flex-col p-4 space-y-4">
262
+ <a href="index.html" class="text-gray-800 hover:text-blue-600 font-medium py-2">Home</a>
263
+ <a href="complaints.html" class="text-gray-800 hover:text-blue-600 font-medium py-2">File Complaint</a>
264
+ <a href="#" class="text-blue-600 font-medium py-2">Track Complaint</a>
265
+ <a href="about.html" class="text-gray-800 hover:text-blue-600 font-medium py-2">About</a>
266
+ </nav>
267
+ </div>
268
+ </div>
269
+
270
+ <script>
271
+ AOS.init();
272
+ feather.replace();
273
+
274
+ // Mobile menu toggle
275
+ const mobileMenuButton = document.getElementById('mobile-menu-button');
276
+ const mobileMenu = document.getElementById('mobile-menu');
277
+ const closeMobileMenu = document.getElementById('close-mobile-menu');
278
+
279
+ mobileMenuButton.addEventListener('click', () => {
280
+ mobileMenu.classList.remove('hidden');
281
+ });
282
+
283
+ closeMobileMenu.addEventListener('click', () => {
284
+ mobileMenu.classList.add('hidden');
285
+ });
286
+
287
+ // For demo purposes - show complaint status when tracking
288
+ document.querySelector('button[type="button"]').addEventListener('click', function() {
289
+ document.getElementById('complaint-status').classList.remove('hidden');
290
+ });
291
+ </script>
292
+ </body>
293
+ </html>