From f6bc924eb15362968fbee21b48fa93839d39ce07 Mon Sep 17 00:00:00 2001
From: GitHub Action <action@github.com>
Date: Wed, 8 Jan 2025 13:13:33 +0000
Subject: [PATCH] Add search.html and browse.html from external source

---
 browse.html | 189 ++++++++++++++++++++++++++++++++++++++++++++++
 search.html | 213 ++++++++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 402 insertions(+)
 create mode 100644 browse.html
 create mode 100644 search.html
diff --git a/browse.html b/browse.html
new file mode 100644
index 0000000000..9720f903b2
--- /dev/null
+++ b/browse.html
@@ -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>
diff --git a/search.html b/search.html
new file mode 100644
index 0000000000..d417d2a439
--- /dev/null
+++ b/search.html
@@ -0,0 +1,213 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <title>Catalog Search</title>
+    <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=Afacad+Flux:wght@100..1000&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,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: "Afacad Flux", sans-serif;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            height: 100vh;
+            margin: 0;
+            background-color: #f5f5f5;
+            color: black;
+            position: relative;
+            transition: background-color 0.3s ease, color 0.3s ease;
+        }
+
+        #searchWidgetTrigger {
+            padding: 10px;
+            width: 600px;
+            font-size: 16px;
+            border: 1px solid #ccc;
+            border-radius: 20px;
+            cursor: pointer;
+            text-align: center;
+            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+            padding-left: 40px;
+        }
+
+        .header {
+            margin-bottom: 20px;
+            font-size: 32px;
+            font-weight: 800;
+            color: inherit;
+            text-align: center;
+        }
+
+        .header sub {
+            font-size: 16px;
+            font-weight: 600;
+        }
+
+        .search-container {
+            position: relative;
+        }
+
+        .search-icon {
+            position: absolute;
+            left: 10px;
+            top: 50%;
+            transform: translateY(-50%);
+            font-size: 24px;
+            color: #aaa;
+        }
+
+        .back-to-catalog {
+            position: absolute;
+            bottom: 20px;
+            left: 20px;
+            background-color: #ffffff;
+            border: 2px solid #ccc;
+            border-radius: 30px;
+            padding: 10px 20px;
+            display: flex;
+            align-items: center;
+            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+            text-decoration: none;
+            color: #000;
+            font-size: 16px;
+            font-weight: 600;
+            cursor: pointer;
+            transition: background-color 0.3s ease;
+        }
+
+        .back-to-catalog:hover {
+            background-color: #eaeaea;
+        }
+
+        .back-to-catalog img {
+            width: 30px;
+            height: auto;
+            margin-right: 10px;
+        }
+
+        .back-to-catalog .material-symbols-outlined {
+            margin-left: 10px;
+            font-size: 24px;
+            vertical-align: middle;
+        }
+
+        .dark-mode {
+            background-color: #333;
+            color: white;
+        }
+
+        /* Toggle button styles */
+        .toggle-container {
+            position: absolute;
+            top: 20px;
+            right: 20px;
+            cursor: pointer;
+        }
+
+        .toggle-button {
+            padding: 10px 20px;
+            background-color: #444;
+            color: white;
+            border-radius: 30px;
+            border: none;
+            font-size: 14px;
+            font-weight: 600;
+            transition: background-color 0.3s ease;
+        }
+
+        .toggle-button:hover {
+            background-color: #666;
+        }
+    </style>
+</head>
+
+<body>
+
+    <img src="https://i.imgur.com/FYPcTFF.png" alt="Awesome GEE Community Catalog"
+        style="width: 400px; height: auto; margin-bottom: 20px;">
+
+    <div class="header">
+        Awesome GEE Community Catalog Search <sub>Beta</sub>
+    </div>
+
+    <!-- Light/Dark mode toggle -->
+    <div class="toggle-container">
+        <button id="modeToggle" class="toggle-button">Switch to Dark Mode</button>
+    </div>
+
+    <script src="https://cloud.google.com/ai/gen-app-builder/client?hl=en_GB"></script>
+
+    <gen-search-widget configId="7df2e903-867d-4e8e-b3da-bc5f138b359b"
+        triggerId="searchWidgetTrigger"></gen-search-widget>
+
+    <div class="search-container">
+        <span class="material-symbols-outlined search-icon">search</span>
+        <input type="text" placeholder="Search here" id="searchWidgetTrigger" />
+    </div>
+
+    <!-- Back to Catalog Button -->
+    <a href="https://gee-community-catalog.org/" class="back-to-catalog">
+        <img src="https://i.imgur.com/GRBvdQf.jpeg" alt="Catalog Logo">
+        Back to the Community Catalog
+        <span class="material-symbols-outlined">arrow_forward</span>
+    </a>
+
+    <script>
+        const questions = [
+            "Tell me about the ESRI Land cover dataset",
+            "What population datasets are available in the community catalog?",
+            "Tell me about datasets related to crop phenology",
+            "Are there any datasets related to soil conditions?",
+            "Give me a list of all tree canopy datasets",
+            "What population datasets can I explore in the catalog?",
+            "Give me the citation for the FABDEM dataset?",
+            "Tell me about the Mangrove extent datasets in the catalog"
+        ];
+
+        function getRandomQuestion() {
+            const randomIndex = Math.floor(Math.random() * questions.length);
+            return questions[randomIndex];
+        }
+
+        document.getElementById('searchWidgetTrigger').value = getRandomQuestion();
+
+        document.getElementById('searchWidgetTrigger').addEventListener('click', function () {
+            const widget = document.querySelector('gen-search-widget');
+            widget.open();
+        });
+
+        // Dark mode toggle script
+        const toggleButton = document.getElementById('modeToggle');
+        const bodyElement = document.body;
+
+        toggleButton.addEventListener('click', function () {
+            bodyElement.classList.toggle('dark-mode');
+            if (bodyElement.classList.contains('dark-mode')) {
+                toggleButton.textContent = 'Switch to Light Mode';
+            } else {
+                toggleButton.textContent = 'Switch to Dark Mode';
+            }
+        });
+    </script>
+
+</body>
+
+</html>
