<ion-header>
  <ion-toolbar color="primary">
    <ion-title color="success" class="ion-text-center">翻译</ion-title>
    <!-- <style>
      #inputText {
          width: 300px;
          height: 50px;
      }
      #translateButton {
          width: 100px;
          height: 50px;
      }
      #outputText {
          margin-top: 20px;
          font-size: 18px;
      }
  </style> -->
  </ion-toolbar>
</ion-header>

<ion-content>
  



 

 <ion-card>
  <ion-card-header>
      今日计划
  </ion-card-header>
  <ion-card-content>
      <ion-item>
        <ion-label style="padding-right: 50px;">
          <h2>20单词</h2>
        </ion-label>
        <p>已完成</p>
        <ion-toggle [(ngModel)]="learningCompleted" disabled></ion-toggle>
      </ion-item>
  </ion-card-content>
</ion-card>


<ion-grid>
  <ion-row>
    <ion-col size="12">
      <ion-button expand="block" color="primary" (click)="startLearning()">
        学习
      </ion-button>
    </ion-col>
  </ion-row>
  <ion-row>
    <ion-col size="12">
      <ion-button expand="block" color="success" (click)="nextWord()">
        已了解
      </ion-button>
    </ion-col>
  </ion-row>
  <ion-row>
    <ion-col size="12">
      <ion-card>
        <ion-card-header>
          <ion-card-title>{{ currentWord.word }}</ion-card-title>
        </ion-card-header>
        <ion-card-content>
          <p><strong>读音：</strong>{{ currentWord.pronunciation }}</p>
          <p><strong>解释：</strong>{{ currentWord.definition }}</p>
        </ion-card-content>
      </ion-card>
    </ion-col>
  </ion-row>
  <ion-row>
    <ion-col size="12">
      <ion-text color="success" *ngIf="learningCompleted">已完成今日任务</ion-text>
    </ion-col>
  </ion-row>
  
</ion-grid>










<ion-grid>
  <ion-row>
    <ion-col size="12">
      <ion-card>
        <ion-card-header>
          <ion-card-title>输入要翻译的文本</ion-card-title>
        </ion-card-header>
        <ion-card-content>
          <ion-textarea [(ngModel)]="userInput" placeholder="请输入文本..."></ion-textarea>
          <ion-button expand="block" (click)="sendMessage()">翻译</ion-button>
        </ion-card-content>
      </ion-card>
    </ion-col>
  </ion-row>
  <ion-row>
    <ion-col size="12">
      <ion-card>
        <ion-card-header>
          <ion-card-title>翻译结果</ion-card-title>
        </ion-card-header>
        <ion-card-content>
          <div *ngFor="let result of translationResults">
            <p>{{ result.text }}</p>
          </div>
        </ion-card-content>
      </ion-card>
    </ion-col>
  </ion-row>
</ion-grid>
       



















      

</ion-content>

