templates/default/index.html.twig line 1

Open in your IDE?
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="utf-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1">
  7.     <meta name="description" content="">
  8.     <meta name="author" content="">
  9.     <title>{{myTitle}}</title>
  10.     <!-- Bootstrap Core CSS -->
  11.     <link href="{{ asset( baseDir ~ '/css/bootstrap.min.css') }}" rel="stylesheet">
  12.     <!-- Custom Fonts -->
  13.     <link href="{{ asset( baseDir ~ '/css/font-awesome.css') }}" rel="stylesheet" type="text/css">
  14.     <link href="https://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic" rel="stylesheet" type="text/css">
  15.     <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
  16.     <!-- Theme CSS -->
  17.     {#
  18.     <link href="{{ asset( '/css/grayscale.css') }}" rel="stylesheet" type="text/css">
  19.     <link href="{{ asset( '/css/vca.css') }}" rel="stylesheet">
  20.     #}
  21.     <link href="{{ asset( baseDir ~ '/css/prettyPhoto.css') }}" rel="stylesheet" type="text/css">
  22.     <!--animation-->
  23.     <link href="{{ asset( baseDir ~ '/css/animate.css') }}" rel="stylesheet" type="text/css">
  24.     <link rel="stylesheet" href="{{ asset( baseDir ~ 'css/homepage.css') }}" type="text/css">
  25.     <!--slider-->
  26.     <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
  27.     <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  28.     <!--[if lt IE 9]>
  29.         <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  30.         <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
  31.     <![endif]-->
  32. </head>
  33. <body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">
  34.     <!-- Intro Header -->
  35.     <header class="xintro">
  36.         <div class="intro-body">
  37.             <div class="container">
  38.                 <!--<div class="row">
  39.                     <div class="col-md-8 col-md-offset-2">
  40.                         <h1 class="brand-heading">DATA4C</h1>
  41.                         <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>
  42.                         <a href="#about" class="btn btn-circle page-scroll">
  43.                             <i class="fa fa-angle-double-down animated"></i>
  44.                         </a>
  45.                         
  46.                     </div>
  47.                 </div>-->
  48.             </div>
  49.         </div>
  50.     </header>
  51.     <script src="{{ asset( baseDir ~ '/js/jquery/jquery.js') }}"></script>
  52.     <!-- Bootstrap Core JavaScript -->
  53.     <script src="{{ asset( baseDir ~ '/js/bootstrap/bootstrap.min.js') }}"></script>
  54.     <!-- Plugin JavaScript -->
  55.     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
  56.     <script type="text/javascript" src="https://canvasjs.com/assets/script/jquery.canvasjs.min.js"></script>
  57.     <!-- 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/ -->
  58.     <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCy8qyJpXJJw68DxxWJn4WuPWwBdGWnoi4"></script>
  59.     <!--slider-->
  60.     <script src="{{ asset( baseDir ~ '/js/jquery.prettyPhoto.js') }}"></script>
  61.     <script src="{{ asset( baseDir ~ '/js/animate.js') }}"></script>
  62.     {% block body %} {% endblock %}
  63.     <!-- Footer -->
  64.     <footer>
  65.         <!-- Contact Section -->
  66.         <section id="contact" class="text-center"  style="opacity:0;">
  67.             <div class="row content-section">
  68.                 <div class="col-lg-6">
  69.                     <h2 id="titleContact">Contact</h2>
  70.                     <div id="contentContact">
  71.                         <p>Contact: <a href="mailto:[email protected]">[email protected]</a></p>
  72.                         <br>
  73.                         <!--<ul class="list-inline banner-social-buttons">
  74.                             <li>
  75.                                 <img src="{{ asset( baseDir ~ '/img/Cirad.jpg') }}"/>
  76.                             </li>
  77.                         </ul>-->
  78.                     </div>
  79.                 </div>
  80.                 <div class="col-lg-6" id="map-container">
  81.                     
  82.                     <img src="{{ asset( baseDir ~ '/img/fair.jpg') }}" style="width:300px;"/>
  83.                 </div>
  84.                 <div id="copyright" class="row text-center col-lg-12">
  85.                     <img src="{{ asset( baseDir ~ 'img/214.jpg') }}" style="width:500px;"/>
  86.                     <p>Copyright &copy; CIRAD {{ "now"|date("Y") }}</p>
  87.                 </div>
  88.             </div>
  89.         </section>
  90.     </footer>
  91.     <script src="{{ asset( baseDir ~ '/js/grayscale.min.js') }}"></script>
  92.     <script>
  93.         /**
  94.          * author Christopher Blum
  95.          *    - based on the idea of Remy Sharp, http://remysharp.com/2009/01/26/element-in-view-event-plugin/
  96.          *    - forked from http://github.com/zuk/jquery.inview/
  97.          */
  98.         (function (factory) {
  99.             if (typeof define == 'function' && define.amd) {
  100.                 // AMD
  101.                 define(['jquery'], factory);
  102.             } else if (typeof exports === 'object') {
  103.                 // Node, CommonJS
  104.                 module.exports = factory(require('jquery'));
  105.             } else {
  106.                 // Browser globals
  107.                 factory(jQuery);
  108.             }
  109.         }(function ($) {
  110.             var inviewObjects = [], viewportSize, viewportOffset,
  111.                 d = document, w = window, documentElement = d.documentElement, timer;
  112.             $.event.special.inview = {
  113.                 add: function(data) {
  114.                     inviewObjects.push({ data: data, $element: $(this), element: this });
  115.                     // Use setInterval in order to also make sure this captures elements within
  116.                     // "overflow:scroll" elements or elements that appeared in the dom tree due to
  117.                     // dom manipulation and reflow
  118.                     // old: $(window).scroll(checkInView);
  119.                     //
  120.                     // By the way, iOS (iPad, iPhone, ...) seems to not execute, or at least delays
  121.                     // intervals while the user scrolls. Therefore the inview event might fire a bit late there
  122.                     //
  123.                     // Don't waste cycles with an interval until we get at least one element that
  124.                     // has bound to the inview event.
  125.                     if (!timer && inviewObjects.length) {
  126.                         timer = setInterval(checkInView, 250);
  127.                     }
  128.                 },
  129.                 remove: function(data) {
  130.                     for (var i=0; i<inviewObjects.length; i++) {
  131.                         var inviewObject = inviewObjects[i];
  132.                         if (inviewObject.element === this && inviewObject.data.guid === data.guid) {
  133.                             inviewObjects.splice(i, 1);
  134.                             break;
  135.                         }
  136.                     }
  137.                     // Clear interval when we no longer have any elements listening
  138.                     if (!inviewObjects.length) {
  139.                         clearInterval(timer);
  140.                         timer = null;
  141.                     }
  142.                 }
  143.             };
  144.             function getViewportSize() {
  145.                 var mode, domObject, size = { height: w.innerHeight, width: w.innerWidth };
  146.                 // if this is correct then return it. iPad has compat Mode, so will
  147.                 // go into check clientHeight/clientWidth (which has the wrong value).
  148.                 if (!size.height) {
  149.                     mode = d.compatMode;
  150.                     if (mode || !$.support.boxModel) { // IE, Gecko
  151.                         domObject = mode === 'CSS1Compat' ?
  152.                             documentElement : // Standards
  153.                             d.body; // Quirks
  154.                         size = {
  155.                             height: domObject.clientHeight,
  156.                             width:  domObject.clientWidth
  157.                         };
  158.                     }
  159.                 }
  160.                 return size;
  161.             }
  162.             function getViewportOffset() {
  163.                 return {
  164.                     top:  w.pageYOffset || documentElement.scrollTop   || d.body.scrollTop,
  165.                     left: w.pageXOffset || documentElement.scrollLeft  || d.body.scrollLeft
  166.                 };
  167.             }
  168.             function checkInView() {
  169.                 if (!inviewObjects.length) {
  170.                     return;
  171.                 }
  172.                 var i = 0, $elements = $.map(inviewObjects, function(inviewObject) {
  173.                     var selector  = inviewObject.data.selector,
  174.                         $element  = inviewObject.$element;
  175.                     return selector ? $element.find(selector) : $element;
  176.                 });
  177.                 viewportSize   = viewportSize   || getViewportSize();
  178.                 viewportOffset = viewportOffset || getViewportOffset();
  179.                 for (; i<inviewObjects.length; i++) {
  180.                     // Ignore elements that are not in the DOM tree
  181.                     if (!$.contains(documentElement, $elements[i][0])) {
  182.                         continue;
  183.                     }
  184.                     var $element      = $($elements[i]),
  185.                         elementSize   = { height: $element[0].offsetHeight, width: $element[0].offsetWidth },
  186.                         elementOffset = $element.offset(),
  187.                         inView        = $element.data('inview');
  188.                     // Don't ask me why because I haven't figured out yet:
  189.                     // viewportOffset and viewportSize are sometimes suddenly null in Firefox 5.
  190.                     // Even though it sounds weird:
  191.                     // It seems that the execution of this function is interferred by the onresize/onscroll event
  192.                     // where viewportOffset and viewportSize are unset
  193.                     if (!viewportOffset || !viewportSize) {
  194.                         return;
  195.                     }
  196.                     if (elementOffset.top + elementSize.height > viewportOffset.top &&
  197.                         elementOffset.top < viewportOffset.top + viewportSize.height &&
  198.                         elementOffset.left + elementSize.width > viewportOffset.left &&
  199.                         elementOffset.left < viewportOffset.left + viewportSize.width) {
  200.                         if (!inView) {
  201.                             $element.data('inview', true).trigger('inview', [true]);
  202.                         }
  203.                     } else if (inView) {
  204.                         $element.data('inview', false).trigger('inview', [false]);
  205.                     }
  206.                 }
  207.             }
  208.             $(w).on("scroll resize scrollstop", function() {
  209.                 viewportSize = viewportOffset = null;
  210.             });
  211.             // IE < 9 scrolls to focused elements without firing the "scroll" event
  212.             if (!documentElement.addEventListener && documentElement.attachEvent) {
  213.                 documentElement.attachEvent("onfocusin", function() {
  214.                     viewportOffset = null;
  215.                 });
  216.             }
  217.         }));
  218.     </script>
  219.     <script>
  220.         $("#test").one("inview", function(isVisible) {
  221.             // Event is triggered once the element becomes visible in the browser's viewport, and once when it becomes invisible
  222.             if (isVisible) {
  223.                 // element is now visible in the viewport
  224.                 $('.count').each(function() {
  225.                     $(this).prop('Counter', 0).animate({
  226.                         Counter: $(this).text()
  227.                     }, {
  228.                         duration: 2000,
  229.                         easing: 'swing',
  230.                         step: function(now) {
  231.                             $(this).text(Number(Math.ceil(now)).toLocaleString());
  232.                         }
  233.                     });
  234.                 });
  235.             } else {
  236.             }
  237.         });
  238.         $("#contentAbout").one("inview", function(isVisible) {
  239.             // Event is triggered once the element becomes visible in the browser's viewport, and once when it becomes invisible
  240.             if (isVisible) {
  241.                 // element is now visible in the viewport
  242.                 $("#titleAbout").removeAttr("style");
  243.                 $("#titleAbout").addClass("animated fadeInRight");
  244.             } else {
  245.             }
  246.         });
  247.         $("#contentAbout").one("inview", function(isVisible) {
  248.             // Event is triggered once the element becomes visible in the browser's viewport, and once when it becomes invisible
  249.             if (isVisible) {
  250.                 // element is now visible in the viewport
  251.                 $("#contentAbout").removeAttr("style");
  252.                 $("#contentAbout").addClass("animated fadeInLeft");
  253.             } else {
  254.             }
  255.         });
  256.         $("#contentContact").one("inview", function(isVisible) {
  257.             // Event is triggered once the element becomes visible in the browser's viewport, and once when it becomes invisible
  258.             if (isVisible) {
  259.                 // element is now visible in the viewport
  260.                 $("#contact").removeAttr("style");
  261.                 $("#titleContact").addClass("animated fadeIn");
  262.             } else {
  263.             }
  264.         });
  265.         $("#contentContact").one("inview", function(isVisible) {
  266.             // Event is triggered once the element becomes visible in the browser's viewport, and once when it becomes invisible
  267.             if (isVisible) {
  268.                 // element is now visible in the viewport
  269.                 $("#contentContact").addClass("animated fadeInUp");
  270.             } else {
  271.             }
  272.         });
  273.     </script>
  274.     {% block scripts %}
  275.     {% endblock %}
  276. </body>
  277. </html>