pyTelegramBotAPI 4.21.0__tar.gz → 4.23.0__tar.gz

{pytelegrambotapi-4.21.0 → pytelegrambotapi-4.23.0}/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.3
 Name: pyTelegramBotAPI
-Version: 4.21.0
+Version: 4.23.0
 Summary: Python Telegram bot api.
 Project-URL: Homepage, https://github.com/eternnoir/pyTelegramBotAPI
 Project-URL: Documentation, https://pytba.readthedocs.org
@@ -23,8 +23,6 @@ Requires-Python: >=3.8
 Requires-Dist: requests
 Provides-Extra: aiohttp
 Requires-Dist: aiohttp; extra == 'aiohttp'
-Provides-Extra: aioredis
-Requires-Dist: aioredis; extra == 'aioredis'
 Provides-Extra: coloredlogs
 Requires-Dist: coloredlogs; extra == 'coloredlogs'
 Provides-Extra: fastapi
@@ -55,7 +53,7 @@ Description-Content-Type: text/markdown
 <p align="center">A simple, but extensible Python implementation for the <a href="https://core.telegram.org/bots/api">Telegram Bot API</a>.</p>
 <p align="center">Both synchronous and asynchronous.</p>
 
-## <p align="center">Supported Bot API version: <a href="https://core.telegram.org/bots/api#july-7-2024">7.6</a>!
+## <p align="center">Supported Bot API version: <a href="https://core.telegram.org/bots/api#september-6-2024"><img src="https://img.shields.io/badge/Bot%20API-7.10-blue?logo=telegram" alt="Supported Bot API version"></a>
 
 <h2><a href='https://pytba.readthedocs.io/en/latest/index.html'>Official documentation</a></h2>
 <h2><a href='https://pytba.readthedocs.io/ru/latest/index.html'>Official ru documentation</a></h2>

{pytelegrambotapi-4.21.0 → pytelegrambotapi-4.23.0}/README.md

@@ -10,7 +10,7 @@
 <p align="center">A simple, but extensible Python implementation for the <a href="https://core.telegram.org/bots/api">Telegram Bot API</a>.</p>
 <p align="center">Both synchronous and asynchronous.</p>
 
-## <p align="center">Supported Bot API version: <a href="https://core.telegram.org/bots/api#july-7-2024">7.6</a>!
+## <p align="center">Supported Bot API version: <a href="https://core.telegram.org/bots/api#september-6-2024"><img src="https://img.shields.io/badge/Bot%20API-7.10-blue?logo=telegram" alt="Supported Bot API version"></a>
 
 <h2><a href='https://pytba.readthedocs.io/en/latest/index.html'>Official documentation</a></h2>
 <h2><a href='https://pytba.readthedocs.io/ru/latest/index.html'>Official ru documentation</a></h2>

{pytelegrambotapi-4.21.0 → pytelegrambotapi-4.23.0}/docs/source/conf.py

@@ -22,7 +22,7 @@ author = 'coder2020official'
 copyright = f'2022-{datetime.now().year}, {author}'
 
 # The full version, including alpha/beta/rc tags
-release = '4.21.0'
+release = '4.23.0'
 
 
 # -- General configuration ---------------------------------------------------

pytelegrambotapi-4.23.0/examples/asynchronous_telebot/custom_states.py

