### Google Tag Manager Initialization

Source: https://www.northecharge.com/ev-charging-at-home

Initializes Google Tag Manager and configures Google Analytics tracking for page views. It includes script tags for loading the GTM library and a JavaScript snippet to set up the data layer and send initial configuration data.

```html
<script data-cookieconsent="statistics" strategy="lazyOnload" src="https://www.googletagmanager.com/gtag/js?id=GTM-56PCG38" />
<script data-cookieconsent="statistics" strategy="lazyOnload" src="https://www.googletagmanager.com/gtag/js?id=G-5ELD0SX87R" />
<script data-cookieconsent="statistics" >
  window.dataLayer = window.dataLayer || [];
  function gtag(){
    dataLayer.push(arguments);
  }
  gtag('js', new Date());
  gtag('config', 'G-5ELD0SX87R', { page_path: window.location.pathname });
</script>
```

--------------------------------

### WebFont and Google Analytics Initialization

Source: https://www.northecharge.com/ev-charging-at-home

Initializes Google Fonts for web page typography and configures Google Analytics (gtag.js) for website tracking. Includes Webflow-specific JavaScript for touch device detection.

```javascript
WebFont.load({ google: { families: ["Inter:regular,500,600","Outfit:100,200,300,regular,500,600,700,800,900:latin,latin-ext"] }});
!function(o,c){var n=c.documentElement,t=" w-mod-";n.className+=t+"js",("ontouchstart"in o||o.DocumentTouch&&c instanceof DocumentTouch)&&(n.className+=t+"touch")}(window,document);
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('set', 'developer_id.dZGVlNj', true);
gtag('config', 'G-H859NE646E');
```

--------------------------------

### Webflow CSS Styling

Source: https://www.northecharge.com/ev-charging-at-home

Contains CSS rules for Webflow-specific styling, including responsive display adjustments based on screen width and browser capabilities, and font smoothing for macOS.

```css
@media (min-width:992px) {
  html.w-mod-js:not(.w-mod-ix) [data-w-id="7ec55671-0be3-90fb-daa4-3617543f7290"] {display:block;}
  html.w-mod-js:not(.w-mod-ix) [data-w-id="7ec55671-0be3-90fb-daa4-3617543f728f"] {width:2.9vw;}
}
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
```

--------------------------------

### WebFont Loading and Initialization

Source: https://www.northecharge.com/workplace-ev-charging

Loads Google Fonts for the website and initializes WebFont. Also includes basic browser detection for touch support and adds a 'w-mod-js' class to the document element.

```javascript
WebFont.load({
  google: {
    families: ["Inter:regular,500,600","Outfit:100,200,300,regular,500,600,700,800,900:latin,latin-ext"]
  }
});
!function(o,c){
  var n=c.documentElement,
  t=" w-mod-";
  n.className+=t+"js",
  ("ontouchstart"in o||o.DocumentTouch&&c instanceof DocumentTouch)&&(n.className+=t+"touch")
}(window,document);
```

--------------------------------

### Webflow Initialization and Google Analytics

Source: https://www.northecharge.com/

This snippet initializes Webflow's JavaScript features, including touch detection, and configures Google Analytics for tracking website events and user activity. It sets up the dataLayer and gtag for event reporting.

```javascript
!function(o,c){var n=c.documentElement,t=" w-mod-";n.className+=t+"js",("ontouchstart"in o||o.DocumentTouch&&c instanceof DocumentTouch)&&(n.className+=t+"touch")}(window,document);window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);}gtag('js', new Date());gtag('set', 'developer_id.dZGVlNj', true);gtag('config', 'G-H859NE646E');
```

--------------------------------

### Google Tag Manager Initialization

Source: https://www.northecharge.com/workplace-ev-charging

Initializes Google Tag Manager and configures Google Analytics tracking for page views. It includes script tags for loading the GTM library and a JavaScript snippet to set up the data layer and send initial configuration data.

```html
<script data-cookieconsent="statistics" strategy="lazyOnload" src="https://www.googletagmanager.com/gtag/js?id=GTM-56PCG38" />
<script data-cookieconsent="statistics" strategy="lazyOnload" src="https://www.googletagmanager.com/gtag/js?id=G-5ELD0SX87R" />
<script data-cookieconsent="statistics" >
  window.dataLayer = window.dataLayer || [];
  function gtag(){
    dataLayer.push(arguments);
  }
  gtag('js', new Date());
  gtag('config', 'G-5ELD0SX87R', { page_path: window.location.pathname });
</script>
```

--------------------------------

### Customer.io Forms Integration

Source: https://www.northecharge.com/

This script dynamically loads the Customer.io forms handler script from a CDN. It's responsible for integrating form functionalities provided by Customer.io into the website, identified by a specific site ID.

