{% extends "public.html" %} {% block scripts %}
<style>
  :root {
    --size: 100px;
    --gap: 25px;
  }

  .btn-fixed-width {
    /* width: 45%; */
  }

  .wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    margin: auto;
    max-width: 100%;
  }

  .marquee {
    display: flex;
    overflow: hidden;
    user-select: none;
    gap: var(--gap);
    height: max-content;
    mask-image: linear-gradient(
      to right,
      hsl(0 0% 0% / 0),
      hsl(0 0% 0% / 1) 20%,
      hsl(0 0% 0% / 1) 80%,
      hsl(0 0% 0% / 0)
    );
  }

  .marquee__group {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: var(--gap);
    min-width: 100%;
    animation: scroll-x 60s linear infinite;
  }

  .marquee:hover .marquee__group {
    animation-play-state: paused;
  }

  .marquee__group div {
    width: var(--size);
  }

  @keyframes scroll-x {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(calc(-100% - var(--gap)));
    }
  }
</style>
<script src="{{ static_url_for('static', 'js/index.js') }}"></script>
{% endblock %} {% block page_container %}
<q-page-container>
  <q-page
    class="q-px-md q-py-lg content-center"
    :class="{'q-px-lg': $q.screen.gt.xs}"
  >
    {% block page %}
    <div
      class="row justify-center items-center"
      style="min-height: calc(100vh / 1.618)"
    >
      <div
        class="full-width"
        :style="`max-width: ${'{{ LNBITS_CUSTOM_IMAGE }}' ? '850' : '600'}px`"
      >
        <div class="row q-mb-md">
          <div class="col-12">
            <div>
              <h5
                class="q-my-none"
                v-if="'{{LNBITS_SHOW_HOME_PAGE_ELEMENTS}}' == 'True'"
              >
                {{SITE_TITLE}}
              </h5>
              <template v-if="$q.screen.gt.sm">
                <h6
                  class="q-my-sm"
                  v-if="'{{LNBITS_SHOW_HOME_PAGE_ELEMENTS}}' == 'True'"
                >
                  {{SITE_TAGLINE}}
                </h6>
                <p
                  class="q-my-sm"
                  v-if="'{{LNBITS_SHOW_HOME_PAGE_ELEMENTS}}' == 'True'"
                  v-html="formatDescription"
                ></p>
              </template>
              <!-- <div
            class="gt-sm"
            v-html="formatDescription"
            v-if="'{{LNBITS_SHOW_HOME_PAGE_ELEMENTS}}' == 'True'"
          ></div> -->
            </div>
          </div>
        </div>

        <div class="row">
          <q-badge
            v-if="isAccessTokenExpired"
            class="q-mx-auto q-mb-md"
            color="primary"
            rounded
          >
            <div class="text-h6">
              <span v-text="$t('session_has_expired')"></span>
            </div>
          </q-badge>
          <q-card bordered class="full-width q-py-md">
            <div class="row">
              <div
                class="col-12"
                :class="{'col-sm-7' : '{{ LNBITS_CUSTOM_IMAGE }}', 'col-lg-6' : '{{ LNBITS_CUSTOM_IMAGE }}'}"
              >
                {% if lnurl and LNBITS_NEW_ACCOUNTS_ALLOWED and ("user-id-only"
                in LNBITS_AUTH_METHODS)%}
                <div class="full-height content-center">
                  <q-card-section>
                    <div class="text-body1">
                      <span v-text="$t('claim_desc')"></span>
                    </div>
                  </q-card-section>
                  <q-card-section>
                    <q-btn
                      unelevated
                      color="primary"
                      @click="processing"
                      type="a"
                      href="/lnurlwallet?lightning={{ lnurl }}"
                      v-text="$t('press_to_claim')"
                      class="full-width"
                    ></q-btn>
                  </q-card-section>
                </div>
                {%else%}
                <username-password
                  v-if="authMethod != 'user-id-only'"
                  :allowed_new_users="allowedRegister"
                  :auth-methods="LNBITS_AUTH_METHODS"
                  :auth-action="authAction"
                  v-model:user-name="username"
                  v-model:password_1="password"
                  v-model:password_2="passwordRepeat"
                  v-model:reset-key="reset_key"
                  @login="login"
                  @register="register"
                  @reset="reset"
                >
                  <div
                    class="text-center text-grey-6"
                    v-if="authAction !== 'reset'"
                  >
                    <p
                      v-if="authAction === 'login' && allowedRegister"
                      class="q-mb-none"
                    >
                      Not registered?
                      <a
                        href="#"
                        class="text-secondary cursor-pointer"
                        @click.prevent="showRegister('username-password')"
                        >Create an Account</a
                      >
                    </p>
                    <p
                      v-else-if="authAction === 'login' && !allowedRegister"
                      class="q-mb-none"
                    >
                      <span v-text="$t('new_user_not_allowed')"></span>
                    </p>
                    <p v-else-if="authAction === 'register'" class="q-mb-none">
                      <span v-text="$t('existing_account_question')"></span>

                      <a
                        href="#"
                        class="text-secondary cursor-pointer q-ml-sm"
                        @click.prevent="showLogin('username-password')"
                        v-text="$t('login')"
                      ></a>
                    </p>
                  </div>
                </username-password>
                {% if "user-id-only" in LNBITS_AUTH_METHODS %}
                <user-id-only
                  :allowed_new_users="allowedRegister"
                  v-model:usr="usr"
                  v-model:wallet="walletName"
                  :auth-action="authAction"
                  :auth-method="authMethod"
                  @show-login="showLogin"
                  @show-register="showRegister"
                  @login-usr="loginUsr"
                  @create-wallet="createWallet"
                >
                </user-id-only>
                {%endif%} {% endif %}
              </div>
              <div
                class="col-sm-5 col-lg-6 gt-xs"
                v-if="'{{ LNBITS_CUSTOM_IMAGE }}'"
              >
                <div class="full-height flex flex-center q-pa-lg">
                  <q-img
                    :src="'{{ LNBITS_CUSTOM_IMAGE }}'"
                    :ratio="1"
                    width="250px"
                  ></q-img>
                </div>
              </div>
            </div>
          </q-card>
        </div>
      </div>
      <div
        v-if="'{{ LNBITS_DENOMINATION }}' == 'sats' && '{{ SITE_TITLE }}' == 'LNbits' && '{{ LNBITS_SHOW_HOME_PAGE_ELEMENTS }}' == 'True'"
        class="full-width q-mb-lg q-mt-sm"
      >
        <div class="flex flex-center q-gutter-md q-py-md">
          <q-btn
            outline
            color="grey"
            type="a"
            href="https://github.com/lnbits/lnbits"
            target="_blank"
            rel="noopener noreferrer"
            :label="$t('view_github')"
            class=""
          ></q-btn>
          <q-btn
            outline
            color="grey"
            type="a"
            href="https://demo.lnbits.com/lnurlp/link/fH59GD"
            target="_blank"
            rel="noopener noreferrer"
            :label="$t('donate')"
            class=""
          ></q-btn>
        </div>
      </div>
      {% if AD_SPACE_ENABLED and AD_SPACE %}
      <div class="q-pt-md full-width">
        <div class="row justify-center q-mb-xl">
          <div class="full-width text-center">
            <span class="text-uppercase text-grey">{{ AD_SPACE_TITLE }}</span>
          </div>
          <div class="flex flex-center columm">
            {% for ADS in AD_SPACE %} {% set AD = ADS.split(';') %}
            <div class="flex flex-center column q-pr-sm">
              <a href="{{ AD[0] }}">
                <img
                  v-if="($q.dark.isActive)"
                  src="{{ AD[1] }}"
                  style="max-width: 420px"
                  class="full-width"
                />
                <img
                  v-else
                  src="{{ AD[2] }}"
                  style="max-width: 420px"
                  class="full-width"
                />
              </a>
            </div>

            {% endfor %}
          </div>
        </div>
      </div>
      {% endif %}
      <div
        v-if="'{{ LNBITS_DENOMINATION }}' == 'sats' && '{{ SITE_TITLE }}' == 'LNbits' && '{{ LNBITS_SHOW_HOME_PAGE_ELEMENTS }}' == 'True'"
        class="full-width"
      >
        <div class="wrapper">
          <div class="marquee">
            <div class="marquee__group">
              <div>
                <a
                  href="https://github.com/ElementsProject/lightning"
                  target="_blank"
                  rel="noopener noreferrer"
                >
                  <q-img
                    contain
                    :src="($q.dark.isActive) ? '{{ static_url_for('static', 'images/cln.png') }}' : '{{ static_url_for('static', 'images/clnl.png') }}'"
                  ></q-img>
                </a>
              </div>
              <div>
                <a
                  href="https://github.com/lightningnetwork/lnd"
                  target="_blank"
                  rel="noopener noreferrer"
                >
                  <q-img
                    contain
                    :src="($q.dark.isActive) ? '{{ static_url_for('static', 'images/lnd.png') }}' : '{{ static_url_for('static', 'images/lnd.png') }}'"
                  ></q-img>
                </a>
              </div>
              <div>
                <a
                  href="https://opennode.com"
                  target="_blank"
                  rel="noopener noreferrer"
                >
                  <q-img
                    contain
                    :src="($q.dark.isActive) ? '{{ static_url_for('static', 'images/opennode.png') }}' : '{{ static_url_for('static', 'images/opennodel.png') }}'"
                  ></q-img>
                </a>
              </div>
              <div>
                <a
                  href="https://lnpay.co/"
                  target="_blank"
                  rel="noopener noreferrer"
                >
                  <q-img
                    contain
                    :src="($q.dark.isActive) ? '{{ static_url_for('static', 'images/lnpay.png') }}' : '{{ static_url_for('static', 'images/lnpayl.png') }}'"
                  ></q-img>
                </a>
              </div>
              <div>
                <a
                  href="https://github.com/rootzoll/raspiblitz"
                  target="_blank"
                  rel="noopener noreferrer"
                >
                  <q-img
                    contain
                    :src="($q.dark.isActive) ? '{{ static_url_for('static', 'images/blitz.png') }}' : '{{ static_url_for('static', 'images/blitzl.png') }}'"
                  ></q-img>
                </a>
              </div>
              <div>
                <a
                  href="https://start9.com/"
                  target="_blank"
                  rel="noopener noreferrer"
                >
                  <q-img
                    contain
                    :src="($q.dark.isActive) ? '{{ static_url_for('static', 'images/start9.png') }}' : '{{ static_url_for('static', 'images/start9l.png') }}'"
                  ></q-img>
                </a>
              </div>
              <div>
                <a
                  href="https://getumbrel.com/"
                  target="_blank"
                  rel="noopener noreferrer"
                >
                  <q-img
                    contain
                    :src="($q.dark.isActive) ? '{{ static_url_for('static', 'images/umbrel.png') }}' : '{{ static_url_for('static', 'images/umbrell.png') }}'"
                  ></q-img>
                </a>
              </div>
              <div>
                <a
                  href="https://mynodebtc.com"
                  target="_blank"
                  rel="noopener noreferrer"
                >
                  <q-img
                    contain
                    :src="($q.dark.isActive) ? '{{ static_url_for('static', 'images/mynode.png') }}' : '{{ static_url_for('static', 'images/mynodel.png') }}'"
                  ></q-img>
                </a>
              </div>
              <div>
                <a
                  href="https://github.com/shesek/spark-wallet"
                  target="_blank"
                  rel="noopener noreferrer"
                >
                  <q-img
                    contain
                    :src="($q.dark.isActive) ? '{{ static_url_for('static', 'images/spark.png') }}' : '{{ static_url_for('static', 'images/sparkl.png') }}'"
                  ></q-img>
                </a>
              </div>
              <div>
                <a
                  href="https://voltage.cloud"
                  target="_blank"
                  rel="noopener noreferrer"
                >
                  <q-img
                    contain
                    :src="($q.dark.isActive) ? '{{ static_url_for('static', 'images/voltage.png') }}' : '{{ static_url_for('static', 'images/voltagel.png') }}'"
                  ></q-img>
                </a>
              </div>
              <div>
                <a
                  href="https://breez.technology/sdk/"
                  target="_blank"
                  rel="noopener noreferrer"
                >
                  <q-img
                    contain
                    :src="($q.dark.isActive) ? '{{ static_url_for('static', 'images/breez.png') }}' : '{{ static_url_for('static', 'images/breezl.png') }}'"
                  ></q-img>
                </a>
              </div>
              <div>
                <a
                  href="https://blockstream.com/lightning/greenlight/"
                  target="_blank"
                  rel="noopener noreferrer"
                >
                  <q-img
                    contain
                    :src="($q.dark.isActive) ? '{{ static_url_for('static', 'images/greenlight.png') }}' : '{{ static_url_for('static', 'images/greenlightl.png') }}'"
                  ></q-img>
                </a>
              </div>
              <div>
                <a
                  href="https://getalby.com"
                  target="_blank"
                  rel="noopener noreferrer"
                >
                  <q-img
                    contain
                    :src="($q.dark.isActive) ? '{{ static_url_for('static', 'images/alby.png') }}' : '{{ static_url_for('static', 'images/albyl.png') }}'"
                  ></q-img>
                </a>
              </div>
              <div>
                <a
                  href="https://zbd.gg"
                  target="_blank"
                  rel="noopener noreferrer"
                >
                  <q-img
                    contain
                    :src="($q.dark.isActive) ? '{{ static_url_for('static', 'images/zbd.png') }}' : '{{ static_url_for('static', 'images/zbdl.png') }}'"
                  ></q-img>
                </a>
              </div>
              <div>
                <a
                  href="https://phoenix.acinq.co/server"
                  target="_blank"
                  rel="noopener noreferrer"
                >
                  <q-img
                    contain
                    :src="($q.dark.isActive) ? '{{ static_url_for('static', 'images/phoenixd.png') }}' : '{{ static_url_for('static', 'images/phoenixdl.png') }}'"
                  ></q-img>
                </a>
              </div>
              <div>
                <a
                  href="https://boltz.exchange/"
                  target="_blank"
                  rel="noopener noreferrer"
                >
                  <q-img
                    contain
                    :src="($q.dark.isActive) ? '{{ static_url_for('static', 'images/boltz.svg') }}' : '{{ static_url_for('static', 'images/boltz.svg') }}'"
                  ></q-img>
                </a>
              </div>
              <div>
                <a
                  href="https://www.blink.sv/"
                  target="_blank"
                  rel="noopener noreferrer"
                >
                  <q-img
                    contain
                    :src="($q.dark.isActive) ? '{{ static_url_for('static', 'images/blink_logo.png') }}' : '{{ static_url_for('static', 'images/blink_logol.png') }}'"
                  ></q-img>
                </a>
              </div>
              <!-- # -->
            </div>
            <div class="marquee__group">
              <div>
                <a
                  href="https://github.com/ElementsProject/lightning"
                  target="_blank"
                  rel="noopener noreferrer"
                >
                  <q-img
                    contain
                    :src="($q.dark.isActive) ? '{{ static_url_for('static', 'images/cln.png') }}' : '{{ static_url_for('static', 'images/clnl.png') }}'"
                  ></q-img>
                </a>
              </div>
              <div>
                <a
                  href="https://github.com/lightningnetwork/lnd"
                  target="_blank"
                  rel="noopener noreferrer"
                >
                  <q-img
                    contain
                    :src="($q.dark.isActive) ? '{{ static_url_for('static', 'images/lnd.png') }}' : '{{ static_url_for('static', 'images/lnd.png') }}'"
                  ></q-img>
                </a>
              </div>
              <div>
                <a
                  href="https://opennode.com"
                  target="_blank"
                  rel="noopener noreferrer"
                >
                  <q-img
                    contain
                    :src="($q.dark.isActive) ? '{{ static_url_for('static', 'images/opennode.png') }}' : '{{ static_url_for('static', 'images/opennodel.png') }}'"
                  ></q-img>
                </a>
              </div>
              <div>
                <a
                  href="https://lnpay.co/"
                  target="_blank"
                  rel="noopener noreferrer"
                >
                  <q-img
                    contain
                    :src="($q.dark.isActive) ? '{{ static_url_for('static', 'images/lnpay.png') }}' : '{{ static_url_for('static', 'images/lnpayl.png') }}'"
                  ></q-img>
                </a>
              </div>
              <div>
                <a
                  href="https://github.com/rootzoll/raspiblitz"
                  target="_blank"
                  rel="noopener noreferrer"
                >
                  <q-img
                    contain
                    :src="($q.dark.isActive) ? '{{ static_url_for('static', 'images/blitz.png') }}' : '{{ static_url_for('static', 'images/blitzl.png') }}'"
                  ></q-img>
                </a>
              </div>
              <div>
                <a
                  href="https://start9.com/"
                  target="_blank"
                  rel="noopener noreferrer"
                >
                  <q-img
                    contain
                    :src="($q.dark.isActive) ? '{{ static_url_for('static', 'images/start9.png') }}' : '{{ static_url_for('static', 'images/start9l.png') }}'"
                  ></q-img>
                </a>
              </div>
              <div>
                <a
                  href="https://getumbrel.com/"
                  target="_blank"
                  rel="noopener noreferrer"
                >
                  <q-img
                    contain
                    :src="($q.dark.isActive) ? '{{ static_url_for('static', 'images/umbrel.png') }}' : '{{ static_url_for('static', 'images/umbrell.png') }}'"
                  ></q-img>
                </a>
              </div>
              <div>
                <a
                  href="https://mynodebtc.com"
                  target="_blank"
                  rel="noopener noreferrer"
                >
                  <q-img
                    contain
                    :src="($q.dark.isActive) ? '{{ static_url_for('static', 'images/mynode.png') }}' : '{{ static_url_for('static', 'images/mynodel.png') }}'"
                  ></q-img>
                </a>
              </div>
              <div>
                <a
                  href="https://github.com/shesek/spark-wallet"
                  target="_blank"
                  rel="noopener noreferrer"
                >
                  <q-img
                    contain
                    :src="($q.dark.isActive) ? '{{ static_url_for('static', 'images/spark.png') }}' : '{{ static_url_for('static', 'images/sparkl.png') }}'"
                  ></q-img>
                </a>
              </div>
              <div>
                <a
                  href="https://voltage.cloud"
                  target="_blank"
                  rel="noopener noreferrer"
                >
                  <q-img
                    contain
                    :src="($q.dark.isActive) ? '{{ static_url_for('static', 'images/voltage.png') }}' : '{{ static_url_for('static', 'images/voltagel.png') }}'"
                  ></q-img>
                </a>
              </div>
              <div>
                <a
                  href="https://breez.technology/sdk/"
                  target="_blank"
                  rel="noopener noreferrer"
                >
                  <q-img
                    contain
                    :src="($q.dark.isActive) ? '{{ static_url_for('static', 'images/breez.png') }}' : '{{ static_url_for('static', 'images/breezl.png') }}'"
                  ></q-img>
                </a>
              </div>
              <div>
                <a
                  href="https://blockstream.com/lightning/greenlight/"
                  target="_blank"
                  rel="noopener noreferrer"
                >
                  <q-img
                    contain
                    :src="($q.dark.isActive) ? '{{ static_url_for('static', 'images/greenlight.png') }}' : '{{ static_url_for('static', 'images/greenlightl.png') }}'"
                  ></q-img>
                </a>
              </div>
              <div>
                <a
                  href="https://getalby.com"
                  target="_blank"
                  rel="noopener noreferrer"
                >
                  <q-img
                    contain
                    :src="($q.dark.isActive) ? '{{ static_url_for('static', 'images/alby.png') }}' : '{{ static_url_for('static', 'images/albyl.png') }}'"
                  ></q-img>
                </a>
              </div>
              <div>
                <a
                  href="https://zbd.gg"
                  target="_blank"
                  rel="noopener noreferrer"
                >
                  <q-img
                    contain
                    :src="($q.dark.isActive) ? '{{ static_url_for('static', 'images/zbd.png') }}' : '{{ static_url_for('static', 'images/zbdl.png') }}'"
                  ></q-img>
                </a>
              </div>
              <div>
                <a
                  href="https://phoenix.acinq.co/server"
                  target="_blank"
                  rel="noopener noreferrer"
                >
                  <q-img
                    contain
                    :src="($q.dark.isActive) ? '{{ static_url_for('static', 'images/phoenixd.png') }}' : '{{ static_url_for('static', 'images/phoenixdl.png') }}'"
                  ></q-img>
                </a>
              </div>
              <div>
                <a
                  href="https://boltz.exchange/"
                  target="_blank"
                  rel="noopener noreferrer"
                >
                  <q-img
                    contain
                    :src="($q.dark.isActive) ? '{{ static_url_for('static', 'images/boltz.svg') }}' : '{{ static_url_for('static', 'images/boltz.svg') }}'"
                  ></q-img>
                </a>
              </div>
              <div>
                <a
                  href="https://www.blink.sv/"
                  target="_blank"
                  rel="noopener noreferrer"
                >
                  <q-img
                    contain
                    :src="($q.dark.isActive) ? '{{ static_url_for('static', 'images/blink_logo.png') }}' : '{{ static_url_for('static', 'images/blink_logol.png') }}'"
                  ></q-img>
                </a>
              </div>
              <!-- # -->
            </div>
          </div>
        </div>
      </div>
    </div>
    {% endblock %}
  </q-page>
</q-page-container>
{% endblock %}