| <!DOCTYPE html> |
| <html lang="ar" dir="rtl"> |
| <head> |
| <meta charset="utf-8" /> |
| <meta name="viewport" content="width=device-width,initial-scale=1" /> |
| <title>توليد المحتوى الذكي — منصة محرك GEO</title> |
| <link href="https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;500;600;700;800;900&family=Inter:wght@400;600;700&family=Teko:wght@300..700&display=swap" rel="stylesheet"> |
| <link rel="stylesheet" href="/theme.css"> |
| <style> |
| :root { |
| --bg: #071f21; |
| --surface: rgba(255, 255, 255, 0.04); |
| --blue: #5fd4dc; |
| --gold: #c8f04e; |
| --red: #ff4d4d; |
| --emerald: #4ade80; |
| --purple: #9370db; |
| --orange: #fbbf24; |
| --cyan: #5fd4dc; |
| --text: #ffffff; |
| --muted: rgba(255, 255, 255, 0.5); |
| --dim: rgba(255, 255, 255, 0.3); |
| --border: rgba(255, 255, 255, 0.08); |
| --glass: rgba(255, 255, 255, 0.035); |
| |
| --hero-grad: linear-gradient(135deg, #fff 0%, #c8f04e 45%, #5fd4dc 100%); |
| --accent-grad: linear-gradient(135deg, #c8f04e 0%, #5fd4dc 100%); |
| --gold-grad: linear-gradient(135deg, #c8f04e 0%, #fbbf24 100%); |
| --accent: #c8f04e; |
| } |
| |
| * { box-sizing: border-box; margin: 0; padding: 0; } |
| body { |
| background: var(--bg); |
| color: var(--text); |
| font-family: 'Cairo', 'Inter', sans-serif; |
| direction: rtl; |
| overflow-x: hidden; |
| line-height: 1.6; |
| } |
| |
| |
| .bg-mesh{position:fixed;inset:0;z-index:-2; |
| background:radial-gradient(circle at 10% 10%,rgba(59,130,246,.12) 0%,transparent 40%), |
| radial-gradient(circle at 90% 90%,rgba(251,191,36,.1) 0%,transparent 40%), |
| radial-gradient(circle at 50% 50%,rgba(239,68,68,.06) 0%,transparent 60%); |
| filter:blur(100px);animation:meshMove 20s infinite alternate ease-in-out} |
| @keyframes meshMove{0%{transform:scale(1) translate(0,0)}100%{transform:scale(1.1) translate(2%,2%)}} |
| .bg-grid { |
| position: fixed; inset: 0; z-index: -1; |
| background-image: |
| linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px), |
| linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px); |
| background-size: 40px 40px; |
| pointer-events: none; |
| } |
| |
| |
| nav { |
| position: sticky; top: 0; z-index: 1000; |
| background: rgba(5, 7, 10, 0.8); |
| backdrop-filter: blur(20px); |
| border-bottom: 1px solid var(--border); |
| height: 80px; display: flex; align-items: center; |
| } |
| .nav-inner { |
| max-width: 1400px; margin: 0 auto; width: 100%; padding: 0 40px; |
| display: flex; justify-content: space-between; align-items: center; |
| } |
| .nav-links { display: flex; gap: 30px; align-items: center; } |
| .nav-link { |
| color: var(--muted); text-decoration: none; |
| font-weight: 700; font-size: 15px; transition: 0.3s; |
| position: relative; |
| } |
| .nav-link:hover, .nav-link.active { color: var(--text); } |
| .nav-link.active::after { |
| content: ''; position: absolute; bottom: -10px; left: 0; right: 0; |
| height: 2px; background: var(--accent); border-radius: 2px; |
| } |
| |
| |
| .nav-user { display: flex; align-items: center; gap: 15px; } |
| .user-info { text-align: right; line-height: 1.2; } |
| .user-name { font-weight: 800; font-size: 14px; color: #fff; } |
| .user-email { font-size: 11px; color: var(--muted); } |
| .user-avatar { |
| width: 40px; height: 40px; border-radius: 12px; |
| background: var(--accent-grad); |
| display: flex; align-items: center; justify-content: center; |
| font-weight: 900; color: #000; font-size: 18px; |
| box-shadow: 0 0 20px rgba(59, 130, 246, 0.3); |
| } |
| .logout-btn { |
| background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.3); |
| color: var(--red); padding: 8px 24px; border-radius: 100px; |
| font-size: 13px; font-weight: 700; cursor: pointer; transition: 0.3s; |
| } |
| .logout-btn:hover { background: var(--red); color: #fff; } |
| |
| |
| .page-container { |
| max-width: 1400px; margin: 0 auto; padding: 40px; |
| } |
| |
| |
| .header-card { |
| background: linear-gradient(165deg, rgba(15, 20, 25, 0.9), rgba(5, 7, 10, 0.95)); |
| border: 1px solid var(--border); |
| border-radius: 24px; padding: 60px; text-align: center; |
| margin-bottom: 40px; position: relative; overflow: hidden; |
| backdrop-filter: blur(20px); |
| } |
| .header-cardHeader { |
| display: inline-block; padding: 6px 16px; border-radius: 100px; |
| background: rgba(0, 212, 255, 0.1); border: 1px solid rgba(0, 212, 255, 0.2); |
| color: var(--accent); font-size: 12px; font-weight: 800; |
| text-transform: uppercase; letter-spacing: 2px; margin-bottom: 20px; |
| } |
| .header-title { |
| font-size: 56px; font-weight: 900; margin-bottom: 16px; |
| background: var(--hero-grad); |
| background-clip: text; |
| -webkit-background-clip: text; |
| -webkit-text-fill-color: transparent; |
| letter-spacing: -1.5px; |
| } |
| .header-subtitle { |
| font-size: 18px; color: var(--muted); max-width: 700px; margin: 0 auto 30px; |
| } |
| |
| |
| .kpi-grid { |
| display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; |
| margin-bottom: 40px; |
| } |
| .kpi-card { |
| background: var(--glass); border: 1px solid var(--border); |
| border-radius: 20px; padding: 24px; text-align: center; |
| transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1); |
| } |
| .kpi-card:hover { |
| transform: translateY(-5px); border-color: var(--accent); |
| box-shadow: 0 10px 30px rgba(0, 212, 255, 0.1); |
| } |
| .kpi-val { |
| font-size: 32px; font-weight: 900; margin-bottom: 4px; |
| font-family: 'Teko', sans-serif; letter-spacing: 1px; |
| background: var(--accent-grad); |
| background-clip: text; |
| -webkit-background-clip: text; |
| -webkit-text-fill-color: transparent; |
| } |
| .kpi-label { font-size: 12px; color: var(--muted); font-weight: 700; text-transform: uppercase; } |
| |
| |
| .tools-wrapper { |
| display: grid; grid-template-columns: 350px 1fr; gap: 30px; |
| } |
| |
| |
| .sidebar-tabs { |
| background: var(--glass); border: 1px solid var(--border); |
| border-radius: 20px; padding: 15px; height: fit-content; |
| display: flex; flex-direction: column; gap: 8px; |
| } |
| .tab-btn { |
| display: flex; align-items: center; gap: 15px; |
| padding: 16px 20px; border-radius: 12px; |
| background: transparent; border: none; |
| color: var(--muted); font-family: 'Cairo'; font-weight: 700; font-size: 14px; |
| cursor: pointer; transition: 0.3s; text-align: right; |
| width: 100%; |
| } |
| .tab-btn:hover { background: rgba(255, 255, 255, 0.05); color: #fff; } |
| .tab-btn.active { |
| background: var(--accent-grad); color: #000; |
| box-shadow: 0 4px 15px rgba(59, 130, 246, 0.2); |
| } |
| |
| |
| .workspace-panel { |
| background: var(--glass); border: 1px solid var(--border); |
| border-radius: 20px; padding: 40px; min-height: 600px; |
| } |
| |
| .form-title { font-size: 24px; font-weight: 800; color: #fff; margin-bottom: 24px; } |
| .form-group { margin-bottom: 20px; } |
| .form-label { display: block; font-size: 12px; font-weight: 800; color: var(--blue); margin-bottom: 8px; } |
| .input, .select, .textarea { |
| width: 100%; background: rgba(0, 0, 0, 0.3); border: 1px solid var(--border); |
| border-radius: 10px; padding: 14px 18px; color: #fff; font-family: 'Cairo'; |
| } |
| .btn-main { |
| width: 100%; height: 56px; border-radius: 100px; border: none; |
| background: var(--accent-grad); color: #000; font-weight: 900; |
| cursor: pointer; transition: 0.3s; |
| } |
| .btn-main:hover { transform: scale(1.05); box-shadow: 0 15px 40px rgba(59, 130, 246, 0.4); } |
| |
| .result-viewer { |
| margin-top: 30px; padding: 30px; background: rgba(0,0,0,0.4); |
| border-radius: 16px; border: 1px solid var(--border); |
| } |
| .hidden { display: none !important; } |
| .progress-container { margin-top: 20px; display: none; } |
| .progress-track { height: 6px; background: rgba(255,255,255,0.05); border-radius: 10px; overflow: hidden; } |
| .progress-fill { height: 6px; width: 0%; background: var(--accent-grad); transition: width 0.4s ease; border-radius: 10px; } |
| |
| .badge { |
| padding: 4px 10px; border-radius: 6px; font-size: 11px; font-weight: 800; |
| background: rgba(59, 130, 246, 0.1); color: var(--blue); border: 1px solid rgba(59, 130, 246, 0.2); |
| } |
| |
| @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } |
| .animate { animation: fadeIn 0.6s ease-out forwards; } |
| </style> |
| </head> |
| <body> |
| <div class="bg-mesh"></div> |
| <div class="bg-grid"></div> |
|
|
| <nav> |
| <div class="nav-inner"> |
| <div class="nav-links"> |
| <a href="/portal.html" class="nav-link">لوحة التحكم</a> |
| <a href="/jobs.html" class="nav-link">المهام</a> |
| <a href="/search.html" class="nav-link">الذكاء</a> |
| <a href="/content_v2.html" class="nav-link active">المحتوى</a> |
| <a href="/recommendations.html" class="nav-link">العروض</a> |
| </div> |
| <div class="nav-user"> |
| <div class="user-info"> |
| <div class="user-name" id="userNameNav">مستخدم</div> |
| <div class="user-email" id="userEmailNav">user@mohrek.com</div> |
| </div> |
| <div class="user-avatar" id="userAvatarNav">M</div> |
| <button class="logout-btn" onclick="logout()">خروج</button> |
| </div> |
| </div> |
| </nav> |
|
|
| <div class="page-container"> |
| <header class="header-card animate"> |
| <span class="header-cardHeader">CONTENT INTELLIGENCE v2.0</span> |
| <h1 class="header-title">توليد المحتوى الذكي</h1> |
| <p class="header-subtitle">استخدم الذكاء الاصطناعي لإنشاء محتوى فائق الجودة يتوافق مع معايير GEO و SEO.</p> |
| <div class="kpi-grid"> |
| <div class="kpi-card"><div class="kpi-val" id="articlesCount">0</div><div class="kpi-label">مقالات مُنشأة</div></div> |
| <div class="kpi-card"><div class="kpi-val" id="descriptionsCount">0</div><div class="kpi-label">أوصاف منتجات</div></div> |
| <div class="kpi-card"><div class="kpi-val" id="schemaCount">0</div><div class="kpi-label">بيانات Schema</div></div> |
| <div class="kpi-card"><div class="kpi-val" id="aiScore">--</div><div class="kpi-label">متوسط درجة AI</div></div> |
| </div> |
| </header> |
|
|
| <div class="tools-wrapper animate" style="animation-delay:0.2s"> |
| <div class="sidebar-tabs"> |
| <button class="tab-btn active" data-tab="generate" onclick="switchTab('generate')"> محرر المقالات</button> |
| <button class="tab-btn" data-tab="optimize" onclick="switchTab('optimize')">⚡ محسّن المحتوى</button> |
| <button class="tab-btn" data-tab="faqs" onclick="switchTab('faqs')"> الأسئلة الشائعة</button> |
| <button class="tab-btn" data-tab="semantic" onclick="switchTab('semantic')"> التحليل الدلالي</button> |
| <button class="tab-btn" data-tab="identity" onclick="switchTab('identity')"> الهوية الذكية</button> |
| <button class="tab-btn" data-tab="schema" onclick="switchTab('schema')"> البيانات المنظمة</button> |
| <button class="btn-main" style="height:44px; margin-top:20px; font-size:12px; background:rgba(255,255,255,0.05); color:#fff" id="connect-research-btn">🔗 ربط البحث</button> |
| </div> |
|
|
| <main class="workspace-panel"> |
| <div id="active-research-status" style="margin-bottom:20px; font-size:12px; color:var(--muted)"></div> |
|
|
| <div id="tab-generate" class="tab-content"> |
| <h2 class="form-title">إنشاء مقالة احترافية</h2> |
| <div class="form-group"> |
| <label class="form-label">الكلمة المفتاحية أو الموضوع</label> |
| <input type="text" class="input" id="gen-keyword" placeholder="مثلاً: أفضل العبايات الخليجية"> |
| </div> |
| <div style="display:grid; grid-template-columns:1fr 1fr; gap:20px"> |
| <div class="form-group"> |
| <label class="form-label">اللغة</label> |
| <select class="select" id="gen-lang"><option value="ar">العربية</option><option value="en">English</option></select> |
| </div> |
| <div class="form-group"> |
| <label class="form-label">المحرك</label> |
| <select class="select" id="gen-backend"><option value="groq">Groq</option><option value="openai">OpenAI</option></select> |
| </div> |
| </div> |
| <button class="btn-main" id="gen-btn">إنتاج محتوى ذكي 🚀</button> |
| <div id="gen-progress" class="progress-container"> |
| <div class="progress-track"><div class="progress-fill" id="gen-progressBar"></div></div> |
| <div style="font-size:11px; margin-top:8px" id="gen-stageLabel">جارٍ التوليد...</div> |
| </div> |
| <div id="gen-result" class="result-viewer hidden"> |
| <div id="gen-title" style="font-weight:900; font-size:20px; color:var(--accent); margin-bottom:15px"></div> |
| <div id="gen-content" style="line-height:1.8"></div> |
| </div> |
| </div> |
|
|
| <div id="tab-optimize" class="tab-content hidden"> |
| <h2 class="form-title">تحسين المحتوى</h2> |
| <div class="form-group"> |
| <label class="form-label">المحتوى</label> |
| <textarea class="textarea" id="opt-content" rows="10"></textarea> |
| </div> |
| <div class="form-group"> |
| <label class="form-label">الكلمة المفتاحية</label> |
| <input type="text" class="input" id="opt-keyword"> |
| </div> |
| <button class="btn-main" id="opt-btn">تحسين الآن ⚡</button> |
| <div id="opt-result" class="result-viewer hidden"> |
| <div id="opt-score" style="font-size:24px; font-weight:900; margin-bottom:15px"></div> |
| <div id="opt-content-out"></div> |
| </div> |
| </div> |
|
|
| <div id="tab-faqs" class="tab-content hidden"> |
| <h2 class="form-title">توليد الأسئلة الشائعة</h2> |
| <input type="text" class="input" id="faq-topic" placeholder="الموضوع"> |
| <button class="btn-main" id="faq-btn" style="margin-top:20px">توليد ❓</button> |
| <div id="faq-result" class="result-viewer hidden"><div id="faq-list"></div></div> |
| </div> |
|
|
| <div id="tab-semantic" class="tab-content hidden"> |
| <h2 class="form-title">التحليل الدلالي</h2> |
| <textarea class="textarea" id="sem-content" rows="8"></textarea> |
| <button class="btn-main" id="sem-btn" style="margin-top:20px">تحليل 🕸️</button> |
| <div id="sem-result" class="result-viewer hidden"><div id="sem-entities"></div></div> |
| </div> |
|
|
| <div id="tab-identity" class="tab-content hidden"> |
| <h2 class="form-title">هوية العلامة التجارية</h2> |
| <button class="btn-main" id="identity-btn">توليد الهوية 🎨</button> |
| <div id="identity-result" class="result-viewer hidden"><div id="identity-hook"></div></div> |
| </div> |
|
|
| <div id="tab-schema" class="tab-content hidden"> |
| <h2 class="form-title">البيانات المنظمة</h2> |
| </div> |
| </main> |
| </div> |
| </div> |
|
|
| |
| <div id="research-modal" class="hidden" style="position:fixed; inset:0; background:rgba(0,0,0,0.8); z-index:2000; display:none; align-items:center; justify-content:center"> |
| <div style="background:var(--surface); padding:40px; border-radius:24px; width:90%; max-width:500px; border:1px solid var(--border); max-height:80vh; overflow-y:auto"> |
| <h3 style="font-size:20px; font-weight:800; margin-bottom:20px; color:#fff">مستودع الأبحاث</h3> |
| <div id="research-list" style="margin-top:20px"></div> |
| <button class="btn-main" style="margin-top:20px" onclick="document.getElementById('research-modal').classList.add('hidden'); document.getElementById('research-modal').style.display='none'">إغلاق</button> |
| </div> |
| </div> |
|
|
| <script> |
| const token = localStorage.getItem('token'); |
| |
| |
| |
| async function loadUserInfo() { |
| try { |
| const res = await fetch('http://localhost:8001/api/users/me', { |
| headers: { 'Authorization': `Bearer ${token}` } |
| }); |
| const data = await res.json(); |
| if (data.ok && data.user) { |
| document.getElementById('userNameNav').textContent = data.user.email.split('@')[0]; |
| document.getElementById('userEmailNav').textContent = data.user.email; |
| document.getElementById('userAvatarNav').textContent = data.user.email[0].toUpperCase(); |
| } |
| } catch (e) { |
| console.error('Failed to load user info:', e); |
| } |
| } |
| loadUserInfo(); |
| |
| function switchTab(id) { |
| document.querySelectorAll('.tab-btn').forEach(b => b.classList.toggle('active', b.dataset.tab === id)); |
| document.querySelectorAll('.tab-content').forEach(c => c.classList.toggle('hidden', c.id !== 'tab-' + id)); |
| } |
| |
| function logout() { localStorage.removeItem('token'); window.location.href = '/'; } |
| |
| async function apiCall(path, body) { |
| try { |
| const res = await fetch(path, { |
| method: 'POST', |
| headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${token}` }, |
| body: JSON.stringify({ |
| ...body, |
| api_keys: { |
| groq: localStorage.getItem('geo_groq_key'), |
| openai: localStorage.getItem('geo_openai_key') |
| } |
| }) |
| }); |
| if (!res.ok) { |
| console.error(`API error: ${res.status} ${res.statusText}`); |
| return { ok: false, error: `HTTP ${res.status}` }; |
| } |
| return await res.json(); |
| } catch (e) { |
| console.error('API call failed:', e); |
| return { ok: false, error: e.message }; |
| } |
| } |
| |
| |
| if (document.getElementById('gen-btn')) { |
| document.getElementById('gen-btn').onclick = async () => { |
| const btn = document.getElementById('gen-btn'); |
| const keyword = document.getElementById('gen-keyword').value.trim(); |
| |
| if (!keyword) { |
| alert('يرجى إدخال كلمة مفتاحية'); |
| return; |
| } |
| |
| btn.disabled = true; |
| btn.textContent = 'جارٍ التوليد...'; |
| document.getElementById('gen-progress').style.display = 'block'; |
| document.getElementById('gen-progressBar').style.width = '30%'; |
| |
| const data = await apiCall('/api/content/generate', { |
| keyword: keyword, |
| lang: document.getElementById('gen-lang').value, |
| prefer_backend: document.getElementById('gen-backend').value |
| }); |
| |
| btn.disabled = false; |
| btn.textContent = 'إنتاج محتوى ذكي 🚀'; |
| document.getElementById('gen-progress').style.display = 'none'; |
| |
| if (data.ok && data.result) { |
| document.getElementById('gen-result').classList.remove('hidden'); |
| document.getElementById('gen-title').textContent = data.result.title || 'بدون عنوان'; |
| document.getElementById('gen-content').innerHTML = (data.result.content || '').replace(/\n/g, '<br>'); |
| } else { |
| alert('خطأ: ' + (data.error || 'فشل التوليد')); |
| } |
| }; |
| } |
| |
| |
| if (document.getElementById('opt-btn')) { |
| document.getElementById('opt-btn').onclick = async () => { |
| const content = document.getElementById('opt-content').value.trim(); |
| const keyword = document.getElementById('opt-keyword').value.trim(); |
| |
| if (!content || !keyword) { |
| alert('يرجى إدخال المحتوى والكلمة المفتاحية'); |
| return; |
| } |
| |
| const btn = document.getElementById('opt-btn'); |
| btn.disabled = true; |
| btn.textContent = 'جارٍ التحسين...'; |
| |
| const data = await apiCall('/api/content/optimize', { |
| content: content, |
| keyword: keyword |
| }); |
| |
| btn.disabled = false; |
| btn.textContent = 'تحسين الآن ⚡'; |
| |
| if (data.ok && data.result) { |
| document.getElementById('opt-result').classList.remove('hidden'); |
| document.getElementById('opt-score').textContent = `درجة التحسين: ${data.result.score || 'N/A'}`; |
| document.getElementById('opt-content-out').innerHTML = (data.result.optimized_content || '').replace(/\n/g, '<br>'); |
| } else { |
| alert('خطأ: ' + (data.error || 'فشل التحسين')); |
| } |
| }; |
| } |
| |
| |
| if (document.getElementById('faq-btn')) { |
| document.getElementById('faq-btn').onclick = async () => { |
| const topic = document.getElementById('faq-topic').value.trim(); |
| |
| if (!topic) { |
| alert('يرجى إدخال الموضوع'); |
| return; |
| } |
| |
| const btn = document.getElementById('faq-btn'); |
| btn.disabled = true; |
| btn.textContent = 'جارٍ التوليد...'; |
| |
| const data = await apiCall('/api/content/faqs', { topic: topic }); |
| |
| btn.disabled = false; |
| btn.textContent = 'توليد ❓'; |
| |
| if (data.ok && data.result && data.result.faqs) { |
| document.getElementById('faq-result').classList.remove('hidden'); |
| document.getElementById('faq-list').innerHTML = data.result.faqs |
| .map(f => `<div style="margin-bottom:20px; padding:15px; background:rgba(255,255,255,0.05); border-radius:10px"><b>س: ${f.question}</b><br><br>ج: ${f.answer}</div>`) |
| .join(''); |
| } else { |
| alert('خطأ: ' + (data.error || 'فشل التوليد')); |
| } |
| }; |
| } |
| |
| |
| if (document.getElementById('sem-btn')) { |
| document.getElementById('sem-btn').onclick = async () => { |
| const content = document.getElementById('sem-content').value.trim(); |
| |
| if (!content) { |
| alert('يرجى إدخال المحتوى'); |
| return; |
| } |
| |
| const btn = document.getElementById('sem-btn'); |
| btn.disabled = true; |
| btn.textContent = 'جارٍ التحليل...'; |
| |
| const data = await apiCall('/api/content/semantic', { content: content }); |
| |
| btn.disabled = false; |
| btn.textContent = 'تحليل 🕸️'; |
| |
| if (data.ok && data.result) { |
| document.getElementById('sem-result').classList.remove('hidden'); |
| const entities = data.result.entities || []; |
| document.getElementById('sem-entities').innerHTML = entities |
| .map(e => `<span class="badge" style="margin:5px; display:inline-block">${e.text || e}</span>`) |
| .join(''); |
| } else { |
| alert('خطأ: ' + (data.error || 'فشل التحليل')); |
| } |
| }; |
| } |
| |
| |
| if (document.getElementById('identity-btn')) { |
| document.getElementById('identity-btn').onclick = async () => { |
| const btn = document.getElementById('identity-btn'); |
| btn.disabled = true; |
| btn.textContent = 'جارٍ التوليد...'; |
| |
| const data = await apiCall('/api/content/identity', {}); |
| |
| btn.disabled = false; |
| btn.textContent = 'توليد الهوية 🎨'; |
| |
| if (data.ok && data.result) { |
| document.getElementById('identity-result').classList.remove('hidden'); |
| document.getElementById('identity-hook').textContent = data.result.brand_hook || 'لم يتم التوليد'; |
| } else { |
| alert('خطأ: ' + (data.error || 'فشل التوليد')); |
| } |
| }; |
| } |
| |
| |
| if (document.getElementById('connect-research-btn')) { |
| document.getElementById('connect-research-btn').onclick = () => { |
| const modal = document.getElementById('research-modal'); |
| modal.classList.remove('hidden'); |
| modal.style.display = 'flex'; |
| }; |
| } |
| </script> |
| </body> |
| </html> |
