Spaces:

condorhacker
/

navi

Running

App Files Files Community

condorhacker commited on Oct 21, 2025

Commit

ff9f13e

verified ·

1 Parent(s): b38c2b3

Add 3 files

Browse files

Files changed (3) hide show

README.md +7 -5
index.html +410 -19
prompts.txt +2 -0

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Navi
-emoji: 📚
-colorFrom: yellow
-colorTo: indigo
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: navi
+emoji: ⚛️
+colorFrom: gray
+colorTo: gray
 sdk: static
 pinned: false
+tags:
+  - QwenSite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,410 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!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>

prompts.txt ADDED Viewed

	@@ -0,0 +1,2 @@


1	+ non e' un app per android ed e' molto scarna questa e' un mappa non e' simile ad un navigatore satellitare
2	+ questo non ha nulla a vedere con android auto per automobile