patch.js

/**
 * Basic dark mode patch for IPFire
 * Made by Jiab77 - 2022
 * 
 * @version 0.5.3
 */

"use strict";

// Global config
let debugMode = false;

// Patch IIFE
(() => {
    "use strict";

    // Internal config
    const useEncodedPaths = true;
    const darkModePatchVersion = '0.5.3';
    const transitionDelay = '.3s';

    // Show version on load
    console.log(`Dark mode patch for IPFire loaded.\n\nVersion: ${darkModePatchVersion}`);

    // Create the query list.
    const darkModeQuery = window.matchMedia("(prefers-color-scheme: dark)");

    // Icons from Feather library
    const lightModeIcon = 'PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiNmZmRjNDQiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBjbGFzcz0iZmVhdGhlciBmZWF0aGVyLXN1biI+PGNpcmNsZSBjeD0iMTIiIGN5PSIxMiIgcj0iNSI+PC9jaXJjbGU+PGxpbmUgeDE9IjEyIiB5MT0iMSIgeDI9IjEyIiB5Mj0iMyI+PC9saW5lPjxsaW5lIHgxPSIxMiIgeTE9IjIxIiB4Mj0iMTIiIHkyPSIyMyI+PC9saW5lPjxsaW5lIHgxPSI0LjIyIiB5MT0iNC4yMiIgeDI9IjUuNjQiIHkyPSI1LjY0Ij48L2xpbmU+PGxpbmUgeDE9IjE4LjM2IiB5MT0iMTguMzYiIHgyPSIxOS43OCIgeTI9IjE5Ljc4Ij48L2xpbmU+PGxpbmUgeDE9IjEiIHkxPSIxMiIgeDI9IjMiIHkyPSIxMiI+PC9saW5lPjxsaW5lIHgxPSIyMSIgeTE9IjEyIiB4Mj0iMjMiIHkyPSIxMiI+PC9saW5lPjxsaW5lIHgxPSI0LjIyIiB5MT0iMTkuNzgiIHgyPSI1LjY0IiB5Mj0iMTguMzYiPjwvbGluZT48bGluZSB4MT0iMTguMzYiIHkxPSI1LjY0IiB4Mj0iMTkuNzgiIHkyPSI0LjIyIj48L2xpbmU+PC9zdmc+';
    const darkModeIcon = 'PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiMzODljZGMiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBjbGFzcz0iZmVhdGhlciBmZWF0aGVyLW1vb24iPjxwYXRoIGQ9Ik0yMSAxMi43OUE5IDkgMCAxIDEgMTEuMjEgMyA3IDcgMCAwIDAgMjEgMTIuNzl6Ij48L3BhdGg+PC9zdmc+';

    // Create theme selector
    const darkModeSelector = document.createElement('div');
    darkModeSelector.id = 'theme-selector';
    darkModeSelector.style.float = 'right';
    darkModeSelector.style.marginLeft = '15px';

    // Target 'cssmenu' DOM element
    const cssMenu = document.getElementById('cssmenu');

    // Target 'traffic' DOM element
    const trafficElement = document.getElementById('traffic');

    // Inject theme selector before 'traffic' DOM element
    cssMenu.insertBefore(darkModeSelector, trafficElement);

    // Detect current URL/Path
    function getCurrentPath() {
        const currentURL = document.URL ? document.URL : window.location.href;
        const parsedURL = new URL(currentURL);

        if (debugMode && debugMode === true) {
            console.log('Current URL:', currentURL);
            console.table(parsedURL);
        }
        console.log('Current Path:', parsedURL.pathname);

        return parsedURL.pathname;
    }

    // Inject given patch
    function injectPatch(id, patch) {
        // Target document 'head'
        const docHead = document.head || document.getElementsByTagName('head')[0];

        // Try to inject new 'style' element in document head
        if (docHead.insertAdjacentElement) {
            // Insert new 'style' element
            docHead.insertAdjacentHTML("beforeend", `<style id="${id}">${patch}</style>`);
        }
        else {
            // Create new 'style' element
            const newStyle = createElement('style');
            newStyle.type = 'text/css';
            newStyle.id = id;

            // Insert CSS code inside the new 'style' element
            if (newStyle.styleSheet) {
                // This is required for IE8 and below.
                newStyle.styleSheet.cssText = patch;
            }
            else {
                newStyle.appendChild(document.createTextNode(patch));
            }

            // Inject new 'style' element using old way
            docHead.appendChild(newStyle);
        }
    }

    // Remove given patch
    function removePatch(id) {
        // Target injected 'style' element
        const injectedPatch = document.getElementById(id);

        // Remove previously injected patch
        if (injectedPatch !== null) {
            injectedPatch.remove();
        }
    }

    // Inject patch that can be applied to style almost everything
    function injectGenericPatch() {
        // Inline CSS code for generic changes
        const cssPatchGeneric = `
.bigbox {
    background: #444;
    color: #fff;
    transition: all ${transitionDelay};
}
.bigbox .heading,
.bigbox select.pflist {
    color: #000;
}
#cssmenu a {
    color: #fff;
    transition: color ${transitionDelay};
}
#cssmenu>ul>li.active a,
#cssmenu>ul>li:hover>a {
    background: #d90000;
}
#cssmenu .has-sub ul li a {
    background: #444;
    color: #fff;
}
#cssmenu .has-sub ul li:hover a {
    background: #777;
}
#main_inner h1 {
    color: palevioletred;
    transition: all ${transitionDelay};
}
.rrdimage button {
    color: #00f2ff;
    transition: color ${transitionDelay};
}
.rrdimage li:not(:first-child)::before {
    color: #fff;
    transition: color ${transitionDelay};
}
div.rrdimage > img {
    /* filter: invert(100%); */
    filter: invert(100%) hue-rotate(325deg);
    transition: filter ${transitionDelay};
}
font[color="#339933"], font[color="green"] {
    color: #23c723;
    transition: color ${transitionDelay};
}
font[color="#333399"], font[color="blue"] {
    color: #00bfff;
    transition: color ${transitionDelay};
}
font[color="#993333"], font[color="red"] {
    color: orangered;
    transition: color ${transitionDelay};
}
font[color="#808080"] {
    color: #b1b1b1;
    transition: color ${transitionDelay};
}
a {
    color: orangered;
    transition: color ${transitionDelay};
}
`;

        // Call main injection method
        injectPatch('dark-theme-generic-patch', cssPatchGeneric);
    }

    // Generic patch removal method
    function removeGenericPatch() {
        // Call main removal method
        removePatch('dark-theme-generic-patch');
    }

    // Inject conditional patch based on the current URL pathname
    function injectConditionalPatch() {
        const currentPath = getCurrentPath();
        const encodedCurrentPath = btoa(currentPath);
        console.log(`Encoded path: ${encodedCurrentPath}`)
        let cssPatchConditional;

        switch (useEncodedPaths === true ? encodedCurrentPath : currentPath) {
            case 'L2NnaS1iaW4vZmlyZWluZm8uY2dp':
            case 'L2NnaS1iaW4vY29ubnNjaGVkdWxlci5jZ2k=':
            case 'L2NnaS1iaW4vdnBubWFpbi5jZ2k=':
            case 'L2NnaS1iaW4vbG9jYXRpb24tYmxvY2suY2dp':
            case 'L2NnaS1iaW4vd2lyZWxlc3MuY2dp':
            case 'L2NnaS1iaW4vZndob3N0cy5jZ2k=':
            case 'L2NnaS1iaW4vbG9ncy5jZ2kvb3ZwbmNsaWVudHMuZGF0':
            case 'L2NnaS1iaW4vaXBpbmZvLmNnaQ==':
            case 'L2NnaS1iaW4vd2FrZW9ubGFuLmNnaQ==':
            case 'L2NnaS1iaW4vZGRucy5jZ2k=':
            case 'L2NnaS1iaW4vY2FwdGl2ZS5jZ2k=':
            case 'L2NnaS1iaW4vY291bnRyeS5jZ2k=':
                console.log(`Applying conditional patch for:\n - ${useEncodedPaths === true ? encodedCurrentPath : currentPath}`);
                cssPatchConditional = `
.bigbox table.tbl {
    color: #000;
}
`;
                break;

            case 'L2NnaS1iaW4vdnVsbmVyYWJpbGl0aWVzLmNnaQ==':
                console.log(`Applying conditional patch for:\n - ${useEncodedPaths === true ? encodedCurrentPath : currentPath}`);
                cssPatchConditional = `
.bigbox > #main_inner > .post > table:first-of-type {
    color: #000;
}
`;
                break;

            case 'L2NnaS1iaW4vb3Zwbm1haW4uY2dp':
                console.log(`Applying conditional patch for:\n - ${useEncodedPaths === true ? encodedCurrentPath : currentPath}`);

                /**
                 * There is a bug in the rendered table that I've spotted when having trigger an error
                 * by clicking on the "Show certificate revocation list" button or by clicking
                 * on the "Upload CA certificate" button with no CA name given.
                 * 
                 * The table cells should have the class 'base' assigned but the quotes are misplaced.
                 * 
                 * Actual code: '<td class'base'=""><b>String</b></td>'
                 * Correct code: '<td class"base"><b>String</b></td>'
                 * 
                 * This then make the patching a little bit more tricky as this bug is not visible
                 * when no error is displayed.
                 * 
                 * So I must create additional rules to apply the same style.
                 * 
                 * Bug report created: https://bugzilla.ipfire.org/show_bug.cgi?id=13030
                 */

                cssPatchConditional = `
.bigbox table.tbl,
.bigbox table tr[bgcolor] td,
.bigbox table tr td[bgcolor] {
    color: #000;
}

/* Temporary code only required until the page got fixed */
/* .bigbox table td b {
    color: #fff !important;
    transition: color ${transitionDelay};
}
.bigbox table td[bgcolor] b {
    color: #000 !important;
} */
/* End of temporary code */
`;
                break;

            case 'L2NnaS1iaW4vcmVtb3RlLmNnaQ==':
            case 'L2NnaS1iaW4vaG9zdHMuY2dp':
            case 'L2NnaS1iaW4vcm91dGluZy5jZ2k=':
            case 'L2NnaS1iaW4vbG9ncy5jZ2kvaXBibG9ja2xpc3RzLmRhdA==':
                console.log(`Applying conditional patch for:\n - ${useEncodedPaths === true ? encodedCurrentPath : currentPath}`);
                cssPatchConditional = `
.bigbox > #main_inner > .post:last-of-type > table {
    color: #000;
}
.bigbox > #main_inner > .post:last-of-type > table a {
    color: #d90000;
    transition: unset;
}
`;
                break;

            case 'L2NnaS1iaW4vYWxpYXNlcy5jZ2k=':
                console.log(`Applying conditional patch for:\n - ${useEncodedPaths === true ? encodedCurrentPath : currentPath}`);
                cssPatchConditional = `
.bigbox table:first-of-type td.base {
    color: #ff9ebe !important;
    transition: color ${transitionDelay};
}
.bigbox table:first-of-type td.base:nth-of-type(5) {
    color: #fff !important;
    transition: color ${transitionDelay};
}
.bigbox table:last-of-type {
    color: #000;
}
.bigbox table:last-of-type a {
    color: #d90000;
    transition: unset;
}
`;
                break;

            case 'L2NnaS1iaW4vc2VydmljZXMuY2dp':
            case 'L2NnaS1iaW4vaXBibG9ja2xpc3QuY2dp':
            case 'L2NnaS1iaW4vbG9ncy5jZ2kvZmlyZXdhbGxsb2dpcC5kYXQ=':
            case 'L2NnaS1iaW4vbG9ncy5jZ2kvZmlyZXdhbGxsb2dwb3J0LmRhdA==':
            case 'L2NnaS1iaW4vbG9ncy5jZ2kvZmlyZXdhbGxsb2djb3VudHJ5LmRhdA==':
                console.log(`Applying conditional patch for:\n - ${useEncodedPaths === true ? encodedCurrentPath : currentPath}`);
                cssPatchConditional = `
.bigbox table.tbl {
    color: #000;
}
.bigbox table.tbl a {
    color: #d90000;
    transition: unset;
}
`;
                break;

            case 'L2NnaS1iaW4vZGhjcC5jZ2k=':
                console.log(`Applying conditional patch for:\n - ${useEncodedPaths === true ? encodedCurrentPath : currentPath}`);
                cssPatchConditional = `
.bigbox table.tbl, .bigbox table tr[bgcolor] {
    color: #000;
}
.bigbox table.tbl a {
    color: #d90000;
    transition: unset;
}
`;
                break;

            case 'L2NnaS1iaW4vZG5zLmNnaQ==':
                console.log(`Applying conditional patch for:\n - ${useEncodedPaths === true ? encodedCurrentPath : currentPath}`);
                cssPatchConditional = `
.bigbox table.tbl {
    color: #000;
}
.bigbox table.tbl tr:first-child td strong {
    color: #fff;
    transition: color ${transitionDelay};
}
`;
                break;

            case 'L2NnaS1iaW4vdXBkYXRleGxyYXRvci5jZ2k=':
                console.log(`Applying conditional patch for:\n - ${useEncodedPaths === true ? encodedCurrentPath : currentPath}`);

                /**
                 * There is a bug in the rendered table for the cache statistics
                 * section of this page.
                 * 
                 * Bug fixed, report here: https://bugzilla.ipfire.org/show_bug.cgi?id=13024
                 */

                cssPatchConditional = `
/* Rules for the cache statistics table (the one with the broken 'bgcolor' value) */
.bigbox table {
    color: #fff;
    transition: color ${transitionDelay};
}
.bigbox table:nth-of-type(4) tr[class] td.base {
    color: #000;
}
/* End of rules for the cache statistics table */

/* Rules for the cache management table */
.bigbox table:nth-of-type(4) tr:first-child td.base {
    color: #fff;
    transition: color ${transitionDelay};
}
.bigbox table:nth-of-type(4) tr[class] td.base {
    color: #000;
}
.bigbox table:nth-of-type(4) td.base a {
    color: #d90000;
    transition: unset;
}
/* End of rules for the cache management table */
`;
                break;

            case 'L2NnaS1iaW4vdG9yLmNnaQ==':
                console.log(`Applying conditional patch for:\n - ${useEncodedPaths === true ? encodedCurrentPath : currentPath}`);
                cssPatchConditional = `
.bigbox table.tbl, .bigbox table tr td b {
    color: #000;
}
.bigbox table.tbl tr td:first-child, .bigbox .post:last-of-type table tr td:not([bgcolor]) b {
    color: #fff;
    transition: color ${transitionDelay};
}
`;
                break;

            case 'L2NnaS1iaW4vaWRzLmNnaQ==':
            case 'L2NnaS1iaW4vZ3VhcmRpYW4uY2dp':
                console.log(`Applying conditional patch for:\n - ${useEncodedPaths === true ? encodedCurrentPath : currentPath}`);
                cssPatchConditional = `
.bigbox table.tbl tr:not(:nth-of-type(2)) td,
.bigbox table tr td.base[bgcolor] b,
.bigbox table tr td.base[bgcolor] {
    color: #000;
}
.bigbox table tr td.base[bgcolor] a {
    color: #d90000;
    transition: unset;
}
`;
                break;

            case 'L2NnaS1iaW4vZmlyZXdhbGwuY2dp':
                console.log(`Applying conditional patch for:\n - ${useEncodedPaths === true ? encodedCurrentPath : currentPath}`);
                cssPatchConditional = `
.bigbox table.tbl {
    color: #000;
}
.bigbox table.tbl table tr td {
    color: #fff;
    transition: color ${transitionDelay};
}
`;
                break;

            case 'L2NnaS1iaW4vc2FtYmEuY2dp':
                console.log(`Applying conditional patch for:\n - ${useEncodedPaths === true ? encodedCurrentPath : currentPath}`);
                cssPatchConditional = `
.bigbox table.tbl {
    color: #000;
}
.bigbox > #main_inner > .post:nth-of-type(2) table.tbl tr td:first-child {
    color: #fff;
    transition: color ${transitionDelay};
}
.bigbox table.tbl tr td:first-child b {
    color: #000 !important;
}
`;
                break;

            case 'L2NnaS1iaW4vb3B0aW9uc2Z3LmNnaQ==':
                console.log(`Applying conditional patch for:\n - ${useEncodedPaths === true ? encodedCurrentPath : currentPath}`);
                cssPatchConditional = `
.bigbox > #main_inner > .post:last-of-type table tr:first-child td {
    color: orangered !important;
    transition: color ${transitionDelay};
}
`;
                break;

            case 'L2NnaS1iaW4vd2lvLmNnaQ==':
                console.log(`Applying conditional patch for:\n - ${useEncodedPaths === true ? encodedCurrentPath : currentPath}`);
                cssPatchConditional = `
.bigbox table tr[bgcolor] td,
.bigbox table tr td[bgcolor] {
    color: #000;
}
.bigbox table td a {
    color: #d90000;
    transition: unset;
}
.bigbox table td font[color="#993333"] {
    color: #993333;
    transition: unset;
}
.bigbox table td font[color="#333399"] {
    color: #333399;
    transition: unset;
}
.bigbox table td font[color="#339933"] {
    color: #339933;
    transition: unset;
}
`;
                break;

            case 'L2NnaS1iaW4vd2xhbmFwLmNnaQ==':
                console.log(`Applying conditional patch for:\n - ${useEncodedPaths === true ? encodedCurrentPath : currentPath}`);
                cssPatchConditional = `
.bigbox table.tbl:nth-of-type(1) tr:last-of-type,
.bigbox table.tbl:nth-of-type(3) {
    color: #000;
}
`;
                break;

            case 'L2NnaS1iaW4vbG9ncy5jZ2kvbG9nLmRhdA==':
                console.log(`Applying conditional patch for:\n - ${useEncodedPaths === true ? encodedCurrentPath : currentPath}`);
                cssPatchConditional = `
.bigbox > #main_inner > .post > table:not(.tbl) {
    color: #fff;
    transition: color ${transitionDelay};
}
.bigbox > #main_inner > .post > table:nth-of-type(1) tr:first-child td a,
.bigbox > #main_inner > .post > table:nth-of-type(3) tr:first-child td a {
    color: #00bfff;
    font-weight: 700;
    transition: color ${transitionDelay};
}
.bigbox table.tbl {
    color: #000;
}
`;
                break;

            case 'L2NnaS1iaW4vbG9ncy5jZ2kvcHJveHlsb2cuZGF0':
            case 'L2NnaS1iaW4vbG9ncy5jZ2kvZmlyZXdhbGxsb2cuZGF0':
            case 'L2NnaS1iaW4vbG9ncy5jZ2kvdXJsZmlsdGVyLmRhdA==':
                console.log(`Applying conditional patch for:\n - ${useEncodedPaths === true ? encodedCurrentPath : currentPath}`);
                cssPatchConditional = `
.bigbox > #main_inner > .post > table:nth-of-type(1) tr:first-child td a,
.bigbox > #main_inner > .post > table:nth-of-type(3) tr:first-child td a {
    color: #00bfff;
    font-weight: 700;
    transition: color ${transitionDelay};
}
.bigbox > #main_inner > .post > table:nth-of-type(2) {
    color: #000;
}
.bigbox > #main_inner > .post > table:nth-of-type(2) a {
    color: #d90000;
    transition: unset;
}
.bigbox > #main_inner > .post > table:not(.tbl) {
    color: #fff;
    transition: color ${transitionDelay};
}
`;
                break;

            case 'L2NnaS1iaW4vbG9ncy5jZ2kvaWRzLmRhdA==':
                console.log(`Applying conditional patch for:\n - ${useEncodedPaths === true ? encodedCurrentPath : currentPath}`);
                cssPatchConditional = `
.bigbox > #main_inner > .post > table:nth-of-type(1) tr:first-child td a,
.bigbox > #main_inner > .post > table:nth-of-type(3) tr:first-child td a {
    color: #00bfff;
    font-weight: 700;
    transition: color ${transitionDelay};
}
.bigbox > #main_inner > .post > table:nth-of-type(2) {
    color: #000;
}
.bigbox > #main_inner > .post > table:nth-of-type(2) a {
    color: #d90000;
    transition: unset;
}
`;
                break;

            case 'L2NnaS1iaW4vbG9ncy5jZ2kvc2hvd3JlcXVlc3Rmcm9taXAuZGF0':
            case 'L2NnaS1iaW4vbG9ncy5jZ2kvc2hvd3JlcXVlc3Rmcm9tcG9ydC5kYXQ=':
            case 'L2NnaS1iaW4vbG9ncy5jZ2kvc2hvd3JlcXVlc3Rmcm9tY291bnRyeS5kYXQ=':
            case 'L2NnaS1iaW4vbG9ncy5jZ2kvc2hvd3JlcXVlc3Rmcm9tYmxvY2tsaXN0LmRhdA==':
                console.log(`Applying conditional patch for:\n - ${useEncodedPaths === true ? encodedCurrentPath : currentPath}`);
                cssPatchConditional = `
.bigbox > #main_inner > .post > table:nth-of-type(1) tr:first-child td a,
.bigbox > #main_inner > .post > table:nth-of-type(3) tr:first-child td a {
    color: #00bfff;
    font-weight: 700;
    transition: color ${transitionDelay};
}
.bigbox > #main_inner > .post > table:nth-of-type(2) tr:not(:first-child) td {
    color: #000;
}
.bigbox > #main_inner > .post > table:nth-of-type(2) a {
    color: #d90000;
    transition: unset;
}
`;
                break;

            default:
                console.log('No conditional patch defined for this page.');
                cssPatchConditional = '';
                break;
        }

        // Call main injection method
        injectPatch('dark-theme-conditional-patch', cssPatchConditional);
    }

    // Conditional patch removal method
    function removeConditionalPatch() {
        // Call main removal method
        removePatch('dark-theme-conditional-patch');
    }

    // Inject all required patches
    function injectPatches() {
        injectGenericPatch();
        injectConditionalPatch();
    }

    // Remove all applied patches
    function removePatches() {
        removeGenericPatch();
        removeConditionalPatch();
    }

    // Store selected theme
    function storeThemeChange(query) {
        localStorage.setItem('dark-mode', query);
    }

    // Theme change handler
    function handleThemeChange(query) {
        // Detect used browser
        const UA = navigator.userAgent;

        // Reset 'darkModeSelector' content
        darkModeSelector.innerHTML = '';

        // Create child element selector
        const imgSelector = document.createElement('img');
        imgSelector.id = 'icon-selector';
        imgSelector.style.cursor = 'pointer';
        imgSelector.style.width = '18px';
        imgSelector.style.height = '18px';
        imgSelector.style.marginTop = '3px';

        // Assign 'imgSelector' click handler
        imgSelector.onclick = () => {
            // Apply the 'toggle' effect by always inversing the mached value
            handleThemeChange({ matches: !query.matches });
        }

        // Show debug messages if enabled
        if (debugMode && debugMode === true) {
            console.log('Running patch on:', UA);
            console.log('Received value:', query);
        }

        if (query.matches && query.matches === true) {
            // Load dark theme
            console.log('Injecting dark theme.');
            imgSelector.src = `data:image/svg+xml;base64,${lightModeIcon}`;
            imgSelector.title = 'Toggle light mode';
            darkModeSelector.appendChild(imgSelector);
            injectPatches();
        }
        else {
            // Load light theme (means unload dark theme css file)
            console.log('Removing dark theme.');
            imgSelector.src = `data:image/svg+xml;base64,${darkModeIcon}`;
            imgSelector.title = 'Toggle dark mode';
            darkModeSelector.appendChild(imgSelector);
            removePatches();
        }

        // Store theme change
        storeThemeChange(JSON.stringify({ matches: query.matches }));
    }

    // Initial theme load
    handleThemeChange(JSON.parse(localStorage.getItem('dark-mode')) || darkModeQuery);

    // Monitor query changes
    darkModeQuery.addEventListener('change', handleThemeChange);

    // Remove listener on unload
    window.onunload = () => {
        darkModeQuery.removeEventListener('change');
    }
})();