Spaces:

condorhacker
/

navi

Running

File size: 11,893 Bytes

ff9f13e

<!DOCTYPE html>
<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>