Как оформить веб апп

S.К [10 месяцев назад] 7 ответов

Здравствуйте, подскажите пожалуйся пример оформления html страницы web app как правельно составить css фаил чтобы фон и текст менялся при смене темы оформления в телеграм

Авторизуйтесь через Telegram, чтобы оставить комментарий.
Откройте по ссылке или QR бот @iMakeBot, нажмите кнопку Старт/Start.
Следуйте инструкциям бота.

iMakeBots [10 месяцев назад]
В объекте window.Telegram.WebApp есть свойство colorScheme, в нем лежит значение текущей цветовой схемы пользователя light или dark
Можно на тег html после загрузки страницы повесить одноименный класс: light или dark
И также повесить прослушку события themeChanged смены цветовой схемы при срабатывании которой вызывать смену класса тега html
```
<script>
    function setThemeClass() {
        document.documentElement.className = Telegram.WebApp.colorScheme;
    }
    Telegram.WebApp.onEvent('themeChanged', setThemeClass);
    setThemeClass();
</script>
```
Сам CSS может выглядеть следующим образом например для тега H1
```
<style>
    .dark h1 {
        color: red;
    }

    .light h1 {
        color: black;
    }
</style>
```
S.К [10 месяцев назад → iMakeBots]

Спасибо огромное
S.К [9 месяцев назад → iMakeBots]

А не подскажите как вытащить chat_id пользователя в веб приложении
iMakeBots [9 месяцев назад → S.К]

Вся базовая инфа о пользователе лежит в window.Telegram.WebApp.initDataUnsafe.user
S.К [9 месяцев назад → iMakeBots]

Я это в документации видел проблема в том что я js не знаю))
Мене нужен код который вытащит chat_id чтобы я мог дальше с ним работать,
P.s. я уже наверное вам надоел с вопросами , просто на всех форумах просто кидают ссылку на документацию, там всё понятно, что за что отвечает но нигде нет примера кода для получения этих данных

S.К [9 месяцев назад → S.К]

Мне помог chat gbt

<!DOCTYPE html>
<html>
<head>
    <script src="https://telegram.org/js/telegram-web-app.js"></script>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <title>User Data</title>
</head>
<body>
    <h1>User ID</h1>
    <p id="userId">User ID:</p>
    <button id="saveBtn">Save User ID</button>
    <script>
        var userId = window.Telegram.WebApp.initDataUnsafe.user.id;
	$('#userId').append(' ' + userId);
	$('#saveBtn').on('click', function() {
	    $.ajax({
	        url: 'save.php',
		type: 'post',
		data: { userId: userId },
		success: function(response) {
		    alert(response);
		},
		error: function(xhr, status, error) {
		    alert("Error: " + xhr.responseText);
		}
	    });
        });
    </script>
</body>
</html>

PHP-код (save.php):

<?php
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    // Получаем user_id из POST-запроса и сохраняем в переменную
    $user_id = $_POST['userId'];

    // Выполняем действия с ID пользователя
    // Например, сохраняем в базу данных

    // Возвращаем сообщение об успешной обработке запроса
    echo 'User ID saved successfully';
}
?>

iMakeBots [9 месяцев назад → S.К]

))) gpt теперь лучше любого поисковика