index.html

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Skypro Share Achievement </title>
    <link rel="stylesheet" href="/assets/css/style.css">
    <script src="https://telegram.org/js/telegram-web-app.js"></script>
</head>
<body>
<div class="main">

</div>


<script type="application/javascript">

    function getBadgeID() {

        let startParam = Telegram.WebApp.initDataUnsafe.start_param

        if (!startParam) {
            startParam="b_2"
            console.log("Не передан идентификатор бейджа, берем тестовый")
        }
        return startParam.replace(/^b_/, '');

    }


    function renderData(badgeData) {

        const template = `
            <div class="card badge-card">
                <p class="badge-card__name">${badgeData.student_name}</p>
                <h1 class="badge-card__header">${badgeData.title}</h1>
                <img src="/assets/badges/${badgeData.badge_type}.png" class="sharing-picture">
                <p class="badge-card__description">${badgeData.description}</p>
                <p>
                    <button class="badge-card__button" onclick="Telegram.WebApp.shareToStory('${badgeData.sharing_card_url}');">
                        Опубликовать историю
                    </button>
                </p>
            </div>
        `

        document.querySelector(".main").innerHTML = template

    }

    async function fetchBadgeData(badgeID){

        const url = 'https://sky.pro/share/api/badges/' + badgeID;

        try {
            const response = await fetch(url)
            const json = await response.json();
            return (json)

        } catch (error) {

            console.error(error.message);

        }
    }

    const badgeID = getBadgeID()

    badgeData = fetchBadgeData(badgeID).then((response) => {

        console.log(`Получена информация по бейджам ${JSON.stringify(response)}`)
        renderData(response)

    })


</script>

</body>
</html>