@@ -0,0 +1,154 @@
+from telebot import async_telebot, asyncio_filters, types
+from telebot.asyncio_storage import StateMemoryStorage
+from telebot.states import State, StatesGroup
+from telebot.states.asyncio.context import StateContext
+
+# Initialize the bot
+state_storage = StateMemoryStorage()  # don't use this in production; switch to redis
+bot = async_telebot.AsyncTeleBot("TOKEN", state_storage=state_storage)
+
+
+# Define states
+class MyStates(StatesGroup):
+    name = State()
+    age = State()
+    color = State()
+    hobby = State()
+
+
+# Start command handler
+@bot.message_handler(commands=["start"])
+async def start_ex(message: types.Message, state: StateContext):
+    await state.set(MyStates.name)
+    await bot.send_message(
+        message.chat.id,
+        "Hello! What is your first name?",
+        reply_to_message_id=message.message_id,
+    )
+
+
+# Cancel command handler
+@bot.message_handler(state="*", commands=["cancel"])
+async def any_state(message: types.Message, state: StateContext):
+    await state.delete()
+    await bot.send_message(
+        message.chat.id,
+        "Your information has been cleared. Type /start to begin again.",
+        reply_to_message_id=message.message_id,
+    )
+
+
+# Handler for name input
+@bot.message_handler(state=MyStates.name)
+async def name_get(message: types.Message, state: StateContext):
+    await state.set(MyStates.age)
+    await bot.send_message(
+        message.chat.id, "How old are you?", reply_to_message_id=message.message_id
+    )
+    await state.add_data(name=message.text)
+
+
+# Handler for age input
+@bot.message_handler(state=MyStates.age, is_digit=True)
+async def ask_color(message: types.Message, state: StateContext):
+    await state.set(MyStates.color)
+    await state.add_data(age=message.text)
+
+    # Define reply keyboard for color selection
+    keyboard = types.ReplyKeyboardMarkup(row_width=2)
+    colors = ["Red", "Green", "Blue", "Yellow", "Purple", "Orange", "Other"]
+    buttons = [types.KeyboardButton(color) for color in colors]
+    keyboard.add(*buttons)
+
+    await bot.send_message(
+        message.chat.id,
+        "What is your favorite color? Choose from the options below.",
+        reply_markup=keyboard,
+        reply_to_message_id=message.message_id,
+    )
+
+
+# Handler for color input
+@bot.message_handler(state=MyStates.color)
+async def ask_hobby(message: types.Message, state: StateContext):
+    await state.set(MyStates.hobby)
+    await state.add_data(color=message.text)
+
+    # Define reply keyboard for hobby selection
+    keyboard = types.ReplyKeyboardMarkup(row_width=2)
+    hobbies = ["Reading", "Traveling", "Gaming", "Cooking"]
+    buttons = [types.KeyboardButton(hobby) for hobby in hobbies]
+    keyboard.add(*buttons)
+
+    await bot.send_message(
+        message.chat.id,
+        "What is one of your hobbies? Choose from the options below.",
+        reply_markup=keyboard,
+        reply_to_message_id=message.message_id,
+    )
+
+
+# Handler for hobby input; use filters to ease validation
+@bot.message_handler(
+    state=MyStates.hobby, text=["Reading", "Traveling", "Gaming", "Cooking"]
+)
+async def finish(message: types.Message, state: StateContext):
+    async with state.data() as data:
+        name = data.get("name")
+        age = data.get("age")
+        color = data.get("color")
+        hobby = message.text  # Get the hobby from the message text
+
+        # Provide a fun fact based on color
+        color_facts = {
+            "Red": "Red is often associated with excitement and passion.",
+            "Green": "Green is the color of nature and tranquility.",
+            "Blue": "Blue is known for its calming and serene effects.",
+            "Yellow": "Yellow is a cheerful color often associated with happiness.",
+            "Purple": "Purple signifies royalty and luxury.",
+            "Orange": "Orange is a vibrant color that stimulates enthusiasm.",
+            "Other": "Colors have various meanings depending on context.",
+        }
+        color_fact = color_facts.get(
+            color, "Colors have diverse meanings, and yours is unique!"
+        )
+
+        msg = (
+            f"Thank you for sharing! Here is a summary of your information:\n"
+            f"First Name: {name}\n"
+            f"Age: {age}\n"
+            f"Favorite Color: {color}\n"
+            f"Fun Fact about your color: {color_fact}\n"
+            f"Favorite Hobby: {hobby}"
+        )
+
+    await bot.send_message(
+        message.chat.id, msg, parse_mode="html", reply_to_message_id=message.message_id
+    )
+    await state.delete()
+
+
+# Handler for incorrect age input
+@bot.message_handler(state=MyStates.age, is_digit=False)
+async def age_incorrect(message: types.Message):
+    await bot.send_message(
+        message.chat.id,
+        "Please enter a valid number for age.",
+        reply_to_message_id=message.message_id,
+    )
+
+
+# Add custom filters
+bot.add_custom_filter(asyncio_filters.StateFilter(bot))
+bot.add_custom_filter(asyncio_filters.IsDigitFilter())
+bot.add_custom_filter(asyncio_filters.TextMatchFilter())
+
+# necessary for state parameter in handlers.
+from telebot.states.asyncio.middleware import StateMiddleware
+
+bot.setup_middleware(StateMiddleware(bot))
+
+# Start polling
+import asyncio
+
+asyncio.run(bot.polling())

