Heroku/web-resources/root.jinja2

<!--
  ©️ Dan Gazizullin, 2021-2022
  This file is a part of Hikka Userbot
  🌐 https://github.com/hikariatama/Hikka
  You can redistribute it and/or modify it under the terms of the GNU AGPLv3
  🔑 https://www.gnu.org/licenses/agpl-3.0.html
-->

{% extends "base.jinja2" %}

{% block head %}
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bodymovin/5.8.1/lottie.min.js"></script>
<script src="//unpkg.com/qr-code-styling@1.5.0/lib/qr-code-styling.js"></script>

<link href="//cdn.jsdelivr.net/npm/css.gg/icons/all.css" rel="stylesheet">

<link rel="stylesheet" href="{{ static("base.css") }}">
{% endblock %}

{% block content %}
{% endblock %}

{% block after %}
<div class="bg">
  <div class="bg_inner"></div>
</div>
<div class="blur auth vert_center">
  <div id="tg_icon"></div>
  <div class="waiting_for_auth">Waiting for permission...</div>
  <div class="confirm_auth">Please, confirm action in <span style="color:#28a0dc">Telegram</span></div>
</div>
<div class="auth-code-form blur">
  <div id="monkey"></div>
  <div id="monkey-close"></div>
  <span class="code-caption">Enter the code you recieved from Telegram</span>
  <input type="text" class="code-input" autocomplete="off">
  <div class="enter">Enter</div>
</div>
<div class="wrapper">
  <div class="blur main finish_block">
    <div id="installation_icon"></div>
    <div class="title">Hikka is installed</div>
    <div class="description">
      Hikka is ready to use. You can close this page now.
      <br>
      <span style="font-size: 24px;">Check <span style="color:#28a0dc">Telegram</span> for a message from your <b>inline
          bot</b></span>
    </div>
  </div>
  <div class="blur main installation">
    <div class="title">Hikka</div>
    <div class="description"><span style="color:#28a0dc">Awesomeness</span> is in your hands<br><span
        style="color: #18cc18; display: none" class="authorized">Authorized!</span></div>
    <div class="center">
      {% if not tg_done %}
      <div class="button" id="get_started">
        <div class="horiz_center">
          <div class="vert_center">
            Get started
          </div>

          <div class="vert_center">
            <i class="gg-arrow-right-r"></i>
          </div>
        </div>
      </div>
      {% elif not lavhost %}
      <div class="button" id="get_started">
        <div class="horiz_center">
          <div class="vert_center">
            Add phone
          </div>

          <div class="vert_center">
            <i class="gg-add"></i>
          </div>
        </div>
      </div>
      {% endif %}
      {% if skip_creds and not lavhost %}
      <div class="button" id="enter_api">
        <div class="horiz_center">
          <div class="vert_center">
            Change API Creds
          </div>

          <div class="vert_center">
            <i class="gg-brackets"></i>
          </div>
        </div>
      </div>
      {% endif %}
      <span id="block_api_id">
        <label class="api_id" for="api_id">Telegram API ID: </label>
        <input class="api_id" id="api_id" placeholder="••••" style="width: 4em;">
      </span>
      <span id="block_api_hash">
        <label class="api_hash" for="api_hash">Telegram API hash: </label>
        <input class="api_hash" id="api_hash" placeholder="••••••••••••••••••••••••••••••••" style="width: 24em;">
      </span>
      <span id="block_phone">
        <label class="phone" for="phone">Phone: </label>
        <input class="phone" id="phone" placeholder="••••••••••••" style="width: 12em;">
      </span>
      <span id="block_2fa">
        <label class="_2fa" for="_2fa">2FA Password: </label>
        <input class="_2fa" id="_2fa" placeholder="password" style="width: 12em;" type="password">
      </span>
      <span id="block_custom_bot">
        <label class="custom_bot" for="custom_bot">Inline bot username (E.g. @username_bot): </label>
        <input class="custom_bot" id="custom_bot" placeholder="Leave empty to generate automatically"
          style="width: 20em;" type="text">
      </span>
      <span id="block_qr_login">
        <div class="qr_outer">
          <div class="qr_inner"></div>
        </div>
        <div class="tg_guide">
          <ol>
            <li>
              <span>Open Telegram on your phone</span>
            </li>
            <li>
              <span>Go to <b>Settings</b> → <b>Devices</b> → <b>Link Desktop Device</b></span>
            </li>
            <li>
              <span>Point your phone at this screen to confirm login</span>
            </li>
          </ol>
        </div>
      </span>
    </div>

    <div class="horiz_center">
      <div id="continue_btn" class="button">
        <div class="horiz_center">
          <div class="vert_center">
            Continue
          </div>

          <div class="vert_center">
            <i class="gg-chevron-right-o"></i>
          </div>
        </div>
      </div>
      <div id="denyqr" class="button">
        <div class="horiz_center">
          <div class="vert_center">
            Auth using phone instead
          </div>

          <div class="vert_center">
            <i class="gg-smartphone"></i>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div id="root">

  </div>
</div>
<div class="lights">
  <div class="light x1"></div>
  <div class="light x2"></div>
  <div class="light x3"></div>
  <div class="light x4"></div>
  <div class="light x5"></div>
  <div class="light x6"></div>
  <div class="light x7"></div>
  <div class="light x8"></div>
  <div class="light x9"></div>
</div>
<script>
  var skip_creds = "{{ skip_creds }}" == "True";
  var auth_required = true;
  fetch("/check_session", {
      method: "POST",
      credentials: "include"
    })
    .then(response => response.text())
    .then((response) => {
      auth_required = response != "1";
    })
</script>
<script src="{{ static("root.js") }}"></script>
{% endblock %}