home.html
<!--
Generated template for the HomePage page.
See http://ionicframework.com/docs/components/#navigation for more info on
Ionic pages and navigation.
-->
<ion-header>
<ion-navbar hideBackButton="true">
<ion-title>
Home
</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<ion-grid *ngIf="!alive">
<ion-row>
<ion-col>
<div class="container">
<h5>Cardio</h5>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" style="width:30%">
<span class="sr-only">30% Complete</span>
</div>
</div>
</div>
</ion-col>
<ion-col>
<div class="container">
<h5>Strenth</h5>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:40%">
<span class="sr-only">40% Complete</span>
</div>
</div>
</div>
</ion-col>
<ion-col>
<div class="container">
<h5>Mobility</h5>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width:20%">
<span class="sr-only">20% Complete</span>
</div>
</div>
</div>
</ion-col>
</ion-row>
<ion-row align-items-center>
<ion-col>
<a (click)="homesliderPage()"><img src="assets/imgs/homemen.png" class="slide-image"/></a>
<button ion-button (click)="alive = !alive">flip</button>
</ion-col>
</ion-row>
<ion-row align-items-center>
<ion-col>
<h2>Full Body</h2>
<p>Not sure what to do today? The Full Body<br>workout can never go wrong. With no body part<br>untouched, this workout will always leave you<br>with a smile.</p>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<div text-left>
<h5>12 Exercies</h5>
<hr>
</div>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<a (click)="goToTabPages(0)"><img src="assets/imgs/manHome/1-jumping-jacks.png"/></a>
<p>Jumping<br>Jacks</p>
</ion-col>
<ion-col>
<a (click)="goToTabPages(1)"><img src="assets/imgs/manHome/2-sit-up-.png"/></a>
<p>Sit<br>Ups</p>
</ion-col>
<ion-col>
<a (click)="goToTabPages(2)"><img src="assets/imgs/manHome/3-pushup.png"/></a>
<p>Push<br>Ups</p>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<a (click)="goToTabPages(3)"><img src="assets/imgs/manHome/4-step-up.png"/></a>
<p>Step<br>Up</p>
</ion-col>
<ion-col>
<a (click)="goToTabPages(4)"><img src="assets/imgs/manHome/5-ankle-.png"/></a>
<p>Ankle<br>Bounce</p>
</ion-col>
<ion-col>
<a (click)="goToTabPages(5)"><img src="assets/imgs/manHome/6-SideToSideSquats.png"/></a>
<p>Side To <br>Side Squats</p>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<a (click)="goToTabPages(6)"><img src="assets/imgs/manHome/7-tricepdips.png"/></a>
<p>Tricep<br> Dips</p>
</ion-col>
<ion-col>
<a (click)="goToTabPages(7)"><img src="assets/imgs/manHome/8-Arm-Swings.png"/></a>
<p>Arm<br>Swings</p>
</ion-col>
<ion-col>
<a (click)="goToTabPages(8)"><img src="assets/imgs/manHome/9-BicepsStretch-.png"/></a>
<p>Biceps<br>Stretch</p>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<a (click)="goToTabPages(9)"><img src="assets/imgs/manHome/10-lunges.png"/></a>
<p>Lunges</p>
</ion-col>
<ion-col>
<a (click)="goToTabPages(10)"><img src="assets/imgs/manHome/11-side-plank-rotation.png"/></a>
<p>side Plank<br>Rotation</p>
</ion-col>
<ion-col>
<a (click)="goToTabPages(11)"><img src="assets/imgs/manHome/12-mountainclimbers.png"/></a>
<p>Mountain<br>Climbers</p>
</ion-col>
</ion-row>
<ion-row align-items-center>
<ion-col>
<hr>
<p>Not sure what to do today? The Full Body<br>workout can never go wrong. With no body part<br>untouched, this workout will always leave you<br>with a smile.</p>
</ion-col>
</ion-row>
</ion-grid>
<super-tabs id="mainTabs" scrollTabs="true" [ngStyle]="{'display': displayprop}">
<super-tab [root]="mJumpingjacksRoot" title="Jumping Jac..." icon="jumping" id="tab1"></super-tab>
<super-tab [root]="mWallsitRoot" title="Sit Up" icon="sit" id="tab2"></super-tab>
<super-tab [root]="mPushupsRoot" title="Push-Ups" icon="push" id="tab3"></super-tab>
<super-tab [root]="mStepupsRoot" title="Step-Ups" icon="step" id="tab4"></super-tab>
<super-tab [root]="mCrunchesRoot" title="Ankle Bounce" icon="ankle" id="tab5"></super-tab>
<super-tab [root]="mSquatsRoot" title="Squats" icon="Squats" id="tab6"></super-tab>
<super-tab [root]="mTricepsdipsRoot" title="Triceps Dips" icon="tricep" id="tab7"></super-tab>
<super-tab [root]="mPlankRoot" title="Arm Swings" icon="Arm" id="tab8"></super-tab>
<super-tab [root]="mHighkneesRoot" title="Biceps Str..." icon="Biceps" id="tab9"></super-tab>
<super-tab [root]="mLungesRoot" title="Lunges" icon="lunges" id="tab10"></super-tab>
<super-tab [root]="mPushupswithrotationRoot" title="Side-Plank Wi.." icon="plank" id="tab11"></super-tab>
<super-tab [root]="mSideplankRoot" title="Mountain Cl..." icon="mountain" id="tab12"></super-tab>
</super-tabs>
</ion-content>
home.ts
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { ManTabsPage } from'../man-tabs/man-tabs';
import { ManhomesliderPage } from'../manhomeslider/manhomeslider';
import { SuperTabsController } from 'ionic2-super-tabs';
/**
* Generated class for the HomePage page.
*
* See https://ionicframework.com/docs/components/#navigation for more info on
* Ionic pages and navigation.
*/
@IonicPage()
@Component({
selector: 'page-home',
templateUrl: 'home.html',
})
export class HomePage {
rootNavCtrl: NavController;
mJumpingjacksRoot = 'MJumpingjacksPage'
mWallsitRoot = 'MWallsitPage'
mPushupsRoot = 'MPushupsPage'
mCrunchesRoot = 'MCrunchesPage'
mStepupsRoot = 'MStepupsPage'
mSquatsRoot = 'MSquatsPage'
mTricepsdipsRoot = 'MTricepsdipsPage'
mPlankRoot = 'MPlankPage'
mHighkneesRoot = 'MHighkneesPage'
mLungesRoot = 'MLungesPage'
mPushupswithrotationRoot = 'MPushupswithrotationPage'
mSideplankRoot = 'MSideplankPage'
constructor(public navCtrl: NavController, public navParams: NavParams, private superTabsCtrl: SuperTabsController) {
this.rootNavCtrl = this.navParams.get('rootNavCtrl');
}
ionViewDidLoad() {
console.log('ionViewDidLoad HomePage');
}
//goToTabPages() {
// this.navCtrl.push(ManTabsPage);
//}
homesliderPage() {
this.navCtrl.push(ManhomesliderPage);
}
goToTabPages(page) {
// this.alive = !this.alive;
this.displayprop = 'block';
this.superTabsCtrl.slideTo(page);
}
/*goToTabPages(page) {
this.alive = !this.alive;
this.superTabsCtrl.slideTo(page);
}*/
public onButtonClick() {
this.buttonClicked = !this.buttonClicked;
}
}