#ns-block{position:fixed;top:0;left:0;right:0;bottom:0;z-index:999999;background:#0F0620;color:#fff;display:flex;align-items:center;justify-content:center;text-align:center;padding:24px;font-family:system-ui,-apple-system,sans-serif;} #ns-block div{max-width:420px;} #ns-emoji{font-size:44px;margin-bottom:12px;} #ns-title{font-size:19px;font-weight:bold;margin-bottom:10px;} #ns-text{font-size:14px;line-height:1.7;opacity:0.92;} #ns-path{font-size:12px;line-height:1.6;opacity:0.65;margin-top:14px;}

⚠️

JavaScript выключен

Приложение «Сказочная Лавка» не может работать без JavaScript.

Включите его на этом iPhone:
Настройки → Экранное время → Контент и конфиденциальность → Контент → Веб-контент → JavaScript (вкл.)

Если это не помогло — проверьте, нет ли на телефоне профиля родительского контроля (Настройки → Основные → VPN и управление устройством).

✨ Загружаем сказки...

/* Safe localStorage: если браузер блокирует (Safari ITP в iframe) — используем in-memory заглушку */ (function(){ var mem = {}; var fake = { getItem: function(k){ return Object.prototype.hasOwnProperty.call(mem, k) ? mem[k] : null; }, setItem: function(k, v){ mem[k] = String(v); }, removeItem: function(k){ delete mem[k]; }, clear: function(){ mem = {}; }, key: function(i){ return Object.keys(mem)[i] || null; }, get length(){ return Object.keys(mem).length; } }; var real = null; try { window.localStorage.setItem('__ls_probe__', '1'); window.localStorage.removeItem('__ls_probe__'); real = window.localStorage; } catch(e) { real = null; } try { Object.defineProperty(window, 'localStorage', { configurable: true, get: function(){ if(real){ try { var t = '__ls_probe__'; real.setItem(t, '1'); real.removeItem(t); return real; } catch(e){ real = null; } } return fake; } }); Object.defineProperty(window, 'sessionStorage', { configurable: true, get: function(){ if(real){ try { var t = '__ls_probe__'; real.setItem(t, '1'); real.removeItem(t); return real; } catch(e){ real = null; } } return fake; } }); } catch(e) {} })(); /* Диагностика зависшей загрузки (добавлено 05.08.2026) */ window.setTimeout(function(){ var splash = document.getElementById('app-splash'); if(!splash) return; var diag = document.getElementById('app-diag'); var splashVisible = window.getComputedStyle(splash).display !== 'none'; if(splashVisible && diag && diag.style.display !== 'block'){ var errs = (window.__appErrors||[]).slice(-3).map(function(e){ return e.msg || String(e); }).join(' | ') || 'нет'; var tg = (typeof window.Telegram !== 'undefined') ? (window.Telegram.WebApp ? 'WebApp OK' : 'Telegram есть, WebApp нет') : 'нет Telegram'; diag.textContent = '⚠ Зависла загрузка\nreadyState: ' + document.readyState + '\nTelegram: ' + tg + '\nAPP_VERSION: ' + (window.APP_VERSION||'?') + '\nОшибки JS: ' + errs + '\nURL: ' + location.href; diag.style.display = 'block'; } }, 10000); // WebView (function () { var eventHandlers = {}; var locationHash = ''; try { locationHash = location.hash.toString(); } catch (e) {} var initParams = urlParseHashParams(locationHash); var storedParams = sessionStorageGet('initParams'); if (storedParams) { for (var key in storedParams) { if (typeof initParams[key] === 'undefined') { initParams[key] = storedParams[key]; } } } sessionStorageSet('initParams', initParams); var isIframe = false, iFrameStyle; try { isIframe = (window.parent != null && window != window.parent); if (isIframe) { window.addEventListener('message', function (event) { if (event.source !== window.parent) return; try { var dataParsed = JSON.parse(event.data); } catch (e) { return; } if (!dataParsed || !dataParsed.eventType) { return; } if (dataParsed.eventType == 'set_custom_style') { if (event.origin === 'https://web.telegram.org') { iFrameStyle.innerHTML = dataParsed.eventData; } } else if (dataParsed.eventType == 'reload_iframe') { try { window.parent.postMessage(JSON.stringify({eventType: 'iframe_will_reload'}), '*'); } catch (e) {} location.reload(); } else { receiveEvent(dataParsed.eventType, dataParsed.eventData); } }); iFrameStyle = document.createElement('style'); document.head.appendChild(iFrameStyle); try { window.parent.postMessage(JSON.stringify({eventType: 'iframe_ready', eventData: {reload_supported: true}}), '*'); } catch (e) {} } } catch (e) {} function urlSafeDecode(urlencoded) { try { urlencoded = urlencoded.replace(/\+/g, '%20'); return decodeURIComponent(urlencoded); } catch (e) { return urlencoded; } } function urlParseHashParams(locationHash) { locationHash = locationHash.replace(/^#/, ''); var params = {}; if (!locationHash.length) { return params; } if (locationHash.indexOf('=') < 0 && locationHash.indexOf('?') < 0) { params._path = urlSafeDecode(locationHash); return params; } var qIndex = locationHash.indexOf('?'); if (qIndex >= 0) { var pathParam = locationHash.substr(0, qIndex); params._path = urlSafeDecode(pathParam); locationHash = locationHash.substr(qIndex + 1); } var query_params = urlParseQueryString(locationHash); for (var k in query_params) { params[k] = query_params[k]; } return params; } function urlParseQueryString(queryString) { var params = {}; if (!queryString.length) { return params; } var queryStringParams = queryString.split('&'); var i, param, paramName, paramValue; for (i = 0; i < queryStringParams.length; i++) { param = queryStringParams[i].split('='); paramName = urlSafeDecode(param[0]); paramValue = param[1] == null ? null : urlSafeDecode(param[1]); params[paramName] = paramValue; } return params; } // Telegram apps will implement this logic to add service params (e.g. tgShareScoreUrl) to game URL function urlAppendHashParams(url, addHash) { // url looks like 'https://game.com/path?query=1#hash' // addHash looks like 'tgShareScoreUrl=' + encodeURIComponent('tgb://share_game_score?hash=very_long_hash123') var ind = url.indexOf('#'); if (ind < 0) { // https://game.com/path -> https://game.com/path#tgShareScoreUrl=etc return url + '#' + addHash; } var curHash = url.substr(ind + 1); if (curHash.indexOf('=') >= 0 || curHash.indexOf('?') >= 0) { // https://game.com/#hash=1 -> https://game.com/#hash=1&tgShareScoreUrl=etc // https://game.com/#path?query -> https://game.com/#path?query&tgShareScoreUrl=etc return url + '&' + addHash; } // https://game.com/#hash -> https://game.com/#hash?tgShareScoreUrl=etc if (curHash.length > 0) { return url + '?' + addHash; } // https://game.com/# -> https://game.com/#tgShareScoreUrl=etc return url + addHash; } function postEvent(eventType, callback, eventData) { if (!callback) { callback = function () {}; } if (eventData === undefined) { eventData = ''; } console.log('[Telegram.WebView] > postEvent', eventType, eventData); if (window.TelegramWebviewProxy !== undefined) { TelegramWebviewProxy.postEvent(eventType, JSON.stringify(eventData)); callback(); } else if (window.external && 'notify' in window.external) { window.external.notify(JSON.stringify({eventType: eventType, eventData: eventData})); callback(); } else if (isIframe) { try { var trustedTarget = 'https://web.telegram.org'; // For now we don't restrict target, for testing purposes trustedTarget = '*'; window.parent.postMessage(JSON.stringify({eventType: eventType, eventData: eventData}), trustedTarget); callback(); } catch (e) { callback(e); } } else { callback({notAvailable: true}); } }; function receiveEvent(eventType, eventData) { console.log('[Telegram.WebView] < receiveEvent', eventType, eventData); callEventCallbacks(eventType, function(callback) { callback(eventType, eventData); }); } function callEventCallbacks(eventType, func) { var curEventHandlers = eventHandlers[eventType]; if (curEventHandlers === undefined || !curEventHandlers.length) { return; } for (var i = 0; i < curEventHandlers.length; i++) { try { func(curEventHandlers[i]); } catch (e) {} } } function onEvent(eventType, callback) { if (eventHandlers[eventType] === undefined) { eventHandlers[eventType] = []; } var index = eventHandlers[eventType].indexOf(callback); if (index === -1) { eventHandlers[eventType].push(callback); } }; function offEvent(eventType, callback) { if (eventHandlers[eventType] === undefined) { return; } var index = eventHandlers[eventType].indexOf(callback); if (index === -1) { return; } eventHandlers[eventType].splice(index, 1); }; function openProtoUrl(url) { if (!url.match(/^(web\+)?tgb?:\/\/./)) { return false; } var useIframe = navigator.userAgent.match(/iOS|iPhone OS|iPhone|iPod|iPad/i) ? true : false; if (useIframe) { var iframeContEl = document.getElementById('tgme_frame_cont') || document.body; var iframeEl = document.createElement('iframe'); iframeContEl.appendChild(iframeEl); var pageHidden = false; var enableHidden = function () { pageHidden = true; }; window.addEventListener('pagehide', enableHidden, false); window.addEventListener('blur', enableHidden, false); if (iframeEl !== null) { iframeEl.src = url; } setTimeout(function() { if (!pageHidden) { window.location = url; } window.removeEventListener('pagehide', enableHidden, false); window.removeEventListener('blur', enableHidden, false); }, 2000); } else { window.location = url; } return true; } function sessionStorageSet(key, value) { try { window.sessionStorage.setItem('__telegram__' + key, JSON.stringify(value)); return true; } catch(e) {} return false; } function sessionStorageGet(key) { try { return JSON.parse(window.sessionStorage.getItem('__telegram__' + key)); } catch(e) {} return null; } if (!window.Telegram) { window.Telegram = {}; } window.Telegram.WebView = { initParams: initParams, isIframe: isIframe, onEvent: onEvent, offEvent: offEvent, postEvent: postEvent, receiveEvent: receiveEvent, callEventCallbacks: callEventCallbacks }; window.Telegram.Utils = { urlSafeDecode: urlSafeDecode, urlParseQueryString: urlParseQueryString, urlParseHashParams: urlParseHashParams, urlAppendHashParams: urlAppendHashParams, sessionStorageSet: sessionStorageSet, sessionStorageGet: sessionStorageGet }; // For Windows Phone app window.TelegramGameProxy_receiveEvent = receiveEvent; // App backward compatibility window.TelegramGameProxy = { receiveEvent: receiveEvent }; })(); // WebApp (function () { var Utils = window.Telegram.Utils; var WebView = window.Telegram.WebView; var initParams = WebView.initParams; var isIframe = WebView.isIframe; var WebApp = {}; var webAppInitData = '', webAppInitDataUnsafe = {}; var themeParams = {}, colorScheme = 'light'; var webAppVersion = '6.0'; var webAppPlatform = 'unknown'; var webAppIsActive = true; var webAppIsFullscreen = false; var webAppIsOrientationLocked = false; var webAppBackgroundColor = 'bg_color'; var webAppHeaderColorKey = 'bg_color'; var webAppHeaderColor = null; if (initParams.tgWebAppData && initParams.tgWebAppData.length) { webAppInitData = initParams.tgWebAppData; webAppInitDataUnsafe = Utils.urlParseQueryString(webAppInitData); for (var key in webAppInitDataUnsafe) { var val = webAppInitDataUnsafe[key]; try { if (val.substr(0, 1) == '{' && val.substr(-1) == '}' || val.substr(0, 1) == '[' && val.substr(-1) == ']') { webAppInitDataUnsafe[key] = JSON.parse(val); } } catch (e) {} } } var stored_theme_params = Utils.sessionStorageGet('themeParams'); if (initParams.tgWebAppThemeParams && initParams.tgWebAppThemeParams.length) { var themeParamsRaw = initParams.tgWebAppThemeParams; try { var theme_params = JSON.parse(themeParamsRaw); if (theme_params) { setThemeParams(theme_params); } } catch (e) {} } if (stored_theme_params) { setThemeParams(stored_theme_params); } var stored_def_colors = Utils.sessionStorageGet('defaultColors'); if (initParams.tgWebAppDefaultColors && initParams.tgWebAppDefaultColors.length) { var defColorsRaw = initParams.tgWebAppDefaultColors; try { var def_colors = JSON.parse(defColorsRaw); if (def_colors) { setDefaultColors(def_colors); } } catch (e) {} } if (stored_def_colors) { setDefaultColors(stored_def_colors); } if (initParams.tgWebAppVersion) { webAppVersion = initParams.tgWebAppVersion; } if (initParams.tgWebAppPlatform) { webAppPlatform = initParams.tgWebAppPlatform; } var stored_fullscreen = Utils.sessionStorageGet('isFullscreen'); if (initParams.tgWebAppFullscreen) { setFullscreen(true); } if (stored_fullscreen) { setFullscreen(stored_fullscreen == 'yes'); } var stored_orientation_lock = Utils.sessionStorageGet('isOrientationLocked'); if (stored_orientation_lock) { setOrientationLock(stored_orientation_lock == 'yes'); } function onThemeChanged(eventType, eventData) { if (eventData.theme_params) { setThemeParams(eventData.theme_params); window.Telegram.WebApp.MainButton.setParams({}); window.Telegram.WebApp.SecondaryButton.setParams({}); updateHeaderColor(); updateBackgroundColor(); updateBottomBarColor(); receiveWebViewEvent('themeChanged'); } } var lastWindowHeight = window.innerHeight; function onViewportChanged(eventType, eventData) { if (eventData.height) { window.removeEventListener('resize', onWindowResize); setViewportHeight(eventData); } } function onWindowResize(e) { if (lastWindowHeight != window.innerHeight) { lastWindowHeight = window.innerHeight; receiveWebViewEvent('viewportChanged', { isStateStable: true }); } } function onSafeAreaChanged(eventType, eventData) { if (eventData) { setSafeAreaInset(eventData); } } function onContentSafeAreaChanged(eventType, eventData) { if (eventData) { setContentSafeAreaInset(eventData); } } function onVisibilityChanged(eventType, eventData) { if (eventData.is_visible) { webAppIsActive = true; receiveWebViewEvent('activated'); } else { webAppIsActive = false; receiveWebViewEvent('deactivated'); } } function linkHandler(e) { if (e.metaKey || e.ctrlKey) return; var el = e.target; while (el.tagName != 'A' && el.parentNode) { el = el.parentNode; } if (el.tagName == 'A' && el.target != '_blank' && (el.protocol == 'http:' || el.protocol == 'https:') && isTmeHostname(el.hostname)) { WebApp.openTelegramLink(el.href); e.preventDefault(); } } function strTrim(str) { return str.toString().replace(/^\s+|\s+$/g, ''); } function isTmeHostname(hostname) { hostname = hostname.toString().toLowerCase(); return hostname == 't.me' || hostname == 'telegram.me'; } function receiveWebViewEvent(eventType) { var args = Array.prototype.slice.call(arguments); eventType = args.shift(); WebView.callEventCallbacks('webview:' + eventType, function(callback) { callback.apply(WebApp, args); }); } function onWebViewEvent(eventType, callback) { WebView.onEvent('webview:' + eventType, callback); }; function offWebViewEvent(eventType, callback) { WebView.offEvent('webview:' + eventType, callback); }; function setCssProperty(name, value) { var root = document.documentElement; if (root && root.style && root.style.setProperty) { root.style.setProperty('--tg-' + name, value); } } function setFullscreen(is_fullscreen) { webAppIsFullscreen = !!is_fullscreen; Utils.sessionStorageSet('isFullscreen', webAppIsFullscreen ? 'yes' : 'no'); } function setOrientationLock(is_locked) { webAppIsOrientationLocked = !!is_locked; Utils.sessionStorageSet('isOrientationLocked', webAppIsOrientationLocked ? 'yes' : 'no'); } function setThemeParams(theme_params) { // temp iOS fix if (theme_params.bg_color == '#1c1c1d' && theme_params.bg_color == theme_params.secondary_bg_color) { theme_params.secondary_bg_color = '#2c2c2e'; } var color; for (var key in theme_params) { if (color = parseColorToHex(theme_params[key])) { themeParams[key] = color; if (key == 'bg_color') { colorScheme = isColorDark(color) ? 'dark' : 'light' setCssProperty('color-scheme', colorScheme); } key = 'theme-' + key.split('_').join('-'); setCssProperty(key, color); } } Utils.sessionStorageSet('themeParams', themeParams); } function setDefaultColors(def_colors) { if (colorScheme == 'dark') { if (def_colors.bg_dark_color) { webAppBackgroundColor = def_colors.bg_dark_color; } if (def_colors.header_dark_color) { webAppHeaderColorKey = null; webAppHeaderColor = def_colors.header_dark_color; } } else { if (def_colors.bg_color) { webAppBackgroundColor = def_colors.bg_color; } if (def_colors.header_color) { webAppHeaderColorKey = null; webAppHeaderColor = def_colors.header_color; } } Utils.sessionStorageSet('defaultColors', def_colors); } var webAppCallbacks = {}; function generateCallbackId(len) { var tries = 100; while (--tries) { var id = '', chars = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789', chars_len = chars.length; for (var i = 0; i < len; i++) { id += chars[Math.floor(Math.random() * chars_len)]; } if (!webAppCallbacks[id]) { webAppCallbacks[id] = {}; return id; } } throw Error('WebAppCallbackIdGenerateFailed'); } var viewportHeight = false, viewportStableHeight = false, isExpanded = true; function setViewportHeight(data) { if (typeof data !== 'undefined') { isExpanded = !!data.is_expanded; viewportHeight = data.height; if (data.is_state_stable) { viewportStableHeight = data.height; } receiveWebViewEvent('viewportChanged', { isStateStable: !!data.is_state_stable }); } var height, stable_height; if (viewportHeight !== false) { height = (viewportHeight - bottomBarHeight) + 'px'; } else { height = bottomBarHeight ? 'calc(100vh - ' + bottomBarHeight + 'px)' : '100vh'; } if (viewportStableHeight !== false) { stable_height = (viewportStableHeight - bottomBarHeight) + 'px'; } else { stable_height = bottomBarHeight ? 'calc(100vh - ' + bottomBarHeight + 'px)' : '100vh'; } setCssProperty('viewport-height', height); setCssProperty('viewport-stable-height', stable_height); } var safeAreaInset = {top: 0, bottom: 0, left: 0, right: 0}; function setSafeAreaInset(data) { if (typeof data !== 'undefined') { if (typeof data.top !== 'undefined') { safeAreaInset.top = data.top; } if (typeof data.bottom !== 'undefined') { safeAreaInset.bottom = data.bottom; } if (typeof data.left !== 'undefined') { safeAreaInset.left = data.left; } if (typeof data.right !== 'undefined') { safeAreaInset.right = data.right; } receiveWebViewEvent('safeAreaChanged'); } setCssProperty('safe-area-inset-top', safeAreaInset.top + 'px'); setCssProperty('safe-area-inset-bottom', safeAreaInset.bottom + 'px'); setCssProperty('safe-area-inset-left', safeAreaInset.left + 'px'); setCssProperty('safe-area-inset-right', safeAreaInset.right + 'px'); } var contentSafeAreaInset = {top: 0, bottom: 0, left: 0, right: 0}; function setContentSafeAreaInset(data) { if (typeof data !== 'undefined') { if (typeof data.top !== 'undefined') { contentSafeAreaInset.top = data.top; } if (typeof data.bottom !== 'undefined') { contentSafeAreaInset.bottom = data.bottom; } if (typeof data.left !== 'undefined') { contentSafeAreaInset.left = data.left; } if (typeof data.right !== 'undefined') { contentSafeAreaInset.right = data.right; } receiveWebViewEvent('contentSafeAreaChanged'); } setCssProperty('content-safe-area-inset-top', contentSafeAreaInset.top + 'px'); setCssProperty('content-safe-area-inset-bottom', contentSafeAreaInset.bottom + 'px'); setCssProperty('content-safe-area-inset-left', contentSafeAreaInset.left + 'px'); setCssProperty('content-safe-area-inset-right', contentSafeAreaInset.right + 'px'); } var isClosingConfirmationEnabled = false; function setClosingConfirmation(need_confirmation) { if (!versionAtLeast('6.2')) { console.warn('[Telegram.WebApp] Closing confirmation is not supported in version ' + webAppVersion); return; } isClosingConfirmationEnabled = !!need_confirmation; WebView.postEvent('web_app_setup_closing_behavior', false, {need_confirmation: isClosingConfirmationEnabled}); } var isVerticalSwipesEnabled = true; function toggleVerticalSwipes(enable_swipes) { if (!versionAtLeast('7.7')) { console.warn('[Telegram.WebApp] Changing swipes behavior is not supported in version ' + webAppVersion); return; } isVerticalSwipesEnabled = !!enable_swipes; WebView.postEvent('web_app_setup_swipe_behavior', false, {allow_vertical_swipe: isVerticalSwipesEnabled}); } function onFullscreenChanged(eventType, eventData) { setFullscreen(eventData.is_fullscreen); receiveWebViewEvent('fullscreenChanged'); } function onFullscreenFailed(eventType, eventData) { if (eventData.error == 'ALREADY_FULLSCREEN' && !webAppIsFullscreen) { setFullscreen(true); } receiveWebViewEvent('fullscreenFailed', { error: eventData.error }); } function toggleOrientationLock(locked) { if (!versionAtLeast('8.0')) { console.warn('[Telegram.WebApp] Orientation locking is not supported in version ' + webAppVersion); return; } setOrientationLock(locked); WebView.postEvent('web_app_toggle_orientation_lock', false, {locked: webAppIsOrientationLocked}); } var homeScreenCallbacks = []; function onHomeScreenAdded(eventType, eventData) { receiveWebViewEvent('homeScreenAdded'); } function onHomeScreenChecked(eventType, eventData) { var status = eventData.status || 'unknown'; if (homeScreenCallbacks.length > 0) { for (var i = 0; i < homeScreenCallbacks.length; i++) { var callback = homeScreenCallbacks[i]; callback(status); } homeScreenCallbacks = []; } receiveWebViewEvent('homeScreenChecked', { status: status }); } var WebAppShareMessageOpened = false; function onPreparedMessageSent(eventType, eventData) { if (WebAppShareMessageOpened) { var requestData = WebAppShareMessageOpened; WebAppShareMessageOpened = false; if (requestData.callback) { requestData.callback(true); } receiveWebViewEvent('shareMessageSent'); } } function onPreparedMessageFailed(eventType, eventData) { if (WebAppShareMessageOpened) { var requestData = WebAppShareMessageOpened; WebAppShareMessageOpened = false; if (requestData.callback) { requestData.callback(false); } receiveWebViewEvent('shareMessageFailed', { error: eventData.error }); } } var WebAppRequestChatOpened = false; function onRequestedChatSent(eventType, eventData) { if (WebAppRequestChatOpened) { var requestData = WebAppRequestChatOpened; WebAppRequestChatOpened = false; if (requestData.callback) { requestData.callback(true); } receiveWebViewEvent('requestedChatSent'); } } function onRequestedChatFailed(eventType, eventData) { if (WebAppRequestChatOpened) { var requestData = WebAppRequestChatOpened; WebAppRequestChatOpened = false; if (requestData.callback) { requestData.callback(false); } receiveWebViewEvent('requestedChatFailed', { error: eventData.error }); } } var WebAppEmojiStatusRequested = false; function onEmojiStatusSet(eventType, eventData) { if (WebAppEmojiStatusRequested) { var requestData = WebAppEmojiStatusRequested; WebAppEmojiStatusRequested = false; if (requestData.callback) { requestData.callback(true); } receiveWebViewEvent('emojiStatusSet'); } } function onEmojiStatusFailed(eventType, eventData) { if (WebAppEmojiStatusRequested) { var requestData = WebAppEmojiStatusRequested; WebAppEmojiStatusRequested = false; if (requestData.callback) { requestData.callback(false); } receiveWebViewEvent('emojiStatusFailed', { error: eventData.error }); } } var WebAppEmojiStatusAccessRequested = false; function onEmojiStatusAccessRequested(eventType, eventData) { if (WebAppEmojiStatusAccessRequested) { var requestData = WebAppEmojiStatusAccessRequested; WebAppEmojiStatusAccessRequested = false; if (requestData.callback) { requestData.callback(eventData.status == 'allowed'); } receiveWebViewEvent('emojiStatusAccessRequested', { status: eventData.status }); } } var webAppPopupOpened = false; function onPopupClosed(eventType, eventData) { if (webAppPopupOpened) { var popupData = webAppPopupOpened; webAppPopupOpened = false; var button_id = null; if (typeof eventData.button_id !== 'undefined') { button_id = eventData.button_id; } if (popupData.callback) { popupData.callback(button_id); } receiveWebViewEvent('popupClosed', { button_id: button_id }); } } function getHeaderColor() { if (webAppHeaderColorKey == 'secondary_bg_color') { return themeParams.secondary_bg_color; } else if (webAppHeaderColorKey == 'bg_color') { return themeParams.bg_color; } return webAppHeaderColor; } function setHeaderColor(color) { if (!versionAtLeast('6.1')) { console.warn('[Telegram.WebApp] Header color is not supported in version ' + webAppVersion); return; } if (!versionAtLeast('6.9')) { if (themeParams.bg_color && themeParams.bg_color == color) { color = 'bg_color'; } else if (themeParams.secondary_bg_color && themeParams.secondary_bg_color == color) { color = 'secondary_bg_color'; } } var head_color = null, color_key = null; if (color == 'bg_color' || color == 'secondary_bg_color') { color_key = color; } else if (versionAtLeast('6.9')) { head_color = parseColorToHex(color); if (!head_color) { console.error('[Telegram.WebApp] Header color format is invalid', color); throw Error('WebAppHeaderColorInvalid'); } } if (!versionAtLeast('6.9') && color_key != 'bg_color' && color_key != 'secondary_bg_color') { console.error('[Telegram.WebApp] Header color key should be one of Telegram.WebApp.themeParams.bg_color, Telegram.WebApp.themeParams.secondary_bg_color, \'bg_color\', \'secondary_bg_color\'', color); throw Error('WebAppHeaderColorKeyInvalid'); } webAppHeaderColorKey = color_key; webAppHeaderColor = head_color; updateHeaderColor(); } var appHeaderColorKey = null, appHeaderColor = null; function updateHeaderColor() { if (appHeaderColorKey != webAppHeaderColorKey || appHeaderColor != webAppHeaderColor) { appHeaderColorKey = webAppHeaderColorKey; appHeaderColor = webAppHeaderColor; if (appHeaderColor) { WebView.postEvent('web_app_set_header_color', false, {color: webAppHeaderColor}); } else { WebView.postEvent('web_app_set_header_color', false, {color_key: webAppHeaderColorKey}); } } } function getBackgroundColor() { if (webAppBackgroundColor == 'secondary_bg_color') { return themeParams.secondary_bg_color; } else if (webAppBackgroundColor == 'bg_color') { return themeParams.bg_color; } return webAppBackgroundColor; } function setBackgroundColor(color) { if (!versionAtLeast('6.1')) { console.warn('[Telegram.WebApp] Background color is not supported in version ' + webAppVersion); return; } var bg_color; if (color == 'bg_color' || color == 'secondary_bg_color') { bg_color = color; } else { bg_color = parseColorToHex(color); if (!bg_color) { console.error('[Telegram.WebApp] Background color format is invalid', color); throw Error('WebAppBackgroundColorInvalid'); } } webAppBackgroundColor = bg_color; updateBackgroundColor(); } var appBackgroundColor = null; function updateBackgroundColor() { var color = getBackgroundColor(); if (appBackgroundColor != color) { appBackgroundColor = color; WebView.postEvent('web_app_set_background_color', false, {color: color}); } } var bottomBarColor = 'bottom_bar_bg_color'; function getBottomBarColor() { if (bottomBarColor == 'bottom_bar_bg_color') { return themeParams.bottom_bar_bg_color || themeParams.secondary_bg_color || '#ffffff'; } else if (bottomBarColor == 'secondary_bg_color') { return themeParams.secondary_bg_color; } else if (bottomBarColor == 'bg_color') { return themeParams.bg_color; } return bottomBarColor; } function setBottomBarColor(color) { if (!versionAtLeast('7.10')) { console.warn('[Telegram.WebApp] Bottom bar color is not supported in version ' + webAppVersion); return; } var bg_color; if (color == 'bg_color' || color == 'secondary_bg_color' || color == 'bottom_bar_bg_color') { bg_color = color; } else { bg_color = parseColorToHex(color); if (!bg_color) { console.error('[Telegram.WebApp] Bottom bar color format is invalid', color); throw Error('WebAppBottomBarColorInvalid'); } } bottomBarColor = bg_color; updateBottomBarColor(); window.Telegram.WebApp.SecondaryButton.setParams({}); } var appBottomBarColor = null; function updateBottomBarColor() { var color = getBottomBarColor(); if (appBottomBarColor != color) { appBottomBarColor = color; WebView.postEvent('web_app_set_bottom_bar_color', false, {color: color}); } if (initParams.tgWebAppDebug) { updateDebugBottomBar(); } } function parseColorToHex(color) { color += ''; var match; if (match = /^\s*#([0-9a-f]{6})\s*$/i.exec(color)) { return '#' + match[1].toLowerCase(); } else if (match = /^\s*#([0-9a-f])([0-9a-f])([0-9a-f])\s*$/i.exec(color)) { return ('#' + match[1] + match[1] + match[2] + match[2] + match[3] + match[3]).toLowerCase(); } else if (match = /^\s*rgba?$(\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+\.{0,1}\d*))?$\s*$/.exec(color)) { var r = parseInt(match[1]), g = parseInt(match[2]), b = parseInt(match[3]); r = (r < 16 ? '0' : '') + r.toString(16); g = (g < 16 ? '0' : '') + g.toString(16); b = (b < 16 ? '0' : '') + b.toString(16); return '#' + r + g + b; } return false; } function isColorDark(rgb) { rgb = rgb.replace(/[\s#]/g, ''); if (rgb.length == 3) { rgb = rgb[0] + rgb[0] + rgb[1] + rgb[1] + rgb[2] + rgb[2]; } var r = parseInt(rgb.substr(0, 2), 16); var g = parseInt(rgb.substr(2, 2), 16); var b = parseInt(rgb.substr(4, 2), 16); var hsp = Math.sqrt(0.299 * (r * r) + 0.587 * (g * g) + 0.114 * (b * b)); return hsp < 120; } function versionCompare(v1, v2) { if (typeof v1 !== 'string') v1 = ''; if (typeof v2 !== 'string') v2 = ''; v1 = v1.replace(/^\s+|\s+$/g, '').split('.'); v2 = v2.replace(/^\s+|\s+$/g, '').split('.'); var a = Math.max(v1.length, v2.length), i, p1, p2; for (i = 0; i < a; i++) { p1 = parseInt(v1[i]) || 0; p2 = parseInt(v2[i]) || 0; if (p1 == p2) continue; if (p1 > p2) return 1; return -1; } return 0; } function versionAtLeast(ver) { return versionCompare(webAppVersion, ver) >= 0; } function byteLength(str) { if (window.Blob) { try { return new Blob([str]).size; } catch (e) {} } var s = str.length; for (var i=str.length-1; i>=0; i--) { var code = str.charCodeAt(i); if (code > 0x7f && code <= 0x7ff) s++; else if (code > 0x7ff && code <= 0xffff) s+=2; if (code >= 0xdc00 && code <= 0xdfff) i--; } return s; } var BackButton = (function() { var isVisible = false; var backButton = {}; Object.defineProperty(backButton, 'isVisible', { set: function(val){ setParams({is_visible: val}); }, get: function(){ return isVisible; }, enumerable: true }); var curButtonState = null; WebView.onEvent('back_button_pressed', onBackButtonPressed); function onBackButtonPressed() { receiveWebViewEvent('backButtonClicked'); } function buttonParams() { return {is_visible: isVisible}; } function buttonState(btn_params) { if (typeof btn_params === 'undefined') { btn_params = buttonParams(); } return JSON.stringify(btn_params); } function buttonCheckVersion() { if (!versionAtLeast('6.1')) { console.warn('[Telegram.WebApp] BackButton is not supported in version ' + webAppVersion); return false; } return true; } function updateButton() { var btn_params = buttonParams(); var btn_state = buttonState(btn_params); if (curButtonState === btn_state) { return; } curButtonState = btn_state; WebView.postEvent('web_app_setup_back_button', false, btn_params); } function setParams(params) { if (!buttonCheckVersion()) { return backButton; } if (typeof params.is_visible !== 'undefined') { isVisible = !!params.is_visible; } updateButton(); return backButton; } backButton.onClick = function(callback) { if (buttonCheckVersion()) { onWebViewEvent('backButtonClicked', callback); } return backButton; }; backButton.offClick = function(callback) { if (buttonCheckVersion()) { offWebViewEvent('backButtonClicked', callback); } return backButton; }; backButton.show = function() { return setParams({is_visible: true}); }; backButton.hide = function() { return setParams({is_visible: false}); }; return backButton; })(); var debugBottomBar = null, debugBottomBarBtns = {}, bottomBarHeight = 0; if (initParams.tgWebAppDebug) { debugBottomBar = document.createElement('tg-bottom-bar'); var debugBottomBarStyle = { display: 'flex', gap: '7px', font: '600 14px/18px sans-serif', width: '100%', background: getBottomBarColor(), position: 'fixed', left: '0', right: '0', bottom: '0', margin: '0', padding: '7px', textAlign: 'center', boxSizing: 'border-box', zIndex: '10000' }; for (var k in debugBottomBarStyle) { debugBottomBar.style[k] = debugBottomBarStyle[k]; } document.addEventListener('DOMContentLoaded', function onDomLoaded(event) { document.removeEventListener('DOMContentLoaded', onDomLoaded); document.body.appendChild(debugBottomBar); }); var animStyle = document.createElement('style'); animStyle.innerHTML = 'tg-bottom-button.shine { position: relative; overflow: hidden; } tg-bottom-button.shine:before { content:""; position: absolute; top: 0; width: 100%; height: 100%; background: linear-gradient(120deg, transparent, rgba(255, 255, 255, .2), transparent); animation: tg-bottom-button-shine 5s ease-in-out infinite; } @-webkit-keyframes tg-bottom-button-shine { 0% {left: -100%;} 12%,100% {left: 100%}} @keyframes tg-bottom-button-shine { 0% {left: -100%;} 12%,100% {left: 100%}}'; debugBottomBar.appendChild(animStyle); } function updateDebugBottomBar() { var mainBtn = debugBottomBarBtns.main._bottomButton; var secondaryBtn = debugBottomBarBtns.secondary._bottomButton; if (mainBtn.isVisible || secondaryBtn.isVisible) { debugBottomBar.style.display = 'flex'; bottomBarHeight = 58; if (mainBtn.isVisible && secondaryBtn.isVisible) { if (secondaryBtn.position == 'top') { debugBottomBar.style.flexDirection = 'column-reverse'; bottomBarHeight += 51; } else if (secondaryBtn.position == 'bottom') { debugBottomBar.style.flexDirection = 'column'; bottomBarHeight += 51; } else if (secondaryBtn.position == 'left') { debugBottomBar.style.flexDirection = 'row-reverse'; } else if (secondaryBtn.position == 'right') { debugBottomBar.style.flexDirection = 'row'; } } } else { debugBottomBar.style.display = 'none'; bottomBarHeight = 0; } debugBottomBar.style.background = getBottomBarColor(); if (document.documentElement) { document.documentElement.style.boxSizing = 'border-box'; document.documentElement.style.paddingBottom = bottomBarHeight + 'px'; } setViewportHeight(); } var BottomButtonConstructor = function(type) { var isMainButton = (type == 'main'); if (isMainButton) { var setupFnName = 'web_app_setup_main_button'; var tgEventName = 'main_button_pressed'; var webViewEventName = 'mainButtonClicked'; var buttonTextDefault = 'Continue'; var buttonColorDefault = function(){ return themeParams.button_color || '#2481cc'; }; var buttonTextColorDefault = function(){ return themeParams.button_text_color || '#ffffff'; }; } else { var setupFnName = 'web_app_setup_secondary_button'; var tgEventName = 'secondary_button_pressed'; var webViewEventName = 'secondaryButtonClicked'; var buttonTextDefault = 'Cancel'; var buttonColorDefault = function(){ return getBottomBarColor(); }; var buttonTextColorDefault = function(){ return themeParams.button_color || '#2481cc'; }; } var isVisible = false; var isActive = true; var hasShineEffect = false; var isProgressVisible = false; var iconCustomEmojiId = false; var buttonType = type; var buttonText = buttonTextDefault; var buttonColor = false; var buttonTextColor = false; var buttonPosition = 'left'; var bottomButton = {}; Object.defineProperty(bottomButton, 'type', { get: function(){ return buttonType; }, enumerable: true }); Object.defineProperty(bottomButton, 'iconCustomEmojiId', { set: function(val){ bottomButton.setParams({icon_custom_emoji_id: val}); }, get: function(){ return iconCustomEmojiId; }, enumerable: true }); Object.defineProperty(bottomButton, 'text', { set: function(val){ bottomButton.setParams({text: val}); }, get: function(){ return buttonText; }, enumerable: true }); Object.defineProperty(bottomButton, 'color', { set: function(val){ bottomButton.setParams({color: val}); }, get: function(){ return buttonColor || buttonColorDefault(); }, enumerable: true }); Object.defineProperty(bottomButton, 'textColor', { set: function(val){ bottomButton.setParams({text_color: val}); }, get: function(){ return buttonTextColor || buttonTextColorDefault(); }, enumerable: true }); Object.defineProperty(bottomButton, 'isVisible', { set: function(val){ bottomButton.setParams({is_visible: val}); }, get: function(){ return isVisible; }, enumerable: true }); Object.defineProperty(bottomButton, 'isProgressVisible', { get: function(){ return isProgressVisible; }, enumerable: true }); Object.defineProperty(bottomButton, 'isActive', { set: function(val){ bottomButton.setParams({is_active: val}); }, get: function(){ return isActive; }, enumerable: true }); Object.defineProperty(bottomButton, 'hasShineEffect', { set: function(val){ bottomButton.setParams({has_shine_effect: val}); }, get: function(){ return hasShineEffect; }, enumerable: true }); if (!isMainButton) { Object.defineProperty(bottomButton, 'position', { set: function(val){ bottomButton.setParams({position: val}); }, get: function(){ return buttonPosition; }, enumerable: true }); } var curButtonState = null; WebView.onEvent(tgEventName, onBottomButtonPressed); var debugBtn = null; if (initParams.tgWebAppDebug) { debugBtn = document.createElement('tg-bottom-button'); var debugBtnStyle = { display: 'none', width: '100%', height: '44px', borderRadius: '0', background: 'no-repeat right center', padding: '13px 15px', textAlign: 'center', boxSizing: 'border-box' }; for (var k in debugBtnStyle) { debugBtn.style[k] = debugBtnStyle[k]; } debugBottomBar.appendChild(debugBtn); debugBtn.addEventListener('click', onBottomButtonPressed, false); debugBtn._bottomButton = bottomButton; debugBottomBarBtns[type] = debugBtn; } function onBottomButtonPressed() { if (isActive) { receiveWebViewEvent(webViewEventName); } } function buttonParams() { var color = bottomButton.color; var text_color = bottomButton.textColor; if (isVisible) { var params = { is_visible: true, is_active: isActive, is_progress_visible: isProgressVisible, icon_custom_emoji_id: iconCustomEmojiId, text: buttonText, color: color, text_color: text_color, has_shine_effect: hasShineEffect && isActive && !isProgressVisible }; if (!isMainButton) { params.position = buttonPosition; } } else { var params = { is_visible: false }; } return params; } function buttonState(btn_params) { if (typeof btn_params === 'undefined') { btn_params = buttonParams(); } return JSON.stringify(btn_params); } function updateButton() { var btn_params = buttonParams(); var btn_state = buttonState(btn_params); if (curButtonState === btn_state) { return; } curButtonState = btn_state; WebView.postEvent(setupFnName, false, btn_params); if (initParams.tgWebAppDebug) { updateDebugButton(btn_params); } } function updateDebugButton(btn_params) { if (btn_params.is_visible) { debugBtn.style.display = 'block'; debugBtn.style.opacity = btn_params.is_active ? '1' : '0.8'; debugBtn.style.cursor = btn_params.is_active ? 'pointer' : 'auto'; debugBtn.disabled = !btn_params.is_active; debugBtn.innerText = btn_params.text; debugBtn.className = btn_params.has_shine_effect ? 'shine' : ''; debugBtn.style.backgroundImage = btn_params.is_progress_visible ? "url('data:image/svg+xml," + encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewport="0 0 48 48" width="48px" height="48px"><circle cx="50%" cy="50%" stroke="' + btn_params.text_color + '" stroke-width="2.25" stroke-linecap="round" fill="none" stroke-dashoffset="106" r="9" stroke-dasharray="56.52" rotate="-90"><animate attributeName="stroke-dashoffset" attributeType="XML" dur="360s" from="0" to="12500" repeatCount="indefinite"></animate><animateTransform attributeName="transform" attributeType="XML" type="rotate" dur="1s" from="-90 24 24" to="630 24 24" repeatCount="indefinite"></animateTransform></circle></svg>') + "')" : 'none'; debugBtn.style.backgroundColor = btn_params.color; debugBtn.style.color = btn_params.text_color; } else { debugBtn.style.display = 'none'; } updateDebugBottomBar(); } function setParams(params) { if (typeof params.icon_custom_emoji_id !== 'undefined') { var emoji_id = params.icon_custom_emoji_id; if (emoji_id === false || emoji_id === null) { emoji_id = ''; } if (emoji_id !== '' && !/^[0-9]{10,20}$/.test(emoji_id)) { console.error('[Telegram.WebApp] Bottom button icon custom emoji is invalid', params.icon_custom_emoji_id); throw Error('WebAppBottomButtonParamInvalid'); } iconCustomEmojiId = emoji_id; } if (typeof params.text !== 'undefined') { var text = strTrim(params.text); if (!text.length && !iconCustomEmojiId) { console.error('[Telegram.WebApp] Bottom button text is required', params.text); throw Error('WebAppBottomButtonParamInvalid'); } if (text.length > 64) { console.error('[Telegram.WebApp] Bottom button text is too long', text); throw Error('WebAppBottomButtonParamInvalid'); } buttonText = text; } if (typeof params.color !== 'undefined') { if (params.color === false || params.color === null) { buttonColor = false; } else { var color = parseColorToHex(params.color); if (!color) { console.error('[Telegram.WebApp] Bottom button color format is invalid', params.color); throw Error('WebAppBottomButtonParamInvalid'); } buttonColor = color; } } if (typeof params.text_color !== 'undefined') { if (params.text_color === false || params.text_color === null) { buttonTextColor = false; } else { var text_color = parseColorToHex(params.text_color); if (!text_color) { console.error('[Telegram.WebApp] Bottom button text color format is invalid', params.text_color); throw Error('WebAppBottomButtonParamInvalid'); } buttonTextColor = text_color; } } if (typeof params.is_visible !== 'undefined') { if (params.is_visible && !bottomButton.text.length) { console.error('[Telegram.WebApp] Bottom button text is required'); throw Error('WebAppBottomButtonParamInvalid'); } isVisible = !!params.is_visible; } if (typeof params.has_shine_effect !== 'undefined') { hasShineEffect = !!params.has_shine_effect; } if (!isMainButton && typeof params.position !== 'undefined') { if (params.position != 'left' && params.position != 'right' && params.position != 'top' && params.position != 'bottom') { console.error('[Telegram.WebApp] Bottom button posiition is invalid', params.position); throw Error('WebAppBottomButtonParamInvalid'); } buttonPosition = params.position; } if (typeof params.is_active !== 'undefined') { isActive = !!params.is_active; } updateButton(); return bottomButton; } bottomButton.setText = function(text) { return bottomButton.setParams({text: text}); }; bottomButton.onClick = function(callback) { onWebViewEvent(webViewEventName, callback); return bottomButton; }; bottomButton.offClick = function(callback) { offWebViewEvent(webViewEventName, callback); return bottomButton; }; bottomButton.show = function() { return bottomButton.setParams({is_visible: true}); }; bottomButton.hide = function() { return bottomButton.setParams({is_visible: false}); }; bottomButton.enable = function() { return bottomButton.setParams({is_active: true}); }; bottomButton.disable = function() { return bottomButton.setParams({is_active: false}); }; bottomButton.showProgress = function(leaveActive) { isActive = !!leaveActive; isProgressVisible = true; updateButton(); return bottomButton; }; bottomButton.hideProgress = function() { if (!bottomButton.isActive) { isActive = true; } isProgressVisible = false; updateButton(); return bottomButton; } bottomButton.setParams = setParams; return bottomButton; }; var MainButton = BottomButtonConstructor('main'); var SecondaryButton = BottomButtonConstructor('secondary'); var SettingsButton = (function() { var isVisible = false; var settingsButton = {}; Object.defineProperty(settingsButton, 'isVisible', { set: function(val){ setParams({is_visible: val}); }, get: function(){ return isVisible; }, enumerable: true }); var curButtonState = null; WebView.onEvent('settings_button_pressed', onSettingsButtonPressed); function onSettingsButtonPressed() { receiveWebViewEvent('settingsButtonClicked'); } function buttonParams() { return {is_visible: isVisible}; } function buttonState(btn_params) { if (typeof btn_params === 'undefined') { btn_params = buttonParams(); } return JSON.stringify(btn_params); } function buttonCheckVersion() { if (!versionAtLeast('6.10')) { console.warn('[Telegram.WebApp] SettingsButton is not supported in version ' + webAppVersion); return false; } return true; } function updateButton() { var btn_params = buttonParams(); var btn_state = buttonState(btn_params); if (curButtonState === btn_state) { return; } curButtonState = btn_state; WebView.postEvent('web_app_setup_settings_button', false, btn_params); } function setParams(params) { if (!buttonCheckVersion()) { return settingsButton; } if (typeof params.is_visible !== 'undefined') { isVisible = !!params.is_visible; } updateButton(); return settingsButton; } settingsButton.onClick = function(callback) { if (buttonCheckVersion()) { onWebViewEvent('settingsButtonClicked', callback); } return settingsButton; }; settingsButton.offClick = function(callback) { if (buttonCheckVersion()) { offWebViewEvent('settingsButtonClicked', callback); } return settingsButton; }; settingsButton.show = function() { return setParams({is_visible: true}); }; settingsButton.hide = function() { return setParams({is_visible: false}); }; return settingsButton; })(); var HapticFeedback = (function() { var hapticFeedback = {}; function triggerFeedback(params) { if (!versionAtLeast('6.1')) { console.warn('[Telegram.WebApp] HapticFeedback is not supported in version ' + webAppVersion); return hapticFeedback; } if (params.type == 'impact') { if (params.impact_style != 'light' && params.impact_style != 'medium' && params.impact_style != 'heavy' && params.impact_style != 'rigid' && params.impact_style != 'soft') { console.error('[Telegram.WebApp] Haptic impact style is invalid', params.impact_style); throw Error('WebAppHapticImpactStyleInvalid'); } } else if (params.type == 'notification') { if (params.notification_type != 'error' && params.notification_type != 'success' && params.notification_type != 'warning') { console.error('[Telegram.WebApp] Haptic notification type is invalid', params.notification_type); throw Error('WebAppHapticNotificationTypeInvalid'); } } else if (params.type == 'selection_change') { // no params needed } else { console.error('[Telegram.WebApp] Haptic feedback type is invalid', params.type); throw Error('WebAppHapticFeedbackTypeInvalid'); } WebView.postEvent('web_app_trigger_haptic_feedback', false, params); return hapticFeedback; } hapticFeedback.impactOccurred = function(style) { return triggerFeedback({type: 'impact', impact_style: style}); }; hapticFeedback.notificationOccurred = function(type) { return triggerFeedback({type: 'notification', notification_type: type}); }; hapticFeedback.selectionChanged = function() { return triggerFeedback({type: 'selection_change'}); }; return hapticFeedback; })(); var CloudStorage = (function() { var cloudStorage = {}; function invokeStorageMethod(method, params, callback) { if (!versionAtLeast('6.9')) { console.error('[Telegram.WebApp] CloudStorage is not supported in version ' + webAppVersion); throw Error('WebAppMethodUnsupported'); } invokeCustomMethod(method, params, callback); return cloudStorage; } cloudStorage.setItem = function(key, value, callback) { return invokeStorageMethod('saveStorageValue', {key: key, value: value}, callback); }; cloudStorage.getItem = function(key, callback) { return cloudStorage.getItems([key], callback ? function(err, res) { if (err) callback(err); else callback(null, res[key]); } : null); }; cloudStorage.getItems = function(keys, callback) { return invokeStorageMethod('getStorageValues', {keys: keys}, callback); }; cloudStorage.removeItem = function(key, callback) { return cloudStorage.removeItems([key], callback); }; cloudStorage.removeItems = function(keys, callback) { return invokeStorageMethod('deleteStorageValues', {keys: keys}, callback); }; cloudStorage.getKeys = function(callback) { return invokeStorageMethod('getStorageKeys', {}, callback); }; return cloudStorage; })(); var DeviceStorage = (function() { var deviceStorage = {}; WebView.onEvent('device_storage_key_saved', onDeviceStorageEvent); WebView.onEvent('device_storage_key_received', onDeviceStorageEvent); WebView.onEvent('device_storage_cleared', onDeviceStorageEvent); WebView.onEvent('device_storage_failed', onDeviceStorageEvent); function onDeviceStorageEvent(eventType, eventData) { if (eventData.req_id && webAppCallbacks[eventData.req_id]) { var requestData = webAppCallbacks[eventData.req_id]; delete webAppCallbacks[eventData.req_id]; var res = null, err = null; if (eventType == 'device_storage_failed') { err = eventData.error || 'UNKNOWN_ERROR'; } else if (eventType == 'device_storage_key_received') { res = eventData.value; } else { res = true; } if (requestData.callback) { requestData.callback(err, res); } } } function invokeStorageMethod(method, params, callback) { if (!versionAtLeast('9.0')) { console.error('[Telegram.WebApp] DeviceStorage is not supported in version ' + webAppVersion); throw Error('WebAppMethodUnsupported'); } var req_id = generateCallbackId(16); var req_params = {req_id: req_id}; for (var k in params) { req_params[k] = params[k]; } webAppCallbacks[req_id] = { callback: callback }; WebView.postEvent(method, false, req_params); return deviceStorage; } deviceStorage.setItem = function(key, value, callback) { return invokeStorageMethod('web_app_device_storage_save_key', {key: key, value: value}, callback); }; deviceStorage.getItem = function(key, callback) { return invokeStorageMethod('web_app_device_storage_get_key', {key: key}, callback); }; deviceStorage.removeItem = function(key, callback) { return invokeStorageMethod('web_app_device_storage_save_key', {key: key, value: null}, callback); }; deviceStorage.clear = function(callback) { return invokeStorageMethod('web_app_device_storage_clear', {}, callback); }; return deviceStorage; })(); var SecureStorage = (function() { var secureStorage = {}; WebView.onEvent('secure_storage_key_saved', onSecureStorageEvent); WebView.onEvent('secure_storage_key_received', onSecureStorageEvent); WebView.onEvent('secure_storage_key_restored', onSecureStorageEvent); WebView.onEvent('secure_storage_cleared', onSecureStorageEvent); WebView.onEvent('secure_storage_failed', onSecureStorageEvent); function onSecureStorageEvent(eventType, eventData) { if (eventData.req_id && webAppCallbacks[eventData.req_id]) { var requestData = webAppCallbacks[eventData.req_id]; delete webAppCallbacks[eventData.req_id]; var res = null, err = null, can_restore = null; if (eventType == 'secure_storage_failed') { err = eventData.error || 'UNKNOWN_ERROR'; } else if (eventType == 'secure_storage_key_received') { res = eventData.value; if (eventData.can_restore) { can_restore = true; } } else if (eventType == 'secure_storage_key_restored') { res = eventData.value; } else { res = true; } if (requestData.callback) { requestData.callback(err, res, can_restore); } } } function invokeStorageMethod(method, params, callback) { if (!versionAtLeast('9.0')) { console.error('[Telegram.WebApp] SecureStorage is not supported in version ' + webAppVersion); throw Error('WebAppMethodUnsupported'); } var req_id = generateCallbackId(16); var req_params = {req_id: req_id}; for (var k in params) { req_params[k] = params[k]; } webAppCallbacks[req_id] = { callback: callback }; WebView.postEvent(method, false, req_params); return secureStorage; } secureStorage.setItem = function(key, value, callback) { return invokeStorageMethod('web_app_secure_storage_save_key', {key: key, value: value}, callback); }; secureStorage.getItem = function(key, callback) { return invokeStorageMethod('web_app_secure_storage_get_key', {key: key}, callback); }; secureStorage.restoreItem = function(key, callback) { return invokeStorageMethod('web_app_secure_storage_restore_key', {key: key}, callback); }; secureStorage.removeItem = function(key, callback) { return invokeStorageMethod('web_app_secure_storage_save_key', {key: key, value: null}, callback); }; secureStorage.clear = function(callback) { return invokeStorageMethod('web_app_secure_storage_clear', {}, callback); }; return secureStorage; })(); var BiometricManager = (function() { var isInited = false; var isBiometricAvailable = false; var biometricType = 'unknown'; var isAccessRequested = false; var isAccessGranted = false; var isBiometricTokenSaved = false; var deviceId = ''; var biometricManager = {}; Object.defineProperty(biometricManager, 'isInited', { get: function(){ return isInited; }, enumerable: true }); Object.defineProperty(biometricManager, 'isBiometricAvailable', { get: function(){ return isInited && isBiometricAvailable; }, enumerable: true }); Object.defineProperty(biometricManager, 'biometricType', { get: function(){ return biometricType || 'unknown'; }, enumerable: true }); Object.defineProperty(biometricManager, 'isAccessRequested', { get: function(){ return isAccessRequested; }, enumerable: true }); Object.defineProperty(biometricManager, 'isAccessGranted', { get: function(){ return isAccessRequested && isAccessGranted; }, enumerable: true }); Object.defineProperty(biometricManager, 'isBiometricTokenSaved', { get: function(){ return isBiometricTokenSaved; }, enumerable: true }); Object.defineProperty(biometricManager, 'deviceId', { get: function(){ return deviceId || ''; }, enumerable: true }); var initRequestState = {callbacks: []}; var accessRequestState = false; var authRequestState = false; var tokenRequestState = false; WebView.onEvent('biometry_info_received', onBiometryInfoReceived); WebView.onEvent('biometry_auth_requested', onBiometryAuthRequested); WebView.onEvent('biometry_token_updated', onBiometryTokenUpdated); function onBiometryInfoReceived(eventType, eventData) { isInited = true; if (eventData.available) { isBiometricAvailable = true; biometricType = eventData.type || 'unknown'; if (eventData.access_requested) { isAccessRequested = true; isAccessGranted = !!eventData.access_granted; isBiometricTokenSaved = !!eventData.token_saved; } else { isAccessRequested = false; isAccessGranted = false; isBiometricTokenSaved = false; } } else { isBiometricAvailable = false; biometricType = 'unknown'; isAccessRequested = false; isAccessGranted = false; isBiometricTokenSaved = false; } deviceId = eventData.device_id || ''; if (initRequestState.callbacks.length > 0) { for (var i = 0; i < initRequestState.callbacks.length; i++) { var callback = initRequestState.callbacks[i]; callback(); } initRequestState.callbacks = []; } if (accessRequestState) { var state = accessRequestState; accessRequestState = false; if (state.callback) { state.callback(isAccessGranted); } } receiveWebViewEvent('biometricManagerUpdated'); } function onBiometryAuthRequested(eventType, eventData) { var isAuthenticated = (eventData.status == 'authorized'), biometricToken = eventData.token || ''; if (authRequestState) { var state = authRequestState; authRequestState = false; if (state.callback) { state.callback(isAuthenticated, isAuthenticated ? biometricToken : null); } } receiveWebViewEvent('biometricAuthRequested', isAuthenticated ? { isAuthenticated: true, biometricToken: biometricToken } : { isAuthenticated: false }); } function onBiometryTokenUpdated(eventType, eventData) { var applied = false; if (isBiometricAvailable && isAccessRequested) { if (eventData.status == 'updated') { isBiometricTokenSaved = true; applied = true; } else if (eventData.status == 'removed') { isBiometricTokenSaved = false; applied = true; } } if (tokenRequestState) { var state = tokenRequestState; tokenRequestState = false; if (state.callback) { state.callback(applied); } } receiveWebViewEvent('biometricTokenUpdated', { isUpdated: applied }); } function checkVersion() { if (!versionAtLeast('7.2')) { console.warn('[Telegram.WebApp] BiometricManager is not supported in version ' + webAppVersion); return false; } return true; } function checkInit() { if (!isInited) { console.error('[Telegram.WebApp] BiometricManager should be inited before using.'); throw Error('WebAppBiometricManagerNotInited'); } return true; } biometricManager.init = function(callback) { if (!checkVersion()) { return biometricManager; } if (isInited) { return biometricManager; } if (callback) { initRequestState.callbacks.push(callback); } WebView.postEvent('web_app_biometry_get_info', false); return biometricManager; }; biometricManager.requestAccess = function(params, callback) { if (!checkVersion()) { return biometricManager; } checkInit(); if (!isBiometricAvailable) { console.error('[Telegram.WebApp] Biometrics is not available on this device.'); throw Error('WebAppBiometricManagerBiometricsNotAvailable'); } if (accessRequestState) { console.error('[Telegram.WebApp] Access is already requested'); throw Error('WebAppBiometricManagerAccessRequested'); } var popup_params = {}; if (typeof params.reason !== 'undefined') { var reason = strTrim(params.reason); if (reason.length > 128) { console.error('[Telegram.WebApp] Biometric reason is too long', reason); throw Error('WebAppBiometricRequestAccessParamInvalid'); } if (reason.length > 0) { popup_params.reason = reason; } } accessRequestState = { callback: callback }; WebView.postEvent('web_app_biometry_request_access', false, popup_params); return biometricManager; }; biometricManager.authenticate = function(params, callback) { if (!checkVersion()) { return biometricManager; } checkInit(); if (!isBiometricAvailable) { console.error('[Telegram.WebApp] Biometrics is not available on this device.'); throw Error('WebAppBiometricManagerBiometricsNotAvailable'); } if (!isAccessGranted) { console.error('[Telegram.WebApp] Biometric access was not granted by the user.'); throw Error('WebAppBiometricManagerBiometricAccessNotGranted'); } if (authRequestState) { console.error('[Telegram.WebApp] Authentication request is already in progress.'); throw Error('WebAppBiometricManagerAuthenticationRequested'); } var popup_params = {}; if (typeof params.reason !== 'undefined') { var reason = strTrim(params.reason); if (reason.length > 128) { console.error('[Telegram.WebApp] Biometric reason is too long', reason); throw Error('WebAppBiometricRequestAccessParamInvalid'); } if (reason.length > 0) { popup_params.reason = reason; } } authRequestState = { callback: callback }; WebView.postEvent('web_app_biometry_request_auth', false, popup_params); return biometricManager; }; biometricManager.updateBiometricToken = function(token, callback) { if (!checkVersion()) { return biometricManager; } token = token || ''; if (token.length > 1024) { console.error('[Telegram.WebApp] Token is too long', token); throw Error('WebAppBiometricManagerTokenInvalid'); } checkInit(); if (!isBiometricAvailable) { console.error('[Telegram.WebApp] Biometrics is not available on this device.'); throw Error('WebAppBiometricManagerBiometricsNotAvailable'); } if (!isAccessGranted) { console.error('[Telegram.WebApp] Biometric access was not granted by the user.'); throw Error('WebAppBiometricManagerBiometricAccessNotGranted'); } if (tokenRequestState) { console.error('[Telegram.WebApp] Token request is already in progress.'); throw Error('WebAppBiometricManagerTokenUpdateRequested'); } tokenRequestState = { callback: callback }; WebView.postEvent('web_app_biometry_update_token', false, {token: token}); return biometricManager; }; biometricManager.openSettings = function() { if (!checkVersion()) { return biometricManager; } checkInit(); if (!isBiometricAvailable) { console.error('[Telegram.WebApp] Biometrics is not available on this device.'); throw Error('WebAppBiometricManagerBiometricsNotAvailable'); } if (!isAccessRequested) { console.error('[Telegram.WebApp] Biometric access was not requested yet.'); throw Error('WebAppBiometricManagerBiometricsAccessNotRequested'); } if (isAccessGranted) { console.warn('[Telegram.WebApp] Biometric access was granted by the user, no need to go to settings.'); return biometricManager; } WebView.postEvent('web_app_biometry_open_settings', false); return biometricManager; }; return biometricManager; })(); var LocationManager = (function() { var isInited = false; var isLocationAvailable = false; var isAccessRequested = false; var isAccessGranted = false; var locationManager = {}; Object.defineProperty(locationManager, 'isInited', { get: function(){ return isInited; }, enumerable: true }); Object.defineProperty(locationManager, 'isLocationAvailable', { get: function(){ return isInited && isLocationAvailable; }, enumerable: true }); Object.defineProperty(locationManager, 'isAccessRequested', { get: function(){ return isAccessRequested; }, enumerable: true }); Object.defineProperty(locationManager, 'isAccessGranted', { get: function(){ return isAccessRequested && isAccessGranted; }, enumerable: true }); var initRequestState = {callbacks: []}; var getRequestState = {callbacks: []}; WebView.onEvent('location_checked', onLocationChecked); WebView.onEvent('location_requested', onLocationRequested); function onLocationChecked(eventType, eventData) { isInited = true; if (eventData.available) { isLocationAvailable = true; if (eventData.access_requested) { isAccessRequested = true; isAccessGranted = !!eventData.access_granted; } else { isAccessRequested = false; isAccessGranted = false; } } else { isLocationAvailable = false; isAccessRequested = false; isAccessGranted = false; } if (initRequestState.callbacks.length > 0) { for (var i = 0; i < initRequestState.callbacks.length; i++) { var callback = initRequestState.callbacks[i]; callback(); } initRequestState.callbacks = []; } receiveWebViewEvent('locationManagerUpdated'); } function onLocationRequested(eventType, eventData) { if (!eventData.available) { locationData = null; } else { var locationData = { latitude: eventData.latitude, longitude: eventData.longitude, altitude: null, course: null, speed: null, horizontal_accuracy: null, vertical_accuracy: null, course_accuracy: null, speed_accuracy: null, }; if (typeof eventData.altitude !== 'undefined' && eventData.altitude !== null) { locationData.altitude = eventData.altitude; } if (typeof eventData.course !== 'undefined' && eventData.course !== null) { locationData.course = eventData.course % 360; } if (typeof eventData.speed !== 'undefined' && eventData.speed !== null) { locationData.speed = eventData.speed; } if (typeof eventData.horizontal_accuracy !== 'undefined' && eventData.horizontal_accuracy !== null) { locationData.horizontal_accuracy = eventData.horizontal_accuracy; } if (typeof eventData.vertical_accuracy !== 'undefined' && eventData.vertical_accuracy !== null) { locationData.vertical_accuracy = eventData.vertical_accuracy; } if (typeof eventData.course_accuracy !== 'undefined' && eventData.course_accuracy !== null) { locationData.course_accuracy = eventData.course_accuracy; } if (typeof eventData.speed_accuracy !== 'undefined' && eventData.speed_accuracy !== null) { locationData.speed_accuracy = eventData.speed_accuracy; } } if (!eventData.available || !isLocationAvailable || !isAccessRequested || !isAccessGranted) { initRequestState.callbacks.push(function() { locationResponse(locationData); }); WebView.postEvent('web_app_check_location', false); } else { locationResponse(locationData); } } function locationResponse(response) { if (getRequestState.callbacks.length > 0) { for (var i = 0; i < getRequestState.callbacks.length; i++) { var callback = getRequestState.callbacks[i]; callback(response); } getRequestState.callbacks = []; } if (response !== null) { receiveWebViewEvent('locationRequested', { locationData: response }); } } function checkVersion() { if (!versionAtLeast('8.0')) { console.warn('[Telegram.WebApp] LocationManager is not supported in version ' + webAppVersion); return false; } return true; } function checkInit() { if (!isInited) { console.error('[Telegram.WebApp] LocationManager should be inited before using.'); throw Error('WebAppLocationManagerNotInited'); } return true; } locationManager.init = function(callback) { if (!checkVersion()) { return locationManager; } if (isInited) { return locationManager; } if (callback) { initRequestState.callbacks.push(callback); } WebView.postEvent('web_app_check_location', false); return locationManager; }; locationManager.getLocation = function(callback) { if (!checkVersion()) { return locationManager; } checkInit(); if (!isLocationAvailable) { console.error('[Telegram.WebApp] Location is not available on this device.'); throw Error('WebAppLocationManagerLocationNotAvailable'); } getRequestState.callbacks.push(callback); WebView.postEvent('web_app_request_location'); return locationManager; }; locationManager.openSettings = function() { if (!checkVersion()) { return locationManager; } checkInit(); if (!isLocationAvailable) { console.error('[Telegram.WebApp] Location is not available on this device.'); throw Error('WebAppLocationManagerLocationNotAvailable'); } if (!isAccessRequested) { console.error('[Telegram.WebApp] Location access was not requested yet.'); throw Error('WebAppLocationManagerLocationAccessNotRequested'); } if (isAccessGranted) { console.warn('[Telegram.WebApp] Location access was granted by the user, no need to go to settings.'); return locationManager; } WebView.postEvent('web_app_open_location_settings', false); return locationManager; }; return locationManager; })(); var Accelerometer = (function() { var isStarted = false; var valueX = null, valueY = null, valueZ = null; var startCallbacks = [], stopCallbacks = []; var accelerometer = {}; Object.defineProperty(accelerometer, 'isStarted', { get: function(){ return isStarted; }, enumerable: true }); Object.defineProperty(accelerometer, 'x', { get: function(){ return valueX; }, enumerable: true }); Object.defineProperty(accelerometer, 'y', { get: function(){ return valueY; }, enumerable: true }); Object.defineProperty(accelerometer, 'z', { get: function(){ return valueZ; }, enumerable: true }); WebView.onEvent('accelerometer_started', onAccelerometerStarted); WebView.onEvent('accelerometer_stopped', onAccelerometerStopped); WebView.onEvent('accelerometer_changed', onAccelerometerChanged); WebView.onEvent('accelerometer_failed', onAccelerometerFailed); function onAccelerometerStarted(eventType, eventData) { isStarted = true; if (startCallbacks.length > 0) { for (var i = 0; i < startCallbacks.length; i++) { var callback = startCallbacks[i]; callback(true); } startCallbacks = []; } receiveWebViewEvent('accelerometerStarted'); } function onAccelerometerStopped(eventType, eventData) { isStarted = false; if (stopCallbacks.length > 0) { for (var i = 0; i < stopCallbacks.length; i++) { var callback = stopCallbacks[i]; callback(true); } stopCallbacks = []; } receiveWebViewEvent('accelerometerStopped'); } function onAccelerometerChanged(eventType, eventData) { valueX = eventData.x; valueY = eventData.y; valueZ = eventData.z; receiveWebViewEvent('accelerometerChanged'); } function onAccelerometerFailed(eventType, eventData) { if (startCallbacks.length > 0) { for (var i = 0; i < startCallbacks.length; i++) { var callback = startCallbacks[i]; callback(false); } startCallbacks = []; } receiveWebViewEvent('accelerometerFailed', { error: eventData.error }); } function checkVersion() { if (!versionAtLeast('8.0')) { console.warn('[Telegram.WebApp] Accelerometer is not supported in version ' + webAppVersion); return false; } return true; } accelerometer.start = function(params, callback) { params = params || {}; if (!checkVersion()) { return accelerometer; } var req_params = {}; var refresh_rate = parseInt(params.refresh_rate || 1000); if (isNaN(refresh_rate) || refresh_rate < 20 || refresh_rate > 1000) { console.warn('[Telegram.WebApp] Accelerometer refresh_rate is invalid', refresh_rate); } else { req_params.refresh_rate = refresh_rate; } if (callback) { startCallbacks.push(callback); } WebView.postEvent('web_app_start_accelerometer', false, req_params); return accelerometer; }; accelerometer.stop = function(callback) { if (!checkVersion()) { return accelerometer; } if (callback) { stopCallbacks.push(callback); } WebView.postEvent('web_app_stop_accelerometer'); return accelerometer; }; return accelerometer; })(); var DeviceOrientation = (function() { var isStarted = false; var valueAlpha = null, valueBeta = null, valueGamma = null, valueAbsolute = false; var startCallbacks = [], stopCallbacks = []; var deviceOrientation = {}; Object.defineProperty(deviceOrientation, 'isStarted', { get: function(){ return isStarted; }, enumerable: true }); Object.defineProperty(deviceOrientation, 'absolute', { get: function(){ return valueAbsolute; }, enumerable: true }); Object.defineProperty(deviceOrientation, 'alpha', { get: function(){ return valueAlpha; }, enumerable: true }); Object.defineProperty(deviceOrientation, 'beta', { get: function(){ return valueBeta; }, enumerable: true }); Object.defineProperty(deviceOrientation, 'gamma', { get: function(){ return valueGamma; }, enumerable: true }); WebView.onEvent('device_orientation_started', onDeviceOrientationStarted); WebView.onEvent('device_orientation_stopped', onDeviceOrientationStopped); WebView.onEvent('device_orientation_changed', onDeviceOrientationChanged); WebView.onEvent('device_orientation_failed', onDeviceOrientationFailed); function onDeviceOrientationStarted(eventType, eventData) { isStarted = true; if (startCallbacks.length > 0) { for (var i = 0; i < startCallbacks.length; i++) { var callback = startCallbacks[i]; callback(true); } startCallbacks = []; } receiveWebViewEvent('deviceOrientationStarted'); } function onDeviceOrientationStopped(eventType, eventData) { isStarted = false; if (stopCallbacks.length > 0) { for (var i = 0; i < stopCallbacks.length; i++) { var callback = stopCallbacks[i]; callback(true); } stopCallbacks = []; } receiveWebViewEvent('deviceOrientationStopped'); } function onDeviceOrientationChanged(eventType, eventData) { valueAbsolute = !!eventData.absolute; valueAlpha = eventData.alpha; valueBeta = eventData.beta; valueGamma = eventData.gamma; receiveWebViewEvent('deviceOrientationChanged'); } function onDeviceOrientationFailed(eventType, eventData) { if (startCallbacks.length > 0) { for (var i = 0; i < startCallbacks.length; i++) { var callback = startCallbacks[i]; callback(false); } startCallbacks = []; } receiveWebViewEvent('deviceOrientationFailed', { error: eventData.error }); } function checkVersion() { if (!versionAtLeast('8.0')) { console.warn('[Telegram.WebApp] DeviceOrientation is not supported in version ' + webAppVersion); return false; } return true; } deviceOrientation.start = function(params, callback) { params = params || {}; if (!checkVersion()) { return deviceOrientation; } var req_params = {}; var refresh_rate = parseInt(params.refresh_rate || 1000); if (isNaN(refresh_rate) || refresh_rate < 20 || refresh_rate > 1000) { console.warn('[Telegram.WebApp] DeviceOrientation refresh_rate is invalid', refresh_rate); } else { req_params.refresh_rate = refresh_rate; } req_params.need_absolute = !!params.need_absolute; if (callback) { startCallbacks.push(callback); } WebView.postEvent('web_app_start_device_orientation', false, req_params); return deviceOrientation; }; deviceOrientation.stop = function(callback) { if (!checkVersion()) { return deviceOrientation; } if (callback) { stopCallbacks.push(callback); } WebView.postEvent('web_app_stop_device_orientation'); return deviceOrientation; }; return deviceOrientation; })(); var Gyroscope = (function() { var isStarted = false; var valueX = null, valueY = null, valueZ = null; var startCallbacks = [], stopCallbacks = []; var gyroscope = {}; Object.defineProperty(gyroscope, 'isStarted', { get: function(){ return isStarted; }, enumerable: true }); Object.defineProperty(gyroscope, 'x', { get: function(){ return valueX; }, enumerable: true }); Object.defineProperty(gyroscope, 'y', { get: function(){ return valueY; }, enumerable: true }); Object.defineProperty(gyroscope, 'z', { get: function(){ return valueZ; }, enumerable: true }); WebView.onEvent('gyroscope_started', onGyroscopeStarted); WebView.onEvent('gyroscope_stopped', onGyroscopeStopped); WebView.onEvent('gyroscope_changed', onGyroscopeChanged); WebView.onEvent('gyroscope_failed', onGyroscopeFailed); function onGyroscopeStarted(eventType, eventData) { isStarted = true; if (startCallbacks.length > 0) { for (var i = 0; i < startCallbacks.length; i++) { var callback = startCallbacks[i]; callback(true); } startCallbacks = []; } receiveWebViewEvent('gyroscopeStarted'); } function onGyroscopeStopped(eventType, eventData) { isStarted = false; if (stopCallbacks.length > 0) { for (var i = 0; i < stopCallbacks.length; i++) { var callback = stopCallbacks[i]; callback(true); } stopCallbacks = []; } receiveWebViewEvent('gyroscopeStopped'); } function onGyroscopeChanged(eventType, eventData) { valueX = eventData.x; valueY = eventData.y; valueZ = eventData.z; receiveWebViewEvent('gyroscopeChanged'); } function onGyroscopeFailed(eventType, eventData) { if (startCallbacks.length > 0) { for (var i = 0; i < startCallbacks.length; i++) { var callback = startCallbacks[i]; callback(false); } startCallbacks = []; } receiveWebViewEvent('gyroscopeFailed', { error: eventData.error }); } function checkVersion() { if (!versionAtLeast('8.0')) { console.warn('[Telegram.WebApp] Gyroscope is not supported in version ' + webAppVersion); return false; } return true; } gyroscope.start = function(params, callback) { params = params || {}; if (!checkVersion()) { return gyroscope; } var req_params = {}; var refresh_rate = parseInt(params.refresh_rate || 1000); if (isNaN(refresh_rate) || refresh_rate < 20 || refresh_rate > 1000) { console.warn('[Telegram.WebApp] Gyroscope refresh_rate is invalid', refresh_rate); } else { req_params.refresh_rate = refresh_rate; } if (callback) { startCallbacks.push(callback); } WebView.postEvent('web_app_start_gyroscope', false, req_params); return gyroscope; }; gyroscope.stop = function(callback) { if (!checkVersion()) { return gyroscope; } if (callback) { stopCallbacks.push(callback); } WebView.postEvent('web_app_stop_gyroscope'); return gyroscope; }; return gyroscope; })(); var webAppInvoices = {}; function onInvoiceClosed(eventType, eventData) { if (eventData.slug && webAppInvoices[eventData.slug]) { var invoiceData = webAppInvoices[eventData.slug]; delete webAppInvoices[eventData.slug]; if (invoiceData.callback) { invoiceData.callback(eventData.status); } receiveWebViewEvent('invoiceClosed', { url: invoiceData.url, status: eventData.status }); } } var webAppPopupOpened = false; function onPopupClosed(eventType, eventData) { if (webAppPopupOpened) { var popupData = webAppPopupOpened; webAppPopupOpened = false; var button_id = null; if (typeof eventData.button_id !== 'undefined') { button_id = eventData.button_id; } if (popupData.callback) { popupData.callback(button_id); } receiveWebViewEvent('popupClosed', { button_id: button_id }); } } var webAppScanQrPopupOpened = false; function onQrTextReceived(eventType, eventData) { if (webAppScanQrPopupOpened) { var popupData = webAppScanQrPopupOpened; var data = null; if (typeof eventData.data !== 'undefined') { data = eventData.data; } if (popupData.callback) { if (popupData.callback(data)) { webAppScanQrPopupOpened = false; WebView.postEvent('web_app_close_scan_qr_popup', false); } } receiveWebViewEvent('qrTextReceived', { data: data }); } } function onScanQrPopupClosed(eventType, eventData) { webAppScanQrPopupOpened = false; receiveWebViewEvent('scanQrPopupClosed'); } function onClipboardTextReceived(eventType, eventData) { if (eventData.req_id && webAppCallbacks[eventData.req_id]) { var requestData = webAppCallbacks[eventData.req_id]; delete webAppCallbacks[eventData.req_id]; var data = null; if (typeof eventData.data !== 'undefined') { data = eventData.data; } if (requestData.callback) { requestData.callback(data); } receiveWebViewEvent('clipboardTextReceived', { data: data }); } } var WebAppWriteAccessRequested = false; function onWriteAccessRequested(eventType, eventData) { if (WebAppWriteAccessRequested) { var requestData = WebAppWriteAccessRequested; WebAppWriteAccessRequested = false; if (requestData.callback) { requestData.callback(eventData.status == 'allowed'); } receiveWebViewEvent('writeAccessRequested', { status: eventData.status }); } } function getRequestedContact(callback, timeout) { var reqTo, fallbackTo, reqDelay = 0; var reqInvoke = function() { invokeCustomMethod('getRequestedContact', {}, function(err, res) { if (res.substr(0, 1) == '"' && res.substr(-1) == '"') { // macos fix res = JSON.parse(res); } if (res && res.length) { clearTimeout(fallbackTo); callback(res); } else { reqDelay += 50; reqTo = setTimeout(reqInvoke, reqDelay); } }); }; var fallbackInvoke = function() { clearTimeout(reqTo); callback(''); }; fallbackTo = setTimeout(fallbackInvoke, timeout); reqInvoke(); } var WebAppContactRequested = false; function onPhoneRequested(eventType, eventData) { if (WebAppContactRequested) { var requestData = WebAppContactRequested; WebAppContactRequested = false; var requestSent = eventData.status == 'sent'; var webViewEvent = { status: eventData.status }; if (requestSent) { getRequestedContact(function(res) { if (res && res.length) { webViewEvent.response = res; webViewEvent.responseUnsafe = Utils.urlParseQueryString(res); for (var key in webViewEvent.responseUnsafe) { var val = webViewEvent.responseUnsafe[key]; try { if (val.substr(0, 1) == '{' && val.substr(-1) == '}' || val.substr(0, 1) == '[' && val.substr(-1) == ']') { webViewEvent.responseUnsafe[key] = JSON.parse(val); } } catch (e) {} } } if (requestData.callback) { requestData.callback(requestSent, webViewEvent); } receiveWebViewEvent('contactRequested', webViewEvent); }, 3000); } else { if (requestData.callback) { requestData.callback(requestSent, webViewEvent); } receiveWebViewEvent('contactRequested', webViewEvent); } } } var webAppDownloadFileRequested = false; function onFileDownloadRequested(eventType, eventData) { if (webAppDownloadFileRequested) { var requestData = webAppDownloadFileRequested; webAppDownloadFileRequested = false; var isDownloading = eventData.status == 'downloading'; if (requestData.callback) { requestData.callback(isDownloading); } receiveWebViewEvent('fileDownloadRequested', { status: isDownloading ? 'downloading' : 'cancelled' }); } } function onCustomMethodInvoked(eventType, eventData) { if (eventData.req_id && webAppCallbacks[eventData.req_id]) { var requestData = webAppCallbacks[eventData.req_id]; delete webAppCallbacks[eventData.req_id]; var res = null, err = null; if (typeof eventData.result !== 'undefined') { res = eventData.result; } if (typeof eventData.error !== 'undefined') { err = eventData.error; } if (requestData.callback) { requestData.callback(err, res); } } } function invokeCustomMethod(method, params, callback) { if (!versionAtLeast('6.9')) { console.error('[Telegram.WebApp] Method invokeCustomMethod is not supported in version ' + webAppVersion); throw Error('WebAppMethodUnsupported'); } var req_id = generateCallbackId(16); var req_params = {req_id: req_id, method: method, params: params || {}}; webAppCallbacks[req_id] = { callback: callback }; WebView.postEvent('web_app_invoke_custom_method', false, req_params); }; if (!window.Telegram) { window.Telegram = {}; } Object.defineProperty(WebApp, 'initData', { get: function(){ return webAppInitData; }, enumerable: true }); Object.defineProperty(WebApp, 'initDataUnsafe', { get: function(){ return webAppInitDataUnsafe; }, enumerable: true }); Object.defineProperty(WebApp, 'version', { get: function(){ return webAppVersion; }, enumerable: true }); Object.defineProperty(WebApp, 'platform', { get: function(){ return webAppPlatform; }, enumerable: true }); Object.defineProperty(WebApp, 'colorScheme', { get: function(){ return colorScheme; }, enumerable: true }); Object.defineProperty(WebApp, 'themeParams', { get: function(){ return themeParams; }, enumerable: true }); Object.defineProperty(WebApp, 'isExpanded', { get: function(){ return isExpanded; }, enumerable: true }); Object.defineProperty(WebApp, 'viewportHeight', { get: function(){ return (viewportHeight === false ? window.innerHeight : viewportHeight) - bottomBarHeight; }, enumerable: true }); Object.defineProperty(WebApp, 'viewportStableHeight', { get: function(){ return (viewportStableHeight === false ? window.innerHeight : viewportStableHeight) - bottomBarHeight; }, enumerable: true }); Object.defineProperty(WebApp, 'safeAreaInset', { get: function(){ return safeAreaInset; }, enumerable: true }); Object.defineProperty(WebApp, 'contentSafeAreaInset', { get: function(){ return contentSafeAreaInset; }, enumerable: true }); Object.defineProperty(WebApp, 'isClosingConfirmationEnabled', { set: function(val){ setClosingConfirmation(val); }, get: function(){ return isClosingConfirmationEnabled; }, enumerable: true }); Object.defineProperty(WebApp, 'isVerticalSwipesEnabled', { set: function(val){ toggleVerticalSwipes(val); }, get: function(){ return isVerticalSwipesEnabled; }, enumerable: true }); Object.defineProperty(WebApp, 'isFullscreen', { get: function(){ return webAppIsFullscreen; }, enumerable: true }); Object.defineProperty(WebApp, 'isOrientationLocked', { set: function(val){ toggleOrientationLock(val); }, get: function(){ return webAppIsOrientationLocked; }, enumerable: true }); Object.defineProperty(WebApp, 'isActive', { get: function(){ return webAppIsActive; }, enumerable: true }); Object.defineProperty(WebApp, 'headerColor', { set: function(val){ setHeaderColor(val); }, get: function(){ return getHeaderColor(); }, enumerable: true }); Object.defineProperty(WebApp, 'backgroundColor', { set: function(val){ setBackgroundColor(val); }, get: function(){ return getBackgroundColor(); }, enumerable: true }); Object.defineProperty(WebApp, 'bottomBarColor', { set: function(val){ setBottomBarColor(val); }, get: function(){ return getBottomBarColor(); }, enumerable: true }); Object.defineProperty(WebApp, 'BackButton', { value: BackButton, enumerable: true }); Object.defineProperty(WebApp, 'MainButton', { value: MainButton, enumerable: true }); Object.defineProperty(WebApp, 'SecondaryButton', { value: SecondaryButton, enumerable: true }); Object.defineProperty(WebApp, 'SettingsButton', { value: SettingsButton, enumerable: true }); Object.defineProperty(WebApp, 'HapticFeedback', { value: HapticFeedback, enumerable: true }); Object.defineProperty(WebApp, 'CloudStorage', { value: CloudStorage, enumerable: true }); Object.defineProperty(WebApp, 'DeviceStorage', { value: DeviceStorage, enumerable: true }); Object.defineProperty(WebApp, 'SecureStorage', { value: SecureStorage, enumerable: true }); Object.defineProperty(WebApp, 'BiometricManager', { value: BiometricManager, enumerable: true }); Object.defineProperty(WebApp, 'Accelerometer', { value: Accelerometer, enumerable: true }); Object.defineProperty(WebApp, 'DeviceOrientation', { value: DeviceOrientation, enumerable: true }); Object.defineProperty(WebApp, 'Gyroscope', { value: Gyroscope, enumerable: true }); Object.defineProperty(WebApp, 'LocationManager', { value: LocationManager, enumerable: true }); WebApp.isVersionAtLeast = function(ver) { return versionAtLeast(ver); }; WebApp.setHeaderColor = function(color_key) { WebApp.headerColor = color_key; }; WebApp.setBackgroundColor = function(color) { WebApp.backgroundColor = color; }; WebApp.setBottomBarColor = function(color) { WebApp.bottomBarColor = color; }; WebApp.enableClosingConfirmation = function() { WebApp.isClosingConfirmationEnabled = true; }; WebApp.disableClosingConfirmation = function() { WebApp.isClosingConfirmationEnabled = false; }; WebApp.enableVerticalSwipes = function() { WebApp.isVerticalSwipesEnabled = true; }; WebApp.disableVerticalSwipes = function() { WebApp.isVerticalSwipesEnabled = false; }; WebApp.lockOrientation = function() { WebApp.isOrientationLocked = true; }; WebApp.unlockOrientation = function() { WebApp.isOrientationLocked = false; }; WebApp.requestFullscreen = function() { if (!versionAtLeast('8.0')) { console.error('[Telegram.WebApp] Method requestFullscreen is not supported in version ' + webAppVersion); throw Error('WebAppMethodUnsupported'); } WebView.postEvent('web_app_request_fullscreen'); }; WebApp.exitFullscreen = function() { if (!versionAtLeast('8.0')) { console.error('[Telegram.WebApp] Method exitFullscreen is not supported in version ' + webAppVersion); throw Error('WebAppMethodUnsupported'); } WebView.postEvent('web_app_exit_fullscreen'); }; WebApp.addToHomeScreen = function() { if (!versionAtLeast('8.0')) { console.error('[Telegram.WebApp] Method addToHomeScreen is not supported in version ' + webAppVersion); throw Error('WebAppMethodUnsupported'); } WebView.postEvent('web_app_add_to_home_screen'); }; WebApp.checkHomeScreenStatus = function(callback) { if (!versionAtLeast('8.0')) { console.error('[Telegram.WebApp] Method checkHomeScreenStatus is not supported in version ' + webAppVersion); throw Error('WebAppMethodUnsupported'); } if (callback) { homeScreenCallbacks.push(callback); } WebView.postEvent('web_app_check_home_screen'); }; WebApp.onEvent = function(eventType, callback) { onWebViewEvent(eventType, callback); }; WebApp.offEvent = function(eventType, callback) {offWebViewEvent(eventType, callback); }; WebApp.sendData = function (data) { if (!data || !data.length) { console.error('[Telegram.WebApp] Data is required', data); throw Error('WebAppDataInvalid'); } if (byteLength(data) > 4096) { console.error('[Telegram.WebApp] Data is too long', data); throw Error('WebAppDataInvalid'); } WebView.postEvent('web_app_data_send', false, {data: data}); }; WebApp.switchInlineQuery = function (query, choose_chat_types) { if (!versionAtLeast('6.6')) { console.error('[Telegram.WebApp] Method switchInlineQuery is not supported in version ' + webAppVersion); throw Error('WebAppMethodUnsupported'); } if (!initParams.tgWebAppBotInline) { console.error('[Telegram.WebApp] Inline mode is disabled for this bot. Read more about inline mode: https://core.telegram.org/bots/inline'); throw Error('WebAppInlineModeDisabled'); } query = query || ''; if (query.length > 256) { console.error('[Telegram.WebApp] Inline query is too long', query); throw Error('WebAppInlineQueryInvalid'); } var chat_types = []; if (choose_chat_types) { if (!Array.isArray(choose_chat_types)) { console.error('[Telegram.WebApp] Choose chat types should be an array', choose_chat_types); throw Error('WebAppInlineChooseChatTypesInvalid'); } var good_types = {users: 1, bots: 1, groups: 1, channels: 1}; for (var i = 0; i < choose_chat_types.length; i++) { var chat_type = choose_chat_types[i]; if (!good_types[chat_type]) { console.error('[Telegram.WebApp] Choose chat type is invalid', chat_type); throw Error('WebAppInlineChooseChatTypeInvalid'); } if (good_types[chat_type] != 2) { good_types[chat_type] = 2; chat_types.push(chat_type); } } } WebView.postEvent('web_app_switch_inline_query', false, {query: query, chat_types: chat_types}); }; WebApp.openLink = function (url, options) { var a = document.createElement('A'); a.href = url; if (a.protocol != 'http:' && a.protocol != 'https:') { console.error('[Telegram.WebApp] Url protocol is not supported', url); throw Error('WebAppTgUrlInvalid'); } var url = a.href; options = options || {}; if (versionAtLeast('6.1')) { var req_params = {url: url}; if (versionAtLeast('6.4') && options.try_instant_view) { req_params.try_instant_view = true; } if (versionAtLeast('7.6') && options.try_browser) { req_params.try_browser = options.try_browser; } WebView.postEvent('web_app_open_link', false, req_params); } else { window.open(url, '_blank'); } }; WebApp.openTelegramLink = function (url, options) { var a = document.createElement('A'); a.href = url; if (a.protocol != 'http:' && a.protocol != 'https:') { console.error('[Telegram.WebApp] Url protocol is not supported', url); throw Error('WebAppTgUrlInvalid'); } if (!isTmeHostname(a.hostname)) { console.error('[Telegram.WebApp] Url host is not supported', url); throw Error('WebAppTgUrlInvalid'); } var path_full = a.pathname + a.search; options = options || {}; if (isIframe || versionAtLeast('6.1')) { var req_params = {path_full: path_full}; if (options.force_request) { req_params.force_request = true; } WebView.postEvent('web_app_open_tg_link', false, req_params); } else { location.href = 'https://t.me' + path_full; } }; WebApp.openInvoice = function (url, callback) { var a = document.createElement('A'), match, slug; a.href = url; if (a.protocol != 'http:' && a.protocol != 'https:' || !isTmeHostname(a.hostname) || !(match = a.pathname.match(/^\/(\$|invoice\/)([A-Za-z0-9\-_=]+)$/)) || !(slug = match[2])) { console.error('[Telegram.WebApp] Invoice url is invalid', url); throw Error('WebAppInvoiceUrlInvalid'); } if (!versionAtLeast('6.1')) { console.error('[Telegram.WebApp] Method openInvoice is not supported in version ' + webAppVersion); throw Error('WebAppMethodUnsupported'); } if (webAppInvoices[slug]) { console.error('[Telegram.WebApp] Invoice is already opened'); throw Error('WebAppInvoiceOpened'); } webAppInvoices[slug] = { url: url, callback: callback }; WebView.postEvent('web_app_open_invoice', false, {slug: slug}); }; WebApp.showPopup = function (params, callback) { if (!versionAtLeast('6.2')) { console.error('[Telegram.WebApp] Method showPopup is not supported in version ' + webAppVersion); throw Error('WebAppMethodUnsupported'); } if (webAppPopupOpened) { console.error('[Telegram.WebApp] Popup is already opened'); throw Error('WebAppPopupOpened'); } var title = ''; var message = ''; var buttons = []; var popup_buttons = {}; var popup_params = {}; if (typeof params.title !== 'undefined') { title = strTrim(params.title); if (title.length > 64) { console.error('[Telegram.WebApp] Popup title is too long', title); throw Error('WebAppPopupParamInvalid'); } if (title.length > 0) { popup_params.title = title; } } if (typeof params.message !== 'undefined') { message = strTrim(params.message); } if (!message.length) { console.error('[Telegram.WebApp] Popup message is required', params.message); throw Error('WebAppPopupParamInvalid'); } if (message.length > 256) { console.error('[Telegram.WebApp] Popup message is too long', message); throw Error('WebAppPopupParamInvalid'); } popup_params.message = message; if (typeof params.buttons !== 'undefined') { if (!Array.isArray(params.buttons)) { console.error('[Telegram.WebApp] Popup buttons should be an array', params.buttons); throw Error('WebAppPopupParamInvalid'); } for (var i = 0; i < params.buttons.length; i++) { var button = params.buttons[i]; var btn = {}; var id = ''; if (typeof button.id !== 'undefined') { id = button.id.toString(); if (id.length > 64) { console.error('[Telegram.WebApp] Popup button id is too long', id); throw Error('WebAppPopupParamInvalid'); } } btn.id = id; var button_type = button.type; if (typeof button_type === 'undefined') { button_type = 'default'; } btn.type = button_type; if (button_type == 'ok' || button_type == 'close' || button_type == 'cancel') { // no params needed } else if (button_type == 'default' || button_type == 'destructive') { var text = ''; if (typeof button.text !== 'undefined') { text = strTrim(button.text); } if (!text.length) { console.error('[Telegram.WebApp] Popup button text is required for type ' + button_type, button.text); throw Error('WebAppPopupParamInvalid'); } if (text.length > 64) { console.error('[Telegram.WebApp] Popup button text is too long', text); throw Error('WebAppPopupParamInvalid'); } btn.text = text; } else { console.error('[Telegram.WebApp] Popup button type is invalid', button_type); throw Error('WebAppPopupParamInvalid'); } buttons.push(btn); } } else { buttons.push({id: '', type: 'close'}); } if (buttons.length < 1) { console.error('[Telegram.WebApp] Popup should have at least one button'); throw Error('WebAppPopupParamInvalid'); } if (buttons.length > 3) { console.error('[Telegram.WebApp] Popup should not have more than 3 buttons'); throw Error('WebAppPopupParamInvalid'); } popup_params.buttons = buttons; webAppPopupOpened = { callback: callback }; WebView.postEvent('web_app_open_popup', false, popup_params); }; WebApp.showAlert = function (message, callback) { WebApp.showPopup({ message: message }, callback ? function(){ callback(); } : null); }; WebApp.showConfirm = function (message, callback) { WebApp.showPopup({ message: message, buttons: [ {type: 'ok', id: 'ok'}, {type: 'cancel'} ] }, callback ? function (button_id) { callback(button_id == 'ok'); } : null); }; WebApp.showScanQrPopup = function (params, callback) { if (!versionAtLeast('6.4')) { console.error('[Telegram.WebApp] Method showScanQrPopup is not supported in version ' + webAppVersion); throw Error('WebAppMethodUnsupported'); } if (webAppScanQrPopupOpened) { console.error('[Telegram.WebApp] Popup is already opened'); throw Error('WebAppScanQrPopupOpened'); } var text = ''; var popup_params = {}; if (typeof params.text !== 'undefined') { text = strTrim(params.text); if (text.length > 64) { console.error('[Telegram.WebApp] Scan QR popup text is too long', text); throw Error('WebAppScanQrPopupParamInvalid'); } if (text.length > 0) { popup_params.text = text; } } webAppScanQrPopupOpened = { callback: callback }; WebView.postEvent('web_app_open_scan_qr_popup', false, popup_params); }; WebApp.closeScanQrPopup = function () { if (!versionAtLeast('6.4')) { console.error('[Telegram.WebApp] Method closeScanQrPopup is not supported in version ' + webAppVersion); throw Error('WebAppMethodUnsupported'); } webAppScanQrPopupOpened = false; WebView.postEvent('web_app_close_scan_qr_popup', false); }; WebApp.readTextFromClipboard = function (callback) { if (!versionAtLeast('6.4')) { console.error('[Telegram.WebApp] Method readTextFromClipboard is not supported in version ' + webAppVersion); throw Error('WebAppMethodUnsupported'); } var req_id = generateCallbackId(16); var req_params = {req_id: req_id}; webAppCallbacks[req_id] = { callback: callback }; WebView.postEvent('web_app_read_text_from_clipboard', false, req_params); }; WebApp.requestWriteAccess = function (callback) { if (!versionAtLeast('6.9')) { console.error('[Telegram.WebApp] Method requestWriteAccess is not supported in version ' + webAppVersion); throw Error('WebAppMethodUnsupported'); } if (WebAppWriteAccessRequested) { console.error('[Telegram.WebApp] Write access is already requested'); throw Error('WebAppWriteAccessRequested'); } WebAppWriteAccessRequested = { callback: callback }; WebView.postEvent('web_app_request_write_access'); }; WebApp.requestContact = function (callback) { if (!versionAtLeast('6.9')) { console.error('[Telegram.WebApp] Method requestContact is not supported in version ' + webAppVersion); throw Error('WebAppMethodUnsupported'); } if (WebAppContactRequested) { console.error('[Telegram.WebApp] Contact is already requested'); throw Error('WebAppContactRequested'); } WebAppContactRequested = { callback: callback }; WebView.postEvent('web_app_request_phone'); }; WebApp.downloadFile = function (params, callback) { if (!versionAtLeast('8.0')) { console.error('[Telegram.WebApp] Method downloadFile is not supported in version ' + webAppVersion); throw Error('WebAppMethodUnsupported'); } if (webAppDownloadFileRequested) { console.error('[Telegram.WebApp] Popup is already opened'); throw Error('WebAppDownloadFilePopupOpened'); } var a = document.createElement('A'); var dl_params = {}; if (!params || !params.url || !params.url.length) { console.error('[Telegram.WebApp] Url is required'); throw Error('WebAppDownloadFileParamInvalid'); } a.href = params.url; if (a.protocol != 'https:') { console.error('[Telegram.WebApp] Url protocol is not supported', url); throw Error('WebAppDownloadFileParamInvalid'); } dl_params.url = a.href; if (!params || !params.file_name || !params.file_name.length) { console.error('[Telegram.WebApp] File name is required'); throw Error('WebAppDownloadFileParamInvalid'); } dl_params.file_name = params.file_name; webAppDownloadFileRequested = { callback: callback }; WebView.postEvent('web_app_request_file_download', false, dl_params); }; WebApp.shareToStory = function (media_url, params) { params = params || {}; if (!versionAtLeast('7.8')) { console.error('[Telegram.WebApp] Method shareToStory is not supported in version ' + webAppVersion); throw Error('WebAppMethodUnsupported'); } var a = document.createElement('A'); a.href = media_url; if (a.protocol != 'http:' && a.protocol != 'https:') { console.error('[Telegram.WebApp] Media url protocol is not supported', url); throw Error('WebAppMediaUrlInvalid'); } var share_params = {}; share_params.media_url = a.href; if (typeof params.text !== 'undefined') { var text = strTrim(params.text); if (text.length > 2048) { console.error('[Telegram.WebApp] Text is too long', text); throw Error('WebAppShareToStoryParamInvalid'); } if (text.length > 0) { share_params.text = text; } } if (typeof params.widget_link !== 'undefined') { params.widget_link = params.widget_link || {}; a.href = params.widget_link.url; if (a.protocol != 'http:' && a.protocol != 'https:') { console.error('[Telegram.WebApp] Link protocol is not supported', url); throw Error('WebAppShareToStoryParamInvalid'); } var widget_link = { url: a.href }; if (typeof params.widget_link.name !== 'undefined') { var link_name = strTrim(params.widget_link.name); if (link_name.length > 48) { console.error('[Telegram.WebApp] Link name is too long', link_name); throw Error('WebAppShareToStoryParamInvalid'); } if (link_name.length > 0) { widget_link.name = link_name; } } share_params.widget_link = widget_link; } WebView.postEvent('web_app_share_to_story', false, share_params); }; WebApp.shareMessage = function (msg_id, callback) { if (!versionAtLeast('8.0')) { console.error('[Telegram.WebApp] Method shareMessage is not supported in version ' + webAppVersion); throw Error('WebAppMethodUnsupported'); } if (WebAppShareMessageOpened) { console.error('[Telegram.WebApp] Share message is already opened'); throw Error('WebAppShareMessageOpened'); } WebAppShareMessageOpened = { callback: callback }; WebView.postEvent('web_app_send_prepared_message', false, {id: msg_id}); }; WebApp.requestChat = function (req_id, callback) { if (!versionAtLeast('9.6')) { console.error('[Telegram.WebApp] Method requestChat is not supported in version ' + webAppVersion); throw Error('WebAppMethodUnsupported'); } if (WebAppRequestChatOpened) { console.error('[Telegram.WebApp] Request chat is already opened'); throw Error('WebAppRequestChatOpened'); } WebAppRequestChatOpened = { callback: callback }; WebView.postEvent('web_app_request_chat', false, {req_id: req_id}); }; WebApp.setEmojiStatus = function (custom_emoji_id, params, callback) { params = params || {}; if (!versionAtLeast('8.0')) { console.error('[Telegram.WebApp] Method setEmojiStatus is not supported in version ' + webAppVersion); throw Error('WebAppMethodUnsupported'); } var status_params = {}; status_params.custom_emoji_id = custom_emoji_id; if (typeof params.duration !== 'undefined') { status_params.duration = params.duration; } if (WebAppEmojiStatusRequested) { console.error('[Telegram.WebApp] Emoji status is already requested'); throw Error('WebAppEmojiStatusRequested'); } WebAppEmojiStatusRequested = { callback: callback }; WebView.postEvent('web_app_set_emoji_status', false, status_params); }; WebApp.requestEmojiStatusAccess = function (callback) { if (!versionAtLeast('8.0')) { console.error('[Telegram.WebApp] Method requestEmojiStatusAccess is not supported in version ' + webAppVersion); throw Error('WebAppMethodUnsupported'); } if (WebAppEmojiStatusAccessRequested) { console.error('[Telegram.WebApp] Emoji status permission is already requested'); throw Error('WebAppEmojiStatusAccessRequested'); } WebAppEmojiStatusAccessRequested = { callback: callback }; WebView.postEvent('web_app_request_emoji_status_access'); }; WebApp.invokeCustomMethod = function (method, params, callback) { invokeCustomMethod(method, params, callback); }; WebApp.hideKeyboard = function () { WebView.postEvent('web_app_hide_keyboard'); }; WebApp.ready = function () { WebView.postEvent('web_app_ready'); }; WebApp.expand = function () { WebView.postEvent('web_app_expand'); }; WebApp.close = function (options) { options = options || {}; var req_params = {}; if (versionAtLeast('7.6') && options.return_back) { req_params.return_back = true; } WebView.postEvent('web_app_close', false, req_params); }; window.Telegram.WebApp = WebApp; updateHeaderColor(); updateBackgroundColor(); updateBottomBarColor(); setViewportHeight(); if (initParams.tgWebAppShowSettings) { SettingsButton.show(); } window.addEventListener('resize', onWindowResize); if (isIframe) { document.addEventListener('click', linkHandler); } WebView.onEvent('theme_changed', onThemeChanged); WebView.onEvent('viewport_changed', onViewportChanged); WebView.onEvent('safe_area_changed', onSafeAreaChanged); WebView.onEvent('content_safe_area_changed', onContentSafeAreaChanged); WebView.onEvent('visibility_changed', onVisibilityChanged); WebView.onEvent('invoice_closed', onInvoiceClosed); WebView.onEvent('popup_closed', onPopupClosed); WebView.onEvent('qr_text_received', onQrTextReceived); WebView.onEvent('scan_qr_popup_closed', onScanQrPopupClosed); WebView.onEvent('clipboard_text_received', onClipboardTextReceived); WebView.onEvent('write_access_requested', onWriteAccessRequested); WebView.onEvent('phone_requested', onPhoneRequested); WebView.onEvent('file_download_requested', onFileDownloadRequested); WebView.onEvent('custom_method_invoked', onCustomMethodInvoked); WebView.onEvent('fullscreen_changed', onFullscreenChanged); WebView.onEvent('fullscreen_failed', onFullscreenFailed); WebView.onEvent('home_screen_added', onHomeScreenAdded); WebView.onEvent('home_screen_checked', onHomeScreenChecked); WebView.onEvent('prepared_message_sent', onPreparedMessageSent); WebView.onEvent('prepared_message_failed', onPreparedMessageFailed); WebView.onEvent('requested_chat_sent', onRequestedChatSent); WebView.onEvent('requested_chat_failed', onRequestedChatFailed); WebView.onEvent('emoji_status_set', onEmojiStatusSet); WebView.onEvent('emoji_status_failed', onEmojiStatusFailed); WebView.onEvent('emoji_status_access_requested', onEmojiStatusAccessRequested); WebView.postEvent('web_app_request_theme'); WebView.postEvent('web_app_request_viewport'); WebView.postEvent('web_app_request_safe_area'); WebView.postEvent('web_app_request_content_safe_area'); })(); (function(){ try{ if(window.Telegram && window.Telegram.WebApp){ window.Telegram.WebApp.ready(); window.Telegram.WebApp.expand(); } }catch(e){ window.__appErrors.push({msg:'TG early init: '+e.message, time:Date.now()}); } console.log("[APP] TG WebApp initialized early"); })(); /* Lobster — локальный шрифт (Google Fonts недоступен в РФ, встроен в HTML) */ @font-face { font-family: "Lobster"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/neILzCirqoswsqX9zo-mM4MwWJXNqA.woff2") format("woff2"); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } @font-face { font-family: "Lobster"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/neILzCirqoswsqX9zoamM4MwWJXNqA.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: "Lobster"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/neILzCirqoswsqX9zoKmM4MwWJU.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} :root{ --radius:16px; --radius-sm:12px; } /* 🌙 Ночная тема (по умолчанию) */ [data-theme="night"],:root{ --bg:#0F0620; --bg-top:linear-gradient(180deg,#1B0A3A 0%,#0F0620 100%); --card:#2B0B4E; --text:#F0E6FF; --dim:#B49FD4; --accent:#9B76FF; --accent-light:#C4B0FF; --grad:linear-gradient(135deg,#9B76FF,#C4B0FF); --shadow:0 4px 20px rgba(0,0,0,0.3); } /* ☀️ Дневная тема */ [data-theme="day"]{ --bg:#FFF8F6; --bg-top:var(--bg); --card:#FFFFFF; --text:#2A2140; --dim:#8A8396; --accent:#6B3BFF; --accent-light:#9B76FF; --grad:linear-gradient(135deg,#6B3BFF,#9B76FF); --shadow:0 4px 20px rgba(35,25,60,0.08); } body{ font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; background:var(--bg-top); color:var(--text); min-height:100vh; overflow-x:hidden; transition:background .3s,color .3s; } .page, .header-ill img, .bottom-nav, .nav-item, .theme-card{ transition:background .3s,color .3s,box-shadow .3s; } .page{display:none;padding:0 0 110px;animation:fadeIn .3s ease;} .page.active{display:block;} @keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}} @keyframes twinkle{0%,100%{opacity:0.3;transform:scale(0.8)}50%{opacity:1;transform:scale(1.2)}} @keyframes loading-shimmer{0%{left:-50%}100%{left:100%}} @keyframes pulse-text{0%,100%{opacity:0.5}50%{opacity:1}} /* TOGGLE SWITCH (iOS-style) */ .toggle-switch{position:relative;display:inline-block;width:44px;height:24px;flex-shrink:0;} .toggle-switch input{opacity:0;width:0;height:0;} .toggle-slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background:#555;border-radius:24px;transition:.3s;} .toggle-slider:before{content:"";position:absolute;height:20px;width:20px;left:2px;bottom:2px;background:#fff;border-radius:50%;transition:.3s;box-shadow:0 1px 3px rgba(0,0,0,0.3);} .toggle-switch input:checked + .toggle-slider{background:#34C759;} .toggle-switch input:checked + .toggle-slider:before{transform:translateX(20px);} /* HEADER ILLUSTRATION */ .header-ill{width:100%;overflow:hidden;position:relative;} .header-ill img{width:100%;display:block;object-fit:cover;} .header-overlay{position:absolute;top:0;left:0;right:0;padding:16px 16px 60px;background:linear-gradient(rgba(15,6,32,0.85),transparent);} .header-overlay h1{font-size:28px;font-weight:800;color:#fff;margin-bottom:4px;} .header-badge{ background:var(--card);border-radius:var(--radius);padding:16px 18px; margin-bottom:12px; box-shadow:var(--shadow);display:flex;align-items:center;gap:14px; } .header-badge-icon{ width:48px;height:48px;border-radius:12px; background:var(--grad);display:flex;align-items:center;justify-content:center; font-size:24px;flex-shrink:0; } .header-badge h3{font-size:15px;font-weight:700;margin-bottom:2px;} .header-badge p{font-size:12px;color:var(--dim);line-height:1.3;} /* SECTIONS */ .section{margin:20px 16px 0;} .section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;} .section-header h2{font-size:17px;font-weight:700;} .section-header a{font-size:13px;color:var(--accent);text-decoration:none;font-weight:500;} /* THEME GRID */ .theme-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(90px,1fr));gap:10px;} .theme-card{background:var(--card);border-radius:var(--radius-sm);overflow:hidden;cursor:pointer;box-shadow:0 2px 8px rgba(35,25,60,0.05);transition:transform .2s;-webkit-tap-highlight-color:transparent;} .theme-card:active{transform:scale(0.95);} .theme-card img{width:100%;height:100px;object-fit:cover;display:block;} .theme-card .info{padding:8px;} .theme-card .info h3{font-size:12px;font-weight:600;line-height:1.2;} .theme-card .info p{font-size:9px;color:var(--dim);margin-top:2px;line-height:1.2;display:none;} .theme-item{ background:var(--card);border-radius:var(--radius-sm);padding:14px 4px; text-align:center;box-shadow:0 2px 8px rgba(35,25,60,0.05); cursor:pointer;transition:transform .2s;-webkit-tap-highlight-color:transparent; } .theme-item:active{transform:scale(0.95);} .theme-item .emoji{font-size:28px;display:block;margin-bottom:4px;} .theme-item .label{font-size:11px;color:var(--dim);font-weight:500;line-height:1.2;} /* CATEGORIES */ .cat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;} .cat-item{ background:var(--card);border-radius:var(--radius);padding:18px 8px; text-align:center;box-shadow:0 2px 10px rgba(35,25,60,0.05); cursor:pointer;transition:transform .2s;-webkit-tap-highlight-color:transparent; } .cat-item:active{transform:scale(0.95);} .cat-item .emoji{font-size:30px;display:block;margin-bottom:6px;} .cat-item .label{font-size:11px;font-weight:600;color:var(--dim);} /* HORIZONTAL SCROLL */ .scroll-x{display:flex;gap:12px;overflow-x:auto;padding:4px 0 12px;-webkit-overflow-scrolling:touch;scrollbar-width:none;} .scroll-x::-webkit-scrollbar{display:none;} /* SCROLL ARROW INDICATOR */ .hero-scroll-wrap{position:relative;} .hero-scroll-fade{ position:absolute;right:0;top:0;bottom:0; width:40px; background:linear-gradient(to right,transparent,var(--bg)); pointer-events:none;z-index:1; transition:opacity .4s; } .hero-scroll-fade.hidden{opacity:0;} .hero-scroll-arrow{ position:absolute;top:50%;transform:translateY(-50%); width:24px;height:24px; background:rgba(155,118,255,0.15);backdrop-filter:blur(4px); border:1px solid rgba(155,118,255,0.08); color:var(--accent); display:flex;align-items:center;justify-content:center; font-size:18px;font-weight:lighter; border-radius:4px; pointer-events:none;z-index:2; transition:opacity .4s; } .hero-scroll-arrow-right{right:2px;} .hero-scroll-arrow-left{left:2px;} .hero-scroll-arrow.hidden{opacity:0;} .hero-scroll-arrow-left.hidden{opacity:0;} .card-h{ min-width:160px;background:var(--card);border-radius:var(--radius-sm); padding:10px;box-shadow:0 2px 8px rgba(35,25,60,0.05);flex-shrink:0; } .card-h img{width:100%;height:80px;border-radius:8px;object-fit:cover;margin-bottom:6px;} .card-h h4{font-size:12px;font-weight:600;margin-bottom:3px;line-height:1.2;} .card-h p{font-size:10px;color:var(--dim);line-height:1.3;} /* TABS */ .tabs{padding:0 16px;margin-top:12px;} .tab-bar{display:flex;gap:6px;background:rgba(155,118,255,0.12);border-radius:10px;padding:4px;} .tab{ flex:1;border:none;border-radius:8px;padding:8px;font-size:12px;font-weight:600; cursor:pointer;transition:all .2s;background:transparent;color:var(--dim); } .tab.active{background:var(--accent);color:#fff;} /* LIBRARY CARDS */ .lib-card{ display:flex;gap:12px;background:var(--card);border-radius:var(--radius); padding:14px;box-shadow:0 2px 8px rgba(35,25,60,0.05);margin-bottom:10px; } .lib-card .thumb{width:72px;height:72px;border-radius:10px;overflow:hidden;flex-shrink:0;} .lib-card .thumb img{width:100%;height:100%;object-fit:cover;} .lib-card .info{flex:1;min-width:0;} .lib-card h4{font-size:13px;font-weight:700;margin-bottom:3px;line-height:1.2;} .lib-card .meta{display:flex;gap:6px;flex-wrap:wrap;font-size:10px;color:var(--dim);margin-bottom:6px;} .lib-card .meta span{background:rgba(107,59,255,0.07);padding:2px 8px;border-radius:4px;} .lib-actions{display:flex;gap:6px;} .lib-actions .act-btn{ font-size:10px;padding:5px 10px;border-radius:6px;border:1px solid rgba(107,59,255,0.2); background:transparent;color:var(--accent);cursor:pointer;font-weight:500; display:flex;align-items:center;gap:3px; } /* HERO PICK CIRCLE */ .hero-pick{display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;flex-shrink:0;-webkit-tap-highlight-color:transparent;} .hero-pick .avatar-frame{ width:64px;height:64px;border-radius:50%;overflow:hidden;position:relative; border:3px solid transparent;transition:all .2s; box-shadow:0 2px 8px rgba(35,25,60,0.1); background:linear-gradient(135deg,#3B1B5E,#2B0B4E); } [data-theme="day"] .hero-pick .avatar-frame{ background:linear-gradient(135deg,#E8D8FF,#D4C0FF); } .hero-pick.selected .avatar-frame{border-color:var(--accent);} .hero-pick .avatar-frame img{width:100%;height:100%;object-fit:cover;} .hero-pick .check{ position:absolute;top:-2px;right:-2px;width:20px;height:20px;border-radius:50%; background:var(--accent);display:none;align-items:center;justify-content:center; color:#fff;font-size:10px;border:2px solid #fff; } .hero-pick.selected .check{display:flex;} .hero-pick .name{font-size:11px;font-weight:500;color:var(--text);} /* HERO CARD in heroes page */ .hero-card{ background:var(--card);border-radius:var(--radius);padding:12px; text-align:center;box-shadow:0 2px 8px rgba(35,25,60,0.05);cursor:pointer; transition:transform .2s; } .hero-card:active{transform:scale(0.97);} .hero-card .avatar-wrap{ width:80px;height:80px;border-radius:50%;overflow:hidden;margin:0 auto 8px; box-shadow:0 2px 12px rgba(35,25,60,0.08); background:linear-gradient(135deg,#3B1B5E,#2B0B4E); } [data-theme="day"] .hero-card .avatar-wrap{ background:linear-gradient(135deg,#E8D8FF,#D4C0FF); } .hero-card .avatar-wrap img{width:100%;height:100%;object-fit:cover;} .hero-card .name{font-size:13px;font-weight:700;} .hero-card .desc{font-size:10px;color:var(--dim);margin-top:2px;line-height:1.2;} /* All avatar circles - add background to fix white backgrounds on hero images */ .avatar-wrap{ background:linear-gradient(135deg,#3B1B5E,#2B0B4E) !important; } [data-theme="day"] .avatar-wrap{ background:linear-gradient(135deg,#E8D8FF,#D4C0FF) !important; } /* Force circle avatars to blend - CSS overlay to hide white/black edges */ .avatar-wrap::after, .hero-card .avatar-wrap::after{ content:''; position:absolute; top:0;left:0;right:0;bottom:0; border-radius:50%; box-shadow:inset 0 0 0 3px var(--card); pointer-events:none; } .avatar-wrap{position:relative;} /* Extra: force images to allow bg to show through via border-radius + inset */ .avatar-wrap img, .hero-pick .avatar-frame img, #heroes-grid img[src*="hero_"], .hero-card .avatar-wrap img{ border-radius:50% !important; } /* Hero detail page */ #hero-detail-img{ object-fit:cover; } #hero-detail-img-container{ width:120px;height:120px;border-radius:50%;overflow:hidden;margin:0 auto 14px; box-shadow:0 8px 24px rgba(0,0,0,0.18); background:linear-gradient(135deg,#3B1B5E,#2B0B4E); } [data-theme="day"] #hero-detail-img-container{ background:linear-gradient(135deg,#E8D8FF,#D4C0FF); } /* AGE CHIPS */ .chips-row{display:flex;gap:8px;flex-wrap:wrap;} .age-chip{ background:var(--card);border:2px solid rgba(155,118,255,0.15);border-radius:10px; padding:8px 10px;font-size:12px;cursor:pointer;transition:all .2s; font-weight:600;text-align:center;flex:1;min-width:0; -webkit-tap-highlight-color:transparent; } .age-chip.selected{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent);background:rgba(155,118,255,0.08);} /* CREATE BUTTON */ .create-btn-main, .create-btn{ display:block;width:100%;background:var(--grad);border:none;border-radius:14px; padding:14px;color:#fff;font-size:16px;font-weight:700;cursor:pointer; box-shadow:0 4px 16px rgba(107,59,255,0.3); } .create-btn-main{ display:block;width:100%;margin:14px 0 4px;background:var(--grad); border:none;border-radius:14px; padding:16px;color:#fff;font-size:17px;font-weight:700;cursor:pointer; box-shadow:0 4px 16px rgba(107,59,255,0.3); } /* RITUAL CARD */ .ritual-card{display:flex;align-items:center;gap:14px;background:var(--card);border-radius:var(--radius);padding:14px;box-shadow:var(--shadow);cursor:pointer;} .ritual-card img{width:72px;height:72px;border-radius:10px;object-fit:cover;flex-shrink:0;} .ritual-card .info{flex:1;} .ritual-card .info h3{font-size:14px;font-weight:600;} .ritual-card .info p{font-size:11px;color:var(--dim);margin-top:4px;} /* CARTOON CARD */ .cartoon-card{background:var(--card);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);cursor:pointer;} .cartoon-card img{width:100%;height:90px;object-fit:cover;display:block;} .cartoon-card .info{padding:10px;} .cartoon-card .info h3{font-size:12px;font-weight:600;} .create-btn{ width:100%;background:var(--grad);border:none;border-radius:14px; padding:16px;color:#fff;font-size:17px;font-weight:700;cursor:pointer; box-shadow:0 4px 16px rgba(107,59,255,0.3); } /* RITUAL PAGE */ .ritual-step{ background:var(--card);border-radius:var(--radius);padding:16px; box-shadow:var(--shadow);margin-bottom:12px; border-left:3px solid var(--accent); } .ritual-step .header{display:flex;align-items:center;gap:12px;margin-bottom:6px;} .ritual-step .icon{width:44px;height:44px;border-radius:50%;background:rgba(107,59,255,0.1);display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0;} .ritual-step .badge{background:var(--accent);color:#fff;font-size:10px;padding:2px 8px;border-radius:6px;font-weight:600;} .ritual-step h3{font-size:15px;font-weight:600;} .ritual-step p{font-size:12px;color:var(--dim);line-height:1.5;margin-top:4px;} .ritual-step .tip{background:rgba(107,59,255,0.06);border-radius:8px;padding:8px 10px;margin-top:8px;font-size:11px;color:var(--dim);border-left:2px solid var(--accent);} /* SLEEP CALCULATOR */ .sleep-calc{ background:var(--card);border-radius:var(--radius); box-shadow:var(--shadow);overflow:hidden;margin-bottom:12px; } .sleep-calc-header{ background:var(--grad);padding:14px 16px;color:#fff; display:flex;align-items:center;gap:10px; } .sleep-calc-header h3{font-size:15px;font-weight:700;} .sleep-calc-body{padding:16px;} .sleep-calc label{display:block;font-size:12px;color:var(--dim);margin-bottom:4px;margin-top:10px;font-weight:500;} .sleep-calc label:first-child{margin-top:0;} .sleep-calc select,.sleep-calc input[type="time"]{ width:100%;background:var(--bg);border:1px solid rgba(107,59,255,0.15); border-radius:10px;padding:10px 12px;font-size:14px; color:var(--text);outline:none;appearance:auto;-webkit-appearance:auto; } .sleep-calc select:focus,.sleep-calc input:focus{border-color:var(--accent);} .sleep-calc .result{ margin-top:14px;background:rgba(107,59,255,0.06);border-radius:12px; padding:14px;display:none; } .sleep-calc .result.show{display:block;} .sleep-calc .result .big-time{ font-size:28px;font-weight:800;color:var(--accent);text-align:center; margin-bottom:4px; } .sleep-calc .result .desc{ font-size:12px;color:var(--dim);text-align:center;line-height:1.5; } .sleep-calc .mode-toggle{ display:flex;gap:8px;margin-bottom:14px; } .sleep-calc .mode-btn{ flex:1;padding:8px;border-radius:10px;border:1px solid rgba(107,59,255,0.2); background:transparent;color:var(--dim);font-size:12px;font-weight:500; cursor:pointer;text-align:center;transition:all .2s; } .sleep-calc .mode-btn.active{ background:rgba(107,59,255,0.1);border-color:var(--accent);color:var(--accent); } /* EXPERT TIP */ .expert-tip{ background:linear-gradient(135deg,rgba(107,59,255,0.06),rgba(155,118,255,0.1)); border-radius:12px;padding:14px;margin-bottom:12px; border:1px solid rgba(107,59,255,0.12); } .expert-tip .title{font-size:13px;font-weight:600;color:var(--accent);margin-bottom:4px;display:flex;align-items:center;gap:6px;} .expert-tip p{font-size:12px;color:var(--dim);line-height:1.5;} /* BOTTOM NAV */ .bottom-nav{ position:fixed;bottom:0;left:0;right:0;z-index:100; background:var(--card);box-shadow:0 -2px 10px rgba(0,0,0,0.2); display:flex;justify-content:space-around;padding:8px 0 max(8px,env(safe-area-inset-bottom,8px)); } .nav-item{ flex-direction:column;align-items:center;gap:2px; background:none;border:none;font-size:11px;color:var(--dim);cursor:pointer; transition:color .2s;display:flex;padding:4px 12px; -webkit-tap-highlight-color:transparent; } .nav-item .icon{font-size:24px;} .nav-item.active{color:var(--accent);} /* FILTERS */ .filter-row{display:flex;gap:6px;overflow-x:auto;padding:4px 0 12px;scrollbar-width:none;} .filter-row::-webkit-scrollbar{display:none;} .filter-chip{ background:var(--card);border:1px solid rgba(107,59,255,0.1);border-radius:20px; padding:8px 16px;font-size:12px;font-weight:500;cursor:pointer;white-space:nowrap; transition:all .2s; } .filter-chip.active{background:rgba(107,59,255,0.12);border-color:var(--accent);color:var(--accent);} /* SEARCH */ .search-wrap{ background:var(--card);border-radius:12px;padding:0 16px; display:flex;align-items:center;gap:10px;box-shadow:0 2px 8px rgba(35,25,60,0.04); } .search-wrap input{ flex:1;border:none;outline:none;background:none; font-size:14px;padding:14px 0;color:var(--text); } .search-wrap input::placeholder{color:var(--dim);}

