can you create a weather widget that mimic the one from perplexity fully interactive

README.md

@@ -1,10 +1,13 @@
 ---
-title: Weatherwise Pro
-emoji: 👁
-colorFrom: indigo
-colorTo: green
+title: WeatherWise Pro ☀️
+colorFrom: purple
+colorTo: blue
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

components/weather-widget.js

@@ -0,0 +1,364 @@
+class WeatherWidget extends HTMLElement {
+    constructor() {
+        super();
+        this.state = window.WeatherState;
+        this.attachShadow({ mode: 'open' });
+    }
+
+    connectedCallback() {
+        this.render();
+        this.state.addListener(() => this.render());
+        this.setupEventListeners();
+    }
+
+    setupEventListeners() {
+        this.shadowRoot.addEventListener('click', (e) => {
+            if (e.target.closest('[data-action="search"]')) {
+                this.handleSearch();
+            }
+            if (e.target.closest('[data-action="refresh"]')) {
+                window.loadCurrentLocationWeather();
+            }
+            if (e.target.closest('[data-action="location"]')) {
+                this.toggleLocationSearch();
+            }
+        });
+
+        this.shadowRoot.addEventListener('input', (e) => {
+            if (e.target.name === 'location-search') {
+                this.handleSearchInput(e.target.value);
+            }
+        });
+
+        this.shadowRoot.addEventListener('keypress', (e) => {
+            if (e.key === 'Enter' && e.target.name === 'location-search') {
+                this.handleSearch();
+            }
+        });
+    }
+
+    handleSearchInput(value) {
+        const searchBtn = this.shadowRoot.querySelector('[data-action="search"]');
+        searchBtn.disabled = !value.trim();
+    }
+
+    handleSearch() {
+        const input = this.shadowRoot.querySelector('[name="location-search"]');
+        if (input.value.trim()) {
+            window.searchLocation(input.value.trim());
+            input.value = '';
+            this.toggleLocationSearch();
+        }
+    }
+
+    toggleLocationSearch() {
+        const searchContainer = this.shadowRoot.querySelector('.location-search-container');
+        searchContainer.classList.toggle('hidden');
+        
+        if (!searchContainer.classList.contains('hidden')) {
+            const input = this.shadowRoot.querySelector('[name="location-search"]');
+            input.focus();
+        }
+    }
+
+    render() {
+        this.shadowRoot.innerHTML = `
+            <style>
+                :host {
+                    display: block;
+                    font-family: 'Inter', sans-serif;
+                }
+
+                .weather-card {
+                    backdrop-filter: blur(10px);
+                    background: rgba(255, 255, 255, 0.85);
+                    border: 1px solid rgba(255, 255, 255, 0.2);
+                    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+                }
+
+                .weather-gradient {
+                    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+                }
+
+                .animate-pulse-soft {
+                    animation: pulse-soft 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+                }
+
+                .weather-icon {
+                    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.1));
+                }
+
+                .loading-dots {
+                    display: inline-block;
+                    position: relative;
+                    width: 80px;
+                    height: 80px;
+                }
+
+                .loading-dots div {
+                    position: absolute;
+                    top: 33px;
+                    width: 13px;
+                    height: 13px;
+                    border-radius: 50%;
+                    background: #0ea5e9;
+                    animation-timing-function: cubic-bezier(0, 1, 1, 0);
+                }
+
+                .loading-dots div:nth-child(1) {
+                    left: 8px;
+                    animation: loading-dots1 0.6s infinite;
+                }
+
+                .loading-dots div:nth-child(2) {
+                    left: 8px;
+                    animation: loading-dots2 0.6s infinite;
+                }
+
+                .loading-dots div:nth-child(3) {
+                    left: 32px;
+                    animation: loading-dots2 0.6s infinite;
+                }
+
+                .loading-dots div:nth-child(4) {
+                    left: 56px;
+                    animation: loading-dots3 0.6s infinite;
+                }
+
+                @keyframes loading-dots1 {
+                    0% { transform: scale(0); }
+                    100% { transform: scale(1); }
+                }
+
+                @keyframes loading-dots3 {
+                    0% { transform: scale(1); }
+                    100% { transform: scale(0); }
+                }
+
+                @keyframes loading-dots2 {
+                    0% { transform: translate(0, 0); }
+                    100% { transform: translate(24px, 0); }
+                }
+
+                .slide-up {
+                    animation: slideUp 0.3s ease-out;
+                }
+
+                @keyframes slideUp {
+                    from {
+                        opacity: 0;
+                        transform: translateY(20px);
+                    }
+                    to {
+                        opacity: 1;
+                        transform: translateY(0);
+                    }
+                }
+
+                @keyframes pulse-soft {
+                    0%, 100% {
+                        opacity: 1;
+                    }
+                    50% {
+                        opacity: 0.8;
+                    }
+                }
+
+                .glass-effect {
+                    background: rgba(255, 255, 255, 0.25);
+                    backdrop-filter: blur(10px);
+                    border: 1px solid rgba(255, 255, 255, 0.18);
+                }
+            </style>
+
+            <div class="min-h-screen flex items-center justify-center p-4">
+                <div class="weather-card rounded-3xl p-6 max-w-md w-full mx-auto slide-up">
+                    ${this.renderHeader()}
+                    ${this.renderContent()}
+                    ${this.renderForecast()}
+                    ${this.renderDetails()}
+                </div>
+            </div>
+        `;
+        
+        // Re-initialize feather icons
+        if (window.feather) {
+            setTimeout(() => window.feather.replace(), 0);
+        }
+    }
+
+    renderHeader() {
+        return `
+            <div class="flex items-center justify-between mb-6">
+                <div class="flex items-center space-x-3">
+                    <button class="p-2 rounded-full glass-effect hover:bg-white/30 transition-all duration-200"
+                    data-action="refresh"
+                    ${this.state.loading ? 'disabled' : ''}>
+                    <i data-feather="refresh-cw" class="w-4 h-4 text-primary-600"></i>
+                </button>
+                <div>
+                    <h1 class="text-2xl font-bold text-gray-900">Weather</h1>
+                    <p class="text-sm text-gray-600">${this.state.currentLocation}</p>
+                </div>
+                </div>
+                <div class="flex items-center space-x-2">
+                    <div class="location-search-container hidden absolute top-20 left-1/2 transform -translate-x-1/2 z-10 bg-white rounded-2xl shadow-xl p-4 w-80">
+                        <div class="flex items-center space-x-2">
+                            <input type="text" 
+                                   name="location-search" 
+                                   placeholder="Search location..." 
+                                   class="flex-1 px-4 py-2 rounded-full border border-gray-200 focus:outline-none focus:ring-2 focus:ring-primary-500"
+                                   autocomplete="off">
+                        <button class="p-2 rounded-full bg-primary-500 text-white hover:bg-primary-600 transition-colors duration-200"
+                                   data-action="search"
+                                   disabled>
+                            <i data-feather="search" class="w-4 h-4"></i>
+                        </button>
+                    </div>
+                </div>
+                <button class="p-2 rounded-full glass-effect hover:bg-white/30 transition-all duration-200"
+                        data-action="location">
+                    <i data-feather="map-pin" class="w-4 h-4 text-primary-600"></i>
+                </button>
+                </div>
+            </div>
+        `;
+    }
+
+    renderContent() {
+        if (this.state.loading) {
+            return this.renderLoading();
+        }
+
+        if (this.state.error) {
+            return this.renderError();
+        }
+
+        if (!this.state.weatherData) {
+            return this.renderEmpty();
+        }
+
+        const { current } = this.state.weatherData;
+        const temp = window.WeatherUtils.kelvinToCelsius(current.temp);
+        const feelsLike = window.WeatherUtils.kelvinToCelsius(current.feels_like);
+        const icon = window.WeatherUtils.getWeatherIcon(current.weather[0].icon);
+
+        return `
+            <div class="text-center mb-8 slide-up">
+                <div class="weather-gradient rounded-2xl p-8 mb-4">
+                    <div class="flex items-center justify-center mb-4">
+                        <i data-feather="${icon}" class="weather-icon w-16 h-16 text-white"></i>
+                    </div>
+                    <div class="text-white">
+                        <div class="text-6xl font-bold mb-2">${temp}°</div>
+                        <div class="text-lg opacity-90">${current.weather[0].description}</div>
+                        <div class="text-sm opacity-80 mt-1">Feels like ${feelsLike}°</div>
+                    </div>
+                </div>
+            </div>
+        `;
+    }
+
+    renderForecast() {
+        if (this.state.loading || this.state.error || !this.state.weatherData) {
+            return '';
+        }
+
+        const { daily } = this.state.weatherData;
+        const forecastDays = daily.slice(1, 6); // Next 5 days
+
+        return `
+            <div class="mb-6 slide-up">
+                <h3 class="text-lg font-semibold text-gray-900 mb-4">5-Day Forecast</h3>
+                <div class="grid grid-cols-5 gap-2">
+                    ${forecastDays.map(day => {
+                        const date = window.WeatherUtils.formatDate(day.dt);
+                        const temp = window.WeatherUtils.kelvinToCelsius(day.temp.day);
+                        const icon = window.WeatherUtils.getWeatherIcon(day.weather[0].icon);
+                        return `
+                            <div class="text-center p-2 rounded-xl hover:bg-gray-50 transition-colors duration-200">
+                                <div class="text-sm font-medium text-gray-600 mb-1">${date}</div>
+                                <i data-feather="${icon}" class="weather-icon w-6 h-6 text-primary-500 mx-auto mb-1"></i>
+                            <div class="text-sm font-semibold text-gray-900">${temp}°</div>
+                        </div>
+                        `;
+                    }).join('')}
+                </div>
+            </div>
+        `;
+    }
+
+    renderDetails() {
+        if (this.state.loading || this.state.error || !this.state.weatherData) {
+            return '';
+        }
+
+        const { current } = this.state.weatherData;
+
+        return `
+            <div class="slide-up">
+                <h3 class="text-lg font-semibold text-gray-900 mb-4">Details</h3>
+                <div class="grid grid-cols-2 gap-4">
+                    <div class="bg-gray-50 rounded-xl p-4">
+                    <div class="flex items-center space-x-2 text-gray-600">
+                        <i data-feather="wind" class="w-4 h-4"></i>
+                    <span class="text-sm">Wind</span>
+                    </div>
+                    <div class="text-lg font-semibold text-gray-900">${current.wind_speed} m/s</div>
+                </div>
+                <div class="bg-gray-50 rounded-xl p-4">
+                    <div class="flex items-center space-x-2 text-gray-600">
+                        <i data-feather="droplet" class="w-4 h-4"></i>
+                    <span class="text-sm">Humidity</span>
+                    </div>
+                    <div class="text-lg font-semibold text-gray-900">${current.humidity}%</div>
+                </div>
+                <div class="bg-gray-50 rounded-xl p-4">
+                    <div class="flex items-center space-x-2 text-gray-600">
+                        <i data-feather="thermometer" class="w-4 h-4"></i>
+                    <span class="text-sm">Pressure</span>
+                    </div>
+                    <div class="text-lg font-semibold text-gray-900">${current.pressure} hPa</div>
+                </div>
+            </div>
+        `;
+    }
+
+    renderLoading() {
+        return `
+            <div class="text-center py-12 slide-up">
+                <div class="loading-dots inline-block">
+                    <div></div>
+                    <div></div>
+                    <div></div>
+                    <div></div>
+                </div>
+                <p class="text-gray-600 mt-4">Loading weather data...</p>
+            </div>
+        `;
+    }
+
+    renderError() {
+        return `
+            <div class="text-center py-12 slide-up">
+                <i data-feather="alert-triangle" class="w-12 h-12 text-yellow-500 mx-auto mb-4"></i>
+                <p class="text-gray-600">${this.state.error}</p>
+                <button class="mt-4 px-6 py-2 bg-primary-500 text-white rounded-full hover:bg-primary-600 transition-colors duration-200"
+                    onclick="window.loadCurrentLocationWeather()">
+                    Try Again
+                </button>
+            </div>
+        `;
+    }
+
+    renderEmpty() {
+        return `
+            <div class="text-center py-12 slide-up">
+                <i data-feather="cloud" class="w-12 h-12 text-gray-400 mx-auto mb-4"></i>
+                <p class="text-gray-600">No weather data available</p>
+            </div>
+        `;
+    }
+}
+
+customElements.define('weather-widget', WeatherWidget);

