Skip to content

Instantly share code, notes, and snippets.

@shi11

shi11/index.html

Created December 26, 2015 21:31
Show Gist options
  • Save shi11/05dc70dc7d52cfde1d4b to your computer and use it in GitHub Desktop.
Save shi11/05dc70dc7d52cfde1d4b to your computer and use it in GitHub Desktop.
Download ZIP
intro slides
Raw
index.html
<html ng-app="ionicApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
</head>
<body>
<ion-content>
<ion-view>
<ion-pane class="introPane" hide-nav-bar="true">
<!--//causing error i think active-slide="slidestop($index)" -->
<ion-slide-box on-slide-changed="introSlideChanged(index)" show-pager="true" class="box">
<ion-slide class="slider-intro-slide">
<div>
<div>
<div class="mainText padding-20" style="text-align: center">Hi and welcome to AudioDrops
<div class="subText">
Whether you're on your way to work, or taking a trip to a new city, AudioDrops enhances the places you go.
</div>
</div>
<img class="container_img" src="https://s3.amazonaws.com/wox-drops/img/slide1graphic.png" />
</div>
</div>
</ion-slide>
<ion-slide class="slider-intro-slide">
<div>
<div class="mainText padding-20" style="text-align: center">WE PROMISE NOT TO BE ANNOYING</div>
<div class="subText padding-20" style="text-align: center">AudioDrops will politely notify you when you're nearby Drops. We love music but realize there's a time and a place.</div>
<img class="container_img" src="https://s3.amazonaws.com/wox-drops/img/slide2graphic.png" />
</div>
</ion-slide>
<ion-slide class="slider-intro-slide">
<!--<div class="row" ng-include="'img/intro_slide4.svg'"></div>-->
<div class="mainText padding-20">WE RESPECT YOUR PRIVACY</div>
<div class="subText">Sign in with Twitter
<br/>or anonymously.</div>
<div class="row">
<div class="col col-25"></div>
<div class="col-50 list">
<div class="item button button-ios-rounded button-pill width-150" ng-hide="permissions.locationEnabled" ng-disabled="permissions.locationClicked" data-ng-click="enableLocationClick()">
<i class="ion-ios-navigate-outline"></i> location</div>
<div class="item button button-ios-rounded button-pill width-150" ng-hide="permissions.notificationsEnabled" ng-disabled="permissions.notificationsClicked" data-ng-click="enableNotificationClick()">
<i class="ion-ios-chatbubble-outline"></i> notifications</div>
<div class="item button button-ios-rounded button-pill width-150" ng-disabled="(!permissions.locationEnabled) || (!permissions.notificationsEnabled)" data-ng-click="authenticate()">
<i class="ion-social-twitter-outline"></i> Login</div>
<div><a ng-click="gotoSettings()">settings</a></div>
</div>
<div class="col col-25"></div>
</div>
</ion-slide>
</ion-slide-box>
</ion-pane>
</ion-view>
</ion-content>
</body>
</html>
Raw
intro slides.markdown
Raw
script.js
angular.module('ionicApp', ['ionic'])
Raw
style.css
.introPane {
top:20px;
}
.mainText{
text-align: center;
font: 24px "Lato-Light", "Lato", Helvetica, Arial, "Lucida Grande", sans-serif;
}
.subText{
text-align: center;
font: 18px "Lato-Light", "Lato", Helvetica, Arial, "Lucida Grande", sans-serif;
}
.slider-intro-slide {
text-align: center;
}
.button-ios-rounded.button-pill{
background-color: white !important;
border-radius: 30px !important;
margin: 5px;
}
.width-150{
min-width: 150px;
}
.container_img {
display: block;
max-width: 100%;
max-height: 100%;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment