<ion-header [translucent]="true">
</ion-header>

<ion-content [fullscreen]="true">
  <ion-header collapse="condense">
    <ion-toolbar>
      <ion-searchbar placeholder="搜索"></ion-searchbar>
    </ion-toolbar>
  </ion-header>
    
   <!-- 方框 -->
   <ion-card (click)="openEditModal()">
    <ion-card-content>
      <ion-grid>
        <ion-row>
          <ion-col size="3">
            <div class="info-box">初始</div>
            <div class="info-value">{{ initial }}</div>
          </ion-col>
          <ion-col size="3">
            <div class="info-box">当前</div>
            <div class="info-value">{{ current }}</div>
          </ion-col>
          <ion-col size="3">
            <div class="info-box">目标</div>
            <div class="info-value">{{ target }}</div>
          </ion-col>
          <ion-col size="3">
            <div class="info-box">赏金</div>
            <div class="info-value">{{ reward }}</div>
          </ion-col>
        </ion-row>
      </ion-grid>
    </ion-card-content>
  </ion-card>
  
<!-- 3D效果的圆 -->
<div class="wave-container" (click)="navigateToTreePage()">
  <div class="wave-circle">
    <div class="wave">
      <div class="wave-inner">
        <span class="start-self-discipline">开始自律</span>
      </div>
    </div>
  </div>
</div>




  <!-- 每日小习惯 -->
<div class="daily-habit">
  <div class="daily-habit-line"></div>
  <div class="daily-habit-text">每日小习惯</div>
</div>

  
   <!-- 每日小习惯按钮 -->
   <div class="button-container">
    <ion-button *ngFor="let button of buttons; let i = index" (click)="onButtonClick(i)" [color]="button.color" class="custom-button">
      <ion-icon [name]="button.icon"></ion-icon>
      <p>{{ button.text }}</p>
    </ion-button>
  </div>
  <div class="habit-text-div">
      <p class="habit-text centered" [ngClass]="{'success-text': allButtonsSuccess, 'failure-text': anyButtonFailure}">{{ habitText }}</p>
  </div>

</ion-content>
  