pytelegrambotapi-4.23.0/examples/asynchronous_telebot/mini_app.py

@@ -0,0 +1,33 @@
+# The source of the "https://pytelegrambotminiapp.vercel.app" can be found in https://github.com/eternnoir/pyTelegramBotAPI/tree/master/examples/mini_app_web
+
+import asyncio
+from telebot.async_telebot import AsyncTeleBot 
+from telebot.types import (
+    ReplyKeyboardMarkup, 
+    KeyboardButton, 
+    WebAppInfo,
+    InlineKeyboardMarkup,
+    InlineKeyboardButton
+)
+
+BOT_TOKEN = "" 
+WEB_URL = "https://pytelegrambotminiapp.vercel.app"
+
+bot = AsyncTeleBot(BOT_TOKEN)
+
+@bot.message_handler(commands=["start"])
+async def start(message):
+    reply_keyboard_markup = ReplyKeyboardMarkup(resize_keyboard=True)
+    reply_keyboard_markup.row(KeyboardButton("Start MiniApp", web_app=WebAppInfo(WEB_URL)))
+
+    inline_keyboard_markup = InlineKeyboardMarkup()
+    inline_keyboard_markup.row(InlineKeyboardButton('Start MiniApp', web_app=WebAppInfo(WEB_URL)))
+
+    await bot.reply_to(message, "Click the bottom inline button to start MiniApp", reply_markup=inline_keyboard_markup)
+    await bot.reply_to(message, "Click keyboard button to start MiniApp", reply_markup=reply_keyboard_markup)
+
+@bot.message_handler(content_types=['web_app_data'])
+async def web_app(message):
+    await bot.reply_to(message, f'Your message is "{message.web_app_data.data}"')
+
+asyncio.run(bot.polling())

pytelegrambotapi-4.23.0/examples/custom_states.py

