Spaces:

Abdu-GH
/

hiou

Running

File size: 18,548 Bytes

83d0537

<!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');
            
            // Database of Arabic names (male, female, and unisex)
            const nameDatabase = {
                male: [
                    'محمد', 'أحمد', 'علي', 'عمر', 'خالد', 'محمود', 'يوسف', 'إبراهيم', 
                    'مصطفى', 'حسن', 'حسين', 'عبدالله', 'سعيد', 'طارق', 'بسام', 'وليد',
                    'أنس', 'أسامة', 'جمال', 'رامي', 'زياد', 'سامي', 'شادي', 'صلاح',
                    'عبدالرحمن', 'عبدالعزيز', 'عبدالرحيم', 'فارس', 'كمال', 'مازن', 'ناصر',
                    'أيمن', 'إياد', 'بدر', 'بلال', 'ثامر', 'جلال', 'حسام', 'خليل',
                    'راشد', 'رياض', 'سالم', 'سلمان', 'شريف', 'صلاح', 'عبدالكريم', 'عدنان',
                    'فهد', 'ماجد', 'مروان', 'معاذ', 'منصور', 'نبيل', 'هاني', 'وسام',
                    "",'ياسر', 'يحيى', 'يونس'
                ],
                female: [
                    'فاطمة', 'آمنة', 'خديجة', 'عائشة', 'مريم', 'زينب', 'هناء', 
                    'سارة', 'لمى', 'جنى', 'ليلى', 'رغد', 'رنا', 'ريم', 'سما', 'شيماء',
                    'ضحى', 'غادة', 'فدوى', 'كارمن', 'نادية', 'هند', 'إيمان', 'بتول',
                    'جمانة', 'حياة', 'دعاء', 'ميساء', 'وفاء', 'أبرار', 'أحلام', 'إخلاص',
                    'إسراء', 'إشراق', 'أمل', 'إيناس', 'بشرى', 'تقوى', 'جواهر', 'حبيبة',
                    'خالدة', 'داليا', 'رباب', 'رحيق', 'زكية', 'سجود', 'سلوى', 'شروق',
                    'صابرين', 'عبير', 'غالية', 'فاطمة', 'فوزية', 'قمر', 'ليان', 'مها',
                    'نورين', 'هاجر', 'وجدان', 'يسرى'
                ],
                unisex: [
                    'تيم', 'جود', 'رام', 'رايان', 'سجاد', 'شادن', 'نور', 'يارا', 'أمير',
                    'بشرى', 'تاليا', 'جوري', 'حلا', 'ريناد', 'زهرة', 'سجى', 'سيلين',
                    'شذى', 'غزل', 'لوجين', 'ملاك', 'مها', 'نورين', 'هيا', 'آلاء',
                    'إحسان', 'بيان', 'جنان', 'حور', 'داني', 'راما', 'ريماس', 'ساري',
                    'شادن', 'شروق', 'ضياء', 'علا', 'غيداء', 'لارا', 'لينا', 'ميار',
                    'نورا', 'هاني', 'ولاء', 'ياسين', 'آية', 'إيلاف', 'تالين', 'جودي',
                    'حنين', 'خليل', 'راما', 'رند', 'زين', 'ساري', 'سيلا', 'شام',
                    'شهد', 'صبا', 'طلال', 'عبد', 'غسان', 'لارا', 'ميس', 'ناهد',
                    'هبة', 'وسام', 'ياسمين'
                ]
            };
            
            // Normalize Arabic names by removing hamza variations
            function normalizeName(name) {
                return name.trim()
                    .toLowerCase()
                    .replace(/[أإآ]/g, 'ا')  // Normalize all alef variations to ا
                    .replace(/ة/g, 'ه');    // Normalize ta marbuta to ha
            }

            // Classify name function with confidence calculation
            function classifyName(name) {
                name = name.trim();
                if (!name) return null;
                
                const normalizedName = normalizeName(name);
                
                // Count matches in each category
                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 };
                }
                
                // For unisex names or names in both male and female lists
                return { 
                    gender: 'unisex', 
                    confidence: Math.max(70, 100 - Math.abs(maleCount - femaleCount) * 10)
                };
            }
            
            // Display result function with confidence
            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');
                
                // Show confidence percentage if known
                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);
            }
            
            // Event listeners
            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();
                }
            });
            
            // Add some animation when page loads
            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>