مولد الكلمات المفتاحية الذكي

أدخل كلمتك الأساسية لتوليد اقتراحات حديثة وديناميكية

اللغة:

عدد الكلمات: 15

الإعدادات المتقدمة

نوع الكلمات:

التباين: متوسط

اقتراحات حية:

جاري توليد الكلمات المفتاحية...

النتائج

كيف كانت جودة الكلمات المفتاحية المولدة؟

:root {
            --primary-color: #4361ee;
            --secondary-color: #3f37c9;
            --accent-color: #4cc9f0;
            --light-color: #f8f9fa;
            --dark-color: #212529;
            --success-color: #4bb543;
            --warning-color: #fca311;
            --error-color: #e63946;
            --border-radius: 12px;
            --box-shadow: 0 10px 20px rgba(0,0,0,0.1);
            --transition: all 0.3s ease;
        }

* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

bodmy {
            font-family: 'Tajawal', sans-serif;
            line-height: 1.6;
            color: var(--dark-color);
            background-color: #f5f7ff;
            padding: 20px;
        }

.keyword-generator {
            max-width: 800px;
            margin: 30px auto;
            padding: 30px;
            background: white;
            border-radius: var(--border-radius);
            box-shadow: var(--box-shadow);
        }

.generator-header {
            text-align: center;
            margin-bottom: 30px;
        }

.generator-header h1 {
            color: var(--primary-color);
            font-size: 28px;
            margin-bottom: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
        }

.generator-header .subtitle {
            color: #6c757d;
            font-size: 16px;
        }

.input-section {
            margin-bottom: 25px;
        }

.input-group {
            position: relative;
            margin-bottom: 20px;
        }

.keyword-input {
            width: 100%;
            padding: 15px 20px 15px 50px;
            border: 2px solid #e9ecef;
            border-radius: var(--border-radius);
            font-size: 16px;
            transition: var(--transition);
            font-family: 'Tajawal', sans-serif;
        }

.keyword-input:focus {
            border-color: var(--primary-color);
            outline: none;
            box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.2);
        }

.input-icon {
            position: absolute;
            left: 20px;
            top: 50%;
            transform: translateY(-50%);
            color: #adb5bd;
        }

.controls {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            margin-bottom: 25px;
        }

.control-group {
            flex: 1;
            min-width: 200px;
        }

.control-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
            color: var(--dark-color);
            display: flex;
            align-items: center;
            gap: 8px;
        }

.nice-select {
            width: 100%;
            padding: 12px 15px;
            border: 2px solid #e9ecef;
            border-radius: var(--border-radius);
            font-size: 16px;
            background-color: white;
            cursor: pointer;
            transition: var(--transition);
            font-family: 'Tajawal', sans-serif;
        }

.nice-select:focus {
            border-color: var(--primary-color);
            outline: none;
        }

.slider {
            -webkit-appearance: none;
            width: 100%;
            height: 8px;
            border-radius: 4px;
            background: #e9ecef;
            outline: none;
            margin-top: 10px;
        }

.slider::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: var(--primary-color);
            cursor: pointer;
            transition: var(--transition);
        }

.slider::-webkit-slider-thumb:hover {
            background: var(--secondary-color);
            transform: scale(1.1);
        }

.count-value {
            display: inline-block;
            margin-top: 5px;
            font-weight: bold;
            color: var(--primary-color);
        }

.generate-button {
            width: 100%;
            padding: 15px;
            background: var(--primary-color);
            color: white;
            border: none;
            border-radius: var(--border-radius);
            font-size: 18px;
            font-weight: 500;
            cursor: pointer;
            transition: var(--transition);
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            font-family: 'Tajawal', sans-serif;
        }

.generate-button:hover {
            background: var(--secondary-color);
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(67, 97, 238, 0.3);
        }

.generate-button:active {
            transform: translateY(0);
        }

.loading-container {
            display: none;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 30px;
            text-align: center;
        }

