|
<!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 rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
<style> |
|
:root { |
|
--primary-color: #25D366; |
|
--secondary-color: #128C7E; |
|
--light-color: #DCF8C6; |
|
--dark-color: #075E54; |
|
--error-color: #FF3B30; |
|
--success-color: #34C759; |
|
--warning-color: #FF9500; |
|
--background-color: #F5F5F5; |
|
--card-color: #FFFFFF; |
|
--text-color: #333333; |
|
--border-color: #E0E0E0; |
|
} |
|
|
|
* { |
|
margin: 0; |
|
padding: 0; |
|
box-sizing: border-box; |
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; |
|
} |
|
|
|
body { |
|
background-color: var(--background-color); |
|
color: var(--text-color); |
|
line-height: 1.6; |
|
} |
|
|
|
.container { |
|
max-width: 1200px; |
|
margin: 0 auto; |
|
padding: 2rem; |
|
} |
|
|
|
header { |
|
display: flex; |
|
justify-content: space-between; |
|
align-items: center; |
|
margin-bottom: 3rem; |
|
padding-bottom: 1rem; |
|
border-bottom: 1px solid var(--border-color); |
|
} |
|
|
|
.logo { |
|
display: flex; |
|
align-items: center; |
|
gap: 1rem; |
|
} |
|
|
|
.logo-icon { |
|
font-size: 2.5rem; |
|
color: var(--primary-color); |
|
} |
|
|
|
.logo-text h1 { |
|
color: var(--dark-color); |
|
font-size: 1.8rem; |
|
margin-bottom: 0.3rem; |
|
} |
|
|
|
.logo-text p { |
|
color: #666; |
|
font-size: 0.9rem; |
|
} |
|
|
|
.user-profile { |
|
display: flex; |
|
align-items: center; |
|
gap: 0.8rem; |
|
} |
|
|
|
.user-avatar { |
|
width: 40px; |
|
height: 40px; |
|
border-radius: 50%; |
|
background-color: var(--secondary-color); |
|
color: white; |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
font-weight: bold; |
|
} |
|
|
|
.dashboard { |
|
display: grid; |
|
grid-template-columns: 1fr 2fr; |
|
gap: 2rem; |
|
} |
|
|
|
.sidebar { |
|
background-color: var(--card-color); |
|
border-radius: 12px; |
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); |
|
padding: 1.5rem; |
|
} |
|
|
|
.sidebar-section { |
|
margin-bottom: 2rem; |
|
} |
|
|
|
.sidebar-section h3 { |
|
color: var(--dark-color); |
|
margin-bottom: 1rem; |
|
display: flex; |
|
align-items: center; |
|
gap: 0.5rem; |
|
font-size: 1.1rem; |
|
} |
|
|
|
.sidebar-section h3 i { |
|
font-size: 1.2rem; |
|
} |
|
|
|
.connection-status { |
|
padding: 0.8rem; |
|
border-radius: 8px; |
|
margin-bottom: 1rem; |
|
font-size: 0.9rem; |
|
display: flex; |
|
align-items: center; |
|
gap: 0.5rem; |
|
} |
|
|
|
.status-connected { |
|
background-color: var(--light-color); |
|
color: var(--dark-color); |
|
} |
|
|
|
.status-disconnected { |
|
background-color: #FFEBEE; |
|
color: var(--error-color); |
|
} |
|
|
|
.btn { |
|
padding: 0.7rem 1.2rem; |
|
border-radius: 8px; |
|
font-weight: 600; |
|
cursor: pointer; |
|
transition: all 0.3s ease; |
|
border: none; |
|
display: inline-flex; |
|
align-items: center; |
|
gap: 0.5rem; |
|
width: 100%; |
|
justify-content: center; |
|
margin-bottom: 0.5rem; |
|
} |
|
|
|
.btn-primary { |
|
background-color: var(--primary-color); |
|
color: white; |
|
} |
|
|
|
.btn-primary:hover { |
|
background-color: var(--dark-color); |
|
} |
|
|
|
.btn-secondary { |
|
background-color: white; |
|
color: var(--dark-color); |
|
border: 1px solid var(--border-color); |
|
} |
|
|
|
.btn-secondary:hover { |
|
background-color: #f5f5f5; |
|
} |
|
|
|
.qr-container { |
|
margin: 1rem auto; |
|
padding: 1rem; |
|
background: white; |
|
border-radius: 8px; |
|
border: 1px dashed var(--border-color); |
|
text-align: center; |
|
} |
|
|
|
.qr-placeholder { |
|
width: 200px; |
|
height: 200px; |
|
background-color: #f5f5f5; |
|
display: flex; |
|
flex-direction: column; |
|
align-items: center; |
|
justify-content: center; |
|
color: #999; |
|
font-size: 0.9rem; |
|
margin: 0 auto; |
|
text-align: center; |
|
padding: 0.5rem; |
|
border-radius: 4px; |
|
} |
|
|
|
.qr-image { |
|
width: 200px; |
|
height: 200px; |
|
display: none; |
|
} |
|
|
|
.help-links a { |
|
display: block; |
|
padding: 0.6rem 0; |
|
color: var(--dark-color); |
|
text-decoration: none; |
|
transition: color 0.2s ease; |
|
font-size: 0.95rem; |
|
} |
|
|
|
.help-links a:hover { |
|
color: var(--primary-color); |
|
} |
|
|
|
.help-links a i { |
|
margin-left: 0.5rem; |
|
} |
|
|
|
.main-content { |
|
background-color: var(--card-color); |
|
border-radius: 12px; |
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); |
|
padding: 2rem; |
|
} |
|
|
|
.tabs { |
|
display: flex; |
|
border-bottom: 1px solid var(--border-color); |
|
margin-bottom: 1.5rem; |
|
} |
|
|
|
.tab { |
|
padding: 0.8rem 1.5rem; |
|
cursor: pointer; |
|
font-weight: 600; |
|
color: #777; |
|
position: relative; |
|
} |
|
|
|
.tab.active { |
|
color: var(--dark-color); |
|
} |
|
|
|
.tab.active:after { |
|
content: ''; |
|
position: absolute; |
|
bottom: -1px; |
|
right: 0; |
|
width: 100%; |
|
height: 3px; |
|
background-color: var(--primary-color); |
|
border-radius: 3px 3px 0 0; |
|
} |
|
|
|
.tab-content { |
|
display: none; |
|
} |
|
|
|
.tab-content.active { |
|
display: block; |
|
} |
|
|
|
.upload-area { |
|
border: 2px dashed var(--border-color); |
|
border-radius: 8px; |
|
padding: 2.5rem; |
|
text-align: center; |
|
margin-bottom: 1.5rem; |
|
transition: all 0.3s ease; |
|
cursor: pointer; |
|
} |
|
|
|
.upload-area:hover { |
|
border-color: var(--primary-color); |
|
} |
|
|
|
.upload-icon { |
|
font-size: 3rem; |
|
color: var(--secondary-color); |
|
margin-bottom: 1rem; |
|
} |
|
|
|
.file-input { |
|
display: none; |
|
} |
|
|
|
.form-group { |
|
margin-bottom: 1.5rem; |
|
} |
|
|
|
label { |
|
display: block; |
|
margin-bottom: 0.5rem; |
|
font-weight: 600; |
|
color: var(--dark-color); |
|
} |
|
|
|
select, input, textarea { |
|
width: 100%; |
|
padding: 0.8rem; |
|
border: 1px solid var(--border-color); |
|
border-radius: 8px; |
|
font-size: 1rem; |
|
transition: border 0.3s ease; |
|
} |
|
|
|
select:focus, input:focus, textarea:focus { |
|
outline: none; |
|
border-color: var(--primary-color); |
|
box-shadow: 0 0 0 2px rgba(37, 211, 102, 0.2); |
|
} |
|
|
|
textarea { |
|
min-height: 150px; |
|
resize: vertical; |
|
} |
|
|
|
.preview-area { |
|
background-color: var(--light-color); |
|
padding: 1rem; |
|
border-radius: 8px; |
|
margin-top: 1rem; |
|
border-right: 3px solid var(--primary-color); |
|
} |
|
|
|
.actions { |
|
display: flex; |
|
justify-content: flex-end; |
|
gap: 1rem; |
|
margin-top: 2rem; |
|
} |
|
|
|
.btn-sm { |
|
padding: 0.6rem 1rem; |
|
width: auto; |
|
} |
|
|
|
.history-list { |
|
margin-top: 1.5rem; |
|
} |
|
|
|
.history-item { |
|
display: flex; |
|
justify-content: space-between; |
|
padding: 1rem; |
|
border-bottom: 1px solid var(--border-color); |
|
align-items: center; |
|
} |
|
|
|
.history-item:last-child { |
|
border-bottom: none; |
|
} |
|
|
|
.history-info h4 { |
|
margin-bottom: 0.3rem; |
|
color: var(--dark-color); |
|
} |
|
|
|
.history-info p { |
|
font-size: 0.9rem; |
|
color: #666; |
|
} |
|
|
|
.history-stats { |
|
text-align: left; |
|
} |
|
|
|
.history-stats span { |
|
display: inline-block; |
|
padding: 0.2rem 0.5rem; |
|
border-radius: 4px; |
|
font-size: 0.8rem; |
|
font-weight: 600; |
|
} |
|
|
|
.status-sent { |
|
background-color: var(--light-color); |
|
color: var(--dark-color); |
|
} |
|
|
|
.status-failed { |
|
background-color: #FFEBEE; |
|
color: var(--error-color); |
|
} |
|
|
|
.file-info { |
|
display: flex; |
|
align-items: center; |
|
gap: 0.8rem; |
|
margin-top: 1rem; |
|
padding: 0.8rem; |
|
background-color: #f9f9f9; |
|
border-radius: 8px; |
|
} |
|
|
|
.file-icon { |
|
font-size: 1.5rem; |
|
color: var(--secondary-color); |
|
} |
|
|
|
.file-details p:first-child { |
|
font-weight: 600; |
|
margin-bottom: 0.2rem; |
|
} |
|
|
|
.file-details p:last-child { |
|
font-size: 0.9rem; |
|
color: #666; |
|
} |
|
|
|
.progress-container { |
|
margin-top: 2rem; |
|
display: none; |
|
} |
|
|
|
.progress-bar { |
|
height: 8px; |
|
background-color: #eee; |
|
border-radius: 4px; |
|
margin-bottom: 0.5rem; |
|
overflow: hidden; |
|
} |
|
|
|
.progress { |
|
height: 100%; |
|
background-color: var(--primary-color); |
|
width: 0%; |
|
transition: width 0.3s ease; |
|
} |
|
|
|
.progress-text { |
|
display: flex; |
|
justify-content: space-between; |
|
font-size: 0.9rem; |
|
color: #666; |
|
} |
|
|
|
@media (max-width: 768px) { |
|
.dashboard { |
|
grid-template-columns: 1fr; |
|
} |
|
|
|
header { |
|
flex-direction: column; |
|
align-items: flex-start; |
|
gap: 1rem; |
|
} |
|
|
|
.tabs { |
|
overflow-x: auto; |
|
white-space: nowrap; |
|
} |
|
} |
|
|
|
|
|
.template-grid { |
|
display: grid; |
|
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); |
|
gap: 1.5rem; |
|
} |
|
|
|
.template-card { |
|
background-color: #f9f9f9; |
|
padding: 1.5rem; |
|
border-radius: 8px; |
|
transition: transform 0.2s ease; |
|
} |
|
|
|
.template-card:hover { |
|
transform: translateY(-5px); |
|
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); |
|
} |
|
|
|
.template-actions { |
|
display: flex; |
|
gap: 0.5rem; |
|
margin-top: 1rem; |
|
} |
|
|
|
.modal { |
|
display: none; |
|
position: fixed; |
|
top: 0; |
|
left: 0; |
|
width: 100%; |
|
height: 100%; |
|
background-color: rgba(0, 0, 0, 0.5); |
|
z-index: 1000; |
|
align-items: center; |
|
justify-content: center; |
|
} |
|
|
|
.modal-content { |
|
background-color: white; |
|
padding: 2rem; |
|
border-radius: 8px; |
|
width: 90%; |
|
max-width: 600px; |
|
max-height: 80vh; |
|
overflow-y: auto; |
|
} |
|
|
|
.modal-header { |
|
display: flex; |
|
justify-content: space-between; |
|
align-items: center; |
|
margin-bottom: 1.5rem; |
|
} |
|
|
|
.close-modal { |
|
font-size: 1.5rem; |
|
cursor: pointer; |
|
color: #666; |
|
} |
|
|
|
.close-modal:hover { |
|
color: var(--error-color); |
|
} |
|
|
|
|
|
.connection-steps { |
|
margin-top: 1.5rem; |
|
border-top: 1px solid var(--border-color); |
|
padding-top: 1.5rem; |
|
} |
|
|
|
.step { |
|
display: flex; |
|
gap: 1rem; |
|
margin-bottom: 1rem; |
|
align-items: flex-start; |
|
} |
|
|
|
.step-number { |
|
background-color: var(--secondary-color); |
|
color: white; |
|
width: 24px; |
|
height: 24px; |
|
border-radius: 50%; |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
font-size: 0.9rem; |
|
flex-shrink: 0; |
|
} |
|
|
|
.connection-help-btn { |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
gap: 0.5rem; |
|
margin-top: 1rem; |
|
color: var(--secondary-color); |
|
background: none; |
|
border: none; |
|
cursor: pointer; |
|
font-weight: 600; |
|
} |
|
|
|
.troubleshooting-content { |
|
background-color: #f9f9f9; |
|
padding: 1rem; |
|
border-radius: 8px; |
|
margin-top: 1rem; |
|
display: none; |
|
} |
|
|
|
.troubleshooting-content ul { |
|
padding-right: 1.5rem; |
|
margin-top: 0.5rem; |
|
} |
|
|
|
.troubleshooting-content li { |
|
margin-bottom: 0.5rem; |
|
} |
|
</style> |
|
</head> |
|
<body> |
|
<div class="container"> |
|
<header> |
|
<div class="logo"> |
|
<div class="logo-icon"> |
|
<i class="fab fa-whatsapp"></i> |
|
</div> |
|
<div class="logo-text"> |
|
<h1>شيت واتس</h1> |
|
<p>إرسال رسائل واتساب جماعية من ملف إكسل</p> |
|
</div> |
|
</div> |
|
<div class="user-profile"> |
|
<div class="user-avatar">م</div> |
|
<div> |
|
<div style="font-weight: 600;">محمد أحمد</div> |
|
<div style="font-size: 0.9rem; color: #666;">الخطة الأساسية</div> |
|
</div> |
|
</div> |
|
</header> |
|
|
|
<div class="dashboard"> |
|
<div class="sidebar"> |
|
<div class="sidebar-section"> |
|
<h3><i class="fas fa-plug"></i> حالة الاتصال</h3> |
|
<div class="connection-status status-disconnected"> |
|
<i class="fas fa-exclamation-circle"></i> غير متصل بالواتساب |
|
</div> |
|
<button class="btn btn-primary" id="connectBtn"> |
|
<i class="fas fa-qrcode"></i> الاتصال بالواتساب |
|
</button> |
|
<button class="btn btn-secondary" id="disconnectBtn" style="display: none;"> |
|
<i class="fas fa-unlink"></i> قطع الاتصال |
|
</button> |
|
|
|
<div class="qr-container" id="qrContainer" style="display: none; margin-top: 1.5rem;"> |
|
<h4 style="margin-bottom: 1rem; color: var(--dark-color);">مسح رمز QR</h4> |
|
<div class="qr-placeholder" id="qrPlaceholder"> |
|
<i class="fas fa-qrcode fa-spin" style="color: var(--warning-color); font-size: 2rem; margin-bottom: 0.5rem;"></i> |
|
<p>جاري توليد رمز QR ...</p> |
|
</div> |
|
<img src="" class="qr-image" id="qrImage" alt="رمز QR للواتساب"> |
|
<p style="font-size: 0.9rem; margin-top: 1rem; color: #666;">1. افتح واتساب على هاتفك</p> |
|
<p style="font-size: 0.9rem; color: #666;">2. اضغط على النقاط الثلاث → الأجهزة المرتبطة → ربط جهاز</p> |
|
<p style="font-size: 0.9rem; color: #666;">3. مسح الرمز أعلاه</p> |
|
|
|
<div class="connection-steps" id="connectionSteps"> |
|
<div class="step"> |
|
<div class="step-number">1</div> |
|
<div>افتح تطبيق واتساب على هاتفك</div> |
|
</div> |
|
<div class="step"> |
|
<div class="step-number">2</div> |
|
<div>اضغط على <strong>النقاط الثلاث</strong> → <strong>الأجهزة المرتبطة</strong> → <strong>ربط جهاز</strong></div> |
|
</div> |
|
<div class="step"> |
|
<div class="step-number">3</div> |
|
<div>مسح رمز QR الذي يظهر أعلاه</div> |
|
</div> |
|
|
|
<button class="connection-help-btn" id="troubleshootingBtn"> |
|
<i class="fas fa-question-circle"></i> لا يستطيع مسح الرمز؟ |
|
</button> |
|
|
|
<div class="troubleshooting-content" id="troubleshootingContent"> |
|
<h4>حل مشاكل الاتصال:</h4> |
|
<ul> |
|
<li>تأكد من أن هاتفك متصل بالإنترنت</li> |
|
<li>تحقق من أن تطبيق واتساب محدث لأحدث إصدار</li> |
|
<li>جرب إعادة تشغيل تطبيق واتساب على الهاتف</li> |
|
<li>تأكد من أن شاشة هاتفك نظيفة وغير معتمة</li> |
|
<li>قرب أو بعد الكاميرا عن الرمز حسب الحاجة</li> |
|
<li>إن استمرت المشكلة، جرب إعادة توليد الرمز</li> |
|
</ul> |
|
|
|
<button class="btn btn-sm btn-secondary" style="margin-top: 1rem;" id="refreshQrBtn"> |
|
<i class="fas fa-sync-alt"></i> إعادة توليد الرمز |
|
</button> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<div class="sidebar-section"> |
|
<h3><i class="fas fa-chart-line"></i> إحصائيات</h3> |
|
<div style="background-color: #f9f9f9; padding: 1rem; border-radius: 8px;"> |
|
<div style="display: flex; justify-content: space-between; margin-bottom: 0.8rem;"> |
|
<span>الرصيد المتبقي:</span> |
|
<span style="font-weight: 600;">250 رسالة</span> |
|
</div> |
|
<div style="display: flex; justify-content: space-between; margin-bottom: 0.8rem;"> |
|
<span>تم إرسالها اليوم:</span> |
|
<span style="font-weight: 600;">50 رسالة</span> |
|
</div> |
|
<div style="display: flex; justify-content: space-between;"> |
|
<span>إجمالي الإرسال:</span> |
|
<span style="font-weight: 600;">1,250 رسالة</span> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<div class="sidebar-section"> |
|
<h3><i class="fas fa-question-circle"></i> المساعدة</h3> |
|
<div class="help-links"> |
|
<a href="#" class="help-link" data-section="guide"><i class="fas fa-file-alt"></i> دليل الاستخدام</a> |
|
<a href="#" class="help-link" data-section="tutorial"><i class="fas fa-video"></i> فيديو تعليمي</a> |
|
<a href="#" class="help-link" data-section="example"><i class="fas fa-file-excel"></i> نموذج ملف إكسل</a> |
|
<a href="#" class="help-link" data-section="contact"><i class="fas fa-envelope"></i> تواصل مع الدعم</a> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<div class="main-content"> |
|
<div class="tabs"> |
|
<div class="tab active" data-tab="send">ارسال رسائل</div> |
|
<div class="tab" data-tab="history">سجل الإرسال</div> |
|
<div class="tab" data-tab="templates">قوالب جاهزة</div> |
|
</div> |
|
|
|
<div class="tab-content active" id="send-tab"> |
|
<div id="disconnectedWarning" class="connection-status status-disconnected" style="margin-bottom: 2rem;"> |
|
<i class="fas fa-exclamation-triangle"></i> يجب عليك ربط حساب الواتساب أولاً لإرسال الرسائل |
|
</div> |
|
|
|
<div class="upload-area" id="dropZone"> |
|
<div class="upload-icon"> |
|
<i class="fas fa-file-excel"></i> |
|
</div> |
|
<h3>قم بتحميل ملف إكسل</h3> |
|
<p>اسحب الملف إلى هنا أو انقر للاختيار</p> |
|
<p style="font-size: 0.9rem; color: #666; margin-top: 0.5rem;">يدعم ملفات CSV و XLSX (إكسل)</p> |
|
<input type="file" id="fileInput" class="file-input" accept=".csv,.xlsx,.xls"> |
|
</div> |
|
|
|
<div id="fileContainer" style="display: none;"> |
|
<div class="file-info"> |
|
<div class="file-icon"> |
|
<i class="fas fa-file-excel"></i> |
|
</div> |
|
<div class="file-details"> |
|
<p id="fileName">students.xlsx</p> |
|
<p id="fileSize">150 صف، 3 أعمدة (5.2 MB)</p> |
|
</div> |
|
<button class="btn btn-sm" id="removeFileBtn" style="background: none; color: var(--error-color); padding: 0;"> |
|
<i class="fas fa-trash"></i> |
|
</button> |
|
</div> |
|
|
|
<div class="form-group"> |
|
<label for="phoneColumn">اختر عمود رقم الهاتف</label> |
|
<select id="phoneColumn"> |
|
<option value="">اختر من القائمة</option> |
|
<option value="mobile" selected>الهاتف المحمول</option> |
|
<option value="phone">رقم الهاتف</option> |
|
<option value="contact">معلومات الاتصال</option> |
|
</select> |
|
</div> |
|
|
|
<div class="form-group"> |
|
<label for="countryCode">رمز الدولة (اختياري)</label> |
|
<select id="countryCode"> |
|
<option value="">بدون رمز دولة</option> |
|
<option value="+20" selected>مصر (+20)</option> |
|
<option value="+966">السعودية (+966)</option> |
|
<option value="+971">الإمارات (+971)</option> |
|
<option value="+962">الأردن (+962)</option> |
|
<option value="+965">الكويت (+965)</option> |
|
<option value="+968">عمان (+968)</option> |
|
</select> |
|
</div> |
|
|
|
<div class="form-group"> |
|
<label for="nameColumn">اختر عمود الاسم (اختياري)</label> |
|
<select id="nameColumn"> |
|
<option value="">بدون أسماء</option> |
|
<option value="name" selected>الاسم</option> |
|
<option value="full_name">الاسم الكامل</option> |
|
<option value="first_name">الاسم الأول</option> |
|
</select> |
|
</div> |
|
|
|
<div class="form-group"> |
|
<label for="messageTemplate">نص الرسالة</label> |
|
<textarea id="messageTemplate" placeholder="اكتب نص الرسالة هنا. استخدم {name} لإضافة اسم المستلم">مرحبا {name}، |
|
|
|
هذه رسالة تجريبية من شيت واتس لإرسال رسائل واتساب جماعية. |
|
|
|
مع التحية، |
|
الفريق</textarea> |
|
<div class="preview-area"> |
|
<strong>معاينة الرسالة:</strong> |
|
<div id="messagePreview">مرحبا أحمد، |
|
|
|
هذه رسالة تجريبية من شيت واتس لإرسال رسائل واتساب جماعية. |
|
|
|
مع التحية، |
|
الفريق</div> |
|
</div> |
|
</div> |
|
|
|
<div class="form-group"> |
|
<label for="delay">فاصل التوقيت بين الرسائل</label> |
|
<select id="delay"> |
|
<option value="5">5 ثواني (سريع)</option> |
|
<option value="10" selected>10 ثواني (موصى به)</option> |
|
<option value="20">20 ثانية (آمن)</option> |
|
<option value="30">30 ثانية (حذر)</option> |
|
</select> |
|
</div> |
|
|
|
<div class="actions"> |
|
<button class="btn btn-secondary btn-sm" id="resetBtn"> |
|
<i class="fas fa-redo"></i> مسح الكل |
|
</button> |
|
<button class="btn btn-primary btn-sm" id="sendBtn" disabled> |
|
<i class="fas fa-paper-plane"></i> بدء الإرسال |
|
</button> |
|
</div> |
|
|
|
<div class="progress-container" id="progressContainer"> |
|
<div class="progress-bar"> |
|
<div class="progress" id="progressBar"></div> |
|
</div> |
|
<div class="progress-text"> |
|
<span id="progressStatus">جاهز للإرسال</span> |
|
<span id="progressCount">0/0</span> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<div class="tab-content" id="history-tab"> |
|
<h3 style="margin-bottom: 1.5rem;">سجل رسائل واتساب المرسلة</h3> |
|
|
|
<div class="history-list"> |
|
<div class="history-item"> |
|
<div class="history-info"> |
|
<h4>إرسال نتائج الفصل الأول</h4> |
|
<p>15 يونيو 2023 • 150 رسالة</p> |
|
</div> |
|
<div class="history-stats"> |
|
<span class="status-sent">140 تم إرسالها</span> |
|
<span class="status-failed">10 فشل</span> |
|
</div> |
|
</div> |
|
|
|
<div class="history-item"> |
|
<div class="history-info"> |
|
<h4>إرسال تذكير بالدفع</h4> |
|
<p>10 يونيو 2023 • 80 رسالة</p> |
|
</div> |
|
<div class="history-stats"> |
|
<span class="status-sent">75 تم إرسالها</span> |
|
<span class="status-failed">5 فشل</span> |
|
</div> |
|
</div> |
|
|
|
<div class="history-item"> |
|
<div class="history-info"> |
|
<h4>إعلان العطلة الصيفية</h4> |
|
<p>1 يونيو 2023 • 200 رسالة</p> |
|
</div> |
|
<div class="history-stats"> |
|
<span class="status-sent">195 تم إرسالها</span> |
|
<span class="status-failed">5 فشل</span> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<div class="tab-content" id="templates-tab"> |
|
<h3 style="margin-bottom: 1.5rem;">قوالب رسائل جاهزة</h3> |
|
|
|
<div class="template-grid"> |
|
<div class="template-card"> |
|
<h4 style="margin-bottom: 1rem; color: var(--dark-color);">تذكير بالدفع</h4> |
|
<p style="margin-bottom: 1rem; color: #666;">مرحبًا {name}، |
|
|
|
نذكركم بسداد القسط الثاني المستحق بتاريخ 15/6/2023. |
|
|
|
للاستفسار: 0123456789 |
|
|
|
شكرًا لتعاونكم.</p> |
|
<div class="template-actions"> |
|
<button class="btn btn-sm btn-secondary template-copy-btn" data-template="payment-reminder"> |
|
<i class="fas fa-copy"></i> نسخ النص |
|
</button> |
|
<button class="btn btn-sm btn-primary template-use-btn"> |
|
<i class="fas fa-paper-plane"></i> استخدام |
|
</button> |
|
</div> |
|
</div> |
|
|
|
<div class="template-card"> |
|
<h4 style="margin-bottom: 1rem; color: var(--dark-color);">إعلان اجتماع أولياء الأمور</h4> |
|
<p style="margin-bottom: 1rem; color: #666;">السيد/السيدة ولي أمر الطالب {name}، |
|
|
|
نود دعوتكم لحضور اجتماع أولياء الأمور يوم الأربعاء الموافق 20/6/2023 في الساعة 4 مساءً. |
|
|
|
نرجو التأكيد.</p> |
|
<div class="template-actions"> |
|
<button class="btn btn-sm btn-secondary template-copy-btn" data-template="parent-meeting"> |
|
<i class="fas fa-copy"></i> نسخ النص |
|
</button> |
|
<button class="btn btn-sm btn-primary template-use-btn"> |
|
<i class="fas fa-paper-plane"></i> استخدام |
|
</button> |
|
</div> |
|
</div> |
|
|
|
<div class="template-card"> |
|
<h4 style="margin-bottom: 1rem; color: var(--dark-color);">إخطار بنتيجة الاختبار</h4> |
|
<p style="margin-bottom: 1rem; color: #666;">الأخ/الأخت {name}، |
|
|
|
نحيط علمكم بنتيجة اختبار نهاية الفصل الدراسي والتي يمكن الاطلاع عليها من خلال الرابط التالي: |
|
|
|
www.school.edu/results |
|
|
|
مع تمنياتنا لكم بالتوفيق.</p> |
|
<div class="template-actions"> |
|
<button class="btn btn-sm btn-secondary template-copy-btn" data-template="exam-results"> |
|
<i class="fas fa-copy"></i> نسخ النص |
|
</button> |
|
<button class="btn btn-sm btn-primary template-use-btn"> |
|
<i class="fas fa-paper-plane"></i> استخدام |
|
</button> |
|
</div> |
|
</div> |
|
|
|
<div class="template-card"> |
|
<h4 style="margin-bottom: 1rem; color: var(--dark-color);">تأكيد الحجز</h4> |
|
<p style="margin-bottom: 1rem; color: #666;">السيد/السيدة {name} المحترم، |
|
|
|
نشكرك على حجزك معنا بتاريخ 25/6/2023. رقم الحجز هو #12345. |
|
|
|
سيتم التواصل معك قبل الموعد بيوم للتذكير. |
|
|
|
مع الشكر.</p> |
|
<div class="template-actions"> |
|
<button class="btn btn-sm btn-secondary template-copy-btn" data-template="booking-confirm"> |
|
<i class="fas fa-copy"></i> نسخ النص |
|
</button> |
|
<button class="btn btn-sm btn-primary template-use-btn"> |
|
<i class="fas fa-paper-plane"></i> استخدام |
|
</button> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="modal" id="helpModal"> |
|
<div class="modal-content"> |
|
<div class="modal-header"> |
|
<h3 id="modalTitle">دليل الاستخدام</h3> |
|
<span class="close-modal">×</span> |
|
</div> |
|
<div id="modalContent"> |
|
<p>محتويات الدليل سوف تظهر هنا...</p> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<script> |
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
|
const tabs = document.querySelectorAll('.tab'); |
|
tabs.forEach(tab => { |
|
tab.addEventListener('click', function() { |
|
|
|
document.querySelectorAll('.tab').forEach(t => t.classList.remove('active')); |
|
document.querySelectorAll('.tab-content').forEach(c => c.classList.remove('active')); |
|
|
|
|
|
this.classList.add('active'); |
|
|
|
|
|
const tabId = this.getAttribute('data-tab'); |
|
document.getElementById(tabId + '-tab').classList.add('active'); |
|
}); |
|
}); |
|
|
|
|
|
const connectBtn = document.getElementById('connectBtn'); |
|
const disconnectBtn = document.getElementById('disconnectBtn'); |
|
const qrContainer = document.getElementById('qrContainer'); |
|
const qrPlaceholder = document.getElementById('qrPlaceholder'); |
|
const qrImage = document.getElementById('qrImage'); |
|
const troubleshootingBtn = document.getElementById('troubleshootingBtn'); |
|
const troubleshootingContent = document.getElementById('troubleshootingContent'); |
|
const refreshQrBtn = document.getElementById('refreshQrBtn'); |
|
const disconnectedWarning = document.getElementById('disconnectedWarning'); |
|
|
|
|
|
function generateQRCode() { |
|
qrPlaceholder.style.display = 'flex'; |
|
qrImage.style.display = 'none'; |
|
|
|
|
|
qrPlaceholder.innerHTML = ` |
|
<i class="fas fa-qrcode fa-spin" style="color: var(--warning-color); font-size: 2rem; margin-bottom: 0.5rem;"></i> |
|
<p>جارٍ توليد رمز QR ...</p> |
|
`; |
|
|
|
|
|
setTimeout(() => { |
|
qrPlaceholder.innerHTML = ''; |
|
qrPlaceholder.style.display = 'none'; |
|
qrImage.src = 'https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=https://web.whatsapp.com/connect-' + Date.now() + Math.floor(Math.random() * 1000); |
|
qrImage.style.display = 'block'; |
|
}, 2000); |
|
} |
|
|
|
connectBtn.addEventListener('click', function() { |
|
|
|
connectBtn.innerHTML = '<i class="fas fa-circle-notch fa-spin"></i> جاري الاتصال...'; |
|
connectBtn.disabled = true; |
|
|
|
|
|
qrContainer.style.display = 'block'; |
|
generateQRCode(); |
|
|
|
|
|
const connectionTimeout = setTimeout(() => { |
|
|
|
document.querySelector('.connection-status').className = 'connection-status status-connected'; |
|
document.querySelector('.connection-status').innerHTML = '<i class="fas fa-check-circle"></i> متصل بالواتساب'; |
|
|
|
|
|
qrContainer.style.display = 'none'; |
|
|
|
|
|
connectBtn.style.display = 'none'; |
|
disconnectBtn.style.display = 'inline-block'; |
|
|
|
|
|
updateSendButton(); |
|
|
|
|
|
disconnectedWarning.style.display = 'none'; |
|
|
|
|
|
connectBtn.innerHTML = '<i class="fas fa-qrcode"></i> الاتصال بالواتساب'; |
|
connectBtn.disabled = false; |
|
}, 8000); |
|
|
|
|
|
window.whatsappConnectionTimeout = connectionTimeout; |
|
}); |
|
|
|
disconnectBtn.addEventListener('click', function() { |
|
|
|
if (window.whatsappConnectionTimeout) { |
|
clearTimeout(window.whatsappConnectionTimeout); |
|
} |
|
|
|
|
|
document.querySelector('.connection-status').className = 'connection-status status-disconnected'; |
|
document.querySelector('.connection-status').innerHTML = '<i class="fas fa-exclamation-circle"></i> غير متصل بالواتساب'; |
|
|
|
|
|
qrPlaceholder.style.display = 'flex'; |
|
qrImage.style.display = 'none'; |
|
|
|
|
|
connectBtn.style.display = 'inline-block'; |
|
disconnectBtn.style.display = 'none'; |
|
|
|
|
|
disconnectedWarning.style.display = 'block'; |
|
|
|
|
|
connectBtn.innerHTML = '<i class="fas fa-qrcode"></i> الاتصال بالواتساب'; |
|
connectBtn.disabled = false; |
|
|
|
|
|
updateSendButton(); |
|
}); |
|
|
|
|
|
troubleshootingBtn.addEventListener('click', function() { |
|
if (troubleshootingContent.style.display === 'none' || !troubleshootingContent.style.display) { |
|
troubleshootingContent.style.display = 'block'; |
|
this.innerHTML = '<i class="fas fa-times-circle"></i> إغلاق الإرشادات'; |
|
} else { |
|
troubleshootingContent.style.display = 'none'; |
|
this.innerHTML = '<i class="fas fa-question-circle"></i> لا يستطيع مسح الرمز؟'; |
|
} |
|
}); |
|
|
|
|
|
refreshQrBtn.addEventListener('click', function() { |
|
generateQRCode(); |
|
troubleshootingContent.style.display = 'none'; |
|
troubleshootingBtn.innerHTML = '<i class="fas fa-question-circle"></i> لا يستطيع مسح الرمز؟'; |
|
}); |
|
|
|
|
|
const dropZone = document.getElementById('dropZone'); |
|
const fileInput = document.getElementById('fileInput'); |
|
const fileContainer = document.getElementById('fileContainer'); |
|
const removeFileBtn = document.getElementById('removeFileBtn'); |
|
|
|
dropZone.addEventListener('click', function() { |
|
fileInput.click(); |
|
}); |
|
|
|
fileInput.addEventListener('change', function() { |
|
if (this.files.length > 0) { |
|
handleFileUpload(this.files[0]); |
|
} |
|
}); |
|
|
|
removeFileBtn.addEventListener('click', function(e) { |
|
e.stopPropagation(); |
|
resetFileUpload(); |
|
}); |
|
|
|
function handleFileUpload(file) { |
|
const fileSize = (file.size / (1024*1024)).toFixed(1); |
|
const fileName = file.name; |
|
|
|
|
|
const rowCount = Math.floor(Math.random() * 100) + 50; |
|
const columnCount = Math.floor(Math.random() * 5) + 2; |
|
|
|
|
|
document.getElementById('fileName').textContent = fileName; |
|
document.getElementById('fileSize').textContent = `${rowCount} صف، ${columnCount} أعمدة (${fileSize} MB)`; |
|
|
|
|
|
fileContainer.style.display = 'block'; |
|
|
|
|
|
updateSendButton(); |
|
} |
|
|
|
function resetFileUpload() { |
|
|
|
fileInput.value = ''; |
|
|
|
|
|
fileContainer.style.display = 'none'; |
|
|
|
|
|
updateSendButton(); |
|
} |
|
|
|
|
|
['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => { |
|
dropZone.addEventListener(eventName, preventDefaults, false); |
|
document.body.addEventListener(eventName, preventDefaults, false); |
|
}); |
|
|
|
function preventDefaults(e) { |
|
e.preventDefault(); |
|
e.stopPropagation(); |
|
} |
|
|
|
['dragenter', 'dragover'].forEach(eventName => { |
|
dropZone.addEventListener(eventName, highlight, false); |
|
}); |
|
|
|
['dragleave', 'drop'].forEach(eventName => { |
|
dropZone.addEventListener(eventName, unhighlight, false); |
|
}); |
|
|
|
function highlight() { |
|
dropZone.style.borderColor = 'var(--primary-color)'; |
|
dropZone.style.backgroundColor = 'rgba(220, 248, 198, 0.3)'; |
|
} |
|
|
|
function unhighlight() { |
|
dropZone.style.borderColor = 'var(--border-color)'; |
|
dropZone.style.backgroundColor = 'transparent'; |
|
} |
|
|
|
dropZone.addEventListener('drop', handleDrop, false); |
|
|
|
function handleDrop(e) { |
|
const dt = e.dataTransfer; |
|
const files = dt.files; |
|
|
|
if (files.length > 0) { |
|
handleFileUpload(files[0]); |
|
} |
|
} |
|
|
|
|
|
const messageTemplate = document.getElementById('messageTemplate'); |
|
messageTemplate.addEventListener('input', updateMessagePreview); |
|
|
|
function updateMessagePreview() { |
|
const name = document.getElementById('nameColumn').value ? 'محمد' : 'عميلنا العزيز'; |
|
let message = messageTemplate.value.replace(/\{name\}/g, name); |
|
document.getElementById('messagePreview').textContent = message; |
|
} |
|
|
|
|
|
function updateSendButton() { |
|
const sendBtn = document.getElementById('sendBtn'); |
|
const isConnected = document.querySelector('.connection-status').classList.contains('status-connected'); |
|
const hasFile = document.getElementById('fileContainer').style.display !== 'none'; |
|
|
|
sendBtn.disabled = !(isConnected && hasFile); |
|
} |
|
|
|
|
|
document.getElementById('resetBtn').addEventListener('click', function() { |
|
resetFileUpload(); |
|
document.getElementById('phoneColumn').value = 'mobile'; |
|
document.getElementById('countryCode').value = '+20'; |
|
document.getElementById('nameColumn').value = 'name'; |
|
document.getElementById('messageTemplate').value = `مرحبا {name}، |
|
|
|
هذه رسالة تجريبية من شيت واتس لإرسال رسائل واتساب جماعية. |
|
|
|
مع التحية، |
|
الفريق`; |
|
document.getElementById('delay').value = '10'; |
|
|
|
|
|
updateMessagePreview(); |
|
}); |
|
|
|
|
|
const sendBtn = document.getElementById('sendBtn'); |
|
sendBtn.addEventListener('click', function() { |
|
if (document.querySelector('.connection-status').classList.contains('status-disconnected')) { |
|
alert('يجب ربط حساب الواتساب أولاً قبل الإرسال'); |
|
return; |
|
} |
|
|
|
const progressContainer = document.getElementById('progressContainer'); |
|
const progressBar = document.getElementById('progressBar'); |
|
const progressStatus = document.getElementById('progressStatus'); |
|
const progressCount = document.getElementById('progressCount'); |
|
|
|
|
|
const fileInfo = document.getElementById('fileSize').textContent; |
|
const totalMessages = parseInt(fileInfo.split(' ')[0]) || 100; |
|
|
|
|
|
progressContainer.style.display = 'block'; |
|
progressStatus.textContent = 'جاري الإرسال...'; |
|
progressCount.textContent = `0/${totalMessages}`; |
|
sendBtn.disabled = true; |
|
sendBtn.innerHTML = '<i class="fas fa-circle-notch fa-spin"></i> جاري الإرسال...'; |
|
|
|
|
|
let progress = 0; |
|
let sentCount = 0; |
|
const interval = setInterval(() => { |
|
progress += 1 + Math.random() * 4; |
|
if (progress >= 100) progress = 100; |
|
|
|
progressBar.style.width = progress + '%'; |
|
sentCount = Math.floor(totalMessages * (progress / 100)); |
|
progressCount.textContent = `${sentCount}/${totalMessages}`; |
|
|
|
if (progress === 100) { |
|
clearInterval(interval); |
|
progressStatus.textContent = 'تم الإرسال بنجاح!'; |
|
sendBtn.innerHTML = '<i class="fas fa-check"></i> تم الإرسال'; |
|
|
|
|
|
addToHistory(totalMessages); |
|
} |
|
}, 500); |
|
}); |
|
|
|
function addToHistory(totalMessages) { |
|
const now = new Date(); |
|
const dateString = now.toLocaleDateString('ar-EG', { day: 'numeric', month: 'long', year: 'numeric' }); |
|
const successCount = Math.floor(totalMessages * 0.95); |
|
const failedCount = totalMessages - successCount; |
|
|
|
const historyItem = document.createElement('div'); |
|
historyItem.className = 'history-item'; |
|
historyItem.innerHTML = ` |
|
<div class="history-info"> |
|
<h4>إرسال ${document.getElementById('fileName').textContent.split('.')[0]}</h4> |
|
<p>${dateString} • ${totalMessages} رسالة</p> |
|
</div> |
|
<div class="history-stats"> |
|
<span class="status-sent">${successCount} تم إرسالها</span> |
|
<span class="status-failed">${failedCount} فشل</span> |
|
</div> |
|
`; |
|
|
|
|
|
const historyList = document.querySelector('.history-list'); |
|
historyList.insertBefore(historyItem, historyList.firstChild); |
|
} |
|
|
|
|
|
const templateUseButtons = document.querySelectorAll('.template-use-btn'); |
|
const templateCopyButtons = document.querySelectorAll('.template-copy-btn'); |
|
|
|
templateUseButtons.forEach(button => { |
|
button.addEventListener('click', function() { |
|
const templateText = this.parentElement.previousElementSibling.textContent.trim(); |
|
document.getElementById('messageTemplate').value = templateText; |
|
updateMessagePreview(); |
|
|
|
|
|
document.querySelector('.tab[data-tab="send"]').click(); |
|
|
|
|
|
document.getElementById('messageTemplate').scrollIntoView({ behavior: 'smooth' }); |
|
}); |
|
}); |
|
|
|
templateCopyButtons.forEach(button => { |
|
button.addEventListener('click', function() { |
|
const templateText = this.parentElement.previousElementSibling.textContent.trim(); |
|
navigator.clipboard.writeText(templateText).then(() => { |
|
|
|
const originalText = this.innerHTML; |
|
this.innerHTML = '<i class="fas fa-check"></i> تم النسخ'; |
|
|
|
setTimeout(() => { |
|
this.innerHTML = originalText; |
|
}, 2000); |
|
}); |
|
}); |
|
}); |
|
|
|
|
|
const helpModal = document.getElementById('helpModal'); |
|
const modalTitle = document.getElementById('modalTitle'); |
|
const modalContent = document.getElementById('modalContent'); |
|
const closeModal = document.querySelector('.close-modal'); |
|
const helpLinks = document.querySelectorAll('.help-link'); |
|
|
|
helpLinks.forEach(link => { |
|
link.addEventListener('click', function(e) { |
|
e.preventDefault(); |
|
const section = this.getAttribute('data-section'); |
|
|
|
|
|
helpLinks.forEach(l => l.classList.remove('help-link-active')); |
|
this.classList.add('help-link-active'); |
|
|
|
|
|
switch(section) { |
|
case 'guide': |
|
modalTitle.textContent = 'دليل الاستخدام'; |
|
modalContent.innerHTML = ` |
|
<h4>كيفية استخدام النظام:</h4> |
|
<ol style="padding-right: 1.5rem; margin-bottom: 1rem;"> |
|
<li style="margin-bottom: 0.5rem;">اتصل بحساب الواتساب الخاص بك باستخدام رمز QR</li> |
|
<li style="margin-bottom: 0.5rem;">قم بتحميل ملف إكسل يحتوي على أرقام الهواتف</li> |
|
<li style="margin-bottom: 0.5rem;">اختر عمود رقم الهاتف و(اختياري) عمود الأسماء</li> |
|
<li style="margin-bottom: 0.5rem;">اكتب نص الرسالة مع استخدام {name} لاستبدال الأسماء</li> |
|
<li style="margin-bottom: 0.5rem;">اضغط على "بدء الإرسال"</li> |
|
</ol> |
|
<p>ملاحظة: تأكد من أن أرقام الهواتف صحيحة وبالتنسيق الدولي.</p> |
|
`; |
|
break; |
|
case 'tutorial': |
|
modalTitle.textContent = 'فيديو تعليمي'; |
|
modalContent.innerHTML = ` |
|
<div style="text-align: center; margin: 1rem 0;"> |
|
<i class="fas fa-video" style="font-size: 3rem; color: var(--secondary-color); margin-bottom: 1rem;"></i> |
|
<p>شاهد هذا الفيديو للتعرف على كيفية استخدام النظام خطوة بخطوة</p> |
|
<button class="btn btn-primary" style="margin-top: 1rem;"> |
|
<i class="fab fa-youtube"></i> مشاهدة الفيديو |
|
</button> |
|
</div> |
|
`; |
|
break; |
|
case 'example': |
|
modalTitle.textContent = 'نموذج ملف إكسل'; |
|
modalContent.innerHTML = ` |
|
<p>قم بتحميل نموذج ملف إكسل جاهز للاستخدام:</p> |
|
<div style="margin: 1rem 0; padding: 1rem; background-color: #f5f5f5; border-radius: 8px;"> |
|
<div style="display: flex; align-items: center; gap: 1rem;"> |
|
<i class="fas fa-file-excel" style="font-size: 2rem; color: var(--success-color);"></i> |
|
<div> |
|
<div style="font-weight: 600;">نموذج_لإرسال_الرسائل.xlsx</div> |
|
<div style="font-size: 0.9rem; color: #666;">5 أعمدة • 12 كيلوبايت</div> |
|
</div> |
|
</div> |
|
</div> |
|
<button class="btn btn-primary" style="margin-top: 1rem;"> |
|
<i class="fas fa-download"></i> تحميل النومذج |
|
</button> |
|
<p style="margin-top: 1rem; font-size: 0.9rem;">ملاحظة: يمكنك تعديل النموذج حسب احتياجاتك مع الحفاظ على هيكل الأعمدة الأساسي.</p> |
|
`; |
|
break; |
|
case 'contact': |
|
modalTitle.textContent = 'تواصل مع الدعم'; |
|
modalContent.innerHTML = ` |
|
<div style="margin-bottom: 1.5rem;"> |
|
<h4 style="margin-bottom: 1rem;">طرق التواصل:</h4> |
|
<div style="display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem;"> |
|
<i class="fas fa-envelope" style="color: var(--primary-color);"></i> |
|
<span>[email protected]</span> |
|
</div> |
|
<div style="display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem;"> |
|
<i class="fas fa-phone" style="color: var(--primary-color);"></i> |
|
<span>+20 100 123 4567</span> |
|
</div> |
|
<div style="display: flex; align-items: center; gap: 1rem;"> |
|
<i class="fab fa-whatsapp" style="color: var(--primary-color);"></i> |
|
<span>+20 100 123 4567</span> |
|
</div> |
|
</div> |
|
<div> |
|
<h4 style="margin-bottom: 1rem;">أوقات العمل:</h4> |
|
<p>من الأحد إلى الخميس، من 9 صباحاً إلى 5 مساءً بتوقيت القاهرة</p> |
|
</div> |
|
`; |
|
break; |
|
} |
|
|
|
|
|
helpModal.style.display = 'flex'; |
|
}); |
|
}); |
|
|
|
closeModal.addEventListener('click', function() { |
|
helpModal.style.display = 'none'; |
|
}); |
|
|
|
window.addEventListener('click', function(e) { |
|
if (e.target === helpModal) { |
|
helpModal.style.display = 'none'; |
|
} |
|
}); |
|
|
|
|
|
</html> |
