Glitch (tabu)
2c33b104ad
./public/script.js:1954897/14033 ./public/styles.css:1954897/577 ./views/index.html:1954897/45
87 lines
3.9 KiB
HTML
87 lines
3.9 KiB
HTML
<!doctype html>
|
|
<!--
|
|
Made with love by MindfulMinun
|
|
Hecho con amor por MindfulMinun
|
|
https://benjic.xyz
|
|
-->
|
|
<html lang="es-US" dir="ltr" class="no-js">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Tabú</title>
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width">
|
|
<meta name="theme-color" content="#79B791">
|
|
|
|
<!-- Google Fonts -->
|
|
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i">
|
|
<link rel="stylesheet" href="./reset.css">
|
|
<link rel="stylesheet" href="./styles.css">
|
|
<script>document.documentElement.classList.remove('no-js')</script>
|
|
<style media="screen">.no-js .no-js-hide { display: none; }</style>
|
|
</head>
|
|
<body>
|
|
<div class="container middle" id="main">
|
|
<div class="lead">
|
|
<h1>Tabú</h1>
|
|
<p>
|
|
Cada quien tendrá una palabra o frase en la frente.<br>
|
|
El objetivo es hacer que la digan.
|
|
</p>
|
|
</div>
|
|
<noscript>
|
|
<p class="warn">Este juego requiere que JavaScript esté habilitado. Por favor préndalo y actualiza la página.</p>
|
|
</noscript>
|
|
<div class="flex no-js-hide">
|
|
<button class="btn" data-open="view1">Jugar</button>
|
|
<button class="btn" data-open="rules">Repasar las reglas</button>
|
|
</div>
|
|
</div>
|
|
<div class="container" id="rules" hidden>
|
|
<h1>Reglas</h1>
|
|
<p>
|
|
Se juega con al menos tres jugadores. A cada quien se le asignará una
|
|
"palabra prohibida". Todos menos este pueden ver la palabra. El juego
|
|
se trata en mantener y manejar una conversación que los demás digan sus
|
|
palabras prohibidas sin que tú digas la tuya.
|
|
</p>
|
|
<p>
|
|
Los jugadores escribirán una palabra prohibida para la persona a su lado.
|
|
Esta <em>debe</em> ser un sustantivo, verbo, adjetivo, adverbio o frase común.
|
|
<strong>No</strong> puede ser un artículo, pronombre, conjunción ni exclamación.
|
|
</p>
|
|
<div class="btn-row">
|
|
<button class="btn" data-open="prev">Entendido</button>
|
|
</div>
|
|
</div>
|
|
<div class="container middle" id="view1" hidden>
|
|
<h1 class="h4 center">Dale el celular a la persona a tu izquierda.</h1>
|
|
<img src="unboxing.svg" class="graphic" alt="">
|
|
<div class="btn-row">
|
|
<button class="btn" data-open="view2" data-fire="word">¡Listo!</button>
|
|
</div>
|
|
</div>
|
|
<div class="container" id="view2" hidden>
|
|
<h1 class="h4">Escribe una palabra</h1>
|
|
<p>
|
|
Escribe una palabra o frase. Acuérdate que solo puede ser
|
|
sustantivo, verbo, adjetivo, adverbio o frase común.
|
|
No se permiten artículos, pronombres, conjunciones ni exclamaciones.
|
|
</p>
|
|
<input type="text" placeholder="p. ej., " id="input">
|
|
<div id="wordBank">…</div>
|
|
<div class="btn-row">
|
|
<button class="btn" data-fire="word">Más palabras</button>
|
|
<button class="btn" data-open="view3" data-fire="fs" disabled>¡Listo!</button>
|
|
</div>
|
|
</div>
|
|
<div class="container middle" id="view3" hidden>
|
|
<h1 class="h4">Coloca el teléfono sobre la frente</h1>
|
|
<p>Toca la pantalla cuando estés listo.</p>
|
|
</div>
|
|
<!-- <div class="container middle" id="view3" hidden>
|
|
<h1 class="h4">Coloca el teléfono sobre la frente</h1>
|
|
<p>Toca la pantalla cuando estés listo.</p>
|
|
</div> -->
|
|
</body>
|
|
<script src="./script.js" charset="utf-8"></script>
|
|
</html> |