Spaces:
Running
Running
| <html lang="es"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Reportes A3 - Gestión de Mejora Continua</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| .a3-section { | |
| min-height: 300px; | |
| border: 1px dashed #ccc; | |
| transition: all 0.3s ease; | |
| } | |
| .a3-section:hover { | |
| border-color: #3b82f6; | |
| box-shadow: 0 0 0 1px #3b82f6; | |
| } | |
| .a3-section-title { | |
| border-bottom: 2px solid #3b82f6; | |
| } | |
| .pdf-preview { | |
| height: 500px; | |
| border: 1px solid #e5e7eb; | |
| } | |
| .dragging { | |
| opacity: 0.5; | |
| border: 2px dashed #3b82f6; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50"> | |
| <header class="bg-blue-600 text-white shadow-lg"> | |
| <div class="container mx-auto px-4 py-6"> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex items-center space-x-4"> | |
| <i class="fas fa-chart-line text-3xl"></i> | |
| <h1 class="text-2xl font-bold">Reportes A3</h1> | |
| </div> | |
| <nav> | |
| <ul class="flex space-x-6"> | |
| <li><a href="#" class="hover:underline"><i class="fas fa-home mr-1"></i> Inicio</a></li> | |
| <li><a href="#" class="hover:underline"><i class="fas fa-book mr-1"></i> Plantillas</a></li> | |
| <li><a href="#" class="hover:underline"><i class="fas fa-history mr-1"></i> Historial</a></li> | |
| <li><a href="#" class="hover:underline"><i class="fas fa-cog mr-1"></i> Configuración</a></li> | |
| </ul> | |
| </nav> | |
| </div> | |
| </div> | |
| </header> | |
| <main class="container mx-auto px-4 py-8"> | |
| <div class="flex justify-between items-center mb-8"> | |
| <h2 class="text-3xl font-semibold text-gray-800">Crear Nuevo Reporte A3</h2> | |
| <div class="flex space-x-4"> | |
| <button id="save-btn" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-lg shadow transition flex items-center"> | |
| <i class="fas fa-save mr-2"></i> Guardar | |
| </button> | |
| <button id="export-pdf" class="bg-green-600 hover:bg-green-700 text-white px-6 py-2 rounded-lg shadow transition flex items-center"> | |
| <i class="fas fa-file-pdf mr-2"></i> Exportar PDF | |
| </button> | |
| <button id="print-btn" class="bg-gray-600 hover:bg-gray-700 text-white px-6 py-2 rounded-lg shadow transition flex items-center"> | |
| <i class="fas fa-print mr-2"></i> Imprimir | |
| </button> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-8"> | |
| <!-- Editor de Reporte A3 --> | |
| <div class="lg:col-span-2 bg-white rounded-xl shadow-md overflow-hidden"> | |
| <div class="p-6"> | |
| <div class="mb-6"> | |
| <label class="block text-gray-700 font-medium mb-2">Título del Reporte</label> | |
| <input type="text" id="report-title" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" placeholder="Ej: Reducción de tiempos de cambio en línea de producción"> | |
| </div> | |
| <div class="mb-6"> | |
| <label class="block text-gray-700 font-medium mb-2">Autor</label> | |
| <input type="text" id="report-author" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" placeholder="Nombre del responsable"> | |
| </div> | |
| <div class="mb-6"> | |
| <label class="block text-gray-700 font-medium mb-2">Fecha</label> | |
| <input type="date" id="report-date" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> | |
| </div> | |
| <!-- Secciones del Reporte A3 --> | |
| <div class="space-y-6"> | |
| <!-- 1. Antecedentes/Contexto --> | |
| <div class="a3-section p-4 rounded-lg bg-white" draggable="true" data-section="background"> | |
| <div class="a3-section-title pb-2 mb-4"> | |
| <h3 class="text-lg font-semibold text-blue-600 flex justify-between items-center"> | |
| <span>1. Antecedentes/Contexto</span> | |
| <i class="fas fa-grip-vertical text-gray-400 cursor-move"></i> | |
| </h3> | |
| </div> | |
| <textarea class="w-full px-3 py-2 border border-gray-300 rounded focus:ring-2 focus:ring-blue-500 focus:border-blue-500" rows="4" placeholder="Describe el contexto del problema, situación actual, importancia..."></textarea> | |
| </div> | |
| <!-- 2. Descripción del Problema --> | |
| <div class="a3-section p-4 rounded-lg bg-white" draggable="true" data-section="problem"> | |
| <div class="a3-section-title pb-2 mb-4"> | |
| <h3 class="text-lg font-semibold text-blue-600 flex justify-between items-center"> | |
| <span>2. Descripción del Problema</span> | |
| <i class="fas fa-grip-vertical text-gray-400 cursor-move"></i> | |
| </h3> | |
| </div> | |
| <textarea class="w-full px-3 py-2 border border-gray-300 rounded focus:ring-2 focus:ring-blue-500 focus:border-blue-500" rows="4" placeholder="Define claramente el problema, incluye datos cuantitativos si es posible..."></textarea> | |
| </div> | |
| <!-- 3. Análisis de Causa Raíz --> | |
| <div class="a3-section p-4 rounded-lg bg-white" draggable="true" data-section="analysis"> | |
| <div class="a3-section-title pb-2 mb-4"> | |
| <h3 class="text-lg font-semibold text-blue-600 flex justify-between items-center"> | |
| <span>3. Análisis de Causa Raíz</span> | |
| <i class="fas fa-grip-vertical text-gray-400 cursor-move"></i> | |
| </h3> | |
| </div> | |
| <textarea class="w-full px-3 py-2 border border-gray-300 rounded focus:ring-2 focus:ring-blue-500 focus:border-blue-500" rows="4" placeholder="Utiliza diagramas de Ishikawa, 5 porqués u otras herramientas..."></textarea> | |
| <div class="mt-3"> | |
| <button class="bg-blue-100 text-blue-600 px-3 py-1 rounded text-sm hover:bg-blue-200 transition"> | |
| <i class="fas fa-plus mr-1"></i> Añadir Diagrama | |
| </button> | |
| </div> | |
| </div> | |
| <!-- 4. Contramedidas --> | |
| <div class="a3-section p-4 rounded-lg bg-white" draggable="true" data-section="countermeasures"> | |
| <div class="a3-section-title pb-2 mb-4"> | |
| <h3 class="text-lg font-semibold text-blue-600 flex justify-between items-center"> | |
| <span>4. Contramedidas</span> | |
| <i class="fas fa-grip-vertical text-gray-400 cursor-move"></i> | |
| </h3> | |
| </div> | |
| <textarea class="w-full px-3 py-2 border border-gray-300 rounded focus:ring-2 focus:ring-blue-500 focus:border-blue-500" rows="4" placeholder="Describe las acciones propuestas para resolver el problema..."></textarea> | |
| <div class="mt-3"> | |
| <button class="bg-blue-100 text-blue-600 px-3 py-1 rounded text-sm hover:bg-blue-200 transition"> | |
| <i class="fas fa-plus mr-1"></i> Añadir Acción | |
| </button> | |
| </div> | |
| </div> | |
| <!-- 5. Plan de Implementación --> | |
| <div class="a3-section p-4 rounded-lg bg-white" draggable="true" data-section="implementation"> | |
| <div class="a3-section-title pb-2 mb-4"> | |
| <h3 class="text-lg font-semibold text-blue-600 flex justify-between items-center"> | |
| <span>5. Plan de Implementación</span> | |
| <i class="fas fa-grip-vertical text-gray-400 cursor-move"></i> | |
| </h3> | |
| </div> | |
| <div class="overflow-x-auto"> | |
| <table class="min-w-full bg-white"> | |
| <thead> | |
| <tr class="bg-gray-100"> | |
| <th class="py-2 px-4 border">Acción</th> | |
| <th class="py-2 px-4 border">Responsable</th> | |
| <th class="py-2 px-4 border">Fecha Límite</th> | |
| <th class="py-2 px-4 border">Estado</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr> | |
| <td class="py-2 px-4 border"><input type="text" class="w-full px-2 py-1 border rounded" placeholder="Descripción"></td> | |
| <td class="py-2 px-4 border"><input type="text" class="w-full px-2 py-1 border rounded" placeholder="Nombre"></td> | |
| <td class="py-2 px-4 border"><input type="date" class="w-full px-2 py-1 border rounded"></td> | |
| <td class="py-2 px-4 border"> | |
| <select class="w-full px-2 py-1 border rounded"> | |
| <option>Pendiente</option> | |
| <option>En Progreso</option> | |
| <option>Completado</option> | |
| </select> | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| <div class="mt-3"> | |
| <button class="bg-blue-100 text-blue-600 px-3 py-1 rounded text-sm hover:bg-blue-200 transition"> | |
| <i class="fas fa-plus mr-1"></i> Añadir Fila | |
| </button> | |
| </div> | |
| </div> | |
| <!-- 6. Seguimiento y Resultados --> | |
| <div class="a3-section p-4 rounded-lg bg-white" draggable="true" data-section="followup"> | |
| <div class="a3-section-title pb-2 mb-4"> | |
| <h3 class="text-lg font-semibold text-blue-600 flex justify-between items-center"> | |
| <span>6. Seguimiento y Resultados</span> | |
| <i class="fas fa-grip-vertical text-gray-400 cursor-move"></i> | |
| </h3> | |
| </div> | |
| <textarea class="w-full px-3 py-2 border border-gray-300 rounded focus:ring-2 focus:ring-blue-500 focus:border-blue-500" rows="4" placeholder="Métricas de seguimiento, resultados obtenidos, lecciones aprendidas..."></textarea> | |
| <div class="mt-3"> | |
| <button class="bg-blue-100 text-blue-600 px-3 py-1 rounded text-sm hover:bg-blue-200 transition"> | |
| <i class="fas fa-plus mr-1"></i> Añadir Gráfico | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Vista Previa y Herramientas --> | |
| <div class="space-y-6"> | |
| <!-- Vista previa PDF --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden"> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-semibold text-gray-800 mb-4">Vista Previa del Reporte</h3> | |
| <div class="pdf-preview bg-gray-100 rounded-lg flex items-center justify-center"> | |
| <p class="text-gray-500">Vista previa del reporte A3 en formato PDF</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Herramientas adicionales --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden"> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-semibold text-gray-800 mb-4">Herramientas</h3> | |
| <div class="space-y-4"> | |
| <button class="w-full flex items-center justify-between px-4 py-3 bg-gray-100 hover:bg-gray-200 rounded-lg transition"> | |
| <span class="font-medium">Diagrama de Ishikawa</span> | |
| <i class="fas fa-fish text-blue-500"></i> | |
| </button> | |
| <button class="w-full flex items-center justify-between px-4 py-3 bg-gray-100 hover:bg-gray-200 rounded-lg transition"> | |
| <span class="font-medium">5 Porqués</span> | |
| <i class="fas fa-question-circle text-green-500"></i> | |
| </button> | |
| <button class="w-full flex items-center justify-between px-4 py-3 bg-gray-100 hover:bg-gray-200 rounded-lg transition"> | |
| <span class="font-medium">Gráfico de Pareto</span> | |
| <i class="fas fa-chart-bar text-purple-500"></i> | |
| </button> | |
| <button class="w-full flex items-center justify-between px-4 py-3 bg-gray-100 hover:bg-gray-200 rounded-lg transition"> | |
| <span class="font-medium">Matriz de Priorización</span> | |
| <i class="fas fa-th-list text-yellow-500"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Plantillas guardadas --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden"> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-semibold text-gray-800 mb-4">Mis Plantillas</h3> | |
| <div class="space-y-3"> | |
| <div class="flex items-center justify-between p-3 bg-blue-50 rounded-lg"> | |
| <div> | |
| <h4 class="font-medium">Problemas de Calidad</h4> | |
| <p class="text-sm text-gray-600">Última modificación: 15/06/2023</p> | |
| </div> | |
| <button class="text-blue-600 hover:text-blue-800"> | |
| <i class="fas fa-arrow-right"></i> | |
| </button> | |
| </div> | |
| <div class="flex items-center justify-between p-3 bg-green-50 rounded-lg"> | |
| <div> | |
| <h4 class="font-medium">Mejora de Procesos</h4> | |
| <p class="text-sm text-gray-600">Última modificación: 02/07/2023</p> | |
| </div> | |
| <button class="text-green-600 hover:text-green-800"> | |
| <i class="fas fa-arrow-right"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <footer class="bg-gray-800 text-white py-8"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <div class="mb-4 md:mb-0"> | |
| <h2 class="text-xl font-bold mb-2">Reportes A3</h2> | |
| <p class="text-gray-400">Herramienta para la gestión de mejora continua</p> | |
| </div> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="hover:text-blue-300"><i class="fab fa-facebook-f"></i></a> | |
| <a href="#" class="hover:text-blue-400"><i class="fab fa-twitter"></i></a> | |
| <a href="#" class="hover:text-red-400"><i class="fab fa-youtube"></i></a> | |
| <a href="#" class="hover:text-gray-400"><i class="fab fa-linkedin-in"></i></a> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-700 mt-6 pt-6 text-center text-gray-400"> | |
| <p>© 2023 Reportes A3. Todos los derechos reservados.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Funcionalidad para arrastrar y soltar secciones | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const sections = document.querySelectorAll('.a3-section'); | |
| let draggedItem = null; | |
| sections.forEach(section => { | |
| section.addEventListener('dragstart', function() { | |
| draggedItem = this; | |
| setTimeout(() => { | |
| this.classList.add('dragging'); | |
| }, 0); | |
| }); | |
| section.addEventListener('dragend', function() { | |
| this.classList.remove('dragging'); | |
| draggedItem = null; | |
| }); | |
| section.addEventListener('dragover', function(e) { | |
| e.preventDefault(); | |
| }); | |
| section.addEventListener('dragenter', function(e) { | |
| e.preventDefault(); | |
| if (draggedItem !== this) { | |
| this.style.borderTop = '2px solid #3b82f6'; | |
| } | |
| }); | |
| section.addEventListener('dragleave', function() { | |
| this.style.borderTop = ''; | |
| }); | |
| section.addEventListener('drop', function() { | |
| this.style.borderTop = ''; | |
| if (draggedItem !== this) { | |
| const parent = this.parentNode; | |
| const thisIndex = [...parent.children].indexOf(this); | |
| const draggedIndex = [...parent.children].indexOf(draggedItem); | |
| if (draggedIndex < thisIndex) { | |
| parent.insertBefore(draggedItem, this.nextSibling); | |
| } else { | |
| parent.insertBefore(draggedItem, this); | |
| } | |
| } | |
| }); | |
| }); | |
| // Botón Guardar | |
| document.getElementById('save-btn').addEventListener('click', function() { | |
| alert('Reporte guardado correctamente'); | |
| }); | |
| // Botón Exportar PDF | |
| document.getElementById('export-pdf').addEventListener('click', function() { | |
| alert('Generando PDF...'); | |
| }); | |
| // Botón Imprimir | |
| document.getElementById('print-btn').addEventListener('click', function() { | |
| window.print(); | |
| }); | |
| // Añadir filas a la tabla de implementación | |
| document.querySelectorAll('[data-section="implementation"] button').forEach(btn => { | |
| btn.addEventListener('click', function() { | |
| const tbody = this.closest('.a3-section').querySelector('tbody'); | |
| const newRow = document.createElement('tr'); | |
| newRow.innerHTML = ` | |
| <td class="py-2 px-4 border"><input type="text" class="w-full px-2 py-1 border rounded" placeholder="Descripción"></td> | |
| <td class="py-2 px-4 border"><input type="text" class="w-full px-2 py-1 border rounded" placeholder="Nombre"></td> | |
| <td class="py-2 px-4 border"><input type="date" class="w-full px-2 py-1 border rounded"></td> | |
| <td class="py-2 px-4 border"> | |
| <select class="w-full px-2 py-1 border rounded"> | |
| <option>Pendiente</option> | |
| <option>En Progreso</option> | |
| <option>Completado</option> | |
| </select> | |
| </td> | |
| `; | |
| tbody.appendChild(newRow); | |
| }); | |
| }); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Kako2050/reportes-a3" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |