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

minor graphical changes
All checks were successful
Build / Build (push) Successful in 1m21s
Details
Build / Deploy (push) Successful in 13s
Details

Browse source
This commit is contained in:
amy 2024-12-18 09:11:07 +03:30
parent e5adbb72b0
commit 3f96e51571
No known key found for this signature in database
2 changed files with 27 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

33
src/App.tsx
View file

@ -4,29 +4,30 @@ import {getmisskeycolors} from "./helpers.ts";
function App() { function App() {
const [count, setCount] = createSignal(2); const [count, setCount] = createSignal(2);
const [message, setMessage] = createSignal("not valid colors"); const [message, setMessage] = createSignal("generate something");
return ( return (
<> <>
<div class="App relative flex min-h-screen flex-col justify-center overflow-hidden "> <div class="App relative flex min-h-screen flex-col justify-center overflow-hidden ">
<div class="mb-10"> <div class="mb-10">
<div class="flex items-center space-x-2 mb-2"> <div class="flex flex-col items-start mb-5">
<span class="text-pink-500">number of colors: </span> <span class="text-primaryLight mb-1">number of colors:</span>
<input <input
type="number" type="number"
class="border border-gray-300 rounded p-2" class="border border-primaryLight rounded p-2"
value={count()} value={count()}
onInput={(e) => setCount(Number(e.target.value))} onInput={(e) => setCount(Number(e.target.value))}
min="2" min="2"
/> />
</div> </div>
<div class="flex items-center space-x-2"> <div class="w-full h-[1px] bg-gray-300 my-2"></div>
<span class="text-pink-500">text: </span> <div class="flex flex-col items-start mb-2">
<span class="text-primaryLight mb-1">text: </span>
<input <input
type="text" type="text"
class="border border-gray-300 rounded p-2" class="border border-primaryLight rounded p-2"
id="ubuntucola" id="textarea"
min="2" min="2"
/> />
</div> </div>
@ -39,7 +40,7 @@ function App() {
class="m-2" class="m-2"
> >
<div class="flex items-center space-x-2"> <div class="flex items-center space-x-2">
<span class="text-pink-500">color:</span> <span class="text-primaryLight">color:</span>
<input <input
type="color" type="color"
id={`color_${i}`} id={`color_${i}`}
@ -51,20 +52,28 @@ function App() {
))} ))}
</div> </div>
<div> <div>
<button class="border-pink-300" onclick={()=>{ <button class="border-primaryLight m-10" onclick={() => {
let colors = [] let colors = []
for (let i = 0; i < count(); i++) { for (let i = 0; i < count(); i++) {
// @ts-ignore // @ts-ignore
colors.push(document.getElementById(`color_${i}`).value); colors.push(document.getElementById(`color_${i}`).value);
} }
// @ts-ignore // @ts-ignore
let message = document.getElementById("ubuntucola").value as string let message = document.getElementById("textarea").value as string
setMessage(getmisskeycolors(message, colors).replace(/\$\[fg\.color=[0-9A-Fa-f]{6} \]/g, '')); setMessage(getmisskeycolors(message, colors).replace(/\$\[fg\.color=[0-9A-Fa-f]{6} \]/g, ''));
}}> }}>
generate! generate!
</button> </button>
</div> </div>
<code>{message()}</code>
<div
class="w-64 h-12 overflow-x-auto whitespace-nowrap border border-primaryLight text-primaryLight p-2">
{message()}
</div>
<div class="fixed bottom-0 left-0 m-2 z-50">
<a class="text-primaryLight underline" href="https://ko-fi.com/amyarson">support me ♥</a>
</div>
</div> </div>
</> </>
) )

7
tailwind.config.js
View file

@ -4,7 +4,12 @@ export default {
"./src/**/*.{js,jsx,ts,tsx}", "./src/**/*.{js,jsx,ts,tsx}",
], ],
theme: { theme: {
extend: {}, extend: {
colors: {
primaryDark: "#2F2F3E",
primaryLight: "#B5B5EF",
}
},
}, },
plugins: [], plugins: [],
} }