doneit-web/src/app/shared/pin/pin.page.html

<ion-content>
  
  <div class="main-content d-flex flex-column align-center justify-center">
    <div class="div-top-header">

      <div class="div-logo">
        <img src='assets/images/logo-bg.png' alt='logo'>
      </div>

    </div>
    <ion-title class="title">Digite o PIN novo</ion-title>
    <div class="d-flex pt-25">
      <div class="dot" [class.dot-active]="code.length >= 1"></div>
      <div class="dot" [class.dot-active]="code.length >= 2"></div>
      <div class="dot" [class.dot-active]="code.length >= 3"></div>
      <div class="dot"[class.dot-active]="code.length >= 4"></div>
    </div>
    <div class="terminal">

      <div class="d-flex">
        <div class="circle" (click)="setCode('1')">1</div> <div class="circle" (click)="setCode('2')">2</div> <div class="circle" (click)="setCode('3')">3</div>
      </div>

      <div class="d-flex">
        <div class="circle" (click)="setCode('4')">4</div> <div class="circle" (click)="setCode('5')">5</div> <div class="circle" (click)="setCode('6')">6</div>
      </div>

      <div class="d-flex">
        <div class="circle" (click)="setCode('7')">7</div> <div class="circle" (click)="setCode('8')">8</div> <div class="circle" (click)="setCode('9')">9</div>
      </div>

      <div class="d-flex align-center justify-center">
        <div class="circle" (click)="setCode('0')">0</div>
      </div>
      
    </div>

    <div (click)="close()" class="d-flex align-center justify-center pt-25 clear">
      Cancelar
    </div>
  </div>

</ion-content>