Spaces:
Running
Running
File size: 8,533 Bytes
e46fd23 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 |
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>`; |