rDrama/files/templates/CHRISTMAS/modals/ModalGiftCoins.html

62 lines
3.3 KiB
HTML

<div class="modal fade" id="giftCoinsModal" tabindex="-1" role="dialog" aria-labelledby="giftCoinsTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered mx-auto max-w-xl" role="document">
<div class="modal-content mx-auto max-w-xl bg-gray-100 rounded-md shadow-lg">
<div class="modal-header">
<h5 class="font-bold text-xl text-black font-heading leading-normal">Gift Dramacoin to @{{u.username}}</h5>
<button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
<span aria-hidden="true"><i class="far fa-times"></i></span>
</button>
</div>
<div class="relative modal-body">
<!-- If user has less than 100 dramacoin, disable form -->
{% if v.coins < 100 %}
<div class="absolute left-0 bottom-0 flex flex-col items-center justify-center w-full h-full bg-white/60 z-10">
<p class="text-lg font-bold text-gray-900 mb-0">
You need at least 100 dramacoin to send coins.
</p>
<small class="mt-1 block text-gray-500">
Earn dramacoin by creating content and receiving votes.
</small>
</div>
{% endif %}
<!-- Form -->
<form class="profile-toggleable" id="message" action="/@{{u.username}}/message" method="post">
<div class="relative rounded-lg border border-gray-300 bg-gray-100 shadow-inner w-full">
<textarea maxlength="1000" id="gift-message" name="message" form="message" class="w-full rounded-t-md p-3 bg-transparent focus:bg-white shadow-inner resize-y focus:outline-none" aria-label="With textarea" placeholder="'tis the season of giving..." rows="3"></textarea>
<ul class="-mt-1 flex space-x-4 px-3 py-2 border-t border-dashed border-gray-400 mb-0">
<li>
<button type="button" class="text-gray-400 hover:text-gray-500" onclick="makeBold('gift-message')">
<i class="fas fa-bold fa-fw fa-sm" data-bs-toggle="tooltip" data-bs-placement="bottom" title="" data-bs-original-title="Bold"></i>
</button>
</li>
<li>
<button type="button" class="text-gray-400 hover:text-gray-500" onclick="makeItalics('gift-message')">
<i class="fas fa-italic fa-fw fa-sm" data-bs-toggle="tooltip" data-bs-placement="bottom" title="" data-bs-original-title="Italicize"></i>
</button>
</li>
<li>
<button type="button" class="text-gray-400 hover:text-gray-500" onclick="makeQuote('gift-message')">
<i class="fas fa-quote-right fa-fw fa-sm" data-bs-toggle="tooltip" data-bs-placement="bottom" title="" data-bs-original-title="Quote"></i>
</button>
</li>
</ul>
</div>
</form>
<div class="mt-3">
<input autocomplete="off" id="coins-transfer-amount" class="form-input" name="amount" type="number" placeholder="0" oninput="updateTax()">
<p class="mt-1 text-sm text-gray-400">
{{u.username}} will receive <strong id="coins-transfer-taxed">0</strong> {{'COINS_NAME' | app_config}}
</p>
</div>
</div>
<div class="flex justify-end space-x-2 border-t border-gray-300 p-4">
<button type="button" class="px-4 py-2 text-sm font-bold text-gray-500 hover:text-gray-700" data-bs-dismiss="modal">
Cancel
</button>
<button onclick="transferCoins()" class="btn btn-green {{ 'cursor-not-allowed' if v.coins < 100 }}" {% if v.coins < 100 %}disabled{% endif %}>
Gift coins
</button>
</div>
</div>
</div>
</div>