Hugging Face's logo

Spaces:
PierreH
/
test
Running

App Files Community
test / index.html
PierreH's picture
PierreH
Add 2 files
79b474d verified
raw
history blame contribute delete
26.4 kB
 <!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HypnoMap Live</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>
.map-container {
background-image: url('https://maps.googleapis.com/maps/api/staticmap?center=48.8566,2.3522&zoom=13&size=800x600&scale=2');
background-size: cover;
background-position: center;
}
.bubble {
position: absolute;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s ease;
}
.bubble:hover {
transform: scale(1.05);
}
.message-banner {
animation: slideIn 0.5s forwards, fadeOut 0.5s 5s forwards;
}
@keyframes slideIn {
from { transform: translateY(100px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
@keyframes fadeOut {
from { opacity: 1; }
to { opacity: 0; }
}
.range-slider::-webkit-slider-thumb {
-webkit-appearance: none;
width: 20px;
height: 20px;
border-radius: 50%;
background: #4f46e5;
cursor: pointer;
}
.participant-marker {
position: absolute;
width: 24px;
height: 24px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
color: white;
}
</style>
</head>
<body class="bg-gray-900 text-white min-h-screen">
<!-- Home Screen -->
<div id="home-screen" class="flex flex-col items-center justify-center min-h-screen p-4">
<div class="text-center mb-12">
<h1 class="text-5xl font-bold mb-4 text-purple-500">HypnoMap Live</h1>
<p class="text-xl text-gray-300">Expérience sonore géolocalisée</p>
</div>
<div class="w-full max-w-md space-y-6">
<button id="join-btn" class="w-full bg-purple-600 hover:bg-purple-700 text-white font-bold py-4 px-6 rounded-lg text-xl transition flex items-center justify-center">
<i class="fas fa-user-friends mr-3"></i> Rejoindre une session
</button>
<button id="create-btn" class="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-4 px-6 rounded-lg text-xl transition flex items-center justify-center">
<i class="fas fa-music mr-3"></i> Créer une session (DJ)
</button>
</div>
</div>
<!-- Join Session Modal -->
<div id="join-modal" class="fixed inset-0 bg-black bg-opacity-80 flex items-center justify-center z-50 hidden">
<div class="bg-gray-800 rounded-xl p-6 w-full max-w-md">
<div class="flex justify-between items-center mb-4">
<h2 class="text-2xl font-bold">Rejoindre une session</h2>
<button id="close-join-modal" class="text-gray-400 hover:text-white">
<i class="fas fa-times"></i>
</button>
</div>
<div class="mb-6">
<label class="block text-gray-300 mb-2">Code de session</label>
<input type="text" id="session-code" class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-purple-500" placeholder="Entrez le code">
</div>
<div class="mb-6">
<label class="block text-gray-300 mb-2">Votre pseudo</label>
<input type="text" id="participant-name" class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-purple-500" placeholder="Optionnel">
</div>
<button id="confirm-join" class="w-full bg-purple-600 hover:bg-purple-700 text-white font-bold py-3 px-6 rounded-lg transition">
Rejoindre
</button>
</div>
</div>
<!-- DJ Mode -->
<div id="dj-screen" class="hidden min-h-screen flex flex-col">
<div class="bg-gray-800 p-4 flex justify-between items-center">
<div>
<h2 class="text-xl font-bold">Mode DJ</h2>
<p class="text-sm text-gray-400">Session: <span id="dj-session-code" class="font-mono">XXXXXX</span></p>
</div>
<div class="flex space-x-2">
<button id="dj-settings" class="p-2 rounded-full hover:bg-gray-700">
<i class="fas fa-cog"></i>
</button>
<button id="leave-dj" class="p-2 rounded-full hover:bg-gray-700">
<i class="fas fa-sign-out-alt"></i>
</button>
</div>
</div>
<div class="relative flex-1">
<div id="dj-map" class="map-container w-full h-full relative overflow-hidden">
<!-- Map will be rendered here -->
<div id="dj-bubbles-container"></div>
<div id="dj-participants-container"></div>
</div>
<div class="absolute bottom-4 left-0 right-0 flex justify-center">
<button id="create-bubble-btn" class="bg-purple-600 hover:bg-purple-700 text-white font-bold py-3 px-6 rounded-full shadow-lg flex items-center">
<i class="fas fa-plus-circle mr-2"></i> Créer une bulle
</button>
</div>
<div id="dj-controls" class="absolute top-4 right-4 bg-gray-800 bg-opacity-80 rounded-lg p-3 space-y-3">
<button id="play-all" class="p-2 bg-green-600 hover:bg-green-700 rounded-full">
<i class="fas fa-play"></i>
</button>
<button id="pause-all" class="p-2 bg-yellow-600 hover:bg-yellow-700 rounded-full">
<i class="fas fa-pause"></i>
</button>
<button id="global-message" class="p-2 bg-blue-600 hover:bg-blue-700 rounded-full">
<i class="fas fa-bullhorn"></i>
</button>
</div>
</div>
</div>
<!-- Participant Mode -->
<div id="participant-screen" class="hidden min-h-screen flex flex-col">
<div class="bg-gray-800 p-4 flex justify-between items-center">
<div>
<h2 class="text-xl font-bold">Mode Participant</h2>
<p class="text-sm text-gray-400">Session: <span id="participant-session-code" class="font-mono">XXXXXX</span></p>
</div>
<div class="flex space-x-2">
<button id="leave-participant" class="p-2 rounded-full hover:bg-gray-700">
<i class="fas fa-sign-out-alt"></i>
</button>
</div>
</div>
<div class="relative flex-1">
<div id="participant-map" class="map-container w-full h-full relative overflow-hidden">
<!-- Map will be rendered here -->
<div id="participant-bubbles-container"></div>
<div id="participant-participants-container"></div>
</div>
<div id="message-banner" class="message-banner absolute bottom-20 left-0 right-0 mx-auto bg-purple-600 bg-opacity-90 rounded-lg p-4 max-w-md text-center hidden">
<p id="message-content" class="font-medium"></p>
</div>
<div class="absolute bottom-4 left-0 right-0 flex justify-center px-4">
<div class="flex w-full max-w-md bg-gray-800 bg-opacity-80 rounded-full p-2">
<input type="text" id="participant-message" class="flex-1 bg-transparent px-4 py-2 focus:outline-none" placeholder="Envoyer un message..." maxlength="140">
<button id="send-message" class="bg-purple-600 hover:bg-purple-700 rounded-full px-4">
<i class="fas fa-paper-plane"></i>
</button>
</div>
</div>
</div>
</div>
<!-- Create Bubble Modal -->
<div id="bubble-modal" class="fixed inset-0 bg-black bg-opacity-80 flex items-center justify-center z-50 hidden">
<div class="bg-gray-800 rounded-xl p-6 w-full max-w-md">
<div class="flex justify-between items-center mb-4">
<h2 class="text-2xl font-bold">Nouvelle bulle sonore</h2>
<button id="close-bubble-modal" class="text-gray-400 hover:text-white">
<i class="fas fa-times"></i>
</button>
</div>
<div class="mb-4">
<label class="block text-gray-300 mb-2">Nom de la bulle</label>
<input type="text" id="bubble-name" class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-purple-500" placeholder="Ma bulle sonore">
</div>
<div class="mb-4">
<label class="block text-gray-300 mb-2">Fichier audio</label>
<div class="flex items-center">
<label for="audio-upload" class="bg-gray-700 hover:bg-gray-600 border border-gray-600 rounded-lg px-4 py-3 cursor-pointer flex-1">
<span id="audio-file-name" class="text-gray-300">Sélectionner un fichier...</span>
</label>
<input type="file" id="audio-upload" class="hidden" accept="audio/*">
</div>
</div>
<div class="mb-6">
<label class="block text-gray-300 mb-2">Rayon d'activation: <span id="radius-value">25</span>m</label>
<input type="range" id="bubble-radius" min="5" max="50" value="25" class="w-full range-slider">
</div>
<button id="confirm-bubble" class="w-full bg-purple-600 hover:bg-purple-700 text-white font-bold py-3 px-6 rounded-lg transition">
Créer la bulle
</button>
</div>
</div>
<!-- Global Message Modal -->
<div id="global-message-modal" class="fixed inset-0 bg-black bg-opacity-80 flex items-center justify-center z-50 hidden">
<div class="bg-gray-800 rounded-xl p-6 w-full max-w-md">
<div class="flex justify-between items-center mb-4">
<h2 class="text-2xl font-bold">Message global</h2>
<button id="close-global-message-modal" class="text-gray-400 hover:text-white">
<i class="fas fa-times"></i>
</button>
</div>
<div class="mb-6">
<label class="block text-gray-300 mb-2">Message</label>
<textarea id="global-message-text" class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-3 h-32 focus:outline-none focus:ring-2 focus:ring-purple-500" placeholder="Écrivez un message pour tous les participants..." maxlength="140"></textarea>
</div>
<button id="send-global-message" class="w-full bg-purple-600 hover:bg-purple-700 text-white font-bold py-3 px-6 rounded-lg transition">
Envoyer
</button>
</div>
</div>
<script>
// State management
const appState = {
currentScreen: 'home',
isDJ: false,
sessionCode: '',
bubbles: [],
participants: [],
messages: [],
currentUser: {
id: Math.random().toString(36).substring(2, 10),
name: 'Participant ' + Math.floor(Math.random() * 1000),
position: { x: 50, y: 50 }
}
};
// DOM elements
const homeScreen = document.getElementById('home-screen');
const joinModal = document.getElementById('join-modal');
const djScreen = document.getElementById('dj-screen');
const participantScreen = document.getElementById('participant-screen');
const bubbleModal = document.getElementById('bubble-modal');
const globalMessageModal = document.getElementById('global-message-modal');
// Event listeners
document.getElementById('join-btn').addEventListener('click', () => {
joinModal.classList.remove('hidden');
});
document.getElementById('create-btn').addEventListener('click', () => {
createSession(true);
});
document.getElementById('close-join-modal').addEventListener('click', () => {
joinModal.classList.add('hidden');
});
document.getElementById('confirm-join').addEventListener('click', () => {
const code = document.getElementById('session-code').value;
const name = document.getElementById('participant-name').value;
if (code) {
if (name) appState.currentUser.name = name;
joinSession(code);
joinModal.classList.add('hidden');
} else {
alert('Veuillez entrer un code de session');
}
});
document.getElementById('leave-dj').addEventListener('click', () => {
showScreen('home');
});
document.getElementById('leave-participant').addEventListener('click', () => {
showScreen('home');
});
document.getElementById('create-bubble-btn').addEventListener('click', () => {
bubbleModal.classList.remove('hidden');
});
document.getElementById('close-bubble-modal').addEventListener('click', () => {
bubbleModal.classList.add('hidden');
});
document.getElementById('confirm-bubble').addEventListener('click', () => {
const name = document.getElementById('bubble-name').value;
const radius = parseInt(document.getElementById('bubble-radius').value);
if (name) {
createBubble(name, radius);
bubbleModal.classList.add('hidden');
} else {
alert('Veuillez donner un nom à votre bulle');
}
});
document.getElementById('bubble-radius').addEventListener('input', (e) => {
document.getElementById('radius-value').textContent = e.target.value;
});
document.getElementById('audio-upload').addEventListener('change', (e) => {
const file = e.target.files[0];
if (file) {
document.getElementById('audio-file-name').textContent = file.name;
}
});
document.getElementById('global-message').addEventListener('click', () => {
globalMessageModal.classList.remove('hidden');
});
document.getElementById('close-global-message-modal').addEventListener('click', () => {
globalMessageModal.classList.add('hidden');
});
document.getElementById('send-global-message').addEventListener('click', () => {
const message = document.getElementById('global-message-text').value;
if (message) {
sendGlobalMessage(message);
globalMessageModal.classList.add('hidden');
document.getElementById('global-message-text').value = '';
}
});
document.getElementById('send-message').addEventListener('click', () => {
const message = document.getElementById('participant-message').value;
if (message) {
sendParticipantMessage(message);
document.getElementById('participant-message').value = '';
}
});
// Functions
function showScreen(screen) {
homeScreen.classList.add('hidden');
djScreen.classList.add('hidden');
participantScreen.classList.add('hidden');
appState.currentScreen = screen;
if (screen === 'home') {
homeScreen.classList.remove('hidden');
} else if (screen === 'dj') {
djScreen.classList.remove('hidden');
renderDJMap();
} else if (screen === 'participant') {
participantScreen.classList.remove('hidden');
renderParticipantMap();
}
}
function createSession(isDJ) {
appState.isDJ = isDJ;
appState.sessionCode = generateSessionCode();
if (isDJ) {
document.getElementById('dj-session-code').textContent = appState.sessionCode;
showScreen('dj');
} else {
document.getElementById('participant-session-code').textContent = appState.sessionCode;
showScreen('participant');
}
// Simulate other participants joining
setTimeout(() => {
addParticipant('DJ Master', { x: 30, y: 30 });
addParticipant('Sound Explorer', { x: 70, y: 70 });
addParticipant('Music Traveler', { x: 60, y: 40 });
if (isDJ) {
renderDJMap();
} else {
renderParticipantMap();
}
}, 1000);
}
function joinSession(code) {
appState.isDJ = false;
appState.sessionCode = code;
document.getElementById('participant-session-code').textContent = code;
showScreen('participant');
// Simulate existing bubbles
setTimeout(() => {
addBubble('Ambiance Chill', 20, { x: 40, y: 60 });
addBubble('Rythme Urbain', 15, { x: 70, y: 30 });
renderParticipantMap();
}, 1000);
}
function generateSessionCode() {
return Math.random().toString(36).substring(2, 8).toUpperCase();
}
function createBubble(name, radius) {
const bubble = {
id: Math.random().toString(36).substring(2, 10),
name,
radius,
position: { x: 50, y: 50 }, // Center position
audio: 'sample.mp3' // In a real app, this would be the uploaded file
};
appState.bubbles.push(bubble);
renderDJMap();
}
function addBubble(name, radius, position) {
const bubble = {
id: Math.random().toString(36).substring(2, 10),
name,
radius,
position,
audio: 'sample.mp3'
};
appState.bubbles.push(bubble);
}
function addParticipant(name, position) {
const participant = {
id: Math.random().toString(36).substring(2, 10),
name,
position
};
appState.participants.push(participant);
}
function sendGlobalMessage(message) {
// In a real app, this would be sent to all participants
console.log('Global message sent:', message);
}
function sendParticipantMessage(message) {
const messageObj = {
id: Math.random().toString(36).substring(2, 10),
sender: appState.currentUser.name,
content: message,
timestamp: new Date()
};
// Show the message banner
const banner = document.getElementById('message-banner');
const content = document.getElementById('message-content');
content.textContent = `${messageObj.sender}: ${messageObj.content}`;
banner.classList.remove('hidden');
// Hide after animation
setTimeout(() => {
banner.classList.add('hidden');
}, 5500);
}
function renderDJMap() {
const container = document.getElementById('dj-bubbles-container');
const participantsContainer = document.getElementById('dj-participants-container');
container.innerHTML = '';
participantsContainer.innerHTML = '';
// Render bubbles
appState.bubbles.forEach(bubble => {
const bubbleEl = document.createElement('div');
bubbleEl.className = 'bubble bg-purple-500 bg-opacity-30 border-2 border-purple-400';
bubbleEl.style.width = `${bubble.radius * 6}px`;
bubbleEl.style.height = `${bubble.radius * 6}px`;
bubbleEl.style.left = `${bubble.position.x}%`;
bubbleEl.style.top = `${bubble.position.y}%`;
bubbleEl.title = bubble.name;
// Make draggable
bubbleEl.draggable = true;
bubbleEl.addEventListener('dragstart', (e) => {
e.dataTransfer.setData('text/plain', bubble.id);
});
container.appendChild(bubbleEl);
});
// Render participants
appState.participants.forEach(participant => {
const participantEl = document.createElement('div');
participantEl.className = 'participant-marker bg-blue-500';
participantEl.style.left = `${participant.position.x}%`;
participantEl.style.top = `${participant.position.y}%`;
participantEl.textContent = participant.name.charAt(0);
participantEl.title = participant.name;
participantsContainer.appendChild(participantEl);
});
// Add drop zone for bubbles
const map = document.getElementById('dj-map');
map.addEventListener('dragover', (e) => {
e.preventDefault();
});
map.addEventListener('drop', (e) => {
e.preventDefault();
const bubbleId = e.dataTransfer.getData('text/plain');
const bubble = appState.bubbles.find(b => b.id === bubbleId);
if (bubble) {
const rect = map.getBoundingClientRect();
const x = ((e.clientX - rect.left) / rect.width) * 100;
const y = ((e.clientY - rect.top) / rect.height) * 100;
bubble.position = { x, y };
renderDJMap();
}
});
}
function renderParticipantMap() {
const container = document.getElementById('participant-bubbles-container');
const participantsContainer = document.getElementById('participant-participants-container');
container.innerHTML = '';
participantsContainer.innerHTML = '';
// Render bubbles
appState.bubbles.forEach(bubble => {
const bubbleEl = document.createElement('div');
bubbleEl.className = 'bubble bg-purple-500 bg-opacity-20 border border-purple-400';
bubbleEl.style.width = `${bubble.radius * 6}px`;
bubbleEl.style.height = `${bubble.radius * 6}px`;
bubbleEl.style.left = `${bubble.position.x}%`;
bubbleEl.style.top = `${bubble.position.y}%`;
bubbleEl.title = bubble.name;
container.appendChild(bubbleEl);
});
// Render participants
appState.participants.forEach(participant => {
const participantEl = document.createElement('div');
participantEl.className = 'participant-marker bg-blue-500';
participantEl.style.left = `${participant.position.x}%`;
participantEl.style.top = `${participant.position.y}%`;
participantEl.textContent = participant.name.charAt(0);
participantEl.title = participant.name;
participantsContainer.appendChild(participantEl);
});
// Add current user
const currentUserEl = document.createElement('div');
currentUserEl.className = 'participant-marker bg-green-500';
currentUserEl.style.left = `${appState.currentUser.position.x}%`;
currentUserEl.style.top = `${appState.currentUser.position.y}%`;
currentUserEl.textContent = appState.currentUser.name.charAt(0);
currentUserEl.title = appState.currentUser.name;
participantsContainer.appendChild(currentUserEl);
}
// Initialize
showScreen('home');
</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=PierreH/test" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>