index.html 16.8 KB
<html lang="pt-br">
  <head>
    <meta charset="utf-8" />
    <title>Dialoga Brasil</title>

    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <script type="text/javascript">
      /**
      * The Url created with module pattern
      *
      * @todo Moves the module to another single js file
      */
      var Url = (function(){

        return {
          initBase: function(){
            return "//" + window.location.host + window.location.pathname.replace('/index.html','');
          },
          addBaseUrl: function(filename){
            var base = window.location.href;
            if(base.match(/file:/) || filename.match(/http:/)){
              base = '';
            }else{
              base = this.initBase() + '/';
            }
            return base + filename;
          }
        }

      })();

      function makeCSSLink(filename){
        var fileref=document.createElement('link');
        fileref.setAttribute('rel', 'stylesheet');
        fileref.setAttribute('type', 'text/css');
        fileref.setAttribute('href',  Url.addBaseUrl(filename));
        return fileref;
      }
      function loadCSSFiles(){
        var css_files = [
          'css/bootstrap.min.css',
          'css/hover.custom.css',
          'http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css',
          'http://fonts.googleapis.com/css?family=Open+Sans:400,300,700',
          'http://fonts.googleapis.com/css?family=Asap:400,700',
          'style.css'
        ];
        head = document.getElementsByTagName('head')[0]
        for(i = 0; i < css_files.length; i++){
          head.appendChild(makeCSSLink(css_files[i]));
        }
      }
      function makeJSURL(filename){
        var url = Url.addBaseUrl(filename);

        return url;
      }

      function loadJavaScriptAsync(file_path){
      }

      function loadRequireJS(){
        var head = document.getElementsByTagName('head')[0];
        var script_element = document.createElement('script');
        script_element.type = 'text/javascript';
        script_element.src = makeJSURL('js/require.js');
        script_element.setAttribute('data-main', makeJSURL('js/requirejs-config.js'));
        head.appendChild(script_element);
      }
      loadCSSFiles();
    </script>
    <script src='https://www.google.com/recaptcha/api.js?hl=pt-BR&render=explicit' async defer></script>
  </head>
  <body>
    <div class="container">
      <div id="proposal-result"></div>
    </div>
    <div class="clearfix"></div>

    <script id="proposal-template" type="text/x-handlebars-template">
      <header>
        <h1><a href="#">{{article.title}}</a></h1>
        <a id="display-contrast" href="#">Alto Contraste</a>
      </header>

      <div id="content">
        {{{article.abstract}}}
      </div>

      <nav role="tabpanel">
        <ul role="tablist">
          <li id="nav-proposal-categories" role="presentation">
            <a href="#/temas" class="active" role="tab" aria-controls="proposal-categories">Por Temas</a>
          </li>
          <li id="nav-proposal-group" role="presentation">
            <a href="#/programas" role="tab" aria-controls="proposal-group">Por Programas</a>
          </li>
        </ul>
      </nav>

      <div id="proposal-categories">
        <div id="proposal-categories-container">
          {{#each article.categories}}
            <li id="proposal-category-{{slug}}" class="proposal-category" data-category="{{slug}}">
              <a href="#/temas/{{slug}}/{{id}}" class="proposal-link hvr-float-shadow" data-target="proposal-item-{{id}}">{{name}}</a>
              <div class="arrow-box" style="display: none"></div>
            </li>
          {{/each}}
          {{#each article.categories}}
            <div id="proposal-item-{{id}}" class="proposal-category-items proposal-category-items-{{slug}} hide" data-category="{{slug}}">
              <div class="header">
                <div class="name">{{name}}</div>
                <div class="description"></div>
              </div>
              <ul class="proposal-list">
                {{#list_proposal ../article.children category=slug}}
                  {{#link title id}}{{/link}}
                {{/list_proposal}}
              </ul>
            </div>
          {{/each}}
        </div>
      </div>

      <div id="proposal-group" class="hide">
        <label for="search-input">Selecione um programa para fazer propostas e contar sua experiência.</label>
        <div id="search-input-container">
          <input placeholder="palavra chave" id="search-input" type="text" name="search" />
        </div>
        <ul>
          {{#list_proposal article.children}}
            {{#link title id}}{{/link}}
          {{/list_proposal}}
        </ul>
      </div>

      {{#each article.children}}
        {{!-- <div class="container"> --}}
          <div class="proposal-detail hide" id="proposal-item-{{id}}">
            <div class="categories {{#each categories}}{{slug}} {{/each}}">
              <ul class="select">
                {{#each categories}}
                  <li class="category proposal-category" data-category="{{slug}}">
                    <a href="#/temas/{{slug}}/{{id}}" class="proposal-link" data-target="proposal-item-{{id}}">{{name}}</a>
                    <button class="go-back btn btn-default pull-right">
                      VOLTAR
                      <span class="fa fa-reply"></span>
                    </button>
                    {{#select_proposal ../../article.children slug ../id}}{{/select_proposal}}
                  </li>
                {{/each}}
              </ul>

              <div class="proposal-header">
                <div class="abstract">
                  <img src="{{../host}}{{image.url}}" alt="Imagem de apresentação do programa."/>
                </div>
                <div class="title">{{title}}</div>
                <div class="abstract">{{{abstract}}}</div>
                <div class="show_body">
                  <a href="#/programas/{{id}}/sobre-o-programa"><span>Conheça o Programa</span></a>
                </div>
              </div>

              <div class="body proposal-detail-base hide">
                <div class='body-content'>
                  {{{body}}}
                </div>

                <div class="container">
                  <div class="col-sm-4 col-sm-offset-4">
                    <div class="go-to-proposal-button">
                      <a href="#/programas/{{id}}" data-target="proposal-item-{{id}}">
                        <span class="fa fa-reply"></span>
                        Participe
                      </a>
                    </div>
                  </div>
                </div>
              </div>

              <div class="make-proposal-container">
                <div class="make-proposal">
                  <div class="container-title">Faça Uma Proposta</div>
                  <div class="subtitle">Qual a sua sugestão para melhorar este programa?</div>
                  <div class="info">Esta consulta termina em julho de 2015. Até lá, todas as propostas serão lidas e as cinco mais pontuadas em cada programa receberão resposta oficial do governo.</div>
                  <div class="send-proposal-button send-button"><a href="#"><span>Envie Sua Proposta</span></a></div>
                  <div class="login-container hide">Login</div>
                  <form class="make-proposal-form save-article-form hide" id="make-proposal-form-{{id}}" action="{{proposal_action ../article . }}" method="post">
                    <div class="message hide"></div>
                    <div>
                      <div><label for="article_abstract">Descrição</label></div>
                      <textarea id="article_abstract" class="countdown" name="article[abstract]" placeholder="Descrição" maxlength="200"></textarea>
                    </div>
                    <input type="hidden" id="type" name="article[type]" value="ProposalsDiscussionPlugin::Proposal">
                    <input type="hidden" id="content_type" name="content_type" value="ProposalsDiscussionPlugin::Proposal">
                    <input type="submit" id="make-proposal-button" name="make-proposal-button" class="make-proposal-button" value="Enviar">
                  </form>
                  <div class="success-proposal-sent success-sent hide send-button">
                    <p>Sua proposta foi encaminhada com sucesso! Ela se tornará pública em até 24 horas e poderá ser apoiada por outros participantes.</p>
                    <a href="#">Faça nova proposta</a>
                  </div>
                  <div class="clearfix"></div>
                </div>
              </div>

              <div class="support-proposal-container">
                <div class="support-proposal">
                  <div class="container-title"> Apoie outras propostas</div>
                  <div class="random-proposal"></div>
                  <div class="loading">Carregando...</div>
                  <div class="no-proposals">Ainda não existe nenhuma proposta para este programa.</div>
                </div>
              </div>

              <div class="results-container hide"></div>
              
              <div class="experience-proposal-container">
                <div class="experience-proposal">
                  <div class="container-title">Conte sua experiência</div>
                  <p>Adoraríamos que você nos contasse a sua experiência com este programa ou a de alguém que você conhece.</p>
                  <p>Esta história pode nos ajudar a melhorar a nossa ação e não será divulgada.</p>
                  <div class="send-experience-button send-button"><a href="#"><span>Envie Sua Experiência</span></a></div>
                  <div class="login-container hide">Login</div>
                  <form class="make-experience-form save-article-form hide" id="make-experience-form-{{id}}" action="/api/v1/articles/{{id}}/children" method="post">
                    <div class="message hide"></div>
                    <div>
                      <div>
                        <label for="article_abstract">Descrição</label>
                      </div>
                      <textarea id="article_abstract" class="countdown" name="article[abstract]" placeholder="Descrição" maxlength="5000"></textarea>
                    </div>
                    <input type="hidden" id="content_type" name="content_type" value="ProposalsDiscussionPlugin::Story">
                    <input type="submit" id="make-experience-button" name="make-experience-button" class="make-experience-button" value="Enviar">
                  </form>
                  <div class="success-experience-sent success-sent hide send-button">
                    <p>Sua experiência foi encaminhada com sucesso!</p>
                    <a href="#">Encaminhar Nova Experiência</a>
                  </div>
                </div>
              </div>

              <div class="talk-proposal-container">
                <div class="talk-proposal">
                  <div class="container-title">Bate-papo com os ministros</div>
                  <p>Confira as datas e horários:</p>
                  <ul class="calendar" data-slick='{"infinite": false, "rows": 2}'>
                    <li>
                      <span>Arthur Chioro</span>
                      <span>Saúde</span>
                      <div class="date"><i class="fa fa-calendar"></i> 17/06/2015</div><div class="time"><i class="fa fa-clock-o"></i> 19:00</div>
                    </li>
                    <li>
                      <span>Tereza Campello</span>
                      <span>Desenvolvimento Social</span>
                      <div class="date"><i class="fa fa-calendar"></i> 18/06/2015</div><div class="time"><i class="fa fa-clock-o"></i> 19:00</div>
                    </li>
                    <li>
                      <span>Renato Janine Ribeiro</span>
                      <span>Educação</span>
                      <div class="date"><i class="fa fa-calendar"></i> 24/06/2015</div><div class="time"><i class="fa fa-clock-o"></i> 19:00</div>
                    </li>
                    <li>
                      <span>José Eduardo Cardozo</span>
                      <span>Justiça</span>
                      <div class="date"><i class="fa fa-calendar"></i> 25/04/2015</div><div class="time"><i class="fa fa-clock-o"></i> 19:00</div>
                    </li>
                  </ul>
                </div>
              </div>
              
              <div class="clearfix"></div>
            </div>
          </div>
        {{!-- </div> --}}
      {{/each}}
    </script>

    <script id="support-proposal-template" type="text/x-handlebars-template">
      <div class="abstract">
        <p>{{stripTags (trimString abstract 200)}}</p>
      </div>
      <div class="captcha"></div>
      <div class="vote-actions">
        <a href="#" class="like dislike" data-vote-value="-1"></a>
        <a href="#" class="like" data-vote-value="1"></a>
        <a href="#" class="skip">Pular</a>
        <a href="#" class="vote-result">Resultados</a>
      </div>
    </script>

    <script id="results" type="text/x-handlebars-template">
      <div class="loading">Carregando...</div>
      <div class="results-content hide">
        <div class="clearfix">
          <span class="total">Total de propostas: <span class="value">{{pagination.total}}</span></span>
          <a href="#" class="vote-result">Fechar</a>
        </div>
        <div class="updated-at">
          <span>Última atualização </span>
          <span class="timeago" title="{{updated_at}}"></span>
        </div>
        <table>
          <tr class="header">
            <td class="abstract-text">Propostas</td>
            <td class="votes-for"></td>
            <td class="votes-against"></td>
            <td class="views">Exibições</td>
            <td class="support">Apoio</td>
          </tr>
          {{#each proposals}}
            <tr>
              <td class="abstract-text"><div class="truncate"><p class="truncated">{{stripTags abstract}}</p></div></td>
              <td class="votes-for value">{{votes_for}}</td>
              <td class="votes-against value">{{votes_against}}</td>
              <td class="views value">{{hits}}</td>
              <td class="support value">{{#round effective_support}}{{/round}}</td>
            </tr>
          {{/each}}
        </table>
        <div class="paging"></div>
      </div>
    </script>

    <script id="login" type="text/x-handlebars-template">
      <div class="loading">Carregando...</div>
      <form id="login-form" class="login">
        <div class="message hide"></div>
        <div class="username">
          <label for="user_name" class="label">Nome de Usuário / E-mail:</label>
          <input id="user_name" name="login" type="text" placeholder="Nome do usuário / E-mail">
        </div>
        <div class="password">
          <label for="user_password" class="label">Senha:</label>
          <input id="user_password" name="password" type="password" placeholder="Senha">
        </div>
        <div class="actions">
          <input type="submit" class="login-action" value="Acessar"/>
          <a href="http://www.participa.br/account/forgot_password" target="_blank" class="forgot-password">Esqueci minha senha</a>
        </div>
        <div class="oauth">
          <div class="label">Acessar com:</div>
          <a href="http://www.participa.br/plugin/oauth_client/facebook?oauth_client_popup=true&id=1" target="_blank" class="facebook oauth-login">Facebook</a>
          <a href="http://www.participa.br/plugin/oauth_client/google_oauth2?oauth_client_popup=true&id=2" target="_blank" class="google oauth-login">Google +</a>
          <a href="#" class="new-user">Cadastrar</a>
        </div>
      </form>
      <form id="signup-form" class="signup hide" autocomplete="off">
        <div class="email">
          <label for="user_email" class="label">E-mail:</label>
          <input id="user_email" name="email" type="text" placeholder="E-mail">
        </div>
        <div class="username">
          <label for="user_name" class="label">Nome de Usuário</label>
          <input id="user_name" name="login" type="text" placeholder="Nome do usuário">
        </div>
        <div class="password">
          <label for="user_password" class="label">Senha:</label>
          <input id="user_password" name="password" type="password" placeholder="Senha">
        </div>
        <div class="password-confirmation">
          <label for="user_password_confirmation" class="label">Confirme a senha:</label>
          <input id="user_password_confirmation" name="password_confirmation" type="password" placeholder="Confirme a senha">
        </div>
        <div class="actions">
          <div class="message hide"></div>
          <a href="#" class="confirm-signup">Confirmar</a>
          <a href="#" class="cancel-signup">Cancelar</a>
        </div>
      </form>
    </script>


    <script type='text/javascript'	>
      loadRequireJS();
    </script>


  </body>

</html>