|
|
<!DOCTYPE html> |
|
|
<html dir="rtl" lang="ar"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>مكتبة النور - دردشة مباشرة</title> |
|
|
<style> |
|
|
body { |
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; |
|
|
margin: 0; |
|
|
padding: 20px; |
|
|
background-color: #f5f5f5; |
|
|
} |
|
|
.chat-container { |
|
|
max-width: 800px; |
|
|
margin: 0 auto; |
|
|
background: white; |
|
|
border-radius: 15px; |
|
|
box-shadow: 0 2px 15px rgba(0,0,0,0.1); |
|
|
padding: 20px; |
|
|
} |
|
|
.header { |
|
|
text-align: center; |
|
|
margin-bottom: 20px; |
|
|
padding: 10px; |
|
|
background-color: #004d99; |
|
|
color: white; |
|
|
border-radius: 10px; |
|
|
} |
|
|
.chat-box { |
|
|
height: 400px; |
|
|
overflow-y: auto; |
|
|
border: 1px solid #ddd; |
|
|
padding: 15px; |
|
|
margin-bottom: 20px; |
|
|
border-radius: 8px; |
|
|
background-color: #fafafa; |
|
|
} |
|
|
.input-container { |
|
|
display: flex; |
|
|
gap: 10px; |
|
|
margin-bottom: 10px; |
|
|
} |
|
|
input { |
|
|
flex: 1; |
|
|
padding: 12px; |
|
|
border: 2px solid #004d99; |
|
|
border-radius: 8px; |
|
|
font-size: 16px; |
|
|
} |
|
|
button { |
|
|
padding: 12px 25px; |
|
|
background-color: #004d99; |
|
|
color: white; |
|
|
border: none; |
|
|
border-radius: 8px; |
|
|
cursor: pointer; |
|
|
font-weight: bold; |
|
|
} |
|
|
button:hover { |
|
|
background-color: #003366; |
|
|
} |
|
|
.message { |
|
|
margin-bottom: 12px; |
|
|
padding: 12px; |
|
|
border-radius: 8px; |
|
|
max-width: 80%; |
|
|
} |
|
|
.user-message { |
|
|
background-color: #e3f2fd; |
|
|
margin-left: 20%; |
|
|
} |
|
|
.bot-message { |
|
|
background-color: #f0f4f8; |
|
|
margin-right: 20%; |
|
|
} |
|
|
.faq-container { |
|
|
display: grid; |
|
|
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); |
|
|
gap: 10px; |
|
|
margin-bottom: 15px; |
|
|
} |
|
|
.faq-button { |
|
|
background-color: #e3f2fd; |
|
|
border: 1px solid #004d99; |
|
|
padding: 8px; |
|
|
border-radius: 5px; |
|
|
cursor: pointer; |
|
|
transition: background-color 0.3s; |
|
|
} |
|
|
.faq-button:hover { |
|
|
background-color: #bbdefb; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
<div class="chat-container"> |
|
|
<div class="header"> |
|
|
<h1>مكتبة النور</h1> |
|
|
<p>خدمة العملاء - متوفرين على مدار الساعة</p> |
|
|
</div> |
|
|
<div class="faq-container"> |
|
|
<button class="faq-button" onclick="askFAQ('اسعار الورق')">أسعار الورق</button> |
|
|
<button class="faq-button" onclick="askFAQ('عن المكتبة')">عن المكتبة</button> |
|
|
<button class="faq-button" onclick="askFAQ('قائمة المنتجات')">قائمة المنتجات</button> |
|
|
<button class="faq-button" onclick="askFAQ('العروض')">العروض والخصومات</button> |
|
|
<button class="faq-button" onclick="askFAQ('طرق الدفع')">طرق الدفع</button> |
|
|
</div> |
|
|
<div class="chat-box" id="chatBox"></div> |
|
|
<div class="input-container"> |
|
|
<input type="text" id="userInput" placeholder="اكتب سؤالك هنا..."> |
|
|
<button onclick="sendMessage()">إرسال</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
const storeInfo = { |
|
|
name: "مكتبة النور", |
|
|
description: "مكتبة النور هي وجهتك الأولى للقرطاسية والأدوات المكتبية. نقدم منتجات عالية الجودة بأسعار تنافسية منذ عام 1990.", |
|
|
location: "شارع التحرير - وسط البلد", |
|
|
hours: "من 9 صباحاً حتى 10 مساءً", |
|
|
phone: "02-XXXXXXXX", |
|
|
payment: "نقبل الدفع نقداً، بالبطاقات البنكية، ومحافظ الموبايل" |
|
|
}; |
|
|
|
|
|
const products = { |
|
|
'ورق طباعة': { |
|
|
'ورق طباعة A4 مستورد درجة أولى': '700 جنيه', |
|
|
'ورق طباعة A4 مستورد درجة ثانية': '650 جنيه', |
|
|
'ورق طباعة A4 محلي': '600 جنيه', |
|
|
'ورق طباعة A3 مستورد': '1200 جنيه', |
|
|
'ورق طباعة ملون A4': '900 جنيه' |
|
|
}, |
|
|
'ورق وكراسات': { |
|
|
'دفتر سلك 100 ورقة': '35 جنيه', |
|
|
'دفتر تحضير مدرس': '45 جنيه', |
|
|
'ورق كانسون ملون': '12 جنيه', |
|
|
'كراسة رسم A4': '15 جنيه', |
|
|
'دفتر سلك 200 ورقة': '60 جنيه', |
|
|
'مذكرة مقسمة': '40 جنيه', |
|
|
'دفتر محاضرات': '25 جنيه' |
|
|
}, |
|
|
'أقلام وأدوات كتابة': { |
|
|
'قلم جاف أزرق': '5 جنيه', |
|
|
'قلم رصاص HB': '3 جنيه', |
|
|
'طقم أقلام ملونة 12 لون': '45 جنيه', |
|
|
'قلم سبورة': '8 جنيه', |
|
|
'قلم حبر سائل': '15 جنيه', |
|
|
'قلم تحديد': '12 جنيه', |
|
|
'طقم أقلام رصاص 2B': '30 جنيه' |
|
|
}, |
|
|
'مستلزمات مكتبية': { |
|
|
'دباسة': '25 جنيه', |
|
|
'مقص': '12 جنيه', |
|
|
'شريط لاصق شفاف': '7 جنيه', |
|
|
'حافظة ملفات': '30 جنيه', |
|
|
'صمغ': '8 جنيه', |
|
|
'مبراة كهربائية': '150 جنيه', |
|
|
'آلة حاسبة علمية': '180 جنيه', |
|
|
'خرامة ورق': '45 جنيه' |
|
|
}, |
|
|
'أدوات هندسية': { |
|
|
'مسطرة 30 سم': '10 جنيه', |
|
|
'منقلة': '8 جنيه', |
|
|
'فرجار': '25 جنيه', |
|
|
'طقم هندسة كامل': '65 جنيه', |
|
|
'مثلثات هندسية': '20 جنيه' |
|
|
} |
|
|
}; |
|
|
|
|
|
function askFAQ(question) { |
|
|
addMessage(question, 'user-message'); |
|
|
const response = getBotResponse(question); |
|
|
addMessage(response, 'bot-message'); |
|
|
} |
|
|
|
|
|
function sendMessage() { |
|
|
const input = document.getElementById('userInput'); |
|
|
const message = input.value.trim(); |
|
|
|
|
|
if (message) { |
|
|
addMessage(message, 'user-message'); |
|
|
const response = getBotResponse(message); |
|
|
addMessage(response, 'bot-message'); |
|
|
input.value = ''; |
|
|
} |
|
|
} |
|
|
|
|
|
function getBotResponse(input) { |
|
|
input = input.trim().toLowerCase(); |
|
|
|
|
|
if (input.includes('عن المكتبة') || input.includes('تعريف')) { |
|
|
return `${storeInfo.description}\n\nموقعنا: ${storeInfo.location}\nساعات العمل: ${storeInfo.hours}\nللتواصل: ${storeInfo.phone}`; |
|
|
} |
|
|
|
|
|
if (input.includes('طرق الدفع')) { |
|
|
return `طرق الدفع المتاحة: ${storeInfo.payment}`; |
|
|
} |
|
|
|
|
|
if (input.includes('العروض')) { |
|
|
return "العروض الحالية:\n- خصم 10% على مشتريات الورق فوق 1000 جنيه\n- خصم 15% على الأدوات الهندسية للمدارس\n- اشتري دفترين واحصل على الثالث مجاناً"; |
|
|
} |
|
|
|
|
|
if (input.includes('سعر') || input.includes('اسعار')) { |
|
|
if (input.includes('ورق')) { |
|
|
return "أسعار الورق:\n\n" + formatCategoryProducts('ورق طباعة') + "\n" + formatCategoryProducts('ورق وكراسات'); |
|
|
} |
|
|
if (input.includes('قلم') || input.includes('اقلام')) { |
|
|
return formatCategoryProducts('أقلام وأدوات كتابة'); |
|
|
} |
|
|
return "جميع أسعار منتجاتنا:\n\n" + formatAllProducts(); |
|
|
} |
|
|
|
|
|
if (input.includes('منتجات') || input.includes('قائمة')) { |
|
|
return formatAllProducts(); |
|
|
} |
|
|
|
|
|
return "مرحباً! كيف يمكنني مساعدتك؟ يمكنك السؤال عن:\n- معلومات عن المكتبة\n- أسعار المنتجات\n- قائمة القرطاسية المتوفرة\n- العروض والخصومات\n- طرق الدفع"; |
|
|
} |
|
|
|
|
|
function formatCategoryProducts(category) { |
|
|
let response = `${category}:\n`; |
|
|
for (let product in products[category]) { |
|
|
response += `- ${product}: ${products[category][product]}\n`; |
|
|
} |
|
|
return response; |
|
|
} |
|
|
|
|
|
function formatAllProducts() { |
|
|
let response = ''; |
|
|
for (let category in products) { |
|
|
response += `\n${category}:\n`; |
|
|
for (let product in products[category]) { |
|
|
response += `- ${product}: ${products[category][product]}\n`; |
|
|
} |
|
|
} |
|
|
return response; |
|
|
} |
|
|
|
|
|
function addMessage(text, className) { |
|
|
const chatBox = document.getElementById('chatBox'); |
|
|
const messageDiv = document.createElement('div'); |
|
|
messageDiv.className = `message ${className}`; |
|
|
messageDiv.textContent = text; |
|
|
chatBox.appendChild(messageDiv); |
|
|
chatBox.scrollTop = chatBox.scrollHeight; |
|
|
} |
|
|
|
|
|
window.onload = function() { |
|
|
addMessage("مرحباً بك في مكتبة النور! كيف يمكنني مساعدتك اليوم؟", 'bot-message'); |
|
|
} |
|
|
</script> |
|
|
</body> |
|
|
</html> |
