feature/fullwebsite #1
ثنائية
Malazlogo.png
Normal file
ثنائية
Malazlogo.png
Normal file
ملف ثنائي غير معروض.
|
بعد العرض: | الارتفاع: | الحجم: 62 KiB |
249
about.html
Normal file
249
about.html
Normal file
@@ -0,0 +1,249 @@
|
||||
<!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 { 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; inset:0; background:radial-gradient(ellipse at 20% 50%, rgba(54,144,158,0.2) 0%, transparent 60%); }
|
||||
.value-card { padding:2.5rem; border:1px solid rgba(0,0,0,0.06); border-radius:12px; transition:all 0.3s ease; }
|
||||
.value-card:hover { border-color:var(--sage); background:white; }
|
||||
.timeline-item { position:relative; padding-right:3rem; }
|
||||
.timeline-item::before { content:''; position:absolute; right:0; top:0; bottom:-2rem; width:2px; background:var(--accent-soft); }
|
||||
.timeline-item::after { content:''; position:absolute; right:-6px; top:4px; width:14px; height:14px; border-radius:50%; background:var(--sage); }
|
||||
.team-card { text-align:center; padding:2rem; }
|
||||
nav a.active-page { color:var(--sage) !important; border-bottom:2px solid var(--sage); }
|
||||
nav a.nav-link:hover { color:var(--sage) !important; }
|
||||
</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">العنف الرقمي</a>
|
||||
<a href="support.html" class="nav-link">الدعم</a>
|
||||
<a href="about.html" class="nav-link active-page">من نحن</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>
|
||||
|
||||
<!-- Mission -->
|
||||
<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">نؤمن بفضاء رقمي<br>أكثر أماناً</h3>
|
||||
<p class="text-black/70 leading-loose serif text-lg mb-6 reveal-up">
|
||||
نحن منصة توعوية تهدف إلى بناء بيئة رقمية أكثر أماناً واحتراماً للجميع. نعمل على نشر الوعي حول أشكال العنف الرقمي المختلفة، مثل التنمر الإلكتروني، الابتزاز، انتهاك الخصوصية، وخطاب الكراهية، ونسعى لتمكين الأفراد بالمعرفة والأدوات التي تساعدهم على حماية أنفسهم والتعامل مع هذه التحديات بوعي وثقة.
|
||||
|
||||
نؤمن بأن الفضاء الرقمي يجب أن يكون مساحة آمنة للتعبير والتواصل، لذلك نركز على تقديم محتوى توعوي مبسط، من امثلة واقعية وإرشادات مبنية على أسس علمية تساعد المستخدمين من مختلف الأعمار والخلفيات.
|
||||
|
||||
في ملاذ، نعمل معاً لنحوّل الوعي إلى حماية، والمعرفة إلى قوة.
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex justify-center reveal-up">
|
||||
<img src="Malazlogo.png" alt="ملاذ" class="w-64 md:w-80 opacity-90" onerror="this.outerHTML='<div class=\'w-64 h-64 bg-[#0F3858] rounded-full flex items-center justify-center\'><span class=\'text-white text-6xl font-black\'>ملاذ</span></div>'">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Vision & Mission -->
|
||||
<section class="py-24 px-6 md:px-20 bg-[var(--paper)]">
|
||||
<div class="max-w-6xl mx-auto">
|
||||
<div class="grid md:grid-cols-2 gap-8 mb-20">
|
||||
<div class="bg-[#0F3858] text-white p-10 rounded-sm reveal-up">
|
||||
<span class="text-xs font-bold tracking-[0.3em] text-[#36909E] mb-4 block">رؤيتنا</span>
|
||||
<h3 class="text-2xl font-black mb-4">مجتمع رقمي واعٍ</h3>
|
||||
<p class="text-white/70 serif leading-relaxed">
|
||||
رؤيتنا هي مجتمع رقمي واعٍ يحترم الخصوصية ويواجه العنف الإلكتروني بثقافة المعرفة والمسؤولية. نسعى لبناء بيئة رقمية تصبح فيها الحقوق الرقمية معروفة ومحمية للجميع.
|
||||
</p>
|
||||
</div>
|
||||
<div class="bg-[#D6EDF0] p-10 rounded-sm reveal-up">
|
||||
<span class="text-xs font-bold tracking-[0.3em] text-[#0F3858] mb-4 block">رسالتنا</span>
|
||||
<h3 class="text-2xl font-black text-[#0F3858] mb-4">التمكين والحماية</h3>
|
||||
<p class="text-black/70 serif leading-relaxed">
|
||||
رسالتنا هي تمكين الأفراد، دعم الضحايا، والمساهمة في نشر سلوك رقمي صحي وإيجابي. في ملاذ، نعمل معاً لنحوّل الوعي إلى حماية، والمعرفة إلى قوة.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Values -->
|
||||
<div class="text-center mb-12">
|
||||
<h2 class="text-xs font-bold tracking-[0.2em] text-[var(--sage)] mb-4 reveal-up">قيمنا</h2>
|
||||
<h3 class="text-4xl font-black reveal-up">ما الذي يُحرّكنا</h3>
|
||||
</div>
|
||||
<div class="grid md:grid-cols-3 gap-6">
|
||||
<div class="value-card reveal-up">
|
||||
<div class="text-3xl mb-4">🛡️</div>
|
||||
<h4 class="font-bold text-xl mb-3">الأمان أولاً</h4>
|
||||
<p class="text-black/60 serif text-sm leading-relaxed">كل ما نبنيه وكل قرار نتخذه يضع أمان الضحايا وسرية بياناتهم في المقام الأول. لا تنازل عن هذا المبدأ.</p>
|
||||
</div>
|
||||
<div class="value-card reveal-up">
|
||||
<div class="text-3xl mb-4">🤝</div>
|
||||
<h4 class="font-bold text-xl mb-3">الكرامة الإنسانية</h4>
|
||||
<p class="text-black/60 serif text-sm leading-relaxed">نتعامل مع كل شخص يتواصل معنا بكامل الاحترام والكرامة بصرف النظر عن خلفيته أو ظروفه.</p>
|
||||
</div>
|
||||
<div class="value-card reveal-up">
|
||||
<div class="text-3xl mb-4">💡</div>
|
||||
<h4 class="font-bold text-xl mb-3">التمكين بالمعرفة</h4>
|
||||
<p class="text-black/60 serif text-sm leading-relaxed">نؤمن أن المعرفة هي أقوى سلاح. نسعى لجعل المعلومات القانونية والتقنية متاحة للجميع بلغة مبسطة.</p>
|
||||
</div>
|
||||
<div class="value-card reveal-up">
|
||||
<div class="text-3xl mb-4">🌍</div>
|
||||
<h4 class="font-bold text-xl mb-3">الشمولية</h4>
|
||||
<p class="text-black/60 serif text-sm leading-relaxed">خدماتنا متاحة للجميع بصرف النظر عن الجنس أو العمر أو المنطقة الجغرافية. العنف الرقمي لا يميز.</p>
|
||||
</div>
|
||||
<div class="value-card reveal-up">
|
||||
<div class="text-3xl mb-4">⚡</div>
|
||||
<h4 class="font-bold text-xl mb-3">الاستجابة السريعة</h4>
|
||||
<p class="text-black/60 serif text-sm leading-relaxed">في حالات العنف الرقمي، الوقت عامل حاسم. نلتزم بالاستجابة السريعة والمساعدة الفورية لمن يحتاجها.</p>
|
||||
</div>
|
||||
<div class="value-card reveal-up">
|
||||
<div class="text-3xl mb-4">🔍</div>
|
||||
<h4 class="font-bold text-xl mb-3">الشفافية</h4>
|
||||
<p class="text-black/60 serif text-sm leading-relaxed">نكون صادقين مع مجتمعنا حول ما نستطيع وما لا نستطيع فعله. الثقة تُبنى على الصدق والشفافية.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- What we do -->
|
||||
<section class="py-24 px-6 md:px-20 bg-white">
|
||||
<div class="max-w-6xl 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 font-black reveal-up">ماذا نقدم بالضبط؟</h3>
|
||||
</div>
|
||||
<div class="grid md:grid-cols-2 gap-8">
|
||||
<div class="glass-card p-8 rounded-sm reveal-up">
|
||||
<div class="w-14 h-14 rounded-full bg-[#D6EDF0] flex items-center justify-center text-2xl mb-6">📚</div>
|
||||
<h4 class="text-xl font-bold mb-3">التوعية والتثقيف</h4>
|
||||
<p class="text-black/60 serif leading-relaxed">ننشر محتوى توعوياً مبسطاً حول أشكال العنف الرقمي وكيفية حماية النفس منها. أمثلة واقعية، إرشادات عملية، وتحديثات مستمرة.</p>
|
||||
</div>
|
||||
<div class="glass-card p-8 rounded-sm reveal-up">
|
||||
<div class="w-14 h-14 rounded-full bg-[#cce4e8] flex items-center justify-center text-2xl mb-6">💙</div>
|
||||
<h4 class="text-xl font-bold mb-3">الدعم</h4>
|
||||
<p class="text-black/60 serif leading-relaxed">فريقنا يوفر الاستماع والدعم العاطفي لضحايا العنف الرقمي. أحياناً أول ما تحتاجه هو أن يسمعك أحد.</p>
|
||||
</div>
|
||||
<div class="glass-card p-8 rounded-sm reveal-up">
|
||||
<div class="w-14 h-14 rounded-full bg-[#b8d9de] flex items-center justify-center text-2xl mb-6">⚖️</div>
|
||||
<h4 class="text-xl font-bold mb-3">الإرشاد القانوني</h4>
|
||||
<p class="text-black/60 serif leading-relaxed">نوجّهك حول حقوقك القانونية وخياراتك القانونية بموجب قانون الجرائم المعلوماتية السوري رقم 20 لعام 2022.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Join CTA -->
|
||||
<section class="py-20 px-6 md:px-20 bg-[var(--paper)] text-center">
|
||||
<div class="max-w-2xl mx-auto reveal-up">
|
||||
<h3 class="text-4xl font-black mb-4">انضم إلى مجتمعنا</h3>
|
||||
<p class="text-black/60 serif mb-8">كن جزءاً من الحل. انضم إلى مجتمع ملاذ على تيليغرام وساهم في نشر الوعي.</p>
|
||||
<div class="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<a href="https://t.me/malaz_community" target="_blank" class="inline-flex items-center gap-3 bg-[#229ED9] text-white px-8 py-4 rounded-full font-bold hover:opacity-90 transition">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-5 h-5 fill-current"><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>
|
||||
<a href="support.html" class="inline-block border-2 border-[var(--ink)] px-8 py-4 rounded-full font-bold hover:bg-[var(--ink)] hover:text-white transition">
|
||||
تواصل معنا
|
||||
</a>
|
||||
</div>
|
||||
</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>
|
||||
329
faq.html
Normal file
329
faq.html
Normal file
@@ -0,0 +1,329 @@
|
||||
<!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 { color:#E0F4F6; }
|
||||
.reveal-up { opacity:0; transform:translateY(60px); }
|
||||
.page-hero { background:var(--night); min-height:45vh; display:flex; align-items:center; padding:10rem 2rem 4rem; position:relative; overflow:hidden; }
|
||||
.page-hero::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at 50% 30%, rgba(54,144,158,0.18) 0%, transparent 60%); }
|
||||
.faq-item { border-bottom:1px solid rgba(0,0,0,0.06); }
|
||||
.faq-question { width:100%; display:flex; justify-content:space-between; align-items:center; padding:1.75rem 0; cursor:pointer; text-align:right; background:none; border:none; font-family:'Cairo',sans-serif; }
|
||||
.faq-question h4 { font-size:1.1rem; font-weight:700; transition:color 0.3s; text-align:right; }
|
||||
.faq-question:hover h4 { color:var(--accent-bold); }
|
||||
.faq-icon { transition:transform 0.4s cubic-bezier(0.16,1,0.3,1); color:var(--sage); font-size:1.5rem; flex-shrink:0; margin-right:1rem; }
|
||||
.faq-item.active .faq-icon { transform:rotate(45deg); }
|
||||
.faq-answer { max-height:0; overflow:hidden; transition:max-height 0.5s cubic-bezier(0.16,1,0.3,1),padding 0.3s; }
|
||||
.faq-item.active .faq-answer { max-height:500px; padding-bottom:1.75rem; }
|
||||
nav a.active-page { color:var(--sage) !important; border-bottom:2px solid var(--sage); }
|
||||
nav a.nav-link:hover { color:var(--sage) !important; }
|
||||
</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">العنف الرقمي</a>
|
||||
<a href="support.html" class="nav-link">الدعم</a>
|
||||
<a href="about.html" class="nav-link">من نحن</a>
|
||||
<a href="faq.html" class="nav-link active-page">أسئلة</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 text-center">
|
||||
<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-lg max-w-xl mx-auto serif leading-relaxed">إجابات شاملة على الأسئلة الأكثر شيوعاً حول العنف الرقمي وكيفية التعامل معه.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- FAQ Content -->
|
||||
<section class="py-24 px-6 md:px-20">
|
||||
<div class="max-w-4xl mx-auto">
|
||||
|
||||
<!-- General -->
|
||||
<div class="border-t border-black/10">
|
||||
<div class="py-4 text-xs font-bold tracking-[0.2em] text-[var(--sage)]">الأسئلة العامة</div>
|
||||
|
||||
<div class="faq-item reveal-up">
|
||||
<button class="faq-question" onclick="toggleFaq(this)">
|
||||
<h4>هل هويتي مكفولة السرية تماماً؟</h4>
|
||||
<div class="faq-icon">+</div>
|
||||
</button>
|
||||
<div class="faq-answer">
|
||||
<p class="text-black/60 leading-relaxed pr-4 serif">نعم، بشكل مطلق. نستخدم تقنيات تشفير متقدمة ولا نطلب أي بيانات تعريفية. حتى فريق الدعم لا يرى هويتك الحقيقية. يمكنك التحدث معنا باسم مستعار أو كضيف مجهول تماماً. جميع المحادثات تُمحى تلقائياً بعد انتهاء الجلسة.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="faq-item reveal-up">
|
||||
<button class="faq-question" onclick="toggleFaq(this)">
|
||||
<h4>هل خدماتكم مجانية؟</h4>
|
||||
<div class="faq-icon">+</div>
|
||||
</button>
|
||||
<div class="faq-answer">
|
||||
<p class="text-black/60 leading-relaxed pr-4 serif">نعم، جميع خدمات ملاذ مجانية بالكامل. نؤمن بأن الحصول على الدعم والمساعدة في مواجهة العنف الرقمي لا يجب أن يكون مرتبطاً بالقدرة المادية. نحن مؤسسة غير ربحية تعمل بدعم من شركاء مؤسسيين.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="faq-item reveal-up">
|
||||
<button class="faq-question" onclick="toggleFaq(this)">
|
||||
<h4>ما هي اللغات التي تدعمون التواصل بها؟</h4>
|
||||
<div class="faq-icon">+</div>
|
||||
</button>
|
||||
<div class="faq-answer">
|
||||
<p class="text-black/60 leading-relaxed pr-4 serif">نقدم خدماتنا باللغة العربية أساساً. فريقنا يتحدث أيضاً الإنجليزية والفرنسية. إذا كنت بحاجة للتواصل بلغة أخرى، يرجى الإشارة إلى ذلك وسنحاول توفير الدعم المناسب.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="faq-item reveal-up">
|
||||
<button class="faq-question" onclick="toggleFaq(this)">
|
||||
<h4>هل تساعدون الرجال أيضاً أم النساء فقط؟</h4>
|
||||
<div class="faq-icon">+</div>
|
||||
</button>
|
||||
<div class="faq-answer">
|
||||
<p class="text-black/60 leading-relaxed pr-4 serif">ملاذ مفتوح للجميع بصرف النظر عن الجنس أو العمر. العنف الرقمي يستهدف الجميع. رغم أن الإحصاءات تُظهر أن النساء يتعرضن له بشكل غير متناسب، إلا أن خدماتنا متاحة لكل شخص يحتاج المساعدة.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Legal -->
|
||||
<div class="border-t border-black/10 mt-8">
|
||||
<div class="py-4 text-xs font-bold tracking-[0.2em] text-[var(--sage)]">الأسئلة القانونية</div>
|
||||
|
||||
<div class="faq-item reveal-up">
|
||||
<button class="faq-question" onclick="toggleFaq(this)">
|
||||
<h4>ماذا يجب أن أفعل إذا تعرضت للابتزاز؟</h4>
|
||||
<div class="faq-icon">+</div>
|
||||
</button>
|
||||
<div class="faq-answer">
|
||||
<div class="pr-4">
|
||||
<p class="text-black/60 leading-relaxed serif mb-4">الخطوات الأولى الحاسمة:</p>
|
||||
<ol class="space-y-2 text-black/60 serif text-sm">
|
||||
<li class="flex items-start gap-2"><span class="font-bold text-[var(--sage)] flex-shrink-0">١.</span> توقف عن التواصل مع المبتز فوراً ولا تستجب لمطالبه أبداً</li>
|
||||
<li class="flex items-start gap-2"><span class="font-bold text-[var(--sage)] flex-shrink-0">٢.</span> لا تدفع أي مال — الدفع يُشجّع المبتز على المزيد ولا يضمن توقفه</li>
|
||||
<li class="flex items-start gap-2"><span class="font-bold text-[var(--sage)] flex-shrink-0">٣.</span> خذ لقطات شاشة واضحة لجميع الرسائل والمحتوى مع التاريخ والوقت</li>
|
||||
<li class="flex items-start gap-2"><span class="font-bold text-[var(--sage)] flex-shrink-0">٤.</span> احجب المبتز على جميع المنصات</li>
|
||||
<li class="flex items-start gap-2"><span class="font-bold text-[var(--sage)] flex-shrink-0">٥.</span> تواصل معنا فوراً — يمكننا مساعدتك في الإجراءات القانونية وإزالة المحتوى</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="faq-item reveal-up">
|
||||
<button class="faq-question" onclick="toggleFaq(this)">
|
||||
<h4>هل يمكنني مقاضاة من يتنمر عليّ إلكترونياً؟</h4>
|
||||
<div class="faq-icon">+</div>
|
||||
</button>
|
||||
<div class="faq-answer">
|
||||
<p class="text-black/60 leading-relaxed pr-4 serif">نعم، في كثير من الحالات. يُجرّم قانون الجرائم المعلوماتية السوري رقم 20 لعام 2022 أشكالاً متعددة من العنف الرقمي. نجاح القضية يعتمد على طبيعة الجريمة وتوافر الأدلة وإمكانية تحديد هوية المعتدي. فريقنا القانوني يمكنه تقييم وضعك وإرشادك للخيار الأنسب.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="faq-item reveal-up">
|
||||
<button class="faq-question" onclick="toggleFaq(this)">
|
||||
<h4>ما هي العقوبات المقررة للعنف الرقمي في القانون السوري؟</h4>
|
||||
<div class="faq-icon">+</div>
|
||||
</button>
|
||||
<div class="faq-answer">
|
||||
<p class="text-black/60 leading-relaxed pr-4 serif">تتفاوت العقوبات حسب نوع الجريمة. بشكل عام، قانون الجرائم المعلوماتية رقم 20 لعام 2022 يحدد عقوبات تشمل الغرامات المالية والسجن. الابتزاز الإلكتروني والتشهير والاحتيال الإلكتروني تعتبر من الجرائم الأشد عقوبة. للاستشارة حول حالتك المحددة، تواصل مع فريقنا القانوني.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Technical -->
|
||||
<div class="border-t border-black/10 mt-8">
|
||||
<div class="py-4 text-xs font-bold tracking-[0.2em] text-[var(--sage)]">الأسئلة التقنية</div>
|
||||
|
||||
<div class="faq-item reveal-up">
|
||||
<button class="faq-question" onclick="toggleFaq(this)">
|
||||
<h4>كيف أحمي حساباتي على وسائل التواصل الاجتماعي؟</h4>
|
||||
<div class="faq-icon">+</div>
|
||||
</button>
|
||||
<div class="faq-answer">
|
||||
<div class="pr-4">
|
||||
<p class="text-black/60 leading-relaxed serif mb-3">أهم الخطوات العملية لحماية حساباتك:</p>
|
||||
<ul class="space-y-1 text-black/60 serif text-sm list-disc list-inside">
|
||||
<li>استخدم كلمة سر قوية وفريدة لكل حساب</li>
|
||||
<li>فعّل التحقق بخطوتين (2FA) على جميع الحسابات</li>
|
||||
<li>راجع الأجهزة والتطبيقات المتصلة بحساباتك بانتظام</li>
|
||||
<li>لا تنقر على روابط مشبوهة حتى لو بدت من أشخاص تعرفهم</li>
|
||||
<li>اضبط إعدادات الخصوصية لتحد من من يرى منشوراتك</li>
|
||||
<li>استخدم بريد إلكتروني مخصص لوسائل التواصل الاجتماعي</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Telegram -->
|
||||
<div class="border-t border-black/10 mt-8">
|
||||
<div class="py-4 text-xs font-bold tracking-[0.2em] text-[var(--sage)]">مجتمع تيليغرام</div>
|
||||
|
||||
<div class="faq-item reveal-up">
|
||||
<button class="faq-question" onclick="toggleFaq(this)">
|
||||
<h4>هل الانضمام إلى مجموعة تيليغرام آمن؟</h4>
|
||||
<div class="faq-icon">+</div>
|
||||
</button>
|
||||
<div class="faq-answer">
|
||||
<p class="text-black/60 leading-relaxed pr-4 serif">نعم. المجموعة مُدارة بعناية من قِبل فريق ملاذ. يمكنك الانضمام بهوية مجهولة باستخدام اسم مستعار. لا يُشارَك أي معلومة شخصية داخل المجموعة. يُطبَّق نظام صارم لحذف أي محتوى مسيء وإزالة أي عضو يخرق قواعد الأمان.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="faq-item reveal-up">
|
||||
<button class="faq-question" onclick="toggleFaq(this)">
|
||||
<h4>ما الفرق بين المجموعة وقناة الدعم على تيليغرام؟</h4>
|
||||
<div class="faq-icon">+</div>
|
||||
</button>
|
||||
<div class="faq-answer">
|
||||
<p class="text-black/60 leading-relaxed pr-4 serif">لدينا حسابان: <strong>@malaz_community</strong> وهي مجموعة مجتمعية للدعم المتبادل ونشر المحتوى التوعوي، و<strong>@malaz_support</strong> وهو حساب الدعم المباشر حيث يمكنك التحدث مع متطوع أو مختص بشكل خاص وسري.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="faq-item reveal-up">
|
||||
<button class="faq-question" onclick="toggleFaq(this)">
|
||||
<h4>هل يمكنني المشاركة في المجموعة دون الكشف عن هويتي؟</h4>
|
||||
<div class="faq-icon">+</div>
|
||||
</button>
|
||||
<div class="faq-answer">
|
||||
<p class="text-black/60 leading-relaxed pr-4 serif">نعم بالكامل. تيليغرام يتيح لك تغيير اسمك المعروض واستخدام اسم مستعار. يمكنك أيضاً تعطيل مشاركة رقم هاتفك مع أعضاء المجموعة في إعدادات الخصوصية. ننصح دائماً بالحفاظ على الحد الأدنى من المعلومات الشخصية.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Support -->
|
||||
<div class="border-t border-black/10 mt-8">
|
||||
<div class="py-4 text-xs font-bold tracking-[0.2em] text-[var(--sage)]">الدعم والمساعدة</div>
|
||||
|
||||
<div class="faq-item reveal-up">
|
||||
<button class="faq-question" onclick="toggleFaq(this)">
|
||||
<h4>هل تتابعون الحالات على المدى البعيد؟</h4>
|
||||
<div class="faq-icon">+</div>
|
||||
</button>
|
||||
<div class="faq-answer">
|
||||
<p class="text-black/60 leading-relaxed pr-4 serif">نعم. إذا كانت حالتك تتطلب متابعة طويلة الأمد، يمكن تخصيص متطوع أو مختص يرافقك طوال عملية التعامل مع الموقف. التواصل يتم عبر تيليغرام لضمان استمرارية الدعم حتى حل المشكلة.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="faq-item reveal-up">
|
||||
<button class="faq-question" onclick="toggleFaq(this)">
|
||||
<h4>هل يمكنني طلب المساعدة لصديق أو قريب يتعرض للعنف؟</h4>
|
||||
<div class="faq-icon">+</div>
|
||||
</button>
|
||||
<div class="faq-answer">
|
||||
<p class="text-black/60 leading-relaxed pr-4 serif">نعم بالتأكيد. كثيراً ما يكون الشخص المتضرر في حالة صعبة تجعله غير قادر على طلب المساعدة بنفسه. يمكنك التواصل معنا نيابةً عنه وسنوجّهك حول كيفية تقديم الدعم وما الخطوات التي يجب اتخاذها.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Still have questions -->
|
||||
<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 font-black mb-4">لم تجد إجابتك؟</h3>
|
||||
<p class="text-white/70 serif mb-8">فريقنا جاهز للإجابة على أي سؤال لديك بشكل شخصي وسري.</p>
|
||||
<div class="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<a href="support.html" class="inline-block bg-[#36909E] text-white px-8 py-4 rounded-full font-bold hover:opacity-90 transition">تحدث معنا</a>
|
||||
<a href="https://t.me/malaz_support" target="_blank" class="inline-flex items-center gap-2 border-2 border-white/30 text-white px-8 py-4 rounded-full font-bold hover:bg-white/10 transition">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-5 h-5 fill-current"><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>
|
||||
</div>
|
||||
</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"}})});
|
||||
|
||||
function toggleFaq(element){
|
||||
const faqItem=element.parentElement;
|
||||
const isActive=faqItem.classList.contains('active');
|
||||
document.querySelectorAll('.faq-item').forEach(item=>item.classList.remove('active'));
|
||||
if(!isActive)faqItem.classList.add('active');
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
238
support.html
Normal file
238
support.html
Normal file
@@ -0,0 +1,238 @@
|
||||
<!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 { 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); }
|
||||
.chat-input-line { background:transparent; border:none; border-bottom:2px solid var(--ink); padding:1rem 0; width:100%; font-size:1.1rem; font-family:'Cairo',sans-serif; outline:none; }
|
||||
.chat-input-line:focus { border-color: var(--accent-bold); }
|
||||
.msg-user { background:var(--accent-bold); color:white; border-radius:4px 4px 20px 4px; padding:16px 24px; }
|
||||
.msg-bot { background:#D6EDF0; color:#0F3858; border-radius:4px 4px 4px 20px; padding:16px 24px; }
|
||||
.page-hero { background:var(--night); min-height:45vh; display:flex; align-items:center; padding:10rem 2rem 4rem; position:relative; overflow:hidden; }
|
||||
.page-hero::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at 30% 50%, rgba(54,144,158,0.18) 0%, transparent 60%); }
|
||||
.support-option { border:2px solid transparent; border-radius:12px; padding:2rem; cursor:pointer; transition:all 0.3s ease; background:white; }
|
||||
.support-option:hover { border-color:var(--sage); transform:translateY(-3px); box-shadow:0 15px 40px rgba(0,0,0,0.1); }
|
||||
.support-option.active { border-color:var(--accent-bold); background:linear-gradient(135deg, #f0f8fa, white); }
|
||||
nav a.active-page { color:var(--sage) !important; border-bottom:2px solid var(--sage); }
|
||||
nav a.nav-link:hover { color:var(--sage) !important; }
|
||||
</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">العنف الرقمي</a>
|
||||
<a href="support.html" class="nav-link active-page">الدعم</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><br>الشفاء</h1>
|
||||
<p class="text-white/70 text-lg max-w-xl serif leading-relaxed">هذه القناة مشفرة بالكامل. رسائلك تمحى فور إغلاق الجلسة. أنت في أمان هنا.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Support Options -->
|
||||
<section class="py-20 px-6 md:px-20 bg-white">
|
||||
<div class="max-w-5xl mx-auto">
|
||||
<div class="text-center mb-12">
|
||||
<h2 class="text-xs font-bold tracking-[0.2em] text-[var(--sage)] mb-4 reveal-up">طرق التواصل المتاحة</h2>
|
||||
<h3 class="text-3xl font-black reveal-up">كيف يمكننا مساعدتك؟</h3>
|
||||
</div>
|
||||
<div class="grid md:grid-cols-3 gap-6 mb-16">
|
||||
<a href="https://t.me/malaz_support" target="_blank" rel="noopener noreferrer" class="support-option active reveal-up block">
|
||||
<div class="text-3xl mb-4">💬</div>
|
||||
<h4 class="font-bold text-xl mb-2">الدعم الفوري</h4>
|
||||
<p class="text-black/60 serif text-sm">تحدّث إلينا عبر تيليغرام. مجاني وسري بالكامل.</p>
|
||||
</a>
|
||||
<a href="https://t.me/malaz_community" target="_blank" rel="noopener noreferrer" class="support-option reveal-up block">
|
||||
<div class="text-3xl mb-4">📱</div>
|
||||
<h4 class="font-bold text-xl mb-2">مجتمع ملاذ</h4>
|
||||
<p class="text-black/60 serif text-sm">انضم لمجتمعنا على تيليغرام للدعم المتبادل والمحتوى التوعوي المستمر.</p>
|
||||
</a>
|
||||
<a href="https://t.me/malaz_support?start=legal" target="_blank" rel="noopener noreferrer" class="support-option reveal-up block">
|
||||
<div class="text-3xl mb-4">⚖️</div>
|
||||
<h4 class="font-bold text-xl mb-2">الاستشارة القانونية</h4>
|
||||
<p class="text-black/60 serif text-sm">تواصل مع محامٍ متخصص في جرائم المعلوماتية لفهم خياراتك القانونية.</p>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Telegram Redirect Section -->
|
||||
<section class="py-16 px-6 md:px-20 bg-[var(--paper)]" id="chatSection">
|
||||
<div class="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-12 gap-16 items-start">
|
||||
<!-- Sidebar info -->
|
||||
<div class="md:col-span-4">
|
||||
<span class="text-xs font-bold tracking-[0.2em] text-[var(--sage)] mb-6 block reveal-up">كيف تعمل</span>
|
||||
<div class="space-y-4 mt-4 text-sm">
|
||||
<div class="flex items-start gap-3 reveal-up">
|
||||
<span class="w-8 h-8 rounded-full bg-[var(--ink)] text-white flex items-center justify-center font-bold flex-shrink-0">١</span>
|
||||
<div>
|
||||
<p class="font-bold mb-1">اضغط على الزر</p>
|
||||
<p class="text-black/50 serif text-xs">سيفتح تيليغرام مباشرةً مع فريق الدعم</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-start gap-3 reveal-up">
|
||||
<span class="w-8 h-8 rounded-full border border-[var(--ink)] flex items-center justify-center font-bold text-xs flex-shrink-0">٢</span>
|
||||
<div>
|
||||
<p class="font-bold mb-1 opacity-70">صف ما تتعرض له</p>
|
||||
<p class="text-black/50 serif text-xs">فريقنا سيردّ عليك بتوجيهات مختصة</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-start gap-3 reveal-up">
|
||||
<span class="w-8 h-8 rounded-full border border-[var(--ink)] flex items-center justify-center font-bold text-xs flex-shrink-0 opacity-40">٣</span>
|
||||
<div>
|
||||
<p class="font-bold mb-1 opacity-50">خطوات عملية</p>
|
||||
<p class="text-black/50 serif text-xs">احصل على خطة واضحة للتعامل مع موقفك</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-10 p-5 bg-[#0F3858] rounded-sm text-white reveal-up">
|
||||
<p class="font-bold mb-2 text-[#36909E] text-xs tracking-widest">ضماناتنا</p>
|
||||
<ul class="space-y-2 text-sm text-white/70 serif">
|
||||
<li class="flex items-center gap-2"><span>🔒</span> تشفير كامل من طرف لطرف</li>
|
||||
<li class="flex items-center gap-2"><span>🚫</span> لا نحتفظ بأي سجلات</li>
|
||||
<li class="flex items-center gap-2"><span>👤</span> يمكنك البقاء مجهول الهوية</li>
|
||||
<li class="flex items-center gap-2"><span>⏰</span> متاحون 24/7</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Telegram CTA Box -->
|
||||
<div class="md:col-span-8 glass-card p-6 md:p-10 rounded-sm shadow-xl border-r-4 border-[#229ED9] reveal-up">
|
||||
<div class="flex flex-col items-center text-center gap-8 py-8">
|
||||
<div class="w-24 h-24 bg-[#229ED9] rounded-full flex items-center justify-center shadow-2xl shadow-[#229ED9]/30">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-12 h-12 fill-white">
|
||||
<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>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-3xl font-black text-[#0F3858] mb-3">الدعم الآمن عبر تيليغرام</h3>
|
||||
<p class="text-black/60 serif text-lg leading-relaxed max-w-md mx-auto">
|
||||
فريقنا جاهز لاستقبالك. المحادثة مشفرة وسرية بالكامل.
|
||||
</p>
|
||||
</div>
|
||||
<div class="w-full grid grid-cols-2 gap-3 max-w-lg">
|
||||
<a target="_blank" class="text-center text-sm bg-[#f0f8fa] hover:bg-[#D6EDF0] border border-[#0F3858]/15 rounded-xl px-4 py-3 transition font-bold text-[#0F3858]">
|
||||
💰 ابتزاز إلكتروني
|
||||
</a>
|
||||
<a target="_blank" class="text-center text-sm bg-[#f0f8fa] hover:bg-[#D6EDF0] border border-[#0F3858]/15 rounded-xl px-4 py-3 transition font-bold text-[#0F3858]">
|
||||
🧨 تنمر إلكتروني
|
||||
</a>
|
||||
<a target="_blank" class="text-center text-sm bg-[#f0f8fa] hover:bg-[#D6EDF0] border border-[#0F3858]/15 rounded-xl px-4 py-3 transition font-bold text-[#0F3858]">
|
||||
⚖️ استشارة قانونية
|
||||
</a>
|
||||
<a target="_blank" class="text-center text-sm bg-[#f0f8fa] hover:bg-[#D6EDF0] border border-[#0F3858]/15 rounded-xl px-4 py-3 transition font-bold text-[#0F3858]">
|
||||
💙 دعم نفسي
|
||||
</a>
|
||||
</div>
|
||||
<a href="https://t.me/malaz_support" target="_blank" rel="noopener noreferrer"
|
||||
class="inline-flex items-center gap-3 bg-[#229ED9] text-white px-10 py-5 rounded-full font-bold text-xl hover:opacity-90 hover:-translate-y-1 transition-all duration-300 shadow-lg shadow-[#229ED9]/30">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-7 h-7 fill-white flex-shrink-0">
|
||||
<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>
|
||||
<div class="flex items-center gap-2 text-xs text-black/40 bg-[#D6EDF0]/40 px-5 py-3 rounded-full">
|
||||
<span>🔒</span>
|
||||
<span>المحادثة محمية بتشفير من طرف إلى طرف. هويتك في أمان تام.</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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>
|
||||
296
violence.html
Normal file
296
violence.html
Normal file
@@ -0,0 +1,296 @@
|
||||
<!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>
|
||||
المرجع في مشكلة جديدة
حظر مستخدم