```javascript
(function() { var t = document.createElement('script'), s = document.getElementsByTagName('script')[0]; t.async = true; t.id = 'cio-forms-handler'; t.setAttribute('data-site-id', '4a8ca3ad5d831432de58'); t.setAttribute('data-base-url', 'https://eu.customerioforms.com'); t.src = 'https://eu.customerioforms.com/assets/forms.js'; s.parentNode.insertBefore(t, s); })();
```

--------------------------------

### Customer.io Forms Handler Script

Source: https://www.northecharge.com/ev-charging-at-home

Dynamically loads the Customer.io forms handler script from a CDN. This script is responsible for managing forms and user interactions within the Customer.io platform.

```javascript
(function() { var t = document.createElement('script'), s = document.getElementsByTagName('script')[0]; t.async = true; t.id = 'cio-forms-handler'; t.setAttribute('data-site-id', '4a8ca3ad5d831432de58'); t.setAttribute('data-base-url', 'https://eu.customerioforms.com'); t.src = 'https://eu.customerioforms.com/assets/forms.js'; s.parentNode.insertBefore(t, s); })();
```

--------------------------------

### Google Tag Manager and Analytics Configuration

Source: https://www.northecharge.com/

Includes script tags for loading Google Tag Manager and Google Analytics. It configures the dataLayer and sets up the initial gtag configuration for tracking website events and page views.

```html
<script data-cookieconsent="statistics" strategy="lazyOnload" src="https://www.googletagmanager.com/gtag/js?id=GTM-56PCG38" /> <script data-cookieconsent="statistics" strategy="lazyOnload" src="https://www.googletagmanager.com/gtag/js?id=G-5ELD0SX87R" /> <script data-cookieconsent="statistics" > window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-5ELD0SX87R', { page_path: window.location.pathname });
```

--------------------------------

### Google Tag Manager Initialization

Source: https://www.northecharge.com/mileage-reporting

Initializes Google Tag Manager and configures Google Analytics tracking for page views. It includes script tags for loading the GTM library and a JavaScript snippet to set up the data layer and send initial configuration data.

```html
<script data-cookieconsent="statistics" strategy="lazyOnload" src="https://www.googletagmanager.com/gtag/js?id=GTM-56PCG38" />
<script data-cookieconsent="statistics" strategy="lazyOnload" src="https://www.googletagmanager.com/gtag/js?id=G-5ELD0SX87R" />
<script data-cookieconsent="statistics" >
  window.dataLayer = window.dataLayer || [];
  function gtag(){
    dataLayer.push(arguments);
  }
  gtag('js', new Date());
  gtag('config', 'G-5ELD0SX87R', { page_path: window.location.pathname });
</script>
```

--------------------------------

### Newsletter Subscription Logic

Source: https://www.northecharge.com/

This JavaScript code snippet, commented out, demonstrates logic for displaying a newsletter subscription popup after a delay, using localStorage to track if it has been shown. It's intended for user engagement on the website.

```javascript
//*document.addEventListener("DOMContentLoaded", function() { // Перевірка, чи поп-ап уже був показаний користувачеві //*if (!localStorage.getItem("popupShown")) { // Затримка на 15 секунд перед показом секції //*setTimeout(function() { //*var popupSection = document.querySelector('.pop-up-section'); //*if (popupSection) { //*popupSection.style.display = 'flex'; // Зробити секцію видимою з display: flex // Записуємо в localStorage, що поп-ап був показаний //*localStorage.setItem("popupShown", "true"); //*} //*}, 15000); // 15000 мілісекунд = 15 секунд //*} //*}); //*.pop-up-section { display: none; /* Початково приховуємо секцію */ }
```

--------------------------------

### Custom Slider Dot Interaction and Observer

Source: https://www.northecharge.com/ev-charging-at-home

Manages custom slider dots (e.g., '.flpro') to activate corresponding slider indicators and trigger slide changes. It uses jQuery to handle click events on custom dots and a MutationObserver to detect active states on slider dots, updating custom dots accordingly.

```javascript
$(document).ready(function() {
  const customDots = $('.flpro');
  $.each(customDots, (index, dot)=>{
    $(dot).click(()=>{
      $('.active').removeClass('active');
      $(dot).addClass('active');
      $('.w-slider-dot:nth-child('+(index+1)+')').trigger('tap');
    });
  });

  const config = {
    attributes: true,
    childList: false,
    subtree: false,
    attributeFilter: ['class']
  };

  function setObserver(target, index) {
    const observer = new MutationObserver(function(mutations) {
      mutations.forEach(function(mutation) {
        if (mutation.attributeName === 'class') {
          const classList = mutation.target.className;
          if(/w-active/.exec(classList)) {
            $('.active').removeClass('active');
            $('.flpro:nth-child('+(index+1)+')').addClass('active');
          }
        }
      });
    });
    observer.observe(target, config);
  }

  $('.w-slider-dot').each(function(index, dot) {
    setObserver(dot, index)
  });
});
```

