<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Expediente 001</title>
<style>
* { box-sizing: border-box; }
body {
margin: 0;
min-height: 100vh;
background:
radial-gradient(ellipse at top, #401015 0%, #151010 45%, #050505 100%);
color: #f3ece8;
font-family: "Courier New", monospace;
display: grid;
place-items: center;
padding: 20px;
}
main {
width: 100%;
max-width: 460px;
min-height: 490px;
padding: 28px 23px;
border: 1px solid #84212b;
background: rgba(10, 10, 10, .94);
box-shadow: 0 0 35px #8b000033;
text-align: center;
position: relative;
overflow: hidden;
animation: appear .8s ease;
}
main::before {
content: "CONFIDENCIAL • CONFIDENCIAL • CONFIDENCIAL";
display: block;
color: #d32f3e;
font-size: 10px;
letter-spacing: 2px;
margin-bottom: 30px;
}
.stamp {
display: inline-block;
color: #e63946;
border: 1px solid #e63946;
padding: 7px 12px;
transform: rotate(-4deg);
font-size: 12px;
letter-spacing: 2px;
}
h1 {
font-size: clamp(25px, 7vw, 36px);
letter-spacing: 2px;
margin: 27px 0 12px;
}
h2 {
color: #e63946;
font-size: 18px;
}
p {
line-height: 1.8;
color: #ddd3cf;
font-size: 15px;
}
.line {
width: 65px;
height: 2px;
background: #a81727;
margin: 22px auto;
}
button {
font-family: inherit;
background: #8b0000;
color: white;
border: 1px solid #e63946;
padding: 13px 15px;
margin: 7px 0;
width: 100%;
cursor: pointer;
transition: .25s;
font-size: 13px;
}
button:hover {
background: #c51f30;
transform: translateY(-2px);
}
.secondary {
background: #171414;
border-color: #777;
}
.small {
color: #8f8581;
font-size: 10px;
margin-top: 30px;
}
.hidden { display: none; }
.heart {
font-size: 40px;
animation: beat 1s infinite;
}
#answer {
color: #f1b5bb;
margin-top: 18px;
}
@keyframes appear {
from { opacity: 0; transform: translateY(18px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes beat {
50% { transform: scale(1.13); }
}
</style>
</head>
<body>
<main>
<section id="page1">
<div class="stamp">ACCESO RESTRINGIDO</div>
<h1>EXPEDIENTE 001</h1>
<div class="line"></div>
<h2>Un secreto que debo confesar</h2>
<p>
He recopilado algunas pruebas.<br>
He analizado la situación.<br>
Y creo que es hora de revelar la verdad.
</p>
<button onclick="go(2)">ABRIR EXPEDIENTE →</button>
</section>
<section id="page2" class="hidden">
<div class="stamp">EVIDENCIA RECOPILADA</div>
<h1>Las pruebas</h1>
<div class="line"></div>
<p>ARCHIVO A — Me gusta hablar contigo.</p>
<p>ARCHIVO B — Consigues sacarme una sonrisa.</p>
<p>ARCHIVO C — Apareces mucho en mis pensamientos.</p>
<button onclick="go(3)">REVELAR CONCLUSIÓN →</button>
<button class="secondary" onclick="go(1)">← VOLVER</button>
</section>
<section id="page3" class="hidden">
<div class="stamp">CASO CASI RESUELTO</div>
<h1>La verdad</h1>
<div class="line"></div>
<p>
Después de analizar todas las pruebas,
llegué a una conclusión que ya no quiero
guardar en secreto:
</p>
<h2>ME GUSTAS. ❤️</h2>
<p>
Me gustas desde que te vi por primera vez sentado en esa silla con tus lentes, tomando notas con la mini libreta que creo que era de Harry Potter
desde ese dia me empezaste a gustar, pero no lo quise aceptar y ni siquiera te conocia,y ahora quise ser sincera contigo, y te preguntaras pero que me vio ¿por que yo?.
Solo se decirte que tu forma de ser me gusta eres muy divertido y atento, no me tratas muy bien asi que no te pudeo decir que es el trato.
Te puedo decir que es la forma en como miras cuando traes lentes, como te comodas tu cabello y como hablas con tanto entusiasmo de las cosas que te gustan todo eso
es lo que me gusta de ti y puedo mencionar muchas cosas más pero el espacio no me alcanzara. Solo quiero saber algo.❤️
❤️
</p>
<button onclick="go(4)">VER PREGUNTA FINAL →</button>
</section>
<section id="page4" class="hidden">
<div class="stamp">DECISIÓN PENDIENTE</div>
<div class="heart">♥</div>
<h1>Una última pregunta</h1>
<p>¿Tú sientes algo parecido por mí?</p>
<button onclick="respond('yes')">
</butto>
PUEDE QUE TAMBIÉN ME GUSTES.❤️
</button>
<button class="secondary" onclick="respond('talk')">
QUIERO HABLARLO CONTIGO 🖤
</button>
<div id="answer"></div>
<button class="secondary" onclick="go(1)">
VOLVER AL INICIO
</button>
</section>
<div class="small">
ARCHIVO PERSONAL · EXPEDIENTE 001<br>
ALGUNOS SECRETOS MERECEN SER CONTADOS.
</div>
</main>
<script>
function go(n) {
document.querySelectorAll("main section").forEach(
section => section.classList.add("hidden")
);
document.getElementById("page" + n)
.classList.remove("hidden");
}
function respond(choice) {
const answer = document.getElementById("answer");
if (choice === "yes") {
answer.textContent =
"Caso abierto para una nueva historia. Enseriooooo seguro que es un sueño cualquier cosa cuando me veas me abrazas para saber que es real.😍❤️";
} else {
answer.textContent =
"Está bien.Lo hablaremos gracias por escucharme y por ser sincero conmigo.Y se que estas tratando con alguien y lo que menos quiero hacer es confundirte o ponerte en una situación difícil🖤";
}
}
</script>
</body>
</html>