calorie

src/app/date-time/date-time.component.ts

@@ -0,0 +1,16 @@
+import { Component } from '@angular/core';
+import { ModalController } from '@ionic/angular';
+import { IonicModule } from '@ionic/angular';
+
+@Component({
+  selector: 'app-date-time',
+  templateUrl: 'date-time.html',
+  styleUrls: ['date-time.component.scss'],
+  imports:[IonicModule],
+  standalone:true
+})
+export class DateTimeComponent {
+  constructor() {}
+
+
+}

src/app/date-time/date-time.html

@@ -0,0 +1,3 @@
+<ion-content>
+  <ion-datetime [showDefaultButtons]="true"></ion-datetime>
+  </ion-content>

src/app/tab1/tab1.page.html

@@ -4,18 +4,24 @@
       <ion-button>
         <ion-icon name="arrow-back"></ion-icon>
       </ion-button>
-      <ion-button>
+      <!-- <ion-button (click)="showDatePicker()">
         Today
-      </ion-button>
-      <ion-button>
-        <ion-icon name="arrow-forward"></ion-icon>
-      </ion-button>
+      </ion-button> -->
+      <ion-datetime-button datetime="datetime"></ion-datetime-button>
+
+      <ion-modal [keepContentsMounted]="true">
+        <ng-template>
+          <ion-datetime id="datetime" presentation="date"></ion-datetime>
+        </ng-template>
+      </ion-modal>
+        <!-- <ion-icon name="arrow-forward"></ion-icon> -->
     </ion-buttons>
     <ion-buttons slot="end">
       <ion-checkbox></ion-checkbox>
-      <ion-button>
-        <ion-icon name="ellipsis-vertical"></ion-icon>
-      </ion-button>
+
+      
+      <ion-menu-button>
+      </ion-menu-button>
     </ion-buttons>
   </ion-toolbar>
 
@@ -42,7 +48,6 @@
     </div>
   </ion-toolbar>
 </ion-header>
-
 <ion-content>
   <ion-list>
     <ion-item>

src/app/tab1/tab1.page.ts

@@ -1,20 +1,23 @@
 import { Component } from '@angular/core';
-import { IonicModule } from '@ionic/angular';
+import { IonicModule, ModalController } from '@ionic/angular';
+import { DateTimeComponent } from '../date-time/date-time.component';
+import { IonIcon } from '@ionic/angular';
+
 @Component({
   selector: 'app-tab1',
   templateUrl: 'tab1.page.html',
   styleUrls: ['tab1.page.scss'],
   imports:[IonicModule],
   standalone:true
-  
 })
 export class Tab1Page {
-  slides = [
-    { content: 'Slide 1 Content' },
-    { content: 'Slide 2 Content' },
-    { content: 'Slide 3 Content' },
-    { content: 'Slide 4 Content' }
-  ];
+  constructor(private modalCtrl: ModalController) {}
 
-  constructor() {}
+  async showDatePicker() {
+    const modal = await this.modalCtrl.create({
+      component: DateTimeComponent,
+      cssClass: 'date-time-modal'
+    });
+    await modal.present();
+  }
 }

src/app/tab2/tab2.module.ts

@@ -14,7 +14,7 @@ import { Tab2PageRoutingModule } from './tab2-routing.module';
     FormsModule,
     ExploreContainerComponentModule,
     Tab2PageRoutingModule
-  ],
-  declarations: [Tab2Page]
+  ]
+  
 })
 export class Tab2PageModule {}

src/app/tab2/tab2.page.html

@@ -1,17 +1,68 @@
-<ion-header [translucent]="true">
+<ion-header>
   <ion-toolbar>
-    <ion-title>
-      Tab 2
-    </ion-title>
+    <ion-title>Foods</ion-title>
+    <ion-buttons slot="end">
+      <ion-button>
+        <ion-icon slot="icon-only" name="search-outline"></ion-icon>
+      </ion-button>
+    </ion-buttons>
   </ion-toolbar>
 </ion-header>
 
-<ion-content [fullscreen]="true">
-  <ion-header collapse="condense">
-    <ion-toolbar>
-      <ion-title size="large">Tab 2</ion-title>
-    </ion-toolbar>
-  </ion-header>
+<ion-content>
+  <ion-card>
+    <ion-item>
+      <ion-icon slot="start" name="restaurant-outline"></ion-icon>
+      <ion-label>
+        <h2>Custom Meals</h2>
+        <p>0 Meals</p>
+      </ion-label>
+      <ion-button fill="outline" slot="end">Create Meal</ion-button>
+    </ion-item>
+  </ion-card>
 