--------------------------------

### Responsive Navigation Menu Toggle

Source: https://www.northecharge.com/ev-charging-at-home

Implements functionality to close the navigation menu when a link is clicked on mobile and tablet devices. It uses the enquire.js library to apply this behavior only when the screen width is 1023px or less.

```javascript
enquire.register("screen and (max-width: 1023px)", {
  match: function() {
    $('.w-nav-menu').on('click', 'a', function() {
      $('.w-nav-button').triggerHandler('tap');
    });
  }
});
```

--------------------------------

### JavaScript Responsive Navigation Toggle

Source: https://www.northecharge.com/

Implements responsive behavior for navigation menus on screens up to 1023px wide. It uses the enquire.js library to detect screen size and automatically closes the mobile navigation menu when a link within it is clicked.

```javascript
enquire.register("screen and (max-width: 1023px)", { match: function() { // Код, який ви хочете виконати на мобільних телефонах і планшетах $('.w-nav-menu').on('click', 'a', function() { $('.w-nav-button').triggerHandler('tap'); }); } });
```

--------------------------------

### Customer.io Forms Integration

Source: https://www.northecharge.com/workplace-ev-charging

Dynamically injects the Customer.io forms handler script into the page to enable form functionality. It sets the site ID and base URL for the integration.

```javascript
(function() {
  var t = document.createElement('script');
  var s = document.getElementsByTagName('script')[0];
  t.async = true;
  t.id = 'cio-forms-handler';
  t.setAttribute('data-site-id', '4a8ca3ad5d831432de58');
  t.setAttribute('data-base-url', 'https://eu.customerioforms.com');
  t.src = 'https://eu.customerioforms.com/assets/forms.js';
  s.parentNode.insertBefore(t, s);
})();
```

--------------------------------

### Northe API - Fleet Management

Source: https://www.northecharge.com/

This section outlines the core API endpoints for managing EV charging and fleet operations. It covers functionalities for accessing fleet data, managing charging sessions, and reporting mileage. Specific endpoints and their parameters are detailed below.

```APIDOC
NortheFleetAPI:
  Base URL: https://api.northecharge.com/v1

  Endpoints:
    - GET /fleets/{fleetId}/vehicles
      Description: Retrieves a list of all vehicles associated with a specific fleet.
      Parameters:
        - fleetId (string, required): The unique identifier for the fleet.
      Returns:
        - Array of Vehicle objects, each containing vehicle details (ID, model, status, etc.).

    - POST /fleets/{fleetId}/vehicles/{vehicleId}/charge
      Description: Initiates or schedules a charging session for a specific vehicle.
      Parameters:
        - fleetId (string, required): The unique identifier for the fleet.
        - vehicleId (string, required): The unique identifier for the vehicle.
        - body (object, required):
          - startTime (string, optional): ISO 8601 format for scheduled start time.
          - endTime (string, optional): ISO 8601 format for scheduled end time.
          - chargeLevel (integer, optional): Target battery charge percentage.
      Returns:
        - Object confirming the charging session initiation or schedule.

    - GET /fleets/{fleetId}/mileage
      Description: Retrieves mileage reports for vehicles within a fleet.
      Parameters:
        - fleetId (string, required): The unique identifier for the fleet.
        - startDate (string, optional): Start date for the mileage report (YYYY-MM-DD).
        - endDate (string, optional): End date for the mileage report (YYYY-MM-DD).
      Returns:
        - Array of MileageReport objects, including vehicle ID, date, distance, and driver information.
```

--------------------------------

### Google Analytics Configuration

Source: https://www.northecharge.com/mileage-reporting

Initializes and configures Google Analytics (gtag.js) for tracking website events and user activity, including setting a developer ID.

```javascript
window.dataLayer = window.dataLayer || [];
function gtag(){
  dataLayer.push(arguments);
}
gtag('js', new Date());
gtag('set', 'developer_id.dZGVlNj', true);
gtag('config', 'G-H859NE646E');
```

--------------------------------

### Popup Display Logic

Source: https://www.northecharge.com/ev-charging-at-home

JavaScript code to control the display of a popup section based on user interaction and local storage. It includes a delay before showing the popup.

```javascript
//\*document.addEventListener("DOMContentLoaded", function() { // Перевірка, чи поп-ап уже був показаний користувачеві //\*if (!localStorage.getItem("popupShown")) { // Затримка на 15 секунд перед показом секції //\*setTimeout(function() { //\*var popupSection = document.querySelector('.pop-up-section'); //\*if (popupSection) { //\*popupSection.style.display = 'flex'; // Зробити секцію видимою з display: flex // Записуємо в localStorage, що поп-ап був показаний //\*localStorage.setItem("popupShown", "true"); //\*} //\*}, 15000); // 15000 мілісекунд = 15 секунд //\*} //\*}); //\*.pop-up-section { display: none; /\* Початково приховуємо секцію \*/ }
```

