doneit-web/src/app/pages/inactivity/inactivity.page.html

<ion-content class="text-white">

  <div class="main-wrapper">

    <div class="main-content d-flex flex-column  height-100 width" >
      
      <div class="div-top-header">

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

      </div>

      <div class=" align-center justify-center d-flex flex-column width-100">
        <div *ngIf="hasPin" class="title">Digite o PIN</div>
        <div *ngIf="!hasPin" class="title">Digite o novo PIN</div>


        <div class="terminal">
          <div class="d-flex pt-25 align-center justify-center pin-4">
            <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="d-flex align-center justify-center">
            <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 align-center justify-center">
            <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 align-center justify-center">
            <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 *ngIf="hasPin" class="voltar d-flex align-center justify-center pt-25 clear" (click)="loginPreference = 'none'">
            Entrar com senha
          </div>
  
          <div id="clear" class="cy-clear voltar d-flex align-center justify-center pt-25 clear" (click)="clearCode()">
            Limpar
          </div>

        </div>

      </div>

    </div>

</div>


</ion-content>