Statistics
| Branch: | Tag: | Revision:

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 %}