297 أسطر
28 KiB
HTML
297 أسطر
28 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ar" dir="rtl">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>ملاذ | العنف الرقمي</title>
|
||
<script src="https://cdn.tailwindcss.com"></script>
|
||
<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>
|
||
<link href="https://fonts.googleapis.com/css2?family=Cairo:wght@200;400;600;900&display=swap" rel="stylesheet">
|
||
<link href="https://fonts.googleapis.com/css2?family=Noto+Kufi+Arabic:wght@400;700&display=swap" rel="stylesheet">
|
||
<style>
|
||
:root { --paper:#FAFAF8; --ink:#1A1A1A; --night:#0a1e2e; --accent-soft:#D6EDF0; --accent-bold:#0F3858; --sage:#36909E; }
|
||
* { margin:0; padding:0; box-sizing:border-box; -webkit-font-smoothing:antialiased; }
|
||
body { font-family:'Cairo',sans-serif; background-color:var(--paper); color:var(--ink); overflow-x:hidden; }
|
||
.serif { font-family:'Noto Kufi Arabic',sans-serif; }
|
||
#mainNav { transition: background 0.4s ease, box-shadow 0.4s ease, padding 0.4s ease; }
|
||
#mainNav.scrolled { background:rgba(10,30,46,0.95); backdrop-filter:blur(16px); box-shadow:0 4px 30px rgba(0,0,0,0.25); padding-top:1.25rem; padding-bottom:1.25rem; }
|
||
#mainNav.scrolled a, #mainNav.scrolled div { color:#E0F4F6; }
|
||
.reveal-up { opacity:0; transform:translateY(60px); }
|
||
.glass-card { background:rgba(255,255,255,0.6); backdrop-filter:blur(12px); border:1px solid rgba(0,0,0,0.03); box-shadow:0 20px 40px -10px rgba(0,0,0,0.05); transition:transform 0.5s cubic-bezier(0.16,1,0.3,1); }
|
||
.glass-card:hover { transform:translateY(-3px); }
|
||
.page-hero { background:var(--night); min-height:50vh; display:flex; align-items:center; padding:10rem 2rem 5rem; position:relative; overflow:hidden; }
|
||
.page-hero::before { content:''; position:absolute; top:0; left:0; right:0; bottom:0; background:radial-gradient(ellipse at 70% 50%, rgba(54,144,158,0.15) 0%, transparent 60%); }
|
||
.violence-type-card { border-right: 4px solid var(--sage); padding: 2rem; border-radius: 4px; background: white; box-shadow: 0 4px 20px rgba(0,0,0,0.06); transition: all 0.3s ease; }
|
||
.violence-type-card:hover { transform: translateX(-4px); box-shadow: 0 8px 30px rgba(0,0,0,0.1); }
|
||
.step-card { counter-increment: step-counter; position: relative; padding: 2rem; padding-right: 5rem; border: 1px solid rgba(0,0,0,0.08); border-radius: 8px; background: white; }
|
||
.step-card::before { content: counter(step-counter); position: absolute; right: 1.5rem; top: 50%; transform: translateY(-50%); font-size: 2.5rem; font-weight: 900; color: var(--accent-soft); font-family: 'Cairo', sans-serif; }
|
||
.steps-container { counter-reset: step-counter; }
|
||
nav a.nav-link:hover { color: var(--sage) !important; }
|
||
nav a.active-page { color: var(--sage) !important; border-bottom: 2px solid var(--sage); }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<nav id="mainNav" class="fixed top-0 w-full z-50 px-6 md:px-16 py-6 flex justify-between items-center transition-all duration-500">
|
||
<div class="flex gap-6 md:gap-8 text-xs tracking-[0.2em] font-bold text-white">
|
||
<a href="index.html" class="nav-link">الرئيسية</a>
|
||
<a href="violence.html" class="nav-link active-page">العنف الرقمي</a>
|
||
<a href="support.html" class="nav-link">الدعم</a>
|
||
<a href="about.html" class="nav-link">من نحن</a>
|
||
<a href="faq.html" class="nav-link">أسئلة</a>
|
||
</div>
|
||
<a href="index.html"><img src="Malazlogo.png" alt="ملاذ" class="h-8 w-auto" style="filter:brightness(0) invert(1);" onerror="this.style.display='none'"></a>
|
||
</nav>
|
||
|
||
<!-- Page Hero -->
|
||
<div class="page-hero">
|
||
<div class="max-w-4xl mx-auto relative z-10">
|
||
<p class="text-xs font-bold tracking-[0.3em] text-[#36909E] mb-4">المعرفة القانونية</p>
|
||
<h1 class="text-5xl md:text-7xl font-black text-white leading-tight mb-6">العنف الرقمي<br><span class="text-[#36909E]">حقيقة نواجهها</span></h1>
|
||
<p class="text-white/70 text-xl max-w-2xl serif leading-relaxed">
|
||
العنف الرقمي ليس مجرد كلمة، بل هو استخدام التكنولوجيا في الإساءة أو التهديد أو المراقبة بطريقة مؤذية للآخرين.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- What is Digital Violence -->
|
||
<section class="py-24 px-6 md:px-20 bg-white">
|
||
<div class="max-w-6xl mx-auto">
|
||
<div class="grid md:grid-cols-2 gap-16 items-center">
|
||
<div>
|
||
<h2 class="text-xs font-bold tracking-[0.2em] text-[var(--sage)] mb-4 reveal-up">التعريف</h2>
|
||
<h3 class="text-4xl font-black leading-tight mb-6 reveal-up">الواقع المؤلم</h3>
|
||
<p class="text-black/70 leading-loose serif text-lg mb-6 reveal-up">
|
||
في الفضاء الرقمي يواجه العالم أنواعًا متعددة من العنف.
|
||
العنف لا يقتصر على الأذى الجسدي أو المادي فقط، بل يمتد ليشمل كل لفظ خادش، وصولًا إلى انتهاك الخصوصية وتشويه السمعة.
|
||
</p>
|
||
<p class="text-black/70 leading-loose serif text-lg reveal-up">
|
||
على عكس العنف الجسدي، العنف الرقمي يمكن أن يصل ضحاياه في أي مكان وزمان، وآثاره قد تدوم لفترة طويلة بسبب طبيعة المحتوى الرقمي الذي يصعب محوه بالكامل.
|
||
</p>
|
||
</div>
|
||
<div class="space-y-4 reveal-up">
|
||
<div class="bg-[#0F3858] text-white p-6 rounded-sm">
|
||
<span class="text-xs font-bold tracking-[0.2em] text-[#36909E] mb-2 block">الحماية القانونية</span>
|
||
<h4 class="text-xl font-black mb-3">العنف الرقمي هو جريمة يعاقب عليها القانون السوري تحت قانون الجرائم المعلوماتية رقم 20 لعام 2022. </h4>
|
||
<p class="text-[#36909E] font-bold mt-4">لا تخف... القانون معك.</p>
|
||
</div>
|
||
<div class="bg-[#D6EDF0] p-6 rounded-sm">
|
||
<p class="font-bold text-[#0F3858] mb-2">ما الحل؟</p>
|
||
<p class="text-black/70 serif text-sm">الخطوة الأولى هي الفهم والمعرفة:
|
||
هل ما نتعرض له يندرج تحت مفهوم العنف الرقمي؟
|
||
وما الطريقة لمواجهته؟ وكيف نحمي أنفسنا؟
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Types of Violence -->
|
||
<section class="py-24 px-6 md:px-20 bg-[var(--paper)]">
|
||
<div class="max-w-7xl mx-auto">
|
||
<div class="text-center mb-16">
|
||
<h2 class="text-xs font-bold tracking-[0.2em] text-[var(--sage)] mb-4 reveal-up">التصنيف</h2>
|
||
<h3 class="text-4xl md:text-5xl font-black leading-tight reveal-up">أنواع العنف الرقمي</h3>
|
||
<p class="text-black/50 mt-4 serif max-w-xl mx-auto reveal-up">فهم نوع العنف الذي تتعرض له هو الخطوة الأولى نحو مواجهته</p>
|
||
</div>
|
||
|
||
<div class="space-y-6">
|
||
<div class="violence-type-card reveal-up">
|
||
<div class="flex items-start gap-6">
|
||
<div class="w-16 h-16 rounded-full bg-[#D6EDF0] flex items-center justify-center text-2xl flex-shrink-0">💰</div>
|
||
<div class="flex-1">
|
||
<h4 class="text-2xl font-bold mb-2 text-[#0F3858]">١. الابتزاز الإلكتروني</h4>
|
||
<p class="text-black/70 serif leading-relaxed mb-4">تهديد بنشر صور أو معلومات خاصة مقابل المال أو تحقيق مطالب شخصية. يستهدف الضحايا في لحظات ضعفهم ويستغل بياناتهم الخاصة كأداة للسيطرة والإكراه.</p>
|
||
<div class="bg-[#0F3858]/5 border-r-2 border-[#36909E] pr-4 py-3 mb-4">
|
||
<p class="text-sm text-black/60 serif font-bold mb-1">مثال:</p>
|
||
<p class="text-sm text-black/60 serif">شخص يخترق حساب فتاة ويهددها بنشر صورها الخاصة إن لم تدفع له مبلغاً من المال أو تلتزم بمطالبه.</p>
|
||
</div>
|
||
<div class="flex flex-wrap gap-3">
|
||
<span class="bg-red-50 text-red-700 text-xs px-3 py-1 rounded-full font-bold">جريمة جنائية</span>
|
||
<span class="bg-orange-50 text-orange-700 text-xs px-3 py-1 rounded-full font-bold">لا تستجب للمبتز</span>
|
||
<span class="bg-blue-50 text-blue-700 text-xs px-3 py-1 rounded-full font-bold">احتفظ بالأدلة</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="violence-type-card reveal-up">
|
||
<div class="flex items-start gap-6">
|
||
<div class="w-16 h-16 rounded-full bg-[#cce4e8] flex items-center justify-center text-2xl flex-shrink-0">📢</div>
|
||
<div class="flex-1">
|
||
<h4 class="text-2xl font-bold mb-2 text-[#0F3858]">٢. التشهير الرقمي</h4>
|
||
<p class="text-black/70 serif leading-relaxed mb-4">نشر معلومات أو صور بهدف الإساءة إلى سمعة شخص ما. يختلف عن التعبير عن الرأي بأنه يستهدف تدمير الصورة الشخصية والمهنية للضحية.</p>
|
||
<div class="bg-[#0F3858]/5 border-r-2 border-[#36909E] pr-4 py-3 mb-4">
|
||
<p class="text-sm text-black/60 serif font-bold mb-1">مثال:</p>
|
||
<p class="text-sm text-black/60 serif">نشر أكاذيب عن شخص ما على وسائل التواصل الاجتماعي.</p>
|
||
</div>
|
||
<div class="flex flex-wrap gap-3">
|
||
<span class="bg-red-50 text-red-700 text-xs px-3 py-1 rounded-full font-bold">جريمة قذف</span>
|
||
<span class="bg-orange-50 text-orange-700 text-xs px-3 py-1 rounded-full font-bold">وثّق كل شيء</span>
|
||
<span class="bg-green-50 text-green-700 text-xs px-3 py-1 rounded-full font-bold">يمكن إزالة المحتوى</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="violence-type-card reveal-up">
|
||
<div class="flex items-start gap-6">
|
||
<div class="w-16 h-16 rounded-full bg-[#b8d9de] flex items-center justify-center text-2xl flex-shrink-0">🧨</div>
|
||
<div class="flex-1">
|
||
<h4 class="text-2xl font-bold mb-2 text-[#0F3858]">٣. التنمر الإلكتروني</h4>
|
||
<p class="text-black/70 serif leading-relaxed mb-4">تعليقات مسيئة، سخرية، تحقير، أو مضايقات متكررة عبر الإنترنت. التنمر الإلكتروني أشد وطأة من التنمر المباشر لأنه يصل للضحية في أي مكان وفي أي وقت.</p>
|
||
<div class="bg-[#0F3858]/5 border-r-2 border-[#36909E] pr-4 py-3 mb-4">
|
||
<p class="text-sm text-black/60 serif font-bold mb-1">مثال:</p>
|
||
<p class="text-sm text-black/60 serif">فتاة تنشر رأيها في موضوع معين، فتتلقى موجة من الشتائم والسخرية.</p>
|
||
</div>
|
||
<div class="flex flex-wrap gap-3">
|
||
<span class="bg-red-50 text-red-700 text-xs px-3 py-1 rounded-full font-bold">قد يُعدّ جريمة</span>
|
||
<span class="bg-blue-50 text-blue-700 text-xs px-3 py-1 rounded-full font-bold">احجب المعتدين</span>
|
||
<span class="bg-purple-50 text-purple-700 text-xs px-3 py-1 rounded-full font-bold">لا تكن وحيداً</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="violence-type-card reveal-up">
|
||
<div class="flex items-start gap-6">
|
||
<div class="w-16 h-16 rounded-full bg-[#D6EDF0] flex items-center justify-center text-2xl flex-shrink-0">🎭</div>
|
||
<div class="flex-1">
|
||
<h4 class="text-2xl font-bold mb-2 text-[#0F3858]">٤. انتحال الشخصية</h4>
|
||
<p class="text-black/70 serif leading-relaxed mb-4"> استخدام هوية الشخص الرقمية للاحتيال أو الحصول على المنافع. يمكن أن يتسبب في أضرار مالية وعلاقاتية وقانونية خطيرة.</p>
|
||
<div class="bg-[#0F3858]/5 border-r-2 border-[#36909E] pr-4 py-3 mb-4">
|
||
<p class="text-sm text-black/60 serif font-bold mb-1">مثال:</p>
|
||
<p class="text-sm text-black/60 serif">إنشاء حسابات مزيفة تحمل اسمك ومعلوماتك الشخصية أو انتحال شخصيات مشهورة.</p>
|
||
</div>
|
||
<div class="flex flex-wrap gap-3">
|
||
<span class="bg-red-50 text-red-700 text-xs px-3 py-1 rounded-full font-bold">جريمة احتيال</span>
|
||
<span class="bg-orange-50 text-orange-700 text-xs px-3 py-1 rounded-full font-bold">أبلغ المنصات</span>
|
||
<span class="bg-blue-50 text-blue-700 text-xs px-3 py-1 rounded-full font-bold">تواصل معنا</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- What to do -->
|
||
<section class="py-24 px-6 md:px-20 bg-white">
|
||
<div class="max-w-4xl mx-auto">
|
||
<div class="text-center mb-16">
|
||
<h2 class="text-xs font-bold tracking-[0.2em] text-[var(--sage)] mb-4 reveal-up">خطوات عملية</h2>
|
||
<h3 class="text-4xl md:text-5xl font-black leading-tight reveal-up">ماذا تفعل إذا تعرّضت للعنف الرقمي؟</h3>
|
||
</div>
|
||
<div class="steps-container space-y-4">
|
||
<div class="step-card reveal-up">
|
||
<h4 class="text-xl font-bold text-[#0F3858] mb-2">لا تستجب للمعتدي فوراً</h4>
|
||
<p class="text-black/60 serif">خذ نفساً وهدّئ نفسك أولاً. الاستجابة الفورية من الغضب قد تجعل الأمور أسوأ. التفكير الهادئ هو سلاحك الأقوى.</p>
|
||
</div>
|
||
<div class="step-card reveal-up">
|
||
<h4 class="text-xl font-bold text-[#0F3858] mb-2">وثّق كل شيء</h4>
|
||
<p class="text-black/60 serif">خذ لقطات شاشة واضحة لكل الرسائل والمحتوى المسيء مع التاريخ والوقت. هذه الأدلة ستكون ضرورية للإجراءات القانونية لاحقاً.</p>
|
||
</div>
|
||
<div class="step-card reveal-up">
|
||
<h4 class="text-xl font-bold text-[#0F3858] mb-2">أبلغ عنه على المنصات</h4>
|
||
<p class="text-black/60 serif">استخدم آليات الإبلاغ المتاحة على كل منصة. يمكنك إبلاغ عن المحتوى المسيء وطلب إزالته. معظم المنصات تستجيب للحالات الخطيرة بسرعة.</p>
|
||
</div>
|
||
<div class="step-card reveal-up">
|
||
<h4 class="text-xl font-bold text-[#0F3858] mb-2">احجب المعتدي وقيّد وصوله</h4>
|
||
<p class="text-black/60 serif">احجب الشخص فوراً على جميع المنصات. قيّد قوائم أصدقائك وإعدادات الخصوصية. لا تتردد في الحجب — هذا حقك وضرورة.</p>
|
||
</div>
|
||
<div class="step-card reveal-up">
|
||
<h4 class="text-xl font-bold text-[#0F3858] mb-2">تواصل مع فريق ملاذ</h4>
|
||
<p class="text-black/60 serif">لا تواجه هذا وحدك. فريقنا من المختصين القانونيين والنفسيين جاهز لمساعدتك في التعامل مع الموقف خطوة بخطوة بشكل سري وآمن.</p>
|
||
</div>
|
||
<div class="step-card reveal-up">
|
||
<h4 class="text-xl font-bold text-[#0F3858] mb-2">فكّر في الإجراءات القانونية</h4>
|
||
<p class="text-black/60 serif">ما تعرّضت له قد يكون جريمة يعاقب عليها القانون. استشر فريقنا القانوني حول خياراتك وإمكانية تقديم شكوى رسمية.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- CTA -->
|
||
<section class="py-20 px-6 md:px-20 bg-[#0F3858] text-white text-center">
|
||
<div class="max-w-2xl mx-auto reveal-up">
|
||
<h3 class="text-3xl md:text-4xl font-black mb-4">تحتاج مساعدة الآن؟</h3>
|
||
<p class="text-white/70 serif mb-8">فريقنا متاح على مدار الساعة. تواصل معنا بأمان وسرية تامة.</p>
|
||
<a href="support.html" class="inline-block px-10 py-4 bg-[#36909E] text-white font-bold rounded-full hover:bg-white hover:text-[#0F3858] transition-all text-lg">
|
||
ابدأ الحوار الآمن ←
|
||
</a>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Footer -->
|
||
<footer class="bg-[var(--ink)] text-white pt-20 pb-12 px-6 md:px-20 relative overflow-hidden">
|
||
<div class="absolute top-0 left-0 w-full h-2 bg-gradient-to-l from-[#36909E] via-[#D6EDF0] to-[#0F3858]"></div>
|
||
<div class="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-4 gap-12 mb-16">
|
||
<div class="md:col-span-2">
|
||
<p class="text-2xl font-black mb-3">ملاذ</p>
|
||
<p class="text-sm text-white/50 leading-relaxed mb-6 max-w-md">منصة رقمية تهدف لتوفير ملاذ رقمي آمن للناجيين والناجيات من العنف الإلكتروني في سوريا.</p>
|
||
<div class="flex gap-4">
|
||
<!-- Telegram -->
|
||
<a href="https://t.me/malaz_community" target="_blank" aria-label="تيليغرام" class="w-10 h-10 rounded-full border border-white/20 flex items-center justify-center hover:bg-white/10 hover:border-[#229ED9] transition">
|
||
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 fill-white" viewBox="0 0 24 24"><path d="M11.944 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0a12 12 0 0 0-.056 0zm4.962 7.224c.1-.002.321.023.465.14a.506.506 0 0 1 .171.325c.016.093.036.306.02.472-.18 1.898-.962 6.502-1.36 8.627-.168.9-.499 1.201-.82 1.23-.696.065-1.225-.46-1.9-.902-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.14-5.061 3.345-.48.33-.913.49-1.302.48-.428-.008-1.252-.241-1.865-.44-.752-.245-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.83-2.529 6.998-3.014 3.332-1.386 4.025-1.627 4.476-1.635z"/></svg>
|
||
</a>
|
||
<!-- Instagram -->
|
||
<a href="https://instagram.com/malaz_sy" target="_blank" aria-label="انستغرام" class="w-10 h-10 rounded-full border border-white/20 flex items-center justify-center hover:bg-white/10 hover:border-pink-400 transition">
|
||
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 fill-white" viewBox="0 0 24 24"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 1 0 0 12.324 6.162 6.162 0 0 0 0-12.324zM12 16a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm6.406-11.845a1.44 1.44 0 1 0 0 2.881 1.44 1.44 0 0 0 0-2.881z"/></svg>
|
||
</a>
|
||
<!-- LinkedIn -->
|
||
<a href="https://linkedin.com/company/malaz-sy" target="_blank" aria-label="لينكدإن" class="w-10 h-10 rounded-full border border-white/20 flex items-center justify-center hover:bg-white/10 hover:border-[#0A66C2] transition">
|
||
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 fill-white" viewBox="0 0 24 24"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 0 1-2.063-2.065 2.064 2.064 0 1 1 2.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<h4 class="font-bold text-sm mb-5 tracking-wider">روابط سريعة</h4>
|
||
<ul class="space-y-3 text-sm text-white/50">
|
||
<li><a href="index.html" class="hover:text-white transition">الرئيسية</a></li>
|
||
<li><a href="violence.html" class="hover:text-white transition">العنف الرقمي</a></li>
|
||
<li><a href="support.html" class="hover:text-white transition">الدعم</a></li>
|
||
<li><a href="about.html" class="hover:text-white transition">من نحن</a></li>
|
||
<li><a href="faq.html" class="hover:text-white transition">الأسئلة الشائعة</a></li>
|
||
</ul>
|
||
</div>
|
||
<div>
|
||
<h4 class="font-bold text-sm mb-5 tracking-wider">تواصل معنا</h4>
|
||
<ul class="space-y-3 text-sm text-white/50">
|
||
<li><a href="https://t.me/malaz_community" target="_blank" class="hover:text-white transition flex items-center gap-2">
|
||
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 fill-current flex-shrink-0" viewBox="0 0 24 24"><path d="M11.944 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0a12 12 0 0 0-.056 0zm4.962 7.224c.1-.002.321.023.465.14a.506.506 0 0 1 .171.325c.016.093.036.306.02.472-.18 1.898-.962 6.502-1.36 8.627-.168.9-.499 1.201-.82 1.23-.696.065-1.225-.46-1.9-.902-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.14-5.061 3.345-.48.33-.913.49-1.302.48-.428-.008-1.252-.241-1.865-.44-.752-.245-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.83-2.529 6.998-3.014 3.332-1.386 4.025-1.627 4.476-1.635z"/></svg>
|
||
تيليغرام
|
||
</a></li>
|
||
<li><a href="https://instagram.com/malaz_sy" target="_blank" class="hover:text-white transition flex items-center gap-2">
|
||
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 fill-current flex-shrink-0" viewBox="0 0 24 24"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 1 0 0 12.324 6.162 6.162 0 0 0 0-12.324zM12 16a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm6.406-11.845a1.44 1.44 0 1 0 0 2.881 1.44 1.44 0 0 0 0-2.881z"/></svg>
|
||
انستغرام
|
||
</a></li>
|
||
<li><a href="https://linkedin.com/company/malaz-sy" target="_blank" class="hover:text-white transition flex items-center gap-2">
|
||
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 fill-current flex-shrink-0" viewBox="0 0 24 24"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 0 1-2.063-2.065 2.064 2.064 0 1 1 2.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>
|
||
لينكدإن
|
||
</a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="border-t border-white/10 pt-8 flex flex-col md:flex-row justify-between items-center gap-4">
|
||
<div class="flex items-center gap-2">
|
||
<span class="w-2 h-2 bg-[var(--sage)] rounded-full animate-pulse inline-block"></span>
|
||
<span class="text-xs text-white/30">اتصالك بهذه الصفحة آمن ومشفر بالكامل</span>
|
||
</div>
|
||
<p class="text-xs text-white/20">© 2026 ملاذ. جميع الحقوق محفوظة.</p>
|
||
</div>
|
||
</footer>
|
||
|
||
<script>
|
||
const mainNav = document.getElementById('mainNav');
|
||
function handleNav() { if(window.innerWidth<=1024||window.scrollY>80){mainNav.classList.add('scrolled')}else{mainNav.classList.remove('scrolled')} }
|
||
window.addEventListener('scroll',handleNav); window.addEventListener('resize',handleNav); handleNav();
|
||
gsap.registerPlugin(ScrollTrigger);
|
||
gsap.utils.toArray('.reveal-up').forEach(elem => {
|
||
gsap.to(elem,{y:0,opacity:1,duration:1,ease:"power3.out",scrollTrigger:{trigger:elem,start:"top 85%",toggleActions:"play none none reverse"}});
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|