Skip to content

Commit 4afe6e5

Browse files
RighcfdRighcfd
authored
Update app.js
1 parent 8c62074 commit 4afe6e5

File tree

1 file changed

+218
-46
lines changed

1 file changed

+218
-46
lines changed

‎app.js‎

Lines changed: 218 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1,47 +1,219 @@
1-
// تحميل العناصر عند بدء التطبيق
2-
document.addEventListener('DOMContentLoaded', function() {
3-
loadItems();
4-
document.getElementById('addButton').addEventListener('click', addItem);
5-
});
6-
7-
// تخزين البيانات محليًا
8-
let items = JSON.parse(localStorage.getItem('items')) || [];
9-
10-
// إضافة عناصر مخزنة سابقًا
11-
function loadItems() {
12-
const itemsList = document.getElementById('itemsList');
13-
itemsList.innerHTML = '';
14-
15-
items.forEach((item, index) => {
16-
const li = document.createElement('li');
17-
18-
const itemText = document.createElement('span');
19-
itemText.textContent = item;
20-
li.appendChild(itemText);
21-
22-
const deleteButton = document.createElement('button');
23-
deleteButton.textContent = 'حذف';
24-
deleteButton.style.backgroundColor = '#f44336';
25-
deleteButton.onclick = () => removeItem(index);
26-
27-
li.appendChild(deleteButton);
28-
itemsList.appendChild(li);
29-
});
30-
}
31-
32-
// إضافة عنصر جديد
33-
function addItem() {
34-
const text = prompt('أدخل نص العنصر الجديد:');
35-
if (text) {
36-
items.push(text);
37-
localStorage.setItem('items', JSON.stringify(items));
38-
loadItems();
39-
}
40-
}
41-
42-
// حذف عنصر
43-
function removeItem(index) {
44-
items.splice(index, 1);
45-
localStorage.setItem('items', JSON.stringify(items));
46-
loadItems();
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
475
}
6+
7+
body {
8+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
9+
background-color: #f8f9fa;
10+
color: #333;
11+
}
12+
13+
/* تنسيق شاشة تسجيل الدخول */
14+
.login-container {
15+
position: fixed;
16+
top: 0;
17+
left: 0;
18+
width: 100%;
19+
height: 100%;
20+
background-color: #f8f9fa;
21+
display: flex;
22+
justify-content: center;
23+
align-items: center;
24+
z-index: 1000;
25+
}
26+
27+
.login-box {
28+
background-color: white;
29+
padding: 30px;
30+
border-radius: 10px;
31+
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
32+
width: 90%;
33+
max-width: 350px;
34+
text-align: center;
35+
}
36+
37+
.login-box h2 {
38+
margin-bottom: 20px;
39+
color: #4285f4;
40+
}
41+
42+
.login-box input {
43+
width: 100%;
44+
padding: 12px;
45+
border: 1px solid #ddd;
46+
border-radius: 5px;
47+
margin-bottom: 15px;
48+
font-size: 16px;
49+
}
50+
51+
.login-box button {
52+
background-color: #4285f4;
53+
color: white;
54+
border: none;
55+
padding: 12px 20px;
56+
border-radius: 5px;
57+
font-size: 16px;
58+
cursor: pointer;
59+
width: 100%;
60+
}
61+
62+
.error-message {
63+
color: #f44336;
64+
margin-top: 10px;
65+
font-size: 14px;
66+
}
67+
68+
/* التطبيق الرئيسي */
69+
.app {
70+
max-width: 600px;
71+
margin: 0 auto;
72+
padding: 20px;
73+
}
74+
75+
header {
76+
text-align: center;
77+
margin-bottom: 20px;
78+
}
79+
80+
h1 {
81+
color: #4285f4;
82+
}
83+
84+
button {
85+
background-color: #4285f4;
86+
color: white;
87+
border: none;
88+
padding: 10px 15px;
89+
border-radius: 5px;
90+
margin: 10px 0;
91+
font-size: 16px;
92+
cursor: pointer;
93+
}
94+
95+
ul {
96+
list-style: none;
97+
margin-top: 20px;
98+
}
99+
100+
li {
101+
padding: 10px;
102+
border-bottom: 1px solid #ddd;
103+
display: flex;
104+
justify-content: space-between;
105+
align-items: center;
106+
}
107+
108+
footer {
109+
text-align: center;
110+
margin-top: 30px;
111+
font-size: 14px;
112+
color: #666;
113+
}
114+
115+
/* المساعد الذكي العائم */
116+
.ai-assistant {
117+
position: fixed;
118+
bottom: 20px;
119+
right: 20px;
120+
width: 350px;
121+
background-color: white;
122+
border-radius: 10px;
123+
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
124+
z-index: 100;
125+
transition: all 0.3s ease;
126+
overflow: hidden;
127+
}
128+
129+
.ai-header {
130+
background-color: #4285f4;
131+
color: white;
132+
padding: 10px 15px;
133+
display: flex;
134+
justify-content: space-between;
135+
align-items: center;
136+
cursor: move;
137+
}
138+
139+
.ai-header h3 {
140+
margin: 0;
141+
font-size: 16px;
142+
}
143+
144+
.ai-header button {
145+
background: none;
146+
border: none;
147+
color: white;
148+
font-size: 18px;
149+
cursor: pointer;
150+
margin: 0;
151+
padding: 0 5px;
152+
}
153+
154+
.ai-body {
155+
padding: 15px;
156+
}
157+
158+
.chat-history {
159+
height: 250px;
160+
overflow-y: auto;
161+
border: 1px solid #e0e0e0;
162+
border-radius: 5px;
163+
padding: 10px;
164+
margin-bottom: 10px;
165+
background-color: #f9f9f9;
166+
}
167+
168+
.message {
169+
margin-bottom: 10px;
170+
padding: 8px 12px;
171+
border-radius: 5px;
172+
max-width: 85%;
173+
word-wrap: break-word;
174+
}
175+
176+
.user-message {
177+
background-color: #e3f2fd;
178+
margin-left: auto;
179+
text-align: right;
180+
}
181+
182+
.ai-message {
183+
background-color: #f1f1f1;
184+
}
185+
186+
.system-message {
187+
background-color: #fff3cd;
188+
text-align: center;
189+
margin: 5px auto;
190+
font-size: 12px;
191+
color: #856404;
192+
}
193+
194+
.chat-input {
195+
display: flex;
196+
}
197+
198+
.chat-input input {
199+
flex: 1;
200+
padding: 8px;
201+
border: 1px solid #ddd;
202+
border-radius: 4px;
203+
margin-right: 8px;
204+
}
205+
206+
.chat-input button {
207+
padding: 8px 15px;
208+
}
209+
210+
/* وضع المساعد المصغر */
211+
.ai-assistant.minimized {
212+
height: 40px;
213+
width: 180px;
214+
}
215+
216+
.ai-assistant.minimized .ai-body {
217+
display: none;
218+
}
219+

0 commit comments

Comments
 (0)