Spaces:
Running
Running
undefined - Follow Up Deployment
Browse files- index.html +63 -0
index.html
CHANGED
|
@@ -55,6 +55,34 @@
|
|
| 55 |
margin-bottom: 12px;
|
| 56 |
}
|
| 57 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 58 |
.chat-bubble:after {
|
| 59 |
content: '';
|
| 60 |
position: absolute;
|
|
@@ -113,6 +141,41 @@
|
|
| 113 |
</style>
|
| 114 |
</head>
|
| 115 |
<body class="text-gray-800">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 116 |
<!-- شريط التنقل -->
|
| 117 |
<nav class="bg-white shadow-lg sticky top-0 z-50">
|
| 118 |
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
|
|
| 55 |
margin-bottom: 12px;
|
| 56 |
}
|
| 57 |
|
| 58 |
+
/* أنماط إضافية لشخصية إيفا */
|
| 59 |
+
#eva-assistant {
|
| 60 |
+
transform: translateX(0);
|
| 61 |
+
transition: transform 0.3s ease;
|
| 62 |
+
}
|
| 63 |
+
|
| 64 |
+
#eva-assistant.hidden {
|
| 65 |
+
transform: translateX(-120%);
|
| 66 |
+
}
|
| 67 |
+
|
| 68 |
+
#eva-chat {
|
| 69 |
+
scrollbar-width: thin;
|
| 70 |
+
scrollbar-color: #6366f1 #f1f1f1;
|
| 71 |
+
}
|
| 72 |
+
|
| 73 |
+
#eva-chat::-webkit-scrollbar {
|
| 74 |
+
width: 6px;
|
| 75 |
+
}
|
| 76 |
+
|
| 77 |
+
#eva-chat::-webkit-scrollbar-track {
|
| 78 |
+
background: #f1f1f1;
|
| 79 |
+
}
|
| 80 |
+
|
| 81 |
+
#eva-chat::-webkit-scrollbar-thumb {
|
| 82 |
+
background-color: #6366f1;
|
| 83 |
+
border-radius: 3px;
|
| 84 |
+
}
|
| 85 |
+
|
| 86 |
.chat-bubble:after {
|
| 87 |
content: '';
|
| 88 |
position: absolute;
|
|
|
|
| 141 |
</style>
|
| 142 |
</head>
|
| 143 |
<body class="text-gray-800">
|
| 144 |
+
<!-- شخصية إيفا التفاعلية -->
|
| 145 |
+
<div id="eva-assistant" class="fixed bottom-6 left-6 z-50 w-72 bg-white rounded-xl shadow-xl overflow-hidden transition-all duration-300 transform hover:scale-105">
|
| 146 |
+
<div class="bg-indigo-600 text-white p-4 flex items-center">
|
| 147 |
+
<div class="w-12 h-12 rounded-full bg-white flex items-center justify-center mr-3">
|
| 148 |
+
<img src="https://via.placeholder.com/50?text=إيفا" alt="إيفا" class="w-10 h-10 rounded-full">
|
| 149 |
+
</div>
|
| 150 |
+
<div>
|
| 151 |
+
<h3 class="font-bold">إيفا المساعدة الذكية</h3>
|
| 152 |
+
<p class="text-xs opacity-90">متاحة لمساعدتك الآن</p>
|
| 153 |
+
</div>
|
| 154 |
+
<button id="eva-close" class="ml-auto text-white opacity-70 hover:opacity-100">
|
| 155 |
+
<i class="fas fa-times"></i>
|
| 156 |
+
</button>
|
| 157 |
+
</div>
|
| 158 |
+
<div id="eva-chat" class="p-4 bg-gray-50 h-48 overflow-y-auto">
|
| 159 |
+
<div class="chat-bubble eva-bubble">
|
| 160 |
+
مرحباً! أنا إيفا، مرشدتك الذكية في عسير. كيف يمكنني مساعدتك اليوم؟
|
| 161 |
+
</div>
|
| 162 |
+
</div>
|
| 163 |
+
<div class="p-3 bg-white border-t flex">
|
| 164 |
+
<input id="eva-input" type="text" placeholder="اكتب سؤالك..." class="flex-1 border rounded-l-lg px-3 py-2 focus:outline-none focus:ring-1 focus:ring-indigo-500">
|
| 165 |
+
<button id="eva-send" class="bg-indigo-600 text-white px-4 rounded-r-lg hover:bg-indigo-700">
|
| 166 |
+
<i class="fas fa-paper-plane"></i>
|
| 167 |
+
</button>
|
| 168 |
+
</div>
|
| 169 |
+
<div class="eva-actions grid grid-cols-2 gap-2 p-3 bg-gray-50">
|
| 170 |
+
<button class="eva-action bg-white text-indigo-600 px-3 py-2 rounded-lg text-sm font-medium hover:bg-indigo-50 border border-indigo-100">
|
| 171 |
+
<i class="fas fa-map-marked-alt mr-1"></i> اقترح مسارًا
|
| 172 |
+
</button>
|
| 173 |
+
<button class="eva-action bg-white text-indigo-600 px-3 py-2 rounded-lg text-sm font-medium hover:bg-indigo-50 border border-indigo-100">
|
| 174 |
+
<i class="fas fa-utensils mr-1"></i> مطاعم قريبة
|
| 175 |
+
</button>
|
| 176 |
+
</div>
|
| 177 |
+
</div>
|
| 178 |
+
|
| 179 |
<!-- شريط التنقل -->
|
| 180 |
<nav class="bg-white shadow-lg sticky top-0 z-50">
|
| 181 |
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|