{% extends 'base.html.twig' %}

{% block title %}Home{% endblock %}
{% block stylesheets %}
    <style>
        h1{
            font-size: inherit;
            margin: 0px;
            font-weight: normal;
        }
        footer{
            position: fixed;
            bottom: 2px;
            bottom: 0px;
            background: #125083;
        }
        hr.line{
            position: fixed;
                bottom: 40px;
                width: 100%;
        }
        .shadowCurve{
            background-color: #125083;
            bottom: calc(-90% - 1px);
        }

        @media screen and  (max-width: 800px) and (min-width:320px){
            footer{
                position: inherit;
            }
            hr.line{
                position: inherit;
                width: auto;
            }   
        }

    </style>
{% endblock %}
{% block body %}
    <div class="containerHome">
          
        <div class="containerIndex img1 indSlider" style="display: block;">
            <div class="boxText inSlogan">
                <span class='legend'><h1>IntraCrane | Die Softwarelösung für automatisierte Krananlagen</h1></span>
            </div>
        </div><!--// Container -->
        <div class="containerIndex img2 indSlider">
            <div class="boxText inSloganRev">
                <span class='legend'>IntraCrane | Die Einbettung Ihrer Krananlage in intralogistische Prozesse</span>
            </div>
        </div>
        <div class="containerIndex img3 indSlider">
            <div class="boxText inSlogan">
                <span class='legend'>IntraCrane | Der nächste Schritt in der Automatisierung Ihrer Krananlage</span>
            </div>
        </div>

        <div class="modal_box"></div>
        <div class="shadowCurve">
            <div class="navSlider">
                <span id="frame1" onclick="slider(1);" class="pointNav select"></span>
                <span id="frame2" onclick="slider(2);" class="pointNav"></span>
                <span id="frame3" onclick="slider(3);" class="pointNav"></span>
            </div>
        </div>
        <input type="hidden" id="pos" value="1">
    </div><!--
    --><div class="sectionSec">
        <table>
            <tr>
                <td>
                    <div class="top_down_legend leg">
                        <img src="{{ asset('img/top_bottom.png') }}" class="w100" alt="DEFAULT_ALT">
                    </div>
                    <div class="text_sec">Lagerverwaltung, 2D-Routenoptimierung, Lageroptimierungen, intelligente Lagerstrategien… dies und vieles mehr können wir Ihnen anbieten Von vollautomatisierten Anlagen bis zu halb automatischen Lösungen, IntraCrane stellt für viele Anwendungsfälle eine passende Lösung parat. Bei unseren Kunden heißt es nicht selten „Material zu Mensch, anstatt Mensch zu Material“, bei uns bekommen Sie Lösungen für Ihre Herausforderungen. Durch unsere Erfahrung im Bereich der Lagerverwaltung und Prozessteuerung können wir Ihnen ein kompetenter Partner sein, der Ihre Anlagen bereichern kann.</div>
                    <div class="top_down_legend leg">
                        <img src="{{ asset('img/top_bottom.png') }}" class="w100" alt="DEFAULT_ALT">
                    </div>
                </td>
                <td></td>
                <td>
                    <img src="{{ asset('img/intracrane.png') }}" height="330" class="crane_image" alt="Intracrane" title="Intracrane">
                </td>
            </tr>
        </table>
    </div>
    <hr class="line">

{% endblock %}

{% block javascripts %}
    <link rel="stylesheet" href="{{ asset('js/jqcloud/jqcloud.css') }}">
    <script src="{{ asset('js/jqcloud/jqcloud.js') }}"></script>
    <script>
        function Animar(){
            if($('.containerHome').hasClass('animar')){
                $('.containerHome').removeClass('animar');
            }else{
                $('.containerHome').addClass('animar');    
            }
        }
        $(document).ready(function(){
            $(window).scroll(function(ev){
                var top = $(this).scrollTop() / 3;               
                $('.containerIndex').css({'transform':'translateY(' + top + 'px)'});    
                var winH = $(this).height();
                if ($(this).scrollTop() > 40){
                    $('div.box').addClass('show');
                    $('div.text_sec').addClass('show');
                    $('div.leg').addClass('show');
                }else{
                    $('div.box').removeClass('show');
                    $('div.text_sec').removeClass('show');
                    $('div.leg').removeClass('show');
                }
                if ($(this).scrollTop() <= 1){
                    $('.modal_box').css({'visibility':'hidden'});
                }else{
                    $('.modal_box').css({'visibility':'visible'});
                }
                var r = (0 * winH - $(this).scrollTop() / .3) / winH;
                r = r * -1;   
                $('.modal_box').css({'opacity':r});
            });
        });
    </script>
{% endblock %}