Stephen Seo
462dec9ea1
All NodeRefs have been removed in favor of "getElementById". Turn indicator is now much more obvious to see.
113 lines
2.1 KiB
HTML
113 lines
2.1 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title>Four-Line Dropper</title>
|
|
<style>
|
|
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;
|
|
}
|
|
</style>
|
|
</head>
|
|
</html>
|
|
|
|
<!-- vim: et ts=2 sts=2 sw=2
|
|
-->
|