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
215 lines
11 KiB
HTML
215 lines
11 KiB
HTML
<!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 rel="icon" type="image/png" href="favicon2.png" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
|
|
<!-- 3LAS Scripts for Audio streaming -->
|
|
<script src="js/3las/util/3las.helpers.js"></script>
|
|
<script src="js/3las/util/3las.logging.js"></script>
|
|
<script src="js/3las/fallback/3las.liveaudioplayer.js"></script>
|
|
<script src="js/3las/fallback/3las.formatreader.js"></script>
|
|
<script src="js/3las/fallback/formats/3las.formatreader.mpeg.js"></script>
|
|
<script src="js/3las/fallback/formats/3las.formatreader.wav.js"></script>
|
|
<script src="js/3las/util/3las.websocketclient.js"></script>
|
|
<script src="js/3las/fallback/3las.fallback.js"></script>
|
|
<script src="js/3las/3las.webrtc.js"></script>
|
|
<script src="js/3las/3las.js"></script>
|
|
<script src="js/3las/main.js"></script>
|
|
<script type="text/javascript">
|
|
var RtcConfig = {
|
|
|
|
iceServers: [
|
|
{
|
|
urls: "turns:turnserver.example.org",
|
|
},
|
|
{
|
|
urls: "stun.l.google.com:19302"
|
|
}
|
|
]
|
|
|
|
};
|
|
var AudioTagId = "audioTag";
|
|
window.addEventListener('load', Init, false);
|
|
document.ontouchmove = function(e){
|
|
e.preventDefault();
|
|
}
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<audio id="audioTag"></audio>
|
|
<div id="wrapper">
|
|
<canvas id="signal-canvas" width="1240" height="200"></canvas>
|
|
|
|
<div class="flex-container">
|
|
<div class="panel-90 bg-none">
|
|
<div class="flex-container">
|
|
<div class="panel-75 hover-brighten flex-center" id="ps-container" style="height: 90px;">
|
|
<span class="text-big" id="data-ps"></span>
|
|
</div>
|
|
|
|
<div id="flags-container-desktop" class="panel-33">
|
|
<h2 class="show-phone">
|
|
<div class="data-pty" style="color:white;"></div>
|
|
</h2>
|
|
<h3 style="margin-top:0;margin-bottom:0;" class="flex-center">
|
|
<span class="data-tp color-4">TP</span>
|
|
<span style="margin-left: 15px;" class="data-ta color-4">TA</span>
|
|
<div style="display:inline-block">
|
|
<span style="margin-left: 20px;display: block;margin-top: 2px;" class="data-flag"></span>
|
|
</div>
|
|
<span style="margin-left: 20px; color: #ff5776;" class="data-st"></span>
|
|
<span style="margin-left: 15px;" class="data-ms"><span style="color: #ff5776">M</span><span class="text-gray">S</span></span>
|
|
</h3>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex-container">
|
|
<div class="panel-33 hover-brighten" id="pi-code-container">
|
|
<h2>PI CODE</h2>
|
|
<span id="data-pi" class="text-big text-uppercase"></span>
|
|
</div>
|
|
|
|
<div class="panel-33 hover-brighten" id="freq-container">
|
|
<h2>FREQUENCY</h2>
|
|
<span id="data-frequency" class="text-big"></span>
|
|
</div>
|
|
|
|
<div class="panel-33">
|
|
<h2>SIGNAL</h2>
|
|
<span class="text-big">
|
|
<span id="data-signal"></span><!--
|
|
--><span id="data-signal-decimal" class="text-medium-big" style="color: #ccc;"></span>
|
|
<span id="signal-units" class="text-medium">dBf</span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex-container">
|
|
<div class="panel-33 no-bg" style="height: 48px;">
|
|
<div class="flex-container flex-phone h-100">
|
|
<div class="panel-75 no-bg h-100 m-0">
|
|
<button id="playbutton"><i class="fa-solid fa-play"></i></button>
|
|
</div>
|
|
<div class="panel-33 no-bg h-100 m-0 m-left-20">
|
|
<button id="data-eq" style="border-radius: 30px 0px 0px 30px;"><span class="text-bold">EQ</span><br><span class="text-smaller">(IF+)</span></button>
|
|
</div>
|
|
<div class="panel-33 no-bg h-100 m-0">
|
|
<button id="data-ims" style="border-radius: 0px 30px 30px 0px;"><span class="text-bold">iMS</span><br><span class="text-smaller">(RF+)</span></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="panel-33 flex-container flex-phone" id="tune-buttons" style="opacity: 1;">
|
|
<button id="freq-down"><i class="fa-solid fa-chevron-left"></i></button>
|
|
<input type="text" id="commandinput" inputmode="numeric" placeholder="Frequency">
|
|
<button id="freq-up"><i class="fa-solid fa-chevron-right"></i></button>
|
|
</div>
|
|
|
|
<div class="panel-33 hide-phone" style="height: 48px;">
|
|
<input type="range" id="volumeSlider" min="0" max="1" step="0.01" value="1">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex-container">
|
|
<div class="panel-75 hover-brighten" id="rt-container" style="height: 110px;">
|
|
<h2 style="margin: 0;">RADIOTEXT</h2>
|
|
<div id="data-rt0"></div>
|
|
<div id="data-rt1"></div>
|
|
<div id="data-container" style="display: none;"></div>
|
|
</div>
|
|
|
|
<div class="panel-33">
|
|
<h2>
|
|
<div style="color:white;"></div>
|
|
</h2>
|
|
<h3 style="margin-top:0;" class="flex-center">
|
|
</h3>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="panel-10 bg-none">
|
|
<div class="panel-100" style="height: 100%;">
|
|
<h2>AF</h2>
|
|
<div id="af-list" style="text-align: center;">
|
|
<ul>
|
|
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="flags-container-phone" class="panel-33">
|
|
<h2 class="show-phone">
|
|
<div class="data-pty" style="color:white;"></div>
|
|
</h2>
|
|
<h3 style="margin-top:0;margin-bottom:0;" class="flex-center">
|
|
<span class="data-tp color-4">TP</span>
|
|
<span style="margin-left: 15px;" class="data-ta color-4">TA</span>
|
|
<div style="display:inline-block">
|
|
<span style="margin-left: 20px;display: block;margin-top: 2px;" class="data-flag"></span>
|
|
</div>
|
|
<span style="margin-left: 20px; color: #ff5776;" class="data-st"></span>
|
|
<span style="margin-left: 15px;" class="data-ms"><span style="color: #ff5776">M</span><span class="text-gray">S</span></span>
|
|
</h3>
|
|
</div>
|
|
</div>
|
|
|
|
<button id="settings"><i class="fa-solid fa-gear"></i></button>
|
|
|
|
<div id="myModal" class="modal">
|
|
<div class="modal-content">
|
|
<span class="modal-title">Settings</span>
|
|
<span class="close" id="closeModal"><i class="fa-solid fa-xmark"></i></span>
|
|
|
|
<div class="form-group">
|
|
<label for="themes" style="margin-top: 50px;"><i class="fa-solid fa-palette"></i> Theme:</label>
|
|
<select name="themes" style="margin-bottom: 15px;" id="theme-selector">
|
|
<option value="theme1">Monochrome</option>
|
|
<option value="theme2">Red</option>
|
|
<option value="theme3">Green</option>
|
|
<option value="theme4">Cyan</option>
|
|
<option value="theme5">Orange</option>
|
|
<option value="theme6">Pink</option>
|
|
<option value="theme7">Blurple</option>
|
|
<option value="theme8">AMOLED</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="form-group" style="margin-left: 10px;">
|
|
<label for="signal" style="margin-top: 50px;"><i class="fa-solid fa-signal"></i> Signal units:</label>
|
|
<select name="signal" style="margin-bottom: 15px;" id="signal-selector">
|
|
<option value="dbf">dBf</option>
|
|
<option value="dbuv">dBuV</option>
|
|
<option value="dbm">dBm</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="bottom-20">
|
|
<label for="themes"><i class="fa-solid fa-user"></i> Users online:</label>
|
|
<span id="users-online" name="users-online">0</span>
|
|
</div>
|
|
<div class="flex-container flex-left text-left hover-brighten p-10 br-5" onclick="window.open('https://discord.com/invite/ZAVNdS74mC')">
|
|
<i class="fa-brands fa-discord"></i> <span>Join our <strong>OpenRadio Discord</strong> community!</span>
|
|
</div>
|
|
<div class="flex-container flex-left text-left bottom-20 hover-brighten p-10 br-5" onclick="window.open('https://buymeacoffee.com/noobish')">
|
|
<i class="fa-solid fa-hand-holding-medical"></i> <span><strong>Support</strong> the developer!</span>
|
|
</div>
|
|
<p class="text-small">FM-DX WebServer by <a href="https://noobish.eu" target="_blank">Noobish</a> & the OpenRadio community.</p>
|
|
<p class="text-small bottom-50">This app works thanks to these amazing projects: <br>
|
|
<span class="text-smaller">- librdsparser by <a href="https://fmdx.pl" target="_blank">Konrad Kosmatka</a></span><br>
|
|
<span class="text-smaller">- 3LAS by <a href="https://github.com/JoJoBond/3LAS" target="_blank">JoJoBond</a></span><br>
|
|
<span class="text-smaller">- flat-flags by <a href="https://github.com/luishdez/flat-flags/tree/master" target="_blank">luishdez</a></span><br></p>
|
|
<button class="button-close" id="closeModalButton">Close</button>
|
|
</div>
|
|
</div>
|
|
<script src="js/webserver.js"></script>
|
|
</body>
|
|
</html> |