Compare commits

..

5 Commits

Author SHA1 Message Date
a4faa9dd1a add proper dark/light mode 2024-01-09 14:49:22 +01:00
800a424b67 yes 2024-01-09 14:49:05 +01:00
873aeaf921 update primary color 2024-01-09 14:48:58 +01:00
310c206367 reformat, remove unused imports 2024-01-09 14:48:47 +01:00
895b71ef16 adjust window size, enable dev tools in dev 2024-01-09 14:47:28 +01:00
9 changed files with 141 additions and 72 deletions

11
main.js
View File

@ -20,12 +20,11 @@ function createWindow() {
// Create the browser window. // Create the browser window.
mainWindow = new BrowserWindow({ mainWindow = new BrowserWindow({
width: 800, width: 600,
height: 600, height: 380,
resizable: false, resizable: false,
frame: false, frame: false,
titleBarStyle: "hidden", titleBarStyle: "hidden",
titleBarOverlay: true,
webPreferences: { webPreferences: {
nodeIntegration: true, nodeIntegration: true,
preload: path.join(__dirname, "preload.js"), preload: path.join(__dirname, "preload.js"),
@ -55,8 +54,10 @@ function createWindow() {
// loadURL(mainWindow); // loadURL(mainWindow);
// Open the DevTools and also disable Electron Security Warning. // Open the DevTools and also disable Electron Security Warning.
// process.env['ELECTRON_DISABLE_SECURITY_WARNINGS'] = true; if (isDev()) {
// mainWindow.webContents.openDevTools(); process.env["ELECTRON_DISABLE_SECURITY_WARNINGS"] = true;
mainWindow.webContents.openDevTools({ mode: "detach" });
}
// Emitted when the window is closed. // Emitted when the window is closed.
mainWindow.on("closed", function () { mainWindow.on("closed", function () {

27
package-lock.json generated
View File

@ -3998,6 +3998,14 @@
], ],
"optional": true "optional": true
}, },
"node_modules/immutable": {
"version": "4.3.4",
"resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.4.tgz",
"integrity": "sha512-fsXeu4J4i6WNWSikpI88v/PcVflZz+6kMhUfIwc5SY+poQRPnaf5V7qds6SUyUN3cVxEzuCab7QIoLOQ+DQ1wA==",
"dev": true,
"optional": true,
"peer": true
},
"node_modules/import-cwd": { "node_modules/import-cwd": {
"version": "3.0.0", "version": "3.0.0",
"resolved": "https://registry.npmjs.org/import-cwd/-/import-cwd-3.0.0.tgz", "resolved": "https://registry.npmjs.org/import-cwd/-/import-cwd-3.0.0.tgz",
@ -6120,6 +6128,25 @@
"truncate-utf8-bytes": "^1.0.0" "truncate-utf8-bytes": "^1.0.0"
} }
}, },
"node_modules/sass": {
"version": "1.69.7",
"resolved": "https://registry.npmjs.org/sass/-/sass-1.69.7.tgz",
"integrity": "sha512-rzj2soDeZ8wtE2egyLXgOOHQvaC2iosZrkF6v3EUG+tBwEvhqUCzm0VP3k9gHF9LXbSrRhT5SksoI56Iw8NPnQ==",
"dev": true,
"optional": true,
"peer": true,
"dependencies": {
"chokidar": ">=3.0.0 <4.0.0",
"immutable": "^4.0.0",
"source-map-js": ">=0.6.2 <2.0.0"
},
"bin": {
"sass": "sass.js"
},
"engines": {
"node": ">=14.0.0"
}
},
"node_modules/sax": { "node_modules/sax": {
"version": "1.3.0", "version": "1.3.0",
"resolved": "https://registry.npmjs.org/sax/-/sax-1.3.0.tgz", "resolved": "https://registry.npmjs.org/sax/-/sax-1.3.0.tgz",

View File

@ -66,4 +66,4 @@
"typescript": "^5.3.3", "typescript": "^5.3.3",
"wait-on": "^7.2.0" "wait-on": "^7.2.0"
} }
} }

View File

@ -5,7 +5,6 @@ window.addEventListener("DOMContentLoaded", () => {
backgroundColor: TitlebarColor.fromHex("#202020"), backgroundColor: TitlebarColor.fromHex("#202020"),
itemBackgroundColor: TitlebarColor.fromHex("#202020"), itemBackgroundColor: TitlebarColor.fromHex("#202020"),
menu: null, menu: null,
enableMnemonics: false, enableMnemonics: false,
maximizable: false, maximizable: false,
}); });

View File

@ -1,20 +1,22 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en" data-theme="dark" class="dark"> <html lang="en">
<head> <head>
<meta charset='utf-8'> <meta charset="utf-8" />
<meta name='viewport' content='width=device-width,initial-scale=1'> <meta name="viewport" content="width=device-width,initial-scale=1" />
<title>EZPPLauncher</title> <title>EZPPLauncher</title>
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Exo+2:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Prompt:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet"> <link
<link rel='icon' type='image/png' href='/favicon.png'> href="https://fonts.googleapis.com/css2?family=Exo+2:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Prompt:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
<link rel='stylesheet' href='/global.css'> rel="stylesheet"
<link rel='stylesheet' href='/build/bundle.css'> />
<link rel="icon" type="image/png" href="/favicon.png" />
<link rel="stylesheet" href="/global.css" />
<link rel="stylesheet" href="/build/bundle.css" />
<script defer src='/build/bundle.js'></script> <script defer src="/build/bundle.js"></script>
</head> </head>
<body class="bg-gray-900"> <body class="bg-gray-100 dark:bg-gray-900"></body>
</body>
</html> </html>

View File

@ -5,18 +5,28 @@
DropdownItem, DropdownItem,
DropdownHeader, DropdownHeader,
DropdownDivider, DropdownDivider,
Button,
Checkbox,
DarkMode,
Progressbar,
} from "flowbite-svelte"; } from "flowbite-svelte";
import ezppLogo from "../public/favicon.png"; import ezppLogo from "../public/favicon.png";
let patch = true;
let rand = 0;
</script> </script>
<div class="p-2 flex flex-row justify-between items-center"> <div class="p-2 flex flex-row justify-between items-center">
<div class="flex flex-row items-center"> <div class="flex flex-row items-center">
<img src={ezppLogo} class="w-12 h-12 mr-2" /> <img src={ezppLogo} alt="EZPPFarm Logo" class="w-12 h-12 mr-2" />
<span class="text-gray-100 text-xl font-extralight">EZPPLauncher</span> <span class="text-gray-700 dark:text-gray-100 text-xl font-extralight"
>EZPPLauncher</span
>
</div> </div>
<div class="w-fill cursor-pointer flex md:order-2"> <div class="flex flex-row gap-2 w-fill cursor-pointer md:order-2">
<DarkMode class="dark:border-gray-700"></DarkMode>
<Avatar <Avatar
class="rounded-lg hover:ring hover:ring-4 hover:ring-gray-800" class="rounded-lg border dark:border-gray-700 hover:ring-4 hover:ring-gray-200 dark:hover:ring-gray-800"
src="https://a.ez-pp.farm/1001" src="https://a.ez-pp.farm/1001"
id="avatar-menu" id="avatar-menu"
/> />
@ -29,23 +39,41 @@
> >
</DropdownHeader> </DropdownHeader>
<DropdownItem <DropdownItem
class="border-0 !bg-gray-700 active:!bg-gray-600 hover:!bg-gray-800 transition-colors" class="border-0 dark:!bg-gray-700 dark:active:!bg-gray-900 dark:hover:!bg-gray-800 transition-colors"
>Profile</DropdownItem >Profile</DropdownItem
> >
<DropdownItem <DropdownItem
class="border-0 !bg-gray-700 active:!bg-gray-600 hover:!bg-gray-800 transition-colors" class="border-0 dark:!bg-gray-700 dark:active:!bg-gray-900 dark:hover:!bg-gray-800 transition-colors"
>Settings</DropdownItem >Settings</DropdownItem
> >
<DropdownDivider /> <DropdownDivider />
<DropdownItem <DropdownItem
class="border-0 !bg-gray-700 active:!bg-gray-600 hover:!bg-gray-800 transition-colors" class="border-0 dark:!bg-gray-700 dark:active:!bg-gray-900 dark:hover:!bg-gray-800 transition-colors"
>Sign out</DropdownItem >Sign out</DropdownItem
> >
</Dropdown> </Dropdown>
</div> </div>
<main class="p-1"> <main class="p-5">
<div class="container border border-gray-700 rounded-lg"></div> <div
class="container flex flex-col items-center justify-center gap-5 border border-gray-300 dark:border-gray-700 rounded-lg"
>
<Button
color="light"
size="xl"
on:click={() => (rand = Math.random() * 100)}>Launch</Button
>
<Checkbox color="primary" bind:checked={patch}>
Patching {patch ? "enabled" : "disabled"}
</Checkbox>
<Progressbar
animate={true}
progress={rand}
labelInside={true}
size="h-6"
labelInsideClass="bg-primary-600 drop-shadow-xl text-gray-100 text-base font-medium text-center p-1 leading-none rounded-full"
/>
</div>
</main> </main>
<style> <style>
@ -54,18 +82,4 @@
padding: 1em; padding: 1em;
margin: 0 auto; margin: 0 auto;
} }
h1 {
font-size: 2rem;
margin: 0;
font-weight: 300;
font-style: normal;
color: #ccc;
text-transform: uppercase;
letter-spacing: 0.1em;
text-shadow: 0 0 1px #000;
text-align: center;
padding: 0.5em 0;
border-bottom: 1px solid #353535;
margin-bottom: 1.5rem;
}
</style> </style>

