Update index.html
Browse files- index.html +23 -227
index.html
CHANGED
|
@@ -3,241 +3,37 @@
|
|
| 3 |
<head>
|
| 4 |
<meta charset="UTF-8">
|
| 5 |
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
-
<title>
|
| 7 |
-
<link href="https://fonts.googleapis.com/css2?family=Tajawal:wght@
|
| 8 |
<style>
|
| 9 |
-
:root {
|
| 10 |
-
|
| 11 |
-
|
| 12 |
-
|
| 13 |
-
|
| 14 |
-
|
| 15 |
-
|
| 16 |
-
|
| 17 |
-
}
|
| 18 |
-
|
| 19 |
-
|
| 20 |
-
|
| 21 |
-
--bg: #202124;
|
| 22 |
-
--card: #303134;
|
| 23 |
-
--text: #e8eaed;
|
| 24 |
-
--muted: #bdc1c6;
|
| 25 |
-
--link: #8ab4f8;
|
| 26 |
-
--border: #3c4043;
|
| 27 |
-
}
|
| 28 |
-
}
|
| 29 |
-
|
| 30 |
-
body {
|
| 31 |
-
font-family: 'Tajawal', sans-serif;
|
| 32 |
-
background-color: var(--bg);
|
| 33 |
-
color: var(--text);
|
| 34 |
-
margin: 0;
|
| 35 |
-
padding: 0;
|
| 36 |
-
}
|
| 37 |
-
|
| 38 |
-
/* الهيدر العلوي */
|
| 39 |
-
header {
|
| 40 |
-
background: var(--card);
|
| 41 |
-
padding: 12px 5%;
|
| 42 |
-
box-shadow: 0 1px 6px rgba(0,0,0,0.1);
|
| 43 |
-
position: sticky;
|
| 44 |
-
top: 0;
|
| 45 |
-
z-index: 1000;
|
| 46 |
-
display: flex;
|
| 47 |
-
align-items: center;
|
| 48 |
-
gap: 20px;
|
| 49 |
-
border-bottom: 1px solid var(--border);
|
| 50 |
-
}
|
| 51 |
-
|
| 52 |
-
.logo {
|
| 53 |
-
font-size: 20px;
|
| 54 |
-
font-weight: 800;
|
| 55 |
-
color: var(--primary);
|
| 56 |
-
text-decoration: none;
|
| 57 |
-
}
|
| 58 |
-
|
| 59 |
-
.search-box {
|
| 60 |
-
flex-grow: 1;
|
| 61 |
-
max-width: 600px;
|
| 62 |
-
}
|
| 63 |
-
|
| 64 |
-
.search-box input {
|
| 65 |
-
width: 100%;
|
| 66 |
-
padding: 10px 20px;
|
| 67 |
-
border-radius: 24px;
|
| 68 |
-
border: 1px solid var(--border);
|
| 69 |
-
background: var(--bg);
|
| 70 |
-
color: var(--text);
|
| 71 |
-
outline: none;
|
| 72 |
-
font-family: 'Tajawal';
|
| 73 |
-
}
|
| 74 |
-
|
| 75 |
-
/* الحاوية الرئيسية */
|
| 76 |
-
.container {
|
| 77 |
-
max-width: 700px;
|
| 78 |
-
margin: 20px auto;
|
| 79 |
-
padding: 0 15px;
|
| 80 |
-
}
|
| 81 |
-
|
| 82 |
-
.stats {
|
| 83 |
-
font-size: 13px;
|
| 84 |
-
color: var(--muted);
|
| 85 |
-
margin-bottom: 20px;
|
| 86 |
-
}
|
| 87 |
-
|
| 88 |
-
/* كرت النتيجة */
|
| 89 |
-
.result-card {
|
| 90 |
-
background: var(--card);
|
| 91 |
-
padding: 18px;
|
| 92 |
-
border-radius: 12px;
|
| 93 |
-
margin-bottom: 16px;
|
| 94 |
-
border: 1px solid var(--border);
|
| 95 |
-
transition: transform 0.2s ease;
|
| 96 |
-
}
|
| 97 |
-
|
| 98 |
-
.result-card:hover {
|
| 99 |
-
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
| 100 |
-
}
|
| 101 |
-
|
| 102 |
-
.result-card .url {
|
| 103 |
-
font-size: 12px;
|
| 104 |
-
color: var(--muted);
|
| 105 |
-
display: block;
|
| 106 |
-
margin-bottom: 4px;
|
| 107 |
-
white-space: nowrap;
|
| 108 |
-
overflow: hidden;
|
| 109 |
-
text-overflow: ellipsis;
|
| 110 |
-
}
|
| 111 |
-
|
| 112 |
-
.result-card a.title {
|
| 113 |
-
text-decoration: none;
|
| 114 |
-
color: var(--link);
|
| 115 |
-
font-size: 1.25rem;
|
| 116 |
-
font-weight: 500;
|
| 117 |
-
display: block;
|
| 118 |
-
margin-bottom: 8px;
|
| 119 |
-
}
|
| 120 |
-
|
| 121 |
-
.result-card a.title:hover {
|
| 122 |
-
text-decoration: underline;
|
| 123 |
-
}
|
| 124 |
-
|
| 125 |
-
.result-card .snippet {
|
| 126 |
-
font-size: 14px;
|
| 127 |
-
line-height: 1.5;
|
| 128 |
-
color: var(--text);
|
| 129 |
-
}
|
| 130 |
-
|
| 131 |
-
/* رسائل الحالة */
|
| 132 |
-
#loader { text-align: center; padding: 50px; color: var(--muted); }
|
| 133 |
-
.error-box {
|
| 134 |
-
display: none;
|
| 135 |
-
text-align: center;
|
| 136 |
-
padding: 40px;
|
| 137 |
-
background: #fff5f5;
|
| 138 |
-
border: 1px solid #feb2b2;
|
| 139 |
-
border-radius: 12px;
|
| 140 |
-
color: #c53030;
|
| 141 |
-
}
|
| 142 |
-
|
| 143 |
-
/* لودر بسيط بالنقاط */
|
| 144 |
-
.dot-flashing {
|
| 145 |
-
display: inline-block;
|
| 146 |
-
width: 10px; height: 10px;
|
| 147 |
-
border-radius: 5px;
|
| 148 |
-
background-color: var(--primary);
|
| 149 |
-
animation: dotFlashing 1s infinite linear alternate;
|
| 150 |
-
}
|
| 151 |
-
@keyframes dotFlashing { 0% { opacity: 0.2; } 100% { opacity: 1; } }
|
| 152 |
</style>
|
| 153 |
</head>
|
| 154 |
<body>
|
| 155 |
|
| 156 |
-
<
|
| 157 |
-
|
| 158 |
-
<div class="search-
|
| 159 |
<form action="./results.html" method="GET">
|
| 160 |
-
<
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 161 |
</form>
|
| 162 |
</div>
|
| 163 |
-
</header>
|
| 164 |
-
|
| 165 |
-
<div class="container">
|
| 166 |
-
<div id="stats" class="stats">جاري تحضير النتائج...</div>
|
| 167 |
-
|
| 168 |
-
<div id="loader">
|
| 169 |
-
<div class="dot-flashing"></div>
|
| 170 |
-
<p>جاري سحب البيانات عبر بروكسي جوجل...</p>
|
| 171 |
-
</div>
|
| 172 |
-
|
| 173 |
-
<div id="results-list"></div>
|
| 174 |
-
|
| 175 |
-
<div id="error-msg" class="error-box">
|
| 176 |
-
<h3>عذراً، فشل الاتصال!</h3>
|
| 177 |
-
<p>تأكد من أن Google Script يعمل وأن سيرفر OpenShift قيد التشغيل.</p>
|
| 178 |
-
<button onclick="location.reload()" style="margin-top:10px; padding:8px 15px; cursor:pointer;">إعادة محاولة</button>
|
| 179 |
-
</div>
|
| 180 |
-
</div>
|
| 181 |
-
|
| 182 |
-
<script>
|
| 183 |
-
// 1. استلام كلمة البحث من الرابط
|
| 184 |
-
const urlParams = new URLSearchParams(window.location.search);
|
| 185 |
-
const query = urlParams.get('q');
|
| 186 |
-
|
| 187 |
-
// 2. إعداد الروابط (تأكد من تحديث رابط جوجل)
|
| 188 |
-
const GOOGLE_SCRIPT_URL = "https://script.googleusercontent.com/macros/echo?user_content_key=AUkAhnRCDcOEwhnh1BxYjmRmPRftaAZXZxBB-C-f4QXwRJ3dG0L6hdb2TJy3l1HiCZ_KlT9jEkyrHgk8cXPUEG-e_E2yd92dBTMOm2Xwf3SQQ5e2yv1ZULKScZCwyt5lSiACfE4PY4a4K6eWRL8FQso2MtqsHMnMDpGJ4L6nk6I4DuA8ZRJoM1LdgG9oh6DM-OXga1tG5lNvN8bDG5-heXTFIdOs6LcqgrZIRxDJCcxYZ72A0UwTnjWjZacbYAqvfO3mSErmr7OFLBVDhrt3tUx6Hh4fj1ou4w&lib=MbVfQ6QGylb-zwE0eS0zjbBi-y3cH6sME"; // ضعه هنا
|
| 189 |
-
const SEARXNG_URL = "https://searxng-anesnt-dev.apps.rm1.0a51.p1.openshiftapps.com/search";
|
| 190 |
-
|
| 191 |
-
if (query) {
|
| 192 |
-
document.getElementById('top-search').value = query;
|
| 193 |
-
fetchData();
|
| 194 |
-
} else {
|
| 195 |
-
window.location.href = './index.html';
|
| 196 |
-
}
|
| 197 |
-
|
| 198 |
-
async function fetchData() {
|
| 199 |
-
const list = document.getElementById('results-list');
|
| 200 |
-
const loader = document.getElementById('loader');
|
| 201 |
-
const errorBox = document.getElementById('error-msg');
|
| 202 |
-
const stats = document.getElementById('stats');
|
| 203 |
-
|
| 204 |
-
// بناء الرابط النهائي لبروكسي جوجل
|
| 205 |
-
const targetApi = `${SEARXNG_URL}?q=${encodeURIComponent(query)}&format=json&language=ar`;
|
| 206 |
-
const proxyUrl = `${GOOGLE_SCRIPT_URL}?url=${encodeURIComponent(targetApi)}`;
|
| 207 |
-
|
| 208 |
-
try {
|
| 209 |
-
const response = await fetch(proxyUrl);
|
| 210 |
-
const data = await response.json();
|
| 211 |
-
|
| 212 |
-
loader.style.display = 'none';
|
| 213 |
-
|
| 214 |
-
if (!data.results || data.results.length === 0) {
|
| 215 |
-
stats.innerText = "لم يتم العثور على نتائج.";
|
| 216 |
-
list.innerHTML = "<p style='text-align:center;'>حاول استخدام كلمات بحث أخرى.</p>";
|
| 217 |
-
return;
|
| 218 |
-
}
|
| 219 |
-
|
| 220 |
-
stats.innerText = `تم العثور على ${data.results.length} نتيجة لـ "${query}"`;
|
| 221 |
-
|
| 222 |
-
data.results.forEach(item => {
|
| 223 |
-
const card = `
|
| 224 |
-
<div class="result-card">
|
| 225 |
-
<span class="url">${item.url}</span>
|
| 226 |
-
<a href="${item.url}" class="title" target="_blank">${item.title}</a>
|
| 227 |
-
<div class="snippet">${item.content || 'وصف غير متوفر لهذا الرابط.'}</div>
|
| 228 |
-
</div>
|
| 229 |
-
`;
|
| 230 |
-
list.innerHTML += card;
|
| 231 |
-
});
|
| 232 |
-
|
| 233 |
-
} catch (error) {
|
| 234 |
-
console.error("Fetch Error:", error);
|
| 235 |
-
loader.style.display = 'none';
|
| 236 |
-
errorBox.style.display = 'block';
|
| 237 |
-
stats.innerText = "فشل الاتصال بالبروكسي.";
|
| 238 |
-
}
|
| 239 |
-
}
|
| 240 |
-
</script>
|
| 241 |
|
| 242 |
</body>
|
| 243 |
</html>
|
|
|
|
| 3 |
<head>
|
| 4 |
<meta charset="UTF-8">
|
| 5 |
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
+
<title>SurfGO | بحث حر وآمن</title>
|
| 7 |
+
<link href="https://fonts.googleapis.com/css2?family=Tajawal:wght@400;700;800&display=swap" rel="stylesheet">
|
| 8 |
<style>
|
| 9 |
+
:root { --primary: #4285f4; --bg: #ffffff; --text: #202124; --border: #dfe1e5; }
|
| 10 |
+
@media (prefers-color-scheme: dark) { :root { --bg: #202124; --text: #e8eaed; --border: #5f6368; } }
|
| 11 |
+
|
| 12 |
+
body { font-family: 'Tajawal', sans-serif; background: var(--bg); color: var(--text); margin: 0; display: flex; flex-direction: column; height: 100vh; align-items: center; justify-content: center; }
|
| 13 |
+
.logo { font-size: 80px; font-weight: 800; color: var(--primary); margin-bottom: 30px; letter-spacing: -2px; }
|
| 14 |
+
.search-container { width: 90%; max-width: 580px; position: relative; }
|
| 15 |
+
.search-container input { width: 100%; padding: 14px 25px; border-radius: 30px; border: 1px solid var(--border); background: transparent; color: var(--text); font-size: 16px; outline: none; transition: box-shadow 0.2s; box-sizing: border-box; }
|
| 16 |
+
.search-container input:focus { box-shadow: 0 1px 6px rgba(32,33,36,0.28); border-color: transparent; }
|
| 17 |
+
.btns { margin-top: 30px; display: flex; gap: 15px; }
|
| 18 |
+
button { padding: 10px 20px; border: none; background: #f8f9fa; color: #3c4043; border-radius: 4px; cursor: pointer; font-family: 'Tajawal'; font-size: 14px; border: 1px solid transparent; }
|
| 19 |
+
button:hover { border: 1px solid #dadce0; box-shadow: 0 1px 1px rgba(0,0,0,0.1); }
|
| 20 |
+
@media (prefers-color-scheme: dark) { button { background: #303134; color: #e8eaed; } }
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 21 |
</style>
|
| 22 |
</head>
|
| 23 |
<body>
|
| 24 |
|
| 25 |
+
<div class="logo">SurfGO</div>
|
| 26 |
+
|
| 27 |
+
<div class="search-container">
|
| 28 |
<form action="./results.html" method="GET">
|
| 29 |
+
<!-- autocomplete="on" لتسجيل الكلمات -->
|
| 30 |
+
<input type="text" name="q" id="main-search" placeholder="ابحث في الويب..." autocomplete="on" required autofocus>
|
| 31 |
+
<div class="btns" style="justify-content: center;">
|
| 32 |
+
<button type="submit">بحث SurfGO</button>
|
| 33 |
+
<button type="button">ضربة حظ</button>
|
| 34 |
+
</div>
|
| 35 |
</form>
|
| 36 |
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 37 |
|
| 38 |
</body>
|
| 39 |
</html>
|