islamic
مؤمن الصحصاح
تطبيق إسلامي شامل
الإصدار النهائي
عنوان المشروع البرمجي:
تطبيق إسلامي الشامل
فكرة المشروع
تطبيق إسلامي متكامل يقدم مجموعة من الخدمات الدينية في مكان واحد: مواقيت الصلاة المحدثة تلقائياً، مسبحة إلكترونية، مسابقة ثقافية تضم 44 سؤالاً متنوعاً، إذاعة مباشرة للقرآن الكريم، ونصائح روحانية متغيرة حسب الوقت (الفجر، النهار، الليل). تم تطوير التطبيق باستخدام HTML، CSS، وJavaScript مع الاعتماد على API خارجي لمواقيت الصلاة.
SOURCE CODE
<!-- تطبيق إسلامي الشامل - إعداد مؤمن الصحصاح -->
<!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 href="https://fonts.googleapis.com/css2?family=Amiri:wght@700&family=Tajawal:wght@400;700&display=swap" rel="stylesheet">
<style>
:root {
--gold: #D4AF37;
--dark-green: #0B3526;
--glass: rgba(255, 255, 255, 0.95);
--shadow: 0 10px 30px rgba(0,0,0,0.1);
}
body {
font-family: 'Tajawal', sans-serif;
background: #f4f7f6 url('https://www.transparenttextures.com/patterns/arabesque.png');
margin: 0; padding-bottom: 140px; color: #333;
}
header {
background: linear-gradient(135deg, var(--dark-green), #051a13);
color: white; padding: 40px 20px; text-align: center;
border-bottom: 5px solid var(--gold); border-radius: 0 0 40px 40px;
}
header h1 { font-family: 'Amiri', serif; font-size: 3.5rem; margin: 0; color: var(--gold); }
.container { max-width: 800px; margin: -30px auto 0; padding: 0 15px; }
.card {
background: var(--glass); border-radius: 25px; padding: 25px;
margin-bottom: 25px; box-shadow: var(--shadow); border: 1px solid #eee;
}
.prayer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 10px; text-align: center; }
.prayer-item { padding: 10px; background: #f9f9f9; border-radius: 15px; border-bottom: 3px solid var(--gold); }
.prayer-item.active { background: var(--dark-green); color: white; }
.tasbeeh-area { text-align: center; }
#counter { font-size: 4rem; font-weight: bold; color: var(--dark-green); margin: 10px 0; }
.main-btn {
background: var(--dark-green); color: white; border: none; padding: 15px 40px;
border-radius: 50px; font-size: 1.2rem; cursor: pointer; transition: 0.3s;
}
.main-btn:active { transform: scale(0.9); background: var(--gold); }
.advice-card {
border-right: 5px solid var(--gold);
background: #fff;
position: relative;
overflow: hidden;
}
.advice-card::before {
content: "💡";
position: absolute;
left: 10px;
top: 10px;
font-size: 1.5rem;
opacity: 0.2;
}
.advice-text {
font-family: 'Amiri', serif;
font-size: 1.3rem;
color: #2c3e50;
line-height: 1.8;
margin-bottom: 10px;
}
.advice-source {
display: block;
color: var(--dark-green);
font-weight: bold;
font-size: 0.9rem;
border-top: 1px dashed #ddd;
padding-top: 10px;
}
.option-btn {
display: block; width: 100%; padding: 15px; margin: 10px 0;
border: 2px solid #eee; border-radius: 12px; background: white;
cursor: pointer; font-family: inherit; font-size: 1rem; text-align: right;
}
.option-btn.correct { background: #d4edda !important; border-color: #28a745; }
.option-btn.wrong { background: #f8d7da !important; border-color: #dc3545; }
.error-log { background: #fff5f5; padding: 15px; border-radius: 15px; margin-top: 15px; text-align: right; }
.error-item { border-bottom: 1px solid #fed7d7; padding: 8px 0; font-size: 0.9rem; }
audio { width: 100%; filter: sepia(20%) hue-rotate(90deg); margin-top: 10px; }
footer {
position: fixed; bottom: 0; width: 100%; background: white;
padding: 15px 0; display: flex; justify-content: space-around;
border-top: 3px solid var(--gold); z-index: 1000;
}
</style>
</head>
<body>
<header>
<h1>إسلامي</h1>
<p>بإشراف م. محمد شاهين | إعداد مؤمن الصحصاح</p>
</header>
<div class="container">
<div class="card">
<h3 style="margin-top:0">🕌 مواقيت الصلاة (القاهرة)</h3>
<div id="prayer-list" class="prayer-grid">جاري التحميل...</div>
</div>
<div class="card tasbeeh-area">
<h3 style="margin-top:0">📿 المسبحة الإلكترونية</h3>
<div id="counter">0</div>
<button class="main-btn" onclick="incrementCounter()">تسبيح</button>
<button onclick="resetCounter()" style="display:block; margin: 10px auto; background:none; border:none; color:#999; cursor:pointer; text-decoration:underline;">تصفير</button>
</div>
<div class="card" id="quiz-card">
<h3 style="margin-top:0">🧠 تحدي الـ 5 أسئلة</h3>
<div id="quiz-body">
<p>اختبر معلوماتك من قاعدة بيانات مؤمن الصحصاح (44 سؤال).</p>
<button class="main-btn" onclick="startQuiz()">ابدأ المسابقة</button>
</div>
</div>
<div class="card">
<h3 style="margin-top:0">📖 إذاعة القرآن الكريم</h3>
<audio controls>
<source src="https://qurango.net/radio/tarateel" type="audio/mpeg">
</audio>
<p style="font-size: 0.8rem; color: #666; margin-top: 5px;">بث مباشر - تراتيل قرآنية</p>
</div>
<div class="card advice-card">
<h3 style="margin-top:0; color: var(--dark-green); font-size: 1.1rem;">✨ نصيحة الوقت</h3>
<div id="advice-display" class="advice-text">جاري اختيار حكمة تناسب وقتك...</div>
<div id="source-display" class="advice-source"></div>
</div>
</div>
<footer>
<div style="text-align:center"><span>المبرمج</span><br><strong>مؤمن الصحصاح</strong></div>
<div style="text-align:center"><span>المشرف العام</span><br><strong>م. محمد شاهين</strong></div>
</footer>
<script>
const spiritualDatabase = {
fajr: [
{ t: "من أعظم الأشياء ضررًا على العبد بطالته وفراغه، فإن النفس لا تقعد فارغة، بل إن لم يشغلها بما ينفعها شغلته بما يضره ولا بد.", s: "طريق الهجرتين - ابن القيم صـ ٢٧٥" },
{ t: "إن الدنيا أدبرت وإن الآخرت أقبلت فكونوا من أبناء الآخرة ولا تكونوا من أبناء الدنيا.", s: "علي بن أبي طالب رضي الله عنه" },
{ t: "إذا أحببت أن يدوم الله لك على ما تحب فدم له على ما يحب.", s: "الإمام أحمد بن حنبل" }
],
day: [
{ t: "كل ما أشغلك عن الله فهو عليك مشؤوم.", s: "أبو سليمان الداراني" },
{ t: "من نافسك في دينك فنافسه، ومن نافسك في دنياك فألقها في نحره.", s: "الحسن البصري" },
{ t: "لا تنزلن حاجتك من أغلق دونك أبوابه وجعل عليها حجابه؛ ولكن انزلها بمن بابه مفتوح لك إلى يوم القيامة.", s: "حكمة من كلام العلماء" },
{ t: "كلما كان العبد حسن الظن بالله حسن الرجاء له صادق التوكل عليه: فإن الله لا يخيب أمله فيه ألبتة.", s: "مدارج السالكين - ابن القيم" }
],
night: [
{ t: "أفضلُ الأعمال خشية الله في السر والعلانية، فإنَّ الهوىٰ يدعو في الخلوة إلى المعاصي.", s: "فتح الباري - ابن رجب الحنبلي" },
{ t: "إذا لم تقدر على قيام الليل وصيام النهار، فاعلم أنك محروم كبلتك خطيئتك.", s: "الفضيل بن عياض" },
{ t: "بقدر ما يصغر الذنب عندك يعظم عند الله، وبقدر ما يعظم عندك يصغر عند الله.", s: "الفضيل بن عياض" },
{ t: "فساد القلوب متولد من ستة أشياء، أولها: يذنبون برجاء التوبة، ويتعلمون العلم ولا يعملون به.", s: "الحسن البصري" },
{ t: "أشد الأعمال ثلاثة: الجود من قلة، والورع في خلوة، وكلمة الحق عند من يرجى ويخاف.", s: "الإمام الشافعي" }
]
};
function loadAdvice() {
const hour = new Date().getHours();
let category = "day";
if (hour >= 4 && hour < 10) category = "fajr";
else if (hour >= 17 || hour < 4) category = "night";
const list = spiritualDatabase[category];
const random = list[Math.floor(Math.random() * list.length)];
document.getElementById('advice-display').innerText = random.t;
document.getElementById('source-display').innerText = "المصدر: " + random.s;
}
const allQuestions = [
{ q: "ما أول ما نزل من التوراة؟", c: "بسم الله الرحمن الرحيم", w: ["الحمد لله", "قل هو الله أحد", "اقرأ باسم ربك"] },
{ q: "ما أول هدية أهديت للرسول ﷺ بالمدينة؟", c: "قصعة خبزاً وسمناً ولبناً", w: ["ثوب حرير", "ناقة", "سيف"] },
{ q: "من أول من قُتل من المشركين في بدر؟", c: "الأسود بن عبد الأسد المخزومي", w: ["أبو جهل", "عتبة", "أمية"] },
{ q: "من هي أول امرأة بكر هاجرت؟", c: "أم كلثوم بنت عقبة بن أبي معيط", w: ["عائشة", "فاطمة", "أسماء"] },
{ q: "من أول من صام؟", c: "آدم عليه السلام", w: ["نوح", "إبراهيم", "إدريس"] }
];
let count = localStorage.getItem('islamicCount') || 0;
document.getElementById('counter').innerText = count;
function incrementCounter() {
count++;
document.getElementById('counter').innerText = count;
localStorage.setItem('islamicCount', count);
if(navigator.vibrate) navigator.vibrate(40);
}
function resetCounter() {
if(confirm("هل تريد التصفير؟")) {
count = 0; document.getElementById('counter').innerText = 0;
localStorage.setItem('islamicCount', 0);
}
}
async function getPrayers() {
try {
const res = await fetch('https://api.aladhan.com/v1/timingsByCity?city=Cairo&country=Egypt&method=5');
const data = await res.json();
const t = data.data.timings;
const labels = {"Fajr":"الفجر", "Dhuhr":"الظهر", "Asr":"العصر", "Maghrib":"المغرب", "Isha":"العشاء"};
let html = "";
for(let key in labels) {
html += `<div class="prayer-item"><div>${labels[key]}</div><strong>${t[key]}</strong></div>`;
}
document.getElementById('prayer-list').innerHTML = html;
} catch(e) { document.getElementById('prayer-list').innerText = "خطأ في الاتصال"; }
}
let quizQs = []; let currentIdx = 0; let score = 0; let errors = [];
function startQuiz() {
quizQs = [...allQuestions].sort(() => 0.5 - Math.random()).slice(0, 5);
currentIdx = 0; score = 0; errors = [];
renderQuestion();
}
function renderQuestion() {
const body = document.getElementById('quiz-body');
if(currentIdx >= 5) { showResult(); return; }
const q = quizQs[currentIdx];
const opts = [q.c, ...q.w].sort(() => 0.5 - Math.random());
let html = `<h4>س ${currentIdx+1}: ${q.q}</h4>`;
opts.forEach(o => html += `<button class="option-btn" onclick="checkAnswer('${o}','${q.c}',this)">${o}</button>`);
body.innerHTML = html;
}
function checkAnswer(sel, cor, btn) {
document.querySelectorAll('.option-btn').forEach(b => b.style.pointerEvents = 'none');
if(sel === cor) { btn.classList.add('correct'); score++; }
else { btn.classList.add('wrong'); errors.push({q: quizQs[currentIdx].q, c: cor});
document.querySelectorAll('.option-btn').forEach(b => { if(b.innerText === cor) b.classList.add('correct'); }); }
setTimeout(() => { currentIdx++; renderQuestion(); }, 1500);
}
function showResult() {
let html = `<h4>النتيجة: ${score} من 5</h4>`;
if(errors.length > 0) {
html += `<div class="error-log"><strong>الأخطاء المرتكبة:</strong>`;
errors.forEach(e => html += `<div class="error-item">❓ ${e.q}<br><span style="color:green">✔ الصح: ${e.c}</span></div>`);
html += `</div>`;
} else { html += `<p style="color:green; font-weight:bold;">ما شاء الله! درجة كاملة.</p>`; }
html += `<button class="main-btn" style="margin-top:15px" onclick="startQuiz()">إعادة المحاولة</button>`;
document.getElementById('quiz-body').innerHTML = html;
}
getPrayers();
loadAdvice();
</script>
</body>
</html>
نتيجة التنفيذ
اضغط على "تشغيل المشروع" لرؤية النتيجة
تطبيق إسلامي شامل - مواقيت صلاة، مسبحة، مسابقة، إذاعة قرآن
تم التنفيذ والمراجعة تحت إشراف معلم أول المادة:
المهندس/ محمد محمود شاهين
مدرسة الشهيد أحمد مالك الثانوية
إدارة قلين التعليمية