View File

@ -6,3 +6,25 @@
* { * {
font-family: "Prompt"; font-family: "Prompt";
} }
html .cet-titlebar {
background-color: #ececec !important;
color: #202020 !important;
}
html.dark .cet-titlebar {
background-color: #202020 !important;
color: #ececec !important;
}
html .cet-titlebar .cet-control-icon svg {
fill: #000;
}
html.dark .cet-titlebar .cet-control-icon svg {
fill: #fff;
}
.cet-titlebar .cet-icon {
display: none;
}

View File

@ -1,6 +1,5 @@
import "./app.pcss"; import "./app.pcss";
import App from "./App.svelte"; import App from "./App.svelte";
import "@fontsource/prompt";
const app = new App({ const app = new App({
target: document.body, target: document.body,

View File

@ -1,41 +1,46 @@
/** @type {import('tailwindcss').Config}*/ /** @type {import('tailwindcss').Config}*/
const config = { const config = {
content: ['./src/**/*.{html,js,svelte,ts}', './node_modules/flowbite-svelte/**/*.{html,js,svelte,ts}'], content: [
darkMode: 'class', "./src/**/*.{html,js,svelte,ts}",
"./node_modules/flowbite-svelte/**/*.{html,js,svelte,ts}",
],
darkMode: "class",
theme: { theme: {
extend: { extend: {
colors: { colors: {
// flowbite-svelte // flowbite-svelte
primary: { primary: {
50: '#FFF5F2', DEFAULT: "#FA1C74",
100: '#FFF1EE', 50: "#FED0E2",
200: '#FFE4DE', 100: "#FEBCD6",
300: '#FFD5CC', 200: "#FD94BD",
400: '#FFBCAD', 300: "#FC6CA5",
500: '#FE795D', 400: "#FB448C",
600: '#EF562F', 500: "#FA1C74",
700: '#EB4F27', 600: "#D90559",
800: '#CC4522', 700: "#A20442",
900: '#A5371B' 800: "#6B022C",
900: "#340115",
950: "#19010A",
}, },
gray: { gray: {
50: '#F9F9F9', 50: "#F9F9F9",
100: '#ECECEC', 100: "#ECECEC",
200: '#D3D3D3', 200: "#D3D3D3",
300: '#B9B9B9', 300: "#B9B9B9",
400: '#A0A0A0', 400: "#A0A0A0",
500: '#868686', 500: "#868686",
600: '#6D6D6D', 600: "#6D6D6D",
700: '#535353', 700: "#535353",
800: '#393939', 800: "#393939",
900: '#202020', 900: "#202020",
950: '#1A1A1A' 950: "#1A1A1A",
}, },
} },
} },
}, },
plugins: [require('flowbite/plugin')], plugins: [require("flowbite/plugin")],
}; };
module.exports = config; module.exports = config;