{% trans_default_domain 'offres' %}
{% set route = app.request.get('_route') %}

{% extends 'base.html.twig' %}
{% block meta %}
    <meta name="description"
          content="Découvrez nos offres de prix, nos formules location ou achats, les différents modes de vente de l'automate et les services Quali Distrib inclus ! ">
    <meta property="og:title" content="Offres"/>
    <meta property="og:type" content="website"/>
    <meta property="og:url" content="https://qualidistrib.com/offres"/>
    <meta property="og:image" content="{{ asset('build/images/acterunew.jpg') }}"/>
    <meta property="og:description"
          content="Découvrez nos offres de prix, nos formules location ou achats, les différents modes de vente de l'automate et les services Quali Distrib inclus ! ">
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
            integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
            crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
            integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
            crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
            integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
            crossorigin="anonymous"></script>
{% endblock %}
{% block stylesheets %}
    <link rel="stylesheet" href="{{ asset('build/offres.css') }}">
{% endblock %}
{% block title %}
    {{ page_title }}
{% endblock %}
{% block body %}
    <div class="container-m">

        <h1 id="titleOne" class="title-offres">{{ 'offres.titleTitre'|trans }}</h1>
        <p id="devis" class="section-body police">{{ 'offres.devis'|trans }}</p>
        <h2 id="titleTwo" class="title-body">{{ 'offres.possibilites'|trans }}</h2>
        <div class="formules">
            <div class="plus">
                <section id="dual" class="section exigence border-bottom border-top border-mobile">
                    <img src="/build/images/dual.jpeg" alt="exemple mode dual" class="section-img-exigence">
                    <div class="section-body ">
                        <h4 class="section-title user-select-none">{{ 'offres.dual'|trans|raw }}</h4>
                        <p class="section-text user-select-none">

                            {{ 'offres.dualTexte'|trans }}</p>
                    </div>
                </section>
                <section id="distrib" class="section-modeDistrib">
                    <img class="formules-img" src="build/images/distributeur.png" alt="Distributeur">
                    <p class="ledistributeur">
                        <i>{{ 'offres.40'|trans }}</i>
                    </p>
                </section>

                <section id="varie" class="section exigence border-bottom border-top border-mobile">
                    <img src="/build/images/varie.jpeg" alt="exemple mode varie" class="section-img-exigence">
                    <div class="section-body ">
                        <h4 class="section-title user-select-none">
                            {{ 'offres.varie'|trans|raw }}</h4>
                        <p class="section-text">

                            {{ 'offres.varieTexte'|trans }}</p>
                    </div>
                </section>
            </div>
        </div>
        <p class="ita">
            <i>
                {{ 'offres.fournis'|trans }}
            </i>
        </p>
        <section class="coop border-bottom border-mobile">
            <div class="section-body">
                <h2 id="fonctionnalite" class="section-title">{{ 'offres.demo'|trans|raw }}</h2>
                <img id="intero" src="{{ asset('build/images/question.png') }}" alt="point d'interrogation" class="interro">
                <p id="avantage" class="section-text user-select-none">
                    {{ 'offres.avantages'|trans }}</p>
            </div>
        </section>


        <h2 id="titleThree" class="title-body">{{ 'offres.gestion'|trans }}</h2>

        <section class="gestion">
            <div class="section-body">
                <p id="suivez" class="section-text user-select-none">

                    {{ 'offres.gestionTexte'|trans|raw }}</p>
            </div>
            <div class="gestion-body">
                <div id="rentabilite" class="gestion-img">
                    <img src="{{ asset('build/images/rendement.jpg') }}" alt="exemple rendement">
                    <p>
                        <i>{{ 'offres.capture1'|trans }}</i>
                    </p>
                </div>
                <div id="suivi" class="gestion-img">
                    <img src="{{ asset('build/images/inventaire.jpg') }}" alt="exemple inventaire">
                    <p>
                        <i>{{ 'offres.capture2'|trans }}</i>
                    </p>
                </div>
            </div>
        </section>

        <h2 id="titleFour" class="title-body">{{ 'offres.formules'|trans }}</h2>
        <section class="section-offres">

            <div id="loc" class="formule-1">
                <div class="section-offre-header">
                    <h4 class="section-offres-title ">{{ 'offres.location'|trans }}</h4>
                </div>

                <div class="section-offre-body">
                    <p class="section-offres-text">{{ 'offres.locationTexte'|trans }}</p>
                    <img src="{{ asset('build/images/colombe.jpg') }}" alt="colombe" class="colombe">
                </div>

            </div>

            <div id="achat" class="formule-1">
                <div class="section-offre-header">
                    <h4 class="section-offres-title ">{{ 'offres.achat'|trans }}</h4>
                </div>
                <div class="section-offre-body">
                    <p class="section-offres-text">{{ 'offres.achatTexte'|trans }}</p>
                    <br>
                    <img src="{{ asset('build/images/finance.jpg') }}" alt="finance" class="finance">
                </div>
            </div>
        </section>
        <section class="carouseljs">
            <h2 id="titleFive" class="title-body">{{ 'offres.prestattion'|trans }}</h2>
            <article class="offrons">
                <div id="tagscloud">
                    <a class="tagc1"
                       style="left: 20px; top: 30.1925px; z-index: 102; opacity: 0.118615; color: rgb(255, 255, 255);display: none; font-size: 1.25rem">{{ 'offres.carousel1'|trans }}</a>
                    <a class="tagc1"
                       style="left: 156px; top:100px; z-index: 102; opacity: 0.111076; color: rgb(255, 255, 255); padding: 8px; display: none;font-size: 1.75em">{{ 'offres.carousel2'|trans }}</a>
                    <a class="tagc1"
                       style="left: 386.9px; top: 195px; z-index: 103; opacity: 0.119797; color: rgb(255, 255, 255); padding: 8px; display: none; font-size: 1.5rem">{{ 'offres.carousel3'|trans }}</a>
                    <a class="tagc1"
                       style="left: 596.16px; top: 28px; z-index: 107; opacity: 0.181538; color: rgb(255, 255, 255); padding: 8px; font-size: 1.5rem">{{ 'offres.carousel4'|trans }}</a>
                    <a class="tagc1"
                       style="left: 85%; top: 175px; z-index: 119; opacity: 0.389813; color: rgb(255, 255, 255); padding: 8px; font-size: 1.75rem">{{ 'offres.carousel5'|trans }}</a>
                    <a class="tagc1"
                       style="left: 669.18px; top: 205px; z-index: 104; opacity: 0.117901; color: rgb(255, 255, 255); padding: 8px; display: none;">{{ 'offres.carousel6'|trans }}</a>
                    <a class="tagc1"
                       style="left: 310px; top: 222px; z-index: 111; opacity: 0.117901; color: rgb(255, 255, 255); padding: 8px; display: none; font-size: 1.25rem">{{ 'offres.carousel7'|trans }}</a>
                    <a class="tagc1"
                       style="left: 48.13px; top: 188px; z-index: 115; opacity: 0.117901; color: rgb(255, 255, 255); padding: 8px; display: none;">{{ 'offres.carousel8'|trans }}</a>
                    <a class="tagc1"
                       style="left: 935.24px; top: 30.1925px; z-index: 105; opacity: 0.117901; color: rgb(255, 255, 255); padding: 8px; display: none; font-size: 1.25rem">{{ 'offres.carousel9'|trans }}</a>
                    <a class="tagc1"
                       style="left: 76%; top: 152px; z-index: 108; opacity: 0.117901; color: rgb(255, 255, 255); padding: 8px; display: none; font-size: 1.5rem">{{ 'offres.carousel10'|trans }}</a>
                    <a class="tagc1"
                       style="left: 750px; top: 250px; z-index: 150; opacity: 0.117901; color: rgb(255, 255, 255); padding: 8px; display: none; font-size: 1.75rem">{{ 'offres.carousel11'|trans }}</a>
                    <a class="tagc1"
                       style="left: 400px; top: 112px; z-index: 180; opacity: 0.117901; color: rgb(255, 255, 255); padding: 8px; display: none; font-size: 1.25rem">{{ 'offres.carousel12'|trans }}</a>
                    <a class="tagc1"
                       style="left: 784px; top: 30.0199px; z-index: 102; opacity: 0.117901; color: rgb(255, 255, 255); padding: 8px; display: none;">{{ 'offres.carousel13'|trans }}</a>
                </div>

            </article>
        </section>
        <article class="liste">
            <h2 class="title-body">{{ 'offres.prestattion'|trans }}</h2>

            <section class="liste-inclus">


                <div>
                    <ul>
                        <li class="presta">{{ 'offres.carousel3'|trans }}</li>
                        <li class="presta">{{ 'offres.carousel2'|trans }}</li>
                        <li class="presta">{{ 'offres.carousel6'|trans }}</li>
                        <li class="presta">{{ 'offres.carousel11'|trans }}</li>
                        <li class="presta">{{ 'offres.carousel1'|trans }}</li>
                        <li class="presta">{{ 'offres.carousel9'|trans }}</li>
                    </ul>
                </div>
                <div>
                    <ul>
                        <li class="presta">{{ 'offres.carousel10'|trans }}</li>
                        <li class="presta">{{ 'offres.carousel7'|trans }}</li>
                        <li class="presta">{{ 'offres.carousel4'|trans }}</li>
                        <li class="presta">{{ 'offres.carousel5'|trans }}</li>
                        <li class="presta">{{ 'offres.carousel13'|trans }}</li>
                        <li class="presta">{{ 'offres.carousel8'|trans }}</li>
                    </ul>
                </div>
            </section>
        </article>

        <section class="section-plus">
            <h2 id="titleSix" class="title-body">{{ 'offres.sautez'|trans }}</h2>
            <div class="section-body">
                <div id="affine" class="block1">
                    <p>
                        {{ 'offres.sautezTexte'|trans }}<br>
                    </p>
                </div>
                <div class="block2">
                    <div class="section-distrib">
                        <table>
                            <thead>
                            <tr>
                                <th>
                                    <a id="distribOne" href="{{ path('artisan') }}#form"><img class="img-distrib"
                                                                              src="build/images/distributeur.png"
                                                                              alt="distributeur"></a>
                                </th>
                                <th></th>
                            </tr>
                            </thead>
                        </table>

                    </div>
                </div>
            </div>
        </section>

        <p>{{ 'offres.mention'|trans|raw }}</p>
    </div>
    <script>

    </script>

