Software Público Brasileiro

<section id="wl-presentation-video">
    <div class="container-fluid container wl-video-control-container">
        <div class="row">
            <div class="wl-video-control-wrapper">
                <a href="#wl-presentation-video" du-smooth-scroll offset="42">
                    <img class="wl-video-control" src="assets/img/wl-icon-play.png" alt="Ícone de play">
                </a>
            </div>
        </div>
    </div>
    <presentation-modal></presentation-modal>
</section>
<section id="wl-overview" ng-controller="progressCtrl">
    <div class="container-fluid container">
        <div class="row">
            <div class="col-xs-12">
                <div class="row">
                    <div class="col-xs-12 wl-section-title">
                        <a href="#wl-overview" du-smooth-scroll>
                            <h2 class="title">o
                                que
                                já
                                produzimos
                            </h2>
                        </a>>
                    </div>
                </div>
            </div>
            <div class="col-xs-12 wl-section-description">
                <p>
                    O Wikilibras é uma plataforma colaborativa para construção de dicionário em LIBRAS.
                </p>
                <p>
                   Acompanhe abaixo o progresso conquistado pela comunidade WikiLibras.
                </p>
            </div>
            <div class="col-xs-12 wl-overview-progress-wrapper">
                <div class="wl-overview-progress">
                    <div class="title">
                        <span>Sinais construídos</span>
                    </div>
                    <div class="progress">
                        <div class="progress-bar -yellow" role="progressbar" aria-valuenow="0" aria-valuemin="0"
                             aria-valuemax="100" style="width: {{ (progress.wikilibras.n_completed_tasks/progress.wikilibras.goal_n_tasks)*100 }}%"></div>
                    </div>
                    <div class="row progress-values">
                        <div class="col-xs-4">
                            Construídos: <span class="value">{{ progress.wikilibras.n_completed_tasks }}</span>
                        </div>
                        <div class="col-xs-4">
                            Meta: <span class="value">{{ progress.wikilibras.goal_n_tasks }}</span>
                        </div>
                        <div class="col-xs-4">
                            <span class="value">{{ (progress.wikilibras.goal_deadline | amDifference : dateTo : 'days') < 0? 0: (progress.wikilibras.goal_deadline | amDifference : dateTo : 'days') }} dias restantes</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xs-12 wl-overview-progress-wrapper">
                <div class="wl-overview-progress">
                    <div class="title">
                        <span>Sinais corrigidos</span>
                    </div>
                    <div class="progress">
                        <div class="progress-bar -blue" role="progressbar" aria-valuenow="0" aria-valuemin="0"
                             aria-valuemax="100" style="width: {{ (progress.corretor_sinais.n_completed_tasks/progress.corretor_sinais.goal_n_tasks)*100 }}%"></div>
                    </div>
                    <div class="row progress-values">
                        <div class="col-xs-4">
                            Corrigidos: <span class="value">{{ progress.corretor_sinais.n_completed_tasks }}</span>
                        </div>
                        <div class="col-xs-4">
                            Meta: <span class="value">{{ progress.corretor_sinais.goal_n_tasks }}</span>
                        </div>
                        <div class="col-xs-4">
                            <span class="value">{{ (progress.corretor_sinais.goal_deadline | amDifference : dateTo : 'days') < 0? 0: (progress.corretor_sinais.goal_deadline | amDifference : dateTo : 'days') }} dias restantes</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xs-12 wl-overview-progress-wrapper">
                <div class="wl-overview-progress">
                    <div class="title">
                        <span>Sinais avaliados</span>
                    </div>
                    <div class="progress">
                        <div class="progress-bar -green" role="progressbar" aria-valuenow="0" aria-valuemin="0"
                             aria-valuemax="100" style="width: {{ (progress.validador_sinais.n_completed_tasks/progress.validador_sinais.goal_n_tasks)*100 }}%"></div>
                    </div>
                    <div class="row progress-values">
                        <div class="col-xs-4">
                            Avaliados: <span class="value">{{ progress.validador_sinais.n_completed_tasks }}</span>
                        </div>
                        <div class="col-xs-4">
                            Meta: <span class="value">{{ progress.validador_sinais.goal_n_tasks }}</span>
                        </div>
                        <div class="col-xs-4">
                            <span class="value">{{ (progress.validador_sinais.goal_deadline | amDifference : dateTo : 'days') < 0? 0: (progress.validador_sinais.goal_deadline | amDifference : dateTo : 'days') }} dias restantes</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xs-12 wl-overview-progress-wrapper">
                <div class="wl-overview-progress">
                    <div class="title">
                        <span>Vídeos enviados</span>
                    </div>
                    <div class="progress">
                        <div class="progress-bar -brown" role="progressbar" aria-valuenow="0" aria-valuemin="0"
                             aria-valuemax="100" style="width: {{ (progress.uploaded_signs.n_completed_tasks/progress.uploaded_signs.goal_n_tasks)*100 }}%"></div>
                    </div>
                    <div class="row progress-values">
                        <div class="col-xs-4">
                            Enviados: <span class="value">{{ progress.uploaded_signs.n_completed_tasks }}</span>
                        </div>
                        <div class="col-xs-4">
                            Meta: <span class="value">{{ progress.uploaded_signs.goal_n_tasks }}</span>
                        </div>
                        <div class="col-xs-4">
                            <span class="value">{{ (progress.uploaded_signs.goal_deadline | amDifference : dateTo : 'days') < 0? 0: (progress.uploaded_signs.goal_deadline | amDifference : dateTo : 'days') }} dias restantes</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<section id="wl-features">
    <div class="container-fluid">
        <div class="row">
            <div class="col-xs-12 wl-section-title">
                <a href="#wl-features" du-smooth-scroll>
                    <h2 class="title">você
                        pode
                        colaborar
                    </h2>
                </a>
            </div>
            <div class="col-xs-12 wl-features-container">
                <div class="wl-features-wrapper -green">
                    <div class="wl-feature">
                        <div class="wl-feature-img">
                            <img src="assets/img/wl-feature-send-video.png" alt="Ícone de envio de vídeos">
                        </div>
                        <a href="/pybossa/project/wikilibras/newtask" class="btn btn-info wl-btn wl-feature-btn">
                            enviar
                            video
                        </a>
                        <div class="wl-feature-description">
                            <span>Grave seu sinal e envie para nossa comunidade.</span>
                        </div>
                    </div>
                    <div class="wl-ellipse-wrapper">
                        <span>ou</span>
                    </div>
                </div>
                <div class="wl-features-wrapper -yellow">
                    <div class="wl-feature">
                        <div class="wl-feature-img">
                            <img src="assets/img/wl-feature-create-sign.png" alt="Ícone de criação de sinais">
                        </div>
                        <a href="/pybossa/project/wikilibras/newtask" class="btn btn-info wl-btn wl-feature-btn">
                            criar
                            sinal
                        </a>
                        <div class="wl-feature-description">
                            <span> Ensine Ícaro, o nosso avatar, a fazer um sinal.
                            </span>
                        </div>
                    </div>
                    <div class="wl-ellipse-wrapper">
                        ou
                    </div>
                </div>
                <div class="wl-features-wrapper -blue">
                    <div class="wl-feature">
                        <div class="wl-feature-img">
                            <img src="assets/img/wl-feature-fix-sign.png" alt="Ícone de correção de sinais">
                        </div>
                        <a href="/pybossa/project/corretor_sinais/newtask" class="btn btn-info wl-btn wl-feature-btn">
                            corrigir
                            sinal
                        </a>
                        <div class="wl-feature-description">
                            <span>O sinal está incorreto? Colabore corrigindo-o.
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<section id="wl-volunteers" ng-controller="volunteersCtrl">
    <div class="container-fluid">
        <div class="row">
            <div class="col-xs-12 wl-section-title">
                <a href="#wl-volunteers" du-smooth-scroll>
                    <h2 class="title">
                        pessoas colaborando
                    </h2>
                </a>
            </div>
            <div class="col-xs-12 wl-volunteers-container">
                <div ng-if="volunteersData.avatars_data && volunteersData.avatars_data.length > 1" ng-repeat="avatar in volunteersData.avatars_data | limitTo: 50" class="wl-volunteers-wrapper">
                    <img ng-src="{{ avatar }}">
                </div>
            </div>
        </div>
    </div>
