kuba/fm-dx-webserver
1
0
Fork 0
mirror of https://github.com/KubaPro010/fm-dx-webserver.git synced 2026-02-26 22:13:53 +01:00
Code Issues Activity

Merge pull request #120 from barteqcz/main

Browse Source 
Fixed the theme bug, addressed the UI inconsistencies
This commit is contained in:
Marek Farkaš
2025-01-20 20:38:49 +01:00
committed by GitHub
parent f0eda2ba0b 6f7a63ea17
commit 8f8a6af655
8 changed files with 62 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
web/css/buttons.css
View File

@@ -86,10 +86,6 @@ input[type="text"], textarea, input[type="password"] {
caret-color: var(--color-4); caret-color: var(--color-4);
} }
input[type="password"]:not(.setup-wrapper input[type="password"]) {
border-radius: 15px 0 0 15px;
}
#tune-buttons input[type="text"] { #tune-buttons input[type="text"] {
width: 50%; width: 50%;
height: 48px; height: 48px;

4
web/css/helpers.css
View File

@@ -59,6 +59,10 @@
border-radius: 5px; border-radius: 5px;
} }
.br-15 {
border-radius: 15px;
}
.br-30 { .br-30 {
border-radius: 30px; border-radius: 30px;
} }

8
web/index.ejs
View File

