diff --git a/index.css b/index.css
new file mode 100644
index 0000000..40d6912
--- /dev/null
+++ b/index.css
@@ -0,0 +1,53 @@
+#m-line {
+    display: flex;
+}
+
+#hexLabels {
+    margin-left: 20px;
+}
+
+#open {
+    margin-left: 20px;
+}
+
+#addFrame {
+    margin-left: 20px;
+}
+
+#anim {
+    word-wrap: break-word;
+}
+
+
+.cell {
+    width: 40px;
+    height: 40px;
+    border: 1px solid black;
+}
+
+.cell-active {
+    background-color: orange;
+}
+
+.row {
+    display: flex;
+}
+
+.binLabel {
+    height: 40px;
+    border: 1px solid black;
+    width: 85px;
+}
+
+.hexLabel {
+    height: 40px;
+    border: 1px solid black;
+    width: 40px;
+}
+
+.label-p {
+    margin-top: 0;
+    margin-bottom: 0;
+    text-align: center;
+    padding-top: 11px;
+}
\ No newline at end of file
diff --git a/index.js b/index.js
new file mode 100644
index 0000000..2681883
--- /dev/null
+++ b/index.js
@@ -0,0 +1,119 @@
+
+let matrix = [];
+let anim = "";
+let hexOut = "";
+
+function main() {
+    for (let i = 0; i < 8; i++) {
+        matrix[i] = [];
+        for (let j = 0; j < 8; j++) {
+            matrix[i][j] = 0;
+            document.getElementById(`cell_${i}-${j}`).onclick = cellOnClick;
+        }
+    }
+
+    document.getElementById("file").onchange = handleFileSelect;
+    document.getElementById("addFrame").onclick = handleFrameAdd;
+    document.getElementById("open").onclick = (e) => {
+        document.getElementById("file").click();
+        e.preventDefault();
+    };
+
+    updateOut();
+}
+
+function handleFileSelect(e) {
+    let file = e.target.files[0]; // FileList object
+
+    let reader = new FileReader();
+    reader.onload = (e) => {
+        processOpenedFile(e.target.result);
+    };
+
+    reader.readAsText(file);
+}
+
+function handleFrameAdd(e) {
+    anim += hexOut;
+    document.getElementById("anim").innerText = anim;
+    e.preventDefault();
+}
+
+function processOpenedFile(data) {
+    let pairs = [];
+    for(let i = 0; i < data.length; i += 2) {
+        pairs[pairs.length] = data.substr(i, 2);
+    }
+
+    for (let i = 0; i < 8; i++) {
+        let bits = "";
+        let n = parseInt(pairs[i], 16);
+
+        for (let i = 128; i >= 1; i /= 2) {
+            bits += n & i ? '1' : '0';
+        }
+
+        for (let z = 0; z < 8; z++) {
+            matrix[i][z] = parseInt(bits.charAt(z), 10);
+        }
+    }
+
+    updateOut(true);
+}
+
+function cellOnClick(e) {
+    let id = e.srcElement.id;
+    let cord = id.split("_")[1].split("-");
+    let x = cord[0];
+    let y = cord[1];
+
+    if (matrix[x][y] === 0) {
+        e.srcElement.classList.add("cell-active");
+        matrix[x][y] = 1;
+    } else {
+        e.srcElement.classList.remove("cell-active");
+        matrix[x][y] = 0;
+    }
+
+    updateOut();
+}
+
+function updateOut(redraw) {
+    let hexString = "";
+    hexOut = "";
+
+    for (let i = 0; i < 8; i++) {
+        let binString = "";
+
+        for (let j = 0; j < 8; j++) { //for (let j = 7; j >= 0; j--) {
+            binString += matrix[i][j];
+
+            if (redraw) {
+                let elem = document.getElementById(`cell_${i}-${j}`);
+                if (matrix[i][j] === 0) {
+                    elem.classList.remove("cell-active");
+                } else {
+                    elem.classList.add("cell-active");
+                }
+            }
+        }
+
+
+        let n = parseInt(binString, 2).toString(16).toUpperCase();
+        if (n.length === 1)
+            n = "0" + n;
+
+        document.getElementById(`hexLabel-${i}`).innerHTML = n;
+        document.getElementById(`binLabel-${i}`).innerHTML = binString;
+        hexString += n;
+        hexOut += n;
+    }
+
+    document.getElementById("download").href = `data:text/plain;charset=utf-8,%EF%BB%BF${encodeURIComponent(hexOut)}`;
+    document.getElementById("out").innerText = hexString;
+
+}
+function startDrawing()
+{
+    alert("Start drawing");
+}