ionic-Material Design , Codecanyon
This commit is contained in:
Carsten Hilmer
@@ -0,0 +1,39 @@
|
||||
<!--View Information-->
|
||||
<!--View name : Fake Login-->
|
||||
<!--State name : app.fakeLogin-->
|
||||
<!--URL : #app/fakeLogin-->
|
||||
|
||||
<ion-view title="Sign In">
|
||||
<!--left button on navigation bar-->
|
||||
<ion-nav-buttons side="left">
|
||||
<a ng-click="$ionicGoBack()" class="button back-button buttons button-clear header-item nav-back-btn">
|
||||
<i class="ion-android-arrow-back"></i>
|
||||
</a>
|
||||
</ion-nav-buttons><!--end left button on navigation bar-->
|
||||
|
||||
<!--login content section-->
|
||||
<ion-content id="social-login" class="bg-white">
|
||||
<!--fake login form section-->
|
||||
<form class="fakeLogin-form">
|
||||
<div>
|
||||
<img src="img/app_icon.png"/>
|
||||
</div>
|
||||
<div class="sub-header">Sign in to application</div>
|
||||
|
||||
<div id="fakeLogin">
|
||||
<md-input-container md-no-float="">
|
||||
<input class="user-name" placeholder="Username">
|
||||
</md-input-container>
|
||||
<hr/>
|
||||
<md-input-container md-no-float="">
|
||||
<input class="user-password" type="password" placeholder="Password">
|
||||
</md-input-container>
|
||||
</div>
|
||||
<div>
|
||||
<a class="md-raised social-button md-button md-default-theme material-background">
|
||||
Sign In
|
||||
</a>
|
||||
</div>
|
||||
</form> <!--end fake login form section-->
|
||||
</ion-content><!--end login content section-->
|
||||
</ion-view>
|
||||
@@ -0,0 +1,49 @@
|
||||
<!--View Information-->
|
||||
<!--View name : Fake Sign Up-->
|
||||
<!--State name : app.fakeSignUp-->
|
||||
<!--URL : #app/fakeSignUp-->
|
||||
|
||||
<ion-view title="Material Design">
|
||||
<!--left button on navigation bar-->
|
||||
<ion-nav-buttons side="left">
|
||||
<a ng-click="$ionicGoBack()" class="button back-button buttons button-clear header-item nav-back-btn">
|
||||
<i class="ion-android-arrow-back"></i>
|
||||
</a>
|
||||
</ion-nav-buttons><!--end left button on navigation bar-->
|
||||
|
||||
<!--social sign up section-->
|
||||
<ion-content id="social-sign-up-content">
|
||||
<div class="app-icon">
|
||||
<img src="img/app_icon.png" class="md-card-image">
|
||||
</div>
|
||||
<!--input section-->
|
||||
<md-input-container md-no-float="">
|
||||
<div>
|
||||
<input class="user-name" placeholder="Username">
|
||||
</div>
|
||||
</md-input-container>
|
||||
<md-input-container md-no-float="">
|
||||
<div>
|
||||
<input type="password" class="user-name" placeholder="Password">
|
||||
</div>
|
||||
</md-input-container>
|
||||
<md-input-container md-no-float="">
|
||||
<div>
|
||||
<input type="password" class="user-name" placeholder="Confirm Password">
|
||||
</div>
|
||||
</md-input-container>
|
||||
<md-input-container md-no-float="">
|
||||
<div>
|
||||
<input class="user-name" placeholder="Mail">
|
||||
</div>
|
||||
</md-input-container>
|
||||
<md-checkbox aria-label="CheckboxTerms">
|
||||
I accept terms and conditions.
|
||||
</md-checkbox>
|
||||
<!--end input section-->
|
||||
<a class="md-raised social-button md-button md-default-theme material-background">
|
||||
Sign Up
|
||||
</a>
|
||||
|
||||
</ion-content><!--end social sign up section-->
|
||||
</ion-view>
|
||||
@@ -0,0 +1,117 @@
|
||||
<!--View Information-->
|
||||
<!--View name : Catalog-->
|
||||
<!--Controller name : catalogCtrl-->
|
||||
<!--Controller path : www/templates/themes/catalog/js/controllers.js-->
|
||||
<!--State name : app.catalog-->
|
||||
<!--URL : #app/catalog-->
|
||||
|
||||
<ion-view title="Material Shop">
|
||||
<!--slide catalog section-->
|
||||
<ion-slide-box id="slide-catalog-content" active-slide="0">
|
||||
<!--slide section-->
|
||||
<ion-slide>
|
||||
<!--pin section-->
|
||||
<div class="pin" ng-click="showConfirmDialog($event)">
|
||||
<img ng-src="{{'img/shirt_01.png'}}"/>
|
||||
|
||||
<h1>Plain Shirt</h1>
|
||||
|
||||
<p>
|
||||
A shirt with plain design.
|
||||
</p>
|
||||
|
||||
<div class="pin-footer">
|
||||
$<span class="pin-footer text-left font-sale">590</span>
|
||||
<span class="pin-footer text-left font-hot-sale">$59</span>
|
||||
</div>
|
||||
</div><!--end pin section-->
|
||||
</ion-slide>
|
||||
<ion-slide>
|
||||
<!--pin section-->
|
||||
<div class="pin" ng-click="showConfirmDialog($event)">
|
||||
<img ng-src="{{'img/shirt_02.png'}}"/>
|
||||
|
||||
<h1>Spring Shirt</h1>
|
||||
|
||||
<p>
|
||||
A shirt with spring design.
|
||||
</p>
|
||||
|
||||
<div class="pin-footer">
|
||||
$<span class="pin-footer text-left font-sale">390</span>
|
||||
<span class="pin-footer text-left font-hot-sale">$39</span>
|
||||
</div>
|
||||
</div> <!--end pin section-->
|
||||
</ion-slide>
|
||||
<ion-slide>
|
||||
<!--pin section-->
|
||||
<div class="pin" ng-click="showConfirmDialog($event)">
|
||||
<img ng-src="{{'img/shirt_04.png'}}"/>
|
||||
|
||||
<h1>Plain Shirt</h1>
|
||||
|
||||
<p>
|
||||
A shirt with plain design.
|
||||
</p>
|
||||
|
||||
<div class="pin-footer">
|
||||
$<span class="pin-footer text-left font-sale">390</span>
|
||||
<span class="pin-footer text-left font-hot-sale">$39</span>
|
||||
</div>
|
||||
</div> <!--end pin section-->
|
||||
</ion-slide>
|
||||
<ion-slide>
|
||||
<!--pin section-->
|
||||
<div class="pin" ng-click="showConfirmDialog($event)">
|
||||
<img ng-src="{{'img/shirt_06.png'}}"/>
|
||||
|
||||
<h1>Spring Shirt</h1>
|
||||
|
||||
<p>
|
||||
A shirt with spring design.
|
||||
</p>
|
||||
|
||||
<div class="pin-footer">
|
||||
$<span class="pin-footer text-left font-sale">390</span>
|
||||
<span class="pin-footer text-left font-hot-sale">$39</span>
|
||||
</div>
|
||||
</div> <!--end pin section-->
|
||||
</ion-slide>
|
||||
<ion-slide>
|
||||
<!--pin section-->
|
||||
<div class="pin" ng-click="showConfirmDialog($event)">
|
||||
<img ng-src="{{'img/shirt_02.png'}}"/>
|
||||
|
||||
<h1>Plain Shirt</h1>
|
||||
|
||||
<p>
|
||||
A shirt with plain design.
|
||||
</p>
|
||||
|
||||
<div class="pin-footer">
|
||||
$<span class="pin-footer text-left font-sale">390</span>
|
||||
<span class="pin-footer text-left font-hot-sale">$39</span>
|
||||
</div>
|
||||
</div> <!--end pin section-->
|
||||
</ion-slide>
|
||||
<ion-slide>
|
||||
<!--pin section-->
|
||||
<div class="pin" ng-click="showConfirmDialog($event)">
|
||||
<img ng-src="{{'img/shirt_01.png'}}"/>
|
||||
|
||||
<h1>Spring Shirt</h1>
|
||||
|
||||
<p>
|
||||
A shirt with spring design.
|
||||
</p>
|
||||
|
||||
<div class="pin-footer">
|
||||
$<span class="pin-footer text-left font-sale">390</span>
|
||||
<span class="pin-footer text-left font-hot-sale">$39</span>
|
||||
</div>
|
||||
</div> <!--end pin section-->
|
||||
</ion-slide>
|
||||
<!--end slide section-->
|
||||
</ion-slide-box><!--end slide catalog section-->
|
||||
|
||||
</ion-view>
|
||||
@@ -0,0 +1,38 @@
|
||||
// Controller of catalog Page.
|
||||
appControllers.controller('catalogCtrl', function ($scope, $mdToast, $mdDialog) {
|
||||
|
||||
// showConfirmDialog for show alert box.
|
||||
$scope.showConfirmDialog = function ($event) {
|
||||
//mdDialog.show use for show alert box for Confirm Order.
|
||||
$mdDialog.show({
|
||||
controller: 'DialogController',
|
||||
templateUrl: 'confirm-dialog.html',
|
||||
targetEvent: $event,
|
||||
locals: {
|
||||
displayOption: {
|
||||
title: "Confirm Order",
|
||||
content: "Confirm to add Order.",
|
||||
ok: "Confirm",
|
||||
cancel: "Close"
|
||||
}
|
||||
}
|
||||
}).then(function () {
|
||||
// For confirm button to Order.
|
||||
|
||||
// Showing Item added.! toast.
|
||||
$mdToast.show({
|
||||
controller: 'toastController',
|
||||
templateUrl: 'toast.html',
|
||||
hideDelay: 1200,
|
||||
position: 'top',
|
||||
locals: {
|
||||
displayOption: {
|
||||
title: "Item added."
|
||||
}
|
||||
}
|
||||
}); // Ends showing toast.
|
||||
}, function () {
|
||||
// For cancel button to Order.
|
||||
});
|
||||
}// End showConfirmDialog.
|
||||
});// End of catalog controller.
|
||||
@@ -0,0 +1,146 @@
|
||||
<!--View Information-->
|
||||
<!--View name : Cloth Shop-->
|
||||
<!--State name : app.clothShop-->
|
||||
<!--URL : #app/clothShop-->
|
||||
|
||||
<ion-view title="Material Store">
|
||||
<!--cloth shop section-->
|
||||
<ion-content id="cloth-shop-content">
|
||||
|
||||
<!--toolbar section-->
|
||||
<md-toolbar class="bar-subheader md-tall md-primary toolbar-medium toolbar-in-content">
|
||||
<div>
|
||||
<h1>SALE 40% OFF</h1>
|
||||
|
||||
<h2>Order Now !!</h2>
|
||||
|
||||
<h2>
|
||||
<i class="fa fa-star"></i>
|
||||
<i class="fa fa-star"></i>
|
||||
<i class="fa fa-star"></i>
|
||||
<i class="fa fa-star"></i>
|
||||
<i class="fa fa-star"></i>
|
||||
</h2>
|
||||
</div>
|
||||
</md-toolbar><!--end toolbar section-->
|
||||
|
||||
<!--product list content-->
|
||||
<div id="product-list" class="row">
|
||||
|
||||
<div class="col">
|
||||
<div class="cube-item" style="background-image: url(img/shirt_01.png);">
|
||||
<h1>
|
||||
Plain Shirt
|
||||
</h1>
|
||||
|
||||
<p>
|
||||
A shirt with pain design.
|
||||
</p>
|
||||
</div>
|
||||
<div class="cube-item" style="background-image: url(img/shirt_03.png);">
|
||||
<h1>
|
||||
Spring Shirt
|
||||
</h1>
|
||||
|
||||
<p>
|
||||
A shirt with Spring design.
|
||||
</p>
|
||||
</div>
|
||||
<div class="cube-item" style="background-image: url(img/shirt_05.png);">
|
||||
<h1>
|
||||
Plain Shirt
|
||||
</h1>
|
||||
|
||||
<p>
|
||||
A shirt with pain design.
|
||||
</p>
|
||||
</div>
|
||||
<div class="cube-item" style="background-image: url(img/shirt_02.png);">
|
||||
<h1>
|
||||
Spring Shirt
|
||||
</h1>
|
||||
|
||||
<p>
|
||||
A shirt with spring design.
|
||||
</p>
|
||||
</div>
|
||||
<div class="cube-item" style="background-image: url(img/shirt_04.png);">
|
||||
<h1>
|
||||
Spring Shirt
|
||||
</h1>
|
||||
|
||||
<p>
|
||||
A shirt with spring design.
|
||||
</p>
|
||||
</div>
|
||||
<div class="cube-item" style="background-image: url(img/shirt_02.png);">
|
||||
<h1>
|
||||
Plain Shirt
|
||||
</h1>
|
||||
|
||||
<p>
|
||||
A shirt with pain design.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col">
|
||||
<div class="cube-item" style="background-image: url(img/shirt_02.png);">
|
||||
<h1>
|
||||
Spring Shirt
|
||||
</h1>
|
||||
|
||||
<p>
|
||||
A shirt with spring design.
|
||||
</p>
|
||||
</div>
|
||||
<div class="cube-item" style="background-image: url(img/shirt_04.png);">
|
||||
<h1>
|
||||
Spring Shirt
|
||||
</h1>
|
||||
|
||||
<p>
|
||||
A shirt with spring design.
|
||||
</p>
|
||||
</div>
|
||||
<div class="cube-item" style="background-image: url(img/shirt_02.png);">
|
||||
<h1>
|
||||
Plain Shirt
|
||||
</h1>
|
||||
|
||||
<p>
|
||||
A shirt with pain design.
|
||||
</p>
|
||||
</div>
|
||||
<div class="cube-item" style="background-image: url(img/shirt_01.png);">
|
||||
<h1>
|
||||
Plain Shirt
|
||||
</h1>
|
||||
|
||||
<p>
|
||||
A shirt with pain design.
|
||||
</p>
|
||||
</div>
|
||||
<div class="cube-item" style="background-image: url(img/shirt_03.png);">
|
||||
<h1>
|
||||
Spring Shirt
|
||||
</h1>
|
||||
|
||||
<p>
|
||||
A shirt with Spring design.
|
||||
</p>
|
||||
</div>
|
||||
<div class="cube-item" style="background-image: url(img/shirt_05.png);">
|
||||
<h1>
|
||||
Plain Shirt
|
||||
</h1>
|
||||
|
||||
<p>
|
||||
A shirt with pain design.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div><!--end product list content-->
|
||||
</ion-content><!--end cloth shop section-->
|
||||
|
||||
</ion-view>
|
||||
@@ -0,0 +1,131 @@
|
||||
<!--View Information-->
|
||||
<!--View name : Cube Feed-->
|
||||
<!--State name : app.cubeFeed-->
|
||||
<!--URL : #app/cubeFeed-->
|
||||
|
||||
<ion-view title="Cube Feed">
|
||||
<!--cube feed section-->
|
||||
<ion-content id="cube-feed-content">
|
||||
<!--cube feed list section-->
|
||||
<div class="feed-list row">
|
||||
<div class="col">
|
||||
<!--cube feed item section-->
|
||||
<div class="feed-item">
|
||||
<div class="feed-img" style="background-image: url('img/cube_feed_03.png')"></div>
|
||||
<div class="feed-content row">
|
||||
<div class="col left">
|
||||
<i class="ion-android-camera"></i>
|
||||
18K
|
||||
</div>
|
||||
<div class="col right">
|
||||
<i class="ion-android-pin"></i>
|
||||
5K
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="feed-item">
|
||||
<div class="feed-img" style="background-image: url('img/cube_feed_01.png')"></div>
|
||||
<div class="feed-content row">
|
||||
<div class="col left">
|
||||
<i class="ion-android-camera"></i>
|
||||
18K
|
||||
</div>
|
||||
<div class="col right">
|
||||
<i class="ion-android-pin"></i>
|
||||
5K
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="feed-item">
|
||||
<div class="feed-img" style="background-image: url('img/cube_feed_02.png')"></div>
|
||||
<div class="feed-content row">
|
||||
<div class="col left">
|
||||
<i class="ion-android-camera"></i>
|
||||
18K
|
||||
</div>
|
||||
<div class="col right">
|
||||
<i class="ion-android-pin"></i>
|
||||
5K
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="feed-item">
|
||||
<div class="feed-img" style="background-image: url('img/cube_feed_03.png')"></div>
|
||||
<div class="feed-content row">
|
||||
<div class="col left">
|
||||
<i class="ion-android-camera"></i>
|
||||
18K
|
||||
</div>
|
||||
<div class="col right">
|
||||
<i class="ion-android-pin"></i>
|
||||
5K
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--end cube feed item section-->
|
||||
</div>
|
||||
<div class="col">
|
||||
<!--cube feed item section-->
|
||||
<div class="feed-item">
|
||||
<div class="feed-img" style="background-image: url('img/cube_feed_02.png')"></div>
|
||||
<div class="feed-content row">
|
||||
<div class="col left">
|
||||
<i class="ion-android-camera"></i>
|
||||
18K
|
||||
</div>
|
||||
<div class="col right">
|
||||
<i class="ion-android-pin"></i>
|
||||
5K
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="feed-item">
|
||||
<div class="feed-img" style="background-image: url('img/cube_feed_03.png')"></div>
|
||||
<div class="feed-content row">
|
||||
<div class="col left">
|
||||
<i class="ion-android-camera"></i>
|
||||
18K
|
||||
</div>
|
||||
<div class="col right">
|
||||
<i class="ion-android-pin"></i>
|
||||
5K
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="feed-item">
|
||||
<div class="feed-img" style="background-image: url('img/cube_feed_04.png')"></div>
|
||||
<div class="feed-content row">
|
||||
<div class="col left">
|
||||
<i class="ion-android-camera"></i>
|
||||
18K
|
||||
</div>
|
||||
<div class="col right">
|
||||
<i class="ion-android-pin"></i>
|
||||
5K
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="feed-item">
|
||||
<div class="feed-img" style="background-image: url('img/cube_feed_01.png')"></div>
|
||||
<div class="feed-content row">
|
||||
<div class="col left">
|
||||
<i class="ion-android-camera"></i>
|
||||
18K
|
||||
</div>
|
||||
<div class="col right">
|
||||
<i class="ion-android-pin"></i>
|
||||
5K
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--end cube feed item section-->
|
||||
</div>
|
||||
</div><!--end cube feed list section-->
|
||||
</ion-content><!--end cube feed section-->
|
||||
</ion-view>
|
||||
@@ -0,0 +1,32 @@
|
||||
<!--View Information-->
|
||||
<!--View name : Expense Setting-->
|
||||
<!--Controller name : expenseDashboardSettingCtrl-->
|
||||
<!--Controller path : www/templates/themes/expense-dashboard/js/controllers.js-->
|
||||
<!--State name : app.expenseSetting-->
|
||||
<!--URL : #app/expenseSetting-->
|
||||
|
||||
<ion-view title="Expense Setting">
|
||||
<!--left button on navigation bar-->
|
||||
<ion-nav-buttons side="left">
|
||||
<a ng-click="$ionicGoBack()" class="button back-button buttons button-clear header-item nav-back-btn">
|
||||
<i class="ion-android-arrow-back "></i>
|
||||
</a>
|
||||
</ion-nav-buttons><!--end left button on navigation bar-->
|
||||
|
||||
<ion-content scroll="false">
|
||||
<!--list section-->
|
||||
<md-list>
|
||||
<md-subheader class="md-warn">The setting will change Expense View</md-subheader>
|
||||
<md-list-item class="md-list-item-default" ng-click="navigateTo('app.expense',true)">
|
||||
<i class="fa fa-play"></i>
|
||||
|
||||
<p>Enable Row Animation</p>
|
||||
</md-list-item>
|
||||
<md-list-item class="md-list-item-default" ng-click="navigateTo('app.expense',false)">
|
||||
<i class="fa fa-stop"></i>
|
||||
|
||||
<p>Disable Row Animation</p>
|
||||
</md-list-item>
|
||||
</md-list><!--end list section-->
|
||||
</ion-content>
|
||||
</ion-view>
|
||||
@@ -0,0 +1,139 @@
|
||||
<!--View Information-->
|
||||
<!--View name : Expense Dashboard-->
|
||||
<!--Controller name : expenseDashboardCtrl-->
|
||||
<!--Controller path : www/templates/themes/expense-dashboard/js/controllers.js-->
|
||||
<!--State name : app.expense-->
|
||||
<!--URL : #app/expense-->
|
||||
|
||||
<ion-view title="Expense" id="expense-dashboard">
|
||||
|
||||
<!--right button on navigation bar-->
|
||||
<ion-nav-buttons side="right">
|
||||
<md-button class="md-icon-button ion-nav-button-right" ng-click="goToSetting()"
|
||||
aria-label="Setting">
|
||||
<i class="ion-android-more-vertical"></i>
|
||||
</md-button>
|
||||
</ion-nav-buttons> <!--end right button on navigation bar-->
|
||||
|
||||
<!--expense toolbar section-->
|
||||
<md-toolbar class="bar-subheader md-tall md-primary toolbar-expense">
|
||||
<div>
|
||||
<img src="img/profileAvatar.jpg" class="user-img"/>
|
||||
|
||||
<h1>John Able</h1>
|
||||
|
||||
<h2>Material Design</h2>
|
||||
</div>
|
||||
<a class="md-button md-accent md-fab fab-toolbar-medium" aria-label="Add">
|
||||
<i class="icon ion-plus"></i>
|
||||
</a>
|
||||
</md-toolbar><!--end expense toolbar section-->
|
||||
|
||||
<!--expense content section-->
|
||||
<ion-content id="expense-dashboard-content">
|
||||
|
||||
<!--Below code it will disable animation to better performance-->
|
||||
<div ng-if="!isAnimated" class="list-expense-menu">
|
||||
<div class="list-expense-menu-item" ng-click="doSomeThing()">
|
||||
<div class="row">
|
||||
<div class="col-20">
|
||||
<i class="fa fa-money"></i>
|
||||
</div>
|
||||
<div class="col-80 menu">
|
||||
<p class="header">Add Budget</p>
|
||||
|
||||
<p class="detail">Add your budget to start saving.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="list-expense-menu-item" ng-click="doSomeThing()">
|
||||
<div class="row">
|
||||
<div class="col-20">
|
||||
<i class="fa fa-sign-in"></i>
|
||||
</div>
|
||||
<div class="col-80 menu">
|
||||
<p class="header">Expense History</p>
|
||||
|
||||
<p class="detail">View expense history report</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="list-expense-menu-item" ng-click="doSomeThing()">
|
||||
<div class="row">
|
||||
<div class="col-20">
|
||||
<i class="fa fa-inbox"></i>
|
||||
</div>
|
||||
<div class="col-80 menu">
|
||||
<p class="header">Export to e-Mail</p>
|
||||
|
||||
<p class="detail">Export expense to e-Mail</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="list-expense-menu-item" ng-click="doSomeThing()">
|
||||
<div class="row">
|
||||
<div class="col-20">
|
||||
<i class="fa fa-line-chart"></i>
|
||||
</div>
|
||||
<div class="col-80 menu">
|
||||
<p class="header">Summary Report</p>
|
||||
|
||||
<p class="detail">View summary report.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--Below code it will show animation when selecting row.-->
|
||||
<md-list ng-if="isAnimated">
|
||||
<md-list-item class="row" ng-click="doSomeThing()">
|
||||
<div class="col-20 icon">
|
||||
<i class="fa fa-money"></i>
|
||||
</div>
|
||||
<div class="col-80 menu">
|
||||
<p class="header">Add Budget</p>
|
||||
|
||||
<p class="detail">Add your budget to start saving.</p>
|
||||
</div>
|
||||
</md-list-item>
|
||||
<md-divider></md-divider>
|
||||
|
||||
<md-list-item class="row" ng-click="doSomeThing()">
|
||||
<div class="col-20 icon">
|
||||
<i class="fa fa-sign-in"></i>
|
||||
</div>
|
||||
<div class="col-80 menu">
|
||||
<p class="header">Expense History</p>
|
||||
|
||||
<p class="detail">View expense history report</p>
|
||||
</div>
|
||||
</md-list-item>
|
||||
<md-divider></md-divider>
|
||||
|
||||
<md-list-item class="row" ng-click="doSomeThing()">
|
||||
<div class="col-20 icon">
|
||||
<i class="fa fa-inbox"></i>
|
||||
</div>
|
||||
<div class="col-80 menu">
|
||||
<p class="header">Export to e-Mail</p>
|
||||
|
||||
<p class="detail">Export expense to e-Mail</p>
|
||||
</div>
|
||||
</md-list-item>
|
||||
<md-divider></md-divider>
|
||||
|
||||
<md-list-item class="row" ng-click="doSomeThing()">
|
||||
<div class="col-20 icon">
|
||||
<i class="fa fa-line-chart"></i>
|
||||
</div>
|
||||
<div class="col-80 menu">
|
||||
<p class="header">Summary Report</p>
|
||||
|
||||
<p class="detail">View summary report.</p>
|
||||
</div>
|
||||
</md-list-item>
|
||||
<md-divider></md-divider>
|
||||
|
||||
</md-list>
|
||||
</ion-content><!--end expense content section-->
|
||||
</ion-view>
|
||||
@@ -0,0 +1,43 @@
|
||||
// Controller of expense dashboard page.
|
||||
appControllers.controller('expenseDashboardCtrl', function ($scope,$state,$stateParams) {
|
||||
|
||||
//$scope.isAnimated is the variable that use for receive object data from state params.
|
||||
//For enable/disable row animation.
|
||||
$scope.isAnimated = $stateParams.isAnimated;
|
||||
|
||||
// doSomeThing is for do something when user click on a button
|
||||
$scope.doSomeThing = function () {
|
||||
// You can put any function here.
|
||||
} // End doSomeThing.
|
||||
|
||||
// goToSetting is for navigate to Dashboard Setting page
|
||||
$scope.goToSetting = function () {
|
||||
$state.go("app.expenseSetting");
|
||||
};// End goToSetting.
|
||||
|
||||
});// End of controller expense dashboard.
|
||||
|
||||
// Controller of expense dashboard setting.
|
||||
appControllers.controller('expenseDashboardSettingCtrl', function ($scope, $state,$ionicHistory,$ionicViewSwitcher) {
|
||||
|
||||
// navigateTo is for navigate to other page
|
||||
// by using targetPage to be the destination state.
|
||||
// Parameter :
|
||||
// stateNames = target state to go.
|
||||
// objectData = Object data will send to destination state.
|
||||
$scope.navigateTo = function (stateName,objectData) {
|
||||
if ($ionicHistory.currentStateName() != stateName) {
|
||||
$ionicHistory.nextViewOptions({
|
||||
disableAnimate: false,
|
||||
disableBack: true
|
||||
});
|
||||
|
||||
//Next view animate will display in back direction
|
||||
$ionicViewSwitcher.nextDirection('back');
|
||||
|
||||
$state.go(stateName, {
|
||||
isAnimated: objectData,
|
||||
});
|
||||
}
|
||||
}; // End of navigateTo.
|
||||
}); // End of controller expense dashboard setting.
|
||||
@@ -0,0 +1,118 @@
|
||||
<!--View Information-->
|
||||
<!--View name : Location Feed-->
|
||||
<!--State name : app.locationFeed-->
|
||||
<!--URL : #app/locationFeed-->
|
||||
|
||||
<ion-view title="Location">
|
||||
<!--location feed section-->
|
||||
<ion-content id="location-feed-content">
|
||||
<!--list section-->
|
||||
<div class="location-list">
|
||||
<!--location item section-->
|
||||
<div class="location-item">
|
||||
<div class="location-img" style="background-image:url('img/location_feed_01.png')">
|
||||
|
||||
</div>
|
||||
<div class="location-content row">
|
||||
<div class="col-90">
|
||||
<h1>
|
||||
Stone Garden
|
||||
</h1>
|
||||
|
||||
<p>
|
||||
<i class="fa fa-flag"></i> Bangkok Thailand
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-10">
|
||||
<span class="text-add">+Wishlist</span>
|
||||
</div>
|
||||
</div>
|
||||
</div><!--end location item section-->
|
||||
|
||||
<!--location item section-->
|
||||
<div class="location-item">
|
||||
<div class="location-img" style="background-image:url('img/location_feed_02.png')">
|
||||
|
||||
</div>
|
||||
<div class="location-content row">
|
||||
<div class="col-90">
|
||||
<h1>
|
||||
Little Clock tower
|
||||
</h1>
|
||||
|
||||
<p>
|
||||
<i class="fa fa-flag"></i> Bangkok Thailand
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-10">
|
||||
<span class="text-add">+Wishlist</span>
|
||||
</div>
|
||||
</div>
|
||||
</div><!--end location item section-->
|
||||
|
||||
<!--location item section-->
|
||||
<div class="location-item">
|
||||
<div class="location-img" style="background-image:url('img/location_feed_03.png')">
|
||||
|
||||
</div>
|
||||
<div class="location-content row">
|
||||
<div class="col-90">
|
||||
<h1>
|
||||
Play ground
|
||||
</h1>
|
||||
|
||||
<p>
|
||||
<i class="fa fa-flag"></i> Bangkok Thailand
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-10">
|
||||
<span class="text-add">+Wishlist</span>
|
||||
</div>
|
||||
</div>
|
||||
</div><!--end location item section-->
|
||||
|
||||
<!--location item section-->
|
||||
<div class="location-item">
|
||||
<div class="location-img" style="background-image:url('img/location_feed_04.png')">
|
||||
|
||||
</div>
|
||||
<div class="location-content row">
|
||||
<div class="col-90">
|
||||
<h1>
|
||||
Green park
|
||||
</h1>
|
||||
|
||||
<p>
|
||||
<i class="fa fa-flag"></i> Bangkok Thailand
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-10">
|
||||
<span class="text-add">+Wishlist</span>
|
||||
</div>
|
||||
</div>
|
||||
</div><!--end location item section-->
|
||||
|
||||
<!--location item section-->
|
||||
<div class="location-item">
|
||||
<div class="location-img" style="background-image:url('img/location_feed_05.png')">
|
||||
|
||||
</div>
|
||||
<div class="location-content row">
|
||||
<div class="col-90">
|
||||
<h1>
|
||||
Woman Garden
|
||||
</h1>
|
||||
|
||||
<p>
|
||||
<i class="fa fa-flag"></i> Bangkok Thailand
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-10">
|
||||
<span class="text-add">+Wishlist</span>
|
||||
</div>
|
||||
</div>
|
||||
</div><!--end location item section-->
|
||||
|
||||
</div><!--end list section-->
|
||||
</ion-content><!--end location feed section-->
|
||||
</ion-view>
|
||||
@@ -0,0 +1,114 @@
|
||||
<!--View Information-->
|
||||
<!--View name : Menu Dashboard-->
|
||||
<!--Controller name : menuDashboardCtrl-->
|
||||
<!--Controller path : www/templates/themes/menu-dashboard/js/controllers.js-->
|
||||
<!--State name : app.menuDashboard-->
|
||||
<!--URL : #app/menuDashboard-->
|
||||
|
||||
<ion-view title="Dashboard">
|
||||
<!--menu dashboard section-->
|
||||
<ion-content id="menu-dashboard-content">
|
||||
<!--panel section-->
|
||||
<div class="menu-panel">
|
||||
<div class="row">
|
||||
<div class="col-33" ng-click="showToast('Image')">
|
||||
<i class="fa fa-picture-o"></i>
|
||||
|
||||
<p>Image</p>
|
||||
</div>
|
||||
<div class="col-33" ng-click="showToast('Music')">
|
||||
<i class="fa fa fa-music"></i>
|
||||
|
||||
<p>Music</p>
|
||||
</div>
|
||||
<div class="col-33" ng-click="showToast('Camera')">
|
||||
<i class="fa fa fa-camera"></i>
|
||||
|
||||
<p>Camera</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-33" ng-click="showToast('Video')">
|
||||
<i class="fa fa-video-camera"></i>
|
||||
|
||||
<p>Video</p>
|
||||
</div>
|
||||
<div class="col-33" ng-click="showToast('Setting')">
|
||||
<i class="fa fa-cog"></i>
|
||||
|
||||
<p>Setting</p>
|
||||
</div>
|
||||
<div class="col-33" ng-click="showToast('Contract')">
|
||||
<i class="fa fa-users"></i>
|
||||
|
||||
<p>Contract</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-33" ng-click="showToast('Inbox')">
|
||||
<i class="fa fa-inbox"></i>
|
||||
|
||||
<p>Inbox</p>
|
||||
</div>
|
||||
<div class="col-33" ng-click="showToast('Card')">
|
||||
<i class="fa fa-credit-card"></i>
|
||||
|
||||
<p>Card</p>
|
||||
</div>
|
||||
<div class="col-33" ng-click="showToast('More')">
|
||||
<i class="fa fa-ellipsis-h"></i>
|
||||
|
||||
<p>More</p>
|
||||
</div>
|
||||
</div>
|
||||
</div><!--end panel section-->
|
||||
|
||||
<!--panel footer section-->
|
||||
<div class="menu-dashboard-footer">
|
||||
<md-whiteframe class="md-whiteframe-z1" layout ng-click="showToast('Wordpress Blog')">
|
||||
<div class="row">
|
||||
<div class="col-10">
|
||||
<i class="fa fa-wordpress"></i>
|
||||
</div>
|
||||
<div class="col-80">
|
||||
Wordpress Blog
|
||||
</div>
|
||||
<div class="col-10">
|
||||
<i class="fa fa-angle-right"></i>
|
||||
</div>
|
||||
</div>
|
||||
</md-whiteframe>
|
||||
|
||||
<md-whiteframe class="md-whiteframe-z1" layout ng-click="showToast('Google Connect')">
|
||||
<div class="row">
|
||||
<div class="col-10">
|
||||
<i class="fa fa-google-plus"></i>
|
||||
</div>
|
||||
<div class="col-80">
|
||||
Google Connect
|
||||
</div>
|
||||
<div class="col-10">
|
||||
<i class="fa fa-angle-right"></i>
|
||||
</div>
|
||||
</div>
|
||||
</md-whiteframe>
|
||||
|
||||
<md-whiteframe class="md-whiteframe-z1" layout ng-click="showToast('Facebook Connect')">
|
||||
<div class="row">
|
||||
<div class="col-10">
|
||||
<i class="fa fa-facebook"></i>
|
||||
</div>
|
||||
<div class="col-80">
|
||||
Facebook Connect
|
||||
</div>
|
||||
<div class="col-10">
|
||||
<i class="fa fa-angle-right"></i>
|
||||
</div>
|
||||
</div>
|
||||
</md-whiteframe>
|
||||
|
||||
</div><!--end panel footer section-->
|
||||
</ion-content><!--Menu dashboard section-->
|
||||
</ion-view>
|
||||
@@ -0,0 +1,18 @@
|
||||
// Controller of menu dashboard page.
|
||||
appControllers.controller('menuDashboardCtrl', function ($scope, $mdToast) {
|
||||
//ShowToast for show toast when user press button.
|
||||
$scope.showToast = function (menuName) {
|
||||
//Calling $mdToast.show to show toast.
|
||||
$mdToast.show({
|
||||
controller: 'toastController',
|
||||
templateUrl: 'toast.html',
|
||||
hideDelay: 800,
|
||||
position: 'top',
|
||||
locals: {
|
||||
displayOption: {
|
||||
title: 'Going to ' + menuName + " !!"
|
||||
}
|
||||
}
|
||||
});
|
||||
}// End showToast.
|
||||
});// End of controller menu dashboard.
|
||||
@@ -0,0 +1,360 @@
|
||||
<!--View Information-->
|
||||
<!--View name : NEWS Feed-->
|
||||
<!--State name : app.newsFeed-->
|
||||
<!--URL : #app/newsFeed-->
|
||||
|
||||
<ion-view title="NEWS">
|
||||
<!--news feed section-->
|
||||
<ion-content id="news-feed-content">
|
||||
|
||||
<div class="news-item">
|
||||
|
||||
<!--header section-->
|
||||
<div class="row header">
|
||||
<div class="col-20">
|
||||
<img src="img/profileAvatar.jpg" class="user-img"/>
|
||||
</div>
|
||||
<div class="col-80">
|
||||
<span class="name">
|
||||
John Smith
|
||||
</span>
|
||||
<br/>
|
||||
<span class="datetime">
|
||||
1 hours ago
|
||||
</span>
|
||||
</div>
|
||||
</div><!--end header section-->
|
||||
|
||||
<!--detail section-->
|
||||
<div class="row detail">
|
||||
<div class="col">
|
||||
<h1>
|
||||
Material is the metaphor
|
||||
</h1>
|
||||
|
||||
<p class="content">
|
||||
A material metaphor is the unifying theory of a rationalized space and a system of motion. The
|
||||
material is grounded in tactile reality, inspired by the study of paper and ink, yet
|
||||
technologically advanced and open to imagination and magic.
|
||||
</p>
|
||||
|
||||
<p class="content">
|
||||
http://google.com/design/spec/material-design/
|
||||
</p>
|
||||
|
||||
<p class="tags">
|
||||
<i class="fa fa-tags"></i> Material Design, Ionic
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--footer section-->
|
||||
<div class="row footer">
|
||||
<div class="col-33">
|
||||
<span class="number">10.9k</span> <span class="wording">Likes</span>
|
||||
</div>
|
||||
<div class="col-33">
|
||||
<span class="number">20k</span> <span class="wording">Comments</span>
|
||||
</div>
|
||||
<div class="col-33">
|
||||
<span class="number">1k</span> <span class="wording">Shared</span>
|
||||
</div>
|
||||
</div><!--end footer section-->
|
||||
|
||||
</div>
|
||||
|
||||
<div class="news-item">
|
||||
|
||||
<!--header section-->
|
||||
<div class="row header">
|
||||
<div class="col-20">
|
||||
<img src="img/app_icon.png" class="user-img"/>
|
||||
</div>
|
||||
<div class="col-80">
|
||||
<span class="name">
|
||||
Ionic Blog
|
||||
</span>
|
||||
<br/>
|
||||
<span class="datetime">
|
||||
3 hours ago
|
||||
</span>
|
||||
</div>
|
||||
</div><!--end header section-->
|
||||
|
||||
<!--detail section-->
|
||||
<div class="row detail">
|
||||
<div class="col">
|
||||
<h1>
|
||||
Pushing the Limits: New Push Features
|
||||
</h1>
|
||||
|
||||
<p class="content">
|
||||
When our Platform team last checked in with you, we’d sent a few hundred thousand push
|
||||
notifications during our alpha. Now, we’ve sent over a million! That’s a 200% increase each
|
||||
month! We’re getting real validation for the Ionic Platform, and the excitement among the team
|
||||
here at Ionic cannot be overstated. That said, we can’t take all the credit.
|
||||
</p>
|
||||
|
||||
<p class="content">
|
||||
http://blog.ionic.io/
|
||||
</p>
|
||||
|
||||
<p class="tags">
|
||||
<i class="fa fa-tags"></i> Material Design, Ionic
|
||||
</p>
|
||||
</div>
|
||||
</div><!--end detail section-->
|
||||
|
||||
<!--footer section-->
|
||||
<div class="row footer">
|
||||
<div class="col-33">
|
||||
<span class="number">10.9k</span> <span class="wording">Likes</span>
|
||||
</div>
|
||||
<div class="col-33">
|
||||
<span class="number">20k</span> <span class="wording">Comments</span>
|
||||
</div>
|
||||
<div class="col-33">
|
||||
<span class="number">1k</span> <span class="wording">Shared</span>
|
||||
</div>
|
||||
</div><!--end footer section-->
|
||||
|
||||
</div>
|
||||
|
||||
<div class="news-item">
|
||||
|
||||
<!--header section-->
|
||||
<div class="row header">
|
||||
<div class="col-20">
|
||||
<img src="img/profileAvatar.jpg" class="user-img"/>
|
||||
</div>
|
||||
<div class="col-80">
|
||||
<span class="name">
|
||||
John Smith
|
||||
</span>
|
||||
<br/>
|
||||
<span class="datetime">
|
||||
5 hours ago
|
||||
</span>
|
||||
</div>
|
||||
</div><!--end header section-->
|
||||
|
||||
<!--detail section-->
|
||||
<div class="row detail">
|
||||
<div class="col">
|
||||
<h1>
|
||||
Material design Goals
|
||||
</h1>
|
||||
|
||||
<p class="content">
|
||||
Create a visual language that synthesizes classic principles of good design with the innovation
|
||||
and possibility of technology and science.
|
||||
|
||||
Develop a single underlying system that allows for a unified experience across platforms and
|
||||
device sizes. Mobile precepts are fundamental, but touch, voice, mouse, and keyboard are all
|
||||
first-class input methods.
|
||||
</p>
|
||||
|
||||
<p class="content">
|
||||
http://google.com/design/spec/material-design/
|
||||
</p>
|
||||
|
||||
<p class="tags">
|
||||
<i class="fa fa-tags"></i> Material Design, Ionic
|
||||
</p>
|
||||
</div>
|
||||
</div><!--end detail section-->
|
||||
|
||||
<!--footer section-->
|
||||
<div class="row footer">
|
||||
<div class="col-33">
|
||||
<span class="number">10.9k</span> <span class="wording">Likes</span>
|
||||
</div>
|
||||
<div class="col-33">
|
||||
<span class="number">20k</span> <span class="wording">Comments</span>
|
||||
</div>
|
||||
<div class="col-33">
|
||||
<span class="number">1k</span> <span class="wording">Shared</span>
|
||||
</div>
|
||||
</div><!--end footer section-->
|
||||
|
||||
</div>
|
||||
|
||||
<div class="news-item">
|
||||
|
||||
<!--header section-->
|
||||
<div class="row header">
|
||||
<div class="col-20">
|
||||
<img src="img/app_icon.png" class="user-img"/>
|
||||
</div>
|
||||
<div class="col-80">
|
||||
<span class="name">
|
||||
Ionic Blog
|
||||
</span>
|
||||
<br/>
|
||||
<span class="datetime">
|
||||
9 hours ago
|
||||
</span>
|
||||
</div>
|
||||
</div><!--end header section-->
|
||||
|
||||
<!--detail section-->
|
||||
<div class="row detail">
|
||||
<div class="col">
|
||||
<h1>
|
||||
Ionic’s First Hack Day!
|
||||
</h1>
|
||||
|
||||
<p class="content">
|
||||
On Friday, we held our first-ever Ionic Hack Day. Everyone was encouraged to take the entire day
|
||||
to work on a project of interest that could be related, or not, to Ionic.
|
||||
</p>
|
||||
|
||||
<p class="content">
|
||||
http://blog.ionic.io/
|
||||
</p>
|
||||
|
||||
<p class="tags">
|
||||
<i class="fa fa-tags"></i> Material Design, Ionic
|
||||
</p>
|
||||
</div>
|
||||
</div><!--end detail section-->
|
||||
|
||||
<!--footer section-->
|
||||
<div class="row footer">
|
||||
<div class="col-33">
|
||||
<span class="number">10.9k</span> <span class="wording">Likes</span>
|
||||
</div>
|
||||
<div class="col-33">
|
||||
<span class="number">20k</span> <span class="wording">Comments</span>
|
||||
</div>
|
||||
<div class="col-33">
|
||||
<span class="number">1k</span> <span class="wording">Shared</span>
|
||||
</div>
|
||||
</div><!--end footer section-->
|
||||
|
||||
</div>
|
||||
|
||||
<div class="news-item">
|
||||
<!--header section-->
|
||||
<div class="row header">
|
||||
<div class="col-20">
|
||||
<img src="img/app_icon.png" class="user-img"/>
|
||||
</div>
|
||||
<div class="col-80">
|
||||
<span class="name">
|
||||
Ionic Blog
|
||||
</span>
|
||||
<br/>
|
||||
<span class="datetime">
|
||||
20 hours ago
|
||||
</span>
|
||||
</div>
|
||||
</div><!--end header section-->
|
||||
|
||||
<!--detail section-->
|
||||
<div class="row detail">
|
||||
<div class="col">
|
||||
<h1>
|
||||
Web Developers Will Rule The World
|
||||
</h1>
|
||||
|
||||
<p class="content">
|
||||
I’m a strong believer that companies truly hit their stride once they know exactly who their
|
||||
target user is, and how that user fits into the higher purpose of the company.
|
||||
|
||||
Recently, we’ve found and embraced ours: Ionic empowers web developers to build compelling
|
||||
mobile apps without having to change careers. That’s it. That’s why we exist.
|
||||
</p>
|
||||
|
||||
<p class="content">
|
||||
http://blog.ionic.io/
|
||||
</p>
|
||||
|
||||
<p class="tags">
|
||||
<i class="fa fa-tags"></i> Material Design, Ionic
|
||||
</p>
|
||||
</div>
|
||||
</div><!--end detail section-->
|
||||
|
||||
<!--footer section-->
|
||||
<div class="row footer">
|
||||
<div class="col-33">
|
||||
<span class="number">10.9k</span> <span class="wording">Likes</span>
|
||||
</div>
|
||||
<div class="col-33">
|
||||
<span class="number">20k</span> <span class="wording">Comments</span>
|
||||
</div>
|
||||
<div class="col-33">
|
||||
<span class="number">1k</span> <span class="wording">Shared</span>
|
||||
</div>
|
||||
</div><!--end footer section-->
|
||||
|
||||
</div>
|
||||
|
||||
<div class="news-item">
|
||||
|
||||
<!--header section-->
|
||||
<div class="row header">
|
||||
<div class="col-20">
|
||||
<img src="img/profileAvatar.jpg" class="user-img"/>
|
||||
</div>
|
||||
<div class="col-80">
|
||||
<span class="name">
|
||||
John Smith
|
||||
</span>
|
||||
<br/>
|
||||
<span class="datetime">
|
||||
1 day ago
|
||||
</span>
|
||||
</div>
|
||||
</div><!--end header section-->
|
||||
|
||||
<!--detail section-->
|
||||
<div class="row detail">
|
||||
<div class="col">
|
||||
<h1>
|
||||
Material design
|
||||
</h1>
|
||||
|
||||
<p class="content">
|
||||
We challenged ourselves to create a visual language for our users that synthesizes the classic
|
||||
principles of good design with the innovation and possibility of technology and science. This is
|
||||
material design. This spec is a living document that will be updated as we continue to develop
|
||||
the tenets and specifics of material design.
|
||||
</p>
|
||||
|
||||
<p class="content">
|
||||
http://google.com/design/spec/material-design/
|
||||
</p>
|
||||
|
||||
<p class="tags">
|
||||
<i class="fa fa-tags"></i> Material Design, Ionic
|
||||
</p>
|
||||
</div>
|
||||
</div><!--end detail section-->
|
||||
|
||||
<!--footer section-->
|
||||
<div class="row footer">
|
||||
<div class="col-33">
|
||||
<span class="number">10.9k</span> <span class="wording">Likes</span>
|
||||
</div>
|
||||
<div class="col-33">
|
||||
<span class="number">20k</span> <span class="wording">Comments</span>
|
||||
</div>
|
||||
<div class="col-33">
|
||||
<span class="number">1k</span> <span class="wording">Shared</span>
|
||||
</div>
|
||||
</div><!--end footer section-->
|
||||
|
||||
</div>
|
||||
|
||||
<div class="row"></div>
|
||||
</ion-content><!--end news feed section-->
|
||||
|
||||
<!--button section-->
|
||||
<div class="footer-fab-bar">
|
||||
<a class="md-button md-accent md-fab fab-footer" aria-label="Add">
|
||||
<i class="ion ion-plus"></i>
|
||||
</a>
|
||||
</div><!--end button section-->
|
||||
</ion-view>
|
||||
@@ -0,0 +1,122 @@
|
||||
<!--View Information-->
|
||||
<!--View name : Online Course-->
|
||||
<!--State name : app.onlineCourse-->
|
||||
<!--URL : #app/onlineCourse-->
|
||||
|
||||
<!--Online course section-->
|
||||
<ion-view title="Material School" id="online-course">
|
||||
<ion-content id="online-course-content">
|
||||
<!--toolbar section-->
|
||||
<md-toolbar class="bar-subheader md-tall md-primary toolbar-online-course ">
|
||||
<div>
|
||||
<img src="img/profileAvatar.jpg" class="user-img"/>
|
||||
|
||||
<h1>John Able</h1>
|
||||
|
||||
<h2>johnable@material.com</h2>
|
||||
</div>
|
||||
|
||||
</md-toolbar> <!--end toolbar section-->
|
||||
<div class="course-list">
|
||||
|
||||
<!--content item section-->
|
||||
<div class="course-item">
|
||||
<div class="title angular-course-background">
|
||||
Javascript
|
||||
</div>
|
||||
<div class="content">
|
||||
<h1>
|
||||
AngularJs Basic
|
||||
</h1>
|
||||
|
||||
<p>
|
||||
Getting started with Angularjs and Bootstrap. Awesome javascript framework
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<a href="" class="md-raised md-button md-default-theme angular-course-background">
|
||||
<i class="fa fa-play"></i> 90 min</a>
|
||||
<a href="" class="md-raised md-button md-default-theme angular-course-background">
|
||||
<i class="fa fa-bookmark"></i>Save</a>
|
||||
</p>
|
||||
</div>
|
||||
</div> <!--end content item section-->
|
||||
|
||||
<!--content item section-->
|
||||
<div class="course-item">
|
||||
<div class="title ionic-course-background">
|
||||
Ionic Framework
|
||||
</div>
|
||||
<div class="content">
|
||||
<h1>
|
||||
Ionic Framework Basic
|
||||
</h1>
|
||||
|
||||
<p>
|
||||
Getting started with Ionic Framework. You will know how to create a mobile app super fast.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<a href="" class="md-raised md-button md-default-theme ionic-course-background">
|
||||
<i class="fa fa-play"></i> 120 min</a>
|
||||
<a href="" class="md-raised md-button md-default-theme ionic-course-background">
|
||||
<i class="fa fa-bookmark"></i>Save</a>
|
||||
</p>
|
||||
</div>
|
||||
</div><!--end content item section-->
|
||||
|
||||
<!--content item section-->
|
||||
<div class="course-item">
|
||||
<div class="title ios-course-background">
|
||||
IOS Development
|
||||
</div>
|
||||
<div class="content">
|
||||
<h1>
|
||||
IOS Basic
|
||||
</h1>
|
||||
|
||||
<p>
|
||||
Getting started with IOS Development and start your first mobile app.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<a href="" class="md-raised md-button md-default-theme ios-course-background">
|
||||
<i class="fa fa-play"></i> 180 min</a>
|
||||
<a href="" class="md-raised md-button md-default-theme ios-course-background">
|
||||
<i class="fa fa-bookmark"></i>Save</a>
|
||||
</p>
|
||||
</div>
|
||||
</div><!--end content item section-->
|
||||
|
||||
<!--content item section-->
|
||||
<div class="course-item">
|
||||
<div class="title android-course-background">
|
||||
Android Development
|
||||
</div>
|
||||
<div class="content">
|
||||
<h1>
|
||||
Android Basic
|
||||
</h1>
|
||||
|
||||
<p>
|
||||
Getting started with Android Development and start your first mobile app.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<a href="" class="md-raised md-button md-default-theme android-course-background">
|
||||
<i class="fa fa-play"></i> 124 min</a>
|
||||
<a href="" class="md-raised md-button md-default-theme android-course-background">
|
||||
<i class="fa fa-bookmark"></i>Save</a>
|
||||
</p>
|
||||
</div>
|
||||
</div><!--end content item section-->
|
||||
|
||||
</div>
|
||||
</ion-content>
|
||||
<div class="footer-fab-bar">
|
||||
<a class="md-button md-accent md-fab fab-footer" aria-label="Add">
|
||||
<i class="ion-android-star"></i>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</ion-view><!--end online course section-->
|
||||
@@ -0,0 +1,155 @@
|
||||
<!--View Information-->
|
||||
<!--View name : Pricing-->
|
||||
<!--State name : app.pricing-->
|
||||
<!--URL : #app/pricing-->
|
||||
|
||||
<ion-view title="Material Store">
|
||||
<!--pricing section-->
|
||||
<ion-content id="pricing-content">
|
||||
<!--header section-->
|
||||
<div class="row price-header">
|
||||
<div class="col header-name">
|
||||
Starter package
|
||||
</div>
|
||||
<div class="col header-more">
|
||||
View Details <i class="fa fa-angle-right"></i>
|
||||
</div>
|
||||
</div> <!--end header section-->
|
||||
|
||||
<!--price detail section-->
|
||||
<div class="row price-detail">
|
||||
<div class="col-33 package-name">
|
||||
1 Month
|
||||
</div>
|
||||
<div class="col-33 package-subscribe">
|
||||
subscribe
|
||||
</div>
|
||||
<div class="col-33 subscribe-button">
|
||||
<a class="md-raised md-button md-default-theme material-background">
|
||||
$4.99
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row price-detail">
|
||||
<div class="col-33 package-name">
|
||||
3 Month
|
||||
</div>
|
||||
<div class="col-33 package-subscribe">
|
||||
subscribe
|
||||
</div>
|
||||
<div class="col-33 subscribe-button">
|
||||
<a class="md-raised md-button md-default-theme material-background">
|
||||
$11.99
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row price-detail">
|
||||
<div class="col-33 package-name">
|
||||
1 Year
|
||||
</div>
|
||||
<div class="col-33 package-subscribe">
|
||||
subscribe
|
||||
</div>
|
||||
<div class="col-33 subscribe-button">
|
||||
<a class="md-raised md-button md-default-theme material-background">
|
||||
$39.99
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<!--end price detail section-->
|
||||
<hr/>
|
||||
|
||||
<!--header section-->
|
||||
<div class="row price-header">
|
||||
<div class="col header-name">
|
||||
Hot package
|
||||
</div>
|
||||
<div class="col header-more">
|
||||
View Details <i class="fa fa-angle-right"></i>
|
||||
</div>
|
||||
</div><!--end header section-->
|
||||
|
||||
<!--price detail section-->
|
||||
<div class="row price-detail">
|
||||
<div class="col-33 package-name">
|
||||
6 Month
|
||||
</div>
|
||||
<div class="col-33 package-subscribe">
|
||||
subscribe
|
||||
</div>
|
||||
<div class="col-33 subscribe-button">
|
||||
<a class="md-raised md-button md-default-theme md-warn">
|
||||
$49.99
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row price-detail">
|
||||
<div class="col-33 package-name">
|
||||
10 Month
|
||||
</div>
|
||||
<div class="col-33 package-subscribe">
|
||||
subscribe
|
||||
</div>
|
||||
<div class="col-33 subscribe-button">
|
||||
<a class="md-raised md-button md-default-theme md-warn">
|
||||
$79.99
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row price-detail">
|
||||
<div class="col-33 package-name">
|
||||
1 Year
|
||||
</div>
|
||||
<div class="col-33 package-subscribe">
|
||||
subscribe
|
||||
</div>
|
||||
<div class="col-33 subscribe-button">
|
||||
<a class="md-raised md-button md-default-theme md-warn">
|
||||
$89.99
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<!--end price detail section-->
|
||||
<hr/>
|
||||
|
||||
<!--header section-->
|
||||
<div class="row price-header">
|
||||
<div class="col header-name">
|
||||
Gold package
|
||||
</div>
|
||||
<div class="col header-more">
|
||||
View Details <i class="fa fa-angle-right"></i>
|
||||
</div>
|
||||
</div><!--end header section-->
|
||||
|
||||
<!--price detail section-->
|
||||
<div class="row price-detail">
|
||||
<div class="col-33 package-name">
|
||||
3 Month
|
||||
</div>
|
||||
<div class="col-33 package-subscribe">
|
||||
subscribe
|
||||
</div>
|
||||
<div class="col-33 subscribe-button">
|
||||
<a class="md-raised md-button md-default-theme gold-background">
|
||||
$39.99
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row price-detail">
|
||||
<div class="col-33 package-name">
|
||||
1 Year
|
||||
</div>
|
||||
<div class="col-33 package-subscribe">
|
||||
subscribe
|
||||
</div>
|
||||
<div class="col-33 subscribe-button">
|
||||
<a class="md-raised md-button md-default-theme gold-background">
|
||||
$149.99
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<!--end price detail section-->
|
||||
</ion-content><!--end pricing section-->
|
||||
</ion-view>
|
||||
@@ -0,0 +1,161 @@
|
||||
<!--View Information-->
|
||||
<!--View name : Restaurant-->
|
||||
<!--State name : app.restaurant-->
|
||||
<!--URL : #app/restaurant-->
|
||||
|
||||
<ion-view title="Material Restaurant">
|
||||
<!--restaurant section-->
|
||||
<ion-content id="restaurant">
|
||||
<!--slider section-->
|
||||
<ion-slide-box id="restaurant-slide-box" show-pager="false" active-slide="0">
|
||||
<ion-slide class="slide-01">
|
||||
<div class="content">
|
||||
<h1>
|
||||
Bakery Day
|
||||
</h1>
|
||||
|
||||
<p>
|
||||
40% Off Now!!
|
||||
</p>
|
||||
</div>
|
||||
</ion-slide>
|
||||
<ion-slide class="slide-02">
|
||||
<div class="content">
|
||||
<h1>
|
||||
Bread Hour
|
||||
</h1>
|
||||
|
||||
<p>
|
||||
90% Off Now!!
|
||||
</p>
|
||||
</div>
|
||||
</ion-slide>
|
||||
<ion-slide class="slide-03">
|
||||
<div class="content">
|
||||
<h1>
|
||||
CupCake Festival
|
||||
</h1>
|
||||
|
||||
<p>
|
||||
50% Off Friday
|
||||
</p>
|
||||
</div>
|
||||
</ion-slide>
|
||||
</ion-slide-box><!--end slider section-->
|
||||
|
||||
<!--restaurant content section-->
|
||||
<div id="restaurant-content">
|
||||
<div class="row ">
|
||||
<div class="col promotions-header">
|
||||
<h1>
|
||||
<i class="fa fa-bullhorn"></i> Promotions
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
<!--product slide section-->
|
||||
<ion-scroll direction="x" class="product-slide-list">
|
||||
<div class="feed-list">
|
||||
<div class="feed-item">
|
||||
<div class="img-header" style="background-image: url('img/food_02.png')">
|
||||
</div>
|
||||
<div class="content">
|
||||
SALE 50%
|
||||
</div>
|
||||
</div>
|
||||
<div class="feed-item">
|
||||
<div class="img-header" style="background-image: url('img/food_01.png')">
|
||||
</div>
|
||||
<div class="content">
|
||||
SALE 90%
|
||||
</div>
|
||||
</div>
|
||||
<div class="feed-item">
|
||||
<div class="img-header" style="background-image: url('img/food_03.png')">
|
||||
</div>
|
||||
<div class="content">
|
||||
SALE 70%
|
||||
</div>
|
||||
</div>
|
||||
<div class="feed-item">
|
||||
<div class="img-header" style="background-image: url('img/food_04.png')">
|
||||
</div>
|
||||
<div class="content">
|
||||
SALE 60%
|
||||
</div>
|
||||
</div>
|
||||
<div class="feed-item">
|
||||
<div class="img-header" style="background-image: url('img/food_05.png')">
|
||||
</div>
|
||||
<div class="content">
|
||||
SALE 30%
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ion-scroll>
|
||||
<div class="row">
|
||||
<div class="col menu-header">
|
||||
<h1>
|
||||
<i class="fa fa-spoon"></i> More Menu
|
||||
</h1>
|
||||
</div>
|
||||
</div><!--end product slide section-->
|
||||
|
||||
<!--product slide section-->
|
||||
<ion-scroll direction="x" class="product-slide-list">
|
||||
<div class="feed-list">
|
||||
<div class="feed-item">
|
||||
<div class="img-header" style="background-image: url('img/food_07.png')">
|
||||
</div>
|
||||
<div class="content">
|
||||
SALE 60%
|
||||
</div>
|
||||
</div>
|
||||
<div class="feed-item">
|
||||
<div class="img-header" style="background-image: url('img/food_08.png')">
|
||||
</div>
|
||||
<div class="content">
|
||||
SALE 90%
|
||||
</div>
|
||||
</div>
|
||||
<div class="feed-item">
|
||||
<div class="img-header" style="background-image: url('img/food_09.png')">
|
||||
</div>
|
||||
<div class="content">
|
||||
SALE 40%
|
||||
</div>
|
||||
</div>
|
||||
<div class="feed-item">
|
||||
<div class="img-header" style="background-image: url('img/food_06.png')">
|
||||
</div>
|
||||
<div class="content">
|
||||
SALE 50%
|
||||
</div>
|
||||
</div>
|
||||
<div class="feed-item">
|
||||
<div class="img-header" style="background-image: url('img/food_10.png')">
|
||||
</div>
|
||||
<div class="content">
|
||||
SALE 50%
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ion-scroll><!--end product slide section-->
|
||||
|
||||
<div class="row">
|
||||
<div class="col menu-header">
|
||||
<h1>
|
||||
<i class="fa fa-inbox"></i> Reservation
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col menu-content-detail">
|
||||
Reservation@material.com
|
||||
<br/>
|
||||
Thanks You.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div> <!--end restaurant content section-->
|
||||
</ion-content><!--end restaurant section-->
|
||||
</ion-view>
|
||||
@@ -0,0 +1,32 @@
|
||||
<!--View Information-->
|
||||
<!--View name : Try App No Back Button-->
|
||||
<!--State name : app.tryAppNoBackBtn-->
|
||||
<!--URL : #app/tryAppNoBackBtn-->
|
||||
|
||||
<ion-view title="Try App">
|
||||
<!--try app section-->
|
||||
<ion-slide-box id="try-app-content" active-slide="0">
|
||||
<!--slider section-->
|
||||
<ion-slide class="slide-01">
|
||||
<div class="row try-app-footer-content">
|
||||
<div class="col-50">
|
||||
<a href="#/app/fakeSignUp" class="left md-raised md-button md-default-theme ">SIGN UP</a>
|
||||
</div>
|
||||
<div class="col-50">
|
||||
<a href="#/app/fakeLogin" class="right md-raised md-button md-default-theme">Log In</a>
|
||||
</div>
|
||||
</div>
|
||||
</ion-slide>
|
||||
<ion-slide class="slide-02"></ion-slide>
|
||||
<ion-slide class="slide-03"></ion-slide>
|
||||
<ion-slide class="slide-04"></ion-slide>
|
||||
<ion-slide class="slide-05"></ion-slide>
|
||||
<ion-slide class="slide-06"></ion-slide>
|
||||
<ion-slide class="slide-07"></ion-slide>
|
||||
<ion-slide class="slide-08">
|
||||
<a href="" class="sign-up-button md-raised md-button md-default-theme material-background">
|
||||
SIGN UP MATERIAL</a>
|
||||
</ion-slide>
|
||||
<!--end slider section-->
|
||||
</ion-slide-box><!--end try app section-->
|
||||
</ion-view>
|
||||
@@ -0,0 +1,40 @@
|
||||
<!--View Information-->
|
||||
<!--View name : TryApp-->
|
||||
<!--State name : app.tryApp-->
|
||||
<!--URL : #app/tryApp-->
|
||||
|
||||
<ion-view title="Try App">
|
||||
<!--left button on navigation bar-->
|
||||
<ion-nav-buttons side="left">
|
||||
<a ng-click="$ionicGoBack()" class="button back-button buttons button-clear header-item nav-back-btn">
|
||||
<i class="ion-android-arrow-back"></i>
|
||||
</a>
|
||||
</ion-nav-buttons><!--end left button on navigation bar-->
|
||||
|
||||
<!--try app section-->
|
||||
<ion-slide-box id="try-app-content" active-slide="0">
|
||||
<!--slider section-->
|
||||
<ion-slide class="slide-01">
|
||||
<div class="row try-app-footer-content">
|
||||
<div class="col-50">
|
||||
<a href="#/app/fakeSignUp" class="left md-raised md-button md-default-theme ">SIGN UP</a>
|
||||
</div>
|
||||
<div class="col-50">
|
||||
<a href="#/app/fakeLogin" class="right md-raised md-button md-default-theme">Log In</a>
|
||||
</div>
|
||||
</div>
|
||||
</ion-slide>
|
||||
<ion-slide class="slide-02"></ion-slide>
|
||||
<ion-slide class="slide-03"></ion-slide>
|
||||
<ion-slide class="slide-04"></ion-slide>
|
||||
<ion-slide class="slide-05"></ion-slide>
|
||||
<ion-slide class="slide-06"></ion-slide>
|
||||
<ion-slide class="slide-07"></ion-slide>
|
||||
<ion-slide class="slide-08">
|
||||
<a href="" class="sign-up-button md-raised md-button md-default-theme material-background">
|
||||
SIGN UP MATERIAL</a>
|
||||
</ion-slide>
|
||||
<!--end slider section-->
|
||||
</ion-slide-box><!--end try app section-->
|
||||
|
||||
</ion-view>
|
||||
Reference in New Issue
Block a user