مولد محتوى المطاعم body { font-family: 'Tajawal', sans-serif; background-color: #f3f4f6; } .generated-content h2 { font-size: 1.75rem; font-weight: bold; margin-top: 2rem; margin-bottom: 1rem; border-bottom: 2px solid #ef4444; padding-bottom: 0.5rem; } .generated-content table { width: 100%; border-collapse: collapse; margin-top: 1rem; } .generated-content th, .generated-content td { padding: 0.75rem; border: 1px solid #ddd; text-align: right; } .generated-content th { background-color: #fee2e2; font-weight: bold; } .generated-content .template-item-details strong { display: block; margin-bottom: 0.25rem; } .generated-content .template-item-ingredients { font-size: 0.9rem; color: #666; } .generated-content .template-badge-price { background-color: #fecaca; color: #b91c1c; padding: 0.25rem 0.75rem; border-radius: 9999px; font-weight: bold; white-space: nowrap; } .generated-content .apps-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 1rem; margin-top: 1.5rem; } .generated-content .apps-grid a { text-align: center; padding: 0.5rem; border: 1px solid #eee; border-radius: 8px; text-decoration: none; color: #444; transition: background-color 0.2s; } .generated-content .apps-grid a:hover { background-color: #f3f4f6; } .generated-content .blogger-faq details { margin-bottom: 1rem; border: 1px solid #eee; border-radius: 8px; padding: 0.75rem 1rem; } .generated-content .blogger-faq summary { font-weight: bold; cursor: pointer; } .generated-content .blogger-faq .answer { padding-top: 0.5rem; } .loader { border: 4px solid #f3f3f3; border-top: 4px solid #ef4444; border-radius: 50%; width: 40px; height: 40px; animation: spin 1s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } #raw-html-box { background: #2d2d2d; color: #f8f8f2; padding: 1rem; border-radius: 8px; overflow: auto; max-height: 400px; direction: ltr; text-align: left; font-size: 0.9rem; line-height: 1.4; } مولد محتوى المطاعم أدخل اسم المطعم أو نوع المنيو والكلمات المفتاحية لتوليد محتوى كامل لصفحة الويب. اسم المطعم / نوع المنيو: الكلمات المفتاحية الإضافية: كتابة المحتوى الكود المصدري (HTML) للمحتوى: document.getElementById('generate-btn').addEventListener('click', async () => { const restaurantName = document.getElementById('restaurant-name').value; const keywords = document.getElementById('keywords').value; const outputDiv = document.getElementById('content-output'); const loader = document.getElementById('loader'); const generateButton = document.getElementById('generate-btn'); const messageBox = document.getElementById('message-box'); if (!restaurantName) { messageBox.textContent = "يجب إدخال اسم المطعم أو نوع المنيو."; messageBox.classList.remove('hidden'); return; } else { messageBox.classList.add('hidden'); } loader.classList.remove('hidden'); generateButton.disabled = true; outputDiv.innerHTML = ''; document.getElementById('raw-code').textContent = ''; const userPrompt = ` Based on the following restaurant/menu type: "${restaurantName}" and additional keywords: "${keywords}", generate the full HTML content for a restaurant's webpage. The content should be in Arabic and follow the exact structure and class names from the provided template. - **Structure:** Start with a <p> followed by <div> for the introduction, then a <span> with <a name='more'></a>. The main content should be wrapped in <main class="template-menu-wrapper">. Use <section> with IDs "template-meals-section", "template-branches-section", and "template-contact-section". Use <h2> with class "template-section-title". - **Menus:** Use a table with class "template-table". Each item's details should be in a <td class="template-item-details"> with a <strong> for the name and <span class="template-item-ingredients"> for ingredients. Prices should be in <span class="template-badge-price">. - **Branches:** Use a table with class "template-branches-table". - **Contact & Hours:** Use a <section class="template-contact-hours-section">. For delivery apps, use a <div class="apps-grid"> with anchor tags. - **FAQ:** Use a <section class="blogger-faq"> with a <h2 class="faq-title"> and multiple <details> tags. Inside each <details> tag, use a <summary> for the question and a <div> with class="answer" for the answer. - **Schema Markup:** Include a valid JSON-LD script for FAQPage at the end. Make sure the questions and answers in the script match the ones you generated in the FAQ section. Ensure the generated HTML is well-structured and uses the same class names and IDs from the provided template for styling. The response should only contain the HTML body content from the introduction to the closing script tag. `; const apiKey = "AIzaSyArXIDHj05iywfkGg92gVVomKV8TBD0CTU"; const apiUrl = `https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-flash-preview-05-20:generateContent?key=${apiKey}`; let retries = 0; const maxRetries = 5; const baseDelay = 1000; const fetchData = async () => { try { const payload = { contents: [{ parts: [{ text: userPrompt }] }], systemInstruction: { parts: [{ text: "أنت مساعد مفيد يقوم بإنشاء محتوى HTML منظم لصفحات الويب الخاصة بالمطاعم بناءً على طلبات المستخدمين. يجب أن يكون المحتوى بتنسيق HTML صالح." }] } }; const response = await fetch(apiUrl, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(payload) }); if (!response.ok) { if (response.status === 429 && retries < maxRetries) { retries++; const delay = baseDelay * Math.pow(2, retries); setTimeout(fetchData, delay); return; } throw new Error(`API error: ${response.status} ${response.statusText}`); } const result = await response.json(); const generatedText = result.candidates?.[0]?.content?.parts?.[0]?.text; if (generatedText) { outputDiv.innerHTML = generatedText; document.getElementById('raw-code').textContent = generatedText; } else { outputDiv.innerHTML = "<p class='text-red-500 text-center'>عذرًا، لم يتمكن المولد من إنشاء المحتوى. يرجى المحاولة مرة أخرى.</p>"; } } catch (error) { console.error("Error generating content:", error); outputDiv.innerHTML = `<p class='text-red-500 text-center'>حدث خطأ: ${error.message}. يرجى التحقق من اتصالك بالشبكة وإعادة المحاولة.</p>`; } finally { loader.classList.add('hidden'); generateButton.disabled = false; } }; fetchData(); });
