summaryrefslogtreecommitdiff
path: root/index.php
diff options
context:
space:
mode:
Diffstat (limited to 'index.php')
-rw-r--r--index.php146
1 files changed, 146 insertions, 0 deletions
diff --git a/index.php b/index.php
new file mode 100644
index 0000000..0f844e9
--- /dev/null
+++ b/index.php
@@ -0,0 +1,146 @@
+<!DOCTYPE html>
+
+<?php
+ $GRID_SIZE = 64;
+
+ $grid = json_decode(file_get_contents('array.json'), true);
+ if (empty($grid)) {
+ for($x = 0; $x < $GRID_SIZE; ++$x) {
+ $grid[$x] = array();
+ for($y = 0; $y < $GRID_SIZE; ++$y) {
+ $grid[$x][$y] = "#ffffff";
+ }
+ }
+ }
+
+ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
+ $pos = explode(",", $_POST["cell"]);
+ $grid[$pos[0]][$pos[1]] = $_POST["color"];
+
+ file_put_contents('array.json', json_encode($grid));
+ }
+?>
+
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>cellgrid</title>
+
+ <style>
+
+ @font-face {
+ font-family: pixel;
+ src: url("font.woff")
+ }
+
+ body {
+ background: #282a2e;
+ color: #c5c8c6;
+ font-family: pixel, Courier New, Verdana, Arial;
+ font-size: 1em;
+ text-align: center;
+ }
+
+ .grid {
+ overflow: scroll;
+ position: absolute;
+ left: 50%;
+ top: 50%;
+ transform: translate(-50%, -50%);
+ }
+
+ #selector {
+ position: absolute;
+ left: 50%;
+ top: 50%;
+ transform: translate(-50%, -50%);
+
+ height: 0%;
+
+ opacity: 0;
+ visibility: hidden;
+ float: right;
+
+ transition: height 0.5s;
+ overflow: hidden;
+ white-space: nowrap;
+ padding: 1%;
+ background: #373b41;
+ }
+
+ #selector:target {
+ height: 3em;
+ visibility: visible;
+ opacity: 1;
+ }
+
+ input[type='radio'] {
+ opacity: 0;
+ height: 100%;
+ width: 100%;
+ margin: 0;
+ }
+
+ input[type='radio']:checked {
+ opacity: 1;
+ }
+
+ td {
+ position: relative;
+ width: 10px;
+ height: 10px;
+ }
+
+
+ table {
+ border: 0.1em solid black;
+ font-size: 1px;
+ width: 640px;
+ height: 640px;
+ }
+
+ input[type="color"] {
+ width: 20px;
+ height: 20px;
+ }
+
+
+
+ </style>
+
+</head>
+
+<body>
+ <form class="main" action="/" method="post">
+
+ <div class="grid">
+ <table border="0" cellspacing="0" cellpadding="0">
+ <?php
+ for($x = 0; $x < $GRID_SIZE; ++$x) {
+ echo("<tr>");
+ for($y = 0; $y < $GRID_SIZE; ++$y) {
+ $id = "$x,$y";
+ $color = $grid[$x][$y];
+ echo "<td style='background-color:$color;>";
+ echo "<label for='cell1'>";
+ echo "<a href='#selector'>";
+ echo "<input type='radio' name='cell' id='cell$id' value='$id'>";
+ echo "</a>";
+ echo "</label>";
+ echo "</td>";
+ }
+ echo("</tr>");
+ }
+ ?>
+ </table>
+ </div>
+
+ <div id="selector">
+ <span>Select Color:</span>
+ <br>
+ <input type="color" id="color" name="color">
+ <input type="submit" value="Submit">
+ </div>
+ </form>
+</body>
+</html>