Add button for exporting a theme from the demo site

composer.json

@@ -25,7 +25,10 @@
     "phpunit/phpunit": "^9"
   },
   "scripts": {
-    "start": "php -S localhost:8000 -t src",
+    "start": [
+      "Composer\\Config::disableProcessTimeout",
+      "php -S localhost:8000 -t src"
+    ],
     "test": "./vendor/bin/phpunit --testdox tests"
   }
 }

src/demo/index.php

@@ -97,6 +97,8 @@ function gtag() { dataLayer.push(arguments); }
                         <button class="plus btn" onclick="return preview.addProperty();">+</button>
                     </div>
                 </details>
+                <button class="btn" type="button" onclick='return exportPhp()'>button</button>
+                <textarea id="test"></textarea>
 
                 <input class="btn" type="submit" value="Submit">
             </form>

src/demo/js/script.js

@@ -12,7 +12,7 @@ let preview = {
         let obj = { ...acc };
         let value = next.value;
 
-        if (value.indexOf('#') >= 0) {
+        if (value.indexOf("#") >= 0) {
           // if the value is colour, remove the hash sign
           value = value.replace(/#/g, "");
           if (value.length > 6) {
@@ -180,7 +180,53 @@ window.addEventListener(
   false
 );
 
-function checkColor(color, input){
+function exportPhp() {
+  let properties = [
+    "border",
+    "stroke",
+    "ring",
+    "fire",
+    "currStreakNum",
+    "sideNums",
+    "currStreakLabel",
+    "sideLabels",
+    "dates",
+    "background",
+  ];
+  let array = Array.from(document.querySelectorAll(".param")).reduce(
+    (acc, next) => {
+      let obj = { ...acc };
+      let value = next.value;
+      if (value.indexOf("#") >= 0) {
+        // if the value is colour, remove the hash sign
+        value = value.replace(/#/g, "");
+        if (value.length > 6) {
+          // if the value is in hexa and opacity is 1, remove FF
+          value = value.replace(/(F|f){2}$/, "");
+        }
+      }
+      obj[next.id] = value;
+      return obj;
+    },
+    {}
+  );
+  var exportPhp = {};
+
+  for (const [key, val] of Object.entries(array)) {
+    if (properties.includes(key) > 0) {
+      exportPhp[key] = val;
+    }
+  }
+
+  fetch("/demo/json_decode.php", {
+    method: "POST",
+    body: JSON.stringify({ json: exportPhp }),
+  })
+    .then((response) => response.text())
+    .then((html) => (document.getElementById("test").value = html));
+}
+
+function checkColor(color, input) {
   if (color.length == 9 && color.slice(-2) == "FF") {
     // if color has hex alpha value -> remove it
     document.getElementById(input).value = color.slice(0, -2);

src/demo/json_decode.php

@@ -0,0 +1,4 @@
+<?php declare (strict_types = 1);
+$_POST = json_decode(file_get_contents("php://input"), true);
+var_export($_POST['json'],false);
+?>