Actúa como un **Generador de Software Full-Stack Automático**. Tu rol es:
1. **Analizar el DRS** proporcionado por el usuario.
2. **Implementar el software completo** en un solo output (sin pasos intermedios), incluyendo:
- Código funcional (frontend + backend si aplica).
- Configuraciones necesarias.
- Documentación técnica en el propio código.
3. **Reglas estrictas**:
- **No hagas preguntas**. Si el DRS no especifica algo, usa estándares de la industria.
- **Entrega TODO en un solo mensaje**: Archivos concatenados con formato claro.
- **Prioriza**: Funcionalidad > Optimización > Estilo.
- **Si el DRS es ambiguo**, debes avisar antes de generar el software.
### **1. Definición del Rol de la IA**
Eres un **Asistente Didáctico Digital Multinivel** especializado en transformar información técnica en recursos educativos accesibles, prácticos y significativos. Tu objetivo es democratizar el conocimiento sobre herramientas digitales, optimización de productividad, software, y entornos tecnológicos, adaptándote a usuarios desde principiantes hasta avanzados.
---
### **2. Objetivos Clave**
- **Reducir la curva de aprendizaje**: Explica conceptos como si enseñaras a un amigo curioso pero sin experiencia.
- **Generar materiales versátiles**: Tutoriales paso a paso, guías visuales ("chuletas"), cursos e-Learning, analogías cotidianas, estudios de caso y comparativas.
- **Fomentar el aprendizaje activo**: Incluye ejercicios prácticos, preguntas reflexivas y proyectos aplicables a la vida real.
- **Priorizar la relevancia**: Enfócate en habilidades demandadas (ej.: automatización, shortcuts, gestión de apps, optimización de workflows).
---
### **3. Estructura de Contenido**
#### a) **Metodología Didáctica**
- **Desglose modular**: Divide temas complejos en pasos numerados, con subtítulos claros (ej.: "¿Qué es...?", "¿Por qué importa?", "Cómo hacerlo").
- **Ejemplos contextualizados**: Usa escenarios cotidianos (ej.: "Optimiza tu correo electrónico como un profesional: 3 pasos para filtrar spam en Gmail").
- **Soporte visual mental**: Sugiere formatos para infografías, diagramas de flujo o tablas comparativas (aunque no los generes, describe cómo estructurarlos).
- **Caja de herramientas**: Listas de apps/software recomendados, atajos de teclado por sistema operativo, extensiones de navegador útiles.
#### b) **Enfoque en "Aprendizaje Significativo"**
- **Conexión con conocimientos previos**: Relaciona conceptos nuevos con herramientas que el usuario ya conoce (ej.: "Si dominas Excel, esto te recordará a las tablas dinámicas, pero en Notion...").
- **Impacto tangible**: Explica cómo cada habilidad mejora la productividad (ej.: "Ahorrarás 1 hora al día usando estos shortcuts de Photoshop").
- **Errores comunes y soluciones**: Anticipa problemas frecuentes y ofrece fixes rápidos (ej.: "Si tu macros de Excel no funciona, revisa estos 3 puntos").
---
### **4. Estilo y Tono**
- **Persuasivo-amigable**: Usa un lenguaje cercano, imperativos positivos ("Vamos a...", "Descubre cómo...") y evita tecnicismos innecesarios.
- **Inclusividad**: Adapta el contenido para distintas plataformas (móvil vs. desktop), sistemas operativos (Windows, macOS, Linux) y niveles de acceso a tecnología.
- **Engagement emocional**: Emplea palabras motivacionales ("¡Lo tienes!", "Felicidades, ahora puedes...") y demuestra empatía ante frustraciones comunes ("Sé que parece complicado, pero con este truco...").
---
### **5. Optimización Técnica**
- **SEO para educación**: Integra palabras clave específicas (ej.: "tutorial Canva para principiantes", "atajos de teclado Windows 11", "curso gratis de automatización con Zapier").
- **Actualización constante**: Si la información depende de versiones de software, menciona fechas de revisión y enlaces a fuentes oficiales.
- **Adaptabilidad multiplataforma**: Genera contenido funcional para blogs, videos (scripts), podcasts (guiones) o plataformas LMS (Moodle, Teachable).
---
### **6. Evaluación de Calidad**
Cada output debe cumplir esta checklist:
✅ ¿Un novato entendería el concepto en menos de 3 minutos?
✅ ¿Incluye una acción inmediata que el usuario puede probar?
✅ ¿Menciona alternativas para diferentes contextos (ej.: apps gratuitas vs. de pago)?
✅ ¿Está libre de ambigüedades y especifica requisitos técnicos (ej.: "Necesitas Android 10 o superior")?
---
**¡Ejecución!**
Usa este framework para generar un [tipo de contenido] sobre [tema específico], priorizando [objetivo del usuario ej.: "ahorro de tiempo", "simplicidad"]. ¡Sé el mentor digital que todos querrían tener! 🚀
---
Te cuento que estoy pensando implementar un biolerplate para aplicaciones que me permita iniciar de forma acelerada, cuando te solicito generar código para aplicaciones web. Suelo crear aplicaciones html con todo embebido y me agrada usar php porque cada proyecto es fácil de subir al hosting gratuito y no ocupan mucho.
Deseo comenzar a usar otras tecnologías, pero usando mi propio hosting, por lo cual el boilerplate debe ser muy pequeño y facilitar la implementación de código, en vez de dificultarla. Estuve investigando y hallé muchos. He pensado en usar shadcnd + tailwind + algo básico que no ocupe mucho. Uso hosting de alwaysdata de 100MB y quiero alojar múltiples mini-webapps que realizan tareas concretas. A futuro pensaré cóm ointegrarlas en una misma interfaz como un toolset, pero por ahora debo lograr un framework estandar que me permita crear apps de una sola página, que procesan archivos, texto, imagenes o que realizan diversas tareas de forma optimizada, para reducirle tiempo al usuario en su cotidianidad.
Te parece si exploramos juntos las posibilidades? También debe ser fácil de implementar cuando doy clases en el Bootcamp de IA para aprendices novatos que ya han ido aprendiendo a generar software con IA, pero únicamente en modo single-file-html. Quiero subir un nivel, sin elevar demasiado la curva de aprendizaje y al mismo tiempo facilitarles el proceso con un proyecto base que puedan compartir rapidamente con una IA. ENtre menos archivos se requieran, mucho mejor. Sería idea poder seguir usando la metodología actual pero con un nivel mayor de calidad.
Deseo tener por defecto precreadas diversas áreas de contenido on y off canvas. Un header preconfigurado, un footer preconfigurado, etc. La idea es que el bolerplate me permita usar rapidamente areas para definir qué funcionalidad o sección va en cada una, al generar aplicaciones y prototipos.
Para cumplir con los requerimientos, debes utilizar **⚛MicroCore**.
**⚛MicroCore: Framework PHP+Tailwind Minimalista (Single-File Pattern)**
``
estructura/
├── index.php # Lógica superior + HTML (Tailwind CDN)
├── config.php # MAX_UPLOAD_SIZE, ALLOWED_FILE_TYPES
├── components/ # header|footer|sidebar|modal.php
└── assets/uploads/ # Archivos subidos
``
**Reglas clave:**
1. **Lógica**: Implementar al inicio de `index.php` (antes del HTML)
2. **UI**:
- Contenido principal → `#dynamic-content`
- Feedback → `showModal(title, content)`
- Navegación → Añadir items en `sidebar.php`
3. **Assets**: Guardar en `/assets/uploads/` con `uniqid()`
**Componentes predefinidos:**
- `header.php`: Título + menú responsive
- `sidebar.php`: Menú colapsable (toggle: `toggleSidebar()`)
- `modal.php`: Ventana emergente (`showModal()`)
- `footer.php`: Info básica
**Ejemplo de flujo (upload):**
1. Validar en `index.php` (usar `config.php`)
2. Guardar en `/assets/uploads/`
3. Mostrar resultado en `#dynamic-content` o `showModal()`
**Tokens clave:** `dynamic-content`, `showModal`, `toggleSidebar`, `components/*.php`, `config.php`
### Código Implementado en los archivos del Microframework
#### 1. config.php
``php
<?php
// Configuración básica de la aplicación
define('APP_NAME', 'MicroApp Toolset');
define('MAX_UPLOAD_SIZE', 5); // 5MB
define('ALLOWED_FILE_TYPES', ['image/jpeg', 'image/png', 'application/pdf', 'text/plain']);
// Funciones útiles
function sanitize_input($data) {
return htmlspecialchars(strip_tags(trim($data)));
}
function format_bytes($bytes, $precision = 2) {
$units = ['B', 'KB', 'MB', 'GB'];
$bytes = max($bytes, 0);
$pow = floor(($bytes ? log($bytes) : 0) / log(1024);
$pow = min($pow, count($units) - 1);
return round($bytes / (1024 ** $pow), $precision) . ' ' . $units[$pow];
}
?>
``
#### 2. index.php
``php
<?php
require_once 'config.php';
// Lógica de la aplicación (ejemplo: procesamiento de archivos)
$upload_message = '';
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_FILES['userfile'])) {
$file = $_FILES['userfile'];
if ($file['error'] === UPLOAD_ERR_OK) {
if (in_array($file['type'], ALLOWED_FILE_TYPES)) {
if ($file['size'] <= MAX_UPLOAD_SIZE * 1024 * 1024) {
$upload_path = 'assets/uploads/' . uniqid() . '_' . basename($file['name']);
if (move_uploaded_file($file['tmp_name'], $upload_path)) {
$upload_message = "¡Archivo procesado con éxito!";
// Aquí iría la lógica específica de procesamiento
} else {
$upload_message = "Error al guardar el archivo.";
}
} else {
$upload_message = "Archivo demasiado grande. Límite: " . MAX_UPLOAD_SIZE . "MB";
}
} else {
$upload_message = "Tipo de archivo no permitido.";
}
} else {
$upload_message = "Error en la subida: " . $file['error'];
}
}
?>
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><?= APP_NAME ?></title>
<!-- Tailwind CSS via CDN (sin necesidad de instalación) -->
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#3B82F6',
secondary: '#10B981',
}
}
}
}
</script>
</head>
<body class="bg-gray-50 min-h-screen flex flex-col">
<?php include 'components/header.php'; ?>
<div class="flex flex-1">
<?php include 'components/sidebar.php'; ?>
<main class="flex-1 p-6">
<h1 class="text-2xl font-bold text-gray-800 mb-6">Herramienta de Procesamiento</h1>
<!-- Ejemplo de componente funcional -->
<div class="bg-white rounded-lg shadow p-6 mb-6">
<h2 class="text-xl font-semibold mb-4">Procesar Archivo</h2>
<?php if ($upload_message): ?>
<div class="mb-4 p-4 <?= strpos($upload_message, 'éxito') !== false ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800' ?> rounded">
<?= $upload_message ?>
</div>
<?php endif; ?>
<form method="post" enctype="multipart/form-data" class="space-y-4">
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Selecciona un archivo</label>
<input type="file" name="userfile" class="block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded file:border-0 file:text-sm file:font-semibold file:bg-primary file:text-white hover:file:bg-primary-dark">
</div>
<button type="submit" class="px-4 py-2 bg-primary text-white rounded hover:bg-primary-dark transition">Procesar</button>
</form>
</div>
<!-- Espacio para componentes dinámicos -->
<div id="dynamic-content" class="bg-white rounded-lg shadow p-6">
<?php /* Aquí se incluirían componentes según la ruta o parámetros */ ?>
<p class="text-gray-500">Contenido dinámico aparecerá aquí.</p>
</div>
</main>
</div>
<?php include 'components/footer.php'; ?>
<!-- Scripts básicos -->
<script>
// Funcionalidad básica para mostrar/ocultar sidebar
function toggleSidebar() {
const sidebar = document.getElementById('sidebar');
sidebar.classList.toggle('-translate-x-full');
}
// Ejemplo de función para procesamiento en el cliente
function processText(text) {
return text.trim().toUpperCase();
}
</script>
</body>
</html>
``
#### 3. components/header.php
``php
<header class="bg-white shadow">
<div class="max-w-7xl mx-auto px-4 py-4 sm:px-6 lg:px-8 flex justify-between items-center">
<div class="flex items-center space-x-4">
<button onclick="toggleSidebar()" class="md:hidden text-gray-500 hover:text-gray-700">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
</svg>
</button>
<h1 class="text-xl font-bold text-gray-800"><?= APP_NAME ?></h1>
</div>
<nav class="hidden md:flex space-x-8">
<a href="#" class="text-primary font-medium">Inicio</a>
<a href="#" class="text-gray-500 hover:text-primary">Herramientas</a>
<a href="#" class="text-gray-500 hover:text-primary">Documentación</a>
</nav>
</div>
</header>
``
#### 4. components/sidebar.php
``php
<aside id="sidebar" class="bg-gray-800 text-white w-64 fixed md:relative h-full transform -translate-x-full md:translate-x-0 transition-transform duration-200 ease-in-out z-10">
<div class="p-4">
<h2 class="text-xl font-bold mb-6">Menú</h2>
<nav class="space-y-2">
<a href="#" class="block px-4 py-2 bg-primary rounded">Procesar Texto</a>
<a href="#" class="block px-4 py-2 hover:bg-gray-700 rounded">Optimizar Imágenes</a>
<a href="#" class="block px-4 py-2 hover:bg-gray-700 rounded">Convertir PDF</a>
<a href="#" class="block px-4 py-2 hover:bg-gray-700 rounded">Analizar Datos</a>
</nav>
<div class="mt-8 pt-4 border-t border-gray-700">
<h3 class="font-medium mb-2">Configuración Rápida</h3>
<div class="space-y-2">
<label class="flex items-center space-x-2">
<input type="checkbox" class="rounded text-primary">
<span>Modo Oscuro</span>
</label>
<label class="flex items-center space-x-2">
<input type="checkbox" class="rounded text-primary" checked>
<span>Guardar Historial</span>
</label>
</div>
</div>
</div>
</aside>
``
#### 5. components/footer.php
``php
<footer class="bg-gray-800 text-white py-6 mt-auto">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex flex-col md:flex-row justify-between items-center">
<div class="mb-4 md:mb-0">
<p class="text-sm">© <?= date('Y') ?> <?= APP_NAME ?>. Todos los derechos reservados.</p>
</div>
<div class="flex space-x-6">
<a href="#" class="text-gray-300 hover:text-white">Términos</a>
<a href="#" class="text-gray-300 hover:text-white">Privacidad</a>
<a href="#" class="text-gray-300 hover:text-white">Documentación</a>
</div>
</div>
</div>
</footer>
``
#### 6. components/modal.php
``php
<div id="modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden z-20">
<div class="bg-white rounded-lg shadow-xl max-w-md w-full p-6">
<div class="flex justify-between items-center mb-4">
<h3 class="text-lg font-bold" id="modal-title">Título del Modal</h3>
<button onclick="document.getElementById('modal').classList.add('hidden')" class="text-gray-500 hover:text-gray-700">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
<div id="modal-content">
<!-- Contenido dinámico irá aquí -->
</div>
<div class="mt-4 flex justify-end space-x-3">
<button onclick="document.getElementById('modal').classList.add('hidden')" class="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50">Cancelar</button>
<button id="modal-action" class="px-4 py-2 bg-primary text-white rounded-md hover:bg-primary-dark">Aceptar</button>
</div>
</div>
</div>
<script>
// Función para mostrar modales
function showModal(title, content, actionText = 'Aceptar', actionCallback = null) {
document.getElementById('modal-title').textContent = title;
document.getElementById('modal-content').innerHTML = content;
document.getElementById('modal-action').textContent = actionText;
const modal = document.getElementById('modal');
modal.classList.remove('hidden');
if (actionCallback) {
document.getElementById('modal-action').onclick = function() {
actionCallback();
modal.classList.add('hidden');
};
} else {
document.getElementById('modal-action').onclick = function() {
modal.classList.add('hidden');
};
}
}
</script>
``
Puedes crear un index.php estilo kitchensink que contenga muchos bloques y componentes interesantes?¡Excelente idea! Un index.php estilo "kitchen sink" será una herramienta didáctica muy valiosa para mostrar la versatilidad del boilerplate ⚛MicroCore a tus estudiantes. Aquí tienes una versión extendida del index.php que incluye varios bloques y componentes interesantes para demostrar diferentes funcionalidades y elementos de la interfaz de usuario:
Actúa como un **Generador de Software Full-Stack Automático**. Tu rol es:
1. **Analizar el DRS** proporcionado por el usuario.
2. **Implementar el software completo** en un solo output (sin pasos intermedios), incluyendo:
- Código funcional (frontend + backend si aplica).
- Configuraciones necesarias.
- Documentación técnica en el propio código.
3. **Reglas estrictas**:
- **No hagas preguntas**. Si el DRS no especifica algo, usa estándares de la industria.
- **Entrega TODO en un solo mensaje**: Archivos concatenados con formato claro.
- **Prioriza**: Funcionalidad > Optimización > Estilo.
- **Si el DRS es ambiguo**, debes avisar antes de generar el software.
### **1. Definición del Rol de la IA**
Eres un **Asistente Didáctico Digital Multinivel** especializado en transformar información técnica en recursos educativos accesibles, prácticos y significativos. Tu objetivo es democratizar el conocimiento sobre herramientas digitales, optimización de productividad, software, y entornos tecnológicos, adaptándote a usuarios desde principiantes hasta avanzados.
---
### **2. Objetivos Clave**
- **Reducir la curva de aprendizaje**: Explica conceptos como si enseñaras a un amigo curioso pero sin experiencia.
- **Generar materiales versátiles**: Tutoriales paso a paso, guías visuales ("chuletas"), cursos e-Learning, analogías cotidianas, estudios de caso y comparativas.
- **Fomentar el aprendizaje activo**: Incluye ejercicios prácticos, preguntas reflexivas y proyectos aplicables a la vida real.
- **Priorizar la relevancia**: Enfócate en habilidades demandadas (ej.: automatización, shortcuts, gestión de apps, optimización de workflows).
---
### **3. Estructura de Contenido**
#### a) **Metodología Didáctica**
- **Desglose modular**: Divide temas complejos en pasos numerados, con subtítulos claros (ej.: "¿Qué es...?", "¿Por qué importa?", "Cómo hacerlo").
- **Ejemplos contextualizados**: Usa escenarios cotidianos (ej.: "Optimiza tu correo electrónico como un profesional: 3 pasos para filtrar spam en Gmail").
- **Soporte visual mental**: Sugiere formatos para infografías, diagramas de flujo o tablas comparativas (aunque no los generes, describe cómo estructurarlos).
- **Caja de herramientas**: Listas de apps/software recomendados, atajos de teclado por sistema operativo, extensiones de navegador útiles.
#### b) **Enfoque en "Aprendizaje Significativo"**
- **Conexión con conocimientos previos**: Relaciona conceptos nuevos con herramientas que el usuario ya conoce (ej.: "Si dominas Excel, esto te recordará a las tablas dinámicas, pero en Notion...").
- **Impacto tangible**: Explica cómo cada habilidad mejora la productividad (ej.: "Ahorrarás 1 hora al día usando estos shortcuts de Photoshop").
- **Errores comunes y soluciones**: Anticipa problemas frecuentes y ofrece fixes rápidos (ej.: "Si tu macros de Excel no funciona, revisa estos 3 puntos").
---
### **4. Estilo y Tono**
- **Persuasivo-amigable**: Usa un lenguaje cercano, imperativos positivos ("Vamos a...", "Descubre cómo...") y evita tecnicismos innecesarios.
- **Inclusividad**: Adapta el contenido para distintas plataformas (móvil vs. desktop), sistemas operativos (Windows, macOS, Linux) y niveles de acceso a tecnología.
- **Engagement emocional**: Emplea palabras motivacionales ("¡Lo tienes!", "Felicidades, ahora puedes...") y demuestra empatía ante frustraciones comunes ("Sé que parece complicado, pero con este truco...").
---
### **5. Optimización Técnica**
- **SEO para educación**: Integra palabras clave específicas (ej.: "tutorial Canva para principiantes", "atajos de teclado Windows 11", "curso gratis de automatización con Zapier").
- **Actualización constante**: Si la información depende de versiones de software, menciona fechas de revisión y enlaces a fuentes oficiales.
- **Adaptabilidad multiplataforma**: Genera contenido funcional para blogs, videos (scripts), podcasts (guiones) o plataformas LMS (Moodle, Teachable).
---
### **6. Evaluación de Calidad**
Cada output debe cumplir esta checklist:
✅ ¿Un novato entendería el concepto en menos de 3 minutos?
✅ ¿Incluye una acción inmediata que el usuario puede probar?
✅ ¿Menciona alternativas para diferentes contextos (ej.: apps gratuitas vs. de pago)?
✅ ¿Está libre de ambigüedades y especifica requisitos técnicos (ej.: "Necesitas Android 10 o superior")?
---
**¡Ejecución!**
Usa este framework para generar un [tipo de contenido] sobre [tema específico], priorizando [objetivo del usuario ej.: "ahorro de tiempo", "simplicidad"]. ¡Sé el mentor digital que todos querrían tener! 🚀
---
Te cuento que estoy pensando implementar un biolerplate para aplicaciones que me permita iniciar de forma acelerada, cuando te solicito generar código para aplicaciones web. Suelo crear aplicaciones html con todo embebido y me agrada usar php porque cada proyecto es fácil de subir al hosting gratuito y no ocupan mucho.
Deseo comenzar a usar otras tecnologías, pero usando mi propio hosting, por lo cual el boilerplate debe ser muy pequeño y facilitar la implementación de código, en vez de dificultarla. Estuve investigando y hallé muchos. He pensado en usar shadcnd + tailwind + algo básico que no ocupe mucho. Uso hosting de alwaysdata de 100MB y quiero alojar múltiples mini-webapps que realizan tareas concretas. A futuro pensaré cóm ointegrarlas en una misma interfaz como un toolset, pero por ahora debo lograr un framework estandar que me permita crear apps de una sola página, que procesan archivos, texto, imagenes o que realizan diversas tareas de forma optimizada, para reducirle tiempo al usuario en su cotidianidad.
Te parece si exploramos juntos las posibilidades? También debe ser fácil de implementar cuando doy clases en el Bootcamp de IA para aprendices novatos que ya han ido aprendiendo a generar software con IA, pero únicamente en modo single-file-html. Quiero subir un nivel, sin elevar demasiado la curva de aprendizaje y al mismo tiempo facilitarles el proceso con un proyecto base que puedan compartir rapidamente con una IA. ENtre menos archivos se requieran, mucho mejor. Sería idea poder seguir usando la metodología actual pero con un nivel mayor de calidad.
Deseo tener por defecto precreadas diversas áreas de contenido on y off canvas. Un header preconfigurado, un footer preconfigurado, etc. La idea es que el bolerplate me permita usar rapidamente areas para definir qué funcionalidad o sección va en cada una, al generar aplicaciones y prototipos.Basado en tus requisitos, he creado un boilerplate ultra-ligero que combina PHP + HTML embebido + Tailwind CSS (via CDN) + estructura modular. Es perfecto para hosting compartido con limitación de espacio y para enseñanza en bootcamps.
micro-app-boilerplate/
├── index.php # Punto de entrada principal
├── config.php # Configuraciones básicas
├── components/ # Componentes reutilizables
│ ├── header.php
│ ├── footer.php
│ ├── sidebar.php
│ └── modal.php
└── assets/
├── uploads/ # Directorio para archivos subidos
└── temp/ # Archivos temporales<?php
// Configuración básica de la aplicación
define('APP_NAME', 'MicroApp Toolset');
define('MAX_UPLOAD_SIZE', 5); // 5MB
define('ALLOWED_FILE_TYPES', ['image/jpeg', 'image/png', 'application/pdf', 'text/plain']);
// Funciones útiles
function sanitize_input($data) {
return htmlspecialchars(strip_tags(trim($data)));
}
function format_bytes($bytes, $precision = 2) {
$units = ['B', 'KB', 'MB', 'GB'];
$bytes = max($bytes, 0);
$pow = floor(($bytes ? log($bytes) : 0) / log(1024);
$pow = min($pow, count($units) - 1);
return round($bytes / (1024 ** $pow), $precision) . ' ' . $units[$pow];
}
?><?php
require_once 'config.php';
// Lógica de la aplicación (ejemplo: procesamiento de archivos)
$upload_message = '';
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_FILES['userfile'])) {
$file = $_FILES['userfile'];
if ($file['error'] === UPLOAD_ERR_OK) {
if (in_array($file['type'], ALLOWED_FILE_TYPES)) {
if ($file['size'] <= MAX_UPLOAD_SIZE * 1024 * 1024) {
$upload_path = 'assets/uploads/' . uniqid() . '_' . basename($file['name']);
if (move_uploaded_file($file['tmp_name'], $upload_path)) {
$upload_message = "¡Archivo procesado con éxito!";
// Aquí iría la lógica específica de procesamiento
} else {
$upload_message = "Error al guardar el archivo.";
}
} else {
$upload_message = "Archivo demasiado grande. Límite: " . MAX_UPLOAD_SIZE . "MB";
}
} else {
$upload_message = "Tipo de archivo no permitido.";
}
} else {
$upload_message = "Error en la subida: " . $file['error'];
}
}
?>
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><?= APP_NAME ?></title>
<!-- Tailwind CSS via CDN (sin necesidad de instalación) -->
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#3B82F6',
secondary: '#10B981',
}
}
}
}
</script>
</head>
<body class="bg-gray-50 min-h-screen flex flex-col">
<?php include 'components/header.php'; ?>
<div class="flex flex-1">
<?php include 'components/sidebar.php'; ?>
<main class="flex-1 p-6">
<h1 class="text-2xl font-bold text-gray-800 mb-6">Herramienta de Procesamiento</h1>
<!-- Ejemplo de componente funcional -->
<div class="bg-white rounded-lg shadow p-6 mb-6">
<h2 class="text-xl font-semibold mb-4">Procesar Archivo</h2>
<?php if ($upload_message): ?>
<div class="mb-4 p-4 <?= strpos($upload_message, 'éxito') !== false ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800' ?> rounded">
<?= $upload_message ?>
</div>
<?php endif; ?>
<form method="post" enctype="multipart/form-data" class="space-y-4">
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Selecciona un archivo</label>
<input type="file" name="userfile" class="block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded file:border-0 file:text-sm file:font-semibold file:bg-primary file:text-white hover:file:bg-primary-dark">
</div>
<button type="submit" class="px-4 py-2 bg-primary text-white rounded hover:bg-primary-dark transition">Procesar</button>
</form>
</div>
<!-- Espacio para componentes dinámicos -->
<div id="dynamic-content" class="bg-white rounded-lg shadow p-6">
<?php /* Aquí se incluirían componentes según la ruta o parámetros */ ?>
<p class="text-gray-500">Contenido dinámico aparecerá aquí.</p>
</div>
</main>
</div>
<?php include 'components/footer.php'; ?>
<!-- Scripts básicos -->
<script>
// Funcionalidad básica para mostrar/ocultar sidebar
function toggleSidebar() {
const sidebar = document.getElementById('sidebar');
sidebar.classList.toggle('-translate-x-full');
}
// Ejemplo de función para procesamiento en el cliente
function processText(text) {
return text.trim().toUpperCase();
}
</script>
</body>
</html><header class="bg-white shadow">
<div class="max-w-7xl mx-auto px-4 py-4 sm:px-6 lg:px-8 flex justify-between items-center">
<div class="flex items-center space-x-4">
<button onclick="toggleSidebar()" class="md:hidden text-gray-500 hover:text-gray-700">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
</svg>
</button>
<h1 class="text-xl font-bold text-gray-800"><?= APP_NAME ?></h1>
</div>
<nav class="hidden md:flex space-x-8">
<a href="#" class="text-primary font-medium">Inicio</a>
<a href="#" class="text-gray-500 hover:text-primary">Herramientas</a>
<a href="#" class="text-gray-500 hover:text-primary">Documentación</a>
</nav>
</div>
</header><aside id="sidebar" class="bg-gray-800 text-white w-64 fixed md:relative h-full transform -translate-x-full md:translate-x-0 transition-transform duration-200 ease-in-out z-10">
<div class="p-4">
<h2 class="text-xl font-bold mb-6">Menú</h2>
<nav class="space-y-2">
<a href="#" class="block px-4 py-2 bg-primary rounded">Procesar Texto</a>
<a href="#" class="block px-4 py-2 hover:bg-gray-700 rounded">Optimizar Imágenes</a>
<a href="#" class="block px-4 py-2 hover:bg-gray-700 rounded">Convertir PDF</a>
<a href="#" class="block px-4 py-2 hover:bg-gray-700 rounded">Analizar Datos</a>
</nav>
<div class="mt-8 pt-4 border-t border-gray-700">
<h3 class="font-medium mb-2">Configuración Rápida</h3>
<div class="space-y-2">
<label class="flex items-center space-x-2">
<input type="checkbox" class="rounded text-primary">
<span>Modo Oscuro</span>
</label>
<label class="flex items-center space-x-2">
<input type="checkbox" class="rounded text-primary" checked>
<span>Guardar Historial</span>
</label>
</div>
</div>
</div>
</aside><footer class="bg-gray-800 text-white py-6 mt-auto">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex flex-col md:flex-row justify-between items-center">
<div class="mb-4 md:mb-0">
<p class="text-sm">© <?= date('Y') ?> <?= APP_NAME ?>. Todos los derechos reservados.</p>
</div>
<div class="flex space-x-6">
<a href="#" class="text-gray-300 hover:text-white">Términos</a>
<a href="#" class="text-gray-300 hover:text-white">Privacidad</a>
<a href="#" class="text-gray-300 hover:text-white">Documentación</a>
</div>
</div>
</div>
</footer><div id="modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden z-20">
<div class="bg-white rounded-lg shadow-xl max-w-md w-full p-6">
<div class="flex justify-between items-center mb-4">
<h3 class="text-lg font-bold" id="modal-title">Título del Modal</h3>
<button onclick="document.getElementById('modal').classList.add('hidden')" class="text-gray-500 hover:text-gray-700">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
<div id="modal-content">
<!-- Contenido dinámico irá aquí -->
</div>
<div class="mt-4 flex justify-end space-x-3">
<button onclick="document.getElementById('modal').classList.add('hidden')" class="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50">Cancelar</button>
<button id="modal-action" class="px-4 py-2 bg-primary text-white rounded-md hover:bg-primary-dark">Aceptar</button>
</div>
</div>
</div>
<script>
// Función para mostrar modales
function showModal(title, content, actionText = 'Aceptar', actionCallback = null) {
document.getElementById('modal-title').textContent = title;
document.getElementById('modal-content').innerHTML = content;
document.getElementById('modal-action').textContent = actionText;
const modal = document.getElementById('modal');
modal.classList.remove('hidden');
if (actionCallback) {
document.getElementById('modal-action').onclick = function() {
actionCallback();
modal.classList.add('hidden');
};
} else {
document.getElementById('modal-action').onclick = function() {
modal.classList.add('hidden');
};
}
}
</script>index.php) con componentes modulares.dynamic-content en index.phpdynamic-content.?tool=text-processor) para cargar dinámicamenteEste boilerplate cumple con tus requisitos de minimalismo, facilidad de implementación y bajo consumo de recursos, mientras introduce conceptos más avanzados de manera accesible.
**[INICIO DEL PROMPT]**
Actúa como un **Generador de Software Full-Stack Automático**. Tu rol es:
1. **Analizar mis requerimientos**.
2. **Implementar el software completo** en un solo output (sin pasos intermedios), incluyendo:
- Código funcional (frontend + backend si aplica).
- Configuraciones necesarias.
- Documentación técnica en el propio código.
3. **Reglas estrictas**:
- **No hagas preguntas**. Si algo no fue especificado, usa estándares de la industria.
- **Entrega TODO en un solo mensaje**.
- **Prioriza**: Funcionalidad > Optimización > Estilo.
- **Si soy ambiguo**, debes avisarme antes de generar el software.
Deseo crear un boilerplate que funcione como framework (metodología y marco de referencia) para crear web apps single-file en formato html con código 100% embebido; usando librerías CDN, y en general bibliotecas de código abierto altamente funcionales para proyectos tanto a nivel de prototipo, como para MPV, como para proyectos en producción, a pequeña escala.
Por favor, caro mio amico, considera que:
- Soy neófito digital
- Entré sin saber a un bootcamp de IA donde me empujan a aprender a **generar software funcional** y he aprendido únicamente a crear mini-web-apps formato html con código 100% embebido siempre single-file (archivo único que contiene todo el etiquetado HTML, toda la lógica javascript y muy poco o nada de estilos CSS, usando tailwind).
- Genera **SIEMPRE** código completo porque todavía no comprendo las estructuras ni código.
- Dame estas areas de html precreadas para agregar contenido / entrada/salida de mi web-app: header, body, footer, modal estandarizada, offcanvas y su trigger, un menú desplegable su trigger, placeholder de logo, navegacion en el footer, creditos y cosas basicas de la marca en el footer.
En una sesión creamos esto, pero no lo entiendo, aunque sé que es practicamente lo mismo que debo crear ahora:
<!DOCTYPE html><html lang="es" class="light"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content="Diccionario completo de términos de Inteligencia Artificial con definiciones, ejemplos y recursos de aprendizaje"> <!-- Meta Tags SEO y Social --> <meta name="keywords" content="IA, Inteligencia Artificial, Diccionario, Machine Learning, Glosario"> <meta property="og:title" content="Diccionario de Inteligencia Artificial"> <meta property="og:description" content="Explora los conceptos fundamentales de IA con definiciones claras y ejemplos prácticos"> <meta property="og:type" content="website"> <meta property="og:url" content="https://tudominio.com"> <meta property="og:image" content="https://tudominio.com/ia-dictionary-preview.jpg"> <title>Diccionario de Inteligencia Artificial</title> <!-- CDNs --> <script src="https://cdn.tailwindcss.com"></script> <script src="https://cdn.jsdelivr.net/npm/lite-youtube-embed@0.2.0/src/lite-yt-embed.js"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/lite-youtube-embed@0.2.0/src/lite-yt-embed.css"> <script src="https://cdn.jsdelivr.net/npm/alpinejs@3.13.0/dist/cdn.min.js" defer></script> <style> /* Estilos personalizados */ :root { --color-primary: #3b82f6; --color-dark: #1e293b; --color-light: #f8fafc; } /* Paleta de colores accesibles WCAG AA */ .card-color-0 { background-color: #E3F2FD; color: #0D47A1; } .card-color-1 { background-color: #F3E5F5; color: #4A148C; } .card-color-2 { background-color: #E8F5E9; color: #1B5E20; } .card-color-3 { background-color: #FFF3E0; color: #E65100; } .card-color-4 { background-color: #FBE9E7; color: #BF360C; } .card-color-5 { background-color: #EDE7F6; color: #311B92; } .card-color-6 { background-color: #E0F7FA; color: #006064; } .card-color-7 { background-color: #F1F8E9; color: #33691E; } .card-color-8 { background-color: #FFF8E1; color: #FF6F00; } .card-color-9 { background-color: #EFEBE9; color: #3E2723; } .card-color-10 { background-color: #E8EAF6; color: #1A237E; } .card-color-11 { background-color: #FCE4EC; color: #880E4F; } /* Transiciones suaves */ .transition-all { transition: all 0.3s ease; } /* Modal */ .modal-overlay { background-color: rgba(0, 0, 0, 0.7); backdrop-filter: blur(5px); } /* Scroll personalizado */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: #f1f1f1; } ::-webkit-scrollbar-thumb { background: #888; border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: #555; } .dark ::-webkit-scrollbar-track { background: #334155; } .dark ::-webkit-scrollbar-thumb { background: #64748b; } /* Efecto hover en tarjetas */ .card-hover { transform: translateY(0); transition: transform 0.2s ease; } .card-hover:hover { transform: translateY(-4px); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); } .dark .card-hover:hover { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3); } </style></head><body class="bg-slate-50 dark:bg-gray-900 text-slate-800 dark:text-gray-100 min-h-screen transition-all" x-data="app()" x-init="init()" :class="{'dark': darkMode}"> <!-- Header --> <header class="sticky top-0 z-10 bg-white/80 dark:bg-gray-800/80 backdrop-blur-md shadow-sm"> <div class="container mx-auto px-4 py-4 flex justify-between items-center"> <h1 class="text-2xl font-bold text-blue-600 dark:text-blue-400">Diccionario IA</h1> <div class="flex items-center space-x-4"> <!-- Toggle Dark Mode --> <button @click="toggleDarkMode()" class="p-2 rounded-full bg-slate-200 dark:bg-gray-700 hover:bg-slate-300 dark:hover:bg-gray-600 transition-all" aria-label="Cambiar tema"> <span x-show="!darkMode">🌙</span> <span x-show="darkMode" x-cloak>☀️</span> </button> <!-- Botón Recargar Datos --> <button @click="loadData(true)" class="p-2 rounded-full bg-blue-100 dark:bg-blue-900 hover:bg-blue-200 dark:hover:bg-blue-800 transition-all" aria-label="Recargar datos"> 🔄 </button> </div> </div> </header> <!-- Main Content --> <main class="container mx-auto px-4 py-8"> <!-- Buscador --> <div class="mb-8"> <div class="relative"> <input type="text" x-model="searchTerm" @input.debounce.300ms="filterItems()" placeholder="Buscar términos, sinónimos o etiquetas..." class="w-full p-4 pl-12 rounded-lg border border-slate-300 dark:border-gray-700 bg-white dark:bg-gray-800 shadow-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-all"> <div class="absolute left-4 top-1/2 transform -translate-y-1/2 text-slate-400 dark:text-gray-500"> 🔍 </div> </div> <!-- Filtros --> <div class="flex flex-wrap gap-4 mt-4"> <select x-model="selectedCategory" @change="filterItems()" class="p-2 rounded-lg border border-slate-300 dark:border-gray-700 bg-white dark:bg-gray-800"> <option value="">Todas las categorías</option> <template x-for="category in categories" :key="category"> <option x-text="category" :value="category"></option> </template> </select> <select x-model="selectedLevel" @change="filterItems()" class="p-2 rounded-lg border border-slate-300 dark:border-gray-700 bg-white dark:bg-gray-800"> <option value="">Todos los niveles</option> <option value="1">⭐ Principiante</option> <option value="2">⭐⭐ Básico</option> <option value="3">⭐⭐⭐ Intermedio</option> <option value="4">⭐⭐⭐⭐ Avanzado</option> <option value="5">⭐⭐⭐⭐⭐ Experto</option> </select> </div> </div> <!-- Historial --> <div x-show="history.length > 0" class="mb-6"> <h2 class="text-lg font-semibold mb-2">Historial de búsqueda</h2> <div class="flex flex-wrap gap-2"> <template x-for="term in history" :key="term"> <button @click="searchTerm = term; filterItems();" class="px-3 py-1 bg-blue-100 dark:bg-blue-900 rounded-full text-sm hover:bg-blue-200 dark:hover:bg-blue-800 transition-all" x-text="term"> </button> </template> </div> </div> <!-- Resultados --> <div x-show="filteredItems.length === 0 && !loading" class="text-center py-12"> <p class="text-lg text-slate-500 dark:text-gray-400">No se encontraron resultados para tu búsqueda</p> </div> <!-- Grid de Tarjetas --> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> <template x-for="(item, index) in filteredItems" :key="index"> <div class="card-hover relative rounded-xl overflow-hidden shadow-md hover:shadow-lg transition-all cursor-pointer" :class="'card-color-' + (item.term.length % 12)" @click="openModal(item)"> <div class="p-6"> <div class="flex justify-between items-start"> <h3 class="text-xl font-bold mb-2" x-text="item.term"></h3> <span class="text-lg" x-text="'⭐'.repeat(item.level) + '☆'.repeat(5 - item.level)"></span> </div> <div class="mb-3" x-show="item.synonyms && item.synonyms.length"> <p class="text-sm opacity-80">Sinónimos: <span x-text="item.synonyms.join(', ')"></span></p> </div> <div class="flex flex-wrap gap-2 mb-4"> <template x-for="tag in item.tags" :key="tag"> <span class="px-2 py-1 bg-white/30 dark:bg-black/30 rounded-full text-xs" x-text="tag"></span> </template> </div> <p class="text-sm line-clamp-2" x-text="item.definition"></p> </div> <!-- Botón Copiar --> <button @click.stop="copyToClipboard(item.term)" class="absolute top-3 right-3 p-2 rounded-full bg-white/80 dark:bg-gray-800/80 hover:bg-white dark:hover:bg-gray-700 transition-all opacity-0 group-hover:opacity-100" aria-label="Copiar término"> 📋 </button> </div> </template> </div> <!-- Carga Lazy --> <div x-intersect="loadMore()" class="h-8"></div> <!-- Loading Indicator --> <div x-show="loading" class="text-center py-8"> <div class="inline-block animate-spin rounded-full h-8 w-8 border-t-2 border-b-2 border-blue-500"></div> </div> </main> <!-- Modal --> <div x-show="isModalOpen" @keydown.escape.window="closeModal()" class="fixed inset-0 z-50 overflow-y-auto modal-overlay transition-all" x-transition:enter="ease-out duration-300" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="ease-in duration-200" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0"> <div class="flex items-center justify-center min-h-screen p-4"> <div @click.away="closeModal()" class="relative bg-white dark:bg-gray-800 rounded-xl shadow-2xl w-full max-w-4xl max-h-[90vh] overflow-hidden flex flex-col transition-all" x-transition:enter="ease-out duration-300" x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100" x-transition:leave="ease-in duration-200" x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100" x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"> <!-- Header Modal --> <div class="p-6 border-b border-slate-200 dark:border-gray-700 flex justify-between items-center"> <div> <h2 class="text-2xl font-bold" x-text="currentItem.term"></h2> <div class="flex items-center mt-1"> <span class="text-lg mr-2" x-text="'⭐'.repeat(currentItem.level) + '☆'.repeat(5 - currentItem.level)"></span> <span class="text-sm bg-blue-100 dark:bg-blue-900 px-2 py-1 rounded-full" x-text="currentItem.categories ? currentItem.categories[0] : ''"></span> </div> </div> <button @click="closeModal()" class="p-2 rounded-full hover:bg-slate-100 dark:hover:bg-gray-700 transition-all" aria-label="Cerrar modal"> ✕ </button> </div> <!-- Contenido Modal --> <div class="overflow-y-auto flex-1 p-6"> <!-- Definición --> <div class="mb-6"> <h3 class="text-lg font-semibold mb-2">Definición</h3> <p class="whitespace-pre-line" x-text="currentItem.definition"></p> </div> <!-- Ejemplos --> <div x-show="currentItem.examples && currentItem.examples.length" class="mb-6"> <h3 class="text-lg font-semibold mb-2">Ejemplos</h3> <ul class="list-disc pl-5 space-y-1"> <template x-for="(example, i) in currentItem.examples" :key="i"> <li x-text="example"></li> </template> </ul> </div> <!-- Recomendaciones --> <div x-show="currentItem.recommendations" class="mb-6"> <h3 class="text-lg font-semibold mb-2">Recomendaciones</h3> <p class="whitespace-pre-line" x-text="currentItem.recommendations"></p> </div> <!-- Videos --> <div x-show="currentItem.videos && currentItem.videos.length" class="mb-6"> <h3 class="text-lg font-semibold mb-2">Videos relacionados</h3> <div class="grid grid-cols-1 gap-4"> <template x-for="(videoId, i) in currentItem.videos" :key="i"> <lite-youtube :videoid="videoId" class="rounded-lg overflow-hidden"></lite-youtube> </template> </div> </div> </div> <!-- Footer Modal --> <div class="p-4 border-t border-slate-200 dark:border-gray-700 flex justify-between items-center"> <div class="flex flex-wrap gap-2"> <template x-for="tag in currentItem.tags" :key="tag"> <span class="px-2 py-1 bg-slate-100 dark:bg-gray-700 rounded-full text-xs" x-text="tag"></span> </template> </div> <button @click="copyToClipboard(currentItem.term)" class="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition-all"> Copiar término </button> </div> </div> </div> </div> <!-- Footer --> <footer class="bg-white dark:bg-gray-800 border-t border-slate-200 dark:border-gray-700 py-6 mt-12"> <div class="container mx-auto px-4 text-center text-sm text-slate-500 dark:text-gray-400"> <p>Diccionario de Inteligencia Artificial v1.1 - © 2023</p> <p class="mt-1">Desarrollado según especificaciones DRS v1.1</p> </div> </footer> <script> // Datos de ejemplo (en producción se cargarían desde data.json) const sampleData = [ { "term": "Machine Learning", "synonyms": ["Aprendizaje Automático"], "definition": "Rama de la inteligencia artificial que se centra en desarrollar sistemas que pueden aprender de los datos, identificando patrones y tomando decisiones con mínima intervención humana.", "examples": [ "Recomendaciones de productos en Amazon", "Detección de fraude en transacciones bancarias" ], "level": 3, "categories": ["IA", "Tecnología"], "tags": ["Python", "TensorFlow", "Scikit-learn"], "recommendations": "Curso recomendado: Machine Learning de Andrew Ng en Coursera", "videos": ["dQw4w9WgXcQ"] }, { "term": "Red Neuronal", "synonyms": ["Neural Network"], "definition": "Sistema de algoritmos modelado vagamente según el cerebro humano que está diseñado para reconocer patrones. Interpreta datos sensoriales a través de una especie de percepción automática, etiquetado o agrupación de datos sin procesar.", "examples": [ "Reconocimiento de imágenes en Facebook", "Traducción automática en Google Translate" ], "level": 4, "categories": ["Deep Learning"], "tags": ["Keras", "PyTorch", "TensorFlow"], "recommendations": "Libro recomendado: Neural Networks and Deep Learning de Michael Nielsen", "videos": ["aircAruvnKk"] }, { "term": "NLP", "synonyms": ["Procesamiento de Lenguaje Natural", "Natural Language Processing"], "definition": "Campo de la inteligencia artificial que se centra en la interacción entre computadoras y lenguaje humano, particularmente cómo programar computadoras para procesar y analizar grandes cantidades de datos de lenguaje natural.", "examples": [ "Asistentes virtuales como Siri o Alexa", "Análisis de sentimiento en redes sociales" ], "level": 3, "categories": ["IA", "Lingüística"], "tags": ["NLTK", "spaCy", "Transformers"], "recommendations": "Herramienta recomendada: Hugging Face Transformers", "videos": ["BOGq_2Ft4b0"] } ]; // Aplicación principal function app() { return { // Estado darkMode: false, loading: false, isModalOpen: false, searchTerm: '', selectedCategory: '', selectedLevel: '', items: [], filteredItems: [], currentItem: {}, history: [], categories: [], visibleItems: 12, // Inicialización init() { this.loadDarkModePreference(); this.loadData(); this.registerServiceWorker(); }, // Cargar preferencia de tema oscuro loadDarkModePreference() { const savedMode = localStorage.getItem('darkMode'); this.darkMode = savedMode ? JSON.parse(savedMode) : window.matchMedia('(prefers-color-scheme: dark)').matches; document.documentElement.classList.toggle('dark', this.darkMode); }, // Alternar tema oscuro toggleDarkMode() { this.darkMode = !this.darkMode; localStorage.setItem('darkMode', this.darkMode); document.documentElement.classList.toggle('dark', this.darkMode); }, // Cargar datos async loadData(forceReload = false) { this.loading = true; try { // En producción, cargaríamos desde data.json // const response = await fetch('data.json'); // this.items = await response.json(); // Usamos datos de ejemplo para esta demo this.items = sampleData; // Extraer categorías únicas para el filtro this.extractCategories(); // Filtrar items iniciales this.filterItems(); // Guardar en caché local localStorage.setItem('cachedData', JSON.stringify(this.items)); localStorage.setItem('lastUpdated', new Date().toISOString()); this.loading = false; } catch (error) { console.error('Error loading data:', error); // Intentar cargar desde caché local const cachedData = localStorage.getItem('cachedData'); if (cachedData) { this.items = JSON.parse(cachedData); this.extractCategories(); this.filterItems(); } this.loading = false; } }, // Extraer categorías únicas extractCategories() { const allCategories = this.items.flatMap(item => item.categories || []); this.categories = [...new Set(allCategories)].sort(); }, // Filtrar items filterItems() { let results = [...this.items]; // Filtrar por término de búsqueda if (this.searchTerm) { const term = this.searchTerm.toLowerCase(); results = results.filter(item => item.term.toLowerCase().includes(term) || (item.synonyms && item.synonyms.some(s => s.toLowerCase().includes(term))) || (item.tags && item.tags.some(t => t.toLowerCase().includes(term))) ); // Actualizar historial this.updateHistory(this.searchTerm); } // Filtrar por categoría if (this.selectedCategory) { results = results.filter(item => item.categories && item.categories.includes(this.selectedCategory) ); } // Filtrar por nivel if (this.selectedLevel) { results = results.filter(item => item.level && item.level.toString() === this.selectedLevel ); } this.filteredItems = results.slice(0, this.visibleItems); }, // Cargar más items (lazy loading) loadMore() { if (this.filteredItems.length < this.items.length) { this.visibleItems += 12; this.filterItems(); } }, // Actualizar historial de búsqueda updateHistory(term) { if (!term) return; // Evitar duplicados y mantener un máximo de 10 términos this.history = [ term, ...this.history.filter(item => item.toLowerCase() !== term.toLowerCase()) ].slice(0, 10); localStorage.setItem('searchHistory', JSON.stringify(this.history)); }, // Abrir modal openModal(item) { this.currentItem = item; this.isModalOpen = true; document.body.style.overflow = 'hidden'; }, // Cerrar modal closeModal() { this.isModalOpen = false; document.body.style.overflow = ''; // Liberar recursos de YouTube const youtubePlayers = document.querySelectorAll('lite-youtube'); youtubePlayers.forEach(player => { player.removeAttribute('videoid'); }); }, // Copiar al portapapeles async copyToClipboard(text) { try { await navigator.clipboard.writeText(text); // Mostrar notificación const notification = document.createElement('div'); notification.className = 'fixed bottom-4 right-4 px-4 py-2 bg-green-500 text-white rounded-lg shadow-lg animate-fade-in-out'; notification.textContent = '¡Copiado!'; document.body.appendChild(notification); setTimeout(() => { notification.remove(); }, 2000); } catch (err) { console.error('Error al copiar:', err); } }, // Registrar Service Worker registerServiceWorker() { if ('serviceWorker' in navigator) { window.addEventListener('load', () => { navigator.serviceWorker.register('/sw.js').then( registration => { console.log('ServiceWorker registration successful'); }, err => { console.log('ServiceWorker registration failed: ', err); } ); }); } } }; } // Inicializar Service Worker (simulado en este entorno) if ('serviceWorker' in navigator) { window.addEventListener('load', function() { navigator.serviceWorker.register('/sw.js').then( function(registration) { console.log('ServiceWorker registration successful'); }, function(err) { console.log('ServiceWorker registration failed: ', err); } ); }); } </script></body></html>
Vamos a ello, caro mio amico.
**[FIN DEL PROMPT]**<!DOCTYPE html>
<html lang="es" class="light">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Framework para crear web apps de una sola página con código embebido.">
<title>Framework Boilerplate</title>
<!-- CDNs -->
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/alpinejs@3.13.0/dist/cdn.min.js" defer></script>
<script src="https://cdn.jsdelivr.net/npm/lite-youtube-embed@0.2.0/src/lite-yt-embed.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/lite-youtube-embed@0.2.0/src/lite-yt-embed.css">
<style>
/* Estilos personalizados */
:root {
--color-primary: #3b82f6;
--color-dark: #1e293b;
--color-light: #f8fafc;
}
/* Modal */
.modal-overlay {
background-color: rgba(0, 0, 0, 0.7);
backdrop-filter: blur(5px);
}
/* Transiciones suaves */
.transition-all {
transition: all 0.3s ease;
}
/* Scroll personalizado */
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
background: #888;
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: #555;
}
</style>
</head>
<body class="bg-slate-50 dark:bg-gray-900 text-slate-800 dark:text-gray-100 min-h-screen transition-all" x-data="app()" x-init="init()" :class="{'dark': darkMode}">
<!-- Header -->
<header class="sticky top-0 z-10 bg-white/80 dark:bg-gray-800/80 backdrop-blur-md shadow-sm">
<div class="container mx-auto px-4 py-4 flex justify-between items-center">
<h1 class="text-2xl font-bold text-blue-600 dark:text-blue-400">Mi Web App</h1>
<div class="flex items-center space-x-4">
<!-- Toggle Dark Mode -->
<button @click="toggleDarkMode()" class="p-2 rounded-full bg-slate-200 dark:bg-gray-700 hover:bg-slate-300 dark:hover:bg-gray-600 transition-all" aria-label="Cambiar tema">
<span x-show="!darkMode">🌙</span>
<span x-show="darkMode" x-cloak>☀️</span>
</button>
</div>
</div>
</header>
<!-- Main Content -->
<main class="container mx-auto px-4 py-8">
<!-- Search Bar -->
<div class="mb-8">
<div class="relative">
<input type="text" x-model="searchTerm" @input.debounce.300ms="filterItems()" placeholder="Buscar algo..." class="w-full p-4 pl-12 rounded-lg border border-slate-300 dark:border-gray-700 bg-white dark:bg-gray-800 shadow-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-all">
<div class="absolute left-4 top-1/2 transform -translate-y-1/2 text-slate-400 dark:text-gray-500">🔍</div>
</div>
</div>
<!-- Content Display -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="card-hover relative rounded-xl overflow-hidden shadow-md hover:shadow-lg transition-all cursor-pointer" @click="openModal()">
<div class="p-6">
<h3 class="text-xl font-bold">Ejemplo de Término</h3>
<p class="text-sm line-clamp-2">Descripción del término, breve y clara.</p>
</div>
</div>
</div>
</main>
<!-- Modal -->
<div x-show="isModalOpen" @keydown.escape.window="closeModal()" class="fixed inset-0 z-50 overflow-y-auto modal-overlay transition-all" x-transition:enter="ease-out duration-300" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="ease-in duration-200" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0">
<div class="flex items-center justify-center min-h-screen p-4">
<div @click.away="closeModal()" class="relative bg-white dark:bg-gray-800 rounded-xl shadow-2xl w-full max-w-4xl max-h-[90vh] overflow-hidden flex flex-col transition-all">
<div class="p-6 border-b border-slate-200 dark:border-gray-700">
<div>
<h2 class="text-2xl font-bold">Detalles del Término</h2>
</div>
<button @click="closeModal()" class="p-2 rounded-full hover:bg-slate-100 dark:hover:bg-gray-700 transition-all" aria-label="Cerrar modal">✕</button>
</div>
<div class="overflow-y-auto flex-1 p-6">
<h3 class="text-lg font-semibold mb-2">Definición</h3>
<p class="whitespace-pre-line">Explicación detallada del término.</p>
</div>
</div>
</div>
</div>
<!-- Footer -->
<footer class="bg-white dark:bg-gray-800 border-t border-slate-200 dark:border-gray-700 py-6 mt-12">
<div class="container mx-auto px-4 text-center text-sm text-slate-500 dark:text-gray-400">
<p>Framework Boilerplate v1.0 - © 2025</p>
<p class="mt-1">Desarrollado para crear apps web de una sola página.</p>
</div>
</footer>
<script>
// Framework Application Logic
function app() {
return {
darkMode: false,
isModalOpen: false,
searchTerm: '',
filteredItems: [],
init() {
this.loadDarkModePreference();
},
loadDarkModePreference() {
const savedMode = localStorage.getItem('darkMode');
this.darkMode = savedMode ? JSON.parse(savedMode) : window.matchMedia('(prefers-color-scheme: dark)').matches;
document.documentElement.classList.toggle('dark', this.darkMode);
},
toggleDarkMode() {
this.darkMode = !this.darkMode;
localStorage.setItem('darkMode', this.darkMode);
document.documentElement.classList.toggle('dark', this.darkMode);
},
openModal() {
this.isModalOpen = true;
},
closeModal() {
this.isModalOpen = false;
},
filterItems() {
// Simular la lógica de filtro
this.filteredItems = [
{ term: "Ejemplo de Término", definition: "Una definición clara y concisa." }
];
}
};
}
</script>
</body>
</html>