templates/index.html.twig line 1

Open in your IDE?
  1. {% extends "base.html.twig" %}
  3. {% block stylesheets %}
  4. <style>
  5. .counter-sec{
  6.   padding: 80px 0;
  7.   width: 100%;
  8.   background: #131416;
  9.   position: absolute;
  10.   top: 50%;
  11.   width: 100%;
  12.   transform: translateY(-50%);
  13. }
  14. .num{
  15.   font-size: 40px;
  16.   margin: 20px 0;
  17. }
  18. .box{
  19.   flex: 1;
  20.   text-align: center;
  21.   padding: 20px;
  22.   color: #000;
  23.   text-transform: uppercase;
  24. }
  25. .box i{
  26.   font-size: 40px;
  27.   color: #333;
  28. }
  29. </style>
  30. {% endblock %}
  31. {% block body %}
  32. {% for message in app.flashes('success') %}
  33.     <div class="alert alert-success">
  34.         {{ message }}
  35.     </div>
  36. {% endfor %}
  37.     <div class="row" style="background-color:white">
  38.         <div class="col-lg-4"><img src="{{ asset('assets/images/logo-eurcaw.jpg') }}" style="width:100%"></div>
  39.         <div class="col-lg-8" style="padding-right:50px;">
  40.         <center><h2>EURCAW -<i> Ruminants & Equines</i></h2></center>
  41.             <p style="text-align:justify">Welcome to the database of experts listed for the European Reference Centre for Animal Welfare - Ruminants and Equines !<br /><br />
  42. The centre is mandated by the European Commission and is co-led by SLU (coordinator), UCD, BOKU, ELGO-VRI, INRAE and IZSAM.<br /><br />
  43. You can only register if the administrators have previously added your email to the database. Once your account is created (“Login” > “Create an account”), please log in and then modify your personal information and your skills/expertise in your profile (“<i class="fa fa-user"></i> My account” in the  menu). Don’t forget to save your changes.<br /><br />
  44. We encourage you to be as precise as possible when describing your skills/expertise per species. Please use the “All species” category as a last resort. “General skills” independent of the species are listed separately.<br /><br />
  45. You can update your information at any time by logging into your account. Reminders to update it will be sent from time to time (maximum once a year).<br /><br />
  46. The data are stored by INRAE (French National Institute for Research on Food, Agriculture and the Environment). The information will only be used for the purposes of EURCAW-<i> Ruminants & Equines</i> activities.To know how your data is processed, to exercise your right of withdrawal or for any suggestions or technical problems, please <a href="{{ path ('contact') }}">contact us</a>.</p>
  47.         </div>
  48.         {# <div class="col-lg-3">
  49.             <center><strong>Experts by countries</strong>
  50.             {{ dataCountries|raw }}
  51.         </div> #}
  52.     </div>
  53.     <div class="row">
  54.     <div class="col-md-12">
  55.         <section class="panel panel-primary">
  56.             <header class="panel-heading">
  57.                 <div class="panel-actions">
  58.                     <a href="#" class="fa fa-caret-down"></a>
  59.                     <a href="#" class="fa fa-times"></a>
  60.                 </div>
  61.                 <h2 class="panel-title">Experts</h2>
  62.             </header>
  63.             <div class="panel-body">
  64.                 <div class="row">
  65.                     <div class="col-md-4">
  66.                         <div class="counter">
  67.                             <div class="box">
  68.                                 <i class="fas fa-users"></i>
  69.                                 <div class="num">{{ entitiesExperts|length }}</div>
  70.                                 Experts
  71.                             </div>
  72.                         </div>
  73.                     </div>
  74.                     <div class="col-md-4">
  75.                         <div class="counter">
  76.                             <div class="box">
  77.                                 <i class="fas fa-earth-americas"></i>
  78.                                 <div class="num">{{ nbCountries }}</div>
  79.                                 Countries
  80.                             </div>
  81.                         </div>
  82.                     </div>
  83.                     <div class="col-md-4">
  84.                         <div class="counter">
  85.                             <div class="box">
  86.                                 <i class="fas fa-cow"></i>
  87.                                 <div class="num">{{ entitiesSpecies|length }}</div>
  88.                                 Species
  89.                             </div>
  90.                         </div>
  91.                     </div>
  92.                 </div>
  93.             </div>
  94.         </section>
  95.     </div>
  97.     <div class="row">
  98.         <div class="col-md-12">
  99.             <section class="panel">
  100.                 <header class="panel-heading">
  101.                     <div class="panel-actions">
  102.                         <a href="#" class="fa fa-caret-down"></a>
  103.                         <a href="#" class="fa fa-times"></a>
  104.                     </div>
  105.                     <h2 class="panel-title">Informations</h2>
  106.                 </header>
  107.                 <div class="panel-body">
  108.                     <div class="row">
  109.                         <div class="col-lg-6">
  110.                             <center><strong>Experts by countries</strong>
  111.                             <div style="width:60%">{{ dataCountries|raw }}</div>
  112.                         </div>
  113.                         <div class="col-lg-6">
  114.                             <center><strong>Experts by Species</strong>
  115.                             <div style="width:60%">{{ dataGS|raw }}</div>
  116.                         </div>
  117.                     </div>
  118.                 </div>
  119.                 
  120.             </section>
  121.         </div>
  122.     </div>
  123. {% endblock %}
  124. {% block javascripts %}
  125.   <script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.min.js"></script>
  126.   <script src="https://cdnjs.cloudflare.com/ajax/libs/Counter-Up/1.0.0/jquery.counterup.min.js"></script>
  127.   <script>
  128.   $(document).ready(function(){
  129.     $('.num').counterUp({
  130.       time: 1200
  131.     });
  132.   });
  133.   </script>
  134. {% endblock %}