Spaces:

mirthbottle
/

activities-planner

Running

App Files Files Community

mirthbottle commited on Jul 12, 2025

Commit

1843c7f

verified ·

1 Parent(s): 2de84b8

undefined - Initial Deployment

Browse files

Files changed (2) hide show

README.md +7 -5
index.html +220 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Activities Planner
-emoji: 🏃
-colorFrom: indigo
-colorTo: yellow
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: activities-planner
+emoji: 🐳
+colorFrom: yellow
+colorTo: red
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,220 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Location Finder</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
+    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
+    <style>
+        #map {
+            height: 400px;
+            transition: all 0.3s ease;
+        }
+        .location-card {
+            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+        }
+        .pulse {
+            animation: pulse 2s infinite;
+        }
+        @keyframes pulse {
+            0% {
+                transform: scale(0.95);
+                box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.7);
+            }
+            70% {
+                transform: scale(1);
+                box-shadow: 0 0 0 10px rgba(74, 222, 128, 0);
+            }
+            100% {
+                transform: scale(0.95);
+                box-shadow: 0 0 0 0 rgba(74, 222, 128, 0);
+            }
+        }
+    </style>
+</head>
+<body class="bg-gray-50 min-h-screen">
+    <div class="container mx-auto px-4 py-8">
+        <div class="max-w-3xl mx-auto">
+            <div class="text-center mb-8">
+                <h1 class="text-4xl font-bold text-gray-800 mb-2">📍 Location Finder</h1>
+                <p class="text-gray-600">Enter any address or place to see it on the map</p>
+            </div>
+            <div class="location-card bg-white rounded-xl p-6 mb-8">
+                <div class="flex flex-col md:flex-row gap-4">
+                    <div class="flex-grow">
+                        <label for="locationInput" class="block text-sm font-medium text-gray-700 mb-1">Search Location</label>
+                        <div class="relative">
+                            <input
+                                type="text"
+                                id="locationInput"
+                                placeholder="e.g. Eiffel Tower, Paris"
+                                class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-green-500 focus:border-green-500 transition"
+                            >
+                            <button
+                                id="searchButton"
+                                class="absolute right-2 top-1/2 transform -translate-y-1/2 bg-green-500 hover:bg-green-600 text-white p-2 rounded-lg transition duration-200 pulse"
+                            >
+                                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+                                    <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd" />
+                                </svg>
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="location-card bg-white rounded-xl overflow-hidden">
+                <div id="map" class="w-full"></div>
+                <div id="locationInfo" class="p-4 border-t border-gray-200 hidden">
+                    <h3 class="font-semibold text-lg text-gray-800 mb-1">Location Details</h3>
+                    <p id="address" class="text-gray-600"></p>
+                    <p id="coordinates" class="text-sm text-gray-500 mt-1"></p>
+                    <div id="tideInfo" class="mt-4 hidden">
+                        <h3 class="font-semibold text-lg text-gray-800 mb-1">Tide Information</h3>
+                        <div class="grid grid-cols-2 gap-4 mt-2">
+                            <div class="bg-blue-50 p-3 rounded-lg">
+                                <p class="text-sm text-blue-500">Next High Tide</p>
+                                <p id="highTideTime" class="font-medium"></p>
+                                <p id="highTideHeight" class="text-sm text-gray-500"></p>
+                            </div>
+                            <div class="bg-blue-50 p-3 rounded-lg">
+                                <p class="text-sm text-blue-500">Next Low Tide</p>
+                                <p id="lowTideTime" class="font-medium"></p>
+                                <p id="lowTideHeight" class="text-sm text-gray-500"></p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="mt-6 text-center text-gray-500 text-sm">
+                <p>Click the search button or press Enter to find your location</p>
+            </div>
+        </div>
+    </div>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            // Initialize map with a default view
+            const map = L.map('map').setView([51.505, -0.09], 13);
+            // Add tile layer (OpenStreetMap)
+            L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+                attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+            }).addTo(map);
+            // Create a marker but don't add it to the map yet
+            let marker = null;
+            // Function to update the map with the searched location
+            function updateMap(location) {
+                // Use Nominatim API for geocoding
+                fetch(`https://nominatim.openstreetmap.org/search?format=json&q=${encodeURIComponent(location)}`)
+                    .then(response => response.json())
+                    .then(data => {
+                        if (data.length > 0) {
+                            const lat = parseFloat(data[0].lat);
+                            const lon = parseFloat(data[0].lon);
+                            const displayName = data[0].display_name;
+                            // Update map view
+                            map.setView([lat, lon], 15);
+                            // Remove previous marker if exists
+                            if (marker) {
+                                map.removeLayer(marker);
+                            }
+                            // Add new marker with custom icon
+                            const customIcon = L.icon({
+                                iconUrl: 'https://cdn0.iconfinder.com/data/icons/small-n-flat/24/678111-map-marker-512.png',
+                                iconSize: [32, 32],
+                                iconAnchor: [16, 32],
+                                popupAnchor: [0, -32]
+                            });
+                            marker = L.marker([lat, lon], {icon: customIcon}).addTo(map)
+                                .bindPopup(displayName)
+                                .openPopup();
+                            // Show location info
+                            document.getElementById('locationInfo').classList.remove('hidden');
+                            document.getElementById('address').textContent = displayName;
+                            document.getElementById('coordinates').textContent = `Latitude: ${lat.toFixed(6)}, Longitude: ${lon.toFixed(6)}`;
+                            // Check if near coast and fetch tide data
+                            fetchTideData(lat, lon);
+                        } else {
+                            alert('Location not found. Please try a different search term.');
+                        }
+                    })
+                    .catch(error => {
+                        console.error('Error:', error);
+                        alert('There was an error processing your request. Please try again.');
+                    });
+            }
+            // Search button click event
+            document.getElementById('searchButton').addEventListener('click', function() {
+                const location = document.getElementById('locationInput').value.trim();
+                if (location) {
+                    updateMap(location);
+                } else {
+                    alert('Please enter a location to search.');
+                }
+            });
+            // Enter key press event
+            document.getElementById('locationInput').addEventListener('keypress', function(e) {
+                if (e.key === 'Enter') {
+                    const location = document.getElementById('locationInput').value.trim();
+                    if (location) {
+                        updateMap(location);
+                    } else {
+                        alert('Please enter a location to search.');
+                    }
+                }
+            });
+            // Function to fetch tide data
+            async function fetchTideData(lat, lon) {
+                try {
+                    // First check if location is near coast
+                    const coastlineResponse = await fetch(`https://api.onwater.io/api/v1/results/${lat},${lon}?access_key=demo`);
+                    const coastlineData = await coastlineResponse.json();
+                    if (coastlineData.water) {
+                        // Get tide data (using WorldTides API - note: you'll need to get your own API key)
+                        const now = Math.floor(Date.now() / 1000);
+                        const tideResponse = await fetch(`https://www.worldtides.info/api/v2?heights&lat=${lat}&lon=${lon}&start=${now}&length=86400&key=YOUR_API_KEY`);
+                        const tideData = await tideResponse.json();
+                        if (tideData.heights && tideData.heights.length > 0) {
+                            // Find next high and low tides
+                            const nextHigh = tideData.heights.find(h => h.type === 'high');
+                            const nextLow = tideData.heights.find(h => h.type === 'low');
+                            if (nextHigh && nextLow) {
+                                const formatTime = (timestamp) => {
+                                    return new Date(timestamp * 1000).toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'});
+                                };
+                                document.getElementById('tideInfo').classList.remove('hidden');
+                                document.getElementById('highTideTime').textContent = formatTime(nextHigh.dt);
+                                document.getElementById('highTideHeight').textContent = `${nextHigh.height.toFixed(2)}m`;
+                                document.getElementById('lowTideTime').textContent = formatTime(nextLow.dt);
+                                document.getElementById('lowTideHeight').textContent = `${nextLow.height.toFixed(2)}m`;
+                            }
+                        }
+                    }
+                } catch (error) {
+                    console.error('Error fetching tide data:', error);
+                    // Silently fail - tide info is optional
+                }
+            }
+        });
+    </script>
+<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=mirthbottle/activities-planner" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>