Hugging Face's logo

Spaces:
awacke1
/
WebCopyData.Gov
Running

App Files Community
awacke1 commited on
Commit
faa421f
·
verified ·
1 Parent(s): e4b3727

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +55 -43
index.html CHANGED
@@ -3,65 +3,77 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Aaron Wacker's Channel</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
- <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
9
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
10
  <style>
11
  body {
12
- font-family: 'Roboto', sans-serif;
13
  }
14
  </style>
15
  </head>
16
- <body class="bg-gray-900 text-white">
17
 
18
- <!-- Channel Header -->
19
- <header class="bg-red-600">
20
- <div class="max-w-6xl mx-auto px-4 py-5">
21
  <div class="flex justify-between items-center">
22
- <div class="flex space-x-4 items-center">
23
- <img src="https://placehold.co/80x80" alt="Channel logo" class="rounded-full">
24
- <div>
25
- <h1 class="text-4xl font-bold">Aaron Wacker</h1>
26
- <p class="text-sm">@AaronWacker - 141 subscribers - 176 videos</p>
27
- <p class="text-sm mt-1">Artificial Intelligence and Machine Learning</p>
28
- <a href="#" class="text-sm text-blue-300">soundcloud.com/aaron-wacker-941812969</a>
29
- </div>
30
- </div>
31
- <div>
32
- <button class="bg-gray-800 text-white px-4 py-2 rounded hover:bg-gray-700">Customize channel</button>
33
- <button class="bg-gray-800 text-white px-4 py-2 rounded hover:bg-gray-700 ml-2">Manage videos</button>
34
- </div>
35
  </div>
36
- <!-- Navigation -->
37
- <nav class="flex space-x-4 mt-4 border-b border-gray-700">
38
- <a href="#" class="text-white py-2 border-b-4 border-red-500">Home</a>
39
- <a href="#" class="text-gray-300 py-2 hover:text-white">Videos</a>
40
- <a href="#" class="text-gray-300 py-2 hover:text-white">Shorts</a>
41
- <a href="#" class="text-gray-300 py-2 hover:text-white">Live</a>
42
- <a href="#" class="text-gray-300 py-2 hover:text-white">Releases</a>
43
- <a href="#" class="text-gray-300 py-2 hover:text-white">Playlists</a>
44
- <a href="#" class="text-gray-300 py-2 hover:text-white">Community</a>
45
- </nav>
46
  </div>
47
  </header>
48
 
49
  <!-- Main Content -->
50
- <main class="max-w-6xl mx-auto px-4 py-5">
51
- <!-- Playlist Section -->
52
- <section>
53
- <h2 class="text-2xl font-bold mb-4">Created playlists</h2>
54
- <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
55
- <!-- Playlist Item -->
56
- <div class="bg-gray-800 rounded-lg p-4">
57
- <img src="https://placehold.co/300x200" alt="Playlist thumbnail image" class="rounded mb-2">
58
- <h3 class="text-lg font-semibold">Music in You</h3>
59
- <p class="text-sm text-gray-400">17 views • 1 month ago</p>
60
- <p class="text-sm text-gray-400">Art Video by Aaron Wacker</p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
61
  </div>
62
- <!-- Repeat for other playlist items -->
63
  </div>
64
- </section>
 
65
  </main>
66
 
67
  </body>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Data Catalog</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
+ <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&display=swap" rel="stylesheet">
9
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
10
  <style>
11
  body {
12
+ font-family: 'Open Sans', sans-serif;
13
  }
14
  </style>
15
  </head>
16
+ <body class="bg-gray-100 text-gray-900">
17
 
18
+ <!-- Header -->
19
+ <header class="bg-white shadow">
20
+ <div class="max-w-7xl mx-auto px-4 py-6">
21
  <div class="flex justify-between items-center">
22
+ <a href="#" class="text-lg font-semibold">DATA.GOV</a>
23
+ <nav class="space-x-4">
24
+ <a href="#" class="text-gray-600 hover:text-gray-900">Data</a>
25
+ <a href="#" class="text-gray-600 hover:text-gray-900">Reports</a>
26
+ <a href="#" class="text-gray-600 hover:text-gray-900">Open Government</a>
27
+ <a href="#" class="text-gray-600 hover:text-gray-900">Contact</a>
28
+ </nav>
 
 
 
 
 
 
29
  </div>
 
 
 
 
 
 
 
 
 
 
30
  </div>
31
  </header>
32
 
33
  <!-- Main Content -->
34
+ <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 my-6">
35
+ <!-- Title -->
36
+ <div class="text-3xl font-bold my-6">
37
+ DATA CATALOG
38
+ </div>
39
+
40
+ <!-- Search Bar -->
41
+ <div class="flex flex-wrap items-center gap-4 mb-6">
42
+ <div class="flex-1 min-w-0">
43
+ <input type="text" placeholder="Search datasets..." class="w-full p-2 border border-gray-300 rounded">
44
+ </div>
45
+ <button class="p-2 bg-blue-600 text-white rounded hover:bg-blue-700">
46
+ <i class="fas fa-search"></i>
47
+ </button>
48
+ </div>
49
+
50
+ <!-- Filters and Sorting -->
51
+ <div class="flex flex-col sm:flex-row justify-between mb-6">
52
+ <div>
53
+ <label for="sort-by" class="text-sm font-medium">Order by:</label>
54
+ <select id="sort-by" class="ml-2 p-1 border border-gray-300 rounded">
55
+ <option>Popular</option>
56
+ <!-- Other options -->
57
+ </select>
58
+ </div>
59
+ <div class="text-lg font-semibold">
60
+ 294,930 datasets found
61
+ </div>
62
+ </div>
63
+
64
+ <!-- Datasets List -->
65
+ <div class="space-y-4">
66
+ <!-- Dataset Item -->
67
+ <div class="bg-white p-4 rounded shadow">
68
+ <h3 class="text-xl font-semibold mb-2">Electric Vehicle Population Data</h3>
69
+ <p class="text-sm text-gray-600 mb-2">State of Washington — This dataset shows the Battery Electric Vehicles (BEVs)...</p>
70
+ <div class="flex space-x-2 text-sm">
71
+ <a href="#" class="text-blue-600 hover:text-blue-800">CSV</a>
72
+ <!-- Other formats -->
73
  </div>
 
74
  </div>
75
+ <!-- Repeat for other dataset items -->
76
+ </div>
77
  </main>
78
 
79
  </body>