<!DOCTYPE html>
<html lang="en" ng-app="app">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <meta name="description" content="">
    <meta name="author" content="Bojan Tešić">

    <meta property="og:url"                content="defacto.me/portfolio/sreca/index.html" />
	<meta property="og:type"               content="article" />
	<meta property="og:title"              content="Koliko smo srećni ove godine?" />
	<meta property="og:description"        content="Pogledajte rezultate ovogodišnje ankete." />
	<meta property="og:image"              content="http://defacto.me/portfolio/sreca/images/fb2016nova-rezultati.png" />  
	<meta property="fb:app_id" content="1430809770570540" />

    <title>Koliko smo srećni?</title>

    <!-- Bootstrap core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="css/costum.css" rel="stylesheet">
    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
    <script src="js/highcharts-ng.js"></script>
    <script src="http://code.highcharts.com/stock/highstock.src.js"></script>
    <script src="app/app.js"></script>
    
  </head>

  <body ng-controller="SrecaStatistika">
  <section class="xmas">

  <div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.5&appId=1430809770570540";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>

    <div class="container"  style="z-index: 8;">
      <div class="row marketing">
        <div class="col-md-12 text-center" style="margin-top:25px; margin-bottom:35px;">
          <div style="margin-bottom: 50px;"><img class="uvodnaslika img-responsive" src="images/naslov.png"></div>
        </div>


		<h4 class="font-naslov1 naslov"></h4>          
              <div ng-show="hvala" class="col-md-12 text-center" style="margin-top:25px; margin-bottom:35px;z-index: 5;">
          <h4 class="font-naslov">Hvala na učestvovanju</h4>          
          <h4 class="font-naslov">Pogledajte trenutne rezultate.</h4>      
			

          
          <div class="text-left">
            <p class="prosjek pull-right">{{srecau2015 | number:2}}</p>
            <p class="font-naslov-pitanja-cist">Koliko ste zadovoljni životom?</p>
			<img class="glava2016" src="images/pahulja.png" style="margin-left: {{sreca2016 | number:0}}%" data-toggle="tooltip" data-placement="top" title="Prosjek za 2016. godinu">			
            <div class="progress">				
              <div class="progress-bar progress-bar-info" style="width: {{sreca2015 | number:0}}%"></div>
            </div>
            <p class="prosjek pull-right">{{srecau12015 | number:2}}</p>
            <p class="font-naslov-pitanja-cist">Koliko ste bili srećni juče?</p> 
			<img class="glava2016" src="images/pahulja.png" style="margin-left: {{sreca12016 | number:0}}%" data-toggle="tooltip" data-placement="top" title="Prosjek za 2016. godinu">			
            <div class="progress">
              <div class="progress-bar progress-bar-success" style="width: {{sreca12015 | number:0}}%"></div>
            </div>
            <p class="prosjek pull-right">{{srecau22015 | number:2}}</p>
            <p class="font-naslov-pitanja-cist">Koliko ste bili nervozni juče?</p>
			<img class="glava2016" src="images/pahulja.png" style="margin-left: {{sreca22016 | number:0}}%" data-toggle="tooltip" data-placement="top" title="Prosjek za 2016. godinu">			
            <div class="progress">
              <div class="progress-bar progress-bar-warning" style="width: {{sreca22015 | number:0}}%"></div>
            </div>
            <p class="prosjek pull-right">{{srecau32015 | number:2}}</p>
            <p class="font-naslov-pitanja-cist">U kojoj mjeri je ono što radite u životu vrijedno?</p>
			<img class="glava2016" src="images/pahulja.png" style="margin-left: {{sreca32016 | number:0}}%" data-toggle="tooltip" data-placement="top" title="Prosjek za 2016. godinu">			
            <div class="progress">
              <div class="progress-bar progress-bar-danger" style="width: {{sreca32015 | number:0}}%"></div>
            </div>  
          </div>
		  <p><img src="images/pahulja.png" style="width: 32px;"> - prosječna ocjena zadovoljstva učesnika online ankete za 2016. godinu </p>
			<p><span class="glyphicon glyphicon-align-left"></span> - rezultati na grafiku predstavljaju prosječnu ocjenu zadovoljstva učesnika online ankete za 2015. godinu</p>
			<h4 class="font-naslov">Srećni praznici!</h4>
            <h4 class="font-naslov">Podjelite:</h4> 

            <div>
              <div class="fb-share-button" data-href="http://defacto.me/portfolio/sreca/" data-layout="button_count"></div>        
              <div style="margin-top:10px;">
              <a href="https://twitter.com/share" class="twitter-share-button"{count} data-via="DeFactoMNE" data-hashtags="sreca" style="margin-top:5px;">Tweet</a>              
              </div>
            </div>
          
        </div>
        </div>

      <!-- <div class="col-md-6">
        <highchart config="chart"></highchart> 
      </div>
      <div class="col-md-6">
        <highchart config="chartdani"></highchart> 
      </div> -->
	  <div ng-hide="RezultateOtkrij">
	  <h4 class="font-naslov1 naslov">Pogledajte rezultate online istraživanja. Odgovore na pitanja je dalo ukupno 158 ispitanika. Prilikom ocjenjivanja, koristili su se skalom od 1 do 10, pri čemu je 1 predstavljalo najnižu, a 10 najvišu vrijednost.</h4>          
	  
      <img class="kapa" src="images/kapa.svg" style="z-index: 5;">
      <div class="col-md-12 kendi-border">
        <p class="font-naslov-pitanja"><span class="pod">Prosječne ocjene zadovoljstva (n=158)</span></p>
        <div class="text-left">
          <p class="prosjek pull-right">{{srecau | number:2}}</p>
          <p class="font-naslov-pitanja-cist">Koliko ste zadovoljni životom?</p>
          <div class="progress">
            <div class="progress-bar progress-bar-info" style="width: {{sreca | number:0}}%"></div>
          </div>
          <p class="prosjek pull-right">{{srecau1 | number:2}}</p>
          <p class="font-naslov-pitanja-cist">Koliko ste bili srećni juče?</p> 

          <div class="progress">
            <div class="progress-bar progress-bar-success" style="width: {{sreca1 | number:0}}%"></div>
          </div>
          <p class="prosjek pull-right">{{srecau2 | number:2}}</p>
          <p class="font-naslov-pitanja-cist">Koliko ste bili nervozni juče?</p>
          <div class="progress">
            <div class="progress-bar progress-bar-warning" style="width: {{sreca2 | number:0}}%"></div>
          </div>
          <p class="prosjek pull-right">{{srecau3 | number:2}}</p>
          <p class="font-naslov-pitanja-cist">U kojoj mjeri je ono što radite u životu vrijedno?</p>
          <div class="progress">
            <div class="progress-bar progress-bar-danger" style="width: {{sreca3 | number:0}}%"></div>
          </div>  
        </div>
            <div id="carousel-example-generic" class="carousel slide cijeli" data-ride="carousel">
              <!-- Wrapper for slides -->
              <div class="carousel-inner" role="listbox">
              <div class="item active">
                <p class="fiju">Učesnici online ankete u velikoj mjeri smatraju da je ono što rade u životu vrijedno.</p>
              </div>
              <div class="item">
                <p class="fiju">U prosjeku je trećina ispitnanika bila više srećna nego nervozna.</p>
              </div>
              <div class="item">
                <p class="fiju">Učesnici online ankete, u prosjeku bolje ocjenjuju generalno zadovoljstvo životom, nego trenutnu sreću.</p>
              </div>              
              </div>
              <!-- Indicators -->
              <ol class="carousel-indicators">
              <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
              <li data-target="#carousel-example-generic" data-slide-to="1"></li>
              <li data-target="#carousel-example-generic" data-slide-to="2"></li>
              </ol>             
            </div>
      </div>
                  

      <div class="col-md-12 kendi-border" style="margin-top: -16px;z-index: 5;">
        <p class="font-naslov-pitanja"><span class="pod">Zadovoljstvo po polu</span></p>
        <highchart config="chart"></highchart> 
                <div id="carousel-example-generic3" class="carousel slide cijeli" data-ride="carousel">
              <!-- Wrapper for slides -->
              <div class="carousel-inner" role="listbox">
              <div class="item active">
                <p class="fiju">Žene pokazuju da su u nešto većem broju srećnije i zadovoljnije životom od muškaraca. </p>
              </div>
              <div class="item">
                <p class="fiju">Svaka deseta žena je u prosjeku ove godine bila srećnija od muškaraca. </p>
              </div>
              <div class="item">
                <p class="fiju">Pokazalo se da su žene manje nervozne od muškaraca. </p>
              </div>
              </div>
              <!-- Indicators -->
              <ol class="carousel-indicators">
              <li data-target="#carousel-example-generic3" data-slide-to="0" class="active"></li>
              <li data-target="#carousel-example-generic3" data-slide-to="1"></li>
              <li data-target="#carousel-example-generic3" data-slide-to="2"></li>
              </ol>             
            </div>
            <img class="snesko" src="images/snesko.svg">
      </div>
	  
	  <div class="col-md-12 kendi-border" style="margin-top: -16px;z-index: 5;">
        <p class="font-naslov-pitanja"><span class="pod">Koliko su zadovoljni zaposleni</span></p>
        <highchart config="chartZaposlenost"></highchart>               
            <img class="pokloni" src="images/pokloni.svg">
      </div>
	  
	  <div class="col-md-12 kendi-border" style="margin-top: -16px;z-index: 5;">
        <p class="font-naslov-pitanja"><span class="pod">Koliko su zadovoljni nezaposleni</span></p>
        <highchart config="chartNeZaposlenost"></highchart> 
                <div id="carousel-example-generic3" class="carousel slide cijeli" data-ride="carousel">
              <!-- Wrapper for slides -->
              <div class="carousel-inner" role="listbox">
              <div class="item active">
                <p class="fiju">Zaposleni muškarci su u prosjeku više nervozni od nezaposlenih.</p>
              </div>
              <div class="item">
                <p class="fiju">Sa druge strane, zaposleni muškarci više smatraju da je ono što rade u životu vrijedno, od nezaposlenih.</p>
              </div>
              <div class="item">
                <p class="fiju">I zaposlene i nezaposlene žene su jednako zadovoljne životom i smatraju da je ono što rade u životu vrijedno.</p>
              </div>
              </div>
              <!-- Indicators -->
              <ol class="carousel-indicators">
              <li data-target="#carousel-example-generic3" data-slide-to="0" class="active"></li>
              <li data-target="#carousel-example-generic3" data-slide-to="1"></li>
              <li data-target="#carousel-example-generic3" data-slide-to="2"></li>
              </ol>             
            </div>
			<img class="nakiti" src="images/nakit.svg">
      </div>


	  </div>
	  


		<div class="col-md-12" style="text-align: center; z-index:2; margin-top: 50px;">
			<img class="logo img-responsive" src="images/logo.png">
			<p style="margin-top: 27px;"><a href="http://www.defacto.me/portfolio" class="btn btn-default" target="_blank">DeFacto portfolio</a></p>
			<p class="tekst-info"><b>Dizajn i kod:</b> <a class="link" href="https://www.facebook.com/bojan.tesic.16" target="_blank">Bojan Tešić</a></p>
			
		</div>



       
    </div>
	<div class="kendi-border-dno">
		<img class="img-responsive" src="images/santa.svg" style="width: 50%;">
	</div>

