مذكرتي

مذكرتي - تطبيق إدارة المواعيد :root { --primary-color: #4361ee; --secondary-color: #3a0ca3; --accent-color: #f72585; --light-color: #f8f9fa; --dark-color: #2b2d42; --success-color: #4cc9f0; --warning-color: #fca311; --danger-color: #e63946; --gray-color: #adb5bd; } * { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } body { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: var(--dark-color); min-height: 100vh; padding: 20px; display: flex; justify-content: center; align-items: center; } .container { width: 100%; max-width: 900px; background-color: rgba(255, 255, 255, 0.95); border-radius: 20px; box-shadow: 0 15px 30px rgba(0, 0, 0, 0.25); overflow: hidden; } header { background: linear-gradient(to right, var(--primary-color), var(--secondary-color)); color: white; padding: 25px; text-align: center; position: relative; } h1 { font-size: 2.5rem; margin-bottom: 10px; font-weight: 700; } .date-display { font-size: 1.3rem; margin: 10px 0; display: flex; justify-content: center; align-items: center; gap: 10px; } .stats { display: flex; justify-content: space-around; background-color: var(--light-color); padding: 20px; border-bottom: 1px solid #ddd; } .stat-box { text-align: center; padding: 10px; flex: 1; } .stat-number { font-size: 2.5rem; font-weight: bold; color: var(--primary-color); line-height: 1; } .stat-label { font-size: 1rem; color: var(--dark-color); margin-top: 5px; } .main-content { padding: 25px; } .tabs { display: flex; border-bottom: 3px solid var(--primary-color); margin-bottom: 25px; background-color: #f1f3f9; border-radius: 10px 10px 0 0; overflow: hidden; } .tab { padding: 15px 25px; cursor: pointer; flex: 1; text-align: center; font-weight: 600; transition: all 0.3s; } .tab.active { background-color: var(--primary-color); color: white; } .tab:hover:not(.active) { background-color: #dce1f5; } .tab-content { display: none; animation: fadeIn 0.5s; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .tab-content.active { display: block; } .form-group { margin-bottom: 20px; } label { display: block; margin-bottom: 8px; font-weight: bold; color: var(--dark-color); } input, select, textarea { width: 100%; padding: 15px; border: 2px solid #ddd; border-radius: 10px; font-size: 1rem; transition: border-color 0.3s; } input:focus, select:focus, textarea:focus { border-color: var(--primary-color); outline: none; } button { background-color: var(--primary-color); color: white; border: none; padding: 15px 25px; border-radius: 10px; cursor: pointer; font-size: 1.1rem; font-weight: 600; transition: all 0.3s; display: inline-flex; align-items: center; justify-content: center; gap: 8px; } button:hover { background-color: var(--secondary-color); transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); } .btn-delete { background-color: var(--danger-color); } .btn-delete:hover { background-color: #c1121f; } .btn-complete { background-color: var(--success-color); } .btn-complete:hover { background-color: #0096c7; } .appointment-list { margin-top: 20px; display: grid; gap: 15px; } .appointment-item { background: linear-gradient(to right, #ffffff, #f8f9fa); border-radius: 12px; padding: 20px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08); border-left: 6px solid var(--primary-color); display: flex; flex-direction: column; gap: 12px; transition: transform 0.3s; } .appointment-item:hover { transform: translateY(-3px); box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1); } .appointment-title { font-weight: bold; font-size: 1.3rem; color: var(--dark-color); display: flex; align-items: center; gap: 10px; } .appointment-details { display: flex; justify-content: space-between; color: #666; margin-bottom: 5px; flex-wrap: wrap; gap: 15px; } .appointment-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 10px; } .summary { background: linear-gradient(to right, #f8f9fa, #e9ecef); padding: 20px; border-radius: 12px; margin-top: 20px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05); } .summary h3 { color: var(--primary-color); margin-bottom: 15px; padding-bottom: 10px; border-bottom: 2px solid var(--primary-color); } .summary ul { list-style-type: none; padding: 0; } .summary li { padding: 12px 15px; margin-bottom: 10px; background-color: white; border-radius: 8px; display: flex; align-items: center; gap: 10px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05); } .notification { position: fixed; bottom: 25px; right: 25px; background-color: var(--success-color); color: white; padding: 18px 25px; border-radius: 12px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); display: none; align-items: center; gap: 12px; z-index: 1000; animation: slideIn 0.3s; } @keyframes slideIn { from { transform: translateX(100px); opacity: 0; } to { transform: translateX(0); opacity: 1; } } .empty-state { text-align: center; padding: 40px 20px; color: var(--gray-color); } .empty-state i { font-size: 5rem; margin-bottom: 20px; color: #dee2e6; } .empty-state p { font-size: 1.2rem; margin-bottom: 25px; } .alarm-active { border-left: 6px solid var(--success-color); } .alarm-inactive { border-left: 6px solid var(--gray-color); } .permission-section { background: linear-gradient(to right, #ffe5ec, #ffccd5); padding: 20px; border-radius: 12px; margin-top: 20px; text-align: center; } .permission-section h3 { color: var(--accent-color); margin-bottom: 15px; } @media (max-width: 768px) { .stats { flex-direction: column; } .tabs { flex-direction: column; } .appointment-details { flex-direction: column; gap: 8px; } .appointment-actions { flex-direction: column; } button { width: 100%; } } مذكرتي - تطبيق المواعيد الاثنين، 12 يونيو 2023 0 موعد مجدول 0 مكتمل 0 قيد الانتظار إضافة موعد جديد قائمة المواعيد ملخص اليوم إعدادات التنبيه إضافة موعد جديد عنوان الموعد: التاريخ: الوقت: التنبيه قبل: بدون تنبيه 5 دقائق 15 دقيقة 30 دقيقة ساعة واحدة يوم واحد ملاحظات: حفظ الموعد مواعيدي ملخص اليوم اليوم لديك 0 مواعيد، منها 0 مكتمل و 0 قيد الانتظار. ما تم إنجازه اليوم: ما بقي لليوم: إعدادات التنبيه تفعيل نظام التنبيهات لتفعيل نظام التنبيهات، يجب منح الإذن لعرض الإشعارات طلب إذن الإشعارات صوت التنبيه: نغمة افتراضية نغمة رنين نغمة تنبيه اختبار التنبيه: تشغيل اختبار التنبيه التنبيهات المجدولة تم إضافة الموعد بنجاح! // بيانات التطبيق let appointments = []; let alarms = []; // تحديث التاريخ الحالي function updateCurrentDate() { const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }; const today = new Date(); document.getElementById('current-date').textContent = today.toLocaleDateString('ar-EG', options); return today; } // توليد معرف فريد لكل موعد function generateId() { return Date.now().toString(36) + Math.random().toString(36).substr(2); } // حفظ المواعيد في localStorage function saveAppointments() { localStorage.setItem('appointments', JSON.stringify(appointments)); scheduleAlarms(); } // تحميل المواعيد من localStorage function loadAppointments() { const storedAppointments = localStorage.getItem('appointments'); if (storedAppointments) { appointments = JSON.parse(storedAppointments); } updateAppointmentsDisplay(); } // إضافة موعد جديد function addAppointment(title, date, time, reminder, notes) { const newAppointment = { id: generateId(), title, date, time, reminder, notes, completed: false, createdAt: new Date().toISOString() }; appointments.push(newAppointment); saveAppointments(); updateAppointmentsDisplay(); showNotification(`تم إضافة الموعد "${title}" بنجاح!`); } // حذف موعد function deleteAppointment(id) { appointments = appointments.filter(app => app.id !== id); saveAppointments(); updateAppointmentsDisplay(); showNotification("تم حذف الموعد بنجاح!"); } // تحديث حالة الموعد (مكتمل/قيد الانتظار) function toggleAppointmentStatus(id) { appointments = appointments.map(app => { if (app.id === id) { return { ...app, completed: !app.completed }; } return app; }); saveAppointments(); updateAppointmentsDisplay(); showNotification("تم تحديث حالة الموعد!"); } // جدولة التنبيهات function scheduleAlarms() { // إلغاء جميع التنبيهات السابقة alarms.forEach(alarmId => { if (alarmId) { clearTimeout(alarmId); clearInterval(alarmId); } }); alarms = []; // جدولة تنبيهات جديدة appointments.forEach(appointment => { if (appointment.reminder !== "0" && !appointment.completed) { const appointmentDateTime = new Date(`${appointment.date}T${appointment.time}`); const reminderTime = parseInt(appointment.reminder); // حساب وقت التنبيه const alarmTime = new Date(appointmentDateTime.getTime() - reminderTime * 60000); const now = new Date(); // إذا كان وقت التنبيه في المستقبل if (alarmTime > now) { const timeUntilAlarm = alarmTime.getTime() - now.getTime(); // جدولة التنبيه const alarmId = setTimeout(() => { triggerAlarm(appointment); }, timeUntilAlarm); alarms.push(alarmId); } } }); } // تشغيل التنبيه function triggerAlarm(appointment) { if (!('Notification' in window)) { showNotification('المتصفح لا يدعم الإشعارات'); return; } if (Notification.permission === 'granted') { // إنشاء إشعار للمستخدم const notification = new Notification('تطبيق المواعيد - تنبيه', { body: `موعدك "${appointment.title}" سيبدأ بعد ${appointment.reminder} دقيقة.`, icon: 'https://cdn-icons-png.flaticon.com/512/3500/3500954.png', tag: 'appointment-alarm' }); notification.onclick = function() { window.focus(); this.close(); }; // تشغيل صوت التنبيه playAlertSound(); // إظهار تنبيه داخل الصفحة أيضاً showNotification(`موعدك "${appointment.title}" سيبدأ بعد ${appointment.reminder} دقيقة`); } } // تشغيل صوت التنبيه function playAlertSound() { try { // إنشاء صوت تنبيه باستخدام Web Audio API const audioContext = new (window.AudioContext || window.webkitAudioContext)(); const oscillator = audioContext.createOscillator(); const gainNode = audioContext.createGain(); oscillator.connect(gainNode); gainNode.connect(audioContext.destination); oscillator.type = 'sine'; oscillator.frequency.value = 800; gainNode.gain.value = 0.3; oscillator.start(); // إيقاف الصوت بعد 1.5 ثانية setTimeout(() => { oscillator.stop(); }, 1500); } catch (e) { console.log('لا يمكن تشغيل صوت التنبيه', e); } } // تحديث عرض المواعيد function updateAppointmentsDisplay() { const appointmentList = document.getElementById('appointment-list'); const totalAppointments = document.getElementById('total-appointments'); const completedAppointments = document.getElementById('completed-appointments'); const pendingAppointments = document.getElementById('pending-appointments'); // تحديث الإحصائيات const total = appointments.length; const completed = appointments.filter(app => app.completed).length; const pending = total - completed; totalAppointments.textContent = total; completedAppointments.textContent = completed; pendingAppointments.textContent = pending; // عرض المواعيد if (appointments.length === 0) { appointmentList.innerHTML = ` لا توجد مواعيد مضافة حتى الآن إضافة موعد جديد `; } else { appointmentList.innerHTML = ''; appointments.forEach(appointment => { const appointmentItem = document.createElement('div'); appointmentItem.className = 'appointment-item'; appointmentItem.innerHTML = ` ${appointment.title} ${appointment.date} ${appointment.time} ${appointment.reminder !== '0' ? ` تنبيه قبل ${appointment.reminder} دقيقة` : ''} ${appointment.notes ? ` ${appointment.notes}` : ''} ${appointment.completed ? 'تراجع' : 'تم الإنجاز'} حذف `; appointmentList.appendChild(appointmentItem); }); } updateSummary(); updateAlarmsList(); } // تحديث الملخص اليومي function updateSummary() { const today = new Date().toISOString().split('T')[0]; const todayAppointments = appointments.filter(app => app.date === today); const completedToday = todayAppointments.filter(app => app.completed); const pendingToday = todayAppointments.filter(app => !app.completed); document.getElementById('summary-total').textContent = `${todayAppointments.length} مواعيد`; document.getElementById('summary-completed').textContent = `${completedToday.length} مكتمل`; document.getElementById('summary-pending').textContent = `${pendingToday.length} قيد الانتظار`; const completedList = document.getElementById('completed-today'); const pendingList = document.getElementById('pending-today'); completedList.innerHTML = ''; pendingList.innerHTML = ''; if (completedToday.length === 0) { completedList.innerHTML = 'لا توجد مواعيد مكتملة اليوم'; } else { completedToday.forEach(app => { const li = document.createElement('li'); li.innerHTML = ` ${app.title} - ${app.time}`; completedList.appendChild(li); }); } if (pendingToday.length === 0) { pendingList.innerHTML = 'لا توجد مواعيد معلقة اليوم'; } else { pendingToday.forEach(app => { const li = document.createElement('li'); li.innerHTML = ` ${app.title} - ${app.time}`; pendingList.appendChild(li); }); } } // تحديث قائمة التنبيهات function updateAlarmsList() { const alarmList = document.getElementById('alarm-list'); const upcomingAlarms = appointments.filter(app => !app.completed && app.reminder !== "0"); if (upcomingAlarms.length === 0) { alarmList.innerHTML = ` التنبيهات المجدولة لا توجد تنبيهات مجدولة `; } else { alarmList.innerHTML = ` التنبيهات المجدولة هناك ${upcomingAlarms.length} تنبيه مجدول `; upcomingAlarms.forEach(appointment => { const alarmItem = document.createElement('div'); alarmItem.className = 'appointment-item'; alarmItem.innerHTML = ` ${appointment.title} ${appointment.date} ${appointment.time} تنبيه قبل ${appointment.reminder} دقيقة `; alarmList.appendChild(alarmItem); }); } } // إظهار الإشعارات function showNotification(message) { const notification = document.getElementById('notification'); const notificationText = document.getElementById('notification-text'); notificationText.textContent = message; notification.style.display = 'flex'; setTimeout(() => { notification.style.display = 'none'; }, 3000); } // التبديل بين التبويبات function switchTab(tabName) { // إزالة النشاط من جميع التبويبات document.querySelectorAll('.tab').forEach(t => t.classList.remove('active')); document.querySelectorAll('.tab-content').forEach(c => c.classList.remove('active')); // إضافة النشاط للتبويب المحدد document.querySelector(`.tab[data-tab="${tabName}"]`).classList.add('active'); document.getElementById(`${tabName}-tab`).classList.add('active'); } // إدارة التبويبات document.querySelectorAll('.tab').forEach(tab => { tab.addEventListener('click', () => { switchTab(tab.dataset.tab); }); }); // طلب إذن الإشعارات document.getElementById('request-permission').addEventListener('click', function() { if (!('Notification' in window)) { showNotification('المتصفح لا يدعم الإشعارات'); return; } if (Notification.permission === 'granted') { showNotification('تم منح الإذن مسبقاً للإشعارات'); } else if (Notification.permission !== 'denied') { Notification.requestPermission().then(function(permission) { if (permission === 'granted') { showNotification('تم منح الإذن لعرض الإشعارات'); } else { showNotification('تم رفض الإذن لعرض الإشعارات'); } }); } }); // اختبار التنبيه document.getElementById('test-alarm').addEventListener('click', function() { if (!('Notification' in window)) { showNotification('المتصفح لا يدعم الإشعارات'); return; } if (Notification.permission !== 'granted') { showNotification('يجب منح الإذن للإشعارات أولاً'); return; } // إنشاء إشعار تجريبي const notification = new Notification('تطبيق المواعيد - اختبار التنبيه', { body: 'هذا اختبار لنظام التنبيهات. سيتم تشغيل صوت التنبيه أيضاً.', icon: 'https://cdn-icons-png.flaticon.com/512/3500/3500954.png', tag: 'test-alarm' }); notification.onclick = function() { window.focus(); this.close(); }; // تشغيل صوت تنبيه playAlertSound(); showNotification('تم اختبار التنبيه بنجاح'); }); // معالجة إضافة موعد جديد document.getElementById('appointment-form').addEventListener('submit', function(e) { e.preventDefault(); // الحصول على القيم من النموذج const title = document.getElementById('title').value; const date = document.getElementById('date').value; const time = document.getElementById('time').value; const reminder = document.getElementById('reminder').value; const notes = document.getElementById('notes').value; // إضافة الموعد addAppointment(title, date, time, reminder, notes); // مسح النموذج this.reset(); // الرجوع إلى تاريخ اليوم const today = new Date().toISOString().split('T')[0]; document.getElementById('date').value = today; }); // تهيئة التطبيق عند التحميل window.addEventListener('load', function() { const today = updateCurrentDate(); // تعيين التاريخ الحالي كقيمة افتراضية const formattedDate = today.toISOString().split('T')[0]; document.getElementById('date').value = formattedDate; // تحميل المواعيد من localStorage loadAppointments(); // طلب إذن الإشعارات تلقائياً if ('Notification' in window && Notification.permission === 'default') { Notification.requestPermission(); } }); // تفعيل Service Worker للتنبيهات حتى عند إغلاق المتصفح if ('serviceWorker' in navigator && 'Notification' in window) { window.addEventListener('load', function() { navigator.serviceWorker.register('/sw.js').then(function(registration) { console.log('ServiceWorker registration successful with scope: ', registration.scope); }, function(err) { console.log('ServiceWorker registration failed: ', err); }); }); }

مذكرتي

مذكرتي – تطبيق المواعيد

إضافة موعد جديد

مواعيدي

ملخص اليوم

ما تم إنجازه اليوم:

ما بقي لليوم:

إعدادات التنبيه

تفعيل نظام التنبيهات

التنبيهات المجدولة

admin

إضافة موعد جديد

مواعيدي

ملخص اليوم

ما تم إنجازه اليوم:

ما بقي لليوم:

إعدادات التنبيه

تفعيل نظام التنبيهات

التنبيهات المجدولة

admin

Subscribe to our mailing list to get the new updates!

deviss

Articles similaires

deviss

fiche projet

Cornes de Gazelle (Kaab el Ghzal)

Moroccan Meatball Tagine