Update app.py

app.py

@@ -1,11 +1,37 @@
+from flask import Flask, Response, request, jsonify
 import json
 import os
-import requests
-from flask import Flask, Response, request, jsonify
+import hmac
+import hashlib
+from urllib.parse import unquote
 
 app = Flask(__name__)
 
 HOTSPOTS_FILE = 'hotspots.json'
+BOT_TOKEN = "6909363967:AAGl58czIt7Vra_V8wWR7MyXkN_ayS27Soo"
+
+def validate_init_data(init_data_str, bot_token):
+    try:
+        data_params = sorted([
+            (k, v) for k, v in
+            [p.split('=', 1) for p in init_data_str.split('&')]
+            if k != 'hash'
+        ], key=lambda x: x[0])
+
+        data_check_string = "\n".join([f"{k}={v}" for k, v in data_params])
+        
+        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()
+        
+        received_hash = dict(p.split('=', 1) for p in init_data_str.split('&')).get('hash')
+        
+        if calculated_hash == received_hash:
+            user_data_encoded = dict(p.split('=', 1) for p in init_data_str.split('&')).get('user')
+            if user_data_encoded:
+                return json.loads(unquote(user_data_encoded))
+        return None
+    except Exception:
+        return None
 
 def get_all_hotspots():
     if not os.path.exists(HOTSPOTS_FILE):
@@ -35,16 +61,37 @@ def index():
         <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
         <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-hint-color: var(--tg-theme-hint-color, #aaaaaa);
+                --tg-button-color: var(--tg-theme-button-color, #007aff);
+                --tg-button-text-color: var(--tg-theme-button-text-color, #ffffff);
+            }
             body, html {
                 margin: 0;
                 padding: 0;
                 width: 100%;
                 height: 100%;
                 overflow: hidden;
-                background-color: #000;
-                color: var(--tg-theme-text-color, white);
-                font-family: Arial, sans-serif;
-                touch-action: pan-x pan-y; /* Prevent default touch actions like pull-to-refresh */
+                background-color: var(--tg-bg-color);
+                color: var(--tg-text-color);
+                font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+            }
+            #app-container {
+                position: fixed;
+                top: 0;
+                left: 0;
+                width: 100%;
+                height: 100%;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                justify-content: center;
+            }
+            #error-wall {
+                text-align: center;
+                padding: 20px;
             }
             #ar-container {
                 position: absolute;
@@ -65,11 +112,10 @@ def index():
             }
             .hotspot {
                 position: absolute;
-                background-color: var(--tg-theme-button-color, rgba(0, 122, 255, 0.8));
-                color: var(--tg-theme-button-text-color, white);
+                background-color: var(--tg-button-color);
+                color: var(--tg-button-text-color);
                 padding: 10px 15px;
-                border-radius: 10px;
-                border: 1px solid var(--tg-theme-secondary-bg-color, rgba(255, 255, 255, 0.5));
+                border-radius: 12px;
                 box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
                 transform: translate(-50%, -50%);
                 transition: opacity 0.3s, transform 0.1s linear;
@@ -78,7 +124,7 @@ def index():
                 will-change: transform, left, top, opacity;
                 z-index: 10;
                 text-align: center;
-                cursor: pointer;
+                border: 1px solid rgba(255, 255, 255, 0.2);
             }
             .hotspot small {
                 font-size: 0.7em;
@@ -92,152 +138,126 @@ def index():
             }
             #map-container {
                 position: fixed;
-                bottom: 10px;
-                left: 10px;
-                width: 200px;
-                height: 200px;
-                background-color: var(--tg-theme-bg-color, rgba(0, 0, 0, 0.7));
-                border-radius: 10px;
+                bottom: 20px;
+                left: 50%;
+                transform: translateX(-50%);
+                width: 90%;
+                max-width: 400px;
+                height: 150px;
+                background-color: rgba(0, 0, 0, 0.7);
+                border: 1px solid var(--tg-hint-color);
+                border-radius: 15px;
                 overflow: hidden;
-                transition: all 0.3s ease;
+                transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
                 z-index: 50;
                 display: flex;
                 flex-direction: column;
+                box-shadow: 0 5px 20px rgba(0,0,0,0.4);
             }
             #map-container.fullscreen {
                 width: 100%;
                 height: 100%;
                 top: 0;
                 left: 0;
+                bottom: 0;
                 border-radius: 0;
