Update app.py

app.py

@@ -1,10 +1,10 @@
-import flask
 from flask import Flask, Response, request, jsonify
+import requests
 import json
 import os
 import hmac
 import hashlib
-import urllib.parse
+from urllib.parse import unquote
 
 app = Flask(__name__)
 
@@ -16,7 +16,11 @@ def get_all_hotspots():
         return []
     try:
         with open(HOTSPOTS_FILE, 'r', encoding='utf-8') as f:
-            return json.load(f)
+            # Handle empty file case
+            content = f.read()
+            if not content:
+                return []
+            return json.loads(content)
     except (json.JSONDecodeError, FileNotFoundError):
         return []
 
@@ -40,12 +44,12 @@ def index():
         <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
         <style>
             :root {
-                --tg-bg-color: var(--tg-theme-bg-color, #ffffff);
-                --tg-text-color: var(--tg-theme-text-color, #000000);
-                --tg-hint-color: var(--tg-theme-hint-color, #999999);
+                --tg-bg-color: var(--tg-theme-bg-color, #000000);
+                --tg-text-color: var(--tg-theme-text-color, #ffffff);
                 --tg-button-color: var(--tg-theme-button-color, #007aff);
                 --tg-button-text-color: var(--tg-theme-button-text-color, #ffffff);
-                --tg-secondary-bg-color: var(--tg-theme-secondary-bg-color, #f0f0f0);
+                --tg-hint-color: var(--tg-theme-hint-color, #aaaaaa);
+                --tg-secondary-bg-color: var(--tg-theme-secondary-bg-color, #1c1c1d);
             }
             body, html {
                 margin: 0;
@@ -55,7 +59,7 @@ def index():
                 overflow: hidden;
                 background-color: var(--tg-bg-color);
                 color: var(--tg-text-color);
-                font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+                font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
             }
             #ar-container {
                 position: absolute;
@@ -76,22 +80,27 @@ def index():
             }
             .hotspot {
                 position: absolute;
-                background-color: var(--tg-button-color);
-                color: var(--tg-button-text-color);
+                background-color: rgba(0, 122, 255, 0.9);
+                color: white;
                 padding: 10px 15px;
-                border-radius: 10px;
-                box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+                border-radius: 12px;
+                border: 1px solid rgba(255, 255, 255, 0.3);
+                box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
                 transform: translate(-50%, -50%);
                 transition: opacity 0.3s, transform 0.1s linear;
                 white-space: nowrap;
                 font-size: 16px;
+                font-weight: 500;
                 will-change: transform, left, top, opacity;
                 z-index: 10;
                 text-align: center;
+                backdrop-filter: blur(10px);
+                -webkit-backdrop-filter: blur(10px);
             }
             .hotspot small {
-                font-size: 0.7em;
-                opacity: 0.8;
+                font-size: 0.75em;
+                font-weight: 400;
+                opacity: 0.85;
                 display: block;
                 margin-top: 5px;
             }
@@ -101,199 +110,177 @@ def index():
             }
             #map-container {
                 position: fixed;
-                bottom: calc(env(safe-area-inset-bottom, 0px) + 80px);
-                left: 10px;
+                bottom: 15px;
+                left: 15px;
                 width: 150px;
                 height: 150px;
-                background-color: rgba(0, 0, 0, 0.7);
-                border-radius: 10px;
+                background-color: var(--tg-secondary-bg-color);
+                border-radius: 20px;
                 overflow: hidden;
                 transition: all 0.3s ease;
                 z-index: 50;
                 display: flex;
                 flex-direction: column;
-                border: 1px solid var(--tg-hint-color);
+                box-shadow: 0 8px 32px rgba(0, 0, 0, 0.37);
+                border: 1px solid rgba(255, 255, 255, 0.1);
             }
             #map-container.fullscreen {
-                width: 100%;
-                height: 100%;
+                width: 100vw;
+                height: 100vh;
                 top: 0;
                 left: 0;
                 bottom: 0;
                 border-radius: 0;
-                justify-content: center;
-                align-items: center;
+                border: none;
             }
             #map {
                 flex-grow: 1;
                 width: 100%;
-                height: calc(100% - 30px);
+                height: 100%;
+            }
+            .leaflet-control-container .leaflet-control {
+                background-color: var(--tg-secondary-bg-color);
+                color: var(--tg-text-color);
+            }
+            .leaflet-popup-content-wrapper, .leaflet-popup-tip {
+                background-color: var(--tg-secondary-bg-color);
+                color: var(--tg-text-color);
             }
-            #map-container.fullscreen #map { height: 100%; }
             #toggle-map-button {
+                position: absolute;
+                top: 5px;
+                right: 5px;
                 background-color: rgba(0, 0, 0, 0.5);
                 color: white;
                 border: none;
                 padding: 5px;
-                cursor: pointer;
-                font-size: 12px;
-                align-self: center;
-                width: 100%;
-            }
-            #map-container.fullscreen #toggle-map-button {
-                position: absolute;
-                top: 10px;
-                right: 10px;
-                font-size: 16px;
-                width: auto;
-                border-radius: 5px;
-            }
-            #add-hotspot-button {
-                position: fixed;
-                bottom: calc(env(safe-area-inset-bottom, 0px) + 20px);
-                right: 20px;
-                width: 60px;
-                height: 60px;
-                background-color: var(--tg-button-color);
-                color: var(--tg-button-text-color);
                 border-radius: 50%;
-                border: none;
-                font-size: 36px;
-                line-height: 60px;
-                text-align: center;
-                box-shadow: 0 4px 10px rgba(0,0,0,0.25);
                 cursor: pointer;
-                z-index: 100;
+                font-size: 12px;
+                z-index: 1000;
+                width: 30px;
+                height: 30px;
             }
-            #modal-overlay {
+            #add-hotspot-modal {
                 position: fixed;
-                top: 0;
+                bottom: 0;
                 left: 0;
                 width: 100%;
-                height: 100%;
-                background: rgba(0,0,0,0.5);
-                z-index: 1000;
-                display: none;
-                align-items: center;
-                justify-content: center;
-            }
-            #modal-content {
-                background: var(--tg-secondary-bg-color);
+                background-color: var(--tg-secondary-bg-color);
+                z-index: 200;
                 padding: 20px;
-                border-radius: 12px;
-                width: 90%;
-                max-width: 400px;
-                box-shadow: 0 5px 15px rgba(0,0,0,0.3);
+                box-sizing: border-box;
+                border-top-left-radius: 20px;
+                border-top-right-radius: 20px;
+                transform: translateY(100%);
+                transition: transform 0.3s ease-out;
+                padding-bottom: calc(20px + env(safe-area-inset-bottom));
             }
