Spaces:

joermd
/

mr.remon

Running

App Files Files Community

joermd commited on Feb 9

Commit

a229033

verified ·

1 Parent(s): aebc6bd

Update index.html

Browse files

Files changed (1) hide show

index.html +156 -126

index.html CHANGED Viewed

@@ -3,13 +3,22 @@
 <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;
@@ -22,10 +31,23 @@
         .header {
             text-align: center;
             margin-bottom: 20px;
-            padding: 10px;
-            background-color: #004d99;
             color: white;
             border-radius: 10px;
         }
         .chat-box {
             height: 400px;
@@ -34,7 +56,7 @@
             padding: 15px;
             margin-bottom: 20px;
             border-radius: 8px;
-            background-color: #fafafa;
         }
         .input-container {
             display: flex;
@@ -44,35 +66,45 @@
         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;
@@ -81,160 +113,143 @@
             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) {
@@ -242,12 +257,27 @@
             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>

 <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.0.0/css/all.min.css">
     <style>
+        :root {
+            --primary-color: #1a237e;
+            --secondary-color: #283593;
+            --accent-color: #3949ab;
+            --background-light: #e8eaf6;
+            --text-color: #121212;
+        }
         body {
             font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
             margin: 0;
             padding: 20px;
+            background-color: #f0f2f5;
         }
         .chat-container {
             max-width: 800px;
         .header {
             text-align: center;
             margin-bottom: 20px;
+            padding: 15px;
+            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
             color: white;
             border-radius: 10px;
+            position: relative;
+        }
+        .header h1 {
+            margin: 0;
+            font-size: 24px;
+        }
+        .customer-service-icon {
+            position: absolute;
+            left: 20px;
+            top: 50%;
+            transform: translateY(-50%);
+            font-size: 2.5em;
+            color: #fff;
         }
         .chat-box {
             height: 400px;
             padding: 15px;
             margin-bottom: 20px;
             border-radius: 8px;
+            background-color: var(--background-light);
         }
         .input-container {
             display: flex;
         input {
             flex: 1;
             padding: 12px;
+            border: 2px solid var(--primary-color);
             border-radius: 8px;
             font-size: 16px;
+            background-color: white;
         }
         button {
             padding: 12px 25px;
+            background-color: var(--primary-color);
             color: white;
             border: none;
             border-radius: 8px;
             cursor: pointer;
             font-weight: bold;
+            transition: background-color 0.3s ease;
         }
         button:hover {
+            background-color: var(--accent-color);
+        }
+        button:disabled {
+            background-color: #cccccc;
+            cursor: not-allowed;
         }
         .message {
             margin-bottom: 12px;
             padding: 12px;
             border-radius: 8px;
             max-width: 80%;
+            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+            white-space: pre-wrap;
         }
         .user-message {
+            background-color: #fff;
             margin-left: 20%;
+            border-right: 4px solid var(--accent-color);
         }
         .bot-message {
+            background-color: #fff;
             margin-right: 20%;
+            border-left: 4px solid var(--primary-color);
         }
         .faq-container {
             display: grid;
             margin-bottom: 15px;
         }
         .faq-button {
+            background-color: var(--background-light);
+            border: 1px solid var(--primary-color);
+            padding: 10px;
             border-radius: 5px;
             cursor: pointer;
+            transition: all 0.3s ease;
+            font-weight: bold;
+            color: var(--primary-color);
         }
         .faq-button:hover {
+            background-color: var(--primary-color);
+            color: white;
+        }
+        .typing-indicator {
+            display: none;
+            margin-bottom: 12px;
+            padding: 12px;
+            border-radius: 8px;
+            max-width: 80%;
+            margin-right: 20%;
+            background-color: #f0f0f0;
         }
     </style>
 </head>
 <body>
     <div class="chat-container">
         <div class="header">
+            <i class="fas fa-headset customer-service-icon"></i>
+            <h1>مكتبة أستاذ ريمون</h1>
             <p>خدمة العملاء - متوفرين على مدار الساعة</p>
         </div>
         <div class="faq-container">
+            <button class="faq-button" onclick="askFAQ('اسعار الورق')">
+                <i class="fas fa-file-alt"></i> أسعار الورق
+            </button>
+            <button class="faq-button" onclick="askFAQ('عن المكتبة')">
+                <i class="fas fa-store"></i> عن المكتبة
+            </button>
+            <button class="faq-button" onclick="askFAQ('قائمة المنتجات')">
+                <i class="fas fa-list"></i> قائمة المنتجات
+            </button>
+            <button class="faq-button" onclick="askFAQ('العروض')">
+                <i class="fas fa-percentage"></i> العروض
+            </button>
+            <button class="faq-button" onclick="askFAQ('طرق الدفع')">
+                <i class="fas fa-credit-card"></i> طرق الدفع
+            </button>
+        </div>
+        <div class="chat-box" id="chatBox">
+            <div class="typing-indicator" id="typingIndicator">جاري الكتابة...</div>
         </div>
         <div class="input-container">
+            <input type="text" id="userInput" placeholder="اكتب سؤالك هنا..." onkeypress="handleKeyPress(event)">
+            <button id="sendButton" onclick="sendMessage()">
+                <i class="fas fa-paper-plane"></i> إرسال
+            </button>
         </div>
     </div>
     <script>
+        const API_URL = 'https://g2mgow5tgbxsjy-7777.proxy.runpod.net/proxy/8000/chat/stream';
+        let isWaitingForResponse = false;
+        function handleKeyPress(event) {
+            if (event.key === 'Enter' && !isWaitingForResponse) {
+                sendMessage();
             }
+        }
         function askFAQ(question) {
+            if (!isWaitingForResponse) {
+                addMessage(question, 'user-message');
+                sendToAPI(question);
+            }
         }
+        async function sendMessage() {
+            if (isWaitingForResponse) return;
             const input = document.getElementById('userInput');
             const message = input.value.trim();
             if (message) {
                 addMessage(message, 'user-message');
                 input.value = '';
+                await sendToAPI(message);
             }
         }
+        async function sendToAPI(message) {
+            const sendButton = document.getElementById('sendButton');
+            const userInput = document.getElementById('userInput');
+            const typingIndicator = document.getElementById('typingIndicator');
+            try {
+                isWaitingForResponse = true;
+                sendButton.disabled = true;
+                userInput.disabled = true;
+                typingIndicator.style.display = 'block';
+                const response = await fetch(API_URL, {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                    body: JSON.stringify({
+                        message: message
+                    })
+                });
+                if (!response.ok) {
+                    throw new Error(`HTTP error! status: ${response.status}`);
+                }
+                const reader = response.body.getReader();
+                let accumulatedResponse = '';
+                while (true) {
+                    const {value, done} = await reader.read();
+                    if (done) break;
+                    const chunk = new TextDecoder().decode(value);
+                    accumulatedResponse += chunk;
+                    // Update the chat with the accumulated response
+                    updateLastBotMessage(accumulatedResponse);
                 }
+            } catch (error) {
+                console.error('Error:', error);
+                addMessage('عذراً، حدث خطأ في الاتصال. يرجى المحاولة مرة أخرى.', 'bot-message');
+            } finally {
+                isWaitingForResponse = false;
+                sendButton.disabled = false;
+                userInput.disabled = false;
+                typingIndicator.style.display = 'none';
             }
         }
         function addMessage(text, className) {
             const messageDiv = document.createElement('div');
             messageDiv.className = `message ${className}`;
             messageDiv.textContent = text;
+            chatBox.insertBefore(messageDiv, document.getElementById('typingIndicator'));
+            chatBox.scrollTop = chatBox.scrollHeight;
+        }
+        function updateLastBotMessage(text) {
+            const chatBox = document.getElementById('chatBox');
+            let lastBotMessage = chatBox.querySelector('.bot-message:last-of-type');
+            if (!lastBotMessage) {
+                lastBotMessage = document.createElement('div');
+                lastBotMessage.className = 'message bot-message';
+                chatBox.insertBefore(lastBotMessage, document.getElementById('typingIndicator'));
+            }
+            lastBotMessage.textContent = text;
             chatBox.scrollTop = chatBox.scrollHeight;
         }
+        // Welcome message
         window.onload = function() {
+            addMessage("مرحباً بك في مكتبة أستاذ ريمون! كيف يمكنني مساعدتك اليوم؟", 'bot-message');
         }
     </script>
 </body>