| <!DOCTYPE html> |
| <html lang="fr"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>RadioWeb - Votre Radio en Ligne</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"> |
| <style> |
| |
| .audio-progress { |
| -webkit-appearance: none; |
| height: 6px; |
| background: #4f46e5; |
| border-radius: 4px; |
| cursor: pointer; |
| } |
| .audio-progress::-webkit-slider-thumb { |
| -webkit-appearance: none; |
| width: 15px; |
| height: 15px; |
| background: white; |
| border-radius: 50%; |
| border: 2px solid #4f46e5; |
| } |
| |
| |
| .equalizer-bar { |
| animation: equalize 1.5s infinite ease-in-out; |
| } |
| .equalizer-bar:nth-child(1) { animation-delay: 0.1s; height: 30%; } |
| .equalizer-bar:nth-child(2) { animation-delay: 0.3s; height: 50%; } |
| .equalizer-bar:nth-child(3) { animation-delay: 0.5s; height: 70%; } |
| .equalizer-bar:nth-child(4) { animation-delay: 0.2s; height: 40%; } |
| .equalizer-bar:nth-child(5) { animation-delay: 0.4s; height: 60%; } |
| |
| @keyframes equalize { |
| 0%, 100% { transform: scaleY(0.5); } |
| 50% { transform: scaleY(1.5); } |
| } |
| |
| |
| .modal-enter { |
| opacity: 0; |
| transform: scale(0.9); |
| } |
| .modal-enter-active { |
| opacity: 1; |
| transform: scale(1); |
| transition: opacity 200ms, transform 200ms; |
| } |
| .modal-exit { |
| opacity: 1; |
| } |
| .modal-exit-active { |
| opacity: 0; |
| transform: scale(0.9); |
| transition: opacity 200ms, transform 200ms; |
| } |
| |
| |
| .dropzone { |
| border: 2px dashed #cbd5e0; |
| transition: all 0.3s ease; |
| } |
| .dropzone.active { |
| border-color: #4f46e5; |
| background-color: #eef2ff; |
| } |
| </style> |
| </head> |
| <body class="bg-gray-100 font-sans"> |
| |
| <header class="bg-indigo-900 text-white shadow-lg"> |
| <div class="container mx-auto px-4 py-4 flex justify-between items-center"> |
| <div class="flex items-center space-x-2"> |
| <i class="fas fa-broadcast-tower text-2xl text-indigo-300"></i> |
| <h1 class="text-2xl font-bold">Radio<span class="text-indigo-300">Web</span></h1> |
| </div> |
| <nav class="hidden md:flex space-x-6"> |
| <a href="#" class="hover:text-indigo-300 transition">Accueil</a> |
| <a href="#" class="hover:text-indigo-300 transition">Émissions</a> |
| <a href="#" class="hover:text-indigo-300 transition">Vidéos</a> |
| <a href="#" class="hover:text-indigo-300 transition">Programmation</a> |
| <a href="#" class="hover:text-indigo-300 transition">Contact</a> |
| </nav> |
| <button class="md:hidden text-xl" id="mobile-menu-button"> |
| <i class="fas fa-bars"></i> |
| </button> |
| </div> |
| |
| |
| <div class="md:hidden hidden bg-indigo-800 px-4 py-2" id="mobile-menu"> |
| <div class="flex flex-col space-y-3"> |
| <a href="#" class="hover:text-indigo-300 transition">Accueil</a> |
| <a href="#" class="hover:text-indigo-300 transition">Émissions</a> |
| <a href="#" class="hover:text-indigo-300 transition">Vidéos</a> |
| <a href="#" class="hover:text-indigo-300 transition">Programmation</a> |
| <a href="#" class="hover:text-indigo-300 transition">Contact</a> |
| </div> |
| </div> |
| </header> |
|
|
| |
| <main class="container mx-auto px-4 py-8"> |
| |
| <section class="bg-white rounded-xl shadow-lg p-6 mb-8"> |
| <div class="flex flex-col md:flex-row items-center"> |
| |
| <div class="w-48 h-48 bg-indigo-100 rounded-lg overflow-hidden mb-4 md:mb-0 md:mr-6 flex-shrink-0"> |
| <img src="https://source.unsplash.com/random/400x400/?music" alt="Now Playing" class="w-full h-full object-cover"> |
| </div> |
| |
| |
| <div class="flex-grow"> |
| <h2 class="text-2xl font-bold text-gray-800">En Direct</h2> |
| <p class="text-indigo-600 font-medium">Émission du jour</p> |
| <p class="text-gray-600 mt-2">Animateur: DJ RadioWeb</p> |
| |
| |
| <div class="flex items-center h-8 space-x-1 mt-4"> |
| <div class="equalizer-bar w-1 bg-indigo-400 rounded-t"></div> |
| <div class="equalizer-bar w-1 bg-indigo-500 rounded-t"></div> |
| <div class="equalizer-bar w-1 bg-indigo-600 rounded-t"></div> |
| <div class="equalizer-bar w-1 bg-indigo-500 rounded-t"></div> |
| <div class="equalizer-bar w-1 bg-indigo-400 rounded-t"></div> |
| </div> |
| |
| |
| <div class="mt-6"> |
| <div class="flex items-center justify-between mb-2"> |
| <span class="text-sm text-gray-500">0:45</span> |
| <input type="range" min="0" max="100" value="30" class="audio-progress flex-grow mx-4"> |
| <span class="text-sm text-gray-500">3:22</span> |
| </div> |
| |
| <div class="flex items-center justify-center space-x-8"> |
| <button class="text-gray-500 hover:text-indigo-600 transition"> |
| <i class="fas fa-step-backward text-2xl"></i> |
| </button> |
| <button class="bg-indigo-600 text-white rounded-full w-12 h-12 flex items-center justify-center hover:bg-indigo-700 transition"> |
| <i class="fas fa-pause text-xl"></i> |
| </button> |
| <button class="text-gray-500 hover:text-indigo-600 transition"> |
| <i class="fas fa-step-forward text-2xl"></i> |
| </button> |
| <button class="text-gray-500 hover:text-indigo-600 transition"> |
| <i class="fas fa-volume-up text-xl"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="bg-white rounded-xl shadow-lg p-6 mb-8"> |
| <div class="flex justify-between items-center mb-6"> |
| <h2 class="text-2xl font-bold text-gray-800">Mes Vidéos</h2> |
| <button id="upload-btn" class="bg-indigo-600 text-white px-4 py-2 rounded-lg hover:bg-indigo-700 transition flex items-center"> |
| <i class="fas fa-upload mr-2"></i> Uploader une vidéo |
| </button> |
| </div> |
| |
| |
| <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6"> |
| |
| <div class="bg-gray-50 rounded-lg overflow-hidden shadow"> |
| <div class="relative pt-[56.25%] bg-black"> |
| <img src="https://source.unsplash.com/random/600x400/?concert" alt="Video thumbnail" class="absolute inset-0 w-full h-full object-cover"> |
| <div class="absolute inset-0 flex items-center justify-center"> |
| <button class="bg-indigo-600 bg-opacity-80 text-white rounded-full w-12 h-12 flex items-center justify-center hover:bg-opacity-100 transition"> |
| <i class="fas fa-play"></i> |
| </button> |
| </div> |
| <span class="absolute bottom-2 right-2 bg-black bg-opacity-70 text-white text-xs px-2 py-1 rounded">12:34</span> |
| </div> |
| <div class="p-4"> |
| <h3 class="font-semibold text-lg mb-1">Concert Live - Juin 2023</h3> |
| <p class="text-gray-600 text-sm">Publié le 15/06/2023</p> |
| <div class="flex justify-between items-center mt-3"> |
| <span class="text-sm text-gray-500 flex items-center"> |
| <i class="fas fa-eye mr-1"></i> 1.2K vues |
| </span> |
| <div class="flex space-x-2"> |
| <button class="text-gray-500 hover:text-indigo-600 transition"> |
| <i class="fas fa-edit"></i> |
| </button> |
| <button class="text-gray-500 hover:text-red-600 transition"> |
| <i class="fas fa-trash"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="bg-gray-50 rounded-lg overflow-hidden shadow"> |
| <div class="relative pt-[56.25%] bg-black"> |
| <img src="https://source.unsplash.com/random/600x400/?interview" alt="Video thumbnail" class="absolute inset-0 w-full h-full object-cover"> |
| <div class="absolute inset-0 flex items-center justify-center"> |
| <button class="bg-indigo-600 bg-opacity-80 text-white rounded-full w-12 h-12 flex items-center justify-center hover:bg-opacity-100 transition"> |
| <i class="fas fa-play"></i> |
| </button> |
| </div> |
| <span class="absolute bottom-2 right-2 bg-black bg-opacity-70 text-white text-xs px-2 py-1 rounded">24:15</span> |
| </div> |
| <div class="p-4"> |
| <h3 class="font-semibold text-lg mb-1">Interview avec l'artiste</h3> |
| <p class="text-gray-600 text-sm">Publié le 10/06/2023</p> |
| <div class="flex justify-between items-center mt-3"> |
| <span class="text-sm text-gray-500 flex items-center"> |
| <i class="fas fa-eye mr-1"></i> 856 vues |
| </span> |
| <div class="flex space-x-2"> |
| <button class="text-gray-500 hover:text-indigo-600 transition"> |
| <i class="fas fa-edit"></i> |
| </button> |
| <button class="text-gray-500 hover:text-red-600 transition"> |
| <i class="fas fa-trash"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="bg-gray-50 rounded-lg overflow-hidden shadow"> |
| <div class="relative pt-[56.25%] bg-black"> |
| <img src="https://source.unsplash.com/random/600x400/?studio" alt="Video thumbnail" class="absolute inset-0 w-full h-full object-cover"> |
| <div class="absolute inset-0 flex items-center justify-center"> |
| <button class="bg-indigo-600 bg-opacity-80 text-white rounded-full w-12 h-12 flex items-center justify-center hover:bg-opacity-100 transition"> |
| <i class="fas fa-play"></i> |
| </button> |
| </div> |
| <span class="absolute bottom-2 right-2 bg-black bg-opacity-70 text-white text-xs px-2 py-1 rounded">8:42</span> |
| </div> |
| <div class="p-4"> |
| <h3 class="font-semibold text-lg mb-1">Session en studio</h3> |
| <p class="text-gray-600 text-sm">Publié le 05/06/2023</p> |
| <div class="flex justify-between items-center mt-3"> |
| <span class="text-sm text-gray-500 flex items-center"> |
| <i class="fas fa-eye mr-1"></i> 1.5K vues |
| </span> |
| <div class="flex space-x-2"> |
| <button class="text-gray-500 hover:text-indigo-600 transition"> |
| <i class="fas fa-edit"></i> |
| </button> |
| <button class="text-gray-500 hover:text-red-600 transition"> |
| <i class="fas fa-trash"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="bg-white rounded-xl shadow-lg p-6"> |
| <h2 class="text-2xl font-bold text-gray-800 mb-6">Programme de la semaine</h2> |
| |
| <div class="overflow-x-auto"> |
| <table class="w-full"> |
| <thead class="bg-indigo-50 text-indigo-800"> |
| <tr> |
| <th class="px-4 py-3 text-left rounded-tl-lg">Heure</th> |
| <th class="px-4 py-3 text-left">Lundi</th> |
| <th class="px-4 py-3 text-left">Mardi</th> |
| <th class="px-4 py-3 text-left">Mercredi</th> |
| <th class="px-4 py-3 text-left">Jeudi</th> |
| <th class="px-4 py-3 text-left rounded-tr-lg">Vendredi</th> |
| </tr> |
| </thead> |
| <tbody> |
| <tr class="border-b border-gray-100"> |
| <td class="px-4 py-3 font-medium">08:00 - 10:00</td> |
| <td class="px-4 py-3">Morning Show</td> |
| <td class="px-4 py-3">Morning Show</td> |
| <td class="px-4 py-3">Morning Show</td> |
| <td class="px-4 py-3">Morning Show</td> |
| <td class="px-4 py-3">Morning Show</td> |
| </tr> |
| <tr class="border-b border-gray-100"> |
| <td class="px-4 py-3 font-medium">10:00 - 12:00</td> |
| <td class="px-4 py-3">Hit Music</td> |
| <td class="px-4 py-3">Classic Rock</td> |
| <td class="px-4 py-3">Jazz Hour</td> |
| <td class="px-4 py-3">Pop Culture</td> |
| <td class="px-4 py-3">Top 40</td> |
| </tr> |
| <tr class="border-b border-gray-100"> |
| <td class="px-4 py-3 font-medium">12:00 - 14:00</td> |
| <td class="px-4 py-3">Lunch Break</td> |
| <td class="px-4 py-3">Lunch Break</td> |
| <td class="px-4 py-3">Lunch Break</td> |
| <td class="px-4 py-3">Lunch Break</td> |
| <td class="px-4 py-3">Lunch Break</td> |
| </tr> |
| <tr> |
| <td class="px-4 py-3 font-medium">14:00 - 18:00</td> |
| <td class="px-4 py-3">Afternoon Mix</td> |
| <td class="px-4 py-3">Afternoon Mix</td> |
| <td class="px-4 py-3">Live Session</td> |
| <td class="px-4 py-3">Afternoon Mix</td> |
| <td class="px-4 py-3">Weekend Warmup</td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| </section> |
| </main> |
|
|
| |
| <div id="upload-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden"> |
| <div class="bg-white rounded-lg shadow-xl w-full max-w-2xl"> |
| <div class="flex justify-between items-center border-b px-6 py-4"> |
| <h3 class="text-xl font-semibold">Uploader une vidéo</h3> |
| <button id="close-modal" class="text-gray-500 hover:text-gray-700"> |
| <i class="fas fa-times"></i> |
| </button> |
| </div> |
| |
| <div class="p-6"> |
| <form id="upload-form"> |
| <div class="mb-4"> |
| <label class="block text-gray-700 mb-2" for="video-title">Titre de la vidéo</label> |
| <input type="text" id="video-title" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"> |
| </div> |
| |
| <div class="mb-4"> |
| <label class="block text-gray-700 mb-2" for="video-description">Description</label> |
| <textarea id="video-description" rows="3" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"></textarea> |
| </div> |
| |
| <div class="mb-6"> |
| <label class="block text-gray-700 mb-2">Fichier vidéo</label> |
| <div id="dropzone" class="dropzone border-2 border-dashed rounded-lg p-8 text-center cursor-pointer"> |
| <div class="flex flex-col items-center justify-center"> |
| <i class="fas fa-cloud-upload-alt text-4xl text-indigo-500 mb-3"></i> |
| <p class="text-gray-600">Glissez-déposez votre fichier vidéo ici ou cliquez pour sélectionner</p> |
| <p class="text-sm text-gray-500 mt-2">Formats supportés: MP4, MOV, AVI (Max 500MB)</p> |
| </div> |
| <input type="file" id="video-file" class="hidden" accept="video/mp4,video/x-m4v,video/*"> |
| </div> |
| <div id="file-info" class="mt-2 text-sm text-gray-600 hidden"> |
| <span id="file-name"></span> (<span id="file-size"></span>) |
| </div> |
| </div> |
| |
| <div class="flex justify-end space-x-3"> |
| <button type="button" id="cancel-upload" class="px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 transition">Annuler</button> |
| <button type="submit" class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition flex items-center"> |
| <i class="fas fa-upload mr-2"></i> Uploader |
| </button> |
| </div> |
| </form> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <footer class="bg-gray-800 text-white py-8"> |
| <div class="container mx-auto px-4"> |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> |
| <div> |
| <h3 class="text-xl font-bold mb-4 flex items-center"> |
| <i class="fas fa-broadcast-tower text-indigo-400 mr-2"></i> RadioWeb |
| </h3> |
| <p class="text-gray-400">Votre radio en ligne préférée, diffusant les meilleurs contenus musicaux et vidéos 24h/24.</p> |
| <div class="flex space-x-4 mt-4"> |
| <a href="#" class="text-gray-400 hover:text-white transition"> |
| <i class="fab fa-facebook-f"></i> |
| </a> |
| <a href="#" class="text-gray-400 hover:text-white transition"> |
| <i class="fab fa-twitter"></i> |
| </a> |
| <a href="#" class="text-gray-400 hover:text-white transition"> |
| <i class="fab fa-instagram"></i> |
| </a> |
| <a href="#" class="text-gray-400 hover:text-white transition"> |
| <i class="fab fa-youtube"></i> |
| </a> |
| </div> |
| </div> |
| |
| <div> |
| <h3 class="text-xl font-bold mb-4">Liens rapides</h3> |
| <ul class="space-y-2"> |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Accueil</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Émissions</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Vidéos</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Programmation</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Contact</a></li> |
| </ul> |
| </div> |
| |
| <div> |
| <h3 class="text-xl font-bold mb-4">Contact</h3> |
| <ul class="space-y-2 text-gray-400"> |
| <li class="flex items-center"> |
| <i class="fas fa-map-marker-alt mr-2 text-indigo-400"></i> 123 Rue de la Radio, Paris |
| </li> |
| <li class="flex items-center"> |
| <i class="fas fa-phone mr-2 text-indigo-400"></i> +33 1 23 45 67 89 |
| </li> |
| <li class="flex items-center"> |
| <i class="fas fa-envelope mr-2 text-indigo-400"></i> contact@radioweb.fr |
| </li> |
| </ul> |
| </div> |
| </div> |
| |
| <div class="border-t border-gray-700 mt-8 pt-6 text-center text-gray-400"> |
| <p>© 2023 RadioWeb. Tous droits réservés.</p> |
| </div> |
| </div> |
| </footer> |
|
|
| <script> |
| |
| document.getElementById('mobile-menu-button').addEventListener('click', function() { |
| const menu = document.getElementById('mobile-menu'); |
| menu.classList.toggle('hidden'); |
| }); |
| |
| |
| const uploadBtn = document.getElementById('upload-btn'); |
| const uploadModal = document.getElementById('upload-modal'); |
| const closeModal = document.getElementById('close-modal'); |
| const cancelUpload = document.getElementById('cancel-upload'); |
| const dropzone = document.getElementById('dropzone'); |
| const fileInput = document.getElementById('video-file'); |
| const fileInfo = document.getElementById('file-info'); |
| const fileName = document.getElementById('file-name'); |
| const fileSize = document.getElementById('file-size'); |
| |
| |
| uploadBtn.addEventListener('click', function() { |
| uploadModal.classList.remove('hidden'); |
| }); |
| |
| |
| function hideModal() { |
| uploadModal.classList.add('hidden'); |
| } |
| |
| closeModal.addEventListener('click', hideModal); |
| cancelUpload.addEventListener('click', hideModal); |
| |
| |
| fileInput.addEventListener('change', function(e) { |
| if (e.target.files.length > 0) { |
| const file = e.target.files[0]; |
| displayFileInfo(file); |
| } |
| }); |
| |
| |
| ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => { |
| dropzone.addEventListener(eventName, preventDefaults, false); |
| }); |
| |
| function preventDefaults(e) { |
| e.preventDefault(); |
| e.stopPropagation(); |
| } |
| |
| ['dragenter', 'dragover'].forEach(eventName => { |
| dropzone.addEventListener(eventName, highlight, false); |
| }); |
| |
| ['dragleave', 'drop'].forEach(eventName => { |
| dropzone.addEventListener(eventName, unhighlight, false); |
| }); |
| |
| function highlight() { |
| dropzone.classList.add('active'); |
| } |
| |
| function unhighlight() { |
| dropzone.classList.remove('active'); |
| } |
| |
| dropzone.addEventListener('drop', handleDrop, false); |
| |
| function handleDrop(e) { |
| const dt = e.dataTransfer; |
| const files = dt.files; |
| |
| if (files.length > 0) { |
| fileInput.files = files; |
| displayFileInfo(files[0]); |
| } |
| } |
| |
| function displayFileInfo(file) { |
| fileName.textContent = file.name; |
| |
| |
| const sizeInMB = (file.size / (1024 * 1024)).toFixed(2); |
| fileSize.textContent = `${sizeInMB} MB`; |
| |
| fileInfo.classList.remove('hidden'); |
| } |
| |
| |
| document.getElementById('upload-form').addEventListener('submit', function(e) { |
| e.preventDefault(); |
| |
| |
| |
| |
| const title = document.getElementById('video-title').value; |
| alert(`Vidéo "${title}" uploadée avec succès!`); |
| |
| |
| this.reset(); |
| fileInfo.classList.add('hidden'); |
| hideModal(); |
| }); |
| |
| |
| setInterval(function() { |
| const progress = document.querySelector('.audio-progress'); |
| let value = parseInt(progress.value); |
| if (value < 100) { |
| progress.value = value + 1; |
| } else { |
| progress.value = 0; |
| } |
| }, 1000); |
| </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=Gonfrist8/afro-flow" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
