<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>{{myTitle}}</title>
<!-- Bootstrap Core CSS -->
<link href="{{ asset( baseDir ~ '/css/bootstrap.min.css') }}" rel="stylesheet">
<!-- Custom Fonts -->
<link href="{{ asset( baseDir ~ '/css/font-awesome.css') }}" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
<!-- Theme CSS -->
{#
<link href="{{ asset( '/css/grayscale.css') }}" rel="stylesheet" type="text/css">
<link href="{{ asset( '/css/vca.css') }}" rel="stylesheet">
#}
<link href="{{ asset( baseDir ~ '/css/prettyPhoto.css') }}" rel="stylesheet" type="text/css">
<!--animation-->
<link href="{{ asset( baseDir ~ '/css/animate.css') }}" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="{{ asset( baseDir ~ 'css/homepage.css') }}" type="text/css">
<!--slider-->
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">
<!-- Intro Header -->
<header class="xintro">
<div class="intro-body">
<div class="container">
<!--<div class="row">
<div class="col-md-8 col-md-offset-2">
<h1 class="brand-heading">DATA4C</h1>
<p class="intro-text" style="background-color: rgba(128, 128, 128, 0.32);">Accès aux bases de données sur le carbone des sols du Cirad</p>
<a href="#about" class="btn btn-circle page-scroll">
<i class="fa fa-angle-double-down animated"></i>
</a>
</div>
</div>-->
</div>
</div>
</header>
<script src="{{ asset( baseDir ~ '/js/jquery/jquery.js') }}"></script>
<!-- Bootstrap Core JavaScript -->
<script src="{{ asset( baseDir ~ '/js/bootstrap/bootstrap.min.js') }}"></script>
<!-- Plugin JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<script type="text/javascript" src="https://canvasjs.com/assets/script/jquery.canvasjs.min.js"></script>
<!-- Google Maps API Key - Use your own API key to enable the map feature. More information on the Google Maps API can be found at https://developers.google.com/maps/ -->
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCy8qyJpXJJw68DxxWJn4WuPWwBdGWnoi4"></script>
<!--slider-->
<script src="{{ asset( baseDir ~ '/js/jquery.prettyPhoto.js') }}"></script>
<script src="{{ asset( baseDir ~ '/js/animate.js') }}"></script>
{% block body %} {% endblock %}
<!-- Footer -->
<footer>
<!-- Contact Section -->
<section id="contact" class="text-center" style="opacity:0;">
<div class="row content-section">
<div class="col-lg-6">
<h2 id="titleContact">Contact</h2>
<div id="contentContact">
<p>Contact: <a href="mailto:[email protected]">[email protected]</a></p>
<br>
<!--<ul class="list-inline banner-social-buttons">
<li>
<img src="{{ asset( baseDir ~ '/img/Cirad.jpg') }}"/>
</li>
</ul>-->
</div>
</div>
<div class="col-lg-6" id="map-container">
<img src="{{ asset( baseDir ~ '/img/fair.jpg') }}" style="width:300px;"/>
</div>
<div id="copyright" class="row text-center col-lg-12">
<img src="{{ asset( baseDir ~ 'img/214.jpg') }}" style="width:500px;"/>
<p>Copyright © CIRAD {{ "now"|date("Y") }}</p>
</div>
</div>
</section>
</footer>
<script src="{{ asset( baseDir ~ '/js/grayscale.min.js') }}"></script>
<script>
/**
* author Christopher Blum
* - based on the idea of Remy Sharp, http://remysharp.com/2009/01/26/element-in-view-event-plugin/
* - forked from http://github.com/zuk/jquery.inview/
*/
(function (factory) {
if (typeof define == 'function' && define.amd) {
// AMD
define(['jquery'], factory);
} else if (typeof exports === 'object') {
// Node, CommonJS
module.exports = factory(require('jquery'));
} else {
// Browser globals
factory(jQuery);
}
}(function ($) {
var inviewObjects = [], viewportSize, viewportOffset,
d = document, w = window, documentElement = d.documentElement, timer;
$.event.special.inview = {
add: function(data) {
inviewObjects.push({ data: data, $element: $(this), element: this });
// Use setInterval in order to also make sure this captures elements within
// "overflow:scroll" elements or elements that appeared in the dom tree due to
// dom manipulation and reflow
// old: $(window).scroll(checkInView);
//
// By the way, iOS (iPad, iPhone, ...) seems to not execute, or at least delays
// intervals while the user scrolls. Therefore the inview event might fire a bit late there
//
// Don't waste cycles with an interval until we get at least one element that
// has bound to the inview event.
if (!timer && inviewObjects.length) {
timer = setInterval(checkInView, 250);
}
},
remove: function(data) {
for (var i=0; i<inviewObjects.length; i++) {
var inviewObject = inviewObjects[i];
if (inviewObject.element === this && inviewObject.data.guid === data.guid) {
inviewObjects.splice(i, 1);
break;
}
}
// Clear interval when we no longer have any elements listening
if (!inviewObjects.length) {
clearInterval(timer);
timer = null;
}
}
};
function getViewportSize() {
var mode, domObject, size = { height: w.innerHeight, width: w.innerWidth };
// if this is correct then return it. iPad has compat Mode, so will
// go into check clientHeight/clientWidth (which has the wrong value).
if (!size.height) {
mode = d.compatMode;
if (mode || !$.support.boxModel) { // IE, Gecko
domObject = mode === 'CSS1Compat' ?
documentElement : // Standards
d.body; // Quirks
size = {
height: domObject.clientHeight,
width: domObject.clientWidth
};
}
}
return size;
}
function getViewportOffset() {
return {
top: w.pageYOffset || documentElement.scrollTop || d.body.scrollTop,
left: w.pageXOffset || documentElement.scrollLeft || d.body.scrollLeft
};
}
function checkInView() {
if (!inviewObjects.length) {
return;
}
var i = 0, $elements = $.map(inviewObjects, function(inviewObject) {
var selector = inviewObject.data.selector,
$element = inviewObject.$element;
return selector ? $element.find(selector) : $element;
});
viewportSize = viewportSize || getViewportSize();
viewportOffset = viewportOffset || getViewportOffset();
for (; i<inviewObjects.length; i++) {
// Ignore elements that are not in the DOM tree
if (!$.contains(documentElement, $elements[i][0])) {
continue;
}
var $element = $($elements[i]),
elementSize = { height: $element[0].offsetHeight, width: $element[0].offsetWidth },
elementOffset = $element.offset(),
inView = $element.data('inview');
// Don't ask me why because I haven't figured out yet:
// viewportOffset and viewportSize are sometimes suddenly null in Firefox 5.
// Even though it sounds weird:
// It seems that the execution of this function is interferred by the onresize/onscroll event
// where viewportOffset and viewportSize are unset
if (!viewportOffset || !viewportSize) {
return;
}
if (elementOffset.top + elementSize.height > viewportOffset.top &&
elementOffset.top < viewportOffset.top + viewportSize.height &&
elementOffset.left + elementSize.width > viewportOffset.left &&
elementOffset.left < viewportOffset.left + viewportSize.width) {
if (!inView) {
$element.data('inview', true).trigger('inview', [true]);
}
} else if (inView) {
$element.data('inview', false).trigger('inview', [false]);
}
}
}
$(w).on("scroll resize scrollstop", function() {
viewportSize = viewportOffset = null;
});
// IE < 9 scrolls to focused elements without firing the "scroll" event
if (!documentElement.addEventListener && documentElement.attachEvent) {
documentElement.attachEvent("onfocusin", function() {
viewportOffset = null;
});
}
}));
</script>
<script>
$("#test").one("inview", function(isVisible) {
// Event is triggered once the element becomes visible in the browser's viewport, and once when it becomes invisible
if (isVisible) {
// element is now visible in the viewport
$('.count').each(function() {
$(this).prop('Counter', 0).animate({
Counter: $(this).text()
}, {
duration: 2000,
easing: 'swing',
step: function(now) {
$(this).text(Number(Math.ceil(now)).toLocaleString());
}
});
});
} else {
}
});
$("#contentAbout").one("inview", function(isVisible) {
// Event is triggered once the element becomes visible in the browser's viewport, and once when it becomes invisible
if (isVisible) {
// element is now visible in the viewport
$("#titleAbout").removeAttr("style");
$("#titleAbout").addClass("animated fadeInRight");
} else {
}
});
$("#contentAbout").one("inview", function(isVisible) {
// Event is triggered once the element becomes visible in the browser's viewport, and once when it becomes invisible
if (isVisible) {
// element is now visible in the viewport
$("#contentAbout").removeAttr("style");
$("#contentAbout").addClass("animated fadeInLeft");
} else {
}
});
$("#contentContact").one("inview", function(isVisible) {
// Event is triggered once the element becomes visible in the browser's viewport, and once when it becomes invisible
if (isVisible) {
// element is now visible in the viewport
$("#contact").removeAttr("style");
$("#titleContact").addClass("animated fadeIn");
} else {
}
});
$("#contentContact").one("inview", function(isVisible) {
// Event is triggered once the element becomes visible in the browser's viewport, and once when it becomes invisible
if (isVisible) {
// element is now visible in the viewport
$("#contentContact").addClass("animated fadeInUp");
} else {
}
});
</script>
{% block scripts %}
{% endblock %}
</body>
</html>