| <!DOCTYPE html> |
| <html lang="es"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>La Batalla de Ayacucho: El 煤ltimo paso hacia la independencia</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> |
| .location-marker { |
| position: absolute; |
| width: 24px; |
| height: 24px; |
| background-color: #EF4444; |
| border-radius: 50%; |
| border: 3px solid white; |
| cursor: pointer; |
| transform: translate(-50%, -50%); |
| transition: all 0.2s ease; |
| z-index: 10; |
| } |
| |
| .location-marker:hover { |
| transform: translate(-50%, -50%) scale(1.2); |
| box-shadow: 0 0 10px rgba(239, 68, 68, 0.7); |
| } |
| |
| .location-marker.royalist { |
| background-color: #3B82F6; |
| } |
| |
| .location-marker.patriot { |
| background-color: #10B981; |
| } |
| |
| .info-panel { |
| position: absolute; |
| top: 20px; |
| right: 20px; |
| width: 350px; |
| background-color: rgba(255, 255, 255, 0.95); |
| border-radius: 8px; |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); |
| padding: 20px; |
| z-index: 100; |
| max-height: 80vh; |
| overflow-y: auto; |
| transition: all 0.3s ease; |
| } |
| |
| .timeline-item { |
| position: relative; |
| padding-left: 30px; |
| margin-bottom: 20px; |
| border-left: 3px solid #EF4444; |
| } |
| |
| .timeline-item:before { |
| content: ''; |
| position: absolute; |
| left: -8px; |
| top: 0; |
| width: 13px; |
| height: 13px; |
| border-radius: 50%; |
| background: #EF4444; |
| } |
| |
| .character-card { |
| transition: all 0.3s ease; |
| } |
| |
| .character-card:hover { |
| transform: translateY(-5px); |
| box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1); |
| } |
| |
| @media (max-width: 768px) { |
| .info-panel { |
| width: 90%; |
| left: 5%; |
| right: auto; |
| } |
| } |
| |
| |
| @keyframes pulse { |
| 0% { transform: scale(1); } |
| 50% { transform: scale(1.05); } |
| 100% { transform: scale(1); } |
| } |
| |
| .pulse-animation { |
| animation: pulse 2s infinite; |
| } |
| |
| .icon-badge { |
| display: inline-flex; |
| align-items: center; |
| justify-content: center; |
| width: 40px; |
| height: 40px; |
| border-radius: 50%; |
| margin-right: 10px; |
| } |
| |
| .battle-icon { |
| font-size: 24px; |
| margin-right: 8px; |
| color: #EF4444; |
| } |
| |
| #map { |
| height: 100%; |
| width: 100%; |
| position: absolute; |
| top: 0; |
| left: 0; |
| z-index: 1; |
| } |
| |
| .map-overlay { |
| position: absolute; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| z-index: 2; |
| pointer-events: none; |
| } |
| |
| .map-container { |
| position: relative; |
| height: 100%; |
| width: 100%; |
| } |
| </style> |
| </head> |
| <body class="bg-gray-100 font-sans"> |
| |
| <div id="welcome-screen" class="fixed inset-0 bg-cover bg-center z-50 flex items-center justify-center" style="background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/5/5e/Batalla_de_Ayacucho.jpg/1200px-Batalla_de_Ayacucho.jpg');"> |
| <div class="bg-black bg-opacity-70 p-8 rounded-lg max-w-2xl mx-4 text-center"> |
| <div class="flex justify-center mb-4"> |
| <div class="icon-badge bg-red-600 text-white"> |
| <i class="fas fa-landmark text-2xl"></i> |
| </div> |
| </div> |
| <h1 class="text-4xl md:text-5xl font-bold text-white mb-6">La Batalla de Ayacucho</h1> |
| <h2 class="text-2xl md:text-3xl font-semibold text-yellow-300 mb-6">El 煤ltimo paso hacia la independencia de Am茅rica del Sur</h2> |
| <div class="flex justify-center mb-6"> |
| <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/5e/Obelisco_de_la_Pampa_de_Quinua.jpg/300px-Obelisco_de_la_Pampa_de_Quinua.jpg" alt="Obelisco de Ayacucho" class="rounded-lg shadow-md"> |
| </div> |
| <p class="text-white text-lg mb-8">Descubre los hechos m谩s relevantes del 9 de diciembre de 1824, cuando en la Pampa de Quinua se sell贸 la independencia de Per煤 y se desmoron贸 el dominio espa帽ol en Am茅rica del Sur.</p> |
| <button onclick="startExperience()" class="bg-red-600 hover:bg-red-700 text-white font-bold py-3 px-6 rounded-full text-lg transition duration-300 transform hover:scale-105"> |
| Comenzar Experiencia <i class="fas fa-arrow-right ml-2"></i> |
| </button> |
| </div> |
| </div> |
|
|
| |
| <div id="main-container" class="hidden h-screen flex flex-col"> |
| |
| <header class="bg-gradient-to-r from-red-700 to-yellow-500 text-white p-4 shadow-md"> |
| <div class="container mx-auto flex justify-between items-center"> |
| <div class="flex items-center"> |
| <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/df/Flag_of_Peru_%28war%29.svg/120px-Flag_of_Peru_%28war%29.svg.png" alt="Bandera Per煤" class="h-10 mr-3"> |
| <h1 class="text-2xl font-bold">Batalla de Ayacucho - 1824</h1> |
| </div> |
| <div class="flex space-x-4"> |
| <button onclick="showSection('context')" class="hover:text-yellow-200 transition flex items-center"> |
| <i class="fas fa-landmark mr-1"></i> Contexto |
| </button> |
| <button onclick="showSection('battle')" class="hover:text-yellow-200 transition flex items-center"> |
| <i class="fas fa-chess-board mr-1"></i> Batalla |
| </button> |
| <button onclick="showSection('characters')" class="hover:text-yellow-200 transition flex items-center"> |
| <i class="fas fa-users mr-1"></i> Personajes |
| </button> |
| <button onclick="showSection('consequences')" class="hover:text-yellow-200 transition flex items-center"> |
| <i class="fas fa-flag mr-1"></i> Consecuencias |
| </button> |
| </div> |
| </div> |
| </header> |
|
|
| |
| <div class="flex-1 relative overflow-hidden"> |
| |
| <div class="map-container"> |
| <div id="map"></div> |
| <div class="map-overlay"> |
| |
| <div class="location-marker royalist" style="top: 35%; left: 30%;" onclick="showLocationInfo('cusco')"> |
| <i class="fas fa-crown absolute text-white text-xs" style="top: 50%; left: 50%; transform: translate(-50%, -50%);"></i> |
| </div> |
| <div class="location-marker patriot" style="top: 45%; left: 35%;" onclick="showLocationInfo('huamanga')"> |
| <i class="fas fa-flag absolute text-white text-xs" style="top: 50%; left: 50%; transform: translate(-50%, -50%);"></i> |
| </div> |
| <div class="location-marker pulse-animation" style="top: 50%; left: 38%;" onclick="showLocationInfo('quinua')"> |
| <i class="fas fa-crosshairs absolute text-white text-xs" style="top: 50%; left: 50%; transform: translate(-50%, -50%);"></i> |
| </div> |
| |
| |
| <div id="phase1-marker" class="hidden location-marker" style="top: 48%; left: 37%;" onclick="showBattlePhase(1)"> |
| <i class="fas fa-1 absolute text-white text-xs" style="top: 50%; left: 50%; transform: translate(-50%, -50%);"></i> |
| </div> |
| <div id="phase2-marker" class="hidden location-marker" style="top: 49%; left: 38%;" onclick="showBattlePhase(2)"> |
| <i class="fas fa-2 absolute text-white text-xs" style="top: 50%; left: 50%; transform: translate(-50%, -50%);"></i> |
| </div> |
| <div id="phase3-marker" class="hidden location-marker" style="top: 51%; left: 39%;" onclick="showBattlePhase(3)"> |
| <i class="fas fa-3 absolute text-white text-xs" style="top: 50%; left: 50%; transform: translate(-50%, -50%);"></i> |
| </div> |
| <div id="phase4-marker" class="hidden location-marker" style="top: 52%; left: 40%;" onclick="showBattlePhase(4)"> |
| <i class="fas fa-4 absolute text-white text-xs" style="top: 50%; left: 50%; transform: translate(-50%, -50%);"></i> |
| </div> |
| <div id="phase5-marker" class="hidden location-marker" style="top: 53%; left: 41%;" onclick="showBattlePhase(5)"> |
| <i class="fas fa-5 absolute text-white text-xs" style="top: 50%; left: 50%; transform: translate(-50%, -50%);"></i> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div id="info-panel" class="info-panel hidden"> |
| <button onclick="hideInfoPanel()" class="absolute top-2 right-2 text-gray-500 hover:text-gray-700"> |
| <i class="fas fa-times"></i> |
| </button> |
| <div id="panel-content"></div> |
| </div> |
| </div> |
|
|
| |
| <div id="timeline-container" class="hidden bg-white p-4 border-t border-gray-200 overflow-x-auto"> |
| <div class="flex space-x-4 min-w-max"> |
| <div onclick="showBattlePhase(1)" class="timeline-phase cursor-pointer px-4 py-2 bg-gray-100 rounded-lg hover:bg-red-100 transition flex items-center"> |
| <div class="icon-badge bg-red-500 text-white mr-2"> |
| <i class="fas fa-clock"></i> |
| </div> |
| <div> |
| <div class="font-semibold">Fase 1</div> |
| <div class="text-sm">Posicionamiento</div> |
| </div> |
| </div> |
| <div onclick="showBattlePhase(2)" class="timeline-phase cursor-pointer px-4 py-2 bg-gray-100 rounded-lg hover:bg-red-100 transition flex items-center"> |
| <div class="icon-badge bg-red-500 text-white mr-2"> |
| <i class="fas fa-swords"></i> |
| </div> |
| <div> |
| <div class="font-semibold">Fase 2</div> |
| <div class="text-sm">Ataque patriota</div> |
| </div> |
| </div> |
| <div onclick="showBattlePhase(3)" class="timeline-phase cursor-pointer px-4 py-2 bg-gray-100 rounded-lg hover:bg-red-100 transition flex items-center"> |
| <div class="icon-badge bg-red-500 text-white mr-2"> |
| <i class="fas fa-shield-alt"></i> |
| </div> |
| <div> |
| <div class="font-semibold">Fase 3</div> |
| <div class="text-sm">Reacci贸n realista</div> |
| </div> |
| </div> |
| <div onclick="showBattlePhase(4)" class="timeline-phase cursor-pointer px-4 py-2 bg-gray-100 rounded-lg hover:bg-red-100 transition flex items-center"> |
| <div class="icon-badge bg-red-500 text-white mr-2"> |
| <i class="fas fa-handcuffs"></i> |
| </div> |
| <div> |
| <div class="font-semibold">Fase 4</div> |
| <div class="text-sm">Captura del virrey</div> |
| </div> |
| </div> |
| <div onclick="showBattlePhase(5)" class="timeline-phase cursor-pointer px-4 py-2 bg-gray-100 rounded-lg hover:bg-red-100 transition flex items-center"> |
| <div class="icon-badge bg-red-500 text-white mr-2"> |
| <i class="fas fa-file-signature"></i> |
| </div> |
| <div> |
| <div class="font-semibold">Fase 5</div> |
| <div class="text-sm">Rendici贸n</div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div id="characters-modal" class="hidden fixed inset-0 bg-black bg-opacity-75 z-50 flex items-center justify-center p-4"> |
| <div class="bg-white rounded-lg max-w-4xl w-full max-h-[90vh] overflow-y-auto p-6"> |
| <div class="flex justify-between items-center mb-6"> |
| <h2 class="text-2xl font-bold text-red-700 flex items-center"> |
| <i class="fas fa-users mr-3"></i> Personajes Clave |
| </h2> |
| <button onclick="hideCharactersModal()" class="text-gray-500 hover:text-gray-700"> |
| <i class="fas fa-times text-2xl"></i> |
| </button> |
| </div> |
| |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> |
| |
| <div class="character-card bg-white border border-gray-200 rounded-lg overflow-hidden shadow-sm"> |
| <div class="relative"> |
| <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/5a/Antonio_Jos%C3%A9_de_Sucre.jpg/800px-Antonio_Jos%C3%A9_de_Sucre.jpg" alt="Antonio Jos茅 de Sucre" class="w-full h-48 object-cover"> |
| <div class="absolute bottom-0 left-0 bg-green-600 text-white px-2 py-1 text-sm font-bold"> |
| <i class="fas fa-flag mr-1"></i> Comandante Patriota |
| </div> |
| </div> |
| <div class="p-4"> |
| <h3 class="font-bold text-xl text-green-700 mb-2">Antonio Jos茅 de Sucre</h3> |
| <p class="text-gray-700 mb-2">Conocido como el "Gran Mariscal de Ayacucho", dirigi贸 las tropas independentistas en la batalla decisiva.</p> |
| <div class="flex items-center text-sm text-gray-600"> |
| <i class="fas fa-birthday-cake mr-2"></i> Nacimiento: 3/2/1795 |
| </div> |
| <div class="flex items-center text-sm text-gray-600"> |
| <i class="fas fa-crosshairs mr-2"></i> Batallas: Ayacucho, Pichincha, Tarqui |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="character-card bg-white border border-gray-200 rounded-lg overflow-hidden shadow-sm"> |
| <div class="relative"> |
| <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/06/Sim%C3%B3n_Bol%C3%ADvar_%281825%29.jpg/800px-Sim%C3%B3n_Bol%C3%ADvar_%281825%29.jpg" alt="Sim贸n Bol铆var" class="w-full h-48 object-cover"> |
| <div class="absolute bottom-0 left-0 bg-green-600 text-white px-2 py-1 text-sm font-bold"> |
| <i class="fas fa-star mr-1"></i> El Libertador |
| </div> |
| </div> |
| <div class="p-4"> |
| <h3 class="font-bold text-xl text-green-700 mb-2">Sim贸n Bol铆var</h3> |
| <p class="text-gray-700 mb-2">L铆der de la independencia sudamericana, estratega principal de la campa帽a.</p> |
| <div class="flex items-center text-sm text-gray-600"> |
| <i class="fas fa-birthday-cake mr-2"></i> Nacimiento: 24/7/1783 |
| </div> |
| <div class="flex items-center text-sm text-gray-600"> |
| <i class="fas fa-crosshairs mr-2"></i> Batallas: Boyac谩, Carabobo, Jun铆n |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="character-card bg-white border border-gray-200 rounded-lg overflow-hidden shadow-sm"> |
| <div class="relative"> |
| <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/8a/Jose_de_la_Serna.jpg/800px-Jose_de_la_Serna.jpg" alt="Virrey Jos茅 de la Serna" class="w-full h-48 object-cover"> |
| <div class="absolute bottom-0 left-0 bg-blue-600 text-white px-2 py-1 text-sm font-bold"> |
| <i class="fas fa-crown mr-1"></i> Virrey del Per煤 |
| </div> |
| </div> |
| <div class="p-4"> |
| <h3 class="font-bold text-xl text-blue-700 mb-2">Virrey Jos茅 de la Serna</h3> |
| <p class="text-gray-700 mb-2">脷ltimo virrey espa帽ol en el Per煤, comandante de las fuerzas realistas.</p> |
| <div class="flex items-center text-sm text-gray-600"> |
| <i class="fas fa-birthday-cake mr-2"></i> Nacimiento: 1770 |
| </div> |
| <div class="flex items-center text-sm text-gray-600"> |
| <i class="fas fa-skull-crossbones mr-2"></i> Capturado en Ayacucho |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="character-card bg-white border border-gray-200 rounded-lg overflow-hidden shadow-sm"> |
| <div class="relative"> |
| <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/1a/Jose_de_Canterac.jpg/800px-Jose_de_Canterac.jpg" alt="General Canterac" class="w-full h-48 object-cover"> |
| <div class="absolute bottom-0 left-0 bg-blue-600 text-white px-2 py-1 text-sm font-bold"> |
| <i class="fas fa-chess-queen mr-1"></i> General Realista |
| </div> |
| </div> |
| <div class="p-4"> |
| <h3 class="font-bold text-xl text-blue-700 mb-2">General Canterac</h3> |
| <p class="text-gray-700 mb-2">Firm贸 la rendici贸n espa帽ola tras la captura del virrey.</p> |
| <div class="flex items-center text-sm text-gray-600"> |
| <i class="fas fa-birthday-cake mr-2"></i> Nacimiento: 1787 |
| </div> |
| <div class="flex items-center text-sm text-gray-600"> |
| <i class="fas fa-file-signature mr-2"></i> Firm贸 la capitulaci贸n |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="mt-6 bg-gray-50 p-4 rounded-lg border-l-4 border-red-500"> |
| <h3 class="font-bold text-lg mb-2 flex items-center"> |
| <i class="fas fa-users-crown mr-2 text-red-600"></i> L铆deres en la Batalla |
| </h3> |
| <p class="text-gray-700">La Batalla de Ayacucho enfrent贸 a los mejores estrategas de ambos bandos. Mientras Sucre contaba con tropas motivadas y conocimiento del terreno, los realistas ten铆an mayor n煤mero pero menor moral tras sucesivas derrotas.</p> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div id="consequences-modal" class="hidden fixed inset-0 bg-black bg-opacity-75 z-50 flex items-center justify-center p-4"> |
| <div class="bg-white rounded-lg max-w-4xl w-full max-h-[90vh] overflow-y-auto p-6"> |
| <div class="flex justify-between items-center mb-6"> |
| <h2 class="text-2xl font-bold text-red-700 flex items-center"> |
| <i class="fas fa-flag mr-3"></i> Consecuencias de la Batalla |
| </h2> |
| <button onclick="hideConsequencesModal()" class="text-gray-500 hover:text-gray-700"> |
| <i class="fas fa-times text-2xl"></i> |
| </button> |
| </div> |
| |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> |
| <div class="bg-yellow-50 p-4 rounded-lg border-l-4 border-yellow-500"> |
| <div class="flex items-center mb-2"> |
| <div class="icon-badge bg-yellow-500 text-white mr-3"> |
| <i class="fas fa-crown"></i> |
| </div> |
| <h3 class="font-bold text-lg text-yellow-700">Fin del dominio espa帽ol</h3> |
| </div> |
| <p class="text-gray-700 mb-4">La batalla marc贸 el colapso definitivo del poder espa帽ol en Sudam茅rica, despu茅s de casi 300 a帽os de dominio colonial.</p> |
| <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4c/Retirada_realista_tras_Ayacucho.jpg/800px-Retirada_realista_tras_Ayacucho.jpg" alt="Retirada realista" class="w-full rounded-lg mt-3"> |
| </div> |
| |
| <div class="bg-green-50 p-4 rounded-lg border-l-4 border-green-500"> |
| <div class="flex items-center mb-2"> |
| <div class="icon-badge bg-green-500 text-white mr-3"> |
| <i class="fas fa-flag"></i> |
| </div> |
| <h3 class="font-bold text-lg text-green-700">Independencia del Per煤</h3> |
| </div> |
| <p class="text-gray-700 mb-4">El Acta de Capitulaci贸n reconoci贸 formalmente la independencia del Per煤, 煤ltimo basti贸n realista en Sudam茅rica.</p> |
| <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/3e/Acta_de_Capitulaci%C3%B3n_de_Ayacucho.jpg/800px-Acta_de_Capitulaci%C3%B3n_de_Ayacucho.jpg" alt="Acta de Capitulaci贸n" class="w-full rounded-lg mt-3"> |
| </div> |
| |
| <div class="bg-blue-50 p-4 rounded-lg border-l-4 border-blue-500"> |
| <div class="flex items-center mb-2"> |
| <div class="icon-badge bg-blue-500 text-white mr-3"> |
| <i class="fas fa-people-arrows"></i> |
| </div> |
| <h3 class="font-bold text-lg text-blue-700">Retiro del ej茅rcito realista</h3> |
| </div> |
| <p class="text-gray-700 mb-4">Las tropas espa帽olas se retiraron pac铆ficamente seg煤n los t茅rminos del acuerdo, poniendo fin a la guerra.</p> |
| <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/8e/Retorno_de_tropas_espa%C3%B1olas.jpg/800px-Retorno_de_tropas_espa%C3%B1olas.jpg" alt="Retiro tropas" class="w-full rounded-lg mt-3"> |
| </div> |
| |
| <div class="bg-red-50 p-4 rounded-lg border-l-4 border-red-500"> |
| <div class="flex items-center mb-2"> |
| <div class="icon-badge bg-red-500 text-white mr-3"> |
| <i class="fas fa-globe-americas"></i> |
| </div> |
| <h3 class="font-bold text-lg text-red-700">Inspiraci贸n continental</h3> |
| </div> |
| <p class="text-gray-700 mb-4">La victoria inspir贸 otros movimientos emancipadores y consolid贸 la independencia de las naciones sudamericanas.</p> |
| <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/5e/Celebraci%C3%B3n_independencia.jpg/800px-Celebraci%C3%B3n_independencia.jpg" alt="Celebraci贸n independencia" class="w-full rounded-lg mt-3"> |
| </div> |
| </div> |
| |
| <div class="mt-8 bg-gray-50 p-4 rounded-lg"> |
| <h3 class="font-bold text-lg mb-3 flex items-center"> |
| <i class="fas fa-landmark mr-2 text-red-600"></i> Legado hist贸rico |
| </h3> |
| <p class="text-gray-700 mb-4">La Batalla de Ayacucho es considerada uno de los enfrentamientos m谩s importantes de las guerras de independencia hispanoamericanas. Con apenas una hora de combate intenso, decidi贸 el futuro de un continente.</p> |
| |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> |
| <div> |
| <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/5e/Obelisco_de_la_Pampa_de_Quinua.jpg/800px-Obelisco_de_la_Pampa_de_Quinua.jpg" alt="Obelisco en la Pampa de Quinua" class="w-full rounded-lg mb-3"> |
| <p class="text-sm text-gray-600 text-center">Obelisco conmemorativo en la Pampa de Quinua</p> |
| </div> |
| <div> |
| <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/9b/Monumento_a_Sucre_en_Ayacucho.jpg/800px-Monumento_a_Sucre_en_Ayacucho.jpg" alt="Monumento a Sucre" class="w-full rounded-lg mb-3"> |
| <p class="text-sm text-gray-600 text-center">Monumento a Sucre en Ayacucho</p> |
| </div> |
| </div> |
| |
| <div class="mt-4 bg-red-50 p-3 rounded-lg flex items-start"> |
| <i class="fas fa-quote-left text-red-500 text-2xl mr-3"></i> |
| <div> |
| <p class="italic text-gray-700">"La Batalla de Ayacucho es la cumbre de la gloria americana, y la obra del general Sucre. La disposici贸n de ella ha sido perfecta, y su ejecuci贸n divina."</p> |
| <p class="text-right font-semibold text-red-600 mt-2">- Sim贸n Bol铆var</p> |
| </div> |
| </div> |
| </div> |
| |
| <div class="mt-6 border-t pt-4"> |
| <h4 class="font-bold mb-2 flex items-center"> |
| <i class="fas fa-book mr-2 text-gray-600"></i> Fuentes y referencias |
| </h4> |
| <ul class="text-sm text-gray-600 space-y-1"> |
| <li><i class="fas fa-book-open mr-2"></i> Historia de la Rep煤blica del Per煤 - Jorge Basadre</li> |
| <li><i class="fas fa-archive mr-2"></i> Archivo General de Indias - Documentos sobre Ayacucho</li> |
| <li><i class="fas fa-landmark mr-2"></i> Ministerio de Cultura del Per煤</li> |
| <li><i class="fas fa-image mr-2"></i> Wikimedia Commons - Recursos visuales</li> |
| </ul> |
| </div> |
| </div> |
| </div> |
|
|
| <script> |
| // Initialize Google Maps |
| function initMap() { |
| // Coordinates for Ayacucho battle site |
| const ayacucho = { lat: -13.0425, lng: -74.2044 }; |
| |
| // Create the map |
| const map = new google.maps.Map(document.getElementById("map"), { |
| zoom: 7, |
| center: ayacucho, |
| mapTypeId: "terrain", |
| styles: [ |
| { |
| featureType: "poi", |
| stylers: [{ visibility: "off" }] |
| }, |
| { |
| featureType: "transit", |
| stylers: [{ visibility: "off" }] |
| } |
| ] |
| }); |
| |
| // Add markers for important locations |
| const markers = [ |
| { |
| position: { lat: -13.0425, lng: -74.2044 }, |
| title: "Pampa de Quinua", |
| icon: { |
| url: "https://maps.google.com/mapfiles/ms/icons/red-dot.png" |
| }, |
| content: ` |
| <div class="font-bold text-lg">Pampa de Quinua</div> |
| <div class="text-sm">Sitio de la Batalla de Ayacucho (9 de diciembre de 1824)</div> |
| <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/5e/Obelisco_de_la_Pampa_de_Quinua.jpg/400px-Obelisco_de_la_Pampa_de_Quinua.jpg" class="w-full mt-2 rounded"> |
| ` |
| }, |
| { |
| position: { lat: -13.1631, lng: -74.2236 }, |
| title: "Huamanga (Ayacucho)", |
| icon: { |
| url: "https://maps.google.com/mapfiles/ms/icons/green-dot.png" |
| }, |
| content: ` |
| <div class="font-bold text-lg">Huamanga (Ayacucho)</div> |
| <div class="text-sm">Cuartel general patriota antes de la batalla</div> |
| <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/0b/Ayacucho_-_Plaza_de_Armas.jpg/400px-Ayacucho_-_Plaza_de_Armas.jpg" class="w-full mt-2 rounded"> |
| ` |
| }, |
| { |
| position: { lat: -13.5183, lng: -71.9781 }, |
| title: "Cusco", |
| icon: { |
| url: "https://maps.google.com/mapfiles/ms/icons/blue-dot.png" |
| }, |
| content: ` |
| <div class="font-bold text-lg">Cusco</div> |
| <div class="text-sm">Base realista antes de la batalla</div> |
| <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/04/Cusco_Collage.jpg/400px-Cusco_Collage.jpg" class="w-full mt-2 rounded"> |
| ` |
| } |
| ]; |
| |
| // Create info window |
| const infoWindow = new google.maps.InfoWindow(); |
| |
| // Add markers to map |
| markers.forEach(markerInfo => { |
| const marker = new google.maps.Marker({ |
| position: markerInfo.position, |
| map: map, |
| title: markerInfo.title, |
| icon: markerInfo.icon |
| }); |
| |
| // Add click event to show info |
| marker.addListener("click", () => { |
| infoWindow.setContent(markerInfo.content); |
| infoWindow.open(map, marker); |
| }); |
| }); |
| |
| // Add battle area polygon |
| const battleAreaCoords = [ |
| { lat: -13.0425, lng: -74.2044 }, |
| { lat: -13.0435, lng: -74.2034 }, |
| { lat: -13.0445, lng: -74.2054 }, |
| { lat: -13.0415, lng: -74.2064 } |
| ]; |
| |
| const battleArea = new google.maps.Polygon({ |
| paths: battleAreaCoords, |
| strokeColor: "#FF0000", |
| strokeOpacity: 0.8, |
| strokeWeight: 2, |
| fillColor: "#FF0000", |
| fillOpacity: 0.35, |
| map: map |
| }); |
| } |
| |
| // Start the experience |
| function startExperience() { |
| document.getElementById('welcome-screen').classList.add('hidden'); |
| document.getElementById('main-container').classList.remove('hidden'); |
| showSection('context'); |
| } |
| |
| // Show different sections |
| function showSection(section) { |
| // Hide all battle phase markers initially |
| document.querySelectorAll('[id*="phase"]').forEach(el => { |
| el.classList.add('hidden'); |
| }); |
| |
| // Hide timeline initially |
| document.getElementById('timeline-container').classList.add('hidden'); |
| |
| switch(section) { |
| case 'context': |
| // Show context markers |
| document.querySelectorAll('.location-marker:not([id*="phase"])').forEach(el => { |
| el.classList.remove('hidden'); |
| }); |
| break; |
| |
| case 'battle': |
| // Show battle phase markers |
| document.getElementById('phase1-marker').classList.remove('hidden'); |
| document.getElementById('phase2-marker').classList.remove('hidden'); |
| document.getElementById('phase3-marker').classList.remove('hidden'); |
| document.getElementById('phase4-marker').classList.remove('hidden'); |
| document.getElementById('phase5-marker').classList.remove('hidden'); |
| |
| // Show timeline |
| document.getElementById('timeline-container').classList.remove('hidden'); |
| break; |
| |
| case 'characters': |
| showCharactersModal(); |
| break; |
| |
| case 'consequences': |
| showConsequencesModal(); |
| break; |
| } |
| } |
| |
| // Show location info |
| function showLocationInfo(location) { |
| const panel = document.getElementById('info-panel'); |
| const content = document.getElementById('panel-content'); |
| |
| panel.classList.remove('hidden'); |
| |
| switch(location) { |
| case 'cusco': |
| content.innerHTML = ` |
| <div class="flex items-center mb-3"> |
| <div class="icon-badge bg-blue-500 text-white mr-3"> |
| <i class="fas fa-chess-queen"></i> |
| </div> |
| <h2 class="text-xl font-bold text-blue-700">Cusco - Base Realista</h2> |
| </div> |
| <p class="text-gray-700 mb-4">El virrey Jos茅 de la Serna organiz贸 su ej茅rcito en Cusco, 煤ltimo basti贸n del poder espa帽ol en el Per煤. Desde aqu铆 partieron las tropas realistas hacia la Pampa de Quinua para enfrentar a los independentistas.</p> |
| <div class="grid grid-cols-2 gap-2 mb-3"> |
| <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/04/Cusco_Collage.jpg/400px-Cusco_Collage.jpg" alt="Cusco" class="w-full rounded-lg"> |
| <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/9b/Ej%C3%A9rcito_realista_peruano.jpg/400px-Ej%C3%A9rcito_realista_peruano.jpg" alt="Ej茅rcito realista" class="w-full rounded-lg"> |
| </div> |
| <p class="text-sm text-gray-600 text-center">Cusco, antigua capital del Imperio Inca y centro administrativo espa帽ol</p> |
| <div class="mt-4 bg-blue-50 p-3 rounded-lg flex items-start"> |
| <i class="fas fa-quote-left text-blue-500 text-2xl mr-3"></i> |
| <div> |
| <p class="italic text-gray-700">"Desde Cusco organizamos la defensa del Per煤, 煤ltimo reducto del Rey en Am茅rica."</p> |
| <p class="text-right font-semibold text-blue-600 mt-2">- Virrey De la Serna</p> |
| </div> |
| </div> |
| `; |
| break; |
| |
| case 'huamanga': |
| content.innerHTML = ` |
| <div class="flex items-center mb-3"> |
| <div class="icon-badge bg-green-500 text-white mr-3"> |
| <i class="fas fa-chess-knight"></i> |
| </div> |
| <h2 class="text-xl font-bold text-green-700">Huamanga - Base Patriota</h2> |
| </div> |
| <p class="text-gray-700 mb-4">Antonio Jos茅 de Sucre estableci贸 su cuartel general en Huamanga (actual Ayacucho) tras la victoria en Jun铆n. Desde aqu铆 planific贸 la estrategia decisiva que llevar铆a a la victoria independentista.</p> |
| <div class="grid grid-cols-2 gap-2 mb-3"> |
| <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/0b/Ayacucho_-_Plaza_de_Armas.jpg/400px-Ayacucho_-_Plaza_de_Armas.jpg" alt="Huamanga" class="w-full rounded-lg"> |
| <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/5e/Cuartel_general_patriota.jpg/400px-Cuartel_general_patriota.jpg" alt="Cuartel patriota" class="w-full rounded-lg"> |
| </div> |
| <p class="text-sm text-gray-600 text-center">Plaza de Armas de Huamanga, actual Ayacucho</p> |
| <div class="mt-4 bg-green-50 p-3 rounded-lg flex items-start"> |
| <i class="fas fa-quote-left text-green-500 text-2xl mr-3"></i> |
| <div> |
| <p class="italic text-gray-700">"En Huamanga prepar茅 a mis tropas para la batalla definitiva. Sab铆amos que de ella depend铆a la libertad de Am茅rica."</p> |
| <p class="text-right font-semibold text-green-600 mt-2">- Antonio Jos茅 de Sucre</p> |
| </div> |
| </div> |
| `; |
| break; |
| |
| case 'quinua': |
| content.innerHTML = ` |
| <div class="flex items-center mb-3"> |
| <div class="icon-badge bg-red-500 text-white mr-3"> |
| <i class="fas fa-map-marked-alt"></i> |
| </div> |
| <h2 class="text-xl font-bold text-red-700">Pampa de Quinua</h2> |
| </div> |
| <p class="text-gray-700 mb-2">Llanura ubicada a 3,500 metros sobre el nivel del mar, cerca de la actual ciudad de Ayacucho. Fue el escenario del enfrentamiento decisivo el 9 de diciembre de 1824.</p> |
| <p class="text-gray-700 mb-4">Hoy en d铆a, el sitio alberga un imponente obelisco conmemorativo que recuerda esta batalla crucial para la independencia sudamericana.</p> |
| <div class="relative pb-[56.25%] mb-3"> |
| <iframe class="absolute top-0 left-0 w-full h-full rounded-lg" src="https://www.youtube.com/embed/3X9fq4Q5Q5Y?controls=0" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> |
| </div> |
| <p class="text-sm text-gray-600 text-center">Recreaci贸n animada de la Batalla de Ayacucho</p> |
| <div class="grid grid-cols-2 gap-2 mt-4"> |
| <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/5e/Obelisco_de_la_Pampa_de_Quinua.jpg/400px-Obelisco_de_la_Pampa_de_Quinua.jpg" alt="Obelisco" class="w-full rounded-lg"> |
| <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/5e/Panor%C3%A1mica_Pampa_Quinua.jpg/400px-Panor%C3%A1mica_Pampa_Quinua.jpg" alt="Panor谩mica" class="w-full rounded-lg"> |
| </div> |
| `; |
| break; |
| } |
| } |
| |
| // Show battle phase info |
| function showBattlePhase(phase) { |
| const panel = document.getElementById('info-panel'); |
| const content = document.getElementById('panel-content'); |
| |
| panel.classList.remove('hidden'); |
| |
| // Highlight active phase in timeline |
| document.querySelectorAll('.timeline-phase').forEach(el => { |
| el.classList.remove('bg-red-200'); |
| }); |
| document.querySelectorAll('.timeline-phase')[phase-1].classList.add('bg-red-200'); |
| |
| switch(phase) { |
| case 1: |
| content.innerHTML = ` |
| <div class="flex items-center mb-3"> |
| <div class="icon-badge bg-red-500 text-white mr-3"> |
| <i class="fas fa-clock"></i> |
| </div> |
| <h2 class="text-xl font-bold text-red-700">Fase 1: Posicionamiento</h2> |
| </div> |
| <p class="text-gray-700 mb-4">En la madrugada del 9 de diciembre de 1824, ambos ej茅rcitos tomaron posici贸n en la Pampa de Quinua. Los realistas ocuparon las alturas de Condorcunca, mientras los patriotas se desplegaron en el llano.</p> |
| <div class="flex justify-between text-sm text-gray-600 mb-3"> |
| <span class="bg-blue-100 px-2 py-1 rounded flex items-center"> |
| <i class="fas fa-crown mr-1"></i> Realistas: 9,300 hombres |
| </span> |
| <span class="bg-green-100 px-2 py-1 rounded flex items-center"> |
| <i class="fas fa-flag mr-1"></i> Patriotas: 5,700 hombres |
| </span> |
| </div> |
| <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/5e/Posiciones_iniciales_Ayacucho.jpg/800px-Posiciones_iniciales_Ayacucho.jpg" alt="Posicionamiento" class="w-full rounded-lg mb-3"> |
| <p class="text-sm text-gray-600 text-center">Mapa de las posiciones iniciales antes de la batalla</p> |
| <div class="mt-4 bg-gray-50 p-3 rounded-lg"> |
| <div class="flex items-center mb-1"> |
| <i class="fas fa-info-circle text-red-500 mr-2"></i> |
| <span class="font-semibold">Dato clave:</span> |
| </div> |
| <p class="text-gray-700">A pesar de la inferioridad num茅rica, las tropas patriotas ten铆an mejor moral y entrenamiento tras las victorias previas.</p> |
| </div> |
| `; |
| break; |
| |
| case 2: |
| content.innerHTML = ` |
| <div class="flex items-center mb-3"> |
| <div class="icon-badge bg-red-500 text-white mr-3"> |
| <i class="fas fa-swords"></i> |
| </div> |
| <h2 class="text-xl font-bold text-red-700">Fase 2: Ataque patriota</h2> |
| </div> |
| <p class="text-gray-700 mb-4">A las 10:00 am, Sucre orden贸 el ataque desde el flanco derecho con la divisi贸n de C贸rdoba. La caballer铆a patriota carg贸 contra las posiciones realistas, mientras la infanter铆a avanzaba en formaci贸n.</p> |
| <p class="text-gray-700 mb-4">La estrategia de Sucre consisti贸 en envolver al enemigo y atacar sus puntos d茅biles, aprovechando la mejor movilidad de sus tropas.</p> |
| <div class="grid grid-cols-2 gap-2 mb-3"> |
| <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/3e/Ataca_la_caballer%C3%ADa_patriota_en_la_batalla_de_Ayacucho.jpg/400px-Ataca_la_caballer%C3%ADa_patriota_en_la_batalla_de_Ayacucho.jpg" alt="Ataque caballer铆a" class="w-full rounded-lg"> |
| <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/5e/Avance_infanter%C3%ADa_patriota.jpg/400px-Avance_infanter%C3%ADa_patriota.jpg" alt="Avance infanter铆a" class="w-full rounded-lg"> |
| </div> |
| <p class="text-sm text-gray-600 text-center">Izquierda: Ataque de caballer铆a. Derecha: Avance de infanter铆a patriota</p> |
| <div class="mt-4 bg-red-50 p-3 rounded-lg"> |
| <div class="flex items-center"> |
| <i class="fas fa-quote-left text-red-500 mr-2"></i> |
| <p class="italic text-gray-700">"隆Soldados! De los esfuerzos de hoy depende la suerte de Am茅rica del Sur."</p> |
| </div> |
| <p class="text-right font-semibold text-red-600 mt-1">- Antonio Jos茅 de Sucre</p> |
| </div> |
| `; |
| break; |
| |
| case 3: |
| content.innerHTML = ` |
| <div class="flex items-center mb-3"> |
| <div class="icon-badge bg-red-500 text-white mr-3"> |
| <i class="fas fa-shield-alt"></i> |
| </div> |
| <h2 class="text-xl font-bold text-red-700">Fase 3: Reacci贸n realista</h2> |
| </div> |
| <p class="text-gray-700 mb-4">Las tropas espa帽olas resistieron inicialmente el ataque patriota. El virrey De la Serna dirigi贸 personalmente la defensa, pero las fuerzas realistas comenzaron a verse rodeadas por el movimiento envolvente de los independentistas.</p> |
| <p class="text-gray-700 mb-4">A pesar de su superioridad num茅rica, los realistas no pudieron contener el 铆mpetu de las tropas de Sucre, mejor preparadas y motivadas.</p> |
| <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/9b/Defensa_realista_en_Ayacucho.jpg/800px-Defensa_realista_en_Ayacucho.jpg" alt="Defensa realista" class="w-full rounded-lg mb-3"> |
| <p class="text-sm text-gray-600 text-center">Defensa de las posiciones realistas</p> |
| <div class="mt-4 bg-blue-50 p-3 rounded-lg"> |
| <div class="flex items-center"> |
| <i class="fas fa-quote-left text-blue-500 mr-2"></i> |
| <p class="italic text-gray-700">"Nuestras l铆neas comenzaban a ceder ante el empuje de los insurgentes. La situaci贸n era desesperada."</p> |
| </div> |
| <p class="text-right font-semibold text-blue-600 mt-1">- General Canterac</p> |
| </div> |
| `; |
| break; |
| |
| case 4: |
| content.innerHTML = ` |
| <div class="flex items-center mb-3"> |
| <div class="icon-badge bg-red-500 text-white mr-3"> |
| <i class="fas fa-handcuffs"></i> |
| </div> |
| <h2 class="text-xl font-bold text-red-700">Fase 4: Captura del virrey</h2> |
| </div> |
| <p class="text-gray-700 mb-4">Hacia el mediod铆a, el virrey Jos茅 de la Serna cay贸 gravemente herido y fue capturado por las tropas patriotas. Esto desmoraliz贸 completamente al ej茅rcito realista, que comenz贸 a desorganizarse.</p> |
| <p class="text-gray-700 mb-4">El mando realista pas贸 al general Canterac, quien reconoci贸 la imposibilidad de continuar la lucha ante el colapso de sus fuerzas.</p> |
| <div class="grid grid-cols-2 gap-2 mb-3"> |
| <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/8a/Jose_de_la_Serna.jpg/400px-Jose_de_la_Serna.jpg" alt="Virrey De la Serna" class="w-full rounded-lg"> |
| <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/5e/Captura_del_Virrey.jpg/400px-Captura_del_Virrey.jpg" alt="Captura del Virrey" class="w-full rounded-lg"> |
| </div> |
| <p class="text-sm text-gray-600 text-center">Izquierda: Virrey Jos茅 de la Serna. Derecha: Momento de su captura</p> |
| <div class="mt-4 bg-yellow-50 p-3 rounded-lg"> |
| <div class="flex items-center mb-1"> |
| <i class="fas fa-info-circle text-yellow-500 mr-2"></i> |
| <span class="font-semibold">Dato hist贸rico:</span> |
| </div> |
| <p class="text-gray-700">El virrey fue herido por tres balas pero sobrevivi贸. Fue tratado con honores por Sucre, demostrando el respeto entre ambos bandos.</p> |
| </div> |
| `; |
| break; |
| |
| case 5: |
| content.innerHTML = ` |
| <div class="flex items-center mb-3"> |
| <div class="icon-badge bg-red-500 text-white mr-3"> |
| <i class="fas fa-file-signature"></i> |
| </div> |
| <h2 class="text-xl font-bold text-red-700">Fase 5: Rendici贸n</h2> |
| </div> |
| <p class="text-gray-700 mb-4">A las 13:00 horas, el general Canterac firm贸 el Acta de Capitulaci贸n de Ayacucho, poniendo fin a las hostilidades. El documento reconoc铆a la independencia del Per煤 y permit铆a el retiro ordenado de las tropas realistas.</p> |
| <p class="text-gray-700 mb-4">La batalla dur贸 apenas una hora de combate intenso, pero sus consecuencias fueron inmensas: marc贸 el fin del dominio espa帽ol en Sudam茅rica.</p> |
| <div class="grid grid-cols-2 gap-4 mb-3"> |
| <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/5e/Capitulaci%C3%B3n_de_Ayacucho.jpg/400px-Capitulaci%C3%B3n_de_Ayacucho.jpg" alt="Capitulaci贸n" class="w-full rounded-lg"> |
| <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/3e/Acta_de_Capitulaci%C3%B3n_de_Ayacucho.jpg/400px-Acta_de_Capitulaci%C3%B3n_de_Ayacucho.jpg" alt="Acta" class="w-full rounded-lg"> |
| </div> |
| <p class="text-sm text-gray-600 text-center">Izquierda: Pintura de la capitulaci贸n. Derecha: P谩gina del Acta de Capitulaci贸n</p> |
| <div class="mt-4 bg-green-50 p-3 rounded-lg"> |
| <div class="flex items-center"> |
| <i class="fas fa-quote-left text-green-500 mr-2"></i> |
| <p class="italic text-gray-700">"La guerra de la Am茅rica del Sur ha terminado; la libertad del Per煤 est谩 asegurada."</p> |
| </div> |
| <p class="text-right font-semibold text-green-600 mt-1">- Parte de batalla de Sucre</p> |
| </div> |
| `; |
| break; |
| } |
| } |
| |
| // Hide info panel |
| function hideInfoPanel() { |
| document.getElementById('info-panel').classList.add('hidden'); |
| } |
| |
| // Show characters modal |
| function showCharactersModal() { |
| document.getElementById('characters-modal').classList.remove('hidden'); |
| } |
| |
| // Hide characters modal |
| function hideCharactersModal() { |
| document.getElementById('characters-modal').classList.add('hidden'); |
| } |
| |
| // Show consequences modal |
| function showConsequencesModal() { |
| document.getElementById('consequences-modal').classList.remove('hidden'); |
| } |
| |
| // Hide consequences modal |
| function hideConsequencesModal() { |
| document.getElementById('consequences-modal').classList.add('hidden'); |
| } |
| </script> |
|
|
| |
| <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap"></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=juancarloslujan/proyectos-interactivos" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
