<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>Su7 Link Portal</title>
    <link rel="manifest" href="manifest.json">
    <meta name="theme-color" content="#0a0a0a">
    <style>
        :root { --bg: #0a0a0a; --text: #ffffff; --card: #1c1c1e; --accent: #007aff; --blur: rgba(28, 28, 30, 0.8); }
        [data-theme="light"] { --bg: #f2f2f7; --text: #000000; --card: #ffffff; --accent: #007aff; --blur: rgba(255, 255, 255, 0.8); }

        body { 
            background: var(--bg); color: var(--text); 
            font-family: 'Inter', -apple-system, sans-serif;
            margin: 0; padding: 30px; transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
            user-select: none; -webkit-tap-highlight-color: transparent;
        }

        /* Header: Reloj y Clima */
        .header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 50px; }
        #clock { font-size: 5rem; font-weight: 800; letter-spacing: -3px; line-height: 1; }
        #weather-box { text-align: right; background: var(--blur); padding: 15px 25px; border-radius: 25px; backdrop-filter: blur(10px); }
        .temp { font-size: 2.2rem; font-weight: 300; margin: 0; }
        #weather-desc { font-size: 0.9rem; opacity: 0.7; text-transform: capitalize; }

        /* Grid de Aplicaciones */
        .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 25px; }
        .card { 
            background: var(--card); border-radius: 28px; padding: 25px 15px; 
            display: flex; flex-direction: column; align-items: center;
            box-shadow: 0 10px 20px rgba(0,0,0,0.1); cursor: pointer;
            transition: all 0.3s ease; border: 1px solid rgba(255,255,255,0.05);
        }
        .card:active { transform: scale(0.9); opacity: 0.8; }
        .app-icon { 
            width: 65px; height: 65px; border-radius: 18px; margin-bottom: 12px; 
            object-fit: cover; background: #333; box-shadow: 0 5px 15px rgba(0,0,0,0.2);
        }
        .app-name { font-size: 0.9rem; font-weight: 500; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; }

        /* Botón Añadir */
        .add-btn { 
            position: fixed; bottom: 40px; right: 40px; background: var(--accent);
            color: white; border: none; width: 65px; height: 65px; border-radius: 50%;
            font-size: 2rem; box-shadow: 0 10px 25px rgba(0,122,255,0.4); cursor: pointer;
            display: flex; align-items: center; justify-content: center;
        }

        /* Animación de entrada */
        @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
        .card { animation: fadeIn 0.5s ease forwards; }
    </style>
</head>
<body>

    <div class="header">
        <div id="clock">00:00</div>
        <div id="weather-box">
            <p class="temp" id="current-temp">--°</p>
            <div id="weather-desc">Localizando...</div>
        </div>
    </div>

    <div class="grid" id="main-grid">
        <!-- Apps dinámicas aquí -->
    </div>

    <button class="add-btn" onclick="addNewApp()">+</button>

    <script>
        // --- CONFIGURACIÓN ---
        const WEATHER_API_KEY = "TU_API_KEY_AQUÍ"; 
        
        // --- MOTOR DE ICONOS MEJORADO ---
        // Usamos un proxy de DuckDuckGo que es muy rápido para iconos de apps
        function getIconUrl(pkg) {
            // Intentamos obtener el icono desde un buscador de iconos basado en el nombre del paquete
            return `https://icons.duckduckgo.com/ip3/${pkg}.ico`; 
            // Alternativa si falla: `https://www.google.com/s2/favicons?sz=128&domain=${pkg}`
        }

        // --- LANZADOR INTENT (SIN APP NATIVA) ---
        function launchApp(packageName) {
            const intentUri = `intent:#Intent;action=android.intent.action.MAIN;category=android.intent.category.LAUNCHER;package=${packageName};end`;
            window.location.href = intentUri;
        }

        // --- GESTIÓN DE DATOS ---
        let apps = JSON.parse(localStorage.getItem('su7_v3_apps')) || [
            { name: 'Chrome', pkg: 'com.android.chrome', icon: 'https://cdn-icons-png.flaticon.com/512/888/888846.png' },
            { name: 'Maps', pkg: 'com.google.android.apps.maps', icon: 'https://cdn-icons-png.flaticon.com/512/854/854878.png' }
        ];

        function render() {
            const grid = document.getElementById('main-grid');
            grid.innerHTML = apps.map((app, i) => `
                <div class="card" onclick="launchApp('${app.pkg}')" oncontextmenu="deleteApp(${i}); return false;">
                    <img src="${app.icon}" class="app-icon" onerror="this.src='https://cdn-icons-png.flaticon.com/512/1243/1243924.png'">
                    <span class="app-name">${app.name}</span>
                </div>
            `).join('');
        }

        function addNewApp() {
            const name = prompt("Nombre de la App:");
            const pkg = prompt("Paquete (ej: com.spotify.music):");
            if(name && pkg) {
                // Mejora: si no pones icono, lo buscamos nosotros
                const autoIcon = getIconUrl(pkg);
                apps.push({name, pkg, icon: autoIcon});
                save();
            }
        }

        function deleteApp(i) {
            if(confirm("¿Eliminar este acceso directo?")) {
                apps.splice(i, 1);
                save();
            }
        }

        function save() {
            localStorage.setItem('su7_v3_apps', JSON.stringify(apps));
            render();
        }

        // --- RELOJ Y MODO NOCHE ---
        function updateUI() {
            const now = new Date();
            document.getElementById('clock').innerText = now.getHours().toString().padStart(2, '0') + ":" + now.getMinutes().toString().padStart(2, '0');
            
            const isDark = now.getHours() < 6 || now.getHours() > 18;
            document.documentElement.setAttribute('data-theme', isDark ? 'dark' : 'light');
        }

        // --- CLIMA POR UBICACIÓN ---
        function fetchWeather() {
            navigator.geolocation.getCurrentPosition(async (pos) => {
                try {
                    const { latitude, longitude } = pos.coords;
                    const res = await fetch(`https://api.openweathermap.org/data/2.5/weather?lat=${latitude}&lon=${longitude}&units=metric&appid=${WEATHER_API_KEY}&lang=es`);
                    const data = await res.json();
                    document.getElementById('current-temp').innerText = Math.round(data.main.temp) + "°";
                    document.getElementById('weather-desc').innerText = data.weather[0].description;
                } catch (e) { document.getElementById('weather-desc').innerText = "Error clima"; }
            });
        }

        setInterval(updateUI, 1000);
        setInterval(fetchWeather, 900000); // 15 min
        updateUI();
        fetchWeather();
        render();

        if ('serviceWorker' in navigator) {
            navigator.serviceWorker.register('sw.js');
        }
    </script>
</body>
</html>