ai-q2a.github.io/index.html at main · ai-q2a/ai-q2a.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>سؤال وجواب AI | موسوعة المعرفة والذكاء الاصطناعي</title>
    <meta name="description" content="منصة سؤال وجواب AI، استكشف آلاف المقالات والإجابات الدقيقة المدعومة بالذكاء الاصطناعي.">
    <meta name="google-site-verification" content="SUcdvpj4FTyntLzCJi2m_F_y4e3ELneqxLlKwHDFs14" />
    <meta name="msvalidate.01" content="E28C016A73E732687A91C5D28EC2252D" />
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- استيراد الفهرس الذي يتم تحديثه تلقائياً -->
    <script src="articles.js"></script>
    <link href="https://fonts.googleapis.com/css2?family=Cairo:wght@400;700&display=swap" rel="stylesheet">
    <style>body { font-family: 'Cairo', sans-serif; }</style>
</head>
<body class="bg-gray-50 flex flex-col min-h-screen">

    <header class="p-6 bg-white shadow-sm border-b text-center">
        <h1 class="text-indigo-900 font-bold text-2xl">سؤال وجواب AI</h1>
    </header>

    <main class="flex-grow max-w-5xl mx-auto p-4 w-full">
        <!-- قسم البحث بالذكاء الاصطناعي -->
        <section class="bg-indigo-900 text-white py-10 rounded-2xl text-center my-8 shadow-xl">
            <h2 class="text-2xl font-bold mb-6">اسأل الذكاء الاصطناعي</h2>
            <div class="max-w-xl mx-auto px-4">
                <div class="bg-white p-2 rounded-full flex shadow-lg">
                    <input id="userInput" type="text" placeholder="اكتب سؤالك هنا..." class="w-full p-3 text-gray-700 outline-none rounded-r-full pr-6">
                    <button onclick="askAI()" id="askBtn" class="bg-indigo-600 px-8 rounded-full text-white font-bold hover:bg-indigo-500 transition">اسأل</button>
                </div>
            </div>
        </section>

        <article id="response" class="hidden max-w-4xl mx-auto my-6 p-8 bg-white rounded-xl shadow-sm border border-indigo-100 leading-relaxed text-gray-800"></article>

        <!-- قسم المقالات -->
        <section class="mt-16 mb-10">
            <div class="flex flex-col md:flex-row justify-between items-center mb-8 gap-4">
                <h2 class="text-xl font-bold text-gray-800 border-r-4 border-indigo-600 pr-3">المقالات المتاحة</h2>
                <input type="text" id="search" onkeyup="render()" placeholder="🔍 ابحث في آلاف المقالات..." class="p-3 border rounded-full w-full md:w-96 shadow-sm outline-indigo-500 pr-4">
            </div>

            <div id="list" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                <!-- يتم التعبئة عبر JS -->
            </div>

            <div id="pagination" class="flex justify-center gap-2 mt-10"></div>
        </section>
    </main>

    <footer class="bg-white border-t py-8 text-center mt-auto">
        <div class="max-w-4xl mx-auto px-4">
            <p class="text-gray-600 font-bold text-lg mb-2">سؤال وجواب AI</p>
            <p class="text-gray-500 text-sm">&copy; 2026 جميع الحقوق محفوظة - منصة الذكاء الاصطناعي التفاعلية </p>
            <div class="mt-4 flex justify-center gap-4 text-indigo-600 text-sm font-semibold">
                <a href="/" class="hover:underline">الرئيسية</a>
                <span>|</span>
                <a href="سياسة الخصوصية.html" class="hover:underline">سياسة الخصوصية</a>
            </div>
        </div>
    </footer>

    <script>
        let currentPage = 1;
        const perPage = 12;

        function render() {
            const query = document.getElementById('search').value.toLowerCase();
            const filtered = articleList.filter(name => name.toLowerCase().includes(query));

            const start = (currentPage - 1) * perPage;
            const paginated = filtered.slice(start, start + perPage);

            const list = document.getElementById('list');
            list.innerHTML = paginated.map(name => `
                <a href="${name}" class="p-5 bg-white border border-gray-200 rounded-xl hover:border-indigo-500 hover:shadow-md transition flex items-center">
                    <span class="text-indigo-600 ml-2">📄</span>
                    <span class="font-bold text-gray-700">${name.replace('.html', '').replace(/-/g, ' ')}</span>
                </a>
            `).join('');

            const pages = Math.ceil(filtered.length / perPage);
            document.getElementById('pagination').innerHTML = Array.from({length: pages}, (_, i) =>
                `<button onclick="currentPage=${i+1}; render()" class="px-4 py-2 ${currentPage === i+1 ? 'bg-indigo-600 text-white' : 'bg-gray-200'} rounded-lg">${i+1}</button>`
            ).join('');
        }

        async function askAI() {
            const prompt = document.getElementById('userInput').value;
            const resDiv = document.getElementById('response');
            if(!prompt) return;
            resDiv.classList.remove('hidden');
            resDiv.innerText = "جاري التفكير...";
            try {
                const res = await fetch(`https://text.pollinations.ai/${encodeURIComponent(prompt)}`);
                resDiv.innerText = await res.text();
            } catch (err) { resDiv.innerText = "حدث خطأ."; }
        }

        window.onload = render;
    </script>
</body>
</html>