cobuild-angular-stack/modules/coupleAccount/views/auth.pay.prepay.modal.html

Base stack angular sass jade gulp

<!-- Form -->
<div class="modal-header">
    <button type="button" class="close outside outside-2" ng-click="ccCtrl.bye()" aria-label="Close">
      <span aria-hidden="true"><img src="img/close@2x.png" alt=""></span>
    </button>
    <h3 class="header-pink text-center">{{'pricing' | translate | uppercase}} </h3>
    <p class="text-cool-gray text-center">{{'Paga tu mesa' | translate}}</p>
    <p class="text-cool-gray text-center"  ng-if="!ccCtrl.isActiveCode && !ccCtrl.isCode">Tienes código de descuento <a href="#" ng-click="ccCtrl.isActiveCode = true">captúralo aquí</a></p>
    <div class="row text-center" ng-if="ccCtrl.isActiveCode && !ccCtrl.isCode">
        <div class="col-md-4"></div>
        <div class="col-md-4">
            <div class="input-group">
                <input class="form-control" type="text" placeholder="Código" ng-model="ccCtrl.discountCode">
                <span class="input-group-btn">
                    <button class="btn btn-default" type="button" ng-click="ccCtrl.sendCode()" style="border: 1px solid #ccc;padding: 9px 13px;margin-bottom: -2px;">Enviar</button>
                </span>
            </div>
        </div>
        <div class="col-md-4"></div>
    </div>
    <div class="row text-center" ng-if="ccCtrl.isCode">
        <div class="col-md-4"></div>
        <div class="col-md-4">Código: {{ ccCtrl.code.code }}</div>
        <div class="col-md-4"></div>
    </div>
</div>

<div class="row">

    <div class="col-md-10 col-md-offset-1 col-xs-12">

        <div class="margin-top-12 row">
            <div class="col-md-4 col-xs-12">
                <div class="panel panel-default" ng-click="ccCtrl.selectPercentagePay()">
                    <div class="panel-heading dark"><h3 class="text-center no-margintop no-marginbottom">{{'plan-free-heading'|translate}}</h3></div>
                    <div class="panel-body">
                        <h4 class="text-center margin-top-2 margin-bottom-2 text-slate-grey">{{'you-will-pay'|translate}}</h4>
                        <h1 class="color-dark text-center fs-val-2 ng-binding">{{ dataUtils.payPrice.percent }}%</h1>
                        <h4 class="text-center margin-top-2 no-marginbottom payment-text-2" ng-bind-html="dataUtils.payPrice.percentDescription"></h4>
                        <div class="row">
                                <div class="col-md-12 text-center">
                                    <button type="button" class="btn btn-inverse btn-lg ng-binding">Pagar</button>
                                </div>
                            </div>
                    </div>
                </div>
            </div>
            <div class="col-md-4 col-xs-12">
                <div class="panel panel-default" ng-click="ccCtrl.selectFixedPay(dataUtils.payPrice.fixed, dataUtils.payPrice.fixedId)">
                    <div class="panel-heading inverse"><h3 class="text-center no-margintop no-marginbottom">{{'plan-premium-heading'|translate}}</h3></div>
                    <div class="panel-body">
                        <h4 class="color-inverse text-center ng-binding linePay title-x" ng-if="ccCtrl.isCode || ccCtrl.isDiscount">
                            <span class="normal fontPay">$ {{ dataUtils.payPrice.fixed }}</span>
                        </h4>
                        <h4 class="text-center margin-top-2 margin-bottom-2 text-slate-grey">{{'you-will-pay'|translate}}</h4>
                        <h1 class="color-inverse text-center fs-val-2 ng-binding">
                            <span class="normal fontPay">$</span>{{ ccCtrl.priceToDiscount(dataUtils.payPrice.fixed) }}
                        </h1>
                        <h4 class="text-center margin-top-2 no-marginbottom payment-text-2" ng-bind-html="dataUtils.payPrice.fixedDescription"></h4>
                        <div class="row">
                                <div class="col-md-12 text-center">
                                    <button type="button" class="btn btn-inverse btn-lg ng-binding">Pagar</button>
                                </div>
                            </div>
                    </div>
                </div>
            </div>
            <div class="col-md-4 col-xs-12">
                <div class="panel panel-default" ng-click="ccCtrl.selectFixedPayComplete(dataUtils.payPrice.fixedComplete, dataUtils.payPrice.fixedCompleteId)">
                    <div>
                            <img style="position: absolute; z-index: 1; right: -14px;top: -14px;" height="70" width="70" src="../img/TRIANGULITO.png" alt="">
                    </div>
                    <div style="border-top-left-radius: 0px;border-top-right-radius: 0px;" class="panel-heading inverse"><h3 class="text-center no-margintop no-marginbottom">{{'plan-premium-heading-premium'|translate}}</h3></div>
                    <div class="panel-body">
                        <h4 class="color-inverse text-center ng-binding linePay title-x" ng-if="ccCtrl.isCode || ccCtrl.isDiscount">
                            <span class="normal fontPay">$ {{ dataUtils.payPrice.fixedComplete }}</span>
                        </h4>
                        <h4 class="text-center margin-top-2 margin-bottom-2 text-slate-grey">{{'you-will-pay'|translate}}</h4>
                        <h1 class="color-dark text-center fs-val-2 ng-binding">
                            <span class="normal fontPay" >$</span>{{ ccCtrl.priceToDiscount(dataUtils.payPrice.fixedComplete) }}
                        </h1>
                        <h4 class="text-center margin-top-2 no-marginbottom payment-text-2 ng-binding" ng-bind-html="dataUtils.payPrice.fixedCompleteDescription"></h4>
                        <div class="row">
                                <div class="col-md-12 text-center">
                                    <button type="button" class="btn btn-inverse btn-lg ng-binding">Pagar</button>
                                </div>
                            </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>