hier ist mal extra für deine seite mal ein beischpiel wie die onair boch und nächste sendung angezeigt werden kann
HTML
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>Radio Sendeplan</title>
- <style>
- body {
- font-family: Arial, sans-serif;
- margin: 20px;
- padding: 20px;
- background-color: #121212;
- color: #ffffff;
- }
- h1 {
- text-align: center;
- color: #ff6f61;
- }
- .card {
- margin: 20px auto;
- padding: 20px;
- border: 1px solid #333;
- border-radius: 8px;
- background-color: #1e1e1e;
- box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
- width: 80%;
- max-width: 600px;
- }
- .card h2 {
- margin: 0 0 10px;
- color: #ff6f61;
- }
- .card p {
- margin: 5px 0;
- color: #dddddd;
- }
- .avatar {
- width: 50px;
- height: 50px;
- border-radius: 50%;
- object-fit: cover;
- margin-top: 10px;
- }
- .description {
- margin-top: 10px;
- color: #bbbbbb;
- }
- </style>
- </head>
- <body>
- <h1>Radio Sendeplan Infos</h1>
- <div id="onAir" class="card">
- <h2>On Air</h2>
- <p>Loading...</p>
- </div>
- <div id="nextOnAir" class="card">
- <h2>Next On Air</h2>
- <p>Loading...</p>
- </div>
- <script>
- async function fetchOnAir() {
- const url = "https://sendeplan.rmp-fm.de/index.php?page=infos&mode=json&opt=onair";
- try {
- const response = await fetch(url);
- const data = await response.json();
- const container = document.getElementById("onAir");
- container.innerHTML = `
- <h2>${data.showname || "No Show Name"}</h2>
- <p><strong>Moderator:</strong> ${data.anzeigename || "N/A"}</p>
- <p><strong>Zeit:</strong> ${data.von || "N/A"} - ${data.bis || "N/A"}</p>
- <img src="${data.profil_bild || 'layout/noavatar.png'}" alt="Avatar" class="avatar">
- `;
- } catch (error) {
- console.error("Error fetching On Air data:", error);
- document.getElementById("onAir").innerHTML = `<p>Failed to load On Air data.</p>`;
- }
- }
- async function fetchNextOnAir() {
- const url = "https://sendeplan.rmp-fm.de/index.php?page=infos&mode=json&opt=next_onair";
- try {
- const response = await fetch(url);
- const data = await response.json();
- const container = document.getElementById("nextOnAir");
- const next = data.next || {};
- container.innerHTML = `
- <h2>${next.showname || "No Show Name"}</h2>
- <p><strong>Moderator:</strong> ${next.anzeigename || "N/A"}</p>
- <p><strong>Zeit:</strong> ${next.vons || "N/A"} - ${next.bis || "N/A"}</p>
- <p class="description">${next.beschreibung ? decodeHTMLEntities(next.beschreibung) : "N/A"}</p>
- <p><strong>Aktueller Song:</strong> ${data.currentsong || "N/A"}</p>
- <img src="${next.profil_bild || './uploads/noavatar.png'}" alt="Avatar" class="avatar">
- `;
- } catch (error) {
- console.error("Error fetching Next On Air data:", error);
- document.getElementById("nextOnAir").innerHTML = `<p>Failed to load Next On Air data.</p>`;
- }
- }
- function decodeHTMLEntities(text) {
- const textarea = document.createElement("textarea");
- textarea.innerHTML = text;
- return textarea.value;
- }
- function updateInfos() {
- fetchOnAir();
- fetchNextOnAir();
- }
- // Initial load
- updateInfos();
- // Update every 10 seconds
- setInterval(updateInfos, 10000);
- </script>
- </body>
- </html>
und das kann man mit leichen anpassungen auch in wordpress einfügen mittels den addon "Woody code snippets (PHP snippets | Insert PHP)"
