templates/frontend/index.html.twig line 1

Open in your IDE?
  1. {% extends 'frontend/base.html.twig' %}
  3. {% block body %}
  4.     {% set current_route = app.request.attributes.get('_route') %}
  5.     <section class="home-hero {{ current_route == 'homepage' ? 'is-homepage' : '' }}" style="background-image: url({{ asset('/assets/background/simpang_gumul.png') }})">
  6.         <div class="container h-100">
  7.             <div class="row h-100 justify-content-center">
  8.                 <div class="col-md-12 content">
  9.                     <div class="title text-center">
  10.                         OPEN DATA KEDIRI
  11.                     </div>
  13.                     <div
  14.                         class="search-global">
  15.                         {# <form autocomplete="off" action="#" class="search-global-inner"> #}
  16.                         <div
  17.                             class="search-global-inner">
  18.                             {# <div class=""> #}
  19.                             <div class="input-group autocomplete-box">
  20.                                 <input id="gsearch" name="gsearch" type="text" class="form-control input-search search-input-text" placeholder="Masukkan Kata Pencarian">
  21.                                 <i class="fa fa-search" style="margin-top: auto; margin-bottom: auto; margin-right: 10px; color: #b5b6b7;"></i>
  22.                                 {# <button class="btn btn-danger">
  23.                                                                 </button> #}
  24.                             </div>
  25.                             {# </div> #}
  26.                         </div>
  27.                         {# </form> #}
  28.                     </div>
  29.                 </div>
  30.                 <div class="col-3 col-md-3">
  31.                     <div class="text-center">
  32.                         <svg class="icon-dashboard" width="60" height="60" viewbox="0 0 79 76" fill="none" xmlns="http://www.w3.org/2000/svg">
  33.                             <path d="M35.1111 76H8.77778C6.36389 76 4.29672 75.1739 2.57628 73.5216C0.858759 71.8664 0 69.8778 0 67.5556V8.44444C0 6.12222 0.858759 4.13355 2.57628 2.47844C4.29672 0.826148 6.36389 0 8.77778 0H35.1111V76ZM43.8889 33.7778V0H70.2222C72.6361 0 74.7033 0.826148 76.4237 2.47844C78.1412 4.13355 79 6.12222 79 8.44444V33.7778H43.8889ZM43.8889 76V42.2222H79V67.5556C79 69.8778 78.1412 71.8664 76.4237 73.5216C74.7033 75.1739 72.6361 76 70.2222 76H43.8889Z" fill="white"/>
  34.                         </svg>
  35.                         <p class="lh-sm total-data mb-0">
  36.                             <span class="count">{{ total_sektoral }}</span>
  37.                         </p>
  38.                         <p class="mb-0">Sektoral</p>
  39.                     </div>
  40.                 </div>
  41.                 <div class="col-3 col-md-3">
  42.                     <div class="text-center">
  43.                         <svg class="icon-dashboard" width="60" height="60" viewbox="0 0 79 76" fill="none" xmlns="http://www.w3.org/2000/svg">
  44.                             <path d="M35.55 27.2001C31.8265 26.3592 28.5815 24.3594 26.4231 21.5755C24.2648 18.7917 23.3414 15.4149 23.8259 12.0781C24.3105 8.74139 26.1698 5.67375 29.0553 3.45024C31.9408 1.22673 35.6544 0 39.5 0C43.3456 0 47.0592 1.22673 49.9447 3.45024C52.8302 5.67375 54.6895 8.74139 55.1741 12.0781C55.6586 15.4149 54.7352 18.7917 52.5769 21.5755C50.4185 24.3594 47.1735 26.3592 43.45 27.2001V34.5451H59.25C61.3452 34.5451 63.3546 35.2731 64.8361 36.569C66.3177 37.8648 67.15 39.6223 67.15 41.4549V48.7999C70.8735 49.6408 74.1185 51.6406 76.2768 54.4245C78.4352 57.2083 79.3586 60.5851 78.874 63.9219C78.3895 67.2586 76.5302 70.3262 73.6447 72.5498C70.7592 74.7733 67.0456 76 63.2 76C59.3544 76 55.6408 74.7733 52.7553 72.5498C49.8698 70.3262 48.0105 67.2586 47.5259 63.9219C47.0414 60.5851 47.9648 57.2083 50.1231 54.4245C52.2814 51.6406 55.5265 49.6408 59.25 48.7999V41.4549H19.75V48.7999C23.4735 49.6408 26.7186 51.6406 28.8769 54.4245C31.0352 57.2083 31.9586 60.5851 31.4741 63.9219C30.9895 67.2586 29.1302 70.3262 26.2447 72.5498C23.3592 74.7733 19.6456 76 15.8 76C11.9544 76 8.24081 74.7733 5.35531 72.5498C2.46982 70.3262 0.610533 67.2586 0.125969 63.9219C-0.358595 60.5851 0.564832 57.2083 2.72316 54.4245C4.88148 51.6406 8.12653 49.6408 11.85 48.7999V41.4549C11.85 39.6223 12.6823 37.8648 14.1639 36.569C15.6454 35.2731 17.6548 34.5451 19.75 34.5451H35.55V27.2001Z" fill="white"/>
  45.                         </svg>
  46.                         <p class="lh-sm total-data mb-0">
  47.                             <span class="count">{{ total_div }}</span>
  48.                         </p>
  49.                         <p class="mb-0">Organisasi</p>
  50.                     </div>
  51.                 </div>
  52.                 <div class="col-3 col-md-3">
  53.                     <div class="text-center">
  54.                         <svg class="icon-dashboard" width="60" height="60" viewbox="0 0 76 79" fill="none" xmlns="http://www.w3.org/2000/svg">
  55.                             <path d="M29.8571 0C27.6975 0 25.6263 0.780299 24.0993 2.16924C22.5722 3.55818 21.7143 5.44199 21.7143 7.40625V12.3438C21.7143 14.308 22.5722 16.1918 24.0993 17.5808C25.6263 18.9697 27.6975 19.75 29.8571 19.75H46.1428C48.3025 19.75 50.3736 18.9697 51.9007 17.5808C53.4278 16.1918 54.2857 14.308 54.2857 12.3438V7.40625C54.2857 5.44199 53.4278 3.55818 51.9007 2.16924C50.3736 0.780299 48.3025 0 46.1428 0L29.8571 0ZM46.1428 4.9375C46.8627 4.9375 47.5531 5.1976 48.0621 5.66058C48.5712 6.12356 48.8571 6.7515 48.8571 7.40625V12.3438C48.8571 12.9985 48.5712 13.6264 48.0621 14.0894C47.5531 14.5524 46.8627 14.8125 46.1428 14.8125H29.8571C29.1372 14.8125 28.4469 14.5524 27.9378 14.0894C27.4288 13.6264 27.1428 12.9985 27.1428 12.3438V7.40625C27.1428 6.7515 27.4288 6.12356 27.9378 5.66058C28.4469 5.1976 29.1372 4.9375 29.8571 4.9375H46.1428Z" fill="white"/>
  56.                             <path d="M16.2857 7.40625H10.8571C7.97765 7.40625 5.21609 8.44665 3.17998 10.2986C1.14387 12.1505 0 14.6622 0 17.2812V69.125C0 71.744 1.14387 74.2558 3.17998 76.1077C5.21609 77.9596 7.97765 79 10.8571 79H65.1429C68.0223 79 70.7839 77.9596 72.82 76.1077C74.8561 74.2558 76 71.744 76 69.125V17.2812C76 14.6622 74.8561 12.1505 72.82 10.2986C70.7839 8.44665 68.0223 7.40625 65.1429 7.40625H59.7143V12.3438C59.7143 13.9648 59.3633 15.5699 58.6812 17.0675C57.9992 18.5651 56.9995 19.9259 55.7393 21.0721C54.4791 22.2183 52.983 23.1276 51.3364 23.7479C49.6899 24.3682 47.9251 24.6875 46.1429 24.6875H29.8571C26.2578 24.6875 22.8058 23.387 20.2607 21.0721C17.7156 18.7572 16.2857 15.6175 16.2857 12.3438V7.40625ZM48.8571 39.5C48.8571 38.1905 49.4291 36.9346 50.4471 36.0087C51.4652 35.0827 52.846 34.5625 54.2857 34.5625C55.7255 34.5625 57.1062 35.0827 58.1243 36.0087C59.1423 36.9346 59.7143 38.1905 59.7143 39.5V64.1875C59.7143 65.497 59.1423 66.7529 58.1243 67.6788C57.1062 68.6048 55.7255 69.125 54.2857 69.125C52.846 69.125 51.4652 68.6048 50.4471 67.6788C49.4291 66.7529 48.8571 65.497 48.8571 64.1875V39.5ZM16.2857 59.25C16.2857 57.9405 16.8577 56.6846 17.8757 55.7587C18.8938 54.8327 20.2745 54.3125 21.7143 54.3125C23.154 54.3125 24.5348 54.8327 25.5529 55.7587C26.5709 56.6846 27.1429 57.9405 27.1429 59.25V64.1875C27.1429 65.497 26.5709 66.7529 25.5529 67.6788C24.5348 68.6048 23.154 69.125 21.7143 69.125C20.2745 69.125 18.8938 68.6048 17.8757 67.6788C16.8577 66.7529 16.2857 65.497 16.2857 64.1875V59.25ZM38 44.4375C39.4397 44.4375 40.8205 44.9577 41.8386 45.8837C42.8566 46.8096 43.4286 48.0655 43.4286 49.375V64.1875C43.4286 65.497 42.8566 66.7529 41.8386 67.6788C40.8205 68.6048 39.4397 69.125 38 69.125C36.5603 69.125 35.1795 68.6048 34.1614 67.6788C33.1434 66.7529 32.5714 65.497 32.5714 64.1875V49.375C32.5714 48.0655 33.1434 46.8096 34.1614 45.8837C35.1795 44.9577 36.5603 44.4375 38 44.4375Z" fill="white"/>
  57.                         </svg>
  58.                         <p class="lh-sm total-data mb-0">
  59.                             <span class="count">{{ total_pub }}</span>
  60.                         </p>
  61.                         <p class="mb-0">Dataset</p>
  62.                     </div>
  63.                 </div>
  65.             </div>
  66.         </div>
  67.     </div>
  68. </section>
  70. <div class="footer-second" style="background-color: white;">
  71.     <div class="container">
  72.         <div class="inner-footer">
  73.             <p class="text-light fw-400">©
  74.                 {{ parameter('app_name') }}
  75.                 {{ ''|date('Y') }}
  76.                 <a href="{{ path('kmj_user_login')}}" target="_blank" class="text-light pull-right">
  77.                     <i class="bi-box-arrow-in-right mr-2 fs-6"></i>Login</a>
  78.             </p>
  79.         </div>
  80.     </div>
  81. </div>
  83. {# <p id="flash"></p> #}{# <main>
  84.                                                                 <section id="blog" class="blog-grid section-padding">
  85.                                                                     <div class="container">
  86.                                                                         <div class="section-head text-center">
  87.                                                                             <div class="row justify-content-center">
  88.                                                                                 <div class="col-lg-6 col-md-8 col-sm-10">
  89.                                                                                     <h4>Highlight Data</h4>
  90.                                                                                 </div>
  91.                                                                             </div>
  92.                                                                         </div>
  93.                                                         
  94.                                                                         <div class="slider">
  95.                                                                             {% for hl in highlight %}
  96.                                                                                 <div class="slick-wrapper slick-initialized slick-slider slick-dotted">
  97.                                                                                     <div class="slick-list draggable">
  98.                                                                                         <div class="slick-track">
  99.                                                                                             <div class="slick-slide">
  100.                                                                                                 <div class="slick-slide-in" style="width: 100%; display: inline-block;">
  101.                                                                                                     <div class="item">
  102.                                                                                                         <div class="post-img">
  103.                                                                                                             <div class="img">
  104.                                                                                                                 {% if hl.icon %}
  105.                                                                                                                     <img style="width:unset!important;" src="{{asset('uploads/' ~ hl.icon) }}">
  106.                                                                                                                 {% else %}
  107.                                                                                                                     <img style="width:unset!important;" src="{{asset(parameter('open_data_icon')) }}">
  108.                                                                                                                 {% endif %}
  109.                                                                                                             </div>
  110.                                                                                                         </div>
  111.                                                                                                         <div class="cont">
  112.                                                                                                             <div class="info">
  113.                                                                                                                 <a>{{ hl.tanggal | date('d F Y') }}</a>
  114.                                                                                                             </div>
  115.                                                                                                             <h5>
  116.                                                                                                                 <a class="max-lines" data-placement="top" data-toggle="tooltip" title="{{ hl.judul }}">{{ hl.judul }}</a>
  117.                                                                                                             </h5>
  118.                                                                                                             <a class="more" href="{{ path( hl.link, {id:hl.id} )}}">
  119.                                                                                                                 <span>{{ hl.tipe }}</span>
  120.                                                                                                             </a>
  121.                                                                                                         </div>
  122.                                                                                                     </div>
  123.                                                                                                 </div>
  124.                                                                                             </div>
  125.                                                                                         </div>
  126.                                                                                     </div>
  127.                                                                                 </div>
  128.                                                                             {% endfor %}
  129.                                                                         </div>
  130.                                                                     </section>
  131.                                                                     <section id="services" class="services section-padding bg-gray">
  132.                                                                         <div class="container">
  133.                                                                             <div class="section-head text-center">
  134.                                                                                 <div class="row justify-content-center">
  135.                                                                                     <div class="col-lg-6 col-md-8 col-sm-10">
  136.                                                                                         <h4>Statistik
  137.                                                                                             {{ parameter('app_name') }}
  138.                                                                                             {{ parameter('client_shortname') }}</h4>
  139.                                                                                     </div>
  140.                                                                                 </div>
  141.                                                                             </div>
  142.                                                         
  143.                                                                             <div class="row bg-img" style="background-image: url({{asset('frontend/img/c2.jpg')}});">
  144.                                                                                 <div class="col-lg-3 col-md-6 item-box">
  145.                                                                                     <h2 class="numb">{{ total_sektoral }}</h2>
  146.                                                                                     <h6 class="mb-20">Total Sektoral</h6>
  147.                                                                                     <p>Kumpulan data berupa tabel yang bisa diolah lebih lanjut.</p>
  148.                                                                                     <a href="{{ path('sektoral') }}" class="more mt-30">Selengkapnya</a>
  149.                                                                                 </div>
  150.                                                                                 <div class="col-lg-3 col-md-6 item-box">
  151.                                                                                     <h2 class="numb">{{ total_pub }}</h2>
  152.                                                                                     <h6 class="mb-20">Total Dataset</h6>
  153.                                                                                     <p>Kumpulan data-data mentah berupa tabel yang dapat diolah lebih lanjut.</p>
  154.                                                                                     <a href="{{ path('dataset') }}" class="more mt-30">Selengkapnya</a>
  155.                                                                                 </div>
  156.                                                                                 <div class="col-lg-3 col-md-6 item-box">
  157.                                                                                     <h2 class="numb">{{ total_infografik }}</h2>
  158.                                                                                     <h6 class="mb-20">Total Infografik</h6>
  159.                                                                                     <p>Informasi yang disajikan dalam bentuk grafik agar lebih mudah dipahami.</p>
  160.                                                                                     <a href="{{ path('infografik') }}" class="more mt-30">Selengkapnya</a>
  161.                                                                                 </div>
  162.                                                                                 <div class="col-lg-3 col-md-6 item-box">
  163.                                                                                     <h2 class="numb">{{ total_div }}</h2>
  164.                                                                                     <h6 class="mb-20">Total Perangkat Daerah</h6>
  165.                                                                                     <p>Organisasi Perangkat Daerah yang publikasi datanya tampil di
  166.                                                                                         {{ parameter('app_name') }}
  167.                                                                                         {{ parameter('client_shortname') }}.</p>
  168.                                                                                     <a href="{{ path('pd') }}" class="more mt-30">Selengkapnya</a>
  169.                                                                                 </div>
  170.                                                                             </div>
  171.                                                                         </div>
  172.                                                                     </section>
  173.                                                                 </main> #}{% endblock %}{% block javascripts %}
  175. <script>
  176.     jQuery(document).ready(function ($) {
  178. $('.search-input-text').on('keyup click', function () {
  179. var value = $('.search-input-text').val();
  180. if ($('.autocomplete-items').length || ! value) {
  181. $('.autocomplete-items').remove();
  182. }
  183. if (value) {
  184. $.ajax({
  185. type: "GET",
  186. url: '{{ path('gsearch') }}' + '?key=' + value,
  187. success: function (r) {
  188. if ($('.autocomplete-items').length) {
  189. $('.autocomplete-items').remove();
  190. }
  191. var data = r;
  192. // alert(data.length);
  193. $('.autocomplete-box').append('<div id="autocomplete-list" class="autocomplete-items"></div>');
  194. if (data.length == 0) {
  195. var url = "{{ path('dataset_form') }}";
  196. $('#autocomplete-list').append('<div><a href="' + url + '" class="text-primary">-- Permohonan Data --</a></div>');
  197. } else {
  198. $.each(data, function (index, element) {
  199. var url = '';
  200. if (element.tipe == 'INFOGRAFIK') {
  201. url = "{{ path('infografik') }}" + '?judul=' + element.judulx;
  202. } else {
  203. url = "{{ path('dataset') }}" + '?judul=' + element.judulx;
  204. } $('#autocomplete-list').append('<div><a href="' + url + '">' + element.judul + '</a></div>');
  205. });
  206. }
  207. }
  208. });
  210. // alert(value);
  211. }
  212. });
  214. });
  215. </script>
  217. <script>
  218.     $('.count').each(function () {
  219. $(this).prop('Counter', 0).animate({
  220. Counter: $(this).text()
  221. }, {
  222. duration: 4000,
  223. easing: 'swing',
  224. step: function (now) {
  225. $(this).text(Math.ceil(now));
  226. }
  227. });
  228. });
  229. </script>{% endblock %}