[
  {
    "path": ".github/workflows/static.yml",
    "content": "# Simple workflow for deploying static content to GitHub Pages\nname: Deploy static content to Pages\n\non:\n  # Runs on pushes targeting the default branch\n  push:\n    branches: [\"main\"]\n\n  # Allows you to run this workflow manually from the Actions tab\n  workflow_dispatch:\n\n# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages\npermissions:\n  contents: read\n  pages: write\n  id-token: write\n\n# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.\n# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.\nconcurrency:\n  group: \"pages\"\n  cancel-in-progress: false\n\njobs:\n  # Single deploy job since we're just deploying\n  deploy:\n    environment:\n      name: github-pages\n      url: ${{ steps.deployment.outputs.page_url }}\n    runs-on: ubuntu-latest\n    steps:\n      - name: Checkout\n        uses: actions/checkout@v5\n      - name: Setup Pages\n        uses: actions/configure-pages@v5\n      - name: Upload artifact\n        uses: actions/upload-pages-artifact@v3\n        with:\n          # Upload entire repository\n          path: '.'\n      - name: Deploy to GitHub Pages\n        id: deployment\n        uses: actions/deploy-pages@v4\n"
  },
  {
    "path": "LICENSE",
    "content": "MIT License\n\nCopyright (c) 2023 TON Foundation\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE."
  },
  {
    "path": "README.md",
    "content": "<p align=\"center\">\n  <br>\n  <img width=\"240\" src=\"./assets/tapps.png\" alt=\"logo of telegram web apps\">\n  <br>\n  <br>\n</p>\n\n# Telegram Mini Apps Basic Example\nThis is a basic and straightforward Telegram Mini App(TMA) implemented using plain JavaScript, HTML, and CSS. This project aims to provide a minimalistic example of how to create a simple TWA and launch it within Telegram without relying on complex build tools or bleeding-edge libraries.\n\n- App is available via direct link: https://t.me/simple_telegram_mini_app_bot/app\n- Or you can launch app with a bot menu button: https://t.me/simple_telegram_mini_app_bot\n- Deployment URL: [https://twa-dev.github.io/simple-telegram-web-app/](https://telegram-mini-apps-dev.github.io/vanilla-js-boilerplate/)\n\n## Features\n- Minimalistic user interface.\n- No external libraries or frameworks used.\n- Easy to understand and modify.\n\n## Getting Started\n\n### Prerequisites\n\nTo run this example, you'll need a modern web browser with JavaScript enabled.\n\n### Installation\n\n1. Clone this repository to your local machine:\n\n   ```bash\n   git clone https://github.com/Telegram-Mini-Apps-Dev/vanilla-js-boilerplate\n\n2. Navigate to the project directory:\n\n\t```bash\n\tcd vanilla-js-boilerplate\n\nOpen index.html in your preferred code editor or IDE.\n\n### Usage\n1. Open index.html in your preferred code editor or IDE.\n2. Make your changes\n3. Create your own GitHub repository, commit and push your updates.\n4. Go to your repository GitHub page and open Settings. Check the Pages tab and Build and deployment section. If GitHub Actions option was selected, assets should be deployed to Pages and there will be an URL like `https://<username>.github.io/simple-telegram-mini-app/`. You can copy this URL and use it with [BotFather](https://tg.me/BotFather) bot to create your very own TWA.\n\n### Customization\nFeel free to customize this web app to suit your needs. You can modify the HTML, CSS, and JavaScript files as required.\n\n## Contributing\nIf you'd like to contribute to this project, please follow these steps:\n\n1. Fork the repository.\n2. Create a new branch for your feature or bug fix.\n3. Make your changes and commit them with descriptive messages.\n4. Push your branch to your fork.\n5. Create a pull request to the main repository's main branch.\n\n## License\nThis project is licensed under the MIT License - see the LICENSE file for details.\n"
  },
  {
    "path": "index.html",
    "content": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"utf-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no\" />\n    <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" />\n    <title>Telegram Mini Apps Vanilla JS Sample App</title>\n    <style>\n        body {\n            --bg-color: var(--tg-theme-bg-color);\n            font: 12px/18px \"Lucida Grande\", \"Lucida Sans Unicode\", Arial, Helvetica, Verdana, sans-serif;\n            background-color: var(--bg-color);\n            color: var(--tg-theme-text-color);\n            margin: 48px 24px;\n            padding: 0;\n            color-scheme: var(--tg-color-scheme);\n        }\n\n        a {\n            color: var(--tg-theme-link-color);\n        }\n        #viewport {\n            position: fixed;\n            left: 0;\n            right: 0;\n            top: 0;\n            height: var(--tg-viewport-stable-height, 100vh);\n            pointer-events: none;\n            transition: all .2s ease;\n        }\n        #viewport:after {\n            content: '';\n            display: block;\n            position: absolute;\n            left: 0;\n            right: 0;\n            top: 0;\n            bottom: 0;\n            border-width: 4px;\n            border-style: solid;\n            border-image: linear-gradient(45deg, rgba(64, 224, 208, .5), rgba(173, 255, 47, .5)) 1;\n        }\n\n        #viewport-params-size,\n        #viewport-params-expand {\n            content: attr(text);\n            position: absolute;\n            display: inline-block;\n            background: var(--tg-theme-link-color, rgb(64, 224, 208));\n            right: 4px;\n            left: auto;\n            font-size: 8px;\n            padding: 4px;\n            vertical-align: top;\n        }\n        #viewport-params-size {\n            top: 4px;\n        }\n        #viewport-params-expand {\n            top: 30px;\n        }\n    </style>\n</head>\n\n<body>\n    <main>\n        <div align=\"center\">\n            <a href=\"https://ton.org/\"><img width=\"48\" src=\"./assets/tapps.png\" alt=\"logo of telegram web apps\"></a>\n        </div>\n        <h1>Modals</h1>\n        <button onclick=\"Telegram.WebApp.showAlert('Hello World!');\">Launch Alert</button>\n        <button onclick=\"showPopup();\">Launch Popup</button>\n\n        <h1>Links</h1>\n        <ul>\n            <li>\n                <a href=\"javascript:Telegram.WebApp.openTelegramLink('https://t.me/trendingapps');\">Open link within Telegram</a>\n            </li>\n            <li>\n                <a href=\"javascript:Telegram.WebApp.openLink('https://ton.org/');\">Open link in external browser</a>\n            </li>\n            <li>\n                <a href=\"javascript:Telegram.WebApp.openLink('https://telegra.ph/api',{try_instant_view:true});\">Open link inside Telegram webview</a>\n            </li>\n        </ul>\n\n        <h1>Buttons</h1>\n        <button onclick=\"Telegram.WebApp.expand();\">Expand Webview</button>\n        <button onclick=\"toggleMainButton();\">Toggle Main Button</button>\n    </main>\n    <div id=\"viewport\"></div>\n    <div id=\"viewport-params-size\"></div>\n    <div id=\"viewport-params-expand\"></div>\n    <script src=\"https://telegram.org/js/telegram-web-app.js\"></script>\n    <script>\n        // Init TWA\n        Telegram.WebApp.ready();\n\n        // Event occurs whenever theme settings are changed in the user's Telegram app (including switching to night mode).\n        Telegram.WebApp.onEvent('themeChanged', function() {\n            document.documentElement.className = Telegram.WebApp.colorScheme;\n        });\n\n        // Show main button\n        Telegram.WebApp.MainButton.setParams({\n            text: 'Main Button'\n        });\n        Telegram.WebApp.MainButton.onClick(function () {\n            Telegram.WebApp.showAlert('Main Button was clicked')\n        });\t\n        Telegram.WebApp.MainButton.show();\n\n        // Function to call showPopup API\n        function showPopup() {\n            Telegram.WebApp.showPopup({\n                title: 'Title',\n                message: 'Some message',\n                buttons: [\n                    {id: 'link', type: 'default', text: 'Open ton.org'},\n                    {type: 'cancel'},\n                ]\n            }, function(btn) {\n                if (btn === 'link') {\n                    Telegram.WebApp.openLink('https://ton.org/');\n                }\n            });\n        };\n\n        // Function to toggle main TWA button\n        function toggleMainButton() {\n            if (Telegram.WebApp.MainButton.isVisible) {\n                Telegram.WebApp.MainButton.hide();\n            } else {\n                Telegram.WebApp.MainButton.show();\n            }\n        };\n\n        function setViewportData() {\n            var sizeEl = document.getElementById('viewport-params-size');\n            sizeEl.innerText = 'width: ' + window.innerWidth + ' x ' + \n                'height: ' + Telegram.WebApp.viewportStableHeight;\n\n            var expandEl = document.querySelector('#viewport-params-expand');\n            expandEl.innerText = 'Is Expanded: ' + (Telegram.WebApp.isExpanded ? 'true' : 'false');\n        }\n\n        Telegram.WebApp.setHeaderColor('secondary_bg_color');\n\n        setViewportData();\n        Telegram.WebApp.onEvent('viewportChanged', setViewportData);\n\n        Telegram.WebApp.onEvent('themeChanged', function() {\n            document.body.setAttribute('style', '--bg-color:' + Telegram.WebApp.backgroundColor);\n        });\n\n    </script>\n\n    <!-- Eruda is console for mobile browsers -->\n    <script src=\"https://cdn.jsdelivr.net/npm/eruda\"></script>\n    <script>eruda.init();</script>\n</body>\n</html>\n"
  }
]