From d1b5b74060ec976b593b94e3380543d0a075943e Mon Sep 17 00:00:00 2001
From: Harvey Tindall <hrfee@protonmail.ch>
Date: Fri, 31 Dec 2021 17:28:08 +0000
Subject: [PATCH] make most modals white

---
 css/base.css              |  11 +-
 html/admin.html           |  22 +-
 html/setup.html           |   2 +-
 main.go                   |   2 +-
 migrations.go             |   4 +-
 scripts/admin.html        | 655 -------------------------------------
 scripts/admin2.html       | 656 --------------------------------------
 scripts/missing-colors.js |   3 +-
 8 files changed, 27 insertions(+), 1328 deletions(-)
 delete mode 100644 scripts/admin.html
 delete mode 100644 scripts/admin2.html

diff --git a/css/base.css b/css/base.css
index 451be8d..65a3daf 100644
--- a/css/base.css
+++ b/css/base.css
@@ -15,7 +15,7 @@
     --border-width-8: 8px;
 }
 
-.light-theme {
+.light {
     --settings-section-button-filter: 90%;
 }
 
@@ -27,6 +27,15 @@
     background: #202020;
 }
 
+html:not(.dark) .card.\@low:not(.\~neutral):not(.\~positive):not(.\~urge):not(.\~warning):not(.\~info):not(.\~critical) {
+    --color-fill: va(--color-fill);
+    --color-content: var(--color-content);
+    --color-accent: var(--color-accent);
+    --color-muted: var(--color-muted);
+    background-color: #fff;
+    color: inherit;
+}
+
 .light-only {
   display: none;
 }
diff --git a/html/admin.html b/html/admin.html
index 38e8eb1..68b159c 100644
--- a/html/admin.html
+++ b/html/admin.html
@@ -43,7 +43,7 @@
             </form>
         </div>
         <div id="modal-about" class="modal">
-            <div class="modal-content content card">
+            <div class="modal-content content card wide">
                 <img src="{{ .urlBase }}/banner.svg" class="banner header" alt="jfa-go banner">
                 <span class="heading"><span class="modal-close">&times;</span></span>
                 <p>{{ .strings.version }} <span class="code monospace">{{ .version }}</span></p>
@@ -414,24 +414,24 @@
         <div class="page-container">
             <div class="mb-4">
                 <header class="flex flex-wrap items-center justify-between">
-                    <div class="text-neutral-700">
-                        <span id="button-tab-invites" class="tab-button portal">{{ .strings.invites }}</span>
-                        <span id="button-tab-accounts" class="tab-button portal">{{ .strings.accounts }}</span>
-                        <span id="button-tab-settings" class="tab-button portal">{{ .strings.settings }}</span>
+                    <div>
+                        <span id="button-tab-invites" class="text-3xl button portal ~neutral dark:~d_neutral @low mr-2 px-5">{{ .strings.invites }}</span>
+                        <span id="button-tab-accounts" class="text-3xl button portal ~neutral dark:~d_neutral @low mr-2 px-5">{{ .strings.accounts }}</span>
+                        <span id="button-tab-settings" class="text-3xl button portal ~neutral dark:~d_neutral @low mr-2 px-5">{{ .strings.settings }}</span>
                     </div>
                 </header>
             </div>
             <div class="mb-4">
-                <div class="text-neutral-700">
+                <div>
                     <span class="button ~critical @low mb-4 unfocused" id="logout-button">{{ .strings.logout }}</span>
                 </div>
             </div>
             <div id="tab-invites">
-                <div class="card ~neutral @low invites mb-4">
+                <div class="card @low invites dark:~d_neutral mb-4">
                     <span class="heading">{{ .strings.invites }}</span>
                     <div id="invites"></div>
                 </div>
-                <div class="card ~neutral @low">
+                <div class="card @low dark:~d_neutral">
                     <span class="heading">{{ .strings.create }}</span>
                     <div class="row" id="create-inv">
                         <div class="card ~neutral @low col">
@@ -570,7 +570,7 @@
                 </div>
             </div>
             <div id="tab-accounts" class="unfocused">
-                <div class="card ~neutral @low accounts mb-4">
+                <div class="card @low dark:~d_neutral accounts mb-4">
                     <div class="flex-expand row">
                         <div class="row">
                             <span class="text-3xl font-bold mr-2 col">{{ .strings.accounts }}</span>
@@ -627,7 +627,7 @@
                 </div>
             </div>
             <div id="tab-settings" class="unfocused">
-                <div class="card ~neutral @low settings overflow">
+                <div class="card @low dark:~d_neutral settings overflow">
                     <div class="flex-expand">
                         <div class="flex-row">
                             <span class="heading">{{ .strings.settings }}</span>
@@ -642,7 +642,7 @@
                         </div>
                     </div>
                     <div class="row">
-                        <div class="card ~neutral @low col" id="settings-sidebar">
+                        <div class="card @low dark:~d_neutral col" id="settings-sidebar">
                             <aside class="aside sm ~info mb-2" id="settings-message">Note: <span class="badge ~critical">*</span> indicates a required field, <span class="badge ~info">R</span> indicates changes require a restart.</aside> 
                             <span class="button ~neutral @low settings-section-button justify-between mb-2" id="setting-about"><span class="flex">{{ .strings.aboutProgram }} <i class="ri-information-line ml-2"></i></span></span>
                             <span class="button ~neutral @low settings-section-button justify-between mb-2" id="setting-profiles"><span class="flex">{{ .strings.userProfiles }} <i class="ri-user-line ml-2"></i></span></span>
diff --git a/html/setup.html b/html/setup.html
index e6ce28e..b690448 100644
--- a/html/setup.html
+++ b/html/setup.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" class="light-theme">
+<html lang="en" class="light">
     <head>
         <link rel="stylesheet" type="text/css" href="css/bundle.css">
         {{ template "header.html" . }}
