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