body { font-family: Arial, sans-serif; background-color: #f0f0f0; margin: 0; padding: 0; } .widget-container { position: relative; width: fit-content; max-width: 600px; /* Set a maximum width for the widget container */ margin: 40px auto; padding: 10px; border: 2px solid #000; border-radius: 8px; background-color: #f0f0f0; box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.2); } .widget-title { text-align: center; font-size: 40px; /* Double the size of the title */ font-weight: bold; margin-bottom: 20px; } textarea { width: calc(100% - 40px); /* Set initial width with a 40px margin on each side */ min-width: 300px; /* Set a minimum width to prevent it from becoming too narrow */ max-width: 600px; /* Set a maximum width to limit the expansion */ resize: vertical; /* Allow vertical resizing of the textarea */ } /* Adjust width to allow seven buttons in a row */ .button-container button { font-size: 19px; /* 16px (current size) + 3px */ width: calc(100% / 9); /* 1/7 of the current size with 10px margin on each side */ } .sum-container { text-align: center; margin-top: 20px; padding: 10px; border: 2px solid #000; border-radius: 8px; background-color: #f0f0f0; box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.2); } /* Increase font size for the sum display */ #sumDisplay { font-size: 24px; /* Increase the font size by 3 points */ font-weight: bold; } .widget-bevel { position: absolute; top: -8px; left: -8px; width: calc(100% + 16px); height: calc(100% + 16px); pointer-events: none; border: 2px solid #000; border-radius: 16px; box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.3), 2px 2px 5px rgba(0, 0, 0, 0.3); } const characterValues = { // ... (your characterValues here) // Latin alphabet (updated numerical values) a: 1, b: 2, c: 3, d: 4, e: 5, f: 6, g: 7, h: 8, i: 9, j: 9, k: 3, l: 10, m: 11, n: 12, o: 13, p: 14, q: 15, r: 16, s: 17, t: 18, u: 19, v: 19, w: 19, x: 20, y: 21, z: 22, // Hebrew alphabet (updated numerical values) א: 1, ב: 2, ג: 3, ד: 4, ה: 5, ו: 6, ז: 7, ח: 8, ט: 9, י: 10, כ: 20, ך: 20, ל: 30, מ: 40, ם: 40, נ: 50, ן: 50, ס: 60, ע: 70, פ: 80, ף: 80, צ: 90, ץ: 90, ק: 100, ר: 200, ש: 300, ת: 400, // Greek alphabet (updated numerical values) α: 1, β: 2, γ: 3, δ: 4, ε: 5, ζ: 7, η: 8, θ: 9, ι: 10, κ: 20, λ: 30, μ: 40, ν: 50, ξ: 60, ο: 70, π: 80, ρ: 100, σ: 200, τ: 300, υ: 400, φ: 500, χ: 600, ψ: 700, ω: 800, }; function calculateSum(inputString) { // ... (your calculateSum function here) let sum = 0; const normalizedInput = inputString.toLowerCase(); // Convert input to lowercase for case-insensitivity for (let i = 0; i < normalizedInput.length; i++) { const character = normalizedInput[i]; if (characterValues.hasOwnProperty(character)) { sum += characterValues[character]; } } return sum; } function calculateGematria() { const inputText = document.getElementById("textInput").value; const sum = calculateSum(inputText); const sumDisplay = document.getElementById("sumDisplay"); sumDisplay.textContent = "Sum: " + sum; } // Function to handle button clicks and add the corresponding character to the input field function addCharacter(character) { const inputField = document.getElementById('textInput'); inputField.value += character; updateSum(); } // Function to update the sum display based on the current input function updateSum() { const inputField = document.getElementById('textInput'); const inputValue = inputField.value; const sum = calculateSum(inputValue); const sumDisplay = document.getElementById('sumDisplay'); sumDisplay.textContent = sum; } // Event listener for input changes (typing) const inputField = document.getElementById('textInput'); inputField.addEventListener('input', updateSum);