templates/layout/includes/navegation/desktop.html.twig line 1

Open in your IDE?
  1. <style>
  2.     @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&display=swap');
  4.     {% if currentPath == '/es/empresa' or currentPath == '/en/about-us'%}
  5.         {% set isAboutUs = true%}
  6.     {% else %}
  7.         {% set isAboutUs = false %}
  8.     {% endif %}
  10.     /* Base styles */
  11.     .menu-outer {
  12.         background-color: #fff;
  13.     }
  15.     #siteNav.medium {
  16.         font-family: 'Montserrat', sans-serif;
  17.         display: flex;
  18.         align-items: center;
  19.         flex-wrap: nowrap;
  20.         list-style-type: none;
  21.         padding-left: 0;
  22.         flex-grow: 1;
  23.         justify-content: space-between;
  24.         width: 100%;
  25.         gap: 5px;
  26.     }
  28.     #siteNav.medium > li a {
  29.         font-size: 16px;
  30.         padding: 8px 15px;
  31.         font-weight: 600;
  32.         {% if is_authenticated %}
  33.         color: #6c757d;
  34.         {% else %}
  35.         color: #000000;
  36.         {% endif %}
  37.         position: relative;
  38.         display: inline-block;
  39.         overflow: hidden;
  40.         text-transform: capitalize;
  41.         border-radius: 4px;
  42.         transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out;
  43.         text-decoration: none;
  44.     }
  46.     #siteNav.medium > li > a {
  47.         margin-left: 0;
  48.     }
  50.     #siteNav.medium > li {
  51.         margin-right: 5px;
  52.     }
  54.     #siteNav.medium > li:last-child {
  55.         margin-right: 0;
  56.     }
  58.     /* Hover line effect */
  59.     #siteNav.medium > li a::after {
  60.         content: '';
  61.         position: absolute;
  62.         bottom: 0;
  63.         left: 50%;
  64.         width: 0;
  65.         height: 2px;
  66.         {% if is_authenticated %}
  67.         background-color: #6c757d;
  68.         {% else %}
  69.         background-color: #333;
  70.         {% endif %}
  71.         transition: width 0.3s ease-out, transform 0.3s ease-out;
  72.         transform: translateX(-50%);
  73.         transform-origin: center;
  74.     }
  76.     #siteNav.medium > li a:hover::after {
  77.         width: 100%;
  78.         transform: translateX(-50%) scaleX(1);
  79.     }
  81.     #siteNav.medium > li .dropdown-item {
  82.         {% if is_authenticated %}
  83.         color: #6c757d;
  84.         {% else %}
  85.         color: #333;
  86.         {% endif %}
  87.         font-family: 'Montserrat', sans-serif;
  88.     }
  90.     #siteNav.medium > li .dropdown-item:hover {
  91.         background-color: #0d6efd;
  92.         color: #fff;
  93.         font-weight: 600;
  94.     }
  96.     /* Active link */
  97.     #siteNav.medium > li.active-link > a {
  98.         {% if is_authenticated %}
  99.         color: #6c757d !important;
  100.         {% else %}
  101.         color: #333 !important;
  102.         {% endif %}
  103.         font-weight: 700;
  104.         background-color: transparent !important;
  105.     }
  107.     #siteNav.medium > li.active-link > a::after {
  108.         width: 100%;
  109.         transform: translateX(-50%) scaleX(1);
  110.         {% if is_authenticated %}
  111.         background-color: #6c757d;
  112.         {% else %}
  113.         background-color: #333;
  114.         {% endif %}
  115.     }
  117.     #siteNav.medium > li a:hover {
  118.         {% if is_authenticated %}
  119.         color: #6c757d !important;
  120.         {% else %}
  121.         color: #000000 !important;
  122.         {% endif %}
  123.         background-color: transparent !important;
  124.     }
  126.     #siteNav.medium > li.lvl1.parent.megamenu .megamenu a:hover{
  127.         color: inherit !important;
  128.     }
  130.     #siteNav.medium > li a:hover::after {
  131.         {% if is_authenticated %}
  132.         background-color: #6c757d;
  133.         {% else %}
  134.         background-color: #333;
  135.         {% endif %}
  136.     }
  138.     /* Professional area button */
  139.     .login-nav-item a.site-nav {
  140.         background: linear-gradient(to bottom right, #91D6F3, #3F91F3);
  141.         color: #fff !important;
  142.         padding: 10px 25px !important;
  143.         border-radius: 50px !important;
  144.         text-transform: capitalize !important;
  145.         font-weight: 700 !important;
  146.         box-shadow: 0 3px 5px rgba(0, 0, 0, 0.6);
  147.         transition: background 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
  148.         border: none;
  149.         white-space: nowrap !important;
  150.         min-width: max-content !important;
  151.     }
  153.     /* Technical area button */
  154.     #siteNav.medium > li a[href*="technicalArea"],
  155.     #siteNav.medium > li a[href*="technical-area"] {
  156.         white-space: nowrap !important;
  157.         min-width: max-content !important;
  158.     }
  160.     .login-nav-item a.site-nav:hover {
  161.         background: linear-gradient(to bottom right, #3F91F3, #91D6F3);
  162.         box-shadow: 0 5px 7px rgba(0, 0, 0, 0.2);
  163.     }
  165.     .login-nav-item a.site-nav i {
  166.         color: #fff !important;
  167.     }
  169.     /* Professional area header styling - cart and user icons */
  170.     .header-cart .site-header__cart i {
  171.         color: #6c757d !important;
  172.     }
  174.     .header-cart .site-header__cart:hover i {
  175.         color: #6c757d !important;
  176.     }
  178.     .header-cart .site-cart-count {
  179.         background-color: #6c757d !important;
  180.         color: #fff !important;
  181.         transition: background-color 0.2s ease-in-out;
  182.     }
  184.     .header-cart .site-header__cart:hover .site-cart-count {
  185.         background-color: #6c757d !important;
  186.     }
  188.     {% if is_authenticated %}
  189.     .user-link.iconset .icon.an-user {
  190.         color: #6c757d !important;
  191.     }
  193.     .user-link.iconset:hover .icon.an-user {
  194.         color: #6c757d !important;
  195.     }
  197.     .user-link.iconset .icon {
  198.         color: #6c757d !important;
  199.     }
  201.     .user-link.iconset:hover .icon {
  202.         color: #6c757d !important;
  203.     }
  205.     .d-flex.align-items-center .user-link.iconset .icon {
  206.         color: #6c757d !important;
  207.     }
  209.     .d-flex.align-items-center .user-link.iconset:hover .icon {
  210.         color: #6c757d !important;
  211.     }
  213.     i.icon.an-user.d-block {
  214.         color: #6c757d !important;
  215.     }
  217.     .user-link.iconset i.icon.an-user.d-block {
  218.         color: #6c757d !important;
  219.     }
  221.     .user-link.iconset:hover i.icon.an-user.d-block {
  222.         color: #6c757d !important;
  223.     }
  224.     {% endif %}
  226.     /* User manual link styling */
  227.     {% if is_authenticated %}
  228.     .user-manual-link.iconset {
  229.         font-family: 'Montserrat', sans-serif;
  230.     }
  232.     .user-manual-link.iconset span {
  233.         color: #6c757d !important;
  234.         font-weight: 600;
  235.         font-size: 11px;
  236.         text-transform: capitalize;
  237.         transition: color 0.2s ease-in-out;
  238.         cursor: pointer;
  239.     }
  241.     .user-manual-link.iconset:hover span {
  242.         color: #6c757d !important;
  243.     }
  244.     {% endif %}
  245.     
  246.     /* Logo sizing */
  247.     #siteNav.medium > li:first-child a img,
  248.     .navbar-logo {
  249.         min-width: 45px !important;
  250.         width: 60px !important;
  251.     }
  253.     /* Hover de logo, megamenu, empresa y idioma */
  254.     .logo-nav-item .logo-link::after {
  255.         display: none;
  256.     }
  258.     .logo-nav-item .logo-link:hover::after {
  259.         display: none;
  260.     }
  262.     #siteNav.medium > li.logo-nav-item a::after {
  263.         display: none;
  264.     }
  266.     #siteNav.medium > li.logo-nav-item a:hover::after {
  267.         display: none;
  268.     }
  270.     .lvl1.parent.megamenu * a::after,
  271.     .lvl1.parent.megamenu * a:hover::after 
  272.     {
  273.         display: none;
  274.         color: initial;
  275.         background-color: initial;
  276.     }
  278.     #siteNav .menu-brand-logo a {
  279.         transition: background-color 0.3s ease-in-out;
  280.         background-color: transparent;
  281.     }
  283.     #siteNav .menu-brand-logo a:hover {
  284.         background-color: #f0f0f0 !important;
  285.     }
  287.     #siteNav.medium .menu-brand-logo a:hover {
  288.         background-color: #f0f0f0 !important;
  289.     }
  291.     #siteNav.medium > li.lvl1.parent.dropdown ul.dropdown a::after,
  292.     #siteNav.medium > li.lvl1.parent.dropdown ul.dropdown a:hover::after {
  293.         display: none;
  294.     }
  296.     .lang-image {
  297.         min-width: 25px !important;
  298.         width: 30px !important;
  299.         object-fit: contain;
  300.     }
  301.     #siteNav.medium > li.lang-image-li a:hover::after {
  302.         display: none;
  303.     }
  305.     /* Search animation */
  306.     @keyframes shake {
  307.         0%, 100% { transform: translateX(0); }
  308.         10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
  309.         20%, 40%, 60%, 80% { transform: translateX(5px); }
  310.     }
  312.     .shake {
  313.         animation: shake 0.5s;
  314.     }
  316.     #search-box::placeholder {
  317.         color: #FF0000;
  318.     }
  320.     #siteNav.medium .d-flex.align-items-center .iconset {
  321.         display: flex;
  322.         align-items: center;
  323.         height: auto;
  324.         padding: 8px 15px;
  325.         margin: 0;
  326.     }
  328.     /* Responsive breakpoints */
  329.     @media only screen and (min-width: 1800px) {
  330.         #siteNav.medium > li a {
  331.             padding: 10px 20px;
  332.             font-size: 17px;
  333.         }
  334.     }
  336.     @media only screen and (min-width: 1740px) and (max-width: 1640px) {
  337.         #siteNav.medium {
  338.             gap: 10px;
  339.         }
  340.         
  341.         #siteNav.medium > li a {
  342.             padding: 8px 15px;
  343.             font-size: 16px;
  344.         }
  345.         
  346.         #siteNav.medium > li {
  347.             flex: 0 1 auto;
  348.         }
  349.         
  350.         #siteNav.medium > li:not(:first-child):not(.lang-image-li):not(.user-menu):not(.login-nav-item):not(.minicart-nav-item) {
  351.             flex: 1 1 auto;
  352.             max-width: 180px;
  353.         }
  354.     }
  356.     @media only screen and (max-width: 1690px) {
  357.         #siteNav.medium > li a {
  358.             padding: 8px 10px;
  359.             font-size: 15px;
  360.         }
  361.     }
  363.     @media only screen and (max-width: 1500px) {
  364.         #siteNav.medium > li a {
  365.             padding: 8px 10px;
  366.             font-size: 15px;
  367.         }
  368.     }
  370.     @media only screen and (max-width: 1300px) {
  371.         #siteNav.medium > li a {
  372.             padding: 8px 10px;
  373.             font-size: 14px;
  374.         }
  375.     }
  377.     @media (max-width: 1090px) {
  378.         #siteNav.medium > li a {
  379.             padding: 8px 5px;
  380.             font-size: 14px;
  381.         }
  382.         .login-nav-item a.site-nav .text {
  383.             display: inline !important;
  384.             white-space: nowrap !important;
  385.         }
  386.         .login-nav-item a.site-nav i {
  387.             display: none !important;
  388.         }
  389.         
  390.         #siteNav.medium > li a[href*="technicalArea"],
  391.         #siteNav.medium > li a[href*="technical-area"] {
  392.             white-space: nowrap !important;
  393.             min-width: max-content !important;
  394.         }
  395.     }
  397.     @media (min-width: 1240px) {
  398.         .login-nav-item a.site-nav .text.d-none.d-xl-inline {
  399.             display: inline !important;
  400.         }
  401.         .login-nav-item a.site-nav i.d-block.d-xl-none {
  402.             display: none !important;
  403.         }
  404.     }
  406.     @media (max-width: 1239px) {
  407.         .login-nav-item a.site-nav .text.d-none.d-xl-inline {
  408.             display: none !important;
  409.         }
  410.         .login-nav-item a.site-nav i.d-block.d-xl-none {
  411.             display: block !important;
  412.         }
  413.     }
  415.     @media (min-width: 991px) {
  416.         .header.header-space-mobile {
  417.             padding-bottom: 15px;
  418.         }
  419.     }
  421.     @media (max-width: 991px) {
  422.         .header.header-space-mobile {
  423.             padding: 15px 0;
  424.         }
  425.     }
  427. </style>
  428. <div class="menu-outer d-none d-lg-block pb-1 mt-1">
  429.     <div class="container-fluid">
  430.         <div class="row">
  431.             <div class="col-1 col-sm-1 col-md-1 col-lg-12 align-self-center d-menu-col">
  432.                 <nav class="grid__item position-relative" id="AccessibleNav" >
  433.                     {# LOGO MOVED INSIDE UL #}
  434.                     <ul id="siteNav" class="site-nav medium center hidearrow align-items-center">
  435.                         <li class="lvl1 logo-nav-item"> {# LOGO ADDED AS LI #}
  436.                             <a href="{{ isRoot ? '#sticky-header' : navStartNode~'/' }}" class="m-0 p-0 py-2 logo-link">
  437.                                 <img src="{{ asset('/static2/images/midnight/assets/logo-bsn.png') }}" class="rounded-circle navbar-logo" style="width: 35px; vertical-align: middle;">
  438.                             </a>
  439.                         </li>
  440.                         {#  PRODUCTS #}
  441.                         <li class="lvl1 parent megamenu">
  442.                             <a href="{{ '/' ~ (app.request.locale == 'en' ? 'en/products/default_m1' : 'es/productos/default_m1') }}">{{ 'layout.navbar-desktop.products_translations'|trans }}
  443.                                 <i class="an an-angle-down-l"></i>
  444.                             </a>
  445.                             {{ pimcore_inc(document.getProperty('categories-navbar'), {}, false) }}
  446.                         </li>
  447.                         {#  HOME #}
  448.                         {# ABOUT US #}
  449.                         <li class="lvl1 parent dropdown">
  450.                             <a href="{{ isRoot ? '#featured-services' : navStartNode~'#featured-services' }}">{{ 'layout.footer.information.professional-area_translations' | trans }}
  451.                                 <i class="an an-angle-down-l"></i>
  452.                             </a>
  453.                                 <ul class="dropdown">
  454.                                     <li><a href="{{ isAboutUs ? '#company' : navStartNode~'/'~ (app.request.locale == 'en' ? 'about-us' : 'empresa') }}" class="site-nav">{{ 'home.about-us_title_translations' | trans}}</a></li>
  455.                                     <li><a href="{{ isAboutUs ? '#technicalAdvice' : navStartNode~'/'~ (app.request.locale == 'en' ? 'about-us#technicalAdvice' : 'empresa#technicalAdvice') }}" class="site-nav">{{ 'home.about-us-cards.technical_advice_translations' | trans }}</a></li>
  456.                                     <li><a href="{{ isAboutUs ? '#customService' : navStartNode~'/'~ (app.request.locale == 'en' ? 'about-us#customService' : 'empresa#customService') }}" class="site-nav">{{ 'home.about-us-cards.custom_service_translations' | trans }}</a></li>
  457.                                     <li><a href="{{ isAboutUs ? '#stockLogistic' : navStartNode~'/'~ (app.request.locale == 'en' ? 'about-us#stockLogistic' : 'empresa#stockLogistic') }}" class="site-nav">{{ 'home.about-us-cards.stock_and_logistics_translations' | trans }}</a></li>
  458.                                     <li><a href="{{ isAboutUs ? '#stockLogistic' : navStartNode~'/'~ (app.request.locale == 'en' ? 'about-us#stockLogistic' : 'empresa#stockLogistic') }}" class="site-nav">{{ 'home.about-us-cards.training_translations'| trans }}</a></li>
  459.                                 </ul>
  460.                         </li>
  461.                         {# Technical Area #}
  462.                         <li class="lvl1 parent dropdown">
  463.                             <a href="{{ isRoot ? '#technicalArea' : navStartNode~'#technicalArea' }}">{{ 'Layout.Navegation.Technical-Area_translations' | trans }}
  464.                                 <i class="an an-angle-down-l"></i>
  465.                             </a>
  466.                             {% if  currentPath != '/' and currentPath != '/en' %}
  467.                                 <ul class="dropdown">
  468.                                     <li><a href="{{ '/' ~ (app.request.locale == 'en' ? 'en/technical-area/painting-schemes' : 'es/area-tecnica/esquemas-de-pintado') }}" class="site-nav">{{ "Esquemas de pintado" | trans }}</a></li>
  469.                                     <li><a href="#" class="site-nav" id="search-link">{{ "Fichas técnicas y de seguridad" | trans }}</a></li>
  470.                                     <li><a href="{{ '/' ~ (app.request.locale == 'en' ? 'en/technical-area/calculate-square-meters' : 'es/area-tecnica/calcular-metros-cuadrados') }}" class="site-nav">{{ "Calcular metros cuadrados" | trans }}</a></li>
  471.                                     <li><a href="{{ '/' ~ (app.request.locale == 'en' ? 'en/technical-area/how-much-paint-do-I-need' : 'es/area-tecnica/cuanta-pintura-necesito') }}" class="site-nav">{{ "Cuánta pintura necesito?" | trans }}</a></li>
  472.                                 </ul>
  473.                             {% endif %}
  474.                         </li>
  475.                         {# Catalog Area #}
  476.                         <li class="lvl1 parent dropdown">
  477.                             <a href="{{ isRoot ? '#catalog' : navStartNode~'#catalog' }}">{{ 'lbl_Catálogo' | trans }}
  478.                                 <i class="an an-angle-down-l"></i>
  479.                             </a>
  480.                         </li>
  481.                         {% if not is_authenticated %}
  482.                             <li class="lvl1 parent dropdown">
  483.                                 <a href="{{ isRoot ? '#collaborators' : navStartNode~'#collaborators' }}">{{ "layout.navegation.collaborators_translations" | trans}}<i class="an an-angle-down-l"></i></a>
  484.                                 {% if  currentPath != '/' and currentPath != '/en' %}
  485.                                     <ul class="dropdown">
  486.                                         <li>
  487.                                             <a href="{{ '/' ~ (app.request.locale == 'en' ? 'en/point-of-sale' : 'es/puntos-de-venta') }}" class="site-nav">{{ 'home.collaborators.points-of-sale_translations' | trans}}</a>
  488.                                         </li>
  489.                                         <li>
  490.                                             <a href="{{ '/' ~ (app.request.locale == 'en' ? 'en/industry-professionals' : 'es/profesionales-del-sector') }}" class="site-nav">{{ 'home.collaborators.industry-professionals_translations' | trans}}</a>
  491.                                         </li>
  492.                                     </ul>
  493.                                 {% endif %}
  494.                             </li>
  495.                         {% else %}
  497.                             {# Define las rutas para ambos idiomas #}
  498.                             {% set ratesEnRoute = 'rates-view-translated-en' %}
  499.                             {% set ratesEsRoute = 'rates-view-translated-es' %}
  501.                             {# Asigna las rutas según el idioma actual #}
  502.                             {% if currentLocale == 'en' %}
  503.                                 {% set ratesRoute = ratesEnRoute %}
  504.                             {% else %}
  505.                                 {% set ratesRoute = ratesEsRoute %}
  506.                             {% endif %}
  507.                             <li class="lvl1 parent dropdown">
  508.                                 <a href="{{path(ratesRoute)}}">{{ 'lbl_Tarifa' | trans }}<i class="an an-angle-down-l"></i></a>
  509.                             </li>
  510.                         {% endif %}
  511.                         {# <li class="lvl1 parent dropdown">
  512.                             <a href="{{ isRoot ? '#news' : navStartNode~'#news' }}">{{ 'layout.navbar-desktop.new-arrivals_translations' | trans }}<i class="an an-angle-down-l"></i></a>
  513.                         </li> #}
  514.                         <li class="lvl1 parent dropdown">
  515.                             <a href="{{ isRoot ? '#team' : navStartNode~'#team' }}">{{ 'layout.navbar-desktop.team_translations' | trans }}<i class="an an-angle-down-l"></i></a>
  516.                         </li>
  517.                         <li class="lvl1 parent dropdown">
  518.                             <a href="{{ isRoot ? '#contact' : navStartNode~'#contact' }}" class="site-nav">
  519.                                 {{ 'BotonContacto' | trans }}<i class="an an-angle-down-l"></i>
  520.                             </a>
  521.                         </li>
  522.                         {# Gets the events document dinamically with his path to get the data from the editables in it#}
  523.                         {% set documentName = app.request.locale == 'en' ? '/recent-events' : '/eventos-recientes' %}
  524.                         {% set eventDocument = pimcore_document_by_path('/' ~ app.request.locale ~ documentName) %}
  525.                         {% set eventBlock = eventDocument.getEditable('eventBlock') %}
  526.                         {% if eventBlock is not null and not eventBlock.isEmpty() %}
  527.                             <li class="lvl1 parent dropdown">
  528.                                 {% set eventsPath = app.request.locale == 'en' ? '/en/recent-events' : '/es/eventos-recientes' %}
  529.                                 <a href="{{ eventsPath }}" class="site-nav">
  530.                                     {{ 'Events' | trans }}<i class="an an-angle-down-l"></i>
  531.                                 </a>
  532.                             </li>
  533.                         {% endif %}
  535.                         <div class="d-flex align-items-center">
  536.                             {% if is_authenticated %}
  537.                                 <div class="user-link iconset">
  538.                                     <i class="icon an an-user d-block"></i>
  539.                                     <span class="text d-none d-lg-flex"></span>
  540.                                 </div>
  541.                                 {{ include("layout/includes/user-links.html.twig") }}
  542.                                 {{ pimcore_inc('/' ~ app.request.locale ~ '/includes/navbar-top',{},false) }}
  543.                             {% else %}
  544.                                 <li class="lvl1 login-nav-item">
  545.                                     <a href="{{ path(loginRoute) }}" class="site-nav">
  546.                                         <i class="icon an an-sign-in-al d-block d-xl-none"></i>
  547.                                         <span class="text d-none d-xl-inline">{{ 'layout.navbar-desktop.professional-area_translations' | trans }}</span>
  548.                                     </a>
  549.                                 </li>
  550.                             {% endif %}
  552.                             <li class="lvl1 lang-image-li iconset" >
  553.                                 {% set currentLanguage = app.request.locale %}
  554.                                 {% if currentLanguage == 'es' %}
  555.                                 <a href="{{ pimcore_document(1) ~ 'en'}}">
  556.                                     <img class="lang-image" src="{{ asset('assets/images/icons8-great-britain-48.png') }}" alt="English"/>
  557.                                 </a>
  558.                                 <span class="tooltip-label">English</span>
  559.                                 {% elseif currentLanguage == 'en' %}
  560.                                 <a href="{{ pimcore_document(1) ~ 'es'}}">
  561.                                     <img class="lang-image" src="{{ asset('assets/images/icons8-spain-48.png') }}" alt="Español"/>
  562.                                 </a>
  563.                                 <span class="tooltip-label">Español</span>
  564.                                 {% endif %}
  565.                             </li>
  566.                         </div>
  567.                     </ul>
  568.                 </nav>
  569.             </div>
  570.         </div>
  571.     </div>
  572. </div>
  574. <script>
  575.     document.addEventListener("DOMContentLoaded", function() {
  576.         var searchLink = document.getElementById("search-link");
  577.         var searchBox = document.getElementById("search-box");
  579.         var lang = document.documentElement.lang;
  581.         var placeholderText = lang === "en" ? "What product do you want technical information for?" : "¿De qué producto quiere su ficha técnica?";
  583.         var placeholderInterval;
  584.         var placeholderTextIndex = 0;
  585.         var isTyping = false;
  587.         function typePlaceholderText(element, text, interval) {
  588.             placeholderTextIndex = 0;
  589.             clearInterval(placeholderInterval);
  590.             isTyping = true;
  592.             placeholderInterval = setInterval(function() {
  593.                 element.setAttribute("placeholder", text.slice(0, placeholderTextIndex));
  594.                 element.style.color = "red";
  595.                 placeholderTextIndex++;
  596.                 if (placeholderTextIndex > text.length) {
  597.                     clearInterval(placeholderInterval);
  598.                     isTyping = false;
  600.                 }
  601.             }, interval);
  602.         }
  604.         function shakeSearchBox() {
  605.             if (isTyping) {
  606.                 clearInterval(placeholderInterval);
  607.                 isTyping = false;
  608.                 searchBox.style.color = "black";
  609.             }
  611.             searchBox.value = "";
  612.             searchBox.removeAttribute("placeholder");
  613.             searchBox.focus();
  614.             searchBox.classList.add("shake");
  616.             setTimeout(function() {
  617.                 searchBox.classList.remove("shake");
  618.                 typePlaceholderText(searchBox, placeholderText, 100);
  619.             }, 600);
  621.             searchBox.focus();
  622.         }
  624.         searchLink.addEventListener("click", function(event) {
  625.             event.preventDefault();
  626.             shakeSearchBox();
  627.         });
  629.         searchBox.addEventListener("input", function() {
  630.             if (searchBox.getAttribute("placeholder") === placeholderText) {
  631.                 searchBox.value = "";
  632.                 searchBox.removeAttribute("placeholder");
  633.             }
  635.             if (searchBox.value.length > 0) {
  636.                 searchBox.style.setProperty("color", "#000000", "important");
  637.             } else if (!isTyping) {
  638.                 searchBox.style.setProperty("color", "#FF0000", "important");
  639.             }
  640.         });
  642.         searchBox.addEventListener("keydown", function() {
  643.             if (isTyping) {
  644.                 clearInterval(placeholderInterval);
  645.                 isTyping = false;
  646.                 searchBox.removeAttribute("style");
  647.             }
  648.         });
  649.     });
  650. </script>