Stephen Seo
cd9f7446a4
(MVP is Minimum Viable Product.) Enough is implemented to view a 7x8 board and click on the tiles in the board to change their states.
80 lines
1.3 KiB
HTML
80 lines
1.3 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);
|
|
gap: 2px;
|
|
grid-auto-rows: 50px;
|
|
border: 0px;
|
|
}
|
|
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
|
|
-->
|