1
0
mirror of https://github.com/hrfee/jfa-go.git synced 2024-06-28 04:17:45 +02:00

fix setup layout

This commit is contained in:
Harvey Tindall 2021-12-31 18:00:19 +00:00
parent a9a0005007
commit deb117fc34
Signed by: hrfee
GPG Key ID: BBC65952848FB1A2

View File

@ -20,7 +20,7 @@
</span> </span>
</div> </div>
<div class="page-container" id="page-container"> <div class="page-container" id="page-container">
<div class="card ~neutral @low mb-4"> <div class="card ~neutral @low mb-2">
<div class="row"> <div class="row">
<img class="banner header" src="banner.svg" alt="jfa-go" /> <img class="banner header" src="banner.svg" alt="jfa-go" />
</div> </div>
@ -28,33 +28,33 @@
<span class="heading welcome">{{ .lang.StartPage.welcome }}</span> <span class="heading welcome">{{ .lang.StartPage.welcome }}</span>
</div> </div>
<div class="row col flex center"> <div class="row col flex center">
<p class="content">{{ .lang.StartPage.pressStart }}</p> <p class="content my-2">{{ .lang.StartPage.pressStart }}</p>
</div> </div>
<section class="section ~neutral banner footer flex-expand middle"> <section class="section ~neutral banner footer flex-expand middle">
<span class="support">{{ .lang.StartPage.httpsNotice }}</span> <span class="support">{{ .lang.StartPage.httpsNotice }}</span>
<span class="button ~urge @low next">{{ .lang.StartPage.start }}</span> <span class="button ~urge @low next">{{ .lang.StartPage.start }}</span>
</section> </section>
</div> </div>
<div class="card ~neutral @low mb-4 unfocused"> <div class="card ~neutral @low mb-2 unfocused">
<span class="heading">{{ .lang.Language.title }}</span> <span class="heading">{{ .lang.Language.title }}</span>
<p class="content" id="language-description"></p> <p class="content my-2" id="language-description"></p>
<label class="label"> <label class="label">
<span class="mt-8">{{ .lang.Language.defaultAdminLang }}</span> <span class="mt-4">{{ .lang.Language.defaultAdminLang }}</span>
<div class="select ~neutral @low mt-8 mb-4"> <div class="select ~neutral @low mt-4 mb-2">
<select id="ui-language-admin"> <select id="ui-language-admin">
</select> </select>
</div> </div>
</label> </label>
<label class="label"> <label class="label">
<span class="mt-8">{{ .lang.Language.defaultFormLang }}</span> <span class="mt-4">{{ .lang.Language.defaultFormLang }}</span>
<div class="select ~neutral @low mt-8 mb-4"> <div class="select ~neutral @low mt-4 mb-2">
<select id="ui-language-form"> <select id="ui-language-form">
</select> </select>
</div> </div>
</label> </label>
<label class="label"> <label class="label">
<span class="mt-8">{{ .lang.Language.defaultEmailLang }}</span> <span class="mt-4">{{ .lang.Language.defaultEmailLang }}</span>
<div class="select ~neutral @low mt-8 mb-4"> <div class="select ~neutral @low mt-4 mb-2">
<select id="email-language"> <select id="email-language">
</select> </select>
</div> </div>
@ -64,34 +64,34 @@
<span class="button ~urge @low next">{{ .lang.Strings.next }}</span> <span class="button ~urge @low next">{{ .lang.Strings.next }}</span>
</section> </section>
</div> </div>
<div class="card ~neutral @low mb-4 unfocused"> <div class="card ~neutral @low mb-2 unfocused">
<span class="heading">{{ .lang.General.title }}</span> <span class="heading">{{ .lang.General.title }}</span>
<div class="row"> <div class="row">
<div class="col"> <div class="col">
<label class="label"> <label class="label">
<span class="mt-8">{{ .lang.General.listenAddress }}</span> <span class="mt-4">{{ .lang.General.listenAddress }}</span>
<input type="url" class="input ~neutral @low mt-8 mb-4" id="ui-host" value="0.0.0.0"> <input type="url" class="input ~neutral @low mt-4 mb-2" id="ui-host" value="0.0.0.0">
</label> </label>
<label class="row switch"> <label class="row switch">
<input type="checkbox" id="advanced-tls"><span>{{ .lang.General.useHTTPS }}</span> <input type="checkbox" class="mr-2" id="advanced-tls"><span>{{ .lang.General.useHTTPS }}</span>
</label> </label>
<p class="support mb-4">{{ .lang.General.useHTTPSNotice }}</p> <p class="support mb-2 mt-1">{{ .lang.General.useHTTPSNotice }}</p>
<label class="label"> <label class="label">
<span class="mt-8">{{ .lang.General.pathToCertificate }}</span> <span class="mt-4">{{ .lang.General.pathToCertificate }}</span>
<input type="text" class="input ~neutral @low mt-8 mb-4" id="advanced-tls_cert"> <input type="text" class="input ~neutral @low mt-4 mb-2" id="advanced-tls_cert">
</label> </label>
<label class="label"> <label class="label">
<span class="mt-8">{{ .lang.General.pathToKeyFile }}</span> <span class="mt-4">{{ .lang.General.pathToKeyFile }}</span>
<input type="text" class="input ~neutral @low mt-8 mb-4" id="advanced-tls_key"> <input type="text" class="input ~neutral @low mt-4 mb-2" id="advanced-tls_key">
</label> </label>
<span class="heading">{{ .lang.Updates.title }}</span> <span class="heading">{{ .lang.Updates.title }}</span>
<p class="content" id="updates-description"></p> <p class="content my-2" id="updates-description"></p>
<label class="row switch pb-4"> <label class="row switch pb-4">
<input type="checkbox" id="updates-enabled" checked><span>{{ .lang.Strings.enabled }}</span> <input type="checkbox" class="mr-2" id="updates-enabled" checked><span>{{ .lang.Strings.enabled }}</span>
</label> </label>
<label class="label"> <label class="label">
<span>{{ .lang.Updates.updateChannel }}</span> <span>{{ .lang.Updates.updateChannel }}</span>
<div class="select ~neutral @low mt-8 mb-4"> <div class="select ~neutral @low mt-4 mb-2">
<select id="updates-channel"> <select id="updates-channel">
<option value="stable">{{ .lang.Updates.stable }}</option> <option value="stable">{{ .lang.Updates.stable }}</option>
<option value="unstable">{{ .lang.Updates.unstable }}</option> <option value="unstable">{{ .lang.Updates.unstable }}</option>
@ -101,21 +101,21 @@
</div> </div>
<div class="col"> <div class="col">
<label class="label"> <label class="label">
<span class="mt-8">{{ .lang.Strings.port }}</span> <span class="mt-4">{{ .lang.Strings.port }}</span>
<input type="number" class="input ~neutral @low mt-8 mb-4" id="ui-port" value="8056"> <input type="number" class="input ~neutral @low mt-4 mb-2" id="ui-port" value="8056">
</label> </label>
<label class="label"> <label class="label">
<span class="mt-8">{{ .lang.General.httpsPort }}</span> <span class="mt-4">{{ .lang.General.httpsPort }}</span>
<input type="number" class="input ~neutral @low mt-8 mb-4" id="advanced-tls_port" value="8057"> <input type="number" class="input ~neutral @low mt-4 mb-2" id="advanced-tls_port" value="8057">
</label> </label>
<label class="label"> <label class="label">
<span class="mt-8">{{ .lang.General.urlBase }} ({{ .lang.Strings.optional }})</span> <span class="mt-4">{{ .lang.General.urlBase }} ({{ .lang.Strings.optional }})</span>
<input type="url" class="input ~neutral @low mt-8" id="ui-url_base"> <input type="url" class="input ~neutral @low mt-4" id="ui-url_base">
<p class="support mb-4">{{ .lang.General.urlBaseNotice }}</p> <p class="support mb-2 mt-1">{{ .lang.General.urlBaseNotice }}</p>
</label> </label>
<label class="label"> <label class="label">
<span>{{ .lang.Strings.theme }}</span> <span>{{ .lang.Strings.theme }}</span>
<div class="select ~neutral @low mt-8 mb-4"> <div class="select ~neutral @low mt-4 mb-2">
<select id="ui-theme"> <select id="ui-theme">
<option value="Jellyfin (Dark)">{{ .lang.General.darkTheme }}</option> <option value="Jellyfin (Dark)">{{ .lang.General.darkTheme }}</option>
<option value="Default (Light)">{{ .lang.General.lightTheme }}</option> <option value="Default (Light)">{{ .lang.General.lightTheme }}</option>
@ -129,33 +129,33 @@
<span class="button ~urge @low next">{{ .lang.Strings.next }}</span> <span class="button ~urge @low next">{{ .lang.Strings.next }}</span>
</section> </section>
</div> </div>
<div class="card ~neutral @low mb-4 unfocused"> <div class="card ~neutral @low mb-2 unfocused">
<span class="heading">{{ .lang.Login.title }}</span> <span class="heading">{{ .lang.Login.title }}</span>
<p class="content">{{ .lang.Login.description }}</p> <p class="content my-2">{{ .lang.Login.description }}</p>
<div class="pl-4"> <div class="pl-4">
<label class="row switch pb-4"> <label class="row switch pb-4">
<input type="radio" name="ui-jellyfin_login" value="true" checked><span>{{ .lang.Login.authorizeWithJellyfin }}</span> <input type="radio" class="mr-2" name="ui-jellyfin_login" value="true" checked><span>{{ .lang.Login.authorizeWithJellyfin }}</span>
</label> </label>
<label class="row switch pl-4 pb-4"> <label class="row switch pl-4 pb-4">
<input type="checkbox" id="ui-admin_only"><span>{{ .lang.Login.adminOnly }}</span> <input type="checkbox" class="mr-2" id="ui-admin_only"><span>{{ .lang.Login.adminOnly }}</span>
</label> </label>
<label class="row switch pb-4"> <label class="row switch pb-4">
<input type="radio" name="ui-jellyfin_login" value="false"><span>{{ .lang.Login.authorizeManual }}</span> <input type="radio" class="mr-2" name="ui-jellyfin_login" value="false"><span>{{ .lang.Login.authorizeManual }}</span>
</label> </label>
</div> </div>
<div id="login-manual"> <div id="login-manual">
<label class="label"> <label class="label">
<span class="mt-8">{{ .lang.Strings.username }}</span> <span class="mt-4">{{ .lang.Strings.username }}</span>
<input type="text" id="ui-username" class="input ~neutral @low mt-8 mb-4" placeholder="{{ .lang.Strings.username }}"> <input type="text" id="ui-username" class="input ~neutral @low mt-4 mb-2" placeholder="{{ .lang.Strings.username }}">
</label> </label>
<label class="label"> <label class="label">
<span>{{ .lang.Strings.password }}</span> <span>{{ .lang.Strings.password }}</span>
<input type="password" id="ui-password" class="input ~neutral @low mt-8 mb-4" placeholder="{{ .lang.Strings.password }}"> <input type="password" id="ui-password" class="input ~neutral @low mt-4 mb-2" placeholder="{{ .lang.Strings.password }}">
</label> </label>
<label class="label"> <label class="label">
<span>{{ .lang.Strings.emailAddress }} ({{ .lang.Strings.optional }})</span> <span>{{ .lang.Strings.emailAddress }} ({{ .lang.Strings.optional }})</span>
<input type="email" id="ui-email" class="input ~neutral @low mt-8" placeholder="email@address"> <input type="email" id="ui-email" class="input ~neutral @low mt-4" placeholder="email@address">
<span class="support mb-4">{{ .lang.Login.emailNotice }}</span> <span class="support mb-2 mt-1">{{ .lang.Login.emailNotice }}</span>
</label> </label>
</div> </div>
<section class="section ~neutral banner footer flex-expand middle"> <section class="section ~neutral banner footer flex-expand middle">
@ -163,44 +163,44 @@
<span class="button ~urge @low next">{{ .lang.Strings.next }}</span> <span class="button ~urge @low next">{{ .lang.Strings.next }}</span>
</section> </section>
</div> </div>
<div class="card ~neutral @low mb-4 unfocused"> <div class="card ~neutral @low mb-2 unfocused">
<span class="heading">{{ .lang.JellyfinEmby.title }}</span> <span class="heading">{{ .lang.JellyfinEmby.title }}</span>
<p class="content">{{ .lang.JellyfinEmby.description }}</p> <p class="content my-2">{{ .lang.JellyfinEmby.description }}</p>
<div class="row"> <div class="row">
<div class="col"> <div class="col">
<label class="label"> <label class="label">
<span>{{ .lang.Strings.serverType }}</span> <span>{{ .lang.Strings.serverType }}</span>
<div class="select ~neutral @low mt-8"> <div class="select ~neutral @low mt-4">
<select id="jellyfin-type"> <select id="jellyfin-type">
<option value="jellyfin">Jellyfin</option> <option value="jellyfin">Jellyfin</option>
<option value="emby">Emby</option> <option value="emby">Emby</option>
</select> </select>
</div> </div>
<p class="support mb-4">{{ .lang.JellyfinEmby.embyNotice }}</p> <p class="support mb-2 mt-1">{{ .lang.JellyfinEmby.embyNotice }}</p>
</label> </label>
<label class="label"> <label class="label">
<span class="mt-8">{{ .lang.JellyfinEmby.replaceJellyfin }} ({{ .lang.Strings.optional }})</span> <span class="mt-4">{{ .lang.JellyfinEmby.replaceJellyfin }} ({{ .lang.Strings.optional }})</span>
<input type="text" class="input ~neutral @low mt-8" id="jellyfin-substitute_jellyfin_strings"> <input type="text" class="input ~neutral @low mt-4" id="jellyfin-substitute_jellyfin_strings">
<p class="support mb-4">{{ .lang.JellyfinEmby.replaceJellyfinNotice }}</p> <p class="support mb-2 mt-1">{{ .lang.JellyfinEmby.replaceJellyfinNotice }}</p>
</label> </label>
<label class="label"> <label class="label">
<span class="mt-8">{{ .lang.Strings.username }}</span> <span class="mt-4">{{ .lang.Strings.username }}</span>
<input type="text" id="jellyfin-username" class="input ~neutral @low mt-8 mb-4" placeholder="{{ .lang.Strings.username }}"> <input type="text" id="jellyfin-username" class="input ~neutral @low mt-4 mb-2" placeholder="{{ .lang.Strings.username }}">
</label> </label>
<label class="label"> <label class="label">
<span>{{ .lang.Strings.password }}</span> <span>{{ .lang.Strings.password }}</span>
<input type="password" id="jellyfin-password" class="input ~neutral @low mt-8 mb-4" placeholder="{{ .lang.Strings.password }}"> <input type="password" id="jellyfin-password" class="input ~neutral @low mt-4 mb-2" placeholder="{{ .lang.Strings.password }}">
</label> </label>
</div> </div>
<div class="col"> <div class="col">
<label class="label"> <label class="label">
<span class="mt-8">{{ .lang.Strings.serverAddress }} ({{ .lang.JellyfinEmby.internal }})</span> <span class="mt-4">{{ .lang.Strings.serverAddress }} ({{ .lang.JellyfinEmby.internal }})</span>
<input type="url" class="input ~neutral @low mt-8 mb-4" id="jellyfin-server" placeholder="http://jellyf.in:80"> <input type="url" class="input ~neutral @low mt-4 mb-2" id="jellyfin-server" placeholder="http://jellyf.in:80">
</label> </label>
<label class="label"> <label class="label">
<span class="mt-8">{{ .lang.Strings.serverAddress }} ({{ .lang.JellyfinEmby.external }})</span> <span class="mt-4">{{ .lang.Strings.serverAddress }} ({{ .lang.JellyfinEmby.external }})</span>
<input type="url" class="input ~neutral @low mt-8" id="jellyfin-public_server" placeholder="https://jellyf.in"> <input type="url" class="input ~neutral @low mt-4" id="jellyfin-public_server" placeholder="https://jellyf.in">
<p class="support mb-4">{{ .lang.JellyfinEmby.addressExternalNotice }}</p> <p class="support mb-2 mt-1">{{ .lang.JellyfinEmby.addressExternalNotice }}</p>
</label> </label>
</div> </div>
</div> </div>
@ -212,20 +212,20 @@
</div> </div>
</section> </section>
</div> </div>
<div class="card ~neutral @low mb-4 unfocused"> <div class="card ~neutral @low mb-2 unfocused">
<span class="heading">{{ .lang.Ombi.title }}</span> <span class="heading">{{ .lang.Ombi.title }}</span>
<p class="content">{{ .lang.Ombi.description }}</p> <p class="content my-2">{{ .lang.Ombi.description }}</p>
<label class="row switch pb-4"> <label class="row switch pb-4">
<input type="checkbox" id="ombi-enabled"><span>{{ .lang.Strings.enabled }}</span> <input type="checkbox" class="mr-2" id="ombi-enabled"><span>{{ .lang.Strings.enabled }}</span>
</label> </label>
<label class="label"> <label class="label">
<span class="mt-8">{{ .lang.Strings.serverAddress }}</span> <span class="mt-4">{{ .lang.Strings.serverAddress }}</span>
<input type="url" class="input ~neutral @low mt-8 mb-4" id="ombi-server" placeholder="ombi.jellyf.in"> <input type="url" class="input ~neutral @low mt-4 mb-2" id="ombi-server" placeholder="ombi.jellyf.in">
</label> </label>
<label class="label"> <label class="label">
<span class="mt-8">{{ .lang.Strings.apiKey }}</span> <span class="mt-4">{{ .lang.Strings.apiKey }}</span>
<input type="text" class="input ~neutral @low mt-8" id="ombi-api_key"> <input type="text" class="input ~neutral @low mt-4" id="ombi-api_key">
<p class="support mb-4">{{ .lang.Ombi.apiKeyNotice }}</p> <p class="support mb-2 mt-1">{{ .lang.Ombi.apiKeyNotice }}</p>
</label> </label>
<section class="section ~neutral banner footer flex-expand middle"> <section class="section ~neutral banner footer flex-expand middle">
<span class="button ~neutral @low back">{{ .lang.Strings.back }}</span> <span class="button ~neutral @low back">{{ .lang.Strings.back }}</span>
@ -234,33 +234,33 @@
</div> </div>
</section> </section>
</div> </div>
<div class="card ~neutral @low mb-4 unfocused"> <div class="card ~neutral @low mb-2 unfocused">
<span class="heading">{{ .lang.Messages.title }}</span> <span class="heading">{{ .lang.Messages.title }}</span>
<p class="content" id="messages-description"></p> <p class="content my-2" id="messages-description"></p>
<label class="row switch pb-4"> <label class="row switch pb-4">
<input type="checkbox" id="messages-enabled" checked><span>{{ .lang.Strings.enabled }}</span> <input type="checkbox" class="mr-2" id="messages-enabled" checked><span>{{ .lang.Strings.enabled }}</span>
</label> </label>
<label class="label"> <label class="label">
<span class="mt-8">{{ .lang.Email.dateFormat }}</span> <span class="mt-4">{{ .lang.Email.dateFormat }}</span>
<input type="text" class="input ~neutral @low mt-8" id="email-date_format" value="%d/%m/%y"> <input type="text" class="input ~neutral @low mt-4" id="email-date_format" value="%d/%m/%y">
<p class="support mb-4" id="email-dateformat-notice"></p> <p class="support mb-2 mt-1" id="email-dateformat-notice"></p>
</label> </label>
<div> <div>
<label class="row switch pb-4"> <label class="row switch pb-4">
<input type="radio" name="email-24h" value="true" checked><span>{{ .lang.Strings.time24h }}</span> <input type="radio" class="mr-2" name="email-24h" value="true" checked><span>{{ .lang.Strings.time24h }}</span>
</label> </label>
<label class="row switch pb-4"> <label class="row switch pb-4">
<input type="radio" name="email-24h" value="false"><span>{{ .lang.Strings.time12h }}</span> <input type="radio" class="mr-2" name="email-24h" value="false"><span>{{ .lang.Strings.time12h }}</span>
</label> </label>
</div> </div>
<div id="email-sect"> <div id="email-sect">
<span class="heading">{{ .lang.Email.title }}</span> <span class="heading">{{ .lang.Email.title }}</span>
<p class="content" id="email-description"></p> <p class="content my-2" id="email-description"></p>
<div class="row"> <div class="row">
<div class="col"> <div class="col">
<label class="label"> <label class="label">
<span>{{ .lang.Email.method }}</span> <span>{{ .lang.Email.method }}</span>
<div class="select ~neutral @low mt-8 mb-4"> <div class="select ~neutral @low mt-4 mb-2">
<select id="email-method"> <select id="email-method">
<option value="">{{ .lang.Strings.disabled }}</option> <option value="">{{ .lang.Strings.disabled }}</option>
<option value="smtp">SMTP</option> <option value="smtp">SMTP</option>
@ -269,24 +269,24 @@
</div> </div>
</label> </label>
<label class="row switch"> <label class="row switch">
<input type="checkbox" id="email-no_username"><span>{{ .lang.Email.useEmailAsUsername }}</span> <input type="checkbox" class="mr-2" id="email-no_username"><span>{{ .lang.Email.useEmailAsUsername }}</span>
<p class="support mb-4">{{ .lang.Email.useEmailAsUsernameNotice }}</p> <p class="support mb-2 mt-1">{{ .lang.Email.useEmailAsUsernameNotice }}</p>
</label> </label>
<label class="label"> <label class="label">
<span class="mt-8">{{ .lang.Email.fromAddress }}</span> <span class="mt-4">{{ .lang.Email.fromAddress }}</span>
<input type="email" class="input ~neutral @low mt-8 mb-4" id="email-address" placeholder="mail@jellyf.in"> <input type="email" class="input ~neutral @low mt-4 mb-2" id="email-address" placeholder="mail@jellyf.in">
</label> </label>
<label class="label"> <label class="label">
<span class="mt-8">{{ .lang.Email.senderName }}</span> <span class="mt-4">{{ .lang.Email.senderName }}</span>
<input type="text" class="input ~neutral @low mt-8 mb-4" id="email-from" value="Jellyfin"> <input type="text" class="input ~neutral @low mt-4 mb-2" id="email-from" value="Jellyfin">
</label> </label>
</div> </div>
<div class="col"> <div class="col">
<div id="email-smtp"> <div id="email-smtp">
<p class="subheading">SMTP</p> <p class="text-2xl font-semibold mb-2">SMTP</p>
<label class="label"> <label class="label">
<span>{{ .lang.Email.encryption }}</span> <span>{{ .lang.Email.encryption }}</span>
<div class="select ~neutral @low mt-8 mb-4"> <div class="select ~neutral @low mt-4 mb-2">
<select id="smtp-encryption"> <select id="smtp-encryption">
<option value="starttls">STARTTLS ({{ .lang.Strings.port }} 587)</option> <option value="starttls">STARTTLS ({{ .lang.Strings.port }} 587)</option>
<option value="ssl_tls">SSL/TLS ({{ .lang.Strings.port }} 465)</option> <option value="ssl_tls">SSL/TLS ({{ .lang.Strings.port }} 465)</option>
@ -294,31 +294,31 @@
</div> </div>
</label> </label>
<label class="label"> <label class="label">
<span class="mt-8">{{ .lang.Strings.serverAddress }}</span> <span class="mt-4">{{ .lang.Strings.serverAddress }}</span>
<input type="url" class="input ~neutral @low mt-8 mb-4" id="smtp-server" placeholder="smtp.jellyf.in"> <input type="url" class="input ~neutral @low mt-4 mb-2" id="smtp-server" placeholder="smtp.jellyf.in">
</label> </label>
<label class="label"> <label class="label">
<span class="mt-8">{{ .lang.Strings.port }}</span> <span class="mt-4">{{ .lang.Strings.port }}</span>
<input type="number" class="input ~neutral @low mt-8 mb-4" id="smtp-port" placeholder="587"> <input type="number" class="input ~neutral @low mt-4 mb-2" id="smtp-port" placeholder="587">
</label> </label>
<label class="label"> <label class="label">
<span class="mt-8">{{ .lang.Strings.username }}</span> <span class="mt-4">{{ .lang.Strings.username }}</span>
<input type="text" class="input ~neutral @low mt-8 mb-4" id="smtp-username"> <input type="text" class="input ~neutral @low mt-4 mb-2" id="smtp-username">
</label> </label>
<label class="label"> <label class="label">
<span class="mt-8">{{ .lang.Strings.password }}</span> <span class="mt-4">{{ .lang.Strings.password }}</span>
<input type="password" class="input ~neutral @low mt-8 mb-4" id="smtp-password"> <input type="password" class="input ~neutral @low mt-4 mb-2" id="smtp-password">
</label> </label>
</div> </div>
<div id="email-mailgun"> <div id="email-mailgun">
<p class="subheading">Mailgun</p> <p class="text-2xl font-semibold mb-2">Mailgun</p>
<label class="label"> <label class="label">
<span class="mt-8">{{ .lang.Email.mailgunApiURL }}</span> <span class="mt-4">{{ .lang.Email.mailgunApiURL }}</span>
<input type="url" class="input ~neutral @low mt-8 mb-4" id="mailgun-api_url" placeholder="https://api.eu.mailgun.net/v3/mail.jellyf.in/messages"> <input type="url" class="input ~neutral @low mt-4 mb-2" id="mailgun-api_url" placeholder="https://api.eu.mailgun.net/v3/mail.jellyf.in/messages">
</label> </label>
<label class="label"> <label class="label">
<span class="mt-8">{{ .lang.Strings.apiKey }}</span> <span class="mt-4">{{ .lang.Strings.apiKey }}</span>
<input type="text" class="input ~neutral @low mt-8 mb-4" id="mailgun-api_key"> <input type="text" class="input ~neutral @low mt-4 mb-2" id="mailgun-api_key">
</label> </label>
</div> </div>
</div> </div>
@ -331,20 +331,20 @@
</div> </div>
</section> </section>
</div> </div>
<div class="card ~neutral @low mb-4 unfocused related-to-email"> <div class="card ~neutral @low mb-2 unfocused related-to-email">
<span class="heading">{{ .lang.Notifications.title }}</span> <span class="heading">{{ .lang.Notifications.title }}</span>
<p class="content">{{ .lang.Notifications.description }}</p> <p class="content my-2">{{ .lang.Notifications.description }}</p>
<label class="row switch pb-4"> <label class="row switch pb-4">
<input type="checkbox" id="notifications-enabled"><span>{{ .lang.Strings.enabled }}</span> <input type="checkbox" class="mr-2" id="notifications-enabled"><span>{{ .lang.Strings.enabled }}</span>
</label> </label>
<span class="heading">{{ .lang.WelcomeEmails.title }}</span> <span class="heading">{{ .lang.WelcomeEmails.title }}</span>
<p class="content">{{ .lang.WelcomeEmails.description }}</p> <p class="content my-2">{{ .lang.WelcomeEmails.description }}</p>
<label class="row switch pb-4"> <label class="row switch pb-4">
<input type="checkbox" id="welcome_email-enabled"><span>{{ .lang.Strings.enabled }}</span> <input type="checkbox" class="mr-2" id="welcome_email-enabled"><span>{{ .lang.Strings.enabled }}</span>
</label> </label>
<label class="label"> <label class="label">
<span class="mt-8">{{ .lang.Strings.emailSubject }}</span> <span class="mt-4">{{ .lang.Strings.emailSubject }}</span>
<input type="text" class="input ~neutral @low mt-8 mb-4" id="welcome_email-subject" placeholder="{{ .emailLang.WelcomeEmail.title }}"> <input type="text" class="input ~neutral @low mt-4 mb-2" id="welcome_email-subject" placeholder="{{ .emailLang.WelcomeEmail.title }}">
</label> </label>
<section class="section ~neutral banner footer flex-expand middle"> <section class="section ~neutral banner footer flex-expand middle">
<span class="button ~neutral @low back">{{ .lang.Strings.back }}</span> <span class="button ~neutral @low back">{{ .lang.Strings.back }}</span>
@ -353,19 +353,19 @@
</div> </div>
</section> </section>
</div> </div>
<div class="card ~neutral @low mb-4 unfocused related-to-email"> <div class="card ~neutral @low mb-2 unfocused related-to-email">
<span class="heading">{{ .lang.InviteEmails.title }}</span> <span class="heading">{{ .lang.InviteEmails.title }}</span>
<p class="content">{{ .lang.InviteEmails.description }}</p> <p class="content my-2">{{ .lang.InviteEmails.description }}</p>
<label class="row switch pb-4"> <label class="row switch pb-4">
<input type="checkbox" id="invite_emails-enabled"><span>{{ .lang.Strings.enabled }}</span> <input type="checkbox" class="mr-2" id="invite_emails-enabled"><span>{{ .lang.Strings.enabled }}</span>
</label> </label>
<label class="label"> <label class="label">
<span class="mt-8">{{ .lang.Strings.URL }}</span> <span class="mt-4">{{ .lang.Strings.URL }}</span>
<input type="url" class="input ~neutral @low mt-8 mb-4" id="invite_emails-url_base" placeholder="https://accounts.jellyf.in/invite"> <input type="url" class="input ~neutral @low mt-4 mb-2" id="invite_emails-url_base" placeholder="https://accounts.jellyf.in/invite">
</label> </label>
<label class="label"> <label class="label">
<span class="mt-8">{{ .lang.Strings.emailSubject }}</span> <span class="mt-4">{{ .lang.Strings.emailSubject }}</span>
<input type="text" class="input ~neutral @low mt-8 mb-4" id="invite_emails-subject" placeholder="{{ .emailLang.InviteEmail.title }}"> <input type="text" class="input ~neutral @low mt-4 mb-2" id="invite_emails-subject" placeholder="{{ .emailLang.InviteEmail.title }}">
</label> </label>
<section class="section ~neutral banner footer flex-expand middle"> <section class="section ~neutral banner footer flex-expand middle">
<span class="button ~neutral @low back">{{ .lang.Strings.back }}</span> <span class="button ~neutral @low back">{{ .lang.Strings.back }}</span>
@ -374,35 +374,35 @@
</div> </div>
</section> </section>
</div> </div>
<div id="password-resets" class="card ~neutral @low mb-4 unfocused related-to-email"> <div id="password-resets" class="card ~neutral @low mb-2 unfocused related-to-email">
<span class="heading">{{ .lang.PasswordResets.title }}</span> <span class="heading">{{ .lang.PasswordResets.title }}</span>
<p class="content">{{ .lang.PasswordResets.description }}</p> <p class="content my-2">{{ .lang.PasswordResets.description }}</p>
<label class="row switch pb-4"> <label class="row switch pb-4">
<input type="checkbox" id="password_resets-enabled"><span>{{ .lang.Strings.enabled }}</span> <input type="checkbox" class="mr-2" id="password_resets-enabled"><span>{{ .lang.Strings.enabled }}</span>
</label> </label>
<label class="label"> <label class="label">
<span class="mt-8">{{ .lang.PasswordResets.pathToJellyfin }}</span> <span class="mt-4">{{ .lang.PasswordResets.pathToJellyfin }}</span>
<input type="text" class="input ~neutral @low mt-8" id="password_resets-watch_directory" placeholder="/config/jellyfin"> <input type="text" class="input ~neutral @low mt-4" id="password_resets-watch_directory" placeholder="/config/jellyfin">
<p class="support mb-4">{{ .lang.PasswordResets.pathToJellyfinNotice }}</p> <p class="support mb-2 mt-1">{{ .lang.PasswordResets.pathToJellyfinNotice }}</p>
</label> </label>
<label class="switch"> <label class="switch">
<input type="checkbox" id="password_resets-link_reset"><span>{{ .lang.PasswordResets.resetLinks }}</span> <input type="checkbox" class="mr-2" id="password_resets-link_reset"><span>{{ .lang.PasswordResets.resetLinks }}</span>
<p class="support mb-4">{{ .lang.PasswordResets.resetLinksNotice }}</p> <p class="support mb-2 mt-1">{{ .lang.PasswordResets.resetLinksNotice }}</p>
</label> </label>
<label class="switch"> <label class="switch">
<input type="checkbox" id="password_resets-set_password"><span>{{ .lang.PasswordResets.setPassword }}</span> <input type="checkbox" class="mr-2" id="password_resets-set_password"><span>{{ .lang.PasswordResets.setPassword }}</span>
<p class="support mb-4">{{ .lang.PasswordResets.setPasswordNotice }}</p> <p class="support mb-2 mt-1">{{ .lang.PasswordResets.setPasswordNotice }}</p>
</label> </label>
<label class="label"> <label class="label">
<p class="mt-8">{{ .lang.PasswordResets.resetLinksLanguage }}</p> <p class="mt-4">{{ .lang.PasswordResets.resetLinksLanguage }}</p>
<div class="select ~neutral @low mt-8 mb-4"> <div class="select ~neutral @low mt-4 mb-2">
<select id="password_resets-language"> <select id="password_resets-language">
</select> </select>
</div> </div>
</label> </label>
<label class="row label"> <label class="row label">
<span class="mt-8">{{ .lang.Strings.emailSubject }}</span> <span class="mt-4">{{ .lang.Strings.emailSubject }}</span>
<input type="text" class="input ~neutral @low mt-8 mb-4" id="password_resets-subject" placeholder="{{ .emailLang.PasswordReset.title }}"> <input type="text" class="input ~neutral @low mt-4 mb-2" id="password_resets-subject" placeholder="{{ .emailLang.PasswordReset.title }}">
</label> </label>
<section class="section ~neutral banner footer flex-expand middle"> <section class="section ~neutral banner footer flex-expand middle">
<span class="button ~neutral @low back">{{ .lang.Strings.back }}</span> <span class="button ~neutral @low back">{{ .lang.Strings.back }}</span>
@ -411,31 +411,31 @@
</div> </div>
</section> </section>
</div> </div>
<div class="card ~neutral @low mb-4 unfocused"> <div class="card ~neutral @low mb-2 unfocused">
<span class="heading">{{ .lang.PasswordValidation.title }}</span> <span class="heading">{{ .lang.PasswordValidation.title }}</span>
<p class="content">{{ .lang.PasswordValidation.description }}</p> <p class="content my-2">{{ .lang.PasswordValidation.description }}</p>
<label class="row switch pb-4"> <label class="row switch pb-4">
<input type="checkbox" id="password_validation-enabled" checked><span>{{ .lang.Strings.enabled }}</span> <input type="checkbox" class="mr-2" id="password_validation-enabled" checked><span>{{ .lang.Strings.enabled }}</span>
</label> </label>
<label class="label"> <label class="label">
<span class="mt-8">{{ .lang.PasswordValidation.length }}</span> <span class="mt-4">{{ .lang.PasswordValidation.length }}</span>
<input type="number" class="input ~neutral @low mt-8 mb-4" id="password_validation-min_length" value="8"> <input type="number" class="input ~neutral @low mt-4 mb-2" id="password_validation-min_length" value="8">
</label> </label>
<label class="label"> <label class="label">
<span class="mt-8">{{ .lang.PasswordValidation.uppercase }}</span> <span class="mt-4">{{ .lang.PasswordValidation.uppercase }}</span>
<input type="number" class="input ~neutral @low mt-8 mb-4" id="password_validation-upper" value="1"> <input type="number" class="input ~neutral @low mt-4 mb-2" id="password_validation-upper" value="1">
</label> </label>
<label class="label"> <label class="label">
<span class="mt-8">{{ .lang.PasswordValidation.lowercase }}</span> <span class="mt-4">{{ .lang.PasswordValidation.lowercase }}</span>
<input type="number" class="input ~neutral @low mt-8 mb-4" id="password_validation-lower" value="0"> <input type="number" class="input ~neutral @low mt-4 mb-2" id="password_validation-lower" value="0">
</label> </label>
<label class="label"> <label class="label">
<span class="mt-8">{{ .lang.PasswordValidation.numbers }}</span> <span class="mt-4">{{ .lang.PasswordValidation.numbers }}</span>
<input type="number" class="input ~neutral @low mt-8 mb-4" id="password_validation-number" value="0"> <input type="number" class="input ~neutral @low mt-4 mb-2" id="password_validation-number" value="0">
</label> </label>
<label class="label"> <label class="label">
<span class="mt-8">{{ .lang.PasswordValidation.special }}</span> <span class="mt-4">{{ .lang.PasswordValidation.special }}</span>
<input type="number" class="input ~neutral @low mt-8 mb-4" id="password_validation-special" value="0"> <input type="number" class="input ~neutral @low mt-4 mb-2" id="password_validation-special" value="0">
</label> </label>
<section class="section ~neutral banner footer flex-expand middle"> <section class="section ~neutral banner footer flex-expand middle">
<span class="button ~neutral @low back">{{ .lang.Strings.back }}</span> <span class="button ~neutral @low back">{{ .lang.Strings.back }}</span>
@ -444,28 +444,28 @@
</div> </div>
</section> </section>
</div> </div>
<div class="card ~neutral @low mb-4 unfocused"> <div class="card ~neutral @low mb-2 unfocused">
<span class="heading">{{ .lang.HelpMessages.title }}</span> <span class="heading">{{ .lang.HelpMessages.title }}</span>
<p class="content">{{ .lang.HelpMessages.description }}</p> <p class="content my-2">{{ .lang.HelpMessages.description }}</p>
<label class="label"> <label class="label">
<span class="mt-8">{{ .lang.HelpMessages.contactMessage }}</span> <span class="mt-4">{{ .lang.HelpMessages.contactMessage }}</span>
<input type="text" class="input ~neutral @low mt-8" id="ui-contact_message"> <input type="text" class="input ~neutral @low mt-4" id="ui-contact_message">
<p class="support mb-4">{{ .lang.HelpMessages.contactMessageNotice }}</p> <p class="support mb-2 mt-1">{{ .lang.HelpMessages.contactMessageNotice }}</p>
</label> </label>
<label class="label"> <label class="label">
<span class="mt-8">{{ .lang.HelpMessages.helpMessage }}</span> <span class="mt-4">{{ .lang.HelpMessages.helpMessage }}</span>
<input type="text" class="input ~neutral @low mt-8" id="ui-help_message"> <input type="text" class="input ~neutral @low mt-4" id="ui-help_message">
<p class="support mb-4">{{ .lang.HelpMessages.helpMessageNotice }}</p> <p class="support mb-2 mt-1">{{ .lang.HelpMessages.helpMessageNotice }}</p>
</label> </label>
<label class="label"> <label class="label">
<span class="mt-8">{{ .lang.HelpMessages.successMessage }}</span> <span class="mt-4">{{ .lang.HelpMessages.successMessage }}</span>
<input type="text" class="input ~neutral @low mt-8" id="ui-success_message"> <input type="text" class="input ~neutral @low mt-4" id="ui-success_message">
<p class="support mb-4">{{ .lang.HelpMessages.successMessageNotice }}</p> <p class="support mb-2 mt-1">{{ .lang.HelpMessages.successMessageNotice }}</p>
</label> </label>
<label class="label related-to-email"> <label class="label related-to-email">
<span class="mt-8">{{ .lang.HelpMessages.emailMessage }}</span> <span class="mt-4">{{ .lang.HelpMessages.emailMessage }}</span>
<input type="text" class="input ~neutral @low mt-8" id="email-message"> <input type="text" class="input ~neutral @low mt-4" id="email-message">
<p class="support mb-4">{{ .lang.HelpMessages.emailMessageNotice }}</p> <p class="support mb-2 mt-1">{{ .lang.HelpMessages.emailMessageNotice }}</p>
</label> </label>
<section class="section ~neutral banner footer flex-expand middle"> <section class="section ~neutral banner footer flex-expand middle">
<span class="button ~neutral @low back">{{ .lang.Strings.back }}</span> <span class="button ~neutral @low back">{{ .lang.Strings.back }}</span>
@ -474,12 +474,12 @@
</div> </div>
</section> </section>
</div> </div>
<div class="card ~neutral @low mb-4 unfocused"> <div class="card ~neutral @low mb-2 unfocused">
<div class="row col flex center"> <div class="row col flex center">
<span class="heading">{{ .lang.EndPage.finished }}</span> <span class="heading">{{ .lang.EndPage.finished }}</span>
</div> </div>
<div class="row col flex center"> <div class="row col flex center">
<p class="content">{{ .lang.EndPage.restartMessage }}</p> <p class="content my-2">{{ .lang.EndPage.restartMessage }}</p>
</div> </div>
<div class="row col flex center"> <div class="row col flex center">
<span class="button ~neutral @low back mr-4">{{ .lang.Strings.back }}</span> <span class="button ~neutral @low back mr-4">{{ .lang.Strings.back }}</span>