-            #modal-content h3 {
-                margin-top: 0;
-                color: var(--tg-text-color);
+            #add-hotspot-modal.visible {
+                transform: translateY(0);
             }
-            #modal-input {
-                width: calc(100% - 20px);
-                padding: 10px;
+            #hotspot-input {
+                width: 100%;
+                padding: 12px;
+                border-radius: 10px;
                 border: 1px solid var(--tg-hint-color);
-                border-radius: 8px;
-                font-size: 16px;
-                margin-bottom: 15px;
                 background-color: var(--tg-bg-color);
                 color: var(--tg-text-color);
+                font-size: 16px;
+                margin-bottom: 10px;
+                box-sizing: border-box;
             }
-            #modal-buttons {
-                display: flex;
-                justify-content: space-between;
-            }
-            .modal-btn {
-                width: 48%;
-                padding: 12px;
+            #submit-hotspot {
+                width: 100%;
+                padding: 14px;
+                border-radius: 10px;
                 border: none;
-                border-radius: 8px;
+                background-color: var(--tg-button-color);
+                color: var(--tg-button-text-color);
                 font-size: 16px;
+                font-weight: bold;
                 cursor: pointer;
             }
-            #modal-save {
-                background: var(--tg-button-color);
-                color: var(--tg-button-text-color);
-            }
-            #modal-cancel {
-                background: var(--tg-hint-color);
-                color: var(--tg-text-color);
-            }
-            .loading-indicator {
+            #loading-overlay {
                 position: fixed;
-                top: 0; left: 0; width: 100%; height: 100%;
+                top: 0;
+                left: 0;
+                width: 100%;
+                height: 100%;
                 background-color: var(--tg-bg-color);
                 z-index: 9999;
                 display: flex;
                 align-items: center;
                 justify-content: center;
+                color: var(--tg-text-color);
                 font-size: 18px;
             }
         </style>
     </head>
     <body>
