.سكرب حساب عدد الكلمات و الحروف

<!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://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css">

    <style>
        /* CSS مخصص لتوسيط الحاوية وتنسيقات إضافية */
        body {
            background-color: #f8f9fa; /* لون خلفية خفيف */
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh; /* تأكد من أن الصفحة تملأ كامل ارتفاع الشاشة */
            margin: 0;
        }
        .custom-container {
            background-color: #ffffff;
            padding: 40px;
            border-radius: 12px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            max-width: 600px; /* تحديد عرض أقصى للحاوية */
            width: 90%; /* تجاوب أفضل */
        }
        .icon-group {
            display: flex;
            justify-content: space-around;
            margin-bottom: 25px;
        }
        .icon-group a {
            font-size: 1.8rem;
            color: #ffb703; /* لون أيقونات Bootstrap الأزرق */
            transition: color 0.3s;
        }
        .icon-group a:hover {
            color: #fb8500;
        }
        .form-label {
            font-weight: bold;
        }

     .container {
            max-width: 600px; /* تحديد عرض النموذج */
            background-color: #ffffff;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }
        h2 {
            color: #ffb703; /* اللون الأزرق الأساسي */
            border-bottom: 2px solid #0d6efd;
            padding-bottom: 10px;
            margin-top: 20px;
        }
        /* تنسيق أزرار الراديو المخصص */
        .form-check {
            padding: 10px;
            margin-bottom: 8px;
            border-radius: 5px;
            transition: background-color 0.2s;
        }
        .form-check:hover {
            background-color: #f1f1f1;
        }

        /* تنسيقات الألوان لأزرار الراديو */
        .option-green {
            border-right: 5px solid #198754; /* أخضر */
        }
        .option-blue {
            border-right: 5px solid #0d6efd; /* أزرق */
        }
        .option-yellow {
            border-right: 5px solid #ffc107; /* أصفر */
        }
        .option-red {
            border-right: 5px solid #dc3545; /* أحمر */
        }

        /* تغيير لون زر الإرسال */
        .btn-submit {
            background-color: #ffb703; /* استخدام الأخضر لزر الإجراء */
            border-color: #ffb703;
        }
        .btn-submit:hover {
            background-color: #fb8500;
            border-color: #fb8500;
        }

        /* تحسين شكل الـ textarea */
        textarea.form-control {
            resize: vertical;
        }

      /* CSS مخصص لتثبيت Modal على اليمين وإزالة حواف الظل */
   .offcanvas-modal .modal-content {
        height: 50px; /* يبقى الارتفاع كامل الشاشة */
        width: 300px; /* **تعديل: تم تقليل العرض من 350px إلى 300px** */
        border-radius: 0;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); /* إضافة ظل بسيط للجمالية */
        margin: 0;
    }

    .offcanvas-modal.modal-dialog {
        /* إزالة هامش التمركز الافتراضي لـ Modal */
        margin: 0;

        /* وضع الـ Modal على اليمين */
        position: fixed;
        top: 0;
        right: 0;
        transform: translate(100%, 0); /* إخفاءها مبدئيًا خارج الشاشة */
        transition: transform .3s ease-in-out;
    }

    /* تأثير الفتح: عند إضافة فئة .show بواسطة JavaScript */
    .modal.show .offcanvas-modal.modal-dialog {
        transform: none; /* إعادتها إلى موضعها الطبيعي (اليمين) */
    }

    .modal {
        /* إزالة الخلفية المعتمة تلقائيًا */
        --bs-modal-backdrop-opacity: 0;
    }

            body {
            background-color: #ffffff; /* خلفية بيضاء */
            color: #333333; /* نص داكن */
            font-family: Arial, sans-serif;
            transition: background-color 0.3s, color 0.3s; /* انتقال سلس */
            padding: 20px;
        }

        .container {
            border: 1px solid #ccc;
            padding: 20px;
            border-radius: 8px;
            max-width: 600px;
            margin: 20px auto;
        }

        button {
            background-color: #007bff;
            color: white;
            border: none;
            padding: 10px 20px;
            cursor: pointer;
            border-radius: 5px;
        }

        /* ==================================== */
        /* 2. تنسيقات وضع الليل (Dark Mode) */
        /* ==================================== */
        .dark-mode {
            background-color: #121212; /* خلفية داكنة جداً */
            color: #e0e0e0; /* نص فاتح جداً */
        }

        .dark-mode .container {
            background-color: #1f1f1f; /* خلفية أغمق للحاوية */
            border: 1px solid #444444;
        }

        .dark-mode button {
            background-color: #4a4a4a;
            color: #f0f0f0;
            border-radius: 5px;
            border-color: #FFFF;
        }

          h1 {

            color: #4a4a4a;

             }


      .form-check-label {

      color: #4a4a4a;

      }

  </style>
</head>
<body>

<div class="custom-container">

