Resolved merge conflicts

src/modules/tab/tab-routing.module.ts

@@ -0,0 +1,10 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+
+const routes: Routes = [];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class TabRoutingModule { }

src/modules/tab/tab.module.ts

@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { TabRoutingModule } from './tab-routing.module';
+
+
+@NgModule({
+  declarations: [],
+  imports: [
+    CommonModule,
+    TabRoutingModule
+  ]
+})
+export class TabModule { }

src/modules/tab/tree/tree-routing.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { TreePage } from './tree.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: TreePage
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class TreePageRoutingModule {}

src/modules/tab/tree/tree.module.ts

@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { IonicModule } from '@ionic/angular';
+
+import { TreePageRoutingModule } from './tree-routing.module';
+
+import { TreePage } from './tree.page';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    TreePageRoutingModule
+  ],
+  declarations: [TreePage]
+})
+export class TreePageModule {}

src/modules/tab/tree/tree.page.html

@@ -0,0 +1,61 @@
+<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/img/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>

src/modules/tab/tree/tree.page.scss

@@ -0,0 +1,81 @@
+ion-app {
+  --ion-background-color: #e1e1e1; /* Light grey */
+}
+
+.image-container {
+  display: flex;
+  justify-content: center;
+  margin-top: 20px;
+  img {
+    margin-top: 40px;
+    width: 80%;
+    border-radius: 10px;
+  }
+}
+
+.info-container {
+  margin-top: 50px;
+  h2 {
+    width: 170px;
+    text-align: left;
+    margin-left: 30px;
+    font-size: 2.5rem;
+    color: #333;
+    font-weight: bold;
+  }
+}
+
+.timer-display {
+  margin-top: 50px;
+  justify-content: right;
+  font-size: 2.2rem;
+  color: #333;
+  border: 2px solid #c1c1c1;
+  border-radius: 10%;
+  padding: 5px 5px 5px 5px;
+}
+
+.timer-icon {
+  margin-top: 50px;
+  margin-left: 25px;
+  font-size: 2.5rem;
+  color: black;
+  border: 2px solid #c2c2c2;
+  border-radius: 10%;
+  width: 60%;
+  height: 50%;
+  padding: 5px 5px 0px 5px;
+}
+
+.icon-buttons {
+  display: flex;
+  justify-content: space-around;
+  margin: 45px 20px;
+  .i-button {
+    --background: #e1e1e1;
+    --border-radius: 50%;
+    --padding: 5px;
+    ion-icon {
+      font-size: 2.4rem;
+      color: rgb(178, 178, 178);
+    }
+  }
+}
+
+.control-buttons {
+  display: flex;
+  justify-content: space-around;
+  margin: 45px 20px;
+  .ctrl-button {
+    --background: #e1e1e1;
+    border-radius: 100%;
+    border: 5px wheat;
+    padding: 10px;
+    box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.415),
+                -4px -4px 8px rgba(255, 255, 255, 0.914);
+    ion-icon {
+      font-size: 1.8rem;
+      color: #000000;
+    }
+  }
+}

src/modules/tab/tree/tree.page.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+import { TreePage } from './tree.page';
+
+import { ExploreContainerComponentModule } from 'src/app/explore-container/explore-container.module';
+
+describe('TreePage', () => {
+  let component: TreePage;
+  let fixture: ComponentFixture<TreePage>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [TreePage],
+      imports: [IonicModule.forRoot(), ExploreContainerComponentModule]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(TreePage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/modules/tab/tree/tree.page.ts

@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-tree',
+  templateUrl: 'tree.page.html',
+  styleUrls: ['tree.page.scss']
+})
+export class TreePage {
+
+  constructor() {}
+
+}