.spinner {
            width: 50px;
            height: 50px;
            border: 5px solid rgba(67, 97, 238, 0.2);
            border-radius: 50%;
            border-top-color: var(--primary-color);
            animation: spin 1s linear infinite;
            margin-bottom: 20px;
        }

@keyframes spin {
            to { transform: rotate(360deg); }
        }

.results-section {
            display: none;
            margin-top: 30px;
            animation: fadeIn 0.5s ease;
        }

@keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }

.results-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
            padding-bottom: 10px;
            border-bottom: 1px solid #e9ecef;
        }

.results-header h3 {
            color: var(--primary-color);
            display: flex;
            align-items: center;
            gap: 10px;
        }

.copy-button {
            padding: 8px 15px;
            background: var(--light-color);
            color: var(--dark-color);
            border: 1px solid #e9ecef;
            border-radius: var(--border-radius);
            font-size: 14px;
            cursor: pointer;
            transition: var(--transition);
            display: flex;
            align-items: center;
            gap: 8px;
        }

.copy-button:hover {
            background: #e9ecef;
        }

.copy-button:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

.keywords-output {
            background: #f8f9fa;
            border-radius: var(--border-radius);
            padding: 20px;
            min-height: 100px;
            line-height: 1.8;
            white-space: pre-wrap;
            font-size: 16px;
        }

/* Advanced Settings Styles */
        .advanced-settings {
            background: #f8f9fa;
            padding: 15px;
            border-radius: var(--border-radius);
            margin-bottom: 20px;
            border: 1px solid #e9ecef;
        }

.advanced-settings h3 {
            font-size: 18px;
            margin-bottom: 15px;
            color: var(--secondary-color);
            display: flex;
            align-items: center;
            gap: 10px;
        }

.switch {
            position: relative;
            display: inline-block;
            width: 50px;
            height: 24px;
            margin-left: 10px;
        }

.switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }

.slider.round {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #ccc;
            transition: .4s;
            border-radius: 24px;
        }

.slider.round:before {
            position: absolute;
            content: "";
            height: 16px;
            width: 16px;
            left: 4px;
            bottom: 4px;
            background-color: white;
            transition: .4s;
            border-radius: 50%;
        }

input:checked + .slider.round {
            background-color: var(--primary-color);
        }

input:checked + .slider.round:before {
            transform: translateX(26px);
        }

/* Multiple Select Styles */
        .nice-select[multiple] {
            height: auto;
            padding: 10px;
        }

.nice-select[multiple] option {
            padding: 5px;
            margin: 2px 0;
        }

/* Keyword Items Styles */
        .keyword-item {
            padding: 10px 15px;
            margin: 5px 0;
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.05);
            display: flex;
            align-items: center;
        }

.keyword-item:hover {
            background: #f8f9fa;
        }

.keyword-item input[type="checkbox"] {
            margin-left: 10px;
        }

/* Loading Bar */
        .loading-bar {
            width: 100%;
            height: 5px;
            background: #e9ecef;
            margin-top: 10px;
            border-radius: 3px;
            overflow: hidden;
        }

.loading-progress {
            height: 100%;
            background: var(--primary-color);
            width: 0%;
            transition: width 0.3s ease;
            animation: loading 1.5s infinite;
        }

@keyframes loading {
            0% { width: 0%; }
            50% { width: 100%; }
            100% { width: 0%; }
        }

/* Feedback Section */
        .feedback-section {
            margin-top: 20px;
            padding: 15px;
            background: #f8f9fa;
            border-radius: var(--border-radius);
            display: none;
        }

.feedback-section p {
            margin-bottom: 10px;
        }

.rating-stars {
            margin-bottom: 15px;
        }

.rating-stars i {
            color: #ddd;
            cursor: pointer;
            font-size: 24px;
            transition: var(--transition);
        }

.rating-stars i:hover,
        .rating-stars i.active {
            color: var(--warning-color);
        }

#feedbackText {
            width: 100%;
            padding: 10px;
            border: 1px solid #e9ecef;
            border-radius: var(--border-radius);
            min-height: 80px;
            margin-bottom: 10px;
            font-family: 'Tajawal', sans-serif;
        }

