Hugging Face's logo

Spaces:
Gonfrist8
/
afro-flow
Running

App Files Community
afro-flow / index.html
Gonfrist8's picture
Gonfrist8
fait une site pour une radio web ou je vais pouvoir uplaod mes videos - Initial Deployment
3543abc verified
raw
history blame contribute delete
27.6 kB
 <!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>
/* Custom CSS for the audio player */
.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;
}
/* Custom animation for the equalizer */
.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); }
}
/* Upload modal animation */
.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;
}
/* Drag and drop area */
.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 -->
<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>
<!-- Mobile menu -->
<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 Content -->
<main class="container mx-auto px-4 py-8">
<!-- Player Section -->
<section class="bg-white rounded-xl shadow-lg p-6 mb-8">
<div class="flex flex-col md:flex-row items-center">
<!-- Album Art -->
<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>
<!-- Player Info -->
<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>
<!-- Equalizer -->
<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>
<!-- Player Controls -->
<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>
<!-- Video Upload 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>
<!-- Video Grid -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Video Card 1 -->
<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>
<!-- Video Card 2 -->
<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>
<!-- Video Card 3 -->
<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>
<!-- Schedule 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>
<!-- Upload Modal -->
<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 -->
<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>&copy; 2023 RadioWeb. Tous droits réservés.</p>
</div>
</div>
</footer>
<script>
// Mobile menu toggle
document.getElementById('mobile-menu-button').addEventListener('click', function() {
const menu = document.getElementById('mobile-menu');
menu.classList.toggle('hidden');
});
// Upload modal functionality
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');
// Show modal
uploadBtn.addEventListener('click', function() {
uploadModal.classList.remove('hidden');
});
// Hide modal
function hideModal() {
uploadModal.classList.add('hidden');
}
closeModal.addEventListener('click', hideModal);
cancelUpload.addEventListener('click', hideModal);
// Handle file selection
fileInput.addEventListener('change', function(e) {
if (e.target.files.length > 0) {
const file = e.target.files[0];
displayFileInfo(file);
}
});
// Drag and drop functionality
['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;
// Format file size
const sizeInMB = (file.size / (1024 * 1024)).toFixed(2);
fileSize.textContent = `${sizeInMB} MB`;
fileInfo.classList.remove('hidden');
}
// Form submission
document.getElementById('upload-form').addEventListener('submit', function(e) {
e.preventDefault();
// Here you would normally handle the file upload with AJAX
// For this example, we'll just show an alert and close the modal
const title = document.getElementById('video-title').value;
alert(`Vidéo "${title}" uploadée avec succès!`);
// Reset form and hide modal
this.reset();
fileInfo.classList.add('hidden');
hideModal();
});
// Simulate audio player progress
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>