i have a working script you just have to replace the chart with my chart : ا ل ف	3	111	Fire
ا ل ف	3	111	Fire
ا ل ف	3	111	Fire
ا ل ف	3	111	Fire
ا ل ف	3	111	Fire
ا ل ف	3	111	Fire
ا ل ف	3	111	
ا ل ف	3	111	
ب ا	2	3	Earth
ب ا	2	3	Earth
ج ي م	3	53	Air
ج ي م	3	53	Air
د ا ل	3	35	Water
د ا ل	3	35	Water
ه ا	2	6	Fire
ه ا	2	6	Fire
ه ا	2	6	Fire
ه ا	2	6	Fire
ه ا	2	6	Fire
و ا و	3	13	Earth
و ا و	3	13	Earth
ز ا ي	3	18	Air
ز ا ي	3	18	Air
ح ا	2	9	Water
ط ا	2	10	Fire
ي ا	2	11	Earth
ي ا	2	11	Earth
ي ا	2	11	Earth
ي ا	2	11	Earth
ك ا ف	3	101	Air
ك ا ف	3	101	Air
ك ا ف	3	101	Air
ل ا م	3	71	Water
م ي م	3	90	Fire
ن و ن	3	106	Earth
ن و ن	3	106	Earth
س ي ن	3	120	Air
ع ي ن	3	130	Water
ف ا	2	81	Fire
ص ا د	3	95	Earth
ق ا ف	3	181	Air
ر ا	2	201	Water
ر ا	2	201	Water
ش ي ن	3	360	Fire
ت ا	2	401	Earth
ت ا	2	401	Earth
ث ا	2	501	Air
خ ا	2	601	Water
ذ ا ل	3	731	Fire
ض ا د	3	805	Earth
ظ ا	2	901	Air
غ ي ن	3	1060	Water

the script is here : <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Abjad Calculator</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        .container {
            max-width: 800px;
            margin: 0 auto;
        }
        .output, .breakdown {
            margin-top: 20px;
            padding: 10px;
            border: 1px solid #ccc;
            background-color: #f9f9f9;
        }
        textarea {
            width: 100%;
            height: 80px;
            margin-bottom: 10px;
        }
        button {
            padding: 10px;
            background-color: #007BFF;
            color: white;
            border: none;
            cursor: pointer;
        }
        button:hover {
            background-color: #0056b3;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Abjad Calculator</h1>
        <textarea id="arabicText" placeholder="Enter the Arabic phrase here..."></textarea>
        <button onclick="calculateAbjad()">Calculate</button>
        <div class="output" id="results"></div>
    </div>

    <script>
        const abjadDict = {
            'ا': [1, 'Fire'], 'أ': [1, 'Fire'], 'إ': [1, 'Fire'], 'آ': [1, 'Fire'],
            'ٱ': [1, 'Fire'], 'ء': [1, 'Fire'], 'ئ': [1, 'Fire'], 'ب': [2, 'Earth'],
            'پ': [2, 'Earth'], 'ج': [3, 'Air'], 'چ': [3, 'Air'], 'د': [4, 'Water'],
            'ڈ': [4, 'Water'], 'ه': [5, 'Fire'], 'ہ': [5, 'Fire'], 'ه‍': [5, 'Fire'],
            'ھ': [5, 'Fire'], 'ة': [5, 'Fire'], 'و': [6, 'Earth'], 'ؤ': [6, 'Earth'],
            'ز': [7, 'Air'], 'ژ': [7, 'Air'], 'ح': [8, 'Water'], 'ط': [9, 'Fire'],
            'ى': [10, 'Earth'], 'ي': [10, 'Earth'], 'ی': [10, 'Earth'], 'ے': [10, 'Earth'],
            'ک': [20, 'Air'], 'ك': [20, 'Air'], 'گ': [20, 'Air'], 'ل': [30, 'Water'],
            'م': [40, 'Fire'], 'ن': [50, 'Earth'], 'ں': [50, 'Earth'], 'س': [60, 'Air'],
            'ع': [70, 'Water'], 'ف': [80, 'Fire'], 'ص': [90, 'Earth'],
            'ق': [100, 'Air'], 'ر': [200, 'Water'], 'ڑ': [200, 'Water'],
            'ش': [300, 'Fire'], 'ت': [400, 'Earth'], 'ٹ': [400, 'Earth'],
            'ث': [500, 'Air'], 'خ': [600, 'Water'], 'ذ': [700, 'Fire'],
            'ض': [800, 'Earth'], 'ظ': [900, 'Air'], 'غ': [1000, 'Water']
        };

        function removeArabicSpaces(text) {
            return text.replace(/ /g, ''); // Handle any non-breaking spaces
        }

        function ignoreArabicGrammar(text) {
            // Extending regex to remove diacritics as grammar-related symbols.
            return text.replace(/[\u064B-\u0652]/g, '');
        }

        function calculateAbjad() {
            let text = document.getElementById('arabicText').value;
            text = removeArabicSpaces(text);
            text = ignoreArabicGrammar(text);

            let totalValue = 0;
            const categoryTotals = { 'Fire': 0, 'Earth': 0, 'Air': 0, 'Water': 0 };
            const categoryLetterCounts = { 'Fire': 0, 'Earth': 0, 'Air': 0, 'Water': 0 };
            const letterCount = {};

            [...text].forEach((char, index) => {
                if (char !== ' ' && abjadDict[char]) {
                    const [value, category] = abjadDict[char];
                    totalValue += value;
                    categoryTotals[category] += value;
                    categoryLetterCounts[category] += 1;
                    letterCount[char] = (letterCount[char] || 0) + 1;
                }
            });

            const totalLetters = Object.values(letterCount).reduce((a, b) => a + b, 0);

            // Letter contributions and their interaction
            let letterContributions = '';
            let contributionValue = 0;
            const letterContributionTotals = { 'Fire': 0, 'Earth': 0, 'Air': 0, 'Water': 0 };

            [...text].forEach((char, index) => {
                if (char !== ' ' && abjadDict[char]) {
                    const [value, category] = abjadDict[char];
                    const contribution = value * (index + 1);
                    contributionValue += contribution;
                    letterContributionTotals[category] += contribution;
                    letterContributions += `<p>${char} = ${value} x ${index + 1}</p>`;
                }
            });

            // Display results
            let resultHtml = `
                <h2>Detailed Breakdown</h2>
                ${Object.entries(letterCount).map(([letter, count]) => {
                    const [value, category] = abjadDict[letter];
                    return `<p>${letter}: Count = ${count}, Value = ${value}, Category = ${category}</p>`;
                }).join('')}
                <p><strong>Total Abjad Value:</strong> ${totalValue}</p>
                <p><strong>Total Letters:</strong> ${totalLetters}</p>
                <h3>Category Letter Counts</h3>
                ${Object.entries(categoryLetterCounts).map(([category, count]) => `<p>${category}: ${count} letters</p>`).join('')}
                <h3>Category Totals</h3>
                ${Object.entries(categoryTotals).map(([category, total]) => `<p>${category} Total: ${total}</p>`).join('')}
                <h2>Letter Contributions</h2>
                ${letterContributions}
                <p><strong>Total Contribution Value:</strong> ${contributionValue}</p>
                <h3>Elemental Contribution Totals</h3>
                ${Object.entries(letterContributionTotals).map(([category, total]) => `<p>${category}: ${total}</p>`).join('')}
            `;

            document.getElementById('results').innerHTML = resultHtml;
        }
    </script>
</body>
</html>