Statistics
| Branch: | Tag: | Revision:

root / okeanos_site / templates / okeanos / intro.html @ 0768522a

History | View | Annotate | Download (2.6 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
    }
30
    .images {
31
        width: 657px;
32
        height: 590px;
33
        position: absolute;
34
    }
35
</style>
36

    
37
<script type="text/javascript">
38
    $(document).ready(function() {
39
        $(".content").css("width", "100%");
40
        var img = $(".images");
41
        var img_width = 657;
42
        var img_height = 590;
43

44
        function recenter_img() {
45
            img.css("left", ($(window).width()/2 - img_width/2) + "px");
46
            img.css("top", ($(window).height()/2 - img_height/2) + "px");
47
        }
48
        recenter_img();
49
        $(window).resize(function(){
50
            recenter_img();
51
        });
52

53
        function start_animation()
54
        {
55
            $(".fadeimg").fadeIn();
56
            $(".fadeimg").show();
57
        }
58

59
        function stop_animation()
60
        {
61
            $(".fadeimg").fadeOut();
62
        }
63
        
64
        var capture = ".images";
65
        $(capture).mouseenter(function(){
66
                start_animation();
67
        })
68
        $(capture).mouseleave(function() {
69
                    stop_animation();
70
        });
71
        $(capture).mouseup(function() {
72
                $(".intro-img").hide();
73
                window.location = $("a.intro-link").attr("href");
74
        });
75

76
        $(".images").mousedown(function(){
77
                $(".intro-img").attr("src", "{{ OKEANOS_STATIC_URL }}images/okeanos-intro-logo3.png");
78
                $(".fadeimg").hide();
79
        });
80

81
        $(".images").click(function(evn){
82
                // evn.preventDefault();
83
                // var to = $(window).width() + img_width + 100 + "px";
84
                // $(".images").animate({"left": to}, 1000, function(){window.location = $("a.intro-link").attr("href")});
85
        });
86
    });
87
</script>
88
{% endblock extra_head %}
89

    
90
{% block main %}
91
<div class="content">
92
    <div class="images">
93
        <a class="intro-link" href="{{ OKEANOS_SITE_URL }}" title="{% trans "Okeanos " %}">
94
            <img class="intro-img" src="{{ OKEANOS_STATIC_URL }}images/okeanos-intro-logo1.png" alt="Sign in Okeanos project" />
95
            <img class="fadeimg" src="{{ OKEANOS_STATIC_URL }}images/okeanos-intro-logo2.png" />
96
    </a></div>
97
</div>
98
{% endblock %}