Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Data Catalog</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&display=swap" rel="stylesheet"> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"> | |
| <style> | |
| body { | |
| font-family: 'Open Sans', sans-serif; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-100 text-gray-900"> | |
| <!-- Header --> | |
| <header class="bg-white shadow"> | |
| <div class="max-w-7xl mx-auto px-4 py-6"> | |
| <div class="flex justify-between items-center"> | |
| <a href="#" class="text-lg font-semibold">DATA.GOV</a> | |
| <nav class="space-x-4"> | |
| <a href="#" class="text-gray-600 hover:text-gray-900">Data</a> | |
| <a href="#" class="text-gray-600 hover:text-gray-900">Reports</a> | |
| <a href="#" class="text-gray-600 hover:text-gray-900">Open Government</a> | |
| <a href="#" class="text-gray-600 hover:text-gray-900">Contact</a> | |
| </nav> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Main Content --> | |
| <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 my-6"> | |
| <!-- Title --> | |
| <div class="text-3xl font-bold my-6"> | |
| DATA CATALOG | |
| </div> | |
| <!-- Search Bar --> | |
| <div class="flex flex-wrap items-center gap-4 mb-6"> | |
| <div class="flex-1 min-w-0"> | |
| <input type="text" placeholder="Search datasets..." class="w-full p-2 border border-gray-300 rounded"> | |
| </div> | |
| <button class="p-2 bg-blue-600 text-white rounded hover:bg-blue-700"> | |
| <i class="fas fa-search"></i> | |
| </button> | |
| </div> | |
| <!-- Filters and Sorting --> | |
| <div class="flex flex-col sm:flex-row justify-between mb-6"> | |
| <div> | |
| <label for="sort-by" class="text-sm font-medium">Order by:</label> | |
| <select id="sort-by" class="ml-2 p-1 border border-gray-300 rounded"> | |
| <option>Popular</option> | |
| <!-- Other options --> | |
| </select> | |
| </div> | |
| <div class="text-lg font-semibold"> | |
| 294,930 datasets found | |
| </div> | |
| </div> | |
| <!-- Datasets List --> | |
| <div class="space-y-4"> | |
| <!-- Dataset Item --> | |
| <div class="bg-white p-4 rounded shadow"> | |
| <h3 class="text-xl font-semibold mb-2">Electric Vehicle Population Data</h3> | |
| <p class="text-sm text-gray-600 mb-2">State of Washington — This dataset shows the Battery Electric Vehicles (BEVs)...</p> | |
| <div class="flex space-x-2 text-sm"> | |
| <a href="#" class="text-blue-600 hover:text-blue-800">CSV</a> | |
| <!-- Other formats --> | |
| </div> | |
| </div> | |
| <!-- Repeat for other dataset items --> | |
| </div> | |
| </main> | |
| </body> | |
| </html> | |