{% endblock %}
{% block javascripts %}
{{ encore_entry_script_tags('offresjs') }}
    <script>
        var radius = 90;
        var d = 200;
        var dtr = Math.PI / 180;
        var mcList = [];
        var lasta = 1;
        var lastb = 1;
        var distr = true;
        var tspeed = 11;
        var size = 200;
        var mouseX = 0;
        var mouseY = 10;
        var howElliptical = 22;
        var aA = null;
        var oDiv = null;
        window.onload = function () {
            var i = 0;
            var oTag = null;
            oDiv = document.getElementById('tagscloud');
            aA = oDiv.getElementsByTagName('a');
            for (i = 0; i < aA.length; i++) {
                oTag = {};
                aA[i].onmouseover = (function (obj) {
                    return function () {
                        obj.on = true;
                        this.style.zIndex = 9999;
                        this.style.color = '#fff';
                        this.style.padding = '5px 5px';
                        this.style.filter = "alpha(opacity=100)";
                        this.style.opacity = 1;
                    }
                })(oTag)
                aA[i].onmouseout = (function (obj) {
                    return function () {
                        obj.on = false;
                        this.style.zIndex = obj.zIndex;
                        this.style.color = '#fff';
                        this.style.padding = '5px';
                        this.style.filter = "alpha(opacity=" + 100 * obj.alpha + ")";
                        this.style.opacity = obj.alpha;
                        this.style.zIndex = obj.zIndex;
                    }
                })(oTag)
                oTag.offsetWidth = aA[i].offsetWidth;
                oTag.offsetHeight = aA[i].offsetHeight;
                mcList.push(oTag);
            }
            sineCosine(0, 0, 0);
            positionAll();
            (function () {
                update();
                setTimeout(arguments.callee, 40);
            })();
        };

        function update() {
            var a,
                b,
                c = 0;
            a = (Math.min(Math.max(-mouseY, -size), size) / radius) * tspeed;
            b = (-Math.min(Math.max(-mouseX, -size), size) / radius) * tspeed;
            lasta = a;
            lastb = b;
            if (Math.abs(a) <= 0.01 && Math.abs(b) <= 0.01) {
                return;
            }
            sineCosine(a, b, c);
            for (var i = 0; i < mcList.length; i++) {
                if (mcList[i].on) {
                    continue;
                }
                var rx1 = mcList[i].cx;
                var ry1 = mcList[i].cy * ca + mcList[i].cz * (-sa);
                var rz1 = mcList[i].cy * sa + mcList[i].cz * ca;

                var rx2 = rx1 * cb + rz1 * sb;
                var ry2 = ry1;
                var rz2 = rx1 * (-sb) + rz1 * cb;

                var rx3 = rx2 * cc + ry2 * (-sc);
                var ry3 = rx2 * sc + ry2 * cc;
                var rz3 = rz2;

                mcList[i].cx = rx3;
                mcList[i].cy = ry3;
                mcList[i].cz = rz3;

                per = d / (d + rz3);

                mcList[i].x = (howElliptical * rx3 * per) - (howElliptical * 2);
                mcList[i].y = ry3 * per;
                mcList[i].scale = per;
                var alpha = per;
                alpha = (alpha - 0.6) * (10 / 6);
                mcList[i].alpha = alpha * alpha * alpha - 0.2;
                mcList[i].zIndex = Math.ceil(100 - Math.floor(mcList[i].cz));
            }
            doPosition();
        }

        function positionAll() {
            var phi = 0;
            var theta = 0;
            var max = mcList.length;
            for (var i = 0; i < max; i++) {
                if (distr) {
                    phi = Math.acos(-1 + (2 * (i + 1) - 1) / max);
                    theta = Math.sqrt(max * Math.PI) * phi;
                } else {
                    phi = Math.random() * (Math.PI);
                    theta = Math.random() * (2 * Math.PI);
                }
                // 坐标变换
                mcList[i].cx = radius * Math.cos(theta) * Math.sin(phi);
                mcList[i].cy = radius * Math.sin(theta) * Math.sin(phi);
                mcList[i].cz = radius * Math.cos(phi);

                // aA[i].style.left = mcList[i].cx + oDiv.offsetWidth / 2 - mcList[i].offsetWidth / 2 + 'px';
                aA[i].style.top = mcList[i].cy + oDiv.offsetHeight / 2 - mcList[i].offsetHeight / 2 + 'px';
            }
        }

        function doPosition() {
            var l = oDiv.offsetWidth / 2;
            var t = oDiv.offsetHeight / 2;
            for (var i = 0; i < mcList.length; i++) {
                if (mcList[i].on) {
                    continue;
                }
                var aAs = aA[i].style;
                if (mcList[i].alpha > 0.1) {
                    if (aAs.display != '')
                        aAs.display = '';

                } else {
                    if (aAs.display != 'none')
                        aAs.display = 'none';

                    continue;
                }
                // aAs.left = mcList[i].cx + l - mcList[i].offsetWidth / 2 + 'px';
                aAs.top = mcList[i].cy + t - mcList[i].offsetHeight / 2 + 'px';
                // aAs.fontSize=Math.ceil(12*mcList[i].scale/2)+8+'px';
                // aAs.filter="progid:DXImageTransform.Microsoft.Alpha(opacity="+100*mcList[i].alpha+")";
                aAs.filter = "alpha(opacity=" + 100 * mcList[i].alpha + ")";
                aAs.zIndex = mcList[i].zIndex;
                aAs.opacity = mcList[i].alpha;
            }
        }

        function sineCosine(a, b, c) {
            sa = Math.sin(a * dtr);
            ca = Math.cos(a * dtr);
            sb = Math.sin(b * dtr);
            cb = Math.cos(b * dtr);
            sc = Math.sin(c * dtr);
            cc = Math.cos(c * dtr);
        }
    </script>
    <script  type="application/ld+json">
        {
            "@context": "https://qualidistrib.com",
            "@type": "BreadcrumbList",
            "itemListElement": [
                {
                    "@type": "ListItem",
                    "position": 1,
                    "name": "Offres",
                    "item": "https://qualidistrib.com/offres"
                }
            ]
        }
    </script>
{% endblock %}