cobuild-angular-stack

<div style="margin-left: 20px; margin-right: 20px"> <div class="onboarding-modal step1" send-g-a-display-event="" ga-action="Paso 1 La gran boda de" ga-label="Onboarding - Paso 1 La gran boda de" ng-if="view.step == 0"> <h1 class="text-center margin-top">La gran boda de</h1> <h1 class="text-center"> <span ng-class="{'has-warning': error_p1.length > 0 }"> <input class="form-control text-center" name="nameP1" ng-model="view.account.weddingData.nameP1" required="true" size="7" type="text" />        </span> <span style="font-size:72px"> <strong>&</strong> </span>        <span ng-class="{'has-warning': error_p2.length > 0 }"> <input class="form-control text-center" name="nameP2" ng-model="view.account.weddingData.nameP2" required="true" size="7" type="text" /> </span> </h1> </div> <div class="onboarding-modal step1 step2 text-center" send-g-a-display-event="" ga-action="Paso 2 El gran dia" ga-label="Onboarding - Paso 2 El gran dia" ng-if="view.step == 1"> <h1 class="margin-top-5">El gran día es el</h1> <div class="row"> <div class="col-xs-12 text-center" style="font-size: 50px"> <input type="text" class="form-control date-select no-marginbottom" id="font-30" style="font-size: 65px;height: 97px;width: 100%;text-align:center" uib-datepicker-popup="dd · MM · yyyy" show-button-bar="false" placeholder="{{'date-day' | translate}} · {{'date-month' | translate}} · {{'date-year' | translate}}" ng-model="view.account.weddingData.date" is-open="popup1.opened" mousewheel="false" close-text="Close" ng-click="popup1.opened = !popup1.opened" datepicker-options="datePickerOptions"/> <input name="wedding_date" type="hidden" ng-value="date"/> <div class="checkbox margin-bottom-4 margin-top-5"> <input type="checkbox" id="no-date" class="unchecked" ng-model='view.account.weddingData.date' ng-true-value="undefined" ng-class="{'checked' : view.account.weddingData.date===null, 'checked' : view.account.weddingData.date===undefined, 'unchecked' : view.account.weddingData.date!==null && view.account.weddingData.date!==undefined }"> <label for="no-date"><div></div></label> <label for="no-date">AÚN NO TENEMOS FECHA</label> </div> </div> </div> </div> <div class="onboarding-modal step3" send-g-a-display-event="" ga-action="Paso 3 Bienvenida" ga-label="Onboarding - Paso 3 Bienvenida" ng-if="view.step == 2" style="padding-bottom: 28px"> <div class="margin-top-4"> <div class="col-sm-offset-1 col-sm-10"> <div class="text-justify" style="font-size: 20px; color: #595F6F"> <p class="text-center"> <span ng-show="account.weddingData.nameP1 && account.weddingData.nameP2"> {{account.weddingData.nameP1}} y {{account.weddingData.nameP2}}, <span ng-show="(!account.weddingData.nameP1 || !account.weddingData.nameP2) && (account.weddingData.nameP1 || account.weddingData.nameP2)"> {{account.weddingData.nameP1 || account.weddingData.nameP2}}, Bienvenido </span> ¡Bienvenidos a Uniko y Felicidades por su boda! </p> <p class="margin-top-3"> Sabemos que pedir dinero como regalo de bodas es algo incómodo, por eso creamos una manera segura, innovadora y divertida para sus invitados de hacerles un regalo y contribuir con ustedes en su nueva etapa. </p> <p class="text-center margin-top-3"> Armar su mesa de regalos sólo toma 3 sencillos pasos: </p> <div class="row margin-top-3"> <div class="col-md-4 col-sm-4 col-xs-12 text-center"> <div class="image-container"> <img src="img/gift-big.png" alt=""> </div> <h4 class="header-pink">1. PRE CARGA ALGUNOS REGALOS A TU MESA <img src="img/arrow-pink.png"></h4> </div> <div class="col-md-4 col-sm-4 col-xs-12 text-center"> <div class="image-container"> <img src="img/pc-big.png" alt=""> </div> <h4 class="header-pink">2. COMPARTE CON INVITADOS <img src="img/arrow-pink.png"></h4> </div> <div class="col-md-4 col-sm-4 col-xs-12 text-center"> <div class="image-container"> <img src="img/money-big.png" alt="" > </div> <h4 class="header-pink">3. RECIBE EL VALOR DE TUS REGALOS EN EFECTIVO</h4> </div> </div> </div> </div> </div> </div> <div style="margin: 15px;" class="rokk3r-onboarding" ng-show="view.step > 2 && view.step < 6" > <ul ng-show="view.step > 2" class="nav nav-tabs" ng-class="{'nav-stacked': vertical, 'nav-justified': justified}" style=" text-align: center;border-bottom: 1px solid #7d8c93;padding-bottom: 10px;font-weight: 600;"> <li ng-class="[{active: view.step == 3, disabled: view.step != 3}, classes]" class="uib-tab nav-item ng-scope ng-isolate-scope disabled" disable="true"> <a href="" ng-click="select($event)" class="nav-link ng-binding" > <uib-tab-heading class="ng-scope"> <span > <span class="tab-index ng-binding">1</span> <span class="tab-label">. AGREGA REGALOS </span> </span> <img class="hidden-xs ng-scope" src="img/arrow-right.png?timestamp=1499984058349"> </uib-tab-heading> </a> </li> <li ng-class="[{active: view.step == 4, disabled: view.step != 4}, classes]" class="uib-tab nav-item ng-scope ng-isolate-scope disabled" disable="true"> <a href="" ng-click="select($event)" class="nav-link ng-binding" > <uib-tab-heading class="ng-scope"> <span > <span class="tab-index ng-binding">2</span> <span class="tab-label">. COMPARTE CON INVITADOS </span> </span> <img class="hidden-xs ng-scope" src="img/arrow-right.png?timestamp=1499984058349"> </uib-tab-heading> </a> </li> <li ng-class="[{active: view.step == 5, disabled: view.step != 5}, classes]" class="uib-tab nav-item ng-scope ng-isolate-scope disabled" disable="true"> <a href="" ng-click="select($event)" class="nav-link ng-binding" > <uib-tab-heading class="ng-scope"> <span > <span class="tab-index ng-binding">3</span> <span class="tab-label">. RECIBE DINERO </span> </span> <img class="hidden-xs ng-scope" src="img/arrow-right.png?timestamp=1499984058349"> </uib-tab-heading> </a> </li> </ul> <div class=" onboarding-modal step4" send-g-a-display-event="" ga-action="Paso 4" ga-label="Onboarding - Paso 4" ng-if="view.step == 3"> <div class="text-center"> <h4 class="text-center title-section margin-top-2">Elige de un catálogo infinito de productos o crea tus propios regalos y experiencias.</h4> </div> <div> <div class="row no-gutter"> <div class="product-onboarding col-md-4 col-sm-12 col-xs-12" ng-class="{'selected':categorySelected === category}" ng-repeat="category in categories" ng-click="selectCategory(category)"> <span class="margin-top-1 visible-xs visible-sm"> </span> <div> <div class="product-image-container"> <img ng-src="{{category.image}}" /> </div> <h4 class="text-center">{{category.name}}</h4> <p class="text-justify"> {{category.description| truncate:180:'...'}} </p> </div> </div> </div> </div> </div> <div class="onboarding-modal step5" send-g-a-display-event="" ng-if="view.step == 4" ga-action="Paso 5 Tu url" ga-label="Onboarding - Paso 5 Tu url"> <p class="text-center"> Te damos todo lo que necesitas para compartir tu mesa de regalos <br>Uniko con tus invitados </p> <p class="text-center margin-bottom-2">Elige tu propia URL (Ejemplo: https://uniko.co/tereyraul)</p> <p class="text-center margin-top margin-bottom-4"> <span>https://uniko.co/</span> <input class="form-control" name="url" required="true" autocomplete="off" size="7" type="text" ng-model="view.account.currentUrl" ng-keyup="view.account.url = view.account.currentUrl" ng-change="view.account.url = view.account.currentUrl"/> <input type="hidden" name="hiddenUrl" ng-model="view.account.url"> </p> <p class="text-center" ng-show="urlInvalid"> {{'url-exists' | translate}} <a ng-show="!urlSuggestions">{{'loading-suggestions'|translate}}</a> <a ng-repeat="url in urlSuggestions" ng-click="setUrl(url)"> {{url}}<span ng-show="!$last">,</span> </a> </p> </div> <div class="onboarding-modal step6" ng-if="view.step == 5" send-g-a-display-event="" ga-action="Paso 6 Recibe dinero" ga-label="Onboarding - Paso 6 Recibe dinero"> <h3 class="text-center">Recibe el valor de tus regalos en efectivo</h3> <div class="text-center img-container"> <img alt="" src="/img/gift-big.png"/> <img class="arrow-go" src="/img/go-money.png"> <img alt="" src="/img/money-big.png"/> </div> <p class="text-center margin-bottom">Cada vez que te hagan un regalo te llegará una notificación a tu correo, podrás agradecer online y revisar tu estado de cuenta a través de Uniko. Al final el total de tus regalos serán depositados a tu cuenta de banco. Puedes solicitar el retiro en 3 ocasiones sin costo. Toma en cuenta que el tercer retiro se realizará al cierre de tu mesa, 2 meses después de tu evento. Agrega 1 o más cuentas  de banco en la sección Configuración.</p> </div> </div> <div class="onboarding-modal step6" send-g-a-display-event="" ng-if="view.step == 6"> <div class="signup-modal" ng-controller="SignupOnboardingCtrl"> <div> <h1 class="text-center">¡Crea tu cuenta!</h1> <h3 class="text-center">Aprovecha que ya personalizaste tu mesa y crea tu cuenta. Así no tendrás que volver a repetir todos los pasos cuando se lo enseñes a tu pareja. ¡Y no pierdes nada porque te sale GRATIS!</h3>  <p class="text-center margin-top-2"ng-show="!loginWithFacebook" >o</p> <div class="col-md-9 col-sm-10 col-xs-12 form-container nop-gutter"> <form id="signupForm" name="signupForm" ng-submit="signupForm.$valid && signupInstapage(user)" novalidate=""> <div class="form-group has-feedback" ng-class="{'has-error': signupForm.email.$invalid && (signupForm.$submitted || signupForm.email.$touched)}"> <ul class="help-block" ng-show="signupForm.email.$invalid && (signupForm.$submitted || signupForm.email.$touched)"> <li ng-show="signupForm.email.$error.exists">{{'email-assiciated' | translate}}</li> <li ng-show="signupForm.email.$error.email || signupForm.email.$error.pattern">{{'invalid-email' | translate}}</li> <li ng-show="signupForm.email.$error.required">{{'field-required' | translate}}</li> </ul> <input class="form-control" name="email" ng-model="user.email" placeholder="TU EMAIL*" required="" ng-pattern="validEmail" type="email"> <span class="ion-at form-control-feedback"></span> </div> <div class="form-group has-feedback" ng-if="!loginWithFacebook" ng-class="{'has-error': signupForm.password.$invalid && (signupForm.$submitted || signupForm.password.$touched)}"> <ul class="help-block" ng-if="signupForm.password.$invalid && (signupForm.$submitted || signupForm.password.$touched)"> <li ng-show="signupForm.password.$error.match"> {{'error-differents-passwords' | translate}} </li> <li ng-show="signupForm.password.$error.required"> {{'field-required' | translate}}</li> </ul> <div class="input-group"> <input class="form-control" name="password_hidden" ng-model="user.password" ng-show="!showPassword" placeholder="CONTRASEÑA*" required="" type="password"> <input class="form-control" name="password" ng-model= "user.password" ng-show="showPassword" placeholder= "CONTRASEÑA*" required="" type="text"> <div class="input-group-addon inverse" ng-click="togglePassword()"> <span aria-hidden="true" class="fa fa-eye" ng-show="!showPassword"></span> <span aria-hidden="true" class="fa fa-eye-slash" ng-show="showPassword"></span> </div> <span class="ion-key form-control-feedback"></span> </div> </div> <div class="form-group has-feedback" ng-class= "{'has-error': signupForm.cel.$invalid && (signupForm.$submitted || signupForm.cel.$touched)}"> <ul class="help-block" ng-if= "signupForm.cel.$invalid && (signupForm.$submitted || signupForm.cel.$touched)"> <li ng-show="signupForm.cel.$error.required">{{'field-required' | translate}}</li> <li ng-show="signupForm.cel.$error.pattern">{{'invalid-movil' | translate}}</li> </ul> <input class="form-control" name="cel" ng-model="user.phoneNumber1" placeholder="{{'movil' | translate }}*" required="" ng-pattern="validPhone" type="text"> <span class="ion-key form-control-feedback"></span> </div> <div class="checkbox" ng-class= "{'has-error': signupForm.accept.$invalid && (signupForm.$submitted || signupForm.accept.$touched)}"> <label class="no-p-l"> <input name="accept" class="hidden" ng-model="user.accept" required="" type="checkbox"> {{'accept-terms'|translate}} <a target="_blank" ui-sref="termsofuse">{{'terms'|translate}}</a></label> </div> <button class="btn btn-inverse" ng-disabled= "signupForm.$invalid" type="submit">Iniciar</button> </form> </div> </div> </div> </div> <div class="row text-center btn-onboarding" ng-if="view.step < 4" style="padding-top:30px"> <div class="col-md-12 col-sm-12 col-xs-12 margin-top-1"> <button class="btn btn-inverse btn-action " ng-click="nextStep()">{{ textBtn }}</button> </div> </div> <div class="row btn-onboarding" ng-if="view.step > 3 && view.step < 6"> <div class="col-md-6 col-sm-6 col-xs-12 margin-top-1"> <button class="btn btn-dark btn-action btn-block " ng-click="prevStep()">Regresar</button> </div> <div class="col-md-6 col-sm-6 col-xs-12 margin-top-1"> <button class="btn btn-inverse btn-action btn-block" ng-click="nextStep()">{{ textBtn }}</button> </div> </div> </div>