@@ -325,7 +325,7 @@
<div class="panel-full flex-center no-bg m-0"> <div class="panel-full flex-center no-bg m-0">
<%- include('_components', { component: 'dropdown', id: 'theme-selector', inputId: 'theme-selector-input', label: 'Theme', cssClass: '', placeholder: 'Default', <%- include('_components', { component: 'dropdown', id: 'theme-selector', inputId: 'theme-selector-input', label: 'Theme', cssClass: '', placeholder: 'Default',
options: [ options: [
{ value: 'theme1', label: 'Default' }, { value: 'theme1', label: 'Mint' },
{ value: 'theme2', label: 'Cappuccino' }, { value: 'theme2', label: 'Cappuccino' },
{ value: 'theme3', label: 'Nature' }, { value: 'theme3', label: 'Nature' },
{ value: 'theme4', label: 'Ocean' }, { value: 'theme4', label: 'Ocean' },
@@ -384,7 +384,7 @@
</div> </div>
<% } else { %> <% } else { %>
<form action="./login" method="post" id="login-form" class="top-25"> <form action="./login" method="post" id="login-form" class="top-25">
<input type="password" id="password" name="password" placeholder="Password" style="width: 145px;" required> <input type="password" id="password" name="password" placeholder="Password" style="width: 145px; border-radius: 15px 0 0 15px" required>
<button type="submit" class="br-0 top-10 tooltip" style="height: 46px; width: 50px; margin-left: -2px;border-radius: 0 15px 15px 0;" role="button" aria-label="Log in" tabindex="0" data-tooltip="Log in"> <button type="submit" class="br-0 top-10 tooltip" style="height: 46px; width: 50px; margin-left: -2px;border-radius: 0 15px 15px 0;" role="button" aria-label="Log in" tabindex="0" data-tooltip="Log in">
<i class="fa-solid fa-right-to-bracket"></i> <i class="fa-solid fa-right-to-bracket"></i>
</button> </button>
@@ -463,7 +463,7 @@
<div class="modal-panel-content text-left"> <div class="modal-panel-content text-left">
<div style="text-align: center;"> <div style="text-align: center;">
<input type="text" id="chat-nickname" name="chat-nickname" placeholder="Nickname"> <input type="text" id="chat-nickname" name="chat-nickname" placeholder="Nickname">
<button class="br-0 w-100 top-10" style="height: 44px" id="chat-nickname-save">Save</button> <button class="br-0 w-100 top-10" style="height: 48px" id="chat-nickname-save">Save</button>
<p style="margin: 5px;"> <p style="margin: 5px;">
Current identity: <span style="color: #bada55;" id="chat-admin"></span> <strong id="chat-identity-nickname"></strong> Current identity: <span style="color: #bada55;" id="chat-admin"></span> <strong id="chat-identity-nickname"></strong>
</p> </p>
@@ -474,7 +474,7 @@
<div class="flex-container flex-phone" style="align-content: stretch;"> <div class="flex-container flex-phone" style="align-content: stretch;">
<input class="bg-color-2" type="text" id="chat-send-message" name="chat-send-message" placeholder="Send message..." style="background-color: var(--color-2);width: 100%;"> <input class="bg-color-2" type="text" id="chat-send-message" name="chat-send-message" placeholder="Send message..." style="background-color: var(--color-2);width: 100%;">
<button aria-label="Send message" class="chat-send-message-btn br-0" style="width: 80px; height: 45px;"><i class="fa-solid fa-paper-plane"></i></button> <button aria-label="Send message" class="chat-send-message-btn br-0" style="width: 80px; height: 48px;"><i class="fa-solid fa-paper-plane"></i></button>
</div> </div>
</div> </div>
</div> </div>

4
web/js/settings.js
View File

@@ -6,7 +6,7 @@
* @param background filter color * @param background filter color
*/ */
const themes = { const themes = {
theme1: [ 'rgb(32, 34, 40)', 'rgb(88, 219, 171)', 'rgb(255, 255, 255)', 'rgb(11, 12, 14)' ], // Retro (Default) theme1: [ 'rgb(32, 34, 40)', 'rgb(88, 219, 171)', 'rgb(255, 255, 255)', 'rgb(11, 12, 14)' ], // Mint
theme2: [ 'rgb(21, 32, 33)', 'rgb(203, 202, 165)', 'rgb(255, 255, 255)', 'rgb(7, 11, 12)' ], // Cappuccino theme2: [ 'rgb(21, 32, 33)', 'rgb(203, 202, 165)', 'rgb(255, 255, 255)', 'rgb(7, 11, 12)' ], // Cappuccino
theme3: [ 'rgb(18, 18, 12)', 'rgb(169, 255, 112)', 'rgb(255, 255, 255)', 'rgb(6, 6, 4)' ], // Nature theme3: [ 'rgb(18, 18, 12)', 'rgb(169, 255, 112)', 'rgb(255, 255, 255)', 'rgb(6, 6, 4)' ], // Nature
theme4: [ 'rgb(12, 28, 27)', 'rgb(104, 247, 238)', 'rgb(255, 255, 255)', 'rgb(4, 10, 9)' ], // Ocean theme4: [ 'rgb(12, 28, 27)', 'rgb(104, 247, 238)', 'rgb(255, 255, 255)', 'rgb(4, 10, 9)' ], // Ocean
@@ -30,6 +30,8 @@ $(document).ready(() => {
const defaultTheme = localStorage.getItem('defaultTheme'); const defaultTheme = localStorage.getItem('defaultTheme');
const savedUnit = localStorage.getItem('signalUnit'); const savedUnit = localStorage.getItem('signalUnit');
themeSelector.find('input').val(themeSelector.find('.option[data-value="' + defaultTheme + '"]').text());
if(defaultTheme && themes[defaultTheme]) { if(defaultTheme && themes[defaultTheme]) {
setTheme(defaultTheme); setTheme(defaultTheme);
} }

4
web/login.ejs
View File

@@ -23,8 +23,8 @@
<div class="panel-100 p-bottom-20"> <div class="panel-100 p-bottom-20">
<h1 class="text-light">Login</h1> <h1 class="text-light">Login</h1>
<form action="./login" method="post" id="login-form"> <form action="./login" method="post" id="login-form">
<input type="password" id="password" name="password" placeholder="Password" style="width: 250px; background-color: var(--color-2);" required> <input type="password" id="password" name="password" placeholder="Password" style="width: 250px; background-color: var(--color-2); height: 48px; border-radius: 15px 0 0 15px" required>
<button type="submit" class="br-0 top-10 tooltip" style="height: 46px; width: 50px; margin-left: -4px;border-radius: 0 15px 15px 0;" role="button" aria-label="Log in" tabindex="0" data-tooltip="Log in"> <button type="submit" class="br-0 top-10 tooltip" style="height: 48px; width: 50px; margin-left: -4px;border-radius: 0 15px 15px 0;" role="button" aria-label="Log in" tabindex="0" data-tooltip="Log in">
<i class="fa-solid fa-right-to-bracket"></i> <i class="fa-solid fa-right-to-bracket"></i>
</button> </button>
</form> </form>

64
web/setup.ejs
View File

@@ -55,7 +55,7 @@
</div> </div>
</div> </div>
<hr> <hr>
<div class="panel-100 no-bg"> <div class="panel-100-real m-0 p-10 no-bg">
<p class="color-4">Feel free to contact us on <a href="https://discord.gg/ZAVNdS74mC" target="_blank"><strong class="color-5"><i class="fa-brands fa-discord"></i> Discord</strong></a> for community support.</p> <p class="color-4">Feel free to contact us on <a href="https://discord.gg/ZAVNdS74mC" target="_blank"><strong class="color-5"><i class="fa-brands fa-discord"></i> Discord</strong></a> for community support.</p>
<a href="https://github.com/noobishsvk/fm-dx-webserver" target="_blank" class="text-small">Version: <span class="version-string color-4"></span></a> <a href="https://github.com/noobishsvk/fm-dx-webserver" target="_blank" class="text-small">Version: <span class="version-string color-4"></span></a>
</div> </div>
@@ -127,8 +127,8 @@
<%- include('_components', {component: 'checkbox', cssClass: '', label: 'Admin lock', id: 'lockToAdmin'}) %><br> <%- include('_components', {component: 'checkbox', cssClass: '', label: 'Admin lock', id: 'lockToAdmin'}) %><br>
</div> </div>
<%- include('_components', {component: 'text', cssClass: 'w-150', placeholder: '', label: 'Tune password', id: 'password-tunePass', password: true}) %> <%- include('_components', {component: 'text', cssClass: 'w-150 br-15', placeholder: '', label: 'Tune password', id: 'password-tunePass', password: true}) %>
<%- include('_components', {component: 'text', cssClass: 'w-150', placeholder: '', label: 'Admin password', id: 'password-adminPass', password: true}) %><br> <%- include('_components', {component: 'text', cssClass: 'w-150 br-15', placeholder: '', label: 'Admin password', id: 'password-adminPass', password: true}) %><br>
</div> </div>
</div> </div>
@@ -222,18 +222,18 @@
<div class="panel-33 p-bottom-20" style="padding-left: 20px; padding-right: 20px;"> <div class="panel-33 p-bottom-20" style="padding-left: 20px; padding-right: 20px;">
<h3>Connection</h3> <h3>Connection</h3>
<p class="text-gray">Leave the IP at 0.0.0.0 unless you explicitly know you have to change it.<br>Don't enter your public IP here.</p> <p class="text-gray">Leave the IP at 0.0.0.0 unless you explicitly know you have to change it.<br>Don't enter your public IP here.</p>
<%- include('_components', {component: 'text', cssClass: 'w-150', placeholder: '0.0.0.0', label: 'Webserver IP', id: 'webserver-webserverIp'}) %> <%- include('_components', {component: 'text', cssClass: 'w-150 br-15', placeholder: '0.0.0.0', label: 'Webserver IP', id: 'webserver-webserverIp'}) %>
<%- include('_components', {component: 'text', cssClass: 'w-100', placeholder: '8080', label: 'Webserver port', id: 'webserver-webserverPort'}) %><br> <%- include('_components', {component: 'text', cssClass: 'w-100 br-15', placeholder: '8080', label: 'Webserver port', id: 'webserver-webserverPort'}) %><br>
</div> </div>
<div class="panel-33 p-bottom-20"> <div class="panel-33 p-bottom-20">
<h3>Design</h3> <h3>Design</h3>
<h4>Background image</h4> <h4>Background image</h4>
<%- include('_components', {component: 'text', cssClass: '', placeholder: 'Direct image link', label: 'Image link', id: 'webserver-bgImage'}) %><br> <%- include('_components', {component: 'text', cssClass: 'br-15', placeholder: 'Direct image link', label: 'Image link', id: 'webserver-bgImage'}) %><br>
<h4 class="top-25">Themes</h4> <h4 class="top-25">Themes</h4>
<%- include('_components', { component: 'dropdown', id: 'server-theme-selector', inputId: 'webserver-defaultTheme', label: 'Default server theme', cssClass: '', placeholder: 'Default', <%- include('_components', { component: 'dropdown', id: 'server-theme-selector', inputId: 'webserver-defaultTheme', label: 'Default server theme', cssClass: '', placeholder: 'Default',
options: [ options: [
{ value: 'theme1', label: 'Default' }, { value: 'theme1', label: 'Mint' },
{ value: 'theme2', label: 'Cappuccino' }, { value: 'theme2', label: 'Cappuccino' },
{ value: 'theme3', label: 'Nature' }, { value: 'theme3', label: 'Nature' },
{ value: 'theme4', label: 'Ocean' }, { value: 'theme4', label: 'Ocean' },
@@ -250,16 +250,16 @@
<%- include('_components', {component: 'checkbox', cssClass: 'bottom-20', label: 'Antenna switch', id: 'antennas-enabled'}) %><br> <%- include('_components', {component: 'checkbox', cssClass: 'bottom-20', label: 'Antenna switch', id: 'antennas-enabled'}) %><br>
<%- include('_components', {component: 'checkbox', cssClass: '', label: 'Antenna 1', id: 'antennas-ant1-enabled'}) %> <%- include('_components', {component: 'checkbox', cssClass: '', label: 'Antenna 1', id: 'antennas-ant1-enabled'}) %>
<%- include('_components', {component: 'text', cssClass: 'w-100', placeholder: 'Ant A', label: 'Antenna 1 name', id: 'antennas-ant1-name'}) %><br> <%- include('_components', {component: 'text', cssClass: 'w-100 br-15', placeholder: 'Ant A', label: 'Antenna 1 name', id: 'antennas-ant1-name'}) %><br>
<%- include('_components', {component: 'checkbox', cssClass: '', label: 'Antenna 2', id: 'antennas-ant2-enabled'}) %> <%- include('_components', {component: 'checkbox', cssClass: '', label: 'Antenna 2', id: 'antennas-ant2-enabled'}) %>
<%- include('_components', {component: 'text', cssClass: 'w-100', placeholder: 'Ant B', label: 'Antenna 2 name', id: 'antennas-ant2-name'}) %><br> <%- include('_components', {component: 'text', cssClass: 'w-100 br-15', placeholder: 'Ant B', label: 'Antenna 2 name', id: 'antennas-ant2-name'}) %><br>
<%- include('_components', {component: 'checkbox', cssClass: '', label: 'Antenna 3', id: 'antennas-ant3-enabled'}) %> <%- include('_components', {component: 'checkbox', cssClass: '', label: 'Antenna 3', id: 'antennas-ant3-enabled'}) %>
<%- include('_components', {component: 'text', cssClass: 'w-100', placeholder: 'Ant C', label: 'Antenna 3 name', id: 'antennas-ant3-name'}) %><br> <%- include('_components', {component: 'text', cssClass: 'w-100 br-15', placeholder: 'Ant C', label: 'Antenna 3 name', id: 'antennas-ant3-name'}) %><br>
<%- include('_components', {component: 'checkbox', cssClass: '', label: 'Antenna 4', id: 'antennas-ant4-enabled'}) %> <%- include('_components', {component: 'checkbox', cssClass: '', label: 'Antenna 4', id: 'antennas-ant4-enabled'}) %>
<%- include('_components', {component: 'text', cssClass: 'w-100', placeholder: 'Ant D', label: 'Antenna 4 name', id: 'antennas-ant4-name'}) %><br> <%- include('_components', {component: 'text', cssClass: 'w-100 br-15', placeholder: 'Ant D', label: 'Antenna 4 name', id: 'antennas-ant4-name'}) %><br>
</div> </div>
</div> </div>
@@ -271,19 +271,19 @@
</p> </p>
<%- include('_components', {component: 'checkbox', cssClass: '', label: 'Limit tuning', id: 'webserver-tuningLimit'}) %><br> <%- include('_components', {component: 'checkbox', cssClass: '', label: 'Limit tuning', id: 'webserver-tuningLimit'}) %><br>
<%- include('_components', {component: 'text', cssClass: 'w-100', placeholder: '0', label: 'Lower limit', id: 'webserver-tuningLowerLimit'}) %> <%- include('_components', {component: 'text', cssClass: 'w-100 br-15', placeholder: '0', label: 'Lower limit', id: 'webserver-tuningLowerLimit'}) %>
<%- include('_components', {component: 'text', cssClass: 'w-100', placeholder: '108', label: 'Upper limit', id: 'webserver-tuningUpperLimit'}) %> <%- include('_components', {component: 'text', cssClass: 'w-100 br-15', placeholder: '108', label: 'Upper limit', id: 'webserver-tuningUpperLimit'}) %>
</div> </div>
<div class="panel-50 p-bottom-20"> <div class="panel-50 p-bottom-20">
<h3>Presets</h3> <h3>Presets</h3>
<p>You can set up to 4 presets.<br>These presets are accessible with the F1-F4 buttons.<br> <p>You can set up to 4 presets.<br>These presets are accessible with the F1-F4 buttons.<br>
<span class="text-gray">Enter frequencies in MHz.</span></p> <span class="text-gray">Enter frequencies in MHz.</span></p>
<%- include('_components', {component: 'text', cssClass: 'w-100', placeholder: '87.5', label: 'Preset 1', id: 'webserver-presets-1'}) %> <%- include('_components', {component: 'text', cssClass: 'w-100 br-15', placeholder: '87.5', label: 'Preset 1', id: 'webserver-presets-1'}) %>
<%- include('_components', {component: 'text', cssClass: 'w-100', placeholder: '87.5', label: 'Preset 2', id: 'webserver-presets-2'}) %> <%- include('_components', {component: 'text', cssClass: 'w-100 br-15', placeholder: '87.5', label: 'Preset 2', id: 'webserver-presets-2'}) %>
<br> <br>
<%- include('_components', {component: 'text', cssClass: 'w-100', placeholder: '87.5', label: 'Preset 3', id: 'webserver-presets-3'}) %> <%- include('_components', {component: 'text', cssClass: 'w-100 br-15', placeholder: '87.5', label: 'Preset 3', id: 'webserver-presets-3'}) %>
<%- include('_components', {component: 'text', cssClass: 'w-100', placeholder: '87.5', label: 'Preset 4', id: 'webserver-presets-4'}) %> <%- include('_components', {component: 'text', cssClass: 'w-100 br-15', placeholder: '87.5', label: 'Preset 4', id: 'webserver-presets-4'}) %>
</div> </div>
</div> </div>
@@ -370,9 +370,9 @@
<div id="tuner-wireless"> <div id="tuner-wireless">
<p class="text-gray">If you are connecting your tuner <strong>wirelessly</strong>, enter the tuner IP. <br> If you use <strong>xdrd</strong>, use 127.0.0.1 as your IP.</p> <p class="text-gray">If you are connecting your tuner <strong>wirelessly</strong>, enter the tuner IP. <br> If you use <strong>xdrd</strong>, use 127.0.0.1 as your IP.</p>
<%- include('_components', {component: 'text', cssClass: 'w-150', label: 'xdrd IP address', id: 'xdrd-xdrdIp'}) %> <%- include('_components', {component: 'text', cssClass: 'w-150 br-15', label: 'xdrd IP address', id: 'xdrd-xdrdIp'}) %>
<%- include('_components', {component: 'text', cssClass: 'w-100', label: 'xdrd port', id: 'xdrd-xdrdPort'}) %> <%- include('_components', {component: 'text', cssClass: 'w-100 br-15', label: 'xdrd port', id: 'xdrd-xdrdPort'}) %>
<%- include('_components', {component: 'text', cssClass: 'w-150', label: 'xdrd password', id: 'xdrd-xdrdPassword', password: true}) %> <%- include('_components', {component: 'text', cssClass: 'w-150 br-15', label: 'xdrd password', id: 'xdrd-xdrdPassword', password: true}) %>
</div> </div>
</div> </div>
</div> </div>
@@ -440,10 +440,10 @@
<p>Set your tuner name and description here.<br>This info will be visible to anyone who tunes in. </p> <p>Set your tuner name and description here.<br>This info will be visible to anyone who tunes in. </p>
<div class="panel-full no-bg" style="padding-left: 20px; padding-right: 20px;"> <div class="panel-full no-bg" style="padding-left: 20px; padding-right: 20px;">
<label for="identification-tunerName" style="width: 100%;max-width: 768px; margin:auto;">Webserver name:</label> <label for="identification-tunerName" style="width: 100%;max-width: 768px; margin:auto;">Webserver name:</label>
<input style="width: 100%; max-width: 768px;" class="input-text" type="text" name="identification-tunerName" id="identification-tunerName" placeholder="Fill your server name here." maxlength="32"> <input style="width: 100%; max-width: 768px;" class="input-text br-15" type="text" name="identification-tunerName" id="identification-tunerName" placeholder="Fill your server name here." maxlength="32">
<br> <br>
<label for="identification-tunerDesc" style="width: 100%;max-width: 768px; margin: auto;">Webserver description:</label> <label for="identification-tunerDesc" style="width: 100%;max-width: 768px; margin: auto;">Webserver description:</label>
<textarea id="identification-tunerDesc" name="webserver-desc" placeholder="Fill the server description here. You can put useful info here such as your antenna setup. You can use simple markdown." maxlength="255"></textarea> <textarea id="identification-tunerDesc" class="br-15" name="webserver-desc" placeholder="Fill the server description here. You can put useful info here such as your antenna setup. You can use simple markdown." maxlength="255"></textarea>
</div> </div>
</div> </div>
@@ -452,8 +452,8 @@
<p>If your location information is filled,<br>you can add your tuner to a public list.</p> <p>If your location information is filled,<br>you can add your tuner to a public list.</p>
<%- include('_components', {component: 'checkbox', cssClass: '', label: 'Broadcast to map', id: 'identification-broadcastTuner'}) %><br> <%- include('_components', {component: 'checkbox', cssClass: '', label: 'Broadcast to map', id: 'identification-broadcastTuner'}) %><br>
<%- include('_components', {component: 'text', cssClass: '', placeholder: 'Your e-mail or Discord...', label: 'Owner contact', id: 'identification-contact'}) %> <%- include('_components', {component: 'text', cssClass: 'br-15', placeholder: 'Your e-mail or Discord...', label: 'Owner contact', id: 'identification-contact'}) %>
<%- include('_components', {component: 'text', cssClass: '', label: 'Broadcast address (if using a proxy)', id: 'identification-proxyIp'}) %> <%- include('_components', {component: 'text', cssClass: 'br-15', label: 'Broadcast address (if using a proxy)', id: 'identification-proxyIp'}) %>
<p>Check your tuner at <strong><a href="https://servers.fmdx.org" target="_blank" class="color-4">servers.fmdx.org</a></strong>.</p> <p>Check your tuner at <strong><a href="https://servers.fmdx.org" target="_blank" class="color-4">servers.fmdx.org</a></strong>.</p>
<p class="text-small text-gray">By activating the <strong>Broadcast to map</strong> option,<br>you agree to the <a href="https://fmdx.org/projects/webserver.php#rules" target="_blank">Terms of Service</a>.</p> <p class="text-small text-gray">By activating the <strong>Broadcast to map</strong> option,<br>you agree to the <a href="https://fmdx.org/projects/webserver.php#rules" target="_blank">Terms of Service</a>.</p>
@@ -464,8 +464,8 @@
<h3>Location</h3> <h3>Location</h3>
<p class="text-gray">Location info is useful for automatic identification of stations using RDS.</p> <p class="text-gray">Location info is useful for automatic identification of stations using RDS.</p>
<%- include('_components', {component: 'text', cssClass: 'w-150', placeholder: '', label: 'Latitude', id: 'identification-lat'}) %> <%- include('_components', {component: 'text', cssClass: 'w-150 br-15', placeholder: '', label: 'Latitude', id: 'identification-lat'}) %>
<%- include('_components', {component: 'text', cssClass: 'w-150', placeholder: '', label: 'Longitude', id: 'identification-lon'}) %> <%- include('_components', {component: 'text', cssClass: 'w-150 br-15', placeholder: '', label: 'Longitude', id: 'identification-lon'}) %>
<div id="map"></div> <div id="map"></div>
<br> <br>
@@ -496,10 +496,10 @@
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td><%- include('_components', {component: 'text', cssClass: 'w-100', placeholder: 'IP address', label: '', id: 'banlist-add-ip'}) %></td> <td><%- include('_components', {component: 'text', cssClass: 'w-100 br-15', placeholder: 'IP address', label: '', id: 'banlist-add-ip'}) %></td>
<td></td> <td></td>
<td></td> <td></td>
<td><%- include('_components', {component: 'text', cssClass: 'w-150', placeholder: 'Ban reason (note)', label: '', id: 'banlist-add-reason'}) %></td> <td><%- include('_components', {component: 'text', cssClass: 'w-150 br-15', placeholder: 'Ban reason (note)', label: '', id: 'banlist-add-reason'}) %></td>
<td class="color-5"> <td class="color-5">
<a href="#" id="banlist-add-link"><i class="fa-solid fa-plus-circle banlist-add"></i></a> <a href="#" id="banlist-add-link"><i class="fa-solid fa-plus-circle banlist-add"></i></a>
</td> </td>
@@ -542,7 +542,7 @@
<%- include('_components', {component: 'checkbox', cssClass: 'm-right-10', label: 'FMLIST integration', id: 'extras-fmlistIntegration'}) %><br> <%- include('_components', {component: 'checkbox', cssClass: 'm-right-10', label: 'FMLIST integration', id: 'extras-fmlistIntegration'}) %><br>
<p>You can also fill in your OMID from FMLIST.org, if you want the logs to be saved to your account.</p> <p>You can also fill in your OMID from FMLIST.org, if you want the logs to be saved to your account.</p>
<%- include('_components', {component: 'text', cssClass: 'w-100', placeholder: '', label: 'OMID', id: 'extras-fmlistOmid'}) %> <%- include('_components', {component: 'text', cssClass: 'w-100 br-15', placeholder: '', label: 'OMID', id: 'extras-fmlistOmid'}) %>
</div> </div>
<div class="panel-100 p-bottom-20"> <div class="panel-100 p-bottom-20">
<h3>Tunnel</h3> <h3>Tunnel</h3>
@@ -550,9 +550,9 @@
When you become a supporter, you can message the Founders on Discord for your login details.</p> When you become a supporter, you can message the Founders on Discord for your login details.</p>
<%- include('_components', {component: 'checkbox', cssClass: 'm-right-10', label: 'Enable tunnel', id: 'tunnel-enabled'}) %><br> <%- include('_components', {component: 'checkbox', cssClass: 'm-right-10', label: 'Enable tunnel', id: 'tunnel-enabled'}) %><br>
<%- include('_components', {component: 'text', cssClass: 'w-150', placeholder: '', label: 'Subdomain name', id: 'tunnel-subdomain'}) %>.fmtuner.org<br> <%- include('_components', {component: 'text', cssClass: 'w-150 br-15', placeholder: '', label: 'Subdomain name', id: 'tunnel-subdomain'}) %>.fmtuner.org<br>
<%- include('_components', {component: 'text', cssClass: 'w-150', placeholder: '', label: 'Username', id: 'tunnel-username'}) %> <%- include('_components', {component: 'text', cssClass: 'w-150 br-15', placeholder: '', label: 'Username', id: 'tunnel-username'}) %>
<%- include('_components', {component: 'text', cssClass: 'w-250', password: true, placeholder: '', label: 'Token', id: 'tunnel-token'}) %> <%- include('_components', {component: 'text', cssClass: 'w-250 br-15', password: true, placeholder: '', label: 'Token', id: 'tunnel-token'}) %>
<p>Enabling low latency mode may provide better experience, however it will also use more bandwidth.</p> <p>Enabling low latency mode may provide better experience, however it will also use more bandwidth.</p>
<%- include('_components', {component: 'checkbox', cssClass: 'm-right-10', label: 'Low latency mode', id: 'tunnel-lowLatencyMode'}) %><br> <%- include('_components', {component: 'checkbox', cssClass: 'm-right-10', label: 'Low latency mode', id: 'tunnel-lowLatencyMode'}) %><br>

24
web/wizard.ejs
View File

@@ -36,8 +36,8 @@
<h3 class="settings-heading">Webserver connection</h3> <h3 class="settings-heading">Webserver connection</h3>
<p class="m-0">Leave the IP at 0.0.0.0 unless you explicitly know you have to change it.<br>DO NOT enter your public IP here.</p> <p class="m-0">Leave the IP at 0.0.0.0 unless you explicitly know you have to change it.<br>DO NOT enter your public IP here.</p>
<div class="flex-center top-25"> <div class="flex-center top-25">
<%- include('_components', {component: 'text', cssClass: 'w-150', placeholder: '0.0.0.0', label: 'Webserver IP', id: 'webserver-webserverIp'}) %> <%- include('_components', {component: 'text', cssClass: 'w-150 br-15', placeholder: '0.0.0.0', label: 'Webserver IP', id: 'webserver-webserverIp'}) %>
<%- include('_components', {component: 'text', cssClass: 'w-100', placeholder: '8080', label: 'Webserver port', id: 'webserver-webserverPort'}) %><br> <%- include('_components', {component: 'text', cssClass: 'w-100 br-15', placeholder: '8080', label: 'Webserver port', id: 'webserver-webserverPort'}) %><br>
</div> </div>
</div> </div>
<!-- BASIC SETTINGS END --> <!-- BASIC SETTINGS END -->
@@ -91,9 +91,9 @@
<div id="tuner-wireless" class="top-25"> <div id="tuner-wireless" class="top-25">
<p class="m-0">If you are connecting your tuner <strong>wirelessly</strong>, enter the tuner IP. <br> If you use <strong>xdrd</strong>, use 127.0.0.1 as your IP.</p> <p class="m-0">If you are connecting your tuner <strong>wirelessly</strong>, enter the tuner IP. <br> If you use <strong>xdrd</strong>, use 127.0.0.1 as your IP.</p>
<div class="flex-center top-25"> <div class="flex-center top-25">
<%- include('_components', {component: 'text', cssClass: 'w-150', label: 'xdrd IP address', id: 'xdrd-xdrdIp'}) %> <%- include('_components', {component: 'text', cssClass: 'w-150 br-15', label: 'xdrd IP address', id: 'xdrd-xdrdIp'}) %>
<%- include('_components', {component: 'text', cssClass: 'w-100', label: 'xdrd port', id: 'xdrd-xdrdPort'}) %> <%- include('_components', {component: 'text', cssClass: 'w-100 br-15', label: 'xdrd port', id: 'xdrd-xdrdPort'}) %>
<%- include('_components', {component: 'text', cssClass: 'w-150', label: 'xdrd password', id: 'xdrd-xdrdPassword', password: true}) %> <%- include('_components', {component: 'text', cssClass: 'w-150 br-15', label: 'xdrd password', id: 'xdrd-xdrdPassword', password: true}) %>
</div> </div>
</div> </div>
</div> </div>
@@ -153,16 +153,16 @@
<h2 class="settings-heading">Webserver info</h2> <h2 class="settings-heading">Webserver info</h2>
<p class="m-0">In this part, we will set up your webserver info, such as the server name, description and location.</p> <p class="m-0">In this part, we will set up your webserver info, such as the server name, description and location.</p>
<label for="identification-tunerName" style="width: 100%;max-width: 768px; margin:auto;">Webserver name:</label> <label for="identification-tunerName" style="width: 100%;max-width: 768px; margin:auto;">Webserver name:</label>
<input style="width: 100%; max-width: 768px;" class="input-text" type="text" name="identification-tunerName" id="identification-tunerName" placeholder="Fill your server name here." maxlength="32"> <input style="width: 100%; max-width: 768px;" class="input-text br-15" type="text" name="identification-tunerName" id="identification-tunerName" placeholder="Fill your server name here." maxlength="32">
<br> <br>
<label for="identification-tunerDesc" style="width: 100%;max-width: 768px; margin: auto;">Webserver description:</label> <label for="identification-tunerDesc" style="width: 100%;max-width: 768px; margin: auto;">Webserver description:</label>
<textarea id="identification-tunerDesc" name="webserver-desc" placeholder="Fill the server description here. You can put useful info here such as your antenna setup. You can use simple markdown." maxlength="255"></textarea> <textarea id="identification-tunerDesc" name="webserver-desc" class="br-15" placeholder="Fill the server description here. You can put useful info here such as your antenna setup. You can use simple markdown." maxlength="255"></textarea>
<h3 class="settings-heading">Location</h3> <h3 class="settings-heading">Location</h3>
<p>Location info is useful for automatic identification of stations using RDS.</p> <p>Location info is useful for automatic identification of stations using RDS.</p>
<div class="panel-100 no-bg flex-container flex-center"> <div class="panel-100 no-bg flex-container flex-center">
<%- include('_components', {component: 'text', cssClass: 'w-250', placeholder: '', label: 'Latitude', id: 'identification-lat'}) %> <%- include('_components', {component: 'text', cssClass: 'w-250 br-15', placeholder: '', label: 'Latitude', id: 'identification-lat'}) %>
<%- include('_components', {component: 'text', cssClass: 'w-250', placeholder: '', label: 'Longitude', id: 'identification-lon'}) %> <%- include('_components', {component: 'text', cssClass: 'w-250 br-15', placeholder: '', label: 'Longitude', id: 'identification-lon'}) %>
</div> </div>
<div id="map"></div> <div id="map"></div>
@@ -179,7 +179,7 @@
<p class="text-gray">If you use a proxy / tunnel service, enter the access link here. If you don't know what a proxy is, leave it empty.</p> <p class="text-gray">If you use a proxy / tunnel service, enter the access link here. If you don't know what a proxy is, leave it empty.</p>
<div class="panel-100 no-bg flex-container flex-center"> <div class="panel-100 no-bg flex-container flex-center">
<%- include('_components', {component: 'text', cssClass: '', label: 'Broadcast address (if using a proxy)', id: 'identification-proxyIp'}) %> <%- include('_components', {component: 'text', cssClass: 'br-15', label: 'Broadcast address (if using a proxy)', id: 'identification-proxyIp'}) %>
</div> </div>
</div> </div>
</div> </div>
@@ -191,8 +191,8 @@
<p>Here we can set the password. Tune password is optional.<br>Setting an admin password allows you to change settings later and setting one up is mandatory.</p> <p>Here we can set the password. Tune password is optional.<br>Setting an admin password allows you to change settings later and setting one up is mandatory.</p>
<div class="flex-container flex-center"> <div class="flex-container flex-center">
<%- include('_components', {component: 'text', cssClass: 'w-150', placeholder: '', label: 'Tune password', id: 'password-tunePass', password: true}) %> <%- include('_components', {component: 'text', cssClass: 'w-150 br-15', placeholder: '', label: 'Tune password', id: 'password-tunePass', password: true}) %>
<%- include('_components', {component: 'text', cssClass: 'w-150', placeholder: '', label: 'Admin password', id: 'password-adminPass', password: true}) %><br> <%- include('_components', {component: 'text', cssClass: 'w-150 br-15', placeholder: '', label: 'Admin password', id: 'password-adminPass', password: true}) %><br>
</div> </div>
<p>You can now click the <strong>save button</strong> to save your settings. After that, you will need to restart the webserver.</p> <p>You can now click the <strong>save button</strong> to save your settings. After that, you will need to restart the webserver.</p>
</div> </div>