btcpayserver/BTCPayServer/Views/AppsPublic/Crowdfund/VueCrowdfund.cshtml

<div class="container p-0" id="app" v-cloak>
    <div class="row h-100 w-100 py-sm-0 py-md-4 mx-0">
        <div class="card w-100 p-0 mx-0">
            <img class="card-img-top" :src="srvModel.mainImageUrl" v-if="srvModel.mainImageUrl">
            <div class="d-flex justify-content-between px-2">
                <h1>
                    {{srvModel.title}}
                    <span class="h6 text-muted" v-if="!started && srvModel.startDate" v-b-tooltip :title="startDate">
                        Starts {{startDateRelativeTime}}
                    </span>
                    <span class="h6 text-muted" v-else-if="started && !ended && srvModel.endDate" v-b-tooltip :title="endDate">
                        Ends {{endDateRelativeTime}}
                    </span>
                    <span class="h6 text-muted" v-else-if="started && !ended && srvModel.endDate" v-b-tooltip title="No set end date">
                        Currently Active!
                    </span>

                </h1>

                <span v-if="srvModel.targetAmount" class="mt-3">
                    <span class="h5">{{srvModel.targetAmount}} {{targetCurrency}}</span>

                    <span v-if="srvModel.enforceTargetAmount">Hardcap Goal <span class="fa fa-question-circle" v-b-tooltip title="No contributions allowed after the goal has been reached"></span></span>
                    <span v-else>Softcap Goal <span class="fa fa-question-circle" v-b-tooltip title="Contributions allowed even after goal is reached"></span> </span>
                </span>


            </div>
            <div class="progress w-100 rounded-0 " v-if="srvModel.info.showProgress">
                <div class="progress-bar" role="progressbar"
                     :aria-valuenow="srvModel.info.progressPercentage"
                     v-bind:style="{ width: srvModel.info.progressPercentage + '%' }"
                     aria-valuemin="0"
                     v-b-tooltip :title="srvModel.info.progressPercentage + '% Confirmed Contributions'"
                     aria-valuemax="100">
                </div>
                <div class="progress-bar bg-warning" role="progressbar"
                     :aria-valuenow="srvModel.info.pendingProgressPercentage"
                     v-bind:style="{ width: srvModel.info.pendingProgressPercentage + '%' }"
                     v-b-tooltip :title="srvModel.info.pendingProgressPercentage + '% Pending Contributions'"
                     aria-valuemin="0"
                     aria-valuemax="100">
                </div>
            </div>
            <div class="card-body">

                <ul class="nav nav-fill py-2">
                    <li class="nav-item">
                        <h5>{{srvModel.info.currentAmount + srvModel.info.currentPendingAmount }} {{targetCurrency}} </h5>
                        <h5 class="text-muted">Raised</h5>
                    </li>
                    <li class="nav-item">
                        <h5>{{srvModel.info.progressPercentage + srvModel.info.pendingProgressPercentage }}%</h5>
                        <h5 class="text-muted">Of Goal</h5>
                    </li>
                    <li class="nav-item">
                        <h5>
                            {{srvModel.info.totalContributors}}
                        </h5>
                        <h5 class="text-muted">Contributors</h5>
                    </li>
                    <li class="nav-item">
                        <div class="mx-auto">
                            <ul style="list-style-type: none">
                                <li v-if="startDate">
                                    <template v-if="started">
                                        Started {{startDate}}
                                    </template>
                                    <template v-else-if="!started">
                                        Starts {{startDate}}
                                    </template>
                                </li>
                                <li v-if="endDate">
                                    <template v-if="!ended">
                                        Ends {{endDate}}
                                    </template>
                                    <template v-else-if="ended">
                                        Ended {{endDate}}
                                    </template>
                                </li>
                                <li class="list-group-item" v-else-if="!endDate">
                                    No specific end date
                                </li>
                            </ul>
                        </div>
                    </li>
                </ul>
                <div class="card-title">

                    <div class="row">
                        <div class="col-sm-12 col-md-9 col-lg-10">


                            <h2 class="text-muted" v-if="srvModel.tagline">{{srvModel.tagline}}</h2>
                        </div>
                        <div class="col-sm-12 col-md-3 col-lg-2">
                            <button v-if="srvModel.info.active" class="btn btn-lg btn-primary w-100" v-on:click="contributeModalOpen = true">Contribute</button>


                        </div>
                    </div>
                </div>
                <hr/>
                <div class="row">
                    <div class="col-md-8 col-sm-12">
                        <div class="card-text" v-html="srvModel.description"></div>
                    </div>
                    <div class="col-md-4 col-sm-12">
                        <contribute :target-currency="srvModel.targetCurrency"
                                    :active="srvModel.info.active"
                                    :in-modal="false"
                                    :perks="srvModel.perks">

                        </contribute>
                    </div>
                </div>


            </div>
        </div>
    </div>
    <b-modal title="Contribute" v-model="contributeModalOpen" size="lg" ok-only="true" ok-title="Close" ref="modalContribute">

        <contribute v-if="contributeModalOpen"
                    :target-currency="srvModel.targetCurrency"
                    :active="srvModel.info.active"
                    :perks="srvModel.perks"
                    :in-modal="true">
        </contribute>
    </b-modal>

</div>

<script type="text/x-template" id="perks-template">
<div >
    <perk :perk="{title: 'Donate Custom Amount', price: { value: 0}}" :target-currency="targetCurrency" :active="active" 
        :in-modal="inModal">
    </perk>
    <perk v-for="(perk, index) in perks" :perk="perk" :target-currency="targetCurrency" :active="active" 
        :in-modal="inModal">
    </perk>
</div>
</script>

<script type="text/x-template" id="perk-template"> 
<div class="card mb-4 perk"  v-bind:class="{ 'expanded': expanded, 'unexpanded': !expanded }" v-on:click="expanded = true">
    <div class="perk-zoom text-white" v-if="!expanded"> ZZZ</div>
    <form v-on:submit='onContributeFormSubmit'>
        <input type="hidden" :value="perk.id" id="choiceKey"/> 
        <img v-if="perk.image && perk.image != 'null' "  class="card-img-top" :src="perk.image" />
        <div class="card-body">
            <h5 class="card-title" >{{perk.title? perk.title : perk.id}}</h5>
            <p  class="card-text" v-if="perk.description" v-html="perk.description"></p>
            <div class="input-group" style="max-width: 500px;" v-if="expanded">
                <input 
                    :disabled="!active"
                    class="form-control" 
                    type="number" 
                    v-model="amount"
                    :min="perk.price.value"  
                    step="any"  
                    placeholder="Contribution Amount"
                    required >
                <div class="input-group-append">                    
                    <span class='input-group-text'>{{targetCurrency}}</span>
                    <button 
                        class="btn btn-primary" 
                        :disabled="!active" 
                        type="submit">
                        Contribute
                    </button>
                </div>
            </div>
        </div>
    </form>
</div> 
</script>


<script type="text/x-template" id="contribute-template">
  <div>
    <h3 v-if="!inModal">Contribute</h3>
    <perks 
        :perks="perks" 
        :in-modal="inModal"
        :target-currency="targetCurrency" 
        :active="active">
     </perks>
  </div>
</script>