diff --git a/package-lock.json b/package-lock.json index a1c9d8e..7c147d8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -17,7 +17,6 @@ "@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", @@ -4734,18 +4733,6 @@ "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", @@ -19855,14 +19842,6 @@ "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", diff --git a/package.json b/package.json index e5135d5..f801fe8 100644 --- a/package.json +++ b/package.json @@ -22,7 +22,6 @@ "@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", diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index b075e96..f878980 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -14,11 +14,7 @@ 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({ diff --git a/src/app/chant-mantras/chant-mantras-routing.module.ts b/src/app/chant-mantras/chant-mantras-routing.module.ts deleted file mode 100644 index cf765ee..0000000 --- a/src/app/chant-mantras/chant-mantras-routing.module.ts +++ /dev/null @@ -1,17 +0,0 @@ -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 {} diff --git a/src/app/chant-mantras/chant-mantras.module.ts b/src/app/chant-mantras/chant-mantras.module.ts deleted file mode 100644 index 8fda47f..0000000 --- a/src/app/chant-mantras/chant-mantras.module.ts +++ /dev/null @@ -1,23 +0,0 @@ -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 {} diff --git a/src/app/chant-mantras/chant-mantras.page.html b/src/app/chant-mantras/chant-mantras.page.html deleted file mode 100644 index 4f775e9..0000000 --- a/src/app/chant-mantras/chant-mantras.page.html +++ /dev/null @@ -1,20 +0,0 @@ - - - - - {{ totalTime }} - - - diff --git a/src/app/chant-mantras/chant-mantras.page.scss b/src/app/chant-mantras/chant-mantras.page.scss deleted file mode 100644 index d0f5edb..0000000 --- a/src/app/chant-mantras/chant-mantras.page.scss +++ /dev/null @@ -1,13 +0,0 @@ -.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%; - } -} \ No newline at end of file diff --git a/src/app/chant-mantras/chant-mantras.page.spec.ts b/src/app/chant-mantras/chant-mantras.page.spec.ts deleted file mode 100644 index d2a00fc..0000000 --- a/src/app/chant-mantras/chant-mantras.page.spec.ts +++ /dev/null @@ -1,17 +0,0 @@ -import { ComponentFixture, TestBed } from '@angular/core/testing'; -import { ChantMantrasPage } from './chant-mantras.page'; - -describe('ChantMantrasPage', () => { - let component: ChantMantrasPage; - let fixture: ComponentFixture; - - beforeEach(async(() => { - fixture = TestBed.createComponent(ChantMantrasPage); - component = fixture.componentInstance; - fixture.detectChanges(); - })); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/src/app/chant-mantras/chant-mantras.page.ts b/src/app/chant-mantras/chant-mantras.page.ts deleted file mode 100644 index afc5cb7..0000000 --- a/src/app/chant-mantras/chant-mantras.page.ts +++ /dev/null @@ -1,44 +0,0 @@ -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); - } -} diff --git a/src/app/home/home.page.html b/src/app/home/home.page.html index 6775dd5..23c195c 100644 --- a/src/app/home/home.page.html +++ b/src/app/home/home.page.html @@ -5,7 +5,7 @@ Om Namo Narayani - 11 + 9 @@ -63,25 +63,32 @@ - + + Thrive beyond fear - - - - - - - - - - - + + Conquer addiction - + + + + Explore Temple + Discover The Essence of a Journey of Spiritual Awakening. + + + Watch Live + + + + + + + + diff --git a/src/app/home/home.page.scss b/src/app/home/home.page.scss index af33baa..88a7ea9 100644 --- a/src/app/home/home.page.scss +++ b/src/app/home/home.page.scss @@ -16,7 +16,7 @@ h5 { border-bottom-right-radius: var(--card-radius); border-bottom-left-radius: var(--card-radius); height: 40rem; - margin-bottom: -17rem; + margin-bottom: -15rem; overflow: hidden; .pattern { @@ -63,12 +63,11 @@ h5 { ion-badge { position: absolute; - right: 0; - top: 0; + right: -0.1rem; + top: -0.1rem; background-color: #79af2e; color: var(--brand-cream-light); - border-radius: 50%; - transform: translate(0.3rem, -0.3rem); + font-size: 1rem; } } @@ -125,6 +124,7 @@ h5 { .container { align-self: center; + padding: var(--standard-vertical-spacing-between-sections) 0; } .icon { @@ -160,10 +160,34 @@ h5 { font-size: 1.1rem; } } + + &.alternative { + background-color: var(--brand-red); + grid-template-columns: 0.6fr 0.4fr; + + h5, p { + color: var(--brand-cream-light); + } + + button { + border-color: var(--brand-cream-light); + background-color: var(--brand-cream-light); + color: var(--brand-red); + + ion-icon { + font-size: 2rem; + margin-left: 0; + } + } + + figure { + align-self: center; + } + } } .card-collections { - padding-top: 2rem; + padding-top: 4rem; header { align-items: center; @@ -186,57 +210,55 @@ h5 { .horizontal-card-list { list-style: none; - width: calc(100% + 2rem); + width: calc(100% + (2 * var(--page-padding-value))); overflow-x: auto; overflow-y: hidden; white-space: nowrap; - padding: var(--standard-vertical-spacing-between-sections); margin: var(--standard-vertical-spacing-between-sections) 0; - margin-left: -var(--standard-vertical-spacing-between-sections); + padding-left: var(--page-padding-value); + margin-left: calc(var(--page-padding-value) * -1); + $card-height: 22rem; li { display: inline-block; margin-right: 2rem; position: relative; - - &::before { - content: ''; - width: 90%; - height: 100%; - left: 5%; - position: absolute; - top: -1rem; - background-color: var(--brand-red); - opacity: 0.1; - border-radius: var(--card-radius); - } - - &::after { - content: ''; - width: 100%; - height: 100%; - left: 0; - position: absolute; - top: 0rem; - background-color: var(--brand-red); - opacity: 0.2; - border-radius: var(--card-radius); - z-index: 1; - } + background: linear-gradient(180deg, #e0c086, #756445 50%); + padding: 2rem; + border-radius: var(--card-radius); + width: calc($card-height - 2rem); + height: $card-height; + overflow: hidden; } figure { position: relative; z-index: 0; - width: 15rem; - height: 20rem; + width: 100%; + height: 100%; img { border-radius: var(--card-radius); width: 100%; height: 100%; - object-fit: cover; + object-fit: contain; object-position: center; } } + + span { + position: absolute; + bottom: 0; + left: 0; + width: 100%; + display: block; + font-family: 'charter-bold'; + text-align: center; + font-size: 1.6rem; + color: var(--brand-cream-light); + width: 100%; + padding: 2rem; + font-size: 1.4rem; + white-space: normal; + } } \ No newline at end of file diff --git a/src/app/story-details/story-details.page.scss b/src/app/story-details/story-details.page.scss index 1ae492e..4c980c7 100644 --- a/src/app/story-details/story-details.page.scss +++ b/src/app/story-details/story-details.page.scss @@ -20,19 +20,19 @@ figure { height: 40vh; text-align: center; display: flex; - align-items: center; - justify-content: center; } h5 { font-weight: 700; font-size: 2rem; margin-bottom: var(--standard-vertical-spacing-between-sections); + color: var(--brand-red); } p { font-size: 1.8rem; font-style: italic; + color: var(--brand-brown); } .action-items {
Discover The Essence of a Journey of Spiritual Awakening.