🌸 Сказочная Лавка

🧠 рекомендуют психологи

Терапевтические и волшебные сказки для детей 0–7 лет

добро пожаловать в мир добрых историй

🌙 Вечерний ритуал

Подробнее →

Спокойной ночи, малыш

4 шага к крепкому сну 🌙

🎮 Игры

🎬 Мини-мультики

Все →

🎯 Все темы

🦸 Все герои

Выберите героя для сказки

🎯 Все ситуации

🎂 Возраст

1–2

3–4

5–6

7–8

🦸 Герой-помощник → листай

›

✓

Зайка Лили

✓

Мишка Топа

✓

Совёнок Умка

✓

Слонёнок Элли

✓

Осьминожка Оли

✓

Ежонок Колючка

✓

Оленёнок Бэмби

✓

Жирафик Ами

✓

Принцесса Лея

✓

Принц Кристоф

✓

Волчонок Вуди

✓

Дельфинёнок Блю

👶 Имя ребёнка

История будет создана специально для вашего малыша

🌙⭐✨🌟⭐🌙

⭐✨🌟⭐✨🌟

🌙

Вечерний ритуал

Научный подход к спокойному сну ребёнка 🧠

🧠 Наука сна

По данным Американской академии педиатрии, дети от 1 до 7 лет нуждаются в 10–14 часах сна ежедневно (с учётом дневного сна). Регулярный вечерний ритуал снижает уровень кортизола и помогает вырабатывать мелатонин — гормон сна. Всего 20–30 минут спокойных занятий перед сном улучшают засыпание на 40%.

