mirror of
https://github.com/smartfrigde/armcord.git
synced 2024-08-14 23:56:58 +00:00
Re-do the setup page (#98)
This commit is contained in:
Alyxia Sother
GitHub
parent
46ddad4044
commit
eca41529d4
5 changed files with 258 additions and 186 deletions
|
|
@ -1,6 +1,7 @@
|
|||
# Some prettier-specific files so it doesn't die.
|
||||
**/*.png
|
||||
**/*.ico
|
||||
**/*.woff
|
||||
LICENSE
|
||||
.gitignore
|
||||
|
||||
|
|
|
|||
BIN
src/content/css/fonts/whitney_400.woff
Normal file
BIN
src/content/css/fonts/whitney_400.woff
Normal file
Binary file not shown.
|
|
@ -1,91 +1,148 @@
|
|||
/*CSS ONLY FOR INTERNAL USE (setup and loading)*/
|
||||
@import url("https://armcord.smartfridge.space/logofont.css");
|
||||
|
||||
/* Meta {{{ */
|
||||
:root {
|
||||
background-color: #2c2f33 !important;
|
||||
--header-secondary: #b9bbbe !important;
|
||||
--header-primary: #fff !important;
|
||||
--background-tertiary: #202225 !important;
|
||||
--background-primary: #282b30;
|
||||
--background-secondary: rgba(255, 255, 255, 0.1);
|
||||
--brand-experiment: #7289da;
|
||||
--header-primary: #fff;
|
||||
--text-muted: #72767d;
|
||||
--font-primary: "Whitney";
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: Whitney;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
src: url(https://armcord.smartfridge.space/whitney_400.woff) format("woff");
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
background-color: #2c2f33;
|
||||
color: white;
|
||||
overflow: hidden;
|
||||
|
||||
margin: 0;
|
||||
padding-top: 30px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
background: var(--background-primary);
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
p {
|
||||
color: white;
|
||||
* {
|
||||
font-family: var(--font-primary), sans-serif;
|
||||
|
||||
box-sizing: border-box;
|
||||
user-select: none;
|
||||
cursor: default;
|
||||
}
|
||||
/* }}} */
|
||||
|
||||
/* Utility classes {{{ */
|
||||
.hidden {
|
||||
display: none !important;
|
||||
}
|
||||
.text-center {
|
||||
text-align: center;
|
||||
font-weight: 100;
|
||||
font-family: Whitney, Helvetica Neue, Helvetica, Arial, sans-serif;
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
|
||||
.logo {
|
||||
font-size: 0px;
|
||||
text-align: center;
|
||||
transform: translateY(-105%);
|
||||
}
|
||||
|
||||
.logo:before {
|
||||
content: "ARM";
|
||||
color: #7289da;
|
||||
font-weight: normal;
|
||||
font-family: Helvetica, sans-serif;
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
.logo:after {
|
||||
content: "Cord";
|
||||
color: #ffffff;
|
||||
font-weight: normal;
|
||||
font-family: Discordinated;
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
span {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.logo {
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
max-height: 204px;
|
||||
max-width: 204px;
|
||||
transform: translateY(5%);
|
||||
}
|
||||
|
||||
.container {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
color: #fff;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
button#express {
|
||||
margin-right: 84px;
|
||||
}
|
||||
button {
|
||||
background-color: #7289da;
|
||||
font-family: Whitney, "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
color: #ffffff;
|
||||
padding: 4px;
|
||||
border-radius: 5px;
|
||||
margin-top: 5px;
|
||||
|
||||
text-align: center;
|
||||
border-style: none;
|
||||
outline: none;
|
||||
}
|
||||
.setup-ask {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.center {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
/* }}} */
|
||||
|
||||
#setup {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* Warning {{{ */
|
||||
#warning {
|
||||
font-size: 1.5em;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
|
||||
max-width: 328px;
|
||||
background-color: rgba(255, 0, 0, 0.1);
|
||||
|
||||
border: red solid 2px;
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
#warning > p {
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
margin: 1rem;
|
||||
}
|
||||
/* }}} */
|
||||
|
||||
/* Logo {{{ */
|
||||
#logo {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
#logo p:first-child {
|
||||
color: #7289da;
|
||||
margin: 0;
|
||||
font-weight: normal;
|
||||
font-family: Helvetica, sans-serif;
|
||||
font-size: 32px;
|
||||
}
|
||||
#logo p:last-child {
|
||||
color: white;
|
||||
margin: 0;
|
||||
font-weight: normal;
|
||||
font-family: Discordinated;
|
||||
font-size: 32px;
|
||||
}
|
||||
/* }}} */
|
||||
|
||||
/* Buttons {{{ */
|
||||
#buttons {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
|
||||
user-select: all !important;
|
||||
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
button {
|
||||
background: var(--brand-experiment);
|
||||
color: var(--header-primary);
|
||||
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
|
||||
padding: 8px 20px;
|
||||
}
|
||||
button:hover {
|
||||
background-color: #687dc6;
|
||||
border-style: none;
|
||||
outline: none;
|
||||
filter: brightness(85%);
|
||||
cursor: pointer;
|
||||
}
|
||||
/* }}} */
|
||||
|
||||
/* Dropdowns {{{ */
|
||||
select {
|
||||
-webkit-appearance: button;
|
||||
-moz-appearance: button;
|
||||
|
|
@ -106,6 +163,4 @@ select {
|
|||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.center {
|
||||
text-align: center;
|
||||
}
|
||||
/* }}} */
|
||||
|
|
|
|||
|
|
@ -1,134 +1,150 @@
|
|||
<!--- This is awful and should be replaced in later versions. Possibly based of current settings as of 3.1.0 version. If you have time please PR a better setup screen. --->
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<link rel="stylesheet" href="https://cdn.metroui.org.ua/v4/css/metro-all.min.css" />
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>ArmCord Setup</title>
|
||||
<style>
|
||||
@import url("css/setup.css");
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1 class="logo"></h1>
|
||||
<div id="warning" class="hidden">
|
||||
<p>You appear to be offline. Please connect to the internet and restart ArmCord Setup.</p>
|
||||
</div>
|
||||
<div id="setup">
|
||||
<p>Select what kind of setup you want to perform:</p>
|
||||
<button id="express" class="center">Express setup</button>
|
||||
<button id="full" class="center">Full setup</button>
|
||||
<div id="logo" class="hidden">
|
||||
<p>ARM</p>
|
||||
<p>Cord</p>
|
||||
</div>
|
||||
<div id="page1" class="hidden">
|
||||
<p>Select the type of setup you want to perform.</p>
|
||||
<div id="buttons">
|
||||
<button id="express" class="center">Express</button>
|
||||
<button id="full" class="center">Full</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="page2" class="hidden">
|
||||
<p class="text-center setup-ask">Choose your Discord channel/instance:</p>
|
||||
<div class="center">
|
||||
<select name="channel" id="channel" class="dropdown-button">
|
||||
<option value="stable">Stable</option>
|
||||
<option value="canary">Canary</option>
|
||||
<option value="ptb">PTB</option>
|
||||
<option value="foss">Fosscord</option>
|
||||
</select>
|
||||
</div>
|
||||
<p class="text-center setup-ask">Should ArmCord handle client mods installation?</p>
|
||||
<div class="center">
|
||||
<select name="csp" id="csp" class="dropdown-button">
|
||||
<option value="true">Yes</option>
|
||||
<option value="false">No</option>
|
||||
</select>
|
||||
</div>
|
||||
<div id="buttons">
|
||||
<button id="next" class="center">Next</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="page3" class="hidden">
|
||||
<p class="text-center setup-ask">Select a client mod you want to install:</p>
|
||||
<div class="center">
|
||||
<select name="mod" id="mod" class="dropdown-button">
|
||||
<option value="cumcord">Cumcord</option>
|
||||
<option value="goosemod">GooseMod</option>
|
||||
<option value="flicker">Flicker (Heavily WIP)</option>
|
||||
</select>
|
||||
</div>
|
||||
<p>
|
||||
Why not all of them? Having many client mods at the same time can cause issues. If you really
|
||||
want to do it though, check our documentation ;)
|
||||
</p>
|
||||
<div id="buttons">
|
||||
<button id="next" class="center">Next</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function fade(element) {
|
||||
var op = 1; // initial opacity
|
||||
var timer = setInterval(function () {
|
||||
if (op <= 0.1) {
|
||||
clearInterval(timer);
|
||||
element.style.display = "none";
|
||||
}
|
||||
element.style.opacity = op;
|
||||
element.style.filter = "alpha(opacity=" + op * 100 + ")";
|
||||
op -= op * 0.1;
|
||||
}, 50);
|
||||
// Accessors {{{
|
||||
let options = {};
|
||||
|
||||
let logo = document.getElementById("logo");
|
||||
logo.classList.remove("hidden");
|
||||
|
||||
let page1 = document.getElementById("page1");
|
||||
page1.classList.remove("hidden");
|
||||
page1.buttons = document.querySelectorAll("#page1 > #buttons > button");
|
||||
|
||||
// Connection check
|
||||
let warning = document.getElementById("warning");
|
||||
if (window.navigator.onLine === false) {
|
||||
warning.classList.remove("hidden");
|
||||
}
|
||||
|
||||
if (window.navigator.onLine === false) {
|
||||
document.getElementById("setup").innerHTML =
|
||||
"You appear to be offline. Please connect to the internet and restart ArmCord Setup.";
|
||||
} else {
|
||||
console.log("Starting ArmCord Setup...");
|
||||
document.getElementById("express").addEventListener("click", function () {
|
||||
let page2 = document.getElementById("page2");
|
||||
let page3 = document.getElementById("page3");
|
||||
// }}}
|
||||
|
||||
// Express
|
||||
page1.buttons[0].addEventListener("click", () => {
|
||||
window.armcordinternal.saveSettings({
|
||||
windowStyle: "default",
|
||||
channel: "stable",
|
||||
armcordCSP: true,
|
||||
minimizeToTray: true,
|
||||
automaticPatches: false,
|
||||
mods: "cumcord",
|
||||
blurType: "acrylic"
|
||||
});
|
||||
setTimeout(() => window.armcordinternal.restart(), 5000);
|
||||
});
|
||||
|
||||
// Full
|
||||
page1.buttons[1].addEventListener("click", () => {
|
||||
page1.classList.add("hidden");
|
||||
page2.classList.remove("hidden");
|
||||
});
|
||||
|
||||
page2.buttons = document.querySelectorAll("#page2 > #buttons > button");
|
||||
page2.buttons[0].addEventListener("click", () => {
|
||||
options.channel = document.getElementById("channel").value;
|
||||
options.csp = document.getElementById("csp").value;
|
||||
page2.classList.add("hidden");
|
||||
|
||||
page3.buttons = document.querySelectorAll("#page3 > #buttons > button");
|
||||
if (options.csp === "true") {
|
||||
page3.classList.remove("hidden");
|
||||
page3.buttons[0].addEventListener("click", () => {
|
||||
options.mod = document.getElementById("mod").value;
|
||||
window.armcordinternal.saveSettings({
|
||||
windowStyle: "default",
|
||||
channel: options.channel,
|
||||
armcordCSP: true,
|
||||
minimizeToTray: true,
|
||||
automaticPatches: false,
|
||||
mods: options.mod,
|
||||
blurType: "acrylic"
|
||||
});
|
||||
setTimeout(() => window.armcordinternal.restart(), 500);
|
||||
});
|
||||
} else {
|
||||
window.armcordinternal.saveSettings({
|
||||
windowStyle: "default",
|
||||
channel: "stable",
|
||||
channel: options.channel,
|
||||
armcordCSP: true,
|
||||
minimizeToTray: true,
|
||||
automaticPatches: false,
|
||||
mods: "cumcord",
|
||||
blurType: "acrylic",
|
||||
inviteWebsocket: true,
|
||||
doneSetup: true
|
||||
mods: "none",
|
||||
blurType: "acrylic"
|
||||
});
|
||||
fade(document.getElementById("setup"));
|
||||
setTimeout(function () {
|
||||
window.armcordinternal.restart();
|
||||
}, 5000);
|
||||
});
|
||||
document.getElementById("full").addEventListener("click", function () {
|
||||
document.getElementById("setup").innerHTML = `
|
||||
<p class="text-center setup-ask">Choose your Discord channel/instance:</p>
|
||||
<div class="center">
|
||||
<select name="channel" id="channel" class="dropdown-button">
|
||||
<option value="stable">Stable</option>
|
||||
<option value="canary">Canary</option>
|
||||
<option value="ptb">PTB</option>
|
||||
<option value="foss">Fosscord</option>
|
||||
</select>
|
||||
</div>
|
||||
<p class="text-center setup-ask">Should ArmCord handle client mods installation?</p>
|
||||
<div class="center">
|
||||
<select name="csp" id="csp" class="dropdown-button">
|
||||
<option value="true">Yes</option>
|
||||
<option value="false">No</option>
|
||||
</select>
|
||||
</div>
|
||||
<button id="next" class="center">Next</button>
|
||||
`;
|
||||
document.getElementById("next").addEventListener("click", function () {
|
||||
var branch = document.getElementById("channel").value;
|
||||
var csp = document.getElementById("csp").value;
|
||||
if (csp === "true") {
|
||||
document.getElementById("setup").innerHTML = `
|
||||
<p class="text-center setup-ask">Select a client mod you want to install:</p>
|
||||
<div class="center">
|
||||
<select name="mod" id="mod" class="dropdown-button">
|
||||
<option value="cumcord">Cumcord</option>
|
||||
<option value="goosemod">GooseMod</option>
|
||||
<option value="flicker">Flicker (Heavily WIP)</option>
|
||||
</select>
|
||||
</div>
|
||||
<p>Why not all of them? Having many client mods at the same time can cause issues. If you really want to do it though, check our documentation ;)</p>
|
||||
<button id="next" class="center">Next</button>
|
||||
`;
|
||||
document.getElementById("next").addEventListener("click", function () {
|
||||
var mod = document.getElementById("mod").value;
|
||||
window.armcordinternal.saveSettings({
|
||||
windowStyle: "default",
|
||||
channel: branch,
|
||||
armcordCSP: true,
|
||||
minimizeToTray: true,
|
||||
automaticPatches: false,
|
||||
mods: mod,
|
||||
blurType: "acrylic",
|
||||
inviteWebsocket: true,
|
||||
doneSetup: true
|
||||
});
|
||||
fade(document.getElementById("setup"));
|
||||
setTimeout(function () {
|
||||
window.armcordinternal.restart();
|
||||
}, 5000);
|
||||
});
|
||||
} else {
|
||||
window.armcordinternal.saveSettings({
|
||||
windowStyle: "default",
|
||||
channel: branch,
|
||||
armcordCSP: true,
|
||||
minimizeToTray: true,
|
||||
automaticPatches: false,
|
||||
mods: "none",
|
||||
blurType: "acrylic",
|
||||
inviteWebsocket: true,
|
||||
doneSetup: true
|
||||
});
|
||||
fade(document.getElementById("setup"));
|
||||
setTimeout(function () {
|
||||
window.armcordinternal.restart();
|
||||
}, 5000);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
setTimeout(() => window.armcordinternal.restart(), 500);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -68,8 +68,8 @@ async function doAfterDefiningTheWindow() {
|
|||
}
|
||||
export function createCustomWindow() {
|
||||
mainWindow = new BrowserWindow({
|
||||
width: 300,
|
||||
height: 350,
|
||||
width: 390,
|
||||
height: 470,
|
||||
title: "ArmCord",
|
||||
darkTheme: true,
|
||||
icon: path.join(__dirname, "/assets/icon_transparent.png"),
|
||||
|
|
|
|||
Loading…
Reference in a new issue