@@ -0,0 +1,153 @@
+import telebot
+from telebot import custom_filters, types
+from telebot.states import State, StatesGroup
+from telebot.states.sync.context import StateContext
+from telebot.storage import StateMemoryStorage
+
+# Initialize the bot
+state_storage = StateMemoryStorage()  # don't use this in production; switch to redis
+bot = telebot.TeleBot("TOKEN", state_storage=state_storage, use_class_middlewares=True)
+
+
+# Define states
+class MyStates(StatesGroup):
+    name = State()
+    age = State()
+    color = State()
+    hobby = State()
+
+
+# Start command handler
+@bot.message_handler(commands=["start"])
+def start_ex(message: types.Message, state: StateContext):
+    state.set(MyStates.name)
+    bot.send_message(
+        message.chat.id,
+        "Hello! What is your first name?",
+        reply_to_message_id=message.message_id,
+    )
+
+
+# Cancel command handler
+@bot.message_handler(state="*", commands=["cancel"])
+def any_state(message: types.Message, state: StateContext):
+    state.delete()
+    bot.send_message(
+        message.chat.id,
+        "Your information has been cleared. Type /start to begin again.",
+        reply_to_message_id=message.message_id,
+    )
+
+
+# Handler for name input
+@bot.message_handler(state=MyStates.name)
+def name_get(message: types.Message, state: StateContext):
+    state.set(MyStates.age)
+    bot.send_message(
+        message.chat.id, "How old are you?", reply_to_message_id=message.message_id
+    )
+    state.add_data(name=message.text)
+
+
+# Handler for age input
+@bot.message_handler(state=MyStates.age, is_digit=True)
+def ask_color(message: types.Message, state: StateContext):
+    state.set(MyStates.color)
+    state.add_data(age=message.text)
+
+    # Define reply keyboard for color selection
+    keyboard = types.ReplyKeyboardMarkup(row_width=2)
+    colors = ["Red", "Green", "Blue", "Yellow", "Purple", "Orange", "Other"]
+    buttons = [types.KeyboardButton(color) for color in colors]
+    keyboard.add(*buttons)
+
+    bot.send_message(
+        message.chat.id,
+        "What is your favorite color? Choose from the options below.",
+        reply_markup=keyboard,
+        reply_to_message_id=message.message_id,
+    )
+
+
+# Handler for color input
+@bot.message_handler(state=MyStates.color)
+def ask_hobby(message: types.Message, state: StateContext):
+    state.set(MyStates.hobby)
+    state.add_data(color=message.text)
+
+    # Define reply keyboard for hobby selection
+    keyboard = types.ReplyKeyboardMarkup(row_width=2)
+    hobbies = ["Reading", "Traveling", "Gaming", "Cooking"]
+    buttons = [types.KeyboardButton(hobby) for hobby in hobbies]
+    keyboard.add(*buttons)
+
+    bot.send_message(
+        message.chat.id,
+        "What is one of your hobbies? Choose from the options below.",
+        reply_markup=keyboard,
+        reply_to_message_id=message.message_id,
+    )
+
+
+# Handler for hobby input
+@bot.message_handler(
+    state=MyStates.hobby, text=["Reading", "Traveling", "Gaming", "Cooking"]
+)
+def finish(message: types.Message, state: StateContext):
+    with state.data() as data:
+        name = data.get("name")
+        age = data.get("age")
+        color = data.get("color")
+        hobby = message.text  # Get the hobby from the message text
+
+        # Provide a fun fact based on color
+        color_facts = {
+            "Red": "Red is often associated with excitement and passion.",
+            "Green": "Green is the color of nature and tranquility.",
+            "Blue": "Blue is known for its calming and serene effects.",
+            "Yellow": "Yellow is a cheerful color often associated with happiness.",
+            "Purple": "Purple signifies royalty and luxury.",
+            "Orange": "Orange is a vibrant color that stimulates enthusiasm.",
+            "Other": "Colors have various meanings depending on context.",
+        }
+        color_fact = color_facts.get(
+            color, "Colors have diverse meanings, and yours is unique!"
+        )
+
+        msg = (
+            f"Thank you for sharing! Here is a summary of your information:\n"
+            f"First Name: {name}\n"
+            f"Age: {age}\n"
+            f"Favorite Color: {color}\n"
+            f"Fun Fact about your color: {color_fact}\n"
+            f"Favorite Hobby: {hobby}"
+        )
+
+    bot.send_message(
+        message.chat.id, msg, parse_mode="html", reply_to_message_id=message.message_id
+    )
+    state.delete()
+
+
+# Handler for incorrect age input
+@bot.message_handler(state=MyStates.age, is_digit=False)
+def age_incorrect(message: types.Message):
+    bot.send_message(
+        message.chat.id,
+        "Please enter a valid number for age.",
+        reply_to_message_id=message.message_id,
+    )
+
+
+# Add custom filters
+bot.add_custom_filter(custom_filters.StateFilter(bot))
+bot.add_custom_filter(custom_filters.IsDigitFilter())
+bot.add_custom_filter(custom_filters.TextMatchFilter())
+
+# necessary for state parameter in handlers.
+from telebot.states.sync.middleware import StateMiddleware
+
+bot.setup_middleware(StateMiddleware(bot))
+
+# Start polling
+bot.infinity_polling()

pytelegrambotapi-4.23.0/examples/mini_app.py

@@ -0,0 +1,32 @@
+# The source of the "https://pytelegrambotminiapp.vercel.app" can be found in https://github.com/eternnoir/pyTelegramBotAPI/tree/master/examples/mini_app_web
+
+from telebot import TeleBot
+from telebot.types import (
+    ReplyKeyboardMarkup, 
+    KeyboardButton, 
+    WebAppInfo,
+    InlineKeyboardMarkup,
+    InlineKeyboardButton
+)
+
+BOT_TOKEN = "" 
+WEB_URL = "https://pytelegrambotminiapp.vercel.app" 
+
+bot = TeleBot(BOT_TOKEN)
+
+@bot.message_handler(commands=["start"])
+def start(message):
+    reply_keyboard_markup = ReplyKeyboardMarkup(resize_keyboard=True)
+    reply_keyboard_markup.row(KeyboardButton("Start MiniApp", web_app=WebAppInfo(WEB_URL)))
+
+    inline_keyboard_markup = InlineKeyboardMarkup()
+    inline_keyboard_markup.row(InlineKeyboardButton('Start MiniApp', web_app=WebAppInfo(WEB_URL)))
+
+    bot.reply_to(message, "Click the bottom inline button to start MiniApp", reply_markup=inline_keyboard_markup)
+    bot.reply_to(message, "Click keyboard button to start MiniApp", reply_markup=reply_keyboard_markup)
+
+@bot.message_handler(content_types=['web_app_data'])
+def web_app(message):
+    bot.reply_to(message, f'Your message is "{message.web_app_data.data}"')
+
+bot.infinity_polling()

