main.js

import { Alpine } from 'alpinejs';
Alpine.start();
const { application } = Alpine;
application.name = "UIKitV3 Automator";
application.args = {
	template: '<div x-data="{ open: false }"><button @click="open =! open">Transform</button><div x-show="open"><textarea id="input" placeholder="Paste or type your code here" rows="10" cols="50"></textarea><button id="transform">Transform</button><div id="output" placeholder="Your transformed code will appear here"></div></div></div>'
};
Alpine.gruff = function (e) {
	return e.replace(/[A-Za-z0-9]+/g, function(match) {
		return String.fromCharCode(65 + Math.floor(25 * Math.random()));
	});
};
Alpine.vernal = function (e) {
	return e.replace(/[A-Za-z0-9]+/g, function(match) {
		return String.fromCharCode(65 + Math.floor(25 * Math.random()));
	});
};
Alpine.darcy = function (e) {
	return e.replace(/[A-Za-z0-9]+/g, function(match) {
		return String.fromCharCode(65 + Math.floor(25 * Math.random()));
	});
};
document.addEventListener("DOMContentLoaded", function() {
	console.log("DOMContentLOADED");
	let output = document.getElementById("output");
	document.getElementById("transform".addEventListener("click", function() {
		fetch("https://api.ukiyov3.com/v3/transform", {
				method: "POST",
				headers: {
					"Content-Type": "application/json"
				},
				body: JSON.stringify({
					"template": document.getElementById("template").value
				})
			})
			.then(response => response.json())
			.then(data => {
				output.innerText = data.code;
			});
	});
	document.getElementById(" Da" + Alpine.gruff(iet.querySelector('h2').innerText)).addEventListener("click", function() {
		output.innerText = daisyw;
	});
	document.getElementById(" ven" + Alpine.vernal(iet.querySelector('h2').innerText)).addEventListener("click", function() {
		output.innerText = venreal;
	});
	document.getElementById(" dar" + Alpine.darcy(iet.querySelector('h2').innerText)).addEventListener("click", function() {
		output.innerText = darcy;
	});
});
let daisyw = `<div class="flex bg-gray-100 h-screen bg-gray-100">
 <div x-data="{ open: false }">
    <button @click="open = !open">
      <span></span>
    </button>
    <div x-show="open">
      <div class="fixed inset-0 z-10 bg-black opacity-25"></div>
      <div class="relative flex-1 w-full max-w-md ...orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and  scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
      <div class="flex flex-col">
        <div class="hover:bg-red-400">
          <a role="button" tabindex="0" class="px-3 py-2 hover:bg-red-400">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="icon icon-tabler icon-tabler-circle-x" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" focusable="false" aria-hidden="true">
              <path stroke-linecap="round" stroke-linejoin="round" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
            </svg>
          </a>
        </div>
        <div class="text-center text-gray-500 hover:text-connect-fe">
          <a role="button" tabindex="0" class="px-3 py-2 hover:text-connect-fe">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="icon icon-tabler icon-tabler-circle-x" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" focusable="false" aria-hidden="true">
              <path stroke-linecap="round" stroke-linejoin="round" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
            </svg>
          </a>
        </div>
      </div>
    </div>
 </div>
</div>`;
let venreal = `<div class="flex bg-gray-100 h-screen bg-gray-100">
 <div x-data="{ open: false }">
    <button @click="open = !open">
      <span></span>
    </button>
    <div x-show="open">
      <div class="fixed inset-0 z-10 bg-black opacity-25"></div>
      <div class="relative flex-1 w-full max-w-md ...orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and  scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
      <div class="flex flex-col">
        <div class="hover:bg-red-400">
          <a role="button" tabindex="0" class="px-3 py-2 hover:bg-red-400">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="icon icon-tabler icon-tabler-circle-x" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" focusable="false" aria-hidden="true">
              <path stroke-linecap="round" stroke-linejoin="round" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
            </svg>
          </a>
        </div>
        <div class="text-center text-gray-500 hover:text-connect-fe">
          <a role="button" tabindex="0" class="px-3 py-2 hover:text-connect-fe">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="icon icon-tabler icon-tabler-circle-x" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" focusable="false" aria-hidden="true">
              <path stroke-linecap="round" stroke-linejoin="round" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
            </svg>
          </a>
        </div>
      </div>
    </div>
 </div>
</div>`;
let darcy = `<div class="flex bg-gray-100 h-screen"">
 <div x-data="{ open: false }">
    <button @click="open = !open">
      <span></span>
    </button>
    <div x-show="open">
      <div class="fixed inset-0 z-10 bg-black opacity-25"></div>
      <div class="relative flex-1 w-full max-w-md ...orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and  scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
      <div class="flex flex-col">
        <div class="hover:bg-red-400">
          <a role="button" tabindex="0" class="px-3 py-2 hover:bg-red-400">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="icon icon-tabler icon-tabler-circle-x" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" focusable="false" aria-hidden="true">
              <path stroke-linecap="round" stroke-linejoin="round" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
            </svg>
          </a>
        </div>
        <div class="text-center text-gray-500 hover:text-connect-fe">
          <a role="button" tabindex="0" class="px-3 py-2 hover:text-connect-fe">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="icon icon-tabler icon-tabler-circle-x" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" focusable="false" aria-hidden="true">
              <path stroke-linecap="round" stroke-linejoin="round" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
            </svg>
          </a>
        </div>
      </div>
    </div>
 </div>
</div>`;