<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Los Alamos History Museum 3D</title>
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
background: #111820;
color: #f5ead6;
font-family: system-ui, Arial;
overflow: hidden;
}
#world {
position: fixed;
inset: 0;
background: linear-gradient(#17252d 0%, #28353a 50%, #171d20 50%, #101619 100%);
perspective: 900px;
overflow: hidden;
}
#room {
position: absolute;
inset: 0;
transform-style: preserve-3d;
transition: filter 0.3s;
}
.ceiling {
position: absolute;
left: 10%;
right: 10%;
top: -8%;
height: 50%;
background: linear-gradient(135deg, #353c3e, #1d272b);
clip-path: polygon(18% 0, 82% 0, 100% 100%, 0 100%);
border-bottom: 5px solid #8b7451;
}
.backwall {
position: absolute;
left: 18%;
right: 18%;
top: 17%;
height: 52%;
background: linear-gradient(90deg, #30383a, #4a4b44 50%, #30383a);
border: 8px solid #242d30;
box-shadow: 0 0 0 2px #b99a6455;
}
.floor {
position: absolute;
left: -20%;
right: -20%;
bottom: -28%;
height: 65%;
background: repeating-linear-gradient(
90deg,
#594d3e 0px,
#594d3e 80px,
#635646 81px,
#635646 160px
);
transform: rotateX(62deg);
transform-origin: top;
box-shadow: inset 0 25px 40px #0008;
}
.beam {
position: absolute;
left: 5%;
right: 5%;
height: 12px;
background: #594530;
top: 20%;
box-shadow: 0 3px 5px #0008;
}
.sign {
position: absolute;
left: 25%;
right: 25%;
top: 22%;
height: 10%;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
background: #131b1e;
border: 2px solid #d8b77b;
color: #e8d3a8;
letter-spacing: 0.1em;
font-weight: 800;
font-size: clamp(11px, 2vw, 22px);
box-shadow: 0 6px 16px #0008;
}
.exhibit {
position: absolute;
top: 39%;
width: 22%;
height: 24%;
background: #172126;
border: 2px solid #c5a46a;
box-shadow: 0 10px 20px #0009;
cursor: pointer;
transition:
transform 0.2s,
filter 0.2s;
display: flex;
flex-direction: column;
align-items: center;
padding: 8px;
text-align: center;
}
.exhibit:hover {
filter: brightness(1.35);
transform: translateY(-5px);
}
.exhibit .photo {
width: 85%;
height: 45%;
margin: 5px;
background: linear-gradient(135deg, #6b6558, #252f33);
border: 3px solid #88704b;
display: flex;
align-items: center;
justify-content: center;
font-size: clamp(20px, 4vw, 38px);
}
.exhibit strong {
color: #e2c48d;
font-size: clamp(9px, 1.5vw, 15px);
letter-spacing: 0.04em;
}
.exhibit small {
font-size: clamp(8px, 1vw, 11px);
color: #d9d3c6;
margin-top: 5px;
}
#ex1 {
left: 19%;
}
#ex2 {
left: 39%;
}
#ex3 {
left: 59%;
}
#ex4 {
left: 79%;
width: 18%;
}
.table {
position: absolute;
left: 37%;
top: 69%;
width: 27%;
height: 7%;
background: #5e4630;
border: 3px solid #d8b77b;
transform: perspective(500px) rotateX(18deg);
box-shadow: 0 15px 25px #0009;
cursor: pointer;
text-align: center;
padding: 10px;
font-size: 12px;
color: #ffe7b7;
}
.pillar {
position: absolute;
top: 13%;
height: 59%;
width: 4%;
background: linear-gradient(90deg, #292e2d, #76664e, #373b38);
border: 1px solid #b29a70;
}
.p1 {
left: 14%;
}
.p2 {
right: 14%;
}
#top {
position: fixed;
z-index: 2;
top: 12px;
left: 12px;
right: 12px;
display: flex;
justify-content: space-between;
gap: 10px;
pointer-events: none;
}
.brand,
.help {
background: #0d1515e8;
border: 1px solid #d8b77b66;
border-radius: 12px;
padding: 10px 13px;
box-shadow: 0 5px 20px #0005;
}
.brand b {
display: block;
color: #d8b77b;
letter-spacing: 0.14em;
}
.brand span {
font-size: 10px;
letter-spacing: 0.1em;
}
.help {
font-size: 11px;
line-height: 1.5;
max-width: 260px;
}
#nav {
position: fixed;
z-index: 3;
bottom: 12px;
left: 12px;
right: 12px;
display: flex;
gap: 6px;
flex-wrap: wrap;
justify-content: center;
}
button {
font: inherit;
cursor: pointer;
}
#nav button,
.close {
background: #111b20ed;
color: #f5ead6;
border: 1px solid #d8b77b99;
border-radius: 9px;
padding: 10px 12px;
font-size: 12px;
}
#nav button:hover {
background: #5b4932;
}
#cover {
position: fixed;
z-index: 10;
inset: 0;
background: linear-gradient(130deg, #0c1218f5, #1b292ff2);
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}
.card {
width: min(650px, 100%);
background: #111b22;
border: 1px solid #d8b77b88;
border-radius: 22px;
padding: clamp(22px, 5vw, 42px);
box-shadow: 0 25px 100px #0009;
}
.eyebrow {
font-size: 11px;
letter-spacing: 0.2em;
color: #d8b77b;
}
.card h1 {
font-size: clamp(30px, 5vw, 50px);
line-height: 1.03;
margin: 14px 0;
}
.card p {
line-height: 1.6;
color: #d6d1c8;
}
.primary {
background: #d8b77b;
color: #171b1d;
border: 0;
border-radius: 9px;
padding: 13px 18px;
font-weight: 800;
}
.secondary {
background: transparent;
color: #f5ead6;
border: 1px solid #d8b77b88;
border-radius: 9px;
padding: 12px 15px;
}
#info {
display: none;
position: fixed;
z-index: 5;
right: 16px;
top: 50%;
transform: translateY(-50%);
width: min(370px, calc(100vw - 28px));
max-height: 70vh;
overflow: auto;
background: #0c1415f2;
border: 1px solid #d8b77b;
border-radius: 15px;
padding: 20px;
box-shadow: 0 20px 70px #000a;
}
#info h2 {
color: #d8b77b;
margin: 10px 0;
}
#info p {
font-size: 14px;
line-height: 1.6;
color: #eee5d6;
}
.close {
float: right;
}
.tag {
font-size: 10px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: #d8b77b;
}
#status {
position: fixed;
z-index: 4;
left: 50%;
top: 82px;
transform: translateX(-50%);
padding: 8px 12px;
border-radius: 8px;
background: #0c1415e8;
color: #e9d5a9;
font-size: 12px;
display: none;
}
@media (max-width: 600px) {
.help {
max-width: 150px;
font-size: 9px;
}
.brand span {
display: none;
}
.exhibit {
padding: 3px;
}
.exhibit small {
display: none;
}
#info {
top: auto;
bottom: 70px;
transform: none;
right: 8px;
width: calc(100% - 16px);
max-height: 44vh;
}
#nav button {
padding: 8px;
font-size: 10px;
}
}
</style>
</head>
<body>
<div id="world">
<div id="room">
<div class="ceiling"></div>
<div class="floor"></div>
<div class="backwall"></div>
<div class="beam"></div>
<div class="pillar p1"></div>
<div class="pillar p2"></div>
<div class="sign" id="roomsign">LOS ALAMOS HISTORY MUSEUM</div>
<div class="exhibit" id="ex1" onclick="openRoom('president')">
<div class="photo">🇺🇸</div>
<strong>PRESIDENTE DE LA ÉPOCA</strong><small>Harry S. Truman · 1945</small>
</div>
<div class="exhibit" id="ex2" onclick="openRoom('policy')">
<div class="photo">⚛</div>
<strong>POLÍTICAS Y DECISIONES</strong><small>Gobierno · Ciencia · Ejército</small>
</div>
<div class="exhibit" id="ex3" onclick="openRoom('debate')">
<div class="photo">⚖</div>
<strong>OPOSICIÓN Y DEBATE</strong><small>¿Había alternativas?</small>
</div>
<div class="exhibit" id="ex4" onclick="openRoom('voices')">
<div class="photo">◉</div>
<strong>VOCES DE LA ÉPOCA</strong><small>Distintas perspectivas</small>
</div>
<div class="table" onclick="openRoom('timeline')">LÍNEA DE TIEMPO · TOCÁ PARA EXPLORAR</div>
</div>
</div>
<div id="top">
<div class="brand"><b>LOS ÁLAMOS</b><span>HISTORY MUSEUM · RECORRIDO 3D</span></div>
<div class="help">
<b style="color: #d8b77b">CÓMO EXPLORAR</b><br />Tocá los paneles para abrirlos.<br />Usá
los botones para recorrer salas.
</div>
</div>
<div id="status">Sala seleccionada</div>
<div id="info">
<button class="close" onclick="closeInfo()">Cerrar ✕</button>
<div class="tag" id="tag"></div>
<h2 id="title"></h2>
<div id="body"></div>
</div>
<div id="nav">
<button onclick="go('lobby')">⌂ Vestíbulo</button
><button onclick="go('president')">01 · Presidencia</button
><button onclick="go('policy')">02 · Decisiones</button
><button onclick="go('debate')">03 · Debate</button
><button onclick="go('voices')">04 · Voces</button
><button onclick="go('timeline')">↗ Línea de tiempo</button
><button onclick="go('quiz')">✦ Desafío</button>
</div>
<div id="cover">
<div class="card">
<div class="eyebrow">MUSEO VIRTUAL · NUEVO MÉXICO</div>
<h1>
Entrá a la historia.<br /><span style="color: #d8b77b">Recorré el museo en 3D.</span>
</h1>
<p>
Esta versión abre directamente en tu navegador, sin depender de cargar motores 3D
externos. Tocá <b>Entrar al museo</b> y después seleccioná los paneles o las salas para
explorar la historia del Proyecto Manhattan.
</p>
<p style="font-size: 12px">
Diseño 3D estilizado en perspectiva. En celular, tocá los paneles; en computadora, usá el
mouse.
</p>
<button class="primary" onclick="enterMuseum()">ENTRAR AL MUSEO →</button>
</div>
</div>
<script>
const rooms = {
lobby: [
"Bienvenida",
"Los Álamos y el Proyecto Manhattan",
`<p>Durante la Segunda Guerra Mundial, Los Álamos, en Nuevo México, fue uno de los centros secretos del Proyecto Manhattan, el programa estadounidense que desarrolló las primeras armas nucleares.</p><p>Este recorrido explora el contexto político, el debate sobre el uso de la bomba y las distintas experiencias de las personas relacionadas con el proyecto.</p><p>Elegí un panel para comenzar.</p>`,
],
president: [
"Sala 01 · Presidencia",
"Harry S. Truman (1945–1953)",
`<p>Franklin D. Roosevelt murió el 12 de abril de 1945 y Harry S. Truman asumió la presidencia de Estados Unidos. Al asumir, recibió información sobre el proyecto secreto para desarrollar la bomba atómica.</p><p>El 16 de julio de 1945 se realizó la prueba Trinity en Nuevo México. En agosto, Truman autorizó el uso de bombas atómicas contra Hiroshima y Nagasaki, en Japón.</p><p><b>Para pensar:</b> ¿Cómo puede un presidente tomar una decisión militar de consecuencias enormes cuando la información está concentrada en pocas personas?</p>`,
],
policy: [
"Sala 02 · Gobierno y decisiones",
"Políticas, poder y secreto",
`<p>El Proyecto Manhattan reunió al gobierno, las Fuerzas Armadas y la comunidad científica. El general Leslie Groves coordinó la organización militar y J. Robert Oppenheimer dirigió la parte científica en Los Álamos.</p><p>El proyecto se mantuvo bajo un estricto secreto: muchas personas conocían solamente la parte necesaria para realizar su trabajo. El gobierno sostenía que evitar filtraciones era fundamental durante la guerra.</p><p><b>Debate:</b> ¿El secreto de Estado puede ser necesario durante una guerra? ¿Qué límites debería tener?</p>`,
],
debate: [
"Sala 03 · Oposición y debate",
"¿Era la bomba la única opción?",
`<p>En 1945, algunos científicos y otras personas cuestionaron el uso de la bomba contra ciudades. Entre las alternativas discutidas estaban demostrar la nueva arma o buscar otras vías para lograr la rendición japonesa.</p><p>Otros responsables sostenían que usarla podía acelerar el final de la guerra y evitar una invasión que también podía causar muchas muertes. Las opiniones no fueron uniformes.</p><p>La decisión y sus consecuencias siguen siendo objeto de debate histórico.</p>`,
],
voices: [
"Sala 04 · Voces de la época",
"¿Qué pensaban las personas?",
`<p><b>Científicos:</b> algunos estaban preocupados por las consecuencias humanitarias y políticas; otros priorizaban terminar la guerra o impedir que la Alemania nazi desarrollara primero un arma nuclear.</p><p><b>Militares y autoridades:</b> analizaban la bomba dentro de una estrategia de guerra, aunque no todos compartían las mismas opiniones.</p><p><b>Civiles japoneses:</b> las poblaciones de Hiroshima y Nagasaki sufrieron las devastadoras consecuencias de los bombardeos.</p><p><b>Habitantes y trabajadores de Los Álamos:</b> vivieron en una comunidad marcada por el secreto, la investigación y la incertidumbre.</p><p>Son perspectivas generales: no todas las personas de un grupo pensaban igual.</p>`,
],
timeline: [
"Recorrido cronológico",
"Fechas clave del Proyecto Manhattan",
`<p><b>1939:</b> científicos alertan al gobierno estadounidense sobre la posibilidad de que la Alemania nazi investigue armas nucleares.</p><p><b>1942:</b> el Proyecto Manhattan se organiza a gran escala.</p><p><b>1943:</b> Los Álamos se convierte en uno de los centros principales de investigación.</p><p><b>16 de julio de 1945:</b> prueba Trinity en Nuevo México.</p><p><b>6 y 9 de agosto de 1945:</b> bombardeos atómicos de Hiroshima y Nagasaki.</p><p><b>1945:</b> termina la Segunda Guerra Mundial y comienza una nueva era nuclear.</p>`,
],
};
function enterMuseum() {
document.getElementById("cover").style.display = "none";
openRoom("lobby");
}
function openRoom(id) {
if (id === "quiz") {
showQuiz();
return;
}
let d = rooms[id];
if (!d) return;
document.getElementById("tag").textContent = d[0];
document.getElementById("title").textContent = d[1];
document.getElementById("body").innerHTML = d[2];
document.getElementById("info").style.display = "block";
document.getElementById("roomsign").textContent = d[1].toUpperCase();
document.getElementById("status").textContent = d[0];
document.getElementById("status").style.display = "block";
setTimeout(() => (document.getElementById("status").style.display = "none"), 1800);
}
function closeInfo() {
document.getElementById("info").style.display = "none";
}
function go(id) {
closeInfo();
if (id === "lobby") {
document.getElementById("roomsign").textContent = "LOS ALAMOS HISTORY MUSEUM";
openRoom("lobby");
} else openRoom(id);
}
function showQuiz() {
document.getElementById("tag").textContent = "Desafío interactivo";
document.getElementById("title").textContent = "¿Cuánto aprendiste?";
document.getElementById("body").innerHTML =
'<p>¿Quién era presidente de Estados Unidos cuando se utilizaron las bombas atómicas en agosto de 1945?</p><div id="opts"><button class="secondary" style="display:block;width:100%;margin:8px 0" onclick="answer(false)">Franklin D. Roosevelt</button><button class="secondary" style="display:block;width:100%;margin:8px 0" onclick="answer(true)">Harry S. Truman</button><button class="secondary" style="display:block;width:100%;margin:8px 0" onclick="answer(false)">Dwight D. Eisenhower</button></div><p id="result"></p>';
document.getElementById("info").style.display = "block";
}
function answer(ok) {
document.getElementById("result").innerHTML = ok
? '<b style="color:#d8b77b">¡Correcto!</b> Truman asumió en abril de 1945.'
: '<b style="color:#e6a38d">Intentá otra vez.</b> Pista: asumió después de la muerte de Roosevelt, en abril de 1945.';
}
</script>
</body>
</html>