--------------------------------

### Website Styling and Layout

Source: https://www.northecharge.com/workplace-ev-charging

Contains CSS rules for responsive design, font smoothing, and hiding specific elements like the Webflow badge. It targets specific elements using data-w-id attributes for layout control.

```css
@media (min-width:992px) {
  html.w-mod-js:not(.w-mod-ix) [data-w-id="7ec55671-0be3-90fb-daa4-3617543f7290"] {
    display: block;
  }
  html.w-mod-js:not(.w-mod-ix) [data-w-id="7ec55671-0be3-90fb-daa4-3617543f728f"] {
    width: 2.9vw;
  }
}
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.w-webflow-badge {
  display: none !important;
}
```

--------------------------------

### Basic CSS Styling and Layout

Source: https://www.northecharge.com/mileage-reporting

Contains essential CSS rules for font smoothing, hiding specific elements like the Webflow badge, and defining responsive behavior for certain elements.

```css
html.w-mod-js:not(.w-mod-ix) [data-w-id="7ec55671-0be3-90fb-daa4-3617543f7290"] {
  display: block;
}
html.w-mod-js:not(.w-mod-ix) [data-w-id="7ec55671-0be3-90fb-daa4-3617543f728f"] {
  width: 2.9vw;
}
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.w-webflow-badge {
  display: none !important;
}
```

--------------------------------

### JavaScript Slider Customization and State Management

Source: https://www.northecharge.com/

This snippet customizes slider navigation dots and synchronizes their active state with the slider's current slide using MutationObserver. It also handles the visibility and styling of slider navigation arrows based on the current slide index.

```javascript
$(document).ready(function() { // Ниже класс flpro его можно заменить на название вашего класса точки или просто делайте все как на видео const customDots = $('.flpro'); $.each(customDots, (index, dot)=>{ $(dot).click(()=>{ $('.active').removeClass('active'); $(dot).addClass('active'); $('.w-slider-dot:nth-child('+(index+1)+')').trigger('tap'); }); }); const config = { attributes: true, childList: false, subtree: false, attributeFilter: ['class'] }; function setObserver(target, index) { const observer = new MutationObserver(function(mutations) { mutations.forEach(function(mutation) { if (mutation.attributeName === 'class') { const classList = mutation.target.className; if(/w-active/.exec(classList)) { $('.active').removeClass('active'); $('.flpro:nth-child('+(index+1)+')').addClass('active'); } } }); }); observer.observe(target, config); } $('.w-slider-dot').each(function(index, dot) { setObserver(dot, index) }); }); document.addEventListener('DOMContentLoaded', function () { var slider = document.querySelector('.w-slider'); // Замініть .w-slider на ваш клас слайдера if (slider) { var slides = slider.querySelectorAll('.w-slide'); // Замініть .w-slide на клас слайда веб-флоу var totalSlides = slides.length; var currentIndex = 0; var leftArrow = slider.querySelector('.w-slider-arrow-left'); // Замініть на ваш клас лівої стрілки var rightArrow = slider.querySelector('.w-slider-arrow-right'); // Замініть на ваш клас правої стрілки // Функція для оновлення стану кнопок та рамок function updateButtonState() { if (currentIndex === 0) { leftArrow.style.pointerEvents = 'none'; leftArrow.style.borderColor = '#A5A8AA'; } else { leftArrow.style.pointerEvents = 'auto'; leftArrow.style.borderColor = ''; // Скидаємо колір рамки } if (currentIndex === totalSlides - 1) { rightArrow.style.pointerEvents = 'none'; rightArrow.style.borderColor = '#A5A8AA'; } else { rightArrow.style.pointerEvents = 'auto'; rightArrow.style.borderColor = ''; // Скидаємо колір рамки } } // Слухаємо клік на ліву стрілку leftArrow.addEventListener('click', function () { if (currentIndex > 0) { currentIndex--; updateButtonState(); // Ваша логіка для переміщення на попередній слайд } }); // Слухаємо клік на праву стрілку rightArrow.addEventListener('click', function () { if (currentIndex < totalSlides - 1) { currentIndex++; updateButtonState(); // Ваша логіка для переміщення на наступний слайд } }); // Оновлюємо стан кнопок при завантаженні updateButtonState(); } });
```

--------------------------------

### Google Analytics (gtag) Configuration

Source: https://www.northecharge.com/workplace-ev-charging

Configures Google Analytics using gtag.js, setting the data layer, tracking page views, and setting a developer ID.

