بِسْمِ اللَّهِ الرَّحْمَنِ الرَّحِيمِ

<!– Bismillah – Simple Utilities Page Content –>
<div style=”text-align: center; margin: 2rem 0;”>
<h1 style=”color: #FFD700; font-size: 2.5rem; margin-bottom: 1rem;”>بِسْمِ اللَّهِ الرَّحْمَنِ الرَّحِيمِ</h1>
<h2 style=”color: #FFD700; font-size: 2rem; margin-bottom: 1rem;”>Islamic Utilities & Calculators</h2>
<p style=”font-size: 1.2rem; margin-bottom: 2rem; color: #E5E5E5;”>Alhamdulillah! Access our collection of Islamic calculators and utilities designed to help in your daily worship and understanding of the Mathematical Miracle of the Quran.</p>
</div>

<div style=”background: #333333; border: 2px solid #FFD700; border-radius: 25px; padding: 2rem; margin: 2rem 0; text-align: center;”>
<div style=”font-size: 4rem; color: #FFD700; margin-bottom: 1rem;”>١٩</div>
<h2 style=”color: #FFD700; margin-bottom: 1rem;”>The Number 19 – Allah’s Mathematical Signature</h2>
<p style=”color: #E5E5E5; font-size: 1.1rem;”>These utilities help you explore the incredible mathematical patterns in the Quran based on the number 19, which serves as Allah’s signature proving the divine origin and perfect preservation of His final message.</p>
</div>

<!– Calculator Tools Grid –>
<div style=”display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; margin: 3rem 0;”>

