amy/mkgg
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

first commit

Browse source
This commit is contained in:
amy 2024-12-10 20:22:14 +03:30
commit ad76e02880
No known key found for this signature in database
19 changed files with 2292 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

74
src/App.tsx Normal file
View file

@ -0,0 +1,74 @@
import './App.css'
import {createSignal} from "solid-js";
import {getmisskeycolors} from "./helpers.ts";
function App() {
const [count, setCount] = createSignal(2);
const [message, setMessage] = createSignal("not valid colors");
return (
<>
<div class="App relative flex min-h-screen flex-col justify-center overflow-hidden ">
<div class="mb-10">
<div class="flex items-center space-x-2 mb-2">
<span class="text-pink-500">number of colors: </span>
<input
type="number"
class="border border-gray-300 rounded p-2"
value={count()}
onInput={(e) => setCount(Number(e.target.value))}
min="2"
/>
</div>
<div class="flex items-center space-x-2">
<span class="text-pink-500">text: </span>
<input
type="text"
class="border border-gray-300 rounded p-2"
id="ubuntucola"
onInput={(e) => setCount(Number(e.target.value))}
min="2"
/>
</div>
</div>
<div class="mt-4">
{Array.from({length: count()}, (_, i) => (
<div
// @ts-ignore
key={i}
class="m-2"
>
<div class="flex items-center space-x-2">
<span class="text-pink-500">color:</span>
<input
type="color"
id={`color_${i}`}
class="border border-gray-300 rounded p-2"
/>
</div>
</div>
))}
</div>
<div>
<button class="border-pink-300" onclick={()=>{
let colors = []
for (let i = 0; i < count(); i++) {
// @ts-ignore
colors.push(document.getElementById(`color_${i}`).value);
}
// @ts-ignore
let message = document.getElementById("ubuntucola").value as string
setMessage(getmisskeycolors(message, colors));
}}>
generate!
</button>
</div>
<span>{message()}</span>
</div>
</>
)
}
export default App