-  <app-explore-container name="Tab 2 page"></app-explore-container>
-</ion-content>
+  <ion-card>
+    <ion-item>
+      <ion-icon slot="start" name="document-text-outline"></ion-icon>
+      <ion-label>
+        <h2>Custom Recipes</h2>
+        <p>0 Recipes</p>
+      </ion-label>
+      <ion-buttons slot="end">
+        <ion-button fill="outline">Create Recipe</ion-button>
+        <ion-button fill="outline">Import Recipe</ion-button>
+      </ion-buttons>
+    </ion-item>
+  </ion-card>
+
+  <ion-card>
+    <ion-item>
+      <ion-icon slot="start" name="nutrition-outline"></ion-icon>
+      <ion-label>
+        <h2>Custom Foods</h2>
+        <p>0 Foods</p>
+      </ion-label>
+      <ion-button fill="outline" slot="end">Create Food</ion-button>
+    </ion-item>
+  </ion-card>
+
+  <ion-card>
+    <ion-item>
+      <ion-icon slot="start" name="repeat-outline"></ion-icon>
+      <ion-label>
+        <h2>Repeat Items</h2>
+        <p>0 Items</p>
+      </ion-label>
+    </ion-item>
+  </ion-card>
+
+  <ion-card>
+    <ion-item>
+      <ion-icon slot="start" name="help-circle-outline"></ion-icon>
+      <ion-label>
+        <h2>Oracle Nutrient Search</h2>
+        <p>Search for foods high in specific nutrients to meet your needs</p>
+      </ion-label>
+    </ion-item>
+  </ion-card>
+</ion-content>

src/app/tab2/tab2.page.scss

@@ -0,0 +1,45 @@
+ion-card {
+    margin: 16px;
+    border-radius: 12px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  
+    ion-item {
+      --inner-padding-end: 16px;
+      --inner-padding-start: 16px;
+      --inner-padding-top: 16px;
+      --inner-padding-bottom: 16px;
+    }
+  
+    ion-button {
+      --border-radius: 20px;
+      --padding-start: 20px;
+      --padding-end: 20px;
+      --background: #000; /* 修改按钮背景色 */
+      --color: #fff; /* 修改按钮文字颜色 */
+      font-weight: bold;
+      margin-left: 8px;
+    }
+  }
+  
+  ion-header {
+    ion-toolbar {
+      --background: #fff;
+      --border-radius: 0 0 12px 12px;
+      --box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    }
+  
+    ion-title {
+      font-size: 1.5rem;
+      font-weight: bold;
+    }
+  
+    ion-buttons {
+      ion-button {
+        --color: #000;
+      }
+    }
+  }
+  
+  ion-content {
+    --background: #f7f7f7;
+  }

src/app/tab2/tab2.page.ts

@@ -1,12 +1,20 @@
 import { Component } from '@angular/core';
+import { IonicModule } from '@ionic/angular';
 
 @Component({
   selector: 'app-tab2',
   templateUrl: 'tab2.page.html',
-  styleUrls: ['tab2.page.scss']
+  styleUrls: ['tab2.page.scss'],
+  imports:[IonicModule],
+  standalone:true
 })
 export class Tab2Page {
+  meals = 0;
+  recipes = 0;
+  foods = 0;
+  items = 0;
 
   constructor() {}
 
-}
+  // 在这里您可以添加更多逻辑，例如从API获取数据等
+}

src/app/tab3/tab3.module.ts

@@ -14,7 +14,7 @@ import { Tab3PageRoutingModule } from './tab3-routing.module';
     FormsModule,
     ExploreContainerComponentModule,
     Tab3PageRoutingModule
-  ],
-  declarations: [Tab3Page]
+  ]
+ 
 })
 export class Tab3PageModule {}

src/app/tab3/tab3.page.html

@@ -1,17 +1,55 @@
-<ion-header [translucent]="true">
+<ion-header>
   <ion-toolbar>
-    <ion-title>
-      Tab 3
-    </ion-title>
+    <ion-title>More</ion-title>
   </ion-toolbar>
 </ion-header>
 
-<ion-content [fullscreen]="true">
-  <ion-header collapse="condense">
-    <ion-toolbar>
-      <ion-title size="large">Tab 3</ion-title>
-    </ion-toolbar>
-  </ion-header>
+<ion-content>
+  <div class="profile-info">
+    <h2>More</h2>
+    <p>1693739492</p>
+  </div>
 
