Actualización a pagina estática
This commit is contained in:
525
index.html
525
index.html
@@ -1,265 +1,316 @@
|
|||||||
import React, { useState, useEffect } from 'react';
|
<!DOCTYPE html>
|
||||||
import { User, MessageSquare, Palette, Smartphone, X, ChevronRight, ExternalLink } from 'lucide-react';
|
<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>Telegram Mini App</title>
|
||||||
|
|
||||||
// --- COMPONENTE PRINCIPAL ---
|
<!-- 1. Cargar Tailwind CSS (Estilos modernos) -->
|
||||||
export default function App() {
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
const [userData, setUserData] = useState(null);
|
|
||||||
const [platformData, setPlatformData] = useState(null);
|
|
||||||
const [themeData, setThemeData] = useState(null);
|
|
||||||
const [chatData, setChatData] = useState(null);
|
|
||||||
|
|
||||||
// Estado para el Modal
|
<!-- 2. Cargar React y ReactDOM -->
|
||||||
const [selectedCategory, setSelectedCategory] = useState(null);
|
<script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
|
||||||
|
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
|
||||||
|
|
||||||
useEffect(() => {
|
<!-- 3. Cargar Babel (Para que el navegador entienda JSX) -->
|
||||||
const tg = window.Telegram?.WebApp;
|
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
|
||||||
|
|
||||||
if (tg && tg.initDataUnsafe && Object.keys(tg.initDataUnsafe).length > 0) {
|
<!-- 4. Script de Telegram Web App -->
|
||||||
// --- ENTORNO REAL DE TELEGRAM ---
|
<script src="https://telegram.org/js/telegram-web-app.js"></script>
|
||||||
tg.ready();
|
|
||||||
tg.expand();
|
|
||||||
|
|
||||||
// Configurar colores de la barra de estado de Telegram
|
<style>
|
||||||
if (tg.setHeaderColor) tg.setHeaderColor('#3d0091');
|
/* Ajustes finos para scrollbar y selección */
|
||||||
if (tg.setBackgroundColor) tg.setBackgroundColor('#121212');
|
body {
|
||||||
|
background-color: #121212;
|
||||||
|
overscroll-behavior: none; /* Evita rebote en iOS */
|
||||||
|
}
|
||||||
|
::-webkit-scrollbar {
|
||||||
|
width: 6px;
|
||||||
|
}
|
||||||
|
::-webkit-scrollbar-track {
|
||||||
|
background: #1e1e1e;
|
||||||
|
}
|
||||||
|
::-webkit-scrollbar-thumb {
|
||||||
|
background: #3d0091;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="root"></div>
|
||||||
|
|
||||||
setUserData(tg.initDataUnsafe.user);
|
<!-- CÓDIGO DE LA APLICACIÓN -->
|
||||||
setChatData({
|
<script type="text/babel">
|
||||||
start_param: tg.initDataUnsafe.start_param || 'N/A',
|
const { useState, useEffect } = React;
|
||||||
chat_type: tg.initDataUnsafe.chat_type || 'private',
|
|
||||||
chat_instance: tg.initDataUnsafe.chat_instance || 'N/A',
|
|
||||||
});
|
|
||||||
setThemeData(tg.themeParams);
|
|
||||||
setPlatformData({
|
|
||||||
platform: tg.platform,
|
|
||||||
version: tg.version,
|
|
||||||
viewportHeight: tg.viewportHeight,
|
|
||||||
colorScheme: tg.colorScheme
|
|
||||||
});
|
|
||||||
|
|
||||||
} else {
|
// --- ICONOS SVG (Reemplazo de Lucide para no usar imports) ---
|
||||||
// --- MODO DESARROLLO (MOCK DATA) ---
|
const IconUser = ({ className }) => (
|
||||||
console.log("Modo desarrollo: Cargando datos Mock");
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
|
||||||
setUserData({
|
);
|
||||||
id: 987654321,
|
const IconChat = ({ className }) => (
|
||||||
first_name: "Dev",
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
|
||||||
last_name: "Tester",
|
);
|
||||||
username: "dev_tester",
|
const IconPalette = ({ className }) => (
|
||||||
language_code: "en",
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}><circle cx="13.5" cy="6.5" r=".5"/><circle cx="17.5" cy="10.5" r=".5"/><circle cx="8.5" cy="7.5" r=".5"/><circle cx="6.5" cy="12.5" r=".5"/><path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.926 0 1.648-.746 1.648-1.688 0-.437-.18-.835-.437-1.125-.29-.289-.438-.652-.438-1.125a1.64 1.64 0 0 1 1.668-1.668h1.996c3.051 0 5.555-2.503 5.555-5.554C21.965 6.012 17.461 2 12 2z"/></svg>
|
||||||
is_premium: false,
|
);
|
||||||
photo_url: null
|
const IconSystem = ({ className }) => (
|
||||||
});
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}><rect width="14" height="20" x="5" y="2" rx="2" ry="2"/><path d="M12 18h.01"/></svg>
|
||||||
setChatData({
|
);
|
||||||
start_param: "debug_mode_on",
|
const IconX = ({ className }) => (
|
||||||
chat_type: "supergroup",
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
|
||||||
chat_instance: "1122334455"
|
);
|
||||||
});
|
const IconChevron = ({ className }) => (
|
||||||
setChatData({
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}><path d="m9 18 6-6-6-6"/></svg>
|
||||||
start_param: "referral_source_ads",
|
);
|
||||||
chat_type: "private",
|
const IconExternal = ({ className }) => (
|
||||||
chat_instance: "84758473829102"
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg>
|
||||||
});
|
);
|
||||||
setThemeData({
|
|
||||||
bg_color: "#121212",
|
|
||||||
text_color: "#ffffff",
|
|
||||||
hint_color: "#999999",
|
|
||||||
link_color: "#7c4dff",
|
|
||||||
button_color: "#3d0091",
|
|
||||||
button_text_color: "#ffffff"
|
|
||||||
});
|
|
||||||
setPlatformData({
|
|
||||||
platform: "ios",
|
|
||||||
version: "7.0",
|
|
||||||
viewportHeight: 640,
|
|
||||||
colorScheme: "dark"
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
// Función para cerrar el modal
|
// --- COMPONENTE PRINCIPAL ---
|
||||||
const closeModal = () => setSelectedCategory(null);
|
function App() {
|
||||||
|
const [userData, setUserData] = useState(null);
|
||||||
|
const [platformData, setPlatformData] = useState(null);
|
||||||
|
const [themeData, setThemeData] = useState(null);
|
||||||
|
const [chatData, setChatData] = useState(null);
|
||||||
|
const [selectedCategory, setSelectedCategory] = useState(null);
|
||||||
|
|
||||||
// Renderizado de lista de detalles
|
useEffect(() => {
|
||||||
const renderDetails = (data) => {
|
const tg = window.Telegram?.WebApp;
|
||||||
if (!data) return <p className="text-gray-400">Sin datos disponibles.</p>;
|
|
||||||
return Object.entries(data).map(([key, value]) => (
|
|
||||||
<div key={key} className="flex flex-col py-3 border-b border-white/10 last:border-0">
|
|
||||||
<span className="text-xs font-semibold text-purple-300 uppercase tracking-wider mb-1">
|
|
||||||
{key.replace(/_/g, ' ')}
|
|
||||||
</span>
|
|
||||||
<span className="text-white text-sm break-all font-mono bg-black/20 p-2 rounded">
|
|
||||||
{value !== null && value !== undefined ? value.toString() : 'N/A'}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
));
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
// Verificar si initDataUnsafe tiene datos reales (más fiable que solo checkear el objeto)
|
||||||
<div className="min-h-screen bg-[#121212] text-white font-sans selection:bg-purple-500/30">
|
const isTelegram = tg && tg.initDataUnsafe && Object.keys(tg.initDataUnsafe).length > 0 && tg.initDataUnsafe.user;
|
||||||
|
|
||||||
{/* --- HEADER CURVO --- */}
|
if (isTelegram) {
|
||||||
<div className="relative bg-[#3d0091] pt-8 pb-12 rounded-b-[40px] shadow-2xl shadow-purple-900/20">
|
// --- ENTORNO REAL DE TELEGRAM ---
|
||||||
<div className="flex flex-col items-center justify-center px-4">
|
tg.ready();
|
||||||
{/* Avatar con anillo animado */}
|
tg.expand();
|
||||||
<div className="relative group cursor-pointer">
|
|
||||||
<div className="absolute -inset-1 bg-gradient-to-r from-pink-500 to-purple-600 rounded-full opacity-75 group-hover:opacity-100 blur transition duration-200"></div>
|
|
||||||
<div className="relative w-24 h-24 rounded-full bg-[#1e1e1e] border-4 border-[#3d0091] flex items-center justify-center overflow-hidden">
|
|
||||||
{userData?.photo_url ? (
|
|
||||||
<img src={userData.photo_url} alt="User" className="w-full h-full object-cover" />
|
|
||||||
) : (
|
|
||||||
<span className="text-3xl font-bold text-white">
|
|
||||||
{userData?.first_name ? userData.first_name[0] : 'U'}
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h1 className="mt-4 text-2xl font-bold tracking-tight text-white">
|
// Configurar colores de la barra de estado
|
||||||
Hola, {userData?.first_name || 'Usuario'}
|
if (tg.setHeaderColor) tg.setHeaderColor('#3d0091');
|
||||||
</h1>
|
if (tg.setBackgroundColor) tg.setBackgroundColor('#121212');
|
||||||
|
|
||||||
{userData?.username && (
|
setUserData(tg.initDataUnsafe.user);
|
||||||
<div className="mt-2 px-3 py-1 bg-white/10 backdrop-blur-md rounded-full border border-white/10 text-sm font-medium text-purple-200">
|
setChatData({
|
||||||
@{userData.username}
|
start_param: tg.initDataUnsafe.start_param || 'N/A',
|
||||||
</div>
|
chat_type: tg.initDataUnsafe.chat_type || 'private',
|
||||||
)}
|
chat_instance: tg.initDataUnsafe.chat_instance || 'N/A',
|
||||||
</div>
|
});
|
||||||
</div>
|
setThemeData(tg.themeParams);
|
||||||
|
setPlatformData({
|
||||||
|
platform: tg.platform,
|
||||||
|
version: tg.version,
|
||||||
|
viewportHeight: tg.viewportHeight,
|
||||||
|
colorScheme: tg.colorScheme
|
||||||
|
});
|
||||||
|
|
||||||
{/* --- CONTENIDO PRINCIPAL --- */}
|
} else {
|
||||||
<div className="px-6 -mt-6 pb-10 relative z-10">
|
// --- MODO DESARROLLO (MOCK DATA) ---
|
||||||
<div className="text-center mb-4 opacity-75 text-xs font-medium uppercase tracking-widest text-purple-200">
|
console.log("Modo Web/Dev: Cargando datos falsos");
|
||||||
Panel de Control
|
setUserData({
|
||||||
</div>
|
id: 999888777,
|
||||||
|
first_name: "Dev",
|
||||||
|
last_name: "Tester",
|
||||||
|
username: "dev_tester",
|
||||||
|
language_code: "es",
|
||||||
|
is_premium: true,
|
||||||
|
photo_url: null
|
||||||
|
});
|
||||||
|
setChatData({
|
||||||
|
start_param: "debug_mode",
|
||||||
|
chat_type: "supergroup",
|
||||||
|
chat_instance: "abc-123-xyz"
|
||||||
|
});
|
||||||
|
setThemeData({
|
||||||
|
bg_color: "#121212",
|
||||||
|
text_color: "#ffffff",
|
||||||
|
hint_color: "#999999",
|
||||||
|
link_color: "#7c4dff",
|
||||||
|
button_color: "#3d0091",
|
||||||
|
button_text_color: "#ffffff"
|
||||||
|
});
|
||||||
|
setPlatformData({
|
||||||
|
platform: "tdesktop",
|
||||||
|
version: "8.0",
|
||||||
|
viewportHeight: 800,
|
||||||
|
colorScheme: "dark"
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}, []);
|
||||||
|
|
||||||
{/* GRID 2x2 - USO DE TAILWIND GRID QUE ES MUCHO MÁS ROBUSTO */}
|
const closeModal = () => setSelectedCategory(null);
|
||||||
<div className="grid grid-cols-2 gap-4 w-full max-w-md mx-auto">
|
|
||||||
|
|
||||||
{/* TARJETA 1: USUARIO */}
|
const renderDetails = (data) => {
|
||||||
<CardButton
|
if (!data) return <p className="text-gray-400">Sin datos disponibles.</p>;
|
||||||
icon={<User size={32} className="text-purple-400" />}
|
return Object.entries(data).map(([key, value]) => (
|
||||||
label="USUARIO"
|
<div key={key} className="flex flex-col py-3 border-b border-white/10 last:border-0">
|
||||||
color="bg-purple-500/10"
|
<span className="text-xs font-semibold text-purple-300 uppercase tracking-wider mb-1">
|
||||||
borderColor="border-purple-500/20"
|
{key.replace(/_/g, ' ')}
|
||||||
onClick={() => setSelectedCategory({ title: 'Datos de Usuario', data: userData, icon: <User /> })}
|
</span>
|
||||||
/>
|
<span className="text-white text-sm break-all font-mono bg-black/20 p-2 rounded border border-white/5">
|
||||||
|
{value !== null && value !== undefined ? value.toString() : 'N/A'}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
));
|
||||||
|
};
|
||||||
|
|
||||||
{/* TARJETA 2: CHAT */}
|
return (
|
||||||
<CardButton
|
<div className="min-h-screen bg-[#121212] text-white font-sans selection:bg-purple-500/30 pb-10">
|
||||||
icon={<MessageSquare size={32} className="text-pink-400" />}
|
|
||||||
label="CHAT"
|
|
||||||
color="bg-pink-500/10"
|
|
||||||
borderColor="border-pink-500/20"
|
|
||||||
onClick={() => setSelectedCategory({ title: 'Contexto Chat', data: chatData, icon: <MessageSquare /> })}
|
|
||||||
/>
|
|
||||||
|
|
||||||
{/* TARJETA 3: TEMA */}
|
{/* HEADER */}
|
||||||
<CardButton
|
<div className="relative bg-[#3d0091] pt-8 pb-12 rounded-b-[40px] shadow-2xl shadow-purple-900/20">
|
||||||
icon={<Palette size={32} className="text-emerald-400" />}
|
<div className="flex flex-col items-center justify-center px-4">
|
||||||
label="TEMA"
|
<div className="relative group cursor-pointer">
|
||||||
color="bg-emerald-500/10"
|
<div className="absolute -inset-1 bg-gradient-to-r from-pink-500 to-purple-600 rounded-full opacity-75 blur transition duration-200"></div>
|
||||||
borderColor="border-emerald-500/20"
|
<div className="relative w-24 h-24 rounded-full bg-[#1e1e1e] border-4 border-[#3d0091] flex items-center justify-center overflow-hidden">
|
||||||
onClick={() => setSelectedCategory({ title: 'Apariencia', data: themeData, icon: <Palette /> })}
|
{userData?.photo_url ? (
|
||||||
/>
|
<img src={userData.photo_url} alt="User" className="w-full h-full object-cover" />
|
||||||
|
) : (
|
||||||
|
<span className="text-3xl font-bold text-white">
|
||||||
|
{userData?.first_name ? userData.first_name[0] : 'U'}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
{/* TARJETA 4: SISTEMA */}
|
<h1 className="mt-4 text-2xl font-bold tracking-tight text-white">
|
||||||
<CardButton
|
Hola, {userData?.first_name || 'Usuario'}
|
||||||
icon={<Smartphone size={32} className="text-orange-400" />}
|
</h1>
|
||||||
label="SISTEMA"
|
|
||||||
color="bg-orange-500/10"
|
|
||||||
borderColor="border-orange-500/20"
|
|
||||||
onClick={() => setSelectedCategory({ title: 'Dispositivo', data: platformData, icon: <Smartphone /> })}
|
|
||||||
/>
|
|
||||||
|
|
||||||
</div>
|
{userData?.username && (
|
||||||
|
<div className="mt-2 px-3 py-1 bg-white/10 backdrop-blur-md rounded-full border border-white/10 text-sm font-medium text-purple-200">
|
||||||
|
@{userData.username}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
{/* Botón de documentación */}
|
{/* CONTENIDO PRINCIPAL */}
|
||||||
<div className="mt-8 text-center">
|
<div className="px-6 -mt-6 relative z-10">
|
||||||
<button
|
<div className="text-center mb-4 opacity-75 text-xs font-medium uppercase tracking-widest text-purple-200 drop-shadow-md">
|
||||||
onClick={() => window.open('https://core.telegram.org/bots/webapps', '_blank')}
|
Panel de Control
|
||||||
className="inline-flex items-center gap-2 text-sm text-gray-500 hover:text-purple-400 transition-colors"
|
</div>
|
||||||
>
|
|
||||||
<span>Documentación API</span>
|
|
||||||
<ExternalLink size={14} />
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* --- MODAL PERSONALIZADO (Sin librerías pesadas) --- */}
|
{/* GRID 2x2 - USO DE TAILWIND GRID PURO */}
|
||||||
{selectedCategory && (
|
<div className="grid grid-cols-2 gap-4 w-full max-w-md mx-auto">
|
||||||
<div className="fixed inset-0 z-50 flex items-center justify-center p-4 animate-in fade-in duration-200">
|
|
||||||
{/* Overlay oscuro */}
|
|
||||||
<div
|
|
||||||
className="absolute inset-0 bg-black/80 backdrop-blur-sm"
|
|
||||||
onClick={closeModal}
|
|
||||||
></div>
|
|
||||||
|
|
||||||
{/* Contenido del Modal */}
|
<CardButton
|
||||||
<div className="relative w-full max-w-sm bg-[#1e1e1e] rounded-2xl shadow-2xl border border-white/10 overflow-hidden transform transition-all scale-100">
|
icon={<IconUser className="w-8 h-8 text-purple-400" />}
|
||||||
|
label="USUARIO"
|
||||||
|
color="bg-purple-500/10"
|
||||||
|
borderColor="border-purple-500/20"
|
||||||
|
onClick={() => setSelectedCategory({ title: 'Datos de Usuario', data: userData, icon: <IconUser className="w-6 h-6" /> })}
|
||||||
|
/>
|
||||||
|
|
||||||
{/* Cabecera del Modal */}
|
<CardButton
|
||||||
<div className="flex items-center justify-between p-4 border-b border-white/10 bg-[#252525]">
|
icon={<IconChat className="w-8 h-8 text-pink-400" />}
|
||||||
<div className="flex items-center gap-3 text-white">
|
label="CHAT"
|
||||||
<div className="p-2 bg-white/5 rounded-lg text-purple-400">
|
color="bg-pink-500/10"
|
||||||
{selectedCategory.icon}
|
borderColor="border-pink-500/20"
|
||||||
|
onClick={() => setSelectedCategory({ title: 'Contexto Chat', data: chatData, icon: <IconChat className="w-6 h-6" /> })}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<CardButton
|
||||||
|
icon={<IconPalette className="w-8 h-8 text-emerald-400" />}
|
||||||
|
label="TEMA"
|
||||||
|
color="bg-emerald-500/10"
|
||||||
|
borderColor="border-emerald-500/20"
|
||||||
|
onClick={() => setSelectedCategory({ title: 'Apariencia', data: themeData, icon: <IconPalette className="w-6 h-6" /> })}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<CardButton
|
||||||
|
icon={<IconSystem className="w-8 h-8 text-orange-400" />}
|
||||||
|
label="SISTEMA"
|
||||||
|
color="bg-orange-500/10"
|
||||||
|
borderColor="border-orange-500/20"
|
||||||
|
onClick={() => setSelectedCategory({ title: 'Dispositivo', data: platformData, icon: <IconSystem className="w-6 h-6" /> })}
|
||||||
|
/>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* BOTÓN DOCUMENTACIÓN */}
|
||||||
|
<div className="mt-8 text-center">
|
||||||
|
<button
|
||||||
|
onClick={() => window.open('https://core.telegram.org/bots/webapps', '_blank')}
|
||||||
|
className="inline-flex items-center gap-2 text-sm text-gray-500 hover:text-purple-400 transition-colors"
|
||||||
|
>
|
||||||
|
<span>Documentación API</span>
|
||||||
|
<IconExternal className="w-3 h-3" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* MODAL */}
|
||||||
|
{selectedCategory && (
|
||||||
|
<div className="fixed inset-0 z-50 flex items-center justify-center p-4 animate-[fadeIn_0.2s_ease-out]">
|
||||||
|
<div
|
||||||
|
className="absolute inset-0 bg-black/80 backdrop-blur-sm"
|
||||||
|
onClick={closeModal}
|
||||||
|
></div>
|
||||||
|
|
||||||
|
<div className="relative w-full max-w-sm bg-[#1e1e1e] rounded-2xl shadow-2xl border border-white/10 overflow-hidden transform scale-100 animate-[zoomIn_0.2s_ease-out]">
|
||||||
|
<div className="flex items-center justify-between p-4 border-b border-white/10 bg-[#252525]">
|
||||||
|
<div className="flex items-center gap-3 text-white">
|
||||||
|
<div className="p-2 bg-white/5 rounded-lg text-purple-400">
|
||||||
|
{selectedCategory.icon}
|
||||||
|
</div>
|
||||||
|
<h3 className="font-bold text-lg">{selectedCategory.title}</h3>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
onClick={closeModal}
|
||||||
|
className="p-2 text-gray-400 hover:text-white hover:bg-white/10 rounded-full transition-colors"
|
||||||
|
>
|
||||||
|
<IconX className="w-5 h-5" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="p-4 max-h-[60vh] overflow-y-auto custom-scrollbar">
|
||||||
|
{renderDetails(selectedCategory.data)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="p-4 bg-[#252525] border-t border-white/10">
|
||||||
|
<button
|
||||||
|
onClick={closeModal}
|
||||||
|
className="w-full py-3 bg-[#3d0091] hover:bg-[#4d00b1] text-white font-bold rounded-xl transition-all active:scale-[0.98]"
|
||||||
|
>
|
||||||
|
Cerrar
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
<h3 className="font-bold text-lg">{selectedCategory.title}</h3>
|
);
|
||||||
</div>
|
}
|
||||||
<button
|
|
||||||
onClick={closeModal}
|
|
||||||
className="p-2 text-gray-400 hover:text-white hover:bg-white/10 rounded-full transition-colors"
|
|
||||||
>
|
|
||||||
<X size={20} />
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Cuerpo del Modal */}
|
// --- COMPONENTE TARJETA ---
|
||||||
<div className="p-4 max-h-[60vh] overflow-y-auto">
|
function CardButton({ icon, label, color, borderColor, onClick }) {
|
||||||
{renderDetails(selectedCategory.data)}
|
return (
|
||||||
</div>
|
<button
|
||||||
|
onClick={onClick}
|
||||||
|
className={`
|
||||||
|
relative group flex flex-col items-center justify-center
|
||||||
|
aspect-square w-full rounded-2xl
|
||||||
|
${color} border ${borderColor}
|
||||||
|
hover:brightness-125 active:scale-95
|
||||||
|
transition-all duration-200 ease-out
|
||||||
|
`}
|
||||||
|
>
|
||||||
|
<div className="mb-3 transform group-hover:scale-110 transition-transform duration-200">
|
||||||
|
{icon}
|
||||||
|
</div>
|
||||||
|
<span className="text-xs font-bold tracking-wider text-white/90">
|
||||||
|
{label}
|
||||||
|
</span>
|
||||||
|
|
||||||
{/* Pie del Modal */}
|
<div className="absolute top-3 right-3 opacity-0 group-hover:opacity-50 transition-opacity">
|
||||||
<div className="p-4 bg-[#252525] border-t border-white/10">
|
<IconChevron className="w-4 h-4 text-white" />
|
||||||
<button
|
</div>
|
||||||
onClick={closeModal}
|
</button>
|
||||||
className="w-full py-3 bg-[#3d0091] hover:bg-[#4d00b1] text-white font-bold rounded-xl transition-all active:scale-[0.98]"
|
);
|
||||||
>
|
}
|
||||||
Cerrar
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
</div>
|
const root = ReactDOM.createRoot(document.getElementById('root'));
|
||||||
);
|
root.render(<App />);
|
||||||
}
|
</script>
|
||||||
|
</body>
|
||||||
// --- COMPONENTE DE TARJETA REUTILIZABLE ---
|
</html>
|
||||||
// Este componente garantiza la forma cuadrada con 'aspect-square'
|
|
||||||
function CardButton({ icon, label, color, borderColor, onClick }) {
|
|
||||||
return (
|
|
||||||
<button
|
|
||||||
onClick={onClick}
|
|
||||||
className={`
|
|
||||||
relative group flex flex-col items-center justify-center
|
|
||||||
aspect-square w-full rounded-2xl
|
|
||||||
${color} border ${borderColor}
|
|
||||||
hover:brightness-125 active:scale-95
|
|
||||||
transition-all duration-200 ease-out
|
|
||||||
`}
|
|
||||||
>
|
|
||||||
<div className="mb-3 transform group-hover:scale-110 transition-transform duration-200">
|
|
||||||
{icon}
|
|
||||||
</div>
|
|
||||||
<span className="text-xs font-bold tracking-wider text-white/90">
|
|
||||||
{label}
|
|
||||||
</span>
|
|
||||||
|
|
||||||
{/* Indicador sutil de flecha */}
|
|
||||||
<div className="absolute top-3 right-3 opacity-0 group-hover:opacity-50 transition-opacity">
|
|
||||||
<ChevronRight size={16} className="text-white" />
|
|
||||||
</div>
|
|
||||||
</button>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
Reference in New Issue
Block a user