+                transform: none;
+                max-width: none;
                 justify-content: center;
                 align-items: center;
+                background-color: var(--tg-bg-color);
             }
             #map {
                 flex-grow: 1;
                 width: 100%;
-                height: calc(100% - 35px);
-                border-radius: 10px;
+                height: 100%;
+                border-radius: 15px;
                 overflow: hidden;
             }
             #map-container.fullscreen #map {
-                height: 100%;
                 border-radius: 0;
             }
             #toggle-map-button {
-                background-color: var(--tg-theme-secondary-bg-color, rgba(0, 0, 0, 0.5));
-                color: var(--tg-theme-text-color, white);
+                position: absolute;
+                top: 8px;
+                right: 8px;
+                background-color: rgba(0, 0, 0, 0.6);
+                color: white;
                 border: none;
-                padding: 5px 10px;
-                margin: 5px;
-                border-radius: 5px;
+                padding: 6px 12px;
+                border-radius: 20px;
                 cursor: pointer;
-                font-size: 12px;
-                align-self: flex-end;
+                font-size: 14px;
+                z-index: 51;
             }
-            #map-container.fullscreen #toggle-map-button {
-                position: absolute;
-                top: 10px;
-                right: 10px;
-                font-size: 16px;
-                margin: 0;
+            .leaflet-popup-content-wrapper, .leaflet-popup-tip {
+                background-color: var(--tg-bg-color);
+                color: var(--tg-text-color);
+                box-shadow: 0 3px 14px rgba(0,0,0,0.4);
             }
-            #loading-overlay {
-                position: fixed;
-                top: 0;
-                left: 0;
-                width: 100%;
-                height: 100%;
-                background-color: var(--tg-theme-bg-color, #111);
-                color: var(--tg-theme-text-color, white);
-                z-index: 100;
-                display: flex;
-                flex-direction: column;
-                align-items: center;
-                justify-content: center;
-                font-size: 1.2em;
-                text-align: center;
+            .leaflet-container a.leaflet-popup-close-button {
+                color: var(--tg-text-color);
             }
         </style>
     </head>
     <body>
-        <div id="loading-overlay">
-            Загрузка AR-окружения...
-            <br>Ожидание GPS и камеры...
+        <div id="app-container" style="display: none;">
+            <video id="camera-view" playsinline autoplay muted></video>
+            <div id="ar-container"></div>
+            <div id="map-container">
+                <div id="map"></div>
+                <button id="toggle-map-button">Карта</button>
+            </div>
         </div>
 
-        <video id="camera-view" playsinline autoplay muted></video>
-        <div id="ar-container"></div>
-
-        <div id="map-container">
-            <div id="map"></div>
-            <button id="toggle-map-button">Minimap</button>
+        <div id="error-wall">
+            <h1>Загрузка...</h1>
+            <p>Это приложение должно быть открыто в Telegram.</p>
         </div>
 
         <script>
+            const tg = window.Telegram.WebApp;
+
             const state = {
                 hotspots: [],
                 currentUserPosition: null,
-                deviceOrientation: { alpha: 0, beta: 0, gamma: 0 },
-                cameraFov: 60, /* Approximate FOV for a typical smartphone camera */
+                deviceOrientation: { alpha: 0, beta: 0, gamma: 0, smoothedAlpha: 0 },
+                cameraFov: 60,
                 map: null,
                 userMarker: null,
                 hotspotMarkers: [],
                 initialMapSet: false,
-                isGPSReady: false,
-                isCameraReady: false,
-                isOrientationReady: false
+                telegramUser: null
             };
 
-            const MAX_VISIBLE_DISTANCE = 100; // Increased visible distance for better AR experience
-
-            function showLoadingOverlay(message) {
-                const overlay = document.getElementById('loading-overlay');
-                overlay.innerText = message;
-                overlay.style.display = 'flex';
-            }
+            const MAX_VISIBLE_DISTANCE = 10000; // 10 km
+            const ORIENTATION_SMOOTHING = 0.1;
 
-            function hideLoadingOverlay() {
-                document.getElementById('loading-overlay').style.display = 'none';
-            }
-
-            async function initArApp() {
-                Telegram.WebApp.ready();
-                Telegram.WebApp.expand();
-                hideLoadingOverlay();
-                await setupCamera();
+            function initArApp() {
+                document.getElementById('error-wall').style.display = 'none';
+                document.getElementById('app-container').style.display = 'block';
+                setupCamera();
                 setupGPS();
                 setupOrientationListener();
                 initMap();
-                await loadHotspots();
+                loadHotspots();
                 setupAddHotspotListener();
                 requestAnimationFrame(update);
             }
 
-            function checkAllReady() {
-                if (state.isGPSReady && state.isCameraReady && state.isOrientationReady && Telegram.WebApp.initDataUnsafe.user) {
-                    initArApp();
-                } else {
-                    let message = 'Загрузка AR-окружения...\n';
-                    if (!state.isCameraReady) message += 'Ожидание камеры...\n';
-                    if (!state.isGPSReady) message += 'Ожидание GPS...\n';
-                    if (!state.isOrientationReady) message += 'Ожидание датчика ориентации...\n';
-                    if (!Telegram.WebApp.initDataUnsafe.user) message += 'Ожидание данных пользователя Telegram...\n';
-                    showLoadingOverlay(message);
-                }
-            }
-
-            document.addEventListener('DOMContentLoaded', () => {
-                if (window.Telegram && Telegram.WebApp) {
-                    Telegram.WebApp.onEvent('mainButtonStateChanged', () => {
-                        // Handle Main Button if needed, currently not used
-                    });
-                    Telegram.WebApp.ready();
-                    checkAllReady();
-                } else {
-                    alert('Это приложение предназначено для запуска в Telegram Mini App.');
-                }
+            tg.onEvent('themeChanged', function() {
+                document.documentElement.className = tg.colorScheme;
             });
+            
+            tg.ready();
+            tg.expand();
+            
+            if (tg.initDataUnsafe && tg.initDataUnsafe.user) {
+                state.telegramUser = tg.initDataUnsafe.user;
+                initArApp();
+            } else {
+                tg.close();
+            }
 
             async function setupCamera() {
                 const video = document.getElementById('camera-view');
@@ -248,14 +268,9 @@ def index():
                         });
                         video.srcObject = stream;
                         await video.play();
-                        state.isCameraReady = true;
-                        checkAllReady();
                     } catch (err) {
-                        alert('Не удалось получить доступ к камере: ' + err.message);
-                        console.error('Camera access error:', err);
+                        tg.showAlert('Не удалось получить доступ к камере: ' + err.message);
                     }
-                } else {
-                    alert('Камера не поддерживается вашим браузером.');
                 }
             }
 
