Add files via upload

bodun56 · Oct 10, 2024 · 7292f83 · 7292f83
1 parent 9763a96
commit 7292f83
Showing 1 changed file with 90 additions and 5 deletions.
diff --git a/wapp/index.html b/wapp/index.html
@@ -3,12 +3,97 @@
   <head>
     <meta charset="utf-8">
     <title></title>
+    <script src="https://telegram.org/js/telegram-web-app.js"></script>
+    <script>
+      let tg = window.Telegram.WebApp; //получаем объект webapp телеграма 
+
+      tg.expand(); //расширяем на все окно  
+
+      tg.MainButton.text = "Changed Text"; //изменяем текст кнопки 
+      tg.MainButton.setText("Changed Text1"); //изменяем текст кнопки иначе
+      tg.MainButton.textColor = "#F55353"; //изменяем цвет текста кнопки
+      tg.MainButton.color = "#143F6B"; //изменяем цвет бэкграунда кнопки
+      tg.MainButton.setParams({"color": "#143F6B"}); //так изменяются все параметры
+
+      btn.addEventListener('click', function(){ //вешаем событие на нажатие html-кнопки
+        if (tg.MainButton.isVisible){ //если кнопка показана 
+          tg.MainButton.hide() //скрываем кнопку 
+        }
+        else{ //иначе
+          tg.MainButton.show() //показываем 
+        }
+      });
+
+      let btnED = document.getElementById("btnED"); //получаем кнопку активировать/деактивировать
+      btnED.addEventListener('click', function(){ //вешаем событие на нажатие html-кнопки
+        if (tg.MainButton.isActive){ //если кнопка показана 
+          tg.MainButton.setParams({"color": "#E0FFFF"}); //меняем цвет
+          tg.MainButton.disable() //скрываем кнопку 
+        }
+        else{ //иначе
+          tg.MainButton.setParams({"color": "#143F6B"}); //меняем цвет
+          tg.MainButton.enable() //показываем 
+        }
+      });
+
+      Telegram.WebApp.onEvent('mainButtonClicked', function(){
+        tg.sendData("some string that we need to send"); 
+        //при клике на основную кнопку отправляем данные в строковом виде
+      });
+
+      let usercard = document.getElementById("usercard"); //получаем блок usercard 
+
+      let profName = document.createElement('p'); //создаем параграф
+      profName.innerText = `${tg.initDataUnsafe.user.first_name}
+      ${tg.initDataUnsafe.user.last_name}
+      ${tg.initDataUnsafe.user.username} (${tg.initDataUnsafe.user.language_code})`;
+      //выдем имя, "фамилию", через тире username и код языка
+      usercard.appendChild(profName); //добавляем 
+
+      let userid = document.createElement('p'); //создаем еще параграф 
+      userid.innerText = `${tg.initDataUnsafe.user.id}`; //показываем user_id
+      usercard.appendChild(userid); //добавляем
+    </script>
+    <style>
+      body{
+        color: var(--tg-theme-text-color);
+        background: var(--tg-theme-bg-color);
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        font-size: 18px;
+      }
+
+      .hint{
+        color: var(--tg-theme-hint-color);
+      }
+
+      .link{
+        color: var(--tg-theme-link-color);
+      }
+
+      .button{
+        background: var(--tg-theme-button-color);
+        color: var(--tg-theme-button-text-color);
+        border: none;
+        font-size: 18px;
+      }
+
+      .button:not(:last-child){
+        margin-bottom: 20px
+      }
+
+      #usercard{
+        text-align: center;
+      }
+    </style>
   </head>
   <body>
-    <header></header>
-    <main>
-      <p>This is test!</p>
-    </main>
-    <footer></footer>
+      <div id="usercard"> <!--Карта профиля, человека, который к нам обратился--> </div>
+      <p>Just text</p> <!--Просто текст для проверки-->
+      <a class="link" href="https://ya.ru">Link</a> <!--Просто ссылка для проверки-->
+      <p class="hint">Some little hint</p> <!--Просто текст-подсказка для проверки-->
+      <button id="btn" class="button">Show/Hide Main Button</button> <!--Кнопка, чтобы скрыть / показать основную кнопку-->
+      <button id="btnED" class="button">Enable/Disable Main Button</button> <!--Кнопка, чтобы сделать кнопку активной/неактивной-->
   </body>
 </html>