¡Vaya siesta que me he echado! ¿Ya deben ser las mil! Espero no perder el bus para ir a clase.
¿¿Dónde estoy??
Debí trasnochar demasiado y he acabado en la casa de alguien. Aunque, no me suena de nada.
¡Qué tarde!
Será mejor que me dé prisa o vuelvo a llegar tarde a clase.
[[Aunque, quizá pueda quedarme un rato más aquí tumbado->Sofá]]
[[No, bastante lata habré dado ya quedándome a sobar aquí ->Puerta]]
<div style="width: 100%;"><div style="position: relative; padding-bottom: 56.25%; padding-top: 0; height: 0;"><iframe frameborder="0" width="1200px" height="675px" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" src="https://view.genial.ly/5ede6ce62a753d0d96f037e8" type="text/html" allowscriptaccess="always" allowfullscreen="true" scrolling="yes" allownetworking="all"></iframe> </div> </div>
¡Me está entrando un hambre! Voy a ver si pico algo mientras busco esas llaves...
<p style="text-align:center;"><iframe src="https://giphy.com/embed/lGbz7CsaCj4Tm" width="480" height="288" frameBorder="0" class="giphy-embed" allowFullScreen></iframe><p><a href="https://giphy.com/gifs/pancakes-food-breakfast-lGbz7CsaCj4Tm"></a></p>
¡Espera! ¡Me ha parecido que la puerta tenía un sistema de esos de domótica, ¡quizá no sean unas llaves lo que busco!
¡Jod...me soprendo del nivelazo que tengo! Domótica, jajaja.
<p style="text-align:center;"><iframe src="https://giphy.com/embed/13uNYQRS1U6mTC" width="480" height="394" frameBorder="0" class="giphy-embed" allowFullScreen></iframe><p><a href="https://giphy.com/gifs/disney-laughing-peter-pan-13uNYQRS1U6mTC"></a></p>
[[Vuelve a ver la cerradura->Puerta 2]]
[[Antes voy a comer algo->Cocina 2]]Así no voy a ninguna parte, ¡deja ya de vaguear y ponte en marcha!
No alimentes tu vaguería.
(align: "=><==")[[¡Levanta!->El despertar]]
<p style="text-align:center;"><iframe src="https://giphy.com/embed/l4FszqrMzZpWs1ZMQ" width="480" height="384" frameBorder="0" class="giphy-embed" allowFullScreen></iframe><p><a href="https://giphy.com/gifs/earwolf-lauren-lapkus-l4FszqrMzZpWs1ZMQ">via GIPHY</a></p><div style="width: 100%;"><div style="position: relative; padding-bottom: 56.25%; padding-top: 0; height: 0;"><iframe frameborder="0" width="1200px" height="675px" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" src="https://view.genial.ly/5ede6ce62a753d0d96f037e8" type="text/html" allowscriptaccess="always" allowfullscreen="true" scrolling="yes" allownetworking="all"></iframe> </div> </div>
Pero, ¿qué pasa con esta puerta? ¿No se abre?? Voy a buscar unas llaves o algo...
👁[[Explora la casa]]
<div style="width: 100%;"><div style="position: relative; padding-bottom: 56.25%; padding-top: 0; height: 0;"><iframe frameborder="0" width="1200px" height="675px" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" src="https://view.genial.ly/5ede6ce62a753d0d96f037e8" type="text/html" allowscriptaccess="always" allowfullscreen="true" scrolling="yes" allownetworking="all"></iframe> </div> </div>
Es una casa peculiar. Combina arte moderno con antiguallas.
¡Vaya, me sorprendo de saber estas cosas!
El retrato de Velázquez queda un poquito fuera de lugar.
¡Da miedo!
¿Será de verdad?
No consigo distinguir la firma...
👁Acércate más al cuadro
📺[[Sigue explorando la casa->Salon1]]
<div style="width: 100%;"><div style="position: relative; padding-bottom: 56.25%; padding-top: 0; height: 0;"><iframe frameborder="0" width="1200px" height="675px" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" src="https://view.genial.ly/5ede6ce62a753d0d96f037e8" type="text/html" allowscriptaccess="always" allowfullscreen="true" scrolling="yes" allownetworking="all"></iframe> </div> </div>
Esta casa esconde secretos
(click-replace: "secretos")[secretos. Todo empieza a sonarme familiar de una extraña manera]
👁Explora el dormitorio
[[Qué curiosa es esa lamparita de noche ->Lampara]]<div style="width: 100%;"><div style="position: relative; padding-bottom: 56.25%; padding-top: 0; height: 0;"><iframe frameborder="0" width="1200px" height="675px" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" src="https://view.genial.ly/5ede6ce62a753d0d96f037e8" type="text/html" allowscriptaccess="always" allowfullscreen="true" scrolling="yes" allownetworking="all"></iframe> </div> </div>
¡Vaya!, aunque es de día el farolillo permanece encendido, debe tener un sistema led con algún fallo, porque durante el día debería recargarse... (mis clases de tecnología están dando sus frutos...😁)
Parece que la luz sigue un sistema intermitente... da la impresión de que quiere decirme algo...
🤚🏻Explora el farolillo
👁Continua explorando el balcón
[[Sal del balcón->Salón2]]
[[Necesitas ir al baño, ese sistema de luces intermitentes te provocan ganas de miccionar, no preguntes por qué->Baño 2]] <div style="width: 100%;"><div style="position: relative; padding-bottom: 56.25%; padding-top: 0; height: 0;"><iframe frameborder="0" width="1200px" height="675px" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" src="https://view.genial.ly/5ede6ce62a753d0d96f037e8" type="text/html" allowscriptaccess="always" allowfullscreen="true" scrolling="yes" allownetworking="all"></iframe> </div> </div>
Parece que aquí se toman en serio lo de trabajar.
No les falta de nada y tienen muy bien organizada la mesa ¡Incluso están en su hora de descanso!, ¡Pedazo donuts que se han marcado!
<p style="text-align:center;">
<iframe src="https://giphy.com/embed/o9ngTPVYW4qo8" width="480" height="480" frameBorder="0" class="giphy-embed" allowFullScreen></iframe><p><a href="https://giphy.com/gifs/food-design-donuts-o9ngTPVYW4qo8"></a></p>
¡Vaya! ¡Otra obra de arte! Aquí no se privan de nada. Me quedo embobado mirando esa noche estrellada...
Un momento.... yo y mi TOC me dicen que ese cuadro no está derecho...
[[ 🤚Colócalo->despacho2]]<div style="width: 100%;"><div style="position: relative; padding-bottom: 56.25%; padding-top: 0; height: 0;"><iframe frameborder="0" width="1200px" height="675px" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" src="https://view.genial.ly/5ede6ce62a753d0d96f037e8" type="text/html" allowscriptaccess="always" allowfullscreen="true" scrolling="yes" allownetworking="all"></iframe> </div> </div>
Vaya! En esta nevera ha evolucionado una nueva especie. Creo que no he visto tanto moho en mi vida.
<p style="text-align:center;">
<iframe src="https://giphy.com/embed/sRYGramiPOmAg" width="480" height="270" frameBorder="0" class="giphy-embed" allowFullScreen></iframe><p><a href="https://giphy.com/gifs/tim-lapse-mold-sRYGramiPOmAg"></a></p>
(set: _comida to (random: 0,1))
(if:_comida is 0)[ ¡Voy a vomitar! ]
(else:)[ Mmmm, ¡en esta casa saben lo que hacen! Nunca sabes hasta que lo pruebas, por muy mal aspecto que tenga.]
¡Hay un olorcillo que alimenta! Algo se está cocinando....
👃🏻Sigue el aroma 🤚🏻toca la olla o
👁Sigue explorando la casa
[[🥘Olla->Cocina4]]
🛌[[Dormitorio]]
💻[[Despacho]]
🚪[[Hall]]
[[💨Necesito tomar el aire->Balcón Cocina]]<div style="width: 100%;"><div style="position: relative; padding-bottom: 56.25%; padding-top: 0; height: 0;"><iframe frameborder="0" width="1200px" height="675px" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" src="https://view.genial.ly/5ede6ce62a753d0d96f037e8" type="text/html" allowscriptaccess="always" allowfullscreen="true" scrolling="yes" allownetworking="all"></iframe> </div> </div>
(align: "=><==")[<img src="https://www.agorabierta.com/wp-content/uploads/2020/05/door-575968_1280.png" width="500" height="450"alt="Dejavu">]
Parece un código extraño. ¡Qué casa tan rara!
Necesita varias claves para abrirse (cycling-link: bind $clave, "numérica", "palabras", "letras")
[[📺Voy a volver al salón a ver si encuentro algo->Salón]]
[[☕️Desayuno algo y sigo. Sin fuerzas no puedo pensar->Cocina 3]]
[[💻Me ha parecido ver un despacho.Seguro que encuentro algo allí->Despacho]]
[[😴A ver si tengo suerte y hay alguien más en casa. Probablemente estára dormida->Dormitorio]]
[[🚻No puedo aguantarme, volando a buscar un servicio->Baño]] <div style="width: 100%;"><div style="position: relative; padding-bottom: 56.25%; padding-top: 0; height: 0;"><iframe frameborder="0" width="1200px" height="675px" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" src="https://view.genial.ly/5ede6ce62a753d0d96f037e8" type="text/html" allowscriptaccess="always" allowfullscreen="true" scrolling="yes" allownetworking="all"></iframe> </div> </div>
Seguro que tienen algo en ese sinfonier de ahí.
¡Ay, si escuchara mi madre el vocabulario que utilizo!Para que luego diga que los jóvenes solo sabemos de lenguaje recortado.
<p style="text-align:center;">
<iframe src="https://giphy.com/embed/26n6AaCcCajAyZx04" width="480" height="288" frameBorder="0" class="giphy-embed" allowFullScreen></iframe><p><a href="https://giphy.com/gifs/lol-text-water-color-26n6AaCcCajAyZx04">via GIPHY</a></p>
💡Mira y explora tu alrededor
[[Sigue explorando la casa->Explora la casa2]]
(alert: "A partir de aquí, tendrás que explorar la casa, solo así encontrarás la manera de salir.
Parece que se cuece algo raro.")
<div style="width: 100%;"><div style="position: relative; padding-bottom: 56.25%; padding-top: 0; height: 0;"><iframe frameborder="0" width="1200px" height="675px" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" src="https://view.genial.ly/5ede6ce62a753d0d96f037e8" type="text/html" allowscriptaccess="always" allowfullscreen="true" scrolling="yes" allownetworking="all"></iframe> </div> </div>
¿Por dónde empiezas?
👉🏻[[Cocina]]
👉🏻[[Salón]]
👉🏻[[Dormitorio]]
👉🏻[[Despacho]]
👉🏻[[Hall]]
🔐[[¿Quieres intentar salir?->Salida 1]]<div style="width: 100%;"><div style="position: relative; padding-bottom: 56.25%; padding-top: 0; height: 0;"><iframe frameborder="0" width="1200px" height="675px" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" src="https://view.genial.ly/5ede6ce62a753d0d96f037e8" type="text/html" allowscriptaccess="always" allowfullscreen="true" scrolling="yes" allownetworking="all"></iframe> </div> </div>
(set: _canción to (prompt: "Introduce código:", ""))
(if: _canción is "VARA")[ ¡Bien! Seguro que esto me sirve para salir de aquí. 👁 y 🖐🏻 a ver si te dejas algo en esta sala]
(else:)[ cua,cua,cua... ¡Las clases de música nunca han sido lo mío!
Vuelve a intentarlo.](set: _morse to (confirm: "¿Seguro que esa es la respuesta?"))
👁[[Explora el salón->Salon1]]
<div style="width: 100%;"><div style="position: relative; padding-bottom: 56.25%; padding-top: 0; height: 0;"><iframe frameborder="0" width="1200px" height="675px" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" src="https://view.genial.ly/5ede6ce62a753d0d96f037e8" type="text/html" allowscriptaccess="always" allowfullscreen="true" scrolling="yes" allownetworking="all"></iframe> </div> </div>
Esto me va a llevar más tiempo del que pensaba. Puedo dar por perdida la primera hora de clase.
Me ha parecido ver en la nevera algo de leche. Espero que esté fresquita porque el calor empieza a apretar. [Bebo]<bebo|
(Click:?Bebo)+ (replace:?Bebo)[No puedo evitar marearme ]
<div class="brebaje">Vienen a mi cabeza recuerdos.</div>
Soy yo el que está en ellos pero sin duda, no son de [ahora]<ahora|
(click-append:?ahora) [. "A veces me vienen a la mente imágenes como si estuviera viviendo en otro universo paralelo" ]
[[📺Voy a volver al salón a ver si encuentro algo->Salón]]
[[💻Me ha parecido ver un despacho.Seguro que encuentro algo allí->Despacho]]
[[💨Necesito tomar el aire->Balcón Cocina]]
[[🛌A ver si tengo suerte y hay alguien más en casa. Probablemente estára dormida->Dormitorio]]
<div style="width: 100%;"><div style="position: relative; padding-bottom: 56.25%; padding-top: 0; height: 0;"><iframe frameborder="0" width="1200px" height="675px" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" src="https://view.genial.ly/5ede6ce62a753d0d96f037e8" type="text/html" allowscriptaccess="always" allowfullscreen="true" scrolling="yes" allownetworking="all"></iframe> </div> </div>
¡Qué pena de aspecto!Debería cambiar de look, (cycling-link: bind _pistas, "quizá cambiar de color de pelo", "o cortármelo", "o definitivamente necesito cambiar de vida")
¿Cómo me quedaría el pelo (cycling-link: bind $head, "rojo", "en plan afro", "corte bob")?
[[Solo a mí se me ocurre ponerme a decidir esto ahora. ¡Que no puedo salir de aquí!->Explora la casa2]] <div style="width: 100%;"><div style="position: relative; padding-bottom: 56.25%; padding-top: 0; height: 0;"><iframe frameborder="0" width="1200px" height="675px" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" src="https://view.genial.ly/5ede6ce62a753d0d96f037e8" type="text/html" allowscriptaccess="always" allowfullscreen="true" scrolling="yes" allownetworking="all"></iframe> </div> </div>
Siempre me han gustado las peceras. Aunque veo pocos peces en ella...
Demasiadas sirenas para mi gusto. El dueño de la casa parece un poco excéntrico. Tienen vistosos colores y ¡vaya!
[[Escuchas como si hubiera un fallo eléctrico, proviene de la pecera...->Pecera]]
[[¡Qué paisaje tan fabuloso! Los pájaros se han levantado de buen humor.->Balcón Salón]]
<p style="text-align:center;">
<iframe src="https://giphy.com/embed/3ov9jIz1KEDTndoLII" width="429" height="480" frameBorder="0" class="giphy-embed" allowFullScreen></iframe><p><a href="https://giphy.com/gifs/angrybirds-singing-3ov9jIz1KEDTndoLII"></a></p><div style="width: 100%;"><div style="position: relative; padding-bottom: 56.25%; padding-top: 0; height: 0;"><iframe frameborder="0" width="1200px" height="675px" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" src="https://view.genial.ly/5ede6ce62a753d0d96f037e8" type="text/html" allowscriptaccess="always" allowfullscreen="true" scrolling="yes" allownetworking="all"></iframe> </div> </div>
(set: _cuadro to (prompt: "Detrás de cuadro hay ¡Una caja fuerte! Vaya por Dios, ¡otro código!
💡Introduce el código aquí y luego en el cuadro de la casa con dos espacios delante", ""))
(if: _cuadro is "VARA")[ ¡Vaya! No quiero que parezca que me llevo algo pero estar aquí despierta en mi conductas "extrañas".Seguro que estos documentos me sirven para algo.
👁 Mira los documentos.
[[Sigue explorando->Dormitorio]]👁]
(else:)[Cachis! No podía ser tan sencillo.Quizá necesite prestar más atención a mi alrededor.
[[Sigue explorando->Dormitorio]]<audio src="https://www.agorabierta.com/wp-content/uploads/2020/06/010688360_prev.mp3" autoplay> ](align: "=><==")[<img src="https://www.agorabierta.com/wp-content/uploads/2020/05/IMG_5160.png" width="500" height="450"alt="Dejavu">]
A partir de aquí comienzas un viaje algo peculiar.
Tendrás dos espacios que explorar
<ul style="list-style-type: square;">
<li><strong><span style="color: #ff0000;">La casa</span></strong></li>
<li><span style="color: #00ccff;"><strong>Tu voz interior</strong></span></li>
</ul>
Ambos se complementan y serán necesarios para completar tu experiencia
¡¡ATENCIÓN! Deberás tomar decisiones en el texto y visitar las habitaciones para encontrar nuevas pistas.Te recomiendo que cuando vayas a una habitación en la parte textual también lo hagas en la visual.
(align: "=><==")
[[<button class="favorite styled"
type="button">START->El despertar
</button>]]
<div style="width: 100%;"><div style="position: relative; padding-bottom: 56.25%; padding-top: 0; height: 0;"><iframe frameborder="0" width="1200px" height="675px" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" src="https://view.genial.ly/5ede6ce62a753d0d96f037e8" type="text/html" allowscriptaccess="always" allowfullscreen="true" scrolling="yes" allownetworking="all"></iframe> </div> </div>
Tan pronto entro, la tele parece ponerse en marcha sola...
Si creyese en fantasmas, diría que aquí hay uno encerrado... pero, como no creo, diría que hay un problema con el sistema eléctrico o bien alguien quiere gastarme una broma pesada... esto está cobrando un cariz misterioso...
<p style="text-align:center;">
<iframe src="https://giphy.com/embed/26vatxL2HE62vsdeo" width="480" height="360" frameBorder="0" class="giphy-embed" allowFullScreen></iframe><p><a href="https://giphy.com/gifs/animation-art-26vatxL2HE62vsdeo"></a></p>
👁Presta atención a la TV
[[Dirígete al despacho->Despacho]] <div style="width: 100%;"><div style="position: relative; padding-bottom: 56.25%; padding-top: 0; height: 0;"><iframe frameborder="0" width="1200px" height="675px" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" src="https://view.genial.ly/5ede6ce62a753d0d96f037e8" type="text/html" allowscriptaccess="always" allowfullscreen="true" scrolling="yes" allownetworking="all"></iframe> </div> </div>
Un cuarto minimalista.
Me gusta como combina la madera con el cristal.
Debería refrescarme un poco. Siempre dicen que una buena ducha revitaliza cuerpo y mente y en estos momentos me parece que necesito una.
Te duchas con [agua fría]<aguafría|(click-append:?aguafría) [¡Dios mió! se me ha congelado el cerebro, no se si ha sido buena idea]
Te duchas con (colour: "#ff1a1a")[agua caliente.]<aguacaliente| (click-append:?aguacaliente)+(text-style: "italic")[Somos nuestra memoria, somos ese quimérico museo de formas inconstantes, ese montón de espejos rotos.
Borges]
[[Vaya, qué profundo!->Explora la casa2]]
<div style="width: 100%;"><div style="position: relative; padding-bottom: 56.25%; padding-top: 0; height: 0;"><iframe frameborder="0" width="1200px" height="675px" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" src="https://view.genial.ly/5ede6ce62a753d0d96f037e8" type="text/html" allowscriptaccess="always" allowfullscreen="true" scrolling="yes" allownetworking="all"></iframe> </div> </div>
Si algun día tengo una casa propia quiero tener tantos balcones como esta.
<p style="text-align:center;">
<iframe src="https://giphy.com/embed/krP2NRkLqnKEg" width="443" height="480" frameBorder="0" class="giphy-embed" allowFullScreen></iframe><p><a href="https://giphy.com/gifs/help-satisfying-breathe-krP2NRkLqnKEg"></a></p>
Parece que se escucha algo que proviene de ese farolillo...
[[Te acercas y 🦻🏻->Código Hadas]]
[[El tiempo apremia, será algún tipo de grillo->Cocina 3]]🦗
<style>
/*
patternLock.js v 0.5.0
Author: Sudhanshu Yadav
Copyright (c) 2013 Sudhanshu Yadav - ignitersworld.com , released under the MIT license.
Demo and documentaion on: ignitersworld.com/lab/patternLock.html
*/
.patt-holder{background:#3382c0;-ms-touch-action:none}.patt-wrap{position:relative;cursor:pointer}.patt-wrap li,.patt-wrap ul{list-style:none;margin:0;padding:0}.patt-circ{position:relative;float:left;box-sizing:border-box;-moz-box-sizing:border-box}.patt-circ.hovered{border:3px solid #090}.patt-error .patt-circ.hovered{border:3px solid #BA1B26}.patt-hidden .patt-circ.hovered{border:0}.patt-dots,.patt-lines{border-radius:5px;height:10px;position:absolute}.patt-dots{background:#FFF;width:10px;top:50%;left:50%;margin-top:-5px;margin-left:-5px}.patt-lines{background:rgba(255,255,255,.7);transform-origin:5px 5px;-ms-transform-origin:5px 5px;-webkit-transform-origin:5px 5px}.patt-hidden .patt-lines{display:none}
.mhn-ui-date-time,
.text-center {
text-align: center
}
*,
:after,
:before {
box-sizing: border-box
}
.pull-left {
float: left
}
.pull-right {
float: right
}
.clearfix:after,
.clearfix:before {
content: '';
display: table
}
.clearfix:after {
clear: both;
display: block
}
.mhn-body{
margin: 0;
color: #fff;
background: transparent;
font: 300 14px/18px Roboto, sans-serif
}
.mhn-body a {
color: inherit;
text-decoration: none
}
.mhn-body a:hover {
text-decoration: underline
}
.mhn-ui-wrap {
width: 300px;
height: 475px;
overflow: hidden;
position: relative;
margin: 30px auto 0;
background: url(https://www.agorabierta.com/wp-content/uploads/2020/05/door-575968_1280.png) center no-repeat #2c3e50;
box-shadow: 0 17px 50px 0 rgba(0, 0, 0, .19), 0 12px 15px 0 rgba(0, 0, 0, .24)
}
.mhn-ui-wrap:before {
top: 0;
left: 0;
right: 0;
bottom: 0;
content: '';
position: absolute;
background: rgba(0, 0, 0, .4)
}
.mhn-ui-date-time {
color: #eee;
z-index: 100;
position: relative
}
.mhn-ui-date-time .mhn-ui-time {
font-size: 28px;
font-weight: 400;
margin-bottom: 15px
}
.mhn-ui-date-time .mhn-ui-day {
font-size: 24px;
margin-bottom: 10px
}
.mhn-ui-date-time .mhn-ui-date {
font-size: 18px;
font-weight: 400
}
.mhn-ui-app-time {
padding: 0 5px;
font-size: 12px;
text-align: right;
margin: -15px -15px auto;
background: rgba(0, 0, 0, .6)
}
.mhn-lock-wrap {
left: 0;
right: 0;
bottom: 0;
z-index: 100;
position: absolute
}
.mhn-lock-wrap .mhn-lock-title {
text-align: center;
text-shadow: 0 1px 1px rgba(0, 0, 0, .5)
}
.mhn-lock-wrap .mhn-lock-success {
color: transparent;
text-shadow: none
}
.mhn-lock-wrap .mhn-lock-failure {
color: #f34235
}
.mhn-lock {
margin: auto;
background: 0 0
}
.patt-wrap {
margin: auto;
overflow: hidden
}
.patt-wrap li {
transition: all .4s ease-in-out 0s
}
.patt-dots,
.patt-lines {
transition: background .1s ease-in-out 0s
}
.patt-circ {
border: 3px solid transparent
}
.patt-dots {
background: rgba(255, 255, 255, .8)
}
.patt-lines {
background: rgba(255, 255, 255, .4)
}
.patt-circ.hovered {
border-color: #ddd;
background: rgba(255, 255, 255, .2)
}
.patt-error .patt-circ.hovered {
background: rgba(243, 66, 53, .4);
border-color: rgba(243, 66, 53, .8)
}
.patt-error .patt-lines {
background: rgba(243, 66, 53, .5)
}
.patt-success .patt-circ.hovered {
background: rgba(75, 174, 79, .4);
border-color: rgba(75, 174, 79, .8)
}
.patt-success .patt-lines {
background: rgba(75, 174, 79, .5)
}
.mhn-ui-page {
height: 100%;
z-index: 200;
display: none;
padding: 15px;
position: relative
}
.mhn-ui-page.page-lock {
position: initial
}
.mhn-ui-page .mhn-ui-app-title-head {
padding: 15px;
font-size: 16px;
margin: 0 -15px;
background: rgba(0, 0, 0, .4)
}
.mhn-ui-page .mhn-ui-filter {
float: right;
position: relative
}
.mhn-ui-page .mhn-ui-filter .mhn-ui-btn {
right: 0;
top: -5px;
padding: 5px;
cursor: pointer;
position: absolute;
display: inline-block
}
.mhn-ui-page .mhn-ui-filter .mhn-ui-btn.active {
background: teal
}
.mhn-ui-page .mhn-ui-filter-list {
right: 0;
top: 20px;
padding: 5px;
width: 180px;
display: none;
position: absolute;
background: rgba(0, 0, 0, .8)
}
.mhn-ui-page .mhn-ui-filter-list>div {
display: block;
font-size: 14px;
cursor: pointer;
padding: 2px 4px
}
.mhn-ui-page .mhn-ui-filter-list>div.active {
color: teal
}
.mhn-ui-page .mhn-ui-filter-list>div:hover {
background: teal
}
.mhn-ui-page .mhn-ui-filter-list>div.active:hover {
background: 0 0
}
.mhn-ui-page .mhn-ui-row {
margin-top: 15px
}
.mhn-ui-page .mhn-ui-row:after,
.mhn-ui-page .mhn-ui-row:before {
content: '';
display: table
}
.mhn-ui-page .mhn-ui-row:after {
clear: both;
display: block
}
.mhn-ui-page .mhn-ui-col {
width: 25%;
float: left;
margin-bottom: 15px
}
.mhn-ui-bottom-link-bar {
left: 0;
right: 0;
bottom: 0;
padding: 15px;
position: absolute;
text-align: center
}
.mhn-ui-bottom-link-bar .mhn-ui-bottom-btn {
width: 40px;
height: 40px;
cursor: pointer;
font-size: 28px;
line-height: 40px;
text-align: center;
border-radius: 50%;
display: inline-block
}
.mhn-ui-bottom-link-bar .mhn-ui-bottom-btn:nth-child(1) {
margin-right: 15px
}
.mhn-ui-bottom-link-bar .mhn-ui-bottom-btn:nth-child(2) {
margin-left: 15px
}
.mhn-ui-bottom-link-bar .mhn-ui-bottom-btn:hover {
color: #ccc;
background: rgba(0, 0, 0, .8)
}
.mhn-ui-icon {
text-align: center
}
.mhn-ui-icon span {
width: 55px;
height: 55px;
margin: auto;
display: block;
font-size: 28px;
cursor: pointer;
line-height: 55px;
text-align: center;
border-radius: 15px;
background: rgba(0, 0, 0, .3);
transition: background .4s ease-in-out 0s;
box-shadow: 0 -1px 0 rgba(255, 255, 255, .5) inset
}
.mhn-ui-icon .mhn-ui-icon-title {
margin-top: 5px;
cursor: default;
overflow: hidden;
font-size: 13px;
text-overflow: ellipsis;
text-shadow: 0 1px 1px rgba(0, 0, 0, .5)
}
.mhn-ui-page.page-author img {
padding: 8px;
margin-top: 15px;
border-radius: 50%;
background: rgba(255, 255, 255, .7)
}
.mhn-ui-credit {
padding: 5px;
font-size: 13px;
margin-top: 15px;
background: rgba(0, 0, 0, .2);
border: 1px solid rgba(0, 0, 0, .2)
}
.mhn-ui-credit p {
margin: 0;
color: #aaa
}
.mhn-ui-credit a {
font-weight: 500
}
.mhn-ui-dialog-wrap {
top: 0;
left: 0;
right: 0;
bottom: 0;
display: none;
z-index: 1000;
position: absolute;
background: rgba(0, 0, 0, .7)
}
.mhn-ui-dialog {
padding: 15px;
background: #000;
margin: 50% 0 auto
}
.mhn-ui-dialog .mhn-ui-dialog-title {
font-size: 18px;
font-weight: 500
}
.mhn-ui-dialog .mhn-ui-dialog-btn {
padding: 5px;
min-width: 65px;
cursor: pointer;
margin-right: 10px;
text-align: center;
display: inline-block;
border: 2px solid rgba(255, 255, 255, .8)
}
.mhn-ui-dialog .mhn-ui-dialog-btn:hover {
background: #009688;
text-decoration: none
}
.mhn-ui-info {
margin: 30px 0;
font-size: 16px;
text-align: center
}
.mhn-ui-date,
.mhn-ui-time {
animation: zoomIn 1s
}
.mhn-ui-day {
animation: rubberBand 1s
}
.mhn-lock-failure {
animation: zoomIn .4s
}
.patt-circ:nth-child(1),
.patt-circ:nth-child(2),
.patt-circ:nth-child(3) {
animation: fadeInUp .4s
}
.patt-circ:nth-child(4),
.patt-circ:nth-child(5),
.patt-circ:nth-child(6) {
animation: fadeInUp .6s
}
.patt-circ:nth-child(7),
.patt-circ:nth-child(8),
.patt-circ:nth-child(9) {
animation: fadeInUp .8s
}
.mhn-ui-icon span {
animation: zoomIn .6s
}
.mhn-ui-bottom-btn {
animation: bounceInUp .8s
}
.mhn-ui-credit-list .mhn-ui-credit:nth-child(1) {
animation: fadeInUp .4s
}
.mhn-ui-credit-list .mhn-ui-credit:nth-child(2) {
animation: fadeInUp .5s
}
.mhn-ui-credit-list .mhn-ui-credit:nth-child(3) {
animation: fadeInUp .6s
}
.mhn-ui-credit-list .mhn-ui-credit:nth-child(4) {
animation: fadeInUp .7s
}
.mhn-ui-credit-list .mhn-ui-credit:nth-child(5) {
animation: fadeInUp .8s
}
.vertical-center{
margin-top:100px;
}
.salto{
margin-top:50px;text-align:center;
}
</style>
<script>
$(function(){
mhnUI.setup();
});
mhnUI = {
pattern: "",
setup: function() {
this.lock(), this.filter(), this.colors(), this.links.setup(), this.dialog.setup(), setInterval("mhnUI.datetime()", 1e3)
},
lock: function() {
mhnUI.page.hide(), pattern = new PatternLock(".mhn-lock", {
margin: 15
}), $(".mhn-lock-title").html($(".mhn-lock-title").data("title")), pattern.checkForPattern("321456987", function() {
$(".mhn-lock-title").html('<span class="mhn-lock-success">Yes! you unlocked pattern</span>'), $(".patt-holder").addClass("patt-success"), setTimeout(function() {
pattern.reset(), mhnUI.message()
}, 1e3), mhnUI.page.show()
}, function() {
$(".mhn-lock-title").html('<span class="mhn-lock-failure">Opps! pattern is not correct</span>'), $(".patt-holder").removeClass("patt-success"), setTimeout(function() {
pattern.reset(), mhnUI.message()
}, 2e3)
})
},
message: function() {
$(".mhn-lock-title span").fadeOut(), setTimeout(function() {
$(".mhn-lock-title").html($(".mhn-lock-title").data("title")), $(".mhn-lock-title span").fadeIn()
}, 500)
},
datetime: function() {
var t = new Array("Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"),
e = new Array("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"),
n = new Date,
i = n.getYear();
1e3 > i && (i += 1900);
var a = n.getDay(),
o = n.getMonth(),
s = n.getDate();
10 > s && (s = "0" + s);
var h = n.getHours(),
c = n.getMinutes(),
u = n.getSeconds(),
l = "AM";
h >= 12 && (l = "PM"), h > 12 && (h -= 12), 0 == h && (h = 12), 9 >= c && (c = "0" + c), 9 >= u && (u = "0" + u), $(".mhn-ui-date-time .mhn-ui-day").text(t[a]), $(".mhn-ui-date-time .mhn-ui-date").text(e[o] + " " + s + ", " + i), $(".mhn-ui-date-time .mhn-ui-time").text(h + ":" + c + " " + l), $(".mhn-ui-app-time").text(h + ":" + c + ":" + u + " " + l)
},
page: {
show: function(t) {
t = t ? t : "page-home", $(".mhn-ui-page").hide(), $(".mhn-ui-page." + t).show()
},
hide: function(t) {
t = t ? t : "page-lock", $(".mhn-ui-page").hide(), $(".mhn-ui-page." + t).show()
}
},
filter: function() {
$(".mhn-ui-filter .mhn-ui-btn").click(function() {
$(this).toggleClass("active"), $(".mhn-ui-filter-list").toggle(100)
}), $(".mhn-ui-filter-list>div").click(function() {
var t = $(this).data("filter");
$(this).siblings().removeAttr("class"), $(this).addClass("active");
var e = function(t) {
$(".mhn-ui-apps .mhn-ui-col").fadeOut(400), $('.mhn-ui-apps .mhn-ui-col[data-filter="' + t + '"]').fadeIn(400)
};
switch (t) {
case "all":
$(".mhn-ui-apps .mhn-ui-col").fadeIn(400);
break;
case "general":
e(t);
break;
case "social":
e(t);
break;
case "credits":
e(t)
}
$(".mhn-ui-filter-list").toggle(100), $(".mhn-ui-filter .mhn-ui-btn").removeClass("active"), $(".mhn-ui-page-title").text($(this).text())
})
},
colors: function() {
$(".mhn-ui-icon span").on("mouseover", function() {
$(this).css("background", $(this).data("color"))
}).on("mouseout", function() {
$(this).removeAttr("style")
})
},
links: {
setup: function() {
$(".mhn-ui-apps .mhn-ui-icon").click(function() {
var t = $(this).data("href"),
e = $(this).data("open");
t && mhnUI.links.href(t), e && mhnUI.page.show(e)
})
},
href: function(t) {
mhnUI.dialog.show(t)
}
},
dialog: {
setup: function() {
$('.mhn-ui-dialog-wrap,.mhn-ui-dialog-wrap a[data-action="cancel"]').click(function() {
mhnUI.dialog.hide()
}), $(".mhn-ui-dialog").click(function(t) {
t.stopPropagation()
}), $('.mhn-ui-dialog a[data-action="confirm"]').click(function() {
setTimeout(function() {
mhnUI.dialog.hide()
}, 400)
})
},
show: function(t) {
$('.mhn-ui-dialog-wrap a[data-action="confirm"]').attr("href", t), $(".mhn-ui-dialog-wrap").show()
},
hide: function() {
$('.mhn-ui-dialog-wrap a[data-action="confirm"]').removeAttr("href"), $(".mhn-ui-dialog-wrap").fadeOut(400)
}
}
};
/*
patternLock.js v 0.5.0
Author: Sudhanshu Yadav
Copyright (c) 2015 Sudhanshu Yadav - ignitersworld.com , released under the MIT license.
Demo on: ignitersworld.com/lab/patternLock.html
*/
!function(t,e,n,a){"use strict";function r(t){for(var e=t.holder,n=t.option,a=n.matrix,r=n.margin,i=n.radius,o=['<ul class="patt-wrap" style="padding:'+r+'px">'],s=0,l=a[0]*a[1];l>s;s++)o.push('<li class="patt-circ" style="margin:'+r+"px; width : "+2*i+"px; height : "+2*i+"px; -webkit-border-radius: "+i+"px; -moz-border-radius: "+i+"px; border-radius: "+i+'px; "><div class="patt-dots"></div></li>');o.push("</ul>"),e.html(o.join("")).css({width:a[1]*(2*i+2*r)+2*r+"px",height:a[0]*(2*i+2*r)+2*r+"px"}),t.pattCircle=t.holder.find(".patt-circ")}function i(t,e,n,a){var r=e-t,i=a-n;return{length:Math.ceil(Math.sqrt(r*r+i*i)),angle:Math.round(180*Math.atan2(i,r)/Math.PI)}}function o(){}function s(e,n){var a=this,i=a.token=Math.random(),h=p[i]=new o,u=h.holder=t(e);if(0!=u.length){h.object=a,n=h.option=t.extend({},s.defaults,n),r(h),u.addClass("patt-holder"),"static"==u.css("position")&&u.css("position","relative"),u.on("touchstart mousedown",function(t){d.call(this,t,a)}),h.option.onDraw=n.onDraw||l;var c=n.mapper;h.mapperFunc="object"==typeof c?function(t){return c[t]}:"function"==typeof c?c:l,h.option.mapper=null}}var l=function(){},p={},d=function(e,a){e.preventDefault();var r=p[a.token];if(!r.disabled){r.option.patternVisible||r.holder.addClass("patt-hidden");var i="touchstart"==e.type?"touchmove":"mousemove",o="touchstart"==e.type?"touchend":"mouseup";t(this).on(i+".pattern-move",function(t){h.call(this,t,a)}),t(n).one(o,function(){u.call(this,e,a)});var s=r.holder.find(".patt-wrap"),l=s.offset();r.wrapTop=l.top,r.wrapLeft=l.left,a.reset()}},h=function(e,n){e.preventDefault();var a=e.pageX||e.originalEvent.touches[0].pageX,r=e.pageY||e.originalEvent.touches[0].pageY,o=p[n.token],s=o.pattCircle,l=o.patternAry,d=o.option.lineOnMove,h=o.getIdxFromPoint(a,r),u=h.idx,c=o.mapperFunc(u)||u;if(l.length>0){var f=i(o.lineX1,h.x,o.lineY1,h.y);o.line.css({width:f.length+10+"px",transform:"rotate("+f.angle+"deg)"})}if(u){if(-1==l.indexOf(c)){var v,m=t(s[u-1]);if(o.lastPosObj){for(var g=o.lastPosObj,x=g.i,w=g.j,b=Math.abs(h.i-x),j=Math.abs(h.j-w);(0==b&&j>1||0==j&&b>1||j==b&&j>1)&&(w!=h.j||x!=h.i);){x=b?Math.min(h.i,x)+1:x,w=j?Math.min(h.j,w)+1:w,b=Math.abs(h.i-x),j=Math.abs(h.j-w);var M=(w-1)*o.option.matrix[1]+x,y=o.mapperFunc(M)||M;-1==l.indexOf(y)&&(t(s[M-1]).addClass("hovered"),l.push(y))}v=[],h.j-g.j>0?v.push("s"):h.j-g.j<0?v.push("n"):0,h.i-g.i>0?v.push("e"):h.i-g.i<0?v.push("w"):0,v=v.join("-")}m.addClass("hovered"),l.push(c);var P=o.option.margin,k=o.option.radius,C=(h.i-1)*(2*P+2*k)+2*P+k,O=(h.j-1)*(2*P+2*k)+2*P+k;if(1!=l.length){var D=i(o.lineX1,C,o.lineY1,O);o.line.css({width:D.length+10+"px",transform:"rotate("+D.angle+"deg)"}),d||o.line.show()}v&&(o.lastElm.addClass(v+" dir"),o.line.addClass(v+" dir"));var E=t('<div class="patt-lines" style="top:'+(O-5)+"px; left:"+(C-5)+'px"></div>');o.line=E,o.lineX1=C,o.lineY1=O,o.holder.append(E),d||o.line.hide(),o.lastElm=m}o.lastPosObj=h}},u=function(t,e){t.preventDefault();var n=p[e.token],a=n.patternAry.join("");n.holder.off(".pattern-move").removeClass("patt-hidden"),a&&(n.option.onDraw(a),n.line.remove(),n.rightPattern&&(a==n.rightPattern?n.onSuccess():(n.onError(),e.error())))};o.prototype={constructor:o,getIdxFromPoint:function(t,e){var n=this.option,a=n.matrix,r=t-this.wrapLeft,i=e-this.wrapTop,o=null,s=n.margin,l=2*n.radius+2*s,p=Math.ceil(r/l),d=Math.ceil(i/l),h=r%l,u=i%l;return p<=a[1]&&d<=a[0]&&h>2*s&&u>2*s&&(o=(d-1)*a[1]+p),{idx:o,i:p,j:d,x:r,y:i}}},s.prototype={constructor:s,option:function(t,e){var n=p[this.token],i=n.option;return e===a?i[t]:(i[t]=e,void(("margin"==t||"matrix"==t||"radius"==t)&&r(n)))},getPattern:function(){return p[this.token].patternAry.join("")},setPattern:function(t){var e=p[this.token],n=e.option,a=n.matrix,r=n.margin,i=n.radius;if(n.enableSetPattern){this.reset(),e.wrapLeft=0,e.wrapTop=0;for(var o=0;o<t.length;o++){var s=t[o]-1,d=s%a[1],u=Math.floor(s/a[1]),c=d*(2*r+2*i)+2*r+i,f=u*(2*r+2*i)+2*r+i;h.call(null,{pageX:c,pageY:f,preventDefault:l,originalEvent:{touches:[{pageX:c,pageY:f}]}},this)}}},enable:function(){var t=p[this.token];t.disabled=!1},disable:function(){var t=p[this.token];t.disabled=!0},reset:function(){var t=p[this.token];t.pattCircle.removeClass("hovered dir s n w e s-w s-e n-w n-e"),t.holder.find(".patt-lines").remove(),t.patternAry=[],t.lastPosObj=null,t.holder.removeClass("patt-error patt-success")},error:function(){p[this.token].holder.addClass("patt-error")},checkForPattern:function(t,e,n){var a=p[this.token];a.rightPattern=t,a.onSuccess=e||l,a.onError=n||l}},s.defaults={matrix:[3,3],margin:20,radius:25,patternVisible:!0,lineOnMove:!0,enableSetPattern:!1},e.PatternLock=s}(jQuery,window,document);
</script>
<div class="mhn-body"><div class="mhn-ui-wrap"><div class="mhn-ui-page page-lock"><div class="mhn-ui-date-time"><div class="mhn-ui-time">6:02 PM</div><div class="mhn-ui-day">Sábado</div><div class="mhn-ui-date">Junio 13, 2020</div></div><div class="mhn-lock-wrap"><div class="mhn-lock-title" data-title="¿Recuerdas?La última letra de tu nombre"></div><div class="mhn-lock"></div></div></div><div class="mhn-ui-page page-home"><div class="mhn-ui-app-time"> </div><div class="mhn-ui-app-title-head"><span class="mhn-ui-page-title">Bloqueo de puerta</span></div><div class="mhn-ui-row mhn-ui-apps"><div class="text-center vertical-center">DESBLOQUEADA ✅</div><div class="salto">[[Todavía te queda una contraseña->Salida 2]]</div></div><div class="mhn-ui-bottom-link-bar"><span class="mhn-ui-bottom-btn ion-ios-locked" onclick="mhnUI.page.show('page-lock')"></span></div></div</div></div></div>
[[⏪Regresa y sigue buscando->Explora la casa]] <p style="text-align:center;">
<iframe src="https://learningapps.org/watch?v=p6t4kgm6320" style="border:0px;width:100%;height:660px" webkitallowfullscreen="true" mozallowfullscreen="true"></iframe></p>
[[¡Me es tan familiar!Me parece estar viviendo eso que llaman un Dejàvú->Cocina5]]"
(align: "=><==")[<img src="https://www.agorabierta.com/wp-content/uploads/2020/06/codigo-de-hadas.jpg" width="500" height="450"alt="Dejavu">]¿Qué coñ...es esto?
<div style="width: 100%;"><div style="position: relative; padding-bottom: 56.25%; padding-top: 0; height: 0;"><iframe frameborder="0" width="1200px" height="675px" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" src="https://view.genial.ly/5ede6ce62a753d0d96f037e8" type="text/html" allowscriptaccess="always" allowfullscreen="true" scrolling="yes" allownetworking="all"></iframe> </div> </div>
Qué me pase el día en la cocina es algo para reflexionar, debería [seguir explorando]<seguirexplorando| la casa
De hambre no vas a morir a no ser que consigas salir de aquí.
(click-goto: ?seguirexplorando, 'Salón')
(align: "=><==")[<img src="https://media.istockphoto.com/photos/pirate-hook-arm-isolated-picture-id499644535?k=6&m=499644535&s=612x612&w=0&h=emR78sn1TOjD3qudVcTOcQao9PA8MQ-J49XE4HWplfg=" width="500" height="450"alt="Garfio">]
[<audio src="https://www.agorabierta.com/wp-content/uploads/2020/06/para-los-peques-cancion-del-pirata-peter-pan.mp3" autoplay>]
[Es escuchar esto y empezar a temblar. [[Mejor salgo de aquí->Explora la casa2]] ]Si has pensado que esto acaba aquí, estás muy equivocado.
Esto es solo un pequeño dejàvú.
Encontrarás nuevas salas en este Palacio de la Memoria donde tú eres la clave para ordenar la narrativa que ha seguido tu vida.
¿Te atreves a continuar?
<p style="text-align:center;">
<iframe src="https://giphy.com/embed/1VXbEekqXF5fnavMsG" width="480" height="392" frameBorder="0" class="giphy-embed" allowFullScreen></iframe><p><a href="https://giphy.com/gifs/europeanspaceagency-1VXbEekqXF5fnavMsG">via GIPHY</a></p>
[[Licencias]]
<style>
@import url("https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css");
.gradient, .login, .outer {
background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzhkZGRmZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzA1NjZhOSIvPjwvcmFkaWFsR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
background: -moz-radial-gradient(#8dddff, #0566a9);
background: -webkit-radial-gradient(#8dddff, #0566a9);
background: radial-gradient(#8dddff, #0566a9);
background-size: 360px 600px;
background-position: center -90%;
}
.preloader {
animation: none;
transition: none;
}
.login {
display: inline-block;
width: 180px;
height: 300px;
padding: 30px 25px;
margin: -180px -115px;
position: absolute;
top: 50%;
left: 50%;
text-align: left;
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
border: 1px solid #5c5c5c;
border-radius: 5px;
box-shadow: rgba(0, 0, 0, 0.25) 0 2px 4px 1px, rgba(0, 0, 0, 0.25) 0 2px 55px 3px;
box-sizing: content-box;
}
.login:before {
content: "";
width: 100%;
height: .1em;
position: absolute;
top: 0px;
left: 0;
background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.97) 0%, rgba(255, 255, 255, 0.16) 70%);
background-size: 100% 150%;
background-position: center center;
}
.login .photo {
width: 88px;
height: 88px;
overflow: hidden;
position: relative;
margin: 0 auto;
margin-top: 10%;
border-radius: 50%;
border: 2px solid rgba(0, 0, 0, 0.7);
box-shadow: 0 -2px 0px 2px rgba(255, 255, 255, 0.15), 0 2px 2px 2px rgba(0, 0, 0, 0.15), 0 -4px 20px 0px rgba(255, 255, 255, 0.4), 0 0px 140px 0px rgba(0, 120, 120, 0.8), 0 -45px 90px 0px rgba(255, 255, 255, 0.3), 0 4px 39px 0px rgba(0, 0, 0, 0.4);
}
.login .photo:before {
content: '';
width: 90px;
height: 90px;
background: url("https://cdn.pixabay.com/photo/2016/06/02/16/03/freedom-1431380_1280.png");
background-size: 100%;
position: absolute;
border-radius: 50%;
}
.login .name {
width: 100%;
line-height: 1;
text-align: center;
font-size: 0.89em;
color: white;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
transition: all 300ms ease;
position: absolute;
left: 0;
margin-top: 34px;
}
input {
box-sizing: border-box;
width: 100%;
margin-top: 15px;
padding: 5px 2px;
font-size: 0.8em;
border: 1px solid rgba(0, 0, 0, 0.3);
border-radius: 3px;
-moz-box-shadow: rgba(0, 0, 0, 0.15) 0 1px 2px 0 inset, rgba(0, 0, 100, 0.3) 0 1px 0 0;
-webkit-box-shadow: rgba(0, 0, 0, 0.15) 0 1px 2px 0 inset, rgba(0, 0, 100, 0.3) 0 1px 0 0;
box-shadow: rgba(0, 0, 0, 0.15) 0 1px 2px 0 inset, rgba(0, 0, 100, 0.3) 0 1px 0 0;
}
input:focus {
outline: 0;
border: 1px solid #77a7c0;
-moz-box-shadow: rgba(20, 113, 184, 0.5) 0 0 3px 1px, rgba(20, 113, 184, 0.5) 0 0 2px 1px inset;
-webkit-box-shadow: rgba(20, 113, 184, 0.5) 0 0 3px 1px, rgba(20, 113, 184, 0.5) 0 0 2px 1px inset;
box-shadow: rgba(20, 113, 184, 0.5) 0 0 3px 1px, rgba(20, 113, 184, 0.5) 0 0 2px 1px inset;
}
input::input-placeholder {
color: rgba(20, 20, 20, 0.5);
}
.username-wrap {
position: relative;
}
.username-wrap:after {
content: "\f18e";
display: inline-block;
font-smoothing: antialiased;
font-family: 'FontAwesome';
position: absolute;
right: 5px;
top: 5px;
color: rgba(40, 51, 53, 0.4);
font-size: 1.25em;
}
.username {
margin-bottom: 10px;
margin-top: 30px;
transition: all 300ms ease;
display: block;
opacity: 1;
}
.hidden {
opacity: 0;
transition: all 300ms ease;
visibility: hidden;
}
.inner, .outer, .spine, .shadow {
position: absolute;
width: 100%;
}
.inner:after, .outer:after {
content: '\f023';
top: 33%;
left: 42%;
font-size: 1em;
line-height: 1.7em;
padding: .125em;
width: 2em;
height: 2em;
border-radius: 50%;
border: 1px solid white;
position: absolute;
font-smoothing: antialiased;
font-family: 'FontAwesome';
box-sizing: border-box;
}
.inner:after {
content: "\f09c";
}
.inner {
background-color: #283335;
text-shadow: 0 -2px 4px rgba(0, 0, 0, 0.2);
height: 100%;
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.2) 100%);
}
.spine {
top: .25em;
background: #282d2d;
height: .25em;
transform: rotateX(90deg);
transform-origin: center top;
}
.outer {
height: 100%;
background-position: center -117%;
transform: translateZ(0.25rem);
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.pw-box {
height: 110px;
width: 228px;
background: rba(0, 0, 0, 0.9);
position: absolute;
left: 1px;
padding: 10px;
transition: all .55s ease;
box-shadow: inset 0px -60px 70px rgba(0, 0, 0, 0.9);
box-sizing: border-box;
perspective: 320px;
}
.pw-active .pw-box {
background: rgba(0, 0, 0, 0.2);
box-shadow: inset 0px 5px 10px rgba(0, 0, 0, 0.2);
}
.pw-box .flap {
position: absolute;
color: white;
text-align: center;
pointer-events: none;
z-index: 100;
background-color: rgba(255, 0, 0, 0.3);
width: 100%;
height: 100%;
position: absolute;
display: block;
top: 0;
left: 0;
transition: all 0.6s cubic-bezier(0.2, 0.7, 0.1, 1.1);
transform-origin: center bottom;
transform-style: preserve-3d;
}
.pw-active .pw-box .flap {
transform: rotateX(-110deg);
}
.login-body {
text-align: center;
-moz-background-size: cover;
-o-background-size: cover;
-webkit-background-size: cover;
background-size: cover;
background-color: #dcdcdc;
font-size: 16px;
line-height: 18px;
background: url(data:image/png;base64,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);
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$( document ).ready(function() {
var userInput = $('#username-input'),
userWrap = $('.username-wrap'),
user = $('#name'),
passInput = $('#password-input'),
passWrap = $('.password-wrap'),
pass = $('#password');
userInput.keyup(function (event) {
if (event.which == 13) {
var name = $(this).val();
if (name==="John Darling") {
user.text(name);
userInput.addClass('hidden');
userWrap.addClass('hidden');
user.removeClass('hidden');
user.parent().addClass('pw-active');
$('.password').focus();
}
return false;
}
});
user.click(function (event) {
user.addClass('hidden');
user.parent().removeClass('pw-active');
userInput.removeClass('hidden');
userWrap.removeClass('hidden');
});
passInput.keyup(function (event) {
if (event.which == 13) {
var password = $(this).val();
if (password==="116") {
passInput.hide();
pass.removeClass('hidden');
}
return false;
}
});
});
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script>
<div class="login-body"><div class="login"><div class="photo"></div><p class="name hidden" id="name">John Darling</p><div class="username-wrap"><input type="username" class="username" placeholder="¿Quién vive aquí?" id="username-input" /></div><div class="pw-box"><span class="flap"><div class="inner"></div><div class="spine"></div><div class="outer"></div></span><span class="shadow"></span><div class="password-wrap"><input type="password" id="password-input" class="password" placeholder="¿Cuántos años llevas aquí?" /><div class="password hidden" id="password"><p>Puerta desbloqueada. Abre la puerta</p><p>[[Final]]</p></div></div></div></div></div>
Licencia codigo contraseña 1:
Copyright (c) 2020 by Mohan Khadka (https://codepen.io/khadkamhn/pen/EVaJLy)
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
Licencia código 2
Copyright (c) 2020 by Hans Engebretsen (https://codepen.io/hans/pen/awhFr)
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
<div style="width: 100%;"><div style="position: relative; padding-bottom: 56.25%; padding-top: 0; height: 0;"><iframe frameborder="0" width="1200px" height="675px" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" src="https://view.genial.ly/5ede6ce62a753d0d96f037e8" type="text/html" allowscriptaccess="always" allowfullscreen="true" scrolling="yes" allownetworking="all"></iframe> </div> </div>
Seguro que estoy pasando algo por alto.
¡Será mejor que ponga todos mis sentidos en esto, que veo que me quedo aquí toda la eternidad!
<p style="text-align:center;">
<iframe src="https://giphy.com/embed/D1MZXWEpVBkL6" width="480" height="202" frameBorder="0" class="giphy-embed" allowFullScreen></iframe><p><a href="https://giphy.com/gifs/black-and-white-forever-sarcasm-D1MZXWEpVBkL6"></a></p>
👉🏻[[Cocina]]
👉🏻[[Salón]]
👉🏻[[Dormitorio]]
👉🏻[[Despacho]]
👉🏻[[Hall]]
🔐[[¿Quieres intentar salir?->Salida 1]]