-        <div id="loading-indicator">Авторизация...</div>
+        <div id="loading-overlay">Загрузка...</div>
 
         <video id="camera-view" playsinline autoplay muted></video>
         <div id="ar-container"></div>
 
         <div id="map-container">
+            <button id="toggle-map-button">⛶</button>
             <div id="map"></div>
-            <button id="toggle-map-button">Карта</button>
         </div>
-        
-        <button id="add-hotspot-button">+</button>
-
-        <div id="modal-overlay">
-            <div id="modal-content">
-                <h3>Новый хотспот</h3>
-                <input type="text" id="modal-input" placeholder="Введите текст...">
-                <div id="modal-buttons">
-                    <button id="modal-cancel" class="modal-btn">Отмена</button>
-                    <button id="modal-save" class="modal-btn">Сохранить</button>
-                </div>
-            </div>
+
+        <div id="add-hotspot-modal">
+            <input type="text" id="hotspot-input" placeholder="Текст вашего хотспота...">
+            <button id="submit-hotspot">Оставить метку</button>
         </div>
 
         <script>
-            constWebApp = window.Telegram.WebApp;
-            WebApp.ready();
-            WebApp.expand();
-
+            const tg = window.Telegram.WebApp;
+            
             const state = {
                 hotspots: [],
                 currentUserPosition: null,
-                smoothedUserPosition: null,
-                deviceOrientation: { alpha: 0, beta: 0, gamma: 0 },
-                smoothedOrientation: { alpha: 0, beta: 0, gamma: 0 },
+                currentUser: null,
+                deviceOrientation: { alpha: 0, beta: 0, gamma: 0, absolute: false },
                 cameraFov: 60,
                 map: null,
                 userMarker: null,
                 hotspotMarkers: [],
-                initialMapSet: false,
-                currentUser: null,
+                initialMapSet: false
             };
 
-            const MAX_VISIBLE_DISTANCE = 10000;
-            const GPS_SMOOTHING_FACTOR = 0.1;
-            const ORIENTATION_SMOOTHING_FACTOR = 0.1;
+            const MAX_VISIBLE_DISTANCE = 500;
+            const SMOOTHING_FACTOR = 0.1;
 
-            function applyEMA(current, previous, factor) {
-                if (previous === null) return current;
-                return factor * current + (1 - factor) * previous;
-            }
+            async function main() {
+                tg.ready();
+                tg.expand();
+                tg.MainButton.hide();
+
+                if (!tg.initData) {
+                    document.getElementById('loading-overlay').innerText = "Ошибка: не удалось получить данные Telegram.";
+                    return;
+                }
 
-            function applyAngleEMA(current, previous, factor) {
-                if (previous === null) return current;
-                let diff = current - previous;
-                if (diff > 180) diff -= 360;
-                if (diff < -180) diff += 360;
-                let newAngle = previous + factor * diff;
-                return (newAngle + 360) % 360;
+                try {
+                    const res = await fetch('/validate_init_data', {
+                        method: 'POST',
+                        headers: { 'Content-Type': 'application/json' },
+                        body: JSON.stringify({ init_data: tg.initData })
+                    });
+                    if (!res.ok) throw new Error('Validation failed');
+                    
+                    const userData = await res.json();
+                    state.currentUser = userData.user;
+                    
+                    document.getElementById('loading-overlay').style.display = 'none';
+                    initArApp();
+                } catch (e) {
+                    document.getElementById('loading-overlay').innerText = `Ошибка авторизации: ${e.message}`;
+                    console.error(e);
+                }
             }
 
             async function initArApp() {
-                document.getElementById('loading-indicator').style.display = 'none';
                 await setupCamera();
                 setupGPS();
                 setupOrientationListener();
@@ -303,30 +290,6 @@ def index():
                 requestAnimationFrame(update);
             }
 
-            async function authenticate() {
-                if (!WebApp.initData) {
-                    document.getElementById('loading-indicator').innerText = 'Ошибка: не Telegram-контекст';
-                    return;
-                }
-                try {
-                    const res = await fetch('/validate_auth', {
-                        method: 'POST',
-                        headers: { 'Content-Type': 'application/json' },
-                        body: JSON.stringify({ initData: WebApp.initData })
-                    });
-                    if (!res.ok) {
-                        throw new Error(`Auth failed: ${res.statusText}`);
-                    }
-                    const user = await res.json();
-                    state.currentUser = user;
-                    initArApp();
-                } catch (e) {
-                    document.getElementById('loading-indicator').innerText = `Ошибка авторизации: ${e.message}`;
-                }
-            }
-            
-            authenticate();
-
             async function setupCamera() {
                 const video = document.getElementById('camera-view');
                 if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
@@ -337,7 +300,7 @@ def index():
                         video.srcObject = stream;
                         await video.play();
                     } catch (err) {
-                        WebApp.showAlert('Не удалось получить доступ к камере: ' + err);
+                        alert('Не удалось получить доступ к камере: ' + err);
                     }
                 }
             }
@@ -348,66 +311,81 @@ def index():
                         (position) => {
                             state.currentUserPosition = {
                                 lat: position.coords.latitude,
-                                lon: position.coords.longitude
+                                lon: position.coords.longitude,
+                                accuracy: position.coords.accuracy
                             };
-                            
-                            const prevSmoothed = state.smoothedUserPosition;
-                            const newLat = applyEMA(state.currentUserPosition.lat, prevSmoothed ? prevSmoothed.lat : null, GPS_SMOOTHING_FACTOR);
-                            const newLon = applyEMA(state.currentUserPosition.lon, prevSmoothed ? prevSmoothed.lon : null, GPS_SMOOTHING_FACTOR);
-                            state.smoothedUserPosition = { lat: newLat, lon: newLon };
-
                             if (state.userMarker) {
-                                state.userMarker.setLatLng([newLat, newLon]);
+                                state.userMarker.setLatLng([state.currentUserPosition.lat, state.currentUserPosition.lon]);
                                 if (!state.initialMapSet) {
-                                    state.map.setView([newLat, newLon], 15);
+                                    state.map.setView([state.currentUserPosition.lat, state.currentUserPosition.lon], 16);
                                     state.initialMapSet = true;
                                 }
                             }
                         },
                         (error) => {
-                            WebApp.showAlert('Не удалось получить доступ к GPS: ' + error.message);
+                            alert('Не удалось получить доступ к GPS: ' + error.message);
                         },
                         { enableHighAccuracy: true, maximumAge: 1000, timeout: 5000 }
                     );
                 } else {
-                    WebApp.showAlert('GPS не поддерживается вашим браузером.');
+                    alert('GPS не поддерживается вашим браузером.');
                 }
             }
             
             function setupOrientationListener() {
-                if (window.DeviceOrientationEvent) {
-                    window.addEventListener('deviceorientationabsolute', (event) => {
-                         if (event.alpha !== null) {
-                           state.deviceOrientation.alpha = event.alpha;
-                           state.deviceOrientation.beta = event.beta;
-                           state.deviceOrientation.gamma = event.gamma;
-                           
-                           state.smoothedOrientation.alpha = applyAngleEMA(event.alpha, state.smoothedOrientation.alpha, ORIENTATION_SMOOTHING_FACTOR);
-                           state.smoothedOrientation.beta = applyEMA(event.beta, state.smoothedOrientation.beta, ORIENTATION_SMOOTHING_FACTOR);
-                           state.smoothedOrientation.gamma = applyEMA(event.gamma, state.smoothedOrientation.gamma, ORIENTATION_SMOOTHING_FACTOR);
-                        }
-                    }, true);
+                const handleOrientation = (event) => {
+                    if (event.alpha !== null) {
+                       state.deviceOrientation.alpha = event.alpha;
+                       state.deviceOrientation.beta = event.beta;
+                       state.deviceOrientation.gamma = event.gamma;
+                       state.deviceOrientation.absolute = event.absolute;
+                    }
+                };
+            
+                if ('DeviceOrientationEvent' in window && typeof DeviceOrientationEvent.requestPermission === 'function') {
+                    DeviceOrientationEvent.requestPermission()
+                        .then(permissionState => {
+                            if (permissionState === 'granted') {
+                                window.addEventListener('deviceorientationabsolute', handleOrientation, true);
+                            } else {
+                                alert('Доступ к ориентации устройства не предоставлен.');
+                            }
+                        })
+                        .catch(console.error);
                 } else {
-                    WebApp.showAlert('Отслеживание ориентации устройства не поддерживается.');
+                     window.addEventListener('deviceorientationabsolute', handleOrientation, true);
+                     window.addEventListener('deviceorientation', (e) => {
+                         if (!state.deviceOrientation.absolute) handleOrientation(e);
+                     }, true);
                 }
             }
 
             function initMap() {
-                state.map = L.map('map').setView([0, 0], 2);
+                state.map = L.map('map', { zoomControl: false }).setView([0, 0], 2);
                 L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
-                    attribution: '© OpenStreetMap'
+                    attribution: '© OpenStreetMap',
+                    crossOrigin: true
                 }).addTo(state.map);
-                state.userMarker = L.marker([0, 0]).addTo(state.map).bindPopup('Вы здесь');
+                
+                const userIcon = L.divIcon({
+                    html: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="'+tg.themeParams.button_color+'" d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/><path fill="none" d="M0 0h24v24H0z"/></svg>',
+                    className: '',
+                    iconSize: [24, 24],
+                    iconAnchor: [12, 24]
+                });
+
+                state.userMarker = L.marker([0, 0], { icon: userIcon }).addTo(state.map).bindPopup('Вы здесь');
                 document.getElementById('toggle-map-button').addEventListener('click', toggleMap);
             }
 
-            function toggleMap() {
+            function toggleMap(e) {
+                e.stopPropagation();
                 const mapContainer = document.getElementById('map-container');
                 mapContainer.classList.toggle('fullscreen');
                 setTimeout(() => {
                     state.map.invalidateSize();
-                    if (state.smoothedUserPosition) {
-                        state.map.setView([state.smoothedUserPosition.lat, state.smoothedUserPosition.lon], state.map.getZoom());
+                    if (state.currentUserPosition) {
+                        state.map.setView([state.currentUserPosition.lat, state.currentUserPosition.lon], state.map.getZoom());
                     }
                 }, 300);
             }
@@ -416,7 +394,7 @@ def index():
                 try {
                     const response = await fetch('/hotspots');
                     const data = await response.json();
-                    state.hotspots = data;
+                    state.hotspots = data.map(h => ({ ...h, smoothedAngleDiff: 0 }));
                     renderHotspots();
                     renderHotspotsOnMap();
                 } catch (error) {
@@ -431,7 +409,7 @@ def index():
                     const el = document.createElement('div');
                     el.className = 'hotspot';
                     el.id = `hotspot-${index}`;
-                    el.innerHTML = `${hotspot.text}<br><small>by ${hotspot.creator_name || 'Unknown'}</small>`;
+                    el.innerHTML = `${hotspot.text}<br><small>@${hotspot.creator_username || 'anonymous'}</small>`;
                     container.appendChild(el);
                 });
             }
@@ -440,43 +418,50 @@ def index():
                 if (!state.map) return;
                 state.hotspotMarkers.forEach(marker => state.map.removeLayer(marker));
                 state.hotspotMarkers = [];
-
                 state.hotspots.forEach(hotspot => {
                     const marker = L.marker([hotspot.lat, hotspot.lon])
                                    .addTo(state.map)
-                                   .bindPopup(`${hotspot.text}<br>by ${hotspot.creator_name || 'Unknown'}`);
+                                   .bindPopup(`${hotspot.text}<br>@${hotspot.creator_username || 'anonymous'}`);
                     state.hotspotMarkers.push(marker);
                 });
             }
-            
+
             function setupAddHotspotListener() {
-                const modalOverlay = document.getElementById('modal-overlay');
-                const modalInput = document.getElementById('modal-input');
+                const container = document.getElementById('ar-container');
+                const modal = document.getElementById('add-hotspot-modal');
+                const input = document.getElementById('hotspot-input');
+                const submitBtn = document.getElementById('submit-hotspot');
 
-                document.getElementById('add-hotspot-button').addEventListener('click', () => {
-                    if (!state.smoothedUserPosition) {
-                        WebApp.showAlert('GPS-координаты еще не определены. Подождите немного.');
+                container.addEventListener('click', (event) => {
+                    if (event.target !== container) return;
+                    
+                    if (!state.currentUserPosition) {
+                        tg.showAlert('GPS-координаты еще не определены. Подождите немного.');
                         return;
                     }
-                    modalInput.value = '';
-                    modalOverlay.style.display = 'flex';
-                    modalInput.focus();
+                    if (state.currentUserPosition.accuracy > 20) {
+                        tg.showAlert(`Точность GPS слишком низкая (${Math.round(state.currentUserPosition.accuracy)}м). Попробуйте найти открытое пространство.`);
+                        return;
+                    }
+                    modal.classList.add('visible');
+                    input.focus();
                 });
-
-                document.getElementById('modal-cancel').addEventListener('click', () => {
-                    modalOverlay.style.display = 'none';
+                
+                document.body.addEventListener('click', (e) => {
+                    if (modal.classList.contains('visible') && !modal.contains(e.target)) {
+                         modal.classList.remove('visible');
+                    }
                 });
 
-                document.getElementById('modal-save').addEventListener('click', async () => {
-                    const text = modalInput.value.trim();
+                submitBtn.addEventListener('click', async () => {
+                    const text = input.value.trim();
                     if (text) {
-                        modalOverlay.style.display = 'none';
                         const newHotspot = {
                             text: text,
-                            lat: state.smoothedUserPosition.lat,
-                            lon: state.smoothedUserPosition.lon,
+                            lat: state.currentUserPosition.lat,
+                            lon: state.currentUserPosition.lon,
                             creator_id: state.currentUser.id,
-                            creator_name: state.currentUser.first_name
+                            creator_username: state.currentUser.username || `${state.currentUser.first_name}`.trim()
                         };
 
                         try {
@@ -486,17 +471,19 @@ def index():
                                 body: JSON.stringify(newHotspot)
                             });
                             if(response.ok) {
-                                const savedHotspot = await response.json();
-                                state.hotspots.push(savedHotspot.hotspot);
+                                const savedHotspotData = await response.json();
+                                const savedHotspot = { ...savedHotspotData.hotspot, smoothedAngleDiff: 0 };
+                                state.hotspots.push(savedHotspot);
                                 renderHotspots();
                                 renderHotspotsOnMap();
-                                WebApp.HapticFeedback.notificationOccurred('success');
+                                input.value = '';
+                                modal.classList.remove('visible');
                             } else {
-                                WebApp.showAlert('Не удалось сохранить хотспот.');
+                                tg.showAlert('Не удалось сохранить хотспот.');
                             }
                         } catch (error) {
                             console.error('Ошибка сохранения хотспота:', error);
-                            WebApp.showAlert('Ошибка сети при сохранении хотспота.');
+                            tg.showAlert('Ошибка сети при сохранении хотспота.');
                         }
                     }
                 });
@@ -504,7 +491,7 @@ def index():
 
             function haversineDistance(coords1, coords2) {
                 function toRad(x) { return x * Math.PI / 180; }
-                const R = 6371;
+                const R = 6371000;
                 const dLat = toRad(coords2.lat - coords1.lat);
                 const dLon = toRad(coords2.lon - coords1.lon);
                 const lat1 = toRad(coords1.lat);
@@ -512,7 +499,7 @@ def index():
                 const a = Math.sin(dLat / 2) * Math.sin(dLat / 2) +
                           Math.sin(dLon / 2) * Math.sin(dLon / 2) * Math.cos(lat1) * Math.cos(lat2);
                 const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
-                return R * c * 1000;
+                return R * c;
             }
 
             function calculateBearing(start, end) {
@@ -529,82 +516,92 @@ def index():
             }
 
             function update() {
-                if (!state.smoothedUserPosition) {
-                    requestAnimationFrame(update);
-                    return;
-                }
+                requestAnimationFrame(update);
+                if (!state.currentUserPosition) return;
                 
                 const screenWidth = window.innerWidth;
                 const screenHeight = window.innerHeight;
-
+                
                 state.hotspots.forEach((hotspot, index) => {
                     const el = document.getElementById(`hotspot-${index}`);
                     if (!el) return;
 
-                    const distance = haversineDistance(state.smoothedUserPosition, hotspot);
+                    const distance = haversineDistance(state.currentUserPosition, hotspot);
                     
                     if (distance > MAX_VISIBLE_DISTANCE) {
                         el.classList.add('hidden');
                         return;
                     }
 
-                    const bearing = calculateBearing(state.smoothedUserPosition, hotspot);
-                    let angleDiff = bearing - state.smoothedOrientation.alpha;
+                    const bearing = calculateBearing(state.currentUserPosition, hotspot);
+                    let angleDiff = bearing - state.deviceOrientation.alpha;
 
                     if (angleDiff > 180) angleDiff -= 360;
                     if (angleDiff < -180) angleDiff += 360;
+                    
+                    const currentSmoothed = hotspot.smoothedAngleDiff;
+                    let delta = angleDiff - currentSmoothed;
+                    if (delta > 180) delta -= 360;
+                    if (delta < -180) delta += 360;
 
-                    if (Math.abs(angleDiff) > state.cameraFov / 2) {
+                    hotspot.smoothedAngleDiff = currentSmoothed + delta * SMOOTHING_FACTOR;
+                    const smoothedAngle = hotspot.smoothedAngleDiff;
+
+                    if (Math.abs(smoothedAngle) > state.cameraFov / 2) {
                         el.classList.add('hidden');
                     } else {
                         el.classList.remove('hidden');
                         
-                        const x = screenWidth / 2 + (angleDiff / (state.cameraFov / 2)) * (screenWidth / 2);
-                        const y = screenHeight / 2;
-                        const scale = Math.max(0.5, 1 - distance / MAX_VISIBLE_DISTANCE);
+                        const x = screenWidth / 2 + (smoothedAngle / (state.cameraFov / 2)) * (screenWidth / 2);
+                        const y = screenHeight / 2 - (state.deviceOrientation.beta - 90) * 2;
+                        
+                        const scale = Math.max(0.4, 1.2 - distance / MAX_VISIBLE_DISTANCE);
 
                         el.style.left = `${x}px`;
                         el.style.top = `${y}px`;
                         el.style.transform = `translate(-50%, -50%) scale(${scale})`;
-                        el.style.zIndex = Math.round(1000 - distance);
+                        el.style.zIndex = Math.round(10000 - distance);
                     }
                 });
-                
-                requestAnimationFrame(update);
             }
+            
+            main();
+
         </script>
     </body>
     </html>
     '''
     return Response(html_content, mimetype='text/html')
 
-@app.route('/validate_auth', methods=['POST'])
-def validate_auth():
-    data = request.get_json()
-    init_data_str = data.get('initData')
-    if not init_data_str:
-        return jsonify({"error": "No initData provided"}), 400
 
-    params = dict(urllib.parse.parse_qsl(init_data_str))
-    
-    hash_from_telegram = params.pop('hash', None)
-    if not hash_from_telegram:
-        return jsonify({"error": "No hash found in initData"}), 400
+@app.route('/validate_init_data', methods=['POST'])
+def validate_init_data():
+    try:
+        data = request.get_json()
+        init_data_str = data.get('init_data')
+        
+        if not init_data_str:
+            return jsonify({"error": "No init_data provided"}), 400
 
-    data_check_string = "\n".join(sorted([f"{k}={v}" for k, v in params.items()]))
+        params = {k: unquote(v) for k, v in [pair.split('=', 1) for pair in init_data_str.split('&')]}
+        
+        hash_from_telegram = params.pop('hash', None)
+        if not hash_from_telegram:
+            return jsonify({"error": "No hash found in init_data"}), 400
 
-    secret_key = hmac.new("WebAppData".encode(), BOT_TOKEN.encode(), hashlib.sha256).digest()
-    h = hmac.new(secret_key, data_check_string.encode(), hashlib.sha256)
-    calculated_hash = h.hexdigest()
+        data_check_string = "\n".join(sorted([f"{k}={v}" for k, v in params.items()]))
 
-    if calculated_hash == hash_from_telegram:
-        try:
+        secret_key = hmac.new(key=b"WebAppData", msg=BOT_TOKEN.encode(), digestmod=hashlib.sha256).digest()
+        calculated_hash = hmac.new(key=secret_key, msg=data_check_string.encode(), digestmod=hashlib.sha256).hexdigest()
+
+        if calculated_hash == hash_from_telegram:
             user_data = json.loads(params.get('user', '{}'))
-            return jsonify(user_data)
-        except json.JSONDecodeError:
-            return jsonify({"error": "Invalid user data"}), 400
-    else:
-        return jsonify({"error": "Invalid hash"}), 403
+            return jsonify({"status": "ok", "user": user_data})
+        else:
+            return jsonify({"error": "Invalid hash"}), 403
+
+    except Exception as e:
+        return jsonify({"error": str(e)}), 500
 
 @app.route('/hotspots', methods=['GET', 'POST'])
 def handle_hotspots():
@@ -620,9 +617,9 @@ def handle_hotspots():
         lat = data.get('lat')
         lon = data.get('lon')
         creator_id = data.get('creator_id')
-        creator_name = data.get('creator_name')
+        creator_username = data.get('creator_username')
 
-        if not all([text, lat is not None, lon is not None, creator_id, creator_name]):
+        if not all([text, lat is not None, lon is not None, creator_id]):
             return jsonify({"error": "Missing required data"}), 400
         
         try:
@@ -631,12 +628,12 @@ def handle_hotspots():
                 "lat": float(lat),
                 "lon": float(lon),
                 "creator_id": int(creator_id),
-                "creator_name": str(creator_name)
+                "creator_username": str(creator_username)
             }
             save_hotspot(new_hotspot)
             return jsonify({"success": True, "hotspot": new_hotspot}), 201
-        except (ValueError, TypeError):
-            return jsonify({"error": "Invalid data types"}), 400
+        except (ValueError, TypeError) as e:
+            return jsonify({"error": f"Invalid data types: {e}"}), 400
 
 if __name__ == '__main__':
     app.run(host='0.0.0.0', port=7860, debug=False)