opengovernment/askthem

View on GitHub
app/views/layouts/splash.html.erb

Summary

Maintainability
Test Coverage
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie10 lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js lt-ie10 lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js lt-ie10 lt-ie9" lang="en"> <![endif]-->
<!--[if IE 9]>    <html class="no-js lt-ie10" lang="en"> <![endif]-->
<!--[if gt IE 9]><!--> <html class="no-js"> <!--<![endif]-->
<head>
  <%= render "shared/chartbeat" -%>
  <%= render "shared/optimizely" -%>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <link rel="dns-prefetch" href="//connect.facebook.net">
  <title>AskThem - questions and petitions for elected officials and verified Twitter accounts</title>
  <meta name="description" content="<%= description %>">
  <meta name="author" content="Participatory Politics Foundation">
  <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
  <meta property="og:title" content="<%= title %>">
  <meta property="og:title" content="AskThem">
  <meta property="og:description" content="<%= description %>">
  <meta property="og:site_name" content="AskThem">
  <meta property="og:type" content="website">
  <meta property="og:url" content="<%= current_url %>">
  <%= og_image_tag %>
  <meta property="og:locale" content="en_US">
  <meta property="fb:admins" content="<%= ENV["FACEBOOK_ADMINS_ID"] -%>">
  <meta property="fb:app_id" content="<%= ENV["FACEBOOK_APP_ID"] -%>">
  <%- if ENV["BLITZ_AUTHORIZATION_META"].present? %>
    <%= raw(ENV["BLITZ_AUTHORIZATION_META"]) %>
  <%- end %>
  <%= javascript_include_tag 'modernizr-2.5.3.min.js' %>
  <%= stylesheet_link_tag 'application', media: 'all' %>
  <%= csrf_meta_tags %>
