رياض الفرقان

قالب تطبيق المصحف الإلكتروني الشامل (رواية ورش بالملون)

ملف متكامل ومبسط يحتوي على الأكواد جاهزة للنسخ واللصق المباشر لتسهيل بناء تطبيقك الخاص.

💡 نصيحة قبل البدء: تم تصميم هذه الأكواد لتوضع مباشرة بدون تعقيد. اتبع الخطوتين التاليتين لتشغيل المصحف كـ تطبيق حقيقي بالكامل.

الخطوة 1: كود المظهر العام (يتم تركيبه مرة واحدة في القالب)

توجه إلى بلوجر < سهم التخصيص < تعديل HTML، وابحث عن الوسم </head> وضَع فوقه مباشرة الكود التالي ثم اضغط حفظ:

<!-- مكتبات التصفح السريع واللمس للهواتف -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"/>

<style>
  /* نمط التطبيق الكامل المخصص للمصحف */
  body { background-color: #f4f1ea !important; transition: background 0.3s ease; }
  .swiper { width: 100%; max-width: 600px; margin: 20px auto 80px auto; }
  .swiper-slide { text-align: center; display: flex; justify-content: center; align-items: center; }
  .swiper-slide img { width: 100%; height: auto; box-shadow: 0 4px 20px rgba(0,0,0,0.15); border-radius: 8px; }
  
  /* شريط التحكم السفلي الثابت الذكي */
  .quran-controls { display: flex; justify-content: space-around; background: #2c3e50; padding: 12px 0; position: fixed; bottom: 0; left: 0; width: 100%; z-index: 10000; box-shadow: 0 -3px 10px rgba(0,0,0,0.2); }
  .quran-btn { color: #fff; font-size: 16px; cursor: pointer; text-decoration: none; display: flex; flex-direction: column; align-items: center; width: 25%; }
  .quran-btn span { font-size: 11px; margin-top: 5px; font-family: inherit; }
  
  /* إخفاء الزوائد المزعجة للحصول على مظهر تطبيق نظيف */
  .post-header-line-1, .post-footer, .comments, #sidebar-wrapper, .main-header { display: none !important; }
  #main-wrapper { width: 100% !important; float: none !important; margin: 0 auto !important; }
</style>

الخطوة 2: كود نشر السور (يُنسخ داخل كل مشاركة جديدة)

عند كتابة سورة جديدة، حوّل المحرر إلى عرض HTML وضَع الكود التالي (مع استبدال روابط الصور بروابط صفحاتك):

<!-- حاوية صفحات المصحف الملون -->
<div class="swiper mySwiper" dir="rtl">
  <div class="swiper-wrapper">
    
    <!-- الصفحة 1 -->
    <div class="swiper-slide">
      <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_SAMPLE1/s1600/page1.jpg" alt="الصفحة الأولى" />
    </div>
    
    <!-- الصفحة 2 -->
    <div class="swiper-slide">
      <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_SAMPLE2/s1600/page2.jpg" alt="الصفحة الثانية" />
    </div>
    
    <!-- الصفحة 3 -->
    <div class="swiper-slide">
      <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_SAMPLE3/s1600/page3.jpg" alt="الصفحة الثالثة" />
    </div>

    <!-- يمكنك تكرار وسم السلايدر أعلاه بعدد صفحات السورة -->

  </div>
  <div class="swiper-pagination"></div>
</div>

<!-- شريط التحكم السفلي المدمج للتصفح والميزات الذكية -->
<div class="quran-controls">
  <div class="quran-btn" id="saveBookmark" onclick="saveCurrentPage()">
    <i class="fa-regular fa-bookmark"></i><span>حفظ العلامة</span>
  </div>
  <a href="/p/index.html" class="quran-btn">
    <i class="fa fa-list"></i><span>الفهرس</span>
  </a>
  <a href="/p/rules.html" class="quran-btn">
    <i class="fa fa-paint-brush"></i><span>الأحكام الملونة</span>
  </a>
  <div class="quran-btn" onclick="toggleDarkMode()">
    <i class="fa fa-moon"></i><span>الوضع الليلي</span>
  </div>
</div>

<!-- مشغل جافا سكريبت الذكي -->
<script>
  var swiper = new Swiper('.mySwiper', {
    loop: false,
    pagination: { el: '.swiper-pagination', type: 'progressbar' },
  });

  function saveCurrentPage() {
    localStorage.setItem('lastReadPage', window.location.href);
    alert('تم حفظ موضع القراءة الحالي بنجاح!');
    document.getElementById('saveBookmark').innerHTML = "<i class='fa-solid fa-bookmark' style='color:#f1c40f'></i><span>تم الحفظ</span>";
  }

  function toggleDarkMode() {
    var body = document.body;
    if (body.style.backgroundColor === 'rgb(30, 30, 30)') {
      body.style.backgroundColor = '#f4f1ea';
      document.querySelectorAll('.swiper-slide').forEach(el => el.style.backgroundColor = '#f4f1ea');
    } else {
      body.style.backgroundColor = '#1e1e1e';
      document.querySelectorAll('.swiper-slide').forEach(el => el.style.backgroundColor = '#1e1e1e');
    }
  }
</script>

الخطوة 3: كود الفهرس الذكي (يُوضع في صفحة ثابتة "Page")

قم بإنشاء صفحة ثابتة جديدة باسم "الفهرس" وضع بها هذا الجدول الأنيق لربط السور وتفعيل زر العودة لآخر علامة توقف:

<div style="text-align: center; margin-bottom: 20px;">
  <button id="resumeBtn" onclick="resumeReading()" style="background:#e67e22; color:white; border:none; padding:12px 24px; font-size:16px; border-radius:30px; cursor:pointer; display:none; font-weight:bold; box-shadow:0 4px 10px rgba(0,0,0,0.15);">
    <i class="fa-solid fa-play"></i> متابعة القراءة من آخر علامة
  </button>
</div>

<table dir="rtl">
  <thead>
    <tr>
      <th>رقم السورة</th>
      <th>اسم السورة</th>
      <th>النوع</th>
      <th>رابط السورة</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>٠٠١</td>
      <td style="font-weight:bold; color:#16a085;">الفاتحة</td>
      <td><span class="badge" style="background:#2ecc71;">مكية</span></td>
      <td><a href="ضع_رابط_مشاركة_سورة_الفاتحة_هنا" style="color:#2980b9; text-decoration:none; font-weight:bold;">اقرأ الآن &larr;</a></td>
    </tr>
    <tr>
      <td>٠٠٢</td>
      <td style="font-weight:bold; color:#16a085;">البقرة</td>
      <td><span class="badge" style="background:#e74c3c;">مدنية</span></td>
      <td><a href="ضع_رابط_مشاركة_سورة_البقرة_هنا" style="color:#2980b9; text-decoration:none; font-weight:bold;">اقرأ الآن &larr;</a></td>
    </tr>
    <!-- يمكنك إضافة بقية السور هنا بنفس الطريقة -->
  </tbody>
</table>

<script>
  // فحص وجود علامة حفظ مسبقة لإظهار زر المتابعة
  if(localStorage.getItem('lastReadPage')) {
    document.getElementById('resumeBtn').style.display = 'inline-block';
  }
  function resumeReading() {
    var url = localStorage.getItem('lastReadPage');
    if(url) { window.location.href = url; }
  }
</script>

الخميس، 18 يوليو 2013

بسم الله الرحمن الرحيم

السلام عليكم ورحمة الله وبركاته

مع قصة من أروع قصص الهداية على الإطلاق
قصة كاد صاحبها أن ينهار وكاد صاحبها أن يعيش فى الدنيا
وهو موقن أنه ميت لا محالة
لأنه كان سيعيش منزعلا عن الناس بعيدا عنهم
بعيدا عن حتى أولاده
كان سيعزل فى قفص حديدى
لأنه كالمجذوب يخافون من العدوى ويخافون من تعامله مع الناس
قد كان بينه وبين الإصابة بطاعون العصر وهو
الإيــــــــــــدز
خطوات قليلة
ورغم ذلك أنجده الله سبحانه وتعالى وأنقذه وأغاثه
لأن الله عز وجل يحب عباده
ورحم الله مالك بن دينار إذ قال
أيها الناس إن الله يحبكم حبا آه لو تعلمون كم يحبكم الله عز وجل
لقد قال الله تبارك وتعالى
يُحِبُّهُمْ وَيُحِبُّونَهُ

المائدة من آية 54

وليس العجب من قوله يحبونه لأنه ملك قدير والعبد عبد فقير
ولكن العجب من قوله يحبهم
فماذا قدم العبد إنه عبد والعبد وما ملك ملك لسيده الذى ملك

لمعرفة قصة هذا الرجل التائب
كى نعتبر قبل أن يأخذنا الله بذنوبه
تعالوا معا نستمع لهذا الدرس القصير
قصة توبة مؤثرة
مع فضيلة الشيخ // حامد أحمد الطاهر

للاستماع ~~والمشاهدة~~ والتحميل
الرابط

[soundcloud url=" params="" width=" 100%" height="166" iframe="true" /]

من إنتاج فريق ملفات الرئيسية بموقع الطريق إلى الله

لا تنسى ثلاث

ΨΏΨ…الدال على الخير …ΨΏΨ

وذكر الله

سبحان الله وبحمده عدد خلقه ورضا نفسه وزنة عرشه ومداد كلماته

والصلاة على الحبيب

اللهم صل وسلم وزد وبارك على سيدنا محمد عدد ما فى علم الله صلاة دائمة بدوام ملك الله

فى حفظ الله ورعايت

التسميات: صوتيات و مرئيات إسلامية

0 تعليقات:

إرسال تعليق

الاشتراك في تعليقات الرسالة [Atom]

<< الصفحة الرئيسية