<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mi Diario Secreto</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tone/14.8.49/Tone.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;1,400&family=Cinzel:wght@400;700&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Cormorant Garamond', serif;
background: #0f0c08;
overflow-x: hidden;
}
.font-cinzel { font-family: 'Cinzel', serif; }
/* Textura de madera oscura */
.wood-texture {
background:
radial-gradient(ellipse at top, #1a1510 0%, #0f0c08 100%),
url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.4'/%3E%3C/svg%3E");
}
/* Efecto de papel envejecido */
.paper-texture {
background:
linear-gradient(to bottom, #f4e8d0 0%, #e6d5b8 100%),
url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='paperNoise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.04' numOctaves='5'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23paperNoise)' opacity='0.08'/%3E%3C/svg%3E");
box-shadow:
inset 0 0 60px rgba(139, 69, 19, 0.15),
0 4px 20px rgba(0,0,0,0.4);
}
/* Animación de vela parpadeante */
@keyframes flicker {
0%, 100% { opacity: 1; transform: scale(1); filter: brightness(1); }
25% { opacity: 0.8; transform: scale(0.98) skewX(-1deg); filter: brightness(0.9); }
50% { opacity: 0.95; transform: scale(1.02); filter: brightness(1.1); }
75% { opacity: 0.85; transform: scale(0.99) skewX(1deg); filter: brightness(0.95); }
}
.candle-flicker { animation: flicker 3s infinite ease-in-out; }
/* Animación de brillo mágico */
@keyframes magical-glow {
0%, 100% { box-shadow: 0 0 5px rgba(255, 215, 0, 0.3); }
50% { box-shadow: 0 0 20px rgba(255, 215, 0, 0.6), 0 0 40px rgba(255, 215, 0, 0.3); }
}
.magical-hover:hover { animation: magical-glow 2s infinite; }
/* Animación de candado */
@keyframes unlock-shake {
0%, 100% { transform: rotate(0deg); }
25% { transform: rotate(-10deg); }
75% { transform: rotate(10deg); }
}
.unlocking { animation: unlock-shake 0.5s ease-in-out; }
/* Efecto de máquina de escribir */
.typewriter {
overflow: hidden;
border-right: 2px solid #8b4513;
white-space: nowrap;
animation: typing 3s steps(40, end), blink-caret 0.75s step-end infinite;
}
@keyframes typing { from { width: 0 } to { width: 100% } }
@keyframes blink-caret { 50% { border-color: transparent } }
/* Partículas de polvo/polvo mágico */
.dust-particle {
position: absolute;
background: radial-gradient(circle, rgba(255,215,0,0.4) 0%, transparent 70%);
border-radius: 50%;
pointer-events: none;
animation: float 10s infinite ease-in-out;
}
@keyframes float {
0%, 100% { transform: translateY(0) translateX(0); opacity: 0; }
10% { opacity: 0.6; }
90% { opacity: 0.6; }
50% { transform: translateY(-100px) translateX(20px); }
}
/* Cerradura mecánica */
.lock-dial {
transition: transform 0.3s ease;
cursor: pointer;
}
.lock-dial:hover { transform: scale(1.1); }
.lock-dial.active { transform: rotate(90deg); color: #d4af37; }
/* Papiro desplegándose */
@keyframes unroll {
from { transform: scaleY(0); opacity: 0; }
to { transform: scaleY(1); opacity: 1; }
}
.unrolling { animation: unroll 0.8s ease-out forwards; transform-origin: top; }
/* Efecto de sello rompiéndose */
@keyframes seal-break {
0% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.2) rotate(10deg); opacity: 0.8; }
100% { transform: scale(0) rotate(45deg); opacity: 0; }
}
.seal-breaking { animation: seal-break 0.6s ease-out forwards; }
/* Brillo de lámpara */
.lamp-glow {
background: radial-gradient(ellipse at center, rgba(255, 223, 128, 0.3) 0%, transparent 70%);
pointer-events: none;
}
</style>
</head>
<body class="wood-texture min-h-screen text-amber-100 relative">
<!-- Partículas de ambiente -->
<div id="particles" class="fixed inset-0 pointer-events-none z-0"></div>
<!-- Glow de la lámpara -->
<div class="fixed top-0 left-1/2 transform -translate-x-1/2 w-[800px] h-[600px] lamp-glow z-0 candle-flicker"></div>
<!-- Header -->
<header class="relative z-10 text-center pt-8 pb-4">
<h1 class="font-cinzel text-5xl md:text-6xl text-amber-200 tracking-widest drop-shadow-2xl">
El Archivo de Secretos
</h1>
<p class="text-amber-400/70 italic mt-2 text-xl">"Algunas verdades necesitan ser desbloqueadas"</p>
</header>
<!-- Área principal del escritorio -->
<main class="relative z-10 container mx-auto px-4 py-8 max-w-7xl">
<!-- Instrucciones -->
<div class="text-center mb-12 opacity-70 text-sm tracking-widest uppercase">
Selecciona un sobre para revelar su contenido
</div>
<!-- Grid de Secretos -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- SECRETO 1: Candado Mecánico -->
<div class="relative group">
<div id="secret-1" class="secret-container paper-texture rounded-sm p-6 h-80 relative overflow-hidden transform transition-all duration-500 hover:-translate-y-2 hover:shadow-2xl border-2 border-amber-900/30">
<!-- Vista Cerrada -->
<div class="locked-view absolute inset-0 flex flex-col items-center justify-center paper-texture z-20">
<div class="w-32 h-40 bg-amber-100/10 border-2 border-amber-700/50 rounded flex items-center justify-center mb-4 relative overflow-hidden">
<div class="absolute inset-0 bg-gradient-to-br from-amber-900/20 to-transparent"></div>
<svg class="w-16 h-16 text-amber-800 candle-flicker lock-icon" fill="currentColor" viewBox="0 0 24 24">
<path d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z"/>
</svg>
</div>
<p class="font-cinzel text-amber-900 text-lg mb-2">Secreto del Corazón</p>
<p class="text-xs text-amber-800/60 mb-4">Gira el candado para abrir</p>
<!-- Candado interactivo -->
<div class="lock-mechanism flex gap-1 cursor-pointer" onclick="unlockMechanical(1)">
<div class="lock-dial w-8 h-10 bg-gradient-to-b from-amber-700 to-amber-900 rounded border border-amber-600 flex items-center justify-center text-amber-200 font-bold text-xs shadow-lg" data-num="0">0</div>
<div class="lock-dial w-8 h-10 bg-gradient-to-b from-amber-700 to-amber-900 rounded border border-amber-600 flex items-center justify-center text-amber-200 font-bold text-xs shadow-lg" data-num="0">0</div>
<div class="lock-dial w-8 h-10 bg-gradient-to-b from-amber-700 to-amber-900 rounded border border-amber-600 flex items-center justify-center text-amber-200 font-bold text-xs shadow-lg" data-num="0">0</div>
</div>
<input type="password" id="input-1" class="mt-4 bg-transparent border-b-2 border-amber-800/50 text-center text-amber-900 w-32 outline-none placeholder-amber-800/40 text-sm" placeholder="o escribe aquí" maxlength="3">
</div>
<!-- Vista Abierta -->
<div class="unlocked-view hidden absolute inset-0 p-6 bg-[#f4e8d0] z-30 overflow-y-auto">
<div class="seal absolute top-4 right-4 w-12 h-12 bg-red-800/20 rounded-full flex items-center justify-center transform rotate-12 border-2 border-red-800/40">
<span class="text-[8px] text-red-900 font-bold">ROTO</span>
</div>
<h3 class="font-cinzel text-2xl text-amber-900 mb-4 border-b border-amber-900/30 pb-2">Aquella tarde de lluvia</h3>
<p class="text-amber-900/90 leading-relaxed text-sm italic">
Nunca le dije que en realidad no olvidé su paraguas a propósito. Lo guardé durante tres años en mi armario, esperando tener una excusa para volver a verlo...
</p>
<button onclick="lockAgain(1)" class="mt-6 text-xs text-amber-700 hover:text-amber-900 underline">Volver a cerrar</button>
</div>
</div>
</div>
<!-- SECRETO 2: Rompecabezas de Runas -->
<div class="relative group">
<div id="secret-2" class="secret-container paper-texture rounded-sm p-6 h-80 relative overflow-hidden transform transition-all duration-500 hover:-translate-y-2 hover:shadow-2xl border-2 border-amber-900/30">
<!-- Vista Cerrada -->
<div class="locked-view absolute inset-0 flex flex-col items-center justify-center paper-texture z-20">
<div class="mb-4 relative">
<div class="absolute inset-0 bg-purple-500/20 blur-xl rounded-full magical-hover"></div>
<svg class="w-20 h-20 text-purple-900 relative z-10" fill="currentColor" viewBox="0 0 24 24">
<path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/>
</svg>
</div>
<p class="font-cinzel text-purple-900 text-lg mb-2">El Grimorio</p>
<p class="text-xs text-purple-800/60 mb-4">Ordena las runas: ◈ ▲ ●</p>
<div class="flex gap-3 mb-4">
<button class="rune-btn w-10 h-10 bg-purple-900/20 rounded-lg border border-purple-800/50 hover:bg-purple-800/40 transition-all text-purple-900 text-xl" data-order="1" onclick="selectRune(this, 2)">◈</button>
<button class="rune-btn w-10 h-10 bg-purple-900/20 rounded-lg border border-purple-800/50 hover:bg-purple-800/40 transition-all text-purple-900 text-xl" data-order="2" onclick="selectRune(this, 2)">▲</button>
<button class="rune-btn w-10 h-10 bg-purple-900/20 rounded-lg border border-purple-800/50 hover:bg-purple-800/40 transition-all text-purple-900 text-xl" data-order="3" onclick="selectRune(this, 2)">●</button>
</div>
<div id="rune-display-2" class="h-8 text-purple-900 font-cinzel text-lg tracking-widest"></div>
</div>
<!-- Vista Abierta -->
<div class="unlocked-view hidden absolute inset-0 p-6 bg-[#f4e8d0] z-30 overflow-y-auto">
<h3 class="font-cinzel text-2xl text-purple-900 mb-4 border-b border-purple-900/30 pb-2">Mi verdadera pasión</h3>
<p class="text-purple-900/90 leading-relaxed text-sm italic">
Nadie sabe que dejo poemas en los libros de la biblioteca pública. Firmados con un seudónimo que nadie conoce. A veces imagino a alguien encontrándolos y sonriendo...
</p>
<button onclick="lockAgain(2)" class="mt-6 text-xs text-purple-700 hover:text-purple-900 underline">Volver a cerrar</button>
</div>
</div>
</div>
<!-- SECRETO 3: Llave Específica -->
<div class="relative group">
<div id="secret-3" class="secret-container paper-texture rounded-sm p-6 h-80 relative overflow-hidden transform transition-all duration-500 hover:-translate-y-2 hover:shadow-2xl border-2 border-amber-900/30">
<!-- Vista Cerrada -->
<div class="locked-view absolute inset-0 flex flex-col items-center justify-center paper-texture z-20">
<div class="w-24 h-32 bg-blue-100/20 border-2 border-blue-900/30 rounded-lg mb-4 flex items-center justify-center relative">
<div class="keyhole w-8 h-12 bg-amber-900 rounded-full relative overflow-hidden">
<div class="absolute bottom-0 left-1/2 transform -translate-x-1/2 w-4 h-4 bg-amber-900 rounded-full"></div>
</div>
</div>
<p class="font-cinzel text-blue-900 text-lg mb-2">La Caja Fuerte</p>
<p class="text-xs text-blue-800/60 mb-4">Arrastra la llave dorada</p>
<div class="flex gap-4 items-center">
<div id="key-3" class="cursor-grab active:cursor-grabbing transition-transform hover:scale-110" draggable="true" ondragstart="dragKey(event, 3)">
<svg class="w-12 h-12 text-yellow-600 drop-shadow-lg" fill="currentColor" viewBox="0 0 24 24">
<path d="M7 14c-1.66 0-3 1.34-3 3 0 1.31-1.16 2-2 2 .92 1.22 2.49 2 4 2 2.21 0 4-1.79 4-4 0-1.66-1.34-3-3-3zm13.71-9.37l-1.34-1.34c-.39-.39-1.02-.39-1.41 0L9 12.25 11.75 15l8.96-8.96c.39-.39.39-1.02 0-1.41z"/>
</svg>
</div>
<div id="keyhole-target-3" class="w-16 h-16 border-4 border-dashed border-blue-900/40 rounded-full flex items-center justify-center" ondrop="dropKey(event, 3)" ondragover="allowDrop(event)">
<span class="text-xs text-blue-900/40">Suelta aquí</span>
</div>
</div>
</div>
<!-- Vista Abierta -->
<div class="unlocked-view hidden absolute inset-0 p-6 bg-[#f4e8d0] z-30 overflow-y-auto">
<h3 class="font-cinzel text-2xl text-blue-900 mb-4 border-b border-blue-900/30 pb-2">Lo que nunca cobré</h3>
<p class="text-blue-900/90 leading-relaxed text-sm italic">
Presté dinero a un amigo hace cinco años. Nunca me lo devolvió y nunca se lo pedí. No porque no lo necesite, sino porque prefiero perder el dinero a perder la ilusión de que es buena persona...
</p>
<button onclick="lockAgain(3)" class="mt-6 text-xs text-blue-700 hover:text-blue-900 underline">Volver a cerrar</button>
</div>
</div>
</div>
<!-- SECRETO 4: Máquina de Escribir -->
<div class="relative group">
<div id="secret-4" class="secret-container paper-texture rounded-sm p-6 h-80 relative overflow-hidden transform transition-all duration-500 hover:-translate-y-2 hover:shadow-2xl border-2 border-amber-900/30">
<!-- Vista Cerrada -->
<div class="locked-view absolute inset-0 flex flex-col items-center justify-center paper-texture z-20">
<div class="mb-4 relative">
<div class="w-32 h-24 bg-gray-800 rounded-t-lg relative overflow-hidden">
<div class="absolute bottom-2 left-1/2 transform -translate-x-1/2 w-28 h-16 bg-gray-700 rounded"></div>
<div class="absolute top-4 left-4 w-4 h-4 bg-red-500 rounded-full animate-pulse"></div>
</div>
<div class="w-32 h-4 bg-gray-900 rounded-b-lg"></div>
</div>
<p class="font-cinzel text-gray-800 text-lg mb-2">El Manuscrito</p>
<p class="text-xs text-gray-600 mb-4">Escribe: "VERDAD"</p>
<div class="relative">
<input type="text" id="typewriter-input-4"
class="bg-gray-100 border-2 border-gray-400 rounded px-3 py-2 w-40 text-center font-mono text-gray-800 uppercase tracking-widest focus:outline-none focus:border-gray-600"
maxlength="6"
onkeyup="checkTypewriter(4, 'VERDAD')">
<div class="absolute right-2 top-2 w-2 h-4 bg-gray-800 animate-pulse" id="cursor-4"></div>
</div>
<div id="typewriter-sound-4" class="mt-2 text-xs text-gray-500"></div>
</div>
<!-- Vista Abierta -->
<div class="unlocked-view hidden absolute inset-0 p-6 bg-[#f4e8d0] z-30 overflow-y-auto">
<h3 class="font-cinzel text-2xl text-gray-900 mb-4 border-b border-gray-900/30 pb-2">La carta que no envié</h3>
<p class="text-gray-900/90 leading-relaxed text-sm italic typewriter-text">
Escribí una carta de despedida hace tres años. Está en el cajón de mi escritorio, sellada. Cada mes pienso en enviarla, pero nunca encuentro el valor para hacerlo o para tirarla...
</p>
<button onclick="lockAgain(4)" class="mt-6 text-xs text-gray-700 hover:text-gray-900 underline">Volver a cerrar</button>
</div>
</div>
</div>
<!-- SECRETO 5: Sello de Cera (Derritiendo) -->
<div class="relative group">
<div id="secret-5" class="secret-container paper-texture rounded-sm p-6 h-80 relative overflow-hidden transform transition-all duration-500 hover:-translate-y-2 hover:shadow-2xl border-2 border-amber-900/30">
<!-- Vista Cerrada -->
<div class="locked-view absolute inset-0 flex flex-col items-center justify-center paper-texture z-20">
<div class="mb-4 relative w-28 h-36 bg-red-50 border-2 border-red-900/30 rounded flex items-center justify-center">
<!-- Sello de cera -->
<div id="wax-seal-5" class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-16 h-16 bg-gradient-to-br from-red-700 to-red-900 rounded-full shadow-2xl flex items-center justify-center border-4 border-red-800 transition-all duration-1000">
<span class="text-red-200 font-cinzel text-2xl">S</span>
</div>
</div>
<p class="font-cinzel text-red-900 text-lg m
