<head>
<link rel="stylesheet" href="./style.css" type="text/css" />
<style>
body {
height: 100vh;
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;
}
select {
background: var(--bg);
color: var(--fg);
padding: 0.3em;
margin: -0.3em;
border-radius: 6px;
}
h1 {
margin: 0.4em 0 0;
}
p {
margin: 1em 0 2em;
}
form {
display: grid;
gap: 1em;
margin: 0;
}
label {
position: relative;
display: flex;
justify-content: space-between;
}
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);
}
#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;
transition: 200ms filter;
}
button:hover {
filter: brightness(0.8);
}
#submit {
background: green;
}
</style>
</head>
<body>
<h1>Welcome to Vesktop</h1>
<p>Let's customise your experience!</p>
<form>
<label>
<h2>Discord Branch</h2>
<select name="discordBranch">
<option value="stable">stable</option>
<option value="canary">canary</option>
<option value="ptb">ptb</option>
</select>
</label>
<label>
<div>
<h2>Start with System</h2>
<span>Automatically open Vesktop 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
<a href="https://github.com/OpenAsar/arrpc" target="_blank">arRPC</a></span
>
</div>
<input type="checkbox" name="richPresence" checked />
</label>
<label>
<div>
<h2>Import Settings</h2>
<span>Import Settings from existing Vencord install (if found)</span>
</div>
<input type="checkbox" name="importSettings" checked />
</label>
<label>
<div>
<h2>Minimise to Tray</h2>
<span>Minimise to Tray when closing</span>
</div>
<input type="checkbox" name="minimizeToTray" checked />
</label>
</form>
<div id="buttons">
<button id="cancel">Quit</button>
<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>