@@ -263,82 +278,76 @@ def index():
                 if (navigator.geolocation) {
                     navigator.geolocation.watchPosition(
                         (position) => {
-                            const newLat = position.coords.latitude;
-                            const newLon = position.coords.longitude;
-                            // Update position only if it has significantly changed or is first update
-                            if (!state.currentUserPosition || 
-                                Math.abs(newLat - state.currentUserPosition.lat) > 0.00001 || 
-                                Math.abs(newLon - state.currentUserPosition.lon) > 0.00001) {
-                                
-                                state.currentUserPosition = {
-                                    lat: newLat,
-                                    lon: newLon,
-                                    accuracy: position.coords.accuracy // meters
-                                };
-
-                                if (state.userMarker) {
-                                    state.userMarker.setLatLng([state.currentUserPosition.lat, state.currentUserPosition.lon]);
-                                    if (!state.initialMapSet) {
-                                        state.map.setView([state.currentUserPosition.lat, state.currentUserPosition.lon], 15);
-                                        state.initialMapSet = true;
-                                    }
+                            state.currentUserPosition = {
+                                lat: position.coords.latitude,
+                                lon: position.coords.longitude
+                            };
+                            if (state.userMarker) {
+                                state.userMarker.setLatLng([state.currentUserPosition.lat, state.currentUserPosition.lon]);
+                                if (!state.initialMapSet) {
+                                    state.map.setView([state.currentUserPosition.lat, state.currentUserPosition.lon], 16);
+                                    state.initialMapSet = true;
                                 }
                             }
-                            state.isGPSReady = true;
-                            checkAllReady();
                         },
                         (error) => {
-                            alert('Не удалось получить доступ к GPS: ' + error.message + '. Убедитесь, что GPS включен и разрешен для этого приложения.');
-                            console.error('GPS error:', error);
+                            tg.showAlert('Не удалось получить доступ к GPS: ' + error.message);
                         },
-                        { enableHighAccuracy: true, maximumAge: 0, timeout: 10000 } // Increased timeout
+                        { enableHighAccuracy: true, maximumAge: 1000, timeout: 5000 }
                     );
                 } else {
-                    alert('GPS не поддерживается вашим браузером.');
+                    tg.showAlert('GPS не поддерживается вашим устройством.');
                 }
             }
             
             function setupOrientationListener() {
-                if (window.DeviceOrientationEvent) {
-                    // Request permission for iOS 13+
-                    if (typeof DeviceOrientationEvent.requestPermission === 'function') {
-                        DeviceOrientationEvent.requestPermission()
-                            .then(permissionState => {
-                                if (permissionState === 'granted') {
-                                    window.addEventListener('deviceorientation', handleOrientation, true);
-                                    state.isOrientationReady = true;
-                                    checkAllReady();
-                                } else {
-                                    alert('Разрешение на отслеживание ориентации устройства отклонено.');
-                                }
-                            })
-                            .catch(console.error);
+                const isIOS = typeof DeviceOrientationEvent.requestPermission === 'function';
+                
+                const startOrientation = () => {
+                     if (window.DeviceOrientationEvent) {
+                        window.addEventListener('deviceorientation', (event) => {
+                            if (event.alpha !== null) {
+                                let alpha = event.webkitCompassHeading || event.alpha;
+                                state.deviceOrientation.smoothedAlpha = state.deviceOrientation.smoothedAlpha * (1 - ORIENTATION_SMOOTHING) + alpha * ORIENTATION_SMOOTHING;
+                                state.deviceOrientation.alpha = alpha;
+                                state.deviceOrientation.beta = event.beta;
+                                state.deviceOrientation.gamma = event.gamma;
+                            }
+                        }, true);
                     } else {
-                        // Handle regular non-iOS 13+ browsers
-                        window.addEventListener('deviceorientation', handleOrientation, true);
-                        state.isOrientationReady = true;
-                        checkAllReady();
+                        tg.showAlert('Отслеживание ориентации устройства не поддерживается.');
                     }
-                } else {
-                    alert('Отслеживание ориентации устройства не поддерживается.');
-                }
-            }
+                };
 
-            function handleOrientation(event) {
-                if (event.alpha !== null) {
-                    // For better stability, apply a small smoothing factor
-                    const smoothing = 0.1; 
-                    state.deviceOrientation.alpha = state.deviceOrientation.alpha * (1 - smoothing) + event.alpha * smoothing;
-                    state.deviceOrientation.beta = state.deviceOrientation.beta * (1 - smoothing) + event.beta * smoothing;
-                    state.deviceOrientation.gamma = state.deviceOrientation.gamma * (1 - smoothing) + event.gamma * smoothing;
+                if (isIOS) {
+                    document.body.addEventListener('click', () => {
+                        DeviceOrientationEvent.requestPermission()
+                        .then(permissionState => {
+                            if (permissionState === 'granted') {
+                                startOrientation();
+                            } else {
+                                tg.showAlert('Доступ к ориентации устройства отклонен.');
+                            }
+                        })
+                        .catch(console.error);
+                    }, { once: true });
+                } else {
+                   startOrientation();
                 }
             }
 
             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 contributors'
+                    attribution: '© OpenStreetMap'
                 }).addTo(state.map);
+                
+                const userIcon = L.divIcon({
+                    html: '<div></div>',
+                    className: 'user-marker',
+                    iconSize: [20, 20]
+                });
+                
                 state.userMarker = L.marker([0, 0]).addTo(state.map).bindPopup('Ваше местоположение');
 
                 document.getElementById('toggle-map-button').addEventListener('click', toggleMap);
@@ -347,12 +356,13 @@ def index():
             function toggleMap() {
                 const mapContainer = document.getElementById('map-container');
                 mapContainer.classList.toggle('fullscreen');
+                tg.HapticFeedback.impactOccurred('light');
                 setTimeout(() => {
                     state.map.invalidateSize();
                     if (state.currentUserPosition) {
                         state.map.setView([state.currentUserPosition.lat, state.currentUserPosition.lon], state.map.getZoom());
                     }
-                }, 300);
+                }, 400);
             }
 
             async function loadHotspots() {
@@ -367,16 +377,6 @@ def index():
                 }
             }
 
