<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width" />
<title></title>
<link data-require="ionic@1.0.0-beta.1" data-semver="1.0.0-beta.1" rel="stylesheet" href="http://code.ionicframework.com/nightly/css/ionic.css" />
<link rel="stylesheet" href="style.css" />
<script data-require="ionic@1.0.0-beta.1" data-semver="1.0.0-beta.1" src="http://code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<script src="app.js"></script>
<script src="controllers.js"></script>
<script src="services.js"></script>
</head>
<body ng-app="starter" animation="slide-left-right-ios7">
<!--
The nav bar that will be updated as we navigate between views.
-->
<ion-nav-bar class="bar-stable nav-title-slide-ios7">
<ion-nav-back-button class="button-icon icon ion-chevron-left">
Back
</ion-nav-back-button>
</ion-nav-bar>
<!--
The views will be rendered in the <ion-nav-view> directive below
Templates are in the /templates folder (but you could also
have templates inline in this html file if you'd like).
-->
<ion-nav-view name="app"></ion-nav-view>
<ion-nav-view name="modal"></ion-nav-view>
</body>
</html>
/* Styles go here */
.panel-heading {
padding: 5px 15px;
}
.panel-footer {
padding: 1px 15px;
color: #A0A0A0;
}
.profile-img {
width: 96px;
height: 96px;
margin: 0 auto 10px;
display: block;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
}
.login{
}
// Ionic Starter App, v0.9.20
// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
// 'starter.services' is found in services.js
// 'starter.controllers' is found in controllers.js
angular.module('starter', ['ionic', 'starter.controllers', 'starter.services'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
StatusBar.styleDefault();
});
})
.config(function($stateProvider, $urlRouterProvider) {
// Ionic uses AngularUI Router which uses the concept of states
// Learn more here: https://github.com/angular-ui/ui-router
// Set up the various states which the app can be in.
// Each state's controller can be found in controllers.js
/*
$stateProvider.state('tab', {
url: '',
views: {
'app': {
templateUrl: 'tabs.html',
controller: 'AppCtrl'
}
},
sticky: true,
dsr: true
});*/
/* $stateProvider.state('modal', {
url: '/modal',
views: {
'modal': {
templateUrl: 'login.html'
}
}
});*/
$stateProvider.state('modal.substate', {
url: '/substate',
template: '<h3>I\'m a substate in a modal',
//templateUrl: 'signup.html',
controller:'AppCtrl'
});
$stateProvider
// setup an abstract state for the tabs directive
.state('tab', {
url: "/tab",
abstract: true,
//templateUrl: "tabs.html",
views: {
'app': {
templateUrl: 'tabs.html',
controller: 'AppCtrl'
}
}
})
/* .state('tab.modal',{
url:"/login",
views:{
'modal':{
templateUrl:"login.html",
controller:"AppCtrl"
}
}
})*/
.state('tab.signup',{
url:"/signup",
views:{
'modal':{
templateUrl:"signup.html",
controller:"AppCtrl"
}
}
})
// Each tab has its own nav history stack:
.state('tab.dash', {
url: '/dash',
views: {
'tab-dash': {
templateUrl: 'tab-dash.html',
controller: 'AppCtrl'
}
}
})
.state('tab.friends', {
url: '/friends',
views: {
'tab-friends': {
templateUrl: 'tab-friends.html',
controller: 'FriendsCtrl'
}
}
})
.state('tab.friend-detail', {
url: '/friend/:friendId',
views: {
'tab-friends': {
templateUrl: 'friend-detail.html',
controller: 'FriendDetailCtrl'
}
}
})
.state('tab.account', {
url: '/account',
views: {
'tab-account': {
templateUrl: 'tab-account.html',
controller: 'AccountCtrl'
}
}
})
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/tab/dash');
});
This is a blank ionic framework starter template.
https://github.com/driftyco/ionic-starter-tabs
angular.module('starter.controllers', [])
.controller('AppCtrl', function($scope, $stateParams, Friends, $ionicHistory, $state,$ionicModal,$ionicPopup, $ionicTabsDelegate) {
// Create the login modal that we will use later
$ionicModal.fromTemplateUrl('newlogin.html', {
scope: $scope
}).then(function(modalLogin) {
$scope.modal = modalLogin;
});
$scope.renderLogin=true;
$scope.doLogin = function() {
console.log("APPCTRL>Login function", "....1");
}
$scope.openLogin = function() {
console.log("APPCTRL>openLogin function", "....1");
$scope.modal.show();
}
$scope.closeLogin = function() {
console.log("APPCTRL>openLogin function", "....1");
$scope.modal.hide();
}
$scope.showLogin = function() {
console.log("APPCTRL>openLogin function", "....1");
$scope.renderLogin = true;
$scope.renderSignup = false;
//$scope.modal.show();
}
$scope.showSignup = function() {
console.log("APPCTRL>openLogin function", "....1");
$scope.renderLogin = false;
$scope.renderSignup = true;
//$scope.modal.show();
}
$scope.goBack = function() {
console.log("APPCTRL>go back function", "....1");
$state.go('tab.dash');
//$ionicHistory.goBack(-1);
}
$scope.goSignUp = function() {
console.log("APPCTRL>go signup", "....1");
}
})
.controller('DashCtrl', function($scope) {})
.controller('FriendsCtrl', function($scope, Friends) {
$scope.friends = Friends.all();
})
.controller('FriendDetailCtrl', function($scope, $stateParams, Friends) {
$scope.friend = Friends.get($stateParams.friendId);
})
.controller('AccountCtrl', function($scope) {});
angular.module('starter.services', [])
/**
* A simple example service that returns some data.
*/
.factory('Friends', function() {
// Might use a resource here that returns a JSON array
// Some fake testing data
var friends = [
{ id: 0, name: 'Scruff McGruff' },
{ id: 1, name: 'G.I. Joe' },
{ id: 2, name: 'Miss Frizzle' },
{ id: 3, name: 'Ash Ketchum' }
];
return {
all: function() {
return friends;
},
get: function(friendId) {
// Simple index lookup
return friends[friendId];
}
}
});
<!--
This template loads for the 'tab.friend-detail' state (app.js)
'firend' is a $scope variable created in the FriendsCtrl controller (controllers.js)
The FriendsCtrl pulls data from the Friends service (service.js)
The Friends service returns an array of friend data
-->
<ion-view title="{{friend.name}}">
<ion-content has-header="true" padding="true">
</ion-content>
</ion-view>
<ion-view title="Account">
<ion-content overflow-scroll="true" scroll="true" class="has-header padding">
<h1>Overflow scroll</h1>
<p>On iphone tapping slightly above or below text opens keyboard, but doesn't focus on textfield.</p>
<input type="text" name="name" style="border: 1px solid grey;">
</ion-content>
</ion-view>
<ion-view title="Dashboard">
<ion-content class="has-header padding">
<h1>Ionic scroll</h1>
<p>On iphone tapping slightly above or below text doesn't open keyboard.</p>
<input type="text" name="name" style="border: 1px solid grey;">
</ion-content>
</ion-view>
<ion-view title="Friends">
<ion-content class="has-header">
<ion-list>
<ion-item ng-repeat="friend in friends" type="item-text-wrap" href="#/tab/friend/{{friend.id}}">
{{friend.name}}
</ion-item>
</ion-list>
</ion-content>
</ion-view>
<ion-view>
<!--
Create tabs with an icon and label, using the tabs-positive style.
Each tab's child <ion-nav-view> directive will have its own
navigation history that also transitions its views in and out.
-->
<ion-nav-view name ="modal"></ion-nav-view>
<ion-side-menus enable-menu-with-back-views="false">
<!--
The nav bar that will be updated as we navigate between views.
-->
<ion-nav-bar class="bar-royal">
<ion-nav-back-button>
</ion-nav-back-button>
</ion-nav-bar>
<ion-side-menu-content>
<ion-nav-bar class="bar-royal" >
<ion-nav-back-button>
</ion-nav-back-button>
<ion-nav-buttons side="left" >
<button class="button button-icon button-clear ion-navicon" menu-toggle="left" >
</button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-tabs class="tabs-icon-top">
<!-- Pets Tab -->
<ion-tab title="Works" icon="icon ion-home" href="#/tab/dash">
<ion-nav-view name="tab-dash"></ion-nav-view>
</ion-tab>
<!-- About Tab -->
<ion-tab title="Broken" icon="icon ion-gear-b" href="#/tab/account">
<ion-nav-view name="tab-account"></ion-nav-view>
</ion-tab>
</ion-tabs>
</ion-side-menu-content>
<ion-side-menu side="left" cache-view="false">
<ion-header-bar class="bar-dark">
<h1 class="title">Left</h1>
</ion-header-bar>
<ion-content>
<ion-list>
<ion-item menu-close class="item-icon-left" href="#/signup">
<i class="icon ion-home"></i>
Home
</ion-item>
<ion-item menu-close class="item-icon-left" >
<i class="icon ion-android-notifications"></i>
Notifications
</ion-item>
<div class="item item-divider">
</div>
<ion-item menu-close class="item-icon-left" ng-click="openLogin()" >
<i class="icon ion-log-in"></i>
Sign-In
</ion-item>
<ion-item menu-close class="item-icon-left" href="#/tab/signup">
<i class="icon ion-edit"></i>
Sign-Up
</ion-item>
<div class="item item-divider">
</div>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>
</ion-view>
<ion-view view-title="Login Form">
<!-- <ion-header-bar>
<h1 class="title">Login</h1>
</ion-header-bar>-->
<ion-header-bar>
<div class="buttons">
<button class="button button-clear" >Close</button>
</div>
</ion-header-bar>
<!-- <ion-nav-buttons side="secondary">
<button class="button icon ion-clipboard button-clear" ng-click="goBack()">
</button>
</ion-nav-buttons>
-->
<ion-content>
This modal has a substate. <a ui-sref=".substate">Activate it</a>
<div ui-view></div>
<form name="loginForm" novalidate>
<div class="list">
<label class="item item-input">
<input type="text" ng-model="loginData.username" placeholder="Username" required>
</label>
<label class="item item-input">
<input type="password" ng-model="loginData.password" placeholder="Password" required>
</label>
<label class="item">
<button class="button button-block button-positive" type="submit">Sign-In</button>
</label>
</div>
</form>
<label class="item">
<button class="button button-block button-positive" href="#/tab/signup">Sign-Up</button>
</label>
<a href="#/tab/signup" class="item">Sign Up</a>
<!-- <a href="#/tab/dash" class="item">Close</a>-->
<a ui-sref="tab" class="item" ng-click="closeLogin()">Close</a>
</ion-content>
</ion-view>
<ion-view class="login">
<ion-header-bar>
<h1 class="title">Sign Up</h1>
<div class="buttons">
<button class="button button-clear" ng-click="closeSignUp()">Close</button>
</div>
</ion-header-bar>
<ion-content>
<form ng-submit="doSignUp()">
<ion-list>
<label class="item item-input">
<span class="input-label">Name</span>
<input type="text" placeholder="">
</label>
<label class="item item-input">
<span class="input-label">Username</span>
<input type="text" placeholder="">
</label>
<label class="item item-input">
<span class="input-label">Password</span>
<input type="text" placeholder="">
</label>
<label class="item">
<button class="button button-positive button-block ">Sign up</button>
</label>
</ion-list>
</form>
<a ng-click="login()" class="button button-positive button-clear button-block ">Or Log In</a>
</ion-content>
</ion-view>
<ion-modal-view class="login">
<ion-header-bar>
<h1 class="title">Login</h1>
<div class="buttons">
<button class="button button-clear" ng-click="closeLogin()">Close</button>
</div>
</ion-header-bar>
<ion-content>
<div>
<div class="button-bar" style="width:50%; border-radius: 30px;position:relative; left:25%; margin-top:5px">
<a href="#" ng-click="showLogin()" class="button button-small button-balanced" style="border-top-left-radius: 5px;border-bottom-left-radius: 5px">Sign In</a>
<a href="#" ng-click="showSignup()" class="button button-outline button-small button-balanced" style="border-top-right-radius: 5px;border-bottom-right-radius: 5px">Sign Up</a>
</div>
</div>
<div style="margin-top:5px; position:relative; left:2%;width:96%">
<form ng-submit="doLogin()" name="loginForm" novalidate>
<div class="list">
<label class="item item-input" >
<input type="text" ng-model="loginData.username" placeholder="Username" required>
</label>
<label class="item item-input">
<input type="password" ng-model="loginData.password" placeholder="Password" required>
</label>
<li class="item item-checkbox">
<div>
<label class="checkbox">
<input type="checkbox">
</label>
Remember me
</div>
</li>
<label class="item" style="padding-bottom:0px; padding-top:0px; ">
<button class="button button-block button-positive" type="submit">Sign-In</button>
<div style="position:relative;left:50%; margin:0px;padding-bottom:0px;padding-top:0px">
<button class="button button-clear button-energized" style="margin-top:0px; padding-top:0px" ng-click="goForgotPassword()">
Forgot password?
</button>
</div>
</label>
</div>
</form>
</div>
<div class="row hungry" style="top:100%;margin-top:25px">
<div class="col col-25" >
<div class="hungry-middle-left-line" style="border-top:1px solid #94B8FF; ">
</div>
</div>
<div class="col col-50" style="color:#94B8FF; font-size:medium">
OR LOGIN WITH
</div>
<div class="col col-25">
<div class="hungry-middle-right-line" style="border-top:1px solid #94B8FF; ">
</div>
</div>
</div>
<div class="row" style="margin-top:15px;padding-left:9px;padding-right:9px">
<div class="col-50">
<button class="button button-block button-positive" style="background-color:#3B5998; width:100%; margin-right:3px" ng-click="fbLogin()">
Facebook
</button>
</div>
<div class="col-50">
<button class="button button-block button-assertive" style=" width:100%; margin-left:3px" ng-click="googleLogin()">
Google
</button>
</div>
</div>
<!--
<div class="row hungry" style="top:100%;margin-top:25px">
<div class="col col-25" >
<div class="hungry-middle-left-line" style="border-top:1px solid #94B8FF; ">
</div>
</div>
<div class="col col-50" style="color:#94B8FF; font-size:medium">
OR
</div>
<div class="col col-25">
<div class="hungry-middle-right-line" style="border-top:1px solid #94B8FF; ">
</div>
</div>
</div> -->
<div class="row" style="margin-top:15px;padding-left:10px;padding-right:10px;align:right">
<button class="button button-clear button-positive" style="width:100%" ng-click="goGuestCheckout()">
GUEST CHECKOUT
</button>
</div>
</ion-content>
</ion-modal-view>
.prettyline {
height: 5px;
border-top: 0;
background: #c4e17f;
border-radius: 5px;
background-image: -webkit-linear-gradient(left, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4);
background-image: -moz-linear-gradient(left, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4);
background-image: -o-linear-gradient(left, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4);
background-image: linear-gradient(to right, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4);
}