forked from rDrama/rDrama
98 lines
4.0 KiB
HTML
98 lines
4.0 KiB
HTML
<script src="/static/assets/js/award_modal.js?a=221"></script>
|
|
<div class="modal fade" id="awardModal" tabindex="-1" role="dialog" aria-labelledby="awardModalTitle" aria-hidden="true">
|
|
<div class="modal-dialog modal-dialog-scrollable modal-dialog-centered awardmodal my-5" role="document">
|
|
<div class="modal-content pb-5">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">Give Award</h5>
|
|
<button role="button" class="close" data-bs-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true"><i class="far fa-times"></i></span>
|
|
</button>
|
|
</div>
|
|
<div id="awardModalBody" class="modal-body">
|
|
<form id="awardTarget" class="pt-3 pb-0" action="" method="post">
|
|
<input autocomplete="off" type="hidden" name="formkey", value="{{v.formkey}}">
|
|
<div class="card-columns award-columns awards-wrapper">
|
|
{% for award in v.user_awards %}
|
|
<a role="button" id="{{award.kind}}" class="card" onclick="pick('{{award.kind}}', {{award.price}} < {{v.procoins}}, {{award.price}} < {{v.coins}})">
|
|
<i class="{{award.icon}} {{award.color}}"></i>
|
|
<div class="pt-2" style="font-weight: bold; font-size: 14px; color:#E1E1E1">{{award.title}}</div>
|
|
<div class="text-muted"><span id="{{award.kind}}-owned">{{award.owned}}</span> owned</div>
|
|
</a>
|
|
{% endfor %}
|
|
</div>
|
|
<label id="notelabel" for="note" class="pt-4">Note (optional):</label>
|
|
<input autocomplete="off" id="kind" name="kind" value="" hidden>
|
|
<textarea autocomplete="off" id="note" maxlength="200" name="note" class="form-control" placeholder="Note to include in award notification..."></textarea>
|
|
<input autocomplete="off" id="giveaward" class="awardbtn btn btn-primary mt-3" style="float:right" type="submit" value="Give Award" disabled>
|
|
<button id="buy1" class="awardbtn btn btn-primary mt-3 mx-3" type="button" disabled style="float:right" onclick="buy(true)">Buy with marseybux</button>
|
|
<button id="buy2" class="awardbtn btn btn-primary mt-3" type="button" disabled style="float:right" onclick="buy()">Buy with coins</button>
|
|
<pre>
|
|
</pre>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="toast" id="toast-post-success2" style="position: fixed; bottom: 1.5rem; margin: 0 auto; left: 0; right: 0; width: 275px; z-index: 1000" role="alert" aria-live="assertive" aria-atomic="true" data-bs-animation="true" data-bs-autohide="true" data-bs-delay="5000">
|
|
<div class="toast-body bg-success text-center text-white">
|
|
<i class="fas fa-comment-alt-smile mr-2"></i><span id="toast-post-success-text2">Action successful!</span>
|
|
</div>
|
|
</div>
|
|
<div class="toast" id="toast-post-error2" style="position: fixed; bottom: 1.5rem; margin: 0 auto; left: 0; right: 0; width: 275px; z-index: 1000" role="alert" aria-live="assertive" aria-atomic="true" data-bs-animation="true" data-bs-autohide="true" data-bs-delay="5000">
|
|
<div class="toast-body bg-danger text-center text-white">
|
|
<i class="fas fa-exclamation-circle mr-2"></i><span id="toast-post-error-text2">Error, please try again later.</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
.awards-wrapper input[type="radio"] {
|
|
display: none;
|
|
}
|
|
|
|
.awards-wrapper a {
|
|
cursor: pointer;
|
|
padding: 15px !important;
|
|
text-align: center;
|
|
text-transform: none!important;
|
|
}
|
|
|
|
.awards-wrapper a i {
|
|
font-size: 25px;
|
|
}
|
|
|
|
.awards-wrapper a.disabled {
|
|
opacity: 0.6;
|
|
}
|
|
|
|
.awards-wrapper a:hover:not(.disabled), .awards-wrapper .picked {
|
|
background-color: var(--primary)!important;
|
|
}
|
|
|
|
.awards-wrapper input[type="radio"]:checked+a {
|
|
background-color: var(--primary)!important;
|
|
}
|
|
|
|
.award-columns {
|
|
column-count: 1;
|
|
}
|
|
|
|
.awardmodal {
|
|
max-width: 90% !important;
|
|
min-height: 90% !important;
|
|
max-height: 90% !important;
|
|
height: 90% !important;
|
|
}
|
|
|
|
toast {
|
|
z-index: 7000 !important;
|
|
}
|
|
|
|
@media (max-width: 400px) {
|
|
.awardbtn {
|
|
display:block;
|
|
margin-right:0 !important;
|
|
clear:both !important;
|
|
}
|
|
}
|
|
</style> |