1
0
mirror of https://github.com/upscayl/upscayl.git synced 2024-11-27 17:00:52 +01:00

Updated UI

This commit is contained in:
Feenix 2022-08-15 12:51:12 +05:30
parent 5941ed6a84
commit 292442c36f
2 changed files with 32 additions and 4 deletions

View File

@ -38,7 +38,7 @@ app.on("ready", async () => {
// Quit the app once all windows are closed // Quit the app once all windows are closed
app.on("window-all-closed", app.quit); app.on("window-all-closed", app.quit);
// listen the channel `message` and resend the received message to the renderer process // ! DONT FORGET TO RESTART THE APP WHEN YOU CHANGE CODE HERE
ipcMain.on("sendMessage", (_, message) => { ipcMain.on("sendMessage", (_, message) => {
console.log(message); console.log(message);
}); });

View File

@ -6,9 +6,37 @@ const Home = () => {
window.electron.send("sendMessage", { message: "Hello!" }); window.electron.send("sendMessage", { message: "Hello!" });
}, []); }, []);
return ( return (
<div className="h-screen w-screen bg-neutral-900"> <div className="flex h-screen w-screen flex-row bg-neutral-900">
<div> <div className="flex h-screen w-96 flex-col bg-neutral-800 p-5">
<input /> <h1 className="text-3xl font-bold text-neutral-50">Upscayl</h1>
<div className="mt-10">
<p className="mb-2 font-medium text-neutral-100">Step 1</p>
<button className="rounded-lg bg-sky-400 p-3">Select Image</button>
</div>
<div className="mt-10">
<p className="mb-2 font-medium text-neutral-100">Step 2</p>
<p className="mb-1 text-neutral-300">Select Scale Factor:</p>
<div className="flex flex-row gap-2">
<button className="rounded-lg bg-red-400 p-3">2x</button>
<button className="rounded-lg bg-red-400 p-3">4x</button>
<button className="rounded-lg bg-red-400 p-3">6x</button>
</div>
</div>
<div className="mt-10">
<p className="mb-2 font-medium text-neutral-100">Step 3</p>
<button className="rounded-lg bg-violet-400 p-3">
Set Output Folder
</button>
</div>
<div className="mt-10">
<p className="mb-2 font-medium text-neutral-100">Step 4</p>
<button className="rounded-lg bg-green-400 p-3">Upscayl</button>
</div>
</div>
<div className="flex h-screen w-full flex-col items-center justify-center p-5">
<p className="text-lg font-medium text-neutral-400">
Select an Image to Upscale
</p>
</div> </div>
</div> </div>
); );