fix:coding face

poem-life-app/angular.json

@@ -126,7 +126,10 @@
     }
   },
   "cli": {
-    "schematicCollections": ["@ionic/angular-toolkit"]
+    "schematicCollections": [
+      "@ionic/angular-toolkit"
+    ],
+    "analytics": false
   },
   "schematics": {
     "@ionic/angular-toolkit:component": {

poem-life-app/src/app/app.routes.ts

@@ -5,4 +5,19 @@ export const routes: Routes = [
     path: '',
     loadChildren: () => import('./tabs/tabs.routes').then((m) => m.routes),
   },
+  {
+    path: 'daily-content',
+    loadComponent: () => import('./daily-content/daily-content.page').then( m => m.DailyContentPage)
+  },
+  {
+    path: 'card-detail',
+    loadComponent: () => import('./tab1/card-detail/card-detail.page').then( m => m.CardDetailPage)
+  },
+  {
+    path: 'card1',
+    loadComponent: () => import('./tab1/card1/card1.page').then( m => m.Card1Page)
+  },
+
+
+
 ];

poem-life-app/src/app/daily-content/daily-content.page.html

@@ -0,0 +1,32 @@
+<ion-header>
+  <ion-toolbar>
+    <ion-buttons slot="start">
+      <ion-button (click)="navigateToDiary()">
+        <ion-icon name="calendar"></ion-icon>
+        <span>日历</span>
+      </ion-button>
+    </ion-buttons>
+
+    <ion-title>每日内容</ion-title>
+
+    <ion-buttons slot="end">
+      <ion-button (click)="navigateToToday()">
+        <ion-icon name="today-outline"></ion-icon>
+        <span>今日</span>
+      </ion-button>
+    </ion-buttons>
+  </ion-toolbar>
+</ion-header>
+
+
+<ion-content>
+  <div class="daily-content-wrapper">
+    <div class="daily-item" *ngFor="let item of dailyItems">
+      <img [src]="item.image" alt="{{ item.title }}" class="daily-image" *ngIf="item.image">
+      <h3>{{ item.date }}</h3>
+      <h4>{{ item.title }}</h4>
+      <p>{{ item.snippet }}</p>
+    </div>
+  </div>
+</ion-content>
+

poem-life-app/src/app/daily-content/daily-content.page.scss

@@ -0,0 +1,36 @@
+.daily-content-wrapper {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+  padding: 16px;
+  gap: 16px;
+}
+
+.daily-item {
+  background: #ffffff;
+  border-radius: 12px;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+  padding: 10px;
+  text-align: center;
+
+  .daily-image {
+    width: 100%;
+    height: auto;
+    border-radius: 8px;
+    margin-bottom: 8px;
+  }
+
+  h3 {
+    font-size: 18px;
+    margin: 5px 0;
+  }
+
+  h4 {
+    font-size: 16px;
+    margin: 0;
+  }
+
+  p {
+    font-size: 14px;
+    color: #666;
+  }
+}

poem-life-app/src/app/daily-content/daily-content.page.spec.ts

@@ -0,0 +1,17 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { DailyContentPage } from './daily-content.page';
+
+describe('DailyContentPage', () => {
+  let component: DailyContentPage;
+  let fixture: ComponentFixture<DailyContentPage>;
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DailyContentPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

poem-life-app/src/app/daily-content/daily-content.page.ts

@@ -0,0 +1,78 @@
+import { Component, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { IonHeader, IonToolbar, IonTitle, IonContent,IonButtons, IonButton, IonIcon,IonDatetime } from '@ionic/angular/standalone';
+import { Router } from '@angular/router';
+import { addIcons } from 'ionicons';
+import { calendar } from 'ionicons/icons';
+@Component({
+  selector: 'app-daily-content',
+  templateUrl: './daily-content.page.html',
+  styleUrls: ['./daily-content.page.scss'],
+  standalone: true,
+  imports: [FormsModule,CommonModule,IonHeader, IonToolbar, IonTitle, IonContent,IonButtons, IonButton,IonDatetime, IonIcon],
+})
+export class DailyContentPage implements OnInit {
+  dailyItems = [
+    {
+      date: '2024-11-30',
+      title: '清平调',
+      snippet: '云想衣裳花想容，春风拂槛露华浓。若非群玉山头见，会向瑶台月下逢。.',
+      image: '../assets/image/01/Vx_03.jpg'
+    },
+    {
+      date: '2024-11-29',
+      title: '纯诗歌内容（内带详细注解）',
+      snippet: '床前明月光，疑是地上霜...',
+      image: ''
+    },
+    {
+      date: '2024-11-28',
+      title: '纯诗歌内容（内带详细注解）',
+      snippet: '床前明月光，疑是地上霜...',
+      image: ''
+    },
+    {
+      date: '2024-11-27',
+      title: '纯诗歌内容（内带详细注解）',
+      snippet: '床前明月光，疑是地上霜...',
+      image: ''
+    },
+    {
+      date: '2024-11-26',
+      title: '纯诗歌内容（内带详细注解）',
+      snippet: '床前明月光，疑是地上霜...',
+      image: ''
+    },
+    {
+      date: '2024-11-25',
+      title: '纯诗歌内容（内带详细注解）',
+      snippet: '床前明月光，疑是地上霜...',
+      image: ''
+    },
+    // 更多内容...
+  ];
+  ngOnInit() {
+  }
+  constructor(private router:Router) {
+    addIcons({calendar});
+  }
+  navigateToDiary() {
+    this.router.navigateByUrl('/daily-content')
+    // 导航到日历页面的逻辑
+  }
+
+  navigateToToday() {
+    this.router.navigateByUrl('/tabs/tab1')
+    // 返回到今天内容的逻辑
+  }
+
+  onDateChange(event: any) {
+    // 处理日期改变的逻辑
+  }
+
+  viewItemDetails(item: any) {
+    console.log(item);
+    // 跳转到对应内容详情页面的逻辑
+  }
+}

poem-life-app/src/app/tab1/card-detail/card-detail.page.html

@@ -0,0 +1,43 @@
+<ion-header>
+  <ion-toolbar>
+    <ion-buttons slot="start">
+      <ion-back-button defaultHref="/tabs/tab1"></ion-back-button>
+    </ion-buttons>
+    <ion-title>{{ content.title }}</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content>
+  <h2>{{ content.title }}</h2>
+  <h3>编者: {{ content.editor }}</h3>
+  <p>{{ content.detail }}</p>
+  <p>日期: {{ content.date }} - {{ content.issue }}</p>
+
+  <ion-list>
+    <ion-item *ngFor="let image of content.images">
+      <ion-thumbnail slot="start">
+        <img [src]="image" />
+      </ion-thumbnail>
+    </ion-item>
+
+    <ion-item *ngIf="content.video">
+      <video controls [src]="content.video"></video>
+    </ion-item>
+
+    <ion-item *ngIf="content.audio">
+      <audio controls [src]="content.audio"></audio>
+    </ion-item>
+  </ion-list>
+</ion-content>
+
+<ion-footer>
+  <ion-toolbar>
+    <ion-buttons slot="start" (click)="prevContent()">
+      <ion-button>前一期</ion-button>
+    </ion-buttons>
+    <ion-buttons slot="end" (click)="nextContent()">
+      <ion-button>后一期</ion-button>
+    </ion-buttons>
+  </ion-toolbar>
+</ion-footer>
+

poem-life-app/src/app/tab1/card-detail/card-detail.page.spec.ts

@@ -0,0 +1,17 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { CardDetailPage } from './card-detail.page';
+
+describe('CardDetailPage', () => {
+  let component: CardDetailPage;
+  let fixture: ComponentFixture<CardDetailPage>;
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CardDetailPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

poem-life-app/src/app/tab1/card-detail/card-detail.page.ts

@@ -0,0 +1,79 @@
+import { Component, OnInit, } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { IonContent, IonHeader,IonItem,IonList, IonThumbnail,IonTitle, IonToolbar,IonFooter, IonButtons,IonButton, IonBackButton} from '@ionic/angular/standalone';
+
+
+
+
+
+@Component({
+  selector: 'app-card-detail',
+  templateUrl: './card-detail.page.html',
+  styleUrls: ['./card-detail.page.scss'],
+  standalone: true,
+  imports: [IonContent, IonHeader,IonThumbnail,IonList, IonTitle,IonItem,IonFooter, IonToolbar,IonButtons,IonButton, IonBackButton, CommonModule, FormsModule]
+})
+export class CardDetailPage implements OnInit {
+
+  content: {
+    title: string;
+    editor: string;
+    date: string;
+    issue: string;
+    detail: string;
+    images: string[]; // 明确指定为字符串数组
+    video: string;
+    audio: string;
+  } = {
+    title: '',
+    editor: '',
+    date: '',
+    issue: '',
+    detail: '',
+    images: [], // 初始化为空数组
+    video: '',
+    audio: ''
+  };
+
+  constructor(private activatedRoute: ActivatedRoute, private router: Router) { }
+
+  ngOnInit() {
+    const id = this.activatedRoute.snapshot.paramMap.get('id'); // 获取内容ID
+    this.loadContent(id);
+  }
+
+  loadContent(id: string | null) {
+    // 模拟加载内容，实际中应从服务获取数据
+    this.content = {
+      // title: `内容标题 ${id}`,
+      title: `清平调`,
+      editor: `文|编辑部`,
+      // editor: `编者姓名 ${id}`,
+      date: '2024-11-30',
+      issue: `第1期`,
+      // issue: `第${id}期`,
+      detail: ` 云想衣裳花想容，春风拂槛露华浓。若非群玉山头见，会向瑶台月下逢。`,
+      // detail: `这里是详细内容 ${id}...`,
+      images: ['../assets/image/01/Vx_03.jpg', ], // 示例图片路径
+      video: 'assets/video/sample.mp4', // 示例视频路径
+      audio: 'assets/audio/sample.mp3' // 示例音频路径
+    };
+  }
+
+  goBack() {
+    this.router.navigate(['/tabs/tab1']); // 返回到 Tab1
+  }
+  prevContent() {
+    const prevId = parseInt(this.content.issue.replace('第', '').replace('期', '')) - 1; // 简单逻辑示例
+    if (prevId > 0) {
+      this.router.navigate(['/card-detail'], { queryParams: { id: prevId } });
+    }
+  }
+
+  nextContent() {
+    const nextId = parseInt(this.content.issue.replace('第', '').replace('期', '')) + 1; // 简单逻辑示例
+    this.router.navigate(['/card-detail'], { queryParams: { id: nextId } });
+  }
+}

poem-life-app/src/app/tab1/card1/card1.page.html

@@ -0,0 +1,17 @@
+<ion-header>
+  <ion-toolbar>
+    <ion-title>Card 1</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content>
+  <ion-card *ngFor="let card of cards" (click)="viewItemDetails(card)"> <!-- 点击卡片时调用方法 -->
+    <ion-card-header>
+      <ion-card-title>{{ card.title }}</ion-card-title>
+      <ion-card-subtitle>{{ card.editor }}</ion-card-subtitle>
+    </ion-card-header>
+    <ion-card-content>
+      {{ card.detail }}
+    </ion-card-content>
+  </ion-card>
+</ion-content>

poem-life-app/src/app/tab1/card1/card1.page.spec.ts

@@ -0,0 +1,17 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { Card1Page } from './card1.page';
+
+describe('Card1Page', () => {
+  let component: Card1Page;
+  let fixture: ComponentFixture<Card1Page>;
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(Card1Page);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

poem-life-app/src/app/tab1/card1/card1.page.ts

@@ -0,0 +1,28 @@
+import { Component, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { IonContent, IonHeader, IonTitle,IonCardSubtitle, IonToolbar, IonCard, IonCardHeader, IonCardTitle, IonCardContent, IonButton } from '@ionic/angular/standalone';
+import { Router } from '@angular/router';
+
+@Component({
+  selector: 'app-card1',
+  templateUrl: './card1.page.html',
+  styleUrls: ['./card1.page.scss'],
+  standalone: true,
+  imports: [IonContent, IonHeader, IonTitle, IonToolbar,IonCardSubtitle, IonCard, IonCardHeader, IonCardTitle, IonCardContent, IonButton, CommonModule, FormsModule]
+})
+export class Card1Page implements OnInit {
+  cards: { id: number; title: string; editor: string; detail: string }[] = [
+    { id: 1, title: 'Card 1 Title', editor: 'Editor 1', detail: 'Detail for Card 1' },
+    { id: 2, title: 'Card 1 Title 2', editor: 'Editor 2', detail: 'Detail for Card 1.2' },
+    { id: 3, title: 'Card 1 Title 3', editor: 'Editor 3', detail: 'Detail for Card 1.3' },
+  ]; // 示例卡片数据
+
+  constructor(private router: Router) {}
+
+  ngOnInit() {}
+
+  viewItemDetails(card: { id: number }) {
+    this.router.navigate(['/card-detail'], { queryParams: { id: card.id } }); // 跳转到详细内容页并带上参数
+  }
+}

poem-life-app/src/app/tab1/tab1.page.html

@@ -1,17 +1,41 @@
-<ion-header [translucent]="true">
+<!-- 头部一栏内容左侧分布一个日历图标（作用为点击进入一个导航页面，内面按照时间排布，每日的图文作为展示锚点，点击后进入对应日期发布的内容），右侧始终展示一个今日按钮，点击后返回最新内容的首页 -->
+<!-- //calendar没有正常显示图标 -->
+<!-- //这里的cards分别需要分给#个内容，图文（一张图片，下面附有文字内容诗句），视频，文章故事（扩写古诗），诗歌内容（纯粹的诗歌），音频内容（吟诵诗歌） -->
+<ion-header>
   <ion-toolbar>
-    <ion-title>
-      Tab 1
-    </ion-title>
+    <ion-buttons slot="start">
+      <ion-button (click)="navigateToDiary()">
+        <ion-icon name="calendar"></ion-icon>
+        <span>日历</span>
+      </ion-button>
+    </ion-buttons>
+
+    <ion-title>诗</ion-title>
+
+    <ion-buttons slot="end">
+      <ion-button (click)="navigateToToday()">
+        <ion-icon name="today-outline"></ion-icon>
+        <span>今日</span>
+      </ion-button>
+    </ion-buttons>
   </ion-toolbar>
 </ion-header>
 
 <ion-content [fullscreen]="true">
-  <ion-header collapse="condense">
-    <ion-toolbar>
-      <ion-title size="large">Tab 1</ion-title>
-    </ion-toolbar>
-  </ion-header>
+  <div class="content-wrapper">
+
+    <div class="main-content">
+      <div class="card-section">
 
-  <app-explore-container name="Tab 1 page"></app-explore-container>
+        <div class="cards">
+          <div class="card" *ngFor="let item of contentItems" (click)="viewItemDetails(item)">
+            <img [src]="item.image" alt="{{ item.title }}" class="card-image" *ngIf="item.image">
+            <h4>{{ item.title }}</h4>
+            <p>{{ item.snippet }}</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 </ion-content>
+<!-- <app-explore-container name="Tab 1 page"></app-explore-container> -->

poem-life-app/src/app/tab1/tab1.page.scss

@@ -0,0 +1,52 @@
+.content-wrapper {
+  padding: 16px;
+}
+
+.main-content {
+  .card-section {
+    margin-bottom: 20px;
+
+    h2 {
+      font-size: 24px;
+      font-weight: bold;
+      margin-bottom: 10px;
+    }
+
+    .cards {
+      display:grid;
+      grid-template-columns: repeat(auto-fill);
+      gap: 16px;
+    }
+
+    .card {
+      background: #ffffff;
+      border-radius: 8px;
+      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+      padding: 10px;
+      cursor: pointer;
+      text-align: center;
+      transition: transform 0.2s;
+
+      &:hover {
+        transform: scale(1.05);
+      }
+
+      .card-image {
+        width: 100%;
+        height: auto;
+        border-radius: 8px;
+        margin-bottom: 8px;
+      }
+
+      h4 {
+        font-size: 16px;
+        margin: 0;
+      }
+
+      p {
+        font-size: 14px;
+        color: #666;
+      }
+    }
+  }
+}

poem-life-app/src/app/tab1/tab1.page.ts

@@ -1,14 +1,70 @@
 import { Component } from '@angular/core';
-import { IonHeader, IonToolbar, IonTitle, IonContent } from '@ionic/angular/standalone';
+import { IonHeader, IonToolbar, IonTitle, IonContent,IonButtons, IonButton, IonIcon,IonDatetime } from '@ionic/angular/standalone';
 import { ExploreContainerComponent } from '../explore-container/explore-container.component';
-
+import { addIcons } from 'ionicons';
+import { calendar } from 'ionicons/icons';
+import { FormsModule } from '@angular/forms';
+import { CommonModule } from '@angular/common';
+import { Router } from '@angular/router';
 @Component({
   selector: 'app-tab1',
   templateUrl: 'tab1.page.html',
   styleUrls: ['tab1.page.scss'],
   standalone: true,
-  imports: [IonHeader, IonToolbar, IonTitle, IonContent, ExploreContainerComponent],
+  imports: [FormsModule,CommonModule,IonHeader, IonToolbar, IonTitle, IonContent,IonButtons, IonButton,IonDatetime, IonIcon,ExploreContainerComponent],
 })
 export class Tab1Page {
-  constructor() {}
+
+  selectedDate!: string; // 定义 selectedDate
+  contentItems = [
+    {
+      title: '清平调',
+      snippet: '云想衣裳花想容，春风拂槛露华浓。若非群玉山头见，会向瑶台月下逢。',
+      image: '../assets/image/01/Vx_03.jpg'
+    },
+    {
+      title: '短歌行',
+      snippet: '对酒当歌，人生几何！譬如朝露，去日苦多。...',
+      image: '../assets/image/02/duangexing.jpg'
+    },
+    {
+      title: '念奴娇·赤壁怀古',
+      snippet: '赤壁之战的还原视频...',
+      image: '../assets/image/03/chibizhizhan.jpg' // 替换为视频封面图
+    },
+    {
+      title: '出师表',
+      snippet: '对出师表进行的精彩扩写...',
+      image: '../assets/image/04/chushibiao.jpg' // 替换为文章封面图
+    },
+    {
+      title: '吟诵音频',
+      snippet: '一段优美的吟诵音频...',
+      image: '' // 替换为音频封面图
+    }
+  ];
+
+
+  // poems = []; // 假设有一些诗
+  // pastPoems = []; // 假设有一些往期诗篇
+
+  constructor(private router:Router) {
+    addIcons({calendar});
+  }
+  navigateToDiary() {
+    this.router.navigateByUrl('/daily-content')
+    // 导航到日历页面的逻辑
+  }
+
+  navigateToToday() {
+    // 返回到今天内容的逻辑
+  }
+
+  onDateChange(event: any) {
+    // 处理日期改变的逻辑
+  }
+
+  viewItemDetails(card: any) {
+    this.router.navigate(['/card-detail'], { queryParams: { id: card.id } }); // 传递卡片ID
+  }
 }

poem-life-app/src/app/tab4/tab4.page.html

@@ -0,0 +1,13 @@
+<ion-header [translucent]="true">
+  <ion-toolbar>
+    <ion-title>tab4</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content [fullscreen]="true">
+  <ion-header collapse="condense">
+    <ion-toolbar>
+      <ion-title size="large">tab4</ion-title>
+    </ion-toolbar>
+  </ion-header>
+</ion-content>

poem-life-app/src/app/tab4/tab4.page.spec.ts

@@ -0,0 +1,17 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { Tab4Page } from './tab4.page';
+
+describe('Tab4Page', () => {
+  let component: Tab4Page;
+  let fixture: ComponentFixture<Tab4Page>;
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(Tab4Page);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

poem-life-app/src/app/tab4/tab4.page.ts

@@ -0,0 +1,20 @@
+import { Component, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-tab4',
+  templateUrl: './tab4.page.html',
+  styleUrls: ['./tab4.page.scss'],
+  standalone: true,
+  imports: [IonContent, IonHeader, IonTitle, IonToolbar, CommonModule, FormsModule]
+})
+export class Tab4Page implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

poem-life-app/src/app/tabs/tabs.page.html

@@ -11,6 +11,11 @@
       <ion-label>文库</ion-label>
     </ion-tab-button>
 
+    <ion-tab-button tab="tab4" href="/tabs/tab4">
+      <ion-icon aria-hidden="true" name="earth"></ion-icon>
+      <ion-label>发现</ion-label>
+    </ion-tab-button>
+
     <ion-tab-button tab="tab3" href="/tabs/tab3">
       <ion-icon aria-hidden="true" name="person"></ion-icon>
       <ion-label>我的</ion-label>

poem-life-app/src/app/tabs/tabs.page.ts

@@ -1,22 +1,21 @@
 import { Component, EnvironmentInjector, inject } from '@angular/core';
-import { IonTabs, IonTabBar, IonTabButton, IonIcon, IonLabel } from '@ionic/angular/standalone';
+import { IonTabs, IonTabBar, IonTabButton, IonLabel, IonIcon, IonButton } from '@ionic/angular/standalone';
 import { addIcons } from 'ionicons';
 import { triangle, ellipse, square } from 'ionicons/icons';
-import { home, book, person } from 'ionicons/icons';
-
+import { home, book, person, earth } from 'ionicons/icons';
 
 @Component({
   selector: 'app-tabs',
   templateUrl: 'tabs.page.html',
   styleUrls: ['tabs.page.scss'],
   standalone: true,
-  imports: [IonTabs, IonTabBar, IonTabButton, IonIcon, IonLabel],
+  imports: [IonTabs, IonTabBar, IonTabButton, IonIcon, IonLabel, IonButton],
 })
 export class TabsPage {
   public environmentInjector = inject(EnvironmentInjector);
 
   constructor() {
-    addIcons({home, book, person});
+    addIcons({home, book, person, earth});
     addIcons({ triangle, ellipse, square });
   }
 }

poem-life-app/src/app/tabs/tabs.routes.ts

@@ -21,6 +21,10 @@ export const routes: Routes = [
         loadComponent: () =>
           import('../tab3/tab3.page').then((m) => m.Tab3Page),
       },
+      {
+        path: 'tab4',
+        loadComponent: () => import('../tab4/tab4.page').then( m => m.Tab4Page)
+      },
       {
         path: '',
         redirectTo: '/tabs/tab1',

poem-life-app/src/index.html

@@ -16,6 +16,7 @@
 
   <!-- add to homescreen for ios -->
   <meta name="apple-mobile-web-app-capable" content="yes" />
+
   <meta name="apple-mobile-web-app-status-bar-style" content="black" />
 </head>