You've already forked fm-dx-webserver
mirror of
https://github.com/KubaPro010/fm-dx-webserver.git
synced 2026-02-26 22:13:53 +01:00
209 lines
13 KiB
Plaintext
209 lines
13 KiB
Plaintext
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>FM-DX Webserver</title>
|
|
<link href="css/entry.css" type="text/css" rel="stylesheet">
|
|
<link href="css/flags.min.css" type="text/css" rel="stylesheet">
|
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" type="text/css" rel="stylesheet">
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.min.css" type="text/css" rel="stylesheet">
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.min.js"></script>
|
|
<link rel="icon" type="image/png" href="favicon2.png" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
</head>
|
|
<body>
|
|
<div id="wrapper" class="setup-wrapper">
|
|
<% if (isAdminAuthenticated) { %>
|
|
<div class="panel-100 no-bg">
|
|
<img class="top-10" src="../images/openradio_logo_neutral.png" height="64px">
|
|
<h1 class="top-10">FM-DX WebServer</h1>
|
|
<h2 class="text-monospace text-light text-gray">[SETUP WIZARD]</h2>
|
|
</div>
|
|
<div class="panel-100 no-bg flex-container flex-center flex-phone">
|
|
<div class="btn-rounded-cube activated">1</div>
|
|
<div class="btn-rounded-cube">2</div>
|
|
<div class="btn-rounded-cube">3</div>
|
|
<div class="btn-rounded-cube">4</div>
|
|
</div>
|
|
|
|
<div class="panel-100">
|
|
|
|
<!-- BASIC SETTINGS -->
|
|
<div class="panel-100 step" id="step1">
|
|
<h2 class="settings-heading">BASIC SETTINGS</h2>
|
|
<p class="m-0">Welcome to the setup wizard!<br> Let's set up some basic things.</p>
|
|
<h3>Tuner connection:</h3>
|
|
<p class="m-0 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>
|
|
<div class="flex-center top-25">
|
|
<div class="form-group">
|
|
<label for="xdrd-ip">xdrd ip address:</label>
|
|
<input class="input-text w-150" type="text" name="xdrd-ip" id="xdrd-ip" placeholder="127.0.0.1">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="xdrd-port">xdrd port:</label>
|
|
<input class="input-text w-100" type="text" name="xdrd-port" id="xdrd-port" placeholder="7373">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="xdrd-password">xdrd server password:</label>
|
|
<input class="input-text w-150" type="password" name="xdrd-password" id="xdrd-password">
|
|
</div>
|
|
</div>
|
|
<h3>Webserver connection:</h3>
|
|
<p class="m-0 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>
|
|
<div class="flex-center top-25">
|
|
<div class="form-group">
|
|
<label for="webserver-ip">Webserver IP:</label>
|
|
<input class="input-text w-150" type="text" name="webserver-ip" id="webserver-ip" placeholder="0.0.0.0">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="webserver-port">Webserver port:</label>
|
|
<input class="input-text w-100" type="text" name="webserver-port" id="webserver-port" placeholder="8080">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- BASIC SETTINGS END -->
|
|
<!-- AUDIO SETTINGS -->
|
|
<div id="step2" class="step" style="display: none;">
|
|
<div class="panel-100" style="min-height: 120px;margin-bottom: 0;">
|
|
<h2 class="settings-heading">AUDIO SETTINGS</h2>
|
|
<p class="m-0 text-gray">In this section, we will set up the audio.<br>
|
|
Choose the audio port your tuner is connected to and desired audio settings here.</p>
|
|
<p class="text-gray">Recommended defaults have already been set for the audio quality, you can keep them as-is.</p>
|
|
|
|
<div class="panel-100 p-bottom-20">
|
|
<div class="form-group">
|
|
<label for="audio-devices"><i class="fa-solid fa-headphones"></i> STREAM AUDIO FROM:</label>
|
|
<div class="dropdown" style="width: 300px;">
|
|
<input id="audio-devices" type="text" name="audio-devices" placeholder="Choose your audio device" readonly />
|
|
<ul class="options" id="deviceList">
|
|
<% videoDevices.forEach(device => { %>
|
|
<li data-value="<%= device.name %>" class="option"><%= device.name %></li>
|
|
<% }); %>
|
|
<% audioDevices.forEach(device => { %>
|
|
<li data-value="<%= device.name %>" class="option"><%= device.name %></li>
|
|
<% }); %>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="audio-devices"><i class="fa-solid fa-microphone-lines"></i> AUDIO CHANNELS:</label>
|
|
<div class="dropdown" style="width: 300px;">
|
|
<input id="audio-channels" type="text" name="audio-channels" placeholder="Stereo" readonly />
|
|
<ul class="options">
|
|
<li data-value="2" class="option">Stereo</li>
|
|
<li data-value="1" class="option">Mono</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="audio-quality"><i class="fa-solid fa-wave-square"></i> AUDIO QUALITY:</label>
|
|
<div class="dropdown" style="width: 300px;">
|
|
<input id="audio-quality" type="text" name="audio-quality" placeholder="128k (standard)" readonly />
|
|
<ul class="options">
|
|
<li data-value="64k" class="option">64k (lowest quality)</li>
|
|
<li data-value="96k" class="option">96k (low quality)</li>
|
|
<li data-value="128k" class="option">128k (standard)</li>
|
|
<li data-value="192k" class="option">192k (higher quality)</li>
|
|
<li data-value="256k" class="option">256k (highest quality)</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- AUDIO SETTINGS END -->
|
|
<!-- IDENTIFICATION START -->
|
|
<div id="step3" class="step" style="display: none;">
|
|
<div class="panel-100" style="padding-bottom: 20px;">
|
|
<h2 class="settings-heading">IDENTIFICATION INFO</h2>
|
|
<p class="text-gray">In this part, we will set up your indentification info, such as the server name, description and location.</p>
|
|
<label for="webserver-name" style="width: 100%;max-width: 768px; margin:auto;">Webserver name:</label>
|
|
<input style="width: 100%; max-width: 768px;" class="input-text" type="text" name="webserver-name" id="webserver-name" placeholder="Fill your server name here." maxlength="32">
|
|
<br>
|
|
<label for="webserver-desc" style="width: 100%;max-width: 768px; margin: auto;">Webserver description:</label>
|
|
<textarea id="webserver-desc" 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>
|
|
|
|
<h3>Location:</h3>
|
|
<p class="text-gray">Location info is useful for automatic identification of stations using RDS.</p>
|
|
<div class="form-group">
|
|
<label for="lat">Latitude:</label>
|
|
<input class="input-text" type="text" name="lat" id="lat">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="lng">Longitude:</label>
|
|
<input class="input-text" type="text" name="lng" id="lng">
|
|
</div>
|
|
<div id="map"></div>
|
|
|
|
<h3>Map broadcast:</h3>
|
|
<p class="m-0">If your location info is filled, you can add your tuner to a public list.</p>
|
|
<p class="m-0">The list is available at <strong><a href="https://list.fmdx.pl" target="_blank" class="color-4">list.fmdx.pl</a></strong>.</p>
|
|
|
|
<p class="text-gray">Only fill up your broadcast address if you are using a proxy. If you don't know what a proxy is, leave it empty.</p>
|
|
<div class="form-group checkbox">
|
|
<input type="checkbox" id="broadcast-tuner">
|
|
<label for="broadcast-tuner">Show my tuner on the public list</label>
|
|
</div>
|
|
<div class="form-group checkbox">
|
|
<input type="checkbox" id="tuner-public">
|
|
<label for="tuner-public">Allow tuning without password</label>
|
|
</div>
|
|
<br>
|
|
<div class="form-group">
|
|
<label for="broadcast-address">Broadcast address:</label>
|
|
<input class="input-text" type="text" name="broadcast-address" id="broadcast-address">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- IDENTIFICATION END -->
|
|
<!-- ADMIN SETTINGS START -->
|
|
<div id="step4" class="step" style="display: none;">
|
|
<h2 class="settings-heading">Admin panel settings</h2>
|
|
<p>We are at the last and final step of the settings.</p>
|
|
|
|
<p class="text-gray">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="form-group">
|
|
<label for="tune-pass">Tune password:</label>
|
|
<input class="input-text w-200" type="password" name="tune-pass" id="tune-pass">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="admin-pass">Admin setup password:</label>
|
|
<input class="input-text w-200" type="password" name="admin-pass" id="admin-pass">
|
|
</div><br>
|
|
<p>You can now click the <strong>save button</strong> to save your settings.</p>
|
|
</div>
|
|
|
|
<button class="btn-prev"><i class="fa-solid fa-arrow-left"></i></button>
|
|
<button class="btn-next">Next</button>
|
|
</div>
|
|
<div class="panel-100 no-bg">
|
|
<p>Feel free to contact us on <a href="https://discord.gg/ZAVNdS74mC" target="_blank"><strong><i class="fa-brands fa-discord"></i> Discord</strong></a> for community support.</p>
|
|
</div>
|
|
<% } else { %>
|
|
<div class="panel-100 no-bg">
|
|
<img class="top-25" src="../images/openradio_logo_neutral.png" height="64px">
|
|
<h2 class="text-monospace text-light">[ADMIN PANEL]</h2>
|
|
<p>You are currently not logged in as an administrator and therefore can't change the settings.</p>
|
|
<p>Please login below.</p>
|
|
</div>
|
|
<div class="panel-100 p-bottom-20">
|
|
<h2>LOGIN</h2>
|
|
<form action="./login" method="post" id="login-form">
|
|
<input style="background-color: var(--color-2);" type="password" id="password" name="password" required>
|
|
<button type="submit" class="br-0 w-100" style="height: 44px;">Login</button>
|
|
</form>
|
|
<div id="login-message"></div>
|
|
</div>
|
|
<% } %>
|
|
</div>
|
|
<script src="js/settings.js"></script>
|
|
<script src="js/dropdown.js"></script>
|
|
<script src="js/setup.js"></script>
|
|
<script src="js/wizard.js"></script>
|
|
<script src="js/confighandler.js"></script>
|
|
</body>
|
|
</html>
|