Skip to content

Instantly share code, notes, and snippets.

@devuri

devuri/cinemaapp.markdown

Created May 17, 2019 21:37
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save devuri/c644c8c64caa7a241b034c585f8d89d2 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save devuri/c644c8c64caa7a241b034c585f8d89d2 to your computer and use it in GitHub Desktop.
Download ZIP
CinemaApp
Raw
cinemaapp.markdown

CinemaApp

A front-end project that created in purpose to submit into UpLabs 's Movie App Challange

This project should work best in modern browser and proper width of screen,

A Pen by Uriel Wilson Jr. on CodePen.

License.

Raw
index.html
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link type="text/css" rel="stylesheet" href="https://yusufrahmadi.com/codepen/CinemaApp/material.css" media="screen,projection"/>
<link type="text/css" rel="stylesheet" href="https://cdn.datatables.net/1.10.15/css/dataTables.material.min.css" media="screen,projection"/>
<link type="text/css" rel="stylesheet" href="https://yusufrahmadi.com/codepen/CinemaApp/materialize.css" media="screen,projection"/>
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/6.6.5/sweetalert2.min.css" media="screen,projection"/>
<script src="https://use.fontawesome.com/114bfd5ca1.js"></script>
<body>
<div class="navbar-fixed">
<nav class="nav-extended">
<div class="nav-wrapper indigo">
<a href="#" data-activates="slide-out" class="brand-logo button-collapse show-on-large hide-on-med-and-down"><i class="material-icons">menu</i></a>
<a href="#!" class="brand-logo center"><i class="material-icons">local_movies</i> Cinema App</a>
<ul class="right hide-on-med-and-down">
<li><a href="#!" class="tooltipped" data-position="bottom" data-tooltip="Notification"><i class="material-icons">notifications</i></a></li>
<li><a href="#!" class="tooltipped" data-position="bottom" data-tooltip="Logout"><i class="material-icons">exit_to_app</i></a></li>
</ul>
<a href="#" data-activates="mobile-demo" class="button-collapse"><i class="material-icons">menu</i></a>
<ul class="side-nav" id="mobile-demo">
<li>
<div class="user-view indigo lighten-2 mn" >
<a href="#!user"><img class="circle" src="https://lh3.googleusercontent.com/e4_VCx5bxkZZCvP3GTq74mQ5jTzgm5ZgxmA_yRi9VSsV6K91pg9xsZ7zRrC9_kxE-i4vksYMgj1uOwTlVfrdTQOLHx2tTZaIq70n9wqglpFQdcDFQlPmUyil2HsZyicZZ8Crdum38-mT97v_wgzgD3Nq_0SNbOEGbCEWNVi5oTYRS-HFkwTZdDNGcoVevkXOtj5x4msB_DYn-dMLURVT2tEuVK1GgcUYeQKSKO2KRyP_stniipMEn4CffJmP1rRNOxLKaeu5RS0ufpv9DuI4DkT2P2dDv-36Nt-lqsVz8vXPNot3s5EKNbBmvGzntdVwVRy430BzyCVnbxOoCAcwiixbACDtPNcO1aXkBaszLDJItELs8PGDg07bbTLKhS9krUAlN_WhHzIqq_vdqgJX9BIvxCB48u9qZc_vdCg73JyadZWgzNdt_9N-lGRO7I3eE7XMExn5CdA7JaqaCyOWpK_qxL0IIURCTNRhW8as3Nyc56MIS-Px2Zm6_nemzeC1WmlHtss4FgCv6e8L1mz0rHldqOOw93YhZXAXdOpLaIzSUaN3bkh2t4K0FqjGun7AVAvF0MCw7z6U5r1tboFzKzIj6C5eIx6l6o6UVsf1M-H98DTo=w639-h638-no"></a>
<a href="#!name"><span class="white-text name">Yusuf Rahmadi</span></a>
<a href="#!email"><span class="white-text email">yusufrahmadi.id@gmail.com</span></a>
</div>
</li>
<li><a class="waves-effect" href="#!"><i class="material-icons">home</i>Home</a></li>
<li><a class="waves-effect" href="#!"><i class="material-icons">account_box</i>User Account</a></li>
<li><a class="waves-effect" href="#!"><i class="material-icons">file_upload</i>Top Up Balance</a></li>
<li><a class="waves-effect" href="#!"><i class="material-icons">email</i>Inbox</a></li>
<li><a class="waves-effect" href="#!"><i class="material-icons">history</i>History</a></li>
<li><a class="waves-effect" href="#!"><i class="material-icons">forum</i>Review</a></li>
<li><a class="waves-effect" href="#!"><i class="material-icons">info</i>FAQ</a></li>
<li><a class="waves-effect" href="#!"><i class="material-icons">help</i>Help</a></li>
<li><a class="waves-effect" href="#!"><i class="material-icons">exit_to_app</i>Logout</a></li>
</ul>
</div>
<div class="nav-content indigo darken-2">
<div class="row mn">
<div class="col s12 mn pn">
<ul class="tabs tabs-transparent mn pn">
<li class="tab col s4"><a href="#nowshowing" >Now Showing</a></li>
<li class="tab col s4"><a href="#upcomingmovies">Upcoming</a></li>
<li class="tab col s4"><a href="#ticket" class="active">Ticket</a></li>
</ul>
</div>
</div>
</div>
</nav>
</div>
<ul id="slide-out" class="side-nav">
<li>
<div class="user-view indigo lighten-1 mn" >
<a href="#!user"><img class="circle" src="https://lh3.googleusercontent.com/e4_VCx5bxkZZCvP3GTq74mQ5jTzgm5ZgxmA_yRi9VSsV6K91pg9xsZ7zRrC9_kxE-i4vksYMgj1uOwTlVfrdTQOLHx2tTZaIq70n9wqglpFQdcDFQlPmUyil2HsZyicZZ8Crdum38-mT97v_wgzgD3Nq_0SNbOEGbCEWNVi5oTYRS-HFkwTZdDNGcoVevkXOtj5x4msB_DYn-dMLURVT2tEuVK1GgcUYeQKSKO2KRyP_stniipMEn4CffJmP1rRNOxLKaeu5RS0ufpv9DuI4DkT2P2dDv-36Nt-lqsVz8vXPNot3s5EKNbBmvGzntdVwVRy430BzyCVnbxOoCAcwiixbACDtPNcO1aXkBaszLDJItELs8PGDg07bbTLKhS9krUAlN_WhHzIqq_vdqgJX9BIvxCB48u9qZc_vdCg73JyadZWgzNdt_9N-lGRO7I3eE7XMExn5CdA7JaqaCyOWpK_qxL0IIURCTNRhW8as3Nyc56MIS-Px2Zm6_nemzeC1WmlHtss4FgCv6e8L1mz0rHldqOOw93YhZXAXdOpLaIzSUaN3bkh2t4K0FqjGun7AVAvF0MCw7z6U5r1tboFzKzIj6C5eIx6l6o6UVsf1M-H98DTo=w639-h638-no"></a>
<a href="#!name"><span class="white-text name">Yusuf Rahmadi</span></a>
<a href="#!email"><span class="white-text email">yusufrahmadi.id@gmail.com</span></a>
</div>
</li>
<li><a class="waves-effect" href="#!"><i class="material-icons">home</i>Home</a></li>
<li><a class="waves-effect" href="#!"><i class="material-icons">account_box</i>User Account</a></li>
<li><a class="waves-effect" href="#!"><i class="material-icons">file_upload</i>Top Up Balance</a></li>
<li><a class="waves-effect" href="#!"><i class="material-icons">email</i>Inbox</a></li>
<li><a class="waves-effect" href="#!"><i class="material-icons">history</i>History</a></li>
<li><a class="waves-effect" href="#!"><i class="material-icons">forum</i>Review</a></li>
<li><a class="waves-effect" href="#!"><i class="material-icons">info</i>FAQ</a></li>
<li><a class="waves-effect" href="#!"><i class="material-icons">help</i>Help</a></li>
</ul>
<section class="mt45">
<div class="row ">
<div class="col s12 mt20">
<div id="nowshowing" class="col s12">
<div class="row">
<div class="col s12 m12 l4">
<div class="card-panel mn pn z-depth-1">
<div class="card">
<div class="card-image card-cover">
<img src="https://images-na.ssl-images-amazon.com/images/M/MV5BNDFmZjgyMTEtYTk5MC00NmY0LWJhZjktOWY2MzI5YjkzODNlXkEyXkFqcGdeQXVyMDA4NzMyOA@@._V1_UX182_CR0,0,182,268_AL_.jpg" class="responsive-img">
</div>
</div>
<div class="card card-movie z-depth-3">
<div class="card-content pn">
<div class="row valign-wrapper">
<div class="col s3 movie-poster">
<img src="https://images-na.ssl-images-amazon.com/images/M/MV5BNDFmZjgyMTEtYTk5MC00NmY0LWJhZjktOWY2MzI5YjkzODNlXkEyXkFqcGdeQXVyMDA4NzMyOA@@._V1_UX182_CR0,0,182,268_AL_.jpg" class="responsive-img z-depth-2">
</div>
<div class="col s9 mt10 movie-info">
<h1 class="fs24 mn indigo-text font-bold truncate">Wonder Woman</h1>
<h5 class="fs14 mn mt5 grey-text font-bold">2017 | 2h 21min | <span class="orange-text"> IMBD <i class="fa fa-star" aria-hidden="true"></i> 8.1</span></h5>
<h5 class="fs12 mn mt5 grey-text">Action | Adventure | Fantasy</h5>
</div>
</div>
<div class="row">
<h5 class="fs12 m5 grey-text font-bold center-align">Stars by :</h5>
<div class="col s12 center-align">
<div class="chip">
Gal Gadot
</div>
<div class="chip">
Chris Pine
</div>
<div class="chip">
Robin Wright
</div>
</div>
</div>
<div class="row">
<div class="col s12">
<blockquote class="blockqoute-cstm mn">
Before she was Wonder Woman, she was Diana, princess of the Amazons, trained warrior. When a pilot crashes and tells of conflict in the outside world, she leaves home to fight a war, discovering her full powers and true destiny.
</blockquote>
</div>
</div>
</div>
<div class="card-action">
<div class="row">
<a href="#share-movies" class="col s2 btn-left waves-effect waves-light mn p10"><i class="fa fa-share-alt" aria-hidden="true"></i></a>
<a href="#" class="col s8 btn-mid waves-effect waves-light mn p10 md-trigger" data-modal="get-ticket"><i class="fa fa-ticket" aria-hidden="true"></i> Get Ticket</a>
<a href="#" class="col s2 btn-right waves-effect waves-light mn p10"><i class="fa fa-heart" aria-hidden="true"></i></a>
</div>
</div>
</div>
</div>
</div>
<div class="col s12 m12 l4">
<div class="card-panel mn pn z-depth-1">
<div class="card">
<div class="card-image card-cover">
<img src="https://images-na.ssl-images-amazon.com/images/M/MV5BMTk3OTI3MDk4N15BMl5BanBnXkFtZTgwNDg2ODIyMjI@._V1_UY268_CR0,0,182,268_AL_.jpg" class="responsive-img">
</div>
</div>
<div class="card card-movie z-depth-3">
<div class="card-content pn">
<div class="row valign-wrapper">
<div class="col s3 movie-poster">
<img src="https://images-na.ssl-images-amazon.com/images/M/MV5BMTk3OTI3MDk4N15BMl5BanBnXkFtZTgwNDg2ODIyMjI@._V1_UY268_CR0,0,182,268_AL_.jpg" class="responsive-img z-depth-2">
</div>
<div class="col s9 mt10 movie-info">
<h1 class="fs24 mn indigo-text font-bold truncate">Transformers: The Last Knight</h1>
<h5 class="fs14 mn mt5 grey-text font-bold">2017 | 2h 29min | <span class="orange-text"> IMBD <i class="fa fa-star" aria-hidden="true"></i> 5.3</span></h5>
<h5 class="fs12 mn mt5 grey-text">Action | Adventure | Sci-Fi </h5>
</div>
</div>
<div class="row">
<h5 class="fs12 m5 grey-text font-bold center-align">Stars by :</h5>
<div class="col s12 center-align">
<div class="chip">
Mark Wahlberg
</div>
<div class="chip">
Anthony Hopkins
</div>
<div class="chip">
Josh Duhamel
</div>
</div>
</div>
<div class="row">
<div class="col s12">
<blockquote class="blockqoute-cstm mn">
Autobots and Decepticons are at war, with humans on the sidelines. Optimus Prime is gone. The key to saving our future lies buried in the secrets of the past, in the hidden history of Transformers on Earth.
</blockquote>
</div>
</div>
</div>
<div class="card-action">
<div class="row">
<a href="#" class="col s2 btn-left waves-effect waves-light mn p10"><i class="fa fa-share-alt" aria-hidden="true"></i></a>
<a href="#" class="col s8 btn-mid waves-effect waves-light mn p10 md-trigger" data-modal="get-ticket"><i class="fa fa-ticket" aria-hidden="true"></i> Get Ticket</a>
<a href="#" class="col s2 btn-right waves-effect waves-light mn p10"><i class="fa fa-heart" aria-hidden="true"></i></a>
</div>
</div>
</div>
</div>
</div>
<div class="col s12 m12 l4">
<div class="card-panel mn pn z-depth-1">
<div class="card">
<div class="card-image card-cover">
<img src="https://images-na.ssl-images-amazon.com/images/M/MV5BMTc5NzQ4NzU4OF5BMl5BanBnXkFtZTgwNTkxMzE0MjI@._V1_UX182_CR0,0,182,268_AL_.jpg" class="responsive-img">
</div>
</div>
<div class="card card-movie z-depth-3">
<div class="card-content pn">
<div class="row valign-wrapper">
<div class="col s3 movie-poster">
<img src="https://images-na.ssl-images-amazon.com/images/M/MV5BMTc5NzQ4NzU4OF5BMl5BanBnXkFtZTgwNTkxMzE0MjI@._V1_UX182_CR0,0,182,268_AL_.jpg" class="responsive-img z-depth-2">
</div>
<div class="col s9 mt10 movie-info">
<h1 class="fs24 mn indigo-text font-bold truncate">All Eyez on Me</h1>
<h5 class="fs14 mn mt5 grey-text font-bold">2017 | 2h 20min | <span class="orange-text"> IMBD <i class="fa fa-star" aria-hidden="true"></i> 6.1</span></h5>
<h5 class="fs12 mn mt5 grey-text">Biography | Drama | Music</h5>
</div>
</div>
<div class="row">
<h5 class="fs12 m5 grey-text font-bold center-align">Stars by :</h5>
<div class="col s12 center-align">
<div class="chip">
Demetrius Shipp Jr.
</div>
<div class="chip">
Danai Gurira
</div>
<div class="chip">
Kat Graham
</div>
</div>
</div>
<div class="row">
<div class="col s12">
<blockquote class="blockqoute-cstm mn">
Tells the true and untold story of prolific rapper, actor, poet and activist Tupac Shakur.
</blockquote>
</div>
</div>
</div>
<div class="card-action">
<div class="row">
<a href="#" class="col s2 btn-left waves-effect waves-light mn p10"><i class="fa fa-share-alt" aria-hidden="true"></i></a>
<a href="#" class="col s8 btn-mid waves-effect waves-light mn p10 md-trigger" data-modal="get-ticket"><i class="fa fa-ticket" aria-hidden="true"></i> Get Ticket</a>
<a href="#" class="col s2 btn-right waves-effect waves-light mn p10"><i class="fa fa-heart" aria-hidden="true"></i></a>
</div>
</div>
</div>
</div>
</div>
<div class="col s12 m12 l4">
<div class="card-panel mn pn z-depth-1">
<div class="card">
<div class="card-image card-cover">
<img src="https://images-na.ssl-images-amazon.com/images/M/MV5BMTc0NzU2OTYyN15BMl5BanBnXkFtZTgwMTkwOTg2MTI@._V1_UX182_CR0,0,182,268_AL_.jpg" class="responsive-img">
</div>
</div>
<div class="card card-movie z-depth-3">
<div class="card-content pn">
<div class="row valign-wrapper">
<div class="col s3 movie-poster">
<img src="https://images-na.ssl-images-amazon.com/images/M/MV5BMTc0NzU2OTYyN15BMl5BanBnXkFtZTgwMTkwOTg2MTI@._V1_UX182_CR0,0,182,268_AL_.jpg" class="responsive-img z-depth-2">
</div>
<div class="col s9 mt10 movie-info">
<h1 class="fs24 mn indigo-text font-bold truncate">Cars 3</h1>
<h5 class="fs14 mn mt5 grey-text font-bold">2017 | 1h 49min | <span class="orange-text"> IMBD <i class="fa fa-star" aria-hidden="true"></i> 7.2</span></h5>
<h5 class="fs12 mn mt5 grey-text">Animation | Adventure | Comedy </h5>
</div>
</div>
<div class="row">
<h5 class="fs12 m5 grey-text font-bold center-align">Stars by :</h5>
<div class="col s12 center-align">
<div class="chip">
Owen Wilson
</div>
<div class="chip">
Cristela Alonzo
</div>
<div class="chip">
Chris Cooper
</div>
</div>
</div>
<div class="row">
<div class="col s12">
<blockquote class="blockqoute-cstm mn">
Lightning McQueen sets out to prove to a new generation of racers that he's still the best race car in the world.
</blockquote>
</div>
</div>
</div>
<div class="card-action">
<div class="row">
<div class="col s12">
<a href="#" class="col s2 btn-left waves-effect waves-light mn p10"><i class="fa fa-share-alt" aria-hidden="true"></i></a>
<a href="#" class="col s8 btn-mid waves-effect waves-light mn p10 md-trigger" data-modal="get-ticket"><i class="fa fa-ticket" aria-hidden="true"></i> Buy Ticket</a>
<a href="#" class="col s2 btn-right waves-effect waves-light mn p10"><i class="fa fa-heart" aria-hidden="true"></i></a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col s12 m12 l4">
<div class="card-panel mn pn z-depth-1">
<div class="card">
<div class="card-image card-cover">
<img src="https://images-na.ssl-images-amazon.com/images/M/MV5BMTU1MTkxNzc5NF5BMl5BanBnXkFtZTgwOTM2Mzk3MTI@._V1_UX182_CR0,0,182,268_AL_.jpg" class="responsive-img">
</div>
</div>
<div class="card card-movie z-depth-3">
<div class="card-content pn">
<div class="row valign-wrapper">
<div class="col s3 movie-poster">
<img src="https://images-na.ssl-images-amazon.com/images/M/MV5BMTU1MTkxNzc5NF5BMl5BanBnXkFtZTgwOTM2Mzk3MTI@._V1_UX182_CR0,0,182,268_AL_.jpg" class="responsive-img z-depth-2">
</div>
<div class="col s9 mt10 movie-info">
<h1 class="fs24 mn orange-text font-bold truncate">Power Rangers</h1>
<h5 class="fs14 mn mt5 grey-text font-bold">2017 | 2h 4min | <span class="orange-text"> IMBD <i class="fa fa-star" aria-hidden="true"></i> 6.3</span></h5>
<h5 class="fs12 mn mt5 grey-text">Action | Adventure | Sci-Fi |</h5>
</div>
</div>
<div class="row">
<h5 class="fs12 m5 grey-text font-bold center-align">Stars by :</h5>
<div class="col s12 center-align">
<div class="chip">
Dacre Montgomery
</div>
<div class="chip">
Naomi Scott
</div>
<div class="chip">
RJ Cyler
</div>
</div>
</div>
<div class="row">
<div class="col s12">
<blockquote class="blockqoute-cstm mn">
A group of high-school students, who are infused with unique superpowers, harness their abilities in order to save the world.
</blockquote>
</div>
</div>
</div>
<div class="card-action">
<div class="row">
<div class="col s12">
<a href="#" class="col s2 btn-left waves-effect waves-light mn p10"><i class="fa fa-share-alt" aria-hidden="true"></i></a>
<a href="#" class="col s8 btn-mid waves-effect waves-light mn p10 md-trigger" data-modal="get-ticket"><i class="fa fa-ticket" aria-hidden="true"></i> Get Ticket</a>
<a href="#" class="col s2 btn-right waves-effect waves-light mn p10"><i class="fa fa-heart" aria-hidden="true"></i></a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col s12 m12 l4">
<div class="card-panel mn pn z-depth-1">
<div class="card">
<div class="card-image card-cover">
<img src="https://images-na.ssl-images-amazon.com/images/M/MV5BNTk4ODQ1MzgzNl5BMl5BanBnXkFtZTgwMTMyMzM4MTI@._V1_UX182_CR0,0,182,268_AL_.jpg" class="responsive-img">
</div>
</div>
<div class="card card-movie z-depth-3">
<div class="card-content pn">
<div class="row valign-wrapper">
<div class="col s3 movie-poster">
<img src="https://images-na.ssl-images-amazon.com/images/M/MV5BNTk4ODQ1MzgzNl5BMl5BanBnXkFtZTgwMTMyMzM4MTI@._V1_UX182_CR0,0,182,268_AL_.jpg" class="responsive-img z-depth-2">
</div>
<div class="col s9 mt10 movie-info">
<h1 class="fs24 mn indigo-text font-bold truncate">Spider-Man: Homecoming</h1>
<h5 class="fs14 mn mt5 grey-text font-bold">2017 | 2h 13min | <span class="orange-text"> IMBD <i class="fa fa-star" aria-hidden="true"></i> 8.2</span></h5>
<h5 class="fs12 mn mt5 grey-text">Action | Adventure | Sci-Fi </h5>
</div>
</div>
<div class="row">
<h5 class="fs12 m5 grey-text font-bold center-align">Stars by :</h5>
<div class="col s12 center-align">
<div class="chip">
Tom Holland
</div>
<div class="chip">
Michael Keaton
</div>
<div class="chip">
Robert Downey Jr.
</div>
</div>
</div>
<div class="row">
<div class="col s12">
<blockquote class="blockqoute-cstm mn">
Following the events of Captain America: Civil War (2016), Peter Parker attempts to balance his life in high school with his career as the web-slinging superhero Spider-Man.
</blockquote>
</div>
</div>
</div>
<div class="card-action">
<div class="row">
<div class="col s12">
<a href="#" class="col s2 btn-left waves-effect waves-light mn p10"><i class="fa fa-share-alt" aria-hidden="true"></i></a>
<a href="#" class="col s8 btn-mid waves-effect waves-light mn p10 md-trigger" data-modal="get-ticket"><i class="fa fa-ticket" aria-hidden="true"></i> Get Ticket</a>
<a href="#" class="col s2 btn-right waves-effect waves-light mn p10"><i class="fa fa-heart" aria-hidden="true"></i></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="md-modal md-effect-8" id="get-ticket">
<div class="md-content">
<h3>Get Ticket - [Movie Name]</h3>
<div class="row">
<div class="input-field col s4">
<label>Watching Date</label>
<input placeholder="Select Watching Date" type="date" class="datepicker">
</div>
<div class="input-field col s4">
<select>
<option value="" disabled selected>Select Watching Time</option>
<option value="12:45">12:45</option>
<option value="13:15">13:15</option>
<option value="14:45">14:45</option>
<option value="15:15">15:15</option>
<option value="16:4">16:45</option>
<option value="17:15">17:15</option>
<option value="18:45">18:45</option>
<option value="19:15">19:15</option>
<option value="20:45">20:45</option>
<option value="21:45">21:45</option>
</select>
<label>Watching Time</label>
</div>
<div class="input-field col s4">
<input value="3" id="ticketquantity" type="text" class="validate" readonly>
<label for="ticketquantity">Ticket Quantity</label>
</div>
</div>
<div class="row">
<div class="col s12 m12 l12">
<img src="http://via.placeholder.com/600x20" class="screen-position responsive-img"/>
</div>
<div class="seating-arrangement mt20">
<div class="center-align">
<input type="checkbox" id="seat1" class="filled-in" disabled="disabled"/>
<label for="seat1" class="tooltipped" data-position="bottom" data-tooltip="A1"></label>
<input type="checkbox" id="seat2" class="filled-in" disabled="disabled"/>
<label for="seat2" class="tooltipped" data-position="bottom" data-tooltip="A2"></label>
<input type="checkbox" id="seat3" class="filled-in" disabled="disabled" />
<label for="seat3" class="tooltipped" data-position="bottom" data-tooltip="A3"></label>
<input type="checkbox" id="seat4" class="filled-in" disabled="disabled" />
<label for="seat4" class="tooltipped" data-position="bottom" data-tooltip="A4"></label>
<input type="checkbox" id="seat5" class="filled-in" disabled="disabled"/>
<label for="seat5" class="tooltipped" data-position="bottom" data-tooltip="A5"></label>
<input type="checkbox" id="seat6" class="filled-in" checked/>
<label for="seat6" class="tooltipped" data-position="bottom" data-tooltip="A6"></label>
<input type="checkbox" id="seat7" class="filled-in" disabled="disabled" />
<label for="seat7" class="tooltipped" data-position="bottom" data-tooltip="A7"></label>
<input type="checkbox" id="seat8" class="filled-in" checked/>
<label for="seat8" class="tooltipped" data-position="bottom" data-tooltip="A8"></label>
<input type="checkbox" id="seat9" class="filled-in" disabled="disabled" />
<label for="seat9" class="tooltipped" data-position="bottom" data-tooltip="A9"></label>
<input type="checkbox" id="seat10" class="filled-in" disabled="disabled" />
<label for="seat10" class="tooltipped" data-position="bottom" data-tooltip="A10"></label>
<input type="checkbox" id="seat11" class="filled-in" checked/>
<label for="seat11" class="tooltipped" data-position="bottom" data-tooltip="A11"></label>
<input type="checkbox" id="seat12" class="filled-in" />
<label for="seat12" class="tooltipped" data-position="bottom" data-tooltip="A12"></label>
<input type="checkbox" id="seat13" class="filled-in" disabled="disabled" />
<label for="seat13" class="tooltipped" data-position="bottom" data-tooltip="A13"></label>
<input type="checkbox" id="seat14" class="filled-in" disabled="disabled" />
<label for="seat14" class="tooltipped" data-position="bottom" data-tooltip="A14"></label>
</div>
<div class="center-align">
<input type="checkbox" id="seat15" class="filled-in" />
<label for="seat15" class="tooltipped" data-position="bottom" data-tooltip="B1"></label>
<input type="checkbox" id="seat16" class="filled-in" disabled="disabled" />
<label for="seat16" class="tooltipped" data-position="bottom" data-tooltip="B2"></label>
<input type="checkbox" id="seat17" class="filled-in" disabled="disabled" />
<label for="seat17" class="tooltipped" data-position="bottom" data-tooltip="B3"></label>
<input type="checkbox" id="seat18" class="filled-in" disabled="disabled" />
<label for="seat18" class="tooltipped" data-position="bottom" data-tooltip="B4"></label>
<input type="checkbox" id="seat19" class="filled-in" />
<label for="seat19" class="tooltipped" data-position="bottom" data-tooltip="B5"></label>
<input type="checkbox" id="seat20" class="filled-in" disabled="disabled"/>
<label for="seat20" class="tooltipped" data-position="bottom" data-tooltip="B6"></label>
<input type="checkbox" id="seat21" class="filled-in" disabled="disabled" />
<label for="seat21" class="tooltipped" data-position="bottom" data-tooltip="B7"></label>
<input type="checkbox" id="seat22" class="filled-in" disabled="disabled" />
<label for="seat22" class="tooltipped" data-position="bottom" data-tooltip="B8"></label>
<input type="checkbox" id="seat23" class="filled-in" disabled="disabled" />
<label for="seat23" class="tooltipped" data-position="bottom" data-tooltip="B9"></label>
<input type="checkbox" id="seat24" class="filled-in" disabled="disabled" />
<label for="seat24" class="tooltipped" data-position="bottom" data-tooltip="B10"></label>
<input type="checkbox" id="seat25" class="filled-in" disabled="disabled" />
<label for="seat25" class="tooltipped" data-position="bottom" data-tooltip="B11"></label>
<input type="checkbox" id="seat26" class="filled-in" disabled="disabled" />
<label for="seat26" class="tooltipped" data-position="bottom" data-tooltip="B12"></label>
<input type="checkbox" id="seat27" class="filled-in" disabled="disabled" />
<label for="seat27" class="tooltipped" data-position="bottom" data-tooltip="B13"></label>
<input type="checkbox" id="seat28" class="filled-in" disabled="disabled" />
<label for="seat28" class="tooltipped" data-position="bottom" data-tooltip="B14"></label>
</div>
<div class="center-align">
<input type="checkbox" id="seat29" class="filled-in" disabled="disabled"/>
<label for="seat29" class="tooltipped" data-position="bottom" data-tooltip="C1"></label>
<input type="checkbox" id="seat30" class="filled-in" disabled="disabled"/>
<label for="seat30" class="tooltipped" data-position="bottom" data-tooltip="C2"></label>
<input type="checkbox" id="seat31" class="filled-in" disabled="disabled" />
<label for="seat31" class="tooltipped" data-position="bottom" data-tooltip="C3"></label>
<input type="checkbox" id="seat32" class="filled-in" disabled="disabled" />
<label for="seat32" class="tooltipped" data-position="bottom" data-tooltip="C4"></label>
<input type="checkbox" id="seat33" class="filled-in" disabled="disabled"/>
<label for="seat33" class="tooltipped" data-position="bottom" data-tooltip="C5"></label>
<input type="checkbox" id="seat34" class="filled-in" disabled="disabled"/>
<label for="seat34" class="tooltipped" data-position="bottom" data-tooltip="C6"></label>
<input type="checkbox" id="seat35" class="filled-in" disabled="disabled" />
<label for="seat35" class="tooltipped" data-position="bottom" data-tooltip="C7"></label>
<input type="checkbox" id="seat36" class="filled-in" disabled="disabled" />
<label for="seat36" class="tooltipped" data-position="bottom" data-tooltip="A8"></label>
<input type="checkbox" id="seat37" class="filled-in" disabled="disabled" />
<label for="seat37" class="tooltipped" data-position="bottom" data-tooltip="C9"></label>
<input type="checkbox" id="seat38" class="filled-in" disabled="disabled" />
<label for="seat38" class="tooltipped" data-position="bottom" data-tooltip="C10"></label>
<input type="checkbox" id="seat39" class="filled-in" disabled="disabled"/>
<label for="seat39" class="tooltipped" data-position="bottom" data-tooltip="C11"></label>
<input type="checkbox" id="seat40" class="filled-in" disabled="disabled"/>
<label for="seat40" class="tooltipped" data-position="bottom" data-tooltip="C12"></label>
<input type="checkbox" id="seat41" class="filled-in" disabled="disabled" />
<label for="seat41" class="tooltipped" data-position="bottom" data-tooltip="C13"></label>
<input type="checkbox" id="seat42" class="filled-in" disabled="disabled" />
<label for="seat42" class="tooltipped" data-position="bottom" data-tooltip="C14"></label>
</div>
<div class="center-align">
<input type="checkbox" id="seat43" class="filled-in" disabled="disabled" />
<label for="seat43" class="tooltipped" data-position="bottom" data-tooltip="D1"></label>
<input type="checkbox" id="seat44" class="filled-in" disabled="disabled" />
<label for="seat44" class="tooltipped" data-position="bottom" data-tooltip="D2"></label>
<input type="checkbox" id="seat45" class="filled-in" disabled="disabled" />
<label for="seat45" class="tooltipped" data-position="bottom" data-tooltip="D3"></label>
<input type="checkbox" id="seat46" class="filled-in" disabled="disabled" />
<label for="seat46" class="tooltipped" data-position="bottom" data-tooltip="D4"></label>
<input type="checkbox" id="seat47" class="filled-in" disabled="disabled"/>
<label for="seat47" class="tooltipped" data-position="bottom" data-tooltip="D5"></label>
<input type="checkbox" id="seat48" class="filled-in" disabled="disabled"/>
<label for="seat48" class="tooltipped" data-position="bottom" data-tooltip="D6"></label>
<input type="checkbox" id="seat49" class="filled-in" disabled="disabled" />
<label for="seat49" class="tooltipped" data-position="bottom" data-tooltip="D7"></label>
<input type="checkbox" id="seat50" class="filled-in" disabled="disabled" />
<label for="seat50" class="tooltipped" data-position="bottom" data-tooltip="D8"></label>
<input type="checkbox" id="seat51" class="filled-in" disabled="disabled" />
<label for="seat51" class="tooltipped" data-position="bottom" data-tooltip="D9"></label>
<input type="checkbox" id="seat52" class="filled-in" disabled="disabled" />
<label for="seat52" class="tooltipped" data-position="bottom" data-tooltip="D10"></label>
<input type="checkbox" id="seat53" class="filled-in" disabled="disabled" />
<label for="seat53" class="tooltipped" data-position="bottom" data-tooltip="D11"></label>
<input type="checkbox" id="seat54" class="filled-in" disabled="disabled" />
<label for="seat54" class="tooltipped" data-position="bottom" data-tooltip="D12"></label>
<input type="checkbox" id="seat55" class="filled-in" disabled="disabled" />
<label for="seat55" class="tooltipped" data-position="bottom" data-tooltip="D13"></label>
<input type="checkbox" id="seat56" class="filled-in" disabled="disabled" />
<label for="seat56" class="tooltipped" data-position="bottom" data-tooltip="D14"></label>
</div>
</div>
<div class="col s12 m12 l12 center-align">
<input type="checkbox" id="seat-booked" class="filled-in" disabled="disabled" />
<label for="seat-booked" class="tooltipped mr10" data-position="bottom" data-tooltip="Seat Booked">Seat Booked</label>
<input type="checkbox" id="seat-available" class="filled-in" onclick="SeatStatus(this, 'SeatStatus');" />
<label for="seat-available" class="tooltipped mr10" id="SeatStatus" data-position="bottom" data-tooltip="Ready to Book">Available Seat</label>
<!--<input type="checkbox" id="seat-selected" class="filled-in selected-seat" checked disabled="disabled"/>
<label for="seat-selected" class="tooltipped selected-seat mr10" data-position="bottom" data-tooltip="Selected Seat">Selected Seat</label>-->
</div>
</div>
<div class="row">
<div class="input-field col s4">
<input value="500,000" id="account-balance" type="text" class="validate" readonly>
<label class="active" for="account-balance">Balance (IDR)</label>
</div>
<div class="input-field col s4">
<input value="210,000" id="ticket-balance" type="text" class="validate" readonly>
<label class="active" for="ticket-balance">Tickets Price (IDR)</label>
</div>
<div class="input-field col s4 mn pt5">
<a class="waves-effect waves-light btn-proceed-order md-close" id="proceed-order"><i class="material-icons right">send</i> Proceed Order</a>
</div>
</div>
</div>
</div>
<div class="md-overlay"></div>
</div>
<div id="upcomingmovies" class="col s12">
<div class="row">
<div class="col s12 m12 l4">
<div class="card-panel mn pn z-depth-1">
<div class="card">
<div class="card-image card-cover">
<img src="https://images-na.ssl-images-amazon.com/images/M/MV5BMjAxNjQzMDk5NV5BMl5BanBnXkFtZTgwNjI0NjM2MjI@._V1_UX182_CR0,0,182,268_AL_.jpg" class="responsive-img">
</div>
</div>
<div class="card card-movie z-depth-3">
<div class="card-content pn">
<div class="row valign-wrapper">
<div class="col s3 movie-poster">
<img src="https://images-na.ssl-images-amazon.com/images/M/MV5BMjAxNjQzMDk5NV5BMl5BanBnXkFtZTgwNjI0NjM2MjI@._V1_UX182_CR0,0,182,268_AL_.jpg" class="responsive-img z-depth-2">
</div>
<div class="col s9 mt10 movie-info">
<h1 class="fs24 mn indigo-text font-bold truncate">The Mountain Between Us</h1>
<h5 class="fs14 mn mt5 grey-text font-bold">2017 | <span class="orange-text"> IMBD <i class="fa fa-star" aria-hidden="true"></i> N.A</span></h5>
<h5 class="fs12 mn mt5 grey-text">Action | Adventure | Drama</h5>
</div>
</div>
<div class="row">
<h5 class="fs12 m5 grey-text font-bold center-align">Stars by :</h5>
<div class="col s12 center-align">
<div class="chip">
Idris Elba
</div>
<div class="chip">
Kate Winslet
</div>
<div class="chip">
Dermot Mulroney
</div>
</div>
</div>
<div class="row">
<div class="col s12">
<blockquote class="blockqoute-cstm mn">
Stranded after a tragic plane crash, two strangers must forge a connection to survive the extreme elements of a remote snow covered mountain. When they realize help is not coming, they embark on a perilous journey across the wilderness.
</blockquote>
</div>
</div>
</div>
<div class="card-action">
<div class="row">
<a href="#share-movies" class="col s2 btn-left waves-effect waves-light mn p10"><i class="fa fa-share-alt" aria-hidden="true"></i></a>
<a href="#" class="col s8 btn-mid-upcoming waves-effect waves-light mn p10"disabled=""> 6 October 2017</a>
<a href="#" class="col s2 btn-right waves-effect waves-light mn p10"><i class="fa fa-heart" aria-hidden="true"></i></a>
</div>
</div>
</div>
</div>
</div>
<div class="col s12 m12 l4">
<div class="card-panel mn pn z-depth-1">
<div class="card">
<div class="card-image card-cover">
<img src="https://images-na.ssl-images-amazon.com/images/M/MV5BMjE1ODgwOTkzNF5BMl5BanBnXkFtZTgwMDcwMTg5MTI@._V1_UX182_CR0,0,182,268_AL_.jpg" class="responsive-img">
</div>
</div>
<div class="card card-movie z-depth-3">
<div class="card-content pn">
<div class="row valign-wrapper">
<div class="col s3 movie-poster">
<img src="https://images-na.ssl-images-amazon.com/images/M/MV5BMjE1ODgwOTkzNF5BMl5BanBnXkFtZTgwMDcwMTg5MTI@._V1_UX182_CR0,0,182,268_AL_.jpg" class="responsive-img z-depth-2">
</div>
<div class="col s9 mt10 movie-info">
<h1 class="fs24 mn indigo-text font-bold truncate">Thor: Ragnarok</h1>
<h5 class="fs14 mn mt5 grey-text font-bold">2017 |<span class="orange-text"> IMBD <i class="fa fa-star" aria-hidden="true"></i> N.A</span></h5>
<h5 class="fs12 mn mt5 grey-text">Action | Adventure | Fantasy </h5>
</div>
</div>
<div class="row">
<h5 class="fs12 m5 grey-text font-bold center-align">Stars by :</h5>
<div class="col s12 center-align">
<div class="chip">
Chris Hemsworth
</div>
<div class="chip">
Tom Hiddleston
</div>
<div class="chip">
Josh Duhamel
</div>
</div>
</div>
<div class="row">
<div class="col s12">
<blockquote class="blockqoute-cstm mn">
Imprisoned, the mighty Thor finds himself in a lethal gladiatorial contest against the Hulk, his former ally. Thor must fight for survival and race against time to prevent the all-powerful Hela from destroying his home and the Asgardian civilization.
</blockquote>
</div>
</div>
</div>
<div class="card-action">
<div class="row">
<a href="#" class="col s2 btn-left waves-effect waves-light mn p10"><i class="fa fa-share-alt" aria-hidden="true"></i></a>
<a href="#" class="col s8 btn-mid-upcoming waves-effect waves-light mn p10"> 3 November 2017</a>
<a href="#" class="col s2 btn-right waves-effect waves-light mn p10"><i class="fa fa-heart" aria-hidden="true"></i></a>
</div>
</div>
</div>
</div>
</div>
<div class="col s12 m12 l4">
<div class="card-panel mn pn z-depth-1">
<div class="card">
<div class="card-image card-cover">
<img src="https://images-na.ssl-images-amazon.com/images/M/MV5BYmFhNDkyZjgtZjY5MS00Nzg3LThiNWUtYTQyNTIxZTVjM2ZkXkEyXkFqcGdeQXVyNzY3ODQwMDM@._V1_UY268_CR110,0,182,268_AL_.jpg" class="responsive-img">
</div>
</div>
<div class="card card-movie z-depth-3">
<div class="card-content pn">
<div class="row valign-wrapper">
<div class="col s3 movie-poster">
<img src="https://images-na.ssl-images-amazon.com/images/M/MV5BYmFhNDkyZjgtZjY5MS00Nzg3LThiNWUtYTQyNTIxZTVjM2ZkXkEyXkFqcGdeQXVyNzY3ODQwMDM@._V1_UY268_CR110,0,182,268_AL_.jpg" class="responsive-img z-depth-2">
</div>
<div class="col s9 mt10 movie-info">
<h1 class="fs24 mn indigo-text font-bold truncate">He's Out There</h1>
<h5 class="fs14 mn mt5 grey-text font-bold">2017 |<span class="orange-text"> IMBD <i class="fa fa-star" aria-hidden="true"></i> N.A</span></h5>
<h5 class="fs12 mn mt5 grey-text">Horror</h5>
</div>
</div>
<div class="row">
<h5 class="fs12 m5 grey-text font-bold center-align">Stars by :</h5>
<div class="col s12 center-align">
<div class="chip">
Yvonne Strahovski
</div>
<div class="chip">
Justin Bruening
</div>
<div class="chip">
Abigail Pniowsky
</div>
</div>
</div>
<div class="row">
<div class="col s12">
<blockquote class="blockqoute-cstm mn">
On vacation at a remote lake house, a mother and her two young daughters must fight for survival after falling into a terrifying and bizarre nightmare conceived by a psychopath.
</blockquote>
</div>
</div>
</div>
<div class="card-action">
<div class="row">
<a href="#" class="col s2 btn-left waves-effect waves-light mn p10"><i class="fa fa-share-alt" aria-hidden="true"></i></a>
<a href="#" class="col s8 btn-mid-upcoming waves-effect waves-light mn p10"> 27 November 2017</a>
<a href="#" class="col s2 btn-right waves-effect waves-light mn p10"><i class="fa fa-heart" aria-hidden="true"></i></a>
</div>
</div>
</div>
</div>
</div>
<div class="col s12 m12 l4">
<div class="card-panel mn pn z-depth-1">
<div class="card">
<div class="card-image card-cover">
<img src="https://images-na.ssl-images-amazon.com/images/M/MV5BOTE5NzYyNjM0Ml5BMl5BanBnXkFtZTgwNjk4MDIwMjI@._V1_UX182_CR0,0,182,268_AL_.jpg" class="responsive-img">
</div>
</div>
<div class="card card-movie z-depth-3">
<div class="card-content pn">
<div class="row valign-wrapper">
<div class="col s3 movie-poster">
<img src="https://images-na.ssl-images-amazon.com/images/M/MV5BOTE5NzYyNjM0Ml5BMl5BanBnXkFtZTgwNjk4MDIwMjI@._V1_UX182_CR0,0,182,268_AL_.jpg" class="responsive-img z-depth-2">
</div>
<div class="col s9 mt10 movie-info">
<h1 class="fs24 mn orange-text font-bold truncate">Star Wars: The Last Jedi</h1>
<h5 class="fs14 mn mt5 grey-text font-bold">2017 | 2h 4min | <span class="orange-text"> IMBD <i class="fa fa-star" aria-hidden="true"></i> N.A</span></h5>
<h5 class="fs12 mn mt5 grey-text">Action | Adventure | Fantasy </h5>
</div>
</div>
<div class="row">
<h5 class="fs12 m5 grey-text font-bold center-align">Stars by :</h5>
<div class="col s12 center-align">
<div class="chip">
Daisy Ridley
</div>
<div class="chip">
John Boyega
</div>
<div class="chip">
Mark Hamill
</div>
</div>
</div>
<div class="row">
<div class="col s12">
<blockquote class="blockqoute-cstm mn">
Having taken her first steps into a larger world in Star Wars: The Force Awakens (2015), Rey continues her epic journey with Finn, Poe and Luke Skywalker in the next chapter of the saga.
</blockquote>
</div>
</div>
</div>
<div class="card-action">
<div class="row">
<a href="#" class="col s2 btn-left waves-effect waves-light mn p10"><i class="fa fa-share-alt" aria-hidden="true"></i></a>
<a href="#" class="col s8 btn-mid-upcoming waves-effect waves-light mn p10"> 15 December 2017</a>
<a href="#" class="col s2 btn-right waves-effect waves-light mn p10"><i class="fa fa-heart" aria-hidden="true"></i></a>
</div>
</div>
</div>
</div>
</div>
<div class="col s12 m12 l4">
<div class="card-panel mn pn z-depth-1">
<div class="card">
<div class="card-image card-cover">
<img src="https://images-na.ssl-images-amazon.com/images/M/MV5BMTU3NTQ0OTU0M15BMl5BanBnXkFtZTgwNTY4NTY3MjI@._V1_UX182_CR0,0,182,268_AL_.jpg" class="responsive-img">
</div>
</div>
<div class="card card-movie z-depth-3">
<div class="card-content pn">
<div class="row valign-wrapper">
<div class="col s3 movie-poster">
<img src="https://images-na.ssl-images-amazon.com/images/M/MV5BMTU3NTQ0OTU0M15BMl5BanBnXkFtZTgwNTY4NTY3MjI@._V1_UX182_CR0,0,182,268_AL_.jpg" class="responsive-img z-depth-2">
</div>
<div class="col s9 mt10 movie-info">
<h1 class="fs24 mn indigo-text font-bold truncate">Jumanji: Welcome to the Jungle</h1>
<h5 class="fs14 mn mt5 grey-text font-bold">2017 |<span class="orange-text"> IMBD <i class="fa fa-star" aria-hidden="true"></i> N.A</span></h5>
<h5 class="fs12 mn mt5 grey-text">Animation | Adventure | Comedy </h5>
</div>
</div>
<div class="row">
<h5 class="fs12 m5 grey-text font-bold center-align">Stars by :</h5>
<div class="col s12 center-align">
<div class="chip">
Karen Gillan
</div>
<div class="chip">
Dwayne Johnson
</div>
<div class="chip">
Missi Pyle
</div>
</div>
</div>
<div class="row">
<div class="col s12">
<blockquote class="blockqoute-cstm mn">
In a brand new Jumanji adventure, four high school kids discover an old video game console and are drawn into the game's jungle setting, literally becoming the adult avatars they chose. What they discover is that you don't just play Jumanji - you must survive it. To beat the game and return to the real world, they'll have to go on the most dangerous adventure of their lives, discover what Alan Parrish left 20 years ago, and change the way they think about themselves - or they'll be stuck in the game forever, to be played by others without break
</blockquote>
</div>
</div>
</div>
<div class="card-action">
<div class="row">
<a href="#" class="col s2 btn-left waves-effect waves-light mn p10"><i class="fa fa-share-alt" aria-hidden="true"></i></a>
<a href="#" class="col s8 btn-mid-upcoming waves-effect waves-light mn p10"> 20 December 2017</a>
<a href="#" class="col s2 btn-right waves-effect waves-light mn p10"><i class="fa fa-heart" aria-hidden="true"></i></a>
</div>
</div>
</div>
</div>
</div>
<div class="col s12 m12 l4">
<div class="card-panel mn pn z-depth-1">
<div class="card">
<div class="card-image card-cover">
<img src="https://images-na.ssl-images-amazon.com/images/M/MV5BNjEyMjk4NTE1NV5BMl5BanBnXkFtZTgwOTgzNzA3MjI@._V1_UX182_CR0,0,182,268_AL_.jpg" class="responsive-img">
</div>
</div>
<div class="card card-movie z-depth-3">
<div class="card-content pn">
<div class="row valign-wrapper">
<div class="col s3 movie-poster">
<img src="https://images-na.ssl-images-amazon.com/images/M/MV5BNjEyMjk4NTE1NV5BMl5BanBnXkFtZTgwOTgzNzA3MjI@._V1_UX182_CR0,0,182,268_AL_.jpg" class="responsive-img z-depth-2">
</div>
<div class="col s9 mt10 movie-info">
<h1 class="fs24 mn indigo-text font-bold truncate">Pitch Perfect 3</h1>
<h5 class="fs14 mn mt5 grey-text font-bold">2017 |<span class="orange-text"> IMBD <i class="fa fa-star" aria-hidden="true"></i> N.A</span></h5>
<h5 class="fs12 mn mt5 grey-text">Comedy | Music</h5>
</div>
</div>
<div class="row">
<h5 class="fs12 m5 grey-text font-bold center-align">Stars by :</h5>
<div class="col s12 center-align">
<div class="chip">
Ruby Rose
</div>
<div class="chip">
Anna Kendrick
</div>
<div class="chip">
Elizabeth Banks
</div>
</div>
</div>
<div class="row">
<div class="col s12">
<blockquote class="blockqoute-cstm mn">
Following their win at the world championship, the now separated Bellas reunite for one last singing competition at an overseas USO tour, but face a group who uses both instruments and voices
</blockquote>
</div>
</div>
</div>
<div class="card-action">
<div class="row">
<a href="#" class="col s2 btn-left waves-effect waves-light mn p10"><i class="fa fa-share-alt" aria-hidden="true"></i></a>
<a href="#" class="col s8 btn-mid-upcoming waves-effect waves-light mn p10"> 22 December 2017</a>
<a href="#" class="col s2 btn-right waves-effect waves-light mn p10"><i class="fa fa-heart" aria-hidden="true"></i></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="ticket" class="col s12">
<div class="row">
<div class="col s12 card-panel">
<table id="datatable" class="mdl-data-table full-width" cellspacing="0" width="100%">
<thead>
<tr>
<th>No</th>
<th>Ticket ID</th>
<th>Movie Title</th>
<th>Date Booked</th>
<th>Seat Booked</th>
<th>Transaction Date</th>
<th>Action</th>
</tr>
</thead>
<tfoot>
<tr>
<th>No</th>
<th>Ticket ID</th>
<th>Movie Title</th>
<th>Date Booked</th>
<th>Seat Booked</th>
<th>Transaction Date</th>
<th>Action</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>1</td>
<td>MX28YG</td>
<td>Wonder Woman</td>
<td>Sunday, 2 July 2017</td>
<td>3 Seats</td>
<td>Saturday, 1 July 2017</td>
<td>
<a href="#!" class="waves-effect tooltipped indigo-text" data-position="bottom" data-tooltip="Receipt"><i class="material-icons">receipt</i></a>
<a href="#!" id="send-trigger" class="waves-effect tooltipped indigo-text" data-position="bottom" data-tooltip="Send to Smartphone"><i class="material-icons">smartphone</i></a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div id="invoice" class="modal-invoice">
<div class="modal-invoice-content">
<span class="modal-invoice-close">&times;</span>
<h1 class="fs24 indigo-text modal-invoice-title"><i class="material-icons">local_movies</i> Cinema App</h1>
<div class="row">
<div class="input-field col s12">
<input value="+628 123 45678" id="phone_sent" type="text" class="validate" readonly>
<label class="active" for="phone_sent">Phone Number</label>
</div>
<p class="col s12 fs12 mn">
We will sent the unique code into number above, make sure the number is correct. In case the number not correct please change it first from <strong>Account Setting</strong>.
You may use the unique code to redeem into hardcopy of ticket in our cinema outlet.
Please make sure you're inform no one about the unique code.
</p>
<div class="input-field col s12 mn pn">
<input type="checkbox" id="readNumber"/>
<label for="readNumber">I've checked the number were correct</label>
</div>
</div>
<div class="row ">
<div class="col s12">
<a class="waves-effect waves-light btn indigo right" id="sendCode" disabled><i class="material-icons right">send</i> Sent me code</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.99.0/js/materialize.min.js"></script>
<script type="text/javascript" src="https://yusufrahmadi.com/codepen/CinemaApp/classie.js"></script>
<script type="text/javascript" src="https://yusufrahmadi.com/codepen/CinemaApp/modalEffects.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/6.6.5/sweetalert2.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.15/js/dataTables.material.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</body>
Raw
script.js
$(document).ready(function() {
$(".button-collapse").sideNav(
{
menuWidth: 300,
edge: 'left',
closeOnClick: true,
draggable: true,
onOpen: function(el) { },
onClose: function(el) { },
});
$(document).ready(function(){
$('.modal').modal();
});
$('.datepicker').pickadate({
selectMonths: false,
selectYears: 1,
min: true,
format:'dddd, dd mmmm yyyy'
});
$('select').material_select();
$("#proceed-order").click(function () {
swal("Thank you!", "Order Success, see you in theater", "success");
});
$('#datatable').DataTable( {
"scrollX": true,
columnDefs: [
{
targets: [ 0, 1, 2 ],
className: 'mdl-data-table__cell--non-numeric'
}
]
} );
$("#readNumber").click(function(event){
if ($(this).is(':checked')) {
$('#sendCode').removeAttr('disabled');
} else {
$('#sendCode').attr('disabled', true);
}
});
$("#sendCode").click(function () {
var close=document.getElementsByClassName("modal-invoice-close")[0];
close.click();
swal("Congratulation!", "The code has been sent to you number", "success");
location.reload();
});
});
function SeatStatus(chk, label) {
document.getElementById(label).innerHTML = chk.checked ? "Selected Seat" : "Available Seat";
}
/*
===============================================
Modal - Invoice
=================================================
*/
var modalInvoice = document.getElementById('invoice');
var invoice = document.getElementById("send-trigger");
var span = document.getElementsByClassName("modal-invoice-close")[0];
invoice.onclick = function() {
modalInvoice.style.display = "block";
}
span.onclick = function() {
modalInvoice.style.display = "none";
}
window.onclick = function(event) {
if (event.target == modalInvoice) {
modalInvoice.style.display = "none";
}
}
Raw
style.css
.navbar-fixed { z-index: 999 !important;}
.input-field input[type=search]:focus {
background-color: transparent !important;
color: #FFFFFF !important;
}
.side-nav .user-view,
.side-nav .userView {
position: relative;
padding: 32px 32px 0;
margin: 0;
}
.user-view{
height:200px;
}
.user-predicate{
margin:0 auto;
}
.tabs.tabs-transparent{
overflow: hidden;
}
.card-cover img{
clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 0% 100%, 0% 100%);
-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 0% 100%, 0% 100%);
opacity: 0.4;
}
.card-movie{
margin-top: -80% !important;
position: relative;
width: 90%;
margin-left: 5%;
bottom: 2em;
}
.movie-poster img{
position: relative;
margin-top: -50%;
width: 100%;
min-width: 70px;
height: auto;
min-height: 100px;
}
.chip{
display: block!important;
padding: 0 7px !important;
margin-right: 0!important;
}
.chip:hover{
background: #3F51B5;
color:#fff;
}
.chip a:hover i{
color:#fff;
}
.more-stars i{
vertical-align: middle;
color:rgba(0, 0, 0, 0.6);
font-size: 1.5em;
}
.btn-group{
background: none!important;
vertical-align: middle;
}
.btn-left{
position: relative;
float:left;
background: #3f51b5 ;
border-right: 1px solid #fff;
border-top-left-radius: 15%;
border-bottom-left-radius: 15%;
text-align: center;
color:#fff !important;
}
.btn-mid{
position: relative;
float:left;
background: #3f51b5 ;
text-align: center;
color:#fff !important;
}
.btn-mid-upcoming{
position: relative;
float:left;
background: #3f51b5 ;
text-align: center;
color:#fff !important;
opacity: 0.8;
pointer-events: none;
font-size:14.5px;
padding-top:1%;
}
.btn-right{
position: relative;
float:left;
background: #3f51b5 ;
border-left: 1px solid #fff;
border-top-right-radius: 15%;
border-bottom-right-radius: 15%;
text-align: center;
color:#fff !important;
}
.card{
margin:2% auto !important;
}
.card-movie{
margin-top:-80%!important;
}
.blockqoute-cstm{
padding: 2%;
border-left: 5px solid #3F51B5 ;
text-align: justify;
min-height: 120px !important;
max-height: 120px !important;
vertical-align: middle;
overflow-y: auto;
}
.picker__date-display{
background:#3f51b5!important;
}
.picker__close, .picker__today{
color: #3f51b5!important;
}
.picker__day.picker__day--today {
color: #3f51b5!important;
font-weight: bold;
}
.picker__day--selected, .picker__day--selected:hover, .picker--focused .picker__day--selected{
background-color: #3f51b5!important;
}
/*
===============================================
Modal - Get Ticket
=================================================
*/
.md-perspective,
.md-perspective body {
height: 100%;
overflow: hidden;
}
.md-perspective body {
background: #222;
-webkit-perspective: 600px;
-moz-perspective: 600px;
perspective: 600px;
}
.container {
background: #e74c3c;
min-height: 100%;
}
.md-modal {
position: fixed;
top: 50%;
left: 50%;
width: 100%;
/*width: 50%;*/
max-width: 1020px;
min-width: 320px;
height: auto;
z-index: 2000;
visibility: hidden;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
.md-show {
visibility: visible;
}
.md-overlay {
position: fixed;
width: 100%;
height: 100%;
visibility: hidden;
top: 0;
left: 0;
z-index: 1000;
opacity: 0;
background: rgba(53,59,149,0.8);
/*background: rgba(143,27,15,0.8);*/
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
.md-show ~ .md-overlay {
opacity: 1;
visibility: visible;
overflow: auto;
}
/* Content styles */
.md-content {
color: #fff;
background: #100C38;
/*background: #e74c3c;*/
position: relative;
border-radius: 3px;
margin: 0 auto;
min-height: 550px;
overflow:auto;
}
.md-content h3 {
margin: 0;
padding: 0.4em;
text-align: center;
font-size: 2.4em;
font-weight: 300;
opacity: 0.8;
background: rgba(0,0,0,0.1);
border-radius: 3px 3px 0 0;
}
.md-content > div {
padding: 15px 40px 30px;
margin: 0;
font-weight: 300;
font-size: 1.15em;
}
.md-effect-8.md-modal {
-webkit-perspective: 1300px;
-moz-perspective: 1300px;
perspective: 1300px;
}
.md-effect-8 .md-content {
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform: rotateY(-70deg);
-moz-transform: rotateY(-70deg);
-ms-transform: rotateY(-70deg);
transform: rotateY(-70deg);
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
opacity: 0;
}
.md-show.md-effect-8 .md-content {
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
transform: rotateY(0deg);
opacity: 1;
}
.screen-position{
margin-left:17%;
margin-bottom:5%;
}
.seating-arrangement{
/* min-width: 700px;*/
}
.btn-proceed-order{
text-decoration: none;
padding: 5%;
background-color: transparent;
color: #26a69a;
border: 2px solid #BDBDBD;
text-align: center;
letter-spacing: .5px;
-webkit-transition: .2s ease-out;
transition: .2s ease-out;
cursor: pointer;
margin: 0 17%;
}
.btn-proceed-order:hover{
text-decoration: none;
padding: 5%;
color: #fff;
background:#26a69a;
border: 2px solid #26a69a;
text-align: center;
letter-spacing: .5px;
-webkit-transition: .2s ease-out;
transition: .2s ease-out;
cursor: pointer;
margin: 0 17%;
}
/*
===============================================
Modal - Invoice
=================================================
*/
.modal-invoice {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content/Box */
.modal-invoice-content {
background-color: #fefefe;
margin: 10% auto; /* 15% from the top and centered */
padding: 20px;
border: 1px solid #888;
width: 35%; /* Could be more or less, depending on screen size */
}
/* The Close Button */
.modal-invoice-close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
cursor: pointer;
}
.modal-invoice-close.close:hover,
.modal-invoice-close.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
.modal-invoice-title{
padding: 2%;
border-bottom: 2px solid #3f51b5;
}
/*
===============================================
Sweet Alert Customization
=================================================
*/
.fade {
opacity: 0;
-webkit-transition: opacity 0.01s linear;
-moz-transition: opacity 0.01s linear;
-ms-transition: opacity 0.01s linear;
-o-transition: opacity 0.01s linear;
transition: opacity 0.01s linear;
}
.popover {
z-index: 215000000 !important;
}
.swal2-container {
z-index: 9999;
}
/*
===============================================
Scroll Setting
=================================================
*/
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
/*-webkit-box-shadow: inset 0 0 6px rgba(48,63,159,0.8);*/
-webkit-box-shadow: inset 20px -19px 6px rgba(243,243,243,0.8);
border-radius: 5%;
}
::-webkit-scrollbar-thumb {
border-radius: 5%;
/*-webkit-box-shadow: inset 0 0 6px rgba(63,81,181,1);*/
-webkit-box-shadow: inset 18px -20px 12px 0px rgb(203,203,203);
}
/*
===============================================
Text Helpers
=================================================
*/
.text-uppercase {
text-transform: uppercase !important;
}
.font-bold{
font-weight: bold;
}
.fw200 {
font-weight: 200 !important;
}
.fw300 {
font-weight: 300 !important;
}
.fw400 {
font-weight: 400 !important;
}
.fw600 {
font-weight: 600 !important;
}
.fw700 {
font-weight: 700 !important;
}
.fs3 {
font-size: 3px !important;
}
.fs4 {
font-size: 4px !important;
}
.fs5 {
font-size: 5px !important;
}
.fs6 {
font-size: 6px !important;
}
.fs7 {
font-size: 7px !important;
}
.fs8 {
font-size: 8px !important;
}
.fs9 {
font-size: 9px !important;
}
.fs10 {
font-size: 10px !important;
}
.fs11 {
font-size: 11px !important;
}
.fs12 {
font-size: 12px !important;
}
.fs13 {
font-size: 13px !important;
}
.fs14 {
font-size: 14px !important;
}
.fs15 {
font-size: 15px !important;
}
.fs16 {
font-size: 16px !important;
}
.fs16 {
font-size: 17px !important;
}
.fs18 {
font-size: 18px !important;
}
.fs20 {
font-size: 20px !important;
}
.fs22 {
font-size: 22px !important;
}
.fs24 {
font-size: 24px !important;
}
.fs26 {
font-size: 26px !important;
}
.fs28 {
font-size: 28px !important;
}
.fs30 {
font-size: 30px !important;
}
.fs35 {
font-size: 35px !important;
}
.fs40 {
font-size: 40px !important;
}
.fs45 {
font-size: 45px !important;
}
.fs50 {
font-size: 50px !important;
}
.fs60 {
font-size: 60px !important;
}
.fs70 {
font-size: 70px !important;
}
.fs80 {
font-size: 80px !important;
}
.fs90 {
font-size: 90px !important;
}
.fs100 {
font-size: 100px !important;
}
/*
===============================================
Padding Helpers
=================================================
*/
.pull-right {
float: right;
}
.pull-left {
float: left;
}
/*
===============================================
Padding Helpers
=================================================
*/
.pn {
padding: 0 !important;
}
.p1 {
padding: 1px !important;
}
.p2 {
padding: 2px !important;
}
.p3 {
padding: 3px !important;
}
.p4 {
padding: 4px !important;
}
.p5 {
padding: 5px !important;
}
.p6 {
padding: 6px !important;
}
.p7 {
padding: 7px !important;
}
.p8 {
padding: 8px !important;
}
.p10 {
padding: 10px !important;
}
.p12 {
padding: 12px !important;
}
.p15 {
padding: 15px !important;
}
.p20 {
padding: 20px !important;
}
.p25 {
padding: 25px !important;
}
.p30 {
padding: 30px !important;
}
.p35 {
padding: 35px !important;
}
.p40 {
padding: 40px !important;
}
.p50 {
padding: 50px !important;
}
.ptn {
padding-top: 0 !important;
}
.pt5 {
padding-top: 5px !important;
}
.pt10 {
padding-top: 10px !important;
}
.pt15 {
padding-top: 15px !important;
}
.pt20 {
padding-top: 20px !important;
}
.pt25 {
padding-top: 25px !important;
}
.pt30 {
padding-top: 30px !important;
}
.pt35 {
padding-top: 35px !important;
}
.pt40 {
padding-top: 40px !important;
}
.pt50 {
padding-top: 50px !important;
}
.prn {
padding-right: 0 !important;
}
.pr5 {
padding-right: 5px !important;
}
.pr10 {
padding-right: 10px !important;
}
.pr15 {
padding-right: 15px !important;
}
.pr20 {
padding-right: 20px !important;
}
.pr25 {
padding-right: 25px !important;
}
.pr30 {
padding-right: 30px !important;
}
.pr35 {
padding-right: 35px !important;
}
.pr40 {
padding-right: 40px !important;
}
.pr50 {
padding-right: 50px !important;
}
.pbn {
padding-bottom: 0 !important;
}
.pb5 {
padding-bottom: 5px !important;
}
.pb10 {
padding-bottom: 10px !important;
}
.pb15 {
padding-bottom: 15px !important;
}
.pb20 {
padding-bottom: 20px !important;
}
.pb25 {
padding-bottom: 25px !important;
}
.pb30 {
padding-bottom: 30px !important;
}
.pb35 {
padding-bottom: 35px !important;
}
.pb40 {
padding-bottom: 40px !important;
}
.pb50 {
padding-bottom: 50px !important;
}
.pln {
padding-left: 0 !important;
}
.pl5 {
padding-left: 5px !important;
}
.pl10 {
padding-left: 10px !important;
}
.pl15 {
padding-left: 15px !important;
}
.pl20 {
padding-left: 20px !important;
}
.pl25 {
padding-left: 25px !important;
}
.pl30 {
padding-left: 30px !important;
}
.pl35 {
padding-left: 35px !important;
}
.pl40 {
padding-left: 40px !important;
}
.pl50 {
padding-left: 50px !important;
}
/* Axis Padding (both top/bottom or left/right) */
.pv5 {
padding-top: 5px !important;
padding-bottom: 5px !important;
}
.pv8 {
padding-top: 8px !important;
padding-bottom: 8px !important;
}
.pv10 {
padding-top: 10px !important;
padding-bottom: 10px !important;
}
.pv15 {
padding-top: 15px !important;
padding-bottom: 15px !important;
}
.pv20 {
padding-top: 20px !important;
padding-bottom: 20px !important;
}
.pv25 {
padding-top: 25px !important;
padding-bottom: 25px !important;
}
.pv30 {
padding-top: 30px !important;
padding-bottom: 30px !important;
}
.pv40 {
padding-top: 40px !important;
padding-bottom: 40px !important;
}
.pv50 {
padding-top: 50px !important;
padding-bottom: 50px !important;
}
.ph5 {
padding-left: 5px !important;
padding-right: 5px !important;
}
.ph8 {
padding-left: 8px !important;
padding-right: 8px !important;
}
.ph10 {
padding-left: 10px !important;
padding-right: 10px !important;
}
.ph15 {
padding-left: 15px !important;
padding-right: 15px !important;
}
.ph20 {
padding-left: 20px !important;
padding-right: 20px !important;
}
.ph25 {
padding-left: 25px !important;
padding-right: 25px !important;
}
.ph30 {
padding-left: 30px !important;
padding-right: 30px !important;
}
.ph40 {
padding-left: 40px !important;
padding-right: 40px !important;
}
.ph50 {
padding-left: 50px !important;
padding-right: 50px !important;
}
/* responsive padding helpers */
@media (min-width: 1140px) {
.ptn-lg {
padding-top: 0 !important;
}
.prn-lg {
padding-right: 0 !important;
}
.pbn-lg {
padding-bottom: 0 !important;
}
.pln-lg {
padding-left: 0 !important;
}
.pt5-lg {
padding-top: 5px !important;
}
.pr5-lg {
padding-right: 5px !important;
}
.pb5-lg {
padding-bottom: 5px !important;
}
.pl5-lg {
padding-left: 5px !important;
}
}
@media (min-width: 992px) {
.ptn-md {
padding-top: 0 !important;
}
.prn-md {
padding-right: 0 !important;
}
.pbn-md {
padding-bottom: 0 !important;
}
.pln-md {
padding-left: 0 !important;
}
.pt5-md {
padding-top: 5px !important;
}
.pr5-md {
padding-right: 5px !important;
}
.pb5-md {
padding-bottom: 5px !important;
}
.pl5-md {
padding-left: 5px !important;
}
}
/*
===============================================
Margin Helpers
=================================================
*/
/* margin center helper */
.mauto {
margin-left: auto;
margin-right: auto;
}
.mn {
margin: 0 !important;
}
.margin {
margin: 0 !important;
}
.margin1 {
margin: 1px !important;
}
.margin2 {
margin: 2px !important;
}
.margin3 {
margin: 3px !important;
}
.margin4 {
margin: 4px !important;
}
.margin5 {
margin: 5px !important;
}
.margin8 {
margin: 8px !important;
}
.margin10 {
margin: 10px !important;
}
.margin15 {
margin: 15px !important;
}
.margin20 {
margin: 20px !important;
}
.margin25 {
margin: 25px !important;
}
.margin30 {
margin: 30px !important;
}
.margin35 {
margin: 35px !important;
}
.margin40 {
margin: 40px !important;
}
.margin50 {
margin: 50px !important;
}
.mtn {
margin-top: 0 !important;
}
.mt5 {
margin-top: 5px !important;
}
.mt10 {
margin-top: 10px !important;
}
.mt15 {
margin-top: 15px !important;
}
.mt18 {
margin-top: 18px !important;
}
.mt20 {
margin-top: 20px !important;
}
.mt25 {
margin-top: 25px !important;
}
.mt30 {
margin-top: 30px !important;
}
.mt35 {
margin-top: 35px !important;
}
.mt40 {
margin-top: 40px !important;
}
.mt45 {
margin-top: 45px !important;
}
.mt50 {
margin-top: 50px !important;
}
.mt70 {
margin-top: 70px !important;
}
.mrn {
margin-right: 0 !important;
}
.mr5 {
margin-right: 5px !important;
}
.mr10 {
margin-right: 10px !important;
}
.mr15 {
margin-right: 15px !important;
}
.mr20 {
margin-right: 20px !important;
}
.mr25 {
margin-right: 25px !important;
}
.mr30 {
margin-right: 30px !important;
}
.mr35 {
margin-right: 35px !important;
}
.mr40 {
margin-right: 40px !important;
}
.mr50 {
margin-right: 50px !important;
}
.mbn {
margin-bottom: 0 !important;
}
.mb5 {
margin-bottom: 5px !important;
}
.mb10 {
margin-bottom: 10px !important;
}
.mb15 {
margin-bottom: 15px !important;
}
.mb20 {
margin-bottom: 20px !important;
}
.mb25 {
margin-bottom: 25px !important;
}
.mb30 {
margin-bottom: 30px !important;
}
.mb35 {
margin-bottom: 35px !important;
}
.mb40 {
margin-bottom: 40px !important;
}
.mb50 {
margin-bottom: 50px !important;
}
.mb70 {
margin-bottom: 70px !important;
}
.mln {
margin-left: 0 !important;
}
.ml5 {
margin-left: 5px !important;
}
.ml10 {
margin-left: 10px !important;
}
.ml15 {
margin-left: 15px !important;
}
.ml20 {
margin-left: 20px !important;
}
.ml25 {
margin-left: 25px !important;
}
.ml30 {
margin-left: 30px !important;
}
.ml35 {
margin-left: 35px !important;
}
.ml40 {
margin-left: 40px !important;
}
.ml50 {
margin-left: 50px !important;
}
/* Axis Margins (both top/bottom or left/right) */
.mv5 {
margin-top: 5px !important;
margin-bottom: 5px !important;
}
.mv10 {
margin-top: 10px !important;
margin-bottom: 10px !important;
}
.mv15 {
margin-top: 15px !important;
margin-bottom: 15px !important;
}
.mv20 {
margin-top: 20px !important;
margin-bottom: 20px !important;
}
.mv25 {
margin-top: 25px !important;
margin-bottom: 25px !important;
}
.mv30 {
margin-top: 30px !important;
margin-bottom: 30px !important;
}
.mv40 {
margin-top: 40px !important;
margin-bottom: 40px !important;
}
.mv50 {
margin-top: 50px !important;
margin-bottom: 50px !important;
}
.mv70 {
margin-top: 70px !important;
margin-bottom: 70px !important;
}
.mh5 {
margin-left: 5px !important;
margin-right: 5px !important;
}
.mh10 {
margin-left: 10px !important;
margin-right: 10px !important;
}
.mh15 {
margin-left: 15px !important;
margin-right: 15px !important;
}
.mh20 {
margin-left: 20px !important;
margin-right: 20px !important;
}
.mh25 {
margin-left: 25px !important;
margin-right: 25px !important;
}
.mh30 {
margin-left: 30px !important;
margin-right: 30px !important;
}
.mh40 {
margin-left: 40px !important;
margin-right: 40px !important;
}
.mh50 {
margin-left: 50px !important;
margin-right: 50px !important;
}
.mh70 {
margin-left: 70px !important;
margin-right: 70px !important;
}
/* Negative Margin Helpers */
.mtn5 {
margin-top: -5px !important;
}
.mtn10 {
margin-top: -10px !important;
}
.mtn15 {
margin-top: -15px !important;
}
.mtn16 {
margin-top: -16px !important;
}
.mtn17 {
margin-top: -17px !important;
}
.mtn20 {
margin-top: -20px !important;
}
.mtn30 {
margin-top: -30px !important;
}
.mrn5 {
margin-right: -5px !important;
}
.mrn10 {
margin-right: -10px !important;
}
.mrn15 {
margin-right: -15px !important;
}
.mrn20 {
margin-right: -20px !important;
}
.mrn30 {
margin-right: -30px !important;
}
.mbn5 {
margin-bottom: -5px !important;
}
.mbn10 {
margin-bottom: -10px !important;
}
.mbn15 {
margin-bottom: -15px !important;
}
.mbn20 {
margin-bottom: -20px !important;
}
.mbn30 {
margin-bottom: -30px !important;
}
.mln5 {
margin-left: -5px !important;
}
.mln10 {
margin-left: -10px !important;
}
.mln15 {
margin-left: -15px !important;
}
.mln20 {
margin-left: -20px !important;
}
.mln30 {
margin-left: -30px !important;
}
/* Vertical Negative Margin "mv" + "n" + "x" */
.mvn5 {
margin-top: -5px !important;
margin-bottom: -5px !important;
}
.mvn10 {
margin-top: -10px !important;
margin-bottom: -10px !important;
}
.mvn15 {
margin-top: -15px !important;
margin-bottom: -15px !important;
}
.mvn20 {
margin-top: -20px !important;
margin-bottom: -20px !important;
}
.mvn30 {
margin-top: -30px !important;
margin-bottom: -30px !important;
}
/* Horizontal Negative Margin "mh" + "n" + "x" */
.mhn5 {
margin-left: -5px !important;
margin-right: -5px !important;
}
.mhn10 {
margin-left: -10px !important;
margin-right: -10px !important;
}
.mhn15 {
margin-left: -15px !important;
margin-right: -15px !important;
}
.mhn20 {
margin-left: -20px !important;
margin-right: -20px !important;
}
.mhn30 {
margin-left: -30px !important;
margin-right: -30px !important;
}
/*
===============================================
Max Width Helpers
=================================================
*/
.fluid-width {
width: 100% !important;
}
.mw10 {
max-width: 10px !important;
}
.mw20 {
max-width: 20px !important;
}
.mw30 {
max-width: 30px !important;
}
.mw35 {
max-width: 35px !important;
}
.mw40 {
max-width: 40px !important;
}
.mw45 {
max-width: 45px !important;
}
.mw50 {
max-width: 50px !important;
}
.mw60 {
max-width: 60px !important;
}
.mw80 {
max-width: 80px !important;
}
.mw100 {
max-width: 100px !important;
}
.mw140 {
max-width: 140px !important;
}
.mw160 {
max-width: 160px !important;
}
.mw180 {
max-width: 180px !important;
}
.mw200 {
max-width: 200px !important;
}
.mw240 {
max-width: 240px !important;
}
.mw280 {
max-width: 280px !important;
}
.mw320 {
max-width: 320px !important;
}
.mw400 {
max-width: 400px !important;
}
.mw450 {
max-width: 450px !important;
}
.mw500 {
max-width: 500px !important;
}
.mw600 {
max-width: 600px !important;
}
.mw700 {
max-width: 700px !important;
}
.mw800 {
max-width: 800px !important;
}
.mw900 {
max-width: 900px !important;
}
.mw1000 {
max-width: 1000px !important;
}
.mw1100 {
max-width: 1100px !important;
}
.mw1200 {
max-width: 1200px !important;
}
/*Regular Width Helpers. Primarily used
on tables, feel free to add more*/
.w20 {
width: 20px !important;
}
.w30 {
width: 30px !important;
}
.w40 {
width: 40px !important;
}
.w50 {
width: 50px !important;
}
.w75 {
width: 75px !important;
}
.w100 {
width: 100px !important;
}
.w125 {
width: 125px !important;
}
.w150 {
width: 150px !important;
}
.w175 {
width: 175px !important;
}
.w200 {
width: 200px !important;
}
.w225 {
width: 225px !important;
}
.w250 {
width: 250px !important;
}
.w300 {
width: 300px !important;
}
.w320 {
width: 320px !important;
}
.w350 {
width: 350px !important;
}
.w400 {
width: 400px !important;
}
.w450 {
width: 450px !important;
}
.mnw20 {
min-width: 20px !important;
}
.mnw30 {
min-width: 30px !important;
}
.mnw40 {
min-width: 40px !important;
}
.mnw50 {
min-width: 50px !important;
}
.mnw75 {
min-width: 75px !important;
}
.mnw100 {
min-width: 100px !important;
}
.mnw125 {
min-width: 125px !important;
}
.mnw150 {
min-width: 150px !important;
}
.mnw175 {
min-width: 175px !important;
}
.mnw200 {
min-width: 200px !important;
}
.mnw250 {
min-width: 250px !important;
}
.mnw300 {
min-width: 300px !important;
}
.mnw500 {
min-width: 500px !important;
}
.mnw700 {
min-width: 700px !important;
}
.mnw1000 {
min-width: 1000px !important;
}
/*
===============================================
List Helpers
=================================================
*/
.non-list{
list-style: none;
}
/*
===============================================
Image Size
=================================================
*/
.imagemw50{
max-width: 50px !important;
}
.imagemw60{
max-width: 60px !important;
}
.imagemw70{
max-width: 70px !important;
}
.imagemw80{
max-width: 80px !important;
}
.imagemw90{
max-width: 90px !important;
}
.imagemw100{
max-width: 100px !important;
}
/*
===============================================
Screen Option
=================================================
*/
.full-width{
width:100% !important;
}
/*
===============================================
Line Option
=================================================
*/
.line-height-non{
line-height: 0;
}
/*
===============================================
Float Option
=================================================
*/
.non-float{
float:none;
}
/*
===============================================
Display Option
=================================================
*/
.display-block{
display: block;
}
/*
===============================================
Datatable MDL
=================================================
*/
/*
===============================================
Media Query
=================================================
*/
/*
===============================================
Media Query 320px
=================================================
*/
@media screen and (max-width: 320px) {
.navbar-fixed { z-index: 999; }
.modal-invoice-content{
margin:20% auto;
width: 100% !important;
}
}
/*
===============================================
Media Query 640px
=================================================
*/
@media screen and (max-width: 640px) {
.navbar-fixed { z-index: 999; }
.card{
margin-bottom: 10%!important;
}
.card-movie{
margin-top: -70%;
}
.md-modal{
z-index: 999999;
}
.md-overlay{
z-index:99999;
}
.screen-position{
margin:0 auto !important;
}
.btn-proceed-order{
padding: 8% 3% !important;
margin: 0 auto !important;
}
.btn-proceed-order:hover{
padding: 8% 3% !important;
margin: 0 auto !important;
}
.modal-invoice-content{
margin-top:35%;
width: 100% !important;
}
}
/*
===============================================
Media Query 800px
=================================================
*/
@media screen and (max-width: 800px) {
.navbar-fixed { z-index: 999; }
.card{
margin-bottom: 10%!important;
}
.md-modal{
z-index: 999999;
}
.md-overlay{
z-index:99999;
}
.btn-left{
border-top-left-radius: 5%;
border-bottom-left-radius: 5%;
}
.btn-right{
border-top-right-radius: 5%;
border-bottom-right-radius: 5%;
}
.md-modal{
margin-top: 7%!important;
}
.screen-position{
margin:7%;
}
.btn-proceed-order{
padding: 5% 3% !important;
margin: 0 auto !important;
}
.btn-proceed-order:hover{
padding: 5% 3% !important;
margin: 0 auto !important;
}
.modal-invoice-content{
margin-top:25%;
width: 100% !important;
}
}
/*
===============================================
Media Query 1024px
=================================================
*/
@media screen and (max-width: 1024px) {
.navbar-fixed { z-index: 999; }
.row .col.s9 {
width: 70%;
}
.md-modal{
z-index: 999999;
}
.md-overlay{
z-index:99999;
}
.movie-info{
margin-top:0 !important;
margin-left:7% !important;
}
.fs24{
font-size: 14px !important;
}
.fs14{
font-size: 12px !important;
}
.fs12{
font-size: 10px !important;
}
.chip{
display: inherit !important;
}
.modal-invoice-content{
margin-top:20%;
width: 100% !important;
}
}
/*
===============================================
Media Query 1028px
=================================================
*/
@media screen and (max-width: 1028px) {
.row .col.s9 {
width: 70%;
}
.movie-info{
margin-top:0 !important;
margin-left:7% !important;
}
.fs24{
font-size: 14px !important;
}
.fs14{
font-size: 12px !important;
}
.fs12{
font-size: 10px !important;
}
.chip{
display: inherit !important;
}
.card-action{
margin-top: 2%!important;
padding: 3%!important;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment