<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>LONGINES</title>
<style type="text/css">
#loginesBox{
width:300px;
height:400px;
overflow:hidden;
cursor:pointer;
position:relative;
}
#loginesBox .logo{
background:url(images/logoS.png) no-repeat;
width:300px;
height:400px;
overflow:hidden;
position:absolute;
top:0;
left:0;
display:none;
}
#loginesBox .time{
width:400px;
height:120px;
overflow:hidden;
position:absolute;
top:324px;
left:-2px;
z-index:18;
display:none;
}
#loginesBox .time div{ float:left; display:block; margin-top:20px; }
#loginesBox .time div span{float:left; display:block;overflow:hidden;line-height:30px;height:24px;width:14px;}
#loginesBox .time .day span{ float:left;line-height:34px;height:34px;overflow:hidden;width:17px; display:block}
#loginesBox .time .day{margin-left:68px;}
#loginesBox .time .hour{margin-left:15px; margin-top:28px;}
#loginesBox .time .minute{margin-left:18px; margin-top:28px;}
#loginesBox .time .second{ margin-left:20px; margin-top:28px;}
#loginesBox .logoEnd{
background:url(images/logo.png) no-repeat;
width:300px;
height:400px;
overflow:hidden;
position:absolute; top:0; left:0; display:none;
}
#loginesBox .horloge{
width:150px;
height:150px;
overflow:hidden;
position:fixed;
top:130px;
left:78px;
display:none;
}
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-color:#F4F4F4;
}
</style>
<script language="javaScript" src="script/jquery.js"></script>
<script type="text/javascript" src="assets/js/main.min.js"></script>
</head>
<body>
<div id="loginesBox" class="timeEnter">
<div class="logo" id="logoBox"></div>
<div class="horloge" id="canvas_wrapper">
<a target="_blank" href="http://www.longines.com">
<noscript><img src="assets/images/150x150.jpg" alt="Longines" title="See more on http://www.longines.com" /></noscript>
<canvas id="canvasM">
<img id="alternate_bg_longines" src="assets/images/150x150.jpg" alt="Longines" title="See more on http://www.longines.com" />
</canvas>
</a>
</div>
<div class="time" >
<div class="day">
<span><img id="day_01" alt="" src="images/time_numberB.gif"></span>
<span><img id="day_02" alt="" src="images/time_numberB.gif"></span>
<span><img id="day_03" alt="" src="images/time_numberB.gif"></span>
</div>
<div class="hour">
<span><img id="hour_01" alt="" src="images/time_number.png"></span>
<span><img id="hour_02" alt="" src="images/time_number.png"></span>
</div>
<div class="minute">
<span><img id="minute_01" alt="" src="images/time_number.png"></span>
<span><img id="minute_02" alt="" src="images/time_number.png"></span>
</div>
<div class="second">
<span><img id="second_01" alt="" src="images/time_number.png"></span>
<span><img id="second_02" alt="" src="images/time_number.png"></span>
</div>
</div>
</div>
<script language=javascript>
var intDiff
function longines_clock(){
var yyyy=2023
var mm=11
var dd=14
var hh=13
var nn=00
var ss=00
var timeZone=-8
var tzo=(new Date().getTimezoneOffset()/60)*(-1);
//alert(tzo)
var overa = new Date(yyyy,mm-1, dd, hh-timeZone+tzo,nn,ss);
var local = new Date();
intDiff = overa.getTime() - local.getTime();
if(intDiff <= 0){
_logo=$("#loginesBox #logoBox")
_logo.removeClass()
_logo.addClass("logoEnd")
//_logo.addClass("horloge")
_logo.show()
$("#loginesBox .time").hide()
$("#loginesBox .horloge").show()
return false;
}
else
{
$("#loginesBox .horloge").show()
}
var day = Math.floor(intDiff / (1000 * 60 * 60 * 24));
var hour = Math.floor(intDiff / (1000 * 60 * 60)) - (day * 24);
var minute = Math.floor(intDiff / (1000 * 60)) - (day * 24 * 60) - (hour * 60);
var second = Math.floor(intDiff / 1000) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60);
if (day <= 9){
day = '00' + day;
}else if(day <= 99){
day = '0' + day;
}
if (hour <= 9) hour = '0' + hour;
if (minute <= 9) minute = '0' + minute;
if (second <= 9) second = '0' + second;
$('#day_01').css("marginTop",(day.toString().substr(0,1)) * (-36));
$('#day_02').css("marginTop",(day.toString().substr(1,1)) * (-36));
$('#day_03').css("marginTop",(day.toString().substr(2,1)) * (-36));
$('#hour_01').css("marginTop",(hour.toString().substr(0,1)) * (-24));
$('#hour_02').css("marginTop",(hour.toString().substr(1,1)) * (-24));
$('#minute_01').css("marginTop",(minute.toString().substr(0,1)) * (-24));
$('#minute_02').css("marginTop",(minute.toString().substr(1,1)) * (-24));
$('#second_01').css("marginTop",(second.toString().substr(0,1)) * (-24));
$('#second_02').css("marginTop",(second.toString().substr(1,1)) * (-24));
setTimeout("longines_clock()", 1000);
}
$(document).ready(function(){
longines_clock();
$("#loginesBox").click(function(){
window.open("http://www.longines.com")
})
$("#loginesBox>.logo").fadeIn(1000, showTime);
})
function showTime(){
$("#loginesBox> .time").fadeIn(1000);
}
</script>
</body>
</html>