```javascript
window.dataLayer = window.dataLayer || [];
function gtag(){
  dataLayer.push(arguments);
}
gtag('js', new Date());
gtag('set', 'developer_id.dZGVlNj', true);
gtag('config', 'G-H859NE646E');
```

--------------------------------

### Webflow CSS Media Queries

Source: https://www.northecharge.com/

These CSS rules are specific to Webflow and adjust element display and width based on viewport size. They ensure responsive design by targeting different screen breakpoints for elements identified by data-w-id attributes.

```css
@media (min-width:992px) {html.w-mod-js:not(.w-mod-ix) [data-w-id="7ec55671-0be3-90fb-daa4-3617543f7290"] {display:block;}html.w-mod-js:not(.w-mod-ix) [data-w-id="7ec55671-0be3-90fb-daa4-3617543f728f"] {width:2.9vw;}html.w-mod-js:not(.w-mod-ix) [data-w-id="7ec55671-0be3-90fb-daa4-3617543f7295"] {display:block;}html.w-mod-js:not(.w-mod-ix) [data-w-id="7ec55671-0be3-90fb-daa4-3617543f7294"] {width:2.9vw;}}@media (max-width:991px) and (min-width:768px) {html.w-mod-js:not(.w-mod-ix) [data-w-id="7ec55671-0be3-90fb-daa4-3617543f7290"] {display:block;}html.w-mod-js:not(.w-mod-ix) [data-w-id="7ec55671-0be3-90fb-daa4-3617543f728f"] {width:7.29vw;}html.w-mod-js:not(.w-mod-ix) [data-w-id="7ec55671-0be3-90fb-daa4-3617543f7295"] {display:block;}html.w-mod-js:not(.w-mod-ix) [data-w-id="7ec55671-0be3-90fb-daa4-3617543f7294"] {width:7.29vw;}}
```

--------------------------------

### Popup Display Logic (JavaScript)

Source: https://www.northecharge.com/mileage-reporting

This JavaScript code snippet handles the logic for displaying a popup section after a delay, only if it hasn't been shown before. It uses localStorage to track whether the popup has been displayed. The code is commented out, indicating it's likely for demonstration or a specific implementation context.

```javascript
//\*document.addEventListener("DOMContentLoaded", function() { // Перевірка, чи поп-ап уже був показаний користувачеві //\*if (!localStorage.getItem("popupShown")) { // Затримка на 15 секунд перед показом секції //\*setTimeout(function() { //\*var popupSection = document.querySelector('.pop-up-section'); //\*if (popupSection) { //\*popupSection.style.display = 'flex'; // Зробити секцію видимою з display: flex // Записуємо в localStorage, що поп-ап був показаний //\*localStorage.setItem("popupShown", "true"); //\*}
//\*}, 15000); // 15000 мілісекунд = 15 секунд //\*}
//\*}); //\*.pop-up-section { display: none; /\* Початково приховуємо секцію \*/ }
```

--------------------------------

### Custom Slider Dot Interaction and Observer

Source: https://www.northecharge.com/workplace-ev-charging

Manages custom slider dots (e.g., '.flpro') to activate corresponding slider indicators and trigger slide changes. It uses jQuery to handle click events on custom dots and a MutationObserver to detect active states on slider dots, updating custom dots accordingly.

```javascript
$(document).ready(function() {
  const customDots = $('.flpro');
  $.each(customDots, (index, dot)=>{
    $(dot).click(()=>{
      $('.active').removeClass('active');
      $(dot).addClass('active');
      $('.w-slider-dot:nth-child('+(index+1)+')').trigger('tap');
    });
  });

  const config = {
    attributes: true,
    childList: false,
    subtree: false,
    attributeFilter: ['class']
  };

  function setObserver(target, index) {
    const observer = new MutationObserver(function(mutations) {
      mutations.forEach(function(mutation) {
        if (mutation.attributeName === 'class') {
          const classList = mutation.target.className;
          if(/w-active/.exec(classList)) {
            $('.active').removeClass('active');
            $('.flpro:nth-child('+(index+1)+')').addClass('active');
          }
        }
      });
    });
    observer.observe(target, config);
  }

  $('.w-slider-dot').each(function(index, dot) {
    setObserver(dot, index)
  });
});
```

--------------------------------

### Customer.io Forms Script Injection

Source: https://www.northecharge.com/mileage-reporting

Dynamically injects the Customer.io forms JavaScript file into the page, enabling form handling and submission features. It sets essential attributes like site ID and base URL.

```javascript
(function() {
  var t = document.createElement('script'),
      s = document.getElementsByTagName('script')[0];
  t.async = true;
  t.id = 'cio-forms-handler';
  t.setAttribute('data-site-id', '4a8ca3ad5d831432de58');
  t.setAttribute('data-base-url', 'https://eu.customerioforms.com');
  t.src = 'https://eu.customerioforms.com/assets/forms.js';
  s.parentNode.insertBefore(t, s);
})();
```

--------------------------------

### Responsive Navigation Menu Toggle

Source: https://www.northecharge.com/workplace-ev-charging

Implements functionality to close the navigation menu when a link is clicked on mobile and tablet devices. It uses the enquire.js library to apply this behavior only when the screen width is 1023px or less.

```javascript
enquire.register("screen and (max-width: 1023px)", {
  match: function() {
    $('.w-nav-menu').on('click', 'a', function() {
      $('.w-nav-button').triggerHandler('tap');
    });
  }
});
```

--------------------------------

### jQuery Dropdown Menu Animation

Source: https://www.northecharge.com/ev-charging-at-home

Handles hover effects for dropdown menus, specifically rotating an arrow icon when the mouse enters or leaves the 'arrow-dropdown' or 'company-dropdown' elements. Uses jQuery for DOM manipulation.

```javascript
$(document).ready(function() {
  var arrowRotated = false;
  // Обробник для наведеня на стрілку або компанію
  $('#arrow-dropdown, #company-dropdown').on('mouseenter', function() {
    $('#company-dropdown').focus(); // Поворот стрілки з анімацією
    if (!arrowRotated) {
      $('#arrow-dropdown').css({
        'transition': 'transform 0.3s',
        'transform': 'rotate(180deg)'
      });
      arrowRotated = true;
    }
  });
  // Обробник для зняття наведення
  $('#arrow-dropdown, #company-dropdown').on('mouseleave', function() {
    $('#arrow-dropdown').css({
      'transition': 'transform 0.3s',
      'transform': 'rotate(0deg)'
    });
    arrowRotated = false;
  });
});
```

--------------------------------

### JavaScript Popup Logic

Source: https://www.northecharge.com/workplace-ev-charging

This JavaScript code snippet handles the logic for displaying a popup section after a delay, but only if it hasn't been shown before. It uses localStorage to track whether the popup has been displayed. The code includes comments in Ukrainian, indicating it might be part of an internationalized or localized feature.

```javascript
//\*document.addEventListener("DOMContentLoaded", function() { // Перевірка, чи поп-ап уже був показаний користувачеві //\*if (!localStorage.getItem("popupShown")) { // Затримка на 15 секунд перед показом секції //\*setTimeout(function() { //\*var popupSection = document.querySelector('.pop-up-section'); //\*if (popupSection) { //\*popupSection.style.display = 'flex'; // Зробити секцію видимою з display: flex // Записуємо в localStorage, що поп-ап був показаний //\*localStorage.setItem("popupShown", "true"); //\*} //\*}, 15000); // 15000 мілісекунд = 15 секунд //\*} //\*}); //\*.pop-up-section { display: none; /\* Початково приховуємо секцію \*/ }
```

--------------------------------

### Custom Slider Arrow Navigation and State Management

Source: https://www.northecharge.com/ev-charging-at-home

Provides custom logic for controlling a slider's navigation arrows (left and right) and managing their enabled/disabled states. It disables arrows when at the first or last slide and updates their appearance accordingly. This script targets elements with classes like '.w-slider', '.w-slide', '.w-slider-arrow-left', and '.w-slider-arrow-right'.

```javascript
document.addEventListener('DOMContentLoaded', function () {
  var slider = document.querySelector('.w-slider');
  if (slider) {
    var slides = slider.querySelectorAll('.w-slide');
    var totalSlides = slides.length;
    var currentIndex = 0;
    var leftArrow = slider.querySelector('.w-slider-arrow-left');
    var rightArrow = slider.querySelector('.w-slider-arrow-right');

    function updateButtonState() {
      if (currentIndex === 0) {
        leftArrow.style.pointerEvents = 'none';
        leftArrow.style.borderColor = '#A5A8AA';
      } else {
        leftArrow.style.pointerEvents = 'auto';
        leftArrow.style.borderColor = '';
      }

      if (currentIndex === totalSlides - 1) {
        rightArrow.style.pointerEvents = 'none';
        rightArrow.style.borderColor = '#A5A8AA';
      } else {
        rightArrow.style.pointerEvents = 'auto';
        rightArrow.style.borderColor = '';
      }
    }

    leftArrow.addEventListener('click', function () {
      if (currentIndex > 0) {
        currentIndex--;
        updateButtonState();
      }
    });

    rightArrow.addEventListener('click', function () {
      if (currentIndex < totalSlides - 1) {
        currentIndex++;
        updateButtonState();
      }
    });

    updateButtonState();
  }
});
```

--------------------------------

### Responsive Navigation Menu Toggle

Source: https://www.northecharge.com/mileage-reporting

Implements functionality to close the navigation menu when a link is clicked on mobile and tablet devices. It uses the enquire.js library to apply this behavior only when the screen width is 1023px or less.

```javascript
enquire.register("screen and (max-width: 1023px)", {
  match: function() {
    $('.w-nav-menu').on('click', 'a', function() {
      $('.w-nav-button').triggerHandler('tap');
    });
  }
});
```

--------------------------------

### Custom Slider Dot Interaction and Observer

Source: https://www.northecharge.com/mileage-reporting

Manages custom slider dots (e.g., '.flpro') to activate corresponding slider indicators and trigger slide changes. It uses jQuery to handle click events on custom dots and a MutationObserver to detect active states on slider dots, updating custom dots accordingly.

```javascript
$(document).ready(function() {
  const customDots = $('.flpro');
  $.each(customDots, (index, dot)=>{
    $(dot).click(()=>{
      $('.active').removeClass('active');
      $(dot).addClass('active');
      $('.w-slider-dot:nth-child('+(index+1)+')').trigger('tap');
    });
  });

  const config = {
    attributes: true,
    childList: false,
    subtree: false,
    attributeFilter: ['class']
  };

  function setObserver(target, index) {
    const observer = new MutationObserver(function(mutations) {
      mutations.forEach(function(mutation) {
        if (mutation.attributeName === 'class') {
          const classList = mutation.target.className;
          if(/w-active/.exec(classList)) {
            $('.active').removeClass('active');
            $('.flpro:nth-child('+(index+1)+')').addClass('active');
          }
        }
      });
    });
    observer.observe(target, config);
  }

  $('.w-slider-dot').each(function(index, dot) {
    setObserver(dot, index)
  });
});
```

--------------------------------

### Google Fonts and Feature Detection

Source: https://www.northecharge.com/mileage-reporting

Loads Google Fonts for styling and performs basic feature detection for touch support, adding corresponding classes to the HTML element.

```javascript
WebFont.load({
  google: {
    families: ["Inter:regular,500,600","Outfit:100,200,300,regular,500,600,700,800,900:latin,latin-ext"]
  }
});
!function(o,c){
  var n=c.documentElement,
  t=" w-mod-";
  n.className+=t+"js";
  ("ontouchstart"in o||o.DocumentTouch&&c instanceof DocumentTouch)&&(n.className+=t+"touch")
}(window,document);
```

--------------------------------

### JavaScript Popup Visibility Control

Source: https://www.northecharge.com/

Manages the display of a popup section on the webpage. It checks localStorage to prevent repeated displays and uses setTimeout to show the popup after a 15-second delay. The popup is initially hidden via CSS.

```javascript
//*document.addEventListener("DOMContentLoaded", function() { // Перевірка, чи поп-ап уже був показаний користувачеві //*if (!localStorage.getItem("popupShown")) { // Затримка на 15 секунд перед показом секції //*setTimeout(function() { //*var popupSection = document.querySelector('.pop-up-section'); //*if (popupSection) { //*popupSection.style.display = 'flex'; // Зробити секцію видимою з display: flex // Записуємо в localStorage, що поп-ап був показаний //*localStorage.setItem("popupShown", "true"); //*} //*}, 15000); // 15000 мілісекунд = 15 секунд //*} //*}); //*.pop-up-section { display: none; /* Початково приховуємо секцію */ }
```

--------------------------------

### Custom Slider Arrow Navigation and State Management

Source: https://www.northecharge.com/workplace-ev-charging

Provides custom logic for controlling a slider's navigation arrows (left and right) and managing their enabled/disabled states. It disables arrows when at the first or last slide and updates their appearance accordingly. This script targets elements with classes like '.w-slider', '.w-slide', '.w-slider-arrow-left', and '.w-slider-arrow-right'.

```javascript
document.addEventListener('DOMContentLoaded', function () {
  var slider = document.querySelector('.w-slider');
  if (slider) {
    var slides = slider.querySelectorAll('.w-slide');
    var totalSlides = slides.length;
    var currentIndex = 0;
    var leftArrow = slider.querySelector('.w-slider-arrow-left');
    var rightArrow = slider.querySelector('.w-slider-arrow-right');

    function updateButtonState() {
      if (currentIndex === 0) {
        leftArrow.style.pointerEvents = 'none';
        leftArrow.style.borderColor = '#A5A8AA';
      } else {
        leftArrow.style.pointerEvents = 'auto';
        leftArrow.style.borderColor = '';
      }

      if (currentIndex === totalSlides - 1) {
        rightArrow.style.pointerEvents = 'none';
        rightArrow.style.borderColor = '#A5A8AA';
      } else {
        rightArrow.style.pointerEvents = 'auto';
        rightArrow.style.borderColor = '';
      }
    }

    leftArrow.addEventListener('click', function () {
      if (currentIndex > 0) {
        currentIndex--;
        updateButtonState();
      }
    });

    rightArrow.addEventListener('click', function () {
      if (currentIndex < totalSlides - 1) {
        currentIndex++;
        updateButtonState();
      }
    });

    updateButtonState();
  }
});
```

