Hugging Face's logo

Spaces:
luigi12345
/
Hospital_AI_Proposal
Running

App Files Community
Hospital_AI_Proposal / index.html
Sami
s
0102233
raw
history blame
31.6 kB
<!DOCTYPE html>
<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>Instituto IA para Salud | 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 {
@apply transition-all duration-300;
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(-4px);
box-shadow: 0 10px 25px rgba(0,0,0,0.3);
border-color: rgba(59, 130, 246, 0.5);
}
[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 {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.9);
z-index: 1000;
padding: 2rem;
}
.doc-viewer.active {
display: block;
}
.doc-viewer iframe {
width: 100%;
height: 100%;
border: none;
border-radius: 10px;
background: white;
}
.doc-viewer .close-btn {
position: absolute;
top: 1rem;
right: 1rem;
color: white;
font-size: 2rem;
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;
}
}
</style>
<!-- Add favicon -->
<link rel="icon" type="image/png" href="https://cdn-icons-png.flaticon.com/512/9373/9373979.png">
</head>
<body class="bg-gradient-to-br from-gray-900 to-gray-800 text-white min-h-screen" data-language="es">
<nav class="bg-gray-800 bg-opacity-90 p-4 sticky top-0 z-50 shadow-lg">
<div class="max-w-6xl mx-auto flex justify-between items-center">
<a href="/" class="text-2xl font-bold text-blue-400 flex items-center gap-2 no-underline">
<img src="https://cdn-icons-png.flaticon.com/512/9373/9373979.png" alt="IA Hospital Hub" class="w-8 h-8 md:w-10 md:h-10 object-contain">
<span class="whitespace-nowrap text-lg md:text-2xl">IA Hospital Hub</span>
</a>
<div class="flex items-center gap-2 md:gap-4">
<div class="dropdown relative inline-block">
<button class="nav-link flex items-center gap-2 px-3 py-1.5 md:px-4 md:py-2 rounded-lg hover:bg-gray-700 text-sm md:text-base">
<img src="https://cdn-icons-png.flaticon.com/512/3190/3190675.png" alt="Proposals" class="w-4 h-4 md:w-5 md:h-5">
<span class="hidden md:inline" lang="es">Propuestas</span>
<span class="hidden md:inline" lang="en">Proposals</span>
<i class="fas fa-chevron-down text-xs ml-1"></i>
</button>
<div class="dropdown-content hidden absolute right-0 mt-2 bg-gray-800 rounded-lg shadow-xl p-2 min-w-[240px] z-50">
<a href="/proposals/12-octubre-proposal.html" class="block p-3 hover:bg-gray-700 rounded-lg transition-colors">
<div class="flex items-center gap-3">
<img src="https://cdn-icons-png.flaticon.com/512/4825/4825856.png" alt="Hospital" class="w-5 h-5">
<div>
<div class="font-medium text-sm">Hospital 12 de Octubre</div>
<div class="text-xs text-gray-400">Propuesta Específica</div>
</div>
</div>
</a>
</div>
</div>
<a href="https://wa.me/34679794037" target="_blank" class="btn bg-[#25D366] hover:bg-[#128C7E] px-3 py-1.5 md:px-4 md:py-2 rounded-full flex items-center gap-2 transition-colors no-underline text-sm md:text-base">
<img src="https://cdn-icons-png.flaticon.com/512/3670/3670051.png" alt="WhatsApp" class="w-4 h-4 md:w-5 md:h-5">
<span class="font-medium hidden md:inline">WHATSAPP</span>
</a>
</div>
</div>
</nav>
<div class="max-w-6xl mx-auto p-8">
<!-- 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>
<div class="mt-4 text-sm text-blue-400">
<span lang="es">Ver Detalles →</span>
<span lang="en">View Details →</span>
</div>
</a>
<a href="proposals/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-purple-400 text-2xl mr-3">📄</span>
<h3 class="text-xl font-bold">
<span lang="es">Sistema Sanitario Español</span>
<span lang="en">Spanish Healthcare System</span>
</h3>
</div>
<p class="text-gray-300">
<span lang="es">Propuesta general para el sistema sanitario español</span>
<span lang="en">General proposal for Spanish healthcare system</span>
</p>
<div class="mt-4 text-sm text-blue-400">
<span lang="es">Ver Detalles →</span>
<span lang="en">View Details →</span>
</div>
</a>
<a href="paper.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">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>
</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>
<!-- Add dedicated projects section -->
<div id="projects" class="bg-gray-800 bg-opacity-50 p-8 rounded-xl shadow-lg mt-8">
<h2 class="text-3xl font-bold mb-6 flex items-center gap-3">
<img src="https://cdn-icons-png.flaticon.com/512/3190/3190675.png" alt="Projects" class="w-8 h-8">
<span class="text-blue-400">
<span lang="es">Proyectos</span>
<span lang="en">Projects</span>
</span>
</h2>
<div class="grid md:grid-cols-3 gap-6">
<a href="projects/autoglaucoma.html" class="card block p-6 hover:scale-[1.02] transition-all duration-300">
<div class="flex items-center gap-4 mb-4">
<div class="bg-blue-500/10 p-3 rounded-xl">
<img src="https://cdn-icons-png.flaticon.com/512/4497/4497889.png" alt="AutoGlaucoma AI" class="w-12 h-12">
</div>
<div>
<h3 class="text-xl font-bold text-blue-400">AutoGlaucoma AI</h3>
<div class="text-xs text-blue-300/60 mt-1">AI-Powered Eye Analysis</div>
</div>
</div>
<p class="text-gray-300">
<span lang="es">Sistema de detección temprana de glaucoma mediante IA</span>
<span lang="en">Early glaucoma detection system using AI</span>
</p>
<div class="flex items-center gap-2 mt-4 text-blue-400">
<span class="text-sm">Learn More</span>
<img src="https://cdn-icons-png.flaticon.com/512/2990/2990159.png" alt="Arrow" class="w-4 h-4">
</div>
</a>
<a href="projects/automedical.html" class="card block p-6 hover:scale-[1.02] transition-all duration-300">
<div class="flex items-center gap-4 mb-4">
<div class="bg-purple-500/10 p-3 rounded-xl">
<img src="https://cdn-icons-png.flaticon.com/512/9512/9512757.png" alt="AutoMedical AI" class="w-12 h-12">
</div>
<div>
<h3 class="text-xl font-bold text-purple-400">AutoMedical AI</h3>
<div class="text-xs text-purple-300/60 mt-1">Medical Diagnosis Platform</div>
</div>
</div>
<p class="text-gray-300">
<span lang="es">Plataforma integral de diagnóstico médico</span>
<span lang="en">Comprehensive medical diagnostic platform</span>
</p>
<div class="flex items-center gap-2 mt-4 text-purple-400">
<span class="text-sm">Learn More</span>
<img src="https://cdn-icons-png.flaticon.com/512/2990/2990159.png" alt="Arrow" class="w-4 h-4">
</div>
</a>
<a href="projects/analytics.html" class="card block p-6 hover:scale-[1.02] transition-all duration-300">
<div class="flex items-center gap-4 mb-4">
<div class="bg-emerald-500/10 p-3 rounded-xl">
<img src="https://cdn-icons-png.flaticon.com/512/3388/3388603.png" alt="Hospital Analytics" class="w-12 h-12">
</div>
<div>
<h3 class="text-xl font-bold text-emerald-400">Hospital Analytics</h3>
<div class="text-xs text-emerald-300/60 mt-1">Advanced Data Analysis</div>
</div>
</div>
<p class="text-gray-300">
<span lang="es">Análisis avanzado de datos hospitalarios</span>
<span lang="en">Advanced hospital data analytics</span>
</p>
<div class="flex items-center gap-2 mt-4 text-emerald-400">
<span class="text-sm">Learn More</span>
<img src="https://cdn-icons-png.flaticon.com/512/2990/2990159.png" alt="Arrow" class="w-4 h-4">
</div>
</a>
</div>
</div>
</div>
</div>
<!-- Document Viewer -->
<div id="docViewer" class="doc-viewer">
<i class="fas fa-times close-btn" onclick="closeDoc()"></i>
<iframe id="docFrame" src=""></iframe>
</div>
<footer class="bg-gray-800/50 backdrop-blur-lg mt-12 py-12 border-t border-white/10">
<div class="max-w-6xl mx-auto px-8 grid grid-cols-1 md:grid-cols-4 gap-8">
<div>
<h4 class="text-lg font-bold mb-4">IA Hospital Hub</h4>
<p class="text-gray-400">
<span lang="es">Transformando la sanidad con soluciones de IA innovadoras y accesibles.</span>
<span lang="en">Transforming healthcare with innovative and accessible AI solutions.</span>
</p>
</div>
<div>
<h4 class="text-lg font-bold mb-4">
<span lang="es">Proyectos</span>
<span lang="en">Projects</span>
</h4>
<ul class="space-y-2 text-gray-400">
<li><a href="projects/autoglaucoma.html" class="hover:text-blue-400">AutoGlaucoma AI</a></li>
<li><a href="projects/automedical.html" class="hover:text-blue-400">AutoMedicalAI</a></li>
<li><a href="projects/analytics.html" class="hover:text-blue-400">Hospital Analytics</a></li>
</ul>
</div>
<div>
<h4 class="text-lg font-bold mb-4">
<span lang="es">Recursos</span>
<span lang="en">Resources</span>
</h4>
<ul class="space-y-2 text-gray-400">
<li><a href="documentation.html" class="hover:text-blue-400">
<span lang="es">Documentación</span>
<span lang="en">Documentation</span>
</a></li>
<li><a href="api.html" class="hover:text-blue-400">API</a></li>
<li><a href="papers.html" class="hover:text-blue-400">
<span lang="es">Papers</span>
<span lang="en">Papers</span>
</a></li>
</ul>
</div>
<div>
<h4 class="text-lg font-bold mb-4">
<span lang="es">Contacto</span>
<span lang="en">Contact</span>
</h4>
<ul class="space-y-2 text-gray-400">
<li>
<a href="mailto:sami@eyeunit.ai" class="hover:text-blue-400">
sami@eyeunit.ai
</a>
</li>
<li>
<a href="https://wa.me/34679794037" target="_blank" class="hover:text-blue-400">
<i class="fab fa-whatsapp mr-2"></i>
<span lang="es">WhatsApp</span>
<span lang="en">WhatsApp</span>
</a>
</li>
<li>Madrid, España</li>
</ul>
</div>
</div>
</footer>
<script>
function toggleLanguage() {
const body = document.body;
const currentLang = body.getAttribute('data-language');
const newLang = currentLang === 'es' ? 'en' : 'es';
body.setAttribute('data-language', newLang);
body.classList.toggle('lang-en');
localStorage.setItem('preferred-language', newLang);
}
// Initialize
document.addEventListener('DOMContentLoaded', () => {
const preferredLanguage = localStorage.getItem('preferred-language') || 'es';
if (preferredLanguage === 'en') {
document.body.setAttribute('data-language', 'en');
document.body.classList.add('lang-en');
}
});
// Document viewer functions
function openDoc(url) {
const docViewer = document.getElementById('docViewer');
const docFrame = document.getElementById('docFrame');
// Show loading state
docViewer.classList.add('active');
docFrame.classList.add('loading');
document.body.style.overflow = 'hidden';
// Load document
docFrame.onload = () => {
docFrame.classList.remove('loading');
};
docFrame.src = url;
}
function closeDoc() {
document.getElementById('docViewer').classList.remove('active');
document.getElementById('docFrame').src = '';
document.body.style.overflow = 'auto';
}
// Close doc viewer on escape key
document.addEventListener('keydown', (e) => {
if (e.key === 'Escape') closeDoc();
});
// Add smooth scrolling
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
// Add loading feedback
function showLoading(element) {
element.classList.add('loading');
element.setAttribute('disabled', 'true');
}
function hideLoading(element) {
element.classList.remove('loading');
element.removeAttribute('disabled');
}
</script>
</body>
</html>