<div class="d-flex justify-content-end mb-4 icon-group">

  <a id="modeToggle" title="الوظع المظلم" class="me-3 fs-3">
        <i class="bi bi-moon" id="qamar"></i>
    </a>

    <a href="https://rmyen.pages.dev/الإتصال-بي" target="_blank" title="الإتصال بي" class="me-3 fs-3">
        <i class="bi bi-telephone-fill"></i>
    </a>

    <a href="https://rmyen.pages.dev" target="_blank" title="معلومات عني" class="me-3 fs-3">
        <i class="bi bi-info-circle-fill"></i>
    </a>

</div>


  <h1 class="text-center">حساب عدد الكلمات والحروف بالنص</h1>


        <form class="mt-5" id="dataForm">
            <h2>إدخال النص 📝</h2>
            <div class="mb-3 mt-3">

                <textarea class="form-control" id="nass" name="userParagraph" rows="5" placeholder="كتابة النص هنا"></textarea>
            </div>

            <hr>

            <h2> نوع الحساب للمحتوى 🏷️</h2>

            <div class="form-check option-yellow mt-3">
                <input class="form-check-input" type="radio" id="idKalimet" name="contentType" value="kalimet" required>
                <label class="form-check-label" for="option1">كلمات</label>
            </div>


            <div class="form-check option-green">
                <input class="form-check-input" type="radio" id="idHaref" name="contentType" value="haref">
                <label class="form-check-label" for="option3">حروف</label>
            </div>


          <button type="submit" class="btn btn-lg btn-submit w-100 mt-3">حساب</button>
        </form>


  <div class="modal fade" id="ijbatonModal" tabindex="-1" aria-labelledby="modalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-end offcanvas-modal">
        <div class="modal-content">
            <div class="modal-header bg-success text-white">
                <h5 class="modal-title" id="modalLabel">نتيجة الحساب</h5>
                <button type="button" class="btn-close btn-close-white" aria-label="Close" onclick="closeModal()"></button>
            </div>

            <div class="modal-body">
                <p id="ijabatonMohtawa" class="lead text-dark"></p>
            </div>
        </div>
    </div>
</div>


  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>

  <script>
    // 1. الحصول على عنصر النموذج باستخدام مُعرِّفه
    const form = document.getElementById('dataForm');

    // 2. إضافة مستمع للحدث (Event Listener) على حدث الإرسال (submit)
    form.addEventListener('submit', function(event) {

        // منع الإرسال الافتراضي للنموذج (الذي يؤدي إلى تحديث الصفحة)
        event.preventDefault();

        // استدعاء الدالة المسؤولة عن جمع البيانات ومعالجتها
        collectFormData();
    });

    /**
     * دالة لجمع البيانات من حقول الإدخال في النموذج
     */
    function collectFormData() {

        // 3. جمع قيم الحقول باستخدام مُعرفاتها (IDs)
        const data = {
            kalimet: document.getElementById('idKalimet').checked,
            haref: document.getElementById('idHaref').checked,
        }

        const nass = document.getElementById('nass').value;

        if (data.kalimet) {

        nawaa = "kalimet";

        } else {

        nawaa = "haref";

        }


        hysabAlNass(nass, nawaa)

        }

    function hysabAlNass(nass, nawaa) {
    // 1. التحقق من النص
    if (!nass || typeof nass !== 'string') {

        ijabaton = "ليس هنالك نص لحسابه.";
        ondhorIjabatonModal(ijabaton);
        return 0;
    }

    // 2. معالجة النص حسب الوضع المطلوب
    if (nawaa === 'kalimet') {
        // إزالة المسافات الزائدة في البداية والنهاية
        const hysabNass = nass.trim();

        // إذا كان النص فارغًا بعد الإزالة، فعدد الكلمات صفر
      if (hysabNass) {

        // استخدام التعبير النمطي (RegEx) لتقسيم النص عند وجود مسافة واحدة أو أكثر (بما في ذلك فواصل الأسطر)
        // ثم حساب طول المصفوفة الناتجة
        const kalimetJadwal = hysabNass.split(/\s+/);
        ijabaton = "النص يحتوي عن "+kalimetJadwal.length+" من الكلمات.";
        ondhorIjabatonModal(ijabaton);
        return kalimetJadwal.length;


      }

      if (hysabNass === '') {
            ijabaton = ".النص يحتوي عن 0 كلمات";
            ondhorIjabatonModal(ijabaton);
            return 0;
        }


    } else if (nawaa === 'haref') {
        // حساب عدد الأحرف الكلي (بما في ذلك المسافات وفواصل الأسطر)

      ijabaton = "النص يحتوي عن "+nass.length+" من الحروف.";
        ondhorIjabatonModal(ijabaton);
      return nass.length;

    } else {
        // رسالة تنبيه إذا لم يتم تحديد الوضع بشكل صحيح
        console.error("'الوضع غير صالح. يجب أن يكون 'كلمات' أو 'حروف");
        return 0;
    }
}

    function ondhorIjabatonModal1 (ijabaton) {
            // 1. استلام عنصر الـ Modal وجسم الإجابة
            const modalElement = document.getElementById('ijbatonModal');
            const contentElement = document.getElementById('ijabatonMohtawa');

            // 2. تعبئة المحتوى (الإجابة)
            contentElement.textContent = ijabaton;

            // 3. عرض النافذة (يجب استخدام طرق Bootstrap لعرضها بشكل صحيح)
            // إذا كنت لا تستخدم Bootstrap، يمكنك استخدام: modalElement.style.display = 'block';

            // الطريقة باستخدام فئات Bootstrap (لتحريك وتأثيرات الإظهار)
            modalElement.classList.add('show');
            modalElement.style.display = 'block';
            modalElement.setAttribute('aria-hidden', 'false');
            document.body.classList.add('modal-open'); // لإخفاء التمرير في الخلفية

            // إضافة خلفية معتمة (backdrop)
            const backdrop = document.createElement('div');
            backdrop.className = 'modal-backdrop fade show';
            backdrop.setAttribute('id', 'modalBackdrop');
            document.body.appendChild(backdrop);
        }