⏰

Калькулятор сна

Рассчитайте идеальное время для укладывания

🌙 Во сколько уложить

☀️ Во сколько проснётся

Возраст ребёнка 😴 Дневной сон (часов)

⏰ Во сколько просыпается утром?

21:00

✨ 4 шага ритуала ✨

Вода 36–37 °C — не горячая! Тёплая ванна расслабляет мышцы, снижает кортизол. После выхода из ванны температура тела падает — это естественный сигнал для мозга «пора спать». Добавьте лавандовое масло или пену.

💡 Совет: Не используйте активные игры в воде. Пусть это будет спокойное купание с тихими разговорами.

Почитайте сказку из нашего сборника спокойным, монотонным голосом — это снижает частоту сердечных сокращений и подготавливает нервную систему ко сну. Выбирайте истории без острых сюжетов, с позитивной концовкой.

💡 Совет: Читайте с одинаковой интонацией, без резких эмоций. Можно перечитать уже знакомую сказку — предсказуемость успокаивает.

5–7 минут объятий, шепота и благодарности. Обсудите 3 хорошие события дня (это снижает тревожность и формирует позитивный настрой). Завершите фразой-якорем: «Ты в безопасности, я рядом, сладких снов».

💡 Совет: Не обсуждайте проблемы и неприятные события перед сном — отложите на утро.