--------------------------------

### Custom Slider Arrow Navigation and State Management

Source: https://www.northecharge.com/mileage-reporting

Provides custom logic for controlling a slider's navigation arrows (left and right) and managing their enabled/disabled states. It disables arrows when at the first or last slide and updates their appearance accordingly. This script targets elements with classes like '.w-slider', '.w-slide', '.w-slider-arrow-left', and '.w-slider-arrow-right'.

```javascript
document.addEventListener('DOMContentLoaded', function () {
  var slider = document.querySelector('.w-slider');
  if (slider) {
    var slides = slider.querySelectorAll('.w-slide');
    var totalSlides = slides.length;
    var currentIndex = 0;
    var leftArrow = slider.querySelector('.w-slider-arrow-left');
    var rightArrow = slider.querySelector('.w-slider-arrow-right');

    function updateButtonState() {
      if (currentIndex === 0) {
        leftArrow.style.pointerEvents = 'none';
        leftArrow.style.borderColor = '#A5A8AA';
      } else {
        leftArrow.style.pointerEvents = 'auto';
        leftArrow.style.borderColor = '';
      }

      if (currentIndex === totalSlides - 1) {
        rightArrow.style.pointerEvents = 'none';
        rightArrow.style.borderColor = '#A5A8AA';
      } else {
        rightArrow.style.pointerEvents = 'auto';
        rightArrow.style.borderColor = '';
      }
    }

    leftArrow.addEventListener('click', function () {
      if (currentIndex > 0) {
        currentIndex--;
        updateButtonState();
      }
    });

    rightArrow.addEventListener('click', function () {
      if (currentIndex < totalSlides - 1) {
        currentIndex++;
        updateButtonState();
      }
    });

    updateButtonState();
  }
});
```

--------------------------------

### jQuery Dropdown/Arrow Animation

Source: https://www.northecharge.com/mileage-reporting

Handles hover effects for dropdown menus, specifically animating an arrow icon to rotate 180 degrees on mouse enter and return to 0 degrees on mouse leave.

```javascript
$(document).ready(function() {
  var arrowRotated = false;
  $('#arrow-dropdown, #company-dropdown').on('mouseenter', function() {
    $('#company-dropdown').focus();
    if (!arrowRotated) {
      $('#arrow-dropdown').css({
        'transition': 'transform 0.3s',
        'transform': 'rotate(180deg)'
      });
      arrowRotated = true;
    }
  });
  $('#arrow-dropdown, #company-dropdown').on('mouseleave', function() {
    $('#arrow-dropdown').css({
      'transition': 'transform 0.3s',
      'transform': 'rotate(0deg)'
    });
    arrowRotated = false;
  });
});
```

--------------------------------

### Dropdown Arrow Rotation on Hover

Source: https://www.northecharge.com/workplace-ev-charging

jQuery code that handles mouse enter and leave events on elements with IDs 'arrow-dropdown' and 'company-dropdown'. It rotates an arrow element for visual feedback when hovering over the dropdown trigger.

```javascript
$(document).ready(function() {
  var arrowRotated = false;
  $('#arrow-dropdown, #company-dropdown').on('mouseenter', function() {
    $('#company-dropdown').focus();
    if (!arrowRotated) {
      $('#arrow-dropdown').css({
        'transition': 'transform 0.3s',
        'transform': 'rotate(180deg)'
      });
      arrowRotated = true;
    }
  });
  $('#arrow-dropdown, #company-dropdown').on('mouseleave', function() {
    $('#arrow-dropdown').css({
      'transition': 'transform 0.3s',
      'transform': 'rotate(0deg)'
    });
    arrowRotated = false;
  });
});
```

--------------------------------

### Dropdown Arrow Rotation on Hover

Source: https://www.northecharge.com/

This jQuery snippet handles the visual feedback for a dropdown menu. It rotates an arrow icon 180 degrees when the user hovers over the arrow or the associated company dropdown, and resets the rotation when the hover ends.

```javascript
$(document).ready(function() { var arrowRotated = false; $('#arrow-dropdown, #company-dropdown').on('mouseenter', function() { $('#company-dropdown').focus(); if (!arrowRotated) { $('#arrow-dropdown').css({ 'transition': 'transform 0.3s', 'transform': 'rotate(180deg)' }); arrowRotated = true; } }); $('#arrow-dropdown, #company-dropdown').on('mouseleave', function() { $('#arrow-dropdown').css({ 'transition': 'transform 0.3s', 'transform': 'rotate(0deg)' }); arrowRotated = false; }); });
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.