Sign up

soumyadeepdas/tbl_WebBotPublic · Community Store Listing

Demo WebApp

ProfileTelegram
14 commands0 envUpdated 19d agoCreated Oct 27, 2025
Back to folder

commands/telegram-webapp.html.js

javascript · 134 lines · click line # to share

1/**#command2name: telegram-webapp.html3answer: 4keyboard: 5parse_mode: 6aliases: 7allow_only_group: false8need_reply: false9is_web: 010#command**/11 12<!DOCTYPE html>13<html lang="en">14<head>15  <meta charset="UTF-8" />16  <meta name="viewport" content="width=device-width, initial-scale=1.0">17  <title>Telegram Profile</title>18  <script src="https://telegram.org/js/telegram-web-app.js"></script>19  <style>20    * {21      box-sizing: border-box;22      margin: 0;23      padding: 0;24    }25 26    body {27      font-family: 'Inter', system-ui, sans-serif;28      display: flex;29      flex-direction: column;30      justify-content: center;31      align-items: center;32      height: 100vh;33      background: radial-gradient(circle at 30% 30%, #10151f, #0b0f16);34      color: #e6edf3;35      text-align: center;36      overflow: hidden;37      animation: fadeIn 0.8s ease forwards;38    }39 40    @keyframes fadeIn {41      from { opacity: 0; transform: translateY(10px); }42      to { opacity: 1; transform: translateY(0); }43    }44 45    img {46      width: 130px;47      height: 130px;48      border-radius: 50%;49      object-fit: cover;50      margin-bottom: 18px;51      border: 2px solid #1f6feb;52      box-shadow: 0 0 25px rgba(31,111,235,0.25);53      transition: transform 0.3s ease, box-shadow 0.3s ease;54    }55 56    img:hover {57      transform: scale(1.05);58      box-shadow: 0 0 35px rgba(31,111,235,0.45);59    }60 61    h2 {62      font-size: 1.6em;63      font-weight: 600;64      background: linear-gradient(135deg, #58a6ff, #1f6feb);65      -webkit-background-clip: text;66      -webkit-text-fill-color: transparent;67    }68 69    p {70      margin-top: 6px;71      font-size: 1em;72      color: #9ba3b0;73    }74 75    small {76      margin-top: 6px;77      font-size: 0.85em;78      color: #6e7681;79    }80 81    button {82      margin-top: 28px;83      padding: 10px 26px;84      font-size: 1em;85      color: #fff;86      background: linear-gradient(135deg, #1f6feb, #2994ff);87      border: none;88      border-radius: 16px;89      cursor: pointer;90      transition: all 0.25s ease;91      box-shadow: 0 4px 12px rgba(31,111,235,0.3);92    }93 94    button:hover {95      background: linear-gradient(135deg, #2994ff, #1f6feb);96      box-shadow: 0 6px 18px rgba(31,111,235,0.45);97      transform: translateY(-2px);98    }99 100    footer {101      position: absolute;102      bottom: 10px;103      font-size: 0.75em;104      color: #5c6370;105    }106  </style>107</head>108<body>109  <img id="avatar" src="">110  <h2 id="name"></h2>111  <p id="username"></p>112  <small id="id"></small>113  <button onclick="window.Telegram.WebApp.close()">Close</button>114  <footer>Telegram WebApp • Profile View</footer>115 116  <script>117    const tg = window.Telegram?.WebApp;118    tg?.ready();119 120    const user = tg?.initDataUnsafe?.user || {121      first_name: "Demo",122      last_name: "User",123      username: "demo_profile",124      id: 123456789,125      photo_url: "https://cdn-icons-png.flaticon.com/512/1946/1946429.png"126    };127 128    document.getElementById("avatar").src = user.photo_url || "https://cdn-icons-png.flaticon.com/512/1946/1946429.png";129    document.getElementById("name").innerText = `${user.first_name || ''} ${user.last_name || ''}`.trim();130    document.getElementById("username").innerText = user.username ? `@${user.username}` : '';131    document.getElementById("id").innerText = `ID: ${user.id}`;132  </script>133</body>134</html>