Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Habitations | PMC-DBOT</title> | |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet"> | |
| <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/animejs/lib/anime.iife.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <style> | |
| .habitation-tab.active { | |
| border-bottom: 3px solid #3b82f6; | |
| color: #3b82f6; | |
| } | |
| .status-badge { | |
| display: inline-block; | |
| padding: 0.25rem 0.5rem; | |
| border-radius: 9999px; | |
| font-size: 0.75rem; | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| } | |
| .status-active { | |
| background-color: #d1fae5; | |
| color: #065f46; | |
| } | |
| .status-planned { | |
| background-color: #bfdbfe; | |
| color: #1e40af; | |
| } | |
| .status-completed { | |
| background-color: #dcfce7; | |
| color: #166534; | |
| } | |
| .status-pending { | |
| background-color: #fef3c7; | |
| color: #92400e; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50"> | |
| <!-- Navigation --> | |
| <nav class="bg-white shadow-lg"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex justify-between h-16"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 flex items-center"> | |
| <i data-feather="droplet" class="text-blue-600 h-8 w-8"></i> | |
| <span class="ml-2 text-xl font-bold text-gray-900">PMC-DBOT</span> | |
| </div> | |
| <div class="hidden sm:ml-6 sm:flex sm:space-x-8"> | |
| <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> | |
| <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> | |
| <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> | |
| <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> | |
| <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> | |
| </div> | |
| </div> | |
| <div class="hidden sm:ml-6 sm:flex sm:items-center"> | |
| <button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium flex items-center"> | |
| <i data-feather="user" class="mr-2 w-4 h-4"></i> Login | |
| </button> | |
| </div> | |
| <div class="-mr-2 flex items-center sm:hidden"> | |
| <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"> | |
| <i data-feather="menu"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Mobile menu --> | |
| <div class="sm:hidden hidden" id="mobile-menu"> | |
| <div class="pt-2 pb-3 space-y-1"> | |
| <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> | |
| <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> | |
| <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> | |
| <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> | |
| <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> | |
| <div class="mt-4 pl-3 pr-4"> | |
| <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"> | |
| <i data-feather="user" class="mr-2 w-4 h-4"></i> Login | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Page Header --> | |
| <div class="bg-white shadow"> | |
| <div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8"> | |
| <div class="md:flex md:items-center md:justify-between"> | |
| <div class="flex-1 min-w-0"> | |
| <h1 class="text-2xl font-bold leading-tight text-gray-900"> | |
| Habitations Overview | |
| </h1> | |
| <p class="mt-1 text-sm text-gray-500"> | |
| 715 habitations across 6 taluks in Yadgir district | |
| </p> | |
| </div> | |
| <div class="mt-4 flex md:mt-0 md:ml-4"> | |
| <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"> | |
| <i data-feather="filter" class="mr-2 h-4 w-4 text-gray-500"></i> Filter | |
| </button> | |
| <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"> | |
| <i data-feather="download" class="mr-2 h-4 w-4"></i> Export | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Habitation Tabs --> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mt-6"> | |
| <div class="border-b border-gray-200"> | |
| <nav class="-mb-px flex space-x-8 overflow-x-auto"> | |
| <a | |
| </body> | |
| </html> |