.small-button {
            padding: 8px 15px;
            background: var(--primary-color);
            color: white;
            border: none;
            border-radius: var(--border-radius);
            cursor: pointer;
            transition: var(--transition);
        }

.small-button:hover {
            background: var(--secondary-color);
        }

/* Responsive Design */
        @media (max-width: 768px) {
            .keyword-generator {
                padding: 20px;
                margin: 15px;
            }
            
            .controls {
                flex-direction: column;
                gap: 15px;
            }
            
            .control-group {
                min-width: 100%;
            }
        }

/* RTL Support */
        [dir="rtl"] .input-icon {
            left: auto;
            right: 20px;
        }

[dir="rtl"] .keyword-input {
            padding: 15px 50px 15px 20px;
        }

[dir="rtl"] .keyword-item input[type="checkbox"] {
            margin-left: 0;
            margin-right: 10px;
        }
    </style>
</head>
<body>
    <div class="keyword-generator">
        <div class="generator-header">
            <h1><i class="fas fa-keyboard"></i> مولد الكلمات المفتاحية الذكي</h1>
            <p class="subtitle">أدخل كلمتك الأساسية لتوليد اقتراحات حديثة وديناميكية</p>
        </div>
        
        <div class="input-section">
            <div class="input-group">
                <input type="text" id="mainKeyword" placeholder="أدخل الكلمة الأساسية..." class="keyword-input">
                <div class="input-icon"><i class="fas fa-search"></i></div>
            </div>
            
            <div class="controls">
                <div class="control-group">
                    <label for="languageSelect"><i class="fas fa-language"></i> اللغة:</label>
                    <select id="languageSelect" class="nice-select">
                        <option value="ar">العربية</option>
                        <option value="en">الإنجليزية</option>
                        <option value="es">الإسبانية</option>
                        <option value="fr">الفرنسية</option>
                        <option value="de">الألمانية</option>
                        <option value="pt">البرتغالية</option>
                        <option value="ru">الروسية</option>
                        <option value="zh">الصينية</option>
                        <option value="hi">الهندية</option>
                        <option value="ja">اليابانية</option>
                    </select>
                </div>
                
                <div class="control-group">
                    <label for="keywordCount"><i class="fas fa-list-ol"></i> عدد الكلمات:</label>
                    <input type="range" id="keywordCount" min="5" max="50" value="15" class="slider">
                    <span id="countValue" class="count-value">15</span>
                </div>
            </div>
            
            
            <div class="advanced-settings" id="advancedSettings">
                <h3><i class="fas fa-cog"></i> الإعدادات المتقدمة</h3>
                
                <div class="control-group">
                    <label for="keywordType"><i class="fas fa-filter"></i> نوع الكلمات:</label>
                    <select id="keywordType" class="nice-select" multiple>
                        <option value="comparison" selected>كلمات المقارنة</option>
                        <option value="purchase" selected>كلمات الشراء</option>
                        <option value="info" selected>كلمات المعلومات</option>
                        <option value="local" selected>كلمات محلية</option>
                        <option value="temporal" selected>كلمات زمنية</option>
                    </select>
                </div>
                
                <div class="control-group">
                    <label><i class="fas fa-random"></i> التباين:</label>
                    <input type="range" id="variationLevel" min="1" max="5" value="3" class="slider">
                    <span id="variationValue">متوسط</span>
                </div>
                
                <div class="control-group">
                    <label><i class="fas fa-bolt"></i> اقتراحات حية:</label>
                    <label class="switch">
                        <input type="checkbox" id="liveSuggestions" checked>
                        <span class="slider round"></span>
                    </label>
                </div>
            </div>
            
            <button id="generateBtn" class="generate-button">
                <i class="fas fa-magic"></i> توليد الكلمات
            </button>
        </div>
        
        <div id="loading" class="loading-container">
            <div class="spinner"></div>
            <div class="loading-bar">
                <div class="loading-progress"></div>
            </div>
            <p>جاري توليد الكلمات المفتاحية...</p>
        </div>
        
        <div id="results" class="results-section">
            <div class="results-header">
                <h3><i class="fas fa-bullseye"></i> النتائج</h3>
                <div>
                    <button id="copySelectedBtn" class="copy-button" disabled>
                        <i class="far fa-copy"></i> نسخ المحدد
                    </button>
                    <button id="copyAllBtn" class="copy-button" disabled>
                        <i class="fas fa-copy"></i> نسخ الكل
                    </button>
                </div>
            </div>
            <div id="keywordsOutput" class="keywords-output"></div>
        </div>
        
        
        <div class="feedback-section" id="feedbackSection">
            <p>كيف كانت جودة الكلمات المفتاحية المولدة؟</p>
            <div class="rating-stars">
                <i class="far fa-star" data-rating="1"></i>
                <i class="far fa-star" data-rating="2"></i>
                <i class="far fa-star" data-rating="3"></i>
                <i class="far fa-star" data-rating="4"></i>
                <i class="far fa-star" data-rating="5"></i>
            </div>
            textarea id="feedbackText" placeholder="اقتراحاتك لتحسين النتائج...">textarea
            <button id="submitFeedback" class="small-button">إرسال التقييم</button>
        </div>
    </div>

