diff --git a/ng8-seed/src/app/app.module.ts b/ng8-seed/src/app/app.module.ts index 0312b4e..6162b6c 100644 --- a/ng8-seed/src/app/app.module.ts +++ b/ng8-seed/src/app/app.module.ts @@ -40,6 +40,9 @@ import { ProjectDetailComponent } from './components/project-detail/project-deta import {SlideshowModule} from 'ng-simple-slideshow'; import { FooterComponent } from './components/footer/footer.component' import { ContributeComponent } from './components/contribute/contribute.component'; +import { ProjectsComponent } from './components/projects/projects.component'; +import { PaymentComponent } from './components/payment/payment.component'; +import { PaymentConfirmationComponent } from './components/payment-confirmation/payment-confirmation.component'; // import { AddEventModule } from './add-event.module'; export function HttpLoaderFactory(http: HttpClient) { @@ -61,7 +64,10 @@ const DEFAULT_PERFECT_SCROLLBAR_CONFIG: PerfectScrollbarConfigInterface = { AuthLayoutComponent, // ProjectDetailComponent, FooterComponent, - ContributeComponent + ContributeComponent, + ProjectsComponent, + PaymentComponent, + PaymentConfirmationComponent // ProjectListComponent ], imports: [ diff --git a/ng8-seed/src/app/app.routing.ts b/ng8-seed/src/app/app.routing.ts index ac49bc8..944d8ef 100644 --- a/ng8-seed/src/app/app.routing.ts +++ b/ng8-seed/src/app/app.routing.ts @@ -4,6 +4,9 @@ import { AdminLayoutComponent } from './layouts/admin/admin-layout.component'; import { AuthLayoutComponent } from './layouts/auth/auth-layout.component'; import { ProjectDetailComponent } from './components/project-detail/project-detail.component'; import { ContributeComponent } from './components/contribute/contribute.component'; +import { ProjectsComponent } from './components/projects/projects.component'; +import { PaymentComponent } from './components/payment/payment.component'; +import { PaymentConfirmationComponent } from './components/payment-confirmation/payment-confirmation.component'; export const AppRoutes: Routes = [{ path: '', @@ -18,9 +21,23 @@ export const AppRoutes: Routes = [{ }, {path : 'contribute', // loadChildren :()=>import('./dashboard/dashboard.module').then(m=>m.) - component:ContributeComponent} + component:ContributeComponent +}, +{ + path : 'projects', + component:ProjectsComponent +}, +{ + path : 'payment', + component:PaymentComponent +}, +{ + path : 'paymentconfirmation', + component:PaymentConfirmationComponent +} ] -}, { +}, +{ path: '', component: AuthLayoutComponent, children: [{ diff --git a/ng8-seed/src/app/components/payment-confirmation/payment-confirmation.component.html b/ng8-seed/src/app/components/payment-confirmation/payment-confirmation.component.html new file mode 100644 index 0000000..848d423 --- /dev/null +++ b/ng8-seed/src/app/components/payment-confirmation/payment-confirmation.component.html @@ -0,0 +1,44 @@ + +
Review and Pay
 +

+ +
+
+

Thank You


+ +
+
+
+
+ +

We have received confirmation of your payment as detailed below

+
+
+
+
+ +
+
+ + + +
+
+
+
+ +
+
+

Building fund for Govt Girls Hr Sec School,
Nellikuppam, Cuddalore

