<head> <link rel="stylesheet" href="./style.css" type="text/css" /> <style> .wrapper { display: flex; flex-direction: column; justify-content: space-between; box-sizing: border-box; min-height: 100%; padding: 1em; } h1 { text-align: center; } .buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5em; margin-top: 0.25em; } button { cursor: pointer; padding: 0.5em; color: var(--fg); border: none; border-radius: 3px; font-weight: bold; transition: filter 0.2 ease-in-out; } button:hover, button:active { filter: brightness(0.9); } .green { background-color: #248046; } .red { background-color: #ed4245; } </style> </head> <body> <div class="wrapper"> <section> <h1>Update Available</h1> <p>There's a new update for Vesktop! Update now to get new fixes and features!</p> <p> Current: <span id="current"></span> <br /> Latest: <span id="latest"></span> </p> <h2>Changelog</h2> <p id="changelog">Loading...</p> </section> <section> <label id="disable-remind"> <input type="checkbox" /> <span>Do not remind again for </span> </label> <div class="buttons"> <button name="download" class="green">Download Update</button> <button name="close" class="red">Close</button> </div> </section> </div> </body> <script type="module"> const data = await Updater.getData(); document.getElementById("current").textContent = data.currentVersion; document.getElementById("latest").textContent = data.latestVersion; document.querySelector("#disable-remind > span").textContent += data.latestVersion; function checkDisableRemind() { const checkbox = document.querySelector("#disable-remind > input"); if (checkbox.checked) { Updater.ignore(); } } const onClicks = { download() { checkDisableRemind(); Updater.download(); }, close() { checkDisableRemind(); Updater.close(); } }; for (const name in onClicks) { document.querySelectorAll(`button[name="${name}"]`).forEach(button => { button.addEventListener("click", onClicks[name]); }); } </script> <script type="module"> import { micromark } from "https://esm.sh/micromark@3?bundle"; import { gfm, gfmHtml } from "https://esm.sh/micromark-extension-gfm@2?bundle"; const changelog = (await Updater.getData()).release.body; if (changelog) document.getElementById("changelog").innerHTML = micromark(changelog, { extensions: [gfm()], htmlExtensions: [gfmHtml()] }) .replace(/h1>/g, "h3>") .replace(/<a /g, '<a target="_blank" '); </script>