<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>