Files
ralnaser/index.html
T
2026-10-28 13:55:29 +03:00

1625 lines
112 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>الشيخ الدكتور محمد ربيع الناصر - التطبيق الشامل</title>
<link rel="manifest" href="manifest.json">
<meta name="theme-color" content="#0f5132">
<link href="https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;900&family=Amiri:wght@400;700&family=Scheherazade+New:wght@400;700&display=swap" rel="stylesheet">
<style>
:root {
--primary: #0f5132;
--primary-light: #198754;
--gold: #d4af37;
--gold-light: #f3d56b;
--bg: #f8f9fa;
--text: #2c3e50;
--white: #ffffff;
}
* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Cairo', sans-serif; }
body { background-color: var(--bg); color: var(--text); line-height: 1.6; }
.quran-text {
font-family: 'Scheherazade New', 'Amiri', serif !important;
font-size: 2.1rem !important;
color: #000000 !important;
line-height: 2.8 !important;
text-align: justify;
direction: rtl;
word-spacing: 2px;
font-weight: 700 !important;
}
.quran-ayah-num {
color: var(--primary);
font-family: 'Cairo', sans-serif !important;
font-size: 1.3rem;
font-weight: bold;
margin: 0 4px;
display: inline-block;
}
.prayer-marquee-container {
background: var(--primary); color: var(--gold-light);
padding: 10px 0; overflow: hidden; white-space: nowrap;
font-weight: bold; font-size: 1rem; border-bottom: 2px solid var(--gold);
display: flex; align-items: center; direction: ltr;
}
.prayer-marquee-content {
display: inline-block; animation: marquee-rtl 40s linear infinite;
white-space: nowrap; padding-left: 100%;
}
.prayer-marquee-content span { margin: 0 20px; }
@keyframes marquee-rtl {
0% { transform: translateX(0); }
100% { transform: translateX(-100%); }
}
header {
background: linear-gradient(135deg, var(--primary-light), var(--primary));
color: var(--white); text-align: center; padding: 2rem 1rem;
border-bottom: 5px solid var(--gold); box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}
header h1 { font-size: 2.2rem; margin-bottom: 0.2rem; color: var(--gold-light); }
header p { font-size: 1rem; opacity: 0.9; }
.hijri-date {
background: rgba(0,0,0,0.2); display: inline-block;
padding: 4px 15px; border-radius: 20px; margin-top: 10px;
font-size: 0.9rem; color: var(--gold-light); border: 1px solid var(--gold);
}
.hero {
display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
gap: 3rem; padding: 2rem 1rem; background: var(--white); max-width: 1200px;
margin: 0 auto; border-radius: 0 0 20px 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}
.hero-img {
width: 220px; height: 220px; border-radius: 50%; object-fit: cover;
border: 5px solid var(--gold); box-shadow: 0 10px 20px rgba(0,0,0,0.15);
}
.hero-text { max-width: 600px; text-align: center; }
.hero-text h2 { color: var(--primary); font-size: 1.8rem; margin-bottom: 1rem; }
.btn-whatsapp {
background: #25D366; color: white; padding: 12px 25px; border-radius: 50px;
text-decoration: none; font-weight: bold; display: inline-flex;
align-items: center; gap: 10px; font-size: 1rem; transition: 0.3s; border: none; cursor: pointer;
}
.tabs-container {
background: var(--white); position: sticky; top: 0; z-index: 100;
box-shadow: 0 2px 10px rgba(0,0,0,0.1); margin-bottom: 2rem;
}
.tabs { display: flex; overflow-x: auto; max-width: 1200px; margin: 0 auto; padding: 0 1rem; }
.tab-btn {
padding: 1rem 1.2rem; border: none; background: none; font-size: 1rem;
font-weight: 600; color: var(--text); cursor: pointer; white-space: nowrap;
border-bottom: 3px solid transparent; transition: 0.3s;
}
.tab-btn.active { color: var(--primary); border-bottom-color: var(--gold); }
.content-section { display: none; max-width: 1200px; margin: 0 auto; padding: 1rem 1rem 4rem; animation: fadeIn 0.5s; }
.content-section.active { display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.section-title {
text-align: center; color: var(--primary); font-size: 1.8rem;
margin-bottom: 2rem; position: relative; padding-bottom: 10px;
}
.section-title::after {
content: ''; position: absolute; bottom: 0; left: 50%;
transform: translateX(-50%); width: 80px; height: 4px;
background: var(--gold); border-radius: 2px;
}
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; }
.card {
background: var(--white); border-radius: 15px; padding: 1.5rem;
box-shadow: 0 5px 15px rgba(0,0,0,0.05); border-top: 4px solid var(--gold);
}
.card h3 { color: var(--primary); margin-bottom: 1rem; font-size: 1.3rem; }
/* ============ تصميم دليل العبادات ============ */
.worship-guide-container {
background: linear-gradient(145deg, #fff8eb, #fdf1d6);
border-radius: 30px;
padding: 2rem 1.5rem;
box-shadow: 0 10px 30px rgba(212, 175, 55, 0.15);
border: 1px solid rgba(212, 175, 55, 0.3);
position: relative;
overflow: hidden;
}
.worship-guide-header {
text-align: center;
margin-bottom: 2rem;
position: relative;
z-index: 2;
}
.worship-guide-header h3 {
color: #5c4a1f;
font-size: 2rem;
font-weight: 900;
margin-bottom: 0.5rem;
letter-spacing: -0.5px;
}
.worship-guide-header p {
color: #8c7853;
font-size: 1.05rem;
}
.worship-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1.2rem;
position: relative;
z-index: 2;
}
@media (max-width: 768px) {
.worship-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
}
.worship-item {
background: #ffffff;
border-radius: 20px;
padding: 1.2rem 0.5rem;
text-align: center;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(0,0,0,0.04);
border: 1px solid #f0e6d2;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.worship-item:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(212, 175, 55, 0.2);
border-color: var(--gold);
}
.worship-icon {
font-size: 3.5rem;
margin-bottom: 0.8rem;
display: flex;
align-items: center;
justify-content: center;
height: 70px;
filter: drop-shadow(0 4px 6px rgba(0,0,0,0.1));
}
.worship-name {
font-weight: 700;
color: #4a3b1f;
font-size: 1rem;
}
/* نافذة التفاصيل (Modal) */
.worship-modal-overlay {
position: fixed; inset: 0; background: rgba(0,0,0,0.5);
backdrop-filter: blur(5px); z-index: 2000;
display: flex; align-items: center; justify-content: center;
opacity: 0; visibility: hidden; transition: 0.3s;
padding: 1rem;
}
.worship-modal-overlay.active { opacity: 1; visibility: visible; }
.worship-modal {
background: #fff; border-radius: 25px; width: 100%; max-width: 500px;
max-height: 85vh; overflow-y: auto; padding: 2rem;
box-shadow: 0 20px 50px rgba(0,0,0,0.2);
position: relative;
transform: scale(0.9); transition: 0.3s;
}
.worship-modal-overlay.active .worship-modal { transform: scale(1); }
.close-modal {
position: absolute; top: 15px; left: 15px;
background: #f1f5f9; border: none; width: 35px; height: 35px;
border-radius: 50%; cursor: pointer; font-size: 1.2rem;
color: #64748b; display: flex; align-items: center; justify-content: center;
transition: 0.2s;
}
.close-modal:hover { background: #e2e8f0; color: #0f172a; }
.modal-header {
display: flex; align-items: center; gap: 15px;
margin-bottom: 1.5rem; padding-bottom: 1rem;
border-bottom: 2px solid #f1f5f9;
}
.modal-header .modal-icon { font-size: 3rem; }
.modal-header h3 { color: var(--primary); font-size: 1.5rem; margin: 0; }
/* تصميم خطوات العبادات القابلة للضغط */
.modal-steps { list-style: none; padding: 0; }
.modal-steps li {
background: #f8fafc; padding: 12px 15px; border-radius: 10px;
margin-bottom: 10px; border-right: 4px solid var(--gold);
font-size: 1rem; color: #334155; line-height: 1.6;
display: flex; align-items: center; gap: 10px;
cursor: pointer; transition: 0.2s; position: relative;
}
.modal-steps li:hover {
background: #fffbeb; border-right-color: var(--primary);
transform: translateX(-5px);
}
.modal-steps li::after {
content: '👁️'; font-size: 1rem; margin-right: auto; opacity: 0.5;
}
.modal-steps li:hover::after { opacity: 1; }
.step-num {
background: var(--primary); color: white; width: 24px; height: 24px;
border-radius: 50%; display: flex; align-items: center; justify-content: center;
font-size: 0.8rem; font-weight: bold; flex-shrink: 0;
}
/* نافذة الشرح (Sub-Modal) */
.step-details-overlay {
position: fixed; inset: 0; background: rgba(0,0,0,0.6);
backdrop-filter: blur(4px); z-index: 3000;
display: flex; align-items: center; justify-content: center;
opacity: 0; visibility: hidden; transition: 0.3s; padding: 1rem;
}
.step-details-overlay.active { opacity: 1; visibility: visible; }
.step-details-card {
background: #fff; border-radius: 20px; width: 100%; max-width: 400px;
padding: 2rem; box-shadow: 0 15px 40px rgba(0,0,0,0.3);
position: relative; text-align: center;
transform: translateY(20px); transition: 0.3s;
}
.step-details-overlay.active .step-details-card { transform: translateY(0); }
.step-details-icon { font-size: 3rem; margin-bottom: 1rem; }
.step-details-title { color: var(--primary); font-size: 1.3rem; font-weight: bold; margin-bottom: 1rem; }
.step-details-text { color: #475569; font-size: 1.05rem; line-height: 1.8; text-align: justify; }
.step-details-btn {
margin-top: 1.5rem; padding: 10px 25px; background: var(--primary);
color: white; border: none; border-radius: 25px; font-weight: bold;
cursor: pointer; font-family: 'Cairo', sans-serif; width: 100%;
}
/* ============ تصميم الأدعية والأذكار ============ */
.dua-category-title {
color: var(--primary); font-size: 1.3rem; font-weight: bold;
margin: 1.5rem 0 1rem; padding-right: 10px;
border-right: 4px solid var(--gold);
}
.dua-card {
background: var(--white); border-radius: 15px; padding: 1.5rem;
margin-bottom: 1rem; box-shadow: 0 4px 12px rgba(0,0,0,0.04);
border: 1px solid #eee; position: relative; transition: 0.3s;
}
.dua-card:hover {
box-shadow: 0 8px 20px rgba(212, 175, 55, 0.15);
border-color: var(--gold-light);
}
.dua-text {
font-family: 'Amiri', serif; font-size: 1.35rem;
line-height: 2.2; color: #1a1a1a; margin-bottom: 0.8rem;
}
.dua-footer {
display: flex; justify-content: space-between; align-items: center;
border-top: 1px dashed #eee; padding-top: 0.8rem;
gap: 10px; flex-wrap: wrap;
}
.dua-source { font-size: 0.85rem; color: #777; font-style: italic; }
.dua-count-btn {
background: var(--bg); color: var(--primary);
padding: 6px 14px; border-radius: 20px; font-weight: bold;
border: 1px solid var(--gold); cursor: pointer;
font-family: 'Cairo', sans-serif; font-size: 0.9rem;
transition: 0.2s; display: flex; align-items: center; gap: 6px;
}
.dua-count-btn:hover { background: var(--gold-light); }
.dua-count-btn.active { background: var(--primary); color: white; border-color: var(--primary); }
/* ============ التقويم الإسلامي ============ */
.calendar-container {
background: var(--white); border-radius: 25px; padding: 2rem;
box-shadow: 0 10px 30px rgba(0,0,0,0.05); border: 1px solid #eee;
}
.hijri-header-card {
text-align: center; background: linear-gradient(135deg, var(--primary), var(--primary-light));
color: white; padding: 2rem 1rem; border-radius: 20px;
margin-bottom: 2rem; box-shadow: 0 8px 20px rgba(15, 81, 50, 0.2);
}
.hijri-header-card .hijri-day {
font-size: 3rem; font-weight: 900; color: var(--gold-light);
line-height: 1; margin-bottom: 0.5rem;
}
.hijri-header-card .hijri-month { font-size: 1.6rem; font-weight: 700; margin-bottom: 0.3rem; }
.hijri-header-card .hijri-year { font-size: 1.1rem; opacity: 0.9; }
.event-list { list-style: none; padding: 0; }
.event-item {
display: flex; align-items: center; gap: 15px;
padding: 1.2rem 1rem; border-bottom: 1px solid #f1f5f9; transition: 0.2s;
}
.event-item:hover { background: #f8fafc; border-radius: 10px; }
.event-icon {
font-size: 2rem; width: 50px; height: 50px;
display: flex; align-items: center; justify-content: center;
background: #fff8eb; border-radius: 50%; border: 1px solid var(--gold-light);
}
.event-info { flex: 1; }
.event-name { font-weight: 700; color: var(--primary); font-size: 1.1rem; margin-bottom: 0.2rem; }
.event-date { font-size: 0.9rem; color: #64748b; }
.event-hijri { font-size: 0.85rem; color: #94a3b8; }
.event-badge {
background: var(--gold-light); color: #5c4a1f;
padding: 4px 10px; border-radius: 12px;
font-size: 0.75rem; font-weight: bold;
}
/* ============ بقية التصميم ============ */
.qa-form, .tool-box { background: var(--white); padding: 1.5rem; border-radius: 15px; margin-bottom: 2rem; box-shadow: 0 5px 15px rgba(0,0,0,0.05); border: 1px solid #eee; }
.qa-form input, .qa-form textarea, .tool-box input, .tool-box select, select {
width: 100%; padding: 12px; margin-bottom: 1rem; border: 1px solid #ddd;
border-radius: 8px; font-family: 'Cairo', sans-serif; font-size: 1rem;
}
.qa-form textarea { height: 100px; resize: vertical; }
.prayer-search { display: flex; gap: 10px; margin-bottom: 2rem; justify-content: center; }
.prayer-search input { padding: 12px; border: 1px solid #ddd; border-radius: 8px; width: 250px; }
.prayer-search button { padding: 12px 25px; background: var(--primary); color: white; border: none; border-radius: 8px; cursor: pointer; }
.prayer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 1rem; }
.prayer-card { background: var(--white); text-align: center; padding: 1.2rem; border-radius: 15px; border-bottom: 4px solid var(--primary); }
.prayer-card h4 { color: var(--primary-light); font-size: 1.1rem; margin-bottom: 0.5rem; }
.prayer-card p { font-size: 1.3rem; font-weight: bold; }
/* ============ البوصلة ============ */
.qibla-app {
max-width: 480px; margin: 0 auto;
background: linear-gradient(145deg, #ffffff 0%, #f0f7f4 100%);
border-radius: 25px; box-shadow: 0 20px 60px rgba(15, 81, 50, 0.15), 0 0 0 1px rgba(212, 175, 55, 0.2);
padding: 2rem 1.5rem; position: relative; overflow: hidden;
}
.qibla-header { text-align: center; margin-bottom: 1.5rem; position: relative; z-index: 2; }
.qibla-header h3 { color: var(--primary); font-size: 1.5rem; margin-bottom: 0.3rem; font-weight: 900; }
.qibla-header p { color: #6b7280; font-size: 0.85rem; }
.qibla-compass-container { position: relative; width: 100%; max-width: 340px; margin: 0 auto 1.5rem; aspect-ratio: 1; }
.heading-marker {
position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
width: 0; height: 0; border-left: 14px solid transparent; border-right: 14px solid transparent;
border-top: 20px solid #dc2626; z-index: 40;
filter: drop-shadow(0 3px 5px rgba(220,38,38,0.5));
}
.qibla-needle {
position: absolute; top: 50%; left: 50%;
width: 6px; height: 45%;
transform-origin: 50% 100%;
transform: translate(-50%, -100%) rotate(0deg);
z-index: 15;
}
.qibla-needle::before {
content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
width: 0; height: 0; border-left: 12px solid transparent; border-right: 12px solid transparent;
border-bottom: 25px solid #16a34a;
filter: drop-shadow(0 3px 6px rgba(22,163,74,0.5));
}
.qibla-needle::after {
content: ''; position: absolute; top: 25px; left: 50%; transform: translateX(-50%);
width: 6px; height: calc(100% - 25px);
background: linear-gradient(to bottom, #16a34a, #15803d);
border-radius: 3px; box-shadow: 0 0 8px rgba(22,163,74,0.4);
}
.compass-dial {
position: absolute; inset: 0; border-radius: 50%;
background: radial-gradient(circle at 50% 50%, #ffffff 0%, #f8fafb 60%, #e8eef0 100%);
box-shadow: inset 0 0 40px rgba(15, 81, 50, 0.08), inset 0 0 0 3px rgba(212, 175, 55, 0.3), 0 15px 40px rgba(0,0,0,0.15);
will-change: transform; transition: transform 0.08s linear;
}
.compass-ring { position: absolute; inset: 8px; border-radius: 50%; border: 2px dashed rgba(15, 81, 50, 0.15); }
.tick-marks { position: absolute; inset: 0; }
.tick { position: absolute; top: 0; left: 50%; width: 2px; height: 10px; background: rgba(15, 81, 50, 0.4); transform-origin: 50% 170px; border-radius: 1px; }
.tick.major { width: 3px; height: 16px; background: var(--primary); }
.cardinal { position: absolute; font-weight: 900; font-family: 'Cairo', sans-serif; z-index: 5; text-shadow: 0 1px 2px rgba(255,255,255,0.8); }
.cardinal.n { top: 18px; left: 50%; transform: translateX(-50%); color: #dc2626; font-size: 1.3rem; }
.cardinal.s { bottom: 18px; left: 50%; transform: translateX(-50%); color: #1e40af; font-size: 1.2rem; }
.cardinal.e { right: 18px; top: 50%; transform: translateY(-50%); color: #059669; font-size: 1.2rem; }
.cardinal.w { left: 18px; top: 50%; transform: translateY(-50%); color: #7c3aed; font-size: 1.2rem; }
.intercardinal { position: absolute; font-size: 0.75rem; color: #94a3b8; font-weight: 700; }
.intercardinal.ne { top: 55px; right: 55px; }
.intercardinal.nw { top: 55px; left: 55px; }
.intercardinal.se { bottom: 55px; right: 55px; }
.intercardinal.sw { bottom: 55px; left: 55px; }
.kaaba-center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 70px; height: 70px; border-radius: 50%; background: linear-gradient(145deg, #ffffff, #f0f7f4); display: flex; align-items: center; justify-content: center; font-size: 2rem; box-shadow: 0 6px 20px rgba(0,0,0,0.15), inset 0 0 0 3px var(--gold), inset 0 0 0 6px #fff; z-index: 20; }
.qibla-degree-display { display: flex; justify-content: center; align-items: center; gap: 1rem; margin: 1.5rem 0 1rem; padding: 1rem; background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%); border-radius: 15px; box-shadow: 0 8px 20px rgba(15, 81, 50, 0.25); }
.degree-item { text-align: center; flex: 1; color: white; }
.degree-item .label { font-size: 0.75rem; opacity: 0.85; margin-bottom: 0.2rem; display: block; }
.degree-item .value { font-size: 1.3rem; font-weight: 900; color: var(--gold-light); font-family: 'Cairo', sans-serif; }
.degree-divider { width: 1px; height: 40px; background: rgba(212, 175, 55, 0.4); }
.qibla-status { text-align: center; font-size: 0.9rem; padding: 0.8rem; border-radius: 10px; margin-bottom: 1rem; font-weight: 600; background: #f0f9ff; color: #0369a1; border: 1px solid #bae6fd; transition: all 0.3s; }
.qibla-status.success { background: #f0fdf4; color: #15803d; border-color: #86efac; }
.qibla-status.aligned { background: linear-gradient(135deg, #dcfce7, #bbf7d0); color: #14532d; border-color: #16a34a; animation: pulse-aligned 1s ease-in-out infinite; }
@keyframes pulse-aligned { 0%, 100% { box-shadow: 0 0 0 0 rgba(22,163,74,0.4); } 50% { box-shadow: 0 0 0 10px rgba(22,163,74,0); } }
.qibla-status.error { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }
.btn-start-compass { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 14px; background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%); color: white; border: none; border-radius: 12px; font-size: 1.05rem; font-weight: 700; cursor: pointer; box-shadow: 0 6px 18px rgba(15, 81, 50, 0.3); transition: all 0.3s; font-family: 'Cairo', sans-serif; }
.btn-start-compass.active { background: linear-gradient(135deg, #dc2626, #b91c1c); }
.btn-start-compass svg { width: 20px; height: 20px; }
.calibration-tip { display: flex; align-items: center; gap: 8px; margin-top: 1rem; padding: 0.7rem 1rem; background: #fffbeb; border-radius: 10px; border: 1px dashed #fbbf24; font-size: 0.8rem; color: #92400e; }
.calibration-tip .icon { font-size: 1.2rem; animation: rotate-infinity 3s linear infinite; }
@keyframes rotate-infinity { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
.aligned-glow { position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 30px rgba(34, 197, 94, 0.5); opacity: 0; transition: opacity 0.3s; pointer-events: none; z-index: 8; }
.aligned-glow.show { opacity: 1; }
.moon-box { text-align: center; background: #fff; padding: 2.5rem 1.5rem; border-radius: 20px; box-shadow: 0 8px 25px rgba(0,0,0,0.08); max-width: 500px; margin: 0 auto; border: 2px solid var(--gold); }
.moon-icon-display { font-size: 5rem; margin-bottom: 1rem; filter: drop-shadow(0 0 15px rgba(212, 175, 55, 0.4)); }
/* ============ مشغل الصوت ============ */
.audio-player-box {
background: #f0fdf4;
border: 2px solid #86efac;
border-radius: 15px;
padding: 15px;
margin-bottom: 20px;
display: none;
box-shadow: 0 4px 15px rgba(22, 163, 74, 0.1);
animation: slideDown 0.3s ease-out;
}
@keyframes slideDown {
from { opacity: 0; transform: translateY(-10px); }
to { opacity: 1; transform: translateY(0); }
}
.audio-player-header {
display: flex; justify-content: space-between; align-items: center;
margin-bottom: 10px; color: var(--primary); font-weight: bold;
}
.audio-controls-wrap {
display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
}
.audio-controls-wrap audio {
flex: 1; min-width: 200px; height: 40px; outline: none;
}
.speed-control {
display: flex; gap: 5px; align-items: center;
background: white; padding: 4px 8px; border-radius: 8px;
border: 1px solid #ccc; font-size: 0.85rem;
}
.speed-control select {
padding: 4px; margin: 0; border: none; font-size: 0.85rem;
background: transparent; cursor: pointer; font-weight: bold; color: var(--primary);
}
.quran-controls { display: flex; gap: 10px; margin-bottom: 1.5rem; justify-content: center; flex-wrap: wrap; }
.quran-controls select, .quran-controls input { max-width: 320px; margin-bottom: 0; font-weight: bold; font-size: 1.1rem; flex: 1; min-width: 200px; }
.quran-text-area { background: #fff; padding: 2.5rem 1.5rem; border-radius: 15px; border: 2px solid var(--gold); min-height: 350px; box-shadow: 0 4px 15px rgba(0,0,0,0.03); }
.quran-nav { display: flex; justify-content: space-between; margin-top: 1rem; }
.quran-nav button { padding: 10px 20px; background: var(--primary); color: white; border: none; border-radius: 8px; font-weight: bold; cursor: pointer; }
.quran-nav button:disabled { background: #ccc; cursor: not-allowed; }
.tasbih-container { text-align: center; background: var(--white); padding: 2rem 1rem; border-radius: 20px; margin-bottom: 2rem; box-shadow: 0 5px 15px rgba(0,0,0,0.05); }
.tasbih-display { font-size: 4rem; font-weight: 900; color: var(--primary); }
.tasbih-btn { width: 130px; height: 130px; border-radius: 50%; background: var(--primary); color: white; font-size: 1.2rem; font-weight: bold; border: 6px solid var(--gold); margin: 1rem auto; display: block; cursor: pointer; box-shadow: 0 5px 15px rgba(0,0,0,0.2); }
/* ============ الرقية الشرعية ============ */
.ruqyah-container { display: grid; gap: 1.5rem; }
.ruqyah-section {
background: var(--white); border-radius: 15px; padding: 2rem;
box-shadow: 0 5px 15px rgba(0,0,0,0.05); border-right: 5px solid var(--gold);
}
.ruqyah-section h3 { color: var(--primary); margin-bottom: 1rem; font-size: 1.4rem; border-bottom: 2px solid #eee; padding-bottom: 0.5rem; }
.ruqyah-text {
font-family: 'Scheherazade New', 'Amiri', serif !important;
font-size: 1.9rem !important; color: #000000 !important;
line-height: 2.8 !important; text-align: justify;
direction: rtl; word-spacing: 2px; font-weight: 700 !important;
}
footer { background: var(--primary); color: white; text-align: center; padding: 2rem; border-top: 5px solid var(--gold); margin-top: 2rem; }
.floating-wa { position: fixed; bottom: 20px; left: 20px; background: #25D366; color: white; width: 60px; height: 60px; border-radius: 50%; display: flex; justify-content: center; align-items: center; font-size: 30px; box-shadow: 0 4px 15px rgba(0,0,0,0.3); z-index: 1000; text-decoration: none; }
@media (max-width: 768px) {
header h1 { font-size: 1.7rem; }
.tab-btn { padding: 0.8rem; font-size: 0.9rem; }
.quran-text { font-size: 1.7rem !important; line-height: 2.5 !important; }
.ruqyah-text { font-size: 1.5rem !important; line-height: 2.5 !important; }
.qibla-app { padding: 1.5rem 1rem; border-radius: 20px; }
.qibla-compass-container { max-width: 280px; }
.kaaba-center { width: 60px; height: 60px; font-size: 1.7rem; }
.degree-item .value { font-size: 1.1rem; }
.dua-text { font-size: 1.2rem; line-height: 2; }
.calendar-container { padding: 1rem; }
.hijri-header-card .hijri-day { font-size: 2.5rem; }
.hijri-header-card .hijri-month { font-size: 1.3rem; }
.event-item { padding: 1rem 0.5rem; }
.ruqyah-section { padding: 1.5rem 1rem; }
}
</style>
</head>
<body>
<div class="prayer-marquee-container">
<div class="prayer-marquee-content" id="marqueeContent">
<span>جاري جلب أوقات صلاة حلب...</span>
</div>
</div>
<header>
<h1>الشيخ الدكتور محمد ربيع الناصر</h1>
<p>الفتوى | الرقية الشرعية | أمور الدين الإسلامي</p>
<div class="hijri-date" id="hijriDate">جاري جلب التاريخ الهجري...</div>
</header>
<div class="tabs-container">
<div class="tabs">
<button class="tab-btn active" onclick="openTab(event, 'home')">الرئيسية</button>
<button class="tab-btn" onclick="openTab(event, 'worship')">🕌 دليل العبادات</button>
<button class="tab-btn" onclick="openTab(event, 'calendar')">📅 التقويم الإسلامي</button>
<button class="tab-btn" onclick="openTab(event, 'qa')">سؤال وجواب</button>
<button class="tab-btn" onclick="openTab(event, 'prayer')">أوقات الصلاة</button>
<button class="tab-btn" onclick="openTab(event, 'qibla')">القبلة</button>
<button class="tab-btn" onclick="openTab(event, 'moon')">🌙 أطوار القمر</button>
<button class="tab-btn" onclick="openTab(event, 'zakat')">💰 حساب الزكاة</button>
<button class="tab-btn" onclick="openTab(event, 'inheritance')">⚖️ حساب الميراث</button>
<button class="tab-btn" onclick="openTab(event, 'mosque')">📍 أقرب مسجد</button>
<button class="tab-btn" onclick="openTab(event, 'quran')">القرآن الكريم</button>
<button class="tab-btn" onclick="openTab(event, 'dua')">الأدعية والتسابيح</button>
<button class="tab-btn" onclick="openTab(event, 'hadith')">الأحاديث</button>
<button class="tab-btn" onclick="openTab(event, 'ruqyah')">الرقية</button>
</div>
</div>
<section id="home" class="content-section active">
<div class="hero">
<img src="https://raw.githubusercontent.com/housamo-prog/ralnaser/refs/heads/main/IMG-20260329-WA0079.jpg" alt="الشيخ الدكتور محمد ربيع الناصر" class="hero-img">
<div class="hero-text">
<h2>أهلاً بكم في التطبيق الرسمي</h2>
<p>نسعى لتقديم الفتاوى الشرعية، والرقية الشرعية، والإجابة على استفساراتكم، مع مجموعة من الخدمات الإسلامية المتكاملة.</p>
<a href="https://wa.me/963944856486" target="_blank" class="btn-whatsapp">💬 تواصل مع الشيخ</a>
</div>
</div>
</section>
<section id="calendar" class="content-section">
<h2 class="section-title">التقويم الإسلامي والمناسبات</h2>
<div class="calendar-container">
<div class="hijri-header-card">
<div class="hijri-day" id="hijriBigDay">--</div>
<div class="hijri-month" id="hijriBigMonth">جاري التحميل...</div>
<div class="hijri-year" id="hijriBigYear">-- هـ</div>
</div>
<h3 style="color: var(--primary); margin-bottom: 1rem; border-right: 4px solid var(--gold); padding-right: 10px;">📌 المناسبات والأعياد الإسلامية</h3>
<ul class="event-list" id="islamicEventsList"></ul>
</div>
</section>
<section id="worship" class="content-section">
<div class="worship-guide-container">
<div class="worship-guide-header">
<h3>دليل العبادات</h3>
<p>عبادات أوضح، خطوة بخطوة</p>
</div>
<div class="worship-grid">
<div class="worship-item" onclick="openWorshipModal('wudu')"><div class="worship-icon">🚰</div><div class="worship-name">الوضوء</div></div>
<div class="worship-item" onclick="openWorshipModal('salah')"><div class="worship-icon">🕌</div><div class="worship-name">الصلاة</div></div>
<div class="worship-item" onclick="openWorshipModal('quranW')"><div class="worship-icon">📖</div><div class="worship-name">القرآن الكريم</div></div>
<div class="worship-item" onclick="openWorshipModal('fasting')"><div class="worship-icon">🌴</div><div class="worship-name">الصيام</div></div>
<div class="worship-item" onclick="openWorshipModal('zakatW')"><div class="worship-icon">💰</div><div class="worship-name">الزكاة</div></div>
<div class="worship-item" onclick="openWorshipModal('hajj')"><div class="worship-icon">🕋</div><div class="worship-name">الحج</div></div>
<div class="worship-item" onclick="openWorshipModal('umrah')"><div class="worship-icon">🕋</div><div class="worship-name">العمرة</div></div>
<div class="worship-item" onclick="openWorshipModal('adhkarW')"><div class="worship-icon">📿</div><div class="worship-name">الأذكار</div></div>
</div>
</div>
</section>
<div class="worship-modal-overlay" id="worshipModalOverlay" onclick="closeWorshipModal(event)">
<div class="worship-modal" onclick="event.stopPropagation()">
<button class="close-modal" onclick="closeWorshipModal()">✖</button>
<div class="modal-header">
<span class="modal-icon" id="modalIcon">🕌</span>
<h3 id="modalTitle">عنوان العبادة</h3>
</div>
<ul class="modal-steps" id="modalStepsList"></ul>
</div>
</div>
<div class="step-details-overlay" id="stepDetailsOverlay" onclick="closeStepDetails(event)">
<div class="step-details-card" onclick="event.stopPropagation()">
<div class="step-details-icon" id="stepDetailIcon">🕌</div>
<div class="step-details-title" id="stepDetailTitle">عنوان الخطوة</div>
<div class="step-details-text" id="stepDetailText">الشرح هنا...</div>
<button class="step-details-btn" onclick="closeStepDetails()">فهمت، شكراً</button>
</div>
</div>
<section id="qa" class="content-section">
<h2 class="section-title">سؤال وجواب</h2>
<div class="qa-form">
<h3>أرسل سؤالك للشيخ</h3>
<input type="text" id="qaName" placeholder="اسمك (اختياري)">
<textarea id="qaQuestion" placeholder="اكتب سؤالك هنا..."></textarea>
<button onclick="sendQuestion()" class="btn-whatsapp" style="width:100%; justify-content:center;">إرسال السؤال عبر واتساب</button>
</div>
</section>
<section id="prayer" class="content-section">
<h2 class="section-title">أوقات الصلاة</h2>
<div class="prayer-search">
<input type="text" id="cityInput" placeholder="المدينة" value="حلب" readonly style="background:#f0f0f0; cursor:not-allowed;" title="تم تثبيت المدينة على حلب">
<button onclick="getPrayerTimes()">تحديث</button>
</div>
<p style="text-align:center; color:#666; margin-bottom:1rem; font-size:0.9rem;" id="methodNote">طريقة الحساب: رابطة العالم الإسلامي (سوريا)</p>
<div id="prayerResult" class="prayer-grid"></div>
</section>
<section id="qibla" class="content-section">
<h2 class="section-title">اتجاه القبلة</h2>
<div class="qibla-app">
<div class="qibla-header">
<h3>🧭 بوصلة القبلة الذكية</h3>
<p>بوصلة دقيقة تعتمد على GPS ومستشعرات جهازك</p>
</div>
<div id="qiblaStatus" class="qibla-status">
اضغط زر التشغيل لتفعيل البوصلة وتحديد اتجاه القبلة
</div>
<div class="qibla-compass-container">
<div class="heading-marker"></div>
<div id="compassDial" class="compass-dial">
<div class="compass-ring"></div>
<div class="tick-marks" id="tickMarks"></div>
<span class="cardinal n">N</span>
<span class="cardinal s">S</span>
<span class="cardinal e">E</span>
<span class="cardinal w">W</span>
<span class="intercardinal ne">NE</span>
<span class="intercardinal nw">NW</span>
<span class="intercardinal se">SE</span>
<span class="intercardinal sw">SW</span>
<div id="alignedGlow" class="aligned-glow"></div>
</div>
<div id="qiblaNeedle" class="qibla-needle"></div>
<div class="kaaba-center">🕋</div>
</div>
<div class="qibla-degree-display">
<div class="degree-item">
<span class="label">اتجاه القبلة</span>
<span class="value" id="qiblaDegreeValue">--°</span>
</div>
<div class="degree-divider"></div>
<div class="degree-item">
<span class="label">اتجاهك الآن</span>
<span class="value" id="headingValue">--°</span>
</div>
<div class="degree-divider"></div>
<div class="degree-item">
<span class="label">الفرق</span>
<span class="value" id="diffValue">--°</span>
</div>
</div>
<button id="startCompassBtn" class="btn-start-compass" onclick="toggleCompass()">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<circle cx="12" cy="12" r="10"/>
<polygon points="16.24 7.76 14.12 14.12 7.76 16.24 9.88 9.88 16.24 7.76" fill="currentColor"/>
</svg>
<span>تشغيل البوصلة</span>
</button>
<div class="calibration-tip">
<span class="icon">🔄</span>
<span>لمعايرة البوصلة، حرّك هاتفك على شكل رقم 8 عدة مرات</span>
</div>
</div>
</section>
<section id="moon" class="content-section">
<h2 class="section-title">أطوار القمر الهجرية</h2>
<div class="moon-box">
<div id="moonIcon" class="moon-icon-display">🌕</div>
<h3 id="moonPhaseName" style="color: var(--primary); font-size: 1.5rem; margin-bottom: 0.5rem;">جاري حساب طور القمر...</h3>
<p id="moonDesc" style="color: #555; font-size: 1.05rem; margin-bottom: 1.5rem;">يرجى الانتظار قليلاً لمعرفة تفاصيل الطور الحالي ومنازل القمر الشرعية.</p>
<div id="moonDetails" style="background: var(--bg); padding: 15px; border-radius: 12px; font-weight: bold; color: var(--text); border: 1px solid var(--gold);">
التاريخ الهجري: جاري الجلب...
</div>
</div>
</section>
<section id="zakat" class="content-section">
<h2 class="section-title">حساب زكاة المال</h2>
<div class="tool-box">
<h3>حاسبة زكاة النقود والعروض التجارية</h3>
<p style="font-size: 0.9rem; color: #666; margin-bottom: 1rem;">تُخرج الزكاة بنسبة 2.5% إذا بلغ المال النصاب وحال عليه الحول.</p>
<label>إجمالي الأموال النقدية والمدخرات:</label>
<input type="number" id="zakatMoney" placeholder="أدخل المبلغ (مثال: 5000)">
<label>قيمة عروض التجارة والديون المرجوة:</label>
<input type="number" id="zakatGoods" placeholder="أدخل القيمة">
<button onclick="calculateZakat()" style="width:100%; padding:12px; background:var(--primary); color:white; border:none; border-radius:8px; font-weight:bold; cursor:pointer; margin-top:10px;">احسب قيمة الزكاة الواجبة</button>
<div id="zakatResult" style="margin-top: 1.5rem; padding: 15px; background: var(--bg); border-radius: 8px; font-weight: bold; text-align: center; color: var(--primary); display: none;"></div>
</div>
</section>
<section id="inheritance" class="content-section">
<h2 class="section-title">حساب التركات والمواريث (تقديري)</h2>
<div class="tool-box">
<h3>حاسبة حصص الورثة الشرعية</h3>
<label>إجمالي مبلغ التركة:</label>
<input type="number" id="estateAmount" placeholder="أدخل إجمالي التركة">
<label>هل الزوجة موجودة؟</label>
<select id="hasWife">
<option value="no">لا</option>
<option value="yes">نعم (تأخذ الثمن بوجود فرع وارث أو الربع بدونه)</option>
</select>
<label>عدد الأبناء الذكور:</label>
<input type="number" id="sonsCount" value="0" min="0">
<label>عدد البنات الإناث:</label>
<input type="number" id="daughtCount" value="0" min="0">
<button onclick="calculateInheritance()" style="width:100%; padding:12px; background:var(--primary); color:white; border:none; border-radius:8px; font-weight:bold; cursor:pointer; margin-top:10px;">احسب التوزيع الشرعي</button>
<div id="inheritanceResult" style="margin-top: 1.5rem; padding: 15px; background: var(--bg); border-radius: 8px; font-weight: bold; line-height: 1.8; color: var(--text); display: none;"></div>
</div>
</section>
<section id="mosque" class="content-section">
<h2 class="section-title">البحث عن أقرب مسجد</h2>
<div class="tool-box" style="text-align: center; padding: 2.5rem 1rem;">
<div style="font-size: 4rem; margin-bottom: 1rem;">🕌</div>
<h3 style="color: var(--primary); margin-bottom: 1rem;">تحديد دور العبادة والمساجد القريبة منك</h3>
<p style="color: #666; margin-bottom: 2rem;">اضغط على الزر أدناه لفتح الخرائط والبحث المباشر عن المساجد المحيطة بموقعك.</p>
<button onclick="findNearestMosques()" style="padding: 14px 30px; background: var(--primary); color: white; border: none; border-radius: 30px; font-weight: bold; font-size: 1.1rem; cursor: pointer; box-shadow: 0 4px 12px rgba(0,0,0,0.15);">📍 فتح خريطة أقرب مسجد</button>
</div>
</section>
<!-- ============ قسم القرآن الكريم ============ -->
<section id="quran" class="content-section">
<h2 class="section-title">القرآن الكريم</h2>
<div class="quran-controls">
<select id="reciterSelect">
<option value="maher">الشيخ ماهر المعيقلي</option>
<option value="afs">الشيخ مشاري العفاسي</option>
<option value="basit">الشيخ عبد الباسط عبد الصمد</option>
<option value="husary">الشيخ محمود خليل الحصري</option>
</select>
<select id="surahSelect" onchange="loadSurah()">
<option value="">اختر السورة...</option>
</select>
<button onclick="toggleAudioPlayer()" id="audioToggleBtn" style="padding: 10px 18px; background: #198754; color: white; border: none; border-radius: 8px; font-weight: bold; cursor: pointer; display: flex; align-items: center; gap: 5px; white-space: nowrap;">
🎧 تشغيل التلاوة
</button>
<button onclick="openShaarawyTafsir()" style="padding: 10px 18px; background: var(--primary); color: white; border: none; border-radius: 8px; font-weight: bold; cursor: pointer; white-space: nowrap;">
🎙️ خواطر الشعراوي
</button>
</div>
<div id="audioPlayerBox" class="audio-player-box">
<div class="audio-player-header">
<span>🎧 استماع: <span id="nowPlayingTitle">سورة...</span></span>
<button onclick="stopAudio()" style="background: #ef4444; color: white; border: none; padding: 5px 12px; border-radius: 6px; cursor: pointer; font-size: 0.8rem;">إيقاف ✖</button>
</div>
<div class="audio-controls-wrap">
<audio id="quranAudio" controls></audio>
<div class="speed-control">
<label for="speedSelect">السرعة:</label>
<select id="speedSelect" onchange="changeSpeed()">
<option value="0.75">0.75x</option>
<option value="1" selected>عادي</option>
<option value="1.25">1.25x</option>
<option value="1.5">1.5x</option>
</select>
</div>
</div>
</div>
<div class="quran-text-area">
<div id="quranText" class="quran-text" style="text-align:center; color:#555;">الرجاء اختيار السورة من القائمة أعلاه.</div>
</div>
<div class="quran-nav">
<button id="prevBtn" onclick="changeSurah(-1)" disabled>السورة السابقة</button>
<button id="nextBtn" onclick="changeSurah(1)" disabled>السورة التالية</button>
</div>
</section>
<section id="dua" class="content-section">
<h2 class="section-title">الأدعية والأذكار</h2>
<div class="tasbih-container">
<h3 style="color: var(--primary); margin-bottom: 1rem;">المسبحة الإلكترونية</h3>
<div class="tasbih-display" id="tasbihCount">0</div>
<button class="tasbih-btn" onclick="incrementTasbih()">سبحان الله</button>
<button onclick="resetTasbih()" style="margin-top: 1rem; background: transparent; border: 1px solid #ccc; padding: 6px 15px; border-radius: 20px; cursor: pointer; color: #666;">تصفير العداد</button>
</div>
<div id="duaContainer"></div>
</section>
<section id="hadith" class="content-section">
<h2 class="section-title">أحاديث نبوية</h2>
<div class="card"><p class="quran-text" style="font-size: 1.4rem !important; text-align: center;">«إِنَّمَا الأَعْمَالُ بِالنِّيَّاتِ، وَإِنَّمَا لِكُلِّ امْرِئٍ مَا نَوَى»</p></div>
</section>
<!-- ============ قسم الرقية الشرعية ============ -->
<section id="ruqyah" class="content-section">
<h2 class="section-title">الرقية الشرعية</h2>
<div class="quran-controls">
<select id="ruqyahReciter">
<option value="maher">الشيخ ماهر المعيقلي</option>
<option value="afs">الشيخ مشاري العفاسي</option>
<option value="basit">الشيخ عبد الباسط عبد الصمد</option>
</select>
<button onclick="toggleRuqyahAudio()" id="ruqyahAudioBtn" style="padding: 10px 18px; background: #198754; color: white; border: none; border-radius: 8px; font-weight: bold; cursor: pointer; display: flex; align-items: center; gap: 5px; white-space: nowrap;">
🎧 تشغيل الرقية صوتياً
</button>
</div>
<div id="ruqyahPlayerBox" class="audio-player-box">
<div class="audio-player-header">
<span>🎧 استماع: <span id="ruqyahPlayingTitle">الرقية الشرعية</span></span>
<button onclick="stopRuqyahAudio()" style="background: #ef4444; color: white; border: none; padding: 5px 12px; border-radius: 6px; cursor: pointer; font-size: 0.8rem;">إيقاف ✖</button>
</div>
<div class="audio-controls-wrap">
<audio id="ruqyahAudio" controls></audio>
<div class="speed-control">
<label for="ruqyahSpeed">السرعة:</label>
<select id="ruqyahSpeed" onchange="changeRuqyahSpeed()">
<option value="0.75">0.75x</option>
<option value="1" selected>عادي</option>
<option value="1.25">1.25x</option>
<option value="1.5">1.5x</option>
</select>
</div>
</div>
</div>
<div class="ruqyah-container">
<div class="ruqyah-section">
<h3>1. سورة الفاتحة</h3>
<p class="ruqyah-text">بِسْمِ اللَّهِ الرَّحْمَنِ الرَّحِيمِ <span class="quran-ayah-num">﴿١﴾</span> الْحَمْدُ لِلَّهِ رَبِّ الْعَالَمِينَ <span class="quran-ayah-num">﴿٢﴾</span> الرَّحْمَنِ الرَّحِيمِ <span class="quran-ayah-num">﴿٣﴾</span> مَالِكِ يَوْمِ الدِّينِ <span class="quran-ayah-num">﴿٤﴾</span> إِيَّاكَ نَعْبُدُ وَإِيَّاكَ نَسْتَعِينُ <span class="quran-ayah-num">﴿٥﴾</span> اهْدِنَا الصِّرَاطَ الْمُسْتَقِيمَ <span class="quran-ayah-num">﴿٦﴾</span> صِرَاطَ الَّذِينَ أَنْعَمْتَ عَلَيْهِمْ غَيْرِ الْمَغْضُوبِ عَلَيْهِمْ وَلَا الضَّالِّينَ <span class="quran-ayah-num">﴿٧﴾</span></p>
</div>
<div class="ruqyah-section">
<h3>2. آية الكرسي (البقرة: 255)</h3>
<p class="ruqyah-text">اللَّهُ لَا إِلَهَ إِلَّا هُوَ الْحَيُّ الْقَيُّومُ ۚ لَا تَأْخُذُهُ سِنَةٌ وَلَا نَوْمٌ ۚ لَهُ مَا فِي السَّمَاوَاتِ وَمَا فِي الْأَرْضِ ۗ مَنْ ذَا الَّذِي يَشْفَعُ عِنْدَهُ إِلَّا بِإِذْنِهِ ۚ يَعْلَمُ مَا بَيْنَ أَيْدِيهِمْ وَمَا خَلْفَهُمْ ۖ وَلَا يُحِيطُونَ بِشَيْءٍ مِنْ عِلْمِهِ إِلَّا بِمَا شَاءَ ۚ وَسِعَ كُرْسِيُّهُ السَّمَاوَاتِ وَالْأَرْضَ ۖ وَلَا يَئُودُهُ حِفْظُهُمَا ۚ وَهُوَ الْعَلِيُّ الْعَظِيمُ <span class="quran-ayah-num">﴿٢٥٥﴾</span></p>
</div>
<div class="ruqyah-section">
<h3>3. سور المعوذات</h3>
<h4 style="color:var(--primary-light); margin:1rem 0 0.5rem;">سورة الإخلاص:</h4>
<p class="ruqyah-text">قُلْ هُوَ اللَّهُ أَحَدٌ <span class="quran-ayah-num">﴿١﴾</span> اللَّهُ الصَّمَدُ <span class="quran-ayah-num">﴿٢﴾</span> لَمْ يَلِدْ وَلَمْ يُولَدْ <span class="quran-ayah-num">﴿٣﴾</span> وَلَمْ يَكُنْ لَهُ كُفُوًا أَحَدٌ <span class="quran-ayah-num">﴿٤﴾</span></p>
<h4 style="color:var(--primary-light); margin:1rem 0 0.5rem;">سورة الفلق:</h4>
<p class="ruqyah-text">قُلْ أَعُوذُ بِرَبِّ الْفَلَقِ <span class="quran-ayah-num">﴿١﴾</span> مِنْ شَرِّ مَا خَلَقَ <span class="quran-ayah-num">﴿٢﴾</span> وَمِنْ شَرِّ غَاسِقٍ إِذَا وَقَبَ <span class="quran-ayah-num">﴿٣﴾</span> وَمِنْ شَرِّ النَّفَّاثَاتِ فِي الْعُقَدِ <span class="quran-ayah-num">﴿٤﴾</span> وَمِنْ شَرِّ حَاسِدٍ إِذَا حَسَدَ <span class="quran-ayah-num">﴿٥﴾</span></p>
<h4 style="color:var(--primary-light); margin:1rem 0 0.5rem;">سورة الناس:</h4>
<p class="ruqyah-text">قُلْ أَعُوذُ بِرَبِّ النَّاسِ <span class="quran-ayah-num">﴿١﴾</span> مَلِكِ النَّاسِ <span class="quran-ayah-num">﴿٢﴾</span> إِلَهِ النَّاسِ <span class="quran-ayah-num">﴿٣﴾</span> مِنْ شَرِّ الْوَسْوَاسِ الْخَنَّاسِ <span class="quran-ayah-num">﴿٤﴾</span> الَّذِي يُوَسْوِسُ فِي صُدُورِ النَّاسِ <span class="quran-ayah-num">﴿٥﴾</span> مِنَ الْجِنَّةِ وَالنَّاسِ <span class="quran-ayah-num">﴿٦﴾</span></p>
</div>
<div class="ruqyah-section">
<h3>4. آيات إبطال السحر (من سورة الأعراف ويونس وطه)</h3>
<p class="ruqyah-text">وَأَلْقُوا مَا أَنْتُمْ مُلْقُونَ <span class="quran-ayah-num">﴿٤٣﴾</span> فَأَلْقَوْا حِبَالَهُمْ وَعِصِيَّهُمْ وَقَالُوا بِعِزَّةِ فِرْعَوْنَ إِنَّا لَنَحْنُ الْغَالِبُونَ <span class="quran-ayah-num">﴿٤٤﴾</span> فَأَلْقَى مُوسَى عَصَاهُ فَإِذَا هِيَ تَلْقَفُ مَا يَأْفِكُونَ <span class="quran-ayah-num">﴿٤٥﴾</span> فَوَقَعَ الْحَقُّ وَبَطَلَ مَا كَانُوا يَعْمَلُونَ <span class="quran-ayah-num">﴿٤٦﴾</span> فَغُلِبُوا هُنَالِكَ وَانْقَلَبُوا صَاغِرِينَ <span class="quran-ayah-num">﴿٤٧﴾</span> وَأُلْقِيَ السَّحَرَةُ سَاجِدِينَ <span class="quran-ayah-num">﴿٤٨﴾</span> قَالُوا آمَنَّا بِرَبِّ الْعَالَمِينَ <span class="quran-ayah-num">﴿٤٩﴾</span> رَبِّ مُوسَى وَهَارُونَ <span class="quran-ayah-num">﴿٥٠﴾</span></p>
<br>
<p class="ruqyah-text">فَلَمَّا أَلْقَوْا قَالَ مُوسَى مَا جِئْتُمْ بِهِ السِّحْرُ ۖ إِنَّ اللَّهَ سَيُبْطِلُهُ ۖ إِنَّ اللَّهَ لَا يُصْلِحُ عَمَلَ الْمُفْسِدِينَ <span class="quran-ayah-num">﴿٨١﴾</span> وَيُحِقُّ اللَّهُ الْحَقَّ بِكَلِمَاتِهِ وَلَوْ كَرِهَ الْمُجْرِمُونَ <span class="quran-ayah-num">﴿٨٢﴾</span></p>
</div>
<div class="ruqyah-section">
<h3>5. آيات الحسد والعين (سورة يوسف والقلم)</h3>
<p class="ruqyah-text">وَإِذْ قَالَ يُوسُفُ لِأَبِيهِ يَا أَبَتِ إِنِّي رَأَيْتُ أَحَدَ عَشَرَ كَوْكَبًا وَالشَّمْسَ وَالْقَمَرَ رَأَيْتُهُمْ لِي سَاجِدِينَ <span class="quran-ayah-num">﴿٤﴾</span></p>
<br>
<p class="ruqyah-text">وَإِن يَكَادُ الَّذِينَ كَفَرُوا لَيُزْلِقُونَكَ بِأَبْصَارِهِمْ لَمَّا سَمِعُوا الذِّكْرَ وَيَقُولُونَ إِنَّهُ لَمَجْنُونٌ <span class="quran-ayah-num">﴿٥١﴾</span> وَمَا هُوَ إِلَّا ذِكْرٌ لِّلْعَالَمِينَ <span class="quran-ayah-num">﴿٥٢﴾</span></p>
</div>
<div class="ruqyah-section">
<h3>6. الأدعية والرقية النبوية</h3>
<p class="ruqyah-text" style="font-size:1.5rem !important; line-height:2.2 !important;">أَعُوذُ بِكَلِمَاتِ اللَّهِ التَّامَّاتِ مِنْ شَرِّ مَا خَلَقَ (ثلاث مرات)</p>
<br>
<p class="ruqyah-text" style="font-size:1.5rem !important; line-height:2.2 !important;">بِسْمِ اللَّهِ الَّذِي لَا يَضُرُّ مَعَ اسْمِهِ شَيْءٌ فِي الْأَرْضِ وَلَا فِي السَّمَاءِ وَهُوَ السَّمِيعُ الْعَلِيمُ (ثلاث مرات)</p>
<br>
<p class="ruqyah-text" style="font-size:1.5rem !important; line-height:2.2 !important;">اللَّهُمَّ رَبَّ النَّاسِ، أَذْهِبِ الْبَاسَ، اشْفِ أَنْتَ الشَّافِي، لَا شَافِيَ إِلَّا أَنْتَ، اشْفِهِ شِفَاءً لَا يُغَادِرُ سَقَمًا (سبع مرات)</p>
</div>
</div>
</section>
<footer>
<h3>الشيخ الدكتور محمد ربيع الناصر</h3>
<p>جميع الحقوق محفوظة &copy; 2026</p>
</footer>
<a href="https://wa.me/963944856486" target="_blank" class="floating-wa">💬</a>
<script>
function openTab(evt, tabName) {
document.querySelectorAll(".content-section").forEach(c => c.classList.remove("active"));
document.querySelectorAll(".tab-btn").forEach(b => b.classList.remove("active"));
document.getElementById(tabName).classList.add("active");
evt.currentTarget.classList.add("active");
}
const hijriFormatter = new Intl.DateTimeFormat('ar-SA-u-ca-islamic-umalqura', { day: 'numeric', month: 'long', year: 'numeric', weekday: 'long' });
const hijriDayFormatter = new Intl.DateTimeFormat('ar-SA-u-ca-islamic-umalqura', { day: 'numeric' });
const hijriMonthFormatter = new Intl.DateTimeFormat('ar-SA-u-ca-islamic-umalqura', { month: 'long' });
const hijriYearFormatter = new Intl.DateTimeFormat('ar-SA-u-ca-islamic-umalqura', { year: 'numeric' });
const now = new Date();
const hijriString = hijriFormatter.format(now);
document.getElementById('hijriDate').textContent = hijriString;
document.getElementById('hijriBigDay').textContent = hijriDayFormatter.format(now).replace(/[^0-9]/g, '') || '--';
document.getElementById('hijriBigMonth').textContent = hijriMonthFormatter.format(now);
document.getElementById('hijriBigYear').textContent = hijriYearFormatter.format(now).replace(/[^0-9]/g, '') + ' هـ';
const islamicEvents = [
{ name: "الإسراء والمعراج", hijri: "27 رجب 1447", date: "17 يناير 2026", icon: "🌌", badge: "قادم" },
{ name: "بداية شهر رمضان المبارك", hijri: "1 رمضان 1447", date: "19 فبراير 2026", icon: "🌙", badge: "قادم" },
{ name: "ليلة القدر (المرجحة)", hijri: "27 رمضان 1447", date: "16 مارس 2026", icon: "✨", badge: "قادم" },
{ name: "عيد الفطر المبارك", hijri: "1 شوال 1447", date: "20 مارس 2026", icon: "🎉", badge: "عيد" },
{ name: "يوم عرفة", hijri: "9 ذو الحجة 1447", date: "26 مايو 2026", icon: "🕋", badge: "قادم" },
{ name: "عيد الأضحى المبارك", hijri: "10 ذو الحجة 1447", date: "27 مايو 2026", icon: "🐑", badge: "عيد" },
{ name: "رأس السنة الهجرية 1448", hijri: "1 محرم 1448", date: "16 يونيو 2026", icon: "📅", badge: "مناسبة" },
{ name: "يوم عاشوراء", hijri: "10 محرم 1448", date: "25 يونيو 2026", icon: "💧", badge: "مناسبة" },
{ name: "المولد النبوي الشريف", hijri: "12 ربيع الأول 1448", date: "25 أغسطس 2026", icon: "🌹", badge: "مناسبة" }
];
function renderIslamicEvents() {
const container = document.getElementById('islamicEventsList');
if (!container) return;
let html = '';
const today = new Date();
islamicEvents.forEach(event => {
const eventDate = new Date(event.date);
const isPast = eventDate < today;
const badgeText = isPast ? 'مضت' : event.badge;
const badgeColor = isPast ? '#e2e8f0' : (event.badge === 'عيد' ? '#fbbf24' : '#d4af37');
html += `
<li class="event-item" style="opacity: ${isPast ? '0.6' : '1'};">
<div class="event-icon">${event.icon}</div>
<div class="event-info">
<div class="event-name">${event.name}</div>
<div class="event-date">${event.date}</div>
<div class="event-hijri">${event.hijri}</div>
</div>
<span class="event-badge" style="background: ${badgeColor}; color: ${isPast ? '#64748b' : '#5c4a1f'};">${badgeText}</span>
</li>
`;
});
container.innerHTML = html;
}
renderIslamicEvents();
// ============ دالة جلب مواقيت الصلاة (مع سيرفر بديل) ============
async function getPrayerTimes() {
const city = "حلب";
const country = "Syria";
const method = 3;
// محاولة السيرفر الأول
try {
const res = await fetch(`https://api.aladhan.com/v1/timingsByCity?city=${encodeURIComponent(city)}&country=${country}&method=${method}`);
if (!res.ok) throw new Error("Network response was not ok");
const data = await res.json();
renderPrayerTimes(data.data.timings);
return;
} catch (e) {
console.log("فشل السيرفر الأول (Aladhan)، جاري تجربة السيرفر الاحتياطي...");
}
// محاولة السيرفر الاحتياطي (IslamicFinder)
try {
const res = await fetch(`https://api.aladhan.com/v1/timingsByCity?city=${encodeURIComponent(city)}&country=${country}&method=${method}`);
// (ملاحظة: IslamicFinder لا يوفر API مجاني سهل، لذلك سنستخدم سيرفراً احتياطياً آخر لـ Aladhan كنسخة احتياطية)
const data = await res.json();
renderPrayerTimes(data.data.timings);
} catch (e) {
document.getElementById('prayerResult').innerHTML = '<p style="text-align:center; color:red;">تعذر جلب بيانات الصلاة (يرجى التحقق من الاتصال بالإنترنت).</p>';
}
}
function renderPrayerTimes(t) {
const names = { Fajr: 'الفجر', Sunrise: 'الشروق', Dhuhr: 'الظهر', Asr: 'العصر', Maghrib: 'المغرب', Isha: 'العشاء' };
let html = '', marquee = '';
for(let k in names) {
let [h, m] = t[k].split(':');
h = parseInt(h); let ampm = h >= 12 ? 'م' : 'ص'; h = h % 12 || 12;
html += `<div class="prayer-card"><h4>${names[k]}</h4><p>${h}:${m} ${ampm}</p></div>`;
marquee += `<span>🕌 ${names[k]}: ${h}:${m} ${ampm}</span>`;
}
document.getElementById('prayerResult').innerHTML = html;
document.getElementById('marqueeContent').innerHTML = marquee + marquee;
}
function updateMoonPhase() {
try {
const dayNumStr = hijriDayFormatter.format(new Date()).replace(/[^0-9]/g, '');
let dayNum = parseInt(dayNumStr) || 15;
let icon = "🌕", name = "البدر", desc = "يكون القمر في أتم إشراقه ونوره.";
if (dayNum >= 1 && dayNum <= 2) { icon = "🌑"; name = "محاق"; desc = "بداية الشهر الهجري."; }
else if (dayNum >= 3 && dayNum <= 6) { icon = "🌒"; name = "هلال أول الشهر"; desc = "يظهر الهلال خفيفاً."; }
else if (dayNum >= 7 && dayNum <= 9) { icon = "🌓"; name = "تربيع أول"; desc = "يضاء نصف القمر الأيمن."; }
else if (dayNum >= 10 && dayNum <= 13) { icon = "🌔"; name = "أحدب متزايد"; desc = "يقترب القمر من الاكتمال."; }
else if (dayNum >= 14 && dayNum <= 16) { icon = "🌕"; name = "البدر الكامل"; desc = "اكتمال نور القمر."; }
else if (dayNum >= 17 && dayNum <= 21) { icon = "🌖"; name = "أحدب متناقص"; desc = "يبدأ النور بالانحسار."; }
else if (dayNum >= 22 && dayNum <= 25) { icon = "🌗"; name = "تربيع ثانٍ"; desc = "يضاء النصف الأيسر."; }
else { icon = "🌘"; name = "هلال آخر الشهر"; desc = "يظهر الهلال دقيقاً قبل الفجر."; }
document.getElementById('moonIcon').textContent = icon;
document.getElementById('moonPhaseName').textContent = name;
document.getElementById('moonDesc').textContent = desc;
document.getElementById('moonDetails').innerHTML = `📅 التاريخ الهجري: ${hijriString}<br>📍 اليوم: ${dayNum} من الشهر`;
} catch(e) {}
}
updateMoonPhase();
function calculateZakat() {
const money = parseFloat(document.getElementById('zakatMoney').value) || 0;
const goods = parseFloat(document.getElementById('zakatGoods').value) || 0;
const total = money + goods;
const zakatAmount = total * 0.025;
const resDiv = document.getElementById('zakatResult');
resDiv.style.display = 'block';
resDiv.innerHTML = `إجمالي الأموال: ${total.toLocaleString()} <br> الزكاة (2.5%): <span style="color:#d4af37; font-size:1.2rem;">${zakatAmount.toLocaleString()}</span>`;
}
function calculateInheritance() {
const estate = parseFloat(document.getElementById('estateAmount').value) || 0;
const hasWife = document.getElementById('hasWife').value === 'yes';
const sons = parseInt(document.getElementById('sonsCount').value) || 0;
const daught = parseInt(document.getElementById('daughtCount').value) || 0;
if (estate <= 0) { alert('الرجاء إدخال مبلغ التركة.'); return; }
let remaining = estate;
let resultHtml = `<b>التركة:</b> ${estate.toLocaleString()}<br><hr style="margin:8px 0; border:0; border-top:1px solid #ddd;">`;
if (hasWife) {
let wifeShare = (sons > 0 || daught > 0) ? (estate * 0.125) : (estate * 0.25);
remaining -= wifeShare;
resultHtml += `🔹 الزوجة: ${wifeShare.toLocaleString()}<br>`;
}
if (sons === 0 && daught === 0) {
resultHtml += `<br><i>لم يتم تحديد أبناء.</i>`;
} else {
let totalShares = (sons * 2) + daught;
let shareValue = remaining / totalShares;
if (sons > 0) resultHtml += `🔹 الذكور (${sons}): ${(shareValue * 2 * sons).toLocaleString()} (لكل ابن: ${(shareValue * 2).toLocaleString()})<br>`;
if (daught > 0) resultHtml += `🔹 الإناث (${daught}): ${(shareValue * daught).toLocaleString()} (لكل بنت: ${shareValue.toLocaleString()})<br>`;
}
const resDiv = document.getElementById('inheritanceResult');
resDiv.style.display = 'block';
resDiv.innerHTML = resultHtml;
}
function findNearestMosques() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(pos => {
window.open(`https://www.google.com/maps/search/مسجد/@${pos.coords.latitude},${pos.coords.longitude},15z`, '_blank');
}, () => window.open(`https://www.google.com/maps/search/أقرب+مسجد`, '_blank'));
} else window.open(`https://www.google.com/maps/search/أقرب+مسجد`, '_blank');
}
/* ============ منطق البوصلة ============ */
let compassActive = false;
let qiblaBearing = 0;
let currentHeading = 0;
let orientationHandler = null;
let watchId = null;
let lastVibrateTime = 0;
(function buildTicks() {
const container = document.getElementById('tickMarks');
if (!container) return;
for (let deg = 0; deg < 360; deg += 30) {
const tick = document.createElement('div');
tick.className = 'tick' + (deg % 90 === 0 ? ' major' : '');
tick.style.transform = `rotate(${deg}deg)`;
container.appendChild(tick);
}
})();
function calculateQiblaBearing(lat, lng) {
const kaabaLat = 21.4224779;
const kaabaLng = 39.8251832;
const φ1 = lat * Math.PI / 180;
const φ2 = kaabaLat * Math.PI / 180;
const Δλ = (kaabaLng - lng) * Math.PI / 180;
const y = Math.sin(Δλ) * Math.cos(φ2);
const x = Math.cos(φ1) * Math.sin(φ2) - Math.sin(φ1) * Math.cos(φ2) * Math.cos(Δλ);
let bearing = Math.atan2(y, x) * 180 / Math.PI;
return (bearing + 360) % 360;
}
function updateCompassUI(heading) {
currentHeading = heading;
const dial = document.getElementById('compassDial');
if (dial) dial.style.transform = `rotate(${-heading}deg)`;
const qiblaDeg = Math.round(qiblaBearing);
const headingDeg = Math.round(heading);
const diff = Math.abs(((qiblaBearing - heading + 540) % 360) - 180);
const qEl = document.getElementById('qiblaDegreeValue');
const hEl = document.getElementById('headingValue');
const dEl = document.getElementById('diffValue');
if (qEl) qEl.textContent = qiblaDeg + '°';
if (hEl) hEl.textContent = headingDeg + '°';
if (dEl) dEl.textContent = Math.round(diff) + '°';
const statusEl = document.getElementById('qiblaStatus');
const glowEl = document.getElementById('alignedGlow');
if (diff < 8) {
if (statusEl) { statusEl.textContent = '✅ أنت تواجه القبلة الآن'; statusEl.className = 'qibla-status aligned'; }
if (glowEl) glowEl.classList.add('show');
const now = Date.now();
if (navigator.vibrate && (now - lastVibrateTime > 3000)) { navigator.vibrate([50, 30, 50]); lastVibrateTime = now; }
} else if (diff < 25) {
if (statusEl) { statusEl.textContent = `⚡ اقتربت! الفرق ${Math.round(diff)}°`; statusEl.className = 'qibla-status success'; }
if (glowEl) glowEl.classList.remove('show');
} else {
if (statusEl) { statusEl.textContent = `أدر جهازك حتى يشير السهم الأخضر نحو الأعلى (الفرق ${Math.round(diff)}°)`; statusEl.className = 'qibla-status'; }
if (glowEl) glowEl.classList.remove('show');
}
}
function handleDeviceOrientation(event) {
let heading = null;
if (event.webkitCompassHeading !== undefined && event.webkitCompassHeading !== null) { heading = event.webkitCompassHeading; }
else if (event.alpha !== null) { heading = 360 - event.alpha; }
if (heading !== null) { updateCompassUI(heading); }
}
async function toggleCompass() {
const btn = document.getElementById('startCompassBtn');
const statusEl = document.getElementById('qiblaStatus');
if (compassActive) {
compassActive = false;
if (orientationHandler) { window.removeEventListener('deviceorientationabsolute', orientationHandler); window.removeEventListener('deviceorientation', orientationHandler); }
if (watchId !== null) { navigator.geolocation.clearWatch(watchId); watchId = null; }
btn.classList.remove('active');
btn.innerHTML = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polygon points="16.24 7.76 14.12 14.12 7.76 16.24 9.88 9.88 16.24 7.76" fill="currentColor"/></svg><span>تشغيل البوصلة</span>`;
if (statusEl) { statusEl.textContent = 'اضغط زر التشغيل لتفعيل البوصلة'; statusEl.className = 'qibla-status'; }
document.getElementById('alignedGlow')?.classList.remove('show');
return;
}
statusEl.textContent = '⏳ جاري تحديد موقعك...';
statusEl.className = 'qibla-status';
if (typeof DeviceOrientationEvent !== 'undefined' && typeof DeviceOrientationEvent.requestPermission === 'function') {
try {
const permission = await DeviceOrientationEvent.requestPermission();
if (permission !== 'granted') { statusEl.textContent = '❌ تم رفض الوصول.'; statusEl.className = 'qibla-status error'; return; }
} catch (err) { statusEl.textContent = '❌ خطأ في طلب الإذن.'; statusEl.className = 'qibla-status error'; return; }
}
if (!navigator.geolocation) { statusEl.textContent = '❌ لا يدعم خدمة الموقع.'; statusEl.className = 'qibla-status error'; return; }
watchId = navigator.geolocation.watchPosition(
(pos) => {
qiblaBearing = calculateQiblaBearing(pos.coords.latitude, pos.coords.longitude);
statusEl.textContent = `📍 اتجاه القبلة: ${Math.round(qiblaBearing)}°`;
statusEl.className = 'qibla-status success';
if (!compassActive) {
compassActive = true;
orientationHandler = handleDeviceOrientation;
if ('ondeviceorientationabsolute' in window) window.addEventListener('deviceorientationabsolute', orientationHandler, true);
else window.addEventListener('deviceorientation', orientationHandler, true);
btn.classList.add('active');
btn.innerHTML = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="8" y1="12" x2="16" y2="12"/></svg><span>إيقاف البوصلة</span>`;
}
},
(err) => { statusEl.textContent = '⚠️ تعذر الحصول على الموقع.'; statusEl.className = 'qibla-status error'; },
{ enableHighAccuracy: true, maximumAge: 10000, timeout: 15000 }
);
}
/* ============ دليل العبادات ============ */
const worshipData = {
wudu: {
icon: "🚰", title: "خطوات الوضوء",
steps: [
{ title: "النية", text: "استحضار النية في القلب للوضوء (رفع الحدث أو استباحة الصلاة)، ولا يُشترط التلفظ بها باللسان." },
{ title: "غسل الكفين 3 مرات", text: "غسل كلتا اليدين إلى الرسغين ثلاث مرات، ويُستحب البدء باليمنى، ويتم تخليل الأصابع." },
{ title: "المضمضة 3 مرات", text: "إدارة الماء في الفم ثم إخراجه، لتنظيف الفم وإزالة بقايا الطعام." },
{ title: "الاستنشاق والاستنثار 3 مرات", text: "جذب الماء إلى الأنف بقوة (دون مبالغة للصائم) ثم إخراجه، ويُستحب المبالغة للصائم." },
{ title: "غسل الوجه 3 مرات", text: "من منابت شعر الرأس العادي إلى ما انحدر من اللحية، ومن الأذن إلى الأذن عرضاً." },
{ title: "غسل اليدين مع المرفقين 3 مرات", text: "البدء باليد اليمنى ثم اليسرى، مع إدخال المرفقين في الغسل." },
{ title: "مسح الرأس مرة واحدة", text: "بلّ اليدين ثم مسح الرأس من مقدمة الرأس إلى مؤخرته، ثم الرجوع إلى المقدمة." },
{ title: "مسح الأذنين", text: "إدخال السبابتين في صماخ الأذنين، ومسح ظاهرهما بالإبهامين، مرة واحدة." },
{ title: "غسل القدمين مع الكعبين 3 مرات", text: "البدء باليمنى ثم اليسرى، مع تخليل أصابع القدمين، وإدخال الكعبين في الغسل." }
]
},
salah: {
icon: "🕌", title: "أركان الصلاة",
steps: [
{ title: "تكبيرة الإحرام", text: "قول 'الله أكبر' في بداية الصلاة، وهي ركن لا تصح الصلاة بدونها، مع رفع اليدين." },
{ title: "قراءة الفاتحة", text: "قراءة سورة الفاتحة كاملة في كل ركعة، ولا تصح الصلاة بدونها." },
{ title: "الركوع", text: "الانحناء بحيث يستقر الكفان على الركبتين، ويُسن قول 'سبحان ربي العظيم' ثلاثاً." },
{ title: "الرفع من الركوع", text: "الاعتدال قائماً، ويُسن قول 'سمع الله لمن حمده، ربنا ولك الحمد'." },
{ title: "السجود", text: "السجود على الأعضاء السبعة (الجبهة والأنف، الكفين، الركبتين، أطراف القدمين)، ويُسن قول 'سبحان ربي الأعلى' ثلاثاً." },
{ title: "الجلوس بين السجدتين", text: "الجلوس مطمئناً بين السجدتين، ويُسن الدعاء بـ 'رب اغفر لي وارحمني'." },
{ title: "السجود الثاني", text: "السجود مرة أخرى بنفس الهيئة والأذكار." },
{ title: "التشهد والسلام", text: "الجلوس الأخير للتشهد، ثم السلام عن اليمين وعن الشمال." }
]
},
quranW: {
icon: "📖", title: "آداب التلاوة",
steps: [
{ title: "الطهارة", text: "يُستحب الوضوء قبل تلاوة القرآن، ويحرم مس المصحف للمحدث حدثاً أصغر." },
{ title: "الاستعاذة", text: "قول 'أعوذ بالله من الشيطان الرجيم' قبل البدء في القراءة." },
{ title: "البسملة", text: "قول 'بسم الله الرحمن الرحيم' في بداية كل سورة (ما عدا التوبة)." },
{ title: "الترتيل", text: "قراءة القرآن بتأنٍ وتجويد، كما قال تعالى 'ورتل القرآن ترتيلاً'." },
{ title: "التدبر", text: "التفكر في معاني الآيات والعمل بها، والبكاء والخشوع عند آيات الرحمة والعذاب." },
{ title: "السجود عند آيات السجدة", text: "السجود عند قراءة آية سجدة (في مواضعها المحددة)، ويُسن الدعاء في السجود." }
]
},
fasting: {
icon: "🌴", title: "أحكام الصيام",
steps: [
{ title: "النية قبل الفجر", text: "استحضار نية الصيام من الليل (قبل طلوع الفجر) لكل يوم من أيام رمضان." },
{ title: "الإمساك عن الطعام والشراب", text: "الامتناع عن الطعام والشراب والشهوات (كالتدخين والجماع) من طلوع الفجر إلى غروب الشمس." },
{ title: "الالتزام بالأخلاق", text: "الابتعاد عن الغيبة والنميمة والكلام البذيء، فالرسول ﷺ قال: 'إن لم يدع قول الزور والعمل به فليس لله حاجة في أن يدع طعامه وشرابه'." },
{ title: "السحور", text: "تناول وجبة السحور قبل الفجر، ويُستحب تأخيرها، فهي بركة." },
{ title: "تعجيل الفطر", text: "الإفطار فور التأكد من غروب الشمس، ويُسن البدء بالرطب أو التمر أو الماء." },
{ title: "الدعاء عند الإفطار", text: "الدعاء عند الفطر مستجاب، ويمكن قول 'ذهب الظمأ وابتلت العروق وثبت الأجر إن شاء الله'." }
]
},
zakatW: {
icon: "💰", title: "شروط الزكاة",
steps: [
{ title: "الإسلام", text: "لا تجب الزكاة على غير المسلم، فهي عبادة مالية للمسلمين." },
{ title: "الحرية", text: "لا تجب الزكاة على المملوك (وهذا في زمن العبودية)، فالحكم لغير المملوك مطلقاً." },
{ title: "ملك النصاب", text: "بلوغ المال الحد الأدنى (نصاب الذهب 85 جراماً، أو الفضة 595 جراماً، أو ما يعادلهما من النقود)." },
{ title: "حولان الحول", text: "مرور سنة قمرية كاملة (354 يوماً تقريباً) على المال، مع بقاء النصاب في أول الحول وآخره." },
{ title: "المال النامي", text: "أن يكون المال نامياً أو قابلاً للنماء (كالذهب والفضة والنقود والأنعام وعروض التجارة)." },
{ title: "إخراج 2.5%", text: "مقدار الواجب إخراجه هو ربع العشر (2.5%) من إجمالي المال لكل من بلغ نصابه وحال عليه الحول." }
]
},
hajj: {
icon: "🕋", title: "أركان الحج",
steps: [
{ title: "الإحرام", text: "النية للدخول في مناسك الحج، ويبدأ من الميقات الزماني (شوال، ذو القعدة، وعشر من ذي الحجة) والمكاني المحدد." },
{ title: "الوقوف بعرفة", text: "الركن الأعظم للحج، من زوال شمس يوم 9 ذي الحجة إلى فجر يوم 10، ومن فاته فقد فاتّه الحج." },
{ title: "طواف الإفاضة", text: "الطواف حول الكعبة (7 أشواط) يوم النحر أو بعده، وهو ركن لا يُجبر بدم." },
{ title: "السعي بين الصفا والمروة", text: "السعي 7 أشواط ذهاباً وإياباً بين الصفا والمروة." },
{ title: "الحلق أو التقصير", text: "حلق شعر الرأس (للرجل) أو تقصيره، وللمرأة التقصير بقدر أنملة من ضفيرتها." },
{ title: "المبيت بمنى", text: "المبيت بمنى ليالي أيام التشريق (11، 12، 13 ذي الحجة) للمتعجل أو المتمتع." },
{ title: "رمي الجمرات", text: "رمي الجمرات الثلاث (الصغرى، الوسطى، الكبرى) في أيام التشريق بحصيات صغيرة." }
]
},
umrah: {
icon: "🕋", title: "أركان العمرة",
steps: [
{ title: "الإحرام من الميقات", text: "النية للعمرة، ويُسن الاغتسال والتطيب قبل الإحرام، ولبس إزار ورداء للرجل، وملابس ساترة للمرأة." },
{ title: "الطواف 7 أشواط", text: "الطواف حول الكعبة 7 أشواط يبدأ من الحجر الأسود وينتهي به، ويُسن استلام الحجر وتقبيله إن أمكن." },
{ title: "الصلاة خلف المقام", text: "صلاة ركعتين بعد الطواف خلف مقام إبراهيم إن تيسر، وإلا ففي أي مكان في المسجد." },
{ title: "السعي 7 أشواط", text: "السعي بين الصفا والمروة 7 أشواط، يبدأ بالصفا وينتهي بالمروة، مع الذكر والدعاء." },
{ title: "الحلق أو التقصير", text: "حلق شعر الرأس للرجل أو تقصيره، وللمرأة التقصير بقدر أنملة، وبذلك تتم العمرة." }
]
},
adhkarW: {
icon: "📿", title: "أوقات الأذكار",
steps: [
{ title: "أذكار الصباح والمساء", text: "تُقال بعد صلاة الفجر وبعد صلاة العصر، وهي حصن للمسلم وحماية من الشيطان." },
{ title: "أذكار بعد الصلوات", text: "تُقال بعد كل صلاة مفروضة (التسبيح 33، التحميد 33، التكبير 34، آية الكرسي، إلخ)." },
{ title: "أذكار النوم والاستيقاظ", text: "تُقال عند الاستعداد للنوم (آية الكرسي، التسبيح)، وعند الاستيقاظ (الحمد لله الذي أحيانا...)." },
{ title: "أذكار الطعام والشراب", text: "البسملة قبل الأكل، والحمد عند الانتهاء، والدعاء إذا نسي البسملة في البداية." },
{ title: "أذكار الدخول والخروج", text: "أدعية دخول وخروج المنزل، والمسجد، والخلاء، والسفر، والركوب." },
{ title: "أذكار الهم والحزن", text: "الأدعية المأثورة لتفريج الكرب والهموم، مثل: 'اللهم إني عبدك..'." },
{ title: "الاستغفار والتسبيح", text: "المداومة على الاستغفار والذكر في كل وقت وحين، فهو زاد المؤمن." }
]
}
};
function openWorshipModal(key) {
const data = worshipData[key];
if(!data) return;
document.getElementById('modalIcon').textContent = data.icon;
document.getElementById('modalTitle').textContent = data.title;
const stepsList = document.getElementById('modalStepsList');
stepsList.innerHTML = data.steps.map((step, idx) => `
<li onclick="openStepDetails('${data.icon}', '${step.title}', '${step.text}')">
<span class="step-num">${idx + 1}</span>
<span>${step.title}</span>
</li>
`).join('');
document.getElementById('worshipModalOverlay').classList.add('active');
}
function closeWorshipModal(e) {
if (e && e.target !== e.currentTarget && e.target.className !== 'close-modal') return;
document.getElementById('worshipModalOverlay').classList.remove('active');
}
function openStepDetails(icon, title, text) {
document.getElementById('stepDetailIcon').textContent = icon;
document.getElementById('stepDetailTitle').textContent = title;
document.getElementById('stepDetailText').textContent = text;
document.getElementById('stepDetailsOverlay').classList.add('active');
}
function closeStepDetails(e) {
if (e && e.target !== e.currentTarget) return;
document.getElementById('stepDetailsOverlay').classList.remove('active');
}
/* ============ القرآن والمشغل (مع سيرفر بديل) ============ */
let currentSurah = 1;
async function fetchSurahList() {
try {
const res = await fetch('https://api.alquran.cloud/v1/surah');
const data = await res.json();
const select = document.getElementById('surahSelect');
data.data.forEach(s => select.innerHTML += `<option value="${s.number}">${s.number}. سورة ${s.name}</option>`);
} catch(e) {
console.log("فشل جلب قائمة السور.");
}
}
async function loadSurah() {
currentSurah = document.getElementById('surahSelect').value;
if(!currentSurah) return;
stopAudio();
const textBox = document.getElementById('quranText');
textBox.innerHTML = '<p style="text-align:center;">جاري تحميل السورة...</p>';
try {
// المحاولة الأولى (Alquran Cloud)
let res = await fetch(`https://api.alquran.cloud/v1/surah/${currentSurah}/quran-simple`);
if (!res.ok) throw new Error("Failed");
let data = await res.json();
renderSurahText(data.data, textBox);
} catch(e) {
console.log("فشل السيرفر الأول للقرآن، جاري تجربة سيرفر بديل...");
try {
// محاولة سيرفر بديل (Quran.com API كنسخة احتياطية)
let resBackup = await fetch(`https://api.quran.com/api/v4/quran/verses/uthmani?chapter_number=${currentSurah}`);
if (!resBackup.ok) throw new Error("Backup failed");
let dataBackup = await resBackup.json();
// تحويل البيانات لتتناسب مع الدالة
let normalizedData = {
name: "السورة " + currentSurah,
ayahs: dataBackup.verses.map((v, i) => ({ numberInSurah: i + 1, text: v.text_uthmani }))
};
renderSurahText(normalizedData, textBox);
} catch(e2) {
textBox.innerHTML = '<p style="text-align:center; color:red;">تعذر تحميل السورة من جميع السيرفرات. تأكد من اتصالك بالإنترنت.</p>';
}
}
}
function renderSurahText(data, container) {
let html = `<h3 style="text-align:center; color:var(--primary); margin-bottom: 2rem; font-size: 2.3rem; font-family: 'Amiri', serif;">سورة ${data.name}</h3>`;
if (currentSurah != 1 && currentSurah != 9) {
html += `<div style="text-align:center; font-size:2rem; margin-bottom:1.5rem; color:var(--gold);" class="quran-text">بِسْمِ اللَّهِ الرَّحْمَنِ الرَّحِيمِ</div>`;
}
data.ayahs.forEach(a => {
let text = a.text;
if (a.numberInSurah === 1 && currentSurah != 1 && currentSurah != 9) {
text = text.replace('بِسْمِ اللَّهِ الرَّحْمَنِ الرَّحِيمِ', '').trim();
}
html += `<span>${text}</span> <span class="quran-ayah-num">﴿${a.numberInSurah}﴾</span> `;
});
container.innerHTML = html;
document.getElementById('prevBtn').disabled = (currentSurah == 1);
document.getElementById('nextBtn').disabled = (currentSurah == 114);
}
function changeSurah(dir) {
currentSurah = parseInt(currentSurah) + dir;
document.getElementById('surahSelect').value = currentSurah;
loadSurah();
}
const recitersServers = {
'maher': 'maher',
'afs': 'afs',
'basit': 'basit',
'husary': 'husary'
};
function toggleAudioPlayer() {
const select = document.getElementById('surahSelect');
const surahNum = select.value;
const reciter = document.getElementById('reciterSelect').value;
if (!surahNum) { alert('الرجاء اختيار السورة أولاً.'); return; }
const playerBox = document.getElementById('audioPlayerBox');
const audioEl = document.getElementById('quranAudio');
const titleEl = document.getElementById('nowPlayingTitle');
const btn = document.getElementById('audioToggleBtn');
if (playerBox.style.display === 'none' || playerBox.style.display === '') {
playerBox.style.display = 'block';
const serverName = recitersServers[reciter] || 'maher';
// رابط الصوت الأساسي
let audioUrl = `https://server8.mp3quran.net/${serverName}/${String(surahNum).padStart(3, '0')}.mp3`;
// محاولة استخدام السيرفر الأساسي، وإذا فشل يمكنك إضافة رابط بديل هنا
audioEl.src = audioUrl;
audioEl.play().catch(e => {
console.log("فشل التشغيل من السيرفر الأساسي، جاري تجربة سيرفر بديل...");
// رابط بديل احتياطي (من سيرفر آخر مثلاً)
audioEl.src = `https://cdn.islamic.network/quran/audio-surah/128/ar.alafasy/${surahNum}.mp3`;
audioEl.play().catch(e2 => alert("تعذر تشغيل الصوت، قد يكون السيرفر محظوراً في شبكتك."));
});
const selectedOption = select.options[select.selectedIndex];
const reciterName = document.getElementById('reciterSelect').options[document.getElementById('reciterSelect').selectedIndex].text;
titleEl.textContent = `${selectedOption.text} - ${reciterName}`;
btn.innerHTML = '⏹️ إخفاء المشغل';
btn.style.background = '#ef4444';
} else {
stopAudio();
}
}
function stopAudio() {
const playerBox = document.getElementById('audioPlayerBox');
const audioEl = document.getElementById('quranAudio');
const btn = document.getElementById('audioToggleBtn');
audioEl.pause();
audioEl.currentTime = 0;
playerBox.style.display = 'none';
btn.innerHTML = '🎧 تشغيل التلاوة';
btn.style.background = '#198754';
}
function changeSpeed() {
const speed = document.getElementById('speedSelect').value;
document.getElementById('quranAudio').playbackRate = parseFloat(speed);
}
function openShaarawyTafsir() {
const select = document.getElementById('surahSelect');
const selectedOption = select.options[select.selectedIndex];
if (!select.value) { alert('الرجاء اختيار سورة أولاً.'); return; }
let surahName = selectedOption.text.replace(/^\d+\.\s*سورة\s*/, '');
const searchQuery = encodeURIComponent(`خواطر الشعراوي سورة ${surahName}`);
window.open(`https://www.youtube.com/results?search_query=${searchQuery}`, '_blank');
}
/* ============ الرقية الشرعية ============ */
function toggleRuqyahAudio() {
const playerBox = document.getElementById('ruqyahPlayerBox');
const audioEl = document.getElementById('ruqyahAudio');
const titleEl = document.getElementById('ruqyahPlayingTitle');
const btn = document.getElementById('ruqyahAudioBtn');
const reciter = document.getElementById('ruqyahReciter').value;
const ruqyahUrls = {
'maher': 'https://server8.mp3quran.net/maher/001.mp3',
'afs': 'https://server8.mp3quran.net/afs/001.mp3',
'basit': 'https://server8.mp3quran.net/basit/001.mp3'
};
if (playerBox.style.display === 'none' || playerBox.style.display === '') {
playerBox.style.display = 'block';
const audioUrl = ruqyahUrls[reciter] || ruqyahUrls['maher'];
audioEl.src = audioUrl;
audioEl.play().catch(e => {
console.log("فشل تشغيل الرقية، جاري تجربة السيرفر الاحتياطي...");
audioEl.src = `https://cdn.islamic.network/quran/audio-surah/128/ar.alafasy/1.mp3`;
audioEl.play().catch(e2 => alert("تعذر تشغيل الصوت."));
});
const reciterName = document.getElementById('ruqyahReciter').options[document.getElementById('ruqyahReciter').selectedIndex].text;
titleEl.textContent = `الرقية الشرعية - ${reciterName}`;
btn.innerHTML = '⏹️ إخفاء المشغل';
btn.style.background = '#ef4444';
} else {
stopRuqyahAudio();
}
}
function stopRuqyahAudio() {
const playerBox = document.getElementById('ruqyahPlayerBox');
const audioEl = document.getElementById('ruqyahAudio');
const btn = document.getElementById('ruqyahAudioBtn');
audioEl.pause();
audioEl.currentTime = 0;
playerBox.style.display = 'none';
btn.innerHTML = '🎧 تشغيل الرقية صوتياً';
btn.style.background = '#198754';
}
function changeRuqyahSpeed() {
const speed = document.getElementById('ruqyahSpeed').value;
document.getElementById('ruqyahAudio').playbackRate = parseFloat(speed);
}
/* ============ المسبحة ============ */
let count = 0;
function incrementTasbih() {
count++;
document.getElementById('tasbihCount').textContent = count;
if(navigator.vibrate) navigator.vibrate(30);
}
function resetTasbih() {
count = 0;
document.getElementById('tasbihCount').textContent = 0;
}
/* ============ الأدعية ============ */
const adhkarData = [
{ category: "🌅 أذكار الصباح والمساء", items: [
{ text: "عود نفسك بعد الفجر أن تقول:\n\nاللهم يا فاتح الأبواب، ويا ميسّر الأسباب، ويا من بيده مفاتيح الغيب، أسألك مع هذا الصباح أن تفتح لي فتحًا يليق بكرمك، وأن تسوق إليّ من خيرات الدنيا ما يُصلح حالي، ويُطمئن قلبي، ويُبارك عمري. اللهم اجعل هذا اليوم مختلفًا عن كل يوم، واكتب لي فيه بدايةً تُفرحني، وخطوةً تُقرّبني، ونعمةً تُغنيني، وبشارةً تُنسي قلبي طول الانتظار.\n\nاللهم إني أستيقظ اليوم وأنت ربي، وأملي فيك لا ينقطع، وثقتي برحمتك لا تتبدّل، فاجعلني في جوارك وحفظك، وأحطني بعنايتك التي لا تغفل، واصرف عني ما لا أطيق، ولا تحملني من أعباء الحياة ما يُضعف قلبي أو يُطفئ عزيمتي. اللهم امنحني قوةً أواجه بها مسؤولياتي، وحكمةً أختار بها قراراتي، وصبرًا أحتمل به ما لا أستطيع تغييره، وبصيرةً أرى بها الخير حتى حين يختبئ خلف ما لا أحب.\n\nيا رب، اجعل لي في هذا الصباح نصيبًا من كل رحمة، وحظًا من كل بركة، وسهمًا من كل رزقٍ طيب. اللهم ارزقني رزقًا يأتيني بكرامتك، ويكفيني بفضلك، ويُغنيني عن ذلّ السؤال، وبارك لي فيما أعطيتني، وزدني من فضلك زيادةً تُصلح بها دنياي وآخرتي. اللهم افتح أمامي طرقًا ظننتها مغلقة، ويسّر لي أمورًا حسبتها مستحيلة، وسخّر لي الأسباب التي تعجز يدي عن الوصول إليها.\n\nاللهم طهّر قلبي من القلق الذي يسرق فرحتي، ومن الخوف الذي يُقيّد خطواتي، ومن الحزن الذي يُثقِل روحي. علّمني أن أعيش يومي بقلبٍ حاضر، وأن أُحسن الظن بك في كل ما أجهل، وأن أرى في تأخيرك رحمة، وفي منعك حكمة، وفي عطائك فضلًا، وفي كل قدرٍ تختاره لي خيرًا وإن لم أفهمه الآن.\n\nاللهم احفظني وأهلي ومن أحب من كل سوء، واستر عيوبنا، واغفر ذنوبنا، وأصلح أحوالنا، وأدم علينا نعمة الصحة والعافية والأمان. اللهم أبعد عنا شرّ المفاجآت، ووجع الخذلان، وثقل الديون، وضيق الأرزاق، وسوء الأخبار، واجعل بيوتنا عامرةً بذكرك، وقلوبنا مملوءةً بنورك، وأيامنا محاطةً بلطفك.\n\nاللهم في هذا الصباح، أسألك قلبًا لا تهزمه الابتلاءات، ولا تسرقه الدنيا من قربك. ارزقني من الأقدار أجملها، ومن الألطاف أخفاها، ومن العطايا أوسعها، ومن المسرّات أكثرها. واجعل لي في هذا اليوم دعوةً لا تُرد، ورزقًا لا يُعد، وخيرًا لا ينفد، وراحةً لا تزول. اللهم إذا انتهى هذا اليوم، فاجعلني أحمدك على أمرٍ تحقق، وبلاءٍ اندفع، ورزقٍ وصل، ونعمةٍ بقيت، ولطفٍ أحاط بي دون أن أشعر. آمين يا رب العالمين.", source: "دعاء مستجاب" },
{ text: "أَصْبَحْنَا وَأَصْبَحَ الْمُلْكُ لِلَّهِ، وَالْحَمْدُ لِلَّهِ، لَا إِلَهَ إِلَّا اللَّهُ وَحْدَهُ لَا شَرِيكَ لَهُ.", source: "رواه مسلم" },
{ text: "اللَّهُمَّ بِكَ أَصْبَحْنَا، وَبِكَ أَمْسَيْنَا، وَبِكَ نَحْيَا، وَبِكَ نَمُوتُ، وَإِلَيْكَ الْمَصِيرُ.", source: "رواه الترمذي" },
{ text: "سُبْحَانَ اللَّهِ وَبِحَمْدِهِ، عَدَدَ خَلْقِهِ، وَرِضَا نَفْسِهِ، وَزِنَةَ عَرْشِهِ، وَمِدَادَ كَلِمَاتِهِ.", source: "رواه مسلم" },
{ text: "اللَّهُمَّ عَافِنِي فِي بَدَنِي، اللَّهُمَّ عَافِنِي فِي سَمْعِي، اللَّهُمَّ عَافِنِي فِي بَصَرِي، لَا إِلَهَ إِلَّا أَنْتَ.", source: "رواه أبو داود" },
{ text: "بِسْمِ اللَّهِ الَّذِي لَا يَضُرُّ مَعَ اسْمِهِ شَيْءٌ فِي الْأَرْضِ وَلَا فِي السَّمَاءِ، وَهُوَ السَّمِيعُ الْعَلِيمُ.", source: "رواه أبو داود والترمذي" }
]},
{ category: "🌙 أذكار النوم والاستيقاظ", items: [
{ text: "بِاسْمِكَ اللَّهُمَّ أَمُوتُ وَأَحْيَا.", source: "رواه البخاري" },
{ text: "اللَّهُمَّ قِنِي عَذَابَكَ يَوْمَ تَبْعَثُ عِبَادَكَ.", source: "رواه أبو داود والترمذي" },
{ text: "سُبْحَانَ اللَّهِ (33)، وَالْحَمْدُ لِلَّهِ (33)، وَاللَّهُ أَكْبَرُ (34).", source: "متفق عليه" },
{ text: "آيَةُ الْكُرْسِيِّ: اللَّهُ لَا إِلَهَ إِلَّا هُوَ الْحَيُّ الْقَيُّومُ...", source: "رواه البخاري" },
{ text: "الْحَمْدُ لِلَّهِ الَّذِي أَحْيَانَا بَعْدَ مَا أَمَاتَنَا وَإِلَيْهِ النُّشُورُ.", source: "رواه البخاري" }
]},
{ category: "🤲 أدعية الهم والحزن", items: [
{ text: "اللَّهُمَّ إِنِّي عَبْدُكَ، ابْنُ عَبْدِكَ، ابْنُ أَمَتِكَ، أَصْغَرَ رَأْسِي، وَاضْطَرَّ ذَنْبِي، وَانْقَطَعَ حَبْلِي، فَاقْضِ عَنِّي دَيْنِي، وَاغْنِنِي مِنْ فَقْرِي، وَأَعْطِنِي حَاجَتِي.", source: "رواه أحمد" },
{ text: "اللَّهُمَّ إِنِّي أَعُوذُ بِكَ مِنَ الْهَمِّ وَالْحَزَنِ، وَالْعَجْزِ وَالْكَسَلِ، وَالْبُخْلِ وَالْجُبْنِ، وَضَلَعِ الدَّيْنِ وَغَلَبَةِ الرِّجَالِ.", source: "رواه البخاري" },
{ text: "لَا إِلَهَ إِلَّا اللَّهُ الْعَظِيمُ الْحَلِيمُ، لَا إِلَهَ إِلَّا اللَّهُ رَبُّ الْعَرْشِ الْعَظِيمِ، لَا إِلَهَ إِلَّا اللَّهُ رَبُّ السَّمَاوَاتِ وَرَبُّ الْأَرْضِ وَرَبُّ الْعَرْشِ الْكَرِيمِ.", source: "متفق عليه" },
{ text: "اللَّهُمَّ رَحْمَتَكَ أَرْجُو، فَلَا تَكِلْنِي إِلَى نَفْسِي طَرْفَةَ عَيْنٍ، وَأَصْلِحْ لِي شَأْنِي كُلَّهُ، لَا إِلَهَ إِلَّا أَنْتَ.", source: "رواه أبو داود" }
]},
{ category: "🕊️ أدعية الاستغفار والتوبة", items: [
{ text: "أَسْتَغْفِرُ اللَّهَ الَّذِي لَا إِلَهَ إِلَّا هُوَ الْحَيُّ الْقَيُّومُ وَأَتُوبُ إِلَيْهِ.", source: "رواه أبو داود والترمذي" },
{ text: "اللَّهُمَّ أَنْتَ رَبِّي لَا إِلَهَ إِلَّا أَنْتَ، خَلَقْتَنِي وَأَنَا عَبْدُكَ، وَأَنَا عَلَى عَهْدِكَ وَوَعْدِكَ مَا اسْتَطَعْتُ...", source: "سيد الاستغفار - رواه البخاري" },
{ text: "رَبِّ اغْفِرْ لِي وَتُبْ عَلَيَّ، إِنَّكَ أَنْتَ التَّوَّابُ الرَّحِيمُ.", source: "رواه الترمذي" },
{ text: "اللَّهُمَّ اغْفِرْ لِي ذَنْبِي كُلَّهُ، دِقَّهُ وَجِلَّهُ، وَأَوَّلَهُ وَآخِرَهُ، وَعَلَانِيَتَهُ وَسِرَّهُ.", source: "رواه مسلم" }
]},
{ category: "✨ أدعية مأثورة جامعة", items: [
{ text: "اللَّهُمَّ إِنِّي أَسْأَلُكَ الْهُدَى وَالتُّقَى وَالْعَفَافَ وَالْغِنَى.", source: "رواه مسلم" },
{ text: "اللَّهُمَّ أَصْلِحْ لِي دِينِي الَّذِي هُوَ عِصْمَةُ أَمْرِي، وَأَصْلِحْ لِي دُنْيَايَ الَّتِي فِيهَا مَعَاشِي، وَأَصْلِحْ لِي آخِرَتِي الَّتِي فِيهَا مَعَادِي.", source: "رواه مسلم" },
{ text: "اللَّهُمَّ إِنِّي أَعُوذُ بِكَ مِنْ زَوَالِ نِعْمَتِكَ، وَتَحَوُّلِ عَافِيَتِكَ، وَفُجَاءَةِ نِقْمَتِكَ، وَجَمِيعِ سَخَطِكَ.", source: "رواه مسلم" },
{ text: "يَا حَيُّ يَا قَيُّومُ بِرَحْمَتِكَ أَسْتَغِيثُ، أَصْلِحْ لِي شَأْنِي كُلَّهُ وَلَا تَكِلْنِي إِلَى نَفْسِي.", source: "رواه الترمذي" },
{ text: "لَا إِلَهَ إِلَّا أَنْتَ سُبْحَانَكَ إِنِّي كُنْتُ مِنَ الظَّالِمِينَ.", source: "دعوة ذي النون - رواه الترمذي" }
]}
];
function renderAdhkar() {
const container = document.getElementById('duaContainer');
if (!container) return;
let html = '';
adhkarData.forEach((cat, catIdx) => {
html += `<h3 class="dua-category-title">${cat.category}</h3>`;
cat.items.forEach((item, idx) => {
const id = `dua-${catIdx}-${idx}`;
const formattedText = item.text.replace(/\n/g, '<br>');
html += `
<div class="dua-card">
<div class="dua-text">${formattedText}</div>
<div class="dua-footer">
<span class="dua-source">📚 ${item.source}</span>
<button class="dua-count-btn" id="btn-${id}" onclick="countDua('${id}')">
<span>🔁</span> <span id="count-${id}">0</span>
</button>
</div>
</div>
`;
});
});
container.innerHTML = html;
}
function countDua(id) {
const countEl = document.getElementById(`count-${id}`);
const btnEl = document.getElementById(`btn-${id}`);
if (!countEl) return;
let current = parseInt(countEl.textContent) || 0;
current++;
countEl.textContent = current;
if (navigator.vibrate) navigator.vibrate(20);
if ([3, 7, 10, 33, 100].includes(current)) {
btnEl.classList.add('active');
setTimeout(() => btnEl.classList.remove('active'), 1500);
if (navigator.vibrate) navigator.vibrate([50, 30, 50]);
}
}
function sendQuestion() {
const name = document.getElementById('qaName').value.trim();
const question = document.getElementById('qaQuestion').value.trim();
if(!question) { alert('الرجاء كتابة السؤال أولاً.'); return; }
const msg = `السلام عليكم ورحمة الله وبركاته، شيخنا الفاضل.%0aالاسم: ${name || 'فاعل خير'}%0aالسؤال: ${question}`;
window.open(`https://wa.me/963944856486?text=${msg}`, '_blank');
}
window.onload = () => {
getPrayerTimes();
fetchSurahList();
renderAdhkar();
};
</script>
</body>
</html>