<div class="container">
<div class="app">
<div class="nav">
<div class="nav-top">
<i class="fa fa-bars"></i><i class="fa fa-film"></i><i class="fa fa-search"></i>
</div>
<ul>
<li class="active">Today</li>
<li>Sep 16</li>
<li>Sep 15</li>
<li>Sep 14</li>
</ul>
</div>
<i class="fa fa-play-circle"></i>
<img src="imgs/moonlight.jpg" alt="" class="cover-thumb">
<div class="list-items">
<div class="list-item">
<div class="list-thumb">
<img src="https://codefrog.space/cp/mbp/annabelle.jpg" alt="" width="110">
</div>
<span class="movie-time-left">in 2h 15m</span>
<span class="book-now">
<i class="fa fa-ticket"></i>
</span>
<div class="movie-detail">
<div class="short-detail">
<table>
<tr>
<td class="title">Annabelle</td>
</tr>
<tr>
<td class="author">by David F. Sandberg</td>
</tr>
<tr>
<td class="rating">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star na"></i>
<i class="fa fa-star na"></i>
</td>
</tr>
<tr>
<td class="genre">
Horror | Mystery | Th...
</td>
</tr>
</table>
<span class="more-option"></span>
</div>
<div class="full-detail">
<span class="show-time">
Today
<span>
3:00 PM
<i class="fa fa-caret-down"></i>
</span>
</span>
<table>
<tr>
<td class="title">Annabelle</td>
</tr>
<tr>
<td class="author">by David F. Sandberg</td>
</tr>
<tr>
<td class="duration">
1h 49min
</td>
</tr>
<tr>
<td class="rating">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star na"></i>
<i class="fa fa-star na"></i>
<span>3.1/5</span>
</td>
</tr>
</table>
<div class="meta-data">
<ul class="nav">
<li class="active">Info</li>
<li>Cast</li>
<li>Reviews</li>
<li>Awards(0)</li>
</ul>
<div class="info">
<span class="genre">
Horror | Mystery | Thriller
</span>
<span class="story">
12 years after the tragic death of their little girl, a dollmaker and his wife welcome a nun and several girls from a shuttered orphanage into their home, where they soon become the target of the dollmaker's possessed creation, Annabelle.
Annabelle: Creation is a 2017 American supernatural horror film directed by David F. Sandberg and written by Gary Dauberman. It is a prequel to 2014's Annabelle and the fourth installment in The Conjuring series. The film stars Stephanie Sigman, Talitha Bateman, Anthony LaPaglia and Miranda Otto, and depicts the possessed Annabelle doll's origin.
<br />
Annabelle: Creation premiered at the LA Film Festival on June 19, 2017, and was theatrically released in the United States on August 11, 2017. The film has grossed over $291 million worldwide and received generally positive reviews from critics, who praised the atmosphere and acting, and noted it as an improvement over its predecessor.
</span>
</div>
</div>
</div>
</div>
</div>
<div class="list-item">
<div class="list-thumb">
<img src="https://codefrog.space/cp/mbp/bahubali21.jpg" alt="" width="110">
</div>
<span class="movie-time-left">5:30 PM</span>
<span class="book-now">
<i class="fa fa-ticket"></i>
</span>
<div class="movie-detail">
<div class="short-detail">
<table>
<tr>
<td class="title">Bahubali 2</td>
</tr>
<tr>
<td class="author">by S. S. Rajamouli</td>
</tr>
<tr>
<td class="rating">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star na"></i>
</td>
</tr>
<tr>
<td class="genre">
Action | Drama | Ad...
</td>
</tr>
</table>
<span class="more-option"></span>
</div>
<div class="full-detail">
<span class="show-time">
Today
<span>
5:30 PM
<i class="fa fa-caret-down"></i>
</span>
</span>
<table>
<tr>
<td class="title">Bahubali 2</td>
</tr>
<tr>
<td class="author">by S.S. Rajamouli</td>
</tr>
<tr>
<td class="duration">
2h 47min
</td>
</tr>
<tr>
<td class="rating">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star na"></i>
<span>3.1/5</span>
</td>
</tr>
</table>
<div class="meta-data">
<ul class="nav">
<li class="active">Info</li>
<li>Cast</li>
<li>Reviews</li>
<li>Awards(0)</li>
</ul>
<div class="info">
<span class="genre">
Action | Drama | Adventure
</span>
<span class="story">
When Shiva, the son of Bahubali, learns about his heritage, he begins to look for answers. His story is juxtaposed with past events that unfolded in the Mahishmati Kingdom.<br />
Baahubali 2: The Conclusion was premiered at the British Film Institute, and is the inaugural feature film at the 39th Moscow International Film Festival. The Conclusion was theatrically released over 9000 screens worldwide on 28 April 2017. Baahubali 2 was the first Telugu film to be released in 4K High Definition format. It is estimated that close to 200 screens were upgraded to 4K projectors before the release date of the movie.
<br />
It became the first ever Indian film to gross over ?1,000 crore (US$160 million) in all languages, doing so in just ten days
</span>
</div>
</div>
</div>
</div>
</div>
<div class="list-item">
<div class="list-thumb">
<img src="https://codefrog.space/cp/mbp/inception.jpg" alt="" width="110">
</div>
<span class="movie-time-left">7:00 PM</span>
<span class="book-now">
<i class="fa fa-ticket"></i>
</span>
<div class="movie-detail">
<div class="short-detail">
<table>
<tr>
<td class="title">Inception</td>
</tr>
<tr>
<td class="author">by Christopher Nolan</td>
</tr>
<tr>
<td class="rating">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star na"></i>
</td>
</tr>
<tr>
<td class="genre">
Action | Sci-Fi | Ad...
</td>
</tr>
</table>
<span class="more-option"></span>
</div>
<div class="full-detail">
<span class="show-time">
Today
<span>
7:00 PM
<i class="fa fa-caret-down"></i>
</span>
</span>
<table>
<tr>
<td class="title">Inception</td>
</tr>
<tr>
<td class="author">by Christopher Nolan</td>
</tr>
<tr>
<td class="duration">
2h 28min
</td>
</tr>
<tr>
<td class="rating">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star na"></i>
<span>4.4/5</span>
</td>
</tr>
</table>
<div class="meta-data">
<ul class="nav">
<li class="active">Info</li>
<li>Cast</li>
<li>Reviews</li>
<li>Awards(0)</li>
</ul>
<div class="info">
<span class="genre">
Action | Sci-Fi | Adventure
</span>
<span class="story">
A thief, who steals corporate secrets through use of dream-sharing technology, is given the inverse task of planting an idea into the mind of a CEO.<br />
Inception's première was held in London on July 8, 2010; its wide release to both conventional and IMAX theaters began on July 16, 2010. A box office success, Inception grossed over $800 million worldwide. The home video market also had strong results, with $68 million in DVD and Blu-ray sales. Inception opened to acclaim from critics, who praised its story, score, and ensemble cast. It won four Academy Awards for Best Cinematography, Best Sound Editing, Best Sound Mixing, and Best Visual Effects, and was nominated for four more: Best Picture, Best Original Screenplay, Best Art Direction, and Best Original Score.
</span>
</div>
</div>
</div>
</div>
</div>
<div class="list-item">
<div class="list-thumb">
<img src="https://codefrog.space/cp/mbp/avatar.jpg" alt="" width="110">
</div>
<span class="movie-time-left">9:30 PM</span>
<span class="book-now">
<i class="fa fa-ticket"></i>
</span>
<div class="movie-detail">
<div class="short-detail">
<table>
<tr>
<td class="title">Avatar</td>
</tr>
<tr>
<td class="author">by James Cameron</td>
</tr>
<tr>
<td class="rating">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star na"></i>
<i class="fa fa-star na"></i>
</td>
</tr>
<tr>
<td class="genre">
Action | Fantasy | Ad...
</td>
</tr>
</table>
<span class="more-option"></span>
</div>
<div class="full-detail">
<span class="show-time">
Today
<span>
9:30 PM
<i class="fa fa-caret-down"></i>
</span>
</span>
<table>
<tr>
<td class="title">Avatar</td>
</tr>
<tr>
<td class="author">by James Cameron</td>
</tr>
<tr>
<td class="duration">
2h 42min
</td>
</tr>
<tr>
<td class="rating">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star na"></i>
<i class="fa fa-star na"></i>
<span>3.9/5</span>
</td>
</tr>
</table>
<div class="meta-data">
<ul class="nav">
<li class="active">Info</li>
<li>Cast</li>
<li>Reviews</li>
<li>Awards(0)</li>
</ul>
<div class="info">
<span class="genre">
Action | Fantasy | Adventure
</span>
<span class="story">
A paraplegic marine dispatched to the moon Pandora on a unique mission becomes torn between following his orders and protecting the world he feels is his home.
<br />
Avatar premiered in London on December 10, 2009, and was internationally released on December 16 and in the United States and Canada on December 18, to positive critical reviews, with critics highly praising its groundbreaking visual effects. During its theatrical run, the film broke several box office records and became the highest-grossing film of all time, as well as in the United States and Canada, surpassing Cameron's Titanic, which had held those records for twelve years. It also became the first film to gross more than $2 billion and the best-selling film of 2010 in the United States.
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="footer-popup">
<ul class="action">
<li>
<i class="fa fa-mail-forward"></i>
</li>
<li>
<i class="fa fa-ticket"></i>
<span>Book</span>
</li>
<li>
<i class="fa fa-film"></i>
</li>
</ul>
</div>
</div>
</div>
<a id="btnDownload" href="https://www.codefrog.co.in/post/movie-ticket-booking-app/" target="_blank">
<img src="https://newshost24.com/wp-content/uploads/2022/08/Movieswood-Telugu-2022-Tamil-Movies-Telugu-HD-Movies-Download.png" />
</a>
*
{
margin: 0;
padding: 0;
outline: none;
}
body
{
font-family: Roboto, sans-serif;
background: #1e2535;
}
.container
{
width: 430px;
height: auto;
margin: 50px auto;
}
div.app
{
position: relative;
width: 365px;
height: 700px;
background: #6a18ff;
margin-top: 30px;
overflow: hidden;
box-shadow: inset -15px -15px 80px rgba(0,0,0,0.15),
0 50px 45px -30px rgba(0,0,0,0.15);
perspective: 500px;
}
.app:before
{
position: absolute;
content: '';
width: 300%;
height: 100%;
background: rgba(255,255,255,0.92);
display: inline-block;
bottom: -30%;
transform-origin: left bottom;
transform: rotate(-10deg);
z-index: -1;
}
div.nav
{
position: absolute;
width: 100%;
opacity: 1;
}
div.nav div.nav-top
{
padding-top: 15px;
padding-bottom: 28px;
width: 100%;
}
div.nav div.nav-top i
{
width: 33.33%;
color: #fff;
font-size: 21px;
opacity: 0.5;
}
div.nav div.nav-top i:last-child
{
width: 30%;
text-align: right;
}
div.nav div.nav-top i:nth-child(2)
{
position: relative;
opacity: 0.95;
text-align: center;
top: -1px;
}
div.nav div.nav-top i:first-child
{
width: 29%;
margin-left: 15px;
}
div.nav:before
{
position: absolute;
content: '';
width: 100%;
height: 85%;
box-shadow: inset 0 65px 55px -25px rgba(0,0,0,0.3);
}
div.nav ul
{
margin-left: 15px;
}
div.nav ul li
{
float: left;
list-style: none;
color: #fff;
width: 25%;
text-align: center;
font-size: 14px;
font-weight: 500;
opacity: 0.35;
}
div.nav ul li.active
{
font-weight: 600;
transform: scale(2.3);
opacity: 0.95;
}
div.list-items
{
position: relative;
top: 100px;
}
div.list-item
{
position: relative;
margin-bottom: 25px;
padding: 0 0 0 3%;
}
div.list-thumb
{
position: absolute;
width: 110px;
height: 250px;
height: 110px;
overflow: hidden;
border-radius: 10px;
transform: scale(0.85) translateX(0px);
box-shadow: 10px 15px 15px -10px rgba(0,0,0,0.2);
opacity: 1;
z-index: 1;
}
div.list-item span.movie-time-left
{
position: absolute;
font-size: 11px;
font-weight: 600;
color: rgba(0,0,0,0.5);
left: 20px;
bottom: -5px;
}
div.movie-detail
{
width: 97%;
top: 0;
z-index: -1;
height: 120px;
transform: translateY(25px);
}
div.movie-detail div.short-detail
{
position: absolute;
left: 0;
width: 45%;
background: #fff;
display: inline-block;
padding: 15px 45px;
padding-right: 55px;
border-radius: 5px;
transform-origin: left bottom;
transform: translateX(75px) scaleY(1);
box-shadow: 0px 25px 45px -10px rgba(0,0,0,0.3);
opacity: 1;
}
div.movie-detail div.short-detail td
{
padding: 1px 0;
}
div.movie-detail div.short-detail .title
{
font-size: 19px;
font-weight: 700;
letter-spacing: 0.2px;
color: rgba(0,0,0,0.8);
}
div.movie-detail div.short-detail .author
{
font-size: 12px;
font-weight: 500;
letter-spacing: 0.2px;
color: rgba(0,0,0,0.4);
}
div.movie-detail div.short-detail .rating
{
font-size: 13px;
font-weight: 500;
letter-spacing: 0.2px;
color: #6a18ff;
}
div.movie-detail .rating i.na
{
opacity: 0.5;
}
div.movie-detail div.short-detail .genre
{
font-size: 14px;
font-weight: 500;
letter-spacing: 0.2px;
color: #000;
}
div.movie-detail div.short-detail span.more-option
{
position: absolute;
width: 4px;
height: 4px;
display: inline-block;
background: rgba(0,0,0,0.2);
right: 20px;
top: 20px;
border-radius: 100%;
box-shadow: 0 6px 0 rgba(0,0,0,0.2),
0 12px 0 rgba(0,0,0,0.2);
}
div.list-item span.book-now
{
position: absolute;
top: 0;
right: 0;
z-index: 1;
font-size: 40px;
font-weight: 600;
color: rgba(255,255,255,0.95);
background: #2da5e8;
background: #4ACFFF;
background: #6a18ff;
width: 60px;
height: 48px;
background-image: url('../imgs/texture.png');
line-height: 48px;
text-align: center;
border-radius: 10px;
margin-top: 80px;
transform: translateX(-15px);
box-shadow: 0 18px 15px -10px rgba(106,24,255,0.5),
0 18px 15px -10px rgba(0,0,0,0.05);
border-bottom: 1px solid rgba(0,0,0,0.1);
border-top: 1px solid rgba(0,0,0,0.1);
}
div.list-item span.book-now i
{
transform: rotate(45deg);
}
div.movie-detail div.full-detail
{
position: relative;
width: 100%;
background: #fff;
top: 0px;
border-radius: 5px;
transform: scaleY(0);
transform-origin: top center;
opacity: 0;
}
div.full-detail span.show-time
{
position: absolute;
right: 0;
font-size: 13px;
color: rgba(0,0,0,0.5);
background: #fff;
padding: 15px 10px;
margin-top: -30px;
margin-right: 15px;
border-radius: 3px;
box-shadow: 0 12px 15px -2px rgba(0,0,0,0.15);
opacity: 0;
}
div.full-detail span.show-time span
{
font-weight: 600;
color: #000;
margin-left: 5px;
}
div.full-detail table
{
position: relative;
margin-left: 120px;
top: 35px;
}
div.movie-detail div.full-detail .title
{
font-size: 21px;
font-weight: 900;
letter-spacing: 0.2px;
color: rgba(0,0,0,0.8);
}
div.full-detail .author
{
font-size: 12px;
font-weight: 500;
letter-spacing: 0.2px;
color: rgba(0,0,0,0.4);
}
div.full-detail .duration
{
font-size: 11px;
font-weight: 900;
letter-spacing: 0.2px;
color: rgba(0,0,0,0.7);
padding-top: 2px;
}
div.full-detail .rating
{
font-size: 19px;
font-weight: 500;
letter-spacing: 0.2px;
color: #6a18ff;
padding-top: 1px;
}
div.full-detail .rating span
{
position: relative;
font-size: 12px;
font-weight: 500;
margin-left: 5px;
top: -3px;
}
div.meta-data
{
position: relative;
margin-top: 50px;
margin-left: 24.5px;
}
div.meta-data ul.nav li
{
position: relative;
float: left;
list-style: none;
width: 23%;
text-align: ledt;
font-size: 14px;
font-weight: 900;
color: #029bf0;
color: #48beff;
color: #6a18ff;
padding: 10px 0;
padding-left: 0;
border-bottom: 1px solid rgba(0,0,0,0.2);
}
div.meta-data ul.nav li.active
{
color: rgba(0,0,0,0.7) !important;
}
div.meta-data ul.nav li.active:before
{
position: absolute;
content: '';
width: 90%;
height: 3px;
display: inline-block;
background: rgba(0,0,0,0.7);
bottom: -1.5px;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
div.info
{
position: relative;
}
div.info span.genre
{
font-size: 14px;
font-weight: 600;
padding-top: 15px;
color: rgba(0,0,0,0.7);
display: inline-block;
}
div.info span.story
{
display: block;
padding-top: 10px;
padding-right: 25px;
font-size: 13.5px;
font-weight: 500;
line-height: 20px;
text-align: justify;
color: rgba(0,0,0,0.5);
}
div.footer-popup
{
position: absolute;
width: 85%;
background: #6a18ff;
background-image: url('../imgs/texture.png');
bottom: -120px;
border-radius: 15px;
left: 7.5%;
border-bottom: 1px solid rgba(0,0,0,0.2);
border-top: 1px solid rgba(0,0,0,0.2);
box-shadow: inset -45px 0 105px -25px rgba(0,0,0,0.10),
inset 35px 0 105px -15px rgba(0,0,0,0.05),
0 30px 30px -25px rgba(0,0,0,0.2);
overflow: hidden;
padding: 15px 0;
opacity: 0.3;
z-index: 99;
}
div.footer-popup ul li
{
list-style: none;
float: left;
height: 40px;
text-align: center;
line-height: 40px;
color: #fff;
font-size: 20px;
}
div.footer-popup ul li:first-child,
div.footer-popup ul li:last-child
{
width: 20%;
}
div.footer-popup ul li:nth-child(2)
{
box-sizing: border-box;
width: 60%;
border-left: 1px solid rgba(255,255,255,0.3);
border-right: 1px solid rgba(255,255,255,0.3);
}
div.footer-popup ul li i.fa-ticket
{
transform: rotate(45deg);
font-size: 35px;
margin-top: 2px;
}
div.footer-popup ul li span
{
position: relative;
font-size: 16px;
font-weight: 600;
padding-left: 5px;
top: -6.5px;
}
/* UX */
div.app
{
transition: all 0.3s ease-in;
}
.app:before
{
transition: all 0.3s ease-out;
}
div.nav
{
transform-origin: left top;
transition: all 0.4s ease-out;
}
.app.open div.nav
{
transform: translateY(-100px);
opacity: 0;
}
.app.open:before
{
bottom: -55%;
}
.app img.cover-thumb
{
position: absolute;
top: -10%;
left: -10%;
width: 120%;
z-index: -2;
filter: blur(3px);
opacity: 0;
transform-origin: top center;
transform: translateY(-25px) translateX(125px) scale(1.7) rotate(35deg);
transition: all 0.4s ease-in-out;
}
.app.open img.cover-thumb
{
opacity: 0.7;
transform: translateY(-85px) translateX(0px) scale(1.1) rotate(0deg);
}
i.fa.fa-play,
i.fa.fa-play-circle
{
color: #fff;
position: absolute;
top: 0;
margin-top: 75px;
font-size: 35px;
display: block;
width: 100%;
text-align: center;
opacity: 0;
transform: translateY(55px) rotate(90deg);
transition: all 0.3s ease-out;
}
.app.open i.fa.fa-play,
.app.open i.fa.fa-play-circle
{
opacity: 0.8;
transform: translateY(0px) rotate(0deg);
}
div.list-items
{
transition: all 0.3s ease-out;
}
div.list-item
{
transition: all 0.3s ease-out;
}
div.list-thumb
{
transition: all 0.6s cubic-bezier(0.895, 0.000, 0.000, 1.365);
}
div.list-item.open div.list-thumb
{
height: 159px;
border-radius: 0px;
box-shadow: 0 0 5px 3px rgba(0,0,0,0.15);
transform: scale(0.9) translateX(3px) translateY(-10px);
}
div.movie-detail
{
transition: height 0.5s cubic-bezier(0.895, 0.000, 0.000, 1.365);
}
div.list-item.open div.movie-detail
{
height: 500px;
}
div.movie-detail div.short-detail
{
transition: all 0.5s cubic-bezier(0.895, 0.000, 0.000, 1.365);
}
div.list-item.open div.movie-detail div.short-detail
{
opacity: 0;
transform: translateX(75px) scaleY(0);
}
div.list-item span.book-now
{
transition: all 0.3s ease-out;
}
div.list-item.open span.book-now
{
transform: translateX(50px);
opacity: 0;
}
div.movie-detail div.full-detail
{
transition: all 0.5s cubic-bezier(0.895, 0.000, 0.000, 1.365);
}
div.list-item.open div.movie-detail div.full-detail
{
opacity: 1;
transform: scaleY(1);
}
div.full-detail span.show-time
{
transition: all 0.5s cubic-bezier(0.895, 0.000, 0.000, 1.365);
}
div.list-item.open div.full-detail span.show-time
{
opacity: 1;
}
div.footer-popup
{
transition: all 0.6s cubic-bezier(0.895, 0.000, 0.000, 1.365);
}
.app.open div.footer-popup
{
bottom: 20px;
opacity: 1;
}
/* UX */
body
{
cursor:url(../imgs/cursor.png), auto;
}
div.click-effect
{
position: absolute;
width: 20px;
height: 20px;
background: #6d27f4;
border-radius: 100%;
left: 200px;
top: 150px;
opacity: 0;
transform: scale(0);
}
div.click-effect.animate
{
animation: click-animate 0.5s ease-out;
}
@keyframes click-animate {
0%{
opacity: 0;
ransform: scale(0);
}
50%{
transform: scale(4);
opacity:0.2;
}
100%
{
transform: scale(6);
opacity: 0;
}
}
#btnDownload
{
position: absolute;
top: 10px;
right: 10px;
z-index-: 9999;
}
#btnDownload img
{
width: 135px;
}
$(function () {
var _baseColor = "#6a18ff";
$("div.list-item .list-thumb img").on("click", function () {
var $this_listItem = $(this).parents(".list-item"),
_listItemsHeight = $("div.list-items").height(),
_listItemHeight = $("div.list-items div.list-item").height() + 25;
//var $this_topPos = $(this).offset().top;
//console.log(_listItemsHeight);
var _listItemsPos =
$this_listItem.index() > 0
? "-" + (_listItemHeight * $this_listItem.index() - 60)
: "60";
//console.log(_listItemsPos);
//console.log((_listItemHeight*($this_listItem.index()) - 60));
if ($(".app").hasClass("open")) {
$("div.app, div.footer-popup").css("background", _baseColor);
$this_listItem.removeClass("open");
$(".app").removeClass("open");
$("div.list-items").css("margin-top", "0px");
$("div.list-item").not(".open").css("opacity", "1");
} else {
var _img = $(this).attr("src"),
_color = $(this).data("color");
$("img.cover-thumb").attr("src", _img);
$("div.app, div.footer-popup").css("background", _color);
$("div.full-detail .rating, div.meta-data ul.nav li").css(
"color",
_color
);
$("div.footer-popup").css("box-shadow", "0 30px 30px -25px " + _color);
$(".app").addClass("open");
$(this).parents(".list-item").addClass("open");
$("div.list-items").css("margin-top", _listItemsPos + "px");
$("div.list-item").not(".open").css("opacity", "0");
}
});
/*setTimeout(function(){
//$("div.list-thumb").eq(1).addClass("animate");
//$("div.list-item:nth-child(2) span.book-now").addClass("animate");
console.log($("div.list-item:nth-child(2) list-thumb img").attr("src"));
$("img.cover-thumb").attr("src", $("div.list-item:nth-child(2) .list-thumb img").attr("src"));
$(".app").addClass("open");
//$(".app").removeClass("open");
$("div.list-item:nth-child(2)").addClass("open");
//$("div.list-item.open div.movie-detail div.short-detail").fadeOut(50);
//$("div.list-item.open div.movie-detail div.full-detail").fadeIn();
$("div.list-items").css("margin-top","0px");
$("div.list-item").not(".open").css("opacity","0");
},1000);
setTimeout(function(){
//$("div.list-item.open div.movie-detail div.full-detail").fadeOut(50);
//$("div.list-item.open div.movie-detail div.short-detail").fadeIn();
$("div.list-item:nth-child(2)").removeClass("open");
$(".app").removeClass("open");
$("div.list-items").css("margin-top","100px");
$("div.list-item").not(".open").css("opacity","1");
},5000);
*/
$(".color-pallete span").each(function () {
var _color = $(this).parent("td").text();
$(this).css("background", _color);
});
$("span.reload").hover(function () {
location.reload();
});
setInterval(function () {
//location.reload();
//#a9d878
}, 2000);
$("div.list-thumb").on("click", function (e) {
$(this).toggleClass("animate");
$(this).parent().find("span.book-now").toggleClass("animate");
});
$("div.app").on("click", function (e) {
$("div.click-effect").fadeIn("fast", function () {
$this = $(this);
$this.css({
top: e.pageY + 15 + "px",
left: e.pageX + 15 + "px"
});
console.log(e.pageX + " | " + e.pageY);
$this.addClass("animate");
setTimeout(function () {
$this.removeClass("animate");
}, 600);
});
});
//$("div.click-effect").addClass("animate");
});
