API tools faq
paste
Advertisement
Guest User

Kod dla radia - 115899

a guest
Jan 30th, 2025
29
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 11.29 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="pl">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.   <title>Radio Internetowe</title>
  7.   <style>
  8.     body {
  9.       margin: 0;
  10.       font-family: Arial, sans-serif;
  11.       background: linear-gradient(to bottom, #1a2a6c, #b21f1f, #fdbb2d);
  12.       color: #fff;
  13.       text-align: center;
  14.     }
  15.  
  16.     header {
  17.       background: #1f1f1f;
  18.       padding: 1rem;
  19.       position: sticky;
  20.       top: 0;
  21.       z-index: 1000;
  22.       display: flex;
  23.       align-items: center;
  24.       justify-content: space-between;
  25.     }
  26.  
  27.     .logo {
  28.       height: 50px;
  29.       margin-left: 1rem;
  30.     }
  31.  
  32.     .menu-icon {
  33.       display: none;
  34.       font-size: 2rem;
  35.       cursor: pointer;
  36.       margin-right: 1rem;
  37.       color: #fff;
  38.     }
  39.  
  40.     nav {
  41.       display: flex;
  42.       justify-content: center;
  43.       gap: 1rem;
  44.     }
  45.  
  46.     nav a {
  47.       color: #fff;
  48.       text-decoration: none;
  49.       font-size: 1rem;
  50.       padding: 0.5rem 1rem;
  51.       border: 1px solid #fff;
  52.       border-radius: 5px;
  53.       transition: background 0.3s, transform 0.2s;
  54.     }
  55.  
  56.     nav a:hover {
  57.       background: #fdbb2d;
  58.       color: #000;
  59.       transform: scale(1.1);
  60.     }
  61.  
  62.     nav.mobile {
  63.       display: none;
  64.       flex-direction: column;
  65.       position: absolute;
  66.       top: 100%;
  67.       left: 0;
  68.       width: 100%;
  69.       background: #1f1f1f;
  70.       z-index: 1001;
  71.     }
  72.  
  73.     nav.mobile a {
  74.       padding: 1rem;
  75.       border: none;
  76.     }
  77.  
  78.     nav.mobile.show {
  79.       display: flex;
  80.     }
  81.  
  82.     section {
  83.       margin: 2rem auto;
  84.       padding: 1.5rem;
  85.       background: rgba(0, 0, 0, 0.5);
  86.       border-radius: 10px;
  87.       width: 90%;
  88.       max-width: 600px;
  89.     }
  90.  
  91.     audio {
  92.       width: 100%;
  93.       outline: none;
  94.       margin-top: 1rem;
  95.     }
  96.  
  97.     .info {
  98.       margin-top: 1rem;
  99.       font-size: 1.2rem;
  100.       font-weight: bold;
  101.       animation: fade-in-out 3s infinite;
  102.     }
  103.  
  104.     .contact-form {
  105.       display: flex;
  106.       flex-direction: column;
  107.       gap: 1rem;
  108.       text-align: left;
  109.     }
  110.  
  111.     .contact-form label {
  112.       font-size: 1rem;
  113.       font-weight: bold;
  114.     }
  115.  
  116.     .contact-form input, .contact-form textarea, .contact-form button {
  117.       width: 100%;
  118.       padding: 0.8rem;
  119.       font-size: 1rem;
  120.       border: none;
  121.       border-radius: 5px;
  122.       box-sizing: border-box;
  123.     }
  124.  
  125.     .contact-form input, .contact-form textarea {
  126.       background: #fff;
  127.       color: #000;
  128.     }
  129.  
  130.     .contact-form button {
  131.       background: #fdbb2d;
  132.       color: #000;
  133.       font-weight: bold;
  134.       cursor: pointer;
  135.       transition: background 0.3s;
  136.     }
  137.  
  138.     .contact-form button:hover {
  139.       background: #e8a922;
  140.     }
  141.  
  142.     .contact-form {
  143.       max-width: 500px;
  144.       margin: auto;
  145.     }
  146.  
  147.     footer {
  148.       margin-top: 2rem;
  149.       padding: 1rem;
  150.       background: #000;
  151.       color: #ccc;
  152.       text-align: center;
  153.     }
  154.  
  155.     @keyframes fade-in-out {
  156.       0% { opacity: 0; }
  157.       50% { opacity: 1; }
  158.       100% { opacity: 0; }
  159.     }
  160.  
  161.     @media (max-width: 768px) {
  162.       .menu-icon {
  163.         display: block;
  164.       }
  165.  
  166.       nav.desktop {
  167.         display: none;
  168.       }
  169.     }
  170.   </style>
  171. </head>
  172. <body>
  173.   <header>
  174.     <img src="logo.png" alt="Logo Radia" class="logo">
  175.     <h1>Radio Internetowe</h1>
  176.     <div class="menu-icon" onclick="toggleMenu()">☰</div>
  177.     <nav class="desktop">
  178.       <a href="#home">Strona główna</a>
  179.       <a href="#about">O nas</a>
  180.       <a href="#schedule">Ramówka</a>
  181.       <a href="#forum">Forum</a>
  182.       <a href="#chat">Czat</a>
  183.       <a href="#contact">Kontakt</a>
  184.     </nav>
  185.     <nav class="mobile" id="mobile-menu">
  186.       <a href="#home">Strona główna</a>
  187.       <a href="#about">O nas</a>
  188.       <a href="#schedule">Ramówka</a>
  189.       <a href="#forum">Forum</a>
  190.       <a href="#chat">Czat</a>
  191.       <a href="#contact">Kontakt</a>
  192.     </nav>
  193.   </header>
  194.  
  195.   <section id="home">
  196.     <h2>Witamy w naszym radiu!</h2>
  197.     <p>Muzyka na każdą okazję, audycje prowadzone przez profesjonalnych DJ-ów.</p>
  198.   </section>
  199.  
  200.   <section id="player">
  201.     <h2>Odtwarzacz</h2>
  202.     <audio controls>
  203.       <source src="https://s1.slotex.pl/shoutcast/7614/stream?sid=1" type="audio/mpeg">
  204.       Twoja przeglądarka nie obsługuje odtwarzacza audio.
  205.     </audio>
  206.     <div class="info">
  207.       <p id="dynamic-info">Ładowanie danych...</p>
  208.     </div>
  209.   </section>
  210.  
  211.   <section id="about">
  212.     <h2>O nas</h2>
  213.     <p>Nasze radio to pasja, profesjonalizm i miłość do muzyki. Dołącz do naszej społeczności i ciesz się najlepszymi audycjami!</p>
  214.   </section>
  215.  
  216.   <section id="schedule">
  217.     <h2>Ramówka</h2>
  218.     <p>Szczegółowy harmonogram audycji dostępny wkrótce.</p>
  219.   </section>
  220.  
  221.   <section id="forum">
  222.     <h2>Forum</h2>
  223.     <p>Wymieniaj się opiniami, poznawaj innych słuchaczy i dziel się pasją do muzyki na naszym forum!</p>
  224.   </section>
  225.  
  226.   <section id="chat">
  227.     <h2>Czat</h2>
  228.     <p>Rozmawiaj na żywo z innymi słuchaczami i prowadzącymi audycje.</p>
  229.   </section>
  230.  
  231.   <section id="contact">
  232.     <h2>Kontakt</h2>
  233.     <form class="contact-form">
  234.       <label for="name">Imię:</label>
  235.       <input type="text" id="name" name="name" placeholder="Twoje imię" required>
  236.  
  237.       <label for="email">Email:</label>
  238.       <input type="email" id="email" name="email" placeholder="Twój email" required>
  239.  
  240.       <label for="message">Wiadomość:</label>
  241.       <textarea id="message" name="message" rows="5" placeholder="Twoja wiadomość" required></textarea>
  242.  
  243.       <button type="submit">Wyślij</button>
  244.     </form>
  245.   </section>
  246.  
  247.   <footer>
  248.     &copy; 2025 Radio Internetowe. Wszystkie prawa zastrzeżone.
  249.   </footer>
  250.  
  251.     <script>
  252.   const shoutcastUrl = "https://s1.slotex.pl/shoutcast/7614/stream?sid=1
  253.  
  254.   const shoutcastUrl = "https://s1.slotex.pl/shoutcast/7614/stream?sid=1
  255.  
  256.   const shoutcastUrl = "http
  257.  
  258.   const shoutcastUrl = "https://s1.slotex.pl/shoutcast/7614/stream?sid=1";
  259.  
  260.   async function updateShoutcastInfo() {
  261.     try {
  262.       const response = await fetch(shoutcastUrl, {
  263.         method: 'GE
  264.  
  265.   const shoutcastUrl = "http://twoja-domena:8000/stats?sid=1";
  266.  
  267.   async function updateShoutcastInfo() {
  268.     try {
  269.       const response = await fetch(shoutcastUrl, {
  270.         method: 'GET',
  271.         mode: 'cors'
  272.       });
  273.  
  274.       if (!response.ok) {
  275.         throw new Error(`HTTP error! status: ${response.status}`);
  276.       }
  277.  
  278.       const text = await response.text();
  279.  
  280.       // Parse XML response (assuming Shoutcast server provides XML stats)
  281.       const parser = new DOMParser();
  282.       const xmlDoc = parser.parseFromString(text, "text/xml
  283.  
  284.   const shoutcastUrl = "https://s1.slotex.pl/shoutcast/7614/stream?sid=1";
  285.  
  286.   async function updateShoutcastInfo() {
  287.     try {
  288.       const response = await fetch(shoutcastUrl, {
  289.         method: 'GET',
  290.         mode: 'cors'
  291.       });
  292.  
  293.       if (!response.ok) {
  294.         throw new Error(`HTTP error! status: ${response.status}`);
  295.       }
  296.  
  297.       const text = await response.text();
  298.  
  299.       // Parse XML response (assuming Shoutcast server provides XML stats)
  300.       const parser = new DOMParser();
  301.       const xmlDoc = parser.parseFromString(text, "text/xml");
  302.  
  303.       const songTitle = xmlDoc.getElementsByTagName("
  304.  
  305.   const shoutcastUrl = "https://s1.slotex.pl/shoutcast/7614/stream?sid=1";
  306.  
  307.   async function updateShoutcastInfo() {
  308.     try {
  309.       const response = await fetch(shoutcastUrl, {
  310.         method: 'GET',
  311.         mode: 'cors'
  312.       });
  313.  
  314.       if (!response.ok) {
  315.         throw new Error(`HTTP error! status: ${response.status}`);
  316.       }
  317.  
  318.       const text = await response.text();
  319.  
  320.       // Parse XML response (assuming Shoutcast server provides XML stats)
  321.       const parser = new DOMParser();
  322.       const xmlDoc = parser.parseFromString(text, "text/xml");
  323.  
  324.       const songTitle = xmlDoc.getElementsByTagName("CURRENTSONG")[0]?.textContent || "Brak danych";
  325.       const listeners = xmlDoc.getElementsByTagName("C
  326.  
  327.   const shoutcastUrl = "https://s1.slotex.pl/shoutcast/7614/stream?sid=1";
  328.  
  329.   async function updateShoutcastInfo() {
  330.     try {
  331.       const response = await fetch(shoutcastUrl, {
  332.         method: 'GET',
  333.         mode: 'cors'
  334.       });
  335.  
  336.       if (!response.ok) {
  337.         throw new Error(`HTTP error! status: ${response.status}`);
  338.       }
  339.  
  340.       const text = await response.text();
  341.  
  342.       // Parse XML response (assuming Shoutcast server provides XML stats)
  343.       const parser = new DOMParser();
  344.       const xmlDoc = parser.parseFromString(text, "text/xml");
  345.  
  346.       const songTitle = xmlDoc.getElementsByTagName("CURRENTSONG")[0]?.textContent || "Brak danych";
  347.       const listeners = xmlDoc.getElementsByTagName("CURRENTLISTENERS")[0]?.textContent || "0";
  348.       const djName = xmlDoc.getElementsByTagName("DJ")[0]?.textContent || "Nieznany prowadzący";
  349.  
  350.       const infoDiv = document.getElementById('dynamic-info
  351.  
  352.   const shoutcastUrl = "https://s1.slotex.pl/shoutcast/7614/stream?sid=1";
  353.  
  354.   async function updateShoutcastInfo() {
  355.     try {
  356.       const response = await fetch(shoutcastUrl, {
  357.         method: 'GET',
  358.         mode: 'cors'
  359.       });
  360.  
  361.       if (!response.ok) {
  362.         throw new Error(`HTTP error! status: ${response.status}`);
  363.       }
  364.  
  365.       const text = await response.text();
  366.  
  367.       // Parse XML response (assuming Shoutcast server provides XML stats)
  368.       const parser = new DOMParser();
  369.       const xmlDoc = parser.parseFromString(text, "text/xml");
  370.  
  371.       const songTitle = xmlDoc.getElementsByTagName("CURRENTSONG")[0]?.textContent || "Brak danych";
  372.       const listeners = xmlDoc.getElementsByTagName("CURRENTLISTENERS")[0]?.textContent || "0";
  373.       const djName = xmlDoc.getElementsByTagName("DJ")[0]?.textContent || "Nieznany prowadzący";
  374.  
  375.       const infoDiv = document.getElementById('dynamic-info');
  376.       infoDiv.innerHTML = `
  377.         <p>Audycja: ${songTitle}</p>
  378.         <p>Słuchacze: ${listeners}</p>
  379.         <p>Prowadzący: ${djName}</p>
  380.       `;
  381.     } catch (error) {
  382.       console.error('Error fetching Shoutcast stats:', error);
  383.       const infoDiv = document.getElementById('dynamic-info');
  384.       infoDiv.textContent = "Błąd w ładowaniu danych.";
  385.     }
  386.   }
  387.  
  388.   // Update Shoutcast info every 15 seconds
  389.   setInterval(updateShoutcastInfo, 15000);
  390.   updateShoutcastInfo(); // Initial fetch
  391. </script>
  392.  
  393.  
  394.   <script>
  395.     // Poprawiony skrypt dla rozwijanego menu
  396.     function toggleMenu() {
  397.         const menu = document.getElementById('mobile-menu');
  398.         menu.classList.toggle('show');
  399.     }
  400.  
  401.     // Pobieranie danych Shoutcast (opcjonalne, tylko przykład do użycia w przyszłości)
  402.     const shoutcastUrl = "https://s1.slotex.pl/shoutcast/7614/stream?sid=1";
  403.     async function fetchShoutcastData() {
  404.         try {
  405.             const response = await fetch(shoutcastUrl);
  406.             const data = await response.json();
  407.             document.getElementById('dynamic-info').innerText = `Audycja: ${data.current_song}, Prowadzący: ${data.dj_name}, Słuchacze: ${data.listeners}`;
  408.         } catch (error) {
  409.             document.getElementById('dynamic-info').innerText = 'Nie można załadować danych.';
  410.         }
  411.     }
  412.  
  413.     // Inicjalizacja danych Shoutcast
  414.     document.addEventListener('DOMContentLoaded', () => {
  415.         fetchShoutcastData();
  416.     });
  417. </script>
  418.    
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!