<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body{
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
color: white;
}
#title{
display: grid;
width: 100%;
place-items: center;
font-size: 40px;
padding-top: 1.5vh;
padding-bottom: 2vh;
}
#board{
display: grid;
margin: 0 auto;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: repeat(5, 1fr);
grid-column-gap: 0px;
grid-row-gap: 0px;
place-items: center;
width: 85%;
height: 88vh;
}
.card{
cursor: pointer;
display: flex;
border: 0ch;
color: white;
font-family: inherit;
width: 10vw;
height: 15vh;
background-color: #1b1b1b;
padding: 4% 4% 4% 4%;
align-items:center;
justify-content: center;
text-align: center;
font-size: 78%;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}
.card:hover{
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}
.cardAct{
cursor: pointer;
display: flex;
border: 0ch;
color: white;
font-family: inherit;
width: 10vw;
height: 15vh;
background-color: #f83f07;
padding: 4% 4% 4% 4%;
align-items:center;
justify-content: center;
text-align: center;
font-size: 78%;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}
.cardAct:hover{
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}
#metricBox{
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(1, 1fr);
margin-bottom: 3vh;
padding-left: 5%;
}
.indicator{
color: white;
width: 90%;
}
#prcInd{
text-align: right;
}
.parent {
width: 100vw;
height: 100vh;
margin: 0 auto;
position: absolute;
top: 0;
left: 0;
display: grid;
grid-template-columns: minmax(200px, 70%) 1fr;
}
.main{
background-color: rgb(46, 46, 46);
color: white;
}
.side{
background-color: #1b1b1b;
color: gray;
box-shadow: 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12), 0 5px 5px -3px rgba(0, 0, 0, .2);
}
#meterContainer{
margin-top: 10vh;
margin-left: 3vw;
margin-right: 3vw;
}
.meter {
height: 20px; /* Can be anything */
position: relative;
background: #555;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
border-radius: 25px;
padding: 10px;
box-shadow: inset 0 -1px 1px rgba(255,255,255,0.3);
}
.meter > span {
display: block;
height: 100%;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
background-color: #f83f07;
background-image: linear-gradient(
center bottom,
#f83f07 37%,
#f19865 69%
);
box-shadow:
inset 0 2px 9px rgba(255,255,255,0.3),
inset 0 -2px 6px rgba(0,0,0,0.4);
position: relative;
overflow: hidden;
transition: width 0.4s ease-in-out, left 1s ease-in-out;
-moz-transition: width 0.4s ease-in-out, left 1s ease-in-out;
-o-transition: width 0.4s ease-in-out, left 1s ease-in-out;
-webkit-transition: width 0.4s ease-in-out, left 1s ease-in-out;
}
.meter > span:after{
animation: move 2s linear infinite;
}
</style>
<script>
var listaActivos = []
function updateBar(prc,isIncrement){
var prb = document.getElementById("prbar");
var indicador = document.getElementById("prcInd")
crt = prb.style.width;
crt = crt.replaceAll("%","")
crt = parseInt(crt)
if (isIncrement){
crt = crt + parseInt(prc)
if (crt > 100){
crt = 100
}
}else{
crt = crt - parseInt(prc)
if (crt < 0){
crt = 0
}
}
crt = crt.toString()
crt = crt + "%"
prb.style.width = (crt);
indicador.innerHTML=crt
}
function clc(iden){
var elemento = document.getElementById(iden)
if (listaActivos.includes(iden)){ // Descartar
listaActivos = listaActivos.filter(x => x != iden)
updateBar(4,false)
elemento.setAttribute("class","card")
}else{
listaActivos.push(iden)
updateBar(4,true)
elemento.setAttribute("class","cardAct")
}
}
</script>
<title>Bingo</title>
</head>
<body>
<div class="parent">
<div class="section main" >
<div id="title">Weaboo Bingo</div>
<div id="board">
<button id="00" onclick="clc('00')" class="card">Your phone or computer has an anime-themed background currently set</button>
<button id="01" onclick="clc('01')" class="card">You have masturbated to anime-like porn within the last week</button>
<button id="02" onclick="clc('02')" class="card">You became interested in anime/manga less than 5 years ago</button>
<button id="03" onclick="clc('03')" class="card">You have a waifu/husbando</button>
<button id="04" onclick="clc('04')" class="card">You are currently reading at least one manga</button>
<button id="10" onclick="clc('10')" class="card">You like at least one shounen anime</button>
<button id="11" onclick="clc('11')" class="card">You have used a word such as "kawaii", "senpai", "-chan" or "-kun" in casual conversation</button>
<button id="12" onclick="clc('12')" class="card">You have wanted to learn Japanese at some point in your life</button>
<button id="13" onclick="clc('13')" class="card">You have cried at least once because of an anime or manga</button>
<button id="14" onclick="clc('14')" class="card">One of your favorite snacks is Pocky</button>
<button id="20" onclick="clc('20')" class="card">You have lost count of the number of anime/manga series you have watched or read</button>
<button id="21" onclick="clc('21')" class="card">There is at least one anime/manga you wish you could live in</button>
<button id="22" onclick="clc('22')" class="card" style="font-weight: bold; font-size: medium;">You watch anime</button>
<button id="23" onclick="clc('23')" class="card">An anime character has been your profile picture in any website</button>
<button id="24" onclick="clc('24')" class="card">People reffering to anime as cartoons bothers you</button>
<button id="30" onclick="clc('30')" class="card">Your favorite anime character has abnormally collored hair (blue, pink, etc.)</button>
<button id="31" onclick="clc('31')" class="card">You would rather live in Japan than in your current counrty</button>
<button id="32" onclick="clc('32')" class="card">You have collected trading cards that relate to a certain anime at least once</button>
<button id="33" onclick="clc('33')" class="card">Deep inside, you label yourself as an otaku</button>
<button id="34" onclick="clc('34')" class="card">You draw anime characters as a hobby</button>
<button id="40" onclick="clc('40')" class="card">You have introduced someone you personally know to anime/manga</button>
<button id="41" onclick="clc('41')" class="card">At least one of the past three anime you watched was in English</button>
<button id="42" onclick="clc('42')" class="card">You can name at least 5 people who know that you watch anime or read manga</button>
<button id="43" onclick="clc('43')" class="card">You have written or have wanted to write at least one doujinshi</button>
<button id="44" onclick="clc('44')" class="card">You have played and enjoyed at least one game developed by Atlus</button>
</div>
</div>
<div class="section side" >
<div id="meterContainer">
<div id="metricBox">
<span class="indicator">Percentage:</span>
<span class="indicator" id="prcInd">0%</span>
</div>
<div class="meter">
<span id="prbar" style="width: 0%"></span>
</div>
</div>
</div>
</div>
</body>
</html>