Spaces:

joermd
/

test

Running

App Files Files Community

joermd commited on Nov 10, 2024

Commit

8f76c97

verified ·

1 Parent(s): 067af65

Update index.html

Browse files

Files changed (1) hide show

index.html +6 -190

index.html CHANGED Viewed

@@ -1,168 +1,13 @@
 <!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.0.0-beta3/css/all.min.css">
-    <style>
-        body {
-            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-            margin: 0;
-            padding: 0;
-            display: flex;
-            height: 100vh;
-            background-color: #f0f0f0;
-        }
-        .main-content {
-            flex-grow: 1;
-            display: flex;
-            flex-direction: column;
-            padding: 20px;
-            width: 100%;
-        }
-        .header {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            padding: 10px 20px;
-            background-color: #ffffff;
-            border-radius: 15px;
-            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-            margin-bottom: 20px;
-        }
-        .header-title {
-            font-size: 24px;
-            font-weight: bold;
-            color: #333;
-        }
-        .chat-container {
-            flex-grow: 1;
-            display: flex;
-            flex-direction: column;
-            background-color: #ffffff;
-            border-radius: 15px;
-            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-            overflow: hidden;
-            margin: 0 auto;
-            width: 100%;
-            max-width: 1200px;
-        }
-        .messages {
-            flex: 1;
-            overflow-y: auto;
-            padding: 15px;
-            background-color: #fafafa;
-        }
-        .message {
-            padding: 12px;
-            margin: 8px 0;
-            border-radius: 12px;
-            font-size: 16px;
-            max-width: 70%;
-            word-break: break-word;
-        }
-        .user-message {
-            text-align: left;
-            background-color: #e0e0e0;
-            margin-right: auto;
-        }
-        .bot-message {
-            text-align: right;
-            background-color: #f5f5f5;
-            margin-left: auto;
-        }
-        .input-container {
-            display: flex;
-            padding: 12px;
-            background-color: #ffffff;
-            border-top: 1px solid #e0e0e0;
-        }
-        .input-container input {
-            flex: 1;
-            padding: 12px;
-            border-radius: 12px;
-            border: 1px solid #e0e0e0;
-            margin-left: 10px;
-            font-size: 16px;
-        }
-        .input-container button {
-            padding: 12px 24px;
-            border-radius: 12px;
-            background-color: #555;
-            color: white;
-            border: none;
-            cursor: pointer;
-            font-size: 16px;
-        }
-        .input-container button:hover {
-            background-color: #666;
-        }
-        .quick-actions {
-            display: flex;
-            justify-content: center;
-            margin-top: 20px;
-            flex-wrap: wrap;
-            gap: 10px;
-        }
-        .action-button {
-            background-color: #f0f0f0;
-            color: #333;
-            border: 1px solid #e0e0e0;
-            padding: 10px 15px;
-            border-radius: 5px;
-            cursor: pointer;
-        }
-        footer {
-            text-align: center;
-            padding: 15px;
-            background-color: #ffffff;
-            border-radius: 15px;
-            margin-top: 20px;
-            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-        }
-        .loading {
-            display: none;
-            text-align: center;
-            padding: 10px;
-        }
-        .loading.visible {
-            display: block;
-        }
-    </style>
 </head>
 <body>
-    <div class="main-content">
-        <div class="header">
-            <div class="header-title">سبيدي</div>
-        </div>
-        <div class="chat-container">
-            <div class="messages" id="messages">
-                <!-- Messages will be displayed here -->
-            </div>
-            <div class="loading" id="loading">جاري التحميل...</div>
-            <div class="input-container">
-                <input type="text" id="message-input" placeholder="اكتب رسالتك..." onkeypress="handleKeyPress(event)">
-                <button onclick="sendMessage()">إرسال</button>
-            </div>
-        </div>
-        <div class="quick-actions">
-            <button class="action-button" onclick="sendQuickMessage('إنشاء صورة')">إنشاء صورة</button>
-            <button class="action-button" onclick="sendQuickMessage('شرح موضوع')">شرح موضوع</button>
-            <button class="action-button" onclick="sendQuickMessage('شكر المقابل')">شكر المقابل</button>
-            <button class="action-button" onclick="sendQuickMessage('حقيقة مثيرة')">حقيقة مثيرة</button>
-        </div>
-        <footer>
-            إلى هذا الشكل ليس الشكل النهائي بل فقط هو شكل تجريبي | جميع حقوق تصميم سبيدي محفوظة لشركة فاست برو عام 2024
-        </footer>
-    </div>
     <script>
         let isSending = false;
         async function sendMessage() {
             if (isSending) return;
@@ -175,16 +20,14 @@
                 input.value = '';
                 document.getElementById('loading').classList.add('visible');
                 try {
-                    const response = await fetch('/_stcore/message', {
                         method: 'POST',
                         headers: {
                             'Content-Type': 'application/json',
                         },
                         body: JSON.stringify({ message: message })
                     });
                     if (response.ok) {
                         const data = await response.json();
                         appendMessage('bot-message', data.response);
@@ -199,35 +42,8 @@
                 }
             }
         }
-        function appendMessage(className, message) {
-            var messages = document.getElementById('messages');
-            var messageDiv = document.createElement('div');
-            messageDiv.className = 'message ' + className;
-            messageDiv.textContent = message;
-            messages.appendChild(messageDiv);
-            messages.scrollTop = messages.scrollHeight;
-        }
-        function handleKeyPress(event) {
-            if (event.key === 'Enter') {
-                sendMessage();
-            }
-        }
-        function sendQuickMessage(message) {
-            document.getElementById('message-input').value = message;
-            sendMessage();
-        }
-        function initializeMessages() {
-            var today = new Date();
-            var hour = today.getHours();
-            var greeting = hour < 12 ? 'صباح الخير' : 'مساء الخير';
-            appendMessage('bot-message', `أهلاً بك، ${greeting}! كيف يمكنني مساعدتك اليوم؟`);
-        }
-        window.onload = initializeMessages;
     </script>
 </body>
 </html>

+<!-- templates/index.html -->
 <!DOCTYPE html>
 <html lang="ar" dir="rtl">
 <head>
+    <!-- Previous head content remains the same -->
 </head>
 <body>
+    <!-- Previous body content remains the same until the script section -->
     <script>
         let isSending = false;
         async function sendMessage() {
             if (isSending) return;
                 input.value = '';
                 document.getElementById('loading').classList.add('visible');
                 try {
+                    const response = await fetch('/message', {  // Updated endpoint
                         method: 'POST',
                         headers: {
                             'Content-Type': 'application/json',
                         },
                         body: JSON.stringify({ message: message })
                     });
                     if (response.ok) {
                         const data = await response.json();
                         appendMessage('bot-message', data.response);
                 }
             }
         }
+        // Rest of the JavaScript functions remain the same
     </script>
 </body>
 </html>