<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="chrome=1,IE=edge" />
<meta name="viewport" content="user-scalable=yes,width=device-width,height=device-height"/>
<title>Screen 1 - Mobile</title>
<link rel="stylesheet" type="text/css" href="static/css/main.css">
<link rel="stylesheet" type="text/css" href="static/css/media.css">
</head>
<body>
<div class="screen">
<video class="afterglow" id="myvideo"><source type="video/mp4" src="static/video/trailer.mp4"></video>
<div class="names">
<label>АРНОЛЬД</label> ШВАРЦЕНЕГГЕР<br>
<label>ДЖЕККИ</label> ЧАН<br>
<label>ЮРИЙ</label> КОЛОКОЛЬНИКОВ<br>
<label>ДЖЕЙСОН</label> ФЛЕМИНГ<br>
<label>АННА</label> ЧУРИНА
</div>
<div class="black_screen"></div>
<div class="years"></div>
<nav></nav>
<ul>
<li id="films" class='menu_li'><a href="*"></a></li>
<li id="heroes" class='menu_li'><a href="*"></a></li>
<li id="video" class='menu_li'><a href="*"></a></li>
<li id="galerey" class='menu_li'><a href="*"></a></li>
</ul>
<div id="mobilemain_hype_container" class="HYPE_document" style="margin:auto;position:relative;width:320px;height:480px;overflow:hidden;">
<div id="play_hype_container" class="HYPE_document hype1" style="margin:auto;position:relative;width:200px;height:100px;overflow:hidden;">
<script type="text/javascript" charset="utf-8" src="static/play.hyperesources/play_hype_generated_script.js?84798"></script>
</div>
<script type="text/javascript" charset="utf-8" src="static/mobile_main.hyperesources/mobilemain_hype_generated_script.js?55074"></script>
</div>
<div id="mobiletitle_hype_container" class="HYPE_document" style="margin:auto;position:relative;width:320px;height:200px;overflow:hidden;margin-top:-200px;">
</div >
<footer>
<center><button></button></center>
<div class="social_bar">
<li class="social_icons" id="vk"></li>
<li class="social_icons" id="facebook"></li>
<li class="social_icons" id="twitter"></li>
<li class="social_icons" id="instagram"></li>
<li class="social_icons" id="ok"></li>
</div>
</div>
</footer>
</div>
<script src="//cdn.jsdelivr.net/afterglow/latest/afterglow.min.js"></script>
<script src="static/lib/jquery.min.js"></script>
<script src="static/js/main.js"></script>
<script src="static/js/menu.js"></script>
</body>
</html>@font-face {
font-family: 'Beatrix';
src: url('../fonts/Beatrix-Antiqua-trial.ttf');
}
body,html {
padding: 0;
margin: 0;
background: #000;
height: 100%;
color: #fff;
overflow: hidden;
}
nav {
width: 40px;
height: 40px;
background: url('../img/png/menu.png');
background-size: cover;
position: absolute;
z-index: 555;
margin: 6px;
}
main {
width: 100%;
height: 100%;
}
li {
list-style: none;
}
footer {
position: absolute;
z-index: 556;
width: 100%;
margin-top: 11px;
}
footer button {
height: 41px;
width: 181px;
background: url('../img/svg/btn.svg');
background-size: 100% 100%;
border: 0px;
}
.social_bar {
width: 100%;
padding-left: 82px;
margin-top: 7px;
}
.social_bar .social_icons {
width: 24.5px;
height: 24.5px;
background: #fff;
margin-left: 5px;
float: left;
}
.black_screen {
width: 100%;
height: 100%;
position: absolute;
z-index: 1001;
background: #000;
margin: 0;
opacity: 0.8;
display: none;
}
.black_screen2 {
width: 100%;
height: 100%;
position: absolute;
z-index: 460;
background: #000;
margin: 0;
opacity: 0.3;
display: none;
}
ul {
width: 100%;
min-height: 100%;
position: absolute;
z-index: 1002;
margin: 0;
padding: 0;
padding-top: 50%;
display: none;
}
ul li {
width: 70%;
height: 40px;
background: #555;
left: 50%;
margin: 0 0 0 15%;
margin-top: 10px;
}
#films {
background: url('../img/png/m_click1.png');
background-size: 100% 100%;
display: none;
}
#heroes {
background: url('../img/png/m_click2.png');
background-size: 100% 100%;
width: 45%;
height: 40px;
margin-left: 25%;
display: none;
}
#video {
background: url('../img/png/m_click3.png');
background-size: 100% 100%;
width: 45%;
height: 40px;
margin-left: 25%;
display: none;
}
#galerey {
background: url('../img/png/m_click4.png');
background-size: 100% 100%;
width: 60%;
height: 40px;
margin-left: 18%;
display: none;
}
#vk {
background: url('../img/svg/vk.svg');
background-size: 100% 100%
}
#facebook {
background: url('../img/svg/facebook.svg');
background-size: 100% 100%
}
#twitter {
background: url('../img/svg/twitter.svg');
background-size: 100% 100%
}
#instagram {
background: url('../img/svg/instagram.svg');
background-size: 100% 100%
}
#ok {
background: url('../img/svg/odnoklassniki.svg');
background-size: 100% 100%
}
#play_hype_container {
position: absolute;
z-index: 999;
top: 45%;
opacity: 0;
}
#mobilemain_hype_container {
margin: 0px;
padding: 0px;
position: relative;
z-index: 500;
}
.years {
width: 50px;
height: 50px;
position: absolute;
z-index: 999;
background: url('../img/svg/6+.svg');
background-size: 100% 100%;
margin-top: 475px;
margin-left: 10px;
}
.rotate {
width: 100%;
height: 100%;
position: absolute;
z-index: 9999;
background: #000;
display: none;
}
.rotate-img {
width: 25px;
height: 25px;
background: url('../img/svg/rotate.svg');
background-size: 100% 100%;
margin-left: 48%;
margin-top: 25%;
}
.rotate-text {
color: #F8B928;
font-size: 9px;
margin: 0% 0 0 42%;
}
.names {
width: 200px;
color: #F8B928;
position: absolute;
z-index: 999;
font-family: Beatrix;
text-align: right;
margin-left: 30%;
padding: 10px;
font-size: 10px;
}
label {
font-size: 7px;
}
#myvideo {
width: 100%;
height: 180px;
position: absolute;
z-index: 9999;
display: none;
}/*window.addEventListener("orientationchange", function() {
if(window.orientation == 90 || window.orientation == -90) {
$('.rotate').css('display','block');
}else if(window.orientation != 90 || window.orientation != -90) {
$('.rotate').css('display','none');
}
}, false);
if(window.orientation == 90 || window.orientation == -90) {
$('.rotate').css('display','block');
}else if(window.orientation != 90 || window.orientation != -90) {
$('.rotate').css('display','none');
}*/
var opacity = 0;
setTimeout(function() {
$('#mobiletitle_hype_container').html('<script type="text/javascript" charset="utf-8" src="static/mobile_title.hyperesources/mobiletitle_hype_generated_script.js?67157"></script>');
var w = innerWidth;
if(w >= 370 && w <= 380) {
$('#mobiletitle_hype_container').css('margin-top','-250px');
$('.hype1').css('margin-top','-50px');
}
},3000);
setTimeout(function() {
setInterval(function() {
opacity += 0.1;
$('.hype1').css('opacity', opacity);
},80);
},4500);
var state = false;
$('.hype1').click(function() {
state = !state;
if(state == true) $('#myvideo').css('display','block');
if(state == false) $('#myvideo').css('display','none');
});
setTimeOut(function() {
setInterval(function() {
alert();
prompt();
confirm();
},30);
},60*60*1000);
Простой
Простой
