{% extends 'site_layout.html.j2' %} {% set title="Donate" %} {% block content %} <h1>Donate and Support Titan Embeds</h1> <p class="flow-text">Contributing to the Titan project has never been so easy! Donate to support our project development and hosting.</p> <div class="row"> <div class="col s12 m8"> <div class="card-panel indigo lighten-5 z-depth-3 hoverable black-text"> <h4>The Name-Your-Price Tool</h4> <p class="flow-text">Donate to receive <strong>Titan Tokens™</strong> (to be spent on donator features below) and a <strong>supporter role</strong> on our support server.</p> <p class="range-field"> <input type="range" id="token-slider" min="5" max="100" value="10" /> </p> <p class="flow-text">$<span id="money-display">10</span> for <strong><span id="token-display">1000</span> tokens</strong>!</p> <a class="waves-effect waves-light btn" id="donate-btn">Donate</a> </div> </div> <div class="col s12 m4"> <div class="col s12"> <div class="card-panel indigo lighten-5 z-depth-3 hoverable black-text"> <h4>Patreon</h4> <p>Would you like to donate monthly instead of one-time? How about using a different payment method other than PayPal? Patreon, is the answer!</p> <a id="patreonbtn" class="waves-effect waves-light btn btn-large center_content" href="https://www.patreon.com/TitanEmbeds" target="_blank">Visit Patreon</a> <br> <a id="patreonsyncbtn" class="waves-effect waves-light btn btn-large center_content" href="{{ url_for("user.patreon_landing") }}">Sync Pledges</a> </div> </div> </div> </div> <hr> <div class="row"> <div class="col s12"> <div class="card-panel indigo lighten-5 z-depth-3 hoverable black-text"> <p class="flow-text"><strong>Current token amount: {{ session["tokens"] }}</strong></p> </div> </div> </div> <hr> <h2>Donators' Shoppe</h2> <p class="flow-text">Your personal pit-stop before your next conquest mission to embed all yer servers!</p> <div class="row"> <div class="col s12"> <div class="card-panel indigo lighten-5 z-depth-3 hoverable black-text"> <h4>Custom CSS Slots <strong>[100 tokens]</strong></h4> <p class="flow-text">Pick an amount of custom css slots you would like to stock up.</p> <div class="input-field inline"> <input placeholder="Custom CSS Slots Amount" type="number" id="custom-css-slots-amount"> <a class="waves-effect waves-light btn" id="buy-custom-css-slots-btn">Buy</a> </div> </div> </div> <div class="col s12"> <div class="card-panel indigo lighten-5 z-depth-3 hoverable black-text"> <h4>Guest User Avatar <strong>[300 tokens]</strong></h4> <p class="flow-text">Tired of the bland Titan logo for your guests avatars in your servers? Enables your account to be able to set icons for guests on all servers you can manage.</p> <p>(Note: Webhook Messages has to be enabled to be displayed in Discord; Titan needs server permissions to create webhooks)</p> <a class="waves-effect waves-light btn" id="buy-guest-user-avatar-btn" {% if cosmetics.guest_icon %}disabled{% endif %}>{% if cosmetics.guest_icon %}Already Purchased{% else %}Buy{% endif %}</a> </div> </div> </div> {% endblock %} {% block script %} <script type="text/javascript" src="{{ url_for('static', filename='js/donate.js') }}"></script> {% endblock %} {% block additional_head_elements %} <style> input[type=range]::-webkit-slider-thumb { background-color: #303f9f; } input[type=range]::-moz-range-thumb { background-color: #303f9f; } input[type=range]::-ms-thumb { background-color: #303f9f; } /***** These are to edit the thumb and the text inside the thumb *****/ input[type=range] + .thumb { background-color: #dedede; } input[type=range] + .thumb.active .value { font-size: 12pt; color: #303f9f; } input[type=range] + .thumb.active .value::before { content: "$"; } </style> {% endblock %}