أعد كتابة هذا الكود كما هو بالضبط دون حذف أي عناصر أو اي اضافات ودون تعديل أي شيء ولكن أريدك أن تضيف للمستخدم خاصية تحديد أولوية المهمة عن طريق تصنيف أولوية المهمات (أولوية قصوى,أولوية متوسطة,أولوية منخفضة) وحين يتم اضافة المهمات يتم ترتيبها بناء على الأولوية ويكون الأولوية بجانب المهمة بألوان مختلفة مثلا أولوية قصوى لون أحمر للدلالة على العجلة والأهمية قم باضافة هذه الميزة بشكل متناسق ومتناسب مع المظهر,واضافة أخرى أريدك أن تضيف أيضا بشكل متناسب ومتناسق مع المظهر وبموقع مناسب أمام عين المستخدم شريط تقدم للمهام يحمل للمئة حين يضغط القارئ على تم التنفيذ لمهمة يزيد شريط التقدم حسب المهمات الموجودة حتى يصل الى مئة بالمئة حين ينهي جميع المهام المضافة وحين يكتمل شريط التقدم تظهر رسالة تحفيزية للقارئ أو تشجيعية بخط جميل مثل أحسنت لقد أتممت جميع المهام بنجاح ومن ثم يظهر أسفلها الجملة التحفيزية لهذا اليوم هي : واسمح لي أقوم باضافة جمل تحفيزية اكتب مكان اضافتها جمل تحفيزية حتى أعرفها اجعلها تظهر بشكل عشوائي ومتنوع ضمن الجمل التي أضيفها وبخط واضح ومتناسب ومتناسق مع المظهر : <!DOCTYPE html>
<html lang="ar">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>قائمة المهام اليومية</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            margin: 0;
            padding: 0;
        }
        .container {
            max-width: 500px;
            margin: 50px auto;
            background-color: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }
        h1 {
            text-align: center;
            color: #4CAF50;
        }
        .task-list {
            list-style-type: none;
            padding: 0;
        }
        .task-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 15px;
        }
        .task-item input[type="checkbox"] {
            margin-right: 10px;
        }
        .task-item label {
            flex-grow: 1;
        }
        .task-item button {
            background-color: #f44336;
            color: white;
            border: none;
            padding: 5px 10px;
            cursor: pointer;
            margin-left: 5px;
        }
        .task-item button:hover {
            background-color: #e53935;
        }
        .task-item .complete-btn {
            background-color: #28a745;
        }
        .task-item .complete-btn:hover {
            background-color: #218838;
        }
        .task-item .completed-btn {
            background-color: #6c757d;
            cursor: not-allowed;
        }
        .add-task {
            display: flex;
            justify-content: space-between;
            margin-top: 20px;
        }
        .add-task input {
            width: 80%;
            padding: 8px;
            margin-right: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        .add-task button {
            padding: 10px;
            background-color: #4CAF50;
            color: white;
            border: none;
            cursor: pointer;
            border-radius: 4px;
        }
        .add-task button:hover {
            background-color: #45a049;
        }
        .save-tasks-button {
            display: inline-block;
            margin-top: 5px;
            padding: 12px 20px;
            background-color: #007bff;
            color: white;
            font-size: 16px;
            font-weight: bold;
            text-align: center;
            border-radius: 5px;
            width: 100%;
            cursor: pointer;
            border: none;
        }
        .save-tasks-button:hover {
            background-color: #0056b3;
        }
        .save-tasks-button:focus {
            outline: none;
        }
        .ad-banner-top, .ad-banner-bottom, .ad-banner-sidebar, .ad-banner-middle, .ad-banner-left, .ad-banner-right {
            background-color: #f1f1f1;
            padding: 10px;
            text-align: center;
            margin: 15px 0;
        }
        @media screen and (max-width: 768px) {
            .ad-banner-sidebar, .ad-banner-left, .ad-banner-right {
                display: block;
                margin: 10px 0;
            }
        }
        .view-daily-tasks-button {
            display: inline-block;
            margin-top: 5px;
            padding: 12px 20px;
            background-color: #28a745;
            color: white;
            font-size: 16px;
            font-weight: bold;
            text-align: center;
            border-radius: 5px;
            width: 100%;
            cursor: pointer;
            border: none;
        }
        .view-daily-tasks-button:hover {
            background-color: #218838;
        }
        .task-modal {
            display: none;
            position: fixed;
            z-index: 1;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.4);
            padding-top: 60px;
        }
        .modal-content {
            background-color: #fff;
            margin: 5% auto;
            padding: 20px;
            border-radius: 8px;
            width: 80%;
            max-width: 500px;
            position: relative;
        }
        .modal-content h2 {
            text-align: center;
            color: #4CAF50;
        }
        .close-btn {
            background-color: #f44336;
            color: white;
            border: none;
            padding: 5px 10px;
            cursor: pointer;
            border-radius: 50%;
            position: absolute;
            top: 5px;
            right: 10px;
        }
        .close-btn:hover {
            background-color: #e53935;
        }
        .modal-task-item {
            display: flex;
            justify-content: space-between;
            margin-bottom: 15px;
        }
        .modal-task-item button {
            background-color: #f44336;
            color: white;
            border: none;
            padding: 5px 10px;
            cursor: pointer;
        }
        .modal-task-item button:hover {
            background-color: #e53935;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="ad-banner-top">
            <p>إعلان أعلى الصفحة (1)</p>
        </div>

        <div class="ad-banner-left">
            <p>إعلان يساري (2)</p>
        </div>

        <h1>قائمة المهام اليومية</h1>

        <div class="ad-banner-sidebar">
            <p>إعلان جانبي في منتصف الصفحة (3)</p>
        </div>

        <div class="ad-banner-middle">
            <p>إعلان وسطي (4)</p>
        </div>

        <ul class="task-list" id="taskList"></ul>

        <div class="add-task">
            <input type="text" id="taskInput" placeholder="أضف مهمة جديدة..." />
            <button onclick="addTask()">إضافة</button>
        </div>

        <div class="ad-banner-right">
            <p>إعلان يميني (5)</p>
        </div>

        <div class="ad-banner-bottom">
            <p>إعلان أسفل الصفحة (6)</p>
        </div>

        <div style="text-align: center; margin-top: 5px;">
            <button class="save-tasks-button" onclick="saveSelectedTasks()">إضافة المهام المحددة إلى قائمة المهام اليومية</button>
        </div>

        <div style="text-align: center; margin-top: 5px;">
            <button class="view-daily-tasks-button" onclick="viewDailyTasks()">قائمة المهام اليومية</button>
        </div>
    </div>

    <div id="taskModal" class="task-modal">
        <div class="modal-content">
            <button class="close-btn" onclick="closeModal()">×</button>
            <h2>قائمة المهام اليومية</h2>
            <ul id="modalTaskList"></ul>
        </div>
    </div>

    <script>
        // تخزين المهام
        function saveTasks() {
            const tasks = [];
            document.querySelectorAll('.task-item').forEach(item => {
                const taskText = item.querySelector('label').innerText;
                const isCompleted = item.querySelector('input').checked;
                tasks.push({ taskText, isCompleted });
            });
            localStorage.setItem('tasks', JSON.stringify(tasks));
        }

        // تحميل المهام عند فتح الصفحة
        function loadTasks() {
            const savedTasks = JSON.parse(localStorage.getItem('tasks'));
            if (savedTasks) {
                savedTasks.forEach(task => {
                    addTaskToList(task.taskText, task.isCompleted);
                });
            }
        }

        // إضافة مهمة جديدة
        function addTask() {
            const taskInput = document.getElementById('taskInput');
            const taskText = taskInput.value.trim();
            if (taskText) {
                addTaskToList(taskText, false);
                taskInput.value = ''; // مسح المدخل
                saveTasks();
            }
        }

        // إضافة المهمة إلى القائمة
        function addTaskToList(taskText, isCompleted) {
            const taskList = document.getElementById('taskList');
            const li = document.createElement('li');
            li.classList.add('task-item');
            li.innerHTML = `
                <input type="checkbox" ${isCompleted ? 'checked' : ''} />
                <label>${taskText}</label>
                <button onclick="removeTask(this)">إغلاق</button>
                <button onclick="completeTask(this)" class="complete-btn">تم التنفيذ</button>
            `;
            taskList.appendChild(li);
        }

        // تنفيذ المهمة
        function completeTask(button) {
            const taskItem = button.parentElement;
            const completeBtn = taskItem.querySelector('.complete-btn');
            completeBtn.textContent = 'جاهز';
            completeBtn.classList.remove('complete-btn');
            completeBtn.classList.add('completed-btn');
            completeBtn.disabled = true;
            completeBtn.onclick = null;
            
            // تحديث مربع الاختيار
            const checkbox = taskItem.querySelector('input[type="checkbox"]');
            checkbox.checked = true;
            
            saveTasks();
        }

        // إضافة المهام المحددة إلى قائمة المهام اليومية
        function saveSelectedTasks() {
            // الحصول على القائمة الحالية للمهام اليومية
            let savedDailyTasks = JSON.parse(localStorage.getItem('dailyTasks')) || [];
            
            // جمع المهام المحددة حاليًا
            const selectedTasks = [];
            document.querySelectorAll('.task-item input[type="checkbox"]:checked').forEach(checkbox => {
                const taskText = checkbox.parentElement.querySelector('label').innerText;
                selectedTasks.push(taskText);
            });
            
            // دمج المهام الجديدة مع المهام الموجودة مسبقًا دون تكرار
            selectedTasks.forEach(task => {
                if (!savedDailyTasks.includes(task)) {
                    savedDailyTasks.push(task);
                }
            });
            
            // حفظ القائمة المحدثة
            localStorage.setItem('dailyTasks', JSON.stringify(savedDailyTasks));

            // تحديث عرض المهام اليومية
            viewDailyTasks();
        }

        // عرض المهام اليومية
        function viewDailyTasks() {
            const savedDailyTasks = JSON.parse(localStorage.getItem('dailyTasks')) || [];
            const modalTaskList = document.getElementById('modalTaskList');
            modalTaskList.innerHTML = '';
            savedDailyTasks.forEach(task => {
                const li = document.createElement('li');
                li.classList.add('modal-task-item');
                li.innerHTML = `
                    <label>${task}</label>
                    <button onclick="removeDailyTask(this)">إغلاق</button>
                `;
                modalTaskList.appendChild(li);
            });
            document.getElementById('taskModal').style.display = 'block';
        }

        // إغلاق النافذة
        function closeModal() {
            document.getElementById('taskModal').style.display = 'none';
        }

        // إزالة مهمة من قائمة المهام
        function removeTask(button) {
            const taskItem = button.parentElement;
            taskItem.remove();
            saveTasks();
        }

        // إزالة مهمة من قائمة المهام اليومية
        function removeDailyTask(button) {
            const taskItem = button.parentElement;
            const taskText = taskItem.querySelector('label').innerText;
            let savedDailyTasks = JSON.parse(localStorage.getItem('dailyTasks')) || [];
            savedDailyTasks = savedDailyTasks.filter(task => task !== taskText);
            localStorage.setItem('dailyTasks', JSON.stringify(savedDailyTasks));
            taskItem.remove();
        }

        // دالة لحذف المهام غير المحفوظة بنهاية اليوم
        function removeEndOfDayTasks() {
            const currentTime = new Date();
            
            // تحديد وقت انتهاء اليوم (منتصف الليل)
            const endOfDay = new Date();
            endOfDay.setHours(23, 59, 59, 999);
            
            // إذا كان الوقت الحالي هو نهاية اليوم
            if (currentTime >= endOfDay) {
                let savedTasks = JSON.parse(localStorage.getItem('tasks')) || [];
                let savedDailyTasks = JSON.parse(localStorage.getItem('dailyTasks')) || [];
                
                // إزالة المهام غير المحفوظة
                savedTasks = savedTasks.filter(task => savedDailyTasks.includes(task.taskText));
                localStorage.setItem('tasks', JSON.stringify(savedTasks));
            }
        }

        // حدث التحميل الأولي
        window.onload = function() {
            loadTasks(); // تحميل المهام عند فتح الصفحة
            removeEndOfDayTasks(); // حذف المهام غير المحفوظة بنهاية اليوم
        }
    </script>
</body>
</html>