Spaces:

Ivan000
/

matrix-radio-finder

Running

App Files Files Community

Ivan000 commited on Jun 21

Commit

ecadf7d

verified ·

1 Parent(s): 1e075c2

У тебя не получается ничего исправить поэтому пойдём радикальным путём: просто удали кнопки для сортировки, оставив только поиск и базовую сортировку по порядку, в каком сайт станции и выводит. - Initial Deployment

Browse files

Files changed (2) hide show

README.md +7 -5
index.html +271 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Matrix Radio Finder
-emoji: 📉
-colorFrom: purple
-colorTo: purple
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: matrix-radio-finder
+emoji: 🐳
+colorFrom: pink
+colorTo: red
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,271 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Matrix Radio Finder</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    colors: {
+                        matrix: {
+                            dark: '#001a00',
+                            medium: '#003300',
+                            light: '#00cc00',
+                            bright: '#00ff00',
+                        }
+                    },
+                    fontFamily: {
+                        'mono': ['Courier New', 'monospace'],
+                    }
+                }
+            }
+        }
+    </script>
+    <style>
+        @keyframes flicker {
+            0% { opacity: 0.8; }
+            50% { opacity: 1; }
+            100% { opacity: 0.8; }
+        }
+        .flicker {
+            animation: flicker 3s infinite;
+        }
+        .matrix-bg {
+            background-color: #001a00;
+            background-image:
+                linear-gradient(rgba(0, 80, 0, 0.3) 1px, transparent 1px),
+                linear-gradient(90deg, rgba(0, 80, 0, 0.3) 1px, transparent 1px);
+            background-size: 20px 20px;
+        }
+        .glow-text {
+            text-shadow: 0 0 5px #00ff00;
+        }
+        .glow-box {
+            box-shadow: 0 0 10px #00ff00;
+        }
+        .radio-item:hover {
+            background-color: rgba(0, 80, 0, 0.5);
+            transform: translateX(5px);
+        }
+        .radio-item {
+            transition: all 0.3s ease;
+        }
+        .audio-player {
+            background: linear-gradient(to right, #001a00, #003300, #001a00);
+        }
+        ::-webkit-scrollbar {
+            width: 8px;
+        }
+        ::-webkit-scrollbar-track {
+            background: #001a00;
+        }
+        ::-webkit-scrollbar-thumb {
+            background: #00cc00;
+            border-radius: 4px;
+        }
+        ::-webkit-scrollbar-thumb:hover {
+            background: #00ff00;
+        }
+    </style>
+</head>
+<body class="matrix-bg font-mono text-matrix-light min-h-screen">
+    <div class="container mx-auto px-4 py-8">
+        <!-- Header -->
+        <header class="mb-10 text-center">
+            <h1 class="text-4xl md:text-6xl font-bold glow-text flicker mb-4">MATRIX RADIO FINDER</h1>
+            <p class="text-matrix-bright text-lg">Access the global radio network</p>
+            <div class="w-full max-w-2xl mx-auto mt-6 relative">
+                <input
+                    type="text"
+                    id="searchInput"
+                    placeholder="Search radio stations..."
+                    class="w-full bg-matrix-dark border-2 border-matrix-light text-matrix-light px-4 py-3 rounded-none focus:outline-none focus:border-matrix-bright focus:glow-box"
+                >
+                <button
+                    id="searchBtn"
+                    class="absolute right-0 top-0 h-full bg-matrix-light text-matrix-dark px-4 border-2 border-matrix-light hover:bg-matrix-bright hover:text-matrix-dark transition-all"
+                >
+                    <i class="fas fa-search"></i>
+                </button>
+            </div>
+        </header>
+        <!-- Main Content -->
+        <main>
+            <!-- Now Playing -->
+            <div id="nowPlaying" class="audio-player p-4 mb-8 hidden glow-box">
+                <div class="flex flex-col md:flex-row items-center">
+                    <div class="flex-shrink-0 mb-4 md:mb-0 md:mr-6">
+                        <img id="stationImage" src="https://via.placeholder.com/150x150/001a00/00cc00?text=NO+IMAGE" alt="Station logo" class="w-24 h-24 object-cover border-2 border-matrix-light">
+                    </div>
+                    <div class="flex-grow text-center md:text-left">
+                        <h3 id="stationName" class="text-xl font-bold text-matrix-bright"></h3>
+                        <p id="stationCountry" class="text-matrix-light"></p>
+                        <p id="stationTags" class="text-matrix-light text-sm mt-1"></p>
+                    </div>
+                    <audio id="audioPlayer" controls class="w-full md:w-auto mt-4 md:mt-0">
+                        Your browser does not support the audio element.
+                    </audio>
+                </div>
+            </div>
+            <!-- Results -->
+            <div id="loading" class="text-center py-10 hidden">
+                <div class="inline-block animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-matrix-bright"></div>
+                <p class="mt-4">Accessing radio network...</p>
+            </div>
+            <div id="results" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+                <!-- Results will be inserted here by JavaScript -->
+            </div>
+            <div id="noResults" class="text-center py-10 hidden">
+                <p class="text-xl">No stations found. Try a different search.</p>
+            </div>
+        </main>
+        <!-- Footer -->
+        <footer class="mt-16 text-center text-matrix-light text-sm pb-8">
+            <p class="mb-2">Data provided by <a href="https://www.radio-browser.info/" target="_blank" class="text-matrix-bright hover:underline">Radio Browser API</a></p>
+            <p>© 2023 Matrix Radio Network</p>
+        </footer>
+    </div>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            // Elements
+            const searchInput = document.getElementById('searchInput');
+            const searchBtn = document.getElementById('searchBtn');
+            const resultsContainer = document.getElementById('results');
+            const loadingElement = document.getElementById('loading');
+            const noResultsElement = document.getElementById('noResults');
+            const nowPlayingElement = document.getElementById('nowPlaying');
+            const audioPlayer = document.getElementById('audioPlayer');
+            const stationNameElement = document.getElementById('stationName');
+            const stationCountryElement = document.getElementById('stationCountry');
+            const stationTagsElement = document.getElementById('stationTags');
+            const stationImageElement = document.getElementById('stationImage');
+            // Variables
+            let currentPage = 1;
+            let currentSearchTerm = '';
+            let currentSearchType = 'search';
+            let isLoading = false;
+            // Event Listeners
+            searchBtn.addEventListener('click', performSearch);
+            searchInput.addEventListener('keypress', function(e) {
+                if (e.key === 'Enter') performSearch();
+            });
+            // Functions
+            function performSearch() {
+                currentSearchTerm = searchInput.value.trim();
+                currentPage = 1;
+                currentSearchType = 'search';
+                // Clear previous results
+                resultsContainer.innerHTML = '';
+                noResultsElement.classList.add('hidden');
+                fetchStations();
+            }
+            function fetchStations() {
+                isLoading = true;
+                loadingElement.classList.remove('hidden');
+                let url = `https://de1.api.radio-browser.info/json/stations/search?name=${encodeURIComponent(currentSearchTerm)}&hidebroken=true&limit=12&offset=${(currentPage - 1) * 12}`;
+                fetch(url)
+                    .then(response => response.json())
+                    .then(data => {
+                        loadingElement.classList.add('hidden');
+                        if (data.length === 0 && currentPage === 1) {
+                            noResultsElement.classList.remove('hidden');
+                            return;
+                        }
+                        displayStations(data);
+                    })
+                    .catch(error => {
+                        console.error('Error fetching stations:', error);
+                        loadingElement.classList.add('hidden');
+                        noResultsElement.classList.remove('hidden');
+                    })
+                    .finally(() => {
+                        isLoading = false;
+                    });
+            }
+            function displayStations(stations) {
+                if (stations.length === 0 && currentPage === 1) {
+                    noResultsElement.classList.remove('hidden');
+                    return;
+                }
+                stations.forEach(station => {
+                    const stationElement = document.createElement('div');
+                    stationElement.className = 'radio-item bg-matrix-dark p-4 border border-matrix-medium cursor-pointer';
+                    stationElement.innerHTML = `
+                        <div class="flex items-start">
+                            <div class="flex-shrink-0 mr-4">
+                                <img src="${station.favicon || 'https://via.placeholder.com/100x100/001a00/00cc00?text=NO+IMAGE'}"
+                                     alt="${station.name}"
+                                     class="w-16 h-16 object-cover border border-matrix-light">
+                            </div>
+                            <div>
+                                <h3 class="font-bold text-matrix-bright truncate">${station.name}</h3>
+                                <p class="text-sm text-matrix-light">${station.country || 'Unknown country'}</p>
+                                <p class="text-xs text-matrix-light mt-1">${station.tags ? station.tags.split(',').slice(0, 3).join(', ') : ''}</p>
+                                <div class="flex items-center mt-2 text-xs text-matrix-light">
+                                    <span class="mr-3"><i class="fas fa-heart mr-1"></i> ${station.votes}</span>
+                                    <span><i class="fas fa-headphones mr-1"></i> ${station.clickcount}</span>
+                                </div>
+                            </div>
+                        </div>
+                    `;
+                    stationElement.addEventListener('click', () => playStation(station));
+                    resultsContainer.appendChild(stationElement);
+                });
+            }
+            function playStation(station) {
+                // Update now playing section
+                stationNameElement.textContent = station.name;
+                stationCountryElement.textContent = `${station.country || 'Unknown'} • ${station.language || 'Unknown language'}`;
+                stationTagsElement.textContent = station.tags ? station.tags.split(',').slice(0, 5).join(' • ') : '';
+                stationImageElement.src = station.favicon || 'https://via.placeholder.com/150x150/001a00/00cc00?text=NO+IMAGE';
+                // Set audio source
+                audioPlayer.src = station.url_resolved || station.url;
+                // Show now playing section
+                nowPlayingElement.classList.remove('hidden');
+                // Try to play (some browsers require user interaction first)
+                const playPromise = audioPlayer.play();
+                if (playPromise !== undefined) {
+                    playPromise.catch(error => {
+                        console.log('Playback failed:', error);
+                        // Show play button for user to initiate playback
+                        audioPlayer.controls = true;
+                    });
+                }
+            }
+            // Initial load - show popular stations
+            performSearch();
+        });
+    </script>
+<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Ivan000/matrix-radio-finder" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>