Spaces:

joermd
/

mr.remon

Running

App Files Files Community

joermd commited on Feb 9

Commit

aebc6bd

verified ·

1 Parent(s): ab2a446

Update index.html

Browse files

Files changed (1) hide show

index.html +254 -19

index.html CHANGED Viewed

@@ -1,19 +1,254 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!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>