src/views/headers/_index.twig line 1

Open in your IDE?
  1. {% import 'utility/_macros.twig' as macros %}
  3. {{ macros.langswitch() }}
  4. {{ macros.mobilesearch() }}
  5.  <div>
  6.  <!-- Carousel -->
  7. <div id="demo" class="carousel slide" data-bs-ride="carousel">
  9.   <!-- Indicators/dots -->
  10.   <div class="carousel-indicators">
  11.     <button type="button" data-bs-target="#demo" data-bs-slide-to="0" class="active"></button>
  12.     <button type="button" data-bs-target="#demo" data-bs-slide-to="1"></button>
  13.     <button type="button" data-bs-target="#demo" data-bs-slide-to="2"></button>
  14.   </div>
  15.   
  16.   <!-- The slideshow/carousel -->
  18.   <div id="bannerCarousel" class="carousel slide" data-ride="carousel">
  19.     <div class="carousel-inner">
  20.         {% for banner in data.banners %}
  21.             <div class="carousel-item {% if loop.first %}active{% endif %}">
  22.                 <div class="row carousel_item_bg">
  23.                     <div class="col-xl-11 col-lg-11 col-md-11 col-sm-12 m-auto">
  24.                         <div class="row">
  25.                             <div class="col-xl-5 col-lg-5 col-md-5 col-sm-12 order-last text-center">
  26.                                 <div class="carousel_img">
  27.                                     <img src="{{ asset('uploads/banners/' ~ banner.cover) }}" alt="{{ banner.title }}" class="d-block" style="width:70%;">
  28.                                 </div>
  29.                             </div>
  30.                             <div class="col-xl-7 col-lg-7 col-md-7 col-sm-12">
  31.                                 <div class="carousel_item_text">
  32.                                     <h2 class="text-bold">{{ banner.title }}</h2>
  33.                                     <p class="text-muted">{{ banner.description }}</p>
  34.                                    {# <a class="btn btn-warning rounded-5 mt-4" href="#" style="width: 135px;">{{ 'home.readmore'|trans }} <img style="height: 10px;" src="./assets/images/long-arrow.png" alt="long-arrow"></a>#}
  35.                                 </div>
  36.                             </div>
  37.                         </div>
  38.                     </div>
  39.                 </div>
  40.             </div>
  41.         {% else %}
  42.             <div class="carousel-item active">
  43.                 <div class="row carousel_item_bg">
  44.                     <div class="col-xl-11 col-lg-11 col-md-11 col-sm-12 m-auto">
  45.                         <div class="row">
  46.                             <div class="col-xl-12 text-center">
  47.                                 <h2>No banners available at the moment.</h2>
  48.                             </div>
  49.                         </div>
  50.                     </div>
  51.                 </div>
  52.             </div>
  53.         {% endfor %}
  54.     </div>
  55.     <a class="carousel-control-prev" href="#bannerCarousel" role="button" data-slide="prev">
  56.         <span class="carousel-control-prev-icon" aria-hidden="true"></span>
  57.         <span class="sr-only">Previous</span>
  58.     </a>
  59.     <a class="carousel-control-next" href="#bannerCarousel" role="button" data-slide="next">
  60.         <span class="carousel-control-next-icon" aria-hidden="true"></span>
  61.         <span class="sr-only">Next</span>
  62.     </a>
  63. </div>
  64.     {#<div class="carousel-item ">
  65.       <div class="row carousel_item_bg">
  66.           <div class="col-xl-11 col-lg-11 col-md-11 col-sm-12 m-auto">
  67.               <div class="row">
  68.                 <div class="col-xl-5 col-lg-5 col-md-5 col-sm-12 order-last">
  69.                    <div class="carousel_img">
  70.                   <img src="./assets/images/banner_2.png" alt="Banner_2" class="d-block" style="width:70%;">
  71.                     </div>
  72.                 </div>
  73.                 <div class="col-xl-7 col-lg-7 col-md-7 col-sm-12">
  74.                 <div class="carousel_item_text">
  75.                   <h2 class="text-bold">{{ 'home.hbanner5'|trans }}, <br>
  76.           {{ 'home.hbanner6'|trans }} <br>{{ 'home.hbanner8'|trans }}</h2>
  77.               <p class="text-muted">
  78.                 {{ 'home.hbanner7'|trans }}
  79.                     </p>
  80.                     <a class="btn btn-warning rounded-5 mt-4" href="#" style="width: 135px;">{{ 'home.readmore'|trans }} <img style="height: 10px;" src="./assets/images/long-arrow.png" alt="long-arrow"></a>
  81.                     </div>
  82.                 </div>
  83.                 </div>
  84.                 
  85.             </div>
  86.         </div>
  87.     </div>
  88.     <div class="carousel-item ">
  89.       <div class="row carousel_item_bg">
  90.           <div class="col-xl-11 col-lg-11 col-md-11 col-sm-12 m-auto">
  91.               <div class="row">
  92.                 <div class="col-xl-5 col-lg-5 col-md-5 col-sm-12 order-last">
  93.                    <div class="carousel_img">
  94.                   <img src="./assets/images/banner_3.png" alt="Banner_3" class="d-block" style="width:70%;">
  95.                     </div>
  96.                 </div>
  97.                 <div class="col-xl-7 col-lg-7 col-md-7 col-sm-12">
  98.                 <div class="carousel_item_text">
  99.                   <h2 class="text-bold">{{ 'home.hbanner9'|trans }}, <br>
  100.           {{ 'home.hbanner10'|trans }} <br>{{ 'home.hbanner12'|trans }}</h2>
  101.               <p class="text-muted">
  102.                 {{ 'home.hbanner11'|trans }}
  103.                     </p>
  104.                     <a class="btn btn-warning rounded-5  mt-4" href="#" style="width: 135px;">{{ 'home.readmore'|trans }} <img style="height: 10px;" src="./assets/images/long-arrow.png" alt="long-arrow"></a>
  105.                     </div>
  106.                 </div>
  107.                 </div>
  108.                 
  109.             </div>
  110.         </div>
  111.     </div>
  112.     </div>#}
  113.   
  114.   <!-- Left and right controls/icons -->
  115.   <button class="carousel-control-prev" type="button" data-bs-target="#demo" data-bs-slide="prev">
  116.     <span class="carousel-control-prev-icon"></span>
  117.   </button>
  118.   <button class="carousel-control-next" type="button" data-bs-target="#demo" data-bs-slide="next">
  119.     <span class="carousel-control-next-icon"></span>
  120.   </button>
  121. </div>
  122.  </div>
  123. <header class="header">
  124.   <div class="header--wrapper1">
  125.     <div class="header__news d-none">
  126.       <div class="introduction">
  127.         <h2 class="heading--display semibold introduction--title">{{ 'home.introduction'|trans }}</h2>
  128.         {% if data.intro[0] %}
  129.           <p class="introduction--desc">{{ data.intro[0].introduction|raw|nl2br }}</p>
  130.         {% else %}
  131.           <div class="alert alert--warning alert--100">{{ 'no_records_found'|trans }}</div>
  132.         {% endif %}
  133.       </div>
  134.       <div class="newsarticles">
  135.         <h1 class="heading--display semibold header__news--head">{{ 'home.updates'|trans }}</h1>
  136.         <div class="articles">
  137.           {% for update in data.updates %}
  138.             {% if update.category == 'article' %}
  139.               <div class="article news">
  140.                 <p class="article--title">{{ update.title|raw }}</p>
  141.                 <a class="article--link" href="{{ update.link }}" target="_blank">{{ 'home.read'|trans }}></a>
  142.               </div>
  143.             {% else %}
  144.               <div class="article notification">
  145.                 <p class="article--title">{{ update.title|raw }}</p>
  146.               </div>
  147.             {% endif %}
  148.           {% else %}
  149.             <div class="alert alert--warning alert--100">{{ 'no_records_found'|trans }}</div>
  150.           {% endfor %}
  151.         </div>
  152.         <div class="articles--mobile">
  153.           <div class="splide" id="news">
  154.             <div class="splide__slider">
  155.               <div class="splide__arrows">
  156.                 <button class="splide__arrow splide__arrow--prev"></button>
  157.                 <button class="splide__arrow splide__arrow--next"></button>
  158.               </div>
  159.               <div class="splide__track">
  160.                 <ul class="splide__list">
  161.                   {% for update in data.updates %}
  162.                     <li class="splide__slide">
  163.                       {% if update.category == 'article' %}
  164.                         <div class="article news">
  165.                           <p class="article--title">{{ update.title|raw }}</p>
  166.                           <a class="article--link" href="{{ update.link }}" target="_blank">{{ 'home.read'|trans }}></a>
  167.                         </div>
  168.                       {% else %}
  169.                         <div class="article notification">
  170.                           <p class="article--title">{{ update.title|raw }}</p>
  171.                         </div>
  172.                       {% endif %}
  173.                     </li>
  174.                   {% endfor %}
  175.                 </ul>
  176.               </div>
  177.             </div>
  178.           </div>
  179.         </div>
  180.       </div>
  181.     </div>
  182.    
  183.     <div class="header__map__new">
  184.     
  185.       <div class="mapcontainer">
  186.         <div class="mapcontainer__content">
  187.           <h2 class="heading--l2 medium mapcontainer__content--head">{{ 'home.key_fp_indicators'|trans }}</h2>
  188.           <p class="mapcontainer__content--tag">{{ 'home.click_on_state'|trans }}</p>
  189.         </div>
  190.         <div class="map" id="map"></div>
  191.       </div>
  192.       <div class="indicators" id="showMapData">
  193.         <h2 class="heading--l2 medium indicators--state"></h2>
  194.         <div class="indicators--labels">
  195.           <div class="indicator indicator--1" data-indicator="#indicator1"></div>
  196.           <div class="indicator indicator--2" data-indicator="#indicator2"></div>
  197.           <div class="indicator indicator--3" data-indicator="#indicator3"></div>
  198.           <div class="indicator indicator--4" data-indicator="#indicator4"></div>
  199.           <div class="indicator indicator--5" data-indicator="#indicator5"></div>
  200.         </div>
  201.         <small class="indicators--info">
  202.           {{ 'home.arrow_depicts'|trans }}
  203.           <br />
  204.           <span style="color: #ace207;">{{ 'green'|trans }}</span>: {{ 'home.improvement'|trans }} |
  205.           <span style="color: #ff003c;">{{ 'red'|trans }}</span>: {{ 'home.deterioration'|trans }} |
  206.           <span style="color: #ffd800;">{{ 'yellow'|trans }}</span>: {{ 'home.no_change'|trans }}
  207.         </small>
  208.         <ul class="indicators__details" style="padding: 0px;">
  209.           <li class="indicators__details--li active" id="indicator1">{{ 'home.sex_ratio_at'|trans }}</li>
  210.           <li class="indicators__details--li" id="indicator2" style="color: #f99420">{{ 'home.total_fertility_rate'|trans }}</li>
  211.           <li class="indicators__details--li" id="indicator3" style="color: #dc2695">{{ 'home.women_age'|trans }}</li>
  212.           <li class="indicators__details--li" id="indicator4" style="color: #3dc9e1">{{ 'home.current_use'|trans }}</li>
  213.           <li class="indicators__details--li" id="indicator5" style="color: #a24be7">{{ 'home.total_umnet'|trans }}</li>
  214.         </ul>
  215.         <div class="indicators__source">
  216.           <span class="indicators__source--label">{{ 'home.source'|trans }}</span>
  217.           <span class="indicators__source--link"></span>
  218.         </div>
  219.         <hr class="indicators--hr" />
  220.         <div class="indicators__dashboard">
  221.           <a class="btn btn--primary-211 btn-lg btn-warning anchor--dashboard rounded-5">{{ 'home.view_full_dashboard'|trans }} <img src="./assets/images/long-arrow.png"/></a>
  222.           <p class="indicators--info-2">{{ 'home.click_to_see'|trans }}</p>
  223.         </div>
  224.       </div>
  225.     </div>
  226.   </div>
  227. </header>