root / okeanos_site / templates / okeanos / intro.html @ a1ef8a4f
History | View | Annotate | Download (2.7 kB)
1 |
{% extends "okeanos/base.html" %} |
---|---|
2 |
{% load i18n %} |
3 |
{% block extra_head %} |
4 |
<style>
|
5 |
body, html { |
6 |
overflow: hidden; |
7 |
background-color: #fff; |
8 |
background-image: none; |
9 |
} |
10 |
.content { |
11 |
margin: 0 auto; |
12 |
height: 100%; |
13 |
} |
14 |
.intro-img { |
15 |
cursor: pointer; |
16 |
border: none; |
17 |
position: absolute; |
18 |
left:0; |
19 |
right:0; |
20 |
} |
21 |
a { |
22 |
border: none; |
23 |
outline: none; |
24 |
} |
25 |
.fadeimg { |
26 |
position: absolute; |
27 |
display: none; |
28 |
border: none; |
29 |
left:0; |
30 |
top:0; |
31 |
} |
32 |
.images { |
33 |
width: 657px; |
34 |
height: 590px; |
35 |
position: absolute; |
36 |
} |
37 |
</style>
|
38 |
|
39 |
<script type="text/javascript"> |
40 |
$(document).ready(function() {
|
41 |
$(".content").css("width", "100%");
|
42 |
var img = $(".images");
|
43 |
var img_width = 657;
|
44 |
var img_height = 590;
|
45 |
|
46 |
function recenter_img() {
|
47 |
img.css("left", ($(window).width()/2 - img_width/2) + "px");
|
48 |
img.css("top", ($(window).height()/2 - img_height/2) + "px");
|
49 |
}
|
50 |
recenter_img();
|
51 |
$(window).resize(function(){
|
52 |
recenter_img();
|
53 |
});
|
54 |
|
55 |
function start_animation()
|
56 |
{
|
57 |
$(".fadeimg").fadeIn();
|
58 |
$(".fadeimg").show();
|
59 |
}
|
60 |
|
61 |
function stop_animation()
|
62 |
{
|
63 |
$(".fadeimg").fadeOut();
|
64 |
}
|
65 |
|
66 |
var capture = ".images";
|
67 |
$(capture).mouseenter(function(){
|
68 |
start_animation();
|
69 |
})
|
70 |
$(capture).mouseleave(function() {
|
71 |
stop_animation();
|
72 |
});
|
73 |
$(capture).mouseup(function() {
|
74 |
$(".intro-img").hide();
|
75 |
window.location = $("a.intro-link").attr("href");
|
76 |
});
|
77 |
|
78 |
$(".images").mousedown(function(){
|
79 |
$(".intro-img").attr("src", "{{ OKEANOS_STATIC_URL }}images/okeanos-intro-logo3.png");
|
80 |
$(".fadeimg").hide();
|
81 |
});
|
82 |
|
83 |
$(".images").click(function(evn){
|
84 |
// evn.preventDefault();
|
85 |
// var to = $(window).width() + img_width + 100 + "px";
|
86 |
// $(".images").animate({"left": to}, 1000, function(){window.location = $("a.intro-link").attr("href")});
|
87 |
});
|
88 |
});
|
89 |
</script>
|
90 |
{% endblock extra_head %} |
91 |
|
92 |
{% block main %} |
93 |
<div class="content"> |
94 |
<div class="images"> |
95 |
<a class="intro-link" href="{{ OKEANOS_SITE_URL }}" title="{% trans "~okeanos" %}"> |
96 |
<img class="intro-img" src="{{ OKEANOS_STATIC_URL }}images/okeanos-intro-logo1.png" alt="Sign in ~okeanos project" /> |
97 |
<img class="fadeimg" src="{{ OKEANOS_STATIC_URL }}images/okeanos-intro-logo2.png" /> |
98 |
</a></div> |
99 |
</div>
|
100 |
{% endblock %} |