Commit inicial

2025-08-23 23:00:03 -03:00 · 2025-08-23 23:00:03 -03:00 · 5678ee9bd4
commit 5678ee9bd4
7 changed files with 218 additions and 0 deletions
--- a/index.html
+++ b/index.html
@ -0,0 +1,102 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>五目並べ</title>
+  <style>
+    :root {
+      --square-size: 40px;
+      --table-size: 19;
+    }
+
+    * {
+      padding: 0;
+      margin: 0;
+    }
+
+    html,
+    body {
+      height: 100%;
+    }
+
+    body {
+      display: flex;
+      flex-direction: column;
+    }
+
+    fieldset {
+      margin: 10px;
+      padding: 10px;
+    }
+
+    button {
+      padding: 0px 8px 0px 8px;
+    }
+
+    main {
+      display: grid;
+      grid-template-columns: repeat(var(--table-size), 1fr);
+      grid-template-rows: repeat(var(--table-size), 1fr);
+      width: calc(var(--table-size)*var(--square-size));
+      height: calc(var(--table-size)*var(--square-size));
+      margin: auto;
+      background-image: url("board.webp");
+      background-size: contain;
+      padding: 3px;
+    }
+
+    .square {
+      /* background-color: grey; */
+      width: var(--square-size);
+      height: var(--square-size);
+      /* border: 1px solid black; */
+      margin: auto;
+
+      &:is(.white, .black) {
+        animation-duration: 0.1s;
+        animation-name: grow-shrink;
+      }
+
+      &:is(.hover-white, .hover-black) {
+        opacity: 0.5;
+      }
+
+      &.white,
+      &.hover-white {
+        background-image: url("white.png");
+      }
+
+      &.black,
+      &.hover-black {
+        background-image: url("black.png");
+      }
+
+      background-size: contain;
+    }
+
+    @keyframes grow-shrink {
+
+      0% {
+        scale: 200%;
+
+      }
+
+      100% {
+        scale: 100%;
+      }
+    }
+  </style>
+</head>
+
+<body>
+  <main></main>
+  <fieldset>
+    <legend>Options</legend>
+    <button>Undo move</button>
+  </fieldset>
+  <script src="index.js"></script>
+</body>
+
+</html>