habitica/views/app/modals.html

<modals:>

    <app:avatar:modals />
    <app:settings:modals />
    <app:party:modals />

    <!-- Game Over Modal -->
    <div style="{#unless equal(_user.stats.lvl,0)}display:none;{/}">
        <app:modals:modal noDismiss=true modalId='dead-modal'>
            <figure class="notification-character">
                <img src="/img/BrowserQuest/habitrpg_mods/dead.png">
            </figure>
            <h3 class="notification-message">You died! Game Over.</h3>
            <a x-bind=click:revive class="btn btn-danger btn-large notification-action">Continue</a>
        </app:modals:modal>
    </div>

    <!-- Re-Roll modal -->
    <app:modals:modal modalId='reroll-modal' header="Reset Your Tasks">
        <app:userTokens/>
        <p>Highly discouraged because red tasks provide good incentive to improve (<a target="_blank" href="https://github.com/lefnire/habitrpg#all-my-tasks-are-red-im-dying-too-fast">read more</a>). However, this becomes necessary after long bouts of bad habits.</p>
        <@footer>
            {#if lt(_user.balance,1)}
            <a data-dismiss="modal" x-bind="click:showStripe" class="btn btn-success btn-large">Buy More Tokens</a><span class='token-cost'>Not enough tokens</span>
            {else}
            <a data-dismiss="modal" x-bind=click:buyReroll class="btn btn-danger btn-large">Re-Roll</a><span class='token-cost'>4 Tokens</span>
            {/}
        </@footer>
    </app:modals:modal>

    <!-- Buy more tokens modal -->
    <app:modals:modal modalId='more-tokens-modal' header="Out Of Tokens">
        <app:userTokens/>
        <p>You're out of tokens, which are used to buy pets and mounts.</p>
        <@footer>
        <a data-dismiss="modal" x-bind="click:showStripe" class="btn btn-success btn-large">Buy More Tokens</a><span class='token-cost'>Not enough tokens</span>
    </@footer>
    </app:modals:modal>



<!-- $modal-template -->
<modal: nonvoid>
    {{#if @noDismiss}}
        <div data-action="backdrop" class="modal-backdrop"></div>
    {{/}}
    <div class="modal {{#unless @noDismiss}}hide{{/}}" id={{@modalId}} role="dialog">
        {#if @header}
            <div class="modal-header">
                {{#unless @noDismiss}}<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>{{/}}
                <h3>{unescaped @header}</h3>
            </div>
        {/}
        <div class="modal-body">{@content}</div>
        {{#if @footer}}
            <div class="modal-footer">{{@footer}}</div>
        {{/}}
    </div>