Synnefo

{% extends "okeanos/base.html" %}

{% load i18n %}

{% block extra_head %}

<style>

    body, html {

        overflow: hidden;

        background-color: #fff;

        background-image: none;

    }

    .content {

        margin: 0 auto;

        height: 100%;

    }

    .intro-img {

        cursor: pointer;

        border: none;

        position: absolute;

        left:0;

        right:0;

    }

    a {

        border: none;

        outline: none;

    }

    .fadeimg {

        position: absolute;

        display: none;

        border: none;

        left:0;

        top:0;

    }

    .images {

        width: 657px;

        height: 590px;

        position: absolute;

    }

</style>

<script type="text/javascript">

    $(document).ready(function() {

        $(".content").css("width", "100%");

        var img = $(".images");

        var img_width = 657;

        var img_height = 590;

        function recenter_img() {

            img.css("left", ($(window).width()/2 - img_width/2) + "px");

            img.css("top", ($(window).height()/2 - img_height/2) + "px");

        }

        recenter_img();

        $(window).resize(function(){

            recenter_img();

        });

        function start_animation()

        {

            $(".fadeimg").fadeIn();

            $(".fadeimg").show();

        }

        function stop_animation()

        {

            $(".fadeimg").fadeOut();

        }

        var capture = ".images";

        $(capture).mouseenter(function(){

                start_animation();

        })

        $(capture).mouseleave(function() {

                    stop_animation();

        });

        $(capture).mouseup(function() {

                $(".intro-img").hide();

                window.location = $("a.intro-link").attr("href");

        });

        $(".images").mousedown(function(){

                $(".intro-img").attr("src", "{{ OKEANOS_STATIC_URL }}images/okeanos-intro-logo3.png");

                $(".fadeimg").hide();

        });

        $(".images").click(function(evn){

                // evn.preventDefault();

                // var to = $(window).width() + img_width + 100 + "px";

                // $(".images").animate({"left": to}, 1000, function(){window.location = $("a.intro-link").attr("href")});

        });

    });

</script>

{% endblock extra_head %}

{% block main %}

<div class="content">

    <div class="images">

        <a class="intro-link" href="{{ OKEANOS_SITE_URL }}" title="{% trans "Okeanos " %}">

            <img class="intro-img" src="{{ OKEANOS_STATIC_URL }}images/okeanos-intro-logo1.png" alt="Sign in Okeanos project" />

            <img class="fadeimg" src="{{ OKEANOS_STATIC_URL }}images/okeanos-intro-logo2.png" />

    </a></div>

</div>

{% endblock %}