Spaces:
Running
Running
| <html lang="ar" dir="rtl"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>PhishGuard AI | الحماية الذكية</title> | |
| <link href="https://fonts.googleapis.com/css2?family=Noto+Kufi+Arabic:wght@400;700&display=swap" rel="stylesheet"> | |
| <style> | |
| :root { | |
| --primary: #4f46e5; | |
| --primary-hover: #4338ca; | |
| --bg-gradient: linear-gradient(135deg, #0f172a 0%, #1e1b4b 100%); | |
| --glass: rgba(255, 255, 255, 0.05); | |
| --glass-border: rgba(255, 255, 255, 0.1); | |
| } | |
| body { | |
| font-family: 'Noto Kufi Arabic', sans-serif; | |
| background: var(--bg-gradient); | |
| color: white; | |
| margin: 0; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| min-height: 100vh; | |
| padding: 20px; | |
| } | |
| .container { | |
| background: var(--glass); | |
| backdrop-filter: blur(15px); | |
| border: 1px solid var(--glass-border); | |
| padding: 40px; | |
| border-radius: 24px; | |
| width: 100%; | |
| max-width: 550px; /* تم توسيع الحاوية قليلاً لتناسب المربع الجديد */ | |
| text-align: center; | |
| box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5); | |
| } | |
| .logo-icon { font-size: 50px; margin-bottom: 10px; } | |
| h1 { margin: 0; font-size: 28px; font-weight: 700; } | |
| p.subtitle { color: #94a3b8; font-size: 14px; margin-bottom: 30px; } | |
| /* التعديل الجديد للمربع (Textarea) */ | |
| textarea { | |
| width: 100%; | |
| height: 150px; /* ارتفاع مناسب للرسائل الطويلة */ | |
| padding: 16px; | |
| background: rgba(0, 0, 0, 0.2); | |
| border: 1px solid var(--glass-border); | |
| border-radius: 14px; | |
| color: white; | |
| margin-bottom: 20px; | |
| box-sizing: border-box; | |
| text-align: right; | |
| direction: rtl; | |
| font-size: 15px; | |
| font-family: inherit; | |
| resize: vertical; /* يسمح للمستخدم بتغيير الارتفاع يدوياً */ | |
| transition: border-color 0.3s, background 0.3s; | |
| } | |
| textarea:focus { | |
| outline: none; | |
| border-color: var(--primary); | |
| background: rgba(0, 0, 0, 0.3); | |
| } | |
| textarea::placeholder { | |
| color: #64748b; | |
| } | |
| button { | |
| width: 100%; | |
| padding: 16px; | |
| background: var(--primary); | |
| color: white; | |
| border: none; | |
| border-radius: 14px; | |
| font-size: 16px; | |
| font-weight: bold; | |
| cursor: pointer; | |
| transition: 0.3s; | |
| } | |
| button:hover { background: var(--primary-hover); transform: translateY(-2px); } | |
| button:disabled { opacity: 0.5; cursor: not-allowed; } | |
| #resultArea { margin-top: 25px; display: none; animation: fadeIn 0.5s; } | |
| .result-card { padding: 20px; border-radius: 16px; text-align: right; } | |
| .danger { background: rgba(220, 38, 38, 0.1); border: 1px solid #dc3545; color: #fca5a5; } | |
| .safe { background: rgba(22, 163, 74, 0.1); border: 1px solid #28a745; color: #86efac; } | |
| @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } | |
| .loader { | |
| display: none; | |
| margin: 20px auto; | |
| width: 30px; | |
| height: 30px; | |
| border: 3px solid rgba(255,255,255,0.1); | |
| border-radius: 50%; | |
| border-top-color: var(--primary); | |
| animation: spin 1s linear infinite; | |
| } | |
| @keyframes spin { to { transform: rotate(360deg); } } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <div class="logo-icon">🛡️</div> | |
| <h1>PhishGuard AI</h1> | |
| <p class="subtitle">نظام ذكاء اصطناعي لفحص النصوص والروابط المشبوهة</p> | |
| <textarea id="urlInput" placeholder="أدخل النص، الرسالة، أو الرابط للفحص..."></textarea> | |
| <button id="checkBtn" onclick="analyze()">فحص الآن</button> | |
| <div id="loader" class="loader"></div> | |
| <div id="resultArea"> | |
| <div id="resultCard" class="result-card"> | |
| <strong id="verdictText" style="font-size: 18px;"></strong> | |
| <p id="detailsText" style="font-size: 13px; margin-top: 8px; opacity: 0.9;"></p> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| async function analyze() { | |
| const input = document.getElementById('urlInput'); | |
| const btn = document.getElementById('checkBtn'); | |
| const loader = document.getElementById('loader'); | |
| const resultArea = document.getElementById('resultArea'); | |
| const resultCard = document.getElementById('resultCard'); | |
| if (!input.value.trim()) { | |
| alert("يرجى إدخال النص أو الرابط أولاً!"); | |
| return; | |
| } | |
| btn.disabled = true; | |
| loader.style.display = 'block'; | |
| resultArea.style.display = 'none'; | |
| try { | |
| const response = await fetch("https://vat75-phishguard-ai.hf.space/analyze", { | |
| method: "POST", | |
| headers: { "Content-Type": "application/json" }, | |
| body: JSON.stringify({ text: input.value }) | |
| }); | |
| if (!response.ok) throw new Error('تعذر الاتصال بالـ API'); | |
| const data = await response.json(); | |
| const verdict = data?.verdict || "❌ لم يتم الحصول على النتيجة"; | |
| let confValue = data?.confidence || 0; | |
| const confidence = confValue <= 1 ? Math.round(confValue * 100) : Math.round(confValue); | |
| const isScam = verdict.includes("احتيال") || verdict.includes("Phishing"); | |
| resultCard.className = 'result-card ' + (isScam ? 'danger' : 'safe'); | |
| document.getElementById('verdictText').innerText = verdict; | |
| document.getElementById('detailsText').innerText = `نسبة الثقة: ${confidence}%`; | |
| loader.style.display = 'none'; | |
| btn.disabled = false; | |
| resultArea.style.display = 'block'; | |
| } catch (error) { | |
| loader.style.display = 'none'; | |
| btn.disabled = false; | |
| console.error(error); | |
| alert("حدث خطأ! تأكد من تشغيل الـ API وإضافة إعدادات CORS."); | |
| } | |
| } | |
| </script> | |
| </body> | |
| </html> | |