// بيانات ديناميكية
        const dynamicData = {
            cities: {
                ar: ["الرياض", "جدة", "دبي", "القاهرة", "الكويت"],
                en: ["New York", "London", "Dubai", "Paris", "Tokyo"]
            },
            competitors: {
                ar: ["سامسونج", "أبل", "هواوي", "لينوفو", "شاومي"],
                en: ["Samsung", "Apple", "Huawei", "Xiaomi", "OnePlus"]
            },
            priceTerms: {
                ar: ["أرخص", "أقل سعر", "أفضل سعر", "أجود بأسعار معقولة"],
                en: ["cheap", "best price", "affordable", "low cost"]
            },
            qualityTerms: {
                ar: ["أفضل", "أجود", "أحدث", "الأكثر مبيعاً", "الأعلى تقييماً"],
                en: ["best", "top", "latest", "best selling", "highest rated"]
            }
        };

// DOM Elements
        const mainKeywordInput = document.getElementById('mainKeyword');
        const languageSelect = document.getElementById('languageSelect');
        const keywordCountSlider = document.getElementById('keywordCount');
        const countValueDisplay = document.getElementById('countValue');
        const variationLevelSlider = document.getElementById('variationLevel');
        const variationValueDisplay = document.getElementById('variationValue');
        const keywordTypeSelect = document.getElementById('keywordType');
        const liveSuggestionsCheckbox = document.getElementById('liveSuggestions');
        const generateBtn = document.getElementById('generateBtn');
        const loadingContainer = document.getElementById('loading');
        const resultsSection = document.getElementById('results');
        const keywordsOutput = document.getElementById('keywordsOutput');
        const copyAllBtn = document.getElementById('copyAllBtn');
        const copySelectedBtn = document.getElementById('copySelectedBtn');
        const feedbackSection = document.getElementById('feedbackSection');
        const ratingStars = document.querySelectorAll('.rating-stars i');
        const feedbackText = document.getElementById('feedbackText');
        const submitFeedbackBtn = document.getElementById('submitFeedback');

// Update count value display
        keywordCountSlider.addEventListener('input', function() {
            countValueDisplay.textContent = this.value;
        });

// Update variation value display
        variationLevelSlider.addEventListener('input', function() {
            const values = ["منخفض", "منخفض إلى متوسط", "متوسط", "متوسط إلى عالي", "عالي"];
            variationValueDisplay.textContent = values[this.value - 1];
        });

