habitica/views/app/modals.html

<modals:>

    <app:avatar:modals />
    <app:settings:modals />
    <app:pets:modals />
    <app:alerts:modals />
    <app:rewards:modals />
    <app:tasks:modals />

    <!-- Game Over Modal -->
    <div style="{#unless lt(_user.stats.hp,1)}display:none;{/}">
        <app:modals:modal noDismiss=true modalId='dead-modal'>
            <div class='row-fluid'>
                <div class='span4'>
                    <figure class="notification-character">
                        <img src="/img/sprites/dead.png">
                    </figure>
                </div>
                <div class='span8'>
                    <h2>You Died!</h2>
                </div>
            </div>
            <div class='row-fluid'>
                <div class='span4'>
                    <p><a x-bind=click:revive class="btn btn-danger btn-large notification-action">Continue</a></p>
                </div>
                <div class='span8'>
                    <p>You've lost a level, all your gold, and a random piece of equipment. Arise, Habiteer, and try again! Curb those negative Habits, be vigilant in completion of Dailies, and hold death at arm's length with a Potion if you falter!</p>
                </div>
            </div>

        </app:modals:modal>
    </div>

    <!-- Re-Roll modal -->
    <app:modals:modal modalId='reroll-modal' header="Reset Your Tasks">
        <app:rewards:user-gems />
        <p>Purchasing a Re-Roll will reset all your tasks to a neutral (yellow) state, as if you'd just added them. Consider this an option of last resort! <a target="_blank" href="https://github.com/lefnire/habitrpg#all-my-tasks-are-red-im-dying-too-fast">Red tasks provide good incentive to improve</a>. But if all that red fills you with despair, and the beginning of each new day proves lethal, spend the Gems and catch a reprieve!</p>
        <@footer>   
            {#if lt(_user.balance,1)}
            <a data-dismiss="modal" x-bind="click:showStripe" class="btn btn-success btn-large">Buy More Gems</a><span class='gem-cost'>Not enough Gems</span>
            {else}
            <a data-dismiss="modal" x-bind=click:buyReroll class="btn btn-danger btn-large">Re-Roll</a><span class='gem-cost'>4 Gems</span>
            {/}
        </@footer>
    </app:modals:modal>

    <!-- Buy more Gems modal -->
    <app:modals:modal modalId='more-gems-modal' header="Out Of Gems">
        <app:rewards:user-gems />
        <p>Oops, out of Gems, which are used to buy special items! Habit is an open source project, and can use all the help it can get - buy more Gems to receive this pet, and consider it a donation to the contributors.</p>
        <@footer>
        <a data-dismiss="modal" x-bind="click:showStripe" class="btn btn-success btn-large">Buy More Gems</a><span class='gem-cost'>Not enough Gems</span>
    </@footer>
    </app:modals:modal>

    <app:modals:modal modalId="why-ads-modal" header="Why Ads?">
        <p>
            Habit is an open source project, and can use all the help it can get - consider this a donation to the contributors. You also get 20 Gems from the purchase, which you can use to buy special items.
        </p>
        <p>
            "Hey, I backed the Kickstarter!" - follow <a target="_blank" href="http://community.habitrpg.com/node/22">these instructions</a>.
        </p>
        <@footer>
            <button data-dismiss="modal" class="btn btn-success">Ok</button>
        </@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>