|
|
<!DOCTYPE html> |
|
|
<html lang="ar" dir="rtl"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>iCaf Advanced - النظام المتقدم لتحليل المشاعر</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<style> |
|
|
|
|
|
@keyframes fadeIn { |
|
|
from { opacity: 0; transform: translateY(20px); } |
|
|
to { opacity: 1; transform: translateY(0); } |
|
|
} |
|
|
|
|
|
@keyframes pulse { |
|
|
0%, 100% { transform: scale(1); } |
|
|
50% { transform: scale(1.05); } |
|
|
} |
|
|
|
|
|
.fade-in { |
|
|
animation: fadeIn 0.6s ease forwards; |
|
|
} |
|
|
|
|
|
.pulse-effect { |
|
|
animation: pulse 2s infinite; |
|
|
} |
|
|
|
|
|
|
|
|
.mood-happy { |
|
|
background: linear-gradient(135deg, #f6d365, #fda085); |
|
|
} |
|
|
|
|
|
.mood-calm { |
|
|
background: linear-gradient(135deg, #a1c4fd, #c2e9fb); |
|
|
} |
|
|
|
|
|
.mood-energetic { |
|
|
background: linear-gradient(135deg, #ff758c, #ff7eb3); |
|
|
} |
|
|
|
|
|
.mood-neutral { |
|
|
background: linear-gradient(135deg, #d3cce3, #e9e4f0); |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-100 min-h-screen"> |
|
|
|
|
|
<nav class="bg-gradient-to-r from-gray-800 to-gray-900 text-white p-4 shadow-lg"> |
|
|
<div class="container mx-auto flex justify-between items-center"> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<i class="fas fa-coffee text-2xl text-orange-400"></i> |
|
|
<span class="text-xl font-bold">iCaf Advanced</span> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-center space-x-4" id="authSection"> |
|
|
<button onclick="showAuthModal('login')" class="bg-blue-500 hover:bg-blue-600 px-4 py-2 rounded-full text-sm font-medium transition-all"> |
|
|
<i class="fas fa-sign-in-alt ml-1"></i> تسجيل الدخول |
|
|
</button> |
|
|
<button onclick="showAuthModal('signup')" class="bg-green-500 hover:bg-green-600 px-4 py-2 rounded-full text-sm font-medium transition-all"> |
|
|
<i class="fas fa-user-plus ml-1"></i> إنشاء حساب |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="hidden" id="profileSection"> |
|
|
<button onclick="showProfile()" class="flex items-center space-x-2 bg-orange-500 hover:bg-orange-600 px-4 py-2 rounded-full text-sm font-medium transition-all"> |
|
|
<i class="fas fa-user-circle"></i> |
|
|
<span id="usernameDisplay">الملف الشخصي</span> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</nav> |
|
|
|
|
|
|
|
|
<main class="container mx-auto py-8 px-4"> |
|
|
|
|
|
<section id="welcomeMessage" class="bg-white rounded-2xl shadow-lg p-6 mb-8 text-center fade-in"> |
|
|
<h1 class="text-3xl font-bold text-gray-800 mb-4">مرحباً بك في نظام iCaf المتقدم</h1> |
|
|
<p class="text-gray-600 mb-6">حلل مشاعرك واحصل على توصية القهوة المثالية لك</p> |
|
|
<div class="pulse-effect inline-block bg-gradient-to-r from-orange-400 to-orange-600 text-white px-6 py-2 rounded-full font-bold"> |
|
|
ابدأ رحلتك مع القهوة |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6"> |
|
|
|
|
|
<section class="bg-white rounded-2xl shadow-lg p-6 fade-in" style="animation-delay: 0.2s"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 mr-3"> |
|
|
<i class="fas fa-file-alt"></i> |
|
|
</div> |
|
|
<h2 class="text-xl font-bold text-gray-800">تحليل النص العاطفي</h2> |
|
|
</div> |
|
|
<textarea class="w-full p-4 border border-gray-200 rounded-lg mb-4 focus:border-orange-400 focus:ring-2 focus:ring-orange-200" rows="4" placeholder="كيف تشعر اليوم؟"></textarea> |
|
|
<button class="w-full bg-blue-500 hover:bg-blue-600 text-white py-3 rounded-lg font-medium transition-all"> |
|
|
<i class="fas fa-brain ml-2"></i> تحليل المشاعر |
|
|
</button> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="bg-white rounded-2xl shadow-lg p-6 fade-in" style="animation-delay: 0.4s"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center text-purple-600 mr-3"> |
|
|
<i class="fas fa-microphone-alt"></i> |
|
|
</div> |
|
|
<h2 class="text-xl font-bold text-gray-800">تحليل نبرة الصوت</h2> |
|
|
</div> |
|
|
<div class="bg-gray-100 p-4 rounded-lg mb-4 text-center"> |
|
|
<i class="fas fa-microphone text-3xl text-gray-400 mb-2"></i> |
|
|
<p class="text-gray-600">اضغط على الزر لبدء التسجيل</p> |
|
|
</div> |
|
|
<button class="w-full bg-purple-500 hover:bg-purple-600 text-white py-3 rounded-lg font-medium transition-all"> |
|
|
<i class="fas fa-record-vinyl ml-2"></i> تسجيل الصوت |
|
|
</button> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="bg-white rounded-2xl shadow-lg p-6 fade-in" style="animation-delay: 0.6s"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="w-10 h-10 rounded-full bg-pink-100 flex items-center justify-center text-pink-600 mr-3"> |
|
|
<i class="fas fa-camera"></i> |
|
|
</div> |
|
|
<h2 class="text-xl font-bold text-gray-800">تحليل تعابير الوجه</h2> |
|
|
</div> |
|
|
<div class="bg-gray-100 p-4 rounded-lg mb-4 text-center"> |
|
|
<i class="fas fa-user text-3xl text-gray-400 mb-2"></i> |
|
|
<p class="text-gray-600">اضغط على الزر لفتح الكاميرا</p> |
|
|
</div> |
|
|
<button class="w-full bg-pink-500 hover:bg-pink-600 text-white py-3 rounded-lg font-medium transition-all"> |
|
|
<i class="fas fa-camera-retro ml-2"></i> تحليل الوجه |
|
|
</button> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="bg-white rounded-2xl shadow-lg p-6 fade-in" style="animation-delay: 0.8s"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="w-10 h-10 rounded-full bg-orange-100 flex items-center justify-center text-orange-600 mr-3"> |
|
|
<i class="fas fa-coffee"></i> |
|
|
</div> |
|
|
<h2 class="text-xl font-bold text-gray-800">توصية القهوة</h2> |
|
|
</div> |
|
|
<div class="bg-orange-50 p-4 rounded-lg mb-4 text-center"> |
|
|
<i class="fas fa-magic text-3xl text-orange-400 mb-2"></i> |
|
|
<p class="text-orange-800">أكمل التحليلات لتحصل على توصيتك الشخصية</p> |
|
|
</div> |
|
|
<button class="w-full bg-orange-500 hover:bg-orange-600 text-white py-3 rounded-lg font-medium transition-all"> |
|
|
<i class="fas fa-rocket ml-2"></i> احصل على توصيتك |
|
|
</button> |
|
|
</section> |
|
|
</div> |
|
|
</main> |
|
|
|
|
|
|
|
|
<div id="authModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden z-50"> |
|
|
<div class="bg-white rounded-2xl shadow-xl w-full max-w-md overflow-hidden"> |
|
|
<div class="p-6"> |
|
|
<div class="flex justify-between items-center mb-6"> |
|
|
<h3 class="text-xl font-bold text-gray-800" id="authModalTitle">تسجيل الدخول</h3> |
|
|
<button onclick="hideAuthModal()" class="text-gray-400 hover:text-gray-600"> |
|
|
<i class="fas fa-times"></i> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div id="loginForm"> |
|
|
<div class="mb-4"> |
|
|
<label class="block text-gray-700 mb-2">البريد الإلكتروني</label> |
|
|
<input type="email" class="w-full p-3 border border-gray-300 rounded-lg focus:border-orange-400 focus:ring-2 focus:ring-orange-200"> |
|
|
</div> |
|
|
<div class="mb-6"> |
|
|
<label class="block text-gray-700 mb-2">كلمة المرور</label> |
|
|
<input type="password" class="w-full p-3 border border-gray-300 rounded-lg focus:border-orange-400 focus:ring-2 focus:ring-orange-200"> |
|
|
</div> |
|
|
<button class="w-full bg-blue-500 hover:bg-blue-600 text-white py-3 rounded-lg font-medium mb-4 transition-all"> |
|
|
<i class="fas fa-sign-in-alt ml-2"></i> تسجيل الدخول |
|
|
</button> |
|
|
<p class="text-center text-gray-600"> |
|
|
ليس لديك حساب؟ |
|
|
<button onclick="showSignupForm()" class="text-orange-500 hover:underline">إنشاء حساب</button> |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div id="signupForm" class="hidden"> |
|
|
<div class="mb-4"> |
|
|
<label class="block text-gray-700 mb-2">الاسم الكامل</label> |
|
|
<input type="text" class="w-full p-3 border border-gray-300 rounded-lg focus:border-orange-400 focus:ring-2 focus:ring-orange-200"> |
|
|
</div> |
|
|
<div class="mb-4"> |
|
|
<label class="block text-gray-700 mb-2">البريد الإلكتروني</label> |
|
|
<input type="email" class="w-full p-3 border border-gray-300 rounded-lg focus:border-orange-400 focus:ring-2 focus:ring-orange-200"> |
|
|
</div> |
|
|
<div class="mb-4"> |
|
|
<label class="block text-gray-700 mb-2">كلمة المرور</label> |
|
|
<input type="password" class="w-full p-3 border border-gray-300 rounded-lg focus:border-orange-400 focus:ring-2 focus:ring-orange-200"> |
|
|
</div> |
|
|
<div class="mb-6"> |
|
|
<label class="block text-gray-700 mb-2">تأكيد كلمة المرور</label> |
|
|
<input type="password" class="w-full p-3 border border-gray-300 rounded-lg focus:border-orange-400 focus:ring-2 focus:ring-orange-200"> |
|
|
</div> |
|
|
<button class="w-full bg-green-500 hover:bg-green-600 text-white py-3 rounded-lg font-medium mb-4 transition-all"> |
|
|
<i class="fas fa-user-plus ml-2"></i> إنشاء حساب |
|
|
</button> |
|
|
<p class="text-center text-gray-600"> |
|
|
لديك حساب بالفعل؟ |
|
|
<button onclick="showLoginForm()" class="text-orange-500 hover:underline">تسجيل الدخول</button> |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="profileModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden z-50"> |
|
|
<div class="bg-white rounded-2xl shadow-xl w-full max-w-md overflow-hidden"> |
|
|
<div class="p-6"> |
|
|
<div class="flex justify-between items-center mb-6"> |
|
|
<h3 class="text-xl font-bold text-gray-800">الملف الشخصي</h3> |
|
|
<button onclick="hideProfile()" class="text-gray-400 hover:text-gray-600"> |
|
|
<i class="fas fa-times"></i> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="text-center mb-6"> |
|
|
<div class="w-20 h-20 rounded-full bg-gradient-to-r from-orange-400 to-orange-600 flex items-center justify-center mx-auto mb-4 text-2xl font-bold text-white"> |
|
|
<span id="userInitials">م</span> |
|
|
</div> |
|
|
<h4 class="text-lg font-bold text-gray-800" id="profileName">محمد أحمد</h4> |
|
|
<p class="text-gray-600" id="profileEmail">mohamed@example.com</p> |
|
|
</div> |
|
|
|
|
|
<div class="mb-6"> |
|
|
<h5 class="font-bold text-gray-700 mb-3">إحصائياتي</h5> |
|
|
<div class="grid grid-cols-2 gap-4"> |
|
|
<div class="bg-blue-50 p-3 rounded-lg text-center"> |
|
|
<div class="text-xl font-bold text-blue-600">12</div> |
|
|
<p class="text-sm text-gray-600">تحليل</p> |
|
|
</div> |
|
|
<div class="bg-orange-50 p-3 rounded-lg text-center"> |
|
|
<div class="text-xl font-bold text-orange-600">8</div> |
|
|
<p class="text-sm text-gray-600">توصية قهوة</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mb-6"> |
|
|
<h5 class="font-bold text-gray-700 mb-3">سجل التحليلات</h5> |
|
|
<div class="space-y-2 max-h-40 overflow-y-auto"> |
|
|
<div class="bg-gray-50 p-3 rounded-lg flex items-center"> |
|
|
<div class="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center text-green-600 mr-3"> |
|
|
<i class="fas fa-coffee"></i> |
|
|
</div> |
|
|
<div> |
|
|
<p class="text-sm font-medium">توصية قهوة: لاتيه</p> |
|
|
<p class="text-xs text-gray-500">اليوم 10:30 ص</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="bg-gray-50 p-3 rounded-lg flex items-center"> |
|
|
<div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 mr-3"> |
|
|
<i class="fas fa-file-alt"></i> |
|
|
</div> |
|
|
<div> |
|
|
<p class="text-sm font-medium">تحليل نص: إيجابي</p> |
|
|
<p class="text-xs text-gray-500">أمس 4:15 م</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<button class="w-full bg-red-500 hover:bg-red-600 text-white py-3 rounded-lg font-medium transition-all"> |
|
|
<i class="fas fa-sign-out-alt ml-2"></i> تسجيل الخروج |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
function showAuthModal(type) { |
|
|
document.getElementById('authModal').classList.remove('hidden'); |
|
|
if (type === 'login') { |
|
|
document.getElementById('loginForm').classList.remove('hidden'); |
|
|
document.getElementById('signupForm').classList.add('hidden'); |
|
|
document.getElementById('authModalTitle').textContent = 'تسجيل الدخول'; |
|
|
} else { |
|
|
document.getElementById('loginForm').classList.add('hidden'); |
|
|
document.getElementById('signupForm').classList.remove('hidden'); |
|
|
document.getElementById('authModalTitle').textContent = 'إنشاء حساب'; |
|
|
} |
|
|
} |
|
|
|
|
|
function hideAuthModal() { |
|
|
document.getElementById('authModal').classList.add('hidden'); |
|
|
} |
|
|
|
|
|
function showLoginForm() { |
|
|
document.getElementById('loginForm').classList.remove('hidden'); |
|
|
document.getElementById('signupForm').classList.add('hidden'); |
|
|
document.getElementById('authModalTitle').textContent = 'تسجيل الدخول'; |
|
|
} |
|
|
|
|
|
function showSignupForm() { |
|
|
document.getElementById('loginForm').classList.add('hidden'); |
|
|
document.getElementById('signupForm').classList.remove('hidden'); |
|
|
document.getElementById('authModalTitle').textContent = 'إنشاء حساب'; |
|
|
} |
|
|
|
|
|
function showProfile() { |
|
|
document.getElementById('profileModal').classList.remove('hidden'); |
|
|
} |
|
|
|
|
|
function hideProfile() { |
|
|
document.getElementById('profileModal').classList.add('hidden'); |
|
|
} |
|
|
|
|
|
|
|
|
function login() { |
|
|
document.getElementById('authSection').classList.add('hidden'); |
|
|
document.getElementById('profileSection').classList.remove('hidden'); |
|
|
hideAuthModal(); |
|
|
} |
|
|
</script> |
|
|
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Jo7AS/icaf" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
