Spaces:
Running
Running
| <html lang="it"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> | |
| <title>Android Auto - Navigatore Italia</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script> | |
| <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" /> | |
| <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" rel="stylesheet" /> | |
| <style> | |
| body, html { | |
| margin: 0; | |
| padding: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: #000; | |
| color: white; | |
| font-family: 'Google Sans', 'Segoe UI', sans-serif; | |
| overflow: hidden; | |
| } | |
| #map { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| z-index: 1; | |
| } | |
| /* Overlay per Android Auto */ | |
| .android-auto-overlay { | |
| position: absolute; | |
| bottom: 0; | |
| left: 0; | |
| width: 100%; | |
| background: linear-gradient(to top, rgba(0,0,0,0.8), transparent 70%); | |
| height: 240px; | |
| z-index: 10; | |
| pointer-events: none; | |
| } | |
| /* Voice Assistant */ | |
| .voice-assistant { | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| transform: translate(-50%, -50%); | |
| background: rgba(33, 33, 33, 0.9); | |
| border-radius: 20px; | |
| padding: 20px; | |
| width: 90%; | |
| max-width: 320px; | |
| text-align: center; | |
| box-shadow: 0 4px 20px rgba(0,0,0,0.5); | |
| z-index: 50; | |
| backdrop-filter: blur(10px); | |
| opacity: 0; | |
| pointer-events: none; | |
| transition: opacity 0.3s ease; | |
| } | |
| .voice-assistant.active { | |
| opacity: 1; | |
| pointer-events: auto; | |
| } | |
| .voice-wave { | |
| height: 40px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 2px; | |
| } | |
| .wave-bar { | |
| width: 4px; | |
| background: #1DB954; | |
| height: 8px; | |
| border-radius: 2px; | |
| animation: pulse 1s infinite ease-in-out; | |
| } | |
| .wave-bar:nth-child(1) { animation-delay: 0s; height: 12px; } | |
| .wave-bar:nth-child(2) { animation-delay: 0.1s; height: 6px; } | |
| .wave-bar:nth-child(3) { animation-delay: 0.2s; height: 16px; } | |
| .wave-bar:nth-child(4) { animation-delay: 0.3s; height: 10px; } | |
| .wave-bar:nth-child(5) { animation-delay: 0.4s; height: 14px; } | |
| .wave-bar:nth-child(6) { animation-delay: 0.5s; height: 8px; } | |
| @keyframes pulse { | |
| 0%, 100% { opacity: 0.5; transform: scaleY(1); } | |
| 50% { opacity: 1; transform: scaleY(1.5); } | |
| } | |
| .voice-text { | |
| margin-top: 16px; | |
| font-size: 14px; | |
| color: #ccc; | |
| } | |
| /* Top Bar */ | |
| .top-bar { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| padding: 16px; | |
| z-index: 10; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: flex-start; | |
| pointer-events: none; | |
| } | |
| .time { | |
| font-size: 18px; | |
| font-weight: 500; | |
| background: rgba(0,0,0,0.6); | |
| padding: 4px 12px; | |
| border-radius: 16px; | |
| pointer-events: auto; | |
| } | |
| .search-button { | |
| background: rgba(255,255,255,0.2); | |
| padding: 8px 16px; | |
| border-radius: 16px; | |
| font-size: 14px; | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| pointer-events: auto; | |
| } | |
| /* Bottom Control */ | |
| .bottom-control { | |
| position: absolute; | |
| bottom: 20px; | |
| left: 0; | |
| width: 100%; | |
| padding: 0 16px; | |
| z-index: 10; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| .nav-button { | |
| background: #202124; | |
| width: 64px; | |
| height: 64px; | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| box-shadow: 0 4px 12px rgba(0,0,0,0.3); | |
| color: white; | |
| font-size: 20px; | |
| } | |
| .mic-button { | |
| background: #1DB954; | |
| width: 72px; | |
| height: 72px; | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| color: white; | |
| font-size: 24px; | |
| box-shadow: 0 4px 16px rgba(29, 185, 84, 0.4); | |
| } | |
| /* Navigation UI */ | |
| .navigation-ui { | |
| position: absolute; | |
| top: 0; | |
| right: 0; | |
| width: 100%; | |
| height: 100%; | |
| z-index: 20; | |
| display: none; | |
| flex-direction: column; | |
| } | |
| .nav-header { | |
| padding: 70px 20px 0 20px; | |
| background: linear-gradient(to bottom, rgba(0,0,0,0.8), transparent); | |
| text-align: center; | |
| } | |
| .nav-distance { | |
| font-size: 42px; | |
| font-weight: 300; | |
| } | |
| .nav-time { | |
| font-size: 16px; | |
| color: #aaa; | |
| } | |
| .next-instruction { | |
| padding: 16px 20px; | |
| background: rgba(32, 32, 32, 0.9); | |
| border-top: 1px solid #333; | |
| font-size: 18px; | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| } | |
| .turn-icon { | |
| width: 32px; | |
| height: 32px; | |
| border-radius: 50%; | |
| background: #1DB954; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-weight: bold; | |
| font-size: 14px; | |
| } | |
| .speed-display { | |
| position: absolute; | |
| right: 20px; | |
| top: 80px; | |
| font-size: 36px; | |
| font-weight: bold; | |
| color: #1DB954; | |
| z-index: 10; | |
| } | |
| .direction-arrow { | |
| position: absolute; | |
| top: 150px; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| width: 40px; | |
| height: 40px; | |
| background: white; | |
| clip-path: polygon(50% 0%, 0% 100%, 50% 75%, 100% 100%); | |
| z-index: 10; | |
| opacity: 0; | |
| transition: opacity 0.3s; | |
| } | |
| .direction-arrow.show { | |
| opacity: 1; | |
| } | |
| </style> | |
| </head> | |
| <body class="relative"> | |
| <!-- Mappa --> | |
| <div id="map"></div> | |
| <!-- Frecce direzionali (simulazione svolta) --> | |
| <div class="direction-arrow" id="direction-arrow"></div> | |
| <!-- Display velocità --> | |
| <div class="speed-display" id="speed">0</div> | |
| <!-- Top Bar --> | |
| <div class="top-bar"> | |
| <div class="time" id="current-time">12:34</div> | |
| <button class="search-button" id="search-btn"> | |
| <i class="fas fa-search"></i> | |
| <span>Cerca destinazione</span> | |
| </button> | |
| </div> | |
| <!-- Android Auto Overlay --> | |
| <div class="android-auto-overlay"></div> | |
| <!-- Bottom Control Bar --> | |
| <div class="bottom-control"> | |
| <a href="#" class="nav-button"><i class="fas fa-apple-alt"></i></a> | |
| <div class="mic-button" id="voice-mic"><i class="fas fa-microphone"></i></div> | |
| <a href="#" class="nav-button"><i class="fas fa-compass"></i></a> | |
| </div> | |
| <!-- Voice Assistant Overlay --> | |
| <div class="voice-assistant" id="voice-assistant"> | |
| <div class="voice-wave"> | |
| <div class="wave-bar"></div> | |
| <div class="wave-bar"></div> | |
| <div class="wave-bar"></div> | |
| <div class="wave-bar"></div> | |
| <div class="wave-bar"></div> | |
| <div class="wave-bar"></div> | |
| </div> | |
| <div class="voice-text" id="voice-text">Ascolto…</div> | |
| </div> | |
| <!-- Schermo Navigazione Attiva --> | |
| <div class="navigation-ui" id="nav-ui"> | |
| <div class="nav-header"> | |
| <div class="nav-distance" id="nav-distance">4.2 km</div> | |
| <div class="nav-time" id="nav-time">6 min</div> | |
| </div> | |
| <div class="next-instruction"> | |
| <div class="turn-icon">L</div> | |
| <span id="next-instruction-text">Svoltare a sinistra su Via Cavour</span> | |
| </div> | |
| </div> | |
| <script> | |
| // Aggiorna ora | |
| setInterval(() => { | |
| const now = new Date(); | |
| document.getElementById('current-time').textContent = now.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }); | |
| }, 1000); | |
| // Inizializza mappa | |
| const map = L.map('map', { zoomControl: false }).setView([41.9028, 12.4964], 14); | |
| L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { | |
| attribution: '© OpenStreetMap contributors' | |
| }).addTo(map); | |
| // Posizione utente | |
| let userPos = [41.9028, 12.4964]; | |
| let userMarker = L.marker(userPos, { | |
| icon: L.divIcon({ | |
| html: '<i class="fas fa-car text-red-600" style="font-size:24px; transform:rotate(45deg);"></i>', | |
| iconSize: [32, 32], | |
| iconAnchor: [16, 16] | |
| }) | |
| }).addTo(map); | |
| // Simulazione movimento | |
| setInterval(() => { | |
| userPos[0] += (Math.random() - 0.5) * 0.0002; | |
| userPos[1] += (Math.random() - 0.5) * 0.0002; | |
| userMarker.setLatLng(userPos); | |
| }, 2000); | |
| // Bottone Microfono | |
| const voiceAssistant = document.getElementById('voice-assistant'); | |
| const voiceMic = document.getElementById('voice-mic'); | |
| const voiceText = document.getElementById('voice-text'); | |
| const commands = { | |
| "dove sono": "Sei a Roma, centro città.", | |
| "trova ristorante": "Cerco un ristorante nelle vicinanze…", | |
| "a casa": () => startNavigation("Casa, Via Garibaldi 45, Roma"), | |
| "a lavoro": () => startNavigation("Ufficio, Piazza del Popolo, Roma"), | |
| "inizia navigazione": () => startNavigation("Stazione Termini, Roma"), | |
| "navigatore": "Avvio il navigatore.", | |
| "silenzio": "Ok, silenzio attivo." | |
| }; | |
| voiceMic.addEventListener('click', () => { | |
| voiceAssistant.classList.add('active'); | |
| voiceText.textContent = "Ascolto…"; | |
| setTimeout(() => { | |
| voiceText.textContent = "Riconoscimento vocale…"; | |
| setTimeout(() => simulateVoiceCommand(), 1500); | |
| }, 1000); | |
| }); | |
| function simulateVoiceCommand() { | |
| const possibleCommands = Object.keys(commands); | |
| const randomCommand = possibleCommands[Math.floor(Math.random() * possibleCommands.length)]; | |
| voiceText.textContent = `Hai detto: "${randomCommand}"`; | |
| setTimeout(() => { | |
| const action = commands[randomCommand]; | |
| if (typeof action === 'function') { | |
| action(); | |
| } else { | |
| voiceText.textContent = action; | |
| setTimeout(() => voiceAssistant.classList.remove('active'), 2000); | |
| } | |
| }, 1500); | |
| } | |
| function startNavigation(destination) { | |
| voiceText.textContent = `Navigazione verso ${destination} avviata.`; | |
| document.getElementById('next-instruction-text').textContent = `Verso ${destination}`; | |
| document.getElementById('nav-ui').style.display = 'flex'; | |
| // Mostra freccia direzionale | |
| setTimeout(() => { | |
| document.getElementById('direction-arrow').classList.add('show'); | |
| }, 1000); | |
| // Altri messaggi simulati | |
| setTimeout(() => { | |
| document.getElementById('next-instruction-text').textContent = "Svoltare a destra tra 300 metri"; | |
| document.getElementById('nav-distance').textContent = "3.1 km"; | |
| document.getElementById('nav-time').textContent = "4 min"; | |
| }, 5000); | |
| // Simula velocità | |
| setInterval(() => { | |
| const speeds = [0, 10, 20, 40, 60, 80]; | |
| document.getElementById('speed').textContent = speeds[Math.floor(Math.random() * speeds.length)] + ' km/h'; | |
| }, 3000); | |
| } | |
| // Pulsante cerca | |
| document.getElementById('search-btn').addEventListener('click', () => { | |
| startNavigation("Piazza Navona, Roma"); | |
| }); | |
| </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-qwensite.hf.space/logo.svg" alt="qwensite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-qwensite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >QwenSite</a> - 🧬 <a href="https://enzostvs-qwensite.hf.space?remix=condorhacker/navi" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |