Update app.py

app.py

@@ -1,5 +1,4 @@
 from flask import Flask, Response, request, jsonify
-import requests
 import json
 import os
 import hmac
@@ -16,11 +15,7 @@ def get_all_hotspots():
         return []
     try:
         with open(HOTSPOTS_FILE, 'r', encoding='utf-8') as f:
-            # Handle empty file case
-            content = f.read()
-            if not content:
-                return []
-            return json.loads(content)
+            return json.load(f)
     except (json.JSONDecodeError, FileNotFoundError):
         return []
 
@@ -30,6 +25,34 @@ def save_hotspot(new_hotspot):
     with open(HOTSPOTS_FILE, 'w', encoding='utf-8') as f:
         json.dump(hotspots, f, ensure_ascii=False, indent=4)
 
+def is_data_safe(init_data: str) -> (bool, dict):
+    try:
+        encoded_data = unquote(init_data)
+        data_check_string = []
+        recieved_hash = ''
+        
+        for pair in encoded_data.split('&'):
+            key, value = pair.split('=', 1)
+            if key == 'hash':
+                recieved_hash = value
+            else:
+                data_check_string.append(f"{key}={value}")
+        
+        data_check_string.sort()
+        data_check_string = "\n".join(data_check_string)
+
+        secret_key = hmac.new("WebAppData".encode(), BOT_TOKEN.encode(), hashlib.sha256).digest()
+        calculated_hash = hmac.new(secret_key, data_check_string.encode(), hashlib.sha256).hexdigest()
+
+        if calculated_hash == recieved_hash:
+            data = {k: v for k, v in [pair.split('=', 1) for pair in encoded_data.split('&')]}
+            user_data = json.loads(unquote(data['user']))
+            return True, user_data
+        return False, None
+
+    except Exception:
+        return False, None
+
 @app.route('/')
 def index():
     html_content = '''
@@ -44,12 +67,11 @@ def index():
         <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
         <style>
             :root {
-                --tg-bg-color: var(--tg-theme-bg-color, #000000);
-                --tg-text-color: var(--tg-theme-text-color, #ffffff);
+                --tg-bg-color: var(--tg-theme-bg-color, #000);
+                --tg-text-color: var(--tg-theme-text-color, #fff);
+                --tg-hint-color: var(--tg-theme-hint-color, #aaa);
                 --tg-button-color: var(--tg-theme-button-color, #007aff);
-                --tg-button-text-color: var(--tg-theme-button-text-color, #ffffff);
-                --tg-hint-color: var(--tg-theme-hint-color, #aaaaaa);
-                --tg-secondary-bg-color: var(--tg-theme-secondary-bg-color, #1c1c1d);
+                --tg-button-text-color: var(--tg-theme-button-text-color, #fff);
             }
             body, html {
                 margin: 0;
@@ -59,7 +81,7 @@ def index():
                 overflow: hidden;
                 background-color: var(--tg-bg-color);
                 color: var(--tg-text-color);
-                font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+                font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
             }
             #ar-container {
                 position: absolute;
@@ -80,11 +102,11 @@ def index():
             }
             .hotspot {
                 position: absolute;
-                background-color: rgba(0, 122, 255, 0.9);
+                background-color: rgba(0, 122, 255, 0.85);
                 color: white;
                 padding: 10px 15px;
                 border-radius: 12px;
-                border: 1px solid rgba(255, 255, 255, 0.3);
+                border: 1px solid rgba(255, 255, 255, 0.5);
                 box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
                 transform: translate(-50%, -50%);
                 transition: opacity 0.3s, transform 0.1s linear;
@@ -94,15 +116,15 @@ def index():
                 will-change: transform, left, top, opacity;
                 z-index: 10;
                 text-align: center;
-                backdrop-filter: blur(10px);
-                -webkit-backdrop-filter: blur(10px);
+                backdrop-filter: blur(5px);
+                -webkit-backdrop-filter: blur(5px);
             }
             .hotspot small {
                 font-size: 0.75em;
-                font-weight: 400;
                 opacity: 0.85;
                 display: block;
                 margin-top: 5px;
+                font-weight: 400;
             }
             .hotspot.hidden {
                 opacity: 0;
@@ -110,19 +132,17 @@ def index():
             }
             #map-container {
                 position: fixed;
-                bottom: 15px;
-                left: 15px;
-                width: 150px;
+                bottom: 20px;
+                left: 50%;
+                transform: translateX(-50%);
+                width: 220px;
                 height: 150px;
-                background-color: var(--tg-secondary-bg-color);
-                border-radius: 20px;
+                border-radius: 15px;
                 overflow: hidden;
-                transition: all 0.3s ease;
+                transition: all 0.3s ease-in-out;
                 z-index: 50;
-                display: flex;
-                flex-direction: column;
-                box-shadow: 0 8px 32px rgba(0, 0, 0, 0.37);
-                border: 1px solid rgba(255, 255, 255, 0.1);
+                border: 1px solid var(--tg-hint-color);
+                box-shadow: 0 5px 25px rgba(0,0,0,0.5);
             }
             #map-container.fullscreen {
                 width: 100vw;
@@ -131,155 +151,69 @@ def index():
                 left: 0;
                 bottom: 0;
                 border-radius: 0;
+                transform: none;
                 border: none;
             }
             #map {
-                flex-grow: 1;
                 width: 100%;
                 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);
-            }
-            #toggle-map-button {
-                position: absolute;
-                top: 5px;
-                right: 5px;
-                background-color: rgba(0, 0, 0, 0.5);
-                color: white;
-                border: none;
-                padding: 5px;
-                border-radius: 50%;
-                cursor: pointer;
-                font-size: 12px;
-                z-index: 1000;
-                width: 30px;
-                height: 30px;
+            .leaflet-control-container .leaflet-control-attribution {
+                 display: none;
             }
-            #add-hotspot-modal {
+            #welcome-message {
                 position: fixed;
-                bottom: 0;
-                left: 0;
-                width: 100%;
-                background-color: var(--tg-secondary-bg-color);
-                z-index: 200;
-                padding: 20px;
-                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));
-            }
-            #add-hotspot-modal.visible {
-                transform: translateY(0);
-            }
-            #hotspot-input {
-                width: 100%;
-                padding: 12px;
-                border-radius: 10px;
-                border: 1px solid var(--tg-hint-color);
-                background-color: var(--tg-bg-color);
-                color: var(--tg-text-color);
-                font-size: 16px;
-                margin-bottom: 10px;
-                box-sizing: border-box;
-            }
-            #submit-hotspot {
-                width: 100%;
-                padding: 14px;
-                border-radius: 10px;
-                border: none;
-                background-color: var(--tg-button-color);
-                color: var(--tg-button-text-color);
-                font-size: 16px;
-                font-weight: bold;
-                cursor: pointer;
-            }
-            #loading-overlay {
-                position: fixed;
-                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;
+                top: 20px;
+                left: 50%;
+                transform: translateX(-50%);
+                background-color: rgba(0,0,0,0.6);
+                padding: 8px 15px;
+                border-radius: 20px;
+                z-index: 51;
+                font-size: 14px;
+                backdrop-filter: blur(5px);
             }
         </style>
     </head>
     <body>
-        <div id="loading-overlay">Загрузка...</div>
-
+        <div id="welcome-message"></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>
         </div>
 
-        <div id="add-hotspot-modal">
-            <input type="text" id="hotspot-input" placeholder="Текст вашего хотспота...">
-            <button id="submit-hotspot">Оставить метку</button>
-        </div>
-
         <script>
             const tg = window.Telegram.WebApp;
-            
+            tg.ready();
+            tg.expand();
+
             const state = {
                 hotspots: [],
                 currentUserPosition: null,
-                currentUser: null,
-                deviceOrientation: { alpha: 0, beta: 0, gamma: 0, absolute: false },
+                deviceOrientation: { alpha: 0, beta: 0, gamma: 0 },
+                smoothedAlpha: 0,
+                smoothingFactor: 0.05,
                 cameraFov: 60,
                 map: null,
                 userMarker: null,
                 hotspotMarkers: [],
-                initialMapSet: false
+                initialMapSet: false,
+                userInfo: tg.initDataUnsafe.user || {}
             };
 
-            const MAX_VISIBLE_DISTANCE = 500;
-            const SMOOTHING_FACTOR = 0.1;
-
-            async function main() {
-                tg.ready();
-                tg.expand();
-                tg.MainButton.hide();
+            const MAX_VISIBLE_DISTANCE = 1000;
 
-                if (!tg.initData) {
-                    document.getElementById('loading-overlay').innerText = "Ошибка: не удалось получить данные Telegram.";
-                    return;
-                }
-
-                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);
-                }
+            function formatUserName(user) {
+                if (!user) return "Аноним";
+                let name = user.first_name || '';
+                if (user.last_name) name += ` ${user.last_name}`;
+                if (user.username) name += ` (@${user.username})`;
+                return name.trim();
             }
 
+            document.getElementById('welcome-message').innerText = `Привет, ${state.userInfo.first_name || 'пользователь'}!`;
+
             async function initArApp() {
                 await setupCamera();
                 setupGPS();
@@ -300,7 +234,7 @@ def index():
                         video.srcObject = stream;
                         await video.play();
                     } catch (err) {
-                        alert('Не удалось получить доступ к камере: ' + err);
+                        tg.showAlert('Не удалось получить доступ к камере: ' + err.message);
                     }
                 }
             }
@@ -311,8 +245,7 @@ def index():
                         (position) => {
                             state.currentUserPosition = {
                                 lat: position.coords.latitude,
-                                lon: position.coords.longitude,
-                                accuracy: position.coords.accuracy
+                                lon: position.coords.longitude
                             };
                             if (state.userMarker) {
                                 state.userMarker.setLatLng([state.currentUserPosition.lat, state.currentUserPosition.lon]);
@@ -323,12 +256,12 @@ def index():
                             }
                         },
                         (error) => {
-                            alert('Не удалось получить доступ к GPS: ' + error.message);
+                            tg.showAlert('Не удалось получить доступ к GPS: ' + error.message);
                         },
-                        { enableHighAccuracy: true, maximumAge: 1000, timeout: 5000 }
+                        { enableHighAccuracy: true, maximumAge: 0, timeout: 5000 }
                     );
                 } else {
-                    alert('GPS не поддерживается вашим браузером.');
+                    tg.showAlert('GPS не поддерживается вашим устройством.');
                 }
             }
             
@@ -338,67 +271,69 @@ def index():
                        state.deviceOrientation.alpha = event.alpha;
                        state.deviceOrientation.beta = event.beta;
                        state.deviceOrientation.gamma = event.gamma;
-                       state.deviceOrientation.absolute = event.absolute;
+                       
+                       let alpha = event.webkitCompassHeading || event.alpha;
+                       let diff = alpha - state.smoothedAlpha;
+                       if (diff > 180) diff -= 360;
+                       if (diff < -180) diff += 360;
+                       
+                       state.smoothedAlpha += state.smoothingFactor * diff;
+                       state.smoothedAlpha = (state.smoothedAlpha + 360) % 360;
                     }
                 };
-            
-                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);
+                
+                if (window.DeviceOrientationEvent) {
+                    if (typeof DeviceOrientationEvent.requestPermission === 'function') {
+                        DeviceOrientationEvent.requestPermission()
+                            .then(permissionState => {
+                                if (permissionState === 'granted') {
+                                    window.addEventListener('deviceorientation', handleOrientation, true);
+                                } else {
+                                    tg.showAlert('Доступ к ориентации устройства отклонен.');
+                                }
+                            })
+                            .catch(console.error);
+                    } else {
+                        window.addEventListener('deviceorientation', handleOrientation, true);
+                    }
                 } else {
-                     window.addEventListener('deviceorientationabsolute', handleOrientation, true);
-                     window.addEventListener('deviceorientation', (e) => {
-                         if (!state.deviceOrientation.absolute) handleOrientation(e);
-                     }, true);
+                    tg.showAlert('Отслеживание ориентации устройства не поддерживается.');
                 }
             }
 
             function initMap() {
                 state.map = L.map('map', { zoomControl: false }).setView([0, 0], 2);
-                L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
-                    attribution: '© OpenStreetMap',
-                    crossOrigin: true
-                }).addTo(state.map);
+                L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(state.map);
                 
-                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]
+                var userIcon = L.divIcon({
+                    className: 'user-location-dot',
+                    html: '<div style="background-color: #007aff; width: 12px; height: 12px; border-radius: 50%; border: 2px solid white;"></div>',
+                    iconSize: [16, 16],
+                    iconAnchor: [8, 8]
+                });
+                state.userMarker = L.marker([0, 0], { icon: userIcon }).addTo(state.map);
+
+                document.getElementById('map-container').addEventListener('click', () => {
+                    const mapContainer = document.getElementById('map-container');
+                    mapContainer.classList.toggle('fullscreen');
+                    setTimeout(() => {
+                        state.map.invalidateSize();
+                        if (state.currentUserPosition) {
+                            state.map.setView([state.currentUserPosition.lat, state.currentUserPosition.lon], state.map.getZoom());
+                        }
+                    }, 310);
                 });
-
-                state.userMarker = L.marker([0, 0], { icon: userIcon }).addTo(state.map).bindPopup('Вы здесь');
-                document.getElementById('toggle-map-button').addEventListener('click', toggleMap);
-            }
-
-            function toggleMap(e) {
-                e.stopPropagation();
-                const mapContainer = document.getElementById('map-container');
-                mapContainer.classList.toggle('fullscreen');
-                setTimeout(() => {
-                    state.map.invalidateSize();
-                    if (state.currentUserPosition) {
-                        state.map.setView([state.currentUserPosition.lat, state.currentUserPosition.lon], state.map.getZoom());
-                    }
-                }, 300);
             }
 
             async function loadHotspots() {
                 try {
                     const response = await fetch('/hotspots');
                     const data = await response.json();
-                    state.hotspots = data.map(h => ({ ...h, smoothedAngleDiff: 0 }));
+                    state.hotspots = data;
                     renderHotspots();
                     renderHotspotsOnMap();
                 } catch (error) {
-                    console.error('Ошибка загрузки хотспотов:', error);
+                    tg.showAlert('Ошибка загрузки хотспотов: ' + error.message);
                 }
             }
 
@@ -409,86 +344,82 @@ def index():
                     const el = document.createElement('div');
                     el.className = 'hotspot';
                     el.id = `hotspot-${index}`;
-                    el.innerHTML = `${hotspot.text}<br><small>@${hotspot.creator_username || 'anonymous'}</small>`;
+                    el.innerHTML = `${hotspot.text}<br><small>by ${hotspot.creator_info || 'Unknown'}</small>`;
                     container.appendChild(el);
                 });
             }
 
             function renderHotspotsOnMap() {
                 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>@${hotspot.creator_username || 'anonymous'}`);
+                                   .bindPopup(`<b>${hotspot.text}</b><br>by ${hotspot.creator_info || 'Unknown'}`);
                     state.hotspotMarkers.push(marker);
                 });
             }
 
             function setupAddHotspotListener() {
-                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');
-
-                container.addEventListener('click', (event) => {
-                    if (event.target !== container) return;
-                    
-                    if (!state.currentUserPosition) {
-                        tg.showAlert('GPS-координаты еще не определены. Подождите немного.');
-                        return;
-                    }
-                    if (state.currentUserPosition.accuracy > 20) {
-                        tg.showAlert(`Точность GPS слишком низкая (${Math.round(state.currentUserPosition.accuracy)}м). Попробуйте найти открытое пространство.`);
-                        return;
-                    }
-                    modal.classList.add('visible');
-                    input.focus();
+                document.body.addEventListener('dblclick', (event) => {
+                     if (event.target.closest('#map-container')) return;
+                     
+                     tg.showPopup({
+                        title: 'Новый хотспот',
+                        message: 'Введите текст для новой AR-метки. Она будет создана в вашем текущем местоположении.',
+                        buttons: [
+                            {id: 'create', type: 'default', text: 'Создать'},
+                            {type: 'cancel'},
+                        ]
+                    }, async (buttonId) => {
+                        if (buttonId === 'create') {
+                            const text = prompt("Введите текст для хотспота:");
+                             if (text && text.trim() !== '') {
+                                await createHotspot(text.trim());
+                            }
+                        }
+                    });
                 });
+            }
+
+            async function createHotspot(text) {
+                if (!state.currentUserPosition) {
+                    tg.showAlert('GPS-координаты еще не определены. Подождите и попробуйте снова.');
+                    return;
+                }
                 
-                document.body.addEventListener('click', (e) => {
-                    if (modal.classList.contains('visible') && !modal.contains(e.target)) {
-                         modal.classList.remove('visible');
-                    }
-                });
+                const newHotspotData = {
+                    text: text,
+                    lat: state.currentUserPosition.lat,
+                    lon: state.currentUserPosition.lon,
+                    initData: tg.initData
+                };
 
-                submitBtn.addEventListener('click', async () => {
-                    const text = input.value.trim();
-                    if (text) {
-                        const newHotspot = {
-                            text: text,
-                            lat: state.currentUserPosition.lat,
-                            lon: state.currentUserPosition.lon,
-                            creator_id: state.currentUser.id,
-                            creator_username: state.currentUser.username || `${state.currentUser.first_name}`.trim()
-                        };
-
-                        try {
-                            const response = await fetch('/hotspots', {
-                                method: 'POST',
-                                headers: { 'Content-Type': 'application/json' },
-                                body: JSON.stringify(newHotspot)
-                            });
-                            if(response.ok) {
-                                const savedHotspotData = await response.json();
-                                const savedHotspot = { ...savedHotspotData.hotspot, smoothedAngleDiff: 0 };
-                                state.hotspots.push(savedHotspot);
-                                renderHotspots();
-                                renderHotspotsOnMap();
-                                input.value = '';
-                                modal.classList.remove('visible');
-                            } else {
-                                tg.showAlert('Не удалось сохранить хотспот.');
-                            }
-                        } catch (error) {
-                            console.error('Ошибка сохранения хотспота:', error);
-                            tg.showAlert('Ошибка сети при сохранении хотспота.');
-                        }
+                try {
+                    const response = await fetch('/hotspots', {
+                        method: 'POST',
+                        headers: { 'Content-Type': 'application/json' },
+                        body: JSON.stringify(newHotspotData)
+                    });
+                    if (response.ok) {
+                        const savedHotspot = await response.json();
+                        state.hotspots.push(savedHotspot.hotspot);
+                        renderHotspots();
+                        renderHotspotsOnMap();
+                        tg.HapticFeedback.notificationOccurred('success');
+                    } else {
+                        const error = await response.json();
+                        tg.showAlert(`Не удалось сохранить хотспот: ${error.error}`);
                     }
-                });
+                } catch (error) {
+                    tg.showAlert('Сетевая ошибка при сохранении хотспота.');
+                }
             }
 
+
             function haversineDistance(coords1, coords2) {
                 function toRad(x) { return x * Math.PI / 180; }
                 const R = 6371000;
@@ -505,19 +436,18 @@ def index():
             function calculateBearing(start, end) {
                 function toRad(x) { return x * Math.PI / 180; }
                 function toDeg(x) { return x * 180 / Math.PI; }
-                const lat1 = toRad(start.lat);
-                const lon1 = toRad(start.lon);
-                const lat2 = toRad(end.lat);
-                const lon2 = toRad(end.lon);
-                const y = Math.sin(lon2 - lon1) * Math.cos(lat2);
-                const x = Math.cos(lat1) * Math.sin(lat2) - Math.sin(lat1) * Math.cos(lat2) * Math.cos(lon2 - lon1);
+                const y = Math.sin(toRad(end.lon - start.lon)) * Math.cos(toRad(end.lat));
+                const x = Math.cos(toRad(start.lat)) * Math.sin(toRad(end.lat)) -
+                          Math.sin(toRad(start.lat)) * Math.cos(toRad(end.lat)) * Math.cos(toRad(end.lon - start.lon));
                 let brng = toDeg(Math.atan2(y, x));
                 return (brng + 360) % 360;
             }
 
             function update() {
-                requestAnimationFrame(update);
-                if (!state.currentUserPosition) return;
+                if (!state.currentUserPosition) {
+                    requestAnimationFrame(update);
+                    return;
+                }
                 
                 const screenWidth = window.innerWidth;
                 const screenHeight = window.innerHeight;
@@ -534,26 +464,20 @@ def index():
                     }
 
                     const bearing = calculateBearing(state.currentUserPosition, hotspot);
-                    let angleDiff = bearing - state.deviceOrientation.alpha;
+                    let angleDiff = bearing - state.smoothedAlpha;
 
                     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;
-
-                    hotspot.smoothedAngleDiff = currentSmoothed + delta * SMOOTHING_FACTOR;
-                    const smoothedAngle = hotspot.smoothedAngleDiff;
 
-                    if (Math.abs(smoothedAngle) > state.cameraFov / 2) {
+                    if (Math.abs(angleDiff) > state.cameraFov / 2) {
                         el.classList.add('hidden');
                     } else {
                         el.classList.remove('hidden');
                         
-                        const x = screenWidth / 2 + (smoothedAngle / (state.cameraFov / 2)) * (screenWidth / 2);
-                        const y = screenHeight / 2 - (state.deviceOrientation.beta - 90) * 2;
+                        const x = screenWidth / 2 + (angleDiff / (state.cameraFov / 2)) * (screenWidth / 2);
+                        
+                        const verticalAngle = -state.deviceOrientation.beta;
+                        const y = screenHeight / 2 - (Math.tan(verticalAngle * Math.PI / 180) * (screenHeight / 2));
                         
                         const scale = Math.max(0.4, 1.2 - distance / MAX_VISIBLE_DISTANCE);
 
@@ -563,46 +487,17 @@ def index():
                         el.style.zIndex = Math.round(10000 - distance);
                     }
                 });
+                
+                requestAnimationFrame(update);
             }
             
-            main();
-
+            initArApp();
         </script>
     </body>
     </html>
     '''
     return Response(html_content, mimetype='text/html')
 
-
-@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
-
-        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
-
-        data_check_string = "\n".join(sorted([f"{k}={v}" for k, v in params.items()]))
-
-        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({"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():
     if request.method == 'GET':
@@ -613,27 +508,38 @@ def handle_hotspots():
             return jsonify({"error": "Missing JSON in request"}), 400
         
         data = request.get_json()
+        init_data = data.get('initData')
+        
+        if not init_data:
+            return jsonify({"error": "Missing initData"}), 401
+
+        is_safe, user_data = is_data_safe(init_data)
+        if not is_safe:
+            return jsonify({"error": "Validation failed"}), 403
+
         text = data.get('text')
         lat = data.get('lat')
         lon = data.get('lon')
-        creator_id = data.get('creator_id')
-        creator_username = data.get('creator_username')
 
-        if not all([text, lat is not None, lon is not None, creator_id]):
-            return jsonify({"error": "Missing required data"}), 400
+        if not all([text, lat, lon]):
+            return jsonify({"error": "Missing data: text, lat, or lon"}), 400
         
         try:
+            creator_info = user_data.get('first_name', 'User')
+            if user_data.get('username'):
+                creator_info = f"{creator_info} (@{user_data.get('username')})"
+
             new_hotspot = {
                 "text": str(text),
                 "lat": float(lat),
                 "lon": float(lon),
-                "creator_id": int(creator_id),
-                "creator_username": str(creator_username)
+                "creator_info": creator_info,
+                "creator_id": user_data.get('id')
             }
             save_hotspot(new_hotspot)
             return jsonify({"success": True, "hotspot": new_hotspot}), 201
-        except (ValueError, TypeError) as e:
-            return jsonify({"error": f"Invalid data types: {e}"}), 400
+        except (ValueError, TypeError):
+            return jsonify({"error": "Invalid data types"}), 400
 
 if __name__ == '__main__':
     app.run(host='0.0.0.0', port=7860, debug=False)