project-client/static/first-launch.html

195 lines
4.7 KiB
HTML
Raw Normal View History

2023-06-21 12:39:41 +00:00
<head>
<style>
:root {
--bg: white;
--fg: black;
2023-06-21 14:52:28 +00:00
--fg-secondary: #313338;
2023-06-21 12:39:41 +00:00
--fg-semi-trans: rgb(0 0 0 / 0.2);
--link: #006ce7;
2023-06-21 12:39:41 +00:00
}
@media (prefers-color-scheme: dark) {
:root {
--bg: hsl(223 6.7% 20.6%);
--fg: white;
2023-06-21 14:52:28 +00:00
--fg-secondary: #b5bac1;
2023-06-21 12:39:41 +00:00
--fg-semi-trans: rgb(255 255 255 / 0.2);
--link: #00a8fc;
2023-06-21 12:39:41 +00:00
}
}
body {
height: 100vh;
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell,
"Open Sans", "Helvetica Neue", sans-serif;
margin: 0;
padding: 1.5em;
padding-bottom: 1em;
border: 1px solid var(--fg-semi-trans);
border-top: none;
display: flex;
flex-direction: column;
box-sizing: border-box;
}
body,
select {
background: var(--bg);
color: var(--fg);
}
select {
padding: 0.3em;
margin: -0.3em;
border-radius: 6px;
}
h1 {
margin: 0.4em 0 0;
}
p {
margin: 1em 0 2em;
}
a {
color: var(--link);
}
2023-06-21 12:39:41 +00:00
form {
display: grid;
2023-06-21 14:52:28 +00:00
gap: 1em;
2023-06-21 12:39:41 +00:00
margin: 0;
}
label {
2023-06-21 14:52:28 +00:00
position: relative;
2023-06-21 12:39:41 +00:00
display: flex;
justify-content: space-between;
}
2023-06-21 14:52:28 +00:00
label:has(input[type="checkbox"]),
select {
cursor: pointer;
}
label:not(:last-child)::after {
content: "";
position: absolute;
bottom: -10px;
width: 100%;
height: 1px;
background-color: var(--fg-secondary);
opacity: 0.5;
}
label div {
display: grid;
gap: 0.2em;
}
label h2 {
margin: 0;
font-weight: normal;
font-size: 1.1rem;
line-height: 1rem;
}
label span {
font-size: 0.9rem;
font-weight: 400;
color: var(--fg-secondary);
}
2023-06-21 12:39:41 +00:00
#buttons {
display: flex;
justify-content: end;
gap: 0.5em;
margin-top: auto;
}
button {
padding: 0.6em;
background: red;
color: white;
border-radius: 6px;
border: none;
cursor: pointer;
2023-06-21 14:52:28 +00:00
transition: 200ms filter;
}
button:hover {
filter: brightness(0.8);
2023-06-21 12:39:41 +00:00
}
#submit {
background: green;
}
</style>
</head>
<body>
<h1>Welcome to Vencord Desktop</h1>
<p>Let's customise your experience!</p>
<form>
<label>
2023-06-21 14:52:28 +00:00
<h2>Discord Branch</h2>
2023-06-21 12:39:41 +00:00
<select name="discordBranch">
<option value="stable">stable</option>
<option value="canary">canary</option>
<option value="ptb">ptb</option>
</select>
</label>
<label>
2023-06-21 14:52:28 +00:00
<div>
<h2>Start with System</h2>
<span>Automatically open Vencord Desktop when your computer starts</span>
</div>
<input type="checkbox" name="autoStart" />
</label>
<label>
<div>
<h2>Rich Presence</h2>
<span>Enable Rich presence (game activity) via arRPC</span>
</div>
<input type="checkbox" name="richPresence" checked />
2023-06-21 14:52:28 +00:00
</label>
<label>
<div>
<h2>Import Settings</h2>
<span>Import Settings from existing Vencord install (if found)</span>
</div>
2023-06-21 12:39:41 +00:00
<input type="checkbox" name="importSettings" checked />
</label>
<label>
2023-06-21 14:52:28 +00:00
<div>
<h2>Minimise to Tray</h2>
<span>Minimise to Tray when closing</span>
</div>
2023-06-21 12:39:41 +00:00
<input type="checkbox" name="minimizeToTray" checked />
</label>
</form>
<div id="buttons">
<button id="cancel">Quit</button>
2023-06-21 12:39:41 +00:00
<button id="submit">Submit</button>
</div>
</body>
<script>
cancel.onclick = () => console.info("cancel");
submit.onclick = e => {
const form = document.querySelector("form");
const formData = new FormData(form);
const data = Object.fromEntries(formData.entries());
console.info("form:" + JSON.stringify(data));
e.preventDefault();
};
</script>