ai_fitness/modules/tab/tree/tree.page.html

<ion-header [translucent]="true">
  <!-- Header content for tree theme (optional customization) -->
</ion-header>

<ion-content [fullscreen]="true">
  <!-- Tree image -->
  <div class="image-container">
    <img src="assets/tab1/tree.png" alt="Tree">
  </div>

  <!-- Title and time display -->
  <ion-row>
    <ion-col>
      <div class="info-container">
        <h2>Tree</h2>
      </div>
    </ion-col>
    <ion-col>
      <div class="timer-display">
        <span>00:00</span>
      </div>
    </ion-col>
    <ion-col>
      <div class="timer-icon">
        <ion-icon name="timer-outline"></ion-icon>
      </div>
    </ion-col>
  </ion-row>

  <!-- Icon buttons -->
  <div class="icon-buttons">
    <ion-button class="i-button">
      <ion-icon name="leaf"></ion-icon>
    </ion-button>
    <ion-button class="i-button">
      <ion-icon name="water"></ion-icon>
    </ion-button>
    <ion-button class="i-button">
      <ion-icon name="sunny"></ion-icon>
    </ion-button>
    <ion-button class="i-button">
      <ion-icon name="cloudy"></ion-icon>
    </ion-button>
    <ion-button class="i-button">
      <ion-icon name="flower"></ion-icon>
    </ion-button>
  </div>

  <!-- Control buttons -->
  <div class="control-buttons">
    <ion-button fill="solid" class="ctrl-button">
      <ion-icon name="play-back-outline"></ion-icon>
    </ion-button>
    <ion-button fill="solid" class="ctrl-button">
      <ion-icon name="play-outline"></ion-icon>
    </ion-button>
    <ion-button fill="solid" class="ctrl-button">
      <ion-icon name="play-forward-outline"></ion-icon>
    </ion-button>
  </div>
</ion-content>