simon/Radioplayer-with-Presets
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

style.css aktualisiert

Browse source 
Richtigen Code eingefügt
This commit is contained in:
simonpipe 2025-04-02 14:05:13 +00:00
parent 7caed0f0e7
commit 72e9865c3c
1 changed files with 175 additions and 180 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

333
style.css
View file

@ -1,191 +1,186 @@
document.addEventListener('DOMContentLoaded', function () { :root {
const presetContainer = document.getElementById('preset-container'); --primary-color: #ff9999;
const stopButton = document.querySelector('.stop-button'); --header-height: 120px;
const currentStationName = document.getElementById('current-station-name'); --padding-top: calc(10px + var(--header-height));
const presetModal = document.getElementById('preset-modal'); --box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
const tableBody = document.querySelector('#sortable-tbody'); }
const editPresetsButton = document.getElementById('edit-presets-button');
let currentSound = null;
let presets = [];
initializeFooter(); body {
loadPresets(); font-family: Arial, sans-serif;
initializeEventListeners(); text-align: center;
margin: 0;
padding: 20px;
padding-top: var(--padding-top);
}
function initializeFooter() { .header {
const currentYear = new Date().getFullYear(); background-color: #FFFFE3;
document.getElementById('current-year').textContent = currentYear; height: var(--header-height);
document.getElementById('server-name').textContent = window.location.hostname; padding-bottom: 10px;
} position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 1000;
box-shadow: var(--box-shadow);
}
function updateTitle(stationName) { .titel {
document.title = stationName ? `${stationName} - Radioplayer mit Presets` : "Radioplayer mit Presets"; display: flex;
} align-items: center;
justify-content: center;
gap: 10px;
}
function initializeEventListeners() { .titel img {
stopButton.addEventListener('click', stopPlayback); height: 30px;
editPresetsButton.addEventListener('click', openModal); width: auto;
} }
async function loadPresets() { .hidden {
presets = JSON.parse(localStorage.getItem('presets')) || []; display: none;
if (presets.length === 0) { }
try {
const response = await fetch('webradio_presets.json');
if (!response.ok) throw new Error('Datei konnte nicht geladen werden');
presets = await response.json();
localStorage.setItem('presets', JSON.stringify(presets));
} catch (error) {
alert('Fehler beim Laden der Presets: ' + error.message);
}
}
displayPresets(presets);
renderPresets();
initSortable();
}
function displayPresets(presets) { .stop-button {
presetContainer.innerHTML = ''; background-color: var(--primary-color);
presets.forEach(preset => addNewPreset(preset.name, preset.url)); color: #fff;
} font-weight: bold;
border: none;
border-radius: 5px;
height: 30px;
padding: 4px 10px;
font-size: 18px;
margin-left: auto;
cursor: pointer;
transition: background-color 0.3s ease;
position: relative;
top: -2px;
}
function addNewPreset(name, url) { .stop-button:focus {
const presetItem = document.createElement('div'); outline: none;
presetItem.classList.add('preset-item'); box-shadow: 0 0 5px rgba(255, 77, 77, 0.75);
presetItem.dataset.streamUrl = url; }
presetItem.innerHTML = `<h3>${name}</h3>`;
presetItem.addEventListener('click', () => playStream(url, presetItem));
presetContainer.appendChild(presetItem);
}
function renderPresets() { .current-station {
tableBody.innerHTML = ''; font-weight: bold;
presets.forEach((preset, index) => { font-size: 16px;
const row = document.createElement('tr'); margin-bottom: 15px;
row.setAttribute('data-index', index); }
row.innerHTML = `
<td class="drag-handle">☰</td>
<td><input type="text" value="${preset.name}" onchange="changeName(${index}, this.value)"></td>
<td><input type="text" value="${preset.url}" onchange="changeURL(${index}, this.value)"></td>
<td><button class="delete-btn" onclick="deletePreset(${index})"><i class="fas fa-trash-alt" style="color:grey"></i></button></td>
`;
tableBody.appendChild(row);
});
}
function playStream(url, item) { #aktueller-sender {
stopPlayback(); background-color: #d2f8d2;
currentSound = new Howl({ border-radius: 5px;
src: [url], padding: 10px 20px;
html5: true, }
volume: 0.5,
onplay: () => {
stopButton.classList.remove('hidden');
updateTitle(item.querySelector('h3').textContent);
currentStationName.textContent = 'Es läuft: ' + item.querySelector('h3').textContent;
},
onstop: () => {
stopButton.classList.add('hidden');
currentStationName.textContent = 'Wähle einen Sender aus';
updateTitle('');
}
});
currentSound.play();
}
function stopPlayback() { .preset-container {
if (currentSound) { display: grid;
currentSound.stop(); grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
currentSound = null; grid-gap: 20px;
} margin: 30px 0;
} }
function openModal() { .preset-item {
presetModal.classList.remove('hidden'); background-color: #f1f1f1;
presetModal.style.display = 'block'; padding: 15px;
renderPresets(); border-radius: 5px;
} box-shadow: var(--box-shadow);
cursor: pointer;
transition: background-color 0.3s ease;
display: flex;
align-items: center;
}
window.closeModal = function() { .preset-item h3 {
presetModal.classList.add('hidden'); margin: 0;
presetModal.style.display = 'none'; flex: 1;
} }
window.addPreset = function() { .preset-item:hover {
presets.push({ name: 'Neuer Sender', url: '' }); background-color: #e6e6e6;
renderPresets(); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
} }
window.changeName = function(index, newName) { .button-container {
presets[index].name = newName; margin-bottom: 5px;
} }
window.changeURL = function(index, newURL) { .footer {
presets[index].url = newURL; display: flex;
} align-items: center;
justify-content: center;
margin: 20px 0;
font-size: 12px;
color: #666;
}
window.deletePreset = function(index) { .footer a {
presets.splice(index, 1); color: #666;
renderPresets(); text-decoration: none;
} }
window.saveAndClose = function() { .footer a:hover {
savePresets(); color: #333;
closeModal(); }
location.reload();
}
function savePresets() { @media (max-width: 600px) {
localStorage.setItem('presets', JSON.stringify(presets)); .preset-container {
grid-template-columns: 1fr;
} }
}
function initSortable() { /* ===== Modal Styles ===== */
const sortable = new Sortable(tableBody, { .modal {
handle: '.drag-handle', position: fixed;
animation: 150, top: 50%;
onEnd: function (evt) { left: 50%;
const newOrder = Array.from(tableBody.children).map(row => parseInt(row.getAttribute('data-index'))); transform: translate(-50%, -50%);
presets = newOrder.map(index => presets[index]); background-color: white;
} padding: 20px;
}); border-radius: 10px;
} box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
z-index: 1000;
max-width: 800px;
width: 90%;
max-height: 80vh;
overflow-y: auto;
display: none;
}
window.exportPreset = function() { .modal-content {
const presetsJSON = JSON.stringify(presets, null, 2); display: flex;
const blob = new Blob([presetsJSON], { type: 'application/json' }); flex-direction: column;
const url = URL.createObjectURL(blob); gap: 20px;
const a = document.createElement('a'); }
a.href = url;
a.download = 'radio_presets.json';
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url);
}
window.importPreset = function() { .modal-content .button-container {
const input = document.createElement('input'); display: flex;
input.type = 'file'; justify-content: center;
input.accept = 'application/json'; gap: 10px;
input.onchange = function(event) { }
const file = event.target.files[0];
if (file) { .modal-content table {
const reader = new FileReader(); width: 100%;
reader.onload = function(e) { border-collapse: collapse;
try { }
const importedPresets = JSON.parse(e.target.result);
presets = importedPresets; .modal-content th,
localStorage.setItem('presets', JSON.stringify(presets)); .modal-content td {
renderPresets(); border: 1px solid #ddd;
displayPresets(presets); padding: 8px;
location.reload(); }
} catch (error) {
alert('Fehler beim Importieren der Presets: Ungültige Datei.'); .modal-content th {
} background-color: #f2f2f2;
}; }
reader.readAsText(file);
} .modal-content .drag-handle {
}; cursor: grab;
input.click(); text-align: center;
} }
});
.modal-content input[type="text"] {
width: 100%;
box-sizing: border-box;
}