Spaces:

Yfaite
/

undefined

Running

App Files Files Community

Yfaite commited on Oct 12, 2025

Commit

6cb7dfc

verified ·

1 Parent(s): 69b6726

I can't find cities

Browse files

Files changed (2) hide show

README.md +9 -5
index.html +241 -18

README.md CHANGED Viewed

@@ -1,10 +1,14 @@
 ---
-title: Undefined
-emoji: 👀
-colorFrom: green
-colorTo: blue
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: undefined
+colorFrom: blue
+colorTo: green
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://deepsite.hf.co).

index.html CHANGED Viewed

@@ -1,19 +1,242 @@
-<!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>Cloudy With a Chance of Data</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
+        body {
+            font-family: 'Poppins', sans-serif;
+            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            min-height: 100vh;
+        }
+        .weather-card {
+            backdrop-filter: blur(10px);
+            background: rgba(255, 255, 255, 0.2);
+            border-radius: 20px;
+            box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1);
+            border: 1px solid rgba(255, 255, 255, 0.18);
+        }
+        .search-btn {
+            transition: all 0.3s ease;
+        }
+        .search-btn:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+        }
+        .forecast-item {
+            transition: all 0.3s ease;
+        }
+        .forecast-item:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
+        }
+    </style>
+</head>
+<body class="py-8 px-4">
+    <div class="max-w-4xl mx-auto">
+        <!-- Header -->
+        <header class="text-center mb-8">
+            <h1 class="text-4xl font-bold text-gray-800 mb-2">Cloudy With a Chance of Data</h1>
+            <p class="text-gray-600">Your personal weather oracle</p>
+        </header>
+        <!-- Search Bar -->
+        <div class="flex mb-8 justify-center">
+            <div class="relative w-full max-w-md">
+                <input
+                    type="text"
+                    id="location-input"
+                    placeholder="Enter city name..."
+                    class="w-full px-6 py-3 rounded-full border-0 shadow-md focus:outline-none focus:ring-2 focus:ring-blue-400"
+                >
+                <button
+                    id="search-btn"
+                    class="absolute right-2 top-1/2 transform -translate-y-1/2 bg-blue-500 hover:bg-blue-600 text-white p-2 rounded-full search-btn"
+                >
+                    <i data-feather="search"></i>
+                </button>
+            </div>
+        </div>
+        <!-- Current Weather -->
+        <div id="current-weather" class="weather-card p-6 mb-8 text-center hidden">
+            <div class="flex justify-between items-center mb-4">
+                <div class="text-left">
+                    <h2 id="location" class="text-2xl font-bold text-gray-800">New York, US</h2>
+                    <p id="date" class="text-gray-600">Friday, 15 October</p>
+                </div>
+                <div id="weather-icon" class="w-20 h-20">
+                    <!-- Weather icon will be inserted here -->
+                </div>
+            </div>
+            <div class="flex justify-around items-center">
+                <div>
+                    <p id="temp" class="text-5xl font-bold text-gray-800">22°C</p>
+                    <p id="weather-desc" class="text-gray-600">Partly Cloudy</p>
+                </div>
+                <div class="grid grid-cols-2 gap-4 text-sm">
+                    <div class="flex items-center">
+                        <i data-feather="wind" class="mr-2 text-blue-500"></i>
+                        <span id="wind-speed">5 km/h</span>
+                    </div>
+                    <div class="flex items-center">
+                        <i data-feather="droplet" class="mr-2 text-blue-500"></i>
+                        <span id="humidity">65%</span>
+                    </div>
+                    <div class="flex items-center">
+                        <i data-feather="compass" class="mr-2 text-blue-500"></i>
+                        <span id="pressure">1012 hPa</span>
+                    </div>
+                    <div class="flex items-center">
+                        <i data-feather="eye" class="mr-2 text-blue-500"></i>
+                        <span id="visibility">10 km</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <!-- Forecast -->
+        <div id="forecast-container" class="hidden">
+            <h2 class="text-xl font-semibold text-gray-800 mb-4">5-Day Forecast</h2>
+            <div id="forecast" class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-4">
+                <!-- Forecast items will be inserted here -->
+            </div>
+        </div>
+        <!-- Loading State -->
+        <div id="loading" class="text-center hidden">
+            <div class="inline-block animate-spin rounded-full h-8 w-8 border-t-2 border-b-2 border-blue-500 mb-2"></div>
+            <p>Fetching weather data...</p>
+        </div>
+        <!-- Error State -->
+        <div id="error" class="text-center hidden">
+            <i data-feather="alert-circle" class="text-red-500 w-12 h-12 mx-auto mb-2"></i>
+            <p id="error-message" class="text-red-500">Location not found. Please try another city.</p>
+            <div class="mt-4 text-sm text-gray-600">
+                <p>Search tips:</p>
+                <ul class="list-disc list-inside">
+                    <li>Check your spelling</li>
+                    <li>Try a nearby major city</li>
+                    <li>Include country code (e.g. "Paris, FR")</li>
+                </ul>
+            </div>
+        </div>
+</div>
+    <script>
+        feather.replace();
+        document.getElementById('search-btn').addEventListener('click', fetchWeather);
+        document.getElementById('location-input').addEventListener('keypress', function(e) {
+            if (e.key === 'Enter') {
+                fetchWeather();
+            }
+        });
+        async function fetchWeather() {
+            const location = document.getElementById('location-input').value.trim();
+            if (!location) return;
+            // Show loading state
+            document.getElementById('loading').classList.remove('hidden');
+            document.getElementById('current-weather').classList.add('hidden');
+            document.getElementById('forecast-container').classList.add('hidden');
+            document.getElementById('error').classList.add('hidden');
+            try {
+                // Fetch current weather
+                const currentWeatherResponse = await fetch(`https://api.openweathermap.org/data/2.5/weather?q=${location}&units=metric&appid=YOUR_API_KEY`);
+                if (!currentWeatherResponse.ok) {
+                    if (currentWeatherResponse.status === 404) {
+                        throw new Error('City not found. Try a different spelling or nearby location.');
+                    } else if (currentWeatherResponse.status === 401) {
+                        throw new Error('API issue. Please try again later.');
+                    } else {
+                        throw new Error(`Error: ${currentWeatherResponse.statusText}`);
+                    }
+                }
+                const currentWeatherData = await currentWeatherResponse.json();
+                // Fetch forecast
+                const forecastResponse = await fetch(`https://api.openweathermap.org/data/2.5/forecast?q=${location}&units=metric&appid=YOUR_API_KEY`);
+                if (!forecastResponse.ok) throw new Error('Forecast data unavailable');
+                const forecastData = await forecastResponse.json();
+                // Validate we got data for the city
+                if (currentWeatherData.cod !== 200 || forecastData.cod !== "200") {
+                    throw new Error('Incomplete weather data received');
+                }
+// Update UI with current weather
+                updateCurrentWeather(currentWeatherData);
+                // Update UI with forecast
+                updateForecast(forecastData);
+                // Hide loading, show weather
+                document.getElementById('loading').classList.add('hidden');
+                document.getElementById('current-weather').classList.remove('hidden');
+                document.getElementById('forecast-container').classList.remove('hidden');
+            } catch (error) {
+                console.error('Error fetching weather:', error);
+                document.getElementById('loading').classList.add('hidden');
+                document.getElementById('error').classList.remove('hidden');
+                document.getElementById('error-message').textContent = error.message;
+}
+        }
+        function updateCurrentWeather(data) {
+            document.getElementById('location').textContent = `${data.name}, ${data.sys.country}`;
+            document.getElementById('date').textContent = new Date(data.dt * 1000).toLocaleDateString('en-US', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' });
+            document.getElementById('temp').textContent = `${Math.round(data.main.temp)}°C`;
+            document.getElementById('weather-desc').textContent = data.weather[0].description;
+            document.getElementById('wind-speed').textContent = `${data.wind.speed} km/h`;
+            document.getElementById('humidity').textContent = `${data.main.humidity}%`;
+            document.getElementById('pressure').textContent = `${data.main.pressure} hPa`;
+            document.getElementById('visibility').textContent = `${data.visibility / 1000} km`;
+            // Update weather icon
+            const weatherIcon = document.getElementById('weather-icon');
+            weatherIcon.innerHTML = `<img src="https://openweathermap.org/img/wn/${data.weather[0].icon}@2x.png" alt="${data.weather[0].description}">`;
+        }
+        function updateForecast(data) {
+            const forecastContainer = document.getElementById('forecast');
+            forecastContainer.innerHTML = '';
+            // Filter to get one forecast per day (every 24 hours)
+            const dailyForecasts = data.list.filter((forecast, index) => index % 8 === 0);
+            dailyForecasts.forEach(forecast => {
+                const date = new Date(forecast.dt * 1000);
+                const dayName = date.toLocaleDateString('en-US', { weekday: 'short' });
+                const forecastItem = document.createElement('div');
+                forecastItem.className = 'weather-card p-4 text-center forecast-item';
+                forecastItem.innerHTML = `
+                    <p class="font-medium text-gray-800">${dayName}</p>
+                    <p class="text-sm text-gray-600 mb-2">${date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' })}</p>
+                    <img src="https://openweathermap.org/img/wn/${forecast.weather[0].icon}.png" alt="${forecast.weather[0].description}" class="mx-auto w-16 h-16">
+                    <p class="text-gray-600 text-sm capitalize">${forecast.weather[0].description}</p>
+                    <div class="flex justify-center gap-4 mt-2">
+                        <span class="font-bold text-gray-800">${Math.round(forecast.main.temp_max)}°</span>
+                        <span class="text-gray-600">${Math.round(forecast.main.temp_min)}°</span>
+                    </div>
+                `;
+                forecastContainer.appendChild(forecastItem);
+            });
+        }
+        // Example: Load default weather for London on page load (more reliable)
+        window.addEventListener('load', () => {
+            document.getElementById('location-input').value = 'London, UK';
+            fetchWeather();
+        });
+</script>
+</body>
 </html>