Hugging Face's logo

Spaces:
Nagadevan
/
pmc-dbot-1
Running

App Files Community
Nagadevan commited on
Commit
7e51c90
·
verified ·
1 Parent(s): 6903562

add below. Taluka Name

Browse files

Hunasagi
Shorapur
Shahapur
Wadagera
Yadgir
Gurmitkal
---------- Structure


HUN-ZBT-1

HUN-ZBT-2
HUN-ZBT-3

HUN-ZBT-4

MBR-1













SUR-ZBT-1
SUR-ZBT-2

SUR-ZBT-3

SHA-ZBT-1

SHA-ZBT-2

SHA-ZBT-3
WAD-ZBT-1

WAD-ZBT-2
WAD-ZBT-3
YAD-ZBT-1
YAD-ZBT-2

MBR-2





GUR-ZBT-1

YAD-ZBT-3

YAD-ZBT-4
GUR-ZBT-2
--------------- Structure

IPS-1
IPS-2



IPS-3
IPS-4


IPS-5

---------- Structure

LS-1
LS-2
LS-3
LS-4
----------- Structure

GUR-BPT
----- Design Capacity for Scheme Ultimate Stage (Year 2053) 117 MLD
Design Capacity for electro-mechanical works for pumping stations for intermediate Stage (Year 2038) 100 MLD
Intake structures for RAW water 1 No
Water Treatment Plant Capacity for Ultimate Stage (Year 2053) 117 MLD
Number of Master Balance Reservoirs (MBRs) 2 No’s
Number of Intermediate Pumping Station 5 No’s
Number of Lifting stations 4 No’s
Number of Zonal Balancing Tank /ZBR/ZBT 09+10=19 No’s
Number of BPT 1 No’s
Length and Diameter of RAW Water rising main 23.450 km 1150 mm ID MS
Length and Diameter range of clear water rising mains/gravity mains 311.438 km, 219.1 to 1100 ID MS
Length and Diameter range of clear water gravity feeder mains from ZBTs to Village OHTs 1. HDPE: 1594.251 km
(Dia 90mm to 250mm)
2. DI: 160.122 km (Dia 300mm to 400mm)
3. MS: 52.328 km (Dia 273mm to 355.6 mm)
---------- Proposed Position
Team Leader
Resident Project Manager
Resident Project Manager
Resident Project Manager
Quality Inspector I-Civil
Quality Inspector II-Civil
Quality Inspector III-Civil
Quality Inspector-Mechanical
Quality Inspector-Electrical
Safety Engineer
Site Engineer- Civil
Site Engineer- Civil
Site Engineer- Civil
Site Engineer- Civil
Site Engineer- Civil
Site Engineer- Civil
Site Engineer- Civil
Site Engineer- Mechanical
Site Engineer- Mechanical
Site Engineer- Mechanical
Office Manager
----------- Land Clearance of overall structures JACKWELL 1.5 TMC /year


WTP 117 MLD

HUN-ZBT-1 960
(A& B + LS 1)
HUN-ZBT-2 380

HUN-ZBR-3 660
(A&B)
HUN-ZBR-4 730