Приглушите свет за 15–20 минут (используйте ночник с тёплым спектром 2700K). Белый шум или спокойная мелодия помогают отфильтровать бытовые звуки. Оптимальная температура в комнате: 18–21 °C.

💡 Совет: Экраны (телефоны, планшеты) — минимум за 1 час до сна. Синий свет подавляет выработку мелатонина.

📊 Нормы сна по возрасту

1–2 года: 11–14 часов (ночь + дневной сон)

3–5 лет: 10–13 часов (ночь, дневной сон опционально)

Источник: American Academy of Sleep Medicine

🎬

Мини-мультики

Короткие анимации с любимыми героями

🎞️ Все мультики

⏳ Загрузка мультиков...

👤 Профиль

Настройки аккаунта, подписки и детей

💎 Подписка Загрузка...

📖

Сказок осталось

🎁

Бесплатно

🔹 3 бесплатные текстовые сказки каждому новому пользователю
🔹 Аудио и мультики — по подписке

⭐ Сказки без границ

899 ₽ /мес

1 299 ₽

✨ Безлимитные сказки
🎧 5 аудиосказок в месяц
🎬 5 мультиков в месяц
🔄 Отмена в любой момент

📚

Сказок

🎧

Аудио

⭐

Избранное

🎬

Мультики

