Added chant mantras page

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "sripuram-pwa",
-  "version": "0.0.1",
+  "version": "1.0.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "sripuram-pwa",
-      "version": "0.0.1",
+      "version": "1.0.0",
       "dependencies": {
         "@angular/animations": "^17.0.2",
         "@angular/common": "^17.0.2",
@@ -17,6 +17,7 @@
         "@angular/platform-browser-dynamic": "^17.0.2",
         "@angular/router": "^17.0.2",
         "@ionic/angular": "^7.0.0",
+        "angular-svg-round-progressbar": "^12.0.0",
         "ionicons": "^7.0.0",
         "rxjs": "~7.8.0",
         "tslib": "^2.3.0",
@@ -4733,6 +4734,18 @@
         "ajv": "^8.8.2"
       }
     },
+    "node_modules/angular-svg-round-progressbar": {
+      "version": "12.0.0",
+      "resolved": "https://registry.npmjs.org/angular-svg-round-progressbar/-/angular-svg-round-progressbar-12.0.0.tgz",
+      "integrity": "sha512-zf5TLC0goQZgirSp6g72SdN8Vz7a3VuKVqdSnIuAf0Q7Nx55crmlwLWIEYIxrKe5A1wea8fnOF8oFK5v8mCAsA==",
+      "dependencies": {
+        "tslib": "^2.3.0"
+      },
+      "peerDependencies": {
+        "@angular/common": "^17.0.0",
+        "@angular/core": "^17.0.0"
+      }
+    },
     "node_modules/ansi-colors": {
       "version": "4.1.3",
       "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-4.1.3.tgz",
@@ -19842,6 +19855,14 @@
         "fast-deep-equal": "^3.1.3"
       }
     },
+    "angular-svg-round-progressbar": {
+      "version": "12.0.0",
+      "resolved": "https://registry.npmjs.org/angular-svg-round-progressbar/-/angular-svg-round-progressbar-12.0.0.tgz",
+      "integrity": "sha512-zf5TLC0goQZgirSp6g72SdN8Vz7a3VuKVqdSnIuAf0Q7Nx55crmlwLWIEYIxrKe5A1wea8fnOF8oFK5v8mCAsA==",
+      "requires": {
+        "tslib": "^2.3.0"
+      }
+    },
     "ansi-colors": {
       "version": "4.1.3",
       "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-4.1.3.tgz",

package.json

@@ -22,6 +22,7 @@
     "@angular/platform-browser-dynamic": "^17.0.2",
     "@angular/router": "^17.0.2",
     "@ionic/angular": "^7.0.0",
+    "angular-svg-round-progressbar": "^12.0.0",
     "ionicons": "^7.0.0",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",

src/app/app-routing.module.ts

@@ -15,6 +15,10 @@ const routes: Routes = [
     path: 'story-details',
     loadChildren: () => import('./story-details/story-details.module').then( m => m.StoryDetailsPageModule)
   },
+  {
+    path: 'chant-mantras',
+    loadChildren: () => import('./chant-mantras/chant-mantras.module').then( m => m.ChantMantrasPageModule)
+  },
 ];
 
 @NgModule({

src/app/chant-mantras/chant-mantras-routing.module.ts

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

src/app/chant-mantras/chant-mantras.module.ts

@@ -0,0 +1,23 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { IonicModule } from '@ionic/angular';
+
+import { ChantMantrasPageRoutingModule } from './chant-mantras-routing.module';
+
+import { ChantMantrasPage } from './chant-mantras.page';
+
+import { RoundProgressModule } from 'angular-svg-round-progressbar';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    ChantMantrasPageRoutingModule,
+    RoundProgressModule,
+  ],
+  declarations: [ChantMantrasPage],
+})
+export class ChantMantrasPageModule {}

src/app/chant-mantras/chant-mantras.page.html

@@ -0,0 +1,20 @@
+<ion-content [fullscreen]="true">
+  <section class="timer">
+    <round-progress
+    [current]="options.current"
+    [max]="options.max"
+    [color]="options.color"
+    [background]="options.background"
+    [stroke]="options.stroke"
+    [semicircle]="options.semicircle"
+    [rounded]="options.rounded"
+    [clockwise]="options.clockwise"
+    [responsive]="options.responsive"
+    [duration]="options.duration"
+    [animation]="options.animation"
+    [animationDelay]="options.animationDelay"/>
+    <div class="indicator">
+      {{ totalTime }}
+    </div>
+  </section>
+</ion-content>

src/app/chant-mantras/chant-mantras.page.scss

@@ -0,0 +1,13 @@
+.timer {
+  position: relative;
+
+  .indicator {
+    background: linear-gradient(90deg, var(--brand-orange-shade1), var(--brand-orange-shade2));
+    margin: 0 auto;
+    height: 30vh;
+    width: 30vh;
+    position: absolute;
+    border-top-left-radius: 50%;
+    border-top-right-radius: 50%;
+  }
+}

src/app/chant-mantras/chant-mantras.page.spec.ts

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

src/app/chant-mantras/chant-mantras.page.ts

@@ -0,0 +1,44 @@
+import { Component, OnInit, OnDestroy } from '@angular/core';
+
+@Component({
+  selector: 'app-chant-mantras',
+  templateUrl: './chant-mantras.page.html',
+  styleUrls: ['./chant-mantras.page.scss'],
+})
+export class ChantMantrasPage implements OnInit, OnDestroy {
+  options = {
+    current: 100,
+    max: 100,
+    color: '#fa9900',
+    background: '#fce09f',
+    stroke: 10,
+    semicircle: true,
+    rounded: true,
+    clockwise: true,
+    responsive: true,
+    duration: 1000,
+    animation: 'easeInOutQuart',
+    animationDelay: 0,
+  };
+
+  totalTime: number = 100000;
+  currentTime: number = 0;
+  timerInterval: any;
+
+  constructor() {}
+  ngOnDestroy() {
+    clearInterval(this.timerInterval);
+  }
+
+  ngOnInit() {
+    this.currentTime = this.totalTime;
+    this.timerInterval = setInterval(() => {
+      if (this.currentTime > 0) {
+        this.currentTime -= 1000;
+        this.options.current = this.currentTime * 100 / this.totalTime;
+      } else {
+        clearInterval(this.timerInterval);
+      }
+    }, 1000);
+  }
+}

src/app/home/home.page.html

@@ -58,7 +58,7 @@
       <img src="assets/sample-images/chanting.webp" alt="temple image">
     </figure>
     <div class="action-items">
-      <button>
+      <button (click)="gotoChant()">
         <ion-icon name="play-outline"></ion-icon>
         Start Today's Chant
       </button>

src/app/home/home.page.scss

@@ -1,7 +1,3 @@
-ion-content {
-  --background: var(--brand-cream-shade1);
-}
-
 h5 {
   font-weight: 600;
   font-size: 1.6rem;

src/app/home/home.page.ts

@@ -11,7 +11,11 @@ export class HomePage {
   constructor(private router: Router) {}
 
   showStoryDetails(){
-    this.router.navigate(['/story-details'])
+    this.router.navigate(['/story-details']);
+  }
+
+  gotoChant() {
+    this.router.navigate(['/chant-mantras']);
   }
 
 }

src/global.scss

@@ -53,6 +53,7 @@ ion-content {
   --padding-start: 2rem;
   --padding-end: 2rem;
   --padding-bottom: 2rem;
+  --background: var(--brand-cream-shade1);
 }
 
 :root {