templates/frontend/home/model_1.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %}  {%  for p in frontend_page %}
  4.                     {% if p.adminLink == page_admink_link %} {{p.name}}{% endif %}{% endfor %}{% endblock %}
  6. {% block link_css %}
  7.     <link rel="stylesheet" href="{{ asset('assets/css/simple-lightbox.min.css') }}">
  8. {% endblock %}
  10. {% block css %}
  11.     <style>
  12.         #scroll-button {
  13.             animation-name: bounce;
  14.             animation-timing-function: ease;
  15.             animation-duration: 2s;
  16.             animation-iteration-count: infinite;
  17.             background: url("https://laketahoeprep.org/images/icons/scroll-arrow.svg") 50% 0 no-repeat;
  18.             background-size: 100% auto;
  19.             display: inline-block;
  20.             height: 80px;
  21.             width: 20px;
  22.         }
  24.         @media only screen and (min-width : 768px) {
  25.             #carroussel-desktop{
  26.                 display: block;
  27.             }
  28.             #carroussel-mobile{
  29.                 display: none;
  30.             }
  31.         }
  33.         @media only screen and (max-width : 767px) {
  34.             #carroussel-desktop{
  35.                 display: none;
  36.             }
  37.             #carroussel-mobile{
  38.                 display: block;
  39.             }
  40.         }
  44.     </style>
  45.     <style>
  46.         .dropdown-menu.show{
  47.             position: fixed!important;
  48.         }
  49.         .dropdown-menu{
  50.             min-width: 15rem;
  51.         }
  52.         .dropdown-item{
  53.             min-height: 35px;
  54.             padding: .5rem 1rem;
  55.         }
  56.         .dropdown-item:focus, .dropdown-item:hover{
  57.             background-color: {% if first_color != ''%}{{first_color}}{% else %}#7f3e98{% endif %}52!important;
  58.         }
  60.         .content {
  61.             display: flex;
  62.             margin: 0 auto;
  63.             justify-content: center;
  64.             align-items: center;
  65.             flex-wrap: wrap;
  66.             max-width: 1000px;
  67.         }
  69.         p.overview {
  70.             font-size: 12.5px;
  71.             height: 200px;
  72.             width: 100%;
  73.             overflow: hidden;
  74.             text-overflow: ellipsis;
  75.             text-align: left;
  76.         }
  78.         .heading {
  79.             width: 100%;
  80.             margin-left: 1rem;
  81.             font-weight: 900;
  82.             font-size: 1.618rem;
  83.             text-transform: uppercase;
  84.             letter-spacing: 0.1ch;
  85.             line-height: 1;
  86.             padding-bottom: 0.5em;
  87.             margin-bottom: 1rem;
  88.             position: relative;
  89.         }
  90.         .heading:after {
  91.             display: block;
  92.             content: "";
  93.             position: absolute;
  94.             width: 60px;
  95.             height: 4px;
  96.             background: linear-gradient(135deg, #1a9be6, #1a57e6);
  97.             bottom: 0;
  98.         }
  100.         .description {
  101.             width: 100%;
  102.             margin-top: 0;
  103.             margin-left: 1rem;
  104.             margin-bottom: 3rem;
  105.         }
  107.         .card {
  108.             color: inherit;
  109.             width: calc(33% - 2rem);
  110.             min-width: calc(33% - 2rem);
  111.             height: 200px;
  112.             min-height: 200px;
  113.             perspective: 1000px;
  114.             margin: 1rem;
  115.             position: relative;
  116.             border:none;
  117.         }
  118.         @media screen and (max-width: 800px) {
  119.             .card {
  120.                 width: calc(50% - 2rem);
  121.             }
  122.         }
  123.         @media screen and (max-width: 500px) {
  124.             .card {
  125.                 /*width: 100%;*/
  126.             }
  127.             .card p{
  128.                 font-size: 12px;
  129.             }
  130.             .frontWeb,
  131.             .back{
  132.                 height: 150px!important;
  133.                 min-height: 150px!important;
  134.             }
  135.         }
  137.         .frontWeb,
  138.         .back {
  139.             display: flex;
  140.             border-radius: 6px;
  141.             background-position: center;
  142.             background-size: cover;
  143.             text-align: center;
  144.             justify-content: center;
  145.             align-items: center;
  146.             position: absolute;
  147.             height: 100%;
  148.             width: 100%;
  149.             -webkit-backface-visibility: hidden;
  150.             backface-visibility: hidden;
  151.             transform-style: preserve-3d;
  152.             transition: ease-in-out 600ms;
  153.         }
  155.         .frontWeb {
  156.             cursor: pointer;
  157.             background-size: cover;
  158.             padding: 2rem;
  159.             font-size: 1.62rem;
  160.             font-weight: 600;
  161.             color: rgba(255, 255, 255, 0.8);
  162.             overflow: hidden;
  163.             font-family: Poppins, sans-serif;
  164.         }
  165.         .frontWeb:before {
  166.             position: absolute;
  167.             display: block;
  168.             content: "";
  169.             top: 0;
  170.             left: 0;
  171.             right: 0;
  172.             bottom: 0;
  173.             background: #000;
  174.             opacity: 0.7;
  175.             z-index: -1;
  176.         }
  177.         .card:hover .frontWeb {
  178.             transform: rotateY(180deg);
  179.         }
  180.         @media screen and (max-width: 800px) {
  181.             .card:hover .frontWeb {
  182.                 transform: rotateY(0deg);
  183.             }
  184.         }
  185.         .card:nth-child(even):hover .frontWeb {
  186.             transform: rotateY(-180deg);
  187.         }
  188.         @media screen and (max-width: 800px) {
  189.             .card:nth-child(even):hover .frontWeb {
  190.                 transform: rotateY(0deg);
  191.             }
  192.         }
  194.         .card {
  195.             -webkit-transition: transform 0.6s;
  196.             transform-style: preserve-3d;
  197.             transition: 0.5s;
  198.             -webkit-transition: 0.5s;
  199.             position: relative;
  200.             transition: transform 0.6s;
  201.             -webkit-transition: transform 0.6s;
  202.         }
  204.         .card.flip {
  205.             transform: rotateY(180deg);
  206.             -webkit-transform: rotateY(180deg);
  207.         }
  209.         .back {
  210.             background: #fff;
  211.             transform: rotateY(-180deg);
  212.             padding: 0 2em;
  213.         }
  214.         .card:hover .back {
  215.             transform: rotateY(0deg);
  216.         }
  217.         @media screen and (max-width: 800px) {
  218.             .card:hover .back {
  219.                 transform: rotateY(-180deg);
  220.             }
  221.         }
  222.         .card:nth-child(even) .back {
  223.             transform: rotateY(180deg);
  224.         }
  225.         .card:nth-child(even):hover .back {
  226.             transform: rotateY(0deg);
  227.         }
  228.         @media screen and (max-width: 800px) {
  229.             .card:nth-child(even):hover .back {
  230.                 transform: rotateY(180deg);
  231.             }
  232.         }
  234.         .button {
  235.             text-decoration: none;
  236.             transform: translateZ(40px);
  237.             cursor: pointer;
  238.             -webkit-backface-visibility: hidden;
  239.             backface-visibility: hidden;
  240.             font-weight: bold;
  241.             color: #fff;
  242.             padding: 0.5em 1em;
  243.             border-radius: 100px;
  244.             font: inherit;
  245.             background: linear-gradient(135deg, #1a9be6, #1a57e6);
  246.             border: none;
  247.             position: relative;
  248.             transform-style: preserve-3d;
  249.             transition: 300ms ease;
  250.         }
  251.         .button:before {
  252.             transition: 300ms ease;
  253.             position: absolute;
  254.             display: block;
  255.             content: "";
  256.             transform: translateZ(-40px);
  257.             -webkit-backface-visibility: hidden;
  258.             backface-visibility: hidden;
  259.             height: calc(100% - 20px);
  260.             width: calc(100% - 20px);
  261.             border-radius: 100px;
  262.             left: 10px;
  263.             top: 16px;
  264.             box-shadow: 0 0 10px 10px rgba(26, 87, 230, 0.25);
  265.             background-color: rgba(26, 87, 230, 0.25);
  266.         }
  267.         .button:hover {
  268.             text-decoration: underline;
  269.             transform: translateZ(55px);
  270.         }
  271.         .button:hover:before {
  272.             transform: translateZ(-55px);
  273.         }
  274.         .button:active {
  275.             transform: translateZ(20px);
  276.         }
  277.         .button:active:before {
  278.             transform: translateZ(-20px);
  279.             top: 12px;
  280.         }
  282.         .movie_gens {
  283.             font-size: 12.5px;
  284.         }
  286.         .release_date {
  287.             font-weight: bold;
  288.         }
  289.         .release_date span {
  290.             font-weight: normal;
  291.         }
  293.         #btnFlipHover {
  294.             display: none;
  295.         }
  297.         #blogSlider {
  298.             position: relative;
  299.         }
  300.         #blogSlider .MS-content {
  301.             white-space: nowrap;
  302.             overflow: hidden;
  303.             /*margin: 0 5%;*/
  304.         }
  305.         #blogSlider .MS-content .item {
  306.             display: inline-block;
  307.             width: 33.3333%;
  308.             position: relative;
  309.             vertical-align: top;
  310.             overflow: hidden;
  311.             height: 100%;
  312.             white-space: normal;
  313.             padding: 0 10px;
  314.         }
  315.         @media (max-width: 991px) {
  316.             #blogSlider .MS-content .item {
  317.                 width: 50%;
  318.             }
  319.         }
  320.         @media (max-width: 767px) {
  321.             #blogSlider .MS-content .item {
  322.                 width: 100%;
  323.             }
  324.         }
  325.         #blogSlider .MS-content .item .imgTitle {
  326.             position: relative;
  327.         }
  328.         #blogSlider .MS-content .item .imgTitle .blogTitle {
  329.             margin: 0;
  330.             text-align: left;
  331.             letter-spacing: 2px;
  332.             color: #252525;
  333.             font-style: italic;
  334.             position: absolute;
  335.             background-color: rgba(255, 255, 255, 0.5);
  336.             width: 100%;
  337.             bottom: 0;
  338.             font-weight: bold;
  339.             /*padding: 0 0 2px 10px;*/
  340.         }
  341.         #blogSlider .MS-content .item .imgTitle img {
  342.             height: auto;
  343.             width: 100%;
  344.         }
  345.         #blogSlider .MS-content .item p {
  346.             font-size: 16px;
  347.             margin: 2px 10px 0 5px;
  348.             text-indent: 15px;
  349.         }
  350.         #blogSlider .MS-content .item a {
  352.             margin: 0 20px 0 0;
  353.             font-size: 16px;
  354.             font-weight: bold;
  355.             letter-spacing: 1px;
  356.             transition: linear 0.1s;
  357.         }
  358.         #blogSlider .MS-content .item a:hover {
  359.             text-shadow: 0 0 1px grey;
  360.         }
  361.         #blogSlider .MS-controls button {
  362.             position: absolute;
  363.             border: none;
  364.             background-color: #f1f1f16b;
  365.             outline: 0;
  366.             font-size: 50px;
  367.             top: 205px;
  368.             color: rgba(0, 0, 0, 0.4);
  369.             transition: 0.15s linear;
  370.         }
  371.         #blogSlider .MS-controls button:hover {
  372.             color: rgba(0, 0, 0, 0.8);
  373.         }
  374.         @media (max-width: 992px) {
  375.             #blogSlider .MS-controls button {
  376.                 font-size: 30px;
  377.             }
  378.         }
  379.         @media (max-width: 767px) {
  380.             #blogSlider .MS-controls button {
  381.                 font-size: 20px;
  382.             }
  383.         }
  384.         #blogSlider .MS-controls .MS-left {
  385.             left: 0px;
  386.         }
  387.         @media (max-width: 767px) {
  388.             #blogSlider .MS-controls .MS-left {
  389.                 left: -10px;
  390.             }
  391.         }
  392.         #blogSlider .MS-controls .MS-right {
  393.             right: -15px;
  394.         }
  395.         @media (max-width: 767px) {
  396.             #blogSlider .MS-controls .MS-right {
  397.                 right: -10px;
  398.             }
  399.             .lastMenu{
  400.                 margin-left: 30%;
  401.             }
  402.         }
  404.         .o-hidden {
  405.             overflow:hidden;
  406.         }
  408.         .nav {
  409.             transition: transform 0.4s;
  410.             transform: translateX(50%);
  411.             left: -50%;
  412.         }
  414.         .nav.justify-content-end {
  415.             transform: translateX(0);
  416.             left: 0;
  417.         }
  419.         .news {
  420.             width: 160px;
  421.             height: 50px;
  422.         }
  424.         .news-scroll a {
  425.             text-decoration: none
  426.         }
  428.         .dot {
  429.             height: 6px;
  430.             width: 6px;
  431.             margin-left: 3px;
  432.             margin-right: 3px;
  433.             margin-top: 2px !important;
  434.             background-color: {% if first_color != ''%}{{first_color}}{% else %}#7f3e98{% endif %};
  435.             border-radius: 50%;
  436.             display: inline-block
  437.         }
  439.         .ck.ck-editor__main>.ck-editor__editable:not(.ck-focused){
  440.             border-color: transparent!important;
  441.         }
  442.         .ck.ck-editor__main>.ck-editor__editable:not(.ck-editor__nested-editable).ck-focused{
  443.             border: transparent!important;
  444.         }
  445.         marquee p {
  446.             display: contents;
  447.         }
  448.         @media (max-width: 334px){
  449.             #left-margin{
  450.                 margin-left: unset!important;
  451.             }
  452.             .head-1{
  453.                 width: 35%!important;
  454.             }
  455.             .head-2{
  456.                 width: 35%!important;
  457.             }
  458.             .head-3{
  459.                 width: 45%!important;
  460.             }
  461.             .head-4{
  462.                 width: 40%!important;
  463.             }
  464.             .head-5{
  465.                 width: 40%!important;
  466.             }
  470.         }
  472.         @media  (min-width: 335px) and (max-width: 425px){
  473.             #left-margin{
  474.                 margin-left: 1%!important;
  475.             }
  476.             #rigth-margin{
  477.                 margin-right: 2%!important;
  478.             }
  480.             .head-1{
  481.                 width: 35%!important;
  482.             }
  483.             .head-2{
  484.                 width: 35%!important;
  485.             }
  486.             .head-3{
  487.                 width: 45%!important;
  488.             }
  489.             .head-4{
  490.                 width: 40%!important;
  491.             }
  492.             .head-5{
  493.                 width: 40%!important;
  494.             }
  496.         }
  501.     </style>
  503. {% endblock %}
  505. {% block body %}
  508.     <div class=" d-flex flex-column flex-row-fluid">
  509.         {% set testD = 0 %}
  510.         {% set sNotif = [] %}
  511.         {% if school_notifs|length >0 %}
  512.             {% for no in school_notifs %}
  513.                 {% if no.startAt is not null %}
  514.                     {% if date_now >= no.startAt %}
  515.                         {% if no.expiredAt is not null  %}
  516.                             {% if no.expiredAt >= date_now %}
  517.                                 {% set sNotif = sNotif|merge([no]) %}
  518.                             {% endif %}
  519.                         {% else %}
  520.                             {% set sNotif = sNotif|merge([no]) %}
  521.                         {% endif %}
  523.                     {% endif %}
  524.                 {% else %}
  525.                     {% if no.expiredAt is not null  %}
  526.                         {% if no.expiredAt >= date_now %}
  527.                             {% set sNotif = sNotif|merge([no]) %}
  528.                         {% endif %}
  529.                     {% else %}
  530.                         {% set sNotif = sNotif|merge([no]) %}
  532.                     {% endif %}
  533.                 {% endif %}
  534.             {% endfor %}
  535.         {% endif %}
  536.         {% if educati_notifs|length >0 %}
  537.             {% set testD = 1 %}
  538.         {% endif %}
  539.         {% if sNotif|length >0 %}
  540.             {% set testD = 1 %}
  541.         {% endif %}
  543.         {% if testD == 1 %}
  544.         <div class=" mt-5">
  545.             <div class="row">
  546.                 <div class="col-md-12">
  547.                     <div class="d-flex justify-content-between align-items-center breaking-news " style="
  548.                     border-bottom-style: solid;border-bottom-color:  {% if first_color != ''%}{{first_color}}{% else %}#7f3e98{% endif %}24!important;border-bottom-width: 2px;
  549.                     ">
  551.                         <marquee style="display: inline-block;font-size: 16px;min-height: 35px; padding-top: 6px;" class="news-scroll" behavior="scroll" direction="left" onmouseover="this.stop();" onmouseout="this.start();">
  553.                             {% for n in sNotif %}
  554.                                 <span>{{ n.content|raw }}</span><i class="dot" style="margin-right: 10px"></i>
  555.                             {% endfor %}
  556.                             {% for n in educati_notifs %}
  557.                                 <span>{{ n.content|raw }}</span><i class="dot" style="margin-right: 10px"></i>
  558.                             {% endfor %}
  559.                         </marquee>
  560.                     </div>
  561.                 </div>
  562.             </div>
  563.         </div>
  564.         {% endif %}
  567.         <div class="card-header row align-items-center" style="padding:.1rem 0.9rem!important;" >
  568.             <div class="flex-shrink-0" style="width: 3%;margin-right: 2%;" id="right-margin">
  569.                 <a id="left-button" style="float: right" href="#" class="btn-left btn-link toggle text-dark"><i style="" class="bi bi-caret-left"></i></a>
  570.             </div>
  571.             <div id="nav-link" class=" d-flex align-items-center  scrolling-wrapper row  flex-nowrap mt-4 pb-4 pt-2 foo scrollItem" style="
  572.              width: 90%; scroll-behavior: smooth;overflow-x: auto;-webkit-overflow-scrolling: touch;scroll-snap-type: x mandatory;">
  573.                 <div class=" head-1" style="width: 20%" >
  574.                     <div class=" nav-item dropdown list-item">
  575.                         <a class=" dropdown-toggle text-center minimalist_item text-primary  " data-bs-popperConfig="null"  href="#" id="navbarDropdown1" role="button" data-bs-toggle="dropdown" aria-expanded="false">
  576.                             {{ 'minimalis_template_item0'|trans }}
  577.                         </a>
  578.                         <ul class="dropdown-menu " aria-labelledby="navbarDropdown">
  579.                             {%  for p in frontend_page %}
  580.                                 {% if p.adminLink == 'admin_page_director_speech' %}
  581.                                     <li><a class="dropdown-item text-primary" href="#{{ p.slug }}">{{ p.name }}</a></li>
  582.                                 {% endif %}
  583.                                 {% if p.adminLink == 'admin_page_blog' %}
  584.                                     <li><a class="dropdown-item text-primary" href="{{ path('app_show_frontend_page',{'slug':p.slug}) }}">{{ p.name }}</a></li>
  585.                                 {% endif %}
  586.                             {% endfor %}
  587.                             <li><a class="dropdown-item text-primary" href="#summary_page">{{ 'summary_page'|trans }}</a></li>
  588.                         </ul>
  589.                     </div>
  590.                 </div>
  591.                 <div class="head-2" style="width: 20%">
  592.                     <div class="  nav-item dropdown list-item">
  593.                         <a class="nav-link dropdown-toggle text-center minimalist_item text-primary " href="#" id="navbarDropdown2" role="button" data-bs-toggle="dropdown" aria-expanded="false">
  594.                             {{ 'minimalis_template_item1'|trans }}
  595.                         </a>
  596.                         <ul class="dropdown-menu " aria-labelledby="navbarDropdown">
  597.                             {%  for p in frontend_page %}
  598.                                 {% if p.adminLink == 'admin_page_about_us' %}
  599.                                     <li><a class="dropdown-item text-primary" href="{{ path('page_about') }}#{{ p.slug }}">{{ p.name }}</a></li>
  600.                                 {% endif %}
  601.                                 {% if p.adminLink == 'admin_page_story' %}
  602.                                     <li><a class="dropdown-item text-primary" href="{{ path('page_about') }}#{{ p.slug }}">{{ p.name }}</a></li>
  603.                                 {% endif %}
  604.                                 {% if p.adminLink == 'admin_page_team' %}
  605.                                     <li><a class="dropdown-item text-primary" href="{{ path('page_about') }}#{{ p.slug }}">{{ p.name }}</a></li>
  606.                                 {% endif %}
  607.                             {% endfor %}
  608.                         </ul>
  609.                     </div>
  610.                 </div>
  611.                 <div class=" head-3" style="width: 30%" >
  612.                     <div class="nav-item dropdown list-item">
  613.                         <a class="nav-link dropdown-toggle text-center minimalist_item text-primary " href="#" id="navbarDropdown3" role="button" data-bs-toggle="dropdown" aria-expanded="false">
  614.                             {{ 'minimalis_template_item2'|trans }}
  615.                         </a>
  616.                         <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
  617.                             {%  for p in frontend_page %}
  618.                                 {% if p.adminLink == 'admin_page_our_mission' %}
  619.                                     <li><a class="dropdown-item text-primary" href="{{ path('page_school_life') }}#{{ p.slug }}">{{ p.name }}</a></li>
  620.                                 {% endif %}
  621.                                 {% if p.adminLink == 'admin_page_infrastructure' %}
  622.                                     <li><a class="dropdown-item text-primary" href="{{ path('page_school_life') }}#{{ p.slug }}">{{ p.name }}</a></li>
  623.                                 {% endif %}
  624.                                 {% if p.adminLink == 'admin_page_activity' %}
  625.                                     <li><a class="dropdown-item text-primary" href="{{ path('page_school_life') }}#{{ p.slug }}">{{ p.name }}</a></li>
  626.                                 {% endif %}
  627.                                 {% if p.adminLink == 'admin_page_partner' %}
  628.                                     <li><a class="dropdown-item text-primary" href="{{ path('page_school_life') }}#{{ p.slug }}">{{ p.name }}</a></li>
  629.                                 {% endif %}
  630.                             {% endfor %}
  631.                         </ul>
  632.                     </div>
  633.                 </div>
  634.                 <div class="head-4" style="width: 30%" >
  635.                     <div class="nav-item dropdown list-item">
  636.                         <a class="nav-link dropdown-toggle text-center minimalist_item text-primary " href="#" id="navbarDropdown4" role="button" data-bs-toggle="dropdown" aria-expanded="false">
  637.                             {{ 'minimalis_template_item3'|trans }}
  638.                         </a>
  639.                         <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
  640.                             {%  for p in frontend_page %}
  641.                                 {% if p.adminLink == 'admin_page_pedagogy' %}
  642.                                     <li><a class="dropdown-item text-primary" href="{{ path('page_student_parent') }}#{{ p.slug }}">{{ p.name }}</a></li>
  643.                                 {% endif %}
  644.                                 {% if p.adminLink == 'admin_page_calendar' %}
  645.                                     <li><a class="dropdown-item text-primary" href="{{ path('page_student_parent') }}#{{ p.slug }}">{{ p.name }}</a></li>
  646.                                 {% endif %}
  647.                                 {% if p.adminLink == 'admin_page_admission' %}
  648.                                     <li><a class="dropdown-item text-primary" href="{{ path('page_student_parent') }}#{{ p.slug }}">{{ p.name }}</a></li>
  649.                                 {% endif %}
  650.                                 {% if p.adminLink == 'admin_page_students' %}
  651.                                     <li><a target="_blank" class="dropdown-item text-primary" href="{{ path('app_show_frontend_page',{'slug':p.slug}) }}" style="font-weight: bold"><strong style="color:red;font-weight:bold;font-size:16px">F</strong>inote</a></li>
  652.                                 {% endif %}
  653.                                 {% if p.adminLink == 'admin_page_bank_of_test' %}
  654.                                     <li><a class="dropdown-item text-primary" href="{{ path('app_show_frontend_page',{'slug':p.slug}) }}">{{ p.name }}</a></li>
  655.                                 {% endif %}
  656.                             {% endfor %}
  658.                         </ul>
  659.                     </div>
  660.                 </div>
  661.                 <div style="width: 30%" class="head-5 lastMenu">
  662.                 <div class="nav-item dropdown list-item">
  663.             <a class="nav-link dropdown-toggle text-center minimalist_item text-primary " href="#" id="navbarDropdown5" role="button" data-bs-toggle="dropdown" aria-expanded="false">
  664.                 {{ 'minimalis_template_item4'|trans }}
  665.             </a>
  666.             <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
  667.                 {%  for p in frontend_page %}
  668.                     {% if p.adminLink == 'admin_page_gallery' %}
  669.                         <li><a class="dropdown-item text-primary" href="{{ path('app_show_frontend_page',{'slug':p.slug}) }}">{{ p.name }}</a></li>
  670.                     {% endif %}
  671.                 {% endfor %}
  673.             </ul>
  674.         </div>
  675.              </div>
  676.             </div>
  677.             <div class="flex-shrink-0" style="width: 3%;margin-left: 2%;" id="left-margin">
  678.                 <a id="right-button" style="" href="#" class="btn-right btn-link toggle text-dark"><i style="" class="bi bi-caret-right"></i></a>
  679.             </div>
  681.         </div>
  682.         <div class="card-body " style="padding: 0rem 0rem;">
  683.             <div class="">
  684.                 <div id="mobile-background" style="position: absolute;filter: blur(2px);-webkit-filter: blur(2px);" class="container-fluid"></div>
  685.                 {% if images_slider|length >0 %}
  686.                     <div class="" id="carroussel-desktop">
  687.                         <div id="carouselExampleIndicators" class="carousel slide mb-5" data-bs-ride="carousel" style=" background: transparent;" >
  688.                             <div class="carousel-indicators">
  689.                                 {% for im in images_slider  %}
  690.                                     <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="{{ loop.index -1 }}" class="active" aria-current="true" aria-label="Slide {{ loop.index }}"></button>
  691.                                 {% endfor %}
  692.                             </div>
  693.                             <div class="carousel-inner">
  694.                                 {% for im in images_slider  %}
  695.                                     <div id="img-{{ loop.index}}" class="carousel-item {% if loop.index == 1 %}active{% endif %}" style="">
  696.                                         {% if im.image == '' %}
  697.                                             <img style="max-height: 600px;object-fit:fill;" class="d-block  " src="{{ asset('assets/media/avatars/background.jpeg') }}" alt="">
  698.                                         {% else %}
  699.                                             <img style="max-height: 600px;object-fit: fill; margin: auto;"  class="d-block  " src="{{ asset('uploads/'~im.image) }}" alt="">
  700.                                         {% endif %}
  701.                                         <div class="carousel-caption " style="text-align: center;padding: 10px;opacity: 0.8">
  702.                                             <h3 class="home-title school-name" style="text-shadow: 1px 1px 2px #f1edf3, 0 0 1em #f1edf3, 0 0 0.2em #f1edf3;color: {% if first_color != ''%}{{first_color}}{% else %}#7f3e98{% endif %} !important" >
  703.                                                 {{ school_global.name }}
  705.                                             </h3>
  706.                                             <p>
  707.                                                 {% if school_global.slogan != ''  %}
  708.                                                     <span style="font-size: 12px;color: {% if first_color != ''%}{{first_color}}{% else %}#7f3e98{% endif %} !important;text-shadow: 1px 1px 2px #f1edf3, 0 0 1em #f1edf3, 0 0 0.2em #f1edf3">{{ school_global.slogan }}</span>
  709.                                                 {% endif %}
  710.                                             </p>
  711.                                         </div>
  712.                                     </div>
  713.                                 {% endfor %}
  714.                             </div>
  715.                             <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
  716.                                 <span class="carousel-control-prev-icon" aria-hidden="true"></span>
  717.                                 <span class="visually-hidden">Previous</span>
  718.                             </button>
  719.                             <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
  720.                                 <span class="carousel-control-next-icon" aria-hidden="true"></span>
  721.                                 <span class="visually-hidden">Next</span>
  722.                             </button>
  723.                         </div>
  726.                     </div>
  727.                     <div class="" id="carroussel-mobile">
  728.                         <div id="carouselExampleIndicators2" class="carousel slide mb-5" data-bs-ride="carousel" style=" background: transparent;" >
  730.                             <div class="carousel-indicators">
  731.                                 {% for im in images_slider  %}
  732.                                     <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="{{ loop.index -1 }}" class="active" aria-current="true" aria-label="Slide {{ loop.index }}"></button>
  733.                                 {% endfor %}
  734.                             </div>
  735.                             <div class="carousel-inner">
  736.                                 {% for im in images_slider  %}
  737.                                     <div id="img-mini-{{ loop.index}}" class="carousel-item {% if loop.index == 1 %}active{% endif %}"
  738.                                             {% if im.imageMini == '' %}
  739.                                                 style="background-image: url('{{ asset('uploads/'~im.image) }}');height: 600px;object-fit: fill;background-size: cover;background-position: 50% 50%;background-repeat: no-repeat"
  740.                                             {% else %}
  741.                                                 style="background-image: url('{{ asset('uploads/'~im.imageMini) }}');height: 600px;object-fit: fill;background-size:cover;background-position: 50% 50%;background-repeat: no-repeat"
  742.                                             {% endif %}
  743.                                     >
  745.                                         <div class="carousel-caption " style="text-align: left;padding: 10px;opacity: 0.8">
  746.                                             <h3 class="home-title school-name" style="color: {% if first_color != ''%}{{first_color}}{% else %}#7f3e98{% endif %} !important">
  747.                                                 {{ school_global.name }}
  749.                                             </h3>
  750.                                             <p>
  751.                                                 {% if school_global.slogan != ''  %}
  752.                                                     <span style="font-size: 12px;color: {% if first_color != ''%}{{first_color}}{% else %}#7f3e98{% endif %} !important">{{ school_global.slogan }}</span>
  753.                                                 {% endif %}
  754.                                             </p>
  755.                                         </div>
  756.                                     </div>
  757.                                 {% endfor %}
  758.                             </div>
  759.                             <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators2" data-bs-slide="prev">
  760.                                 <span class="carousel-control-prev-icon" aria-hidden="true"></span>
  761.                                 <span class="visually-hidden">Previous</span>
  762.                             </button>
  763.                             <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators2" data-bs-slide="next">
  764.                                 <span class="carousel-control-next-icon" aria-hidden="true"></span>
  765.                                 <span class="visually-hidden">Next</span>
  766.                             </button>
  767.                         </div>
  770.                     </div>
  773.                 {% endif %}
  774.             </div>
  776.             {%  for p in frontend_page %}
  777.                 {% if p.adminLink == 'admin_page_director_speech' %}
  778.                     {% if p.richText != ''  %}
  779.                     <div class="row container scrool-div" id="{{ p.slug }}" style="margin-top: 32px">
  780.                         <div class="richText">
  781.                             <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">
  782.                                 {{  p.richText|raw }}
  783.                             </div>
  786.                         </div>
  787.                     </div>
  788.                     {% endif %}
  789.                 {% endif %}
  790.             {% endfor %}
  792.             <main class="scrool-div" id="d-b" style="min-height: {% if articles|length > 0%}400px{% else %} 50px {% endif %};margin-top: 50px">
  794.                 {%  if display_articles == 1 %}
  795.                     <!-- ======= News ======= -->
  796.                     {% if articles|length > 0%}
  797.                         <section id="article" class="about-us" style="margin-top: 32px">
  798.                             <div id="blogSlider" class="  mb-100">
  799.                                 <div class="section-title">
  800.                                     <a href="{{ path('app_show_frontend_page',{'slug':page_blog.slug}) }}"> <h2 class="bold text-center text-primary" style="text-align: center">{{ page_blog.name }}</h2></a>
  801.                                 </div>
  802.                                 <div class="MS-content ">
  803.                                     {% for a in articles %}
  804.                                         <div  class="item card" style="margin: 0rem!important;">
  805.                                             <div class="imgTitle">
  806.                                                 {% if a.imageCover == '' %}
  808.                                                     <img onclick='window.location = "{{ path('blog_show_article',{slug:a.slug}) }}"' style="height: 200px;cursor: pointer;object-fit: cover" src="{{ asset('assets/media/avatars/blank.png') }}" alt="" />
  809.                                                 {% else %}
  811.                                                     <img  onclick='window.location = "{{ path('blog_show_article',{slug:a.slug}) }}"' style="height: 200px;cursor: pointer;object-fit: cover" src="{{ asset('uploads/'~a.imageCover) }}" alt="" />
  812.                                                 {% endif %}
  814.                                             </div>
  815.                                             <h5  class="trun" style="height: 30px;padding-top: 4px">
  816.                                                 <a style="font-size: 14px;color: black"  href="{{ path('blog_show_article',{slug:a.slug}) }}">
  817.                                                     {{ a.title|slice(0,40) }} {% if a.title|length >40 %} ...{% endif %}
  819.                                                 </a>
  820.                                             </h5>
  823.                                             <div class="trun" style="font-size: 13px;">
  824.                                                 {{ a.content|striptags|u.truncate(50, '...')|raw  }}
  826.                                             </div>
  827.                                             <div class="read-more mt-2">
  828.                                                 <a style="font-size: 11px" class="btn btn-link btn-get-started " href="{{ path('blog_show_article',{slug:a.slug}) }}">{{ 'read_more'|trans }}</a>
  830.                                             </div>
  834.                                         </div>
  837.                                     {% endfor %}
  839.                                     {% for a in educati_articles %}
  840.                                         <div  class="item card" style="margin: 0rem!important;">
  841.                                             <div class="imgTitle">
  842.                                                 <img onclick='window.open("{{ educati_article_show~a.slug  }}", "_blank");' style="height: 200px;cursor: pointer;object-fit: cover" src="{{ educati_uploads_dir }}{{ a.image_cover }}" alt="" />
  843.                                             </div>
  844.                                             <h5  class="trun" style="height: 30px;padding-top: 4px">
  845.                                                 <a style="font-size: 14px;color: black" target="_blank"  href="{{ educati_article_show~a.slug  }}">
  846.                                                     {{ a.title|slice(0,40) }} {% if a.title|length >40 %} ...{% endif %}
  848.                                                 </a>
  849.                                             </h5>
  852.                                             <div class="trun" style="font-size: 13px;">
  853.                                                 {{ a.content|striptags|u.truncate(50, '...')|raw  }}
  855.                                             </div>
  856.                                             <div class="read-more mt-2">
  857.                                                 <a style="font-size: 11px" target="_blank" class="btn btn-link btn-get-started " href="{{ educati_article_show~a.slug }}">{{ 'read_more'|trans }}</a>
  859.                                             </div>
  862.                                         </div>
  865.                                     {% endfor %}
  867.                                 </div>
  868.                                 <div class="MS-controls">
  869.                                     <button class="MS-left"><i class="bi bi-arrow-left" aria-hidden="true"></i></button>
  870.                                     <button class="MS-right"><i class="bi bi-arrow-right" aria-hidden="true"></i></button>
  871.                                 </div>
  872.                             </div>
  874.                         </section>
  875.                     {% else %}
  876.                         {% if educati_articles|length > 0 %}
  877.                             <section id="article" class="about-us" style="margin-top: 32px">
  878.                                 <div id="blogSlider" class="  mb-100">
  879.                                     <div class="section-title">
  880.                                         <a href="{{ path('app_show_frontend_page',{'slug':page_blog.slug}) }}"> <h2 class="bold text-center text-primary" style="text-align: center">{{ page_blog.name }}</h2></a>
  881.                                     </div>
  882.                                     <div class="MS-content ">
  883.                                         {% for a in educati_articles %}
  884.                                             <div  class="item card" style="margin: 0rem!important;">
  885.                                                 <div class="imgTitle">
  886.                                                     <img onclick='window.open("{{ educati_article_show~a.slug  }}", "_blank");' style="height: 200px;cursor: pointer;object-fit: cover" src="{{ educati_uploads_dir }}{{ a.image_cover }}" alt="" />
  887.                                                 </div>
  888.                                                 <h5  class="trun" style="height: 30px;padding-top: 4px">
  889.                                                     <a style="font-size: 14px;color: black" target="_blank"  href="{{ educati_article_show~a.slug  }}">
  890.                                                         {{ a.title|slice(0,40) }} {% if a.title|length >40 %} ...{% endif %}
  892.                                                     </a>
  893.                                                 </h5>
  896.                                                 <div class="trun" style="font-size: 13px;">
  897.                                                     {{ a.content|striptags|u.truncate(50, '...')|raw  }}
  899.                                                 </div>
  900.                                                 <div class="read-more mt-2">
  901.                                                     <a style="font-size: 11px" target="_blank" class="btn btn-link btn-get-started " href="{{ educati_article_show~a.slug }}">{{ 'read_more'|trans }}</a>
  903.                                                 </div>
  906.                                             </div>
  909.                                         {% endfor %}
  911.                                     </div>
  912.                                     <div class="MS-controls">
  913.                                         <button class="MS-left"><i class="bi bi-arrow-left" aria-hidden="true"></i></button>
  914.                                         <button class="MS-right"><i class="bi bi-arrow-right" aria-hidden="true"></i></button>
  915.                                     </div>
  916.                                 </div>
  918.                             </section>
  920.                         {% endif %}
  921.                     {% endif %}
  923.                 {% else %}
  925.                     {% if images|length >0 %}
  927.                         {%  for p in frontend_page %}
  928.                         {% if p.adminLink == 'admin_page_gallery' %}
  929.                             <a href="{{ path('app_show_frontend_page',{'slug':p.slug}) }}"> <h2 class="mb-5 bold text-center text-primary" style="text-align: center;margin-top: 32px">{{ p.name }} </h2></a>
  931.                         {% endif %}
  932.                         {% endfor %}
  933.                         <div class="gallery">
  934.                             {% for img in images %}
  935.                                 {% if loop.index <= 3 %}
  936.                                 <a href="{{ asset('uploads/'~img.image) }}" class="big" rel="rel1">
  937.                                     <img style="max-height: 300px;object-fit: cover;" class="img-fluid" src="{{ asset('uploads/'~img.image) }}" alt="" title="{{ img.description|raw }}">
  938.                                 </a>
  939.                                 {% endif %}
  940.                             {% endfor %}
  941.                         </div>
  942.                     {% endif %}
  944.                 {% endif %}
  949.             </main>
  951.             {% if info != null %}
  953.             <div id="summary_page" class="scrool-div d-flex flex-column flex-row-fluid" style="margin-top: 32px">
  954.                 <div class="card-body row pt-head">
  955.                     <h2 class="bold text-center text-primary">{{ 'summary_page'|trans }}</h2>
  957.                         <div class="row container-fluid">
  958.                             {% if  info.creationYear != '' %}
  959.                                 <div class="card col-lg-4 col-md-4 col-sm-6">
  960.                                     <div class="frontWeb" style='background-image: url("{{ asset('assets/media/avatars/from.jpg') }}");'>
  961.                                         <p><span class="fs-6">{{ 'from_origin'|trans }} </span><br/> {{ info.creationYear }}</p>
  962.                                     </div>
  964.                                     <div class="back">
  965.                                         <div>
  966.                                             <div class="release_date"> <span>{{ 'creation_year'|trans}} <br/> ({{ info.creationYear }})</span></div>
  968.                                         </div>
  969.                                     </div>
  971.                                 </div>
  972.                             {% endif %}
  973.                             {% if  info.schoolReligion != null  %}
  974.                                 <div class="card col-lg-4 col-md-4 col-sm-6">
  975.                                     <div class="frontWeb" style='background-image: url("{{ asset('assets/media/avatars/religion2.jpeg') }}");'>
  976.                                         <p><span class="fs-6">{{ 'school_religion'|trans}}</span><br/>{{ info.schoolReligion.name }}</p>
  977.                                     </div>
  979.                                     <div class="back">
  980.                                         <div>
  981.                                             <div class="release_date">{{ 'school_religion'|trans}} <br/> {{ info.schoolReligion.name }}</div>
  983.                                         </div>
  984.                                     </div>
  986.                                 </div>
  987.                             {% endif %}
  989.                             {% if info.schoolCycles|length >0 %}
  990.                                 <div class="card col-lg-4 col-md-4 col-sm-6">
  991.                                     <div class="frontWeb" style='background-image: url("{{ asset('assets/media/avatars/level.png') }}");'>
  992.                                         <p>
  993.                                             <span class="fs-6">{{ 'school_cycle'|trans}}</span>
  994.                                             {% for c in info.schoolCycles  %}
  995.                                                 <br/> {{ c.name }}
  996.                                             {% endfor %}
  997.                                         </p>
  998.                                     </div>
  1000.                                     <div class="back">
  1001.                                         <div>
  1002.                                             <div class="release_date">
  1003.                                                 {{ 'school_cycle'|trans}} <br/>
  1004.                                                 {% for c in info.schoolCycles  %}
  1005.                                                     <br/> {{ c.name }}
  1006.                                                 {% endfor %}
  1007.                                             </div>
  1008.                                         </div>
  1009.                                     </div>
  1011.                                 </div>
  1012.                             {% endif %}
  1014.                             {% if  info.nbStudent != '' %}
  1015.                                 <div class="card col-lg-4 col-md-4 col-sm-6">
  1016.                                     <div class="frontWeb" style='background-image: url("{{ asset('assets/media/avatars/student.jpeg') }}");'>
  1017.                                         <p> <span class="fs-6">{{ 'nb_student'|trans}}</span><br/>{{ info.nbStudent }}</p>
  1018.                                     </div>
  1020.                                     <div class="back">
  1021.                                         <div>
  1022.                                             <div class="release_date">{{ 'nb_student'|trans}} <br/> {{ info.nbStudent }}</div>
  1023.                                         </div>
  1024.                                     </div>
  1026.                                 </div>
  1027.                             {% endif %}
  1029.                             {% if  info.schoolLanguage != null  %}
  1030.                                 <div class="card col-lg-4 col-md-4 col-sm-6">
  1031.                                     <div class="frontWeb" style='background-image: url("{{ asset('assets/media/avatars/language.jpeg') }}");'>
  1033.                                         <p> <span class="fs-6">{{ 'school_language'|trans}}</span><br/>{{ info.schoolLanguage.name }}</p>
  1034.                                     </div>
  1036.                                     <div class="back">
  1037.                                         <div>
  1038.                                             <div class="release_date">{{ 'school_language'|trans}} <br/> {{ info.schoolLanguage.name }}</div>
  1039.                                         </div>
  1040.                                     </div>
  1042.                                 </div>
  1043.                             {% endif %}
  1045.                             {% if  info.schoolFee != null  %}
  1046.                                 <div class="card col-lg-4 col-md-4 col-sm-6">
  1047.                                     <div class="frontWeb" style='background-image: url("{{ asset('assets/media/avatars/fee.jpeg') }}");'>
  1048.                                         <p><span class="fs-6">{{ 'school_fee'|trans}} </span><br/>{{ info.schoolFee.name }}</p>
  1049.                                     </div>
  1051.                                     <div class="back">
  1052.                                         <div>
  1053.                                             <div class="release_date">{{ 'school_fee'|trans}} <br/> {{ info.schoolFee.name }}</div>
  1054.                                         </div>
  1055.                                     </div>
  1057.                                 </div>
  1058.                             {% endif %}
  1060.                             {% if  info.hasTransportService  %}
  1061.                                 <div class="card col-lg-4 col-md-4 col-sm-6">
  1062.                                     <div class="frontWeb" style='background-image: url("{{ asset('assets/media/avatars/bus.jpeg') }}");'>
  1063.                                         <p><span class="fs-6">{{ 'transport_service'|trans }}</span></p>
  1064.                                     </div>
  1066.                                     <div class="back">
  1067.                                         <div>
  1068.                                             <div class="release_date">{{ 'transport_service'|trans }}</div>
  1069.                                         </div>
  1070.                                     </div>
  1072.                                 </div>
  1073.                             {% endif %}
  1075.                             {% if  info.hasShoolCafetaria  %}
  1076.                                 <div class="card col-lg-4 col-md-4 col-sm-6">
  1077.                                     <div class="frontWeb" style='background-image: url("{{ asset('assets/media/avatars/cafetaria.jpeg') }}");'>
  1078.                                         <p><span class="fs-6">{{ 'school_cafetaria'|trans }}</span></p>
  1079.                                     </div>
  1081.                                     <div class="back">
  1082.                                         <div>
  1083.                                             <div class="release_date">{{ 'school_cafetaria'|trans }}</div>
  1084.                                         </div>
  1085.                                     </div>
  1087.                                 </div>
  1088.                             {% endif %}
  1090.                             {% if  info.nbStaff != '' %}
  1091.                                 <div class="card col-lg-4 col-md-4 col-sm-6">
  1092.                                     <div class="frontWeb" style='background-image: url("{{ asset('assets/media/avatars/staff.jpeg') }}");'>
  1093.                                         <p><span class="fs-6">{{ 'staff_member'|trans}}</span> <br/> {{ info.nbStaff  }}</p>
  1094.                                     </div>
  1096.                                     <div class="back">
  1097.                                         <div>
  1098.                                             <div class="release_date">{{ 'staff_member'|trans}} <br/> {{ info.nbStaff  }}</div>
  1099.                                         </div>
  1100.                                     </div>
  1102.                                 </div>
  1103.                             {% endif %}
  1105.                             {% if  info.hasBoardingSchoolBoy  or info.hasBoardingSchoolGirl   %}
  1106.                                 <div class="card col-lg-4 col-md-4 col-sm-6">
  1107.                                     <div class="frontWeb" style='background-image: url("{{ asset('assets/media/avatars/bed.jpeg') }}");'>
  1108.                                         <p>
  1109.                                             {% if info.hasBoardingSchoolBoy %}
  1110.                                                 <span class="fs-6"> {{ 'boarding_school_boy'|trans }}</span>
  1111.                                                 <br/>
  1112.                                             {% endif %}
  1113.                                             {% if info.hasBoardingSchoolGirl %}
  1114.                                                 <span class="fs-6"> {{ 'boarding_school_girl'|trans }}</span>
  1115.                                             {% endif %}
  1116.                                         </p>
  1117.                                     </div>
  1119.                                     <div class="back">
  1120.                                         <div>
  1121.                                             <div class="release_date">
  1122.                                                 {% if info.hasBoardingSchoolBoy %}
  1123.                                                     {{ 'boarding_school_boy'|trans }}
  1124.                                                     <br/>
  1125.                                                 {% endif %}
  1126.                                                 {% if info.hasBoardingSchoolGirl %}
  1127.                                                     {{ 'boarding_school_girl'|trans }}
  1128.                                                 {% endif %}
  1129.                                             </div>
  1130.                                         </div>
  1131.                                     </div>
  1133.                                 </div>
  1134.                             {% endif %}
  1135.                         </div>
  1138.                 </div>
  1140.             </div>
  1141.             {% endif %}
  1145.         </div>
  1147.     </div>
  1149. {% endblock %}
  1151.  {% block js %}
  1152.      <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.2.0/js/tether.min.js"></script>
  1153.      <script src="https://cdnjs.cloudflare.com/ajax/libs/color-thief/2.3.0/color-thief.umd.js"></script>
  1154.      <script src="{{ asset('assets/plugins/custom/ckeditor/ckeditor-classic.bundle.js') }}"></script>
  1155.      <script src="{{ asset('assets/js/intense.min.js') }}"></script>
  1156.      <script src="{{ asset('assets/js/multislider.min.js') }}"></script>
  1157.      <script src="{{ asset('assets/js/simple-lightbox.jquery.min.js') }}"></script>
  1159.      <script>
  1160.          var gallery = $('.gallery a').simpleLightbox({
  1161.          });
  1163.          var dropdown1 = new bootstrap.Dropdown(document.getElementById('navbarDropdown1'), {
  1164.              popperConfig: function (defaultBsPopperConfig) {
  1165.              }
  1166.          });
  1167.          var dropdown2 = new bootstrap.Dropdown(document.getElementById('navbarDropdown2'), {
  1168.              popperConfig: function (defaultBsPopperConfig) {
  1169.              }
  1170.          });
  1171.          var dropdown3 = new bootstrap.Dropdown(document.getElementById('navbarDropdown3'), {
  1172.              popperConfig: function (defaultBsPopperConfig) {
  1173.              }
  1174.          });
  1175.          var dropdown4 = new bootstrap.Dropdown(document.getElementById('navbarDropdown4'), {
  1176.              popperConfig: function (defaultBsPopperConfig) {
  1177.              }
  1178.          });
  1179.          var dropdown5 = new bootstrap.Dropdown(document.getElementById('navbarDropdown5'), {
  1180.              popperConfig: function (defaultBsPopperConfig) {
  1181.              }
  1182.          });
  1184.          window.addEventListener('scroll', function(e) {
  1185.              dropdown1.hide();
  1186.              dropdown2.hide();
  1187.              dropdown3.hide();
  1188.              dropdown4.hide();
  1189.              dropdown5.hide();
  1190.          });
  1193.          window.onload = function() {
  1194.              var elements = document.querySelectorAll( '.demo' );
  1195.              Intense( elements );
  1196.          }
  1198.          $('#right-button').click(function() {
  1199.              event.preventDefault();
  1200.              $('#nav-link').animate({
  1201.                  scrollLeft: "+=300px"
  1202.              }, "fast");
  1203.          });
  1205.          $('#left-button').click(function() {
  1206.              event.preventDefault();
  1207.              $('#nav-link').animate({
  1208.                  scrollLeft: "-=300px"
  1209.              }, "fast");
  1210.          });
  1213.      </script>
  1214.      {%  if display_articles == 1 %}
  1215.      <script type="text/javascript">
  1216.          $('#blogSlider').multislider({
  1217.              interval: 4000,
  1218.              slideAll: false,
  1219.              duration: 2000
  1220.          });
  1222.          // duration of scroll animation
  1224.      </script>
  1225.      {% endif %}
  1226.      <script>
  1227.          const colorThief = new ColorThief();
  1229.          const rgbToHex = (r, g, b) => '#' + [r, g, b].map(x => {
  1230.              const hex = x.toString(16)
  1231.              return hex.length === 1 ? '0' + hex : hex
  1232.          }).join('')
  1234.          function getImageMainColor(id){
  1235.              const img = new Image();
  1236.              img.crossOrigin = 'Anonymous';
  1237.              img.src = $('#img-'+id).attr('data-url');
  1239.              img.addEventListener('load', function() {
  1240.                  let color =   colorThief.getColor(img);
  1241.                  let hex = rgbToHex(color[0],color[1],color[2]);
  1242.                  if($('#img-'+id).attr('data-url') !== undefined){
  1243.                      let link = $('#img-'+id.toString()).attr('data-url');
  1244.                      $('#mobile-background').css('width',document. getElementById('carouselExampleIndicators').getBoundingClientRect().width);
  1245.                      $('#mobile-background').css('height',document. getElementById('carouselExampleIndicators').getBoundingClientRect().height);
  1246.                      //$('#mobile-background').css('height',document. getElementById('carouselExampleIndicators').getBoundingClientRect().height);
  1247.                      $('#mobile-background').css('background-image',"url('"+link+"')");
  1248.                      //$('#back-image').css('background-size',"cover");
  1249.                      $('#mobile-background').css('background-size',"cover");
  1251.                      $('.carousel-control-prev-icon').css('color',invertHex(hex.split('#')[1]));
  1252.                      $('.carousel-control-next-icon').css('color',invertHex(hex.split('#')[1]));
  1253.                  }else{
  1254.                      $('#carouselExampleIndicators').css('background-color','transparent');
  1255.                  }
  1258.              });
  1263.          }
  1265.          function invertHex(hexnum){
  1266.              if(hexnum.length != 6) {
  1267.                  return "ffffff";
  1268.              }
  1270.              hexnum = hexnum.toUpperCase();
  1271.              var splitnum = hexnum.split("");
  1272.              var resultnum = "";
  1273.              var simplenum = "FEDCBA9876".split("");
  1274.              var complexnum = new Array();
  1275.              complexnum.A = "5";
  1276.              complexnum.B = "4";
  1277.              complexnum.C = "3";
  1278.              complexnum.D = "2";
  1279.              complexnum.E = "1";
  1280.              complexnum.F = "0";
  1282.              for(i=0; i<6; i++){
  1283.                  if(!isNaN(splitnum[i])) {
  1284.                      resultnum += simplenum[splitnum[i]];
  1285.                  } else if(complexnum[splitnum[i]]){
  1286.                      resultnum += complexnum[splitnum[i]];
  1287.                  } else {
  1288.                      console.error("Hex colors must only include hex numbers 0-9, and A-F");
  1289.                      return false;
  1290.                  }
  1291.              }
  1293.              return '#'+resultnum;
  1294.          }
  1295.          $('#carouselExampleIndicators').on('slide.bs.carousel', function (e) {
  1296.              getImageMainColor(parseInt(e.to,10)+1);
  1297.          });
  1299.          if($('img-1') !== undefined){
  1300.              getImageMainColor(1);
  1301.          }
  1302.          $('#carouselExampleIndicators').on('slide.bs.carousel', function (e) {
  1303.              getImageMainColor(parseInt(e.to,10)+1);
  1304.          })
  1306.          window.addEventListener('resize', function(event) {
  1307.              $('#mobile-background').css('width',document. getElementById('carouselExampleIndicators').getBoundingClientRect().width);
  1308.              $('#mobile-background').css('height',document. getElementById('carouselExampleIndicators').getBoundingClientRect().height);
  1309.          }, true);
  1310.      </script>
  1312.      <script>
  1317.      </script>
  1320.  {% endblock %}