+
+
+
+
+ +
+
+ + + \ No newline at end of file diff --git a/ng8-seed/src/app/components/payment-confirmation/payment-confirmation.component.scss b/ng8-seed/src/app/components/payment-confirmation/payment-confirmation.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/ng8-seed/src/app/components/payment-confirmation/payment-confirmation.component.spec.ts b/ng8-seed/src/app/components/payment-confirmation/payment-confirmation.component.spec.ts new file mode 100644 index 0000000..2c14c92 --- /dev/null +++ b/ng8-seed/src/app/components/payment-confirmation/payment-confirmation.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { PaymentConfirmationComponent } from './payment-confirmation.component'; + +describe('PaymentConfirmationComponent', () => { + let component: PaymentConfirmationComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ PaymentConfirmationComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(PaymentConfirmationComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/ng8-seed/src/app/components/payment-confirmation/payment-confirmation.component.ts b/ng8-seed/src/app/components/payment-confirmation/payment-confirmation.component.ts new file mode 100644 index 0000000..7a02cc9 --- /dev/null +++ b/ng8-seed/src/app/components/payment-confirmation/payment-confirmation.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-payment-confirmation', + templateUrl: './payment-confirmation.component.html', + styleUrls: ['./payment-confirmation.component.scss'] +}) +export class PaymentConfirmationComponent implements OnInit { + + constructor() { } + + ngOnInit() { + } + +} diff --git a/ng8-seed/src/app/components/payment/payment.component.html b/ng8-seed/src/app/components/payment/payment.component.html new file mode 100644 index 0000000..4cb5928 --- /dev/null +++ b/ng8-seed/src/app/components/payment/payment.component.html @@ -0,0 +1,96 @@ + +
Review and Pay
 +

+ +
+
+ +
+
+ + + +
+
+
+
+ +
+
+

Building fund for Govt Girls Hr Sec School, Nellikuppam, Cuddalore

+
+
+ + + + +
Choose a Payment Option
 +

+ + + Cheque + +
+ +
+ + + + Bank Transfer + +
+ +
+ + + + Credit/Debit Cards + +
+
+ + + + + + + + + + + + + +
+
+ + + + Wallets + +
+ +
+ + + + UPI + +
+ +
+ + + + +
+ +
+ \ No newline at end of file diff --git a/ng8-seed/src/app/components/payment/payment.component.scss b/ng8-seed/src/app/components/payment/payment.component.scss new file mode 100644 index 0000000..1fdd4be --- /dev/null +++ b/ng8-seed/src/app/components/payment/payment.component.scss @@ -0,0 +1,175 @@ +$base-card-box-shadow:1.5px 2.6px 24px 0 rgba(0, 35, 136, 0.08) !important; +$product-bg-color-hover: rgba(103, 58, 183, 0.7); +.p-list-main { + background: white; + margin: auto; + position: relative; + overflow: hidden !important; + border-radius: 10px 10px 10px 10px; + box-shadow: $base-card-box-shadow; + transform: scale(0.95); + transition: box-shadow 0.5s, transform 0.5s; + &:hover { + transform: scale(1); + box-shadow: 5px 20px 30px rgba(0, 0, 0, 0.2); + } + .p-list { + position: relative; + .top { + height: 100%; + width: 100%; + // background: url(https://s-media-cache-ak0.pinimg.com/736x/49/80/6f/49806f3f1c7483093855ebca1b8ae2c4.jpg) no-repeat center center; + -webkit-background-size: 100%; + -moz-background-size: 100%; + -o-background-size: 100%; + background-size: 100%; + } + .bottom { + width: 200%; + height: 20%; + transition: transform 0.5s; + h1 { + margin: 0; + padding: 0; + } + p { + margin: 0; + padding: 0; + } + .left { + height: 100%; + width: 50%; + background: #f4f4f4; + position: relative; + float: left; + .details { + padding: 20px; + float: left; + width: calc(70% - 40px); + } + .buy { + float: right; + width: calc(30% - 2px); + height: 100%; + transition: background 0.5s; + i { + font-size: 30px; + padding: 30px; + color: #254053; + transition: transform 0.5s; + } + &:hover i { + transform: translateY(5px); + color: #00394B; + } + } + } + .right { + width: 50%; + background: #A6CDDE; + color: white; + float: right; + height: 200%; + overflow: hidden; + .details { + padding: 20px; + float: right; + width: calc(70% - 40px); + } + .done { + width: calc(30% - 2px); + float: left; + transition: transform 0.5s; + border-right: solid thin rgba(255, 255, 255, 0.3); + height: 50%; + i { + font-size: 30px; + padding: 30px; + color: white; + } + } + .remove { + width: calc(30% - 1px); + clear: both; + border-right: solid thin rgba(255, 255, 255, 0.3); + height: 50%; + background: #BC3B59; + transition: transform 0.5s, background 0.5s; + &:hover { + background: #9B2847; + } + &:hover i { + transform: translateY(5px); + } + i { + transition: transform 0.5s; + font-size: 30px; + padding: 30px; + color: white; + } + } + &:hover { + .remove, + .done { + transform: translateY(-100%); + } + } + } + } + } + .inside { + z-index: 9; + background: $product-bg-color-hover; + width: 140px; + height: 140px; + position: absolute; + top: -70px; + right: -70px; + border-radius: 0px 0px 200px 200px; + transition: all 0.5s, border-radius 2s, top 1s; + overflow: hidden; + .icon { + position: absolute; + right: 85px; + top: 85px; + color: white; + opacity: 1; + } + &:hover { + width: 100%; + right: 0; + top: 0; + border-radius: 0; + height: 100%; + .icon { + opacity: 0; + right: 15px; + top: 15px; + } + .contents { + opacity: 1; + transform: scale(1); + transform: translateY(0); + } + } + .contents { + padding: 5%; + opacity: 0; + transform: scale(0.5); + transform: translateY(-200%); + transition: opacity 0.2s, transform 0.8s; + table { + text-align: left; + width: 100%; + } + h1, + p, + table { + color: white; + } + p { + font-size: 13px; + } + } + } +} diff --git a/ng8-seed/src/app/components/payment/payment.component.spec.ts b/ng8-seed/src/app/components/payment/payment.component.spec.ts new file mode 100644 index 0000000..4b19cd1 --- /dev/null +++ b/ng8-seed/src/app/components/payment/payment.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { PaymentComponent } from './payment.component'; + +describe('PaymentComponent', () => { + let component: PaymentComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ PaymentComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(PaymentComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/ng8-seed/src/app/components/payment/payment.component.ts b/ng8-seed/src/app/components/payment/payment.component.ts new file mode 100644 index 0000000..f397a7b --- /dev/null +++ b/ng8-seed/src/app/components/payment/payment.component.ts @@ -0,0 +1,47 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-payment', + templateUrl: './payment.component.html', + styleUrls: ['./payment.component.scss'] +}) +export class PaymentComponent implements OnInit { + + isRequired = false; + isDisabled = false; + currentDrink: string; + + drinks = [{ + value: 'coke-0', + viewValue: 'Coke' + }, { + value: 'sprite-1', + viewValue: 'Sprite' + }, { + value: 'water-2', + viewValue: 'Water' + }, { + value: 'pepper-3', + viewValue: 'Dr. Pepper' + }, { + value: 'coffee-4', + viewValue: 'Coffee' + }, { + value: 'tea-5', + viewValue: 'Tea' + }, { + value: 'juice-6', + viewValue: 'Orange juice' + }, { + value: 'wine-7', + viewValue: 'Wine' + }, { + value: 'milk-8', + viewValue: 'Milk' + }]; + constructor() { } + + ngOnInit() { + } + +} diff --git a/ng8-seed/src/app/components/projects/projects.component.html b/ng8-seed/src/app/components/projects/projects.component.html new file mode 100644 index 0000000..62878ee --- /dev/null +++ b/ng8-seed/src/app/components/projects/projects.component.html @@ -0,0 +1,448 @@ + +
+ + +
Projects
 +
+
+
+ + + + {{ drink.viewValue }} + + + + + + + {{ drink.viewValue }} + + + + + + + {{ drink.viewValue }} + + + + + + + {{ drink.viewValue }} + + + +
+ +
+
+
+
+
+
+
+
+
Govt Higher Secondary school
+

Thiruvannamalai

+
+ +
+
+
+
info_outline
+
+ + + + + + + + + + + + + + + + + +
PurposeNeed
Building FundUrgent
EstimationCollected
1.50L50,000
+
+
+
+
+
+
+
+
+
+
+
+
+
Govt Higher Secondary school
+

Vellore

+
+ +
+
+
+
info_outline
+
+ + + + + + + + + + + + + + + + + +
PurposeNeed
Building FundUrgent
EstimationCollected
1.50L50,000
+
+
+
+
+
+
+
+
+
+
+
+
+
Govt Higher Secondary school
+

Salem

+
+ +
+
+
+
info_outline
+
+ + + + + + + + + + + + + + + + + +
PurposeNeed
Building FundUrgent
EstimationCollected
1.50L50,000
+
+
+
+
+
+
+
+
+
+
+
+
+
Govt Higher Secondary school
+

Pallavaram,Chennai

+
+ +
+
+
+
info_outline
+
+ + + + + + + + + + + + + + + + + +
PurposeNeed
Building FundUrgent
EstimationCollected
1.50L50,000
+
+
+
+
+
+
+
+
+
+
+
+
+
Govt Higher Secondary school
+

Ramanathapuram

+
+ +
+
+
+
info_outline
+
+ + + + + + + + + + + + + + + + + +
PurposeNeed
Building FundUrgent
EstimationCollected
1.50L50,000
+
+
+
+
+
+
+
+
+
+
+
+
+
Govt Higher Secondary school
+

Nagapattinam

+
+ +
+
+
+
info_outline
+
+ + + + + + + + + + + + + + + + + +
PurposeNeed
Building FundUrgent
EstimationCollected
1.50L50,000
+
+
+
+
+
+
+
+
+
+
+
+
+
Govt Higher Secondary school
+

+
+ +
+
+
+
info_outline
+
+ + + + + + + + + + + + + + + + + +
PurposeNeed
Building FundUrgent
EstimationCollected
1.50L50,000
+
+
+
+
+
+
+
+
+
+
+
+
+
Govt Higher Secondary school
+

+
+ +
+
+
+
info_outline
+
+ + + + + + + + + + + + + + + + + +
WidthHeight
3000mm4000mm
Custuertcutaeyw
4529901
+
+
+
+
+
+ + + + +
+
+ + + + + + + + +
Make a contribute now
+ + + +
+ +
+
+ + + +
+
+ State Fund + District Fund + School Common Fund + Specfic Purpose + + + + +
+ + + + +
+
+
Ⓒ TN Schools, All rights reserved
+
diff --git a/ng8-seed/src/app/components/projects/projects.component.scss b/ng8-seed/src/app/components/projects/projects.component.scss new file mode 100644 index 0000000..1fdd4be --- /dev/null +++ b/ng8-seed/src/app/components/projects/projects.component.scss @@ -0,0 +1,175 @@ +$base-card-box-shadow:1.5px 2.6px 24px 0 rgba(0, 35, 136, 0.08) !important; +$product-bg-color-hover: rgba(103, 58, 183, 0.7); +.p-list-main { + background: white; + margin: auto; + position: relative; + overflow: hidden !important; + border-radius: 10px 10px 10px 10px; + box-shadow: $base-card-box-shadow; + transform: scale(0.95); + transition: box-shadow 0.5s, transform 0.5s; + &:hover { + transform: scale(1); + box-shadow: 5px 20px 30px rgba(0, 0, 0, 0.2); + } + .p-list { + position: relative; + .top { + height: 100%; + width: 100%; + // background: url(https://s-media-cache-ak0.pinimg.com/736x/49/80/6f/49806f3f1c7483093855ebca1b8ae2c4.jpg) no-repeat center center; + -webkit-background-size: 100%; + -moz-background-size: 100%; + -o-background-size: 100%; + background-size: 100%; + } + .bottom { + width: 200%; + height: 20%; + transition: transform 0.5s; + h1 { + margin: 0; + padding: 0; + } + p { + margin: 0; + padding: 0; + } + .left { + height: 100%; + width: 50%; + background: #f4f4f4; + position: relative; + float: left; + .details { + padding: 20px; + float: left; + width: calc(70% - 40px); + } + .buy { + float: right; + width: calc(30% - 2px); + height: 100%; + transition: background 0.5s; + i { + font-size: 30px; + padding: 30px; + color: #254053; + transition: transform 0.5s; + } + &:hover i { + transform: translateY(5px); + color: #00394B; + } + } + } + .right { + width: 50%; + background: #A6CDDE; + color: white; + float: right; + height: 200%; + overflow: hidden; + .details { + padding: 20px; + float: right; + width: calc(70% - 40px); + } + .done { + width: calc(30% - 2px); + float: left; + transition: transform 0.5s; + border-right: solid thin rgba(255, 255, 255, 0.3); + height: 50%; + i { + font-size: 30px; + padding: 30px; + color: white; + } + } + .remove { + width: calc(30% - 1px); + clear: both; + border-right: solid thin rgba(255, 255, 255, 0.3); + height: 50%; + background: #BC3B59; + transition: transform 0.5s, background 0.5s; + &:hover { + background: #9B2847; + } + &:hover i { + transform: translateY(5px); + } + i { + transition: transform 0.5s; + font-size: 30px; + padding: 30px; + color: white; + } + } + &:hover { + .remove, + .done { + transform: translateY(-100%); + } + } + } + } + } + .inside { + z-index: 9; + background: $product-bg-color-hover; + width: 140px; + height: 140px; + position: absolute; + top: -70px; + right: -70px; + border-radius: 0px 0px 200px 200px; + transition: all 0.5s, border-radius 2s, top 1s; + overflow: hidden; + .icon { + position: absolute; + right: 85px; + top: 85px; + color: white; + opacity: 1; + } + &:hover { + width: 100%; + right: 0; + top: 0; + border-radius: 0; + height: 100%; + .icon { + opacity: 0; + right: 15px; + top: 15px; + } + .contents { + opacity: 1; + transform: scale(1); + transform: translateY(0); + } + } + .contents { + padding: 5%; + opacity: 0; + transform: scale(0.5); + transform: translateY(-200%); + transition: opacity 0.2s, transform 0.8s; + table { + text-align: left; + width: 100%; + } + h1, + p, + table { + color: white; + } + p { + font-size: 13px; + } + } + } +} diff --git a/ng8-seed/src/app/components/projects/projects.component.spec.ts b/ng8-seed/src/app/components/projects/projects.component.spec.ts new file mode 100644 index 0000000..1086592 --- /dev/null +++ b/ng8-seed/src/app/components/projects/projects.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ProjectsComponent } from './projects.component'; + +describe('ProjectsComponent', () => { + let component: ProjectsComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ ProjectsComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(ProjectsComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/ng8-seed/src/app/components/projects/projects.component.ts b/ng8-seed/src/app/components/projects/projects.component.ts new file mode 100644 index 0000000..203880f --- /dev/null +++ b/ng8-seed/src/app/components/projects/projects.component.ts @@ -0,0 +1,45 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-projects', + templateUrl: './projects.component.html', + styleUrls: ['./projects.component.scss'] +}) +export class ProjectsComponent implements OnInit { + isRequired = false; + isDisabled = false; + currentDrink: string; + + drinks = [{ + value: 'coke-0', + viewValue: 'Coke' + }, { + value: 'sprite-1', + viewValue: 'Sprite' + }, { + value: 'water-2', + viewValue: 'Water' + }, { + value: 'pepper-3', + viewValue: 'Dr. Pepper' + }, { + value: 'coffee-4', + viewValue: 'Coffee' + }, { + value: 'tea-5', + viewValue: 'Tea' + }, { + value: 'juice-6', + viewValue: 'Orange juice' + }, { + value: 'wine-7', + viewValue: 'Wine' + }, { + value: 'milk-8', + viewValue: 'Milk' + }]; + constructor() { } + + ngOnInit() { + } +} diff --git a/ng8-seed/src/app/shared/menu-items/horizontal-menu-items.ts b/ng8-seed/src/app/shared/menu-items/horizontal-menu-items.ts index 2f8ef97..04fecbf 100644 --- a/ng8-seed/src/app/shared/menu-items/horizontal-menu-items.ts +++ b/ng8-seed/src/app/shared/menu-items/horizontal-menu-items.ts @@ -29,17 +29,29 @@ const HORIZONTALMENUITEMS = [ icon: 'home' }, { - state: 'home', - name: 'Projects', - type: 'link', - icon: 'bookmark' - }, - { - state: 'contribute', - name: 'Contribute', - type: 'link', - icon: 'error_outline' + state: 'apps', + name: 'Components', + type: 'sub', + icon: 'apps', + children: [ + {state: 'contribute', name: 'Contribute',}, + {state: 'projects', name: 'Projects',}, + {state: 'payment', name: 'Payment'}, + {state: 'paymentconfirmation', name: 'PaymentConfirmation'} + ] }, + // { + // state: 'projects', + // name: 'Projects', + // type: 'link', + // icon: 'bookmark' + // }, + // { + // state: 'contribute', + // name: 'Contribute', + // type: 'link', + // icon: 'error_outline' + // }, { state: 'authentication', name: 'Login', diff --git a/ng8-seed/src/app/shared/menu-items/menu-items.ts b/ng8-seed/src/app/shared/menu-items/menu-items.ts index ef32d16..49e7d2d 100644 --- a/ng8-seed/src/app/shared/menu-items/menu-items.ts +++ b/ng8-seed/src/app/shared/menu-items/menu-items.ts @@ -50,7 +50,7 @@ const MENUITEMS : Menu[] = [ // ] // }, { - state: 'home', + state: 'projects', name: 'Projects', type: 'link', icon: 'bookmark' @@ -61,6 +61,12 @@ const MENUITEMS : Menu[] = [ type: 'link', icon: 'error_outline' }, + { + state: 'payment', + name: 'Payment', + type: 'link', + icon: 'error_outline' + }, { state: 'authentication', name: 'Login',