|
|
<!DOCTYPE html> |
|
|
<html lang="ar" dir="rtl"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>مصنف الأسماء - ولد أم بنت؟</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> |
|
|
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;900&display=swap'); |
|
|
|
|
|
body { |
|
|
font-family: 'Tajawal', sans-serif; |
|
|
background-color: #f8f9fa; |
|
|
background-image: |
|
|
radial-gradient(circle at 10% 20%, rgba(173, 216, 230, 0.2) 0%, transparent 20%), |
|
|
radial-gradient(circle at 90% 30%, rgba(255, 182, 193, 0.2) 0%, transparent 20%), |
|
|
linear-gradient(to bottom, #f8f9fa, #e9ecef); |
|
|
min-height: 100vh; |
|
|
} |
|
|
|
|
|
.name-card { |
|
|
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.name-card:hover { |
|
|
transform: translateY(-5px); |
|
|
} |
|
|
|
|
|
.result-box { |
|
|
opacity: 0; |
|
|
height: 0; |
|
|
transition: all 0.4s ease; |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
.result-box.show { |
|
|
opacity: 1; |
|
|
height: auto; |
|
|
} |
|
|
|
|
|
.boy { |
|
|
background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%); |
|
|
border-color: #64b5f6; |
|
|
position: relative; |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
.boy::before { |
|
|
content: ""; |
|
|
position: absolute; |
|
|
top: -20px; |
|
|
right: -20px; |
|
|
width: 100px; |
|
|
height: 100px; |
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2364b5f6'%3E%3Cpath d='M9.5 11c1.933 0 3.5-1.567 3.5-3.5S11.433 4 9.5 4 6 5.567 6 7.5 7.567 11 9.5 11zm0-5c.827 0 1.5.673 1.5 1.5S10.327 9 9.5 9 8 8.327 8 7.5 8.673 6 9.5 6z'/%3E%3Cpath d='M17.5 11c1.933 0 3.5-1.567 3.5-3.5S19.433 4 17.5 4 14 5.567 14 7.5s1.567 3.5 3.5 3.5zm0-5c.827 0 1.5.673 1.5 1.5S18.327 9 17.5 9 16 8.327 16 7.5 16.673 6 17.5 6z'/%3E%3Cpath d='M12 15.5c0-.689-.092-1.356-.264-2H5.5C3.019 13.5 1 15.519 1 18v1h1v-1c0-1.93 1.57-3.5 3.5-3.5h7.736c.172-.644.264-1.311.264-2zm6.5-2.5c-1.93 0-3.5 1.57-3.5 3.5v1h7v-1c0-1.93-1.57-3.5-3.5-3.5z'/%3E%3C/svg%3E"); |
|
|
background-repeat: no-repeat; |
|
|
opacity: 0.1; |
|
|
} |
|
|
|
|
|
.girl { |
|
|
background: linear-gradient(135deg, #fce4ec 0%, #f8bbd0 100%); |
|
|
border-color: #f06292; |
|
|
position: relative; |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
.girl::before { |
|
|
content: ""; |
|
|
position: absolute; |
|
|
top: -20px; |
|
|
right: -20px; |
|
|
width: 100px; |
|
|
height: 100px; |
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23f06292'%3E%3Cpath d='M12 4c2.206 0 4 1.794 4 4s-1.794 4-4 4-4-1.794-4-4 1.794-4 4-4zm0-2C8.691 2 6 4.691 6 8s2.691 6 6 6 6-2.691 6-6-2.691-6-6-6z'/%3E%3Cpath d='M19 15h-2c0-2.757-2.243-5-5-5s-5 2.243-5 5H5c0-3.86 3.141-7 7-7s7 3.14 7 7z'/%3E%3Cpath d='M19 20v1h-4v-1h4zm-7-1v1H8v-1h4z'/%3E%3C/svg%3E"); |
|
|
background-repeat: no-repeat; |
|
|
opacity: 0.1; |
|
|
} |
|
|
|
|
|
.unknown { |
|
|
background: linear-gradient(135deg, #f1f8e9 0%, #dcedc8 100%); |
|
|
border-color: #9ccc65; |
|
|
position: relative; |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
.unknown::before { |
|
|
content: ""; |
|
|
position: absolute; |
|
|
top: -20px; |
|
|
right: -20px; |
|
|
width: 100px; |
|
|
height: 100px; |
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%239ccc65'%3E%3Cpath d='M12 2C6.486 2 2 6.486 2 12s4.486 10 10 10 10-4.486 10-10S17.514 2 12 2zm0 18c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8-3.589 8-8 8z'/%3E%3Cpath d='M11 11h2v6h-2zm0-4h2v2h-2z'/%3E%3C/svg%3E"); |
|
|
background-repeat: no-repeat; |
|
|
opacity: 0.1; |
|
|
} |
|
|
|
|
|
.pulse { |
|
|
animation: pulse 2s infinite; |
|
|
} |
|
|
|
|
|
@keyframes pulse { |
|
|
0% { |
|
|
transform: scale(1); |
|
|
} |
|
|
50% { |
|
|
transform: scale(1.05); |
|
|
} |
|
|
100% { |
|
|
transform: scale(1); |
|
|
} |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="flex items-center justify-center p-4"> |
|
|
<div class="w-full max-w-md mx-auto"> |
|
|
<div class="name-card bg-white rounded-xl p-6 mb-6"> |
|
|
<h1 class="text-3xl font-bold text-center text-gray-800 mb-6 relative"> |
|
|
<span class="relative z-10"> |
|
|
<i class="fas fa-child mr-2"></i> مصنف الأسماء |
|
|
</span> |
|
|
<span class="absolute -right-2 -top-2 text-blue-400 opacity-20 text-6xl"> |
|
|
<i class="fas fa-child"></i> |
|
|
</span> |
|
|
<span class="absolute -left-2 -bottom-2 text-pink-400 opacity-20 text-6xl"> |
|
|
<i class="fas fa-child-dress"></i> |
|
|
</span> |
|
|
</h1> |
|
|
|
|
|
<p class="text-gray-600 text-center mb-6"> |
|
|
أدخل اسمًا وسنخبرك هل هو اسم ولد أم بنت بناءً على قاعدة بيانات الأسماء العربية |
|
|
</p> |
|
|
|
|
|
<div class="relative mb-6"> |
|
|
<input |
|
|
type="text" |
|
|
id="nameInput" |
|
|
placeholder="أدخل اسمًا هنا..." |
|
|
class="w-full px-4 py-3 rounded-lg border-2 border-gray-200 focus:border-blue-500 focus:outline-none text-right" |
|
|
autocomplete="off" |
|
|
> |
|
|
<button |
|
|
id="classifyBtn" |
|
|
class="absolute left-0 top-0 h-full px-6 bg-purple-600 text-white rounded-l-full hover:bg-purple-700 transition-all duration-300 hover:shadow-lg" |
|
|
> |
|
|
<i class="fas fa-search"></i> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div id="resultBox" class="result-box rounded-lg p-4 border-2 mb-4"> |
|
|
<div class="flex items-center justify-center"> |
|
|
<div id="resultIcon" class="text-4xl mr-3"></div> |
|
|
<div> |
|
|
<h3 id="resultTitle" class="text-xl font-bold"></h3> |
|
|
<p id="resultText" class="text-gray-700"></p> |
|
|
<p id="resultConfidence" class="text-sm mt-1"></p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="text-center text-sm text-gray-500 mt-6"> |
|
|
<p>هذا التصنيف يعتمد على قاعدة بيانات الأسماء الشائعة في العالم العربي</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white rounded-xl p-6 name-card"> |
|
|
<h2 class="text-xl font-bold text-center text-gray-800 mb-4"> |
|
|
<i class="fas fa-info-circle mr-2"></i> كيف يعمل المصنف؟ |
|
|
</h2> |
|
|
<ul class="space-y-3 text-gray-700"> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> |
|
|
<span>يقارن الاسم مع قاعدة بيانات تحتوي على آلاف الأسماء العربية</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> |
|
|
<span>يحدد جنس الاسم بناءً على الاستخدام الشائع في العالم العربي</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> |
|
|
<span>بعض الأسماء قد تكون مشتركة بين الذكور والإناث</span> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
const nameInput = document.getElementById('nameInput'); |
|
|
const classifyBtn = document.getElementById('classifyBtn'); |
|
|
const resultBox = document.getElementById('resultBox'); |
|
|
const resultIcon = document.getElementById('resultIcon'); |
|
|
const resultTitle = document.getElementById('resultTitle'); |
|
|
const resultText = document.getElementById('resultText'); |
|
|
|
|
|
|
|
|
const nameDatabase = { |
|
|
male: [ |
|
|
'محمد', 'أحمد', 'علي', 'عمر', 'خالد', 'محمود', 'يوسف', 'إبراهيم', |
|
|
'مصطفى', 'حسن', 'حسين', 'عبدالله', 'سعيد', 'طارق', 'بسام', 'وليد', |
|
|
'أنس', 'أسامة', 'جمال', 'رامي', 'زياد', 'سامي', 'شادي', 'صلاح', |
|
|
'عبدالرحمن', 'عبدالعزيز', 'عبدالرحيم', 'فارس', 'كمال', 'مازن', 'ناصر', |
|
|
'أيمن', 'إياد', 'بدر', 'بلال', 'ثامر', 'جلال', 'حسام', 'خليل', |
|
|
'راشد', 'رياض', 'سالم', 'سلمان', 'شريف', 'صلاح', 'عبدالكريم', 'عدنان', |
|
|
'فهد', 'ماجد', 'مروان', 'معاذ', 'منصور', 'نبيل', 'هاني', 'وسام', |
|
|
"",'ياسر', 'يحيى', 'يونس' |
|
|
], |
|
|
female: [ |
|
|
'فاطمة', 'آمنة', 'خديجة', 'عائشة', 'مريم', 'زينب', 'هناء', |
|
|
'سارة', 'لمى', 'جنى', 'ليلى', 'رغد', 'رنا', 'ريم', 'سما', 'شيماء', |
|
|
'ضحى', 'غادة', 'فدوى', 'كارمن', 'نادية', 'هند', 'إيمان', 'بتول', |
|
|
'جمانة', 'حياة', 'دعاء', 'ميساء', 'وفاء', 'أبرار', 'أحلام', 'إخلاص', |
|
|
'إسراء', 'إشراق', 'أمل', 'إيناس', 'بشرى', 'تقوى', 'جواهر', 'حبيبة', |
|
|
'خالدة', 'داليا', 'رباب', 'رحيق', 'زكية', 'سجود', 'سلوى', 'شروق', |
|
|
'صابرين', 'عبير', 'غالية', 'فاطمة', 'فوزية', 'قمر', 'ليان', 'مها', |
|
|
'نورين', 'هاجر', 'وجدان', 'يسرى' |
|
|
], |
|
|
unisex: [ |
|
|
'تيم', 'جود', 'رام', 'رايان', 'سجاد', 'شادن', 'نور', 'يارا', 'أمير', |
|
|
'بشرى', 'تاليا', 'جوري', 'حلا', 'ريناد', 'زهرة', 'سجى', 'سيلين', |
|
|
'شذى', 'غزل', 'لوجين', 'ملاك', 'مها', 'نورين', 'هيا', 'آلاء', |
|
|
'إحسان', 'بيان', 'جنان', 'حور', 'داني', 'راما', 'ريماس', 'ساري', |
|
|
'شادن', 'شروق', 'ضياء', 'علا', 'غيداء', 'لارا', 'لينا', 'ميار', |
|
|
'نورا', 'هاني', 'ولاء', 'ياسين', 'آية', 'إيلاف', 'تالين', 'جودي', |
|
|
'حنين', 'خليل', 'راما', 'رند', 'زين', 'ساري', 'سيلا', 'شام', |
|
|
'شهد', 'صبا', 'طلال', 'عبد', 'غسان', 'لارا', 'ميس', 'ناهد', |
|
|
'هبة', 'وسام', 'ياسمين' |
|
|
] |
|
|
}; |
|
|
|
|
|
|
|
|
function normalizeName(name) { |
|
|
return name.trim() |
|
|
.toLowerCase() |
|
|
.replace(/[أإآ]/g, 'ا') |
|
|
.replace(/ة/g, 'ه'); |
|
|
} |
|
|
|
|
|
|
|
|
function classifyName(name) { |
|
|
name = name.trim(); |
|
|
if (!name) return null; |
|
|
|
|
|
const normalizedName = normalizeName(name); |
|
|
|
|
|
|
|
|
const maleCount = nameDatabase.male.filter(maleName => |
|
|
normalizeName(maleName) === normalizedName |
|
|
).length; |
|
|
|
|
|
const femaleCount = nameDatabase.female.filter(femaleName => |
|
|
normalizeName(femaleName) === normalizedName |
|
|
).length; |
|
|
|
|
|
const unisexCount = nameDatabase.unisex.filter(unisexName => |
|
|
normalizeName(unisexName) === normalizedName |
|
|
).length; |
|
|
|
|
|
const totalMatches = maleCount + femaleCount + unisexCount; |
|
|
|
|
|
if (totalMatches === 0) return { gender: 'unknown', confidence: 0 }; |
|
|
|
|
|
if (maleCount > 0 && femaleCount === 0) { |
|
|
const confidence = maleCount > 1 ? 95 : 85; |
|
|
return { gender: 'male', confidence }; |
|
|
} |
|
|
|
|
|
if (femaleCount > 0 && maleCount === 0) { |
|
|
const confidence = femaleCount > 1 ? 95 : 85; |
|
|
return { gender: 'female', confidence }; |
|
|
} |
|
|
|
|
|
|
|
|
return { |
|
|
gender: 'unisex', |
|
|
confidence: Math.max(70, 100 - Math.abs(maleCount - femaleCount) * 10) |
|
|
}; |
|
|
} |
|
|
|
|
|
|
|
|
function displayResult(name, result) { |
|
|
const gender = result.gender; |
|
|
const confidence = result.confidence; |
|
|
resultBox.classList.remove('boy', 'girl', 'unknown'); |
|
|
|
|
|
switch(gender) { |
|
|
case 'male': |
|
|
resultBox.classList.add('boy'); |
|
|
resultIcon.innerHTML = '<i class="fas fa-mars text-blue-600"></i>'; |
|
|
resultTitle.textContent = 'اسم ولد'; |
|
|
resultText.textContent = `"${name}" هو اسم ذكوري شائع في العالم العربي.`; |
|
|
break; |
|
|
case 'female': |
|
|
resultBox.classList.add('girl'); |
|
|
resultIcon.innerHTML = '<i class="fas fa-venus text-pink-600"></i>'; |
|
|
resultTitle.textContent = 'اسم بنت'; |
|
|
resultText.textContent = `"${name}" هو اسم أنثوي شائع في العالم العربي.`; |
|
|
break; |
|
|
case 'unisex': |
|
|
resultBox.classList.add('unknown'); |
|
|
resultIcon.innerHTML = '<i class="fas fa-venus-mars text-purple-600"></i>'; |
|
|
resultTitle.textContent = 'اسم مشترك'; |
|
|
resultText.textContent = `"${name}" يمكن أن يكون اسمًا للولد أو البنت حسب الاستخدام.`; |
|
|
break; |
|
|
default: |
|
|
resultBox.classList.add('unknown'); |
|
|
resultIcon.innerHTML = '<i class="fas fa-question-circle text-gray-600"></i>'; |
|
|
resultTitle.textContent = 'غير معروف'; |
|
|
resultText.textContent = `"${name}" ليس لدينا معلومات كافية عن هذا الاسم في قاعدة البيانات.`; |
|
|
} |
|
|
|
|
|
resultBox.classList.add('show'); |
|
|
resultBox.classList.add('pulse'); |
|
|
|
|
|
|
|
|
const confidenceEl = document.getElementById('resultConfidence'); |
|
|
if (confidence > 0) { |
|
|
confidenceEl.textContent = `ثقة التصنيف: ${confidence}%`; |
|
|
confidenceEl.className = 'text-sm mt-1 ' + |
|
|
(confidence > 90 ? 'text-green-600' : |
|
|
confidence > 70 ? 'text-blue-600' : 'text-yellow-600'); |
|
|
} else { |
|
|
confidenceEl.textContent = ''; |
|
|
} |
|
|
|
|
|
setTimeout(() => { |
|
|
resultBox.classList.remove('pulse'); |
|
|
}, 2000); |
|
|
} |
|
|
|
|
|
|
|
|
classifyBtn.addEventListener('click', function() { |
|
|
const name = nameInput.value.trim(); |
|
|
if (!name) { |
|
|
alert('الرجاء إدخال اسم للتصنيف'); |
|
|
return; |
|
|
} |
|
|
|
|
|
const gender = classifyName(name); |
|
|
displayResult(name, gender); |
|
|
}); |
|
|
|
|
|
nameInput.addEventListener('keypress', function(e) { |
|
|
if (e.key === 'Enter') { |
|
|
classifyBtn.click(); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
nameInput.focus(); |
|
|
}, 500); |
|
|
}); |
|
|
</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=Abdu-GH/hiou" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
