"mobile"
Bootstrap 3.0.0 Snippet by evarevirus

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html><html lang='en' class=''> <head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/Jackthomsonn/pen/AXyOPW?limit=all&page=8&q=app" /> <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,700' rel='stylesheet' type='text/css'> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <style class="cp-pen-styles">* { -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; font-family: 'Open Sans', sans-serif; } html, body { background: #F4F4F8; } .app { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 100vw; height: 100vh; } .app_inner { background: #f7f7f7; width: 18em; height: 28em; -webkit-box-shadow: 2px 7px 30px #cfcfe0; box-shadow: 2px 7px 30px #cfcfe0; overflow-x: scroll; position: relative; overflow-x: hidden; } .app_inner__header { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border-bottom: 1px solid #f7f7fa; padding: .7em; } .app_inner__header i { color: #9A9999; cursor: pointer; } .app_inner__header h1 { font-size: .6em; color: #9A9999; text-transform: uppercase; } .app_inner__list { width: 100%; } .app_inner__list .card { height: auto; width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-flow: column wrap; flex-flow: column wrap; } .app_inner__list .card .image { height: 10em; } .app_inner__list .card .information { background: #FFF; padding: 1em; -webkit-transform: translateY(-20px) translateX(10px); transform: translateY(-20px) translateX(10px); width: 80%; } .app_inner__list .card .information h3 { font-size: .7em; font-weight: 300; text-transform: uppercase; color: #676666; } .app_inner__list .card .information p { font-size: .65em; font-weight: 300; padding: .5em 0; color: #9A9999; } .app_inner__list .card .information button { border: none; outline: none; background: #85B79D; color: #FFF; -webkit-transform: translateY(-20px) translateX(0); transform: translateY(-20px) translateX(0); padding: 1em; text-transform: uppercase; font-size: .5em; position: absolute; top: 0; cursor: pointer; -webkit-transition: all ease-in-out 1s; transition: all ease-in-out 1s; } .app_inner__preview { width: 100%; position: absolute; z-index: 1; } .app_inner__preview .card { height: auto; width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-flow: column wrap; flex-flow: column wrap; } .app_inner__preview .card .image { height: 10em; } .app_inner__preview .card .information { background: #FFF; padding: 1em; -webkit-transform: translateY(-20px) translateX(10px); transform: translateY(-20px) translateX(10px); width: 70%; } .app_inner__preview .card .information h3 { font-size: .7em; font-weight: 300; text-transform: uppercase; color: #676666; } .app_inner__preview .card .information p { font-size: .65em; font-weight: 300; padding: .5em 0; color: #9A9999; } .app_inner__preview .card .information button { border: none; outline: none; background: #85B79D; color: #FFF; -webkit-transform: translateY(-80px) translateX(0); transform: translateY(-80px) translateX(0); padding: 1em; text-transform: uppercase; font-size: .5em; cursor: pointer; position: absolute; } .app_inner__preview .card .information button.book-now { background: #85B79D; -webkit-transform: translateX(30px); transform: translateX(30px); float: right; right: 0; position: absolute; } .app_inner__preview .card .seats { border-top: 1px solid #EEE; margin-top: 1em; padding: .5em; } .app_inner__preview .card .seats ul { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row wrap; flex-flow: row wrap; margin: .5em 0; } .app_inner__preview .card .seats ul li { list-style: none; font-size: .7em; background: #ededed; color: #9A9999; padding: .5em; width: 2em; margin: .5em; text-align: center; cursor: pointer; -webkit-transition: all ease-in-out .1s; transition: all ease-in-out .1s; } .app_outer { background: #f7f7f7; width: 0; height: 28em; -webkit-box-shadow: 2px 7px 30px #cfcfe0; box-shadow: 2px 7px 30px #cfcfe0; overflow-x: scroll; opacity: 0; padding: 1em; } .app_outer .card { width: 100%; height: 7.5em; border-radius: 3px; padding: 2em; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-flow: column nowrap; flex-flow: column nowrap; position: relative; opacity: 0; } .app_outer .card:after { content: ''; background-color: #EEE; opacity: 0.5; position: absolute; width: 100%; height: 100%; top: 0; left: 0; border-radius: 4px; } .app_outer .card .card_number { font-size: .9em; } .app_outer .card .bottom_row { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 1em 0 0 0; } .app_outer .card .bottom_row .cardholder { font-size: .7em; } .app_outer .card .bottom_row .expiry { font-size: .7em; } .app_outer form { padding: 1.5em 0; opacity: 0; } .app_outer form input { border-top: none; border-right: none; border-bottom: 1px solid #eeeef4; width: 100%; border-left: none; background: transparent; padding: 1em 0; outline: none; } .app_outer form button { border: none; outline: none; background: #85B79D; color: #FFF; padding: 1em; text-transform: uppercase; font-size: .5em; width: 100%; margin-top: 2em; cursor: pointer; -webkit-transition: all ease-in-out 1s; transition: all ease-in-out 1s; } .app_loader { opacity: 1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-flow: column wrap; flex-flow: column wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: 100vh; width: 0; opacity: 0; } .app_loader__loading_icon { border-left: 1px solid #676666; width: 2em; height: 2em; border-radius: 100%; -webkit-animation: spin 1s linear infinite; animation: spin 1s linear infinite; } .app_loader h1 { opacity: 0; -webkit-transition: all ease-in-out 1s; transition: all ease-in-out 1s; font-size: 1em; color: #676666; -webkit-transform: translateY(5px); transform: translateY(5px); } .app_loader p { opacity: 0; -webkit-transition: all ease-in-out 1s; transition: all ease-in-out 1s; font-size: .8em; color: #676666; -webkit-transform: translateY(5px); transform: translateY(5px); } .app_loader i { color: #676666; margin-top: 1em; opacity: 0; } @-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes spin { 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .active { background: #85B79D !important; color: #FFF !important; } </style></head><body> <div class='app' ng-app="app"> <div class='app_inner' ng-controller="BookingController as vm"> <div class="app_inner__header"> <i class="material-icons" ng-click="vm.goBack()">{{ vm.icon }}</i> <h1>{{ vm.title }}</h1> <i class="material-icons">more_vert</i> </div> <div class="app_inner__list" ng-show="vm.filmIndex == undefined"> <div class="card" ng-repeat="film in vm.films"> <div class="image" style="background: url( {{film.image}} ); background-size: cover;"></div> <div class="information"> <h3>{{ film.name }}</h3> <p>{{ film.information }}</p> <button ng-show="film.bookable" ng-click="vm.goToFilm(film.id, film.name, film.seatsAvailable)">Book this film</button> </div> </div> </div> <div class="app_inner__preview"> <div class="card" ng-repeat="film in vm.films"> <div ng-show="film.id == vm.filmIndex"> <div class="image" style="background: url( {{film.image}} ); background-size: cover;"></div> <div class="information"> <h3>{{ film.name }}</h3> <p>{{ film.information }}</p> <button class="book-now" ng-click="vm.bookFilm(film.name)" ng-disabled="vm.chosenSeats.length === 0">Book Now</button> </div> <div class="seats"> <ul> <li ng-repeat="seat in vm.seats" ng-click="vm.chooseSeat($index + 1)">{{ $index + 1 }}</li> </ul> </div> </div> </div> </div> </div> <div class="app_outer"> <div class="card" style="background: url(http://speckycdn.sdm.netdna-cdn.com/wp-content/uploads/2012/10/world_map_06.jpg); background-size: cover;"> <p class="card_number">{{ vm.cardNumber }}</p> <div class="bottom_row"> <p class="cardholder">{{ vm.cardHolder }}</p> <p class="expiry">{{ vm.expiryDate }}</p> </div> </div> <form> <input type="text" placeholder="Card number" id="cardNumber" ng-model="vm.cardNumber"> <input type="text" placeholder="Cardholder" ng-model="vm.cardHolder"> <input type="text" placeholder="Expiry Date" ng-model="vm.expiryDate"> <button class="get-tickets">Get my tickets</button> </div> <div class="app_loader"> <span class="app_loader__loading_icon"></span> <h1>Woo hoo! Your film is Booked</h1> <p>We hope you enjoy your film!</p> </div> </div> <script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.min.js'></script><script src='https://code.jquery.com/jquery-2.2.4.min.js'></script> <script >(function() { 'use strict'; angular .module('app', []) .controller('BookingController', BookingController); BookingController.$inject = ['$timeout']; function BookingController($timeout) { var vm = this; vm.filmIndex; vm.icon = 'sort'; vm.title = 'Choose a film'; vm.films = [{ id: 1, image: 'http://cdn2-www.superherohype.com/assets/uploads/gallery/spectre/12002410_1134539806560929_7647752797114155043_o.jpg', name: 'Spectre', information: 'A cryptic message from the past leads James Bond (Daniel Craig) to Mexico City and Rome, where he meets the beautiful widow (Monica Bellucci) of an infamous criminal', bookable: true, seatsAvailable: 21 }, { id: 2, image: 'https://www.wired.com/wp-content/uploads/2015/04/ex-machina.jpg', name: 'Ex Machina', information: 'Ex Machina tells the story of a computer coder, Caleb (Domhnall Gleeson), who wins the chance to spend a week at the house in the mountains belonging to Nathan (Oscar Isaac), the CEO of the company he works for.', bookable: true, seatsAvailable: 19 }]; vm.seats = []; vm.chosenSeats = []; vm.goToFilm = goToFilm; vm.goBack = goBack; vm.chooseSeat = chooseSeat; vm.bookFilm = bookFilm; function getSeats(id, seatsAvailable) { for (var i = 0; i < vm.films.length; i++) {if (window.CP.shouldStopExecution(3)){break;}if (window.CP.shouldStopExecution(3)){break;} var response = vm.films[i]; for (var key in response) {if (window.CP.shouldStopExecution(2)){break;}if (window.CP.shouldStopExecution(2)){break;} if (key == 'seatsAvailable') { var available = response[key]; if (available === seatsAvailable) { for (var k = 0; k < seatsAvailable; k++) {if (window.CP.shouldStopExecution(1)){break;}if (window.CP.shouldStopExecution(1)){break;} vm.seats.push(k + 1); } window.CP.exitedLoop(1); window.CP.exitedLoop(1); } } } window.CP.exitedLoop(2); window.CP.exitedLoop(2); } window.CP.exitedLoop(3); window.CP.exitedLoop(3); } function goToFilm(id, name, seatsAvailable) { getSeats(id, seatsAvailable); $(".app_inner__header").css({ 'opacity': '0', 'transform': 'translateY(-20px)', 'transition': 'all ease-in-out .7s' }); $(".app_inner__list, .app_inner__preview").css({ 'transform': 'translateX(-300px)', 'transition': 'all ease-in-out .7s' }); $timeout(function() { vm.filmIndex = id; vm.title = 'Book ' + name; vm.icon = 'chevron_left'; $(".app_inner__list, .app_inner__preview").css({ 'transform': 'translateX(0)', 'transition': 'all ease-in-out .7s' }); $(".app_inner__header").css({ 'opacity': '1', 'transform': 'translateY(0)', 'transition': 'all ease-in-out .7s' }); }, 1000); } function goBack() { $(".app_outer").css({ 'width': '0', 'opacity': '0', 'transition': 'all ease-in-out 1s' }); $(".app_outer > .card, form").css({ 'opacity': '0', 'transition': 'all ease-in-out 1s' }); if (vm.filmIndex) { $(".app_inner__list, .app_inner__preview").css({ 'opacity': '0', 'transition': 'all ease-in-out .7s' }); $(".app_inner__header").css({ 'opacity': '0', 'transform': 'translateY(-20px)', 'transition': 'all ease-in-out .7s' }); $timeout(function() { delete vm.filmIndex; vm.seats = []; vm.chosenSeats = []; }, 800); $timeout(function() { vm.title = 'Choose a film'; vm.icon = 'sort'; $(".app_inner__list, .app_inner__preview").css({ 'opacity': '1', 'transition': 'all ease-in-out .7s' }); $(".app_inner__header").css({ 'opacity': '1', 'transform': 'translateY(0)', 'transition': 'all ease-in-out .7s' }); }, 1000); } } function chooseSeat(seatNumber) { if (!vm.chosenSeats) { vm.chosenSeats = []; } vm.chosenSeats.push(seatNumber); } function bookFilm(name) { vm.filmName = name; $("input#cardNumber").keyup(function(e) { e.target.value = e.target.value.replace(/[^\dA-Z]/g, '').replace(/(.{4})/g, '$1 ').trim(); }); } // Animations $(".get-tickets").click(function() { $(".app_inner, .app_outer, .app_inner__preview").css({ 'opacity': '0', 'transition': 'all ease-in-out 1s' }); setTimeout(function() { $(".app_inner, .app_outer, .app_inner__preview").css({ 'display': 'none' }); $(".app_loader").css({ 'width': '100vw', 'opacity': '1' }); $(".app_loader__loading_icon").css({ 'opacity': '1' }); }, 1000); setTimeout(function() { $(".app_loader__loading_icon").css({ 'opacity': '0' }); }, 4000); setTimeout(function() { $(".app_loader h1").css({ 'opacity': '1', 'transform': 'translateY(0)' }); }, 4000); setTimeout(function() { $(".app_loader p").css({ 'opacity': '1', 'transform': 'translateY(0)' }); }, 4200); }); $("body").on('click', '.book-now', function() { $(".app_outer").css({ 'width': '18em', 'opacity': '1', 'transition': 'all ease-in-out 1s' }); setTimeout(function() { $(".card, form").css({ 'opacity': '1', 'transition': 'all ease-in-out 1s' }); }, 1000); }); } $("body").on('click', '.seats li', function() { $(this).addClass('active'); }); $("body").on('click', '.seats li.active', function() { $(this).removeClass('active'); }); })(); //# sourceURL=pen.js </script> </body></html>

Related: See More


Questions / Comments: