|
|
<!DOCTYPE html> |
|
|
<html lang="fr"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Live Vidéo - Système de Partage</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> |
|
|
.video-box { |
|
|
aspect-ratio: 16/9; |
|
|
} |
|
|
|
|
|
video { |
|
|
background-color: #222; |
|
|
} |
|
|
|
|
|
.username { |
|
|
background-color: rgba(0, 0, 0, 0.5); |
|
|
} |
|
|
|
|
|
.status-indicator { |
|
|
width: 10px; |
|
|
height: 10px; |
|
|
} |
|
|
|
|
|
.modal { |
|
|
background-color: rgba(0, 0, 0, 0.5); |
|
|
} |
|
|
|
|
|
@keyframes fadeIn { |
|
|
from { opacity: 0; transform: translateY(-20px); } |
|
|
to { opacity: 1; transform: translateY(0); } |
|
|
} |
|
|
|
|
|
.animate-fade-in { |
|
|
animation: fadeIn 0.3s ease-out forwards; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-100 font-sans antialiased"> |
|
|
<div class="container mx-auto px-4 py-8 max-w-6xl"> |
|
|
<div class="text-center mb-10"> |
|
|
<h1 class="text-4xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent"> |
|
|
<i class="fas fa-video mr-2"></i>Plateforme de Live Vidéo |
|
|
</h1> |
|
|
<p class="text-gray-600 mt-2">Connectez-vous et partagez des moments en direct</p> |
|
|
</div> |
|
|
|
|
|
<div class="space-y-6"> |
|
|
|
|
|
<div id="login-section" class="bg-white rounded-xl shadow-lg p-6"> |
|
|
<h2 class="text-2xl font-semibold text-gray-800 mb-6 flex items-center"> |
|
|
<i class="fas fa-door-open text-blue-500 mr-2"></i>Rejoindre ou créer un live |
|
|
</h2> |
|
|
|
|
|
<div class="space-y-4"> |
|
|
<div> |
|
|
<label for="username" class="block text-sm font-medium text-gray-700 mb-1"> |
|
|
<i class="fas fa-user text-blue-500 mr-1"></i>Votre nom |
|
|
</label> |
|
|
<input type="text" id="username" placeholder="Entrez votre nom" required |
|
|
class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition"> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label for="room-code" class="block text-sm font-medium text-gray-700 mb-1"> |
|
|
<i class="fas fa-key text-blue-500 mr-1"></i>Code de la salle |
|
|
</label> |
|
|
<div class="flex space-x-2"> |
|
|
<input type="text" id="room-code" placeholder="Entrez le code de la salle" value="a234" |
|
|
class="flex-1 px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition"> |
|
|
<button id="join-btn" class="px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition flex items-center"> |
|
|
<i class="fas fa-sign-in-alt mr-2"></i>Rejoindre |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="pt-2"> |
|
|
<button id="create-btn" class="w-full px-6 py-3 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition flex items-center justify-center"> |
|
|
<i class="fas fa-plus-circle mr-2"></i>Créer un nouveau live |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="video-section" class="hidden bg-white rounded-xl shadow-lg p-6"> |
|
|
<div class="flex justify-between items-center mb-6"> |
|
|
<h2 class="text-2xl font-semibold text-gray-800 flex items-center"> |
|
|
<i class="fas fa-video text-blue-500 mr-2"></i> |
|
|
Live en cours: <span id="room-display" class="ml-2 bg-blue-100 text-blue-800 px-3 py-1 rounded-full">a234</span> |
|
|
</h2> |
|
|
<div id="participant-count" class="flex items-center text-gray-600"> |
|
|
<i class="fas fa-users mr-2"></i> |
|
|
<span>1 participant</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="videos" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"> |
|
|
<div class="video-box relative rounded-xl overflow-hidden"> |
|
|
<video id="local-video" autoplay muted playsinline class="w-full h-full object-cover"></video> |
|
|
<div class="username absolute bottom-3 left-3 text-white px-3 py-1 rounded-lg text-sm"> |
|
|
<i class="fas fa-user-circle mr-1"></i>Vous |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="mt-6 flex flex-wrap gap-3 justify-between items-center"> |
|
|
<div class="flex flex-wrap gap-3"> |
|
|
<button id="toggle-video" class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition flex items-center"> |
|
|
<i class="fas fa-video mr-2"></i>Désactiver vidéo |
|
|
</button> |
|
|
<button id="toggle-audio" class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition flex items-center"> |
|
|
<i class="fas fa-microphone mr-2"></i>Désactiver audio |
|
|
</button> |
|
|
<button id="share-screen" class="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition flex items-center"> |
|
|
<i class="fas fa-desktop mr-2"></i>Partager écran |
|
|
</button> |
|
|
</div> |
|
|
<button id="leave-btn" class="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition flex items-center"> |
|
|
<i class="fas fa-sign-out-alt mr-2"></i>Quitter |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="host-controls" class="hidden bg-white rounded-xl shadow-lg p-6"> |
|
|
<h2 class="text-2xl font-semibold text-gray-800 mb-6 flex items-center"> |
|
|
<i class="fas fa-cogs text-purple-500 mr-2"></i>Contrôles du live |
|
|
</h2> |
|
|
|
|
|
<div class="space-y-6"> |
|
|
<div> |
|
|
<h3 class="text-lg font-medium text-gray-700 mb-2 flex items-center"> |
|
|
<i class="fas fa-link text-blue-500 mr-2"></i>Lien d'invitation |
|
|
</h3> |
|
|
<div class="flex"> |
|
|
<input type="text" id="invite-link" readonly |
|
|
class="flex-1 px-4 py-3 rounded-l-lg border border-gray-300 bg-gray-50"> |
|
|
<button id="copy-btn" class="px-4 py-3 bg-blue-600 text-white rounded-r-lg hover:bg-blue-700 transition flex items-center"> |
|
|
<i class="fas fa-copy mr-2"></i>Copier |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h3 class="text-lg font-medium text-gray-700 mb-2 flex items-center"> |
|
|
<i class="fas fa-users text-purple-500 mr-2"></i>Participants |
|
|
</h3> |
|
|
<div id="participant-list" class="bg-gray-50 rounded-lg p-4 max-h-60 overflow-y-auto space-y-2"> |
|
|
<div class="flex items-center p-2 bg-white rounded-lg shadow-sm"> |
|
|
<span class="status-indicator rounded-full bg-blue-500 mr-3"></span> |
|
|
<span>Vous (hôte)</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="create-room-modal" class="modal hidden fixed inset-0 flex items-center justify-center z-50"> |
|
|
<div class="bg-white rounded-xl shadow-2xl p-6 w-full max-w-md animate-fade-in"> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<h3 class="text-xl font-semibold text-gray-800 flex items-center"> |
|
|
<i class="fas fa-plus-circle text-purple-500 mr-2"></i>Créer un nouveau live |
|
|
</h3> |
|
|
<button class="close text-gray-500 hover:text-gray-700 text-2xl"> |
|
|
<i class="fas fa-times"></i> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<p class="text-gray-600 mb-4"> |
|
|
Choisissez un code pour votre salle (ou laissez vide pour un code généré automatiquement) |
|
|
</p> |
|
|
|
|
|
<div class="mb-6"> |
|
|
<input type="text" id="new-room-code" placeholder="Code de la salle (optionnel)" |
|
|
class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-purple-500 focus:border-purple-500 transition"> |
|
|
</div> |
|
|
|
|
|
<button id="confirm-create" class="w-full px-6 py-3 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition flex items-center justify-center"> |
|
|
<i class="fas fa-check-circle mr-2"></i>Créer et rejoindre |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="notification-modal" class="modal hidden fixed inset-0 flex items-center justify-center z-50"> |
|
|
<div class="bg-white rounded-xl shadow-2xl p-6 w-full max-w-md animate-fade-in"> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<h3 id="notification-title" class="text-xl font-semibold text-gray-800 flex items-center"> |
|
|
<i class="fas fa-bell text-blue-500 mr-2"></i>Notification |
|
|
</h3> |
|
|
<button class="close text-gray-500 hover:text-gray-700 text-2xl"> |
|
|
<i class="fas fa-times"></i> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<p id="notification-message" class="text-gray-600 mb-6"> |
|
|
Message de notification ici. |
|
|
</p> |
|
|
|
|
|
<div class="text-center"> |
|
|
<button id="notification-confirm" class="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition"> |
|
|
OK |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="toast" class="hidden fixed bottom-4 right-4 bg-green-500 text-white px-6 py-3 rounded-lg shadow-lg flex items-center"> |
|
|
<i class="fas fa-check-circle mr-2"></i> |
|
|
<span id="toast-message">Action réussie!</span> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
let localStream = null; |
|
|
let peers = {}; |
|
|
let isHost = false; |
|
|
let roomCode = "a234"; |
|
|
let username = ""; |
|
|
let videoEnabled = true; |
|
|
let audioEnabled = true; |
|
|
let screenShareStream = null; |
|
|
|
|
|
|
|
|
const loginSection = document.getElementById('login-section'); |
|
|
const videoSection = document.getElementById('video-section'); |
|
|
const hostControls = document.getElementById('host-controls'); |
|
|
const usernameInput = document.getElementById('username'); |
|
|
const roomCodeInput = document.getElementById('room-code'); |
|
|
const joinBtn = document.getElementById('join-btn'); |
|
|
const createBtn = document.getElementById('create-btn'); |
|
|
const roomDisplay = document.getElementById('room-display'); |
|
|
const toggleVideoBtn = document.getElementById('toggle-video'); |
|
|
const toggleAudioBtn = document.getElementById('toggle-audio'); |
|
|
const shareScreenBtn = document.getElementById('share-screen'); |
|
|
const leaveBtn = document.getElementById('leave-btn'); |
|
|
const inviteLink = document.getElementById('invite-link'); |
|
|
const copyBtn = document.getElementById('copy-btn'); |
|
|
const participantCount = document.getElementById('participant-count'); |
|
|
const participantList = document.getElementById('participant-list'); |
|
|
const createRoomModal = document.getElementById('create-room-modal'); |
|
|
const newRoomCodeInput = document.getElementById('new-room-code'); |
|
|
const confirmCreateBtn = document.getElementById('confirm-create'); |
|
|
const notificationModal = document.getElementById('notification-modal'); |
|
|
const notificationTitle = document.getElementById('notification-title'); |
|
|
const notificationMessage = document.getElementById('notification-message'); |
|
|
const notificationConfirm = document.getElementById('notification-confirm'); |
|
|
const localVideo = document.getElementById('local-video'); |
|
|
const videosContainer = document.getElementById('videos'); |
|
|
const toast = document.getElementById('toast'); |
|
|
const toastMessage = document.getElementById('toast-message'); |
|
|
|
|
|
|
|
|
function generateRoomCode() { |
|
|
return Math.random().toString(36).substring(2, 6).toUpperCase(); |
|
|
} |
|
|
|
|
|
|
|
|
function showNotification(title, message) { |
|
|
notificationTitle.textContent = title; |
|
|
notificationMessage.textContent = message; |
|
|
notificationModal.classList.remove('hidden'); |
|
|
} |
|
|
|
|
|
|
|
|
function showToast(message, isSuccess = true) { |
|
|
toastMessage.textContent = message; |
|
|
toast.className = `fixed bottom-4 right-4 px-6 py-3 rounded-lg shadow-lg flex items-center animate-fade-in ${isSuccess ? 'bg-green-500' : 'bg-red-500'} text-white`; |
|
|
toast.classList.remove('hidden'); |
|
|
|
|
|
setTimeout(() => { |
|
|
toast.classList.add('hidden'); |
|
|
}, 3000); |
|
|
} |
|
|
|
|
|
|
|
|
async function joinRoom(code) { |
|
|
if (!username) { |
|
|
showNotification("Erreur", "Veuillez entrer votre nom pour rejoindre."); |
|
|
return; |
|
|
} |
|
|
|
|
|
if (!code) { |
|
|
showNotification("Erreur", "Veuillez entrer un code de salle."); |
|
|
return; |
|
|
} |
|
|
|
|
|
roomCode = code.toUpperCase(); |
|
|
|
|
|
try { |
|
|
|
|
|
localStream = await navigator.mediaDevices.getUserMedia({ |
|
|
video: true, |
|
|
audio: true |
|
|
}); |
|
|
|
|
|
localVideo.srcObject = localStream; |
|
|
loginSection.classList.add('hidden'); |
|
|
videoSection.classList.remove('hidden'); |
|
|
|
|
|
if (isHost) { |
|
|
hostControls.classList.remove('hidden'); |
|
|
const currentUrl = window.location.href.split('?')[0]; |
|
|
inviteLink.value = `${currentUrl}?room=${roomCode}`; |
|
|
} |
|
|
|
|
|
roomDisplay.textContent = roomCode; |
|
|
|
|
|
showToast(`Vous avez rejoint la salle ${roomCode}`, true); |
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
const videoBox = document.createElement('div'); |
|
|
videoBox.className = 'video-box relative rounded-xl overflow-hidden'; |
|
|
videoBox.id = 'video-container-demo-peer'; |
|
|
|
|
|
const video = document.createElement('video'); |
|
|
video.id = 'video-demo-peer'; |
|
|
video.autoplay = true; |
|
|
video.playsinline = true; |
|
|
video.className = 'w-full h-full object-cover'; |
|
|
|
|
|
|
|
|
video.srcObject = new MediaStream([localStream.getVideoTracks()[0].clone()]); |
|
|
|
|
|
const usernameDiv = document.createElement('div'); |
|
|
usernameDiv.className = 'username absolute bottom-3 left-3 text-white px-3 py-1 rounded-lg text-sm'; |
|
|
usernameDiv.innerHTML = '<i class="fas fa-user-circle mr-1"></i>Participant Test'; |
|
|
videoBox.appendChild(usernameDiv); |
|
|
videoBox.appendChild(video); |
|
|
videosContainer.appendChild(videoBox); |
|
|
|
|
|
|
|
|
participantCount.innerHTML = '<i class="fas fa-users mr-2"></i>2 participants'; |
|
|
|
|
|
|
|
|
const participantItem = document.createElement('div'); |
|
|
participantItem.className = 'flex items-center p-2 bg-white rounded-lg shadow-sm'; |
|
|
participantItem.innerHTML = ` |
|
|
<span class="status-indicator rounded-full bg-green-500 mr-3"></span> |
|
|
Participant Test |
|
|
`; |
|
|
participantList.appendChild(participantItem); |
|
|
}, 2000); |
|
|
|
|
|
} catch (error) { |
|
|
console.error("Erreur simulation:", error); |
|
|
showNotification("Erreur", "Impossible d'accéder à la caméra ou au microphone. Veuillez vérifier vos autorisations."); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function leaveRoom() { |
|
|
if (localStream) { |
|
|
localStream.getTracks().forEach(track => track.stop()); |
|
|
} |
|
|
|
|
|
if (screenShareStream) { |
|
|
screenShareStream.getTracks().forEach(track => track.stop()); |
|
|
} |
|
|
|
|
|
|
|
|
const videos = document.querySelectorAll('.video-box:not(:first-child)'); |
|
|
videos.forEach(video => video.remove()); |
|
|
|
|
|
|
|
|
localVideo.srcObject = null; |
|
|
videoSection.classList.add('hidden'); |
|
|
hostControls.classList.add('hidden'); |
|
|
loginSection.classList.remove('hidden'); |
|
|
|
|
|
showToast("Vous avez quitté la salle", true); |
|
|
} |
|
|
|
|
|
|
|
|
async function shareScreen() { |
|
|
try { |
|
|
|
|
|
if (screenShareStream) { |
|
|
stopScreenSharing(); |
|
|
return; |
|
|
} |
|
|
|
|
|
|
|
|
screenShareStream = await navigator.mediaDevices.getDisplayMedia({ |
|
|
video: { |
|
|
cursor: "always", |
|
|
displaySurface: "monitor" |
|
|
}, |
|
|
audio: false |
|
|
}); |
|
|
|
|
|
|
|
|
localVideo.srcObject = screenShareStream; |
|
|
shareScreenBtn.innerHTML = '<i class="fas fa-stop-circle mr-2"></i>Arrêter le partage'; |
|
|
showToast("Partage d'écran activé", true); |
|
|
|
|
|
|
|
|
screenShareStream.getVideoTracks()[0].onended = () => { |
|
|
stopScreenSharing(); |
|
|
}; |
|
|
|
|
|
} catch (error) { |
|
|
console.error("Erreur partage écran:", error); |
|
|
if (error.name !== 'NotAllowedError') { |
|
|
showNotification("Erreur", "Impossible de partager l'écran."); |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
function stopScreenSharing() { |
|
|
if (screenShareStream) { |
|
|
screenShareStream.getTracks().forEach(track => track.stop()); |
|
|
localVideo.srcObject = localStream; |
|
|
screenShareStream = null; |
|
|
shareScreenBtn.innerHTML = '<i class="fas fa-desktop mr-2"></i>Partager écran'; |
|
|
showToast("Partage d'écran arrêté", true); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
joinBtn.addEventListener('click', () => { |
|
|
username = usernameInput.value.trim(); |
|
|
const code = roomCodeInput.value.trim().toUpperCase(); |
|
|
|
|
|
if (username && code) { |
|
|
isHost = false; |
|
|
joinRoom(code); |
|
|
} else { |
|
|
showNotification("Informations manquantes", "Veuillez entrer votre nom et le code de la salle."); |
|
|
} |
|
|
}); |
|
|
|
|
|
createBtn.addEventListener('click', () => { |
|
|
username = usernameInput.value.trim(); |
|
|
|
|
|
if (username) { |
|
|
isHost = true; |
|
|
createRoomModal.classList.remove('hidden'); |
|
|
} else { |
|
|
showNotification("Nom manquant", "Veuillez entrer votre nom pour créer une salle."); |
|
|
} |
|
|
}); |
|
|
|
|
|
confirmCreateBtn.addEventListener('click', () => { |
|
|
const customCode = newRoomCodeInput.value.trim().toUpperCase(); |
|
|
const code = customCode || generateRoomCode(); |
|
|
|
|
|
createRoomModal.classList.add('hidden'); |
|
|
joinRoom(code); |
|
|
}); |
|
|
|
|
|
toggleVideoBtn.addEventListener('click', () => { |
|
|
if (localStream) { |
|
|
const videoTracks = localStream.getVideoTracks(); |
|
|
videoTracks.forEach(track => { |
|
|
track.enabled = !track.enabled; |
|
|
}); |
|
|
|
|
|
videoEnabled = videoTracks[0]?.enabled || false; |
|
|
toggleVideoBtn.innerHTML = videoEnabled |
|
|
? '<i class="fas fa-video mr-2"></i>Désactiver vidéo' |
|
|
: '<i class="fas fa-video-slash mr-2"></i>Activer vidéo'; |
|
|
|
|
|
showToast(`Vidéo ${videoEnabled ? 'activée' : 'désactivée'}`, true); |
|
|
} |
|
|
}); |
|
|
|
|
|
toggleAudioBtn.addEventListener('click', () => { |
|
|
if (localStream) { |
|
|
const audioTracks = localStream.getAudioTracks(); |
|
|
audioTracks.forEach(track => { |
|
|
track.enabled = !track.enabled; |
|
|
}); |
|
|
|
|
|
audioEnabled = audioTracks[0]?.enabled || false; |
|
|
toggleAudioBtn.innerHTML = audioEnabled |
|
|
? '<i class="fas fa-microphone mr-2"></i>Désactiver audio' |
|
|
: '<i class="fas fa-microphone-slash mr-2"></i>Activer audio'; |
|
|
|
|
|
showToast(`Audio ${audioEnabled ? 'activé' : 'désactivé'}`, true); |
|
|
} |
|
|
}); |
|
|
|
|
|
shareScreenBtn.addEventListener('click', shareScreen); |
|
|
|
|
|
leaveBtn.addEventListener('click', () => { |
|
|
leaveRoom(); |
|
|
}); |
|
|
|
|
|
copyBtn.addEventListener('click', () => { |
|
|
inviteLink.select(); |
|
|
document.execCommand('copy'); |
|
|
copyBtn.innerHTML = '<i class="fas fa-check mr-2"></i>Copié !'; |
|
|
showToast("Lien copié dans le presse-papier", true); |
|
|
|
|
|
setTimeout(() => { |
|
|
copyBtn.innerHTML = '<i class="fas fa-copy mr-2"></i>Copier'; |
|
|
}, 2000); |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelectorAll('.close').forEach(closeBtn => { |
|
|
closeBtn.addEventListener('click', () => { |
|
|
createRoomModal.classList.add('hidden'); |
|
|
notificationModal.classList.add('hidden'); |
|
|
}); |
|
|
}); |
|
|
|
|
|
notificationConfirm.addEventListener('click', () => { |
|
|
notificationModal.classList.add('hidden'); |
|
|
}); |
|
|
|
|
|
|
|
|
window.addEventListener('load', () => { |
|
|
const urlParams = new URLSearchParams(window.location.search); |
|
|
const roomParam = urlParams.get('room'); |
|
|
|
|
|
if (roomParam) { |
|
|
roomCodeInput.value = roomParam; |
|
|
usernameInput.focus(); |
|
|
} |
|
|
}); |
|
|
</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=Adamchab/live" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
