Skip to content

Commit

Permalink
Add search.html and browse.html from external source
Browse files Browse the repository at this point in the history
  • Loading branch information
@actions-user
actions-user committed Dec 8, 2024
1 parent e2e1fd9 commit efaffd4
Show file tree
Hide file tree
Showing 2 changed files with 402 additions and 0 deletions.
189 changes: 189 additions & 0 deletions browse.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,189 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Catalog Browser</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
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"
rel="stylesheet">
<link rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
<script async src="https://www.googletagmanager.com/gtag/js?id=G-G7SXDJEWXV"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag('js', new Date());
gtag('config', 'G-G7SXDJEWXV');
</script>
<style>
body {
font-family: "Poppins", sans-serif;
padding-left: 1rem;
padding-right: 1rem;
}

body.dark {
background-color: #1a202c;
color: #cbd5e0;
}

.dark input[type="search"] {
background-color: #2d3748;
color: #cbd5e0;
border-color: #4a5568;
}

.dark header {
background-color: #2d3748;
}

.dark #dataset-count {
color: #cbd5e0;
}

.btn {
display: inline-block;
border-radius: 9999px;
padding: 0.25rem 0.5rem;
text-align: center;
cursor: pointer;
transition: background-color 0.2s, transform 0.2s;
white-space: nowrap;
/* Ensure text stays on one line */
}

.btn:hover {
background-color: #2d3748;
/* Change color as needed */
color: #fff;
/* Text color on hover */
transform: scale(1.05);
/* Slightly enlarge button */
}

input[type="search"] {
border-radius: 9999px;
margin-right: 1rem;
}

.grid {
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 1.5rem;
/* Ensure enough space between items */
}

.dataset-card {
padding: 1rem;
/* Reduce padding for better spacing */
}

.dataset-card .buttons {
display: flex;
gap: 0.5rem;
justify-content: space-evenly;
margin-top: auto;
flex-wrap: nowrap;
/* Prevent buttons from wrapping */
}
</style>
</head>

<body class="min-h-screen">
<header class="sticky top-0 z-50 w-full border-b bg-white dark:bg-gray-800">
<div class="container mx-auto p-4 flex justify-between items-center">
<div class="flex items-center space-x-2">
<img src="https://i.imgur.com/FYPcTFF.png" alt="Logo" class="h-12">
<!-- Adjusted height to make the logo bigger -->
<h1 class="text-lg font-bold">Catalog Browser</h1> <!-- Adjusted text size if necessary -->
</div>

<div class="flex items-center">
<input type="search" id="search" placeholder="Search datasets..." class="p-2 rounded border w-80">
<span id="dataset-count" class="text-gray-700 dark:text-gray-300">0 datasets</span>
</div>
<button id="theme-toggle" class="p-2">
<span class="material-symbols-outlined" id="theme-icon">light_mode</span>
</button>
</div>
</header>

<main class="container mx-auto py-6">
<div id="dataset-container" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
<!-- Datasets will be dynamically loaded here -->
</div>
</main>

<script>
document.addEventListener('DOMContentLoaded', function () {
const datasetContainer = document.getElementById('dataset-container');
const searchInput = document.getElementById('search');
const themeToggle = document.getElementById('theme-toggle');
const themeIcon = document.getElementById('theme-icon');
const datasetCount = document.getElementById('dataset-count');
let datasets = [];
let displayedDatasets = [];

// Fetch dataset data
fetch('https://raw.githubusercontent.com/samapriya/awesome-gee-community-datasets/master/community_datasets.json')
.then(response => response.json())
.then(data => {
datasets = data;
datasetCount.textContent = `${datasets.length} datasets`;
shuffleArray(datasets); // Shuffle datasets initially
loadDatasets();
});

// Function to shuffle the array
function shuffleArray(array) {
for (let i = array.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[array[i], array[j]] = [array[j], array[i]];
}
}

function loadDatasets() {
const filteredDatasets = datasets.filter(dataset =>
Object.values(dataset).some(value =>
value.toString().toLowerCase().includes(searchInput.value.toLowerCase())
)
);

datasetCount.textContent = `${filteredDatasets.length} datasets`; // Update dataset count

datasetContainer.innerHTML = ''; // Clear previous datasets
filteredDatasets.forEach(dataset => {
const card = document.createElement('div');
card.classList.add('card', 'p-4', 'border', 'rounded', 'flex', 'flex-col', 'dataset-card');
card.innerHTML = `
<h2 class="text-base font-medium mb-2">${dataset.title}</h2>
<img src="${dataset.thumbnail}" alt="${dataset.title}" class="object-cover rounded-md mb-2 w-full h-40">
<p class="text-sm text-gray-500 mb-2">${dataset.thematic_group}</p>
<div class="buttons">
${dataset.docs ? `<a href="${dataset.docs}" target="_blank" class="btn border p-2 flex-1 text-center">Documentation</a>` : ''}
${dataset.sample_code ? `<a href="${dataset.sample_code}" target="_blank" class="btn border p-2 flex-1 text-center">Sample Code</a>` : ''}
</div>
`;
datasetContainer.appendChild(card);
});
}

searchInput.addEventListener('input', () => {
loadDatasets();
});

themeToggle.addEventListener('click', () => {
document.body.classList.toggle('dark');
themeIcon.textContent = document.body.classList.contains('dark') ? 'dark_mode' : 'light_mode';
});
});
</script>
</body>

</html>
Loading

0 comments on commit efaffd4

Please sign in to comment.