Spaces:
Running
Running
| <html lang="es"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <meta name="theme-color" content="#000000"> | |
| <meta name="description" content="Instituto IA para Salud - Transformando el futuro de la medicina con inteligencia artificial"> | |
| <meta name="keywords" content="IA médica, salud, inteligencia artificial, medicina, diagnóstico"> | |
| <title>IA Hospital Hub | Innovación en Medicina</title> | |
| <!-- Enhanced UI Libraries --> | |
| <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"> | |
| <link href="https://cdn.jsdelivr.net/npm/daisyui@2.6.0/dist/full.css" rel="stylesheet"> | |
| <link href="https://cdn.jsdelivr.net/npm/@materializecss/materialize@2.0.1-alpha/dist/css/materialize.min.css" rel="stylesheet"> | |
| <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet"> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"> | |
| <!-- Modern Fonts --> | |
| <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@200;400;500;700&family=Space+Grotesk:wght@300;400;500;600;700&display=swap" rel="stylesheet"> | |
| <!-- Interactive Components --> | |
| <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js"></script> | |
| <script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/@materializecss/materialize@2.0.1-alpha/dist/js/materialize.min.js"></script> | |
| <!-- Minimal Custom Styles --> | |
| <style> | |
| .nav-link:hover { | |
| transform: translateY(-2px); | |
| transition: all 0.2s; | |
| } | |
| .card { | |
| transition: all 0.3s ease; | |
| background: linear-gradient(135deg, rgba(31, 41, 55, 0.98), rgba(17, 24, 39, 0.98)); | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| } | |
| .card:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); | |
| } | |
| [lang="en"] { display: none; } | |
| .lang-en [lang="en"] { display: block; } | |
| .lang-en [lang="es"] { display: none; } | |
| /* Document Reader Styles */ | |
| .doc-reader { | |
| width: 100%; | |
| height: 800px; | |
| border: none; | |
| border-radius: 10px; | |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); | |
| background: white; | |
| } | |
| .doc-section { | |
| padding: 2rem; | |
| margin: 2rem 0; | |
| background: rgba(255, 255, 255, 0.05); | |
| border-radius: 10px; | |
| backdrop-filter: blur(10px); | |
| } | |
| .doc-card { | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| } | |
| .doc-card:hover { | |
| transform: translateY(-5px); | |
| } | |
| .doc-viewer { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: rgba(0, 0, 0, 0.9); | |
| z-index: 100; | |
| display: none; | |
| } | |
| .doc-viewer.active { | |
| display: block; | |
| } | |
| .doc-viewer iframe { | |
| width: 100%; | |
| height: 100%; | |
| border: none; | |
| } | |
| .doc-viewer .close-btn { | |
| position: absolute; | |
| top: 1rem; | |
| right: 1rem; | |
| color: white; | |
| font-size: 1.5rem; | |
| cursor: pointer; | |
| } | |
| /* Enhanced Readability */ | |
| .readable-text { | |
| @apply text-lg leading-relaxed text-gray-100; | |
| } | |
| .glass-card { | |
| background: linear-gradient(135deg, rgba(31, 41, 55, 0.98), rgba(17, 24, 39, 0.98)); | |
| backdrop-filter: blur(16px); | |
| border: 1px solid rgba(255, 255, 255, 0.15); | |
| } | |
| /* Personal Brand Section */ | |
| .personal-intro { | |
| @apply relative overflow-hidden rounded-2xl p-8 mb-12; | |
| background: linear-gradient(135deg, rgba(37, 99, 235, 0.1), rgba(124, 58, 237, 0.1)); | |
| } | |
| .personal-intro::before { | |
| content: ''; | |
| position: absolute; | |
| inset: 0; | |
| background: url('/assets/neural-pattern.svg') center/cover; | |
| opacity: 0.1; | |
| } | |
| /* Cost Benefits Display */ | |
| .metric-card { | |
| @apply p-6 rounded-xl glass-card relative overflow-hidden; | |
| border: 1px solid rgba(59, 130, 246, 0.2); | |
| } | |
| .metric-value { | |
| @apply text-4xl font-bold bg-clip-text text-transparent; | |
| background-image: linear-gradient(135deg, #3b82f6, #8b5cf6); | |
| } | |
| .metric-label { | |
| @apply text-sm text-blue-300 uppercase tracking-wider; | |
| } | |
| /* Improve text contrast in cards */ | |
| .card p { | |
| @apply text-gray-100; | |
| } | |
| /* Enhance link visibility */ | |
| .nav-link { | |
| @apply text-gray-100 hover:text-blue-400 transition-colors; | |
| font-weight: 500; | |
| } | |
| /* Improve section spacing */ | |
| .section { | |
| @apply mb-12; | |
| } | |
| /* Better mobile responsiveness */ | |
| @media (max-width: 768px) { | |
| .nav-link { | |
| @apply text-sm; | |
| } | |
| h1 { | |
| @apply text-4xl; | |
| } | |
| .card { | |
| @apply p-4; | |
| } | |
| } | |
| /* Add loading indicator */ | |
| .loading { | |
| position: relative; | |
| } | |
| .loading::after { | |
| content: 'Cargando...'; | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| transform: translate(-50%, -50%); | |
| color: white; | |
| background: rgba(0,0,0,0.7); | |
| padding: 1rem 2rem; | |
| border-radius: 9999px; | |
| } | |
| /* Make headings more visible */ | |
| h1, h2, h3 { | |
| @apply text-white; | |
| } | |
| /* Enhance secondary text readability */ | |
| .text-gray-300 { | |
| @apply text-gray-200; | |
| } | |
| /* Better mobile spacing */ | |
| @media (max-width: 768px) { | |
| .max-w-6xl { | |
| @apply px-4; /* Reduce side padding on mobile */ | |
| } | |
| .grid.md\:grid-cols-2 { | |
| @apply grid-cols-1 gap-4; /* Stack cards on mobile */ | |
| } | |
| .flex.gap-4 { | |
| @apply flex-col gap-3; /* Stack buttons on mobile */ | |
| } | |
| .text-5xl { | |
| @apply text-3xl; /* Smaller headings on mobile */ | |
| } | |
| } | |
| /* Add loading states */ | |
| .loading { | |
| @apply relative pointer-events-none opacity-75; | |
| } | |
| .loading::after { | |
| content: ''; | |
| @apply absolute inset-0 bg-gradient-to-r from-transparent via-white/10 to-transparent; | |
| animation: shimmer 1.5s infinite; | |
| } | |
| @keyframes shimmer { | |
| 0% { transform: translateX(-100%); } | |
| 100% { transform: translateX(100%); } | |
| } | |
| /* Fix text contrast */ | |
| .card h3 { | |
| @apply text-white text-xl font-bold mb-2; | |
| } | |
| .card p { | |
| @apply text-gray-300; | |
| } | |
| /* Ensure proper spacing on mobile */ | |
| @media (max-width: 768px) { | |
| .nav-link { | |
| @apply px-2 py-1 text-sm; | |
| } | |
| .dropdown-content { | |
| @apply w-screen left-0 right-0 mx-4; | |
| } | |
| } | |
| .dropdown:hover .dropdown-content { | |
| display: block; | |
| } | |
| .dropdown-content { | |
| min-width: 240px; | |
| transform-origin: top right; | |
| animation: dropdownFade 0.2s ease; | |
| } | |
| @keyframes dropdownFade { | |
| from { | |
| opacity: 0; | |
| transform: scale(0.95); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: scale(1); | |
| } | |
| } | |
| @media (max-width: 768px) { | |
| .dropdown-content { | |
| right: 0; | |
| width: auto; | |
| min-width: 200px; | |
| } | |
| } | |
| /* Add consistent button styling */ | |
| .btn { | |
| transition: all 0.3s ease; | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 0.5rem; | |
| } | |
| /* Add consistent timeline styling */ | |
| .timeline ol { | |
| border-left: 2px solid #4B5563; | |
| padding-left: 1.5rem; | |
| } | |
| .timeline li { | |
| position: relative; | |
| margin-bottom: 1.5rem; | |
| } | |
| .timeline li:before { | |
| content: ''; | |
| position: absolute; | |
| left: -1.75rem; | |
| top: 0.25rem; | |
| width: 1rem; | |
| height: 1rem; | |
| background: #3B82F6; | |
| border-radius: 50%; | |
| } | |
| </style> | |
| <!-- Add favicon --> | |
| <link rel="icon" type="image/png" href="https://cdn-icons-png.flaticon.com/512/9373/9373979.png"> | |
| <link rel="stylesheet" href="/assets/css/main.css"> | |
| </head> | |
| <body class="bg-gradient-to-br from-gray-900 to-gray-800 text-white min-h-screen" data-language="es"> | |
| <!-- Include shared nav --> | |
| <include src="/templates/nav.html"></include> | |
| <main class="container"> | |
| <!-- Hero Section --> | |
| <div class="text-center mb-12"> | |
| <h1 class="text-5xl font-bold mb-4 bg-clip-text text-transparent bg-gradient-to-r from-blue-400 to-purple-500"> | |
| <span lang="es">Propuestas IA Hospital</span> | |
| <span lang="en">Hospital AI Proposals</span> | |
| </h1> | |
| <p class="text-xl text-gray-300 mb-8"> | |
| <span lang="es">Soluciones Integrales de IA para Sanidad</span> | |
| <span lang="en">Comprehensive AI Solutions for Healthcare</span> | |
| </p> | |
| </div> | |
| <div class="personal-intro"> | |
| <div class="relative z-10"> | |
| <h2 class="text-3xl font-bold mb-4 text-blue-400"> | |
| <span lang="es">Sobre el Autor</span> | |
| <span lang="en">About the Author</span> | |
| </h2> | |
| <p class="readable-text mb-4"> | |
| <span lang="es"> | |
| Soy un especialista en IA médica con experiencia en el desarrollo de soluciones | |
| como AutoGlaucoma y AutoMedicalAI. Mi objetivo es transformar la sanidad española | |
| mediante la implementación de IA accesible y efectiva. | |
| </span> | |
| <span lang="en"> | |
| I'm a medical AI specialist with experience developing solutions like | |
| AutoGlaucoma and AutoMedicalAI. My goal is to transform Spanish healthcare | |
| through accessible and effective AI implementation. | |
| </span> | |
| </p> | |
| <div class="flex gap-4"> | |
| <a href="https://wa.me/34679794037" target="_blank" class="btn bg-blue-500 hover:bg-blue-600 px-6 py-2 rounded-full"> | |
| <i class="fab fa-whatsapp mr-2"></i> | |
| <span lang="es">WhatsApp</span> | |
| <span lang="en">WhatsApp</span> | |
| </a> | |
| <a href="mailto:sami@eyeunit.ai" class="btn bg-blue-500 hover:bg-blue-600 px-6 py-2 rounded-full"> | |
| <i class="fas fa-envelope mr-2"></i> | |
| <span lang="es">Email</span> | |
| <span lang="en">Email</span> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Content --> | |
| <div class="grid gap-8"> | |
| <!-- Spanish Proposals Section --> | |
| <div id="proposals" class="bg-gray-800 bg-opacity-50 p-8 rounded-xl shadow-lg"> | |
| <h2 class="text-3xl font-bold mb-6 text-blue-400"> | |
| <span lang="es">Propuestas</span> | |
| <span lang="en">Proposals</span> | |
| </h2> | |
| <div class="grid md:grid-cols-2 gap-6"> | |
| <a href="proposals/12-octubre-proposal.html" | |
| class="card block p-6 bg-gray-700 rounded-lg border border-gray-600"> | |
| <div class="flex items-center mb-4"> | |
| <span class="text-blue-400 text-2xl mr-3">🏥</span> | |
| <h3 class="text-xl font-bold">Hospital 12 de Octubre</h3> | |
| </div> | |
| <p class="text-gray-300"> | |
| <span lang="es">Propuesta específica para el Hospital 12 de Octubre</span> | |
| <span lang="en">Specific proposal for Hospital 12 de Octubre</span> | |
| </p> | |
| </a> | |
| <a href="proposals/spanish/spanish-hospital-proposal.html" | |
| class="card block p-6 bg-gray-700 rounded-lg border border-gray-600"> | |
| <div class="flex items-center mb-4"> | |
| <span class="text-blue-400 text-2xl mr-3">🏥</span> | |
| <h3 class="text-xl font-bold"> | |
| <span lang="es">Propuesta Hospital Genérica</span> | |
| <span lang="en">Generic Hospital Proposal</span> | |
| </h3> | |
| </div> | |
| <p class="text-gray-300"> | |
| <span lang="es">Propuesta genérica para hospitales en España</span> | |
| <span lang="en">Generic proposal for hospitals in Spain</span> | |
| </p> | |
| </a> | |
| <a href="proposals/nhs/nhs-proposal.html" | |
| class="card block p-6 bg-gray-700 rounded-lg border border-gray-600"> | |
| <div class="flex items-center mb-4"> | |
| <span class="text-blue-400 text-2xl mr-3">🇬🇧</span> | |
| <h3 class="text-xl font-bold">NHS Proposal</h3> | |
| </div> | |
| <p class="text-gray-300"> | |
| <span lang="es">Propuesta para el NHS</span> | |
| <span lang="en">Proposal for the NHS</span> | |
| </p> | |
| </a> | |
| <a href="proposals/nhs/nhs-formal-proposal.html" | |
| class="card block p-6 bg-gray-700 rounded-lg border border-gray-600"> | |
| <div class="flex items-center mb-4"> | |
| <span class="text-blue-400 text-2xl mr-3">🇬🇧</span> | |
| <h3 class="text-xl font-bold">NHS Formal Proposal</h3> | |
| </div> | |
| <p class="text-gray-300"> | |
| <span lang="es">Propuesta formal para el NHS</span> | |
| <span lang="en">Formal proposal for the NHS</span> | |
| </p> | |
| </a> | |
| <a href="proposals/nhs/nhs-detailed-proposal.html" | |
| class="card block p-6 bg-gray-700 rounded-lg border border-gray-600"> | |
| <div class="flex items-center mb-4"> | |
| <span class="text-blue-400 text-2xl mr-3">🇬🇧</span> | |
| <h3 class="text-xl font-bold">NHS Detailed Proposal</h3> | |
| </div> | |
| <p class="text-gray-300"> | |
| <span lang="es">Propuesta detallada para el NHS</span> | |
| <span lang="en">Detailed proposal for the NHS</span> | |
| </p> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Documentation Section --> | |
| <div id="docs" class="bg-gray-800 bg-opacity-50 p-8 rounded-xl shadow-lg"> | |
| <h2 class="text-3xl font-bold mb-6 text-purple-400"> | |
| <span lang="es">Documentación</span> | |
| <span lang="en">Documentation</span> | |
| </h2> | |
| <div class="grid md:grid-cols-3 gap-6"> | |
| <div onclick="openDoc('docs/spanish-hospital-context.txt')" | |
| class="doc-card card block p-6 bg-gray-700 rounded-lg border border-gray-600"> | |
| <div class="flex items-center mb-4"> | |
| <span class="text-yellow-400 text-2xl mr-3">📚</span> | |
| <h3 class="text-xl font-bold"> | |
| <span lang="es">Contexto Hospitalario</span> | |
| <span lang="en">Hospital Context</span> | |
| </h3> | |
| </div> | |
| <p class="text-gray-300"> | |
| <span lang="es">Información completa e investigación de fondo</span> | |
| <span lang="en">Comprehensive background information and research</span> | |
| </p> | |
| <div class="mt-4 text-sm text-blue-400"> | |
| <span lang="es">Leer Más →</span> | |
| <span lang="en">Read More →</span> | |
| </div> | |
| </div> | |
| <div onclick="openDoc('docs/requirements-conversation.txt')" | |
| class="doc-card card block p-6 bg-gray-700 rounded-lg border border-gray-600"> | |
| <div class="flex items-center mb-4"> | |
| <span class="text-green-400 text-2xl mr-3">⚙️</span> | |
| <h3 class="text-xl font-bold"> | |
| <span lang="es">Requisitos</span> | |
| <span lang="en">Requirements</span> | |
| </h3> | |
| </div> | |
| <p class="text-gray-300"> | |
| <span lang="es">Especificaciones técnicas y requisitos del sistema</span> | |
| <span lang="en">Technical specifications and system requirements</span> | |
| </p> | |
| <div class="mt-4 text-sm text-blue-400"> | |
| <span lang="es">Ver Documento →</span> | |
| <span lang="en">View Document →</span> | |
| </div> | |
| </div> | |
| <div onclick="openDoc('paper.html')" | |
| class="doc-card card block p-6 bg-gray-700 rounded-lg border border-gray-600"> | |
| <div class="flex items-center mb-4"> | |
| <span class="text-blue-400 text-2xl mr-3">📝</span> | |
| <h3 class="text-xl font-bold"> | |
| <span lang="es">Paper Completo</span> | |
| <span lang="en">Full Paper</span> | |
| </h3> | |
| </div> | |
| <p class="text-gray-300"> | |
| <span lang="es">Propuesta detallada y análisis completo</span> | |
| <span lang="en">Detailed proposal and complete analysis</span> | |
| </p> | |
| <div class="mt-4 text-sm text-blue-400"> | |
| <span lang="es">Ver Paper →</span> | |
| <span lang="en">View Paper →</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Projects Section --> | |
| <div id="projects" class="bg-gray-800 bg-opacity-50 p-8 rounded-xl shadow-lg"> | |
| <h2 class="text-3xl font-bold mb-6 text-blue-400"> | |
| <span lang="es">Proyectos</span> | |
| <span lang="en">Projects</span> | |
| </h2> | |
| <div class="grid md:grid-cols-2 gap-6"> | |
| <a href="projects/automedical.html" | |
| class="card block p-6 bg-gray-700 rounded-lg border border-gray-600"> | |
| <div class="flex items-center mb-4"> | |
| <span class="text-blue-400 text-2xl mr-3">🤖</span> | |
| <h3 class="text-xl font-bold">AutoMedical AI</h3> | |
| </div> | |
| <p class="text-gray-300"> | |
| <span lang="es">Proyecto de IA para automatización médica</span> | |
| <span lang="en">AI project for medical automation</span> | |
| </p> | |
| </a> | |
| <a href="projects/analytics.html" | |
| class="card block p-6 bg-gray-700 rounded-lg border border-gray-600"> | |
| <div class="flex items-center mb-4"> | |
| <span class="text-blue-400 text-2xl mr-3">📊</span> | |
| <h3 class="text-xl font-bold">Hospital Analytics</h3> | |
| </div> | |
| <p class="text-gray-300"> | |
| <span lang="es">Proyecto de análisis de datos hospitalarios</span> | |
| <span lang="en">Hospital data analytics project</span> | |
| </p> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Papers Section --> | |
| <section class="section"> | |
| <h2 class="text-3xl font-bold mb-6 text-white flex items-center gap-3"> | |
| <i class="fas fa-file-alt"></i> | |
| <span lang="es">Publicaciones Recientes</span> | |
| <span lang="en">Recent Publications</span> | |
| </h2> | |
| <div class="grid md:grid-cols-2 gap-6"> | |
| <!-- FERMED Paper v1 --> | |
| <div class="card p-6 hover:shadow-xl"> | |
| <h3 class="text-xl font-bold mb-2"> | |
| <span lang="es">FERMED: Modelos de Visión-Lenguaje para Diagnóstico Médico</span> | |
| <span lang="en">FERMED: Vision-Language Models for Medical Diagnosis</span> | |
| </h3> | |
| <p class="text-gray-300 mb-4"> | |
| <span lang="es">Un enfoque innovador para el diagnóstico médico utilizando IA avanzada</span> | |
| <span lang="en">An innovative approach to medical diagnosis using advanced AI</span> | |
| </p> | |
| <div class="flex gap-4"> | |
| <a href="/papers/research/fermed-vlm-paper.html" class="btn btn-primary"> | |
| <i class="fas fa-eye mr-2"></i> | |
| <span lang="es">Ver Paper</span> | |
| <span lang="en">View Paper</span> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- FERMED Paper v2 --> | |
| <div class="card p-6 hover:shadow-xl"> | |
| <h3 class="text-xl font-bold mb-2"> | |
| <span lang="es">FERMED v2: Validación Clínica y Aplicaciones</span> | |
| <span lang="en">FERMED v2: Clinical Validation and Applications</span> | |
| </h3> | |
| <p class="text-gray-300 mb-4"> | |
| <span lang="es">Resultados de validación y casos de uso en entornos clínicos</span> | |
| <span lang="en">Validation results and use cases in clinical settings</span> | |
| </p> | |
| <div class="flex gap-4"> | |
| <a href="/papers/research/fermed-vlm-paper-v2.html" class="btn btn-primary"> | |
| <i class="fas fa-eye mr-2"></i> | |
| <span lang="es">Ver Paper</span> | |
| <span lang="en">View Paper</span> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| </div> | |
| </main> | |
| <!-- Document Viewer --> | |
| <div id="docViewer" class="doc-viewer"> | |
| <i class="fas fa-times close-btn" onclick="closeDoc()"></i> | |
| <iframe id="docFrame" src=""></iframe> | |
| </div> | |
| <!-- Include shared footer --> | |
| <include src="/templates/footer.html"></include> | |
| <script src="/assets/js/main.js"></script> | |
| </body> | |
| </html> | |