diff --git a/main.go b/main.go
index 2adf3ce..d69d80a 100644
--- a/main.go
+++ b/main.go
@@ -82,7 +82,7 @@ type appContext struct {
 	configBase     settings
 	dataPath       string
 	webFS          httpFS
-	cssClass       string // Default theme, "light-theme"|"dark-theme".
+	cssClass       string // Default theme, "light"|"dark".
 	jellyfinLogin  bool
 	users          []User
 	invalidTokens  []string
diff --git a/migrations.go b/migrations.go
index eb84c62..8510ad5 100644
--- a/migrations.go
+++ b/migrations.go
@@ -40,8 +40,8 @@ func migrateProfiles(app *appContext) {
 // Migrate pre-0.2.5 bootstrap theme choice to a17t version.
 func migrateBootstrap(app *appContext) {
 	themes := map[string]string{
-		"Jellyfin (Dark)": "dark-theme",
-		"Default (Light)": "light-theme",
+		"Jellyfin (Dark)": "dark",
+		"Default (Light)": "light",
 	}
 
 	if app.config.Section("ui").Key("theme").String() == "Bootstrap (Light)" {
diff --git a/scripts/admin.html b/scripts/admin.html
deleted file mode 100644
index 2fc6f9f..0000000
--- a/scripts/admin.html
+++ /dev/null
@@ -1,655 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" class="{{ .cssClass }}">
-    <head>
-        <link rel="stylesheet" type="text/css" href="{{ .urlBase }}/css/bundle.css">
-        <script>
-            window.URLBase = "{{ .urlBase }}";
-            window.notificationsEnabled = {{ .notifications }};
-            window.emailEnabled = {{ .emailEnabled }};
-            window.telegramEnabled = {{ .telegramEnabled }};
-            window.discordEnabled = {{ .discordEnabled }};
-            window.matrixEnabled = {{ .matrixEnabled }};
-            window.ombiEnabled = {{ .ombiEnabled }};
-            window.usernameEnabled = {{ .username }};
-            window.langFile = JSON.parse({{ .language }});
-            window.linkResetEnabled = {{ .linkResetEnabled }};
-            window.language = "{{ .langName }}";
-        </script>
-        {{ template "header.html" . }}
-        <title>Admin - jfa-go</title>
-    </head>
-    <body class="max-w-full overflow-x-hidden section">
-        <div id="modal-login" class="modal">
-            <form class="modal-content card" id="form-login" href="">
-                <span class="heading">{{ .strings.login }}</span>
-                <input type="text" class="field input ~neutral @high mt-half mb-1" placeholder="{{ .strings.username }}" id="login-user">
-                <input type="password" class="field input ~neutral @high mb-1" placeholder="{{ .strings.password }}" id="login-password">
-                <label>
-                    <input type="submit" class="unfocused">
-                    <span class="button ~urge @low full-width center supra submit">{{ .strings.login }}</span>
-                </label>
-            </form>
-        </div>
-        <div id="modal-add-user" class="modal">
-            <form class="modal-content card" id="form-add-user" href="">
-                <span class="heading">{{ .strings.newUser }} <span class="modal-close">&times;</span></span>
-                <input type="text" class="field input ~neutral @high mt-half mb-1" placeholder="{{ .strings.username }}" id="add-user-user">
-                <input type="email" class="field input ~neutral @high mt-half mb-1" placeholder="{{ .strings.emailAddress }}">
-                <input type="password" class="field input ~neutral @high mb-1" placeholder="{{ .strings.password }}" id="add-user-password">
-                <label>
-                    <input type="submit" class="unfocused">
-                    <span class="button ~urge @low full-width center supra submit">{{ .strings.create }}</span>
-                </label>
-            </form>
-        </div>
-        <div id="modal-about" class="modal">
-            <div class="modal-content content card">
-                <img src="{{ .urlBase }}/banner.svg" class="banner header" alt="jfa-go banner">
-                <span class="heading"><span class="modal-close">&times;</span></span>
-                <p>{{ .strings.version }} <span class="code monospace">{{ .version }}</span></p>
-                <p>{{ .strings.commitNoun }} <span class="code monospace">{{ .commit }}</span></p>
-                <div class="row col flex">
-                    <a class="button ~neutral mr-half mt-1 mb-1 lang-link" href="https://github.com/hrfee/jfa-go"><i class="ri-github-line mr-half"></i>github</a>
-                    <a class="button ~urge mt-1 mb-1 mr-half lang-link" href="https://wiki.jfa-go.com">wiki/docs</a>
-                    <a class="button ~positive mt-1 mb-1 mr-half lang-link" href="https://weblate.jfa-go.com">translation</a>
-                    <div class="dropdown mr-half" tabindex="0">
-                        <a href="https://github.com/sponsors/hrfee" target="_blank" class="button ~info mt-1 mb-1 dropdown-button lang-link">
-                            <i class="ri-hand-heart-line mr-half"></i>
-                            donate
-                            <span class="ml-1 chev"></span>
-                        </a>
-                        <div class="dropdown-display">
-                            <div class="card ~info @low">
-                                <a href="https://github.com/sponsors/hrfee" target="_blank" class="button input ~neutral field mb-half lang-link">GitHub</a>
-                                <a href="https://ko-fi.com/hrfee" target="_blank" class="button input ~neutral field mb-half lang-link">Ko-fi</a>
-                            </div>
-                        </div>
-                    </div>
-                    <a class="button ~urge mt-1 mb-1 @low discord lang-link" href="https://discord.com/invite/MrtvuQmyhP" target="_blank"><i class="ri-discord-line mr-half"></i>discord</a>
-                </div>
-                <p><a href="https://github.com/hrfee/jfa-go/blob/main/LICENSE">Available under the MIT License.</a></p>
-                <pre class="monospace">{{ .license }}</pre>
-            </div>
-        </div>
-        <div id="modal-modify-user" class="modal">
-            <form class="modal-content card" id="form-modify-user" href="">
-                <span class="heading"><span id="header-modify-user"></span> <span class="modal-close">&times;</span></span>
-                <p class="content">{{ .strings.modifySettingsDescription }}</p>
-                <div class="flex-row mb-1">
-                    <label class="flex-row-group mr-1">
-                        <input type="radio" name="modify-user-source" class="unfocused" id="radio-use-profile" checked>
-                        <span class="button ~neutral @high supra full-width center">{{ .strings.profile }}</span>
-                    </label>
-                    <label class="flex-row-group ml-1">
-                        <input type="radio" name="modify-user-source" class="unfocused" id="radio-use-user">
-                        <span class="button ~neutral @low supra full-width center">{{ .strings.user }}</span>
-                    </label>
-                </div>
-                <div class="select ~neutral @low mb-1">
-                    <select id="modify-user-profiles"></select>
-                </div>
-                <div class="select ~neutral @low mb-1 unfocused">
-                    <select id="modify-user-users"></select>
-                </div>
-                <label class="switch mb-1">
-                    <input type="checkbox" id="modify-user-homescreen" checked>
-                    <span>{{ .strings.applyHomescreenLayout }}</span>
-                </label>
-                <label>
-                    <input type="submit" class="unfocused">
-                    <span class="button ~urge @low full-width center supra submit">{{ .strings.apply }}</span>
-                </label>
-            </form>
-        </div>
-        <div id="modal-delete-user" class="modal">
-            <form class="modal-content card" id="form-delete-user" href="">
-                <span class="heading"><span id="header-delete-user"></span> <span class="modal-close">&times;</span></span>
-                <div class="content mt-half">
-                    <label class="switch mb-1">
-                        <input type="checkbox" id="delete-user-notify" checked>
-                        <span>{{ .strings.sendDeleteNotificationEmail }}</span>
-                    </label>
-                    <textarea id="textarea-delete-user" class="textarea full-width ~neutral @low mb-1" placeholder="{{ .strings.sendDeleteNotificationExample }}"></textarea>
-                    <label>
-                        <input type="submit" class="unfocused">
-                        <span class="button ~critical @low full-width center supra submit">{{ .strings.delete }}</span>
-                    </label>
-                </div>
-            </form>
-        </div>
-        <div id="modal-extend-expiry" class="modal">
-            <form class="modal-content card" id="form-extend-expiry" href="">
-                <span class="heading"><span id="header-extend-expiry"></span> <span class="modal-close">&times;</span></span>
-                <div class="content mt-half">
-                    <div class="row">
-                        <div class="col">
-                            <label class="label supra" for="extend-expiry-months">{{ .strings.inviteMonths }}</label>
-                            <div class="select ~neutral @low mb-1 mt-half">
-                                <select id="extend-expiry-months">
-                                    <option>0</option>
-                                </select>
-                            </div>
-                        </div>
-                        <div class="col">
-                            <label class="label supra" for="extend-expiry-days">{{ .strings.inviteDays }}</label>
-                            <div class="select ~neutral @low mb-1 mt-half">
-                                <select id="extend-expiry-days">
-                                    <option>0</option>
-                                </select>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="row">
-                        <div class="col">
-                            <label class="label supra" for="extend-expiry-hours">{{ .strings.inviteHours }}</label>
-                            <div class="select ~neutral @low mb-1 mt-half">
-                                <select id="extend-expiry-hours">
-                                    <option>0</option>
-                                </select>
-                            </div>
-                        </div>
-                        <div class="col">
-                            <label class="label supra" for="extend-expiry-minutes">{{ .strings.inviteMinutes }}</label>
-                            <div class="select ~neutral @low mb-1 mt-half">
-                                <select id="extend-expiry-minutes">
-                                    <option>0</option>
-                                </select>
-                            </div>
-                        </div>
-                    </div>
-                    <label class="switch mb-1">
-                        <input type="checkbox" id="expiry-extend-enable" checked>
-                        <span>{{ .strings.sendDeleteNotificationEmail }}</span>
-                    </label>
-                    <textarea id="textarea-extend-enable" class="textarea full-width ~neutral @low mb-1" placeholder="{{ .strings.sendDeleteNotificationExample }}"></textarea>
-                    <label>
-                        <input type="submit" class="unfocused">
-                        <span class="button ~critical @low full-width center supra submit">{{ .strings.submit }}</span>
-                    </label>
-                </div>
-            </form>
-        </div>
-        <div id="modal-announce" class="modal">
-            <form class="modal-content wide card" id="form-announce" href="">
-                <span class="heading"><span id="header-announce"></span> <span class="modal-close">&times;</span></span>
-                <div class="row">
-                    <div class="col flex-col content mt-half">
-                        <div id="announce-details">
-                            <span class="label supra" for="editor-variables" id="label-editor-variables">{{ .strings.variables }}</span>
-                            <div id="announce-variables">
-                                <span class="button ~urge @low mb-1 mt-half" id="announce-variables-username" style="margin-left: 0.25rem; margin-right: 0.25rem;"><span class="monospace">{username}</span></span>
-                            </div>
-                            <label class="label supra" for="announce-subject"> {{ .strings.subject }}</label>
-                            <input type="text" id="announce-subject" class="input ~neutral @low mb-1 mt-half">
-                            <label class="label supra" for="textarea-announce">{{ .strings.message }}</label>
-                            <textarea id="textarea-announce" class="textarea full-width ~neutral @low mt-half monospace"></textarea>
-                            <p class="support mt-half mb-1">{{ .strings.markdownSupported }}</p>
-                        </div>
-                        <label class="label unfocused" id="announce-name"><p class="supra">{{ .strings.name }}</p>
-                            <input type="text" class="input ~neutral @low mb-1 mt-half">
-                            <p class="support">{{ .strings.templateEnterName }}</p>
-                        </label>
-                        <div class="row flex-expand">
-                            <label>
-                                <input type="submit" class="unfocused">
-                                <span class="button ~urge @low center supra submit">{{ .strings.send }}</span>
-                            </label>
-                            <span class="button ~info @low center supra" id="save-announce">{{ .strings.saveAsTemplate }}</span>
-                        </div>
-                    </div>
-                    <div class="col card ~neutral @low">
-                        <span class="subheading supra">{{ .strings.preview }}</span>
-                        <div class="mt-half" id="announce-preview"></div>
-                    </div>
-                </div>
-            </form>
-        </div>
-        <div id="modal-customize" class="modal">
-            <div class="modal-content card">
-                <span class="heading">{{ .strings.customizeMessages }} <span class="modal-close">&times;</span></span>
-                <p class="content">{{ .strings.customizeMessagesDescription }}</p>
-                <div class="table-responsive">
-                    <table class="table">
-                        <thead>
-                            <tr>
-                                <th>{{ .strings.name }}</th>
-                                <th>{{ .strings.reset }}</th>
-                                <th>{{ .strings.edit }}</th>
-                            </tr>
-                        </thead>
-                        <tbody id="customize-list"></tbody>
-                    </table>
-                </div>
-            </div>
-        </div>
-        <div id="modal-editor" class="modal">
-            <form class="modal-content wide card" id="form-editor" href="">
-                <span class="heading"><span id="header-editor"></span> <span class="modal-close">&times;</span></span>
-                <div class="row">
-                    <div class="col flex-col content mt-half">
-                        <span class="label supra" for="editor-variables" id="label-editor-variables">{{ .strings.variables }}</span>
-                        <div id="editor-variables"></div>
-                        <span class="label supra" for="editor-conditionals" id="label-editor-conditionals">{{ .strings.conditionals }}</span>
-                        <div id="editor-conditionals"></div>
-                        <label class="label supra" for="textarea-editor">{{ .strings.message }}</label>
-                        <textarea id="textarea-editor" class="textarea full-width flex-auto ~neutral @low mt-half monospace"></textarea>
-                        <p class="support mt-half mb-1">{{ .strings.markdownSupported }}</p>
-                        <div class="flex-row">
-                            <label class="full-width ml-half">
-                                <input type="submit" class="unfocused">
-                                <span class="button ~urge @low full-width center supra submit">{{ .strings.submit }}</span>
-                            </label>
-                        </div>
-                    </div>
-                    <div class="col card ~neutral @low">
-                        <span class="subheading supra">{{ .strings.preview }}</span>
-                        <div class="mt-half" id="editor-preview"></div>
-                    </div>
-                </div>
-            </form>
-        </div>
-        <div id="modal-restart" class="modal">
-            <div class="modal-content card ~critical @low">
-                <span class="heading">{{ .strings.settingsRestartRequired }} <span class="modal-close">&times;</span></span>
-                <p class="content pb-1">{{ .strings.settingsRestartRequiredDescription }}</p>
-                <div class="fr">
-                    <span class="button ~info @low mb-half" id="settings-apply-no-restart">{{ .strings.settingsApplyRestartLater }}</span>
-                    <span class="button ~critical @low" id="settings-apply-restart">{{ .strings.settingsApplyRestartNow }}</span>
-                </div>
-            </div>
-        </div>
-        <div id="modal-refresh" class="modal">
-            <div class="modal-content card ~neutral @low">
-                <span class="heading">{{ .strings.settingsApplied }}</span>
-                <p class="content">{{ .strings.settingsRefreshPage }}</p>
-            </div>
-        </div>
-        <div id="modal-send-pwr" class="modal">
-            <div class="modal-content card ~neutral @low">
-                <span class="heading">{{ .strings.sendPWR }}</span>
-                <p class="content" id="send-pwr-note"></p>
-                <span class="button ~urge @low mt-half" id="send-pwr-link">{{ .strings.copy }}</span>
-            </div>
-        </div>
-        <div id="modal-ombi-profile" class="modal">
-            <form class="modal-content card" id="form-ombi-defaults" href="">
-                <span class="heading">{{ .strings.ombiProfile }} <span class="modal-close">&times;</span></span>
-                <p class="content">{{ .strings.ombiUserDefaultsDescription }}</p>
-                <div class="select ~neutral @low mb-1">
-                    <select></select>
-                </div>
-                <label>
-                    <input type="submit" class="unfocused">
-                    <span class="button ~urge @low full-width center supra submit">{{ .strings.submit }}</span>
-                </label>
-            </form>
-        </div>
-        <div id="modal-user-profiles" class="modal">
-            <div class="modal-content wide card">
-                <span class="heading">{{ .strings.userProfiles }} <span class="modal-close">&times;</span></span>
-                <p class="support lg">{{ .strings.userProfilesDescription }}</p>
-                <div class="table-responsive">
-                    <table class="table">
-                        <thead>
-                            <tr>
-                                <th>{{ .strings.name }}</th>
-                                <th>{{ .strings.userProfilesIsDefault }}</th>
-                                {{ if .ombiEnabled }}
-                                <th>Ombi</th>
-                                {{ end }}
-                                <th>{{ .strings.from }}</th>
-                                <th>{{ .strings.userProfilesLibraries }}</th>
-                                <th><span class="button ~neutral @high" id="button-profile-create">{{ .strings.create }}</span></th>
-                            </tr>
-                        </thead>
-                        <tbody id="table-profiles"></tbody>
-                    </table>
-                </div>
-            </div>
-        </div>
-        <div id="modal-add-profile" class="modal">
-            <form class="modal-content card" id="form-add-profile" href="">
-                <span class="heading">{{ .strings.addProfile }} <span class="modal-close">&times;</span></span>
-                <p class="content">{{ .strings.addProfileDescription }}</p>
-                <label>
-                    <span class="supra">{{ .strings.addProfileNameOf }} </span>
-                    <input type="text" class="field input ~neutral @high mt-half mb-1" placeholder="{{ .strings.name }}" id="add-profile-name">
-                <label>
-                    <span class="supra">{{ .strings.user }}</span>
-                    <div class="select ~neutral @low mt-half mb-1">
-                        <select id="add-profile-user"></select>
-                    </div>
-                </label>
-                <label class="switch mb-1">
-                    <input type="checkbox" id="add-profile-homescreen" checked>
-                    <span>{{ .strings.addProfileStoreHomescreenLayout }}</span>
-                </label>
-                <label>
-                    <input type="submit" class="unfocused">
-                    <span class="button ~urge @low full-width center supra submit">{{ .strings.create }}</span>
-                </label>
-            </form>
-        </div>
-        <div id="modal-update" class="modal">
-            <div class="modal-content wide card">
-                <span class="heading">{{ .strings.updates }} <span class="modal-close">&times;</span></span>
-                <p class="content">
-                    <h2>
-                        <a id="update-version"></a> (<span class="monospace" id="update-commit"></span>)
-                    </h2>
-                    <p class="content" id="update-description"></p>
-                    <p class="support" id="update-date"></p>
-                    <div class="content markdown-box" id="update-changelog"></div>
-                </p>
-                <span class="button ~info @low full-width center" id="update-download">{{ .strings.download }}</span>
-                <span class="button ~urge @low full-width center" id="update-update">{{ .strings.update }}</span>
-            </div>
-        </div>
-        {{ if .telegramEnabled }}
-        <div id="modal-telegram" class="modal">
-            <div class="modal-content card">
-                <span class="heading mb-1">{{ .strings.linkTelegram }}</span>
-                <p class="content mb-1">{{ .strings.sendPIN }}</p>
-                <h1 class="ac" id="telegram-pin"></h1>
-                <a class="subheading link-center" id="telegram-link" target="_blank">
-                    <span class="shield ~info mr-1">
-                        <span class="icon">
-                            <i class="ri-telegram-line"></i>
-                        </span>
-                    </span>
-                    &#64;<span id="telegram-username">
-                </a>
-                <span class="button ~info @low full-width center mt-1" id="telegram-waiting">{{ .strings.success }}</span>
-            </div>
-        </div>
-        {{ end }}
-        {{ if .discordEnabled }}
-        <div id="modal-discord" class="modal">
-            <div class="modal-content card">
-                <span class="heading mb-1"><span id="discord-header"></span><span class="modal-close">&times;</span></span>
-                <p class="content mb-1" id="discord-description"></p>
-                <div class="row">
-                    <input type="search" class="col sm field ~neutral @low input" id="discord-search" placeholder="user#1234">
-                </div>
-                <table class="table"><tbody id="discord-list"></tbody></table>
-            </div>
-        </div>
-        {{ end }}
-        <div id="modal-matrix" class="modal">
-            <form class="modal-content card" id="form-matrix" href="">
-                <span class="heading">{{ .strings.linkMatrix }}</span>
-                <p class="content">{{ .strings.linkMatrixDescription }}</p>
-                <input type="text" class="field input ~neutral @high mt-half mb-1" placeholder="{{ .strings.matrixHomeServer }}" id="matrix-homeserver">
-                <input type="text" class="field input ~neutral @high mt-half mb-1" placeholder="{{ .strings.username }}" id="matrix-user">
-                <input type="password" class="field input ~neutral @high mt-half mb-1" placeholder="{{ .strings.password }}" id="matrix-password">
-                <label>
-                    <input type="submit" class="unfocused">
-                    <span class="button ~urge @low full-width center supra submit">{{ .strings.submit }}</span>
-                </label>
-            </form>
-        </div>
-        <div id="notification-box"></div>
-        <span class="dropdown" tabindex="0" id="lang-dropdown">
-            <span class="button ~urge dropdown-button">
-                <i class="ri-global-line"></i>
-                <span class="ml-1 chev"></span>
-            </span>
-            <div class="dropdown-display">
-                <div class="card ~neutral @low">
-                    <label class="switch pb-1">
-                        <input type="radio" name="lang-time" id="lang-12h">
-                        <span>{{ .strings.time12h }}</span>
-                    </label>
-                    <label class="switch pb-1">
-                        <input type="radio" name="lang-time" id="lang-24h">
-                        <span>{{ .strings.time24h }}</span>
-                    </label>
-                    <div id="lang-list"></div>
-                </div>
-            </div>
-        </span>
-        <span class="button ~warning" alt="{{ .strings.theme }}" id="button-theme"><i class="ri-sun-line"></i></span>
-        <div class="page-container">
-            <div class="mb-1">
-                <header class="flex flex-wrap items-center justify-between">
-                    <div class="text-neutral-700">
-                        <span id="button-tab-invites" class="tab-button portal">{{ .strings.invites }}</span>
-                        <span id="button-tab-accounts" class="tab-button portal">{{ .strings.accounts }}</span>
-                        <span id="button-tab-settings" class="tab-button portal">{{ .strings.settings }}</span>
-                    </div>
-                </header>
-            </div>
-            <div class="mb-1">
-                <div class="text-neutral-700">
-                    <span class="button ~critical @low mb-1 unfocused" id="logout-button">{{ .strings.logout }}</span>
-                </div>
-            </div>
-            <div id="tab-invites">
-                <div class="card ~neutral @low invites mb-1">
-                    <span class="heading">{{ .strings.invites }}</span>
-                    <div id="invites"></div>
-                </div>
-                <div class="card ~neutral @low">
-                    <span class="heading">{{ .strings.create }}</span>
-                    <div class="row" id="create-inv">
-                        <div class="card ~neutral @low col">
-                            <div class="row mb-1">
-                                <label class="col mr-1">
-                                    <input type="radio" name="duration" class="unfocused" id="radio-inv-duration" checked>
-                                    <span class="button ~neutral @high supra full-width center">{{ .strings.inviteDuration }}</span>
-                                </label>
-                                <label class="col ml-1">
-                                    <input type="radio" name="duration" class="unfocused" id="radio-user-expiry">
-                                    <span class="button ~neutral @low supra full-width center">{{ .strings.userExpiry }}</span>
-                                </label>
-                            </div>
-                            <div id="inv-duration">
-                                <div class="row">
-                                    <div class="col">
-                                        <label class="label supra" for="create-months">{{ .strings.inviteMonths }}</label>
-                                        <div class="select ~neutral @low mb-1 mt-half">
-                                            <select id="create-months">
-                                                <option>0</option>
-                                            </select>
-                                        </div>
-                                    </div>
-                                    <div class="col">
-                                        <label class="label supra" for="create-days">{{ .strings.inviteDays }}</label>
-                                        <div class="select ~neutral @low mb-1 mt-half">
-                                            <select id="create-days">
-                                                <option>0</option>
-                                            </select>
-                                        </div>
-                                    </div>
-                                </div>
-                                <div class="row">
-                                    <div class="col">
-                                        <label class="label supra" for="create-hours">{{ .strings.inviteHours }}</label>
-                                        <div class="select ~neutral @low mb-1 mt-half">
-                                            <select id="create-hours">
-                                                <option>0</option>
-                                            </select>
-                                        </div>
-                                    </div>
-                                    <div class="col">
-                                        <label class="label supra" for="create-minutes">{{ .strings.inviteMinutes }}</label>
-                                        <div class="select ~neutral @low mb-1 mt-half">
-                                            <select id="create-minutes">
-                                                <option>0</option>
-                                            </select>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                            <div id="user-expiry" class="unfocused">
-                                <p class="support">{{ .strings.userExpiryDescription }}</p>
-                                <div class="mb-half">
-                                    <label for="create-user-expiry-enabled" class="button ~neutral @low">
-                                        <input type="checkbox" id="create-user-expiry-enabled" aria-label="User duration enabled">
-                                        <span class="ml-half">{{ .strings.enabled }} </span>
-                                    </label>
-                                </div>
-                                <div class="row">
-                                    <div class="col">
-                                        <label class="label supra" for="user-months">{{ .strings.inviteMonths }}</label>
-                                        <div class="select ~neutral @low mb-1 mt-half">
-                                            <select id="user-months">
-                                                <option>0</option>
-                                            </select>
-                                        </div>
-                                    </div>
-                                    <div class="col">
-                                        <label class="label supra" for="user-days">{{ .strings.inviteDays }}</label>
-                                        <div class="select ~neutral @low mb-1 mt-half">
-                                            <select id="user-days">
-                                                <option>0</option>
-                                            </select>
-                                        </div>
-                                    </div>
-                                </div>
-                                <div class="row">
-                                    <div class="col">
-                                        <label class="label supra" for="user-hours">{{ .strings.inviteHours }}</label>
-                                        <div class="select ~neutral @low mb-1 mt-half">
-                                            <select id="user-hours">
-                                                <option>0</option>
-                                            </select>
-                                        </div>
-                                    </div>
-                                    <div class="col">
-                                        <label class="label supra" for="user-minutes">{{ .strings.inviteMinutes }}</label>
-                                        <div class="select ~neutral @low mb-1 mt-half">
-                                            <select id="user-minutes">
-                                                <option>0</option>
-                                            </select>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                            <div class="col">
-                                <label class="label supra" for="create-label"> {{ .strings.label }}</label>
-                                <input type="text" id="create-label" class="input ~neutral @low mb-1 mt-half">
-                            </div>
-                        </div>
-                        <div class="card ~neutral @low col">
-                            <label class="label supra" for="create-uses">{{ .strings.inviteNumberOfUses }}</label>
-                            <div class="flex-expand mb-1 mt-half">
-                                <input type="number" min="0" id="create-uses" class="input ~neutral @low mr-1" value=1>
-                                <label for="create-inf-uses" class="button ~neutral @low" title="Set uses to infinite">
-                                    <span>∞</span>
-                                    <input type="checkbox" class="unfocused" id="create-inf-uses" aria-label="Set uses to infinite">
-                                </label>
-                            </div>
-                            <p class="support unfocused" id="create-inf-uses-warning"><span class="badge ~critical">{{ .strings.warning }}</span> {{ .strings.inviteInfiniteUsesWarning }}</p>
-                            <label class="label supra">{{ .strings.profile }}</label>
-                            <div class="select ~neutral @low mb-1 mt-half">
-                                <select id="create-profile">
-                                </select>
-                            </div>
-                            <div id="create-send-to-container">
-                                <label class="label supra">{{ .strings.inviteSendToEmail }}</label>
-                                <div class="flex-expand mb-1 mt-half">
-                                    {{ if .discordEnabled }}
-                                    <input type="text" id="create-send-to" class="input ~neutral @low mr-1" placeholder="example@example.com | user#1234">
-                                    <span id="create-send-to-search" class="button ~neutral @low mr-1">
-                                        <i class="icon ri-search-2-line" title="{{ .strings.search }}"></i>
-                                    </span>
-                                    {{ else }}
-                                    <input type="email" id="create-send-to" class="input ~neutral @low mr-1" placeholder="example@example.com">
-                                    {{ end }}
-                                    <label for="create-send-to-enabled" class="button ~neutral @low">
-                                        <input type="checkbox" id="create-send-to-enabled" aria-label="Send to address enabled">
-                                    </label>
-                                </div>
-                            </div>
-                            <span class="button ~urge @low supra full-width center lg" id="create-submit">{{ .strings.create }}</span>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <div id="tab-accounts" class="unfocused">
-                <div class="card ~neutral @low accounts mb-1">
-                    <div class="flex-expand row">
-                        <div class="row">
-                            <span class="heading mr-1 col sm">{{ .strings.accounts }}</span>
-                            <input type="search" class="col sm field ~neutral @low input search ml-1 mr-1" id="accounts-search" placeholder="{{ .strings.search }}">
-                        </div>
-                        <div class="row">
-                            <span class="col sm button ~neutral @low center mb-half" id="accounts-add-user">{{ .quantityStrings.addUser.Singular }}</span>
-                            <div id="accounts-announce-dropdown" class="col sm dropdown" tabindex="0">
-                                <span class="h-100 sm button ~info @low center mb-half" id="accounts-announce">{{ .strings.announce }}</span>
-                                <div class="dropdown-display">
-                                    <div class="card ~neutral @low">
-                                        <span class="supra sm">{{ .strings.templates }}</span>
-                                        <div id="accounts-announce-templates"></div>
-                                    </div>
-                                </div>
-                            </div>
-                            <span class="col sm button ~urge @low center mb-half" id="accounts-modify-user">{{ .strings.modifySettings }}</span>
-                            <span class="col sm button ~warning @low center mb-half" id="accounts-extend-expiry">{{ .strings.extendExpiry }}</span>
-                            <div id="accounts-disable-enable-dropdown" class="col sm dropdown manual" tabindex="0">
-                                <span class="h-100 sm button ~positive @low center mb-half" id="accounts-disable-enable">{{ .strings.disable }}</span>
-                                <div class="dropdown-display">
-                                    <div class="card ~neutral @low">
-                                        <span class="button ~neutral sm full-width accounts-announce-template-button" id="accounts-enable-expiry">{{ .strings.setExpiry }}</span>
-                                    </div>
-                                </div>
-                            </div>
-                            <span class="col sm button ~info @low center mb-half unfocused" id="accounts-send-pwr">{{ .strings.sendPWR }}</span>
-                            <span class="col sm button ~critical @low center mb-half" id="accounts-delete-user">{{ .quantityStrings.deleteUser.Singular }}</span>
-                        </div>
-                    </div>
-                    <div class="card ~neutral @low accounts-header table-responsive mt-half">
-                        <table class="table">
-                            <thead>
-                                <tr>
-                                    <th><input type="checkbox" value="" id="accounts-select-all"></th>
-                                    <th>{{ .strings.username }}</th>
-                                    <th>{{ .strings.emailAddress }}</th>
-                                    {{ if .telegramEnabled }}
-                                    <th>Telegram</th>
-                                    {{ end }}
-                                    {{ if .matrixEnabled }}
-                                    <th>Matrix</th>
-                                    {{ end }}
-                                    {{ if .discordEnabled }}
-                                    <th>Discord</th>
-                                    {{ end }}
-                                    <th>{{ .strings.expiry }}</th>
-                                    <th>{{ .strings.lastActiveTime }}</th>
-                                </tr>
-                            </thead>
-                            <tbody id="accounts-list"></tbody>
-                        </table>
-                    </div>
-                </div>
-            </div>
-            <div id="tab-settings" class="unfocused">
-                <div class="card ~neutral @low settings overflow">
-                    <div class="flex-expand">
-                        <div class="flex-row">
-                            <span class="heading">{{ .strings.settings }}</span>
-                            <label for="settings-advanced-enabled" class="button ~neutral @low ml-1">
-                                <input type="checkbox" id="settings-advanced-enabled" aria-label="Advanced settings enabled">
-                                <span class="ml-half">{{ .strings.advancedSettings }} </span>
-                            </label>
-                        </div>
-                        <div>
-                            <span class="button ~neutral @low" id="settings-restart">{{ .strings.settingsRestart }}</span>
-                            <span class="button ~urge @low unfocused" id="settings-save">{{ .strings.settingsSave }}</span>
-                        </div>
-                    </div>
-                    <div class="row">
-                        <div class="card ~neutral @low col" id="settings-sidebar">
-                            <aside class="aside sm ~info mb-half" id="settings-message">Note: <span class="badge ~critical">*</span> indicates a required field, <span class="badge ~info">R</span> indicates changes require a restart.</aside> 
-                            <span class="button ~neutral @low settings-section-button mb-half" id="setting-about"><span class="flex">{{ .strings.aboutProgram }} <i class="ri-information-line ml-half"></i></span></span>
-                            <span class="button ~neutral @low settings-section-button mb-half" id="setting-profiles"><span class="flex">{{ .strings.userProfiles }} <i class="ri-user-line ml-half"></i></span></span>
-                        </div>
-                        <div class="card ~neutral @low col overflow" id="settings-panel"></div>
-                    </div>
-                </div>
-            </div>
-        </div>
-        <script src="{{ .urlBase }}/js/admin.js" type="module"></script>
-    </body>
-</html>
diff --git a/scripts/admin2.html b/scripts/admin2.html
deleted file mode 100644
index e307d1b..0000000
--- a/scripts/admin2.html
+++ /dev/null
@@ -1,656 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" class="{{ .cssClass }}">
-    <head>
-        <link rel="stylesheet" type="text/css" href="{{ .urlBase }}/css/bundle.css">
-        <script>
-            window.URLBase = "{{ .urlBase }}";
-            window.notificationsEnabled = {{ .notifications }};
-            window.emailEnabled = {{ .emailEnabled }};
-            window.telegramEnabled = {{ .telegramEnabled }};
-            window.discordEnabled = {{ .discordEnabled }};
-            window.matrixEnabled = {{ .matrixEnabled }};
-            window.ombiEnabled = {{ .ombiEnabled }};
-            window.usernameEnabled = {{ .username }};
-            window.langFile = JSON.parse({{ .language }});
-            window.linkResetEnabled = {{ .linkResetEnabled }};
-            window.language = "{{ .langName }}";
-        </script>
-        {{ template "header.html" . }}
-        <title>Admin - jfa-go</title>
-    </head>
-    
-        <div id="modal-login" class="modal">
-            <form class="modal-content card ~neutral" id="form-login" href>
-                <span class="heading">{{ .strings.login }}</span>
-                <input type="text" class="field input ~neutral @high mt-half mb-1" placeholder="{{ .strings.username }}" id="login-user">
-                <input type="password" class="field input ~neutral @high mb-1" placeholder="{{ .strings.password }}" id="login-password">
-                <label>
-                    <input type="submit" class="unfocused">
-                    <span class="button ~urge @low full-width center supra submit ~neutral">{{ .strings.login }}</span>
-                </label>
-            </form>
-        </div>
-        <div id="modal-add-user" class="modal">
-            <form class="modal-content card ~neutral" id="form-add-user" href>
-                <span class="heading">{{ .strings.newUser }} <span class="modal-close">&times;</span></span>
-                <input type="text" class="field input ~neutral @high mt-half mb-1" placeholder="{{ .strings.username }}" id="add-user-user">
-                <input type="email" class="field input ~neutral @high mt-half mb-1" placeholder="{{ .strings.emailAddress }}">
-                <input type="password" class="field input ~neutral @high mb-1" placeholder="{{ .strings.password }}" id="add-user-password">
-                <label>
-                    <input type="submit" class="unfocused">
-                    <span class="button ~urge @low full-width center supra submit ~neutral">{{ .strings.create }}</span>
-                </label>
-            </form>
-        </div>
-        <div id="modal-about" class="modal">
-            <div class="modal-content content card ~neutral">
-                <img src="{{ .urlBase }}/banner.svg" class="banner header" alt="jfa-go banner">
-                <span class="heading"><span class="modal-close">&times;</span></span>
-                <p>{{ .strings.version }} <span class="code monospace">{{ .version }}</span></p>
-                <p>{{ .strings.commitNoun }} <span class="code monospace">{{ .commit }}</span></p>
-                <div class="row col flex">
-                    <a class="button ~neutral mr-half mt-1 mb-1 lang-link" href="https://github.com/hrfee/jfa-go"><i class="ri-github-line mr-half"></i>github</a>
-                    <a class="button ~urge mt-1 mb-1 mr-half lang-link ~neutral" href="https://wiki.jfa-go.com">wiki/docs</a>
-                    <a class="button ~positive mt-1 mb-1 mr-half lang-link ~neutral" href="https://weblate.jfa-go.com">translation</a>
-                    <div class="dropdown mr-half" tabindex="0">
-                        <a href="https://github.com/sponsors/hrfee" target="_blank" class="button ~info mt-1 mb-1 dropdown-button lang-link ~neutral">
-                            <i class="ri-hand-heart-line mr-half"></i>
-                            donate
-                            <span class="ml-1 chev"></span>
-                        </a>
-                        <div class="dropdown-display">
-                            <div class="card ~info @low ~neutral">
-                                <a href="https://github.com/sponsors/hrfee" target="_blank" class="button input ~neutral field mb-half lang-link">GitHub</a>
-                                <a href="https://ko-fi.com/hrfee" target="_blank" class="button input ~neutral field mb-half lang-link">Ko-fi</a>
-                            </div>
-                        </div>
-                    </div>
-                    <a class="button ~urge mt-1 mb-1 @low discord lang-link ~neutral" href="https://discord.com/invite/MrtvuQmyhP" target="_blank"><i class="ri-discord-line mr-half"></i>discord</a>
-                </div>
-                <p><a href="https://github.com/hrfee/jfa-go/blob/main/LICENSE">Available under the MIT License.</a></p>
-                <pre class="monospace">{{ .license }}</pre>
-            </div>
-        </div>
-        <div id="modal-modify-user" class="modal">
-            <form class="modal-content card ~neutral" id="form-modify-user" href>
-                <span class="heading"><span id="header-modify-user"></span> <span class="modal-close">&times;</span></span>
-                <p class="content">{{ .strings.modifySettingsDescription }}</p>
-                <div class="flex-row mb-1">
-                    <label class="flex-row-group mr-1">
-                        <input type="radio" name="modify-user-source" class="unfocused" id="radio-use-profile" checked>
-                        <span class="button ~neutral @high supra full-width center">{{ .strings.profile }}</span>
-                    </label>
-                    <label class="flex-row-group ml-1">
-                        <input type="radio" name="modify-user-source" class="unfocused" id="radio-use-user">
-                        <span class="button ~neutral @low supra full-width center">{{ .strings.user }}</span>
-                    </label>
-                </div>
-                <div class="select ~neutral @low mb-1">
-                    <select id="modify-user-profiles"></select>
-                </div>
-                <div class="select ~neutral @low mb-1 unfocused">
-                    <select id="modify-user-users"></select>
-                </div>
-                <label class="switch mb-1">
-                    <input type="checkbox" id="modify-user-homescreen" checked>
-                    <span>{{ .strings.applyHomescreenLayout }}</span>
-                </label>
-                <label>
-                    <input type="submit" class="unfocused">
-                    <span class="button ~urge @low full-width center supra submit ~neutral">{{ .strings.apply }}</span>
-                </label>
-            </form>
-        </div>
-        <div id="modal-delete-user" class="modal">
-            <form class="modal-content card ~neutral" id="form-delete-user" href>
-                <span class="heading"><span id="header-delete-user"></span> <span class="modal-close">&times;</span></span>
-                <div class="content mt-half">
-                    <label class="switch mb-1">
-                        <input type="checkbox" id="delete-user-notify" checked>
-                        <span>{{ .strings.sendDeleteNotificationEmail }}</span>
-                    </label>
-                    <textarea id="textarea-delete-user" class="textarea full-width ~neutral @low mb-1" placeholder="{{ .strings.sendDeleteNotificationExample }}"></textarea>
-                    <label>
-                        <input type="submit" class="unfocused">
-                        <span class="button ~critical @low full-width center supra submit ~neutral">{{ .strings.delete }}</span>
-                    </label>
-                </div>
-            </form>
-        </div>
-        <div id="modal-extend-expiry" class="modal">
-            <form class="modal-content card ~neutral" id="form-extend-expiry" href>
-                <span class="heading"><span id="header-extend-expiry"></span> <span class="modal-close">&times;</span></span>
-                <div class="content mt-half">
-                    <div class="row">
-                        <div class="col">
-                            <label class="label supra" for="extend-expiry-months">{{ .strings.inviteMonths }}</label>
-                            <div class="select ~neutral @low mb-1 mt-half">
-                                <select id="extend-expiry-months">
-                                    <option>0</option>
-                                </select>
-                            </div>
-                        </div>
-                        <div class="col">
-                            <label class="label supra" for="extend-expiry-days">{{ .strings.inviteDays }}</label>
-                            <div class="select ~neutral @low mb-1 mt-half">
-                                <select id="extend-expiry-days">
-                                    <option>0</option>
-                                </select>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="row">
-                        <div class="col">
-                            <label class="label supra" for="extend-expiry-hours">{{ .strings.inviteHours }}</label>
-                            <div class="select ~neutral @low mb-1 mt-half">
-                                <select id="extend-expiry-hours">
-                                    <option>0</option>
-                                </select>
-                            </div>
-                        </div>
-                        <div class="col">
-                            <label class="label supra" for="extend-expiry-minutes">{{ .strings.inviteMinutes }}</label>
-                            <div class="select ~neutral @low mb-1 mt-half">
-                                <select id="extend-expiry-minutes">
-                                    <option>0</option>
-                                </select>
-                            </div>
-                        </div>
-                    </div>
-                    <label class="switch mb-1">
-                        <input type="checkbox" id="expiry-extend-enable" checked>
-                        <span>{{ .strings.sendDeleteNotificationEmail }}</span>
-                    </label>
-                    <textarea id="textarea-extend-enable" class="textarea full-width ~neutral @low mb-1" placeholder="{{ .strings.sendDeleteNotificationExample }}"></textarea>
-                    <label>
-                        <input type="submit" class="unfocused">
-                        <span class="button ~critical @low full-width center supra submit ~neutral">{{ .strings.submit }}</span>
-                    </label>
-                </div>
-            </form>
-        </div>
-        <div id="modal-announce" class="modal">
-            <form class="modal-content wide card ~neutral" id="form-announce" href>
-                <span class="heading"><span id="header-announce"></span> <span class="modal-close">&times;</span></span>
-                <div class="row">
-                    <div class="col flex-col content mt-half">
-                        <div id="announce-details">
-                            <span class="label supra" for="editor-variables" id="label-editor-variables">{{ .strings.variables }}</span>
-                            <div id="announce-variables">
-                                <span class="button ~urge @low mb-1 mt-half ~neutral" id="announce-variables-username" style="margin-left: 0.25rem; margin-right: 0.25rem;"><span class="monospace">{username}</span></span>
-                            </div>
-                            <label class="label supra" for="announce-subject"> {{ .strings.subject }}</label>
-                            <input type="text" id="announce-subject" class="input ~neutral @low mb-1 mt-half">
-                            <label class="label supra" for="textarea-announce">{{ .strings.message }}</label>
-                            <textarea id="textarea-announce" class="textarea full-width ~neutral @low mt-half monospace"></textarea>
-                            <p class="support mt-half mb-1">{{ .strings.markdownSupported }}</p>
-                        </div>
-                        <label class="label unfocused" id="announce-name"><p class="supra">{{ .strings.name }}</p>
-                            <input type="text" class="input ~neutral @low mb-1 mt-half">
-                            <p class="support">{{ .strings.templateEnterName }}</p>
-                        </label>
-                        <div class="row flex-expand">
-                            <label>
-                                <input type="submit" class="unfocused">
-                                <span class="button ~urge @low center supra submit ~neutral">{{ .strings.send }}</span>
-                            </label>
-                            <span class="button ~info @low center supra ~neutral" id="save-announce">{{ .strings.saveAsTemplate }}</span>
-                        </div>
-                    </div>
-                    <div class="col card ~neutral @low">
-                        <span class="subheading supra">{{ .strings.preview }}</span>
-                        <div class="mt-half" id="announce-preview"></div>
-                    </div>
-                </div>
-            </form>
-        </div>
-        <div id="modal-customize" class="modal">
-            <div class="modal-content card ~neutral">
-                <span class="heading">{{ .strings.customizeMessages }} <span class="modal-close">&times;</span></span>
-                <p class="content">{{ .strings.customizeMessagesDescription }}</p>
-                <div class="table-responsive">
-                    <table class="table ~neutral">
-                        <thead>
-                            <tr>
-                                <th>{{ .strings.name }}</th>
-                                <th>{{ .strings.reset }}</th>
-                                <th>{{ .strings.edit }}</th>
-                            </tr>
-                        </thead>
-                        <tbody id="customize-list"></tbody>
-                    </table>
-                </div>
-            </div>
-        </div>
-        <div id="modal-editor" class="modal">
-            <form class="modal-content wide card ~neutral" id="form-editor" href>
-                <span class="heading"><span id="header-editor"></span> <span class="modal-close">&times;</span></span>
-                <div class="row">
-                    <div class="col flex-col content mt-half">
-                        <span class="label supra" for="editor-variables" id="label-editor-variables">{{ .strings.variables }}</span>
-                        <div id="editor-variables"></div>
-                        <span class="label supra" for="editor-conditionals" id="label-editor-conditionals">{{ .strings.conditionals }}</span>
-                        <div id="editor-conditionals"></div>
-                        <label class="label supra" for="textarea-editor">{{ .strings.message }}</label>
-                        <textarea id="textarea-editor" class="textarea full-width flex-auto ~neutral @low mt-half monospace"></textarea>
-                        <p class="support mt-half mb-1">{{ .strings.markdownSupported }}</p>
-                        <div class="flex-row">
-                            <label class="full-width ml-half">
-                                <input type="submit" class="unfocused">
-                                <span class="button ~urge @low full-width center supra submit ~neutral">{{ .strings.submit }}</span>
-                            </label>
-                        </div>
-                    </div>
-                    <div class="col card ~neutral @low">
-                        <span class="subheading supra">{{ .strings.preview }}</span>
-                        <div class="mt-half" id="editor-preview"></div>
-                    </div>
-                </div>
-            </form>
-        </div>
-        <div id="modal-restart" class="modal">
-            <div class="modal-content card ~critical @low ~neutral">
-                <span class="heading">{{ .strings.settingsRestartRequired }} <span class="modal-close">&times;</span></span>
-                <p class="content pb-1">{{ .strings.settingsRestartRequiredDescription }}</p>
-                <div class="fr">
-                    <span class="button ~info @low mb-half ~neutral" id="settings-apply-no-restart">{{ .strings.settingsApplyRestartLater }}</span>
-                    <span class="button ~critical @low ~neutral" id="settings-apply-restart">{{ .strings.settingsApplyRestartNow }}</span>
-                </div>
-            </div>
-        </div>
-        <div id="modal-refresh" class="modal">
-            <div class="modal-content card ~neutral @low">
-                <span class="heading">{{ .strings.settingsApplied }}</span>
-                <p class="content">{{ .strings.settingsRefreshPage }}</p>
-            </div>
-        </div>
-        <div id="modal-send-pwr" class="modal">
-            <div class="modal-content card ~neutral @low">
-                <span class="heading">{{ .strings.sendPWR }}</span>
-                <p class="content" id="send-pwr-note"></p>
-                <span class="button ~urge @low mt-half ~neutral" id="send-pwr-link">{{ .strings.copy }}</span>
-            </div>
-        </div>
-        <div id="modal-ombi-profile" class="modal">
-            <form class="modal-content card ~neutral" id="form-ombi-defaults" href>
-                <span class="heading">{{ .strings.ombiProfile }} <span class="modal-close">&times;</span></span>
-                <p class="content">{{ .strings.ombiUserDefaultsDescription }}</p>
-                <div class="select ~neutral @low mb-1">
-                    <select></select>
-                </div>
-                <label>
-                    <input type="submit" class="unfocused">
-                    <span class="button ~urge @low full-width center supra submit ~neutral">{{ .strings.submit }}</span>
-                </label>
-            </form>
-        </div>
-        <div id="modal-user-profiles" class="modal">
-            <div class="modal-content wide card ~neutral">
-                <span class="heading">{{ .strings.userProfiles }} <span class="modal-close">&times;</span></span>
-                <p class="support lg">{{ .strings.userProfilesDescription }}</p>
-                <div class="table-responsive">
-                    <table class="table ~neutral">
-                        <thead>
-                            <tr>
-                                <th>{{ .strings.name }}</th>
-                                <th>{{ .strings.userProfilesIsDefault }}</th>
-                                {{ if .ombiEnabled }}
-                                <th>Ombi</th>
-                                {{ end }}
-                                <th>{{ .strings.from }}</th>
-                                <th>{{ .strings.userProfilesLibraries }}</th>
-                                <th><span class="button ~neutral @high" id="button-profile-create">{{ .strings.create }}</span></th>
-                            </tr>
-                        </thead>
-                        <tbody id="table-profiles"></tbody>
-                    </table>
-                </div>
-            </div>
-        </div>
-        
-            
-                <span class="heading">{{ .strings.addProfile }} <span class="modal-close">&times;</span></span>
-                <p class="content">{{ .strings.addProfileDescription }}</p>
-                
-                    <span class="supra">{{ .strings.addProfileNameOf }} </span>
-                    <input type="text" class="field input ~neutral @high mt-half mb-1" placeholder="{{ .strings.name }}" id="add-profile-name">
-                <label>
-                    <span class="supra">{{ .strings.user }}</span>
-                    <div class="select ~neutral @low mt-half mb-1">
-                        <select id="add-profile-user"></select>
-                    </div>
-                </label>
-                <label class="switch mb-1">
-                    <input type="checkbox" id="add-profile-homescreen" checked>
-                    <span>{{ .strings.addProfileStoreHomescreenLayout }}</span>
-                </label>
-                <label>
-                    <input type="submit" class="unfocused">
-                    <span class="button ~urge @low full-width center supra submit ~neutral">{{ .strings.create }}</span>
-                </label>
-            
-        
-        <div id="modal-update" class="modal">
-            <div class="modal-content wide card ~neutral">
-                <span class="heading">{{ .strings.updates }} <span class="modal-close">&times;</span></span>
-                <p class="content">
-                    <h2>
-                        <a id="update-version"></a> (<span class="monospace" id="update-commit"></span>)
-                    </h2>
-                    </p><p class="content" id="update-description"></p>
-                    <p class="support" id="update-date"></p>
-                    <div class="content markdown-box" id="update-changelog"></div>
-                
-                <span class="button ~info @low full-width center ~neutral" id="update-download">{{ .strings.download }}</span>
-                <span class="button ~urge @low full-width center ~neutral" id="update-update">{{ .strings.update }}</span>
-            </div>
-        </div>
-        {{ if .telegramEnabled }}
-        <div id="modal-telegram" class="modal">
-            </div>
-                <span class="heading mb-1">{{ .strings.linkTelegram }}</span>
-                <p class="content mb-1">{{ .strings.sendPIN }}</p>
-                <h1 class="ac" id="telegram-pin"></h1>
-                
-                    <span class="shield ~info mr-1 ~neutral">
-                        <span class="icon">
-                            <i class="ri-telegram-line"></i>
-                        </span>
-                    </span>
-                    &#64;
-                
-                <span class="button ~info @low full-width center mt-1 ~neutral" id="telegram-waiting">{{ .strings.success }}</span>
-            
-        
-        {{ end }}
-        {{ if .discordEnabled }}
-        <div id="modal-discord" class="modal">
-            <div class="modal-content card ~neutral">
-                <span class="heading mb-1"><span id="discord-header"></span><span class="modal-close">&times;</span></span>
-                <p class="content mb-1" id="discord-description"></p>
-                <div class="row">
-                    <input type="search" class="col sm field ~neutral @low input" id="discord-search" placeholder="user#1234">
-                </div>
-                <table class="table ~neutral"><tbody id="discord-list"></tbody></table>
-            </div>
-        </div>
-        {{ end }}
-        <div id="modal-matrix" class="modal">
-            <form class="modal-content card ~neutral" id="form-matrix" href>
-                <span class="heading">{{ .strings.linkMatrix }}</span>
-                <p class="content">{{ .strings.linkMatrixDescription }}</p>
-                <input type="text" class="field input ~neutral @high mt-half mb-1" placeholder="{{ .strings.matrixHomeServer }}" id="matrix-homeserver">
-                <input type="text" class="field input ~neutral @high mt-half mb-1" placeholder="{{ .strings.username }}" id="matrix-user">
-                <input type="password" class="field input ~neutral @high mt-half mb-1" placeholder="{{ .strings.password }}" id="matrix-password">
-                <label>
-                    <input type="submit" class="unfocused">
-                    <span class="button ~urge @low full-width center supra submit ~neutral">{{ .strings.submit }}</span>
-                </label>
-            </form>
-        </div>
-        <div id="notification-box"></div>
-        <span class="dropdown" tabindex="0" id="lang-dropdown">
-            <span class="button ~urge dropdown-button ~neutral">
-                <i class="ri-global-line"></i>
-                <span class="ml-1 chev"></span>
-            </span>
-            <div class="dropdown-display">
-                <div class="card ~neutral @low">
-                    <label class="switch pb-1">
-                        <input type="radio" name="lang-time" id="lang-12h">
-                        <span>{{ .strings.time12h }}</span>
-                    </label>
-                    <label class="switch pb-1">
-                        <input type="radio" name="lang-time" id="lang-24h">
-                        <span>{{ .strings.time24h }}</span>
-                    </label>
-                    <div id="lang-list"></div>
-                </div>
-            </div>
-        </span>
-        <span class="button ~warning ~neutral" alt="{{ .strings.theme }}" id="button-theme"><i class="ri-sun-line"></i></span>
-        <div class="page-container">
-            <div class="mb-1">
-                <header class="flex flex-wrap items-center justify-between">
-                    <div class="text-neutral-700">
-                        <span id="button-tab-invites" class="tab-button portal ~neutral">{{ .strings.invites }}</span>
-                        <span id="button-tab-accounts" class="tab-button portal ~neutral">{{ .strings.accounts }}</span>
-                        <span id="button-tab-settings" class="tab-button portal ~neutral">{{ .strings.settings }}</span>
-                    </div>
-                </header>
-            </div>
-            <div class="mb-1">
-                <div class="text-neutral-700">
-                    <span class="button ~critical @low mb-1 unfocused ~neutral" id="logout-button">{{ .strings.logout }}</span>
-                </div>
-            </div>
-            <div id="tab-invites">
-                <div class="card ~neutral @low invites mb-1">
-                    <span class="heading">{{ .strings.invites }}</span>
-                    <div id="invites"></div>
-                </div>
-                <div class="card ~neutral @low">
-                    <span class="heading">{{ .strings.create }}</span>
-                    <div class="row" id="create-inv">
-                        <div class="card ~neutral @low col">
-                            <div class="row mb-1">
-                                <label class="col mr-1">
-                                    <input type="radio" name="duration" class="unfocused" id="radio-inv-duration" checked>
-                                    <span class="button ~neutral @high supra full-width center">{{ .strings.inviteDuration }}</span>
-                                </label>
-                                <label class="col ml-1">
-                                    <input type="radio" name="duration" class="unfocused" id="radio-user-expiry">
-                                    <span class="button ~neutral @low supra full-width center">{{ .strings.userExpiry }}</span>
-                                </label>
-                            </div>
-                            <div id="inv-duration">
-                                <div class="row">
-                                    <div class="col">
-                                        <label class="label supra" for="create-months">{{ .strings.inviteMonths }}</label>
-                                        <div class="select ~neutral @low mb-1 mt-half">
-                                            <select id="create-months">
-                                                <option>0</option>
-                                            </select>
-                                        </div>
-                                    </div>
-                                    <div class="col">
-                                        <label class="label supra" for="create-days">{{ .strings.inviteDays }}</label>
-                                        <div class="select ~neutral @low mb-1 mt-half">
-                                            <select id="create-days">
-                                                <option>0</option>
-                                            </select>
-                                        </div>
-                                    </div>
-                                </div>
-                                <div class="row">
-                                    <div class="col">
-                                        <label class="label supra" for="create-hours">{{ .strings.inviteHours }}</label>
-                                        <div class="select ~neutral @low mb-1 mt-half">
-                                            <select id="create-hours">
-                                                <option>0</option>
-                                            </select>
-                                        </div>
-                                    </div>
-                                    <div class="col">
-                                        <label class="label supra" for="create-minutes">{{ .strings.inviteMinutes }}</label>
-                                        <div class="select ~neutral @low mb-1 mt-half">
-                                            <select id="create-minutes">
-                                                <option>0</option>
-                                            </select>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                            <div id="user-expiry" class="unfocused">
-                                <p class="support">{{ .strings.userExpiryDescription }}</p>
-                                <div class="mb-half">
-                                    <label for="create-user-expiry-enabled" class="button ~neutral @low">
-                                        <input type="checkbox" id="create-user-expiry-enabled" aria-label="User duration enabled">
-                                        <span class="ml-half">{{ .strings.enabled }} </span>
-                                    </label>
-                                </div>
-                                <div class="row">
-                                    <div class="col">
-                                        <label class="label supra" for="user-months">{{ .strings.inviteMonths }}</label>
-                                        <div class="select ~neutral @low mb-1 mt-half">
-                                            <select id="user-months">
-                                                <option>0</option>
-                                            </select>
-                                        </div>
-                                    </div>
-                                    <div class="col">
-                                        <label class="label supra" for="user-days">{{ .strings.inviteDays }}</label>
-                                        <div class="select ~neutral @low mb-1 mt-half">
-                                            <select id="user-days">
-                                                <option>0</option>
-                                            </select>
-                                        </div>
-                                    </div>
-                                </div>
-                                <div class="row">
-                                    <div class="col">
-                                        <label class="label supra" for="user-hours">{{ .strings.inviteHours }}</label>
-                                        <div class="select ~neutral @low mb-1 mt-half">
-                                            <select id="user-hours">
-                                                <option>0</option>
-                                            </select>
-                                        </div>
-                                    </div>
-                                    <div class="col">
-                                        <label class="label supra" for="user-minutes">{{ .strings.inviteMinutes }}</label>
-                                        <div class="select ~neutral @low mb-1 mt-half">
-                                            <select id="user-minutes">
-                                                <option>0</option>
-                                            </select>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                            <div class="col">
-                                <label class="label supra" for="create-label"> {{ .strings.label }}</label>
-                                <input type="text" id="create-label" class="input ~neutral @low mb-1 mt-half">
-                            </div>
-                        </div>
-                        <div class="card ~neutral @low col">
-                            <label class="label supra" for="create-uses">{{ .strings.inviteNumberOfUses }}</label>
-                            <div class="flex-expand mb-1 mt-half">
-                                <input type="number" min="0" id="create-uses" class="input ~neutral @low mr-1" value=1>
-                                <label for="create-inf-uses" class="button ~neutral @low" title="Set uses to infinite">
-                                    <span>∞</span>
-                                    <input type="checkbox" class="unfocused" id="create-inf-uses" aria-label="Set uses to infinite">
-                                </label>
-                            </div>
-                            <p class="support unfocused" id="create-inf-uses-warning"><span class="badge ~critical ~neutral">{{ .strings.warning }}</span> {{ .strings.inviteInfiniteUsesWarning }}</p>
-                            <label class="label supra">{{ .strings.profile }}</label>
-                            <div class="select ~neutral @low mb-1 mt-half">
-                                <select id="create-profile">
-                                </select>
-                            </div>
-                            <div id="create-send-to-container">
-                                <label class="label supra">{{ .strings.inviteSendToEmail }}</label>
-                                <div class="flex-expand mb-1 mt-half">
-                                    {{ if .discordEnabled }}
-                                    <input type="text" id="create-send-to" class="input ~neutral @low mr-1" placeholder="example@example.com | user#1234">
-                                    <span id="create-send-to-search" class="button ~neutral @low mr-1">
-                                        <i class="icon ri-search-2-line" title="{{ .strings.search }}"></i>
-                                    </span>
-                                    {{ else }}
-                                    <input type="email" id="create-send-to" class="input ~neutral @low mr-1" placeholder="example@example.com">
-                                    {{ end }}
-                                    <label for="create-send-to-enabled" class="button ~neutral @low">
-                                        <input type="checkbox" id="create-send-to-enabled" aria-label="Send to address enabled">
-                                    </label>
-                                </div>
-                            </div>
-                            <span class="button ~urge @low supra full-width center lg ~neutral" id="create-submit">{{ .strings.create }}</span>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <div id="tab-accounts" class="unfocused">
-                <div class="card ~neutral @low accounts mb-1">
-                    <div class="flex-expand row">
-                        <div class="row">
-                            <span class="heading mr-1 col sm">{{ .strings.accounts }}</span>
-                            <input type="search" class="col sm field ~neutral @low input search ml-1 mr-1" id="accounts-search" placeholder="{{ .strings.search }}">
-                        </div>
-                        <div class="row">
-                            <span class="col sm button ~neutral @low center mb-half" id="accounts-add-user">{{ .quantityStrings.addUser.Singular }}</span>
-                            <div id="accounts-announce-dropdown" class="col sm dropdown" tabindex="0">
-                                <span class="h-100 sm button ~info @low center mb-half ~neutral" id="accounts-announce">{{ .strings.announce }}</span>
-                                <div class="dropdown-display">
-                                    <div class="card ~neutral @low">
-                                        <span class="supra sm">{{ .strings.templates }}</span>
-                                        <div id="accounts-announce-templates"></div>
-                                    </div>
-                                </div>
-                            </div>
-                            <span class="col sm button ~urge @low center mb-half ~neutral" id="accounts-modify-user">{{ .strings.modifySettings }}</span>
-                            <span class="col sm button ~warning @low center mb-half ~neutral" id="accounts-extend-expiry">{{ .strings.extendExpiry }}</span>
-                            <div id="accounts-disable-enable-dropdown" class="col sm dropdown manual" tabindex="0">
-                                <span class="h-100 sm button ~positive @low center mb-half ~neutral" id="accounts-disable-enable">{{ .strings.disable }}</span>
-                                <div class="dropdown-display">
-                                    <div class="card ~neutral @low">
-                                        <span class="button ~neutral sm full-width accounts-announce-template-button" id="accounts-enable-expiry">{{ .strings.setExpiry }}</span>
-                                    </div>
-                                </div>
-                            </div>
-                            <span class="col sm button ~info @low center mb-half unfocused ~neutral" id="accounts-send-pwr">{{ .strings.sendPWR }}</span>
-                            <span class="col sm button ~critical @low center mb-half ~neutral" id="accounts-delete-user">{{ .quantityStrings.deleteUser.Singular }}</span>
-                        </div>
-                    </div>
-                    <div class="card ~neutral @low accounts-header table-responsive mt-half">
-                        <table class="table ~neutral">
-                            <thead>
-                                <tr>
-                                    <th><input type="checkbox" value="" id="accounts-select-all"></th>
-                                    <th>{{ .strings.username }}</th>
-                                    <th>{{ .strings.emailAddress }}</th>
-                                    {{ if .telegramEnabled }}
-                                    <th>Telegram</th>
-                                    {{ end }}
-                                    {{ if .matrixEnabled }}
-                                    <th>Matrix</th>
-                                    {{ end }}
-                                    {{ if .discordEnabled }}
-                                    <th>Discord</th>
-                                    {{ end }}
-                                    <th>{{ .strings.expiry }}</th>
-                                    <th>{{ .strings.lastActiveTime }}</th>
-                                </tr>
-                            </thead>
-                            <tbody id="accounts-list"></tbody>
-                        </table>
-                    </div>
-                </div>
-            </div>
-            <div id="tab-settings" class="unfocused">
-                <div class="card ~neutral @low settings overflow">
-                    <div class="flex-expand">
-                        <div class="flex-row">
-                            <span class="heading">{{ .strings.settings }}</span>
-                            <label for="settings-advanced-enabled" class="button ~neutral @low ml-1">
-                                <input type="checkbox" id="settings-advanced-enabled" aria-label="Advanced settings enabled">
-                                <span class="ml-half">{{ .strings.advancedSettings }} </span>
-                            </label>
-                        </div>
-                        <div>
-                            <span class="button ~neutral @low" id="settings-restart">{{ .strings.settingsRestart }}</span>
-                            <span class="button ~urge @low unfocused ~neutral" id="settings-save">{{ .strings.settingsSave }}</span>
-                        </div>
-                    </div>
-                    <div class="row">
-                        <div class="card ~neutral @low col" id="settings-sidebar">
-                            <aside class="aside sm ~info mb-half ~neutral" id="settings-message">Note: <span class="badge ~critical ~neutral">*</span> indicates a required field, <span class="badge ~info ~neutral">R</span> indicates changes require a restart.</aside> 
-                            <span class="button ~neutral @low settings-section-button mb-half" id="setting-about"><span class="flex">{{ .strings.aboutProgram }} <i class="ri-information-line ml-half"></i></span></span>
-                            <span class="button ~neutral @low settings-section-button mb-half" id="setting-profiles"><span class="flex">{{ .strings.userProfiles }} <i class="ri-user-line ml-half"></i></span></span>
-                        </div>
-                        <div class="card ~neutral @low col overflow" id="settings-panel"></div>
-                    </div>
-                </div>
-            </div>
-        </div>
-        <script src="{{ .urlBase }}/js/admin.js" type="module"></script>
-    
-
-</html>
\ No newline at end of file
diff --git a/scripts/missing-colors.js b/scripts/missing-colors.js
index 0a3213e..a5385a9 100644
--- a/scripts/missing-colors.js
+++ b/scripts/missing-colors.js
@@ -31,8 +31,9 @@ const fixHTML = (infile, outfile) => {
                 }
             }
             if (!hasColor) {
-                items[i].classList.add("~neutral");
                 if (!hasDark(items[i])) {
+                    // card without ~neutral look different than with.
+                    if (item != "card") items[i].classList.add("~neutral");
                     items[i].classList.add("dark:~d_neutral");
                 }
             }