RadarParlamentar-MES2017-1/radar

View on GitHub
radar_parlamentar/radar_parlamentar/templates/index.html

Summary

Maintainability
Test Coverage
{% extends "base.html" %}

{% block title %}
Radar Parlamentar
{% endblock title%}

{% block headerAttr %}
class = "largeSlides"
{% endblock headerAttr %}

{% block extrascripts %}
    <script style="display: none;">
        /* Cycle plugin for home page */
        $(document).ready(function(){
            var onBefore = function(curr, next, opts, fwd) {
                jQuery(next).find('.slideMsgs.double').find('h1').css({'display':'none', 'left':'-999px', 'opacity': 0});
                jQuery(next).find('.slideMsgs.double').find('h4').css({'display':'none', 'left':'-999px', 'opacity': 0});
            }

            var onAfter = function(curr, next, opts, fwd) {
                var width = $(document).width() - 980;
                var h1Height = jQuery(this).find('.slideMsgs.double').find('h1').height(true);
                jQuery(this).find('.slideMsgs.double').find('h1').css('display', 'block').delay(100).animate({'left': ((width / 2) + 70) +'px', 'opacity': 1}, 400, 'easeInQuad');
                jQuery(this).find('.slideMsgs.double').find('h4').css({display: 'block', top: h1Height + 'px'}).delay(400).animate({'left': ((width / 2) + 70) +'px', 'opacity': 1}, 250, 'easeInQuad');
            }

            if ($('#slides').length > 0){
                $('#slides').cycle({
                    fx: 'scrollHorz',
                    speed: 500,
                    timeout: 5000,
                    pause: 1,
                    rev: 1,
                    randomizeEffects: false,
                    easing: 'easeInQuad', //jquery.easing library/plugin is required for this functionality
                    next: '#sliderCtrls .next',
                    prev: '#sliderCtrls .prev',
                    before: onBefore,
                    after: onAfter,
                    pager: '',
                    cleartypeNoBg: true
                });
            }
            /* slider controls position inside the page*/
            var left = Math.ceil((($(document).width()) - 980) / 2);
            $('#sliderCtrls').css('left', left+'px');
        });
    </script>
{% endblock extrascripts %}

{% block imageBox %}
        <section id="imageBox">
            <ul id="slides">
                <li data-slide="1">
                    <div class="slideMsgs double">
                        <h1>Radar Parlamentar</h1>
                        <h4>
                            A tecnologia a serviço do cidadão / cidadã - uma ferramenta para análise partidária das casas legislativas.
                        </h4>
                    </div>
                </li>
                <li data-slide="2">
                    <div class="slideMsgs double">
                        <h1>Radar Parlamentar</h1>
                        <h4>
                            Junte-se à campanha "Voto Aberto: Eu Apoio!" e ajude a transformar seu país.
                        </h4>
                    </div>
                </li>
                <li data-slide="3">
                    <div class="slideMsgs double">
                        <h1>Radar Parlamentar</h1>
                        <h4>
                            A tecnologia a serviço do cidadão / cidadã - uma ferramenta para análise partidária das casas legislativas.
                        </h4>
                    </div>
                </li>
            </ul>
            <div id="sliderCtrls">
                <a href="#" class="prev">Prev</a>
                <a href="#" class="next">Next</a>
            </div>
        </section><!-- end of #imageBox -->

    </header><!-- end of #header -->
{% endblock imageBox %}

{% block content %}


        <div class="promoMsg">
                <h2>
                    O Radar Parlamentar é um aplicativo que ilustra as semelhanças entre partidos políticos com base na análise matemática dos dados de votações que ocorrem na casa legislativa. As semelhanças são apresentadas em um gráfico bidimensional, em que círculos representam partidos ou parlamentares, e a distância entre esses círculos representa o quão parecido os mesmos votam.
                </h2>
        </div>

        <div class="stHead"><h4>Casas já analisadas</h4></div>

        <section class="cols caseStd">
            <div>
                <h3><a href="/radar/sen/">Senado</a></h3>
                <div class="inwrap">
                    <a href="/radar/sen/">
                        <img src="/static/assets/sen.png" class="border" height="200" width="248" alt="Case Studies" />
                    </a>
                </div><!-- end of .inwrap -->
            </div><!-- end of .half -->
            <div>
                <h3><a href="/radar/cdep/">Câmara dos Deputados</a></h3>
                <div class="inwrap">
                    <a href="/radar/cdep/">
                        <img src="/static/assets/cdep.png" class="border" height="200" width="248" alt="Case Studies" />
                    </a>
                </div><!-- end of .inwrap -->
            </div><!-- end of .half -->
            <div>
                <h3><a href="/radar/cmsp/">Câmara Municipal de São Paulo</a></h3>
                <div class="inwrap">
                    <a href="/radar/cmsp/">
                        <img src="/static/assets/cmsp.png" class="border" height="200" width="248" alt="Case Studies" />
                    </a>
                </div><!-- end of .inwrap -->
            </div><!-- end of .half -->
        </section><!-- end of .cols -->

        <section class="cols">
                <div class="stHead"><h4>Contribua você também!</h4></div>
                    <div id="licenciamento">
                        Radar Parlamentar é software livre licenciado sob a <a href="http://www.gnu.org/licenses/agpl-3.0.html">GNU Afero GPL v3</a>.</br>
                        Acesso o <a href="https://github.com/radar-parlamentar/radar/">código fonte</a>.
                        Participe de nossa lista de discussão: <a href="mailto:radar@polignu.org" rel="nofollow">radar@polignu.org</a>.</br></br>
                         <a href="https://github.com/radar-parlamentar/radar/">
                         <img src="/static/assets/github.png"  alt="Código fonte no Github" /></a>
                    </div><!-- end of .licenciamento -->
                </div><!-- end of .stHead -->
    </section><!-- end of .cols -->

{% endblock content %}