-            function getCreatorDisplayName(hotspot) {
-                if (hotspot.creator_info) {
-                    const info = hotspot.creator_info;
-                    return info.username ? `@${info.username}` : 
-                           info.first_name ? `${info.first_name}${info.last_name ? ' ' + info.last_name : ''}` : 
-                           'Unknown User';
-                }
-                return 'Unknown';
-            }
-
             function renderHotspots() {
                 const container = document.getElementById('ar-container');
                 container.innerHTML = '';
@@ -384,7 +384,7 @@ def index():
                     const el = document.createElement('div');
                     el.className = 'hotspot';
                     el.id = `hotspot-${index}`;
-                    el.innerHTML = `${hotspot.text}<br><small>by ${getCreatorDisplayName(hotspot)}</small>`;
+                    el.innerHTML = `${hotspot.text}<br><small>@${hotspot.creator_username || 'anonymous'}</small>`;
                     container.appendChild(el);
                 });
             }
@@ -398,57 +398,67 @@ def index():
                 state.hotspots.forEach(hotspot => {
                     const marker = L.marker([hotspot.lat, hotspot.lon])
                                    .addTo(state.map)
-                                   .bindPopup(`${hotspot.text}<br>by ${getCreatorDisplayName(hotspot)}`);
+                                   .bindPopup(`${hotspot.text}<br>@${hotspot.creator_username || 'anonymous'}`);
                     state.hotspotMarkers.push(marker);
                 });
             }
 
             function setupAddHotspotListener() {
                 const container = document.getElementById('ar-container');
-                container.addEventListener('click', async (event) => {
+                container.addEventListener('click', (event) => {
+                    if (event.target !== container) return;
+
                     if (!state.currentUserPosition) {
-                        alert('GPS-координаты еще не определены. Подождите немного.');
-                        return;
-                    }
-                    if (!Telegram.WebApp.initDataUnsafe.user) {
-                        alert('Не удалось получить данные пользователя Telegram. Попробуйте перезапустить приложение.');
+                        tg.showAlert('GPS-координаты еще не определены. Подождите немного.');
                         return;
                     }
 
-                    const text = prompt('Введите текст для нового хотспота:');
-                    if (text) {
-                        const newHotspot = {
-                            text: text,
-                            lat: state.currentUserPosition.lat,
-                            lon: state.currentUserPosition.lon,
-                            creator_info: Telegram.WebApp.initDataUnsafe.user // Store full user object
-                        };
-
-                        try {
-                            const response = await fetch('/hotspots', {
-                                method: 'POST',
-                                headers: { 'Content-Type': 'application/json' },
-                                body: JSON.stringify(newHotspot)
-                            });
-                            if(response.ok) {
-                                const savedHotspot = await response.json();
-                                state.hotspots.push(savedHotspot.hotspot);
-                                renderHotspots();
-                                renderHotspotsOnMap();
-                            } else {
-                                alert('Не удалось сохранить хотспот.');
+                    tg.showPopup({
+                        title: 'Новый хотспот',
+                        message: 'Введите текст для новой метки в AR.',
+                        buttons: [
+                            {id: 'save', type: 'default', text: 'Сохранить'},
+                            {type: 'cancel'},
+                        ]
+                    }, async (buttonId, text) => {
+                        if (buttonId === 'save' && text) {
+                            const newHotspotData = {
+                                text: text,
+                                lat: state.currentUserPosition.lat,
+                                lon: state.currentUserPosition.lon,
+                                _auth: tg.initData
+                            };
+
+                            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 errorData = await response.json();
+                                    tg.showAlert('Не удалось сохранить хотспот: ' + (errorData.error || 'Server error'));
+                                }
+                            } catch (error) {
+                                console.error('Ошибка сохранения хотспота:', error);
+                                tg.showAlert('Ошибка сети при сохранении хотспота.');
                             }
-                        } catch (error) {
-                            console.error('Ошибка сохранения хотспота:', error);
-                            alert('Ошибка сети при сохранении хотспота.');
                         }
-                    }
+                    });
+                    const popupInput = document.querySelector('.telegram-popup-input');
+                    if (popupInput) popupInput.placeholder = 'Ваше сообщение...';
                 });
             }
 
             function haversineDistance(coords1, coords2) {
                 function toRad(x) { return x * Math.PI / 180; }
-                const R = 6371; // Earth's radius in kilometers
+                const R = 6371e3;
                 const dLat = toRad(coords2.lat - coords1.lat);
                 const dLon = toRad(coords2.lon - coords1.lon);
                 const lat1 = toRad(coords1.lat);
@@ -456,7 +466,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; // Distance in meters
+                return R * c;
             }
 
             function calculateBearing(start, end) {
@@ -473,14 +483,15 @@ def index():
             }
 
             function update() {
-                if (!state.currentUserPosition || !state.isOrientationReady) {
+                if (!state.currentUserPosition) {
                     requestAnimationFrame(update);
                     return;
                 }
                 
                 const screenWidth = window.innerWidth;
                 const screenHeight = window.innerHeight;
-                
+                const halfFovRad = (state.cameraFov / 2) * (Math.PI / 180);
+
                 state.hotspots.forEach((hotspot, index) => {
                     const el = document.getElementById(`hotspot-${index}`);
                     if (!el) return;
@@ -493,30 +504,29 @@ def index():
                     }
 
                     const bearing = calculateBearing(state.currentUserPosition, hotspot);
-                    let angleDiff = bearing - state.deviceOrientation.alpha;
+                    let angleDiff = bearing - state.deviceOrientation.smoothedAlpha;
 
                     if (angleDiff > 180) angleDiff -= 360;
                     if (angleDiff < -180) angleDiff += 360;
 
-                    // Calculate horizontal position based on FOV
-                    // We need to map an angle difference (e.g., -30 to +30 for a 60 FOV) to screen pixels (0 to screenWidth)
-                    // (angleDiff / (cameraFov / 2)) gives a ratio from -1 to 1 for visible objects
-                    // screenWidth / 2 * (1 + ratio) gives position from 0 to screenWidth
-                    const x = screenWidth / 2 + (angleDiff / (state.cameraFov / 2)) * (screenWidth / 2);
-                    
-                    // Simple vertical positioning (can be improved with beta/gamma for tilt)
-                    const y = screenHeight / 2; // Center vertically for simplicity
-
-                    // Apply perspective scaling based on distance
-                    const scale = Math.max(0.3, 1 - distance / MAX_VISIBLE_DISTANCE); // Min scale 0.3
-                    
-                    // Apply inverse distance for z-index (closer elements appear above)
-                    el.style.zIndex = Math.round(1000 - distance);
-
-                    el.style.left = `${x}px`;
-                    el.style.top = `${y}px`;
-                    el.style.transform = `translate(-50%, -50%) scale(${scale})`;
-                    el.classList.remove('hidden');
+                    if (Math.abs(angleDiff) > state.cameraFov / 2) {
+                        el.classList.add('hidden');
+                    } else {
+                        el.classList.remove('hidden');
+                        
+                        const x = screenWidth / 2 + (angleDiff / (state.cameraFov / 2)) * (screenWidth / 2);
+                        
+                        const pitch = state.deviceOrientation.beta || 90;
+                        const pitchRad = (pitch - 90) * (Math.PI / 180);
+                        const y = screenHeight / 2 - Math.tan(pitchRad) * (screenHeight / 2);
+
+                        const scale = Math.max(0.4, 1.5 - (distance / 200));
+
+                        el.style.left = `${x}px`;
+                        el.style.top = `${y}px`;
+                        el.style.transform = `translate(-50%, -50%) scale(${scale})`;
+                        el.style.zIndex = Math.round(10000 - distance);
+                    }
                 });
                 
                 requestAnimationFrame(update);
@@ -537,25 +547,34 @@ def handle_hotspots():
             return jsonify({"error": "Missing JSON in request"}), 400
         
         data = request.get_json()
+        init_data_str = data.get('_auth')
+        
+        if not init_data_str:
+            return jsonify({"error": "Authentication data missing"}), 401
+
+        user_data = validate_init_data(init_data_str, BOT_TOKEN)
+        if not user_data:
+            return jsonify({"error": "Authentication failed"}), 403
+
         text = data.get('text')
         lat = data.get('lat')
         lon = data.get('lon')
-        creator_info = data.get('creator_info') # This will be the Telegram user object
 
-        if not all([text, lat, lon, creator_info]):
-            return jsonify({"error": "Missing data: text, lat, lon, or creator_info"}), 400
+        if not all([text, lat, lon]):
+            return jsonify({"error": "Missing data: text, lat, or lon"}), 400
         
         try:
             new_hotspot = {
                 "text": str(text),
                 "lat": float(lat),
                 "lon": float(lon),
-                "creator_info": creator_info # Store the full object as received
+                "creator_id": user_data.get('id'),
+                "creator_username": user_data.get('username', 'anonymous')
             }
             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)