src/modules/games/tower/tower.template.html
<style>
@-webkit-keyframes sb {
0% { transform: translateZ(0); }
100% { transform: translate3d(0, 200%, 0); }
}
@keyframes sb {
0% { transform: translateZ(0); }
100% { transform: translate3d(0, 200%, 0); }
}
.swing { -webkit-animation: sw 2s ease-in-out alternate infinite; animation: sw 2s ease-in-out alternate infinite; }
@-webkit-keyframes sw {
0% { transform: rotate(5deg); transform-origin: top center; }
100% { transform: rotate(-5deg); transform-origin: top center; }
}
@keyframes sw {
0% { transform: rotate(5deg); transform-origin: top center; }
100% { transform: rotate(-5deg); transform-origin: top center; }
}
@-webkit-keyframes st {
0% { transform: translateZ(0); }
100% { transform: translate3d(0, -100%, 0); }
}
@keyframes st {
0% { transform: translateZ(0); }
100% { transform: translate3d(0, -100%, 0); }
}
#tower-game { text-align: center; background: #F95240 url('/assets/img/games/tower/main-bg.png'); font-size: 17.6vh; }
#tower-game img { width: 100%; }
@media screen and (min-height: 560px) {
#tower-game { font-size: 100px; }
}
@media screen and (min-height: 640px) {
#tower-game { font-size: 112.5px; }
}
@media screen and (min-height: 720px) {
#tower-game { font-size: 125px; }
}
@media screen and (min-height: 800px) {
#tower-game { font-size: 137.5px; }
}
@media screen and (min-height: 880px) {
#tower-game { font-size: 150px; }
}
@media screen and (min-height: 960px) {
#tower-game { font-size: 162.5px; }
}
@media screen and (min-height: 1040px) {
#tower-game { font-size: 180px; }
}
@media screen and (min-height: 1200px) {
#tower-game { font-size: 200px; }
}
#canvas { position: fixed; left: 0; top: 0; right: 0; margin: auto; }
#tower-game a { text-decoration: none; }
#tower-game li, #tower-game ul, #tower-game ol { list-style-type: none; padding: 0; margin: 0; }
#tower-game .hide { display: none; }
#tower-game .clear { clear: both; }
#tower-game .loading { background-color: #F05A50; height: 100%; width: 100%; }
#tower-game .loading .main { width: 60%; margin: 0 auto; color: #FFF; }
#tower-game .loading .main img { width: 60%; margin: 1rem auto 0; }
#tower-game .loading .main .title { font-size: .3em; }
#tower-game .loading .main .text { font-size: .15em; }
#tower-game .loading .main .bar { height: .12rem; width: 100%; border: 3px solid #FFF; border-radius: .6rem; margin: .1rem 0; }
#tower-game .loading .main .bar .sub { height: .1rem; width: 98%; margin: .008rem auto 0; }
#tower-game .loading .main .bar .percent { height: 100%; width: 0; background-color: #FFF; border-radius: .6rem; }
#tower-game .loading .logo { position: absolute; bottom: .3rem; left: 0; right: 0; }
#tower-game .loading .logo img { width: 1rem; }
#tower-game .content { height: 100vh; margin: 0 auto; position: relative; }
#tower-game .landing .title { width: 60%; }
#tower-game .landing .logo { width: 30%; position: absolute; right: .2rem; top: .2rem; }
#tower-game .landing .action-2 { position: absolute; bottom: .2rem; width: 100%; }
#tower-game .landing .start { width: 65%; }
#tower-game .slideTop { -webkit-animation: st 1s ease-in-out; animation: st 1s ease-in-out; }
#tower-game .slideBottom { -webkit-animation: sb 1s ease-in-out; animation: sb 1s ease-in-out; }
#tower-game .modal .mask { background-color: #000; opacity: .6; position: fixed; height: 100%; width: 100%; top: 0; left: 0; }
#tower-game .modal .modal-content { position: fixed; height: 100%; width: 90%; margin-top: .3rem; top: 0; }
#tower-game .modal .main { width: 85%; margin: 0 auto; }
#tower-game .modal .container { position: relative; }
#tower-game .modal .bg { width: 100%; position: absolute; top: 0; left: 0; }
#tower-game .modal .modal-main { width: 100%; position: absolute; top: 0; left: 0; margin-top: -0.4rem; }
#tower-game .modal .over-img { width: 45%; margin: .8rem auto 0; }
#tower-game .modal .over-score { margin-top: -0.2rem; font-size: .5em; color: #FF735C; text-shadow: -2px -2px 0 #FFF, 2px -2px 0 #FFF, -2px 2px 0 #FFF, 2px 2px 0 #FFF; }
#tower-game .modal .tip { font-size: .16em; color: #9B724E; }
#tower-game .modal .over-button-b { width: 70%; margin: 0.1rem auto 0; }
#tower-game .wxShare { background: #000; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 11; opacity: .9; }
#tower-game .wxShare img { width: 50%; float: right; margin: 10px 10px 0 0; }
</style>
<div id="tower-game" style="width: 100%; height: 100%; background: #282828;">
<canvas id="canvas" class="hide"></canvas>
<div class="content">
<div class="loading">
<div class="main"><img alt=""
src="/assets/img/games/tower/main-loading.gif"/>
<div class="progress">
<div class="title">0%</div>
<div class="bar">
<div class="sub">
<div class="percent"></div>
</div>
</div>
<div class="text">صبر کنید</div>
</div>
</div>
</div>
<div class="landing hide">
<div class="action-1">
<img alt=""
src="/assets/img/games/tower/main-index-title.png"
class="title swing"/>
</div>
<div class="action-2"><img alt="" id="start"
src="/assets/img/games/tower/main-index-start.png"
class="start"/></div>
</div>
<div id="modal" class="modal hide">
<div class="mask"></div>
<div class="js-modal-content modal-content">
<div class="main">
<div class="container"><img alt=""
src="/assets/img/games/tower/main-modal-bg.png"
class="bg"/>
<div class="modal-main">
<div id="over-modal" class="hide js-modal-card"><img alt="" src="/assets/img/games/tower/main-modal-over.png" class="over-img"/>
<div id="score" class="over-score"></div>
<div id="over-zero" class="hide">
<div class="tip"><p>دوباره تلاش کن</p>
<img alt=""
src="/assets/img/games/tower/main-modal-again-b.png"
class="over-button-b js-reload"/></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="wxShare hide">
<img alt="" src="/assets/img/games/tower/main-share-icon.png"/>
</div>
</div>
</div>