templates/frontend/static/school_life.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  2. {% block title %}
  3.     {{ 'school_life'|trans }}
  4. {% endblock %}
  5. {% block css %}
  6.     <style>
  7.         .ck.ck-editor__main>.ck-editor__editable:not(.ck-focused){
  8.             border-color: transparent!important;
  9.         }
  10.         .ck.ck-editor__main>.ck-editor__editable:not(.ck-editor__nested-editable).ck-focused{
  11.             border: transparent!important;
  12.         }
  13.         @media screen and (max-width: 767px) {
  14.             .imgDiv{order: 1}
  15.             .textDiv{
  16.                 order: 2;
  17.             }
  18.         }
  19.         .overlay {
  20.             position: absolute;
  21.             height: 100%;
  22.             width: 100%;
  23.             opacity: 0.3;
  24.             transition: .3s ease;
  25.             background-color: transparent;
  26.             top: 0;
  27.             bottom: 0;
  28.             left: 0;
  29.             right: 0;
  30.         }
  31.         .overlay:hover {
  32.             opacity: 0.7;
  33.         }
  34.         .gal_btn {
  35.             position: absolute;
  36.             z-index: 2;
  37.         }
  38.         .fa-images{
  39.             color: {% if first_color != ''%}{{first_color}}{% else %}#7f3e98{% endif %}!important;
  40.         }
  41.         .container2 {
  42.             display: flex;
  43.             flex-direction: column;
  44.             width: 100%;
  45.             height: 300px;
  46.             background: #fff;
  47.             padding: 0;
  48.         }
  49.         .row2 {
  50.             display: flex;
  51.             flex-direction: row;
  52.             width: 100%;
  53.             height: 100%;
  54.         }
  55.         .item {
  56.             min-width: 50px;
  57.             min-height: 50px;
  58.             width: 33%;
  59.             background: white;
  60.             padding: 20px;
  61.         }
  62.         a.item:nth-child(1){
  63.             margin-right: 1px;
  64.         }
  65.         a.item:nth-child(2){
  66.             margin-right: 1px;
  67.             margin-left: 1px;
  68.         }
  69.         a.item:nth-child(3){
  70.             margin-right: 1px;
  71.             margin-left: 1px;
  72.         }
  73.         a.item:nth-child(3){
  74.             margin-right: 1px;
  75.             margin-left: 1px;
  76.         }
  77.         a.row:nth-child(1){
  78.             margin-bottom: 1px;
  79.         }
  80.         a.row:nth-child(3){
  81.             margin-top: 1px;
  82.         }
  83.         .item img{
  84.             max-width: 100%;
  85.         }
  86.         @media (max-width: 425px){
  87.             .item img{
  88.                 max-width: 100px;
  89.             }
  90.         }
  91.         .tooltip.show {
  92.             opacity: 1;
  93.         }
  94.         .tooltip-inner {
  95.             background-color: #e5e5e5;
  96.             box-shadow: 0px 0px 4px black;
  97.             opacity: 1 !important;
  98.         }
  99.     </style>
  100. {% endblock %}
  101. {% block body %}
  102.     <div class=" d-flex flex-column flex-row-fluid">
  103.         <div class="card-body row pt-head">
  104.             <div class="row container-fluid " style="">
  105.                 {% if page_mission is not null %}
  106.                     <div class="container scrool-div" id="{{ page_mission.slug }}">
  107.                         <h2 class="bold text-center text-primary mb-5">{{ page_mission.name }}</h2>
  108.                         <div class="ck ck-content ck-editor__editable ck-rounded-corners ck-editor__editable_inline ck-read-only ck-blurred" lang="en" dir="ltr" role="textbox" aria-label="Rich Text Editor, main" contenteditable="false">
  109.                             {{ page_mission.richText|raw }}
  110.                         </div>
  111.                     </div>
  112.                 {% endif %}
  113.             </div>
  114.             <div class="row container-fluid " style="">
  115.                 {% if page_infrastructure is not null %}
  116.                     <div class="container scrool-div" id="{{ page_infrastructure.slug }}">
  117.                         <h2 class="bold text-center text-primary mb-5">{{ page_infrastructure.name }}</h2>
  118.                         <div class="row mt-4">
  119.                                 {% for c  in infras %}
  120.                                     <div class="row p-4 mb-8" style="border-style: solid;border-width: 1px;border-color: #b3b2b2;background-color:
  121.                                     {% if loop.index %2 == 1 %}
  122.                                             {% if first_color != ''%}{{first_color}}{% else %}#7f3e98{% endif %}14 !important;
  123.                                     {% else %}
  124.                                             #fff
  125.                         {% endif %};box-shadow: 10px 10px 5px #b1b1b1;
  126.                                             ">
  127.                                         {% if loop.index % 2 == 0 %}
  128.                                             <div class="col-md-8 col-lg-8 textDiv">
  129.                                                 <h3 class="title">
  130.                                                     {{ c.name }}
  131.                                                 </h3>
  132.                                                 <div class="row ck ck-content ck-editor__editable ck-rounded-corners ck-editor__editable_inline ck-read-only ck-blurred">
  133.                                                     {{ c.description|raw }}
  134.                                                 </div>
  135.                                             </div>
  136.                                             <div class="col-md-4 col-lg-4 imgDiv">
  137.                                                 {% if c.image2 != '' or c.image3 != '' %}
  138.                                                     <button class="gal_btn btn btn-outline"  type="button" data-bs-toggle="modal" data-bs-target="#exampleModal--in-{{ c.id }}">
  139.                                                         <i style="font-size: 32px;" class="fa fa-images fa-3x"></i>
  140.                                                     </button>
  141.                                                 {% endif %}
  142.                                                 {% if c.image =='' %}
  143.                                                     <img style="width: 100%" src="{{ asset('assets/media/avatars/hobby.jpeg') }}" alt="{{  c.name }}"/>
  144.                                                 {% else %}
  145.                                                     <img style="width: 100%" src="{{ asset('uploads/'~c.image) }}" alt="{{  c.name }}"/>
  146.                                                 {% endif %}
  147.                                             </div>
  148.                                         {% else %}
  149.                                             <div class="col-md-4 col-lg-4 imgDiv ">
  150.                                                 {% if c.image2 != '' or c.image3 != '' %}
  151.                                                     <button  type="button" class="gal_btn btn btn-outline"  data-bs-toggle="modal" data-bs-target="#exampleModal--in-{{ c.id }}">
  152.                                                         <i style="font-size: 32px;" class="fa fa-images fa-3x"></i>
  153.                                                     </button>
  154.                                                 {% endif %}
  155.                                                 {% if c.image =='' %}
  156.                                                     <img style="width: 100%" src="{{ asset('assets/media/avatars/hobby.jpeg') }}" alt="{{  c.name }}"/>
  157.                                                 {% else %}
  158.                                                     <img style="width: 100%" src="{{ asset('uploads/'~c.image) }}" alt="{{  c.name }}"/>
  159.                                                 {% endif %}
  160.                                             </div>
  161.                                             <div class="col-md-8 col-lg-8 textDiv ">
  162.                                                 <h3 class="title">
  163.                                                     {{ c.name }}
  164.                                                 </h3>
  165.                                                 <div class="row ck ck-content ck-editor__editable ck-rounded-corners ck-editor__editable_inline ck-read-only ck-blurred">
  166.                                                     {{ c.description|raw }}
  167.                                                 </div>
  168.                                             </div>
  169.                                         {% endif %}
  170.                                     </div>
  171.                                 {% endfor %}
  172.                         </div>
  173.                         {% for c in infras %}
  174.                             <div class="modal fade" data-bs-focus="false" id="exampleModal--in-{{ c.id }}" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  175.                                 <div class="modal-dialog" role="document">
  176.                                     <div class="modal-content">
  177.                                         <div class="modal-header">
  178.                                             <h5 style="" class="modal-title mt-1 ml-1" >{{ c.name }}</h5>
  179.                                             <button type="button" class="btn btn-primary close" data-bs-dismiss="modal" aria-label="Close">
  180.                                                 <span aria-hidden="true">&times;</span>
  181.                                             </button>
  182.                                         </div>
  183.                                         <div class="modal-body">
  184.                                             <div  class="carousel slide carousel-fade" data-bs-ride="carousel" data-bs-interval="4000">
  185.                                                 <div class="carousel-inner">
  186.                                                     {% if c.image2 != '' %}
  187.                                                         <div class="carousel-item {% if c.image2 != '' and c.image3 != ''%} active {% elseif c.image3 == '' %}  active{% endif%} ">
  188.                                                             <img src="{{ asset('uploads/'~c.image2) }}" class="d-block w-100" alt="">
  189.                                                         </div>
  190.                                                     {% endif %}
  191.                                                     {% if c.image3 != '' %}
  192.                                                         <div class="carousel-item {% if c.image2 == '' %}active{% endif%}">
  193.                                                             <img src="{{ asset('uploads/'~c.image3) }}" class="d-block w-100" alt="">
  194.                                                         </div>
  195.                                                     {% endif %}
  196.                                                     {% if c.image != '' %}
  197.                                                         <div class="carousel-item">
  198.                                                             <img src="{{ asset('uploads/'~c.image) }}" class="d-block w-100" alt="">
  199.                                                         </div>
  200.                                                     {% endif %}
  201.                                                 </div>
  202.                                                 <button class="carousel-control-prev" type="button" data-bs-target="#exampleModal--{{ c.id }}" data-bs-slide="prev">
  203.                                                     <span class="carousel-control-prev-icon" aria-hidden="true"></span>
  204.                                                     <span class="visually-hidden">Previous</span>
  205.                                                 </button>
  206.                                                 <button class="carousel-control-next" type="button" data-bs-target="#exampleModal--{{ c.id }}" data-bs-slide="next">
  207.                                                     <span class="carousel-control-next-icon" aria-hidden="true"></span>
  208.                                                     <span class="visually-hidden">Next</span>
  209.                                                 </button>
  210.                                             </div>
  211.                                         </div>
  212.                                         <div class="modal-footer">
  213.                                             <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ 'close'|trans }}</button>
  214.                                         </div>
  215.                                     </div>
  216.                                 </div>
  217.                             </div>
  218.                         {% endfor %}
  219.                     </div>
  220.                 {% endif %}
  221.             </div>
  222.             <div class="row container-fluid"  style="margin-top: 80px;">
  223.                 {% if page_activity is not null %}
  224.                     <div class="container scrool-div" id="{{ page_activity.slug }}">
  225.                         <h2 class="bold text-center text-primary mb-5 mt-5">{{ page_activity.name }}</h2>
  226.                         <div class="accordion" id="kt_accordion_1">
  227.                             {% for c  in clubs %}
  228.                                 <div class="accordion-item">
  229.                                     <h1 class="accordion-header" id="kt_accordion_1_header_{{ c.id }}">
  230.                                         <button style="color: {% if first_color != ''%}{{first_color}}{% else %}#7f3e98{% endif %}!important;" class="accordion-button fs-4 fw-bold " type="button" data-bs-toggle="collapse" data-bs-target="#kt_accordion_1_body_{{ c.id }}" aria-expanded="true" aria-controls="kt_accordion_1_body_{{ c.id }}">
  231.                                             {{ c.name }}
  232.                                         </button>
  233.                                     </h1>
  234.                                     <div id="kt_accordion_1_body_{{ c.id }}" class="accordion-collapse collapse {% if loop.index ==1 %} show {% endif %}" aria-labelledby="kt_accordion_1_header_{{ c.id }}" data-bs-parent="#kt_accordion_1">
  235.                                         <div class="accordion-body row">
  236.                                             <div class="col-md-8 col-lg-8">
  237.                                                 <div style="width: 100%" class="ck ck-content ck-editor__editable ck-rounded-corners ck-editor__editable_inline ck-read-only ck-blurred">
  238.                                                     {{ c.description|raw }}
  239.                                                 </div>
  240.                                             </div>
  241.                                             <div class="col-md-4 col-lg-4">
  242.                                                 {% if c.image =='' %}
  243.                                                     <img style="width: 100%" src="{{ asset('assets/media/avatars/hobby.jpeg') }}" alt="{{  c.name }}"/>
  244.                                                 {% else %}
  245.                                                     <img style="width: 100%" src="{{ asset('uploads/'~c.image) }}" alt="{{  c.name }}"/>
  246.                                                 {% endif %}
  247.                                             </div>
  248.                                         </div>
  249.                                     </div>
  250.                                 </div>
  251.                             {% endfor %}
  252.                         </div>
  253.                     </div>
  254.                 {% endif %}
  255.             </div>
  256.             <div class="row container-fluid " style="margin-top: 80px;">
  257.                 {% if page_partner is not null %}
  258.                     <div class="container scrool-div" id="{{ page_partner.slug }}">
  259.                         <h2 class="bold text-center text-primary mb-5 mt-5">{{ page_partner.name }}</h2>
  260.                         <div class="row mt-4">
  261.                             <div class="row no-gutters clients-wrap clearfix mt-10">
  262.                                 {% for c in partners %}
  263.                                     <div class="col-lg-4 col-md-6 col-6 mb-3">
  264.                                         <div class="client-logo" style="display: grid">
  265.                                             <button style="padding: 0!important;" type="button" class="btn " data-bs-toggle="modal" data-bs-target="#exampleModal--{{ c.id }}">
  266.                                                 {% if c.image != '' %}
  267.                                                     <img  style="max-width: 150px;max-height: 150px; width: 100px; height: auto"  src="{{ asset('uploads/'~c.image) }}" class="img-fluid" alt="">
  268.                                                 {% else %}
  269.                                                     <img style="max-width: 150px;max-height: 150px; width: 100px; height: auto"  src="{{ asset('assets/media/avatars/partner.png') }}" class="img-fluid" alt="">
  270.                                                 {% endif %}
  271.                                             </button>
  272.                                             <button  type="button" class="btn fs-5" data-toggle="modal" data-target="#exampleModal--{{ c.id }}">
  273.                                                 {{ c.name }}
  274.                                             </button>
  275.                                         </div>
  276.                                     </div>
  277.                                 {% endfor %}
  278.                             </div>
  279.                             {% for c in partners %}
  280.                                 <div class="modal fade" data-bs-focus="false" id="exampleModal--{{ c.id }}" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  281.                                     <div class="modal-dialog" role="document">
  282.                                         <div class="modal-content">
  283.                                             <div class="modal-header">
  284.                                                 {% if c.image != '' %}
  285.                                                     <img  style="max-width: 50px;max-height: 50px; width: 50px; height: auto"  src="{{ asset('uploads/'~c.image) }}" class="img-fluid" alt="">
  286.                                                 {% endif %}
  287.                                                 <h5 style="" class="modal-title mt-1 ml-1" id="exampleModalLabel">{{ c.name }}</h5>
  288.                                                 <button type="button" class="btn btn-primary close" data-bs-dismiss="modal" aria-label="Close">
  289.                                                     <span aria-hidden="true">&times;</span>
  290.                                                 </button>
  291.                                             </div>
  292.                                             <div class="modal-body">
  293.                                                 {% if c.description  != null or c.description != ''   %}
  294.                                                     <div class="card">
  295.                                                         <div class="card-body" class="ck ck-content ck-editor__editable ck-rounded-corners ck-editor__editable_inline ck-read-only ck-blurred">
  296.                                                             <h6><a></a>{{ 'description'|trans }}</h6>
  297.                                                             {{ c.description|raw }}
  298.                                                         </div>
  299.                                                     </div>
  300.                                                 {% endif %}
  301.                                                 {% if c.website != null or c.socialMedialink != ''  %}
  302.                                                     <div class="card mt-3" >
  303.                                                         <div class="card-body">
  304.                                                             <h6><a></a>{{ 'link'|trans }}</h6>
  305.                                                             {% if c.socialMedialink != ''  %}
  306.                                                             <a class="btn btn-link" target="_blank" href="{{ c.socialMedialink }}">{{ c.socialMedialink }}</a>
  307.                                                             <br/>
  308.                                                             {% endif %}
  309.                                                             {% if c.website != ''  %}
  310.                                                             <a class="btn btn-link" target="_blank" href="{{ c.website }}">{{ c.website }}</a>
  311.                                                             {% endif %}
  312.                                                         </div>
  313.                                                     </div>
  314.                                                 {% endif %}
  315.                                                 {% if c.phone != null or c.phone != ''  %}
  316.                                                     <div class="card mt-3" >
  317.                                                         <div class="card-body">
  318.                                                             <h6><a></a>{{ 'phone'|trans }}</h6>
  319.                                                             <a class="btn btn-link"  href="tel:{{ c.phone }}">{{ c.phone }}</a>
  320.                                                         </div>
  321.                                                     </div>
  322.                                                 {% endif %}
  323.                                             </div>
  324.                                             <div class="modal-footer">
  325.                                                 <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ 'close'|trans }}</button>
  326.                                             </div>
  327.                                         </div>
  328.                                     </div>
  329.                                 </div>
  330.                             {% endfor %}
  331.                         </div>
  332.                     </div>
  333.                 {% endif %}
  334.             </div>
  335.         </div>
  336.     </div>
  337.     <div class="modal fade" data-bs-focus="false" tabindex="-1" id="kt_modal_show">
  338.         <div class="modal-dialog modal-fullscreen">
  339.             <div class="modal-content">
  340.                 <div class="modal-header">
  341.                     <h5 class="modal-title" id="modal_show_title">
  342.                         <span class="fa fa-spin fa-satellite"></span>
  343.                     </h5>
  344.                     <div class="btn btn-icon btn-sm btn-active-light-primary ms-2" data-bs-dismiss="modal" aria-label="Close">
  345.                         <span class="fa fa-window-close"></span>
  346.                     </div>
  347.                     <!--end::Close-->
  348.                 </div>
  349.                 <div class="modal-body">
  350.                     <div class=" d-flex flex-column flex-row-fluid " id="modal_show_img">
  351.                     </div>
  352.                     <div class=" d-flex flex-column flex-row-fluid" id="modal_show_content">
  353.                     </div>
  354.                 </div>
  355.                 <div class="modal-footer">
  356.                     <button type="button" class="btn btn-light" data-bs-dismiss="modal">{{ 'close'|trans }}</button>
  357.                 </div>
  358.             </div>
  359.         </div>
  360.     </div>
  361. {% endblock %}
  362.  {% block js %}
  363.      <script src="{{ asset('assets/plugins/custom/ckeditor/ckeditor-classic.bundle.js') }}"></script>
  364.      <script>
  365.          $(document).ready(function (){
  366.          })
  367.      </script>
  368.      <script>
  369.          $(document).ready(function (){
  370.              let modalShow = bootstrap.Modal.getOrCreateInstance(document.getElementById('kt_modal_show'));
  371.              $(modalShow).on('hidden.bs.modal', function (event) {
  372.                  ;
  373.                  $('#modal_show_title').html('<span class="fa fa-spin fa-satellite"></span>');
  374.                  $('#modal_show_content').html('');
  375.                  $('#modal_show_img').html('');
  376.              });
  377.              $('.btn-show').on('click', function () {
  378.                  let url = "{{ path('get_one_entity',{'entity':'story','id':'00000'}) }}";
  379.                  url = url.replace('00000',this.getAttribute('data-id'));
  380.                  $.ajax({
  381.                      url: url,
  382.                      type: 'GET',
  383.                      dataType: 'json',
  384.                      success: function(res){
  385.                          $('#modal_show_title').html(res.data.story_date);
  386.                          $('#modal_show_content').html(res.data.description);
  387.                          if(res.data.image !== ""){
  388.                              let img='<img class="img-responsive img" style="max-width: 400px;max-height: 300px" src="'+"{{ asset('uploads/') }}"+res.data.image +'"'+' />';
  389.                              $('#modal_show_img').html(img);
  390.                          }
  391.                          else{
  392.                              $('#modal_show_img').html('');
  393.                          }
  394.                          modalShow.show();
  395.                      },
  396.                      error :function (error) {
  397.                          Swal.fire({
  398.                              text: "{{ 'object_not_found'|trans }}",
  399.                              icon: "error",
  400.                              buttonsStyling: false,
  401.                              confirmButtonText: "{{ 'close'|trans }}",
  402.                              customClass: {
  403.                                  confirmButton: "btn btn-primary"
  404.                              }
  405.                          });
  406.                      }
  407.                  });
  408.              });
  409.          })
  410.      </script>
  411.  {% endblock %}