index.html

@@ -1,19 +1,55 @@
-<!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>WeatherWise Pro ☀️</title>
+    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    colors: {
+                        primary: {
+                            50: '#f0f9ff',
+                            100: '#e0f2fe',
+                            200: '#bae6fd',
+                            300: '#7dd3fc',
+                            400: '#38bdf8',
+                            500: '#0ea5e9',
+                            600: '#0284c7',
+                            700: '#0369a1',
+                            800: '#075985',
+                            900: '#0c4a6e',
+                        },
+                        secondary: {
+                            50: '#fafafa',
+                            100: '#f4f4f5',
+                            200: '#e4e4e7',
+                            300: '#d4d4d8',
+                            400: '#a1a1aa',
+                            500: '#71717a',
+                            600: '#52525b',
+                            700: '#3f3f46',
+                            800: '#27272a',
+                            900: '#18181b',
+                        }
+                    }
+                }
+            }
+        }
+    </script>
+</head>
+<body class="bg-gradient-to-br from-primary-50 via-white to-secondary-50 min-h-screen">
+    <weather-widget></weather-widget>
+    
+    <script src="components/weather-widget.js"></script>
+    <script src="script.js"></script>
+    <script>feather.replace();</script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>

script.js

@@ -0,0 +1,191 @@
+// Weather API configuration
+const WEATHER_API_KEY = 'demo_key'; // Replace with actual API key
+const WEATHER_API_URL = 'https://api.openweathermap.org/data/2.5';
+
+// Mock weather data for demonstration
+const mockWeatherData = {
+    current: {
+        temp: 22,
+        feels_like: 24,
+        humidity: 65,
+        pressure: 1013,
+        wind_speed: 3.5,
+        weather: [{ main: 'Clear', description: 'clear sky', icon: '01d' }]
+    },
+    daily: [
+        { dt: Date.now()/1000 + 86400, temp: { day: 23 }, weather: [{ main: 'Clouds', icon: '02d' }] },
+        { dt: Date.now()/1000 + 172800, temp: { day: 21 }, weather: [{ main: 'Rain', icon: '10d' }] },
+        { dt: Date.now()/1000 + 259200, temp: { day: 25 }, weather: [{ main: 'Clear', icon: '01d' }] },
+        { dt: Date.now()/1000 + 345600, temp: { day: 20 }, weather: [{ main: 'Clouds', icon: '03d' }] },
+        { dt: Date.now()/1000 + 432000, temp: { day: 19 }, weather: [{ main: 'Rain', icon: '09d' }] }
+    ]
+};
+
+// Utility functions
+class WeatherUtils {
+    static kelvinToCelsius(kelvin) {
+        return Math.round(kelvin - 273.15);
+    }
+
+    static getWeatherIcon(iconCode) {
+        const iconMap = {
+            '01d': 'sun',
+            '01n': 'moon',
+            '02d': 'cloud',
+            '02n': 'cloud',
+            '03d': 'cloud',
+            '03n': 'cloud',
+            '04d': 'cloud',
+            '04n': 'cloud',
+            '09d': 'cloud-rain',
+            '09n': 'cloud-rain',
+            '10d': 'cloud-drizzle',
+            '10n': 'cloud-drizzle',
+            '11d': 'cloud-lightning',
+            '11n': 'cloud-lightning',
+            '13d': 'cloud-snow',
+            '13n': 'cloud-snow',
+            '50d': 'wind',
+            '50n': 'wind'
+        };
+        return iconMap[iconCode] || 'cloud';
+    }
+
+    static formatDate(timestamp) {
+        const date = new Date(timestamp * 1000);
+        return date.toLocaleDateString('en-US', { weekday: 'short' });
+    }
+
+    static getWindDirection(degrees) {
+        const directions = ['N', 'NE', 'E', 'SE', 'S', 'SW', 'W', 'NW'];
+        return directions[Math.round(degrees / 45) % 8];
+    }
+}
+
+// Weather API service
+class WeatherService {
+    static async getWeatherData(lat, lon) {
+        try {
+            // For demo purposes, return mock data
+            // In production, uncomment the API call below
+            /*
+            const response = await fetch(
+                `${WEATHER_API_URL}/onecall?lat=${lat}&lon=${lon}&exclude=minutely,hourly,alerts&appid=${WEATHER_API_KEY}`
+            );
+            if (!response.ok) throw new Error('Weather data fetch failed');
+            return await response.json();
+            */
+            
+            // Simulate API delay
+            await new Promise(resolve => setTimeout(resolve, 1000));
+            return mockWeatherData;
+        } catch (error) {
+            console.error('Error fetching weather data:', error);
+            throw error;
+        }
+    }
+
+    static async getLocationWeather(city) {
+        try {
+            // For demo, return mock data with city name
+            const data = { ...mockWeatherData, city: city || 'Current Location' };
+            await new Promise(resolve => setTimeout(resolve, 800));
+            return data;
+        } catch (error) {
+            console.error('Error fetching location weather:', error);
+            throw error;
+        }
+    }
+}
+
+// Global state management
+class WeatherState {
+    constructor() {
+        this.currentLocation = 'Current Location';
+        this.weatherData = null;
+        this.loading = false;
+        this.error = null;
+    }
+
+    setLoading(loading) {
+        this.loading = loading;
+        this.notifyListeners();
+    }
+
+    setWeatherData(data, location) {
+        this.weatherData = data;
+        this.currentLocation = location;
+        this.error = null;
+        this.notifyListeners();
+    }
+
+    setError(error) {
+        this.error = error;
+        this.weatherData = null;
+        this.notifyListeners();
+    }
+
+    addListener(listener) {
+        this.listeners = this.listeners || [];
+        this.listeners.push(listener);
+    }
+
+    notifyListeners() {
+        if (this.listeners) {
+            this.listeners.forEach(listener => listener(this));
+        }
+    }
+}
+
+// Initialize global state
+const weatherState = new WeatherState();
+
+// Event handlers
+document.addEventListener('DOMContentLoaded', function() {
+    // Initialize with current location weather
+    loadCurrentLocationWeather();
+});
+
+async function loadCurrentLocationWeather() {
+    weatherState.setLoading(true);
+    try {
+        if (navigator.geolocation) {
+            navigator.geolocation.getCurrentPosition(
+                async (position) => {
+                    const { latitude, longitude } = position.coords;
+                    const data = await WeatherService.getWeatherData(latitude, longitude);
+                    weatherState.setWeatherData(data, 'Current Location');
+                },
+                async (error) => {
+                    // Fallback to default location
+                    const data = await WeatherService.getLocationWeather('New York');
+                    weatherState.setWeatherData(data, 'New York');
+                }
+            );
+        } else {
+            // Fallback to default location
+            const data = await WeatherService.getLocationWeather('New York');
+            weatherState.setWeatherData(data, 'New York');
+        }
+    } catch (error) {
+        weatherState.setError('Failed to load weather data');
+    }
+}
+
+async function searchLocation(city) {
+    if (!city.trim()) return;
+    
+    weatherState.setLoading(true);
+    try {
+        const data = await WeatherService.getLocationWeather(city);
+        weatherState.setWeatherData(data, city);
+    } catch (error) {
+        weatherState.setError('Location not found');
+    }
+}
+
+// Export for use in components
+window.WeatherState = weatherState;
+window.WeatherUtils = WeatherUtils;
+window.searchLocation = searchLocation;
+window.loadCurrentLocationWeather = loadCurrentLocationWeather;

