Hugging Face's logo

Spaces:
joermd
/
test
Running

App Files Community
joermd commited on
Commit
fd79d75
·
verified ·
1 Parent(s): 9bc7833

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +251 -19
index.html CHANGED
@@ -1,19 +1,251 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="ar" dir="rtl">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>سبيدي</title>
7
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
8
+ <style>
9
+ body {
10
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
11
+ margin: 0;
12
+ padding: 0;
13
+ display: flex;
14
+ height: 100vh;
15
+ background-color: #f0f0f0;
16
+ }
17
+
18
+ .sidebar {
19
+ width: 260px;
20
+ background-color: #ffffff;
21
+ padding: 20px;
22
+ display: flex;
23
+ flex-direction: column;
24
+ border-left: 1px solid #e0e0e0;
25
+ overflow-y: auto;
26
+ }
27
+
28
+ .logo {
29
+ font-size: 28px;
30
+ font-weight: bold;
31
+ margin-bottom: 20px;
32
+ text-align: center;
33
+ color: #333;
34
+ }
35
+
36
+ .menu-item {
37
+ padding: 10px;
38
+ margin-bottom: 5px;
39
+ cursor: pointer;
40
+ border-radius: 5px;
41
+ }
42
+
43
+ .menu-item:hover {
44
+ background-color: #f0f0f0;
45
+ }
46
+
47
+ .main-content {
48
+ flex-grow: 1;
49
+ display: flex;
50
+ flex-direction: column;
51
+ padding: 20px;
52
+ }
53
+
54
+ .header {
55
+ display: flex;
56
+ justify-content: space-between;
57
+ align-items: center;
58
+ padding: 10px 20px;
59
+ background-color: #ffffff;
60
+ border-radius: 15px;
61
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
62
+ margin-bottom: 20px;
63
+ }
64
+
65
+ .header-title {
66
+ font-size: 24px;
67
+ font-weight: bold;
68
+ color: #333;
69
+ }
70
+
71
+ .chat-container {
72
+ flex-grow: 1;
73
+ display: flex;
74
+ flex-direction: column;
75
+ background-color: #ffffff;
76
+ border-radius: 15px;
77
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
78
+ overflow: hidden;
79
+ }
80
+
81
+ .messages {
82
+ flex: 1;
83
+ overflow-y: auto;
84
+ padding: 15px;
85
+ background-color: #fafafa;
86
+ }
87
+
88
+ .message {
89
+ padding: 12px;
90
+ margin: 8px 0;
91
+ border-radius: 12px;
92
+ font-size: 16px;
93
+ max-width: 70%;
94
+ word-break: break-word;
95
+ }
96
+
97
+ .user-message {
98
+ text-align: left;
99
+ background-color: #e0e0e0;
100
+ margin-right: auto;
101
+ }
102
+
103
+ .bot-message {
104
+ text-align: right;
105
+ background-color: #f5f5f5;
106
+ margin-left: auto;
107
+ }
108
+
109
+ .input-container {
110
+ display: flex;
111
+ padding: 12px;
112
+ background-color: #ffffff;
113
+ border-top: 1px solid #e0e0e0;
114
+ }
115
+
116
+ .input-container input {
117
+ flex: 1;
118
+ padding: 12px;
119
+ border-radius: 12px;
120
+ border: 1px solid #e0e0e0;
121
+ margin-left: 10px;
122
+ font-size: 16px;
123
+ }
124
+
125
+ .input-container button {
126
+ padding: 12px 24px;
127
+ border-radius: 12px;
128
+ background-color: #555;
129
+ color: white;
130
+ border: none;
131
+ cursor: pointer;
132
+ font-size: 16px;
133
+ }
134
+
135
+ .input-container button:hover {
136
+ background-color: #666;
137
+ }
138
+
139
+ .quick-actions {
140
+ display: flex;
141
+ justify-content: center;
142
+ margin-top: 20px;
143
+ }
144
+
145
+ .action-button {
146
+ background-color: #f0f0f0;
147
+ color: #333;
148
+ border: 1px solid #e0e0e0;
149
+ padding: 10px 15px;
150
+ margin: 0 5px;
151
+ border-radius: 5px;
152
+ cursor: pointer;
153
+ }
154
+
155
+ footer {
156
+ text-align: center;
157
+ padding: 15px;
158
+ background-color: #ffffff;
159
+ border-radius: 15px;
160
+ margin-top: 20px;
161
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
162
+ }
163
+
164
+ @media (max-width: 768px) {
165
+ .sidebar {
166
+ display: none;
167
+ }
168
+ }
169
+ </style>
170
+ </head>
171
+ <body>
172
+ <div class="sidebar">
173
+ <div class="logo">سبيدي</div>
174
+ <div class="menu-item"><i class="fas fa-comment-alt"></i> سبيدي</div>
175
+ <div class="menu-item"><i class="fas fa-compass"></i> استكشاف الخدمات</div>
176
+ <div class="menu-item">أمس</div>
177
+ <div class="menu-item">منصات ذكاء اصطناعي بديلة</div>
178
+ <div class="menu-item">تقييم تلخيص النصوص</div>
179
+ <div class="menu-item">الأيام السبعة الماضية</div>
180
+ <div class="menu-item">إلغاء وضع السكون ويندوز</div>
181
+ </div>
182
+
183
+ <div class="main-content">
184
+ <div class="header">
185
+ <div class="header-title">سبيدي</div>
186
+ </div>
187
+
188
+ <div class="chat-container">
189
+ <div class="messages" id="messages">
190
+ <!-- Messages will be displayed here -->
191
+ </div>
192
+
193
+ <div class="input-container">
194
+ <input type="text" id="message-input" placeholder="اكتب رسالتك...">
195
+ <button onclick="sendMessage()">إرسال</button>
196
+ </div>
197
+ </div>
198
+
199
+ <div class="quick-actions">
200
+ <button class="action-button">إنشاء صورة</button>
201
+ <button class="action-button">شرح موضوع</button>
202
+ <button class="action-button">شكر المقابل</button>
203
+ <button class="action-button">حقيقة مثيرة</button>
204
+ </div>
205
+
206
+ <footer>
207
+ إلى هذا الشكل ليس الشكل النهائي بل فقط هو شكل تجريبي | جميع حقوق تصميم سبيدي محفوظة لشركة فاست برو عام 2024
208
+ </footer>
209
+ </div>
210
+
211
+ <script>
212
+ function sendMessage() {
213
+ var input = document.getElementById('message-input');
214
+ var message = input.value.trim();
215
+
216
+ if (message !== '') {
217
+ appendMessage('user-message', message);
218
+
219
+ // هنا يمكنك إضافة الكود الخاص بإرسال الرسالة إلى الخادم
220
+ // وتلقي الرد، ولكن في هذا المثال سنقوم فقط بمحاكاة الرد
221
+
222
+ setTimeout(() => {
223
+ appendMessage('bot-message', 'شكرًا لرسالتك. كيف يمكنني مساعدتك أكثر؟');
224
+ }, 1000);
225
+
226
+ input.value = '';
227
+ }
228
+ }
229
+
230
+ function appendMessage(className, message) {
231
+ var messages = document.getElementById('messages');
232
+ var messageDiv = document.createElement('div');
233
+ messageDiv.className = 'message ' + className;
234
+ messageDiv.textContent = message;
235
+ messages.appendChild(messageDiv);
236
+ messages.scrollTop = messages.scrollHeight;
237
+ }
238
+
239
+ // دالة لإضافة رسالة ترحيب عند تحميل الصفحة
240
+ function initializeMessages() {
241
+ var today = new Date();
242
+ var hour = today.getHours();
243
+ var greeting = hour < 12 ? 'صباح الخير' : 'مساء الخير';
244
+ appendMessage('bot-message', `أهلاً يا يوسف، ${greeting} ازاي أقدر أساعدك النهاردة؟`);
245
+ }
246
+
247
+ // استدعاء الدالة عند تحميل الصفحة
248
+ initializeMessages();
249
+ </script>
250
+ </body>
251
+ </html>