-  <app-explore-container name="Tab 3 page"></app-explore-container>
-</ion-content>
+  <ion-searchbar placeholder="Search..."></ion-searchbar>
+
+  <ion-card class="gold-card">
+    <ion-card-content>
+      <h2>Cronometer <span class="gold-text">Gold</span></h2>
+      <p>Get More with Cronometer Gold. Access all our premium features on a monthly or annual plan.</p>
+      <ion-button expand="full" color="warning">GET GOLD</ion-button>
+    </ion-card-content>
+  </ion-card>
+
+  <ion-list>
+    <ion-item>
+      <ion-icon slot="start" name="person-circle-outline"></ion-icon>
+      <ion-label>Account</ion-label>
+      <ion-icon slot="end" name="chevron-forward-outline"></ion-icon>
+    </ion-item>
+    <ion-item>
+      <ion-icon slot="start" name="person-outline"></ion-icon>
+      <ion-label>Profile</ion-label>
+      <ion-icon slot="end" name="chevron-forward-outline"></ion-icon>
+    </ion-item>
+    <ion-item>
+      <ion-icon slot="start" name="trending-up-outline"></ion-icon>
+      <ion-label>Targets</ion-label>
+      <ion-icon slot="end" name="chevron-forward-outline"></ion-icon>
+    </ion-item>
+    <ion-item>
+      <ion-icon slot="start" name="timer-outline"></ion-icon>
+      <ion-label>Fasting</ion-label>
+      <ion-icon slot="end" name="chevron-forward-outline"></ion-icon>
+    </ion-item>
+    <ion-item>
+      <ion-icon slot="start" name="phone-portrait-outline"></ion-icon>
+      <ion-label>Display</ion-label>
+      <ion-icon slot="end" name="chevron-forward-outline"></ion-icon>
+    </ion-item>
+    <ion-item>
+      <ion-icon slot="start" name="sync-outline"></ion-icon>
+      <ion-label>Connect Apps & Devices</ion-label>
+      <ion-icon slot="end" name="chevron-forward-outline"></ion-icon>
+    </ion-item>
+  </ion-list>
+</ion-content>

src/app/tab3/tab3.page.scss

@@ -0,0 +1,82 @@
+.page {
+    ion-header {
+      ion-toolbar {
+        --background: #ffffff;
+        --border-radius: 0 0 12px 12px;
+        --box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+      }
+  
+      ion-title {
+        font-size: 1.5rem;
+        font-weight: bold;
+      }
+    }
+  
+    .profile-info {
+      text-align: center;
+      margin: 16px 0;
+  
+      h2 {
+        font-size: 1.8rem;
+        font-weight: bold;
+        margin: 0;
+      }
+  
+      p {
+        font-size: 1rem;
+        color: #666;
+        margin: 4px 0 0;
+      }
+    }
+  
+    ion-searchbar {
+      margin: 16px;
+      border-radius: 20px;
+      --background: #f1f1f1;
+      --icon-color: #666;
+    }
+  
+    .gold-card {
+      margin: 16px;
+      border-radius: 12px;
+      background: #fffbe5;
+  
+      h2 {
+        font-size: 1.2rem;
+        font-weight: bold;
+        margin: 0 0 8px;
+  
+        .gold-text {
+          color: #ffa500;
+        }
+      }
+  
+      p {
+        font-size: 0.9rem;
+        margin-bottom: 16px;
+        color: #666;
+      }
+  
+      ion-button {
+        --border-radius: 20px;
+        --background: #ffa500; /* 修改按钮背景色 */
+        --color: #fff; /* 修改按钮文字颜色 */
+        font-weight: bold;
+      }
+    }
+  
+    ion-list {
+      margin: 16px;
+  
+      ion-item {
+        --inner-padding-end: 16px;
+        --inner-padding-start: 16px;
+        --inner-padding-top: 16px;
+        --inner-padding-bottom: 16px;
+        --background: #fff;
+        border-radius: 12px;
+        margin-bottom: 8px;
+        box-shadow: 0;
+      }
+    }
+}

src/app/tab3/tab3.page.ts

@@ -1,12 +1,18 @@
 import { Component } from '@angular/core';
+import { IonicModule } from '@ionic/angular';
 
 @Component({
   selector: 'app-tab3',
   templateUrl: 'tab3.page.html',
-  styleUrls: ['tab3.page.scss']
+  styleUrls: ['tab3.page.scss'],
+  imports:[IonicModule],
+  standalone:true
 })
 export class Tab3Page {
+  // 模拟数据
+  userEmail = '1693739492@qq.com';
+  
+  // 添加更多数据和逻辑时，可以在这里定义和初始化
 
   constructor() {}
-
-}
+}