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
142 lines
6.6 KiB
HTML
142 lines
6.6 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">
|
|
</head>
|
|
<body>
|
|
<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: 110px;">
|
|
<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;" class="flex-center">
|
|
<span id="data-tp" class="color-4">TP</span>
|
|
<span style="margin-left: 15px; color: #ff5776;" id="data-st"></span>
|
|
<div style="display:inline-block">
|
|
<span style="margin-left: 18px;display: block;margin-top: 2px;" id="data-flag"></span>
|
|
</div>
|
|
</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;">
|
|
<input type="range" id="volumeSlider" min="0" max="1" step="0.01" value="1">
|
|
</div>
|
|
|
|
<div class="panel-33 flex-container flex-phone" id="tune-buttons" style="opacity: 1;">
|
|
<button id="freq-down">◀</button>
|
|
<input type="text" id="commandinput" inputmode="numeric" placeholder="Frequency">
|
|
<button id="freq-up">▶</button>
|
|
</div>
|
|
|
|
<div class="panel-33" style="height: 48px;">
|
|
<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>
|
|
|
|
<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">Blurple</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">Monochrome</option>
|
|
</select>
|
|
|
|
<div style="margin-bottom: 20px;">
|
|
<label for="themes"><i class="fa-solid fa-user"></i> Users online:</label>
|
|
<span id="users-online" name="users-online">0</span>
|
|
</div>
|
|
<p class="text-small" style="margin-bottom: 50px;">FM-DX WebServer uses librdsparser by <a href="https://fmdx.pl" target="_blank">Konrad Kosmatka</a>.</p>
|
|
<button class="button-close" id="closeModalButton">Close</button>
|
|
</div>
|
|
</div>
|
|
<script src="js/webserver.js"></script>
|
|
</body>
|
|
</html> |