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
Files
fb31afb9a76063ba1dfad5e7d5e35fb0a2e076db
fm-dx-webserver/web/index.html
NoobishSVK fb31afb9a7 cleanup + RDS features
2024-01-27 23:00:44 +01:00

199 lines
9.8 KiB
HTML
Raw Blame History

<!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 class="panel-33">
<h2>
<div id="data-pty" style="color:white;"></div>
</h2>
<h3 style="margin-top:0;margin-bottom:0;" class="flex-center">
<span id="data-tp" class="color-4">TP</span>
<span style="margin-left: 15px;" id="data-ta" class="color-4">TA</span>
<div style="display:inline-block">
<span style="margin-left: 20px;display: block;margin-top: 2px;" id="data-flag"></span>
</div>
<span style="margin-left: 20px; color: #ff5776;" id="data-st"></span>
<span style="margin-left: 15px;" id="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" style="height: 48px;">
<button id="playbutton" class="play-button"><i class="fa-solid fa-play"></i></button>
</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" style="height: 48px;">
<input type="range" id="volumeSlider" min="0" max="1" step="0.01" value="1">
<!--<label class="toggleSwitch nolabel" onclick="">
<input id="signal-units-toggle" type="checkbox"/>
<a></a>
<span>
<span class="left-span">dBf</span>
<span class="right-span">dBµV</span>
</span>
</label>-->
</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 id="data-pty" 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>
<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>&nbsp;<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>&nbsp;<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>
View Git Blame Copy Permalink