// Generate keywords function
        generateBtn.addEventListener('click', async function() {
            const keyword = mainKeywordInput.value.trim();
            const language = languageSelect.value;
            const count = parseInt(keywordCountSlider.value);
            const variationLevel = parseInt(variationLevelSlider.value);
            const useLiveSuggestions = liveSuggestionsCheckbox.checked;
            
            if (!keyword) {
                alert("الرجاء إدخال كلمة مفتاحية!");
                return;
            }
            
            // Show loading
            loadingContainer.style.display = 'flex';
            resultsSection.style.display = 'none';
            feedbackSection.style.display = 'none';
            
            try {
                const generatedKeywords = await generateDynamicKeywords(
                    keyword, 
                    language, 
                    count, 
                    variationLevel,
                    useLiveSuggestions
                );
                
                displayResults(generatedKeywords);
                
                // Hide loading and show results
                loadingContainer.style.display = 'none';
                resultsSection.style.display = 'block';
                feedbackSection.style.display = 'block';
                
                // Track keyword usage
                trackKeywordUsage(keyword);
            } catch (error) {
                console.error('Error generating keywords:', error);
                loadingContainer.style.display = 'none';
                alert("حدث خطأ أثناء توليد الكلمات المفتاحية. يرجى المحاولة مرة أخرى.");
            }
        });

// Generate dynamic keywords
        async function generateDynamicKeywords(keyword, language, count, variationLevel, useLiveSuggestions) {
            const currentYear = new Date().getFullYear();
            const selectedTypes = Array.from(keywordTypeSelect.selectedOptions).map(opt => opt.value);
            
            // 1. Generate base keywords from templates
            let keywords = [];
            const templates = keywordTemplates[language] || keywordTemplates['en'];
            
            // Apply variation based on variation level
            const variationCount = Math.min(count, Math.floor(count * (0.2 + (variationLevel * 0.15))));
            
            for (let i = 0; i < variationCount; i++) {
                const template = templates[Math.floor(Math.random() * templates.length)];
                
                let finalKeyword = template
                    .replace('{keyword}', keyword)
                    .replace('{year}', currentYear)
                    .replace('{city}', getRandomItem(dynamicData.cities[language]))
                    .replace('{competitor}', getRandomItem(dynamicData.competitors[language]))
                    .replace('{priceTerm}', getRandomItem(dynamicData.priceTerms[language]))
                    .replace('{qualityTerm}', getRandomItem(dynamicData.qualityTerms[language]));
                
                keywords.push(finalKeyword);
            }
            
            // 2. Add some algorithmic variations
            const remainingCount = count - keywords.length;
            if (remainingCount > 0) {
                const variations = generateAlgorithmicVariations(keyword, language, remainingCount);
                keywords = [...keywords, ...variations];
            }
            
            // 3. Add live suggestions if enabled
            if (useLiveSuggestions && navigator.onLine) {
                try {
                    const liveSuggestions = await fetchLiveSuggestions(keyword, language);
                    // Mix live suggestions with generated keywords
                    keywords = [...liveSuggestions.slice(0, Math.floor(count/3)), ...keywords];
                } catch (error) {
                    console.error('Error fetching live suggestions:', error);
                }
            }
            
            // Remove duplicates and trim to count
            return [...new Set(keywords)].slice(0, count);
        }

// Generate algorithmic variations
        function generateAlgorithmicVariations(keyword, language, count) {
            const variations = [];
            const currentYear = new Date().getFullYear();
            
            // Common patterns
            const patterns = {
                questions: [
                    language === 'ar' ? `ما هو ${keyword}` : `what is ${keyword}`,
                    language === 'ar' ? `كيف يعمل ${keyword}` : `how does ${keyword} work`,
                    language === 'ar' ? `لماذا ${keyword}` : `why ${keyword}`,
                    language === 'ar' ? `أين يمكنني شراء ${keyword}` : `where to buy ${keyword}`
                ],
                comparisons: [
                    language === 'ar' ? `مقارنة بين ${keyword} و ${getRandomItem(dynamicData.competitors[language])}` : 
                                       `compare ${keyword} vs ${getRandomItem(dynamicData.competitors[language])}`,
                    language === 'ar' ? `أيهما أفضل ${keyword} أو ${getRandomItem(dynamicData.competitors[language])}` : 
                                       `which is better ${keyword} or ${getRandomItem(dynamicData.competitors[language])}`
                ],
                modifiers: [
                    language === 'ar' ? `${getRandomItem(dynamicData.qualityTerms[language])} ${keyword}` : 
                                       `${getRandomItem(dynamicData.qualityTerms[language])} ${keyword}`,
                    language === 'ar' ? `${keyword} ${currentYear}` : `${keyword} ${currentYear}`,
                    language === 'ar' ? `سعر ${keyword}` : `price of ${keyword}`
                ]
            };
            
            for (let i = 0; i < count; i++) {
                const patternType = getRandomItem(Object.keys(patterns));
                const variation = getRandomItem(patterns[patternType]);
                variations.push(variation);
            }
            
            return variations;
        }