🏅 Медали 0 собрано

💬 Возникли вопросы?

🔍 ID: —

Подписка: —

Статус API: —

🔔 Уведомления

Новые сказки и ритуалы

ИП Стаховская М.О. | ИНН 695204334212

📞 8 (919) 054-92-28 | ✉️ cutwood.manager@gmail.com

💳 Цены указаны в рублях РФ.
Оплата через сервис Robokassa. Безопасный приём платежей.

📖 Порядок оказания услуги: После оплаты подписки вы получаете полный доступ ко всем сказкам, аудио и мультикам на период оплаченного тарифа. Доступ активируется моментально.

🔄 Возврат средств: Вы можете вернуть деньги в течение 14 дней с момента оплаты, если услуга не была оказана или доступ не был активирован. Для возврата напишите на cutwood.manager@gmail.com с указанием номера платежа.

🧩 Собери пазл

👶 Выбери героя для пазла:

🧩

Выбери героя сверху,
чтобы собрать его картинку!

// ===================== DATA ===================== let CARTOONS = []; let purchasedCartoons = []; // Загрузка мультиков из JSON function loadCartoons(){ traceStep('load-cartoons'); fetch('cartoons.json?t=' + Date.now()) .then(r => r.json()) .then(data => { CARTOONS = data.cartoons || []; // Загружаем купленные try { var saved = localStorage.getItem('purchased_cartoons'); purchasedCartoons = saved ? JSON.parse(saved) : []; } catch(e){ purchasedCartoons = []; } // Бесплатные мультики доступны всем CARTOONS.forEach(function(c){ if(c.free && purchasedCartoons.indexOf(c.id) === -1){ purchasedCartoons.push(c.id); } }); try { localStorage.setItem('purchased_cartoons', JSON.stringify(purchasedCartoons)); } catch(e){} renderCartoonGrid(); }) .catch(function(err){ console.error('Cartoons load error:', err); document.getElementById('cartoon-list-container').innerHTML = '<div style="grid-column:1/-1;text-align:center;padding:40px 0;color:var(--dim);font-size:14px;">😔 Не удалось загрузить мультики</div>'; }); } function renderCartoonGrid(){ var grid = document.getElementById('cartoon-list-container'); if(!grid) return; if(!CARTOONS.length){ grid.innerHTML = '<div style="grid-column:1/-1;text-align:center;padding:40px 0;color:var(--dim);font-size:14px;">🎬 Скоро здесь появятся мультики!</div>'; return; } grid.innerHTML = CARTOONS.map(function(c){ var isPurchased = purchasedCartoons.indexOf(c.id) !== -1; var priceStr = c.price ? c.price + '₽' : ''; var hasVideo = c.video_url && c.video_url.length > 0; var showBtn = isPurchased && hasVideo; return '<div style="background:var(--card);border-radius:var(--radius);overflow:hidden;box-shadow:0 2px 8px rgba(35,25,60,0.05);">' + '<img src="' + (c.thumbnail || 'images/hero_lily.png') + '" alt="" style="width:100%;height:90px;object-fit:cover;display:block;">' + '<div style="padding:8px 10px;">' + '<div style="font-size:11px;font-weight:600;margin-bottom:2px;">' + (c.theme ? '<span style="font-size:9px;color:var(--dim);font-weight:400;">' + c.theme + '</span> ' : '') + (c.title || 'Мультик') + '</div>' + '<div style="font-size:9px;color:var(--dim);margin-bottom:6px;">' + (c.description || '') + (c.duration ? ' · ' + c.duration : '') + '</div>' + (showBtn ? '<button onclick="playCartoon(\'' + c.id + '\')" style="width:100%;background:var(--grad);border:none;border-radius:10px;padding:8px;font-size:11px;font-weight:700;color:#fff;cursor:pointer;">▶ Смотреть</button>' : '<button onclick="buySingleCartoon(\'' + c.id + '\')" style="width:100%;background:rgba(155,118,255,0.12);border:1px solid rgba(155,118,255,0.2);border-radius:10px;padding:8px;font-size:11px;font-weight:700;color:var(--accent);cursor:pointer;">' + (c.price ? '💎 ' + c.price + '₽' : '💎 Купить') + '</button>' ) + '</div></div>'; }).join(''); // Обновляем и мини-сетку на главной renderMainCartoonGrid(); } function renderMainCartoonGrid(){ var grid = document.getElementById('main-cartoon-grid'); if(!grid) return; if(!CARTOONS.length){ grid.innerHTML = '<div style="grid-column:1/-1;text-align:center;padding:20px;color:var(--dim);font-size:12px;">🎬 Скоро здесь появятся мультики</div>'; return; } grid.innerHTML = CARTOONS.slice(0, 4).map(function(c){ var isPurchased = purchasedCartoons.indexOf(c.id) !== -1; return '<div class="cartoon-card" onclick="' + (isPurchased && c.video_url ? 'playCartoon(\'' + c.id + '\')' : 'showPage(\'page-cartoons\')') + '" style="background:var(--card);border-radius:var(--radius);overflow:hidden;box-shadow:0 2px 8px rgba(35,25,60,0.05);cursor:pointer;">' + '<img src="' + (c.thumbnail || 'images/hero_lily.png') + '" alt="" style="width:100%;height:80px;object-fit:cover;display:block;">' + '<div style="padding:8px 10px;">' + '<div style="font-size:11px;font-weight:600;">' + (c.title || 'Мультик') + '</div>' + '<div style="font-size:9px;color:var(--dim);margin-top:2px;">' + (c.duration || '') + (isPurchased ? ' · ✅ Есть' : ' · ' + (c.price ? c.price + '₽' : '')) + '</div>' + '</div></div>'; }).join(''); } function playCartoon(id){ var c = CARTOONS.find(function(x){ return x.id === id; }); if(!c || !c.video_url){ showToast('😔 У этого мультика пока нет видео'); return; } var video = document.getElementById('cartoon-player-video'); var title = document.getElementById('cartoon-player-title'); var desc = document.getElementById('cartoon-player-desc'); video.src = c.video_url; title.textContent = '▶ ' + c.title; desc.textContent = (c.description || '') + ' · ' + (c.duration || ''); document.getElementById('cartoon-player-section').style.display = 'block'; video.play(); // Закрываем список document.getElementById('cartoon-list-container').style.display = 'none'; showToast('🎬 Включаем мультик...'); } function closeCartoonPlayer(){ var video = document.getElementById('cartoon-player-video'); video.pause(); video.src = ''; document.getElementById('cartoon-player-section').style.display = 'none'; document.getElementById('cartoon-list-container').style.display = ''; } function buySingleCartoon(id){ var c = CARTOONS.find(function(x){ return x.id === id; }); if(!c) return; showToast('🎬 Переход к оплате мультика...'); fetch('/api/payment/create', { method: 'POST', headers: {'Content-Type': 'application/json'}, body: JSON.stringify({type: 'cartoon_single', cartoon_id: c.id}) }) .then(r => r.json()) .then(data => { if(data.payment_url){ if(window.Telegram && window.Telegram.WebApp){ window.Telegram.WebApp.openLink(data.payment_url, {try_instant_view: false}); } else { setTimeout(function(){ window.location.href = data.payment_url; }, 500); } } else { showToast('😔 Ошибка: ' + (data.error || 'Не удалось создать платёж')); } }) .catch(function(err){ showToast('😔 Ошибка соединения с сервером'); console.error('BuySingleCartoon error:', err); }); } // Маркируем мультик как купленный после оплаты function markCartoonPurchased(cartoonId){ if(purchasedCartoons.indexOf(cartoonId) === -1){ purchasedCartoons.push(cartoonId); try { localStorage.setItem('purchased_cartoons', JSON.stringify(purchasedCartoons)); } catch(e){} } renderCartoonGrid(); } const THEMES = [ {id:'doctor', icon:'😨', title:'Боюсь врача', desc:'Страшно идти к доктору', img:'doctor_illustration.png'}, {id:'darkness', icon:'🌙', title:'Боюсь темноты', desc:'Страшно спать без света?', img:'theme_darkness.png?v=20260728_5'}, {id:'sleep', icon:'🌙', title:'Не хочу спать', desc:'«Ещё пять минуточек!»', img:'theme_sleep.png?v=20260728_5'}, {id:'kindergarten', icon:'🏫', title:'Не хочу в садик', desc:'Капризы по утрам', img:'theme_kindergarten.png?v=20260728_5'}, {id:'jealousy', icon:'💔', title:'Ревность', desc:'Когда в семье малыш', img:'theme_jealousy.png?v=20260728_5'}, {id:'anger', icon:'😤', title:'Часто злюсь', desc:'Как справляться с гневом', img:'theme_anger.png?v=20260728_5'}, {id:'hysterics', icon:'😭', title:'Бывают истерики', desc:'Когда эмоции зашкаливают', img:'theme_hysterics.png?v=20260728_5'}, {id:'friends', icon:'🤝', title:'Хочу найти друзей', desc:'Как подружиться', img:'theme_friends.png?v=20260728_5'}, {id:'courage', icon:'🦁', title:'Хочу стать смелее', desc:'Быть храбрым — это круто', img:'theme_courage.png?v=20260728_5'}, {id:'selfbelief', icon:'✨', title:'Хочу поверить в себя', desc:'Я всё могу!', img:'theme_selfbelief.png?v=20260728_5'}, {id:'custom', icon:'📝', title:'Своя ситуация', desc:'Напишите своими словами', img:'theme_custom.png?v=20260728_5'}, {id:'magic', icon:'🧚', title:'Волшебная сказка', desc:'Без повода — для души', img:'theme_magic.png?v=20260728_5'}, {id:'potty', icon:'🚽', title:'Приучение к горшку', desc:'Дружу с горшком', img:'theme_potty.png?v=20260728_5'}, {id:'separation', icon:'👶', title:'Адаптация', desc:'Привыкаю к новому', img:'theme_separation.png?v=20260728_5'}, {id:'eating', icon:'🍽️', title:'Еда', desc:'Кушаю сам с удовольствием', img:'theme_eating.png?v=20260728_5'}, {id:'dressing', icon:'👕', title:'Одевание', desc:'Одеваюсь сам', img:'theme_dressing.png?v=20260728_5'}, {id:'bathing', icon:'🛁', title:'Купание', desc:'Купаться весело!', img:'theme_bathing.png?v=20260728_5'}, {id:'brushing', icon:'🪥', title:'Чистка зубов', desc:'Чищу зубки как взрослый', img:'theme_brushing.png?v=20260728_5'}, {id:'tidying', icon:'🧸', title:'Уборка игрушек', desc:'Убираю игрушки сам', img:'theme_tidying.png?v=20260728_5'}, {id:'sharing', icon:'🤲', title:'Делюсь с другими', desc:'Учусь делиться', img:'theme_sharing.png?v=20260728_5'} ]; const HEROES = [ {id:'lily', name:'Зайка Лили', img:'hero_lily.png?v=20260728_5', icon:'🐰', filter:'animal', short:'Добрая и заботливая', story:'Зайка Лили очень нежная и смелая по-своему. Она помогает малышам справляться со страхами, учит доверять себе и находить спокойствие даже в непростые моменты.'}, {id:'topa', name:'Мишка Топа', img:'hero_topa.png?v=20260728_5', icon:'🐻', filter:'animal', short:'Весёлый сладкоежка', story:'Мишка Топа любит уют, вкусности и тёплые разговоры. С ним сказки получаются мягкими, добрыми и помогают ребёнку чувствовать себя в безопасности.'}, {id:'umka', name:'Совёнок Умка', img:'hero_umka.png?v=20260728_5', icon:'🦉', filter:'animal', short:'Мудрый и любознательный', story:'Совёнок Умка задаёт хорошие вопросы и помогает находить ответы. Он поддерживает детей, когда нужно понять свои чувства и научиться дружить.'}, {id:'elly', name:'Слонёнок Элли', img:'hero_elly.png?v=20260728_5', icon:'🐘', filter:'animal', short:'Нежная и добрая', story:'Слонёнок Элли очень ласковая и чуткая. Она особенно хорошо подходит для историй про заботу, привязанность и уверенность в себе.'}, {id:'oli', name:'Осьминожка Оли', img:'hero_oli.png?v=20260728_5', icon:'🐙', filter:'water', short:'Весёлая и быстрая', story:'Осьминожка Оли обожает приключения и всегда находит необычный выход. Она помогает детям легче относиться к новым ситуациям и переменам.'}, {id:'koluchka', name:'Ежонок Колючка', img:'hero_koluchka.png?v=20260728_5', icon:'🦔', filter:'animal', short:'Добрый внутри', story:'Ежонок Колючка может казаться колючим, но у него очень тёплое сердце. Его истории хорошо подходят для тем дружбы, обид и принятия себя.'}, {id:'bambi', name:'Оленёнок Бэмби', img:'hero_bambi.png?v=20260728_5', icon:'🦌', filter:'animal', short:'Мечтательный исследователь', story:'Оленёнок Бэмби любит открывать новое и замечать красоту вокруг. С ним получаются вдохновляющие истории про смелость и любопытство.'}, {id:'ami', name:'Жирафик Ами', img:'hero_ami.png?v=20260728_5', icon:'🦒', filter:'animal', short:'Любопытный и высокий', story:'Жирафик Ами видит чуть дальше других и умеет замечать важное. Он помогает ребёнку спокойно смотреть на новые задачи и маленькими шагами идти вперёд.'}, {id:'leya', name:'Принцесса Лея', img:'hero_leya.png?v=20260728_5', icon:'👸', filter:'fairy', short:'Смелая и добрая', story:'Принцесса Лея умеет быть мягкой и сильной одновременно. Её сказки про доброту, веру в себя и внутреннюю красоту.'}, {id:'kristoff', name:'Принц Кристоф', img:'hero_kristoff.png?v=20260728_5', icon:'🤴', filter:'fairy', short:'Отважный и благородный', story:'Принц Кристоф всегда готов защитить слабых и поддержать друзей. Он помогает детям учиться ответственности, храбрости и честности.'}, {id:'vudi', name:'Волчонок Вуди', img:'hero_vudi.png?v=20260728_5', icon:'🐺', filter:'animal', short:'Игривый и смелый', story:'Волчонок Вуди энергичный и любознательный. Он помогает детям преодолевать стеснение, смело пробовать новое и находить друзей в любой компании.'}, {id:'blu', name:'Дельфинёнок Блю', img:'hero_blu.png?v=20260728_5', icon:'🐬', filter:'water', short:'Весёлый путешественник', story:'Дельфинёнок Блю обожает плавать по волнам фантазии. Он учит детей не бояться глубины чувств, доверять себе и радоваться каждому новому дню.'} ]; const FREE_LIBRARY_STORIES = [ {id:'free-1', title:'Как зайка научился не бояться темноты', theme:'🌙 Темнота', date:'Бесплатно', hero:'lily', text:'Однажды вечером маленький зайка долго не хотел ложиться спать. Ему казалось, что в тёмной комнате всё становится чужим и непонятным. Но мудрая Зайка Лили предложила посмотреть на ночь по-другому. Они вместе заметили, как луна мягко рисует серебряную дорожку на полу, как звёзды подмигивают в окно, а любимый плед превращается в тёплый домик безопасности. Лили объяснила, что темнота не хочет пугать — она просто укрывает мир одеялом тишины, чтобы все могли отдохнуть. Тогда зайка сделал глубокий вдох, обнял подушку и представил, что каждая звёздочка охраняет его сон. С этого вечера ночь перестала быть страшной, а стала уютной и волшебной.'}, {id:'free-2', title:'Мишка Топа и волшебная ложка', theme:'🍽️ Еда', date:'Бесплатно', hero:'topa', text:'Мишка Топа однажды сел за стол и нахмурился: ему совсем не хотелось пробовать суп. Он думал, что это скучно и невкусно. Но бабушка улыбнулась и сказала, что у неё есть волшебная ложка, которая умеет открывать секреты каждого блюда. Топа осторожно попробовал первую ложечку и вдруг почувствовал аромат лета, тёплых овощей и заботы, с которой был приготовлен обед. Вторая ложка подарила ему силу для игр, третья — настроение для весёлых приключений, а четвёртая напомнила, что еда помогает расти сильным и смелым. Постепенно тарелка опустела, а Мишка удивился, что суп оказался таким интересным. С тех пор обед для него стал не обязанностью, а маленьким путешествием, где каждая ложка приносит новую пользу и радость.'}, {id:'free-3', title:'Совёнок Умка учится делиться', theme:'🤲 Делиться', date:'Бесплатно', hero:'umka', text:'Совёнок Умка очень любил свои красивые камушки, пёрышки и блестящие находки. Он собирал их в маленькую коробочку и никому не показывал, потому что боялся, что у него всё заберут. Но однажды к нему пришли друзья, и каждый принёс что-то необычное: кто-то ракушку, кто-то яркий листик, кто-то смешную шишку. Тогда Умка понял, что когда делишься чем-то дорогим, радости становится не меньше, а больше. Он достал свою коробочку и показал друзьям сокровища. Вместе они придумали истории про каждый предмет, смеялись, удивлялись и почувствовали себя настоящей командой. Вечером Умка заметил, что его камушки никуда не исчезли, зато в сердце стало гораздо теплее. Так он понял важный секрет: делиться — это значит не терять, а умножать дружбу и свет вокруг себя.'} ]; const HERO_TO_CHARACTER = { 'lily':'lily','topa':'topa','umka':'umka','elly':'elly','oli':'oli', 'koluchka':'koluchka','bambi':'bambi','ami':'ami','leya':'leya','kristoff':'kristoff', 'vudi':'vudi','blu':'blu' }; const THEME_DESCRIPTIONS = { 'darkness':'ребёнок боится темноты','doctor':'ребёнок боится врача','kindergarten':'ребёнок не хочет в садик', 'sleep':'ребёнок не хочет спать','jealousy':'ревность к брату или сестре','anger':'ребёнок часто злится', 'hysterics':'у ребёнка бывают истерики','friends':'ребёнок хочет найти друзей','courage':'ребёнок хочет стать смелее', 'selfbelief':'ребёнок хочет поверить в себя','custom':'','magic':'','potty':'приучение к горшку', 'separation':'адаптация и привыкание','eating':'самостоятельное кормление','dressing':'самостоятельное одевание', 'bathing':'купание и водные процедуры','brushing':'чистка зубов','tidying':'уборка игрушек','sharing':'умение делиться' }; // ===================== STATE ===================== let selectedTheme = null; let selectedHero = 'lily'; let selectedAge = '3-4'; let currentLibraryTab = 'all'; let currentHeroFilter = 'all'; let currentHeroDetail = null; // ===================== USER & USAGE TRACKING ===================== let currentTelegramId = null; let userUsage = null; const FREE_GENERATIONS = 3; function getFreeGenerationsUsed(){ if(userUsage && userUsage.free_generations) return userUsage.free_generations.used || 0; return 0; } function getFreeGenerationsLeft(){ if(userUsage && userUsage.free_generations) return userUsage.free_generations.left || 0; return FREE_GENERATIONS; } function hasFreeGenerationLeft(){ return getFreeGenerationsLeft() > 0; } function openSupport(){ var url = 'https://t.me/fairytaletime_bot'; if(window.Telegram && window.Telegram.WebApp){ try { window.Telegram.WebApp.openTelegramLink(url); } catch(e){ window.open(url, '_blank'); } } else { window.open(url, '_blank'); } } function getTelegramId(){ return window._cachedTelegramId || _tryGetTelegramId() || _fallbackId(); } function initTelegram(){ traceStep('init-telegram'); // Пробуем получить Telegram ID при загрузке var id = _tryGetTelegramId(); if(id){ window._cachedTelegramId = id; console.log('[TG] ✅ ID получен:', id); return; } // Если не вышло — ждём 600ms и пробуем ещё (Telegram.WebApp может инициализироваться не сразу) setTimeout(function(){ var id2 = _tryGetTelegramId(); if(id2){ window._cachedTelegramId = id2; console.log('[TG] ✅ ID получен с задержкой:', id2); // Обновляем статус если уже загрузились if(userUsage) checkUserStatus(); } else { console.log('[TG] ❌ Не удалось получить Telegram ID — используем test_'); } }, 600); } function _tryGetTelegramId(){ try { if(window.Telegram && window.Telegram.WebApp){ try { window.Telegram.WebApp.ready(); } catch(e){} if(window.Telegram.WebApp.initDataUnsafe && window.Telegram.WebApp.initDataUnsafe.user){ return String(window.Telegram.WebApp.initDataUnsafe.user.id); } if(window.Telegram.WebApp.initData){ // Попытка через URL-encoded строку var d = window.Telegram.WebApp.initData; var match = d.match(/"id"\s*:\s*(\d+)/); if(match && match[1]) return match[1]; // Декодируем и пробуем снова var dec = decodeURIComponent(d); var match2 = dec.match(/"id"\s*:\s*(\d+)/); if(match2 && match2[1]) return match2[1]; } } } catch(e){} // Из URL параметра tgWebAppData try { var s = window.location.search; var m = s.match(/tgWebAppData=([^&]+)/); if(m){ var dec = decodeURIComponent(m[1]); var idm = dec.match(/"id"\s*:\s*(\d+)/); if(idm && idm[1]) return idm[1]; } } catch(e){} return null; } function _fallbackId(){ var stored = localStorage.getItem('fairytale_test_id'); if(stored) return stored; var newId = 'test_' + Date.now(); localStorage.setItem('fairytale_test_id', newId); return newId; } function checkUserStatus(callback){ traceStep('user-status'); var tgId = getTelegramId(); currentTelegramId = tgId; console.log('[DEBUG] Telegram ID:', tgId); fetch('/api/user/status?telegram_id=' + encodeURIComponent(tgId)) .then(r => r.json()) .then(data => { userUsage = data; updateUsageDisplay(); if(callback) callback(); }) .catch(() => { // Fallback if server not available userUsage = { has_access: true, subscriber: false, free_generations: {used: 0, total: 3, left: 3}, free_audios: {used: 0, total: 3, left: 3}, usage: {audio: {left: 5, total: 5}, cartoon: {left: 5, total: 5}} }; updateUsageDisplay(); if(callback) callback(); }); } function updateUsageDisplay(){ if(!userUsage) return; // Рендерим медали renderMedals(); const freeGenLeft = userUsage.free_generations?.left || 0; const freeGenTotal = userUsage.free_generations?.total || 3; const audioLeft = userUsage.usage?.audio?.left || 0; const audioTotal = userUsage.usage?.audio?.total || 30; const cartoonLeft = userUsage.usage?.cartoon?.left || 0; const cartoonTotal = userUsage.usage?.cartoon?.total || 5; // Update badges in the interface const audioBadge = document.getElementById('audio-limit-badge'); const cartoonBadge = document.getElementById('cartoon-limit-badge'); const subBadge = document.getElementById('subscription-badge'); // Бесплатная версия — показываем только текстовые сказки const subAudioLeft = userUsage.subscriber ? audioLeft : 0; if(audioBadge){ if(userUsage.subscriber) audioBadge.textContent = '🎧 ' + subAudioLeft + '/' + audioTotal; else audioBadge.textContent = '📖 ' + freeGenLeft + '/' + freeGenTotal; } if(cartoonBadge && userUsage.subscriber) cartoonBadge.textContent = '🎬 ' + cartoonLeft + '/' + cartoonTotal; else if(cartoonBadge) cartoonBadge.textContent = '📖 ' + freeGenLeft + '/' + freeGenTotal; // Показываем блок мультиков и покупку мультиков только подписчикам var isSub = userUsage.subscriber; var cartoonBlock = document.getElementById('cartoon-limit-block'); if(cartoonBlock) cartoonBlock.style.display = isSub ? '' : ''; var buyCartoonBtn = document.getElementById('buy-cartoon-btn'); if(buyCartoonBtn) buyCartoonBtn.style.display = ''; var limitsCartoonText = document.getElementById('limits-cartoon-text'); if(limitsCartoonText) limitsCartoonText.style.display = isSub ? '' : 'none'; if(cartoonLeft <= 1 && cartoonBadge && isSub) cartoonBadge.style.background = 'rgba(255,107,107,0.15)'; // Показываем тарифную карточку всегда (даже подписчикам для управления) var tariffCard = document.getElementById('profile-tariff-card'); if(tariffCard) tariffCard.style.display = isSub ? '' : ''; if(subBadge){ if(!userUsage.subscriber && freeGenLeft > 0) subBadge.textContent = '🎁 Бесплатно (' + freeGenLeft + '/' + freeGenTotal + ')'; else if(userUsage.subscriber) subBadge.textContent = '✅ Подписка'; else subBadge.textContent = '❌ Нет доступа'; } // 🎁 Баннер бесплатных сказок на главной var banner = document.getElementById('free-trial-banner'); if(banner){ var bTitle = document.getElementById('free-banner-title'); var bDesc = document.getElementById('free-banner-desc'); var bCounter = document.getElementById('free-banner-counter'); if(!userUsage.subscriber && freeGenLeft > 0){ banner.style.display = 'flex'; banner.style.background = 'linear-gradient(135deg,rgba(155,118,255,0.12),rgba(255,182,230,0.08))'; banner.style.borderColor = 'rgba(155,118,255,0.2)'; if(bTitle){ bTitle.textContent = '🎁 3 бесплатные сказки'; bTitle.style.color = 'var(--accent)'; } if(bDesc) bDesc.textContent = 'Попробуйте прямо сейчас без оплаты'; if(bCounter){ bCounter.textContent = freeGenLeft + '/' + freeGenTotal; bCounter.style.color = '#FFD570'; bCounter.style.background = 'rgba(255,213,112,0.12)'; } } else if(!userUsage.subscriber && freeGenLeft === 0){ banner.style.display = 'flex'; banner.style.background = 'linear-gradient(135deg,rgba(255,107,107,0.12),rgba(255,182,88,0.08))'; banner.style.borderColor = 'rgba(255,107,107,0.2)'; if(bTitle){ bTitle.textContent = '📖 Лимит исчерпан'; bTitle.style.color = '#FF6B6B'; } if(bDesc) bDesc.textContent = 'Оформите подписку, чтобы продолжать'; if(bCounter){ bCounter.textContent = 'Подписка'; bCounter.style.color = 'var(--accent)'; bCounter.style.background = 'rgba(155,118,255,0.15)'; } banner.onclick = function(){ showPage('page-profile'); }; banner.style.cursor = 'pointer'; } else { banner.style.display = 'none'; } } // Debug: show ID and status var debugId = document.getElementById('debug-telegram-id'); if(debugId) debugId.textContent = currentTelegramId || getTelegramId(); var debugSub = document.getElementById('debug-subscriber'); if(debugSub) debugSub.textContent = userUsage.subscriber ? '✅ Активна до ' + (userUsage.subscribed_until || '').substring(0,10) : '❌ Нет подписки'; var debugApi = document.getElementById('debug-api-status'); if(debugApi) debugApi.textContent = userUsage.subscriber ? '🟢 OK' : '🟡 Не подписчик'; console.log('[DEBUG] userUsage:', JSON.stringify(userUsage)); // Also update tariff page const tariffStatus = document.getElementById('tariff-status-info'); if(tariffStatus){ let statusText = ''; if(!userUsage.subscriber && freeGenLeft > 0) statusText = '🎁 Осталось бесплатных генераций: ' + freeGenLeft + '/' + freeGenTotal; else if(userUsage.subscriber) statusText = '✅ Подписка активна до ' + (userUsage.subscribed_until || '').substring(0,10); else statusText = '❌ Нет активной подписки'; tariffStatus.textContent = statusText; } } // ===================== MEDALS SYSTEM ===================== const MEDALS = [ {id:'courage', icon:'🐉', title:'Смелость', desc:'Прочитали первую сказку', color:'#6B3BFF'}, {id:'listener', icon:'🎧', title:'Слушатель', desc:'Прослушали 5 аудиосказок', color:'#9B76FF'}, {id:'storyteller', icon:'📚', title:'Сказочник', desc:'Создали 10 сказок', color:'#C4B0FF'}, {id:'hero_master', icon:'🦸', title:'Знаток героев', desc:'Познакомились со всеми героями', color:'#FFB020'}, {id:'night_owl', icon:'🌙', title:'Ночная сова', desc:'Читали сказку на ночь 7 дней подряд', color:'#3A1A6A'}, {id:'collector', icon:'🏅', title:'Коллекционер', desc:'Собрали 5 медалей', color:'#FF6B6B'}, ]; function getSavedMedals(){ try { return JSON.parse(localStorage.getItem('fairytale_medals') || '[]'); } catch(e){ return []; } } function saveMedal(medalId){ const medals = getSavedMedals(); if(medals.includes(medalId)) return false; medals.push(medalId); try { localStorage.setItem('fairytale_medals', JSON.stringify(medals)); } catch(e){} // collector check — когда получаем новую медаль checkCollectorMedal(); return true; } function checkAllMedals(){ var saved = getSavedMedals(); var newMedals = []; // 🦸 Знаток героев — познакомились со всеми 13 героями if(!saved.includes('hero_master')){ var seen = getSeenHeroes(); var allHeroIds = ['lily','topa','umka','elly','oli','koluchka','bambi','ami','leya','kristoff','vudi','blu','din']; var allSeen = allHeroIds.every(function(id){ return seen.indexOf(id) !== -1; }); if(allSeen){ if(saveMedal('hero_master')) newMedals.push('🦸 Знаток героев'); } } // 📚 Сказочник — создали 10 сказок if(!saved.includes('storyteller')){ var stories = getSavedStories(); if(stories.length >= 10){ if(saveMedal('storyteller')) newMedals.push('📚 Сказочник'); } } // 🎧 Слушатель — прослушали 5 аудио if(!saved.includes('listener')){ var stories = getSavedStories(); var listened = stories.filter(function(s){ return s.listened; }).length; if(listened >= 5){ if(saveMedal('listener')) newMedals.push('🎧 Слушатель'); } } // 🌙 Ночная сова — читали 7 дней подряд if(!saved.includes('night_owl')){ if(checkNightOwl()){ if(saveMedal('night_owl')) newMedals.push('🌙 Ночная сова'); } } // 🏅 Коллекционер — собрали 5 медалей checkCollectorMedal(); return newMedals; } // ====== Знаток героев ====== function getSeenHeroes(){ try { return JSON.parse(localStorage.getItem('fairytale_seen_heroes') || '[]'); } catch(e){ return []; } } function saveSeenHero(heroId){ var seen = getSeenHeroes(); if(seen.indexOf(heroId) !== -1) return; seen.push(heroId); try { localStorage.setItem('fairytale_seen_heroes', JSON.stringify(seen)); } catch(e){} // Проверяем медаль checkAllMedals(); } // ====== Ночная сова ====== function getReadingDates(){ try { return JSON.parse(localStorage.getItem('fairytale_reading_dates') || '[]'); } catch(e){ return []; } } function addReadingDate(){ var dates = getReadingDates(); var today = new Date().toISOString().split('T')[0]; // YYYY-MM-DD if(dates.indexOf(today) !== -1) return; // уже сегодня читали dates.push(today); // Оставляем только последние 14 дней dates = dates.sort().slice(-14); try { localStorage.setItem('fairytale_reading_dates', JSON.stringify(dates)); } catch(e){} } function checkNightOwl(){ var dates = getReadingDates().sort(); if(dates.length < 7) return false; // Проверяем что есть 7 дней подряд var streak = 1; var maxStreak = 1; for(var i = 1; i < dates.length; i++){ var prev = new Date(dates[i-1]); var curr = new Date(dates[i]); var diffDays = Math.round((curr - prev) / (1000 * 60 * 60 * 24)); if(diffDays === 1){ streak++; if(streak > maxStreak) maxStreak = streak; } else { streak = 1; } } return maxStreak >= 7; } // ====== Коллекционер ====== function checkCollectorMedal(){ var saved = getSavedMedals(); if(saved.includes('collector')) return; if(saved.length >= 5){ saveMedal('collector'); showToast('🏅 Медаль Коллекционер получена!'); } } function updateAudioButton(){ const listenBtn = document.getElementById('btn-listen-audio'); if(!listenBtn) return; // Показываем кнопку только если есть аудио и доступ к нему const audioBlock = document.getElementById('story-audio-block'); const hasAudio = audioBlock && audioBlock.style.display !== 'none'; if(hasAudio && canGenerateAudio()){ listenBtn.style.display = 'block'; } else { listenBtn.style.display = 'none'; } } function playStoryAudio(){ const audioEl = document.getElementById('story-audio'); if(audioEl && audioEl.src){ audioEl.play(); document.getElementById('story-audio-block').style.display = 'block'; audioEl.scrollIntoView({behavior:'smooth',block:'center'}); } else { showToast('⏳ Аудио ещё готовится, попробуй через пару секунд'); } } function updateMedalBlock(){ var medalBlock = document.getElementById('medal-block'); if(!medalBlock) return; var saved = getSavedMedals(); var hasCourage = saved.includes('courage'); if(hasCourage) { // Уже получена — показываем в золотом medalBlock.innerHTML = ` <div style="font-size:42px;margin-bottom:4px;">🏅</div> <div style="font-size:14px;font-weight:700;color:#fff;">⭐ Медаль смелости получена!</div> <div style="font-size:11px;color:rgba(255,255,255,0.7);margin-top:2px;">Вы уже получили эту медаль 🌸</div> `; medalBlock.style.background = 'linear-gradient(135deg,#FFD570,#FFB020)'; medalBlock.style.cursor = 'default'; } else { // Ещё не получена — можно нажать medalBlock.innerHTML = ` <div style="font-size:36px;margin-bottom:6px;">🐉</div> <div style="font-size:14px;font-weight:700;color:#fff;">Медаль смелости ⭐</div> <div style="font-size:11px;color:rgba(255,255,255,0.7);margin-top:2px;">Прочитали сказку? Нажмите, чтобы получить!</div> <div id="medal-progress" style="margin-top:10px;height:4px;background:rgba(255,255,255,0.2);border-radius:2px;overflow:hidden;"> <div style="width:0%;height:100%;background:linear-gradient(90deg,#FFD570,#FFB020);border-radius:2px;transition:width 0.5s ease;"></div> </div> `; medalBlock.style.background = 'linear-gradient(135deg,#6B3BFF,#9B76FF)'; medalBlock.style.cursor = 'pointer'; medalBlock.onclick = function(){ claimMedal(medalBlock); }; } } function claimMedal(el){ const medals = getSavedMedals(); if(medals.includes('courage')){ showToast('🏅 Медаль смелости уже у вас!'); return; } // Анимация получения const progress = el.querySelector('#medal-progress div'); if(progress) progress.style.width = '100%'; setTimeout(function(){ saveMedal('courage'); el.innerHTML = ` <div style="font-size:42px;margin-bottom:4px;">🏅</div> <div style="font-size:14px;font-weight:700;color:#fff;">⭐ Медаль смелости получена!</div> <div style="font-size:11px;color:rgba(255,255,255,0.7);margin-top:2px;">Вы прочитали сказку вместе с ребёнком 🌸</div> `; el.style.background = 'linear-gradient(135deg,#FFD570,#FFB020)'; el.onclick = null; el.style.cursor = 'default'; showToast('🏅 Медаль смелости получена!'); renderMedals(); updateProfileStats(); }, 800); } function renderMedals(){ const grid = document.getElementById('medals-grid'); const label = document.getElementById('medals-count-label'); if(!grid) return; const saved = getSavedMedals(); if(label) label.textContent = saved.length + '/' + MEDALS.length + ' собрано'; grid.innerHTML = MEDALS.map(function(m){ const earned = saved.includes(m.id); return ` <div style="background:${earned ? m.color : 'var(--card)'};border-radius:12px;padding:10px 4px;text-align:center;opacity:${earned ? 1 : 0.4};transition:all 0.3s;box-shadow:${earned ? '0 4px 12px rgba(107,59,255,0.2)' : 'none'};"> <div style="font-size:24px;">${earned ? '🏅' : m.icon}</div> <div style="font-size:9px;font-weight:600;margin-top:4px;color:${earned ? '#fff' : 'var(--dim)'};">${m.title}</div> <div style="font-size:7px;color:${earned ? 'rgba(255,255,255,0.7)' : 'var(--dim)'};">${earned ? '✓' : '🔒'}</div> </div>`; }).join(''); } function showDiscountPopup(){ // Показываем попап со скидкой (после 3-й бесплатной генерации) // Сохраняем время показа для таймера 24ч localStorage.setItem('discount_offer_shown_at', Date.now().toString()); // Уведомляем сервер if(currentTelegramId) { fetch('/api/user/dismiss-discount', { method: 'POST', headers: {'Content-Type': 'application/json'}, body: JSON.stringify({telegram_id: currentTelegramId}) }).catch(function(){}); } const promoHtml = ` <div id="promo-overlay" style="position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(15,6,32,0.85);z-index:9999;display:flex;align-items:center;justify-content:center;padding:20px;animation:fadeIn .3s ease;"> <div style="background:var(--card);border-radius:24px;padding:28px 20px;max-width:340px;width:100%;text-align:center;position:relative;"> <div style="font-size:48px;margin-bottom:12px;">🔥</div> <div style="font-size:20px;font-weight:700;margin-bottom:4px;">Сказки понравились?</div> <div style="font-size:13px;color:var(--dim);line-height:1.5;margin-bottom:10px;"> Продолжайте создавать волшебные истории! </div> <div style="font-size:28px;font-weight:800;color:var(--accent);margin-bottom:2px;">899 ₽ <span style="font-size:14px;font-weight:400;color:var(--dim);text-decoration:line-through;">1 299 ₽</span> <span style="font-size:12px;color:#FF6B6B;font-weight:600;">−31%</span></div> <div style="font-size:11px;color:#FF6B6B;font-weight:600;margin-bottom:16px;">⏰ Предложение действует <span id="discount-timer">24:00:00</span></div> <button onclick="processPayment()" style="background:var(--grad);border:none;border-radius:14px;padding:14px 24px;font-size:14px;font-weight:700;color:#fff;width:100%;cursor:pointer;box-shadow:0 4px 14px rgba(107,59,255,0.3);margin-bottom:8px;"> 💎 Оформить за 899 ₽ </button> <button onclick="closePromo()" style="background:none;border:none;font-size:12px;color:var(--dim);cursor:pointer;padding:8px;"> Не сейчас </button> <div style="font-size:10px;color:var(--dim);margin-top:8px;opacity:0.7;"> Далее 899₽/мес. Отмена в любой момент </div> </div> </div>`; document.body.insertAdjacentHTML('beforeend', promoHtml); // Запускаем таймер 24 часа startDiscountTimer(); } function startDiscountTimer(){ var timerEl = document.getElementById('discount-timer'); if(!timerEl) return; var shownAt = parseInt(localStorage.getItem('discount_offer_shown_at') || Date.now()); var endTime = shownAt + 24 * 60 * 60 * 1000; function updateTimer(){ var now = Date.now(); var left = Math.max(0, endTime - now); var hours = Math.floor(left / (60 * 60 * 1000)); var minutes = Math.floor((left % (60 * 60 * 1000)) / (60 * 1000)); var seconds = Math.floor((left % (60 * 1000)) / 1000); timerEl.textContent = String(hours).padStart(2, '0') + ':' + String(minutes).padStart(2, '0') + ':' + String(seconds).padStart(2, '0'); if(left > 0) requestAnimationFrame(updateTimer); } requestAnimationFrame(updateTimer); } function closePromo(){ const el = document.getElementById('promo-overlay'); if(el) el.remove(); } function canGenerateAudio(){ if(!userUsage) return false; // Аудио — только для подписчиков return userUsage.subscriber && (userUsage.usage?.audio?.left || 0) > 0; } function canGenerateCartoon(){ if(!userUsage) return false; // Мультики только по подписке return userUsage.subscriber && (userUsage.usage?.cartoon?.left || 0) > 0; } function useResourceAPI(resource, callback){ if(!currentTelegramId){ currentTelegramId = getTelegramId(); } fetch('/api/user/use', { method: 'POST', headers: {'Content-Type': 'application/json'}, body: JSON.stringify({ telegram_id: currentTelegramId, resource: resource }) }) .then(r => r.json()) .then(data => { if(data.success){ checkUserStatus(); // Refresh counters if(callback) callback(true); } else { if(callback) callback(false, data.error); } }) .catch(() => { if(callback) callback(true); // Allow in dev mode }); } // ===================== NAV ===================== function showPage(id){ document.querySelectorAll('.page').forEach(p=>p.classList.remove('active')); document.getElementById(id).classList.add('active'); window.scrollTo({top:0,behavior:'smooth'}); } // ===================== TAP-GUARD (anti scroll-tap) ===================== // Действие срабатывает только при чистом тапе (сдвиг пальца < 10px). // Скролл, начавшийся на карточке, больше не вызывает случайных переходов. (function(){ const TAP_SLOP = 10, TAP_MAX_MS = 600; let sx=0, sy=0, st=0, target=null, moved=false, lastTouchEnd=0; function resolveTarget(el){ return el && el.closest ? el.closest('[data-tap],[data-tap-fn]') : null; } function fire(el){ if(el.dataset.tap){ showPage(el.dataset.tap); return; } const fn = window[el.dataset.tapFn]; if(typeof fn === 'function') fn(el.dataset.tapArg); } document.addEventListener('touchstart', e=>{ target = resolveTarget(e.target); if(!target) return; const t=e.touches[0]; sx=t.clientX; sy=t.clientY; st=Date.now(); moved=false; }, {passive:true}); document.addEventListener('touchmove', e=>{ if(!target) return; const t=e.touches[0]; if(Math.abs(t.clientX-sx)>TAP_SLOP || Math.abs(t.clientY-sy)>TAP_SLOP) moved=true; }, {passive:true}); document.addEventListener('touchend', e=>{ lastTouchEnd = Date.now(); if(!target) return; const el=target; target=null; if(moved || Date.now()-st>TAP_MAX_MS) return; e.preventDefault(); // отменяем synthetic click, чтобы не было двойного срабатывания fire(el); }); document.addEventListener('touchcancel', ()=>{ target=null; }, {passive:true}); // Десктоп: обычный клик мышью (synthetic click после тача отсекаем по времени) document.addEventListener('click', e=>{ if(Date.now()-lastTouchEnd < 700) return; const el = resolveTarget(e.target); if(el) fire(el); }); })(); // ===================== RENDER THEME GRID ===================== function renderThemeGrid(){ const grid = document.getElementById('main-theme-grid'); if(!grid) return; const showThemes = THEMES.slice(0,8); grid.innerHTML = showThemes.map(t => ` <div class="theme-card" data-id="${t.id}" data-tap-fn="openTheme" data-tap-arg="${t.id}"> <img src="images/${t.img}" alt="${t.title}" onerror="this.style.display='none'"> <div class="info"> <h3>${t.icon} ${t.title}</h3> </div> </div> `).join(''); } function getSavedStories(){ try { const raw = localStorage.getItem('fairytaleStories'); return raw ? JSON.parse(raw) : []; } catch(e){ return []; } } function saveStories(stories){ localStorage.setItem('fairytaleStories', JSON.stringify(stories)); } function getLibraryStories(){ return [...getSavedStories(), ...FREE_LIBRARY_STORIES]; } function renderLibrary(){ const list = document.getElementById('library-list'); if(!list) return; const all = getLibraryStories(); let stories = all; if(currentLibraryTab === 'favorites') stories = all.filter(s => s.favorite); if(currentLibraryTab === 'listened') stories = all.filter(s => s.listened); if(!stories.length){ list.innerHTML = `<div style="background:var(--card);border-radius:18px;padding:18px;text-align:center;color:var(--dim);">Здесь пока пусто. Сохрани первую сказку ✨</div>`; return; } list.innerHTML = stories.map(story => ` <div class="lib-card" onclick="openLibraryStory('${story.id}')" style="cursor:pointer"> <div class="thumb"><img src="images/${(HEROES.find(h=>h.id===story.hero)||HEROES[0]).img}" alt="${story.title}"></div> <div class="info"> <h4>${story.title}</h4> <div class="meta"><span>${story.theme || '✨ Сказка'}</span>${story.childName ? `<span>🧒 ${story.childName}, ${story.childAge} лет</span>` : ''}<span>📅 ${story.date || 'Сегодня'}</span></div> <div class="lib-actions" style="margin-top:8px"> <button class="act-btn" onclick="event.stopPropagation(); openLibraryStory('${story.id}')">📖 Читать</button> <button class="act-btn" onclick="event.stopPropagation(); markStoryListened('${story.id}')">🎧 Слушать</button> <button class="act-btn" onclick="event.stopPropagation(); toggleStoryFavorite('${story.id}')">${story.favorite ? '💜' : '⭐'} Избранное</button> </div> </div> </div> `).join(''); } function renderHeroes(filter = currentHeroFilter, query = ''){ currentHeroFilter = filter; const grid = document.getElementById('heroes-grid'); if(!grid) return; const q = (query || '').toLowerCase().trim(); const filtered = HEROES.filter(hero => (filter === 'all' || hero.filter === filter) && (!q || hero.name.toLowerCase().includes(q) || hero.short.toLowerCase().includes(q))); grid.innerHTML = filtered.map(hero => ` <div onclick="openHeroDetail('${hero.id}')" style="text-align:center;cursor:pointer;padding:2px 2px 0;"> <div class="avatar-wrap" style="width:72px;height:72px;margin:0 auto 6px;border-radius:50%;overflow:hidden;box-shadow:0 4px 14px rgba(0,0,0,0.18);"><img src="images/${hero.img}" alt="${hero.name}" style="width:100%;height:100%;object-fit:cover;"></div> <div class="name" style="font-size:12px;line-height:1.15;font-weight:700;">${hero.icon} ${hero.name}</div> <div class="desc" style="font-size:9px;line-height:1.15;margin-top:3px;color:var(--dim);">${hero.short}</div> </div> `).join(''); } function updateProfileStats(){ const saved = getSavedStories(); const favorites = saved.filter(s => s.favorite).length; const listened = saved.filter(s => s.listened).length; document.getElementById('profile-stories-count').textContent = saved.length; document.getElementById('profile-listened-count').textContent = listened; document.getElementById('profile-favorites-count').textContent = favorites; document.getElementById('profile-cartoons-count').textContent = saved.length; } // ===================== INIT ===================== document.addEventListener('DOMContentLoaded', function(){ initTelegram(); // Пробуем получить Telegram ID (с задержкой) checkUserStatus(); // Check subscription & usage counters renderThemeGrid(); renderLibrary(); renderHeroes(); updateProfileStats(); checkAllMedals(); // All themes page const allGrid = document.getElementById('all-theme-grid'); if(allGrid){ allGrid.innerHTML = THEMES.map(t => ` <div class="theme-card" data-tap-fn="openTheme" data-tap-arg="${t.id}"> <img src="images/${t.img}" alt="${t.title}" onerror="this.style.display='none'"> <div class="info"><h3>${t.icon} ${t.title}</h3><p>${t.desc}</p></div> </div> `).join(''); } // Скрываем сплаш-скрин var splash = document.getElementById('app-splash'); if(splash) splash.style.display = 'none'; traceStep('splash-hidden'); // Load cartoons from JSON loadCartoons(); // Проверяем возврат после оплаты var hash = window.location.hash || ''; if(hash.indexOf('success') !== -1){ // Проверяем, открыто ли приложение в Telegram var tgWebApp = window.Telegram && window.Telegram.WebApp; var inTelegram = tgWebApp && tgWebApp.initData && tgWebApp.initData.length > 0; if(!inTelegram) { // Пользователь в браузере — перенаправляем в Telegram var tgLink = 'https://t.me/fairytaletime_bot'; var overlay = document.createElement('div'); overlay.id = 'tg-return-overlay'; overlay.innerHTML = '<div style="position:fixed;top:0;left:0;right:0;bottom:0;background:#0F0620;z-index:9999;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;text-align:center;">' + '<div style="max-width:340px;">' + '<div style="font-size:48px;margin-bottom:16px;">✅</div>' + '<h2 style="color:#F0E6FF;font-size:22px;margin-bottom:12px;">Оплата прошла!</h2>' + '<p style="color:#B49FD4;font-size:14px;line-height:1.5;margin-bottom:20px;">Спасибо! Подписка активирована. Чтобы продолжить, откройте приложение в Telegram.</p>' + '<a href="' + tgLink + '" style="display:inline-block;padding:14px 32px;border-radius:14px;background:#1E96E0;color:#fff;text-decoration:none;font-weight:700;font-size:16px;">✈️ Открыть в Telegram</a>' + '<p style="color:#6B5B8A;font-size:12px;margin-top:16px;">Перенаправляем в Telegram...</p>' + '</div></div>'; document.body.appendChild(overlay); // Авто-редирект через 3 секунды setTimeout(function(){ window.location.href = tgLink; }, 3000); } else { showToast('✅ Оплата прошла успешно! Добро пожаловать 🌸'); // Обновляем статус пользователя (подписка должна активироваться) setTimeout(function(){ checkUserStatus(); }, 1500); // 🔥 Активируем подписку напрямую, если ResultURL не сработал var matchInv = hash.match(/invId=(\d+)/); if(matchInv && matchInv[1]){ var tgId = currentTelegramId || getTelegramId(); if(tgId){ fetch('/api/payment/verify', { method: 'POST', headers: {'Content-Type': 'application/json'}, body: JSON.stringify({invId: matchInv[1], telegram_id: tgId}) }) .then(r => r.json()) .then(data => { if(data.success){ setTimeout(function(){ checkUserStatus(); }, 1000); } }) .catch(function(e){ console.log('Verify payment error:', e); }); } } } // Проверяем покупку мультика var match = hash.match(/invId=(\d+)/); if(match && match[1]){ fetch('/api/check?invId=' + match[1]) .then(r => r.json()) .then(data => { if(data.cartoon_id){ markCartoonPurchased(data.cartoon_id); showToast('🎬 Мультик теперь ваш! Смотрите в разделе мультиков'); } }) .catch(function(){}); } // Очищаем hash setTimeout(function(){ window.location.hash = ''; }, 1000); } // Привязка кнопок через addEventListener (если onclick не работает в WebView) var b1 = document.getElementById('btn-create-fairytale'); if(b1){ b1.addEventListener('click', openDefaultCreate); b1.addEventListener('touchend', function(e){e.preventDefault();openDefaultCreate();}); } // Навигационные кнопки var navBtns = document.querySelectorAll('[onclick*="showPage"]'); navBtns.forEach(function(btn){ var match = btn.getAttribute('onclick').match(/showPage$'([^']+)'$/); if(match){ var pageId = match[1]; btn.addEventListener('click', function(e){ showPage(pageId); }); btn.addEventListener('touchend', function(e){ e.preventDefault(); showPage(pageId); }); } }); console.log('[APP] ✅ DOM loaded, event listeners attached'); }); // ===================== THEME CLICK ===================== document.querySelectorAll('.theme-item[data-theme]').forEach(item=>{ item.addEventListener('click',function(){ const themeId = this.dataset.theme; openTheme(themeId); }); }); // ===================== THEME TOGGLE ===================== function toggleTheme(){ const body = document.body; const btn = document.getElementById('themeToggle'); if(body.dataset.theme === 'night'){ body.dataset.theme = 'day'; btn.textContent = '🌙'; } else { body.dataset.theme = 'night'; btn.textContent = '☀️'; } } // ===================== CREATE FLOW ===================== function openDefaultCreate(){ selectedTheme = null; const grid = document.getElementById('create-theme-grid'); if(grid && THEMES){ grid.innerHTML = THEMES.map(t => ` <div class="theme-card" data-tap-fn="selectCreateTheme" data-tap-arg="${t.id}"> <img src="images/${t.img}" alt="${t.title}" onerror="this.style.display='none'"> <div class="info"><h3>${t.icon} ${t.title}</h3></div> </div> `).join(''); } showPage('page-create'); } function selectCreateTheme(themeId){ const theme = THEMES.find(t => t.id === themeId) || THEMES[0]; selectedTheme = theme; // Fill next step page under selected situation document.getElementById('pick-selected-img').src = 'images/' + theme.img; document.getElementById('pick-selected-title').textContent = (theme.icon || '') + ' ' + (theme.title || ''); document.getElementById('pick-selected-desc').textContent = theme.desc || 'Выбери возраст, героя и имя ребёнка'; // Show/hide custom theme textarea on hero page const customGroup = document.getElementById('pick-custom-theme'); if(customGroup) { customGroup.style.display = theme.id === 'custom' ? 'block' : 'none'; } // Navigate to hero picker page showPage('page-pick-hero'); window.scrollTo({top: 0, behavior: 'smooth'}); updateHeroScrollIndicator(); }; function updateHeroScrollIndicator(){ setTimeout(function(){ const container = document.getElementById('hero-scroll-container'); const fade = document.getElementById('hero-scroll-fade'); const arrowR = document.getElementById('hero-scroll-arrow-right'); const arrowL = document.getElementById('hero-scroll-arrow-left'); const hint = document.getElementById('hero-scroll-hint'); if(!container || !fade || !arrowR || !arrowL || !hint) return; const hasOverflow = container.scrollWidth > container.clientWidth; const atStart = container.scrollLeft <= 5; const atEnd = container.scrollLeft + container.clientWidth >= container.scrollWidth - 10; fade.classList.toggle('hidden', !(hasOverflow && !atEnd)); arrowR.classList.toggle('hidden', !(hasOverflow && !atEnd)); arrowL.classList.toggle('hidden', !(hasOverflow && !atStart)); hint.style.display = (hasOverflow && !atEnd) ? 'inline' : 'none'; }, 100); } function goBackToThemes(){ showPage('page-create'); window.scrollTo({top: 0, behavior: 'smooth'}); } function resetCreateForm(){ selectedTheme = null; goBackToThemes(); } function openTheme(themeId){ selectCreateTheme(themeId); } // ===================== HERO PICK (both pages) ===================== function initHeroPicks(scope){ (scope || document).querySelectorAll('.hero-pick').forEach(el=>{ el.addEventListener('click',function(){ const container = this.closest('[id]') ? this.parentElement : this.parentElement; container.querySelectorAll('.hero-pick.selected').forEach(s=>s.classList.remove('selected')); this.classList.add('selected'); selectedHero = this.dataset.hero || 'lily'; }); }); } // ===================== AGE CHIPS ===================== document.querySelectorAll('.age-chip').forEach(chip=>{ chip.addEventListener('click',function(){ document.querySelectorAll('.age-chip').forEach(c=>{ c.style.borderColor='rgba(107,59,255,0.1)'; c.style.boxShadow='none'; c.classList.remove('selected'); }); this.style.borderColor='var(--accent)'; this.style.boxShadow='0 0 0 1px var(--accent)'; this.classList.add('selected'); selectedAge = this.dataset.age; }); }); // Init hero picks on all pages initHeroPicks(); // ===================== NAVIGATION ===================== document.querySelectorAll('.nav-item').forEach(btn=>{ btn.addEventListener('click',function(){ document.querySelectorAll('.nav-item').forEach(b=>b.classList.remove('active')); showPage(this.dataset.page); this.classList.add('active'); }); }); // ===================== TABS ===================== document.querySelectorAll('[data-library-tab]').forEach(tab=>{ tab.addEventListener('click',function(){ currentLibraryTab = this.dataset.libraryTab; document.querySelectorAll('[data-library-tab]').forEach(t=>t.classList.remove('active')); this.classList.add('active'); renderLibrary(); }); }); // ===================== HERO SEARCH ===================== document.getElementById('heroSearch')?.addEventListener('input',function(){ renderHeroes(currentHeroFilter, this.value); }); // ===================== HERO FILTERS ===================== document.querySelectorAll('.filter-chip').forEach(chip=>{ chip.addEventListener('click',function(){ document.querySelectorAll('.filter-chip').forEach(c=>c.classList.remove('active')); this.classList.add('active'); const label = this.textContent.trim(); let filter = 'all'; if(label.includes('Звери')) filter = 'animal'; if(label.includes('Сказочные')) filter = 'fairy'; if(label.includes('Водные')) filter = 'water'; renderHeroes(filter, document.getElementById('heroSearch')?.value || ''); }); }); // ===================== TOAST ===================== function showToast(msg){ let toast = document.getElementById('toast'); if(!toast){ toast = document.createElement('div'); toast.id = 'toast'; toast.style.cssText = 'position:fixed;bottom:100px;left:16px;right:16px;z-index:999;background:#333;color:#fff;border-radius:12px;padding:14px 18px;text-align:center;font-size:14px;font-weight:500;box-shadow:0 4px 20px rgba(0,0,0,0.2);transition:all .3s;opacity:0;transform:translateY(20px)'; document.body.appendChild(toast); } toast.textContent = msg; toast.style.opacity = '1'; toast.style.transform = 'translateY(0)'; clearTimeout(toast._timer); toast._timer = setTimeout(() => { toast.style.opacity = '0'; toast.style.transform = 'translateY(20px)'; }, 2500); } // ===================== PULSE ANIMATION ===================== const styleSheet = document.createElement('style'); styleSheet.textContent = ` @keyframes pulse{0%,100%{opacity:1}50%{opacity:0.5}} @keyframes progress{0%{transform:translateX(-100%)}100%{transform:translateX(300%)}} `; document.head.appendChild(styleSheet); // ===================== HERO FROM CARD ===================== function openHeroDetail(heroId){ const hero = HEROES.find(h => h.id === heroId); if(!hero) return; currentHeroDetail = hero; document.getElementById('hero-detail-img').src = 'images/' + hero.img; document.getElementById('hero-detail-name').textContent = hero.icon + ' ' + hero.name; document.getElementById('hero-detail-subtitle').textContent = hero.short; document.getElementById('hero-detail-story').textContent = hero.story; document.getElementById('hero-detail-create-btn').onclick = function(){ selectedHero = hero.id; openDefaultCreate(); showToast('✨ Выбрали героя ' + hero.name); }; saveSeenHero(heroId); showPage('page-hero-detail'); } function selectHeroFromCard(heroId){ openHeroDetail(heroId); } function selectHeroAndGo(heroId){ selectedHero = heroId; const hero = HEROES.find(h => h.id === heroId); if(hero) showToast('🦸 Выбран ' + hero.name); showPage('page-pick-hero'); } function selectTariff(el, plan){ // Only one tariff now - just acknowledge window.selectedTariff = 'medium'; showToast('✅ Выбран: ⭐ Сказки без границ — 899₽'); } function startTrial(){ // Устарело — больше не используется (был 3-дневный триал) closePromo(); } function processPayment(){ const tariff = 'medium'; const names = {medium:'⭐ Сказки без границ — 899₽'}; showToast('🔄 Перенаправляем на оплату... ' + (names[tariff] || tariff)); fetch('/api/payment/create', { method: 'POST', headers: {'Content-Type': 'application/json'}, body: JSON.stringify({tariff: tariff, type: 'tariff', recurring: true, telegram_id: currentTelegramId || getTelegramId()}) }) .then(r => r.json()) .then(data => { if(data.payment_url){ showToast('💳 Переход к оплате...'); if(window.Telegram && window.Telegram.WebApp){ window.Telegram.WebApp.openLink(data.payment_url, {try_instant_view: false}); } else { setTimeout(function(){ window.location.href = data.payment_url; }, 500); } } else { showToast('😔 Ошибка: ' + (data.error || 'Не удалось создать платёж')); } }) .catch(function(err){ showToast('😔 Ошибка соединения с сервером'); console.error('Payment error:', err); }); } function buyAudio(){ showToast('🎧 Переход к оплате аудио...'); fetch('/api/payment/create', { method: 'POST', headers: {'Content-Type': 'application/json'}, body: JSON.stringify({type: 'audio_single', telegram_id: currentTelegramId || getTelegramId()}) }) .then(r => r.json()) .then(data => { if(data.payment_url){ if(window.Telegram && window.Telegram.WebApp){ window.Telegram.WebApp.openLink(data.payment_url, {try_instant_view: false}); } else { setTimeout(function(){ window.location.href = data.payment_url; }, 500); } } else { showToast('😔 Ошибка: ' + (data.error || 'Не удалось создать платёж')); } }) .catch(function(err){ showToast('😔 Ошибка соединения с сервером'); console.error('BuyAudio error:', err); }); } // Глобальная переменная для текущего task_id let currentTaskId = null; let cartoonPollTimer = null; function startCartoon(){ if(!currentTaskId){ showToast('😔 Сначала нужно сгенерировать сказку'); return; } const btn = document.getElementById('btn-start-cartoon'); const label = document.getElementById('cartoon-btn-label'); btn.style.display = ''; btn.style.opacity = '0.6'; if(label) label.textContent = '⌛ Готовим мультик...'; const statusEl = document.getElementById('cartoon-status'); statusEl.style.display = 'block'; statusEl.textContent = '🎬 Генерируем сцены и рисуем картинки...'; // Начинаем проверку статуса checkCartoonStatus(); } function checkCartoonStatus(){ if(!currentTaskId) return; if(cartoonPollTimer){ clearTimeout(cartoonPollTimer); } function poll(){ fetch('/api/status/' + currentTaskId) .then(r => r.json()) .then(data => { const statusEl = document.getElementById('cartoon-status'); if(data.cartoon_url || (data.result && data.result.cartoon_url)){ // Мультик готов! const videoUrl = data.cartoon_url || data.result.cartoon_url; statusEl.textContent = '✅ Мультик готов!'; statusEl.style.display = 'none'; const container = document.getElementById('cartoon-container'); const video = document.getElementById('cartoon-video'); video.src = videoUrl; container.style.display = 'block'; video.play(); const btn = document.getElementById('btn-start-cartoon'); const label = document.getElementById('cartoon-btn-label'); btn.style.opacity = '1'; if(label) label.textContent = '🎬 Смотреть ещё раз'; return; } // Ещё генерируется — показываем разные статусы const dots = '.'.repeat((Date.now() % 3000 < 1000) ? 1 : (Date.now() % 3000 < 2000) ? 2 : 3); statusEl.textContent = '🎬 Рисуем картинки' + dots; // Проверяем снова через 3 секунды cartoonPollTimer = setTimeout(poll, 3000); }) .catch(function(err){ const statusEl = document.getElementById('cartoon-status'); statusEl.textContent = '⏳ Ждём готовности...'; cartoonPollTimer = setTimeout(poll, 5000); }); } poll(); } function buyCartoon(){ showToast('🎬 Переход к оплате мультика...'); fetch('/api/payment/create', { method: 'POST', headers: {'Content-Type': 'application/json'}, body: JSON.stringify({type: 'cartoon_single', telegram_id: currentTelegramId || getTelegramId()}) }) .then(r => r.json()) .then(data => { if(data.payment_url){ if(window.Telegram && window.Telegram.WebApp){ window.Telegram.WebApp.openLink(data.payment_url, {try_instant_view: false}); } else { setTimeout(function(){ window.location.href = data.payment_url; }, 500); } } else { showToast('😔 Ошибка: ' + (data.error || 'Не удалось создать платёж')); } }) .catch(function(err){ showToast('😔 Ошибка соединения с сервером'); console.error('BuyCartoon error:', err); }); } function toggleStoryFavorite(storyId){ const stories = getSavedStories(); const story = stories.find(s => s.id === storyId); if(story){ story.favorite = !story.favorite; saveStories(stories); renderLibrary(); updateProfileStats(); showToast(story.favorite ? '⭐ Добавлено в избранное' : 'Снято из избранного'); return; } showToast('Для бесплатных сказок избранное появится позже'); } function markStoryListened(storyId){ const stories = getSavedStories(); const story = stories.find(s => s.id === storyId); if(story){ story.listened = true; saveStories(stories); addReadingDate(); renderLibrary(); updateProfileStats(); checkAllMedals(); } toggleAudio(); } function openLibraryStory(storyId){ const story = getLibraryStories().find(s => s.id === storyId); if(!story) return; document.getElementById('result-title').textContent = '✨ Сказка готова!'; document.getElementById('result-subtitle').textContent = story.childName ? (story.childName + ' радуется новой истории ♥') : 'Бесплатная сказка для чтения'; document.getElementById('story-title').textContent = story.title; document.getElementById('story-text').textContent = formatStoryText(limitStoryText(story.text || '')); document.getElementById('story-meta').textContent = story.childName ? ('👧 Для ' + toGenitive(story.childName) + ' • ' + story.childAge + ' лет') : '✨ Бесплатная сказка'; document.getElementById('story-tags').innerHTML = '<span style="font-size:11px;background:rgba(107,59,255,0.1);color:var(--accent);padding:5px 12px;border-radius:999px;">' + (story.theme || '✨ Сказка') + '</span>'; // Show parent block if saved if(story.parentBlock){ document.getElementById('parent-block').style.display = 'block'; document.getElementById('parent-block-text').innerHTML = story.parentBlock.replace(/\n/g, '<br>'); } else { document.getElementById('parent-block').style.display = 'none'; } // Show child questions if saved if(story.childQuestions){ document.getElementById('child-questions-block').style.display = 'block'; document.getElementById('child-questions-text').innerHTML = story.childQuestions.replace(/\n/g, '<br>'); } else { document.getElementById('child-questions-block').style.display = 'none'; } const hero = HEROES.find(h => h.id === story.hero) || HEROES[0]; document.getElementById('result-cover-img').src = 'images/' + hero.img; document.getElementById('result-loading').style.display = 'none'; document.getElementById('result-content').style.display = 'block'; // Показываем аудио, если есть const audioBlock = document.getElementById('story-audio-block'); const audioEl = document.getElementById('story-audio'); const audioLabel = document.getElementById('audio-left-label'); if(story.audio_url && audioEl){ audioEl.src = story.audio_url; audioEl.style.display = 'block'; if(audioBlock) audioBlock.style.display = 'block'; if(audioLabel) audioLabel.textContent = '🎧 1 прослушивание'; } else { if(audioBlock) audioBlock.style.display = 'none'; } // Обновляем блок медали updateMedalBlock(); // Показываем кнопку аудио updateAudioButton(); showPage('page-story-result'); } let childCounter = 0; function toggleProfileSetup(){ const card = document.getElementById('profile-setup-card'); const btn = document.getElementById('profile-setup-btn'); if(!card) return; if(card.style.display === 'none' || !card.style.display){ card.style.display = 'block'; if(btn) btn.textContent = '✖ Закрыть'; renderChildren(); } else { card.style.display = 'none'; if(btn) btn.textContent = '📝 Заполнить профиль'; } } function renderChildren(){ const container = document.getElementById('profile-children-container'); if(!container) return; let saved; try { saved = JSON.parse(localStorage.getItem('fairytaleProfiles') || '[]'); } catch(e){ saved = []; } if(saved.length === 0){ saved = [{name:'', age:'', hero:''}]; } container.innerHTML = saved.map((c, i) => renderChildEntry(c, i)).join(''); childCounter = saved.length; } function renderChildEntry(child, index){ return '<div class="child-entry" data-index="'+index+'" style="background:rgba(155,118,255,0.05);border-radius:10px;padding:10px;border:1px solid rgba(155,118,255,0.08);">' + '<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;">' + '<span style="font-size:11px;font-weight:600;color:var(--accent-light);">👶 Ребёнок '+(index+1)+'</span>' + (index > 0 ? '<button onclick="removeChildEntry('+index+')" style="background:none;border:none;font-size:14px;cursor:pointer;color:#ff6b6b;padding:2px;">✕</button>' : '') + '</div>' + '<div style="display:grid;gap:6px;">' + '<input type="text" placeholder="Имя ребёнка" value="'+escapeHtml(child.name)+'" oninput="updateChildField('+index+',\'name\',this.value)" style="width:100%;border:none;border-radius:8px;padding:9px 10px;background:rgba(155,118,255,0.08);color:var(--text);font-size:12px;box-sizing:border-box;">' + '<div style="display:grid;grid-template-columns:1fr 1fr;gap:6px;">' + '<input type="text" placeholder="Возраст" value="'+escapeHtml(child.age)+'" oninput="updateChildField('+index+',\'age\',this.value)" style="width:100%;border:none;border-radius:8px;padding:9px 10px;background:rgba(155,118,255,0.08);color:var(--text);font-size:12px;box-sizing:border-box;">' + '<input type="text" placeholder="Любимый герой" value="'+escapeHtml(child.hero)+'" oninput="updateChildField('+index+',\'hero\',this.value)" style="width:100%;border:none;border-radius:8px;padding:9px 10px;background:rgba(155,118,255,0.08);color:var(--text);font-size:12px;box-sizing:border-box;">' + '</div>' + '</div>' + '</div>'; } function escapeHtml(str){ return String(str).replace(/&/g,'&').replace(/"/g,'"').replace(/</g,'<').replace(/>/g,'>'); } let childrenData = []; function updateChildField(index, field, value){ childrenData[index] = childrenData[index] || {name:'', age:'', hero:''}; childrenData[index][field] = value; } function addChildEntry(){ const container = document.getElementById('profile-children-container'); if(!container) return; const div = document.createElement('div'); div.className = 'child-entry'; const idx = container.children.length; div.innerHTML = renderChildEntry({name:'', age:'', hero:''}, idx); container.appendChild(div); childCounter = idx + 1; } function removeChildEntry(index){ const container = document.getElementById('profile-children-container'); if(!container) return; const entries = container.querySelectorAll('.child-entry'); if(entries.length <= 1) return; const entry = entries[index]; if(entry) entry.remove(); // Re-index const remaining = container.querySelectorAll('.child-entry'); remaining.forEach((el, i) => { el.innerHTML = renderChildEntry(getChildDataFromDOM(el), i); }); childCounter = remaining.length; } function getChildDataFromDOM(el){ const inputs = el.querySelectorAll('input'); return { name: inputs[0] ? inputs[0].value : '', age: inputs[1] ? inputs[1].value : '', hero: inputs[2] ? inputs[2].value : '' }; } var _savingProfile = false; function saveProfileSetup(){ if(_savingProfile) return; _savingProfile = true; const container = document.getElementById('profile-children-container'); if(!container){ _savingProfile = false; return; } const entries = container.querySelectorAll('.child-entry'); let hasData = false; const profiles = []; const seen = new Set(); entries.forEach(el => { const data = getChildDataFromDOM(el); if(data.name || data.age || data.hero) hasData = true; const key = data.name + '|' + data.age + '|' + data.hero; if(!seen.has(key)){ seen.add(key); profiles.push(data); } }); if(!hasData){ showToast('Заполни хотя бы одно поле ✨'); _savingProfile = false; return; } try { localStorage.setItem('fairytaleProfiles', JSON.stringify(profiles)); localStorage.setItem('fairytaleProfile', JSON.stringify(profiles.length > 0 ? profiles[0] : {name:'', age:'', hero:''})); } catch(e){} showToast(profiles.length > 1 ? '💜 Профили сохранены' : '💜 Профиль сохранён'); _savingProfile = false; populateChildSelector(); } function populateChildSelector(){ const block = document.getElementById('childSelectorBlock'); const sel = document.getElementById('childSelector'); if(!block || !sel) return; let saved = []; try { saved = JSON.parse(localStorage.getItem('fairytaleProfiles') || '[]'); } catch(e){} const valid = saved.filter(c => c.name && c.name.trim()); if(valid.length === 0){ block.style.display = 'none'; return; } block.style.display = 'block'; sel.innerHTML = '<option value="">👶 Выбрать из профиля...</option>' + valid.map((c, i) => '<option value="'+i+'">'+escapeHtml(c.name)+' ('+escapeHtml(c.age||'?')+' '+(c.hero ? '• '+escapeHtml(c.hero) : '')+')</option>').join(''); } function selectChildFromProfile(){ const sel = document.getElementById('childSelector'); const input = document.getElementById('childNameInput'); if(!sel || !input) return; const idx = parseInt(sel.value); if(isNaN(idx)) return; let saved = []; try { saved = JSON.parse(localStorage.getItem('fairytaleProfiles') || '[]'); } catch(e){} if(saved[idx] && saved[idx].name){ input.value = saved[idx].name; if(saved[idx].age && !selectedAge){ const ageVal = parseInt(saved[idx].age); if(ageVal <= 2) selectAge('1-2'); else if(ageVal <= 4) selectAge('3-4'); else if(ageVal <= 6) selectAge('5-6'); else if(ageVal <= 8) selectAge('7-8'); else if(ageVal <= 12) selectAge('9-12'); } showToast('✅ Выбран(а) ' + saved[idx].name); } } function toggleNotifications(el){ const checkbox = document.getElementById('notifToggle'); if(!checkbox) return; checkbox.checked = !checkbox.checked; showToast(checkbox.checked ? '🔔 Уведомления включены' : '🔕 Уведомления выключены'); } function toggleNotificationsFromSwitch(el){ showToast(el.checked ? '🔔 Уведомления включены' : '🔕 Уведомления выключены'); } // ===================== API GENERATION ===================== function generateStory(){ const name = document.getElementById('childNameInput').value.trim(); if(!name){ showToast('Введите имя ребёнка ✏️'); return; } if(!selectedAge){ showToast('Выберите возраст 🎂'); return; } if(!selectedHero){ showToast('Выберите героя 🦸'); return; } // Check if user can generate var canGenerate = userUsage && (userUsage.subscriber || (userUsage.free_generations?.left || 0) > 0); if(!canGenerate){ showToast('📖 Лимит исчерпан! Оформите подписку или купите дополнительные генерации'); showPage('page-profile'); return; } const hero = HEROES.find(h => h.id === selectedHero); const theme = selectedTheme || THEMES.find(t => t.id === 'magic'); // Use custom theme text if applicable let themeDesc; if(theme.id === 'custom'){ themeDesc = document.getElementById('pick-custom-input')?.value?.trim() || 'Волшебная сказка для хорошего настроения'; } else { themeDesc = THEME_DESCRIPTIONS[theme.id] || theme.desc; } // Build payload const payload = { childName: name, childAge: selectedAge, character: HERO_TO_CHARACTER[selectedHero] || selectedHero, storyTheme: themeDesc, telegram_id: currentTelegramId || getTelegramId() }; // Set cover to theme image document.getElementById('result-cover-img').src = 'images/' + theme.img; // Show loading document.getElementById('result-title').textContent = '✨ Ваша сказка создаётся... ✨'; document.getElementById('result-subtitle').textContent = (hero ? hero.name : 'Герой') + ' помогает ' + name + ' ' + themeDesc; document.getElementById('result-loading').style.display = 'block'; document.getElementById('result-content').style.display = 'none'; showPage('page-story-result'); showToast('⏳ Генерирую сказку...'); // Call API fetch('/api/generate', { method: 'POST', headers: {'Content-Type': 'application/json'}, body: JSON.stringify(payload) }) .then(r => { if(!r.ok) throw new Error('Не удалось запустить генерацию'); return r.json(); }) .then(data => { // Проверяем ошибку API (лимит/нет подписки) if(data.error){ document.getElementById('result-loading').style.display = 'none'; document.getElementById('result-content').style.display = 'block'; if(data.error.indexOf('Лимит') !== -1 || data.error.indexOf('исчерп') !== -1){ document.getElementById('result-title').textContent = '💳 Нужна подписка'; document.getElementById('result-subtitle').textContent = 'Бесплатные сказки закончились. Оформите подписку «Сказки без границ» за 899₽/мес и создавайте безлимитно!'; showToast('💰 Бесплатный лимит исчерпан'); } else { document.getElementById('result-title').textContent = '😔 Ошибка'; document.getElementById('result-subtitle').textContent = data.error; showToast('❌ ' + data.error); } return; } const taskId = data.task_id; currentTaskId = taskId; pollTask(taskId, hero, name, theme); }) .catch(err => { document.getElementById('result-loading').style.display = 'none'; document.getElementById('result-content').style.display = 'block'; document.getElementById('result-title').textContent = '😔 Ошибка'; document.getElementById('result-subtitle').textContent = err.message || 'Что-то пошло не так. Попробуйте снова.'; showToast('❌ ' + (err.message || 'Ошибка')); }); } function pollTask(taskId, hero, childName, theme){ let storySaved = false; const poll = setInterval(() => { fetch('/api/status/' + taskId) .then(r => r.json()) .then(data => { if(data.status === 'done'){ if(!storySaved){ storySaved = true; clearInterval(poll); document.getElementById('result-loading').style.display = 'none'; document.getElementById('result-content').style.display = 'block'; const safeName = formatChildName(childName); // Parse markers from story text const parsed = parseStoryWithParentBlock(data.text || ''); document.getElementById('result-title').textContent = '✨ Сказка готова!'; document.getElementById('result-subtitle').textContent = safeName + ' радуется новой истории ♥'; document.getElementById('story-title').textContent = data.title || 'Волшебная история'; document.getElementById('story-text').textContent = formatStoryText(limitStoryText(parsed.story)); document.getElementById('story-meta').textContent = '👧 Для ' + toGenitive(safeName) + ' • ' + selectedAge + ' лет'; document.getElementById('story-tags').innerHTML = '<span style="font-size:11px;background:rgba(107,59,255,0.1);color:var(--accent);padding:5px 12px;border-radius:999px;">' + (theme ? theme.icon + ' ' + theme.title : '') + '</span>'; // Show parent block if present if(parsed.parentBlock){ document.getElementById('parent-block').style.display = 'block'; document.getElementById('parent-block-text').innerHTML = parsed.parentBlock.replace(/\n/g, '<br>'); } else { document.getElementById('parent-block').style.display = 'none'; } // Show child questions if present if(parsed.childQuestions){ document.getElementById('child-questions-block').style.display = 'block'; document.getElementById('child-questions-text').innerHTML = parsed.childQuestions.replace(/\n/g, '<br>'); } else { document.getElementById('child-questions-block').style.display = 'none'; } const currentStoryId = 'story-' + Date.now(); const stories = getSavedStories(); stories.unshift({ id: currentStoryId, title: data.title || 'Волшебная история', text: parsed.story, parentBlock: parsed.parentBlock || '', childQuestions: parsed.childQuestions || '', childName: safeName, childAge: selectedAge, hero: selectedHero, theme: theme ? (theme.icon + ' ' + theme.title) : '✨ Сказка', date: 'Сегодня', favorite: false, listened: false, audio_url: data.audio_url || '' }); saveStories(stories); renderLibrary(); updateProfileStats(); // Показываем блок аудио (с плеером или без) const audioBlock = document.getElementById('story-audio-block'); if(audioBlock){ audioBlock.style.display = canGenerateAudio() ? 'block' : 'none'; const audioEl = document.getElementById('story-audio'); const audioLabel = document.getElementById('audio-left-label'); if(data.audio_url && audioEl){ audioEl.src = data.audio_url; audioEl.style.display = 'block'; if(audioLabel) audioLabel.textContent = '🎧 1 прослушивание'; } else { // Аудио пока не готово if(audioEl) audioEl.style.display = 'none'; if(audioLabel) audioLabel.textContent = '⏳ Скоро появится'; } } showToast('✅ Сказка готова!'); // Обновляем блок медали и кнопку аудио updateMedalBlock(); updateAudioButton(); // Обновляем статус пользователя с сервера (лимит уже списан сервером) if(currentTelegramId) { checkUserStatus(function(){ // Если бесплатные генерации закончились — показываем скидочный попап if(!hasFreeGenerationLeft() && !userUsage.subscriber){ setTimeout(function(){ showDiscountPopup(); }, 1500); } }); } // Продолжаем проверять аудио ещё 90 секунд (оно генерируется отдельно) if(!data.audio_url && canGenerateAudio()){ showToast('⏳ Аудио готовится, подожди пару секунд...'); (function waitAudio(audioRetries){ if(audioRetries <= 0) return; setTimeout(function(){ fetch('/api/status/' + taskId) .then(r => r.json()) .then(d2 => { if(d2.status === 'done' && d2.audio_url){ // Audio ready! Update the saved story const audioEl = document.getElementById('story-audio'); if(audioEl){ audioEl.src = d2.audio_url; audioEl.style.display = 'block'; document.getElementById('story-audio-block').style.display = 'block'; const audioLabel = document.getElementById('audio-left-label'); if(audioLabel) audioLabel.textContent = '🎧 1 прослушивание'; updateAudioButton(); } // Update in saved stories const saved = getSavedStories(); for(var si = 0; si < saved.length; si++){ if(saved[si].id === currentStoryId){ saved[si].audio_url = d2.audio_url; saveStories(saved); break; } } showToast('🎧 Аудио готово!'); } else { waitAudio(audioRetries - 1); } }) .catch(function(){ waitAudio(audioRetries - 1); }); }, 3000); })(30); // 30 * 3s = 90 seconds max } } } else if(data.status === 'error'){ clearInterval(poll); document.getElementById('result-loading').style.display = 'none'; document.getElementById('result-content').style.display = 'block'; document.getElementById('result-title').textContent = '😔 Ошибка'; document.getElementById('result-subtitle').textContent = data.error || 'Что-то пошло не так'; showToast('❌ Ошибка генерации'); } }) .catch(() => {}); }, 2000); } function parseStoryWithParentBlock(fullText){ // Parse markers: ===БЛОК ДЛЯ РОДИТЕЛЕЙ=== и ===ВОПРОСЫ ДЛЯ РЕБЁНКА=== let story = fullText; let parentBlock = ''; let childQuestions = ''; // Сначала ищем вопросы для ребёнка const questionsRegex = /===ВОПРОСЫ ДЛЯ РЕБЁНКА===([\s\S]*?)(?:===|$)/; const questionsMatch = fullText.match(questionsRegex); if(questionsMatch){ childQuestions = questionsMatch[1].trim(); story = story.replace(questionsMatch[0], ''); } // Потом ищем блок для родителей const parentRegex = /===БЛОК ДЛЯ РОДИТЕЛЕЙ===([\s\S]*)/; const parentMatch = story.match(parentRegex); if(parentMatch){ parentBlock = parentMatch[1].trim(); story = story.replace(parentMatch[0], ''); } // Fallback: если вопросов не найдено по маркеру, ищем вопросительные предложения в конце parentBlock if(!childQuestions && parentBlock){ const lines = parentBlock.split('\n').map(l => l.trim()).filter(Boolean); // Ищем строки, которые выглядят как вопросы (заканчиваются на ?) const questionLines = lines.filter(l => l.trim().endsWith('?')); const nonQuestionLines = lines.filter(l => !l.trim().endsWith('?')); if(questionLines.length > 0 && nonQuestionLines.length > 0){ childQuestions = questionLines.join('\n'); parentBlock = nonQuestionLines.join('\n'); } } return { story: story.trim(), parentBlock, childQuestions }; } function formatChildName(name){ const clean = (name || '').trim(); if(!clean) return 'тебя'; return clean.charAt(0).toUpperCase() + clean.slice(1); } function toGenitive(name){ /* Склоняет имя в родительный падеж: Рома → Ромы, Даша → Даши, Андрей → Андрея */ const clean = (name || '').trim(); if(!clean) return ''; const last = clean.slice(-1); // -а → -ы/и (после г,к,х,ж,ч,ш,щ → и) if(last === 'а' || last === 'А'){ const before = clean.slice(0, -1); const hardCons = 'гкхжчшщГКХЖЧШЩ'; if(before && hardCons.includes(before.slice(-1))){ return before + 'и'; } return before + 'ы'; } // -я → -и if(last === 'я' || last === 'Я'){ return clean.slice(0, -1) + 'и'; } // -й → -я if(last === 'й' || last === 'Й'){ return clean.slice(0, -1) + 'я'; } // -ь → -я if(last === 'ь' || last === 'Ь'){ return clean.slice(0, -1) + 'я'; } // остальные (согласные) → -а: Рома(н)→Романа? Нет, Рома→Ромы уже поймали выше. // Для имён на согласную: Максим → Максима, Лев → Льва — сложно, оставим как есть return clean; } function limitStoryText(text){ // ~2000 слов ≈ 15000 символов if(text.length <= 15000) return text; return text.slice(0, 14997).trimEnd() + '...'; } function formatStoryText(text){ return text .replace(/\r/g, '') // Превращаем переносы строк в абзацы (но не дублируем уже существующие) .replace(/\n(?!\n)/g, '\n\n') .replace(/\n{3,}/g, '\n\n') .trim(); } // ===================== SLEEP CALCULATOR ===================== let sleepMode = 'bedtime'; function updateNapField(){ const age = document.getElementById('sleep-age').value; const nap = document.getElementById('sleep-nap'); if(age === '1-2'){ nap.value = '2'; } else { nap.value = '1'; } calcSleep(); } function setSleepMode(mode){ sleepMode = mode; document.querySelectorAll('.mode-btn').forEach(b => b.classList.remove('active')); document.getElementById('mode-' + mode).classList.add('active'); document.getElementById('sleep-input-bedtime').style.display = mode === 'bedtime' ? 'block' : 'none'; document.getElementById('sleep-input-waketime').style.display = mode === 'waketime' ? 'block' : 'none'; calcSleep(); } function calcSleep(){ const ageMap = {'1-2':[11,14],'3-5':[10,13]}; const age = document.getElementById('sleep-age').value; const minHours = ageMap[age][0]; const maxHours = ageMap[age][1]; const avgDayHours = Math.round((minHours + maxHours) / 2); const napHours = parseInt(document.getElementById('sleep-nap').value) || 0; const nightHours = avgDayHours - napHours; const resultDiv = document.getElementById('sleep-result'); const timeEl = document.getElementById('sleep-result-time'); const descEl = document.getElementById('sleep-result-desc'); const recEl = document.getElementById('sleep-recommend'); if(sleepMode === 'bedtime'){ const wakeStr = document.getElementById('sleep-wake').value; if(!wakeStr) { resultDiv.classList.remove('show'); return; } const [h,m] = wakeStr.split(':').map(Number); const wakeMin = h * 60 + m; const bedMin = wakeMin - nightHours * 60; const bedH = Math.floor(((bedMin % (24*60)) + 24*60) % (24*60) / 60); const bedM = ((bedMin % (24*60)) + 24*60) % (24*60) % 60; timeEl.textContent = String(bedH).padStart(2,'0') + ':' + String(bedM).padStart(2,'0'); descEl.textContent = '⏰ Уложить в ' + timeEl.textContent + ' — тогда ночной сон составит ~' + nightHours + ' ч (' + avgDayHours + ' ч с дневным)'; recEl.innerHTML = '🌙 <strong>Рекомендация:</strong> Дневной сон ' + napHours + ' ч, ночной — ~' + nightHours + ' ч. Если просыпается в ' + wakeStr + ', укладывайте около ' + timeEl.textContent + '.'; } else { const bedStr = document.getElementById('sleep-bed').value; if(!bedStr) { resultDiv.classList.remove('show'); return; } const [h,m] = bedStr.split(':').map(Number); const bedMin = h * 60 + m; const wakeMin = (bedMin + nightHours * 60) % (24 * 60); const wakeH = Math.floor(wakeMin / 60); const wakeM = wakeMin % 60; timeEl.textContent = String(wakeH).padStart(2,'0') + ':' + String(wakeM).padStart(2,'0'); descEl.textContent = '☀️ Проснётся ~в ' + timeEl.textContent + ' (ночной сон ' + nightHours + ' ч + дневной ' + napHours + ' ч = ' + avgDayHours + ' ч)'; recEl.innerHTML = '⏰ <strong>Рекомендация:</strong> Дневной сон ' + napHours + ' ч, ночной — ~' + nightHours + ' ч. Всего ~' + avgDayHours + ' ч в сутки — норма для возраста ' + age + '.'; } resultDiv.classList.add('show'); } // Auto-calc on load document.addEventListener('DOMContentLoaded', function(){ setTimeout(calcSleep, 100); }); // ===================== AUDIO PLAYER ===================== function toggleAudio(){ const audioEl = document.getElementById('story-audio'); if(!audioEl || !audioEl.src) { showToast('🎧 Аудио пока недоступно'); return; } audioEl.style.display = 'block'; if(audioEl.paused) { audioEl.play(); } else { audioEl.pause(); } } function openCartoon(){ showToast('🎬 Мультик скоро появится'); } document.addEventListener('DOMContentLoaded', function(){ var resultPage = document.getElementById('page-story-result'); if(resultPage){ resultPage.addEventListener('click', function(e){ var btn = e.target.closest('button[data-result-action]'); if(!btn) return; var action = btn.getAttribute('data-result-action'); if(action === 'audio'){ toggleAudio(); } if(action === 'cartoon'){ openCartoon(); } }); } }); // ===================== PUZZLE GAME ===================== let puzzleState = { heroId: null, pieces: [], gridSize: 3, // 3x3 = 9 pieces moves: 0, selected: null, // index of selected piece to swap hintShown: false, sourceImg: null // original image reference }; function puzzleInit(){ const grid = document.getElementById('puzzle-hero-grid'); if(!grid) return; // Heroes that have images - same as main heroes const heroIds = ['lily','topa','umka','elly','oli','koluchka','bambi','ami','leya','kristoff','vudi','blu','din']; const heroNames = { lily:'🐰 Зайка Лили', topa:'🐻 Мишка Топа', umka:'🦉 Совёнок Умка', elly:'🐘 Слонёнок Элли', oli:'🐙 Осьминожка Оли', koluchka:'🦔 Ёжонок Колючка', bambi:'🦌 Оленёнок Бэмби', ami:'🦒 Жирафик Ами', leya:'👸 Принцесса Лея', kristoff:'🤴 Принц Кристоф', vudi:'🐺 Волчонок Вуди', blu:'🐬 Дельфинёнок Блю', din:'🦕 Динозаврик Дино' }; grid.innerHTML = heroIds.map(id => ` <div onclick="puzzleSelectHero('${id}')" class="puzzle-hero-item" style="cursor:pointer;border-radius:12px;overflow:hidden;background:var(--card);box-shadow:0 2px 8px rgba(0,0,0,0.1);text-align:center;padding:6px 4px; ${puzzleState.heroId === id ? 'border:2px solid var(--accent);' : 'border:2px solid transparent;'}"> <img src="images/hero_${id}.png" alt="" style="width:100%;aspect-ratio:1;object-fit:cover;border-radius:8px;display:block;"> <div style="font-size:9px;margin-top:4px;color:var(--text);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">${heroNames[id].split(' ').slice(1).join(' ')}</div> </div> `).join(''); } function puzzleSelectHero(heroId){ puzzleState.heroId = heroId; puzzleState.moves = 0; puzzleState.selected = null; puzzleState.hintShown = false; document.getElementById('puzzle-moves').textContent = '0'; document.getElementById('puzzle-win').style.display = 'none'; document.getElementById('puzzle-welcome').style.display = 'none'; document.getElementById('puzzle-hint-area').style.display = 'block'; document.getElementById('puzzle-hint-img').style.display = 'none'; document.getElementById('puzzle-heroes').style.display = 'none'; puzzleInit(); // refresh highlight puzzleStartGame(); showPage('page-puzzle'); } function puzzleStartGame(){ const img = new Image(); img.crossOrigin = 'anonymous'; img.src = 'images/hero_' + puzzleState.heroId + '.png?' + Date.now(); img.onload = function(){ puzzleState.sourceImg = img; document.getElementById('puzzle-hint-img').src = img.src; puzzleCreatePieces(img); }; img.onerror = function(){ showToast('😅 Не удалось загрузить картинку'); document.getElementById('puzzle-welcome').style.display = 'block'; }; } function puzzleCreatePieces(img){ const n = puzzleState.gridSize; puzzleState.pieces = []; for(let row = 0; row < n; row++){ for(let col = 0; col < n; col++){ puzzleState.pieces.push({ index: row * n + col, srcRow: row, // original position in source image srcCol: col }); } } // Shuffle puzzleShuffle(); } function puzzleChangeHero(){ puzzleState.heroId = null; puzzleState.pieces = []; document.getElementById('puzzle-heroes').style.display = 'block'; document.getElementById('puzzle-area').style.display = 'none'; document.getElementById('puzzle-welcome').style.display = 'block'; puzzleInit(); } function puzzleShuffle(){ if(!puzzleState.heroId || puzzleState.pieces.length === 0) return; // Fisher-Yates shuffle for(let i = puzzleState.pieces.length - 1; i > 0; i--){ const j = Math.floor(Math.random() * (i + 1)); [puzzleState.pieces[i], puzzleState.pieces[j]] = [puzzleState.pieces[j], puzzleState.pieces[i]]; } puzzleState.moves = 0; puzzleState.selected = null; puzzleState.hintShown = false; document.getElementById('puzzle-moves').textContent = '0'; document.getElementById('puzzle-win').style.display = 'none'; document.getElementById('puzzle-hint-img').style.display = 'none'; document.getElementById('puzzle-area').style.display = 'block'; puzzleRender(); } function puzzleRender(){ const canvas = document.getElementById('puzzle-canvas'); if(!canvas) return; const ctx = canvas.getContext('2d'); const n = puzzleState.gridSize; const w = canvas.width; const h = canvas.height; const pieceW = w / n; const pieceH = h / n; ctx.clearRect(0, 0, w, h); // Draw background ctx.fillStyle = 'rgba(155,118,255,0.05)'; ctx.fillRect(0, 0, w, h); // Draw grid lines ctx.strokeStyle = 'rgba(155,118,255,0.15)'; ctx.lineWidth = 1; for(let i = 1; i < n; i++){ ctx.beginPath(); ctx.moveTo(i * pieceW, 0); ctx.lineTo(i * pieceW, h); ctx.stroke(); ctx.beginPath(); ctx.moveTo(0, i * pieceH); ctx.lineTo(w, i * pieceH); ctx.stroke(); } // Draw pieces directly from source image const img = puzzleState.sourceImg; const srcPieceW = img ? img.width / n : pieceW; const srcPieceH = img ? img.height / n : pieceH; puzzleState.pieces.forEach((piece, idx) => { if(!piece) return; const row = Math.floor(idx / n); const col = idx % n; const x = col * pieceW; const y = row * pieceH; if(img){ // Draw piece from source image using original position ctx.drawImage(img, piece.srcCol * srcPieceW, piece.srcRow * srcPieceH, srcPieceW, srcPieceH, x, y, pieceW, pieceH ); } // Draw border ctx.strokeStyle = 'rgba(255,255,255,0.2)'; ctx.lineWidth = 1; ctx.strokeRect(x, y, pieceW, pieceH); // Highlight selected if(puzzleState.selected === idx){ ctx.strokeStyle = 'var(--accent,#9B76FF)'; ctx.lineWidth = 3; ctx.strokeRect(x + 2, y + 2, pieceW - 4, pieceH - 4); } }); } function puzzleHandleClick(e){ const canvas = document.getElementById('puzzle-canvas'); if(!canvas || puzzleState.pieces.length === 0) return; const rect = canvas.getBoundingClientRect(); const scaleX = canvas.width / rect.width; const scaleY = canvas.height / rect.height; const clientX = e.touches ? e.touches[0].clientX : e.clientX; const clientY = e.touches ? e.touches[0].clientY : e.clientY; const x = (clientX - rect.left) * scaleX; const y = (clientY - rect.top) * scaleY; const n = puzzleState.gridSize; const pieceW = canvas.width / n; const pieceH = canvas.height / n; const col = Math.floor(x / pieceW); const row = Math.floor(y / pieceH); const idx = row * n + col; if(idx < 0 || idx >= puzzleState.pieces.length) return; // First selection if(puzzleState.selected === null){ puzzleState.selected = idx; puzzleRender(); return; } // Second selection — swap if(puzzleState.selected !== idx){ // Swap pieces [puzzleState.pieces[puzzleState.selected], puzzleState.pieces[idx]] = [puzzleState.pieces[idx], puzzleState.pieces[puzzleState.selected]]; puzzleState.moves++; document.getElementById('puzzle-moves').textContent = puzzleState.moves; puzzleState.selected = null; puzzleRender(); puzzleCheckWin(); } else { // Deselect puzzleState.selected = null; puzzleRender(); } } function puzzleCheckWin(){ let allCorrect = true; for(let i = 0; i < puzzleState.pieces.length; i++){ if(puzzleState.pieces[i].index !== i){ allCorrect = false; break; } } if(allCorrect){ document.getElementById('puzzle-final-moves').textContent = puzzleState.moves; document.getElementById('puzzle-win').style.display = 'block'; // Celebration effect const canvas = document.getElementById('puzzle-canvas'); const ctx = canvas.getContext('2d'); const w = canvas.width, h = canvas.height; // Draw final image from source const img = puzzleState.sourceImg; if(img){ const n = puzzleState.gridSize; const pw = w / n, ph = h / n; const srcPw = img.width / n, srcPh = img.height / n; puzzleState.pieces.forEach((piece, idx) => { const col = idx % n; const row = Math.floor(idx / n); ctx.drawImage(img, piece.srcCol * srcPw, piece.srcRow * srcPh, srcPw, srcPh, col * pw, row * ph, pw, ph ); }); } // Gold border ctx.strokeStyle = 'gold'; ctx.lineWidth = 4; ctx.strokeRect(2, 2, w - 4, h - 4); showToast('🎉 Пазл собран! Ура!'); } } function puzzleToggleHint(){ const hintImg = document.getElementById('puzzle-hint-img'); puzzleState.hintShown = !puzzleState.hintShown; hintImg.style.display = puzzleState.hintShown ? 'block' : 'none'; } // Canvas event listeners document.addEventListener('DOMContentLoaded', function(){ const canvas = document.getElementById('puzzle-canvas'); if(canvas){ canvas.addEventListener('click', puzzleHandleClick); canvas.addEventListener('touchstart', function(e){ e.preventDefault(); puzzleHandleClick(e); }, {passive: false}); } }); // Init puzzle hero grid if(document.getElementById('puzzle-hero-grid')){ document.addEventListener('DOMContentLoaded', function(){ setTimeout(puzzleInit, 200); }); } // Scroll indicator for hero selection function attachHeroScrollListener(){ const container = document.getElementById('hero-scroll-container'); if(container){ container.addEventListener('scroll', function(){ updateHeroScrollIndicator(); }); } } // Attach after page loads if(document.getElementById('hero-scroll-container')){ attachHeroScrollListener(); } // Init child selector from saved profiles setTimeout(populateChildSelector, 500); // Hook into showPage to populate child selector when switching to create page var _origShowPage = showPage; showPage = function(id){ _origShowPage(id); if(id === 'page-create' || id === 'page-heroes'){ setTimeout(populateChildSelector, 100); } };