<!-- Let it snow! -->
  <canvas id="xmas"></canvas>
</div>
</section>
  </body>

  <script>
    

$(document).ready(function(){

  initLetItSnow();
});

// Init Christmas! \o/
var initLetItSnow = function(){

  (function() {
      var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame ||
      function(callback) {
          window.setTimeout(callback, 1000 / 60);
      };
      window.requestAnimationFrame = requestAnimationFrame;
  })();

  var flakes = [],
      canvas = document.getElementById("xmas"),
      ctx = canvas.getContext("2d"),
      mX = -100,
      mY = -100;

      if( $(window).width() < 999 ){
        var flakeCount = 125;
      } else {
        var flakeCount = 450;
      }

      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;

  function snow() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);

      for (var i = 0; i < flakeCount; i++) {
          var flake = flakes[i],
              x = mX,
              y = mY,
              minDist = 250,
              x2 = flake.x,
              y2 = flake.y;

          var dist = Math.sqrt((x2 - x) * (x2 - x) + (y2 - y) * (y2 - y)),
              dx = x2 - x,
              dy = y2 - y;

          if (dist < minDist) {
              var force = minDist / (dist * dist),
                  xcomp = (x - x2) / dist,
                  ycomp = (y - y2) / dist,
                  // deltaV = force / 2;
                  deltaV = force;

              flake.velX -= deltaV * xcomp;
              flake.velY -= deltaV * ycomp;

          } else {
              flake.velX *= .98;
              if (flake.velY <= flake.speed) {
                  flake.velY = flake.speed
              }
              flake.velX += Math.cos(flake.step += .05) * flake.stepSize;
          }

          ctx.fillStyle = "rgba(255,255,255," + flake.opacity + ")";
          flake.y += flake.velY;
          flake.x += flake.velX;
              
          if (flake.y >= canvas.height || flake.y <= 0) {
              reset(flake);
          }

          if (flake.x >= canvas.width || flake.x <= 0) {
              reset(flake);
          }

          ctx.beginPath();
          ctx.arc(flake.x, flake.y, flake.size, 0, Math.PI * 2);
          ctx.fill();
      }
      requestAnimationFrame(snow);
  };

  function reset(flake) {
      flake.x = Math.floor(Math.random() * canvas.width);
      flake.y = 0;
      flake.size = (Math.random() * 3) + 2;
      flake.speed = (Math.random() * 1) + 0.5;
      flake.velY = flake.speed;
      flake.velX = 0;
      flake.opacity = (Math.random() * 0.5) + 0.3;
  }

  function init() {
      for (var i = 0; i < flakeCount; i++) {
          var x = Math.floor(Math.random() * canvas.width),
              y = Math.floor(Math.random() * canvas.height),
              size = (Math.random() * 3) + 4,
              speed = (Math.random() * 1) + 0.5,
              opacity = (Math.random() * 0.5) + 0.3;

          flakes.push({
              speed: speed,
              velY: speed,
              velX: 0,
              x: x,
              y: y,
              size: size,
              stepSize: (Math.random()) / 160,
              step: 0,
              opacity: opacity
          });
      }

      snow();
  };

  canvas.addEventListener("mousemove", function(e) {
      mX = e.clientX,
      mY = e.clientY
  });

  window.addEventListener("resize",function(){
      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;
  })

  init();
};

  </script>
</html>
