Update index.html
Browse files- index.html +6 -49
index.html
CHANGED
@@ -14,36 +14,12 @@
|
|
14 |
height: 100vh;
|
15 |
background-color: #f0f0f0;
|
16 |
}
|
17 |
-
.sidebar {
|
18 |
-
width: 260px;
|
19 |
-
background-color: #ffffff;
|
20 |
-
padding: 20px;
|
21 |
-
display: flex;
|
22 |
-
flex-direction: column;
|
23 |
-
border-left: 1px solid #e0e0e0;
|
24 |
-
overflow-y: auto;
|
25 |
-
}
|
26 |
-
.logo {
|
27 |
-
font-size: 28px;
|
28 |
-
font-weight: bold;
|
29 |
-
margin-bottom: 20px;
|
30 |
-
text-align: center;
|
31 |
-
color: #333;
|
32 |
-
}
|
33 |
-
.menu-item {
|
34 |
-
padding: 10px;
|
35 |
-
margin-bottom: 5px;
|
36 |
-
cursor: pointer;
|
37 |
-
border-radius: 5px;
|
38 |
-
}
|
39 |
-
.menu-item:hover {
|
40 |
-
background-color: #f0f0f0;
|
41 |
-
}
|
42 |
.main-content {
|
43 |
flex-grow: 1;
|
44 |
display: flex;
|
45 |
flex-direction: column;
|
46 |
padding: 20px;
|
|
|
47 |
}
|
48 |
.header {
|
49 |
display: flex;
|
@@ -68,6 +44,9 @@
|
|
68 |
border-radius: 15px;
|
69 |
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
70 |
overflow: hidden;
|
|
|
|
|
|
|
71 |
}
|
72 |
.messages {
|
73 |
flex: 1;
|
@@ -123,13 +102,14 @@
|
|
123 |
display: flex;
|
124 |
justify-content: center;
|
125 |
margin-top: 20px;
|
|
|
|
|
126 |
}
|
127 |
.action-button {
|
128 |
background-color: #f0f0f0;
|
129 |
color: #333;
|
130 |
border: 1px solid #e0e0e0;
|
131 |
padding: 10px 15px;
|
132 |
-
margin: 0 5px;
|
133 |
border-radius: 5px;
|
134 |
cursor: pointer;
|
135 |
}
|
@@ -141,11 +121,6 @@
|
|
141 |
margin-top: 20px;
|
142 |
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
143 |
}
|
144 |
-
@media (max-width: 768px) {
|
145 |
-
.sidebar {
|
146 |
-
display: none;
|
147 |
-
}
|
148 |
-
}
|
149 |
.loading {
|
150 |
display: none;
|
151 |
text-align: center;
|
@@ -157,17 +132,6 @@
|
|
157 |
</style>
|
158 |
</head>
|
159 |
<body>
|
160 |
-
<div class="sidebar">
|
161 |
-
<div class="logo">سبيدي</div>
|
162 |
-
<div class="menu-item"><i class="fas fa-comment-alt"></i> سبيدي</div>
|
163 |
-
<div class="menu-item"><i class="fas fa-compass"></i> استكشاف الخدمات</div>
|
164 |
-
<div class="menu-item">أمس</div>
|
165 |
-
<div class="menu-item">منصات ذكاء اصطناعي بديلة</div>
|
166 |
-
<div class="menu-item">تقييم تلخيص النصوص</div>
|
167 |
-
<div class="menu-item">الأيام السبعة الماضية</div>
|
168 |
-
<div class="menu-item">إلغاء وضع السكون ويندوز</div>
|
169 |
-
</div>
|
170 |
-
|
171 |
<div class="main-content">
|
172 |
<div class="header">
|
173 |
<div class="header-title">سبيدي</div>
|
@@ -197,7 +161,6 @@
|
|
197 |
</div>
|
198 |
|
199 |
<script>
|
200 |
-
// إضافة متغير للتحكم في حالة الإرسال
|
201 |
let isSending = false;
|
202 |
|
203 |
async function sendMessage() {
|
@@ -208,15 +171,12 @@
|
|
208 |
if (message !== '') {
|
209 |
isSending = true;
|
210 |
|
211 |
-
// إظهار الرسالة في الشات
|
212 |
appendMessage('user-message', message);
|
213 |
input.value = '';
|
214 |
|
215 |
-
// إظهار مؤشر التحميل
|
216 |
document.getElementById('loading').classList.add('visible');
|
217 |
|
218 |
try {
|
219 |
-
// إرسال الرسالة إلى Python/Streamlit
|
220 |
const response = await fetch('/_stcore/message', {
|
221 |
method: 'POST',
|
222 |
headers: {
|
@@ -234,7 +194,6 @@
|
|
234 |
} catch (error) {
|
235 |
appendMessage('bot-message', 'عذراً، حدث خطأ في الاتصال.');
|
236 |
} finally {
|
237 |
-
// إخفاء مؤشر التحميل وإعادة تعيين حالة الإرسال
|
238 |
document.getElementById('loading').classList.remove('visible');
|
239 |
isSending = false;
|
240 |
}
|
@@ -261,7 +220,6 @@
|
|
261 |
sendMessage();
|
262 |
}
|
263 |
|
264 |
-
// دالة لإضافة رسالة ترحيب عند تحميل الصفحة
|
265 |
function initializeMessages() {
|
266 |
var today = new Date();
|
267 |
var hour = today.getHours();
|
@@ -269,7 +227,6 @@
|
|
269 |
appendMessage('bot-message', `أهلاً بك، ${greeting}! كيف يمكنني مساعدتك اليوم؟`);
|
270 |
}
|
271 |
|
272 |
-
// استدعاء دالة التهيئة عند تحميل الصفحة
|
273 |
window.onload = initializeMessages;
|
274 |
</script>
|
275 |
</body>
|
|
|
14 |
height: 100vh;
|
15 |
background-color: #f0f0f0;
|
16 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
17 |
.main-content {
|
18 |
flex-grow: 1;
|
19 |
display: flex;
|
20 |
flex-direction: column;
|
21 |
padding: 20px;
|
22 |
+
width: 100%;
|
23 |
}
|
24 |
.header {
|
25 |
display: flex;
|
|
|
44 |
border-radius: 15px;
|
45 |
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
46 |
overflow: hidden;
|
47 |
+
margin: 0 auto;
|
48 |
+
width: 100%;
|
49 |
+
max-width: 1200px;
|
50 |
}
|
51 |
.messages {
|
52 |
flex: 1;
|
|
|
102 |
display: flex;
|
103 |
justify-content: center;
|
104 |
margin-top: 20px;
|
105 |
+
flex-wrap: wrap;
|
106 |
+
gap: 10px;
|
107 |
}
|
108 |
.action-button {
|
109 |
background-color: #f0f0f0;
|
110 |
color: #333;
|
111 |
border: 1px solid #e0e0e0;
|
112 |
padding: 10px 15px;
|
|
|
113 |
border-radius: 5px;
|
114 |
cursor: pointer;
|
115 |
}
|
|
|
121 |
margin-top: 20px;
|
122 |
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
123 |
}
|
|
|
|
|
|
|
|
|
|
|
124 |
.loading {
|
125 |
display: none;
|
126 |
text-align: center;
|
|
|
132 |
</style>
|
133 |
</head>
|
134 |
<body>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
135 |
<div class="main-content">
|
136 |
<div class="header">
|
137 |
<div class="header-title">سبيدي</div>
|
|
|
161 |
</div>
|
162 |
|
163 |
<script>
|
|
|
164 |
let isSending = false;
|
165 |
|
166 |
async function sendMessage() {
|
|
|
171 |
if (message !== '') {
|
172 |
isSending = true;
|
173 |
|
|
|
174 |
appendMessage('user-message', message);
|
175 |
input.value = '';
|
176 |
|
|
|
177 |
document.getElementById('loading').classList.add('visible');
|
178 |
|
179 |
try {
|
|
|
180 |
const response = await fetch('/_stcore/message', {
|
181 |
method: 'POST',
|
182 |
headers: {
|
|
|
194 |
} catch (error) {
|
195 |
appendMessage('bot-message', 'عذراً، حدث خطأ في الاتصال.');
|
196 |
} finally {
|
|
|
197 |
document.getElementById('loading').classList.remove('visible');
|
198 |
isSending = false;
|
199 |
}
|
|
|
220 |
sendMessage();
|
221 |
}
|
222 |
|
|
|
223 |
function initializeMessages() {
|
224 |
var today = new Date();
|
225 |
var hour = today.getHours();
|
|
|
227 |
appendMessage('bot-message', `أهلاً بك، ${greeting}! كيف يمكنني مساعدتك اليوم؟`);
|
228 |
}
|
229 |
|
|
|
230 |
window.onload = initializeMessages;
|
231 |
</script>
|
232 |
</body>
|