index.html

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <meta property="og:title" content="vota bene!" />
  <meta property="og:type" content="cause" />
  <meta property="og:url" content="http://votabene.herokuapp.com/" />
  <meta property="og:image" content="http://votabene.herokuapp.com/image.png" />
  <meta property="og:description" content="Semplice esplorazione delle radici dei nostri problemi. Oltre la crisi, oltre la retorica, le tracce di questi dieci anni a portata di mouse"/>
  <meta property="og:site_name" content="vota bene!" />
  <meta property="fb:admins" content="liberalogica" />
  <title>Vota bene!</title>
  <link href="http://fonts.googleapis.com/css?family=Lemon" rel="stylesheet" type="text/css">
  <link href="http://fonts.googleapis.com/css?family=Playball" rel="stylesheet" type="text/css">
  <link href="bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css">
  <style>
  	* { margin: 0; }
	html { font-family: Verdana; }
    path {
        stroke-width: 8px;
        fill: none;
        stroke-linecap: round;
        opacity: 0.2;
    }
    path.good { stroke: green; }
    path.bad { stroke: red; }
    path:hover {
        opacity: 1;
        stroke-width: 12px;
    }
    line.elections {
        stroke-dasharray: 1, 20;
        stroke: black;
        stroke-width: 3px;
        stroke-linecap: round;
        opacity: 0.3;
    }
    rect.responsible {
        fill: gray;
        opacity: 0.0;
    }
    rect.responsible:hover {
        opacity: 0.1;
        stroke: black;
        stroke-opacity: 0.7;
        stroke-width: 3px;
        stroke-linecap: round;
    }
    div.container { margin-top: 100px; }
    div#message { text-align: center; }
    div#mainmessage {
        text-transform: uppercase;
        font-family: lemon;
        font-size: 64px;
        height: 64px;
    }
    div#submessage {
        font-family: playball;
        font-size: 18px;
        color: green;
        white-space: pre;
    }
    div#submessage.good {color: green;}
    div#submessage.bad {color: red;}
    div.explaination {
        margin-top: 10px;
        font-family: lemon;
        font-size: 8pt;
        text-align: center;
    }
    #social > * {
        /* Mister google required this importance */
        float: left !important;
        margin: 20px !important;
    }
  </style>
  <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.0.1/d3.v3.min.js "></script>
  <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
  <script type="text/javascript" src="script.js"></script>
  <script type="text/javascript">
  window.onload = function(){ 
      chart = new Chart('div#main');
      chart.load();
  }
  setTimeout(function(){
      $('.explaination').fadeIn(3000);
      // Twitter
      !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
      // Google
      (function() {
        var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
        po.src = 'https://apis.google.com/js/plusone.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
      })();
  }, 7000)
  setTimeout(function(){
     // Disqus
     var disqus_shortname = 'votabene'; // required: replace example with your forum shortname
     (function() {
       var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
       dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
       (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
     })();
  }, 12000)
  </script>
  <!-- Google analytics -->
  <script type="text/javascript">
    var _gaq = _gaq || [];
    _gaq.push(['_setAccount', 'UA-37636784-2']);
    _gaq.push(['_trackPageview']);
    (function() {
      var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
      ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
      var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
    })();
  </script>
</head>
<body>
  <div id="fb-root"></div>
  <script>
    window.fbAsyncInit = function() {
      // init the FB JS SDK
      FB.init({
        appId      : '566072183421967', // App ID from the App Dashboard
        channelUrl : '//votabene.herokuapp.com/channel.html', // Channel File for x-domain communication
        status     : true, // check the login status upon init?
        cookie     : true, // set sessions cookies to allow your server to access the session?
        xfbml      : true  // parse XFBML tags on this page?
      });
    };
    (function(d, debug){
       var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
       if (d.getElementById(id)) {return;}
       js = d.createElement('script'); js.id = id; js.async = true;
       js.src = "//connect.facebook.net/en_US/all" + (debug ? "/debug" : "") + ".js";
       ref.parentNode.insertBefore(js, ref);
     }(document, /*debug*/ false));
  </script>
  <a href="https://github.com/danse/votabene"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png" alt="Fork me on GitHub"></a>
  <div class="container">
    <div id="message">
      <div id="mainmessage">Vota bene!</div>
      <div id="submessage">Andamento di alcuni indici italiani negli ultimi anni</div>
    </div>
    <div id="main"></div>
    <div class="explaination" style="display:none">
      Non c'è solo la crisi! Ecco un elenco di cose che sbagliavamo anche
      prima. Non sempre si ha l'opportunità di cambiare, ora l'abbiamo.
      <br>
      Questo é un progetto aperto, il software é libero e chiunque può
      contribuire. Se vuoi approfondire visita <a target="_blank"
      href="http://danse.github.com/votabene/">il sito github</a>.
      <br>
      Dati a cadenza annuale, fonte <a target="_blank"
      href="http://www.istat.it/it/">ISTAT</a> ed <a target="_blank"
      href="http://ec.europa.eu/eurostat/statistical-atlas/gis/viewer/">EUROSTAT</a>
      <!--[if IE]>
      <br>
      <br>
      Stai usando Internet Explorer! È un programma noto per i suoi molti difetti.
      Questa pagina funziona bene con <a
      href="http://www.google.com/intl/it/chrome/">Chrome</a> o <a
      href="http://www.mozilla.org/it/download/?product=firefox-15.0&os=win&lang=it">Firefox</a>,
      con le vecchie versioni di Internet Explorer potrebbe non funzionare affatto.
      <![endif]-->
      <div id="social">
        <!-- Facebook -->
        <div class="fb-like" data-href="http://votabene.herokuapp.com" data-send="true" data-width="450" data-show-faces="true"></div>
        <!-- Twitter -->
        <a data-url="http://votabene.herokuapp.com" data-hashtags="votabene" href="https://twitter.com/share" class="twitter-share-button" data-lang="en">Tweet</a>
        <!-- Google -->
        <g:plusone size="medium" href="http://votabene.herokuapp.com"></g:plusone>
      </div>
    </div>
    <div id="disqus_thread" style="margin-top: 100px;"></div>
  </div>
  </body>
</html>