// Simulate live suggestions
        async function fetchLiveSuggestions(keyword, language) {
            // In a real app, this would call an actual API
            return new Promise(resolve => {
                setTimeout(() => {
                    const suggestions = language === 'ar' ? [
                        `${keyword} الجديد`,
                        `تقييم ${keyword} الحديث`,
                        `أحدث نسخة من ${keyword}`,
                        `${keyword} في ${new Date().getFullYear()}`,
                        `مميزات ${keyword} الجديدة`,
                        `عروض ${keyword} هذا الأسبوع`,
                        `أسعار ${keyword} اليوم`
                    ] : [
                        `new ${keyword}`,
                        `latest ${keyword} review`,
                        `features of ${keyword}`,
                        `${keyword} in ${new Date().getFullYear()}`,
                        `best deals on ${keyword}`,
                        `where to buy ${keyword} near me`
                    ];
                    
                    // Simulate some variations
                    const shuffled = suggestions.sort(() => 0.5 - Math.random());
                    resolve(shuffled.slice(0, 5));
                }, 800);
            });
        }

// Display results
        function displayResults(keywords) {
            keywordsOutput.innerHTML = keywords
                .map((keyword, index) => `
                    <div class="keyword-item">
                        <input type="checkbox" id="kw-${index}" checked>
                        <label for="kw-${index}">${keyword}</label>
                    </div>
                `)
                .join('');
            
            copyAllBtn.disabled = false;
            copySelectedBtn.disabled = false;
        }

// Copy all keywords
        copyAllBtn.addEventListener('click', function() {
            const keywords = Array.from(document.querySelectorAll('.keyword-item label'))
                .map(label => label.textContent.trim());
            
            copyToClipboard(keywords, this);
        });

// Copy selected keywords
        copySelectedBtn.addEventListener('click', function() {
            const keywords = Array.from(document.querySelectorAll('.keyword-item input[type="checkbox"]:checked + label'))
                .map(label => label.textContent.trim());
            
            if (keywords.length === 0) {
                alert("الرجاء تحديد كلمات مفتاحية لنسخها");
                return;
            }
            
            copyToClipboard(keywords, this);
        });

// Copy to clipboard helper
        function copyToClipboard(text, button) {
            // تحويل المصفوفة إلى نص مع فواصل إذا كانت المقدمة مصفوفة
            const textToCopy = Array.isArray(text) ? text.join('، ') : text;
            
            navigator.clipboard.writeText(textToCopy).then(() => {
                // إظهار تأكيد النسخ
                const originalText = button.innerHTML;
                button.innerHTML = '<i class="fas fa-check"></i> تم النسخ!';
                button.style.backgroundColor = 'var(--success-color)';
                
                setTimeout(() => {
                    button.innerHTML = originalText;
                    button.style.backgroundColor = '';
                }, 2000);
            }).catch(err => {
                console.error('Failed to copy: ', err);
                alert("حدث خطأ أثناء النسخ!");
            });
        }

