<template>
  <div
    class="q-pa-md flex items-center justify-center"
    style="height: 100vh"
    >
    <mesh-background/>
    <q-card
      class="q-py-md q-px-xl flex column q-gutter-y-lg justify-center items-center"
      style="opacity: 0.8"
      >
      <base-logo class="text-h6"/>
      <span class="text-h6 text-center">
        {{$t('only_telegram__continue')}}
      </span>
      <q-btn
        @click="openWebsite"
        color="primary"
        rounded
        class="q-mb-lg"
        >
        <div class="flex items-center">
          <q-icon name="telegram"/>
          Telegram
        </div>
      </q-btn>
    </q-card>
  </div>
</template>

<script setup lang="ts">
  import baseLogo from 'components/BaseLogo.vue'
  import { BOT_NAME } from 'utils/constants'

  function openWebsite () {
    window.open('https://t.me/'+ BOT_NAME)
  }
</script>
