Spaces:

AnesKAM
/

s

Running

App Files Files Community

AnesKAM commited on 16 days ago

Commit

72a44c3

verified ·

1 Parent(s): 3263fad

Update index.html

Browse files

Files changed (1) hide show

index.html +186 -57

index.html CHANGED Viewed

@@ -3,87 +3,216 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>نتائج البحث - SurfGO</title>
     <style>
-        body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: #f8f9fa; margin: 0; padding: 20px; }
-        .container { max-width: 800px; margin: auto; }
-        .search-info { margin-bottom: 20px; color: #555; font-size: 0.9em; }
-        .result-item { background: white; padding: 15px; border-radius: 8px; margin-bottom: 15px; box-shadow: 0 2px 4px rgba(0,0,0,0.05); }
-        .result-item a { color: #1a0dab; text-decoration: none; font-size: 1.2em; }
-        .result-item a:hover { text-decoration: underline; }
-        .result-item .url { color: #006621; font-size: 0.85em; display: block; margin-top: 2px; word-break: break-all; }
-        .result-item .content { color: #4d5156; margin-top: 8px; line-height: 1.4; }
-        .loading { text-align: center; padding: 50px; font-weight: bold; color: #007bff; }
-        .error { color: red; text-align: center; padding: 20px; }
-        .no-results { text-align: center; padding: 20px; color: #777; }
     </style>
 </head>
 <body>
 <div class="container">
-    <h2 id="query-title">جاري البحث عن...</h2>
-    <div id="results-container">
-        <div class="loading">انتظر قليلاً، جاري جلب النتائج من سيرفر OpenShift...</div>
     </div>
 </div>
 <script>
-    // 1. استخراج كلمة البحث من الرابط (URL Parameters)
     const urlParams = new URLSearchParams(window.location.search);
     const query = urlParams.get('q');
-    const category = urlParams.get('categories') || 'general';
-    if (query) {
-        document.getElementById('query-title').innerText = `نتائج البحث عن: ${query}`;
-        fetchResults(query, category);
-    } else {
-        document.getElementById('results-container').innerHTML = '<div class="error">لم يتم إدخال كلمة بحث!</div>';
     }
-    async function fetchResults(query, cat) {
-        const resultsContainer = document.getElementById('results-container');
-        // رابط سيرفرك الأصلي
-        const targetUrl = `https://searxng-anesnt-dev.apps.rm1.0a51.p1.openshiftapps.com/search?q=${encodeURIComponent(query)}&format=json&categories=${cat}&language=ar&safesearch=1`;
-        // استخدام بروكسي AllOrigins لتجاوز CORS
-        const proxyUrl = `https://api.allorigins.win/get?url=${encodeURIComponent(targetUrl)}`;
         try {
             const response = await fetch(proxyUrl);
-            if (!response.ok) throw new Error("فشل في الاتصال بالبروكسي");
             const data = await response.json();
-            // تحويل البيانات من نص إلى JSON
-            const searchData = JSON.parse(data.contents);
-            resultsContainer.innerHTML = ''; // تنظيف شاشة التحميل
-            if (searchData.results && searchData.results.length > 0) {
-                searchData.results.forEach(item => {
-                    const resultHtml = `
-                        <div class="result-item">
-                            <a href="${item.url}" target="_blank">${item.title}</a>
-                            <span class="url">${item.url}</span>
-                            <div class="content">${item.content || 'لا يوجد وصف متاح.'}</div>
-                        </div>
-                    `;
-                    resultsContainer.innerHTML += resultHtml;
-                });
-            } else {
-                resultsContainer.innerHTML = '<div class="no-results">لم نجد أي نتائج لهذه الكلمة.</div>';
             }
         } catch (error) {
-            console.error("Error:", error);
-            resultsContainer.innerHTML = `
-                <div class="error">
-                    حدث خطأ أثناء جلب البيانات.<br>
-                    تأكد أن سيرفر OpenShift يعمل أو جرب لاحقاً.<br>
-                    <small>${error.message}</small>
-                </div>`;
         }
     }
 </script>
 </body>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>نتائج بحث SurfGO</title>
+    <!-- استيراد خط Tajawal من جوجل -->
+    <link href="https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700&display=swap" rel="stylesheet">
     <style>
+        :root {
+            --primary-color: #4285f4;
+            --bg-color: #f8f9fa;
+            --card-bg: #ffffff;
+            --text-main: #202124;
+            --text-muted: #4d5156;
+            --link-color: #1a0dab;
+            --url-color: #006621;
+        }
+        body {
+            font-family: 'Tajawal', sans-serif;
+            background-color: var(--bg-color);
+            color: var(--text-main);
+            margin: 0;
+            padding: 0;
+            line-height: 1.6;
+        }
+        /* رأس الصفحة */
+        header {
+            background: var(--card-bg);
+            padding: 20px;
+            box-shadow: 0 1px 6px rgba(32,33,36,0.1);
+            position: sticky;
+            top: 0;
+            z-index: 1000;
+        }
+        .header-content {
+            max-width: 1000px;
+            margin: 0 auto;
+            display: flex;
+            align-items: center;
+            gap: 20px;
+        }
+        .logo {
+            font-size: 24px;
+            font-weight: 700;
+            color: var(--primary-color);
+            text-decoration: none;
+        }
+        /* حاوية النتائج */
+        .container {
+            max-width: 800px;
+            margin: 30px auto;
+            padding: 0 20px;
+        }
+        .stats {
+            font-size: 14px;
+            color: var(--text-muted);
+            margin-bottom: 20px;
+        }
+        /* تصميم بطاقة النتيجة */
+        .result-card {
+            background: var(--card-bg);
+            padding: 18px;
+            border-radius: 12px;
+            margin-bottom: 20px;
+            transition: transform 0.2s, box-shadow 0.2s;
+            border: 1px solid transparent;
+        }
+        .result-card:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 4px 12px rgba(0,0,0,0.08);
+            border-color: #e0e0e0;
+        }
+        .result-card a {
+            text-decoration: none;
+            color: var(--link-color);
+            font-size: 1.25rem;
+            font-weight: 500;
+            display: block;
+            margin-bottom: 4px;
+        }
+        .result-card a:hover {
+            text-decoration: underline;
+        }
+        .result-card .cite {
+            font-size: 13px;
+            color: var(--url-color);
+            margin-bottom: 10px;
+            display: block;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+        .result-card .snippet {
+            font-size: 15px;
+            color: var(--text-muted);
+        }
+        /* أنيميشن التحميل */
+        .shimmer {
+            height: 100px;
+            background: linear-gradient(90deg, #eff1f3 25%, #e2e2e2 50%, #eff1f3 75%);
+            background-size: 400% 100%;
+            animation: loading 1.5s infinite;
+            border-radius: 12px;
+            margin-bottom: 20px;
+        }
+        @keyframes loading {
+            0% { background-position: 100% 0; }
+            100% { background-position: 0% 0; }
+        }
+        #error-msg {
+            display: none;
+            text-align: center;
+            color: #d93025;
+            padding: 40px;
+        }
     </style>
 </head>
 <body>
+<header>
+    <div class="header-content">
+        <a href="index.html" class="logo">SurfGO</a>
+        <div id="search-box-mini"></div>
+    </div>
+</header>
 <div class="container">
+    <div id="stats" class="stats">جاري البحث عن أفضل النتائج...</div>
+    <div id="loader">
+        <div class="shimmer"></div>
+        <div class="shimmer"></div>
+        <div class="shimmer"></div>
+    </div>
+    <div id="results-list"></div>
+    <div id="error-msg">
+        <h3>عذراً، حدث خطأ!</h3>
+        <p>تأكد من أن سيرفر OpenShift الخاص بك يعمل أو جرب مرة أخرى.</p>
     </div>
 </div>
 <script>
     const urlParams = new URLSearchParams(window.location.search);
     const query = urlParams.get('q');
+    if (!query) {
+        window.location.href = 'index.html';
     }
+    async function getSearchData() {
+        const resultsList = document.getElementById('results-list');
+        const loader = document.getElementById('loader');
+        const stats = document.getElementById('stats');
+        const errorMsg = document.getElementById('error-msg');
+        // الرابط الخاص بك
+        const apiBase = "https://searxng-anesnt-dev.apps.rm1.0a51.p1.openshiftapps.com/search";
+        const fullUrl = `${apiBase}?q=${encodeURIComponent(query)}&format=json&language=ar`;
+        // البروكسي لحل مشكلة CORS
+        const proxyUrl = `https://api.allorigins.win/get?url=${encodeURIComponent(fullUrl)}`;
         try {
             const response = await fetch(proxyUrl);
+            if (!response.ok) throw new Error('Network Error');
             const data = await response.json();
+            const jsonResults = JSON.parse(data.contents);
+            loader.style.display = 'none';
+            stats.innerText = `تم العثور على حوالي ${jsonResults.results.length} نتيجة لـ "${query}"`;
+            if (jsonResults.results.length === 0) {
+                resultsList.innerHTML = "<p>لا توجد نتائج، حاول بكلمات أخرى.</p>";
+                return;
             }
+            jsonResults.results.forEach(item => {
+                const card = `
+                    <div class="result-card">
+                        <cite class="cite">${item.url}</cite>
+                        <a href="${item.url}" target="_blank">${item.title}</a>
+                        <div class="snippet">${item.content || 'لا يوجد وصف متاح لهذا الرابط.'}</div>
+                    </div>
+                `;
+                resultsList.innerHTML += card;
+            });
         } catch (error) {
+            console.error(error);
+            loader.style.display = 'none';
+            errorMsg.style.display = 'block';
         }
     }
+    // انطلاق البحث
+    getSearchData();
 </script>
 </body>