Hugging Face's logo

Spaces:
melassy
/
dr-ealssy
Running

App Files Community
melassy commited on
Commit
bc9e9a1
·
verified ·
1 Parent(s): 39a93b7

Add 1 files

Browse files
Files changed (1) hide show
  1. index.html +214 -75
index.html CHANGED
@@ -1,9 +1,9 @@
1
  <!DOCTYPE html>
2
- <html lang="en">
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>WhatsApp Message Automation for Students</title>
7
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
8
  <style>
9
  :root {
@@ -59,6 +59,64 @@
59
  margin-bottom: 1rem;
60
  }
61
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
62
  .upload-section {
63
  border: 2px dashed #ccc;
64
  border-radius: 8px;
@@ -301,7 +359,7 @@
301
  }
302
 
303
  .instructions ol {
304
- padding-left: 1.5rem;
305
  }
306
 
307
  .instructions li {
@@ -332,63 +390,82 @@
332
  <div class="logo">
333
  <i class="fab fa-whatsapp"></i>
334
  </div>
335
- <h1>WhatsApp Message Automation</h1>
336
- <p class="subtitle">Send personalized messages to students automatically</p>
337
  </header>
338
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
339
  <div class="upload-section" id="dropZone">
340
  <div class="upload-icon">
341
  <i class="fas fa-file-upload"></i>
342
  </div>
343
- <h3>Upload Student Data File</h3>
344
- <p>Supported formats: CSV, XLSX (Excel)</p>
345
  <input type="file" id="fileInput" class="file-input" accept=".csv,.xlsx,.xls">
346
  <button class="upload-btn" id="uploadBtn">
347
- <i class="fas fa-cloud-upload-alt"></i> Choose File
348
  </button>
349
- <div class="file-name" id="fileName">No file selected</div>
350
  </div>
351
 
352
  <div class="sample-download">
353
  <a href="#" class="sample-link" id="downloadSample">
354
- <i class="fas fa-download"></i> Download Sample File
355
  </a>
356
  </div>
357
 
358
  <div class="form-group">
359
- <label for="countryCode">Country Code</label>
360
  <div class="country-code">
361
  <select id="countryCode">
362
- <option value="+20">Egypt (+20)</option>
363
- <option value="+966">Saudi Arabia (+966)</option>
364
- <option value="+971">UAE (+971)</option>
365
- <option value="+962">Jordan (+962)</option>
366
- <option value="+965">Kuwait (+965)</option>
367
- <option value="+968">Oman (+968)</option>
368
- <option value="+974">Qatar (+974)</option>
369
- <option value="+973">Bahrain (+973)</option>
370
- <option value="+212">Morocco (+212)</option>
371
- <option value="+216">Tunisia (+216)</option>
372
- <option value="+213">Algeria (+213)</option>
373
- <option value="+1">USA/Canada (+1)</option>
374
- <option value="+44">UK (+44)</option>
375
- <option value="+91">India (+91)</option>
376
- <option value="custom">Custom</option>
377
  </select>
378
- <input type="text" id="customCode" placeholder="Enter custom code" style="display: none;">
379
  </div>
380
  </div>
381
 
382
  <div class="form-group">
383
- <label for="messageTemplate">Message Template</label>
384
- <textarea id="messageTemplate" placeholder="Enter your message template here. Use {name} where you want the student's name to appear.">مرحبًا {name}،
385
 
386
  هذه رسالتك من إدارة المدرسة. نأمل أن تكون بصحة جيدة.
387
 
388
  مع تحيات،
389
  الإدارة</textarea>
390
  <div class="message-preview">
391
- <strong>Preview:</strong>
392
  <div id="messagePreview">مرحبًا أحمد،
393
 
394
  هذه رسالتك من إدارة المدرسة. نأمل أن تكون بصحة جيدة.
@@ -399,24 +476,24 @@
399
  </div>
400
 
401
  <div class="form-group">
402
- <label for="delay">Delay Between Messages (seconds)</label>
403
  <select id="delay">
404
- <option value="5">5 seconds (recommended)</option>
405
- <option value="10">10 seconds (safer)</option>
406
- <option value="20">20 seconds (very safe)</option>
407
- <option value="30">30 seconds (most safe)</option>
408
- <option value="60">1 minute</option>
409
- <option value="custom">Custom</option>
410
  </select>
411
- <input type="number" id="customDelay" placeholder="Enter custom delay in seconds" min="5" style="display: none; margin-top: 0.5rem;" class="full-width">
412
  </div>
413
 
414
  <div class="controls">
415
  <button class="btn btn-secondary" id="resetBtn">
416
- <i class="fas fa-redo"></i> Reset
417
  </button>
418
  <button class="btn btn-primary" id="sendBtn" disabled>
419
- <i class="fas fa-paper-plane"></i> Send Messages
420
  </button>
421
  </div>
422
 
@@ -425,27 +502,27 @@
425
  <div class="progress" id="progressBar"></div>
426
  </div>
427
  <div class="progress-text">
428
- <span id="progressStatus">Ready</span>
429
  <span id="progressCount">0/0</span>
430
  </div>
431
  </div>
432
 
433
  <div class="log-container" id="logContainer">
434
- <div class="log-entry">Logs will appear here...</div>
435
  </div>
436
 
437
  <div class="instructions">
438
- <h3>How to Use This Tool</h3>
439
  <ol>
440
- <li>Prepare your student data file with columns for name and phone number (without country code)</li>
441
- <li>Upload the file using the button above</li>
442
- <li>Select the appropriate country code for the phone numbers</li>
443
- <li>Compose your message template using {name} for personalization</li>
444
- <li>Set a delay between messages to avoid being flagged as spam</li>
445
- <li>Click "Send Messages" and wait for the process to complete</li>
446
- <li>Monitor progress in the log section below</li>
447
  </ol>
448
- <p><strong>Note:</strong> You need to have WhatsApp Web open in your browser for this to work.</p>
449
  </div>
450
  </div>
451
 
@@ -471,6 +548,18 @@
471
  const logContainer = document.getElementById('logContainer');
472
  const downloadSample = document.getElementById('downloadSample');
473
 
 
 
 
 
 
 
 
 
 
 
 
 
474
  // File upload handling
475
  uploadBtn.addEventListener('click', function() {
476
  fileInput.click();
@@ -479,11 +568,11 @@
479
  fileInput.addEventListener('change', function() {
480
  if (fileInput.files.length > 0) {
481
  fileName.textContent = fileInput.files[0].name;
482
- sendBtn.disabled = false;
483
- addLog(`File "${fileInput.files[0].name}" loaded successfully`, 'success');
484
  } else {
485
- fileName.textContent = 'No file selected';
486
- sendBtn.disabled = true;
487
  }
488
  });
489
 
@@ -524,8 +613,8 @@
524
  if (files.length > 0) {
525
  fileInput.files = files;
526
  fileName.textContent = files[0].name;
527
- sendBtn.disabled = false;
528
- addLog(`File "${files[0].name}" loaded successfully via drag & drop`, 'success');
529
  }
530
  }
531
 
@@ -559,18 +648,18 @@
559
  // Sample file download
560
  downloadSample.addEventListener('click', function(e) {
561
  e.preventDefault();
562
- addLog('Downloading sample file...', 'warning');
563
 
564
  // In a real implementation, this would link to an actual sample file
565
  setTimeout(() => {
566
- addLog('Sample file downloaded successfully', 'success');
567
  }, 1000);
568
  });
569
 
570
  // Reset button
571
  resetBtn.addEventListener('click', function() {
572
  fileInput.value = '';
573
- fileName.textContent = 'No file selected';
574
  countryCode.value = '+20';
575
  customCode.style.display = 'none';
576
  customCode.value = '';
@@ -578,36 +667,86 @@
578
  delay.value = '5';
579
  customDelay.style.display = 'none';
580
  customDelay.value = '';
581
- sendBtn.disabled = true;
582
  progressContainer.style.display = 'none';
583
- logContainer.innerHTML = '<div class="log-entry">Logs cleared</div>';
584
  logContainer.style.display = 'none';
585
 
586
  updatePreview();
587
- addLog('Form has been reset', 'warning');
588
  });
589
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
590
  // Send button
591
  sendBtn.addEventListener('click', function() {
592
  if (!fileInput.files.length) {
593
- addLog('Error: No file selected', 'error');
 
 
 
 
 
594
  return;
595
  }
596
 
597
  const selectedCountryCode = countryCode.value === 'custom' ? customCode.value : countryCode.value;
598
  if (!selectedCountryCode) {
599
- addLog('Error: Please select or enter a country code', 'error');
600
  return;
601
  }
602
 
603
  const selectedDelay = delay.value === 'custom' ? parseInt(customDelay.value) : parseInt(delay.value);
604
  if (isNaN(selectedDelay) || selectedDelay < 5) {
605
- addLog('Error: Delay must be at least 5 seconds', 'error');
606
  return;
607
  }
608
 
609
  if (!messageTemplate.value.includes('{name}')) {
610
- addLog('Warning: Message template does not contain {name} placeholder', 'warning');
611
  }
612
 
613
  // Show progress container
@@ -618,15 +757,15 @@
618
  simulateSending(selectedCountryCode, selectedDelay);
619
  });
620
 
621
- // Simulate sending messages (in a real app, this would connect to backend)
622
  function simulateSending(countryCode, delay) {
623
  const totalStudents = 25; // Simulated number of students
624
  let sentCount = 0;
625
 
626
- progressStatus.textContent = 'Sending messages...';
627
  progressCount.textContent = `0/${totalStudents}`;
628
 
629
- addLog(`Starting to send messages with country code ${countryCode} and ${delay} second delay`, 'warning');
630
 
631
  const interval = setInterval(() => {
632
  sentCount++;
@@ -638,15 +777,15 @@
638
  const isSuccess = Math.random() > 0.1;
639
 
640
  if (isSuccess) {
641
- addLog(`Message sent successfully to student ${sentCount}`, 'success');
642
  } else {
643
- addLog(`Failed to send message to student ${sentCount} (simulated error)`, 'error');
644
  }
645
 
646
  if (sentCount >= totalStudents) {
647
  clearInterval(interval);
648
- progressStatus.textContent = 'Completed';
649
- addLog('All messages processed!', 'success');
650
  sendBtn.disabled = true;
651
  }
652
  }, delay * 1000);
@@ -661,7 +800,7 @@
661
  logEntry.textContent = `[${timestamp}] ${message}`;
662
 
663
  // If first entry is the placeholder, remove it
664
- if (logContainer.firstChild.textContent === 'Logs will appear here...') {
665
  logContainer.innerHTML = '';
666
  }
667
 
 
1
  <!DOCTYPE html>
2
+ <html lang="ar" dir="rtl">
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>نظام مراسلة الطلاب عبر الواتساب</title>
7
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
8
  <style>
9
  :root {
 
59
  margin-bottom: 1rem;
60
  }
61
 
62
+ .whatsapp-connect {
63
+ background-color: var(--light-color);
64
+ border: 2px solid var(--primary-color);
65
+ border-radius: 8px;
66
+ padding: 1.5rem;
67
+ margin-bottom: 2rem;
68
+ text-align: center;
69
+ }
70
+
71
+ .whatsapp-connect h3 {
72
+ color: var(--dark-color);
73
+ margin-bottom: 1rem;
74
+ display: flex;
75
+ align-items: center;
76
+ justify-content: center;
77
+ gap: 0.5rem;
78
+ }
79
+
80
+ .qr-container {
81
+ margin: 1rem auto;
82
+ padding: 1rem;
83
+ background: white;
84
+ border-radius: 8px;
85
+ display: inline-block;
86
+ border: 1px solid #ddd;
87
+ }
88
+
89
+ .qr-placeholder {
90
+ width: 200px;
91
+ height: 200px;
92
+ background-color: #f5f5f5;
93
+ display: flex;
94
+ align-items: center;
95
+ justify-content: center;
96
+ color: #999;
97
+ font-size: 0.9rem;
98
+ margin: 0 auto;
99
+ }
100
+
101
+ .qr-image {
102
+ width: 200px;
103
+ height: 200px;
104
+ display: none;
105
+ }
106
+
107
+ .connection-status {
108
+ margin-top: 1rem;
109
+ font-weight: bold;
110
+ }
111
+
112
+ .connected {
113
+ color: var(--success-color);
114
+ }
115
+
116
+ .disconnected {
117
+ color: var(--error-color);
118
+ }
119
+
120
  .upload-section {
121
  border: 2px dashed #ccc;
122
  border-radius: 8px;
 
359
  }
360
 
361
  .instructions ol {
362
+ padding-right: 1.5rem;
363
  }
364
 
365
  .instructions li {
 
390
  <div class="logo">
391
  <i class="fab fa-whatsapp"></i>
392
  </div>
393
+ <h1>نظام مراسلة الطلاب عبر الواتساب</h1>
394
+ <p class="subtitle">إرسال رسائل شخصية للطلاب تلقائيًا</p>
395
  </header>
396
 
397
+ <div class="whatsapp-connect">
398
+ <h3><i class="fas fa-link"></i> اتصال الواتساب</h3>
399
+ <div class="qr-container">
400
+ <div class="qr-placeholder" id="qrPlaceholder">
401
+ سيظهر رمز الاستجابة السريعة هنا بعد النقر على "الاتصال بالواتساب"
402
+ </div>
403
+ <img src="" class="qr-image" id="qrImage" alt="رمز QR للواتساب">
404
+ </div>
405
+ <div class="connection-status disconnected" id="connectionStatus">
406
+ غير متصل بالواتساب
407
+ </div>
408
+ <button class="btn btn-primary" id="connectBtn" style="margin-top: 1rem;">
409
+ <i class="fas fa-qrcode"></i> الاتصال بالواتساب
410
+ </button>
411
+ <button class="btn btn-secondary" id="disconnectBtn" style="margin-top: 1rem; display: none;">
412
+ <i class="fas fa-unlink"></i> قطع الاتصال
413
+ </button>
414
+ </div>
415
+
416
  <div class="upload-section" id="dropZone">
417
  <div class="upload-icon">
418
  <i class="fas fa-file-upload"></i>
419
  </div>
420
+ <h3>رفع ملف بيانات الطلاب</h3>
421
+ <p>الملفات المدعومة: CSV, XLSX (إكسل)</p>
422
  <input type="file" id="fileInput" class="file-input" accept=".csv,.xlsx,.xls">
423
  <button class="upload-btn" id="uploadBtn">
424
+ <i class="fas fa-cloud-upload-alt"></i> اختيار ملف
425
  </button>
426
+ <div class="file-name" id="fileName">لم يتم اختيار ملف</div>
427
  </div>
428
 
429
  <div class="sample-download">
430
  <a href="#" class="sample-link" id="downloadSample">
431
+ <i class="fas fa-download"></i> تحميل ملف نموذجي
432
  </a>
433
  </div>
434
 
435
  <div class="form-group">
436
+ <label for="countryCode">رمز الدولة</label>
437
  <div class="country-code">
438
  <select id="countryCode">
439
+ <option value="+20">مصر (+20)</option>
440
+ <option value="+966">السعودية (+966)</option>
441
+ <option value="+971">الإمارات (+971)</option>
442
+ <option value="+962">الأردن (+962)</option>
443
+ <option value="+965">الكويت (+965)</option>
444
+ <option value="+968">عمان (+968)</option>
445
+ <option value="+974">قطر (+974)</option>
446
+ <option value="+973">البحرين (+973)</option>
447
+ <option value="+212">المغرب (+212)</option>
448
+ <option value="+216">تونس (+216)</option>
449
+ <option value="+213">الجزائر (+213)</option>
450
+ <option value="+1">أمريكا/كندا (+1)</option>
451
+ <option value="+44">بريطانيا (+44)</option>
452
+ <option value="+91">الهند (+91)</option>
453
+ <option value="custom">مخصص</option>
454
  </select>
455
+ <input type="text" id="customCode" placeholder="ادخل رمز مخصص" style="display: none;">
456
  </div>
457
  </div>
458
 
459
  <div class="form-group">
460
+ <label for="messageTemplate">نموذج الرسالة</label>
461
+ <textarea id="messageTemplate" placeholder="أدخل نموذج الرسالة هنا. استخدم {name} حيث تريد ظهور اسم الطالب.">مرحبًا {name}،
462
 
463
  هذه رسالتك من إدارة المدرسة. نأمل أن تكون بصحة جيدة.
464
 
465
  مع تحيات،
466
  الإدارة</textarea>
467
  <div class="message-preview">
468
+ <strong>معاينة:</strong>
469
  <div id="messagePreview">مرحبًا أحمد،
470
 
471
  هذه رسالتك من إدارة المدرسة. نأمل أن تكون بصحة جيدة.
 
476
  </div>
477
 
478
  <div class="form-group">
479
+ <label for="delay">المدة بين الرسائل (ثانية)</label>
480
  <select id="delay">
481
+ <option value="5">5 ثواني (موصى به)</option>
482
+ <option value="10">10 ثواني (أكثر أمانًا)</option>
483
+ <option value="20">20 ثانية (آمن جدًا)</option>
484
+ <option value="30">30 ثانية (الأكثر أمانًا)</option>
485
+ <option value="60">دقيقة واحدة</option>
486
+ <option value="custom">مخصص</option>
487
  </select>
488
+ <input type="number" id="customDelay" placeholder="أدخل المدة بالثواني" min="5" style="display: none; margin-top: 0.5rem;" class="full-width">
489
  </div>
490
 
491
  <div class="controls">
492
  <button class="btn btn-secondary" id="resetBtn">
493
+ <i class="fas fa-redo"></i> إعادة تعيين
494
  </button>
495
  <button class="btn btn-primary" id="sendBtn" disabled>
496
+ <i class="fas fa-paper-plane"></i> إرسال الرسائل
497
  </button>
498
  </div>
499
 
 
502
  <div class="progress" id="progressBar"></div>
503
  </div>
504
  <div class="progress-text">
505
+ <span id="progressStatus">جاهز</span>
506
  <span id="progressCount">0/0</span>
507
  </div>
508
  </div>
509
 
510
  <div class="log-container" id="logContainer">
511
+ <div class="log-entry">سوف تظهر سجلات العملية هنا...</div>
512
  </div>
513
 
514
  <div class="instructions">
515
+ <h3>كيفية استخدام الأداة</h3>
516
  <ol>
517
+ <li>قم بتجهيز ملف بيانات الطلاب بأعمدة للأسماء وأرقام الهاتف (بدون رمز الدولة)</li>
518
+ <li>قم بتحميل الملف باستخدام الزر أعلاه</li>
519
+ <li>اختر رمز الدولة المناسب لأرقام الهواتف</li>
520
+ <li>اكتب نموذج الرسالة باستخدام {name} للتخصيص</li>
521
+ <li>حدد مدة بين الرسائل لتجنب التعرف كرسائل مزعجة</li>
522
+ <li>اضغط على "إرسال الرسائل" وانتظر اكتمال العملية</li>
523
+ <li>تابع التقدم في قسم السجلات أدناه</li>
524
  </ol>
525
+ <p><strong>ملاحظة:</strong> يجب أن يكون WhatsApp Web مفتوحًا في متصفحك حتى يعمل النظام.</p>
526
  </div>
527
  </div>
528
 
 
548
  const logContainer = document.getElementById('logContainer');
549
  const downloadSample = document.getElementById('downloadSample');
550
 
551
+ // WhatsApp Connection elements
552
+ const connectBtn = document.getElementById('connectBtn');
553
+ const disconnectBtn = document.getElementById('disconnectBtn');
554
+ const qrPlaceholder = document.getElementById('qrPlaceholder');
555
+ const qrImage = document.getElementById('qrImage');
556
+ const connectionStatus = document.getElementById('connectionStatus');
557
+
558
+ // WhatsApp Connection state
559
+ let isConnected = false;
560
+ let qrCodeGenerated = false;
561
+ let connectionInterval;
562
+
563
  // File upload handling
564
  uploadBtn.addEventListener('click', function() {
565
  fileInput.click();
 
568
  fileInput.addEventListener('change', function() {
569
  if (fileInput.files.length > 0) {
570
  fileName.textContent = fileInput.files[0].name;
571
+ updateSendButton();
572
+ addLog(`تم تحميل الملف "${fileInput.files[0].name}" بنجاح`, 'success');
573
  } else {
574
+ fileName.textContent = 'لم يتم اختيار ملف';
575
+ updateSendButton();
576
  }
577
  });
578
 
 
613
  if (files.length > 0) {
614
  fileInput.files = files;
615
  fileName.textContent = files[0].name;
616
+ updateSendButton();
617
+ addLog(`تم تحميل الملف "${files[0].name}" بنجاح عبر السحب والإفلات`, 'success');
618
  }
619
  }
620
 
 
648
  // Sample file download
649
  downloadSample.addEventListener('click', function(e) {
650
  e.preventDefault();
651
+ addLog('جاري تحميل الملف النموذجي...', 'warning');
652
 
653
  // In a real implementation, this would link to an actual sample file
654
  setTimeout(() => {
655
+ addLog('تم تحميل الملف النموذجي بنجاح', 'success');
656
  }, 1000);
657
  });
658
 
659
  // Reset button
660
  resetBtn.addEventListener('click', function() {
661
  fileInput.value = '';
662
+ fileName.textContent = 'لم يتم اختيار ملف';
663
  countryCode.value = '+20';
664
  customCode.style.display = 'none';
665
  customCode.value = '';
 
667
  delay.value = '5';
668
  customDelay.style.display = 'none';
669
  customDelay.value = '';
670
+ updateSendButton();
671
  progressContainer.style.display = 'none';
672
+ logContainer.innerHTML = '<div class="log-entry">تم مسح السجلات</div>';
673
  logContainer.style.display = 'none';
674
 
675
  updatePreview();
676
+ addLog('تم إعادة تعيين النموذج', 'warning');
677
  });
678
 
679
+ // WhatsApp Connection
680
+ connectBtn.addEventListener('click', function() {
681
+ if (isConnected) return;
682
+
683
+ addLog('جاري الاتصال بخدمة واتساب ويب...', 'warning');
684
+
685
+ // Simulate QR code generation
686
+ qrPlaceholder.style.display = 'none';
687
+ qrImage.src = 'https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=https://web.whatsapp.com/1/2/3';
688
+ qrImage.style.display = 'block';
689
+ qrCodeGenerated = true;
690
+
691
+ // Simulate connection
692
+ setTimeout(() => {
693
+ isConnected = true;
694
+ connectBtn.style.display = 'none';
695
+ disconnectBtn.style.display = 'inline-block';
696
+ connectionStatus.textContent = 'متصل بالواتساب';
697
+ connectionStatus.classList.remove('disconnected');
698
+ connectionStatus.classList.add('connected');
699
+ addLog('تم الاتصال بنجاح بحساب الواتساب الخاص بك', 'success');
700
+ updateSendButton();
701
+ }, 3000);
702
+ });
703
+
704
+ disconnectBtn.addEventListener('click', function() {
705
+ if (!isConnected) return;
706
+
707
+ isConnected = false;
708
+ connectBtn.style.display = 'inline-block';
709
+ disconnectBtn.style.display = 'none';
710
+ qrPlaceholder.style.display = 'flex';
711
+ qrImage.style.display = 'none';
712
+ connectionStatus.textContent = 'غير متصل بالواتساب';
713
+ connectionStatus.classList.remove('connected');
714
+ connectionStatus.classList.add('disconnected');
715
+ addLog('تم قطع الاتصال بحساب الواتساب', 'warning');
716
+ updateSendButton();
717
+ });
718
+
719
+ // Update send button state based on conditions
720
+ function updateSendButton() {
721
+ sendBtn.disabled = !(fileInput.files.length > 0 && isConnected);
722
+ }
723
+
724
  // Send button
725
  sendBtn.addEventListener('click', function() {
726
  if (!fileInput.files.length) {
727
+ addLog('خطأ: لم يتم اختيار ملف', 'error');
728
+ return;
729
+ }
730
+
731
+ if (!isConnected) {
732
+ addLog('خطأ: يجب الاتصال بالواتساب أولاً', 'error');
733
  return;
734
  }
735
 
736
  const selectedCountryCode = countryCode.value === 'custom' ? customCode.value : countryCode.value;
737
  if (!selectedCountryCode) {
738
+ addLog('خطأ: الرجاء اختيار أو إدخال رمز الدولة', 'error');
739
  return;
740
  }
741
 
742
  const selectedDelay = delay.value === 'custom' ? parseInt(customDelay.value) : parseInt(delay.value);
743
  if (isNaN(selectedDelay) || selectedDelay < 5) {
744
+ addLog('خطأ: يجب أن تكون المدة على الأقل 5 ثواني', 'error');
745
  return;
746
  }
747
 
748
  if (!messageTemplate.value.includes('{name}')) {
749
+ addLog('تحذير: نموذج الرسالة لا يحتوي على العنصر النائب {name}', 'warning');
750
  }
751
 
752
  // Show progress container
 
757
  simulateSending(selectedCountryCode, selectedDelay);
758
  });
759
 
760
+ // Simulate sending messages
761
  function simulateSending(countryCode, delay) {
762
  const totalStudents = 25; // Simulated number of students
763
  let sentCount = 0;
764
 
765
+ progressStatus.textContent = 'جاري إرسال الرسائل...';
766
  progressCount.textContent = `0/${totalStudents}`;
767
 
768
+ addLog(`بدء إرسال الرسائل مع رمز الدولة ${countryCode} ومدة ${delay} ثانية بين الرسائل`, 'warning');
769
 
770
  const interval = setInterval(() => {
771
  sentCount++;
 
777
  const isSuccess = Math.random() > 0.1;
778
 
779
  if (isSuccess) {
780
+ addLog(`تم إرسال الرسالة بنجاح إلى الطالب رقم ${sentCount}`, 'success');
781
  } else {
782
+ addLog(`فشل إرسال الرسالة إلى الطالب رقم ${sentCount} (خطأ محاكاة)`, 'error');
783
  }
784
 
785
  if (sentCount >= totalStudents) {
786
  clearInterval(interval);
787
+ progressStatus.textContent = 'تم الانتهاء';
788
+ addLog('تم معالجة جميع الرسائل!', 'success');
789
  sendBtn.disabled = true;
790
  }
791
  }, delay * 1000);
 
800
  logEntry.textContent = `[${timestamp}] ${message}`;
801
 
802
  // If first entry is the placeholder, remove it
803
+ if (logContainer.firstChild.textContent === 'سوف تظهر سجلات العملية هنا...') {
804
  logContainer.innerHTML = '';
805
  }
806