const AUTOCLOSE_TIME = 5000;


function ondhorIjabatonModal(ijabaton) {
    const modalElement = document.getElementById('ijbatonModal');
    const contentElement = document.getElementById('ijabatonMohtawa');

    // 1. تعبئة المحتوى
    if (contentElement) {
        contentElement.textContent = ijabaton;
    }

    // 2. عرض النافذة
    if (modalElement) {
        modalElement.classList.add('show');
        modalElement.style.display = 'block';
        modalElement.setAttribute('aria-hidden', 'false');
        // نبقي على هذه الفئة لضمان ثبات الخلفية أثناء ظهور الـ Modal
        document.body.classList.add('modal-open');
    }

    // 3. جدولة الإغلاق التلقائي بعد 3 ثواني
    setTimeout(closeModal, AUTOCLOSE_TIME);
}

/**
 * دالة لإغلاق النافذة المنبثقة.
 * (تم حذف كود إزالة الخلفية المعتمة)
 */
function closeModal() {
    const modalElement = document.getElementById('ijbatonModal');

    if (modalElement) {
        modalElement.classList.remove('show');
        modalElement.style.display = 'none';
        modalElement.setAttribute('aria-hidden', 'true');
    }

    // إزالة فئة 'modal-open' لتمكين التمرير
    if (document.body) {
        document.body.classList.remove('modal-open');
    }

    // لم نعد نحتاج إلى إزالة backdropElement.remove();
}

    const body = document.body;
        const toggleButton = document.getElementById('modeToggle');
        const statusElement = document.getElementById('modeStatus');
        const storageKey = 'user-theme';

        const qamarIcon = document.getElementById('qamar');

        const modalText = document.getElementById('ijabatonMohtawa');
        /**
         * 1. دالة لتطبيق الوضع
         * @param {string} mode - 'dark' أو 'light'
         */
    function applyMode(mode) {
    if (mode === 'dark') {
        // 1. تطبيق الوضع المظلم على الجسم
        body.classList.add('dark-mode');
        localStorage.setItem(storageKey, 'dark');

        // 2. تغيير الأيقونة إلى القمر الممتلئ (للدلالة على أن الوضع المظلم نشط)
        if (qamarIcon && modalText) {
            qamarIcon.classList.remove('bi-moon');      // إزالة غير الممتلئ
            qamarIcon.classList.add('bi-moon-fill');    // إضافة الممتلئ


            modalText.classList.remove('text-dark');
            modalText.classList.add('text-white');

        }


    } else {
        // 1. إزالة الوضع المظلم
        body.classList.remove('dark-mode');
        localStorage.setItem(storageKey, 'light');

        // 2. تغيير الأيقونة إلى القمر غير الممتلئ (للدلالة على أن وضع النهار نشط)
        if (qamarIcon && modalText) {
            qamarIcon.classList.remove('bi-moon-fill'); // إزالة الممتلئ
            qamarIcon.classList.add('bi-moon');         // إضافة غير الممتلئ


            modalText.classList.remove('text-white');
            modalText.classList.add('text-dark');

        }
    }
}

        /**
         * 2. دالة لتبديل الوضع عند النقر على الزر
         */
        function toggleMode() {
            // التحقق مما إذا كانت الفئة موجودة حاليًا
            if (body.classList.contains('dark-mode')) {
                applyMode('light');
            } else {
                applyMode('dark');
            }
        }

        /**
         * 3. التحقق عند تحميل الصفحة وتطبيق الاختيار المحفوظ
         */
        function loadSavedMode() {
            // التحقق من التفضيل المحفوظ في التخزين المحلي (LocalStorage)
            const savedMode = localStorage.getItem(storageKey);

            if (savedMode) {
                applyMode(savedMode);
            } else {
                // إذا لم يتم حفظ أي تفضيل، نستخدم تفضيل النظام (إذا كان المتصفح يدعمه)
                const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
                applyMode(prefersDark ? 'dark' : 'light');
            }
        }

        // 4. ربط الدالة بالزر
        toggleButton.addEventListener('click', toggleMode);

        // 5. استدعاء الدالة عند تحميل الصفحة
        loadSavedMode();

  </script>

  </body>
</html>