pricing_card_supporter.html

<form class="new_charge" id="new_charge" action="https://account.safing.io/charges/checkout" accept-charset="UTF-8" method="get">
    <input value="{{ include.plan_id }}" autocomplete="off" type="hidden" name="charge[plan_id]" id="charge_package_id">
    <input type="hidden" name="new_user" value="true" autocomplete="off" >
    <div class="card-package darkmode mt-0" style="height: 650px;">
        <div class="absolute -top-8 -right-11 hidden xl:block">
            <img src="{{ site.img_url }}page-specific/pricing/package-icons/circle-big.png" alt="">
        </div>
        <div class="card-package-top" style="margin-top: 0;">
            <div class="flex">
                <span class="card-package-top-title">Portmaster  <span style="color: #2fcfae;">Plus</span> </span>
            </div>
            <span class="card-package-top-amount">
                {{ include.price }}€
                <span class="card-package-top-amount-monthly">/ {{ include.interval }}</span>
            </span>
            <p class="card-package-top-desc" style="max-width: 480px;">Investigate Everything.</p>
        </div>
        <div class="card-package-middle">
            <span class="card-package-middle-includes">
                Features
            </span>
    
            <span class="card-package-middle-includes-feature">
                <i class="icon-tick text-green-400 mr-1"></i> Privacy
            </span>
            <span class="card-package-middle-includes-feature">
                <i class="icon-tick text-green-400 mr-1"></i> Investigative Features
            </span>
            <span class="card-package-middle-includes-feature">
                <i class="icon-tick text-green-400 mr-1"></i> Safing Support
            </span>
            <span class="card-package-middle-includes-feature">
                <i class="icon-cross text-red-900 mr-1"></i> SPN
            </span>
    
            <span class="pt-3">
                <a href="/pricing/#comparison" class="link-primary">
                    🢂 Full Comparison
                </a>
            </span>
        </div>
        <div class="card-package-bottom" style="display: block;">
            <div class="mx-auto space-x-2 flex w-percent-80">
              <input class="btn-secondary less-round w-full h-auto py-5" type="submit" name="commit" value="Buy Package"  data-disable-with="Buy Package">
              <nojs>
                  <div class="input-counter darkmode h-full">
                      <input class="input-counter-right" value="1" step="1" min="1" max="4" required="required" class="input-counter-right" type="number" name="charge[quantity]" id="charge_quantity">
                  </div>
              </nojs>
            </div>
        </div>
    </div>
</form>