MBR-1 4150
(LS 2 ,HUN ZBR 5 and SUR ZBR 4
SUR-ZBT-1 320

SUR-ZBR-2 1460
(A+LS3, B)
SUR-ZBT-3 870
(A & B)

SHA-ZBT-1 1650
(A,B )
SHA-ZBT-3 900

SHA-ZBT-2 690
( A, B+LS4)
WAD-ZBR-1 1660
(A&B)
WAD-ZBR-3 530

WAD-ZBT-2 & 325 KL OHT Wadgera 660
YAD-ZBR-1 510


YAD-ZBR-2 760


MBR-2 760


YAD-ZBR-3 1260
(A & B)


YAD-ZBR-4 590
GUR-ZBR-1 410
(A &B )
GUR-ZBR-2 470


GUR BPT ( ZBR 2) 35

IPS 1 80
IPS 2 1025
IPS 3 365
IPS 4 1075
IPS 5 310
LS 1 145
LS 2 120
LS 3 35
LS 4 115
OHTs 107
OHTs 92
OHTs 55
OHTs 22
OHTs 81
OHTs 37
OHTs 1 1
------------------- authority approvals and status Railway
NH Permissions
NHAI Permission
SH Permissions
PRED/PMGSY
Forest Permissions 0.98 Hectare
Canal Permissions
Sannati Barrage permission
Blasting, Vijayapura District Blasting, Yadgir District
Power supply Permissions
----------------- Design Review And Approval Intake well & Jackwell cum pump house and Layout Plan for Jackwell cum pump house

WTP Components
Aerator
Channels

Flash mixer - 1,2,3& 4
Clariflocculator - 1,2,3&4
Filter House -MGAD

Filter House- SGAD
Annexure Building
Administrative Building

Wash water tank

Clear water reservoir

Chemical House

Chlorine house

Sludge Balancing tank

Sludge Thickener tank

Centrifuge Building
Wash water recycling tank

Structural Designs & Drawings
WTP Components
Cascade Aerator

Channels
Flash mixer - 1,2,3& 4
Flash mixer – 1
Flash mixer – 2
Flash mixer – 3
Flash mixer – 4
Clariflocculator - 1,2,3& 4
Clariflocculator – 1
Clariflocculator – 2
Clariflocculator – 3
Clariflocculator – 4
Staff Quarters
Annexure Building

Administrative Building
Wash water recycling tank
Clear water reservoir
Chlorine house
Guard room
Sludge Balancing Tank - 1 & 2
Centrifuge Building & Chemical house
Structural design and drawing for Jack well and Pump house

Filter house
Wash water tank
Zonal structures
MBR / MBT
HUN- MBR 1
4150kL GSR
YAD- MBR 2
760 kL GSR
Zonal Balancing Tanks
HUN- ZBT- 1
960kL; 15 m Staging ESR
HUN- ZBT- 2
380 kL; 10 m Staging ESR
HUN-ZBT- 3
660 kL GSR
HUN- ZBT- 4
730 kL GSR
SUR- ZBT- 1
320 kL; 16 m Staging ESR
SUR- ZBR- 2
1460 kL GSR
SUR- ZBT- 3
870 kL 15 m Staging ESR
SHA- ZBT- 1
1650 kL; 24 m Staging ESR
SHA- ZBT- 2
690 kL 20 m Staging ESR
SHA- ZBT- 3
900 kL 20 m Staging ESR
WAD- ZBR 1
1660 kL GSR
WAD- ZBT- 2
660 kL; 24 m Staging ESR
WAD- ZBR- 3
530 kL GSR
YAD- ZBR- 1
510 kL GSR
YAD- ZBR- 2
760 kL GSR
YAD- ZBR- 3
1260 kL GSR
YAD- ZBR- 4
590 kL GSR
GUR- ZBR- 1
410 kL GSR
GUR- ZBR- 2
470 kL GSR
BPT-
35 kL GSR
Over Head Tanks (OHT)
10kL OHT
10kL 7.5m Stg ht 10T/Sqm
10kL 7.5m Stg ht 15T/Sqm
10kL 7.5m Stg ht 20T/Sqm
25kL OHT
25kL 7.5m Stg ht 10T/Sqm
25kL 7.5m Stg ht 15T/Sqm
50kL OHT
50kL 7.5m Stg ht 10T/Sqm
50kL 7.5m Stg ht 15T/Sqm
50kL 7.5m Stg ht 20T/Sqm
75 kL OHT, 9.0 m stg
------------ Documents being reviewed and recommended by PMC Description Revision
Design & Drawing - Civil Works
Chain link fencing and compound wall Rev-00
Rev-01
Precast compound wall for Major structures Rev-00
Rev-01
Thrust Block 1100mm dia pipe to 200 mm dia pipe - SBC-10T/Sq.M Rev-00
Rev-01
Rev-02
Rev-03
Rev-04
Thrust Block 1100mm dia pipe to 200 mm dia pipe SBC-30T/Sq.M Rev-00

Sannati Barrage Rev-00
Rev-01
1150mm dia canal crossing Rev-00
Rev-01
Jack well panel room slab LVL @ 503.1 D&D Rev-03
Structural Design & Drawings of Valve Chambers for Air valve, scour valve & sluice valve for MS,DI& HDPE Pipe line. Rev-00
10 kL 9 m staging Rev-00
Rev-01
Rev-02
10 kL 12 m staging Rev-00
Rev-01
Rev-02
25 kL 9 m staging Rev-00
Rev-01
Rev-02
25 kL 12 m staging Rev-00
Rev-01
Rev-02
50 kL OHT, 9 m staging Rev-00
Rev-01
Rev-02
50 kL OHT, 12.0 m stg Rev-00
Rev-01
75 kL OHT, 12.0 m stg Rev-00
Rev-01
Rev-02
Hydraulic Design
(LOT-1)calculations for the proposed staging height of OHT's Rev-00
(LOT-2)calculations for the proposed staging height of OHT's Rev-00
(LOT-3)calculations for the proposed staging height of OHT's Rev-00
(LOT-4)Hydraulic calculations of OHT's Rev-00
(LOT-5)Hydraulic calculations of OHT's for Yadgir RWS Project Rev-00
(LOT-6)Hydraulic calculations of OHT's for Yadgir RWS Project Rev-00
(LOT-7)Hydraulic calculations of OHT's for Yadgir RWS Project Rev-00
(LOT-8)Hydraulic calculations of OHT's for Yadgir RWS Project Rev-00
(LOT-9)Hydraulic calculations of OHT's for Yadgir RWS Project Rev-00
(LOT-10)Hydraulic calculations of OHT's for Yadgir RWS Project Rev-00
(LOT-11)Hydraulic calculations of OHT's for Yadgir RWS Project Rev-00
(LOT-12)Hydraulic calculations of OHT's for Yadgir RWS Project Rev-00

Mechanical works
Data Sheets, QAP and GA Drawings of WTP Sluice Gate Drawings and WTP - Knife Gate Valves Drawings Rev-00
Knife Gate valve documents Rev-01
Rev-02
Sluice valve documents Rev-02
QAP & GA drawings of sluice gate for intake well Rev-00
Rev-01
Rev-02
Design and drawing of QAP , Data sheet and GAD for Air valves, Sluice valves and Butterfly valves Rev-00
Rev-01
Rev-02
GA of Valve fixing Rev-00
Rev-01
-------------------Progress Review Meetings ---------------------
------------------- - Initial Deployment

Files changed (4) hide show
  1. README.md +7 -5
  2. habitations.html +123 -0
  3. index.html +512 -18
  4. projects.html +603 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Pmc Dbot 1
3
- emoji: 🏆
4
- colorFrom: yellow
5
- colorTo: blue
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: pmc-dbot-1
3
+ emoji: 🐳
4
+ colorFrom: red
5
+ colorTo: purple
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
habitations.html ADDED
@@ -0,0 +1,123 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Habitations | PMC-DBOT</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
10
+ <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
11
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
12
+ <script src="https://cdn.jsdelivr.net/npm/animejs/lib/anime.iife.min.js"></script>
13
+ <script src="https://unpkg.com/feather-icons"></script>
14
+ <style>
15
+ .habitation-tab.active {
16
+ border-bottom: 3px solid #3b82f6;
17
+ color: #3b82f6;
18
+ }
19
+ .status-badge {
20
+ display: inline-block;
21
+ padding: 0.25rem 0.5rem;
22
+ border-radius: 9999px;
23
+ font-size: 0.75rem;
24
+ font-weight: 600;
25
+ text-transform: uppercase;
26
+ }
27
+ .status-active {
28
+ background-color: #d1fae5;
29
+ color: #065f46;
30
+ }
31
+ .status-planned {
32
+ background-color: #bfdbfe;
33
+ color: #1e40af;
34
+ }
35
+ .status-completed {
36
+ background-color: #dcfce7;
37
+ color: #166534;
38
+ }
39
+ .status-pending {
40
+ background-color: #fef3c7;
41
+ color: #92400e;
42
+ }
43
+ </style>
44
+ </head>
45
+ <body class="bg-gray-50">
46
+ <!-- Navigation -->
47
+ <nav class="bg-white shadow-lg">
48
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
49
+ <div class="flex justify-between h-16">
50
+ <div class="flex items-center">
51
+ <div class="flex-shrink-0 flex items-center">
52
+ <i data-feather="droplet" class="text-blue-600 h-8 w-8"></i>
53
+ <span class="ml-2 text-xl font-bold text-gray-900">PMC-DBOT</span>
54
+ </div>
55
+ <div class="hidden sm:ml-6 sm:flex sm:space-x-8">
56
+ <a href="index.html" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Dashboard</a>
57
+ <a href="projects.html" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Projects</a>
58
+ <a href="habitations.html" class="border-blue-500 text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Habitations</a>
59
+ <a href="reports.html" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Reports</a>
60
+ <a href="about.html" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">About</a>
61
+ </div>
62
+ </div>
63
+ <div class="hidden sm:ml-6 sm:flex sm:items-center">
64
+ <button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium flex items-center">
65
+ <i data-feather="user" class="mr-2 w-4 h-4"></i> Login
66
+ </button>
67
+ </div>
68
+ <div class="-mr-2 flex items-center sm:hidden">
69
+ <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500" aria-controls="mobile-menu" aria-expanded="false">
70
+ <i data-feather="menu"></i>
71
+ </button>
72
+ </div>
73
+ </div>
74
+ </div>
75
+
76
+ <!-- Mobile menu -->
77
+ <div class="sm:hidden hidden" id="mobile-menu">
78
+ <div class="pt-2 pb-3 space-y-1">
79
+ <a href="index.html" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Dashboard</a>
80
+ <a href="projects.html" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Projects</a>
81
+ <a href="habitations.html" class="bg-blue-50 border-blue-500 text-blue-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Habitations</a>
82
+ <a href="reports.html" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Reports</a>
83
+ <a href="about.html" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">About</a>
84
+ <div class="mt-4 pl-3 pr-4">
85
+ <button class="w-full bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium flex items-center justify-center">
86
+ <i data-feather="user" class="mr-2 w-4 h-4"></i> Login
87
+ </button>
88
+ </div>
89
+ </div>
90
+ </div>
91
+ </nav>
92
+
93
+ <!-- Page Header -->
94
+ <div class="bg-white shadow">
95
+ <div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
96
+ <div class="md:flex md:items-center md:justify-between">
97
+ <div class="flex-1 min-w-0">
98
+ <h1 class="text-2xl font-bold leading-tight text-gray-900">
99
+ Habitations Overview
100
+ </h1>
101
+ <p class="mt-1 text-sm text-gray-500">
102
+ 715 habitations across 6 taluks in Yadgir district
103
+ </p>
104
+ </div>
105
+ <div class="mt-4 flex md:mt-0 md:ml-4">
106
+ <button type="button" class="inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
107
+ <i data-feather="filter" class="mr-2 h-4 w-4 text-gray-500"></i> Filter
108
+ </button>
109
+ <button type="button" class="ml-3 inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
110
+ <i data-feather="download" class="mr-2 h-4 w-4"></i> Export
111
+ </button>
112
+ </div>
113
+ </div>
114
+ </div>
115
+ </div>
116
+
117
+ <!-- Habitation Tabs -->
118
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mt-6">
119
+ <div class="border-b border-gray-200">
120
+ <nav class="-mb-px flex space-x-8 overflow-x-auto">
121
+ <a
122
+ </body>
123
+ </html>
index.html CHANGED
@@ -1,19 +1,513 @@
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>PMC-DBOT | Yadgir Water Management</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
10
+ <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
11
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
12
+ <script src="https://cdn.jsdelivr.net/npm/animejs/lib/anime.iife.min.js"></script>
13
+ <script src="https://unpkg.com/feather-icons"></script>
14
+ <style>
15
+ .hero-gradient {
16
+ background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 50%, #1d4ed8 100%);
17
+ }
18
+ .map-container {
19
+ height: 500px;
20
+ background-color: #e5e7eb;
21
+ border-radius: 1rem;
22
+ overflow: hidden;
23
+ }
24
+ .stat-card {
25
+ transition: all 0.3s ease;
26
+ }
27
+ .stat-card:hover {
28
+ transform: translateY(-5px);
29
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
30
+ }
31
+ </style>
32
+ </head>
33
+ <body class="bg-gray-50">
34
+ <!-- Navigation -->
35
+ <nav class="bg-white shadow-lg">
36
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
37
+ <div class="flex justify-between h-16">
38
+ <div class="flex items-center">
39
+ <div class="flex-shrink-0 flex items-center">
40
+ <i data-feather="droplet" class="text-blue-600 h-8 w-8"></i>
41
+ <span class="ml-2 text-xl font-bold text-gray-900">PMC-DBOT</span>
42
+ </div>
43
+ <div class="hidden sm:ml-6 sm:flex sm:space-x-8">
44
+ <a href="index.html" class="border-blue-500 text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Dashboard</a>
45
+ <a href="projects.html" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Projects</a>
46
+ <a href="habitations.html" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Habitations</a>
47
+ <a href="reports.html" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Reports</a>
48
+ <a href="about.html" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">About</a>
49
+ </div>
50
+ </div>
51
+ <div class="hidden sm:ml-6 sm:flex sm:items-center">
52
+ <button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium flex items-center">
53
+ <i data-feather="user" class="mr-2 w-4 h-4"></i> Login
54
+ </button>
55
+ </div>
56
+ <div class="-mr-2 flex items-center sm:hidden">
57
+ <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500" aria-controls="mobile-menu" aria-expanded="false">
58
+ <i data-feather="menu"></i>
59
+ </button>
60
+ </div>
61
+ </div>
62
+ </div>
63
+
64
+ <!-- Mobile menu -->
65
+ <div class="sm:hidden hidden" id="mobile-menu">
66
+ <div class="pt-2 pb-3 space-y-1">
67
+ <a href="index.html" class="bg-blue-50 border-blue-500 text-blue-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Dashboard</a>
68
+ <a href="projects.html" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Projects</a>
69
+ <a href="habitations.html" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Habitations</a>
70
+ <a href="reports.html" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Reports</a>
71
+ <a href="about.html" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">About</a>
72
+ <div class="mt-4 pl-3 pr-4">
73
+ <button class="w-full bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium flex items-center justify-center">
74
+ <i data-feather="user" class="mr-2 w-4 h-4"></i> Login
75
+ </button>
76
+ </div>
77
+ </div>
78
+ </div>
79
+ </nav>
80
+
81
+ <!-- Hero Section -->
82
+ <div class="hero-gradient text-white">
83
+ <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
84
+ <div class="text-center">
85
+ <h1 class="text-4xl font-extrabold tracking-tight sm:text-5xl lg:text-6xl mb-4" data-aos="fade-down">
86
+ Yadgir District Water Management
87
+ </h1>
88
+ <p class="max-w-3xl mx-auto text-xl text-blue-100" data-aos="fade-up" data-aos-delay="100">
89
+ Project Management & Control System for Drinking Water Supply in 715 Habitations across 6 Taluks
90
+ </p>
91
+ <div class="mt-8 flex justify-center space-x-4" data-aos="fade-up" data-aos-delay="200">
92
+ <a href="projects.html" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-blue-700 bg-white hover:bg-blue-50">
93
+ View Projects
94
+ </a>
95
+ <a href="about.html" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-white bg-blue-800 bg-opacity-60 hover:bg-opacity-70">
96
+ Learn More
97
+ </a>
98
+ </div>
99
+ </div>
100
+ </div>
101
+ </div>
102
+
103
+ <!-- Stats Section -->
104
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
105
+ <div class="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-4">
106
+ <!-- Stat 1 -->
107
+ <div class="stat-card bg-white overflow-hidden shadow rounded-lg" data-aos="fade-up">
108
+ <div class="px-4 py-5 sm:p-6">
109
+ <div class="flex items-center">
110
+ <div class="flex-shrink-0 bg-blue-500 rounded-md p-3">
111
+ <i data-feather="map-pin" class="text-white h-6 w-6"></i>
112
+ </div>
113
+ <div class="ml-5 w-0 flex-1">
114
+ <dt class="text-sm font-medium text-gray-500 truncate">
115
+ Total Habitations
116
+ </dt>
117
+ <dd class="flex items-baseline">
118
+ <div class="text-2xl font-semibold text-gray-900">
119
+ 715
120
+ </div>
121
+ </dd>
122
+ </div>
123
+ </div>
124
+ </div>
125
+ </div>
126
+
127
+ <!-- Stat 2 -->
128
+ <div class="stat-card bg-white overflow-hidden shadow rounded-lg" data-aos="fade-up" data-aos-delay="100">
129
+ <div class="px-4 py-5 sm:p-6">
130
+ <div class="flex items-center">
131
+ <div class="flex-shrink-0 bg-green-500 rounded-md p-3">
132
+ <i data-feather="home" class="text-white h-6 w-6"></i>
133
+ </div>
134
+ <div class="ml-5 w-0 flex-1">
135
+ <dt class="text-sm font-medium text-gray-500 truncate">
136
+ Villages Covered
137
+ </dt>
138
+ <dd class="flex items-baseline">
139
+ <div class="text-2xl font-semibold text-gray-900">
140
+ 502
141
+ </div>
142
+ </dd>
143
+ </div>
144
+ </div>
145
+ </div>
146
+ </div>
147
+
148
+ <!-- Stat 3 -->
149
+ <div class="stat-card bg-white overflow-hidden shadow rounded-lg" data-aos="fade-up" data-aos-delay="200">
150
+ <div class="px-4 py-5 sm:p-6">
151
+ <div class="flex items-center">
152
+ <div class="flex-shrink-0 bg-yellow-500 rounded-md p-3">
153
+ <i data-feather="users" class="text-white h-6 w-6"></i>
154
+ </div>
155
+ <div class="ml-5 w-0 flex-1">
156
+ <dt class="text-sm font-medium text-gray-500 truncate">
157
+ Population Served
158
+ </dt>
159
+ <dd class="flex items-baseline">
160
+ <div class="text-2xl font-semibold text-gray-900">
161
+ 927,450
162
+ </div>
163
+ </dd>
164
+ </div>
165
+ </div>
166
+ </div>
167
+ </div>
168
+
169
+ <!-- Stat 4 -->
170
+ <div class="stat-card bg-white overflow-hidden shadow rounded-lg" data-aos="fade-up" data-aos-delay="300">
171
+ <div class="px-4 py-5 sm:p-6">
172
+ <div class="flex items-center">
173
+ <div class="flex-shrink-0 bg-purple-500 rounded-md p-3">
174
+ <i data-feather="layers" class="text-white h-6 w-6"></i>
175
+ </div>
176
+ <div class="ml-5 w-0 flex-1">
177
+ <dt class="text-sm font-medium text-gray-500 truncate">
178
+ Taluks Covered
179
+ </dt>
180
+ <dd class="flex items-baseline">
181
+ <div class="text-2xl font-semibold text-gray-900">
182
+ 6
183
+ </div>
184
+ </dd>
185
+ </div>
186
+ </div>
187
+ </div>
188
+ </div>
189
+ </div>
190
+ </div>
191
+
192
+ <!-- Map Section -->
193
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pb-12">
194
+ <div class="bg-white shadow rounded-lg overflow-hidden">
195
+ <div class="p-6 border-b border-gray-200">
196
+ <h3 class="text-lg font-medium leading-6 text-gray-900">Yadgir District Coverage Map</h3>
197
+ <p class="mt-1 text-sm text-gray-500">Showing all 715 habitations across 6 taluks</p>
198
+ </div>
199
+ <div class="p-6">
200
+ <div class="map-container relative">
201
+ <!-- Map will be loaded here -->
202
+ <div class="absolute inset-0 flex items-center justify-center">
203
+ <div class="text-center">
204
+ <i data-feather="map" class="mx-auto h-12 w-12 text-gray-400"></i>
205
+ <h3 class="mt-2 text-sm font-medium text-gray-900">Interactive Map</h3>
206
+ <p class="mt-1 text-sm text-gray-500">Map visualization will be displayed here</p>
207
+ </div>
208
+ </div>
209
+ </div>
210
+ </div>
211
+ </div>
212
+ </div>
213
+
214
+ <!-- Projects Overview -->
215
+ <div class="bg-gray-100 py-12">
216
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
217
+ <div class="text-center mb-12">
218
+ <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl" data-aos="fade-up">
219
+ Project Overview
220
+ </h2>
221
+ <p class="mt-3 max-w-2xl mx-auto text-xl text-gray-500 sm:mt-4" data-aos="fade-up" data-aos-delay="100">
222
+ Key initiatives to provide safe drinking water across Yadgir district
223
+ </p>
224
+ </div>
225
+
226
+ <div class="grid gap-8 lg:grid-cols-3">
227
+ <!-- Project 1 -->
228
+ <div class="bg-white rounded-lg shadow-md overflow-hidden" data-aos="fade-up">
229
+ <div class="p-6">
230
+ <div class="flex items-center">
231
+ <div class="flex-shrink-0 bg-blue-100 rounded-md p-3">
232
+ <i data-feather="cloud-rain" class="text-blue-600 h-6 w-6"></i>
233
+ </div>
234
+ <div class="ml-4">
235
+ <h3 class="text-lg font-medium text-gray-900">Surface Water Schemes</h3>
236
+ <p class="mt-1 text-sm text-gray-500">River-based supply systems</p>
237
+ </div>
238
+ </div>
239
+ <p class="mt-4 text-gray-600">
240
+ Utilizing Krishna and Bhima rivers for sustainable water supply to villages along riverbanks.
241
+ </p>
242
+ <div class="mt-6">
243
+ <a href="projects.html#surface-water" class="text-blue-600 hover:text-blue-800 text-sm font-medium">
244
+ View details <span aria-hidden="true">&rarr;</span>
245
+ </a>
246
+ </div>
247
+ </div>
248
+ </div>
249
+
250
+ <!-- Project 2 -->
251
+ <div class="bg-white rounded-lg shadow-md overflow-hidden" data-aos="fade-up" data-aos-delay="100">
252
+ <div class="p-6">
253
+ <div class="flex items-center">
254
+ <div class="flex-shrink-0 bg-green-100 rounded-md p-3">
255
+ <i data-feather="droplet" class="text-green-600 h-6 w-6"></i>
256
+ </div>
257
+ <div class="ml-4">
258
+ <h3 class="text-lg font-medium text-gray-900">Groundwater Treatment</h3>
259
+ <p class="mt-1 text-sm text-gray-500">Quality improvement</p>
260
+ </div>
261
+ </div>
262
+ <p class="mt-4 text-gray-600">
263
+ Addressing chemical contamination (fluoride, iron) in groundwater sources across the district.
264
+ </p>
265
+ <div class="mt-6">
266
+ <a href="projects.html#groundwater" class="text-blue-600 hover:text-blue-800 text-sm font-medium">
267
+ View details <span aria-hidden="true">&rarr;</span>
268
+ </a>
269
+ </div>
270
+ </div>
271
+ </div>
272
+
273
+ <!-- Project 3 -->
274
+ <div class="bg-white rounded-lg shadow-md overflow-hidden" data-aos="fade-up" data-aos-delay="200">
275
+ <div class="p-6">
276
+ <div class="flex items-center">
277
+ <div class="flex-shrink-0 bg-purple-100 rounded-md p-3">
278
+ <i data-feather="database" class="text-purple-600 h-6 w-6"></i>
279
+ </div>
280
+ <div class="ml-4">
281
+ <h3 class="text-lg font-medium text-gray-900">Reservoir Systems</h3>
282
+ <p class="mt-1 text-sm text-gray-500">Water storage solutions</p>
283
+ </div>
284
+ </div>
285
+ <p class="mt-4 text-gray-600">
286
+ Impounding reservoirs for storing water during canal flow periods for use during non-flow periods.
287
+ </p>
288
+ <div class="mt-6">
289
+ <a href="projects.html#reservoirs" class="text-blue-600 hover:text-blue-800 text-sm font-medium">
290
+ View details <span aria-hidden="true">&rarr;</span>
291
+ </a>
292
+ </div>
293
+ </div>
294
+ </div>
295
+ </div>
296
+ </div>
297
+ </div>
298
+
299
+ <!-- Taluks Section -->
300
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
301
+ <div class="text-center mb-12">
302
+ <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl" data-aos="fade-up">
303
+ Covered Taluks
304
+ </h2>
305
+ <p class="mt-3 max-w-2xl mx-auto text-xl text-gray-500 sm:mt-4" data-aos="fade-up" data-aos-delay="100">
306
+ Six taluks with varying water supply challenges
307
+ </p>
308
+ </div>
309
+
310
+ <div class="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
311
+ <!-- Taluk 1 -->
312
+ <div class="bg-white rounded-lg shadow overflow-hidden" data-aos="fade-up">
313
+ <div class="p-6">
314
+ <h3 class="text-lg font-medium text-gray-900">Shahapur</h3>
315
+ <div class="mt-2 flex items-center text-sm text-gray-500">
316
+ <i data-feather="map-pin" class="flex-shrink-0 mr-1.5 h-5 w-5 text-gray-400"></i>
317
+ Northern Yadgir
318
+ </div>
319
+ <div class="mt-4 flex items-center justify-between">
320
+ <div>
321
+ <span class="text-gray-900 font-medium">23</span>
322
+ <span class="ml-1 text-gray-500">GPs</span>
323
+ </div>
324
+ <div>
325
+ <span class="text-gray-900 font-medium">112</span>
326
+ <span class="ml-1 text-gray-500">Habitations</span>
327
+ </div>
328
+ </div>
329
+ </div>
330
+ </div>
331
+
332
+ <!-- Taluk 2 -->
333
+ <div class="bg-white rounded-lg shadow overflow-hidden" data-aos="fade-up" data-aos-delay="100">
334
+ <div class="p-6">
335
+ <h3 class="text-lg font-medium text-gray-900">Wadagera</h3>
336
+ <div class="mt-2 flex items-center text-sm text-gray-500">
337
+ <i data-feather="map-pin" class="flex-shrink-0 mr-1.5 h-5 w-5 text-gray-400"></i>
338
+ Western Yadgir
339
+ </div>
340
+ <div class="mt-4 flex items-center justify-between">
341
+ <div>
342
+ <span class="text-gray-900 font-medium">18</span>
343
+ <span class="ml-1 text-gray-500">GPs</span>
344
+ </div>
345
+ <div>
346
+ <span class="text-gray-900 font-medium">98</span>
347
+ <span class="ml-1 text-gray-500">Habitations</span>
348
+ </div>
349
+ </div>
350
+ </div>
351
+ </div>
352
+
353
+ <!-- Taluk 3 -->
354
+ <div class="bg-white rounded-lg shadow overflow-hidden" data-aos="fade-up" data-aos-delay="200">
355
+ <div class="p-6">
356
+ <h3 class="text-lg font-medium text-gray-900">Hunasagi</h3>
357
+ <div class="mt-2 flex items-center text-sm text-gray-500">
358
+ <i data-feather="map-pin" class="flex-shrink-0 mr-1.5 h-5 w-5 text-gray-400"></i>
359
+ Central Yadgir
360
+ </div>
361
+ <div class="mt-4 flex items-center justify-between">
362
+ <div>
363
+ <span class="text-gray-900 font-medium">21</span>
364
+ <span class="ml-1 text-gray-500">GPs</span>
365
+ </div>
366
+ <div>
367
+ <span class="text-gray-900 font-medium">105</span>
368
+ <span class="ml-1 text-gray-500">Habitations</span>
369
+ </div>
370
+ </div>
371
+ </div>
372
+ </div>
373
+
374
+ <!-- Taluk 4 -->
375
+ <div class="bg-white rounded-lg shadow overflow-hidden" data-aos="fade-up">
376
+ <div class="p-6">
377
+ <h3 class="text-lg font-medium text-gray-900">Shorapur</h3>
378
+ <div class="mt-2 flex items-center text-sm text-gray-500">
379
+ <i data-feather="map-pin" class="flex-shrink-0 mr-1.5 h-5 w-5 text-gray-400"></i>
380
+ Southern Yadgir
381
+ </div>
382
+ <div class="mt-4 flex items-center justify-between">
383
+ <div>
384
+ <span class="text-gray-900 font-medium">25</span>
385
+ <span class="ml-1 text-gray-500">GPs</span>
386
+ </div>
387
+ <div>
388
+ <span class="text-gray-900 font-medium">128</span>
389
+ <span class="ml-1 text-gray-500">Habitations</span>
390
+ </div>
391
+ </div>
392
+ </div>
393
+ </div>
394
+
395
+ <!-- Taluk 5 -->
396
+ <div class="bg-white rounded-lg shadow overflow-hidden" data-aos="fade-up" data-aos-delay="100">
397
+ <div class="p-6">
398
+ <h3 class="text-lg font-medium text-gray-900">Yadgir</h3>
399
+ <div class="mt-2 flex items-center text-sm text-gray-500">
400
+ <i data-feather="map-pin" class="flex-shrink-0 mr-1.5 h-5 w-5 text-gray-400"></i>
401
+ District HQ
402
+ </div>
403
+ <div class="mt-4 flex items-center justify-between">
404
+ <div>
405
+ <span class="text-gray-900 font-medium">19</span>
406
+ <span class="ml-1 text-gray-500">GPs</span>
407
+ </div>
408
+ <div>
409
+ <span class="text-gray-900 font-medium">115</span>
410
+ <span class="ml-1 text-gray-500">Habitations</span>
411
+ </div>
412
+ </div>
413
+ </div>
414
+ </div>
415
+
416
+ <!-- Taluk 6 -->
417
+ <div class="bg-white rounded-lg shadow overflow-hidden" data-aos="fade-up" data-aos-delay="200">
418
+ <div class="p-6">
419
+ <h3 class="text-lg font-medium text-gray-900">Gurmitkal</h3>
420
+ <div class="mt-2 flex items-center text-sm text-gray-500">
421
+ <i data-feather="map-pin" class="flex-shrink-0 mr-1.5 h-5 w-5 text-gray-400"></i>
422
+ Eastern Yadgir
423
+ </div>
424
+ <div class="mt-4 flex items-center justify-between">
425
+ <div>
426
+ <span class="text-gray-900 font-medium">17</span>
427
+ <span class="ml-1 text-gray-500">GPs</span>
428
+ </div>
429
+ <div>
430
+ <span class="text-gray-900 font-medium">157</span>
431
+ <span class="ml-1 text-gray-500">Habitations</span>
432
+ </div>
433
+ </div>
434
+ </div>
435
+ </div>
436
+ </div>
437
+ </div>
438
+
439
+ <!-- Footer -->
440
+ <footer class="bg-gray-800">
441
+ <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
442
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
443
+ <div>
444
+ <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Project</h3>
445
+ <ul class="mt-4 space-y-4">
446
+ <li><a href="about.html" class="text-base text-gray-300 hover:text-white">About</a></li>
447
+ <li><a href="projects.html" class="text-base text-gray-300 hover:text-white">Projects</a></li>
448
+ <li><a href="habitations.html" class="text-base text-gray-300 hover:text-white">Habitations</a></li>
449
+ </ul>
450
+ </div>
451
+ <div>
452
+ <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Resources</h3>
453
+ <ul class="mt-4 space-y-4">
454
+ <li><a href="reports.html" class="text-base text-gray-300 hover:text-white">Reports</a></li>
455
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Documents</a></li>
456
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Maps</a></li>
457
+ </ul>
458
+ </div>
459
+ <div>
460
+ <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Support</h3>
461
+ <ul class="mt-4 space-y-4">
462
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Help Center</a></li>
463
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Contact</a></li>
464
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Status</a></li>
465
+ </ul>
466
+ </div>
467
+ <div>
468
+ <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Legal</h3>
469
+ <ul class="mt-4 space-y-4">
470
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Privacy</a></li>
471
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Terms</a></li>
472
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Cookie Policy</a></li>
473
+ </ul>
474
+ </div>
475
+ </div>
476
+ <div class="mt-8 border-t border-gray-700 pt-8 md:flex md:items-center md:justify-between">
477
+ <div class="flex space-x-6 md:order-2">
478
+ <a href="#" class="text-gray-400 hover:text-gray-300">
479
+ <i data-feather="twitter" class="h-6 w-6"></i>
480
+ </a>
481
+ <a href="#" class="text-gray-400 hover:text-gray-300">
482
+ <i data-feather="facebook" class="h-6 w-6"></i>
483
+ </a>
484
+ <a href="#" class="text-gray-400 hover:text-gray-300">
485
+ <i data-feather="instagram" class="h-6 w-6"></i>
486
+ </a>
487
+ </div>
488
+ <p class="mt-8 text-base text-gray-400 md:mt-0 md:order-1">
489
+ &copy; 2023 PMC-DBOT Yadgir Water Management. All rights reserved.
490
+ </p>
491
+ </div>
492
+ </div>
493
+ </footer>
494
+
495
+ <script>
496
+ // Mobile menu toggle
497
+ document.querySelector('nav button').addEventListener('click', function() {
498
+ const menu = document.getElementById('mobile-menu');
499
+ menu.classList.toggle('hidden');
500
+ });
501
+
502
+ // Initialize animations
503
+ AOS.init({
504
+ duration: 800,
505
+ easing: 'ease-in-out',
506
+ once: true
507
+ });
508
+
509
+ // Initialize feather icons
510
+ feather.replace();
511
+ </script>
512
+ </body>
513
  </html>
projects.html ADDED
@@ -0,0 +1,603 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Projects | PMC-DBOT</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
10
+ <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
11
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
12
+ <script src="https://cdn.jsdelivr.net/npm/animejs/lib/anime.iife.min.js"></script>
13
+ <script src="https://unpkg.com/feather-icons"></script>
14
+ <style>
15
+ .project-tab.active {
16
+ border-bottom: 3px solid #3b82f6;
17
+ color: #3b82f6;
18
+ }
19
+ .progress-bar {
20
+ height: 8px;
21
+ border-radius: 4px;
22
+ background-color: #e5e7eb;
23
+ }
24
+ .progress-fill {
25
+ height: 100%;
26
+ border-radius: 4px;
27
+ background-color: #3b82f6;
28
+ transition: width 0.6s ease;
29
+ }
30
+ </style>
31
+ </head>
32
+ <body class="bg-gray-50">
33
+ <!-- Navigation -->
34
+ <nav class="bg-white shadow-lg">
35
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
36
+ <div class="flex justify-between h-16">
37
+ <div class="flex items-center">
38
+ <div class="flex-shrink-0 flex items-center">
39
+ <i data-feather="droplet" class="text-blue-600 h-8 w-8"></i>
40
+ <span class="ml-2 text-xl font-bold text-gray-900">PMC-DBOT</span>
41
+ </div>
42
+ <div class="hidden sm:ml-6 sm:flex sm:space-x-8">
43
+ <a href="index.html" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Dashboard</a>
44
+ <a href="projects.html" class="border-blue-500 text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Projects</a>
45
+ <a href="habitations.html" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Habitations</a>
46
+ <a href="reports.html" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Reports</a>
47
+ <a href="about.html" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">About</a>
48
+ </div>
49
+ </div>
50
+ <div class="hidden sm:ml-6 sm:flex sm:items-center">
51
+ <button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium flex items-center">
52
+ <i data-feather="user" class="mr-2 w-4 h-4"></i> Login
53
+ </button>
54
+ </div>
55
+ <div class="-mr-2 flex items-center sm:hidden">
56
+ <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500" aria-controls="mobile-menu" aria-expanded="false">
57
+ <i data-feather="menu"></i>
58
+ </button>
59
+ </div>
60
+ </div>
61
+ </div>
62
+
63
+ <!-- Mobile menu -->
64
+ <div class="sm:hidden hidden" id="mobile-menu">
65
+ <div class="pt-2 pb-3 space-y-1">
66
+ <a href="index.html" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Dashboard</a>
67
+ <a href="projects.html" class="bg-blue-50 border-blue-500 text-blue-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Projects</a>
68
+ <a href="habitations.html" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Habitations</a>
69
+ <a href="reports.html" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Reports</a>
70
+ <a href="about.html" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">About</a>
71
+ <div class="mt-4 pl-3 pr-4">
72
+ <button class="w-full bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium flex items-center justify-center">
73
+ <i data-feather="user" class="mr-2 w-4 h-4"></i> Login
74
+ </button>
75
+ </div>
76
+ </div>
77
+ </div>
78
+ </nav>
79
+
80
+ <!-- Page Header -->
81
+ <div class="bg-white shadow">
82
+ <div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
83
+ <div class="md:flex md:items-center md:justify-between">
84
+ <div class="flex-1 min-w-0">
85
+ <h1 class="text-2xl font-bold leading-tight text-gray-900">
86
+ Water Supply Projects
87
+ </h1>
88
+ </div>
89
+ <div class="mt-4 flex md:mt-0 md:ml-4">
90
+ <button type="button" class="inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
91
+ <i data-feather="filter" class="mr-2 h-4 w-4 text-gray-500"></i> Filter
92
+ </button>
93
+ <button type="button" class="ml-3 inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
94
+ <i data-feather="plus" class="mr-2 h-4 w-4"></i> New Project
95
+ </button>
96
+ </div>
97
+ </div>
98
+ </div>
99
+ </div>
100
+
101
+ <!-- Project Tabs -->
102
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
103
+ <div class="border-b border-gray-200">
104
+ <nav class="-mb-px flex space-x-8 overflow-x-auto">
105
+ <a href="#" class="project-tab active whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm">
106
+ All Projects
107
+ </a>
108
+ <a href="#surface-water" class="project-tab whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm">
109
+ Surface Water
110
+ </a>
111
+ <a href="#groundwater" class="project-tab whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm">
112
+ Groundwater
113
+ </a>
114
+ <a href="#reservoirs" class="project-tab whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm">
115
+ Reservoirs
116
+ </a>
117
+ <a href="#" class="project-tab whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm">
118
+ Completed
119
+ </a>
120
+ <a href="#" class="project-tab whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm">
121
+ In Progress
122
+ </a>
123
+ </nav>
124
+ </div>
125
+ </div>
126
+
127
+ <!-- Main Content -->
128
+ <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
129
+ <!-- Surface Water Projects -->
130
+ <div id="surface-water" class="mb-12" data-aos="fade-up">
131
+ <div class="flex items-center justify-between mb-6">
132
+ <h2 class="text-xl font-bold text-gray-900">Surface Water Schemes</h2>
133
+ <a href="#" class="text-sm font-medium text-blue-600 hover:text-blue-800">View All</a>
134
+ </div>
135
+
136
+ <div class="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
137
+ <!-- Project 1 -->
138
+ <div class="bg-white overflow-hidden shadow rounded-lg">
139
+ <div class="px-4 py-5 sm:p-6">
140
+ <div class="flex items-center">
141
+ <div class="flex-shrink-0 bg-blue-500 rounded-md p-3">
142
+ <i data-feather="cloud-rain" class="text-white h-6 w-6"></i>
143
+ </div>
144
+ <div class="ml-4">
145
+ <h3 class="text-lg font-medium text-gray-900">Krishna River Scheme</h3>
146
+ <p class="mt-1 text-sm text-gray-500">Shahapur & Yadgir Taluks</p>
147
+ </div>
148
+ </div>
149
+ <div class="mt-6">
150
+ <div class="flex justify-between text-sm text-gray-500 mb-1">
151
+ <span>Progress</span>
152
+ <span>78%</span>
153
+ </div>
154
+ <div class="progress-bar">
155
+ <div class="progress-fill" style="width: 78%"></div>
156
+ </div>
157
+ </div>
158
+ <div class="mt-6 grid grid-cols-2 gap-4">
159
+ <div>
160
+ <p class="text-sm text-gray-500">Habitations</p>
161
+ <p class="text-lg font-medium text-gray-900">42</p>
162
+ </div>
163
+ <div>
164
+ <p class="text-sm text-gray-500">Completion</p>
165
+ <p class="text-lg font-medium text-gray-900">Q3 2023</p>
166
+ </div>
167
+ </div>
168
+ <div class="mt-6">
169
+ <a href="#" class="w-full inline-flex justify-center items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
170
+ View Details
171
+ </a>
172
+ </div>
173
+ </div>
174
+ </div>
175
+
176
+ <!-- Project 2 -->
177
+ <div class="bg-white overflow-hidden shadow rounded-lg">
178
+ <div class="px-4 py-5 sm:p-6">
179
+ <div class="flex items-center">
180
+ <div class="flex-shrink-0 bg-blue-500 rounded-md p-3">
181
+ <i data-feather="cloud-rain" class="text-white h-6 w-6"></i>
182
+ </div>
183
+ <div class="ml-4">
184
+ <h3 class="text-lg font-medium text-gray-900">Bhima River Scheme</h3>
185
+ <p class="mt-1 text-sm text-gray-500">Shorapur & Gurmitkal Taluks</p>
186
+ </div>
187
+ </div>
188
+ <div class="mt-6">
189
+ <div class="flex justify-between text-sm text-gray-500 mb-1">
190
+ <span>Progress</span>
191
+ <span>65%</span>
192
+ </div>
193
+ <div class="progress-bar">
194
+ <div class="progress-fill" style="width: 65%"></div>
195
+ </div>
196
+ </div>
197
+ <div class="mt-6 grid grid-cols-2 gap-4">
198
+ <div>
199
+ <p class="text-sm text-gray-500">Habitations</p>
200
+ <p class="text-lg font-medium text-gray-900">38</p>
201
+ </div>
202
+ <div>
203
+ <p class="text-sm text-gray-500">Completion</p>
204
+ <p class="text-lg font-medium text-gray-900">Q1 2024</p>
205
+ </div>
206
+ </div>
207
+ <div class="mt-6">
208
+ <a href="#" class="w-full inline-flex justify-center items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
209
+ View Details
210
+ </a>
211
+ </div>
212
+ </div>
213
+ </div>
214
+
215
+ <!-- Project 3 -->
216
+ <div class="bg-white overflow-hidden shadow rounded-lg">
217
+ <div class="px-4 py-5 sm:p-6">
218
+ <div class="flex items-center">
219
+ <div class="flex-shrink-0 bg-blue-500 rounded-md p-3">
220
+ <i data-feather="cloud-rain" class="text-white h-6 w-6"></i>
221
+ </div>
222
+ <div class="ml-4">
223
+ <h3 class="text-lg font-medium text-gray-900">Canal Water Supply</h3>
224
+ <p class="mt-1 text-sm text-gray-500">Wadagera & Hunasagi Taluks</p>
225
+ </div>
226
+ </div>
227
+ <div class="mt-6">
228
+ <div class="flex justify-between text-sm text-gray-500 mb-1">
229
+ <span>Progress</span>
230
+ <span>92%</span>
231
+ </div>
232
+ <div class="progress-bar">
233
+ <div class="progress-fill" style="width: 92%"></div>
234
+ </div>
235
+ </div>
236
+ <div class="mt-6 grid grid-cols-2 gap-4">
237
+ <div>
238
+ <p class="text-sm text-gray-500">Habitations</p>
239
+ <p class="text-lg font-medium text-gray-900">27</p>
240
+ </div>
241
+ <div>
242
+ <p class="text-sm text-gray-500">Completion</p>
243
+ <p class="text-lg font-medium text-gray-900">Q2 2023</p>
244
+ </div>
245
+ </div>
246
+ <div class="mt-6">
247
+ <a href="#" class="w-full inline-flex justify-center items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
248
+ View Details
249
+ </a>
250
+ </div>
251
+ </div>
252
+ </div>
253
+ </div>
254
+ </div>
255
+
256
+ <!-- Groundwater Projects -->
257
+ <div id="groundwater" class="mb-12" data-aos="fade-up" data-aos-delay="100">
258
+ <div class="flex items-center justify-between mb-6">
259
+ <h2 class="text-xl font-bold text-gray-900">Groundwater Treatment</h2>
260
+ <a href="#" class="text-sm font-medium text-blue-600 hover:text-blue-800">View All</a>
261
+ </div>
262
+
263
+ <div class="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
264
+ <!-- Project 1 -->
265
+ <div class="bg-white overflow-hidden shadow rounded-lg">
266
+ <div class="px-4 py-5 sm:p-6">
267
+ <div class="flex items-center">
268
+ <div class="flex-shrink-0 bg-green-500 rounded-md p-3">
269
+ <i data-feather="droplet" class="text-white h-6 w-6"></i>
270
+ </div>
271
+ <div class="ml-4">
272
+ <h3 class="text-lg font-medium text-gray-900">Fluoride Mitigation</h3>
273
+ <p class="mt-1 text-sm text-gray-500">Shahapur & Yadgir Taluks</p>
274
+ </div>
275
+ </div>
276
+ <div class="mt-6">
277
+ <div class="flex justify-between text-sm text-gray-500 mb-1">
278
+ <span>Progress</span>
279
+ <span>45%</span>
280
+ </div>
281
+ <div class="progress-bar">
282
+ <div class="progress-fill" style="width: 45%"></div>
283
+ </div>
284
+ </div>
285
+ <div class="mt-6 grid grid-cols-2 gap-4">
286
+ <div>
287
+ <p class="text-sm text-gray-500">Habitations</p>
288
+ <p class="text-lg font-medium text-gray-900">68</p>
289
+ </div>
290
+ <div>
291
+ <p class="text-sm text-gray-500">Completion</p>
292
+ <p class="text-lg font-medium text-gray-900">Q4 2023</p>
293
+ </div>
294
+ </div>
295
+ <div class="mt-6">
296
+ <a href="#" class="w-full inline-flex justify-center items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
297
+ View Details
298
+ </a>
299
+ </div>
300
+ </div>
301
+ </div>
302
+
303
+ <!-- Project 2 -->
304
+ <div class="bg-white overflow-hidden shadow rounded-lg">
305
+ <div class="px-4 py-5 sm:p-6">
306
+ <div class="flex items-center">
307
+ <div class="flex-shrink-0 bg-green-500 rounded-md p-3">
308
+ <i data-feather="droplet" class="text-white h-6 w-6"></i>
309
+ </div>
310
+ <div class="ml-4">
311
+ <h3 class="text-lg font-medium text-gray-900">Iron Removal</h3>
312
+ <p class="mt-1 text-sm text-gray-500">Shorapur & Gurmitkal Taluks</p>
313
+ </div>
314
+ </div>
315
+ <div class="mt-6">
316
+ <div class="flex justify-between text-sm text-gray-500 mb-1">
317
+ <span>Progress</span>
318
+ <span>32%</span>
319
+ </div>
320
+ <div class="progress-bar">
321
+ <div class="progress-fill" style="width: 32%"></div>
322
+ </div>
323
+ </div>
324
+ <div class="mt-6 grid grid-cols-2 gap-4">
325
+ <div>
326
+ <p class="text-sm text-gray-500">Habitations</p>
327
+ <p class="text-lg font-medium text-gray-900">54</p>
328
+ </div>
329
+ <div>
330
+ <p class="text-sm text-gray-500">Completion</p>
331
+ <p class="text-lg font-medium text-gray-900">Q2 2024</p>
332
+ </div>
333
+ </div>
334
+ <div class="mt-6">
335
+ <a href="#" class="w-full inline-flex justify-center items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
336
+ View Details
337
+ </a>
338
+ </div>
339
+ </div>
340
+ </div>
341
+
342
+ <!-- Project 3 -->
343
+ <div class="bg-white overflow-hidden shadow rounded-lg">
344
+ <div class="px-4 py-5 sm:p-6">
345
+ <div class="flex items-center">
346
+ <div class="flex-shrink-0 bg-green-500 rounded-md p-3">
347
+ <i data-feather="droplet" class="text-white h-6 w-6"></i>
348
+ </div>
349
+ <div class="ml-4">
350
+ <h3 class="text-lg font-medium text-gray-900">Borewell Recharge</h3>
351
+ <p class="mt-1 text-sm text-gray-500">All Taluks</p>
352
+ </div>
353
+ </div>
354
+ <div class="mt-6">
355
+ <div class="flex justify-between text-sm text-gray-500 mb-1">
356
+ <span>Progress</span>
357
+ <span>18%</span>
358
+ </div>
359
+ <div class="progress-bar">
360
+ <div class="progress-fill" style="width: 18%"></div>
361
+ </div>
362
+ </div>
363
+ <div class="mt-6 grid grid-cols-2 gap-4">
364
+ <div>
365
+ <p class="text-sm text-gray-500">Habitations</p>
366
+ <p class="text-lg font-medium text-gray-900">112</p>
367
+ </div>
368
+ <div>
369
+ <p class="text-sm text-gray-500">Completion</p>
370
+ <p class="text-lg font-medium text-gray-900">Q3 2024</p>
371
+ </div>
372
+ </div>
373
+ <div class="mt-6">
374
+ <a href="#" class="w-full inline-flex justify-center items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
375
+ View Details
376
+ </a>
377
+ </div>
378
+ </div>
379
+ </div>
380
+ </div>
381
+ </div>
382
+
383
+ <!-- Reservoir Projects -->
384
+ <div id="reservoirs" class="mb-12" data-aos="fade-up" data-aos-delay="200">
385
+ <div class="flex items-center justify-between mb-6">
386
+ <h2 class="text-xl font-bold text-gray-900">Reservoir Systems</h2>
387
+ <a href="#" class="text-sm font-medium text-blue-600 hover:text-blue-800">View All</a>
388
+ </div>
389
+
390
+ <div class="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
391
+ <!-- Project 1 -->
392
+ <div class="bg-white overflow-hidden shadow rounded-lg">
393
+ <div class="px-4 py-5 sm:p-6">
394
+ <div class="flex items-center">
395
+ <div class="flex-shrink-0 bg-purple-500 rounded-md p-3">
396
+ <i data-feather="database" class="text-white h-6 w-6"></i>
397
+ </div>
398
+ <div class="ml-4">
399
+ <h3 class="text-lg font-medium text-gray-900">Shahapur Reservoir</h3>
400
+ <p class="mt-1 text-sm text-gray-500">Shahapur Taluk</p>
401
+ </div>
402
+ </div>
403
+ <div class="mt-6">
404
+ <div class="flex justify-between text-sm text-gray-500 mb-1">
405
+ <span>Progress</span>
406
+ <span>87%</span>
407
+ </div>
408
+ <div class="progress-bar">
409
+ <div class="progress-fill" style="width: 87%"></div>
410
+ </div>
411
+ </div>
412
+ <div class="mt-6 grid grid-cols-2 gap-4">
413
+ <div>
414
+ <p class="text-sm text-gray-500">Capacity</p>
415
+ <p class="text-lg font-medium text-gray-900">5.2 MLD</p>
416
+ </div>
417
+ <div>
418
+ <p class="text-sm text-gray-500">Completion</p>
419
+ <p class="text-lg font-medium text-gray-900">Q3 2023</p>
420
+ </div>
421
+ </div>
422
+ <div class="mt-6">
423
+ <a href="#" class="w-full inline-flex justify-center items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
424
+ View Details
425
+ </a>
426
+ </div>
427
+ </div>
428
+ </div>
429
+
430
+ <!-- Project 2 -->
431
+ <div class="bg-white overflow-hidden shadow rounded-lg">
432
+ <div class="px-4 py-5 sm:p-6">
433
+ <div class="flex items-center">
434
+ <div class="flex-shrink-0 bg-purple-500 rounded-md p-3">
435
+ <i data-feather="database" class="text-white h-6 w-6"></i>
436
+ </div>
437
+ <div class="ml-4">
438
+ <h3 class="text-lg font-medium text-gray-900">Shorapur Reservoir</h3>
439
+ <p class="mt-1 text-sm text-gray-500">Shorapur Taluk</p>
440
+ </div>
441
+ </div>
442
+ <div class="mt-6">
443
+ <div class="flex justify-between text-sm text-gray-500 mb-1">
444
+ <span>Progress</span>
445
+ <span>56%</span>
446
+ </div>
447
+ <div class="progress-bar">
448
+ <div class="progress-fill" style="width: 56%"></div>
449
+ </div>
450
+ </div>
451
+ <div class="mt-6 grid grid-cols-2 gap-4">
452
+ <div>
453
+ <p class="text-sm text-gray-500">Capacity</p>
454
+ <p class="text-lg font-medium text-gray-900">3.8 MLD</p>
455
+ </div>
456
+ <div>
457
+ <p class="text-sm text-gray-500">Completion</p>
458
+ <p class="text-lg font-medium text-gray-900">Q1 2024</p>
459
+ </div>
460
+ </div>
461
+ <div class="mt-6">
462
+ <a href="#" class="w-full inline-flex justify-center items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
463
+ View Details
464
+ </a>
465
+ </div>
466
+ </div>
467
+ </div>
468
+
469
+ <!-- Project 3 -->
470
+ <div class="bg-white overflow-hidden shadow rounded-lg">
471
+ <div class="px-4 py-5 sm:p-6">
472
+ <div class="flex items-center">
473
+ <div class="flex-shrink-0 bg-purple-500 rounded-md p-3">
474
+ <i data-feather="database" class="text-white h-6 w-6"></i>
475
+ </div>
476
+ <div class="ml-4">
477
+ <h3 class="text-lg font-medium text-gray-900">Yadgir Reservoir</h3>
478
+ <p class="mt-1 text-sm text-gray-500">Yadgir Taluk</p>
479
+ </div>
480
+ </div>
481
+ <div class="mt-6">
482
+ <div class="flex justify-between text-sm text-gray-500 mb-1">
483
+ <span>Progress</span>
484
+ <span>72%</span>
485
+ </div>
486
+ <div class="progress-bar">
487
+ <div class="progress-fill" style="width: 72%"></div>
488
+ </div>
489
+ </div>
490
+ <div class="mt-6 grid grid-cols-2 gap-4">
491
+ <div>
492
+ <p class="text-sm text-gray-500">Capacity</p>
493
+ <p class="text-lg font-medium text-gray-900">6.5 MLD</p>
494
+ </div>
495
+ <div>
496
+ <p class="text-sm text-gray-500">Completion</p>
497
+ <p class="text-lg font-medium text-gray-900">Q4 2023</p>
498
+ </div>
499
+ </div>
500
+ <div class="mt-6">
501
+ <a href="#" class="w-full inline-flex justify-center items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
502
+ View Details
503
+ </a>
504
+ </div>
505
+ </div>
506
+ </div>
507
+ </div>
508
+ </div>
509
+ </main>
510
+
511
+ <!-- Footer -->
512
+ <footer class="bg-gray-800">
513
+ <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
514
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
515
+ <div>
516
+ <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Project</h3>
517
+ <ul class="mt-4 space-y-4">
518
+ <li><a href="about.html" class="text-base text-gray-300 hover:text-white">About</a></li>
519
+ <li><a href="projects.html" class="text-base text-gray-300 hover:text-white">Projects</a></li>
520
+ <li><a href="habitations.html" class="text-base text-gray-300 hover:text-white">Habitations</a></li>
521
+ </ul>
522
+ </div>
523
+ <div>
524
+ <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Resources</h3>
525
+ <ul class="mt-4 space-y-4">
526
+ <li><a href="reports.html" class="text-base text-gray-300 hover:text-white">Reports</a></li>
527
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Documents</a></li>
528
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Maps</a></li>
529
+ </ul>
530
+ </div>
531
+ <div>
532
+ <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Support</h3>
533
+ <ul class="mt-4 space-y-4">
534
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Help Center</a></li>
535
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Contact</a></li>
536
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Status</a></li>
537
+ </ul>
538
+ </div>
539
+ <div>
540
+ <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Legal</h3>
541
+ <ul class="mt-4 space-y-4">
542
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Privacy</a></li>
543
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Terms</a></li>
544
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Cookie Policy</a></li>
545
+ </ul>
546
+ </div>
547
+ </div>
548
+ <div class="mt-8 border-t border-gray-700 pt-8 md:flex md:items-center md:justify-between">
549
+ <div class="flex space-x-6 md:order-2">
550
+ <a href="#" class="text-gray-400 hover:text-gray-300">
551
+ <i data-feather="twitter" class="h-6 w-6"></i>
552
+ </a>
553
+ <a href="#" class="text-gray-400 hover:text-gray-300">
554
+ <i data-feather="facebook" class="h-6 w-6"></i>
555
+ </a>
556
+ <a href="#" class="text-gray-400 hover:text-gray-300">
557
+ <i data-feather="instagram" class="h-6 w-6"></i>
558
+ </a>
559
+ </div>
560
+ <p class="mt-8 text-base text-gray-400 md:mt-0 md:order-1">
561
+ &copy; 2023 PMC-DBOT Yadgir Water Management. All rights reserved.
562
+ </p>
563
+ </div>
564
+ </div>
565
+ </footer>
566
+
567
+ <script>
568
+ // Mobile menu toggle
569
+ document.querySelector('nav button').addEventListener('click', function() {
570
+ const menu = document.getElementById('mobile-menu');
571
+ menu.classList.toggle('hidden');
572
+ });
573
+
574
+ // Project tab functionality
575
+ const tabs = document.querySelectorAll('.project-tab');
576
+ tabs.forEach(tab => {
577
+ tab.addEventListener('click', function(e) {
578
+ e.preventDefault();
579
+ tabs.forEach(t => t.classList.remove('active'));
580
+ this.classList.add('active');
581
+
582
+ // Scroll to section if hash exists
583
+ if(this.getAttribute('href').startsWith('#')) {
584
+ const section = document.querySelector(this.getAttribute('href'));
585
+ if(section) {
586
+ section.scrollIntoView({ behavior: 'smooth' });
587
+ }
588
+ }
589
+ });
590
+ });
591
+
592
+ // Initialize animations
593
+ AOS.init({
594
+ duration: 800,
595
+ easing: 'ease-in-out',
596
+ once: true
597
+ });
598
+
599
+ // Initialize feather icons
600
+ feather.replace();
601
+ </script>
602
+ </body>
603
+ </html>