intro slides
html for intro to app
intro slides
| <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> |
| .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