Skip to content

Commit f9cac03

Browse files
actions-useractions-user
committed
Add search.html and browse.html from external source
1 parent 3897d10 commit f9cac03

File tree

2 files changed

+402
-0
lines changed

2 files changed

+402
-0
lines changed

‎browse.html

Lines changed: 189 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,189 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Catalog Browser</title>
8+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css">
9+
<link rel="preconnect" href="https://fonts.googleapis.com">
10+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
11+
<link
12+
href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900&display=swap"
13+
rel="stylesheet">
14+
<link rel="stylesheet"
15+
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200" />
16+
<script async src="https://www.googletagmanager.com/gtag/js?id=G-G7SXDJEWXV"></script>
17+
<script>
18+
window.dataLayer = window.dataLayer || [];
19+
function gtag() {
20+
dataLayer.push(arguments);
21+
}
22+
gtag('js', new Date());
23+
gtag('config', 'G-G7SXDJEWXV');
24+
</script>
25+
<style>
26+
body {
27+
font-family: "Poppins", sans-serif;
28+
padding-left: 1rem;
29+
padding-right: 1rem;
30+
}
31+
32+
body.dark {
33+
background-color: #1a202c;
34+
color: #cbd5e0;
35+
}
36+
37+
.dark input[type="search"] {
38+
background-color: #2d3748;
39+
color: #cbd5e0;
40+
border-color: #4a5568;
41+
}
42+
43+
.dark header {
44+
background-color: #2d3748;
45+
}
46+
47+
.dark #dataset-count {
48+
color: #cbd5e0;
49+
}
50+
51+
.btn {
52+
display: inline-block;
53+
border-radius: 9999px;
54+
padding: 0.25rem 0.5rem;
55+
text-align: center;
56+
cursor: pointer;
57+
transition: background-color 0.2s, transform 0.2s;
58+
white-space: nowrap;
59+
/* Ensure text stays on one line */
60+
}
61+
62+
.btn:hover {
63+
background-color: #2d3748;
64+
/* Change color as needed */
65+
color: #fff;
66+
/* Text color on hover */
67+
transform: scale(1.05);
68+
/* Slightly enlarge button */
69+
}
70+
71+
input[type="search"] {
72+
border-radius: 9999px;
73+
margin-right: 1rem;
74+
}
75+
76+
.grid {
77+
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
78+
gap: 1.5rem;
79+
/* Ensure enough space between items */
80+
}
81+
82+
.dataset-card {
83+
padding: 1rem;
84+
/* Reduce padding for better spacing */
85+
}
86+
87+
.dataset-card .buttons {
88+
display: flex;
89+
gap: 0.5rem;
90+
justify-content: space-evenly;
91+
margin-top: auto;
92+
flex-wrap: nowrap;
93+
/* Prevent buttons from wrapping */
94+
}
95+
</style>
96+
</head>
97+
98+
<body class="min-h-screen">
99+
<header class="sticky top-0 z-50 w-full border-b bg-white dark:bg-gray-800">
100+
<div class="container mx-auto p-4 flex justify-between items-center">
101+
<div class="flex items-center space-x-2">
102+
<img src="https://i.imgur.com/FYPcTFF.png" alt="Logo" class="h-12">
103+
<!-- Adjusted height to make the logo bigger -->
104+
<h1 class="text-lg font-bold">Catalog Browser</h1> <!-- Adjusted text size if necessary -->
105+
</div>
106+
107+
<div class="flex items-center">
108+
<input type="search" id="search" placeholder="Search datasets..." class="p-2 rounded border w-80">
109+
<span id="dataset-count" class="text-gray-700 dark:text-gray-300">0 datasets</span>
110+
</div>
111+
<button id="theme-toggle" class="p-2">
112+
<span class="material-symbols-outlined" id="theme-icon">light_mode</span>
113+
</button>
114+
</div>
115+
</header>
116+
117+
<main class="container mx-auto py-6">
118+
<div id="dataset-container" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
119+
<!-- Datasets will be dynamically loaded here -->
120+
</div>
121+
</main>
122+
123+
<script>
124+
document.addEventListener('DOMContentLoaded', function () {
125+
const datasetContainer = document.getElementById('dataset-container');
126+
const searchInput = document.getElementById('search');
127+
const themeToggle = document.getElementById('theme-toggle');
128+
const themeIcon = document.getElementById('theme-icon');
129+
const datasetCount = document.getElementById('dataset-count');
130+
let datasets = [];
131+
let displayedDatasets = [];
132+
133+
// Fetch dataset data
134+
fetch('https://raw.githubusercontent.com/samapriya/awesome-gee-community-datasets/master/community_datasets.json')
135+
.then(response => response.json())
136+
.then(data => {
137+
datasets = data;
138+
datasetCount.textContent = `${datasets.length} datasets`;
139+
shuffleArray(datasets); // Shuffle datasets initially
140+
loadDatasets();
141+
});
142+
143+
// Function to shuffle the array
144+
function shuffleArray(array) {
145+
for (let i = array.length - 1; i > 0; i--) {
146+
const j = Math.floor(Math.random() * (i + 1));
147+
[array[i], array[j]] = [array[j], array[i]];
148+
}
149+
}
150+
151+
function loadDatasets() {
152+
const filteredDatasets = datasets.filter(dataset =>
153+
Object.values(dataset).some(value =>
154+
value.toString().toLowerCase().includes(searchInput.value.toLowerCase())
155+
)
156+
);
157+
158+
datasetCount.textContent = `${filteredDatasets.length} datasets`; // Update dataset count
159+
160+
datasetContainer.innerHTML = ''; // Clear previous datasets
161+
filteredDatasets.forEach(dataset => {
162+
const card = document.createElement('div');
163+
card.classList.add('card', 'p-4', 'border', 'rounded', 'flex', 'flex-col', 'dataset-card');
164+
card.innerHTML = `
165+
<h2 class="text-base font-medium mb-2">${dataset.title}</h2>
166+
<img src="${dataset.thumbnail}" alt="${dataset.title}" class="object-cover rounded-md mb-2 w-full h-40">
167+
<p class="text-sm text-gray-500 mb-2">${dataset.thematic_group}</p>
168+
<div class="buttons">
169+
${dataset.docs ? `<a href="${dataset.docs}" target="_blank" class="btn border p-2 flex-1 text-center">Documentation</a>` : ''}
170+
${dataset.sample_code ? `<a href="${dataset.sample_code}" target="_blank" class="btn border p-2 flex-1 text-center">Sample Code</a>` : ''}
171+
</div>
172+
`;
173+
datasetContainer.appendChild(card);
174+
});
175+
}
176+
177+
searchInput.addEventListener('input', () => {
178+
loadDatasets();
179+
});
180+
181+
themeToggle.addEventListener('click', () => {
182+
document.body.classList.toggle('dark');
183+
themeIcon.textContent = document.body.classList.contains('dark') ? 'dark_mode' : 'light_mode';
184+
});
185+
});
186+
</script>
187+
</body>
188+
189+
</html>

0 commit comments

Comments
 (0)