Add index.html
هذا الالتزام موجود في:
552
index.html
Normal file
552
index.html
Normal file
@@ -0,0 +1,552 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ar" dir="rtl">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
|
||||
<title>أمان | ملاذك الرقمي الآمن</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"></script>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
|
||||
body {
|
||||
font-family: 'Cairo', sans-serif;
|
||||
background: #FEFAF5;
|
||||
color: #1E1A17;
|
||||
overflow-x: hidden;
|
||||
/* Subtle texture for warmth */
|
||||
background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23d94f30' fill-opacity='0.02'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
/* --- Sanctuary Color Palette --- */
|
||||
:root {
|
||||
--primary: #D94F30; /* Warm Terracotta */
|
||||
--secondary: #5E8B7E; /* Sage Green (Safety/Trust) */
|
||||
--bg: #FEFAF5; /* Cream */
|
||||
--text: #2D2A26; /* Soft Charcoal */
|
||||
}
|
||||
|
||||
.glass-card {
|
||||
background: rgba(255, 255, 255, 0.85);
|
||||
backdrop-filter: blur(24px);
|
||||
border-radius: 48px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.9);
|
||||
box-shadow: 0 20px 40px -10px rgba(217, 79, 48, 0.08), 0 0 0 1px rgba(0,0,0,0.01);
|
||||
}
|
||||
|
||||
/* --- Typography & Hierarchy --- */
|
||||
h1, h2, h3 { letter-spacing: -0.02em; }
|
||||
|
||||
.text-sanctuary {
|
||||
background: linear-gradient(135deg, var(--primary), #E88B6B);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
.text-safe {
|
||||
color: var(--secondary);
|
||||
}
|
||||
|
||||
/* --- Buttons: Tactile & Friendly --- */
|
||||
.btn-primary {
|
||||
background: var(--primary);
|
||||
color: white;
|
||||
padding: 18px 40px;
|
||||
border-radius: 100px;
|
||||
font-weight: 700;
|
||||
font-size: 1.1rem;
|
||||
transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
box-shadow: 0 10px 20px -5px rgba(217, 79, 48, 0.3);
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
.btn-primary:hover {
|
||||
transform: translateY(-3px) scale(1.02);
|
||||
box-shadow: 0 15px 30px -8px rgba(217, 79, 48, 0.4);
|
||||
background: #E05A3A;
|
||||
}
|
||||
.btn-primary:active { transform: scale(0.98); }
|
||||
|
||||
.btn-secondary {
|
||||
background: rgba(94, 139, 126, 0.1);
|
||||
color: var(--secondary);
|
||||
padding: 16px 32px;
|
||||
border-radius: 100px;
|
||||
font-weight: 700;
|
||||
border: 2px solid transparent;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
.btn-secondary:hover {
|
||||
background: var(--secondary);
|
||||
color: white;
|
||||
border-color: var(--secondary);
|
||||
}
|
||||
|
||||
/* --- Chat Interface: Friendly & Private --- */
|
||||
.chat-container {
|
||||
border-radius: 40px;
|
||||
background: #FFFFFF;
|
||||
border: 1px solid #F5EFE7;
|
||||
box-shadow: 0 30px 60px -20px rgba(0,0,0,0.08);
|
||||
}
|
||||
|
||||
.user-bubble {
|
||||
background: var(--primary);
|
||||
color: white;
|
||||
border-radius: 30px 30px 6px 30px;
|
||||
padding: 16px 24px;
|
||||
box-shadow: 0 4px 12px rgba(217, 79, 48, 0.15);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.ai-bubble {
|
||||
background: #F7F4F0;
|
||||
color: #3D3A36;
|
||||
border-radius: 30px 30px 30px 6px;
|
||||
padding: 16px 24px;
|
||||
border: 1px solid #EDE6DB;
|
||||
}
|
||||
|
||||
.chat-input {
|
||||
border: 2px solid #F0E8DD;
|
||||
border-radius: 100px;
|
||||
padding: 18px 28px;
|
||||
font-size: 1.05rem;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
.chat-input:focus {
|
||||
border-color: var(--secondary);
|
||||
box-shadow: 0 0 0 4px rgba(94, 139, 126, 0.15);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* --- Floating Elements --- */
|
||||
.float-cta {
|
||||
position: fixed;
|
||||
bottom: 32px;
|
||||
right: 32px;
|
||||
z-index: 999;
|
||||
background: var(--primary);
|
||||
color: white;
|
||||
border-radius: 100px;
|
||||
padding: 16px 40px;
|
||||
box-shadow: 0 15px 30px -8px rgba(217, 79, 48, 0.5);
|
||||
animation: pulse-soft 3s infinite;
|
||||
}
|
||||
|
||||
.emergency-btn {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
transform: translateY(-50%);
|
||||
z-index: 999;
|
||||
background: #2D2A26;
|
||||
color: white;
|
||||
padding: 12px 8px;
|
||||
border-radius: 0 12px 12px 0;
|
||||
writing-mode: vertical-rl;
|
||||
text-orientation: mixed;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
opacity: 0.7;
|
||||
transition: 0.2s;
|
||||
border-left: 3px solid var(--primary);
|
||||
}
|
||||
.emergency-btn:hover { opacity: 1; background: #000; }
|
||||
|
||||
/* Animations */
|
||||
@keyframes pulse-soft {
|
||||
0%, 100% { box-shadow: 0 15px 30px -8px rgba(217, 79, 48, 0.5); }
|
||||
50% { box-shadow: 0 15px 40px -5px rgba(217, 79, 48, 0.7); }
|
||||
}
|
||||
|
||||
.status-indicator {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
background: rgba(94, 139, 126, 0.1);
|
||||
color: var(--secondary);
|
||||
padding: 6px 16px;
|
||||
border-radius: 50px;
|
||||
font-size: 0.85rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
.status-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background: var(--secondary);
|
||||
border-radius: 50%;
|
||||
animation: blink 2s infinite;
|
||||
}
|
||||
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
|
||||
|
||||
/* Scrollbar */
|
||||
::-webkit-scrollbar { width: 6px; }
|
||||
::-webkit-scrollbar-track { background: #F5F0EA; }
|
||||
::-webkit-scrollbar-thumb { background: #D9CBBE; border-radius: 20px; }
|
||||
::-webkit-scrollbar-thumb:hover { background: var(--primary); }
|
||||
|
||||
.faq-item.active .faq-answer { max-height: 500px; padding-bottom: 24px; }
|
||||
.faq-answer {
|
||||
max-height: 0;
|
||||
overflow: hidden;
|
||||
transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), padding 0.1s;
|
||||
}
|
||||
.faq-item.active i { transform: rotate(180deg); color: var(--primary); }
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 768px) {
|
||||
.glass-card { border-radius: 32px; }
|
||||
h1 { font-size: 2.5rem; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- Emergency Escape Button (Discreet but accessible) -->
|
||||
<div class="emergency-btn" id="emergencyBtn" title="مخرج طوارئ سريع">
|
||||
<i class="fas fa-arrow-right-from-bracket mb-2"></i>
|
||||
خروج آمن
|
||||
</div>
|
||||
|
||||
<!-- Navigation -->
|
||||
<nav class="fixed top-0 w-full z-50 py-4 px-6 bg-white/80 backdrop-blur-xl border-b border-black/5">
|
||||
<div class="max-w-7xl mx-auto flex justify-between items-center">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-12 h-12 rounded-2xl bg-gradient-to-br from-[#D94F30] to-[#A52E10] flex items-center justify-center shadow-lg transform -rotate-3 hover:rotate-0 transition-transform">
|
||||
<i class="fas fa-shield-heart text-white text-xl"></i>
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<span class="text-2xl font-black tracking-tight leading-none">أمان</span>
|
||||
<span class="text-[10px] font-bold text-[#D94F30] tracking-wider">ملاذك الرقمي</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hidden md:flex gap-8 font-semibold text-[#4D3828] text-sm">
|
||||
<a href="#home" class="hover:text-[#D94F30] transition">الرئيسية</a>
|
||||
<a href="#report" class="hover:text-[#D94F30] transition">ابدأ الحوار</a>
|
||||
<a href="#knowledge" class="hover:text-[#D94F30] transition">معلومات قانونية</a>
|
||||
<a href="#faq" class="hover:text-[#D94F30] transition">أسئلة مكررة</a>
|
||||
</div>
|
||||
<div class="status-indicator">
|
||||
<span class="status-dot"></span>
|
||||
اتصال آمن 256-bit
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Hero Section: Emotional & Inviting -->
|
||||
<section id="home" class="pt-36 pb-20 px-6 max-w-7xl mx-auto">
|
||||
<div class="grid lg:grid-cols-5 gap-16 items-center">
|
||||
<div class="lg:col-span-3 space-y-8">
|
||||
<div class="status-indicator mb-4 inline-flex">
|
||||
<i class="fas fa-hands-holding-heart ml-2 text-[#D94F30]"></i>
|
||||
مساعدون متطوعون متاحون الآن
|
||||
</div>
|
||||
<h1 class="text-5xl md:text-6xl font-black leading-tight">
|
||||
لست وحدك.<br>
|
||||
<span class="text-sanctuary">ملاذك الآمن</span> يبدأ هنا.
|
||||
</h1>
|
||||
<p class="text-lg text-[#6A5D52] leading-relaxed max-w-xl font-medium">
|
||||
نحن هنا لنستمع إليك بدنّة تامة. مساحة رقمية مشفرة لتشارك همومك، تبلغ عن انتهاك، أو تطلب استشارة قانونية أو نفسية دون خوف من التتبع أو الحكم.
|
||||
</p>
|
||||
<div class="flex flex-wrap gap-4 pt-4">
|
||||
<button id="heroReportBtn" class="btn-primary">
|
||||
<i class="fas fa-comment-dots"></i>
|
||||
ابدأ محادثة سرية
|
||||
</button>
|
||||
<button id="heroAnonBtn" class="btn-secondary">
|
||||
<i class="fas fa-user-ninja"></i>
|
||||
تعرف على حمايتك
|
||||
</button>
|
||||
</div>
|
||||
<div class="flex gap-6 text-sm text-[#8C7B6B] font-semibold pt-4">
|
||||
<span class="flex items-center gap-2"><i class="fas fa-lock text-[#5E8B7E]"></i> تشفير كامل</span>
|
||||
<span class="flex items-center gap-2"><i class="fas fa-ghost text-[#5E8B7E]"></i> لا سجلات</span>
|
||||
<span class="flex items-center gap-2"><i class="fas fa-heart text-[#D94F30]"></i> +12,000 حالة دُعمنا</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="lg:col-span-2 hidden lg:block">
|
||||
<div class="relative">
|
||||
<!-- Abstract shapes for "Safety" feeling -->
|
||||
<div class="absolute -top-10 -right-10 w-48 h-48 bg-[#D94F30]/10 rounded-full blur-3xl"></div>
|
||||
<div class="absolute -bottom-10 -left-10 w-48 h-48 bg-[#5E8B7E]/10 rounded-full blur-3xl"></div>
|
||||
|
||||
<div class="glass-card p-8 relative hover:scale-[1.01] transition-transform duration-500">
|
||||
<div class="flex items-center gap-4 mb-6">
|
||||
<div class="w-14 h-14 rounded-full bg-[#FFF0E8] flex items-center justify-center text-[#D94F30]">
|
||||
<i class="fas fa-quote-right text-2xl"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="font-bold text-gray-800">رسالة من نجاة</h3>
|
||||
<p class="text-xs text-gray-500">تمت المساعدة منذ 3 أيام</p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-gray-600 leading-relaxed font-medium text-sm border-r-4 border-[#5E8B7E] pr-4">
|
||||
"كنت خائفة جدًا من الإبلاغ، لكن الدعم النفسي هنا جعلني أشعر بالقوة. شكرًا لأنكم كنتم صوتي حين لم أستطع التحدث."
|
||||
</p>
|
||||
<div class="mt-6 bg-green-50 rounded-2xl p-4 flex items-center gap-3">
|
||||
<i class="fas fa-check-circle text-[#5E8B7E] text-xl"></i>
|
||||
<div class="text-xs font-bold text-[#5E8B7E]">تم حل الحالة بأمان تام وسرية كاملة</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Chat Section: The Core Experience -->
|
||||
<section id="report" class="max-w-6xl mx-auto px-6 py-16">
|
||||
<div class="glass-card p-2 md:p-3 rounded-[48px] overflow-hidden">
|
||||
<div class="bg-[#FFFBF7] rounded-[44px] p-6 md:p-8">
|
||||
<div class="flex flex-col md:flex-row gap-8">
|
||||
<!-- Chat Area -->
|
||||
<div class="flex-1 flex flex-col">
|
||||
<div class="flex justify-between items-center mb-6 pb-4 border-b border-gray-100">
|
||||
<div>
|
||||
<h2 class="text-2xl font-black text-gray-900">مساحة الحوار الآمن</h2>
|
||||
<p class="text-sm text-gray-500 mt-1">محادثتك مشفرة ولا يتم تخزينها نهائياً</p>
|
||||
</div>
|
||||
<div class="hidden md:flex items-center gap-2 text-xs font-bold text-gray-500 bg-white px-4 py-2 rounded-full shadow-sm">
|
||||
<i class="fas fa-shield-check text-[#5E8B7E]"></i>
|
||||
مشفر TLS 1.3
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="chatMessages" class="flex-1 space-y-5 mb-6 h-[400px] overflow-y-auto pr-2 scroll-smooth">
|
||||
<!-- Chat bubbles will be injected here -->
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-2xl p-2 flex gap-2 shadow-sm border border-gray-100">
|
||||
<input type="text" id="chatInput" placeholder="اكتب رسالتك هنا... خطوتك الأولى نحو الحل" class="chat-input flex-1 border-none bg-transparent shadow-none focus:ring-0">
|
||||
<button id="sendMessageBtn" class="btn-primary !py-4 !px-8 !rounded-2xl">
|
||||
<i class="fas fa-paper-plane"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Sidebar: Tips & Safety -->
|
||||
<div class="w-full md:w-72 space-y-6 bg-white/50 rounded-3xl p-6 border border-gray-100">
|
||||
<div>
|
||||
<h3 class="font-bold text-gray-900 mb-3 flex items-center gap-2">
|
||||
<i class="fas fa-lightbulb text-[#D94F30]"></i>
|
||||
نصائح قبل البدء
|
||||
</h3>
|
||||
<ul class="space-y-3 text-sm text-gray-600">
|
||||
<li class="flex items-start gap-2">
|
||||
<span class="text-[#5E8B7E] mt-1">●</span>
|
||||
<span>لا تشارك اسمك الحقيقي أو موقعك.</span>
|
||||
</li>
|
||||
<li class="flex items-start gap-2">
|
||||
<span class="text-[#5E8B7E] mt-1">●</span>
|
||||
<span>احتفظ بلقطات الشاشة كدليل خارج المنصة.</span>
|
||||
</li>
|
||||
<li class="flex items-start gap-2">
|
||||
<span class="text-[#5E8B7E] mt-1">●</span>
|
||||
<span>استخدم زر "الخروج الآمن" إذا شعرت بالخطر.</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="bg-[#FEF3F0] rounded-2xl p-4">
|
||||
<h4 class="font-bold text-[#D94F30] text-sm mb-2">هل أنت في خطر فوري؟</h4>
|
||||
<p class="text-xs text-gray-600 mb-3">إذا كنت في وضع يهدد حياتك، تواصل مع الطوارئ المحلية فوراً.</p>
|
||||
<button class="w-full bg-[#D94F30] text-white text-sm py-2 rounded-full font-bold hover:bg-[#C24020] transition">اتصل بالطوارئ</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Knowledge Section -->
|
||||
<section id="knowledge" class="max-w-7xl mx-auto px-6 py-20">
|
||||
<div class="text-center mb-14">
|
||||
<span class="inline-block px-4 py-1 bg-[#E8F0ED] text-[#5E8B7E] rounded-full text-sm font-bold mb-4">معرفتك قوتك</span>
|
||||
<h2 class="text-4xl md:text-5xl font-black text-gray-900">حقوقك القانونية محمية</h2>
|
||||
<p class="text-gray-500 text-lg max-w-2xl mx-auto mt-4">اختر بلدك للاطلاع على القوانين التي تحميك من التحرش والابتزاز الإلكتروني.</p>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-wrap justify-center gap-3 mb-10" id="countryContainer">
|
||||
<!-- Country buttons injected via JS -->
|
||||
</div>
|
||||
|
||||
<div id="legalInfoCard" class="glass-card p-8 hidden transition-all duration-500 scale-95 opacity-0 transform">
|
||||
<div class="flex justify-between items-start mb-4">
|
||||
<h3 id="countryTitle" class="text-2xl font-black text-[#D94F30]"></h3>
|
||||
<button id="closeLegalCard" class="text-gray-400 hover:text-gray-700 text-2xl">×</button>
|
||||
</div>
|
||||
<p id="countryDescription" class="text-gray-700 leading-relaxed text-lg border-r-4 border-[#5E8B7E] pr-4"></p>
|
||||
<div class="mt-6 flex flex-wrap gap-4">
|
||||
<button id="legalHelpBtn" class="btn-secondary text-sm">اطلب محامي متطوع</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- FAQ Section -->
|
||||
<section id="faq" class="max-w-4xl mx-auto px-6 py-20">
|
||||
<div class="text-center mb-12">
|
||||
<h2 class="text-4xl font-black text-gray-900">أسئلة شائعة حول الأمان</h2>
|
||||
</div>
|
||||
<div class="space-y-4" id="faqContainer">
|
||||
<!-- FAQ items injected via JS -->
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Floating Chat Button (Mobile) -->
|
||||
<div class="float-cta md:hidden" id="mobileChatBtn">
|
||||
<i class="fas fa-comments"></i>
|
||||
<span class="mr-2 font-bold">تحدث معنا</span>
|
||||
</div>
|
||||
|
||||
<footer class="text-center py-12 border-t border-gray-100 bg-white">
|
||||
<div class="max-w-7xl mx-auto px-6">
|
||||
<div class="flex justify-center gap-6 mb-6">
|
||||
<div class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center text-gray-500 hover:bg-[#D94F30] hover:text-white transition">
|
||||
<i class="fab fa-twitter"></i>
|
||||
</div>
|
||||
<div class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center text-gray-500 hover:bg-[#D94F30] hover:text-white transition">
|
||||
<i class="fab fa-instagram"></i>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-sm text-gray-400 font-medium">© 2025 أمان. مبادرة غير ربحية لحماية الأفراد في الفضاء الرقمي.</p>
|
||||
<p class="text-xs text-gray-300 mt-2">تشفير من طرف إلى طرف · لا سياسة حفظ بيانات · ملاذك الآمن</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
// Data
|
||||
const countries = [
|
||||
{ id: 'egypt', name: '🇪🇬 مصر', desc: 'قانون مكافحة جرائم تقنية المعلومات رقم 175 لسنة 2018. عقوبة الابتزاز الإلكتروني تصل للسجن المشدد وغرامة تصل إلى 500 ألف جنيه.' },
|
||||
{ id: 'ksa', name: '🇸🇦 السعودية', desc: 'نظام مكافحة الجرائم المعلوماتية. عقوبة الابتزاز تصل إلى 5 سنوات سجن وغرامة 3 ملايين ريال. الإبلاغ عبر تطبيق "كلنا آمن".' },
|
||||
{ id: 'uae', name: '🇦🇪 الإمارات', desc: 'المرسوم بقانون اتحادي رقم 34 لسنة 2021 بشأن مكافحة الجرائم المعلوماتية. يجرم الابتزاز ويوفر الحماية للضحايا عبر النيابة العامة.' },
|
||||
{ id: 'jordan', name: '🇯🇴 الأردن', desc: 'قانون الجرائم الإلكترونية رقم 27 لسنة 2015. يوفر حماية مشددة للخصوصية ويعاقب على نشر الصور الخاصة دون موافقة.' }
|
||||
];
|
||||
|
||||
const faqs = [
|
||||
{ q: "كيف تضمنون سرية هويتي؟", a: "نستخدم تقنية التشفير من طرف إلى طرف (End-to-End Encryption) ولا نطلب أي بيانات تعريفية (اسم، هاتف، بريد). الخادم يتعامل معك كرقم عشوائي مؤقت، ولا نحتفظ بسجلات (No-Log Policy)." },
|
||||
{ q: "هل يمكن لأحد تتبع مكاني؟", a: "لا. نحن لا نخزن عناوين IP الخاصة بك، وجميع الاتصالات تتم عبر قنوات مشفرة (SSL/TLS) مماثلة لتلك المستخدمة في البنوك." },
|
||||
{ q: "ماذا أفعل إذا تلقيت تهديدات الآن؟", a: "حاول عدم الرد على المهدد، خذ لقطات شاشة كاملة للأدلة، وتواصل معنا فوراً لتوجيهك للجهة القانونية المختصة في بلدك." },
|
||||
{ q: "هل الخدمة مجانية؟", a: "نعم، المنصة مجانية بالكامل. نحن فريق من المتطوعين والمحامين والمعالجين النفسيين الذين يهدفون لتوفير ملاذ آمن للجميع." }
|
||||
];
|
||||
|
||||
// Elements
|
||||
const chatMsgs = document.getElementById('chatMessages');
|
||||
const chatInput = document.getElementById('chatInput');
|
||||
const countryCont = document.getElementById('countryContainer');
|
||||
const faqCont = document.getElementById('faqContainer');
|
||||
const legalCard = document.getElementById('legalInfoCard');
|
||||
|
||||
// Initialize UI
|
||||
function init() {
|
||||
// Render Countries
|
||||
countries.forEach(c => {
|
||||
const btn = document.createElement('button');
|
||||
btn.className = "px-6 py-3 rounded-full bg-white border border-gray-200 text-gray-700 font-bold text-sm hover:border-[#D94F30] hover:text-[#D94F30] transition shadow-sm";
|
||||
btn.textContent = c.name;
|
||||
btn.onclick = () => showLegal(c);
|
||||
countryCont.appendChild(btn);
|
||||
});
|
||||
|
||||
// Render FAQs
|
||||
faqs.forEach(item => {
|
||||
const div = document.createElement('div');
|
||||
div.className = "faq-item bg-white rounded-3xl shadow-sm border border-gray-100 overflow-hidden transition-all hover:shadow-md cursor-pointer";
|
||||
div.innerHTML = `
|
||||
<div class="faq-q flex justify-between items-center p-6">
|
||||
<span class="font-bold text-gray-800 text-lg">${item.q}</span>
|
||||
<i class="fas fa-chevron-down text-gray-400 transition-transform"></i>
|
||||
</div>
|
||||
<div class="faq-answer px-6 text-gray-600 leading-relaxed overflow-hidden max-h-0">
|
||||
<p class="pb-4">${item.a}</p>
|
||||
</div>
|
||||
`;
|
||||
div.onclick = () => div.classList.toggle('active');
|
||||
faqCont.appendChild(div);
|
||||
});
|
||||
|
||||
// Initial Chat Message
|
||||
addMsg('مرحباً بك في "أمان". هذه قناة سرية تماماً. كيف يمكننا مساعدتك اليوم؟', false);
|
||||
}
|
||||
|
||||
// Chat Logic
|
||||
function addMsg(text, isUser) {
|
||||
const div = document.createElement('div');
|
||||
div.className = `flex ${isUser ? 'justify-start' : 'justify-end'}`; // RTL flip
|
||||
div.innerHTML = `<div class="${isUser ? 'user-bubble' : 'ai-bubble'} max-w-[85%]">${text}</div>`;
|
||||
chatMsgs.appendChild(div);
|
||||
chatMsgs.scrollTop = chatMsgs.scrollHeight;
|
||||
}
|
||||
|
||||
function showTyping() {
|
||||
const t = document.createElement('div');
|
||||
t.id = 'typing';
|
||||
t.className = 'flex justify-end'; // RTL
|
||||
t.innerHTML = `<div class="ai-bubble opacity-70">جاري الكتابة...</div>`;
|
||||
chatMsgs.appendChild(t);
|
||||
chatMsgs.scrollTop = chatMsgs.scrollHeight;
|
||||
}
|
||||
|
||||
function removeTyping() {
|
||||
const t = document.getElementById('typing');
|
||||
if(t) t.remove();
|
||||
}
|
||||
|
||||
function handleSend() {
|
||||
const text = chatInput.value.trim();
|
||||
if(!text) return;
|
||||
|
||||
addMsg(text, true);
|
||||
chatInput.value = '';
|
||||
|
||||
showTyping();
|
||||
|
||||
setTimeout(() => {
|
||||
removeTyping();
|
||||
// Simple empathetic logic
|
||||
let res = "شكراً لمشاركتك. مشاركتك الأولى هي خطوة شجاعة. فريقنا يستقبل رسالتك الآن وسيرد عليك بتوجيهات دقيقة خلال دقائق. أنت في مأمن.";
|
||||
if(text.includes("صور") || text.includes("ابتزاز")) {
|
||||
res = "هذا موقف صعب، لكنك لست وحدك. لا ترسل أي أموال ولا تتواصل مع المبتز. خذ لقطات شاشة للأدلة. فريقنا القانوني سيتواصل معك الآن لإيقاف هذا.";
|
||||
}
|
||||
addMsg(res, false);
|
||||
}, 1500);
|
||||
}
|
||||
|
||||
document.getElementById('sendMessageBtn').onclick = handleSend;
|
||||
chatInput.onkeypress = (e) => { if(e.key === 'Enter') handleSend(); };
|
||||
|
||||
// Legal Logic
|
||||
function showLegal(c) {
|
||||
document.getElementById('countryTitle').textContent = c.name;
|
||||
document.getElementById('countryDescription').textContent = c.desc;
|
||||
legalCard.classList.remove('hidden');
|
||||
setTimeout(() => {
|
||||
legalCard.classList.remove('scale-95', 'opacity-0');
|
||||
legalCard.classList.add('scale-100', 'opacity-100');
|
||||
}, 10);
|
||||
legalCard.scrollIntoView({ behavior: 'smooth', block: 'center' });
|
||||
}
|
||||
|
||||
document.getElementById('closeLegalCard').onclick = () => {
|
||||
legalCard.classList.add('hidden');
|
||||
};
|
||||
|
||||
// Emergency
|
||||
document.getElementById('emergencyBtn').onclick = () => {
|
||||
window.location.href = 'https://www.google.com'; // Safe redirect
|
||||
};
|
||||
|
||||
// Hero Buttons
|
||||
document.getElementById('heroReportBtn').onclick = () => document.getElementById('report').scrollIntoView({ behavior: 'smooth' });
|
||||
document.getElementById('heroAnonBtn').onclick = () => document.getElementById('knowledge').scrollIntoView({ behavior: 'smooth' });
|
||||
|
||||
// Init
|
||||
init();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
المرجع في مشكلة جديدة
حظر مستخدم