// Rating stars interaction
        ratingStars.forEach(star => {
            star.addEventListener('click', function() {
                const rating = parseInt(this.getAttribute('data-rating'));
                
                // Update stars display
                ratingStars.forEach((s, index) => {
                    if (index < rating) {
                        s.classList.remove('far');
                        s.classList.add('fas', 'active');
                    } else {
                        s.classList.remove('fas', 'active');
                        s.classList.add('far');
                    }
                });
            });
        });

// Submit feedback
        submitFeedbackBtn.addEventListener('click', function() {
            const rating = document.querySelector('.rating-stars .active')?.getAttribute('data-rating') || 0;
            const feedback = feedbackText.value.trim();
            
            // In a real app, this would send to a server
            console.log('Feedback submitted:', { rating, feedback });
            
            alert("شكراً لتقييمك! تم إرسال ملاحظاتك بنجاح.");
            feedbackText.value = '';
            
            // Reset stars
            ratingStars.forEach(star => {
                star.classList.remove('fas', 'active');
                star.classList.add('far');
            });
        });

// Track keyword usage
        const keywordUsage = {};
        function trackKeywordUsage(keyword) {
            keywordUsage[keyword] = (keywordUsage[keyword] || 0) + 1;
            
            // If keyword becomes popular, add it to suggestions
            if (keywordUsage[keyword] > 3) {
                const lang = languageSelect.value;
                if (!keywordTemplates[lang].includes(`{keyword} ${keyword}`)) {
                    keywordTemplates[lang].push(`{keyword} ${keyword}`);
                }
            }
        }

// Helper function to get random item from array
        function getRandomItem(array) {
            return array[Math.floor(Math.random() * array.length)];
        }

// Initialize
        countValueDisplay.textContent = keywordCountSlider.value;
        const variationValues = ["منخفض", "منخفض إلى متوسط", "متوسط", "متوسط إلى عالي", "عالي"];
        variationValueDisplay.textContent = variationValues[variationLevelSlider.value - 1];
    </script>
</body>
</html>

المميزات الرئيسية

واجهة مستخدم متكاملة

تصميم عصري متجاوب يدعم اللغة العربية والاتجاه RTL مع تجربة مستخدم محسنة

نظام توليد ذكي

يعتمد على خوارزميات ديناميكية متطورة بدلاً من القوالب الثابتة لتوليد كلمات مفتاحية فريدة

إعدادات متقدمة

تحكم كامل في أنواع الكلمات المفتاحية ومستوى التباين والتفاصيل الدقيقة للنتائج

دعم متعدد اللغات

يدعم 10 لغات مختلفة مع توليد كلمات ملائمة لكل لغة وثقافتها

ميزات النسخ المحسنة

نسخ الكل أو المحدد مع فواصل عربية بين الكلمات وتأكيدات بصرية عند النسخ

كيفية الاستخدام

أدخل الكلمة الأساسية في حقل الإدخال المخصص
اختر اللغة المطلوبة من القائمة المنسدلة
حدد عدد الكلمات المطلوبة باستخدام شريط التمرير
اضبط الإعدادات المتقدمة حسب احتياجاتك
انقر على زر "توليد الكلمات"
استعرض النتائج وانسخ ما تحتاجه باستخدام أزرار النسخ

التقنيات المستخدمة

HTML5 CSS3 JavaScript Font Awesome Tajawal Font RTL Design Responsive Design

ملاحظات التطوير

الكود جاهز للاستخدام مباشرة دون الحاجة إلى أي إضافات خارجية
يدعم الاتجاه من اليمين لليسار (RTL) للغة العربية بشكل كامل
يمكن تطويره بسهولة لإضافة المزيد من اللغات أو تحسين الخوارزميات
مصمم ليعمل على جميع أحجام الشاشات والأجهزة
لا يحتاج إلى أي إعدادات أو تكوينات مسبقة

هذه الأداة مثالية لمسوقي المحتوى ومالكي المواقع الذين يحتاجون إلى توليد أفكار لكلمات مفتاحية لتحسين محركات البحث (SEO) أو لحملات التسويق الرقمي.

مدونة العرائش التقنية

مولد الكلمات المفتاحية الذكي