</section>
<section id="wl-signs-and-ranking">
    <div class="container-fluid">
        <div class="row">
            <div class="col-xs-12 wl-signs-and-ranking-container">
                <div class="wl-signs-and-ranking-wrapper" ng-controller="signsCtrl">
                    <div class="wl-section-title">
                        <a href="#wl-signs-and-ranking" du-smooth-scroll>
                            <h2 class="title">sinais
                                construídos
                            </h2>
                        </a>
                    </div>
                    <div class="wl-section-description">
                        <p>Confira alguns sinais que a comunidade WikiLibras já produziu.</p>
                    </div>
                    <div class="wl-signs-container">
                        <div class="wl-signs-wrapper sign-video-container" ng-repeat="sign in signsData | limitTo: 9 track by $index" ng-click="showSignModal($index)">
                            <a href="#">
                                <video preload="metadata">
                                    <source ng-repeat="source in sign.sources" vsrc="{{ source.path }}" type="{{ source.type }}" html5vfix>
                                    Sem suporte a vídeos
                                </video>
                            </a>
                        </div>
                        <div ng-repeat="i in [1,2,3]" ng-if="signsData.length % 3 === 0? false: i <= 3 - signsData.length % 3" class="wl-signs-wrapper">
                        </div>
                    </div>
                    <div id="wl-sign-modal" class="modal clean-modal sign-modal fade" tabindex="-1"
                         role="dialog" aria-labelledby="wl-sign-modal">
                        <div class="modal-dialog" role="document">
                            <div class="modal-content">
                                <div class="modal-body">
                                    <div class="sign-video-container">
                                        <video id="sign-modal-video" autoplay loop preload="none">
                                            <source ng-repeat="source in getSignData(activeSignId).sources" vsrc="{{ source.path }}" type="{{ source.type }}" html5vfix>
                                            Sem suporte a vídeos
                                        </video>
                                    </div>
                                    <p class="sign-name text-center">
                                        {{ getSignData(activeSignId).signName }}<br>
                                        <span class="created-by">criado por: {{ getSignData(activeSignId).userId }}</span>
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="wl-signs-and-ranking-wrapper" ng-controller="rankingCtrl">
                    <div class="wl-section-title">
                        <a href="#wl-signs-and-ranking" du-smooth-scroll>
                            <h2 class="title">
                                ranking dos colaborandores
                            </h2>
                        </a>
                    </div>
                    <div class="wl-section-description"></div>
                    <div class="row">
                        <div class="col-xs-3 wl-ranking-header-wrapper" ng-click="setActiveTab(0)">
                            <div class="wl-ranking-header" ng-class="{'-active': activeTab === 0}">
                                <a href="#">
                                    <div class="title">
                                        Sinais construídos
                                    </div>
                                </a>
                            </div>
                        </div>
                        <div class="col-xs-3 wl-ranking-header-wrapper" ng-click="setActiveTab(1)">
                            <div class="wl-ranking-header" ng-class="{'-active': activeTab === 1}">
                                <a href="#">
                                    <div class="title">
                                        Sinais corrigidos
                                    </div>
                                </a>
                            </div>
                        </div>
                        <div class="col-xs-3 wl-ranking-header-wrapper" ng-click="setActiveTab(2)">
                            <div class="wl-ranking-header" ng-class="{'-active': activeTab === 2}">
                                <a href="#">
                                    <div class="title">
                                        Sinais avaliados
                                    </div>
                                </a>
                            </div>
                        </div>
                        <div class="col-xs-3 wl-ranking-header-wrapper" ng-click="setActiveTab(3)">
                            <div class="wl-ranking-header" ng-class="{'-active': activeTab === 3}">
                                <a href="#">
                                    <div class="title">
                                        Vídeos enviados
                                    </div>
                                </a>
                            </div>
                        </div>
                    </div>
                    <div ng-show="activeTab === 0" class="wl-ranking-container">
                        <div class="row" ng-repeat="row in rankingData.wikilibras">
                            <div class="col-xs-6" ng-repeat="user in row" ng-if="user.rank > 0">
                                <div class="wl-rank">
                                    <div class="row">
                                        <div class="col-xs-4">
                                            <div class="star-wrapper">
                                                <img ng-if="[1,2,3].indexOf(user.rank) !== -1" ng-src="assets/img/{{user.rank === 1? 'gold':(user.rank === 2? 'silver': 'bronze')}}-star-icon.png" alt="Estrela de {{user.rank === 1? 'ouro':(user.rank === 2? 'prata': 'bronze')}}">
                                            </div>
                                            <div class="position-wrapper">
                                                {{ user.rank }}.
                                            </div>
                                        </div>
                                        <div class="col-xs-8 wl-ranked-volunteer">
                                            {{ user.name }}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div ng-show="activeTab === 1" class="wl-ranking-container">
                        <div class="row" ng-repeat="row in rankingData.corretor_sinais">
                            <div class="col-xs-6" ng-repeat="user in row" ng-if="user.rank > 0">
                                <div class="wl-rank">
                                    <div class="row">
                                        <div class="col-xs-4">
                                            <div class="star-wrapper">
                                                <img ng-if="[1,2,3].indexOf(user.rank) !== -1" ng-src="assets/img/{{user.rank === 1? 'gold':(user.rank === 2? 'silver': 'bronze')}}-star-icon.png" alt="Estrela de {{user.rank === 1? 'ouro':(user.rank === 2? 'prata': 'bronze')}}">
                                            </div>
                                            <div class="position-wrapper">
                                                {{ user.rank }}.
                                            </div>
                                        </div>
                                        <div class="col-xs-8 wl-ranked-volunteer">
                                            {{ user.name }}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div ng-show="activeTab === 2" class="wl-ranking-container">
                        <div class="row" ng-repeat="row in rankingData.validador_sinais">
                            <div class="col-xs-6" ng-repeat="user in row" ng-if="user.rank > 0">
                                <div class="wl-rank">
                                    <div class="row">
                                        <div class="col-xs-4">
                                            <div class="star-wrapper">
                                                <img ng-if="[1,2,3].indexOf(user.rank) !== -1" ng-src="assets/img/{{user.rank === 1? 'gold':(user.rank === 2? 'silver': 'bronze')}}-star-icon.png" alt="Estrela de {{user.rank === 1? 'ouro':(user.rank === 2? 'prata': 'bronze')}}">
                                            </div>
                                            <div class="position-wrapper">
                                                {{ user.rank }}.
                                            </div>
                                        </div>
                                        <div class="col-xs-8 wl-ranked-volunteer">
                                            {{ user.name }}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div ng-show="activeTab === 3" class="wl-ranking-container">
                        <div class="row" ng-repeat="row in rankingData.uploaded_signs">
                            <div class="col-xs-6" ng-repeat="user in row" ng-if="user.username">
                                <div class="wl-rank">
                                    <div class="row">
                                        <div class="col-xs-4">
                                            <div class="star-wrapper">
                                                <img ng-if="[0,1,2].indexOf($index) !== -1" ng-src="assets/img/{{$index === 0? 'gold':($index === 1? 'silver': 'bronze')}}-star-icon.png" alt="Estrela de {{$index === 0? 'ouro':($index === 1? 'prata': 'bronze')}}">
                                            </div>
                                            <div class="position-wrapper">
                                                {{ $index + 1 }}.
                                            </div>
                                        </div>
                                        <div class="col-xs-8 wl-ranked-volunteer">
                                            {{ user.username }}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<section id="wl-vlibras">
    <div class="container-fluid container">
        <div class="row">
            <div class="col-xs-12 wl-section-title">
                <a href="#wl-vlibras" du-smooth-scroll>
                    <h2 class="title">
                        Conheça o VLibras
                    </h2>
                </a>
            </div>
        </div>
        <div class="wl-vlibras-container">
            <div class="row">
                <div class="col-xs-12 col-md-6">
                    <div class="wl-vlibras-description">
                        <h1 class="title">VLibras</h1>
                        <span>Resultado de uma parceria entre o Ministério do Planejamento, Orçamento e Gestão (MP), por meio da Secretaria de Tecnologia da Informação (STI) e a Universidade Federal da Paraíba (UFPB)
                        </span>
                    </div>
                </div>
                <div class="col-xs-12 col-md-6">
                    <div class="wl-vlibras-video-wrapper">
                        <video class="wl-vlibras-video" controls>
                            <source src="http://vlibras.gov.br/video/VLibras-Demo2_com_AD.mp4" type="video/mp4">
                            Seu navegador não oferece suporte a videos HTML5!
                        </video>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<section id="wl-sponsors">
    <div class="container-fluid">
        <div class="row">
            <div class="col-xs-12 wl-section-title">
                <a href="#wl-sponsors" du-smooth-scroll>
                    <h2 class="title">
                        Realizadores
                    </h2>
                </a>
            </div>
        </div>
        <div class="wl-sponsors-container">
            <div class="row">
                <div class="col-xs-12">
                    <a href="http://www.planejamento.gov.br/acesso-a-informacao/institucional/unidades/sti">
                        <img src="assets/img/sti-logo.png" alt="Secretaria de Tecnologia da Informação">
                    </a>
                    <a href="http://www.planejamento.gov.br/">
                        <img src="assets/img/mpog-logo.png" alt="Ministério Planejamento">
                    </a>
                    <a href="http://www.justica.gov.br/">
                        <img src="assets/img/govbr-logo.png" alt="Ministério da Justiça e Cidadania">
                    </a>
                    <a href="http://www2.camara.leg.br/">
                        <img src="assets/img/camara-logo.png" alt="Câmara dos Deputados">
                    </a>
                </div>
                <div class="col-xs-12">
                    <a href="http://lavid.ufpb.br/">
                        <img src="assets/img/lavid-logo.png" alt="Laboratório de aplicações de vídeo digital - Lavid">
                    </a>
                    <a href="http://www.ufpb.br/">
                        <img src="assets/img/ufpb-logo.png" alt="Universidade Federal da Paraíba - UFPB">
                    </a>
                    <a href="https://www.rnp.br/">
                        <img src="assets/img/rnp-logo.png" alt="Rede Nacional de Ensino e Pesquisa - RNP">
                    </a>
                    <a href="https://www.lsd.ufcg.edu.br/">
                        <img src="assets/img/lsd-logo.png" alt="Laboratório de Sistemas Distribuídos. - LSD">
                    </a>
                    <a href="http://www.ufcg.edu.br/">
                        <img src="assets/img/ufcg-logo.png" alt="Universidade Federal de Campina Grande - UFCG">
                    </a>
                </div>
            </div>
        </div>
    </div>
</section>
<section id="wl-contact">
    <div class="container-fluid">
        <div class="row">
            <div class="col-xs-12 wl-section-title">
                <a href="wl-sponsors" du-smooth-scroll>
                    <h2 class="title">
                        Contato
                    </h2>
                </a>
            </div>
        </div>
        <div class="wl-contact-container">
            <div class="row">
                <div class="col-xs-12">
                    <div class="wl-contact-description">
                        Ministério do Planejamento, Desenvolvimento e Gestão<br>
                        Secretaria de Tecnologia da Informação<br>
                        Departamento de Governo Digital<br>
                        Endereço: Esplanada dos Ministérios Bloco "C"<br>
                        E-mail: govbr@planejamento.gov.br<br>
                        Telefone: 61) 2020-8546 / (61) 2020-1666
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-6">
                    <a href="http://www.acessoainformacao.gov.br/">
                        <img src="assets/img/information-access-logo.png" alt="Logo acesso à informação">
                    </a>
                </div>
                <div class="col-xs-6">
                    <a href="http://www.brasil.gov.br/">
                        <img src="assets/img/brasil-logo.png" alt="Logo Brasil governo federal">
                    </a>
                </div>
            </div>
        </div>
    </div>
</section>