style.css

@@ -1,28 +1,99 @@
-body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+
+* {
+    font-family: 'Inter', sans-serif;
+}
+
+.weather-card {
+    backdrop-filter: blur(10px);
+    background: rgba(255, 255, 255, 0.85);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+.weather-gradient {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+}
+
+.animate-pulse-soft {
+    animation: pulse-soft 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+
+@keyframes pulse-soft {
+    0%, 100% {
+        opacity: 1;
+    }
+    50% {
+        opacity: 0.8;
+    }
+}
+
+.weather-icon {
+    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.1));
+}
+
+.loading-dots {
+    display: inline-block;
+    position: relative;
+    width: 80px;
+    height: 80px;
+}
+
+.loading-dots div {
+    position: absolute;
+    top: 33px;
+    width: 13px;
+    height: 13px;
+    border-radius: 50%;
+    background: #0ea5e9;
+    animation-timing-function: cubic-bezier(0, 1, 1, 0);
+}
+
+.loading-dots div:nth-child(1) {
+    left: 8px;
+    animation: loading-dots1 0.6s infinite;
+}
+
+.loading-dots div:nth-child(2) {
+    left: 8px;
+    animation: loading-dots2 0.6s infinite;
+}
+
+.loading-dots div:nth-child(3) {
+    left: 32px;
+    animation: loading-dots2 0.6s infinite;
 }
 
-h1 {
-	font-size: 16px;
-	margin-top: 0;
+.loading-dots div:nth-child(4) {
+    left: 56px;
+    animation: loading-dots3 0.6s infinite;
 }
 
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
+@keyframes loading-dots1 {
+    0% { transform: scale(0); }
+    100% { transform: scale(1); }
 }
 
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
+@keyframes loading-dots3 {
+    0% { transform: scale(1); }
+    100% { transform: scale(0); }
 }
 
-.card p:last-child {
-	margin-bottom: 0;
+@keyframes loading-dots2 {
+    0% { transform: translate(0, 0); }
+    100% { transform: translate(24px, 0); }
 }
+
+.slide-up {
+    animation: slideUp 0.3s ease-out;
+}
+
+@keyframes slideUp {
+    from {
+        opacity: 0;
+        transform: translateY(20px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}