ai_fitness/src/app/home/home.page.html

<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>
    
  <div *ngIf="taskCompleted" class="task-completed-message">
    恭喜你完成减重任务，获得了赏金！
  </div>

  <!-- 方框 -->
  <ion-card (click)="openEditModal()" class="weight-card">
    <ion-card-content>
      <ion-grid>
        <ion-row>
          <ion-col size="3">
            <div class="info-box">初始</div>
            <div class="info-value">{{ initial }}KG</div>
          </ion-col>
          <ion-col size="3">
            <div class="info-box">当前</div>
            <div class="info-value">{{ current }}KG</div>
          </ion-col>
          <ion-col size="3">
            <div class="info-box">目标</div>
            <div class="info-value">{{ target }}KG</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>