</head>
<body class="splash">
  <header class="main">
    <meta property="http://askthem.io/assets/logo.svg"og:image" content="http://askthem.io/assets/logo.svg"/>
    <section class="mobile_admin_nav">
      <%= link_to 'AskThem', root_path, class: 'logo' %>
    </section>
    <div class="wrapper">
      <%= link_to 'AskThem', root_path, class: 'logo' %>
      <div class="news_signup" id="news_signup">
        <%= yield %>
      </div>
    </div>
    <div class="clear"></div>
  </header>
  <nav class="scroll_content below">
    <a href="/splash#content_body" style="color:#f77665;" class="show_below">How It Works</a>
  </nav>
  <nav class="scroll_content above" style="display:none;">
    <a href="/splash#" class="show_above">Get Notified</a>
  </nav>
  <section id="content_body">
    <div class="content_body header">
      <h2>About the <br/>Project &amp; Team</h2>
    </div>
    <div class="content_body">
      <div class="wrapper">
        <div class="leftCol">

          <p>AskThem is a project of the Participatory Politics Foundation, a 501(c)3 non-profit organization with a mission to increase civic engagement. AskThem is supported by a charitable grant from the Knight Foundation's <a href="http://www.knightfoundation.org/funding-initiatives/tech-engagement/">Tech For Engagement</a> initiative.</p>

          <p>AskThem is a free &amp; open-source website for questions-and-answers with public figures. It's a not-for-profit tool for a stronger democracy, with open data for informed and engaged communities.</p>

          <p>AskThem allows you to:</p>
            <ul>
              <li>Find and ask questions to over 142,000 elected officials nationwide: federal, state and city levels of government.</li>
              <li>Get signatures for your question or petition, have it delivered over email or Twitter, and push for a public response.</li>
              <li>See questions from people near you, sign-on to questions you care about, and review answers from public figures.</li>
            </ul>

          <p>It's like a version of "<a href="https://petitions.whitehouse.gov/">We The People</a>" for every elected official, from local city council members all the way up to U.S. senators. Enter your email above to be the first to ask a question when we launch and see previews of the site.</p>

          <p><strong>Elected officials</strong>: enter your email above and we'll send you more information about signing up to answer questions on AskThem. It's a free and non-partisan service to respond to your constituents in an open public forum and update them over email about your work. Or, be a leader in open-government and <a href="https://docs.google.com/forms/d/1iCRzEuDL6bGEkmMsTVrlH-DlQYnMX4KhSF32_tPgT8o/viewform">sign up now</a>.</p>

          <p>Issue-based organizations and media: sign up to help promote questions to government from people in your area. We're working to launch with partnerships that build greater public accountability.</p>

          <p>Previously known as the OpenGovernment.org project, AskThem is open-source and uses open government data - our code is available on <a href="https://github.com/opengovernment">GitHub</a> - contributions welcome. For more development updates &amp; discussion, join our low-traffic <a href="https://groups.google.com/d/forum/opengovernment">Google Group</a>.</p>

          <p>We're a <a href="http://www.participatorypolitics.org/">small non-profit organization</a> actively seeking charitable funding support - help us launch this powerful new tool for public dialogue! Email us for a copy of our non-profit funding prospectus. If you can make a tax-exempt gift to support our work, please <a href="http://www.participatorypolitics.org/donate/">donate to PPF</a>. More background on the project is available on our <a href="https://www.newschallenge.org/open/open-government/submission/opengovernment.org-a-wethepeople-for-state-city-and-local-governments/
          ">Knight NewsChallenge proposal</a> from March 2013.</p>

          <p>Questions, feedback, ideas? Email David Moore, Executive Director of PPF - david at ppolitics.org, Twitter: <a href="http://twitter.com/ppolitics">@ppolitics</a>; like our <a href="https://www.facebook.com/pages/Askthem/538576652878135">page on Facebook</a> &amp; follow <a href="https://twitter.com/AskThemPPF">@AskThemPPF</a> on Twitter. Stay tuned!</p>

          <iframe src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Fpages%2FAskthem%2F538576652878135&amp;width=450&amp;height=80&amp;colorscheme=light&amp;layout=standard&amp;action=like&amp;show_faces=true&amp;send=true" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:80px;" allowTransparency="true"></iframe>

          <h3 class='splash-shares'>Help us spread the word!</h3>
          <a href="mailto:?subject=Get notified when AskThem launches&body=AskThem is a new question-and-answer website with public figures. It&#039;s free, open-source, and not-for-profit.%0D%0A%0D%0ASign up here to be notified when it launches this Fall and be the first to ask a question to the people who represent you in government &#058;&#058;%0D%0A%0D%0Aaskthem.io%0D%0A%0D%0A&#133;it's like a version of the &#147;We The People&#148; petition platform for every elected official. You can target over 100,000 elected officials nationwide with questions and petitions, from local city council members all the way up to U.S. senators.%0D%0A%0D%0AAskThem is a project of the Participatory Politics Foundation, the 501(c)3 non-profit organization that created OpenCongress.org and OpenGovernment.org." target="_blank" class='splash-share cta-pill'>
            <i class='icon-envelope-alt'></i>
            Email
          </a>
          <a href="http://www.facebook.com/sharer/sharer.php?s=100&p[url]=http://askthem.io/&p[images][0]=&p[title]=Get%20notified%20when%20AskThem%20launches&p[summary]=AskThem%20is%20a%20new%20question-and-answer%20website%20with%20public%20figures.%20It's%20free,%20open-source,%20and%20not-for-profit.%0A%0ASign%20up%20here%20to%20be%20notified%20when%20it%20launches%20this%20Fall%20and%20be%20the%20first%20to%20ask%20a%20question%20to%20the%20people%20who%20represent%20you%20in%20government%20::%0A%0Aaskthem.io" target="_blank" class='splash-share cta-pill cta-pill-facebook'>
            <i class='icon-facebook'></i>
            Share on Facebook
          </a>
          <a href='https://twitter.com/share?text=Get notified when AskThem launches, for question-and-answer and petitions with public figures&#058; askthem.io.' target="_blank" class='splash-share cta-pill cta-pill-twitter'>
            <i class='icon-twitter'></i>
            Tweet your Followers
          </a>
        </div>
        <div class="rightCol">
          <h4>Advisory Council</h4>
          <ul>
            <li>
              <div class="avatar">
                <%= image_tag('splash_avatars/micah_sifry.jpg', class: 'avatar') %>
              </div>
              <div class="person-info">
                <h3><a href="https://twitter.com/mlsif" target="_blank">Micah Sifry</a></h3>
                <p>Personal Democracy Media &amp; TechPresident, "<a href="http://goodquestionproject.com/">Good Question Project</a>"</p>
              </div>
            </li>
            <li>
              <div class="avatar">
                <%= image_tag('splash_avatars/zephyr_teachout.jpg', class: 'avatar') %>
              </div>
              <div class="person-info">
                <h3><a href="https://twitter.com/zephyrteachout" target="_blank">Zephyr Teachout</a></h3>
                <p>Associate Law Professor, Fordham Law School &amp; Board member, Participatory Politics Foundation</p>
              </div>
            </li>
            <li>
              <div class="avatar">
                <%= image_tag('splash_avatars/nick_grossman.jpg', class: 'avatar') %>
              </div>
              <div class="person-info">
                <h3><a href="http://nickgrossman.is/" target="_blank">Nick Grossman</a></h3>
                <p>Advocate-In-Residence, Union Square Ventures</p>
              </div>
            </li>
                   <li>
              <div class="avatar">
                 <%= image_tag('splash_avatars/tiffiniy_cheng.jpg', class: 'avatar') %>
              </div>
              <div class="person-info">
                <h3><a href="http://www.fightforthefuture.org/aboutus/index.html#team" target="_blank">Tiffiniy Cheng</a></h3>
                <p>President &amp; Co-Founder, PPF; Co-Director, <a href="http://www.fightforthefuture.org/">Fight For the Future</a></p>
              </div>
            </li>
                   <li>
              <div class="avatar">
                <%= image_tag('splash_avatars/nicco_mele.jpg', class: 'avatar') %>
              </div>
              <div class="person-info">
                <h3><a href="http://nicco.org/" target="_blank">Nicco Mele</a></h3>
                <p>Entrepreneur &amp; Faculty, Harvard University - Kennedy School of Government</p>
              </div>
            </li>
            <li>
              <div class="avatar">
                <%= image_tag('splash_avatars/tom_steinberg.jpg', class: 'avatar') %>
              </div>
              <div class="person-info">
                <h3><a href="https://twitter.com/steiny" target="_blank">Tom Steinberg</a></h3>
                <p>Director, <a href="http://www.mysociety.org/">mySociety</a> (UK); <a href="http://www.theyworkforyou.com/">TheyWorkForYou</a></p>
              </div>
            </li>
                   <li>
              <div class="avatar">
                 <%= image_tag('splash_avatars/anthea_strong.jpg', class: 'avatar') %>
              </div>
              <div class="person-info">
                <h3><a href="https://twitter.com/antheaws" target="_blank">Anthea Watson Strong</a></h3>
                <p>Placeholder lorem ipsum blah blah blah</p>
              </div>
            </li>
                   <li>
              <div class="avatar">
                <%= image_tag('splash_avatars/susannah_vila.jpg', class: 'avatar') %>
              </div>
              <div class="person-info">
                <h3><a href="https://twitter.com/_svila" target="_blank">Susannah Vila</a></h3>
                <p>Placeholder lorem ipsum blah blah blah</p>
              </div>
            </li>
                   <li>
              <div class="avatar">
                 <%= image_tag('splash_avatars/amanda_michel.jpg', class: 'avatar') %>
              </div>
              <div class="person-info">
                <h3><a href="https://twitter.com/amichel" target="_blank">Amanda Michel</a></h3>
                <p>Placeholder lorem ipsum blah blah blah</p>
              </div>
            </li>
                   <li>
              <div class="avatar">
                <%= image_tag('splash_avatars/david_karpf.jpg', class: 'avatar') %>
              </div>
              <div class="person-info">
                <h3><a href="http://davidkarpf.com/" target="_blank">David Karpf</a></h3>
                <p>Placeholder lorem ipsum blah blah blah</p>
              </div>
            </li>
          </ul>
            <h4>AskThem Team</h4>
              <ul>
                <li>
                  <div class="avatar">
                    <img alt="David_moore" class="avatar" src="assets/splash_avatars/david_moore-431a0064feaf2b9c71d888570856a191.jpg" />
                  </div>
                  <div class="person-info">
                    <h3><a href="https://twitter.com/ppolitics" target="_blank">David Moore</a></h3>
                    <p>Program Director; Director, <a href="http://www.opencongress.org/">OpenCongress.org</a>.</p>
                  </div>
                </li>
                    <li>
                      <div class="avatar">
                        <img alt="Walter_mcginnis" class="avatar" src="assets/splash_avatars/walter_mcginnis-0884b4a0157fd2025b37f487a58cc8f4.jpg" />
                      </div>
                      <div class="person-info">
                        <h3><a href="https://twitter.com/wtem" target="_blank">Walter McGinnis</a></h3>
                        <p>Technical Director; original developer of <a href="http://old.kete.net.nz/">Kete</a>.</p>
                      </div>
                    </li>
                     <li>
                          <div class="avatar">
                            <img alt="Steven_trevathan" class="avatar" src="assets/splash_avatars/steven_trevathan-acb47f95d53ce1080b87c28d0570bf1a.jpg" />
                          </div>
                          <div class="person-info">
                            <h3><a href="http://www.stevetrevathan.com/" target="_blank">Steven Trevathan</a></h3>
                            <p>Web Developer &amp; User Experience; Creative Director, <a href="http://dockyard.com/">DockYard</a>.</p>
                          </div>
                        </li>
                             <li>
                                  <div class="avatar">
                                    <img alt="Josh_segall" class="avatar" src="assets/splash_avatars/josh_segall-b8e59defd2194a40046547acf86fe1a6.jpg" />
                                  </div>
                                  <div class="person-info">
                                    <h3><a href="http://en.wikipedia.org/wiki/Joshua_Segall" target="_blank">Joshua Segall</a></h3>
                                    <p>Partnerships Director; Outreach, Elected Officials &amp; Media.</p>
                                  </div>
                                </li>
                                     <li>
                                          <div class="avatar">
                                            <img alt="Maryam_gunja" class="avatar" src="assets/splash_avatars/maryam_gunja-fe1b2d1db68428f58a3f74a9e3bd36a0.jpg" />
                                          </div>
                                          <div class="person-info">
                                            <h3><a href="https://twitter.com/maryamgunja" target="_blank">Maryam Gunja</a></h3>
                                            <p>Researcher &amp; Outreach Assistant; Community Manager.</p>
                                          </div>
                                        </li>
          </ul>
          <h4 class="splash-team">More AskThem Team</h4>
          <h3><a href="https://twitter.com/derekeder">Derek Eder</a> &amp; <a href="https://twitter.com/evanzanten">Eric van Zanten</a>, <a href="http://datamade.us/">DataMade</a>.</h3><br>
          <h3><a href="https://twitter.com/LoganFaerber">Logan Faerber</a> &amp; <a href="http://dockyard.com/team#cheung">Amanda Cheung</a>, <a href="http://dockyard.com/">DockYard</a>.</h3><br>
          <h3><a href="https://twitter.com/mckinneyjames">James McKinney</a> &amp; <a href="https://twitter.com/elliemarshall">Ellie Marshall</a>, <a href="http://opennorth.ca/">OpenNorth</a></h3><br>
          <h3><a href="https://twitter.com/philipashlock">Phil Ashlock</a>, <a href="http://www.democracymap.org/">DemocracyMap</a></h3><br>
          <h3>Knight Foundation, Tech 4 Engagement program page for <a href="http://www.knightfoundation.org/grants/20121704/">OpenGovernment.org</a></h3>
        </div>
      <div class="clear"></div>
      </div>
    </div>
  </section>
  <div class="shade_pos">
    <div class="shade"></div>
  </div>
  <script type="text/javascript">
    function newsSignUpHeight(){
      var wheight = window.innerHeight;
      elem = document.getElementById('news_signup');
      var newPad = ((wheight - elem.offsetHeight)/2) - 50;
      elem.style.paddingTop = newPad + 'px';
      elem.style.paddingBottom = newPad + 'px';
      document.getElementById('content_body').style.opacity = 0;
    }
    if (document.body.clientWidth > 420){
      newsSignUpHeight();
    }
  </script>
  <%= javascript_include_tag 'application' %>

  <script type="text/javascript">
    if($(document).width() > 420){
      $(window).resize(function(){
        var wheight = window.innerHeight;
        elem = $('#news_signup');
        var newPad = ((wheight - elem.height())/2) - 115;
        $(elem).css('paddingTop', newPad);
        $(elem).css('paddingBottom', newPad);
      });

      didScroll = false;

      $(window).scroll(function(){
          didScroll = true;
      });

      var oldLeft = $('a.logo').css('left');
      var topSet = 395;

      setInterval(function(){
          if( didScroll ) {
              scrollPoint = $(window).scrollTop();

              scrollBG = 160 - (scrollPoint * .09) + '%';
              pAlpha = 1 - (scrollPoint * .005);
              cAlpha = 0 + (scrollPoint * .0025);

              if (160 - (scrollPoint * .05) < 160){
                scrollBG = '100%';
              }

              $('body.splash').css('background-position', '50% ' + scrollBG + '');
              $('header.main div.rightCol p').fadeTo(0, pAlpha);
              $('header.main div.leftCol, .scroll_content.below').fadeTo(0, pAlpha);

              $('section#content_body, .scroll_content.above').fadeTo(0, cAlpha);

              if ($('.content_body.header h2').offset().top <= scrollPoint + 120 && !$('a.logo').hasClass('stick')){
                $('a.logo').css({
                  'position': 'absolute',
                  'left': 0,
                  'top': topSet
                }).addClass('stick');
              }else{
                if ($('.content_body.header h2').offset().top >= scrollPoint + 120){
                  $('a.logo').css({
                    'position': 'relative',
                    'left': oldLeft,
                    'top': 'auto'
                  }).removeClass('stick');
                }
              }

              didScroll = false;
          }
      }, 50);
    }
  </script>

  <script type="text/javascript">
    $('.show_below').click(function(e){
      e.preventDefault();
      $('html, body').animate({
        scrollTop: $("#content_body").offset().top - 80
      }, 1000);
    });
  </script>

  <script type="text/javascript">
    $('.show_above').click(function(e) {
      e.preventDefault();
      $('html, body').animate({
        scrollTop: 0
      }, 1000);
    });
  </script>

  <script type="text/javascript">
    $('.splash .level li').click(function(){
      $('.splash .level li').removeClass('active');
      var $this = $(this);
      $this.addClass('active');
      $('#notify_type').val($this.data('type'));
    });
  </script>

  <script type="text/javascript">
    $("#individual-signup").click(function(e) {
      $("#dynamic-title").html("The &quot;We The People&quot; for every elected official.");
      $("#dynamic-subtitle").html("Get notified and be the first to submit a question when we launch.");
      $("#dynamic-text").html("Over 8 million people have taken action on the White House\'s \"We The People\" petition platform. Now it's not just for Presidents anymore. We're bringing it nationwide, free and open for everyone.<br><br>Ask questions to over 100,000 elected officials. Petition your local government. Also, question and petition any verified Twitter account.");
      $("#dynamic-button").val("Notify Me");
      $("#dynamic-link").html("");
      e.preventDefault();
    })

    $("#official-signup").click(function(e) {
      $("#dynamic-title").html("A New &amp; Powerful Way To Engage With Constituents");
      $("#dynamic-subtitle").html("Interested in joining? Enter your contact info and we'll be in touch.");
      $("#dynamic-text").html("AskThem is your personal question-and-answer site, offering greater access to your constituents and your potential supporters across the nation.<br><br>Agree to respond publicly to any question with enough votes to meet your signature threshold. Energize constituents and build support for your positions.");
      $("#dynamic-link").html("<a href='https://docs.google.com/forms/d/1iCRzEuDL6bGEkmMsTVrlH-DlQYnMX4KhSF32_tPgT8o/viewform' style='position: relative; top: 1.75em; left: 1em;'>Or, <strong>sign up now</strong> to answer questions on AskThem</a>");
      $("#dynamic-button").val("Contact Me");
      e.preventDefault();
    })

    $("#organization-signup").click(function(e) {
      $("#dynamic-title").html("The &quot;We The People&quot; for every elected official.");
      $("#dynamic-subtitle").html("Get notified and be the first to submit a question when we launch.");
      $("#dynamic-text").html("Over 8 million people have taken action on the White House\'s \"We The People\" petition platform. Now it's not just for Presidents anymore. We're bringing it nationwide, free and open for everyone.<br><br>Ask questions to over 100,000 elected officials. Petition your local government. Also, question and petition any verified Twitter account.");
      $("#dynamic-button").val("Notify Me");
      $("#dynamic-link").html("");
      e.preventDefault();
    })
  </script>
  <%= render "shared/google_analytics" %>
</body>