Spaces:
Running
Running
| <html lang="ar" dir="rtl"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>سنن يوم الجمعة</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700&display=swap'); | |
| body { | |
| font-family: 'Tajawal', sans-serif; | |
| } | |
| .sunnah-card { | |
| transition: all 0.3s ease; | |
| } | |
| .sunnah-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); | |
| } | |
| .hadith-text { | |
| line-height: 2; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 text-gray-800"> | |
| <div class="container mx-auto px-4 py-8 max-w-6xl"> | |
| <!-- Header --> | |
| <header class="text-center mb-12"> | |
| <h1 class="text-4xl font-bold text-green-700 mb-4">سنن يوم الجمعة</h1> | |
| <p class="text-xl text-gray-600">الأعمال المستحبة في يوم الجمعة المبارك</p> | |
| <div class="w-24 h-1 bg-green-500 mx-auto mt-4 rounded-full"></div> | |
| </header> | |
| <!-- Main Content --> | |
| <main> | |
| <!-- Sunnah Cards --> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-12"> | |
| <!-- Sunnah 1 --> | |
| <div class="sunnah-card bg-white rounded-xl shadow-md overflow-hidden p-6 border-l-4 border-green-500"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-green-100 p-3 rounded-full mr-4"> | |
| <i class="fas fa-bath text-green-600 text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold">الاغتسال</h3> | |
| </div> | |
| <p class="text-gray-600 mb-4">الاغتسال يوم الجمعة واجب على كل محتلم.</p> | |
| <div class="bg-gray-100 p-4 rounded-lg"> | |
| <p class="hadith-text text-gray-700 font-medium">عن أبي سعيد الخدري رضي الله عنه قال: قال رسول الله صلى الله عليه وسلم: "غسل يوم الجمعة واجب على كل محتلم" (متفق عليه)</p> | |
| </div> | |
| </div> | |
| <!-- Sunnah 2 --> | |
| <div class="sunnah-card bg-white rounded-xl shadow-md overflow-hidden p-6 border-l-4 border-green-500"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-green-100 p-3 rounded-full mr-4"> | |
| <i class="fas fa-tshirt text-green-600 text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold">لبس أحسن الثياب</h3> | |
| </div> | |
| <p class="text-gray-600 mb-4">التجمل ولبس أحسن الثياب يوم الجمعة.</p> | |
| <div class="bg-gray-100 p-4 rounded-lg"> | |
| <p class="hadith-text text-gray-700 font-medium">عن عبد الله بن سلام رضي الله عنه قال: سمعت رسول الله صلى الله عليه وسلم يقول على المنبر يوم الجمعة: "ما على أحدكم لو اشترى ثوبين ليوم الجمعة سوى ثوبي مهنته" (أبو داود)</p> | |
| </div> | |
| </div> | |
| <!-- Sunnah 3 --> | |
| <div class="sunnah-card bg-white rounded-xl shadow-md overflow-hidden p-6 border-l-4 border-green-500"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-green-100 p-3 rounded-full mr-4"> | |
| <i class="fas fa-spray-can text-green-600 text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold">التطيب</h3> | |
| </div> | |
| <p class="text-gray-600 mb-4">استحباب التطيب يوم الجمعة.</p> | |
| <div class="bg-gray-100 p-4 rounded-lg"> | |
| <p class="hadith-text text-gray-700 font-medium">عن أبي سعيد الخدري رضي الله عنه أن النبي صلى الله عليه وسلم قال: "غسل يوم الجمعة على كل محتلم، وسواك، ويمس من الطيب ما قدر عليه" (متفق عليه)</p> | |
| </div> | |
| </div> | |
| <!-- Sunnah 4 --> | |
| <div class="sunnah-card bg-white rounded-xl shadow-md overflow-hidden p-6 border-l-4 border-green-500"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-green-100 p-3 rounded-full mr-4"> | |
| <i class="fas fa-walking text-green-600 text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold">المشي إلى الصلاة بسكينة</h3> | |
| </div> | |
| <p class="text-gray-600 mb-4">المشي إلى صلاة الجمعة بسكينة ووقار.</p> | |
| <div class="bg-gray-100 p-4 rounded-lg"> | |
| <p class="hadith-text text-gray-700 font-medium">عن أبي هريرة رضي الله عنه أن النبي صلى الله عليه وسلم قال: "إذا كان يوم الجمعة وقفت الملائكة على باب المسجد يكتبون الأول فالأول، ومثل المهجر كمثل الذي يهدي بدنة، ثم كالذي يهدي بقرة، ثم كبشا، ثم دجاجة، ثم بيضة، فإذا خرج الإمام طووا صحفهم ويستمعون الذكر" (متفق عليه)</p> | |
| </div> | |
| </div> | |
| <!-- Sunnah 5 --> | |
| <div class="sunnah-card bg-white rounded-xl shadow-md overflow-hidden p-6 border-l-4 border-green-500"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-green-100 p-3 rounded-full mr-4"> | |
| <i class="fas fa-hands-praying text-green-600 text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold">التبكير إلى المسجد</h3> | |
| </div> | |
| <p class="text-gray-600 mb-4">التبكير إلى صلاة الجمعة والإكثار من الصلاة والذكر.</p> | |
| <div class="bg-gray-100 p-4 rounded-lg"> | |
| <p class="hadith-text text-gray-700 font-medium">عن أبي هريرة رضي الله عنه أن رسول الله صلى الله عليه وسلم قال: "من اغتسل يوم الجمعة غسل الجنابة ثم راح فكأنما قرب بدنة، ومن راح في الساعة الثانية فكأنما قرب بقرة، ومن راح في الساعة الثالثة فكأنما قرب كبشا أقرن، ومن راح في الساعة الرابعة فكأنما قرب دجاجة، ومن راح في الساعة الخامسة فكأنما قرب بيضة، فإذا خرج الإمام حضرت الملائكة يستمعون الذكر" (متفق عليه)</p> | |
| </div> | |
| </div> | |
| <!-- Sunnah 6 --> | |
| <div class="sunnah-card bg-white rounded-xl shadow-md overflow-hidden p-6 border-l-4 border-green-500"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-green-100 p-3 rounded-full mr-4"> | |
| <i class="fas fa-book-quran text-green-600 text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold">قراءة سورة الكهف</h3> | |
| </div> | |
| <p class="text-gray-600 mb-4">قراءة سورة الكهف يوم الجمعة.</p> | |
| <div class="bg-gray-100 p-4 rounded-lg"> | |
| <p class="hadith-text text-gray-700 font-medium">عن أبي سعيد الخدري رضي الله عنه أن النبي صلى الله عليه وسلم قال: "من قرأ سورة الكهف يوم الجمعة أضاء له من النور ما بين الجمعتين" (الحاكم والبيهقي)</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Additional Info Section --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden mb-12"> | |
| <div class="p-6 md:p-8"> | |
| <h2 class="text-2xl font-bold text-green-700 mb-6">أوقات مستحبة يوم الجمعة</h2> | |
| <div class="space-y-6"> | |
| <div class="flex items-start"> | |
| <div class="bg-green-100 p-2 rounded-full mr-4 mt-1"> | |
| <i class="fas fa-clock text-green-600"></i> | |
| </div> | |
| <div> | |
| <h3 class="text-xl font-semibold mb-2">ساعة الإجابة</h3> | |
| <p class="text-gray-600 mb-2">يوم الجمعة ساعة لا يوافقها عبد مسلم وهو يصلي يسأل الله شيئا إلا أعطاه إياه.</p> | |
| <div class="bg-gray-100 p-4 rounded-lg"> | |
| <p class="hadith-text text-gray-700 font-medium">عن أبي هريرة رضي الله عنه أن رسول الله صلى الله عليه وسلم ذكر يوم الجمعة فقال: "فيه ساعة لا يوافقها عبد مسلم وهو قائم يصلي يسأل الله تعالى شيئا إلا أعطاه إياه" (متفق عليه)</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-green-100 p-2 rounded-full mr-4 mt-1"> | |
| <i class="fas fa-pray text-green-600"></i> | |
| </div> | |
| <div> | |
| <h3 class="text-xl font-semibold mb-2">الصلاة على النبي ﷺ</h3> | |
| <p class="text-gray-600 mb-2">الإكثار من الصلاة على النبي صلى الله عليه وسلم يوم الجمعة.</p> | |
| <div class="bg-gray-100 p-4 rounded-lg"> | |
| <p class="hadith-text text-gray-700 font-medium">عن أوس بن أوس الثقفي رضي الله عنه قال: قال رسول الله صلى الله عليه وسلم: "إن من أفضل أيامكم يوم الجمعة، فأكثروا علي من الصلاة فيه، فإن صلاتكم معروضة علي" (أبو داود)</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Last Section --> | |
| <div class="text-center bg-green-50 rounded-xl p-8"> | |
| <h2 class="text-2xl font-bold text-green-700 mb-4">فضل يوم الجمعة</h2> | |
| <p class="text-gray-600 mb-6">يوم الجمعة هو سيد الأيام وأعظمها عند الله تعالى، فيه خلق آدم وفيه تقوم الساعة.</p> | |
| <div class="bg-white p-6 rounded-lg shadow-inner max-w-2xl mx-auto"> | |
| <p class="hadith-text text-gray-700 font-medium">عن أبي هريرة رضي الله عنه أن رسول الله صلى الله عليه وسلم قال: "خير يوم طلعت عليه الشمس يوم الجمعة، فيه خلق آدم، وفيه أدخل الجنة، وفيه أخرج منها، ولا تقوم الساعة إلا في يوم الجمعة" (مسلم)</p> | |
| </div> | |
| </div> | |
| </main> | |
| <!-- Footer --> | |
| <footer class="mt-16 text-center text-gray-500 text-sm"> | |
| <div class="w-24 h-1 bg-green-500 mx-auto mb-4 rounded-full"></div> | |
| <p>© 2023 سنن يوم الجمعة - جميع الحقوق محفوظة</p> | |
| <p class="mt-2">"وذكر فإن الذكرى تنفع المؤمنين"</p> | |
| </footer> | |
| </div> | |
| <script> | |
| // Simple animation for cards when they come into view | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const cards = document.querySelectorAll('.sunnah-card'); | |
| const observer = new IntersectionObserver((entries) => { | |
| entries.forEach(entry => { | |
| if (entry.isIntersecting) { | |
| entry.target.style.opacity = 1; | |
| entry.target.style.transform = 'translateY(0)'; | |
| } | |
| }); | |
| }, { threshold: 0.1 }); | |
| cards.forEach(card => { | |
| card.style.opacity = 0; | |
| card.style.transform = 'translateY(20px)'; | |
| card.style.transition = 'opacity 0.5s ease, transform 0.5s ease'; | |
| observer.observe(card); | |
| }); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Rayan545454/s3" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |