Pianta Teatro SVG

Pianta Standard Teatro

body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; display: flex; flex-direction: column; align-items: center; background-color: #e8eaf6; /* Light indigo background */ margin: 0; padding: 20px; } h1 { color: #3f51b5; /* Indigo */ } .svg-container { width: 90%; max-width: 850px; background-color: #fff; border: 1px solid #c5cae9; /* Lighter indigo border */ border-radius: 8px; box-shadow: 0 5px 15px rgba(0,0,0,0.1); padding: 15px; margin-top: 20px; } #theater-plan { display: block; width: 100%; height: auto; } /* Stile per i posti al passaggio del mouse */ #seating-area use:hover { fill: #ff9800; /* Orange */ cursor: pointer; transition: fill 0.2s ease-in-out; } console.log("Pianta Teatro SVG caricata."); // Aggiungi interattività ai posti a sedere const seats = document.querySelectorAll('#seating-area use'); seats.forEach((seat, index) => { seat.addEventListener('click', () => { // Potresti implementare una logica di selezione/deselezione const currentFill = seat.style.fill; if (currentFill === 'rgb(33, 150, 243)') { // Blu (selezionato) // Deseleziona (ripristina colore originale dal CSS o da defs) // Nota: ottenere il fill originale da defs/css è più complesso, // usiamo il colore di hover per semplicità come "deselezionato" temporaneo seat.style.fill = '#795548'; // Colore originale definito in defs console.log(`Posto ${index + 1} deselezionato`); } else { // Seleziona seat.style.fill = '#2196F3'; // Blu console.log(`Posto ${index + 1} selezionato`); } }); // Aggiungi un title per vedere il "numero" del posto al passaggio del mouse seat.setAttribute('title', `Posto ${index + 1}`); });