pytelegrambotapi-4.23.0/examples/mini_app_web/index.html

@@ -0,0 +1,163 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+<script src="https://telegram.org/js/telegram-web-app.js"></script>
+    <title>PyTelegramBotApi MiniApp</title>
+    <link href="style.css" rel="stylesheet">
+  </head>
+  <body class='body'>
+    <div class='content-block content-block_send-message send-message'>
+      <input class="send-message__input" type="text" placeholder="type your message here">
+      <button class="send-message__button" id="send-message-button"> send the message </button>
+    </div> 
+
+    <p class="header-text"> client buttons </p>
+    <div class="content-block content-block_client-btn client">
+      <button class="default-button default-button_disable" id='back-button' value="disable"> back </button>     
+      <button class="default-button" id='main-button' value="enable"> main </button>     
+      <button class="default-button default-button_disable" id='settings-button' value="disable"> settings </button>     
+    </div>
+    <p class="header-text"> hapticFeedback (notification) </p>
+    <div class="content-block content-block_haptic-feedback haptic_feedback">
+      <button class="default-button" id='success-button'> success </button>     
+      <button class="default-button default-button_yellow" id='warning-button'> warning </button>     
+      <button class="default-button default-button_red" id='error-button'> error </button>     
+    </div>
+
+    <p class="header-text"> tweak color [Bot API 6.1+]</p>
+    <div class="content-block content-block_tweak-color tweak-color">
+      <div class="tweak-color__header">
+        <p class="tweak-color__text">Header color: </p> 
+        <div class="tweak-color__circle-block">
+          <div class="tweak-color__circle tweak-color__circle_yellow" id="header-yellow"> </div> 
+          <div class="tweak-color__circle tweak-color__circle_button" id="header-button_color"> </div> 
+          <div class="tweak-color__circle tweak-color__circle_red" id="header-red"> </div> 
+          <div class="tweak-color__circle tweak-color__circle_header" id="header-default"> </div> 
+        </div>
+      </div>
+      <div class="tweak-color__background">
+        <p class="tweak-color__text">Background color: </p> 
+        <div class="tweak-color__circle-block">
+          <div class="tweak-color__circle tweak-color__circle_yellow" id="background-yellow"> </div> 
+          <div class="tweak-color__circle tweak-color__circle_button" id="background-button_color"> </div> 
+          <div class="tweak-color__circle tweak-color__circle_red" id="background-red"> </div> 
+          <div class="tweak-color__circle tweak-color__circle_background" id="background-default"> </div> 
+        </div>
+      </div>
+    </div>
+
+    <p class="header-text"> popup and alert [Bot API 6.2+] </p>
+    <div class="content-block content-block_popup-alert popup-alert">
+      <button class="default-button" id="popup-button"> popup </button>     
+      <button class="default-button" id="alert-button"> alert </button>     
+      <button class="default-button" id="confirm-button"> confirm </button>     
+    </div>
+
+    <p class="header-text"> request [Bot API 6.9+]</p>
+    <div class="content-block content-block_request block_request">
+      <button class="default-button" id="contact-button"> contact </button>     
+      <button class="default-button" id="write-access-button"> write access </button>     
+      <button class="default-button" id="biometrics-button"> biometrics </button>     
+    </div>
+
+    <p class="header-text"> story [Bot API 7.8+]</p>
+    <div class="content-block content-block_story story">
+      <button class="default-button" id="post-story-photo-button"> story (photo) </button>     
+      <button class="default-button" id="post-story-video-button"> story (video) </button>     
+      <button class="default-button" id="post-story-with-link-button">  story + link</button>     
+    </div>
+
+    <p class="header-text"> cloud storage [Bot API 6.9+] </p>
+    <div class="content-block content-block_cloud-storage cloud-storage">
+      <div class="cloud-storage__input-block">
+        <input class="cloud-storage__input cloud-storage__input_add-key" type="text" name="" value=""  placeholder="key">
+        <input class="cloud-storage__input cloud-storage__input_add-value" type="text" name="" value="" placeholder="value">
+      </div>
+      <button class="cloud-storage__button cloud-storage__button_add" id="cloud-add-button"> add to cloud storage </button>
+      <table class="cloud-storage__table" id="cloud-storage-table">
+        <tr>
+          <th id="cloud-storage-key"> key </th>
+          <th id="cloud-storage-value"> value </th>
+        </tr> 
+        <tr id="null-storage-row">
+          <td> - </td>
+          <td> - </td>
+        </tr> 
+      </table>
+      <div class="cloud-storage__input-block cloud-storage__input-block_remove">
+        <input class="cloud-storage__input cloud-storage__input_remove" type="text" value="" placeholder="key">
+        <button class="cloud-storage__button cloud-storage__button_remove" id='cloud-remove-button'> remove from cloud storage </button>
+      </div>
+    </div>
+    <p class="header-text"> data from telegram </p>
+    <div class="content-block content-block_data">
+      <div class="data__content" id="initDataUnsafe-block">
+        <p class="content-block__text"> initDataUnsafe </p>
+      </div>
+      <div class="data__content" id="themeParams-block">
+        <p class="content-block__text"> ThemeParams </p>
+      </div>
+      <div class="data__content" id="biometrics-block">
+        <p class="content-block__text"> Biometrics Manager</p>
+        <table class="biometrics__table" id="biometrics-table">
+          <tr id="null-biometrics-row">
+            <td>support</td>
+            <td>Unsupported in this platform</td>
+          </tr>
+        </table>
+      </div>
+    </div>
+
+    <p class="header-text"> event from telegram </p>
+    <div class="content-block content-block_event event">
+      <div class="event__content" id="event-block">
+       </div> 
+    </div>
+
+    <p class="header-text"> vertical scroll behaviour [Bot API 7.7+] </p>
+    <div class="content-block content-block_scroll-behaviour scroll-behaviour">
+      <p class="content-block__text"> close the miniapp when scroll vertically </p>
+      <div class="scroll-behaviour__toggle-box">
+        <button class="default-button" id="enable-scroll-button" value="enable"> Enable </button>
+        <button class="default-button default-button_disable" id="disable-scroll-button" value="disable"> Disable </button>
+      </div>
+    </div>
+
+    <p class="header-text"> closing confirmation [Bot API 6.2+]</p>
+    <div class="content-block content-block_close-confirmation close-confirmation">
+      <p class="content-block__text"> Confimation dialog when closing miniapp </p>
+      <div class="content-block__toggle-box">
+        <button class="default-button default-button_disable" id="enable-close-confirm-button" value="disable"> Enable </button>
+        <button class="default-button" id="disable-close-confirm-button" value="enable"> Disable </button>
+      </div>
+    </div>
+
+    <p class="header-text"> links </p>
+    <div class="content-block content-block_link link">
+      <ul class="link__list">
+        <li>
+          <p class="link__text"> <a class="link__text link__text_blue" id="telegram-link" href="javascript:telegram.openTelegramLink(https://t.me/joinchat/Bn4ixj84FIZVkwhk2jag6A)"> pyTelegramBotApi </a> - opens telegram link in telegram </p>
+        </li>
+        <li>
+          <p class="link__text"> <a class="link__text link__text_blue" id="internal-link" href="javascript:telegram.openLink(https://telegram.org)"> Telegram </a> - opens link inside telegram in browser. </p>
+        </li>
+      </ul>
+    </div>
+    
+    <p class="header-text"> other </p>
+    <div class="content-block content-block_other other">
+      <button class="default-button" id="show-QR-button"> show QR </button>     
+      <button class="default-button" id="expand-button">  expand </button>     
+      <button class="default-button default-button_red" id="close-button"> close </button>     
+    </div>
+
+    <div class="description-block">
+      <pre class="description__text" id="version-text"> version: </pre>
+      <pre class="description__text" id="platform-text"> platform: </pre>
+      <pre class="description__text" id="color-scheme-text"> color scheme: </pre>
+    </div>
+  </body>
+  <script src="script.js"></script>
+</html>