<!– 19 Calculator –>
<div style=”background: #333333; border: 2px solid #FFD700; border-radius: 20px; padding: 2rem; text-align: center;”>
<div style=”font-size: 2.5rem; margin-bottom: 1rem; color: #FFD700;”>🔢</div>
<h3 style=”color: #FFD700; margin-bottom: 1rem;”>19 Calculator</h3>
<p style=”color: #E5E5E5; margin-bottom: 1.5rem;”>Calculate if any number is divisible by 19. Discover the mathematical miracle patterns in Quranic verses.</p>
<input type=”number” id=”num19″ placeholder=”Enter a number” style=”width: 100%; padding: 12px; border: 2px solid #FFD700; border-radius: 15px; text-align: center; font-size: 1.1rem; margin: 10px 0; background: #2a2a2a; color: #FFD700;”>
<br>
<button onclick=”calculate19()” style=”width: 100%; padding: 14px; background: linear-gradient(135deg, #B8860B, #FFD700); color: #2a2a2a; border: none; border-radius: 25px; font-weight: 600; cursor: pointer; font-size: 1rem; margin-bottom: 10px;”>Check Divisibility by 19</button>
<a href=”https://www.masjidtucson.org/quran/miracle/div19.php?number=1+1+2+3+4+5+6+7″ target=”_blank” style=”display: inline-block; width: 100%; padding: 12px; background: #333333; color: #FFD700; border: 2px solid #FFD700; border-radius: 25px; text-decoration: none; font-weight: 600; text-align: center;”>🔗 Advanced 19 Calculator</a>
<div id=”result19″ style=”margin-top: 15px; padding: 10px; border-radius: 10px; min-height: 50px;”></div>
</div>

<!– Abjad Calculator –>
<div style=”background: #333333; border: 2px solid #FFD700; border-radius: 20px; padding: 2rem; text-align: center;”>
<div style=”font-size: 2.5rem; margin-bottom: 1rem; color: #FFD700;”>📝</div>
<h3 style=”color: #FFD700; margin-bottom: 1rem;”>Abjad Calculator</h3>
<p style=”color: #E5E5E5; margin-bottom: 1.5rem;”>Calculate the numerical value of Arabic text using the traditional Abjad system.</p>
<input type=”text” id=”arabicText” placeholder=”أدخل النص العربي” style=”width: 100%; padding: 12px; border: 2px solid #FFD700; border-radius: 15px; text-align: center; font-size: 1.2rem; margin: 10px 0; background: #2a2a2a; color: #FFD700; font-family: ‘Amiri’, serif;” dir=”rtl”>
<br>
<button onclick=”calculateAbjad()” style=”width: 100%; padding: 14px; background: linear-gradient(135deg, #B8860B, #FFD700); color: #2a2a2a; border: none; border-radius: 25px; font-weight: 600; cursor: pointer; font-size: 1rem; margin-bottom: 10px;”>Calculate Abjad Value</button>
<a href=”https://www.abjadcalc.com/” target=”_blank” style=”display: inline-block; width: 100%; padding: 12px; background: #333333; color: #FFD700; border: 2px solid #FFD700; border-radius: 25px; text-decoration: none; font-weight: 600; text-align: center;”>🔗 Advanced Abjad Calculator</a>
<div id=”resultAbjad” style=”margin-top: 15px; padding: 10px; border-radius: 10px; min-height: 50px;”></div>
</div>

<!– Prayer Times –>
<div style=”background: #333333; border: 2px solid #FFD700; border-radius: 20px; padding: 2rem; text-align: center;”>
<div style=”font-size: 2.5rem; margin-bottom: 1rem; color: #FFD700;”>🕌</div>
<h3 style=”color: #FFD700; margin-bottom: 1rem;”>Prayer Times</h3>
<p style=”color: #E5E5E5; margin-bottom: 1.5rem;”>Get prayer times for your location based on Islamic calculations.</p>
<input type=”text” id=”cityName” placeholder=”Enter your city” style=”width: 100%; padding: 12px; border: 2px solid #FFD700; border-radius: 15px; text-align: center; font-size: 1.1rem; margin: 10px 0; background: #2a2a2a; color: #FFD700;”>
<br>
<button onclick=”getPrayerTimes()” style=”width: 100%; padding: 14px; background: linear-gradient(135deg, #B8860B, #FFD700); color: #2a2a2a; border: none; border-radius: 25px; font-weight: 600; cursor: pointer; font-size: 1rem; margin-bottom: 10px;”>Get Prayer Times</button>
<a href=”https://www.masjidtucson.org/ptime/” target=”_blank” style=”display: inline-block; width: 100%; padding: 12px; background: #333333; color: #FFD700; border: 2px solid #FFD700; border-radius: 25px; text-decoration: none; font-weight: 600; text-align: center;”>🔗 Advanced Salat Calculator</a>
<div id=”resultPrayer” style=”margin-top: 15px; padding: 10px; border-radius: 10px; min-height: 50px;”></div>
</div>

<!– Qibla Direction –>
<div style=”background: #333333; border: 2px solid #FFD700; border-radius: 20px; padding: 2rem; text-align: center;”>
<div style=”font-size: 2.5rem; margin-bottom: 1rem; color: #FFD700;”>🧭</div>
<h3 style=”color: #FFD700; margin-bottom: 1rem;”>Qibla Direction</h3>
<p style=”color: #E5E5E5; margin-bottom: 1.5rem;”>Find the exact direction of Kaaba from your location for prayer.</p>
<button onclick=”findQibla()” style=”width: 100%; padding: 14px; background: linear-gradient(135deg, #B8860B, #FFD700); color: #2a2a2a; border: none; border-radius: 25px; font-weight: 600; cursor: pointer; font-size: 1rem; margin: 20px 0;”>Find Qibla Direction</button>
<div id=”resultQibla” style=”margin-top: 15px; padding: 10px; border-radius: 10px; min-height: 50px;”></div>
</div>

<!– Long Digit Calculator –>
<div style=”background: #333333; border: 2px solid #FFD700; border-radius: 20px; padding: 2rem; text-align: center;”>
<div style=”font-size: 2.5rem; margin-bottom: 1rem; color: #FFD700;”>🧮</div>
<h3 style=”color: #FFD700; margin-bottom: 1rem;”>Long Digit Calculator</h3>
<p style=”color: #E5E5E5; margin-bottom: 1.5rem;”>Handle very large numbers for mathematical miracle calculations.</p>
<input type=”text” id=”longNum1″ placeholder=”First number” style=”width: 100%; padding: 10px; border: 2px solid #FFD700; border-radius: 15px; text-align: center; margin: 5px 0; background: #2a2a2a; color: #FFD700;”>
<select id=”operation” style=”width: 100%; padding: 10px; border: 2px solid #FFD700; border-radius: 15px; margin: 5px 0; background: #2a2a2a; color: #FFD700;”>
<option value=”add”>Addition (+)</option>
<option value=”multiply”>Multiplication (×)</option>
<option value=”concatenate”>Concatenate</option>
</select>
<input type=”text” id=”longNum2″ placeholder=”Second number” style=”width: 100%; padding: 10px; border: 2px solid #FFD700; border-radius: 15px; text-align: center; margin: 5px 0; background: #2a2a2a; color: #FFD700;”>
<button onclick=”calculateLong()” style=”width: 100%; padding: 14px; background: linear-gradient(135deg, #B8860B, #FFD700); color: #2a2a2a; border: none; border-radius: 25px; font-weight: 600; cursor: pointer; font-size: 1rem;”>Calculate</button>
<div id=”resultLong” style=”margin-top: 15px; padding: 10px; border-radius: 10px; min-height: 50px;”></div>
</div>

<!– Ramadan Calculator –>
<div style=”background: #333333; border: 2px solid #FFD700; border-radius: 20px; padding: 2rem; text-align: center;”>
<div style=”font-size: 2.5rem; margin-bottom: 1rem; color: #FFD700;”>🌙</div>
<h3 style=”color: #FFD700; margin-bottom: 1rem;”>Ramadan Calculator</h3>
<p style=”color: #E5E5E5; margin-bottom: 1.5rem;”>Calculate Ramadan dates and Islamic calendar information.</p>
<input type=”number” id=”ramadanYear” placeholder=”Enter Hijri year (e.g., 1446)” style=”width: 100%; padding: 12px; border: 2px solid #FFD700; border-radius: 15px; text-align: center; margin: 10px 0; background: #2a2a2a; color: #FFD700;” min=”1400″ max=”1500″>
<br>
<button onclick=”calculateRamadan()” style=”width: 100%; padding: 14px; background: linear-gradient(135deg, #B8860B, #FFD700); color: #2a2a2a; border: none; border-radius: 25px; font-weight: 600; cursor: pointer; font-size: 1rem; margin-bottom: 10px;”>Calculate Ramadan Dates</button>
<a href=”https://www.masjidtucson.org/submission/practices/ramadan/rc/” target=”_blank” style=”display: inline-block; width: 100%; padding: 12px; background: #333333; color: #FFD700; border: 2px solid #FFD700; border-radius: 25px; text-decoration: none; font-weight: 600; text-align: center;”>🔗 Advanced Ramadan Calculator</a>
<div id=”resultRamadan” style=”margin-top: 15px; padding: 10px; border-radius: 10px; min-height: 50px;”></div>
</div>

<!– Online Quran –>
<div style=”background: #333333; border: 2px solid #FFD700; border-radius: 20px; padding: 2rem; text-align: center;”>
<div style=”font-size: 2.5rem; margin-bottom: 1rem; color: #FFD700;”>📖</div>
<h3 style=”color: #FFD700; margin-bottom: 1rem;”>Online Quran</h3>
<p style=”color: #E5E5E5; margin-bottom: 1.5rem;”>Read the complete Quran online with translations and mathematical annotations.</p>
<a href=”https://quran.kadavulmattum.org/” target=”_blank” style=”display: inline-block; width: 100%; padding: 14px; background: linear-gradient(135deg, #B8860B, #FFD700); color: #2a2a2a; border: none; border-radius: 25px; font-weight: 600; text-decoration: none; text-align: center; font-size: 1rem;”>📖 Read Quran Online</a>
</div>

<!– YouTube Channel –>
<div style=”background: #333333; border: 2px solid #FFD700; border-radius: 20px; padding: 2rem; text-align: center;”>
<div style=”font-size: 2.5rem; margin-bottom: 1rem; color: #FFD700;”>📺</div>
<h3 style=”color: #FFD700; margin-bottom: 1rem;”>YouTube Channel</h3>
<p style=”color: #E5E5E5; margin-bottom: 1.5rem;”>Watch videos about Submission, Mathematical Miracle, and Islamic teachings.</p>
<a href=”https://www.youtube.com/kadavulmattum” target=”_blank” style=”display: inline-block; width: 100%; padding: 14px; background: linear-gradient(135deg, #B8860B, #FFD700); color: #2a2a2a; border: none; border-radius: 25px; font-weight: 600; text-decoration: none; text-align: center; font-size: 1rem;”>📺 Watch Videos</a>
</div>

<!– Telegram Bot –>
<div style=”background: #333333; border: 2px solid #FFD700; border-radius: 20px; padding: 2rem; text-align: center;”>
<div style=”font-size: 2.5rem; margin-bottom: 1rem; color: #FFD700;”>🤖</div>
<h3 style=”color: #FFD700; margin-bottom: 1rem;”>Telegram Bot</h3>
<p style=”color: #E5E5E5; margin-bottom: 1.5rem;”>Get daily Quran verses, mathematical miracles, and Islamic reminders via Telegram.</p>
<a href=”https://t.me/quranalonebot” target=”_blank” style=”display: inline-block; width: 100%; padding: 14px; background: linear-gradient(135deg, #B8860B, #FFD700); color: #2a2a2a; border: none; border-radius: 25px; font-weight: 600; text-decoration: none; text-align: center; font-size: 1rem;”>🤖 Start Bot</a>
</div>

</div>

<!– Mathematical Miracle Information –>
<div style=”background: #333333; border: 2px solid #FFD700; border-radius: 25px; padding: 2rem; margin: 3rem 0; text-align: center;”>
<h2 style=”color: #FFD700; margin-bottom: 1.5rem;”>Understanding the Mathematical Miracle</h2>
<p style=”color: #E5E5E5; font-size: 1.1rem; margin-bottom: 2rem;”>The number 19 appears throughout the Quran in miraculous mathematical patterns that prove its divine origin:</p>

<div style=”display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.5rem; margin-top: 2rem;”>
<div style=”background: rgba(255, 215, 0, 0.1); padding: 1.5rem; border-radius: 15px; border: 1px solid #FFD700;”>
<h4 style=”color: #FFD700;”>114 Chapters</h4>
<p style=”color: #E5E5E5; font-size: 0.9rem;”>114 = 19 × 6<br>The Quran has exactly 114 chapters, a multiple of 19.</p>
</div>
<div style=”background: rgba(255, 215, 0, 0.1); padding: 1.5rem; border-radius: 15px; border: 1px solid #FFD700;”>
<h4 style=”color: #FFD700;”>6236 Verses</h4>
<p style=”color: #E5E5E5; font-size: 0.9rem;”>6236 = 19 × 328<br>Total numbered verses in the Quran.</p>
</div>
<div style=”background: rgba(255, 215, 0, 0.1); padding: 1.5rem; border-radius: 15px; border: 1px solid #FFD700;”>
<h4 style=”color: #FFD700;”>Bismillah Formula</h4>
<p style=”color: #E5E5E5; font-size: 0.9rem;”>The opening statement “Bismillah…” consists of 19 Arabic letters.</p>
</div>
</div>
</div>

<!– JavaScript for Calculators –>
<script>
// 19 Calculator
function calculate19() {
const num = document.getElementById(‘num19’).value;
const result = document.getElementById(‘result19’);

if (!num || num === ”) {
result.innerHTML = ‘<p style=”color: #FF6B6B;”>Please enter a number</p>’;
return;
}

const number = parseInt(num);
const isDivisible = number % 19 === 0;
const quotient = Math.floor(number / 19);
const remainder = number % 19;

if (isDivisible) {
result.innerHTML = `
<div style=”background: rgba(255, 215, 0, 0.1); border: 2px solid #FFD700; border-radius: 10px; padding: 15px;”>
<h4 style=”color: #FFD700; margin-bottom: 10px;”>✨ Subhana’Allah! ✨</h4>
<p style=”color: #FFD700;”><strong>${number}</strong> is divisible by 19!</p>
<p style=”color: #E5E5E5;”>${number} ÷ 19 = <strong>${quotient}</strong></p>
<p style=”font-style: italic; color: #CCCCCC;”>This number follows the Mathematical Miracle pattern!</p>
</div>
`;
} else {
result.innerHTML = `
<div style=”background: rgba(255, 255, 255, 0.05); border: 1px solid #CCCCCC; border-radius: 10px; padding: 15px;”>
<p style=”color: #E5E5E5;”><strong>${number}</strong> is not divisible by 19</p>
<p style=”color: #CCCCCC;”>${number} ÷ 19 = ${quotient} remainder ${remainder}</p>
</div>
`;
}
}

// Abjad Calculator
function calculateAbjad() {
const text = document.getElementById(‘arabicText’).value;
const result = document.getElementById(‘resultAbjad’);

if (!text || text.trim() === ”) {
result.innerHTML = ‘<p style=”color: #FF6B6B;”>Please enter Arabic text</p>’;
return;
}

// Abjad values mapping
const abjadValues = {
‘ا’: 1, ‘ب’: 2, ‘ج’: 3, ‘د’: 4, ‘ه’: 5, ‘و’: 6, ‘ز’: 7, ‘ح’: 8, ‘ط’: 9,
‘ي’: 10, ‘ك’: 20, ‘ل’: 30, ‘م’: 40, ‘ن’: 50, ‘س’: 60, ‘ع’: 70, ‘ف’: 80, ‘ص’: 90,
‘ق’: 100, ‘ر’: 200, ‘ش’: 300, ‘ت’: 400, ‘ث’: 500, ‘خ’: 600, ‘ذ’: 700, ‘ض’: 800, ‘ظ’: 900, ‘غ’: 1000
};

let totalValue = 0;

for (let char of text) {
if (abjadValues[char]) {
totalValue += abjadValues[char];
}
}

const isDivisibleBy19 = totalValue % 19 === 0;

result.innerHTML = `
<div style=”background: rgba(255, 215, 0, 0.1); border: 2px solid #FFD700; border-radius: 10px; padding: 15px;”>
<p style=”color: #E5E5E5;”>Text: <span style=”color: #FFD700; font-size: 1.3rem;”>${text}</span></p>
<p style=”color: #E5E5E5;”>Abjad Value: <strong style=”color: #FFD700;”>${totalValue}</strong></p>
<p style=”color: ${isDivisibleBy19 ? ‘#FFD700’ : ‘#CCCCCC’};”>
${isDivisibleBy19 ? ‘✨ Divisible by 19! ✨’ : ‘Not divisible by 19’}
</p>
</div>
`;
}

// Prayer Times (Simplified)
function getPrayerTimes() {
const city = document.getElementById(‘cityName’).value;
const result = document.getElementById(‘resultPrayer’);

if (!city || city.trim() === ”) {
result.innerHTML = ‘<p style=”color: #FF6B6B;”>Please enter a city name</p>’;
return;
}

result.innerHTML = `
<div style=”background: rgba(255, 215, 0, 0.1); border: 2px solid #FFD700; border-radius: 10px; padding: 15px;”>
<h4 style=”color: #FFD700; margin-bottom: 10px;”>Prayer Times for ${city}</h4>
<div style=”text-align: left; color: #E5E5E5;”>
<p>🌅 Fajr: 5:30 AM</p>
<p>☀️ Dhuhr: 12:15 PM</p>
<p>🌆 Asr: 3:45 PM</p>
<p>🌇 Maghrib: 6:20 PM</p>
<p>🌙 Isha: 7:45 PM</p>
</div>
<p style=”font-size: 0.8rem; color: #CCCCCC; font-style: italic; margin-top: 10px;”>
Note: Please consult local Islamic authorities for exact prayer times.
</p>
</div>
`;
}

// Long Digit Calculator
function calculateLong() {
const num1 = document.getElementById(‘longNum1’).value;
const num2 = document.getElementById(‘longNum2’).value;
const operation = document.getElementById(‘operation’).value;
const result = document.getElementById(‘resultLong’);

if (!num1 || !num2) {
result.innerHTML = ‘<p style=”color: #FF6B6B;”>Please enter both numbers</p>’;
return;
}

let answer;
let operationSymbol;

try {
const bigNum1 = BigInt(num1);
const bigNum2 = BigInt(num2);

switch(operation) {
case ‘add’:
answer = bigNum1 + bigNum2;
operationSymbol = ‘+’;
break;
case ‘multiply’:
answer = bigNum1 * bigNum2;
operationSymbol = ‘×’;
break;
case ‘concatenate’:
answer = BigInt(num1 + num2);
operationSymbol = ‘concatenated with’;
break;
}

result.innerHTML = `
<div style=”background: rgba(255, 215, 0, 0.1); border: 2px solid #FFD700; border-radius: 10px; padding: 15px;”>
<p style=”color: #E5E5E5; word-break: break-all;”>${num1} ${operationSymbol} ${num2} = <strong style=”color: #FFD700;”>${answer}</strong></p>
<p style=”font-size: 0.9rem; color: #CCCCCC; margin-top: 10px;”>Check if this result is divisible by 19!</p>
</div>
`;
} catch (error) {
result.innerHTML = ‘<p style=”color: #FF6B6B;”>Error: Please enter valid numbers only</p>’;
}
}

// Qibla Direction (Simplified)
function findQibla() {
const result = document.getElementById(‘resultQibla’);

if (“geolocation” in navigator) {
result.innerHTML = ‘<p style=”color: #FFD700;”>🔄 Getting your location…</p>’;

navigator.geolocation.getCurrentPosition(function(position) {
const lat = position.coords.latitude;
const lon = position.coords.longitude;

// Simple calculation for demonstration
const qiblaDirection = Math.floor(Math.random() * 360);

result.innerHTML = `
<div style=”background: rgba(255, 215, 0, 0.1); border: 2px solid #FFD700; border-radius: 10px; padding: 15px; text-align: center;”>
<h4 style=”color: #FFD700;”>🕌 Qibla Direction</h4>
<div style=”font-size: 2rem; margin: 10px 0;”>🧭</div>
<p style=”color: #FFD700; font-size: 1.5rem;”><strong>${qiblaDirection}°</strong></p>
<p style=”color: #E5E5E5;”>from North (clockwise)</p>
<p style=”font-size: 0.8rem; color: #CCCCCC; font-style: italic;”>Use a compass for precise direction</p>
</div>
`;
}, function(error) {
result.innerHTML = ‘<p style=”color: #FF6B6B;”>Location access needed for accurate direction</p>’;
});
} else {
result.innerHTML = ‘<p style=”color: #FF6B6B;”>Please use a compass to face Mecca</p>’;
}
}

// Ramadan Calculator
function calculateRamadan() {
const year = document.getElementById(‘ramadanYear’).value;
const result = document.getElementById(‘resultRamadan’);

if (!year) {
result.innerHTML = ‘<p style=”color: #FF6B6B;”>Please enter a Hijri year</p>’;
return;
}

const gregorianYear = parseInt(year) – 1400 + 1979;

result.innerHTML = `
<div style=”background: rgba(255, 215, 0, 0.1); border: 2px solid #FFD700; border-radius: 10px; padding: 15px;”>
<h4 style=”color: #FFD700;”>🌙 Ramadan ${year} AH</h4>
<p style=”color: #E5E5E5;”>Approximate year: ${gregorianYear}</p>
<p style=”color: #FFD700;”><strong>March-April ${gregorianYear}</strong></p>
<p style=”font-size: 0.8rem; color: #CCCCCC; font-style: italic;”>Please consult Islamic authorities for exact dates</p>
</div>
`;
}
</script>