Hugging Face's logo

Spaces:
alcantarm
/
docusync-aligner-pro
Running

App Files Community
docusync-aligner-pro / index.html
alcantarm's picture
alcantarm
necesito que haya una secci贸n de documentos cargados y los liste para trasabilidad, junto con eso el analisis tiene que ser por iniciativas del documento subido que reporten a los objetivos estrategicos del PDI alineados con los marcos del CFIR
1d78adb verified
Raw History Blame Contribute Delete
6.56 kB
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DocuMatch | PDI-CFIR Analyzer</title>
<link rel="stylesheet" href="style.css">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<script src="https://unpkg.com/feather-icons"></script>
</head>
<body class="bg-gray-50 min-h-screen">
<custom-navbar></custom-navbar>
<main class="container mx-auto px-4 py-8">
<div class="max-w-4xl mx-auto bg-white rounded-xl shadow-md overflow-hidden p-6">
<div class="text-center mb-8">
<h1 class="text-3xl font-bold text-gray-800 mb-2">DocuMatch Analyzer</h1>
<p class="text-gray-600">Sube tus documentos y marcos funcionales para analizar su alineaci贸n con PDI y CFIR</p>
</div>
<div class="grid md:grid-cols-2 gap-6 mb-8">
<div class="upload-card bg-blue-50 p-6 rounded-lg border-2 border-dashed border-blue-200">
<div class="flex flex-col items-center justify-center h-full">
<i data-feather="upload" class="w-12 h-12 text-blue-500 mb-4"></i>
<h3 class="text-lg font-semibold text-gray-700 mb-2">Documento a Analizar</h3>
<p class="text-gray-500 text-center mb-4">Sube el documento que deseas evaluar contra los marcos PDI y CFIR</p>
<input type="file" id="documentInput" class="hidden" accept=".pdf,.doc,.docx,.txt">
<button onclick="document.getElementById('documentInput').click()" class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg transition">
Seleccionar Archivo
</button>
</div>
</div>
<div class="upload-card bg-purple-50 p-6 rounded-lg border-2 border-dashed border-purple-200">
<div class="flex flex-col items-center justify-center h-full">
<i data-feather="file-text" class="w-12 h-12 text-purple-500 mb-4"></i>
<h3 class="text-lg font-semibold text-gray-700 mb-2">Marcos Funcionales</h3>
<p class="text-gray-500 text-center mb-4">Sube los documentos PDI y CFIR para comparar</p>
<input type="file" id="frameworksInput" class="hidden" accept=".pdf,.doc,.docx,.txt" multiple>
<button onclick="document.getElementById('frameworksInput').click()" class="bg-purple-500 hover:bg-purple-600 text-white px-4 py-2 rounded-lg transition">
Subir Marcos
</button>
</div>
</div>
</div>
<div id="uploadedDocuments" class="hidden mb-8">
<h2 class="text-xl font-semibold text-gray-800 mb-4">Documentos Cargados</h2>
<div class="bg-white border rounded-lg shadow-sm overflow-hidden">
<table class="min-w-full divide-y divide-gray-200">
<thead class="bg-gray-50">
<tr>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Documento</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Tipo</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Fecha</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Acciones</th>
</tr>
</thead>
<tbody id="documentsList" class="bg-white divide-y divide-gray-200">
<!-- Documents will be listed here -->
</tbody>
</table>
</div>
</div>
<div id="analysisSection" class="hidden">
<div class="flex justify-between items-center mb-4">
<h2 class="text-xl font-semibold text-gray-800">An谩lisis por Iniciativas</h2>
<button id="analyzeBtn" class="bg-green-500 hover:bg-green-600 text-white px-4 py-2 rounded-lg flex items-center">
<i data-feather="play" class="mr-2"></i> Analizar Iniciativas
</button>
</div>
<div class="grid md:grid-cols-2 gap-6">
<div class="p-4 bg-white border rounded-lg shadow-sm">
<h3 class="font-medium text-gray-700 mb-3 flex items-center">
<i data-feather="check-circle" class="text-green-500 mr-2"></i> Alineaci贸n con PDI
</h3>
<div id="pdiResults" class="text-gray-600">
<!-- Results will be populated here -->
</div>
</div>
<div class="p-4 bg-white border rounded-lg shadow-sm">
<h3 class="font-medium text-gray-700 mb-3 flex items-center">
<i data-feather="check-circle" class="text-blue-500 mr-2"></i> Alineaci贸n con CFIR
</h3>
<div id="cfirResults" class="text-gray-600">
<!-- Results will be populated here -->
</div>
</div>
</div>
<div class="mt-6 p-4 bg-yellow-50 border border-yellow-200 rounded-lg">
<h3 class="font-medium text-yellow-700 mb-2 flex items-center">
<i data-feather="alert-triangle" class="mr-2"></i> Recomendaciones
</h3>
<div id="recommendations" class="text-yellow-600">
<!-- Recommendations will be populated here -->
</div>
</div>
</div>
</div>
</main>
<custom-footer></custom-footer>
<script src="components/navbar.js"></script>
<script src="components/footer.js"></script>
<script src="script.js"></script>
<script>
feather.replace();
</script>
<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
</body>
</html>