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
Add files via upload
This commit is contained in:
Marek Farkaš
104
web/index.html
Normal file
104
web/index.html
Normal file
@@ -0,0 +1,104 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>FM-DX Webserver [Noobish's Server]</title>
|
||||||
|
<link href="/styles.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">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="wrapper">
|
||||||
|
<canvas id="signal-canvas" width="1024" height="200" style="margin-top: 120px;"></canvas>
|
||||||
|
|
||||||
|
<div class="flex-container">
|
||||||
|
<div class="panel-75" style="height: 110px;">
|
||||||
|
<span class="text-big" id="data-ps"></span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="panel-33">
|
||||||
|
<h2 style="padding-top: 18px;">
|
||||||
|
<span id="data-pty" style="color: #eee;"></span>
|
||||||
|
<span style="margin-left: 30px;" id="data-tp">TP</span>
|
||||||
|
<span style="margin-left: 15px; color: #ff5776;" id="data-st"></span>
|
||||||
|
</h2>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="flex-container">
|
||||||
|
<div class="panel-33">
|
||||||
|
<h2>PI CODE</h2>
|
||||||
|
<span id="data-pi" class="text-big"></span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="panel-33">
|
||||||
|
<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="signal-units" class="text-medium-big">dBf</span>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex-container">
|
||||||
|
<div class="panel-33" style="height: 48px;">
|
||||||
|
<audio id="myAudio" preload="none" autoplay></audio>
|
||||||
|
<input type="range" id="volumeSlider" min="0" max="1" step="0.01" value="1">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="panel-33" style="opacity: 0;">
|
||||||
|
<button id="playButton">play</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="panel-100">
|
||||||
|
<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 id="data-af" style="text-align: center;"></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: 50px;" 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>
|
||||||
|
</select>
|
||||||
|
<p class="text-small" style="margin-bottom: 50px;">FM-DX WebServer uses librds by <a href="https://fmdx.pl" target="_blank">Konrad Kosmatka</a>.</p>
|
||||||
|
<button class="button-close" id="closeModalButton">Close</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<script src="main.js"></script>
|
||||||
|
<script src="themes.js"></script>
|
||||||
|
<script src="modal.js"></script>
|
||||||
|
<script src="stream.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
168
web/main.js
Normal file
168
web/main.js
Normal file
@@ -0,0 +1,168 @@
|
|||||||
|
const hostParts = window.location.host.split(':');
|
||||||
|
const hostname = hostParts[0]; // Extract the hostname
|
||||||
|
const port = hostParts[1] || '8080'; // Extract the port or use a default (e.g., 8080)
|
||||||
|
const socketAddress = `ws://${hostname}:${port}/text`; // Use 'wss' for secure WebSocket connections (recommended for external access)
|
||||||
|
const socket = new WebSocket(socketAddress);
|
||||||
|
|
||||||
|
const dataContainer = document.querySelector('#data-container');
|
||||||
|
const canvas = document.querySelector('#signal-canvas');
|
||||||
|
const context = canvas.getContext('2d');
|
||||||
|
|
||||||
|
var signalToggle = document.getElementById("signal-units-toggle");
|
||||||
|
|
||||||
|
canvas.width = canvas.parentElement.clientWidth;
|
||||||
|
|
||||||
|
const data = [];
|
||||||
|
const maxDataPoints = 250;
|
||||||
|
const pointWidth = (canvas.width - 80) / maxDataPoints;
|
||||||
|
|
||||||
|
var europe_programmes = [
|
||||||
|
"No PTY", "News", "Current Affairs", "Info",
|
||||||
|
"Sport", "Education", "Drama", "Culture", "Science", "Varied",
|
||||||
|
"Pop M", "Rock M", "Easy Listening", "Light Classical",
|
||||||
|
"Serious Classical", "Other Music", "Weather", "Finance",
|
||||||
|
"Children's Programmes", "Social Affairs", "Religion", "Phone-in",
|
||||||
|
"Travel", "Leisure", "Jazz Music", "Country Music", "National Music",
|
||||||
|
"Oldies Music", "Folk Music", "Documentary", "Alarm Test"
|
||||||
|
];
|
||||||
|
|
||||||
|
// Function to handle zoom in
|
||||||
|
function zoomIn() {
|
||||||
|
zoomMinValue *= 0.9;
|
||||||
|
zoomMaxValue *= 0.9;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Function to handle zoom out
|
||||||
|
function zoomOut() {
|
||||||
|
zoomMinValue *= 1.1;
|
||||||
|
zoomMaxValue *= 1.1;
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateCanvas() {
|
||||||
|
// Remove old data when it exceeds the maximum data points
|
||||||
|
|
||||||
|
const color2 = getComputedStyle(document.documentElement).getPropertyValue('--color-2').trim();
|
||||||
|
const color4 = getComputedStyle(document.documentElement).getPropertyValue('--color-4').trim();
|
||||||
|
|
||||||
|
while (data.length >= maxDataPoints) {
|
||||||
|
data.shift();
|
||||||
|
}
|
||||||
|
// Modify the WebSocket onmessage callback
|
||||||
|
socket.onmessage = (event) => {
|
||||||
|
const parsedData = JSON.parse(event.data);
|
||||||
|
|
||||||
|
updatePanels(parsedData);
|
||||||
|
// Push the new signal data to the array
|
||||||
|
data.push(parsedData.signal);
|
||||||
|
const actualLowestValue = Math.min(...data);
|
||||||
|
const actualHighestValue = Math.max(...data);
|
||||||
|
zoomMinValue = actualLowestValue - ((actualHighestValue - actualLowestValue) / 2);
|
||||||
|
zoomMaxValue = actualHighestValue + ((actualHighestValue - actualLowestValue) / 2);
|
||||||
|
zoomAvgValue = (zoomMaxValue - zoomMinValue) / 2 + zoomMinValue;
|
||||||
|
|
||||||
|
// Clear the canvas
|
||||||
|
context.clearRect(0, 0, canvas.width, canvas.height);
|
||||||
|
|
||||||
|
// Draw the signal graph with zoom
|
||||||
|
context.beginPath();
|
||||||
|
context.moveTo(50, canvas.height - (data[0] - zoomMinValue) * (canvas.height / (zoomMaxValue - zoomMinValue)));
|
||||||
|
|
||||||
|
for (let i = 1; i < data.length; i++) {
|
||||||
|
const x = i * pointWidth;
|
||||||
|
const y = canvas.height - (data[i] - zoomMinValue) * (canvas.height / (zoomMaxValue - zoomMinValue));
|
||||||
|
context.lineTo(x + 40, y);
|
||||||
|
}
|
||||||
|
|
||||||
|
context.strokeStyle = color4;
|
||||||
|
context.lineWidth = 1;
|
||||||
|
context.stroke();
|
||||||
|
|
||||||
|
// Draw horizontal lines for lowest, highest, and average values
|
||||||
|
context.strokeStyle = color2; // Set line color
|
||||||
|
context.lineWidth = 1;
|
||||||
|
|
||||||
|
// Draw the lowest value line
|
||||||
|
const lowestY = canvas.height - (zoomMinValue - zoomMinValue) * (canvas.height / (zoomMaxValue - zoomMinValue));
|
||||||
|
context.beginPath();
|
||||||
|
context.moveTo(40, lowestY - 18);
|
||||||
|
context.lineTo(canvas.width - 40, lowestY - 18);
|
||||||
|
context.stroke();
|
||||||
|
|
||||||
|
// Draw the highest value line
|
||||||
|
const highestY = canvas.height - (zoomMaxValue - zoomMinValue) * (canvas.height / (zoomMaxValue - zoomMinValue));
|
||||||
|
context.beginPath();
|
||||||
|
context.moveTo(40, highestY + 10);
|
||||||
|
context.lineTo(canvas.width - 40, highestY + 10);
|
||||||
|
context.stroke();
|
||||||
|
|
||||||
|
const avgY = canvas.height / 2;
|
||||||
|
context.beginPath();
|
||||||
|
context.moveTo(40, avgY - 7);
|
||||||
|
context.lineTo(canvas.width - 40, avgY - 7);
|
||||||
|
context.stroke();
|
||||||
|
|
||||||
|
// Label the lines with their values
|
||||||
|
context.fillStyle = color4;
|
||||||
|
context.font = '12px Titillium Web';
|
||||||
|
|
||||||
|
const offset = signalToggle.checked ? 11.75 : 0;
|
||||||
|
context.textAlign = 'right';
|
||||||
|
context.fillText(`${(zoomMinValue - offset).toFixed(1)}`, 35, lowestY - 14);
|
||||||
|
context.fillText(`${(zoomMaxValue - offset).toFixed(1)}`, 35, highestY + 14);
|
||||||
|
context.fillText(`${(zoomAvgValue - offset).toFixed(1)}`, 35, avgY - 3);
|
||||||
|
|
||||||
|
context.textAlign = 'left';
|
||||||
|
context.fillText(`${(zoomMinValue - offset).toFixed(1)}`, canvas.width - 35, lowestY - 14);
|
||||||
|
context.fillText(`${(zoomMaxValue - offset).toFixed(1)}`, canvas.width - 35, highestY + 14);
|
||||||
|
context.fillText(`${(zoomAvgValue - offset).toFixed(1)}`, canvas.width - 35, avgY - 3);
|
||||||
|
|
||||||
|
// Update the data container with the latest data
|
||||||
|
dataContainer.innerHTML = event.data + '<br>';
|
||||||
|
};
|
||||||
|
|
||||||
|
requestAnimationFrame(updateCanvas);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Start updating the canvas
|
||||||
|
updateCanvas();
|
||||||
|
|
||||||
|
function compareNumbers(a, b) {
|
||||||
|
return a - b;
|
||||||
|
}
|
||||||
|
|
||||||
|
function divideByHundred(a) {
|
||||||
|
a = a / 100;
|
||||||
|
}
|
||||||
|
|
||||||
|
function updatePanels(parsedData) {
|
||||||
|
sortedAf = parsedData.af.sort(compareNumbers);
|
||||||
|
|
||||||
|
sortedAf.forEach((element, index, array) => {
|
||||||
|
array[index] = element / 1000;
|
||||||
|
|
||||||
|
// Check if it's the last element in the array
|
||||||
|
if (index === array.length - 1) {
|
||||||
|
document.querySelector('#data-af').innerHTML = array;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
document.querySelector('#data-frequency').textContent = parsedData.freq;
|
||||||
|
document.querySelector('#data-pi').innerHTML = parsedData.pi === '?' ? "<span class='text-gray'>?</span>" : parsedData.pi;
|
||||||
|
document.querySelector('#data-ps').innerHTML = parsedData.ps === '?' ? "<span class='text-gray'>?</span>" : parsedData.ps;
|
||||||
|
document.querySelector('#data-tp').innerHTML = parsedData.tp === false ? "<span class='text-gray'>TP</span>" : "TP";
|
||||||
|
document.querySelector('#data-pty').innerHTML = europe_programmes[parsedData.pty];
|
||||||
|
document.querySelector('#data-st').innerHTML = parsedData.st === false ? "<span class='text-gray'>ST</span>" : "ST";
|
||||||
|
document.querySelector('#data-rt0').innerHTML = parsedData.rt0;
|
||||||
|
document.querySelector('#data-rt1').innerHTML = parsedData.rt1;
|
||||||
|
document.querySelector('#data-signal').textContent = signalToggle.checked ? (parsedData.signal - 11.75).toFixed(1) : parsedData.signal;
|
||||||
|
}
|
||||||
|
|
||||||
|
signalToggle.addEventListener("change", function() {
|
||||||
|
signalText = document.querySelector('#signal-units');
|
||||||
|
if (signalToggle.checked) {
|
||||||
|
signalText.textContent = 'dBµV';
|
||||||
|
} else {
|
||||||
|
// Checkbox is unchecked
|
||||||
|
signalText.textContent = 'dBf';
|
||||||
|
}
|
||||||
|
});
|
||||||
33
web/modal.js
Normal file
33
web/modal.js
Normal file
@@ -0,0 +1,33 @@
|
|||||||
|
// Get the modal element and the buttons to open and close it
|
||||||
|
var modal = document.getElementById("myModal");
|
||||||
|
var openBtn = document.getElementById("settings");
|
||||||
|
var closeBtn = document.getElementById("closeModal");
|
||||||
|
var closeBtnFull = document.getElementById("closeModalButton");
|
||||||
|
|
||||||
|
// Function to open the modal
|
||||||
|
function openModal() {
|
||||||
|
modal.style.display = "block";
|
||||||
|
setTimeout(function() {
|
||||||
|
modal.style.opacity = 1;
|
||||||
|
}, 10);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Function to close the modal
|
||||||
|
function closeModal() {
|
||||||
|
modal.style.opacity = 0;
|
||||||
|
setTimeout(function() {
|
||||||
|
modal.style.display = "none";
|
||||||
|
}, 300); // This delay should match the transition duration (0.3s).
|
||||||
|
}
|
||||||
|
|
||||||
|
// Event listeners for the open and close buttons
|
||||||
|
openBtn.addEventListener("click", openModal);
|
||||||
|
closeBtn.addEventListener("click", closeModal);
|
||||||
|
closeBtnFull.addEventListener("click", closeModal);
|
||||||
|
|
||||||
|
// Close the modal when clicking outside of it
|
||||||
|
window.addEventListener("click", function(event) {
|
||||||
|
if (event.target == modal) {
|
||||||
|
closeModal();
|
||||||
|
}
|
||||||
|
});
|
||||||
20
web/stream.js
Normal file
20
web/stream.js
Normal file
@@ -0,0 +1,20 @@
|
|||||||
|
const audioElement = document.getElementById("myAudio");
|
||||||
|
const volumeSlider = document.getElementById("volumeSlider");
|
||||||
|
const audioStream = "/audio-proxy";
|
||||||
|
const uniqueTimestamp = Date.now(); // Create a unique timestamp
|
||||||
|
|
||||||
|
const audioContext = new (window.AudioContext || window.webkitAudioContext)();
|
||||||
|
const audioSource = audioContext.createMediaElementSource(audioElement);
|
||||||
|
|
||||||
|
audioSource.connect(audioContext.destination);
|
||||||
|
|
||||||
|
// Set the audio element's source to your external audio stream
|
||||||
|
audioElement.src = `${audioStream}?${uniqueTimestamp}`;
|
||||||
|
|
||||||
|
|
||||||
|
audioElement.play();
|
||||||
|
|
||||||
|
volumeSlider.addEventListener("input", (event) => {
|
||||||
|
event.stopPropagation();
|
||||||
|
audioElement.volume = volumeSlider.value;
|
||||||
|
});
|
||||||
443
web/styles.css
Normal file
443
web/styles.css
Normal file
@@ -0,0 +1,443 @@
|
|||||||
|
@import url('https://fonts.googleapis.com/css2?family=Titillium+Web:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700&display=swap');
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--color-main: #1d1838;
|
||||||
|
--color-main-bright: #8069fa;
|
||||||
|
|
||||||
|
--color-1: color-mix(in srgb, var(--color-main) 95%, var(--color-main-bright));
|
||||||
|
--color-2: color-mix(in srgb, var(--color-main) 75%, var(--color-main-bright));
|
||||||
|
--color-3: color-mix(in srgb, var(--color-main) 50%, var(--color-main-bright));
|
||||||
|
--color-4: color-mix(in srgb, var(--color-main) 20%, var(--color-main-bright));
|
||||||
|
--color-5: color-mix(in srgb, var(--color-main) 0%, var(--color-main-bright));
|
||||||
|
}
|
||||||
|
|
||||||
|
::selection {
|
||||||
|
background: var(--color-main-bright);
|
||||||
|
color: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: 'Titillium Web', sans-serif;
|
||||||
|
color: white;
|
||||||
|
background: var(--color-main);
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
text-decoration: none;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
#data-pi {
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
#wrapper {
|
||||||
|
margin: auto;
|
||||||
|
width: auto;
|
||||||
|
max-width: 1024px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#color-settings, #settings {
|
||||||
|
background: transparent;
|
||||||
|
border: 0;
|
||||||
|
color: white;
|
||||||
|
position: absolute;
|
||||||
|
top: 15px;
|
||||||
|
right: 15px;
|
||||||
|
font-size: 16px;
|
||||||
|
width: 64px;
|
||||||
|
height: 64px;
|
||||||
|
line-height: 64px;
|
||||||
|
text-align: center;
|
||||||
|
border-radius: 50%;
|
||||||
|
transition: 500ms ease-in-out background;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
#color-settings {
|
||||||
|
top: 96px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#settings:hover, #color-settings:hover {
|
||||||
|
background: var(--color-3);
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
color: var(--color-4);
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flex-container {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel-33 {
|
||||||
|
width: 33%;
|
||||||
|
background: var(--color-1);
|
||||||
|
margin-left: 10px;
|
||||||
|
margin-right: 10px;
|
||||||
|
border-radius: 30px;
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel-75 {
|
||||||
|
width: 68%;
|
||||||
|
background: var(--color-1);
|
||||||
|
margin-left: 10px;
|
||||||
|
margin-right: 10px;
|
||||||
|
border-radius: 30px;
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.panel-100 {
|
||||||
|
width: 98%;
|
||||||
|
background: var(--color-1);
|
||||||
|
margin-left: 10px;
|
||||||
|
margin-right: 10px;
|
||||||
|
min-height: 100px;
|
||||||
|
border-radius: 30px;
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.auto {
|
||||||
|
margin: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-big {
|
||||||
|
font-size: 72px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-medium-big {
|
||||||
|
font-size: 24px;
|
||||||
|
color: #aaa;
|
||||||
|
font-weight: 300;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-small {
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-gray {
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bg-dark {
|
||||||
|
background: #100d1f;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
@media only screen and (max-width: 768px) {
|
||||||
|
.flex-container {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.modal-content {
|
||||||
|
max-width: 90%;
|
||||||
|
margin: auto;
|
||||||
|
}
|
||||||
|
.panel-33 {
|
||||||
|
width: 90%;
|
||||||
|
margin: auto;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
.panel-75 {
|
||||||
|
margin: 80px auto 0 auto !important;
|
||||||
|
width: 90%;
|
||||||
|
}
|
||||||
|
.panel-33 h2 {
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
.text-big {
|
||||||
|
font-size: 54px;
|
||||||
|
display: block;
|
||||||
|
margin-top: -50px;
|
||||||
|
}
|
||||||
|
.panel-100 {
|
||||||
|
width: 90%;
|
||||||
|
margin: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="range"] {
|
||||||
|
margin: 0;
|
||||||
|
/* removing default appearance */
|
||||||
|
-webkit-appearance: none;
|
||||||
|
appearance: none;
|
||||||
|
/* creating a custom design */
|
||||||
|
width: 100%;
|
||||||
|
cursor: pointer;
|
||||||
|
outline: none;
|
||||||
|
/* slider progress trick */
|
||||||
|
overflow: hidden;
|
||||||
|
border-radius: 30px;
|
||||||
|
height: 100%;
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Track: Mozilla Firefox */
|
||||||
|
input[type="range"]::-moz-range-track {
|
||||||
|
height: 48px;
|
||||||
|
background: var(--color-1);
|
||||||
|
border-radius: 30px;
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Thumb: webkit */
|
||||||
|
input[type="range"]::-webkit-slider-thumb {
|
||||||
|
/* removing default appearance */
|
||||||
|
-webkit-appearance: none;
|
||||||
|
appearance: none;
|
||||||
|
/* creating a custom design */
|
||||||
|
height: 48px;
|
||||||
|
width: 48px;
|
||||||
|
background-color: #fff;
|
||||||
|
border-radius: 10px;
|
||||||
|
border: 2px solid var(--color-4);
|
||||||
|
/* slider progress trick */
|
||||||
|
box-shadow: -407px 0 0 400px var(--color-4);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Thumb: Firefox */
|
||||||
|
input[type="range"]::-moz-range-thumb {
|
||||||
|
box-sizing: border-box;
|
||||||
|
height: 48px;
|
||||||
|
width: 48px;
|
||||||
|
background-color: var(--color-4);
|
||||||
|
border-radius: 0px 30px 30px 0px;
|
||||||
|
border: 0;
|
||||||
|
outline: none;
|
||||||
|
/* slider progress trick */
|
||||||
|
box-shadow: -420px 0 0 400px var(--color-4);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Toggle Switch */
|
||||||
|
|
||||||
|
.toggleSwitch span span {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toggleSwitch {
|
||||||
|
user-select: none;
|
||||||
|
display: inline-block;
|
||||||
|
height: 48px;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
padding: 0;
|
||||||
|
cursor: pointer;
|
||||||
|
width: 100%;
|
||||||
|
border-radius: 25px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.toggleSwitch * {
|
||||||
|
-webkit-box-sizing: border-box;
|
||||||
|
-moz-box-sizing: border-box;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toggleSwitch input:focus ~ a,
|
||||||
|
.toggleSwitch input:focus + label {
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
.toggleSwitch label {
|
||||||
|
position: relative;
|
||||||
|
z-index: 3;
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.toggleSwitch input {
|
||||||
|
position: absolute;
|
||||||
|
opacity: 0;
|
||||||
|
z-index: 5;
|
||||||
|
}
|
||||||
|
.toggleSwitch > span {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
width: calc(100% - 6px);
|
||||||
|
margin: 0;
|
||||||
|
text-align: left;
|
||||||
|
white-space: nowrap;
|
||||||
|
margin:0;
|
||||||
|
}
|
||||||
|
.toggleSwitch > span span {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
z-index: 5;
|
||||||
|
display: block;
|
||||||
|
width: 50%;
|
||||||
|
margin-left: 50px;
|
||||||
|
text-align: left;
|
||||||
|
font-size: 0.9em;
|
||||||
|
width: auto;
|
||||||
|
opacity: 1;
|
||||||
|
width: 40%;
|
||||||
|
text-align: center;
|
||||||
|
line-height:48px;
|
||||||
|
}
|
||||||
|
.toggleSwitch a {
|
||||||
|
position: absolute;
|
||||||
|
right: 50%;
|
||||||
|
z-index: 4;
|
||||||
|
display: block;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
padding: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 50%;
|
||||||
|
background-color: var(--color-4);
|
||||||
|
border-radius: 25px;
|
||||||
|
-webkit-transition: all 0.2s ease-out;
|
||||||
|
-moz-transition: all 0.2s ease-out;
|
||||||
|
transition: all 0.2s ease-out;
|
||||||
|
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
|
||||||
|
}
|
||||||
|
.toggleSwitch > span span:first-of-type {
|
||||||
|
color: var(--color-1);
|
||||||
|
opacity: 1;
|
||||||
|
left: 0;
|
||||||
|
margin: 0;
|
||||||
|
width: 50%;
|
||||||
|
}
|
||||||
|
.toggleSwitch > span span:last-of-type {
|
||||||
|
left:auto;
|
||||||
|
right:0;
|
||||||
|
color: var(--color-4);
|
||||||
|
margin: 0;
|
||||||
|
width: 50%;
|
||||||
|
}
|
||||||
|
.toggleSwitch > span:before {
|
||||||
|
content: '';
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: -2px;
|
||||||
|
border-radius: 30px;
|
||||||
|
-webkit-transition: all 0.2s ease-out;
|
||||||
|
-moz-transition: all 0.2s ease-out;
|
||||||
|
transition: all 0.2s ease-out;
|
||||||
|
}
|
||||||
|
.toggleSwitch input:checked ~ a {
|
||||||
|
left: calc(50% - 3px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.toggleSwitch input:checked ~ span span:first-of-type {
|
||||||
|
left:0;
|
||||||
|
color: var(--color-4);
|
||||||
|
}
|
||||||
|
.toggleSwitch input:checked ~ span span:last-of-type {
|
||||||
|
color: var(--color-1);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* End Toggle Switch */
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/* Style for the modal container */
|
||||||
|
.modal {
|
||||||
|
display: none;
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-color: rgba(0, 0, 0, 0.6); /* Semi-transparent background */
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity 0.3s ease-in-out; /* Fade-in/out transition */
|
||||||
|
z-index: 20; /* Ensure the modal is above other content */
|
||||||
|
color: var(--color-4);
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Style for the modal content */
|
||||||
|
.modal-content {
|
||||||
|
box-sizing: border-box;
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
background-color: var(--color-main);
|
||||||
|
padding: 30px;
|
||||||
|
border-radius: 30px;
|
||||||
|
opacity: 1;
|
||||||
|
transition: opacity 0.3s ease-in-out; /* Fade-in/out transition */
|
||||||
|
z-index: 21; /* Ensure the modal content is above the modal background */
|
||||||
|
min-width: 500px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-content p {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-title {
|
||||||
|
font-size: 20px;
|
||||||
|
position: absolute;
|
||||||
|
font-weight: 300;
|
||||||
|
top: 14px;
|
||||||
|
left: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Style for the close button */
|
||||||
|
.close {
|
||||||
|
position: absolute;
|
||||||
|
top: 17px;
|
||||||
|
right: 30px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: 0.3s ease-in-out color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.close:hover {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-content .button-close {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 25px;
|
||||||
|
right: 35px;
|
||||||
|
width: 100px;
|
||||||
|
height: 48px;
|
||||||
|
border-radius: 30px;
|
||||||
|
background: var(--color-4);
|
||||||
|
font-weight: bold;
|
||||||
|
border: 0;
|
||||||
|
transition: 0.35s ease-in-out background;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-content .button-close:hover {
|
||||||
|
background: var(--color-5);
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal label {
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: bold;
|
||||||
|
text-transform: uppercase;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.themes-list select {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#theme-selector {
|
||||||
|
height: 42px;
|
||||||
|
width: 150px;
|
||||||
|
padding: 10px;
|
||||||
|
background: var(--color-4);
|
||||||
|
color: var(--color-1);
|
||||||
|
border: 0;
|
||||||
|
border-bottom: 4px solid var(--color-2);
|
||||||
|
cursor: pointer;
|
||||||
|
transition: 0.35s ease-in-out background;
|
||||||
|
}
|
||||||
|
|
||||||
|
#theme-selector:hover {
|
||||||
|
background: var(--color-5);
|
||||||
|
}
|
||||||
49
web/themes.js
Normal file
49
web/themes.js
Normal file
@@ -0,0 +1,49 @@
|
|||||||
|
const themes = {
|
||||||
|
theme1: {
|
||||||
|
'--color-main': '#1d1838',
|
||||||
|
'--color-main-bright': '#8069fa',
|
||||||
|
},
|
||||||
|
theme2: {
|
||||||
|
'--color-main': '#381818',
|
||||||
|
'--color-main-bright': '#ff7070',
|
||||||
|
},
|
||||||
|
theme3: {
|
||||||
|
'--color-main': '#121c0c',
|
||||||
|
'--color-main-bright': '#a9ff70',
|
||||||
|
},
|
||||||
|
theme4: {
|
||||||
|
'--color-main': '#0c1c1b',
|
||||||
|
'--color-main-bright': '#68f7ee',
|
||||||
|
},
|
||||||
|
theme5: {
|
||||||
|
'--color-main': '#171106',
|
||||||
|
'--color-main-bright': '#f5b642',
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
function setTheme(themeName) {
|
||||||
|
const theme = themes[themeName];
|
||||||
|
if (theme) {
|
||||||
|
for (const [variable, value] of Object.entries(theme)) {
|
||||||
|
document.documentElement.style.setProperty(variable, value);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Get the dropdown element
|
||||||
|
const themeSelector = document.getElementById('theme-selector');
|
||||||
|
|
||||||
|
const savedTheme = localStorage.getItem("theme");
|
||||||
|
if(savedTheme) {
|
||||||
|
setTheme(savedTheme);
|
||||||
|
themeSelector.value = savedTheme;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Listen for changes in the dropdown
|
||||||
|
themeSelector.addEventListener('change', (event) => {
|
||||||
|
const selectedTheme = event.target.value;
|
||||||
|
setTheme(selectedTheme);
|
||||||
|
localStorage.setItem("theme", selectedTheme);
|
||||||
|
|
||||||
|
});
|
||||||
Reference in New Issue
Block a user