{"id":907,"date":"2023-05-22T09:25:44","date_gmt":"2023-05-22T09:25:44","guid":{"rendered":"https:\/\/spire.city\/?page_id=907"},"modified":"2023-05-30T09:05:20","modified_gmt":"2023-05-30T09:05:20","slug":"tabel","status":"publish","type":"page","link":"https:\/\/spire.city\/index.php\/tabel\/","title":{"rendered":"Phitoremediation calculator\u00a0"},"content":{"rendered":"\n<!DOCTYPE html>\n<html>\n<head>\n    <meta charset=\"utf-8\"\/>\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"\/>\n    <link\n            href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.0-alpha3\/dist\/css\/bootstrap.min.css\"\n            rel=\"stylesheet\"\n            integrity=\"sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M\/SXH301p5ILy+dN9+nJOZ\"\n            crossorigin=\"anonymous\"\n    \/>\n    <title>Calculator<\/title>\n    <style>\n        #calculator-container {\n            display: flex;\n            padding: 10px;\n        }\n\n        .div-valori {\n            margin: 12px;\n        }\n\n        \/* input[type=\"number\"] {\n          width: 100px;\n        } *\/\n        button {\n            margin-top: 12px;\n            padding: 15px 18px;\n            background-color: #3daf95;\n            color: white;\n            font-weight: 600;\n            width: 100%;\n            border-color: white;\n        }\n\n        button:hover {\n            background-color: #cb5920;\n            color: white;\n            border-color: white;\n        }\n\n        table {\n            margin-top: 20px;\n            border-collapse: collapse;\n        }\n\n        table td {\n            padding: 0px 24px !important;\n            border: 1px solid white !important;\n        }\n\n        .highlight-green {\n            color: black;\n            background: linear-gradient(130deg, #a7df62, #58ac30);\n            font-weight: 600;\n        }\n\n        .highlight-red-dark {\n            color: black;\n            background: linear-gradient(130deg, #da0000, #ba0001);\n            font-weight: 600;\n        }\n\n        .highlight-red-light {\n            color: black;\n            background: linear-gradient(130deg, #fe8483, #fe1f20);\n            font-weight: 600;\n        }\n\n        .highlight-orange {\n            color: black;\n            background: linear-gradient(130deg, #f09400, #fc5b00);\n            font-weight: 600;\n        }\n\n        .highlight-yellow {\n            color: black;\n            background: linear-gradient(130deg, #f3f9a6, #cbc634);\n            font-weight: 600;\n        }\n\n        .table-container {\n            display: flex;\n            justify-content: space-between;\n        }\n\n        .table-container table {\n            width: 100%;\n            border: 1px solid black;\n        }\n\n        .table-container th {\n            text-align: center;\n        }\n\n        .table-container td {\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            height: 100%;\n        }\n\n        .left-side {\n            width: 50%;\n            margin-right: 50px;\n        }\n\n        .right-side {\n            width: 50%;\n        }\n\n        .valori-container {\n            display: flex;\n        }\n\n        .estimate-text {\n            margin: 12px !important;\n            width: 95%;\n        }\n\n        .containerChart {\n            position: relative;\n            margin-bottom: 30px;\n        }\n\n        .chartText {\n            display: none;\n            position: absolute;\n            left: 50%;\n            transform: translateX(-50%);\n        }\n    <\/style>\n<\/head>\n<body>\n<div class=\"row\">\n    <div class=\"col-sm-6\">\n        <div class=\"row\">\n            <div class=\"col-sm-3\">\n                <label for=\"valoarePb\">Initial Pb:<\/label>\n                <input type=\"number\" class=\"form-control\" id=\"valoarePb\"\/>\n            <\/div>\n            <div class=\"col-sm-3\">\n                <label for=\"valoareZn\">Initial Zn:<\/label>\n                <input type=\"number\" class=\"form-control\" id=\"valoareZn\"\/>\n            <\/div>\n            <div class=\"col-sm-3\">\n                <label for=\"valoareCu\">Initial Cu:<\/label>\n                <input type=\"number\" class=\"form-control\" id=\"valoareCu\"\/>\n            <\/div>\n            <div class=\"col-sm-3\">\n                <label for=\"valoareCd\">Initial Cd:<\/label>\n                <input type=\"number\" class=\"form-control\" id=\"valoareCd\"\/>\n            <\/div>\n        <\/div>\n\n        <button onclick=\"calculeaza()\">ESTIMATE<\/button>\n\n        <h6 class=\"estimate-text\">\n            Estimations of Pollutant levels based on the experimental SPIRE\n            evolution. The estimates for each pollutant are extrapolated from\n            masurements conducted on polluted lands in the Baia Mare Area. Each\n            row represents a 6month timeframe. The estimated values are calculated\n            up to the moment soils reach the normal levels.\n        <\/h6>\n        <div class=\"row table-container\">\n            <div class=\"col-sm-3\">\n                <table id=\"tabelPb\" class=\"table\">\n                    <tr>\n                        <th>Pb<\/th>\n                    <\/tr>\n                <\/table>\n            <\/div>\n            <div class=\"col-sm-3\">\n                <table id=\"tabelZn\" class=\"table\">\n                    <tr>\n                        <th>Zn<\/th>\n                    <\/tr>\n                <\/table>\n            <\/div>\n            <div class=\"col-sm-3\">\n                <table id=\"tabelCu\" class=\"table\">\n                    <tr>\n                        <th>Cu<\/th>\n                    <\/tr>\n                <\/table>\n            <\/div>\n            <div class=\"col-sm-3\">\n                <table id=\"tabelCd\" class=\"table\">\n                    <tr>\n                        <th>Cd<\/th>\n                    <\/tr>\n                <\/table>\n            <\/div>\n        <\/div>\n\n    <\/div>\n\n    <div class=\"col-sm-6\">\n        <div class=\"table-responsive\">\n            <table class=\"table\">\n                <thead>\n                <tr>\n                    <th><\/th>\n                    <th>Pb<\/th>\n                    <th>Zn<\/th>\n                    <th>Cu<\/th>\n                    <th>Cd<\/th>\n                <\/tr>\n                <\/thead>\n                <tbody>\n                <tr>\n                    <td class=\"highlight-green\">Normal values (mg\/kg s.u.)<\/td>\n                    <td>20<\/td>\n                    <td>100<\/td>\n                    <td>20<\/td>\n                    <td>1<\/td>\n                <\/tr>\n                <tr>\n                    <td class=\"highlight-yellow\">\n                        Sensitive used intervention thresholds (mg\/kg s.u.)\n                    <\/td>\n                    <td>50<\/td>\n                    <td>300<\/td>\n                    <td>100<\/td>\n                    <td>3<\/td>\n                <\/tr>\n                <tr>\n                    <td class=\"highlight-orange\">\n                        Less sensitive intervention thresholds used (mg\/kg\n                        s.u.)\n                    <\/td>\n                    <td>250<\/td>\n                    <td>700<\/td>\n                    <td>250<\/td>\n                    <td>5<\/td>\n                <\/tr>\n                <tr>\n                    <td class=\"highlight-red-light\">\n                        Alert thresholds sensitive uses (mg\/kg s.u.)\n                    <\/td>\n                    <td>100<\/td>\n                    <td>600<\/td>\n                    <td>200<\/td>\n                    <td>5<\/td>\n                <\/tr>\n                <tr>\n                    <td class=\"highlight-red-dark\">\n                        Alert thresholds less sensitive uses (mg\/kg s.u.)\n                    <\/td>\n                    <td>1000<\/td>\n                    <td>1500<\/td>\n                    <td>500<\/td>\n                    <td>10<\/td>\n                <\/tr>\n                <\/tbody>\n            <\/table>\n        <\/div>\n        <div class=\"containerChart\">\n            <canvas id=\"myChartPb\"><\/canvas>\n            <div id=\"chartPbText\" class=\"chartText\">\n                <span style=\"font-size: 14px;\">Semestrial PB levels decrease<\/span>\n            <\/div>\n        <\/div>\n        <div class=\"containerChart\">\n            <canvas id=\"myChartZn\"><\/canvas>\n            <div id=\"chartZnText\" class=\"chartText\">\n                <span style=\"font-size: 14px;\">Semestrial ZN levels decrease<\/span>\n            <\/div>\n        <\/div>\n        <div class=\"containerChart\">\n            <canvas id=\"myChartCu\"><\/canvas>\n            <div id=\"chartCuText\" class=\"chartText\">\n                <span style=\"font-size: 14px;\">Semestrial CU levels decrease<\/span>\n            <\/div>\n        <\/div>\n        <div class=\"containerChart\">\n            <canvas id=\"myChartCd\"><\/canvas>\n            <div id=\"chartCdText\" class=\"chartText\">\n                <span style=\"font-size: 14px;\">Semestrial CD levels decrease<\/span>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/div>\n\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js\"><\/script>\n\n<script>\n    function calculeaza() {\n        var headerCell = $(\"#tabelPb th:first\");\n        headerCell\n            .closest(\"table\")\n            .find(\"tr\")\n            .not(headerCell.closest(\"tr\"))\n            .remove();\n\n        var headerCell = $(\"#tabelZn th:first\");\n        headerCell\n            .closest(\"table\")\n            .find(\"tr\")\n            .not(headerCell.closest(\"tr\"))\n            .remove();\n\n        var headerCell = $(\"#tabelCu th:first\");\n        headerCell\n            .closest(\"table\")\n            .find(\"tr\")\n            .not(headerCell.closest(\"tr\"))\n            .remove();\n\n        var headerCell = $(\"#tabelCd th:first\");\n        headerCell\n            .closest(\"table\")\n            .find(\"tr\")\n            .not(headerCell.closest(\"tr\"))\n            .remove();\n\n        var valoarePb = parseFloat(document.getElementById(\"valoarePb\").value);\n        var valoareZn = parseFloat(document.getElementById(\"valoareZn\").value);\n        var valoareCu = parseFloat(document.getElementById(\"valoareCu\").value);\n        var valoareCd = parseFloat(document.getElementById(\"valoareCd\").value);\n\n        var rezultat1 = valoarePb;\n        var rezultat2 = valoareZn;\n        var rezultat3 = valoareCu;\n        var rezultat4 = valoareCd;\n        var contor = 1;\n\n        var rezultateTablePb = document.getElementById(\"tabelPb\");\n        var rezultateTableZn = document.getElementById(\"tabelZn\");\n        var rezultateTableCu = document.getElementById(\"tabelCu\");\n        var rezultateTableCd = document.getElementById(\"tabelCd\");\n        var row = document.createElement(\"tr\");\n        var valoriPb = [];\n        var labelsPb = [];\n        var valoriZn = [];\n        var labelsZn = [];\n        var valoriCu = [];\n        var labelsCu = [];\n        var valoriCd = [];\n        var labelsCd = [];\n        while (rezultat1 >= 20) {\n            valoriPb.push(rezultat1);\n            labelsPb.push(contor++);\n            var cell1 = document.createElement(\"td\");\n            cell1.textContent = Math.round(rezultat1);\n\n            if (rezultat1 > 1000) {\n                cell1.classList.add(\"highlight-red-dark\");\n            } else if (rezultat1 > 250 && rezultat1 <= 1000) {\n                cell1.classList.add(\"highlight-red-light\");\n            } else if (rezultat1 > 100 && rezultat1 <= 250) {\n                cell1.classList.add(\"highlight-orange\");\n            } else if (rezultat1 > 50 && rezultat1 <= 100) {\n                cell1.classList.add(\"highlight-yellow\");\n            } else {\n                cell1.classList.add(\"highlight-green\");\n            }\n\n            row.appendChild(cell1);\n            rezultateTablePb.appendChild(row);\n            row = document.createElement(\"tr\");\n            rezultat1 = calculeazaRezultat1(rezultat1);\n        }\n        \/\/  console.log(valoriPb);\n        \/\/ inceput chart Pb\n        var canvas = document.getElementById(\"myChartPb\");\n        var chartInstance = Chart.getChart(canvas);\n\n        if (chartInstance) {\n            chartInstance.destroy();\n            document.getElementById(\"chartPbText\").style.display = \"none\";\n        }\n        if (valoriPb.length > 0) {\n\n            var ctx = canvas.getContext(\"2d\");\n\n            var chartPb = new Chart(ctx, {\n                type: \"line\",\n                data: {\n                    labels: labelsPb,\n                    datasets: [\n                        {\n                            label: \"Pb\",\n                            data: valoriPb,\n                            borderWidth: 1,\n                        },\n                    ],\n                },\n                options: {\n                    scales: {\n                        y: {\n                            beginAtZero: true,\n                        },\n                    },\n                    plugins: {\n                        legend: {\n                            display: false\n                        },\n                    }\n                }\n            });\n            document.getElementById(\"chartPbText\").style.display = \"block\";\n        }\n        \/\/ sfarsit chart pb\n        contor = 1;\n        while (rezultat2 >= 100) {\n            valoriZn.push(rezultat2);\n            labelsZn.push(contor++);\n            var cell2 = document.createElement(\"td\");\n            cell2.textContent = Math.round(rezultat2);\n\n            if (rezultat2 > 1500) {\n                cell2.classList.add(\"highlight-red-dark\");\n            } else if (rezultat2 > 700 && rezultat2 <= 1500) {\n                cell2.classList.add(\"highlight-red-light\");\n            } else if (rezultat2 > 600 && rezultat2 <= 700) {\n                cell2.classList.add(\"highlight-orange\");\n            } else if (rezultat2 > 30 && rezultat2 <= 600) {\n                cell2.classList.add(\"highlight-yellow\");\n            } else {\n                cell2.classList.add(\"highlight-green\");\n            }\n\n            row.appendChild(cell2);\n            rezultateTableZn.appendChild(row);\n            row = document.createElement(\"tr\");\n            rezultat2 = calculeazaRezultat2(rezultat2);\n        }\n        \/\/   console.log(valoriZn);\n\n        \/\/ inceput chart Zn\n        var canvas = document.getElementById(\"myChartZn\");\n        var chartInstance = Chart.getChart(canvas);\n\n        if (chartInstance) {\n            chartInstance.destroy();\n            document.getElementById(\"chartZnText\").style.display = \"none\";\n        }\n        if (valoriZn.length > 0) {\n\n            var ctx2 = canvas.getContext(\"2d\");\n\n            var chartZn = new Chart(ctx2, {\n                type: \"line\",\n                data: {\n                    labels: labelsZn,\n                    datasets: [\n                        {\n                            label: \"Zn\",\n                            data: valoriZn,\n                            borderWidth: 1,\n                        },\n                    ],\n                },\n                options: {\n                    scales: {\n                        y: {\n                            beginAtZero: true,\n                        },\n                    },\n                },\n            });\n            document.getElementById(\"chartZnText\").style.display = \"block\";\n        }\n        \/\/ sfarsit chart Zn\n\n        contor = 1;\n        while (rezultat3 >= 20) {\n            valoriCu.push(rezultat3);\n            labelsCu.push(contor++);\n            var cell3 = document.createElement(\"td\");\n\n            if (rezultat3 > 500) {\n                cell3.classList.add(\"highlight-red-dark\");\n            } else if (rezultat3 > 250 && rezultat3 <= 500) {\n                cell3.classList.add(\"highlight-red-light\");\n            } else if (rezultat3 > 200 && rezultat3 <= 250) {\n                cell3.classList.add(\"highlight-orange\");\n            } else if (rezultat3 > 100 && rezultat3 <= 200) {\n                cell3.classList.add(\"highlight-yellow\");\n            } else {\n                cell3.classList.add(\"highlight-green\");\n            }\n\n            cell3.textContent = Math.round(rezultat3);\n            row.appendChild(cell3);\n            rezultateTableCu.appendChild(row);\n            row = document.createElement(\"tr\");\n            rezultat3 = calculeazaRezultat3(rezultat3);\n        }\n        \/\/ console.log(valoriCu);\n        \/\/ inceput chart Cu\n        var canvas = document.getElementById(\"myChartCu\");\n        var chartInstance = Chart.getChart(canvas);\n\n        if (chartInstance) {\n            chartInstance.destroy();\n            document.getElementById(\"chartCuText\").style.display = \"none\";\n        }\n        if (valoriCu.length > 0) {\n            var ctx3 = canvas.getContext(\"2d\");\n\n            var chartCu = new Chart(ctx3, {\n                type: \"line\",\n                data: {\n                    labels: labelsCu,\n                    datasets: [\n                        {\n                            label: \"Cu\",\n                            data: valoriCu,\n                            borderWidth: 1,\n                        },\n                    ],\n                },\n                options: {\n                    scales: {\n                        y: {\n                            beginAtZero: true,\n                        },\n                    },\n                },\n            });\n            document.getElementById(\"chartCuText\").style.display = \"block\";\n        }\n        \/\/ sfarsit chart Cu\n\n        contor = 1;\n        while (rezultat4 >= 1) {\n            valoriCd.push(rezultat4);\n            labelsCd.push(contor++);\n            var cell4 = document.createElement(\"td\");\n\n            if (rezultat4 > 10) {\n                cell4.classList.add(\"highlight-red-dark\");\n            } else if (rezultat4 > 5 && rezultat4 <= 10) {\n                cell4.classList.add(\"highlight-red-light\");\n            } else if (rezultat4 > 3 && rezultat4 <= 5) {\n                cell4.classList.add(\"highlight-yellow\");\n            } else {\n                cell4.classList.add(\"highlight-green\");\n            }\n\n            cell4.textContent = roundNumber(rezultat4, 2);\n            row.appendChild(cell4);\n            rezultateTableCd.appendChild(row);\n            row = document.createElement(\"tr\");\n            rezultat4 = calculeazaRezultat4(rezultat4);\n        }\n\n        \/\/ inceput chart Cd\n        var canvas = document.getElementById(\"myChartCd\");\n        var chartInstance = Chart.getChart(canvas);\n\n        if (chartInstance) {\n            chartInstance.destroy();\n            document.getElementById(\"chartCdText\").style.display = \"none\";\n        }\n        if (valoriCd.length > 0) {\n\n            var ctx4 = canvas.getContext(\"2d\");\n\n            var chartCd = new Chart(ctx4, {\n                type: \"line\",\n                data: {\n                    labels: labelsCd,\n                    datasets: [\n                        {\n                            label: \"Cd\",\n                            data: valoriCd,\n                            borderWidth: 1,\n                        },\n                    ],\n                },\n                options: {\n                    scales: {\n                        y: {\n                            beginAtZero: true,\n                        },\n                    },\n                },\n            });\n            document.getElementById(\"chartCdText\").style.display = \"block\";\n        }\n        \/\/ sfarsit chart Cd\n    }\n\n    function calculeazaRezultat1(valoare) {\n        return valoare > 0\n            ? valoare > 1000\n                ? valoare * 0.96\n                : valoare > 250\n                    ? valoare * 0.92\n                    : valoare > 100\n                        ? valoare * 0.94\n                        : valoare > 50\n                            ? valoare * 0.95\n                            : valoare > 20\n                                ? valoare * 0.95\n                                : valoare * 0.97\n            : valoare;\n    }\n\n    function calculeazaRezultat2(valoare) {\n        return valoare > 0\n            ? valoare > 1500\n                ? valoare * 0.96\n                : valoare > 700\n                    ? valoare * 0.97\n                    : valoare > 600\n                        ? valoare * 0.94\n                        : valoare > 300\n                            ? valoare * 0.92\n                            : valoare > 100\n                                ? valoare * 0.92\n                                : valoare * 0.95\n            : valoare;\n    }\n\n    function calculeazaRezultat3(valoare) {\n        return valoare > 0\n            ? valoare > 500\n                ? valoare * 0.97\n                : valoare > 250\n                    ? valoare * 0.98\n                    : valoare > 200\n                        ? valoare * 0.97\n                        : valoare > 100\n                            ? valoare * 0.95\n                            : valoare > 20\n                                ? valoare * 0.96\n                                : valoare * 0.96\n            : valoare;\n    }\n\n    function calculeazaRezultat4(valoare) {\n        return valoare > 0\n            ? valoare > 10\n                ? valoare * 0.96\n                : valoare > 5\n                    ? valoare * 0.93\n                    : valoare > 3\n                        ? valoare * 0.94\n                        : valoare > 2\n                            ? valoare * 0.94\n                            : valoare > 1\n                                ? valoare * 0.96\n                                : valoare * 0.96\n            : valoare;\n    }\n\n    function roundNumber(num, scale) {\n        if (!(\"\" + num).includes(\"e\")) {\n            return +(Math.round(num + \"e+\" + scale) + \"e-\" + scale);\n        } else {\n            var arr = (\"\" + num).split(\"e\");\n            var sig = \"\";\n            if (+arr[1] + scale > 0) {\n                sig = \"+\";\n            }\n            return +(\n                Math.round(+arr[0] + \"e\" + sig + (+arr[1] + scale)) +\n                \"e-\" +\n                scale\n            );\n        }\n    }\n<\/script>\n<script src=\"https:\/\/code.jquery.com\/jquery-3.6.0.min.js\"><\/script>\n\n<script\n        src=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.0-alpha3\/dist\/js\/bootstrap.bundle.min.js\"\n        integrity=\"sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe\"\n        crossorigin=\"anonymous\"\n><\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Calculator Initial Pb: Initial Zn: Initial Cu: Initial Cd: ESTIMATE Estimations of Pollutant levels based on the experimental SPIRE evolution. The estimates for each pollutant are extrapolated from masurements conducted on polluted lands in the Baia Mare Area. Each row represents a 6month timeframe. The estimated values are calculated up&#8230;<\/p>\n<p> <a class=\"continue-reading-link\" href=\"https:\/\/spire.city\/index.php\/tabel\/\"><span>Continue reading<\/span><i class=\"crycon-right-dir\"><\/i><\/a> <\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/spire.city\/index.php\/wp-json\/wp\/v2\/pages\/907"}],"collection":[{"href":"https:\/\/spire.city\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/spire.city\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/spire.city\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/spire.city\/index.php\/wp-json\/wp\/v2\/comments?post=907"}],"version-history":[{"count":135,"href":"https:\/\/spire.city\/index.php\/wp-json\/wp\/v2\/pages\/907\/revisions"}],"predecessor-version":[{"id":1118,"href":"https:\/\/spire.city\/index.php\/wp-json\/wp\/v2\/pages\/907\/revisions\/1118"}],"wp:attachment":[{"href":"https:\/\/spire.city\/index.php\/wp-json\/wp\/v2\/media?parent=907"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}