EN605.607.81.SP22_ASDM_Project/front_end/index.html

197 lines
3.8 KiB
HTML
Raw Normal View History

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Four-Line Dropper</title>
<style>
b {
color: #FFF;
}
div.menu {
background-color: #555;
position: absolute;
top: 25%;
left: 25%;
width: 50%;
height: 50%;
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 8px;
grid-auto-rows: 33%;
}
div.singlePlayerMenu {
grid-row: 2;
grid-column: 2;
display: grid;
}
button.menuSinglePlayerEasy {
grid-row: 1;
grid-column: 1;
}
button.menuSinglePlayerNormal {
grid-row: 2;
grid-column: 1;
}
button.menuSinglePlayerHard {
grid-row: 3;
grid-column: 1;
}
button.menuLocalMultiplayer {
grid-row: 2;
grid-column: 3;
}
button.menuMultiplayer {
grid-row: 2;
grid-column: 4;
}
b.menuText {
color: #FFF;
grid-row: 1;
grid-column: 2 / 5;
line-height: 64px;
text-align: center;
}
div.hidden_menu {
display: none;
}
div.wrapper {
display: grid;
grid-template-columns: repeat(7, 50px) 400px;
gap: 2px;
grid-auto-rows: 50px;
border: 0px;
}
div.info_text_wrapper {
grid-row: 9;
grid-column: 1 / 8;
}
div.info_text_turn_wrapper {
grid-row: 1;
grid-column: 8;
}
div.info_text0 {
background-color: #DDD;
width: 100%;
height: 400px;
overflow-x: hidden;
overflow-y: auto;
word-wrap: break-word;
display: flex;
flex-direction: column-reverse;
}
div.info_text1 {
background-color: #333;
width: 100%;
height: 100%;
overflow-x: hidden;
overflow-y: hidden;
word-wrap: break-word;
display: flex;
flex-direction: column-reverse;
}
b.cyan {
color: #0FF;
}
b.magenta {
color: #F0F;
}
button.slot {
width: 50px;
height: 50px;
border: 1px solid black;
padding: 0px;
}
button.r0 {
grid-row: 1;
}
button.r1 {
grid-row: 2;
}
button.r2 {
grid-row: 3;
}
button.r3 {
grid-row: 4;
}
button.r4 {
grid-row: 5;
}
button.r5 {
grid-row: 6;
}
button.r6 {
grid-row: 7;
}
button.r7 {
grid-row: 8;
}
button.c0 {
grid-column: 1;
}
button.c1 {
grid-column: 2;
}
button.c2 {
grid-column: 3;
}
button.c3 {
grid-column: 4;
}
button.c4 {
grid-column: 5;
}
button.c5 {
grid-column: 6;
}
button.c6 {
grid-column: 7;
}
button.open {
background: #FFF;
}
button.cyan {
background: #0FF;
}
button.magenta {
background: #F0F;
}
button.win {
animation-duration: 400ms;
animation-name: blink;
animation-iteration-count: infinite;
animation-direction: alternate;
}
@keyframes blink {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
button.placed {
animation-duration: 2200ms;
animation-name: placed_blink;
animation-iteration-count: 1;
animation-direction: normal;
}
@keyframes placed_blink {
from {
opacity: 1;
}
50% {
opacity: 0;
}
to {
opacity: 1;
}
}
</style>
</head>
</html>
<!-- vim: et ts=2 sts=2 sw=2
-->