Compare commits
3 الالتزامات
| المؤلف | SHA1 | التاريخ | |
|---|---|---|---|
| e512271004 | |||
|
f022e843f8 | ||
|
|
c7d4997303 |
@@ -2,7 +2,7 @@
|
||||
FROM nginx:alpine
|
||||
|
||||
# Copy your index.html to Nginx's default public folder
|
||||
COPY index.html /usr/share/nginx/html/
|
||||
COPY . /usr/share/nginx/html/
|
||||
|
||||
# Expose port 80 (default HTTP port)
|
||||
EXPOSE 80
|
||||
|
||||
ثنائية
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>
|
||||
677
index.html
677
index.html
@@ -3,163 +3,81 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>أمان | ملاذك الآمن</title>
|
||||
|
||||
<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+Naskh+Arabic:wght@400;700&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: #121417; /* Deep Charcoal */
|
||||
--accent-soft: #FDE8D5;
|
||||
--accent-bold: #D94F30;
|
||||
--sage: #3A5A48;
|
||||
--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;
|
||||
cursor: none;
|
||||
}
|
||||
body { font-family: 'Cairo', sans-serif; background-color: var(--paper); color: var(--ink); overflow-x: hidden; }
|
||||
|
||||
/* --- Custom Cursor --- */
|
||||
.cursor-dot { width: 6px; height: 6px; background: var(--accent-bold); border-radius: 50%; position: fixed; transform: translate(-50%, -50%); pointer-events: none; z-index: 10000; mix-blend-mode: difference; }
|
||||
.cursor-ring { width: 40px; height: 40px; border: 1.5px solid var(--ink); border-radius: 50%; position: fixed; transform: translate(-50%, -50%); pointer-events: none; z-index: 9999; transition: width 0.3s, height 0.3s, border-color 0.3s; }
|
||||
body.hover-active .cursor-ring { width: 80px; height: 80px; border-color: var(--accent-bold); }
|
||||
|
||||
/* --- NEW HERO: Immersive Dark Sanctuary --- */
|
||||
.hero-sanctuary {
|
||||
position: relative;
|
||||
height: 100vh;
|
||||
width: 100%;
|
||||
background-color: var(--night);
|
||||
color: white;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 10;
|
||||
position: relative; height: 100vh; width: 100%;
|
||||
background-color: var(--night); color: white;
|
||||
overflow: hidden; display: flex; flex-direction: column;
|
||||
justify-content: center; align-items: center; z-index: 10;
|
||||
}
|
||||
|
||||
/* The Background Text (Ghost Typography) */
|
||||
.ghost-text {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
position: absolute; top: 50%; left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
font-size: 20vw;
|
||||
font-weight: 900;
|
||||
white-space: nowrap;
|
||||
opacity: 0.03;
|
||||
color: white;
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
font-size: 20vw; font-weight: 900; white-space: nowrap;
|
||||
opacity: 0.03; color: white; pointer-events: none; user-select: none;
|
||||
}
|
||||
|
||||
/* Fluid Light Effect */
|
||||
.hero-spotlight {
|
||||
position: absolute;
|
||||
width: 150vw;
|
||||
height: 150vw;
|
||||
background: radial-gradient(circle, rgba(217, 79, 48, 0.15) 0%, rgba(0,0,0,0) 70%);
|
||||
top: 50%; left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
pointer-events: none;
|
||||
transition: all 0.1s ease-out;
|
||||
z-index: 1;
|
||||
position: absolute; width: 150vw; height: 150vw;
|
||||
background: radial-gradient(circle, rgba(54, 144, 158, 0.15) 0%, rgba(0,0,0,0) 70%);
|
||||
top: 50%; left: 50%; transform: translate(-50%, -50%);
|
||||
pointer-events: none; transition: all 0.1s ease-out; z-index: 1;
|
||||
}
|
||||
|
||||
/* Hero Content Layer */
|
||||
.hero-content {
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
text-align: center;
|
||||
padding: 0 2rem;
|
||||
mix-blend-mode: exclusion; /* Inverts color for cool effect */
|
||||
}
|
||||
|
||||
.hero-headline {
|
||||
font-size: clamp(3rem, 9vw, 8rem);
|
||||
font-weight: 900;
|
||||
line-height: 0.95;
|
||||
letter-spacing: -0.04em;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.hero-content { position: relative; z-index: 10; text-align: center; padding: 0 2rem; color: #E0F4F6; }
|
||||
.hero-headline { font-size: clamp(3rem, 9vw, 8rem); font-weight: 900; line-height: 0.95; letter-spacing: -0.04em; margin-bottom: 2rem; }
|
||||
.magnetic-btn {
|
||||
position: relative;
|
||||
padding: 1.5rem 4rem;
|
||||
background: transparent;
|
||||
border: 1.5px solid white;
|
||||
color: white;
|
||||
font-weight: 700;
|
||||
font-size: 1rem;
|
||||
border-radius: 100px;
|
||||
cursor: none;
|
||||
overflow: hidden;
|
||||
transition: color 0.4s cubic-bezier(0.25, 1, 0.5, 1);
|
||||
z-index: 2;
|
||||
position: relative; padding: 1.5rem 4rem;
|
||||
background: transparent; border: 1.5px solid #E0F4F6;
|
||||
color: #E0F4F6; font-weight: 700; font-size: 1rem;
|
||||
border-radius: 100px; cursor: pointer; overflow: hidden;
|
||||
transition: color 0.4s cubic-bezier(0.25, 1, 0.5, 1); z-index: 2;
|
||||
font-family: 'Cairo', sans-serif;
|
||||
}
|
||||
.magnetic-btn::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0; left: 0; width: 100%; height: 100%;
|
||||
background: var(--accent-bold);
|
||||
transform: translateY(100%);
|
||||
transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
|
||||
z-index: -1;
|
||||
}
|
||||
.magnetic-btn:hover::before {
|
||||
transform: translateY(0);
|
||||
}
|
||||
.magnetic-btn:hover {
|
||||
border-color: var(--accent-bold);
|
||||
}
|
||||
|
||||
/* --- Content Sections (Light Mode) --- */
|
||||
.content-wrapper {
|
||||
position: relative;
|
||||
background-color: var(--paper);
|
||||
z-index: 20;
|
||||
margin-top: 0;
|
||||
/* Pinned effect handled by JS, but for fallback: */
|
||||
box-shadow: 0 -50px 100px rgba(0,0,0,0.2);
|
||||
content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
|
||||
background: var(--sage); transform: translateY(100%);
|
||||
transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1); z-index: -1;
|
||||
}
|
||||
.magnetic-btn:hover::before { transform: translateY(0); }
|
||||
.magnetic-btn:hover { border-color: var(--accent-bold); }
|
||||
|
||||
.content-wrapper { position: relative; background-color: var(--paper); z-index: 20; box-shadow: 0 -50px 100px rgba(0,0,0,0.2); }
|
||||
.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);
|
||||
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); }
|
||||
.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); -webkit-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; }
|
||||
|
||||
.serif { font-family: 'Noto Naskh Arabic', serif; }
|
||||
|
||||
/* Animations */
|
||||
.reveal-up { opacity: 0; transform: translateY(60px); }
|
||||
.fade-in { opacity: 0; }
|
||||
|
||||
/* --- Chat Specifics --- */
|
||||
.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(--ink); color: white; border-radius: 4px 4px 20px 4px; padding: 16px 24px; }
|
||||
.msg-bot { background: var(--accent-soft); color: #4A3F35; border-radius: 4px 4px 4px 20px; padding: 16px 24px; border: 1px solid rgba(255,255,255,0.5); }
|
||||
|
||||
/* --- FAQ Accordion --- */
|
||||
.faq-item { border-bottom: 1px solid rgba(0,0,0,0.05); }
|
||||
.faq-question { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 2rem 0; cursor: pointer; text-align: right; }
|
||||
.faq-question h4 { font-size: 1.2rem; font-weight: 700; transition: color 0.3s; }
|
||||
@@ -169,51 +87,94 @@
|
||||
.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: 2rem; }
|
||||
|
||||
/* Telegram Section */
|
||||
.telegram-section {
|
||||
background: linear-gradient(135deg, #0a1e2e 0%, #0F3858 60%, #1a4d6e 100%);
|
||||
position: relative; overflow: hidden;
|
||||
}
|
||||
.telegram-section::before {
|
||||
content: ''; position: absolute; top: -50%; right: -20%;
|
||||
width: 600px; height: 600px; border-radius: 50%;
|
||||
background: radial-gradient(circle, rgba(54,144,158,0.2) 0%, transparent 70%);
|
||||
}
|
||||
.telegram-section::after {
|
||||
content: ''; position: absolute; bottom: -30%; left: -10%;
|
||||
width: 400px; height: 400px; border-radius: 50%;
|
||||
background: radial-gradient(circle, rgba(214,237,240,0.08) 0%, transparent 70%);
|
||||
}
|
||||
.telegram-btn {
|
||||
display: inline-flex; align-items: center; gap: 1rem;
|
||||
background: #229ED9; color: white;
|
||||
padding: 1.2rem 2.5rem; border-radius: 100px;
|
||||
font-weight: 700; font-size: 1.1rem;
|
||||
transition: all 0.3s ease; text-decoration: none;
|
||||
border: 2px solid transparent;
|
||||
}
|
||||
.telegram-btn:hover {
|
||||
background: transparent; border-color: #229ED9;
|
||||
transform: translateY(-2px); box-shadow: 0 15px 40px rgba(34,158,217,0.3);
|
||||
}
|
||||
.telegram-feature {
|
||||
display: flex; align-items: flex-start; gap: 1rem;
|
||||
padding: 1.5rem; border-radius: 12px;
|
||||
background: rgba(255,255,255,0.05);
|
||||
border: 1px solid rgba(255,255,255,0.1);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.telegram-feature:hover { background: rgba(255,255,255,0.1); transform: translateY(-2px); }
|
||||
|
||||
.stat-card {
|
||||
background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
|
||||
border-radius: 16px; padding: 2rem; text-align: center;
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
/* Nav mobile menu */
|
||||
.mobile-menu { display: none; }
|
||||
.mobile-menu.active { display: flex; }
|
||||
|
||||
nav a.nav-link { transition: color 0.2s; }
|
||||
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>
|
||||
|
||||
<!-- Cursor -->
|
||||
<div class="cursor-dot"></div>
|
||||
<div class="cursor-ring"></div>
|
||||
|
||||
<!-- Navigation (Fixed Over Hero) -->
|
||||
<nav class="fixed top-0 w-full z-50 px-8 md:px-16 py-8 flex justify-between items-center mix-blend-difference">
|
||||
<div class="flex gap-8 text-xs tracking-[0.2em] font-bold text-white">
|
||||
<a href="#impact" class="hover-target">التأثير</a>
|
||||
<a href="#sanctuary" class="hover-target">الدعم</a>
|
||||
<a href="#faq" class="hover-target">أسئلة</a>
|
||||
<!-- Navigation -->
|
||||
<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 active-page">الرئيسية</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">أسئلة</a>
|
||||
</div>
|
||||
<div class="text-white text-xl font-black hover-target">أمان.</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>
|
||||
|
||||
<!-- HERO SECTION (The Sanctuary) -->
|
||||
<!-- HERO -->
|
||||
<section class="hero-sanctuary" id="hero">
|
||||
|
||||
<!-- Background Ghost Text -->
|
||||
<div class="ghost-text">أمان</div>
|
||||
|
||||
<!-- Mouse Follow Spotlight -->
|
||||
<div class="ghost-text">ملاذ</div>
|
||||
<div class="hero-spotlight" id="spotlight"></div>
|
||||
|
||||
<!-- Main Content -->
|
||||
<div class="hero-content">
|
||||
<p class="text-xs md:text-sm font-bold tracking-[0.3em] mb-4 opacity-60 fade-in">فضاؤك الرقمي الآمن</p>
|
||||
<h1 class="hero-headline">
|
||||
لست وحدك.
|
||||
</h1>
|
||||
<h1 class="hero-headline">لست وحدك</h1>
|
||||
<p class="text-lg md:text-xl font-light max-w-xl mx-auto mb-10 opacity-80 fade-in serif">
|
||||
في خضم الضجيج الرقمي، نحن هنا لنستمع. مساحة سرية للدعم النفسي والقانوني.
|
||||
في خضم الضجيج الرقمي، نحن هنا لنستمع. مساحة سرية للدعم النفسي والقانوني
|
||||
</p>
|
||||
|
||||
<div id="magneticArea" class="inline-block">
|
||||
<button class="magnetic-btn hover-target" onclick="document.getElementById('sanctuary').scrollIntoView({behavior: 'smooth'})">
|
||||
ابدأ الحوار الآمن
|
||||
</button>
|
||||
<div class="flex flex-col sm:flex-row gap-4 justify-center items-center">
|
||||
<div id="magneticArea" class="inline-block">
|
||||
<button class="magnetic-btn" onclick="window.open('https://t.me/malaz_support','_blank')">
|
||||
ابدأ الحوار الآمن
|
||||
</button>
|
||||
</div>
|
||||
<a href="violence.html" class="text-white/60 hover:text-white transition font-bold text-sm tracking-widest underline underline-offset-4">
|
||||
تعرّف على حقوقك
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Scroll Indicator -->
|
||||
<div class="absolute bottom-10 left-1/2 -translate-x-1/2 flex flex-col items-center gap-2 text-white/30 text-xs tracking-widest">
|
||||
<span>انزل للاكتشاف</span>
|
||||
<div class="w-px h-10 bg-white/20 relative overflow-hidden">
|
||||
@@ -222,76 +183,136 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CONTENT WRAPPER (The Light) -->
|
||||
<!-- CONTENT -->
|
||||
<div class="content-wrapper">
|
||||
|
||||
<!-- IMPACT SECTION -->
|
||||
<section id="impact" class="py-32 px-8 md:px-20 relative">
|
||||
<!-- Quick Overview Cards -->
|
||||
<section class="py-24 px-6 md:px-20">
|
||||
<div class="max-w-7xl mx-auto">
|
||||
<div class="mb-20 grid md:grid-cols-2 gap-12 items-end">
|
||||
<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="grid md:grid-cols-3 gap-8">
|
||||
<a href="violence.html" class="glass-card p-8 rounded-sm reveal-up block group">
|
||||
<div class="w-14 h-14 rounded-full bg-[#D6EDF0] flex items-center justify-center mb-6 text-2xl">⚖️</div>
|
||||
<h4 class="text-xl font-bold mb-3 text-[#0F3858] group-hover:text-[var(--sage)] transition-colors">المعرفة القانونية</h4>
|
||||
<p class="text-sm leading-relaxed text-black/70 serif mb-4">تعرّف على أنواع العنف الرقمي وحقوقك القانونية بموجب قانون الجرائم المعلوماتية رقم 20 لعام 2022.</p>
|
||||
<span class="text-[var(--sage)] font-bold text-sm">اقرأ المزيد ←</span>
|
||||
</a>
|
||||
<a href="https://t.me/malaz_support" target="_blank" rel="noopener noreferrer" class="glass-card p-8 rounded-sm reveal-up block group">
|
||||
<div class="w-14 h-14 rounded-full bg-[#cce4e8] flex items-center justify-center mb-6 text-2xl">💬</div>
|
||||
<h4 class="text-xl font-bold mb-3 text-[#0F3858] group-hover:text-[var(--sage)] transition-colors">قناة الدعم الآمنة</h4>
|
||||
<p class="text-sm leading-relaxed text-black/70 serif mb-4">تواصل معنا بشكل سري ومشفّر. فريقنا من المختصين القانونيين جاهز للمساعدة على مدار الساعة.</p>
|
||||
<span class="text-[var(--sage)] font-bold text-sm">تواصل معنا ←</span>
|
||||
</a>
|
||||
<a href="about.html" class="glass-card p-8 rounded-sm reveal-up block group">
|
||||
<div class="w-14 h-14 rounded-full bg-[#b8d9de] flex items-center justify-center mb-6 text-2xl">🤝</div>
|
||||
<h4 class="text-xl font-bold mb-3 text-[#0F3858] group-hover:text-[var(--sage)] transition-colors">عن ملاذ</h4>
|
||||
<p class="text-sm leading-relaxed text-black/70 serif mb-4">من نحن وما هي رسالتنا؟ تعرّف على فريقنا والقيم التي نؤمن بها في بناء مجتمع رقمي أكثر أماناً.</p>
|
||||
<span class="text-[var(--sage)] font-bold text-sm">تعرّف علينا ←</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- TELEGRAM COMMUNITY SECTION -->
|
||||
<section class="telegram-section py-32 px-6 md:px-20">
|
||||
<div class="max-w-6xl mx-auto relative z-10">
|
||||
<div class="grid md:grid-cols-2 gap-16 items-center">
|
||||
<!-- Content -->
|
||||
<div>
|
||||
<h2 class="text-xs font-bold tracking-[0.2em] text-[#D94F30] mb-4 reveal-up">العنف الرقمي</h2>
|
||||
<h3 class="text-5xl md:text-6xl font-black leading-tight reveal-up">أثر حقيقي<br>وإصابات عميقة.</h3>
|
||||
</div>
|
||||
<p class="text-black/60 leading-relaxed reveal-up serif text-lg">
|
||||
العنف الرقمي ليس مجرد كلمات على شاشة. إنه سلاح موجه غالباً نحو النساء، يهدف إلى إسكات الحريات.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="grid md:grid-cols-2 gap-12 mb-20 border-t border-black/10 pt-16">
|
||||
<div class="reveal-up">
|
||||
<h4 class="text-3xl font-bold mb-6 border-b-4 border-[var(--accent-soft)] pb-2 inline-block">الواقع المؤلم</h4>
|
||||
<p class="serif leading-loose text-black/80 text-lg mb-6">
|
||||
تواجه النساء في الفضاء الرقمي أنواعاً متعددة من العنف، بدءاً من التحرش والابتزاز الإلكتروني، وصولاً إلى انتهاك الخصوصية وتشويه السمعة.
|
||||
<span class="text-xs font-bold tracking-[0.3em] text-[#36909E] mb-4 block reveal-up">المجتمع</span>
|
||||
<h2 class="text-4xl md:text-5xl font-black text-white leading-tight mb-6 reveal-up">
|
||||
انضم إلى<br><span class="text-[#36909E]">مجتمع ملاذ</span><br>على تيليغرام
|
||||
</h2>
|
||||
<p class="text-white/70 leading-relaxed mb-8 serif text-lg reveal-up">
|
||||
كوّن جزءاً من مجتمع داعم من الأفراد الذين يؤمنون بحقوقهم الرقمية. اطّلع على آخر المستجدات، شارك تجربتك بشكل آمن، واحصل على الدعم الذي تحتاجه.
|
||||
</p>
|
||||
<p class="serif leading-loose text-black/60 mb-6">
|
||||
<span class="text-[var(--accent-bold)] font-bold">التأثير النفسي:</span> يؤدي هذا العنف إلى العزلة الاجتماعية، الخوف من التعبير عن الرأي، وحالات من الاكتئاب الحاد. الضحية غالباً ما تشعر بأنها "المذنبة" مما يزيدها انغلاقاً.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="reveal-up">
|
||||
<h4 class="text-3xl font-bold mb-6 border-b-4 border-[var(--sage)] pb-2 inline-block">الطريق إلى الشفاء</h4>
|
||||
<p class="serif leading-loose text-black/80 text-lg mb-6">
|
||||
الخطوة الأولى نحو الشفاء هي كسر صمت الخوف. العنف الرقمي جريمة يعاقب عليها القانون، وللضحية حقوق كاملة في الملاحقة القانونية مع حماية هويتها.
|
||||
</p>
|
||||
<div class="bg-[var(--accent-soft)] p-6 rounded-sm mt-8">
|
||||
<p class="font-bold text-[var(--accent-bold)]">هل تعلم؟</p>
|
||||
<p class="text-sm mt-2 text-black/70">القوانين العربية تطورت لتشمل عقوبات رادعة للجرائم الإلكترونية، منها السجن والغرامات المالية.</p>
|
||||
<div class="space-y-4 mb-10">
|
||||
<div class="telegram-feature reveal-up">
|
||||
<div class="text-2xl flex-shrink-0">🔒</div>
|
||||
<div>
|
||||
<h4 class="font-bold text-white mb-1">مجتمع آمن وخاص</h4>
|
||||
<p class="text-white/60 text-sm serif">فضاء محمي يمكنك التعبير فيه بحرية دون خوف من الانتقام أو الكشف عن هويتك</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="telegram-feature reveal-up">
|
||||
<div class="text-2xl flex-shrink-0">📚</div>
|
||||
<div>
|
||||
<h4 class="font-bold text-white mb-1">محتوى توعوي حصري</h4>
|
||||
<p class="text-white/60 text-sm serif">نصائح أمنية، دليل للحقوق القانونية، وتحديثات مستمرة حول العنف الرقمي</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="telegram-feature reveal-up">
|
||||
<div class="text-2xl flex-shrink-0">🤝</div>
|
||||
<div>
|
||||
<h4 class="font-bold text-white mb-1">دعم متبادل بين الأعضاء</h4>
|
||||
<p class="text-white/60 text-sm serif">تواصل مع أشخاص مرّوا بتجارب مشابهة واحصل على الدعم العاطفي والعملي</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="telegram-feature reveal-up">
|
||||
<div class="text-2xl flex-shrink-0">⚡</div>
|
||||
<div>
|
||||
<h4 class="font-bold text-white mb-1">تنبيهات فورية</h4>
|
||||
<p class="text-white/60 text-sm serif">احصل على تنبيهات فورية حول تهديدات جديدة وكيفية حماية نفسك منها</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a href="https://t.me/malaz_community" target="_blank" rel="noopener noreferrer" class="telegram-btn reveal-up">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-6 h-6 fill-current 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>
|
||||
</div>
|
||||
|
||||
<div class="grid md:grid-cols-3 gap-8" id="knowledge">
|
||||
<div class="glass-card p-8 rounded-sm hover-target">
|
||||
<div class="w-12 h-12 rounded-full bg-[#FFD9C0] flex items-center justify-center mb-6 text-xl">🛡️</div>
|
||||
<h4 class="text-2xl font-bold mb-4">التنمر الإلكتروني</h4>
|
||||
<p class="text-sm font-light leading-relaxed text-black/60 mb-6">التحرش المستمر والسخرية. التنمر قد يكون صامتاً ولكن أثره عميق.</p>
|
||||
</div>
|
||||
<div class="glass-card p-8 rounded-sm hover-target">
|
||||
<div class="w-12 h-12 rounded-full bg-[#D9E8D5] flex items-center justify-center mb-6 text-xl">⚖️</div>
|
||||
<h4 class="text-2xl font-bold mb-4">خطاب الكراهية</h4>
|
||||
<p class="text-sm font-light leading-relaxed text-black/60 mb-6">الهجوم على الهوية أو المعتقد. أنت محمي بقوانين صارمة تحظر التحريض.</p>
|
||||
</div>
|
||||
<div class="glass-card p-8 rounded-sm hover-target">
|
||||
<div class="w-12 h-12 rounded-full bg-[#F0D9D9] flex items-center justify-center mb-6 text-xl">🔒</div>
|
||||
<h4 class="text-2xl font-bold mb-4">الابتزاز الرقمي</h4>
|
||||
<p class="text-sm font-light leading-relaxed text-black/60 mb-6">التهديد بمعلومات أو صور خاصة. لدينا فريق متخصص لإنهاء هذا الملف بذكاء.</p>
|
||||
<!-- Visual CTA Card -->
|
||||
<div class="flex flex-col gap-6 reveal-up">
|
||||
<div class="bg-white/5 border border-white/15 rounded-2xl p-8 text-center flex flex-col items-center gap-6">
|
||||
<div class="w-20 h-20 bg-[#229ED9] rounded-full flex items-center justify-center shadow-lg shadow-[#229ED9]/30">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-10 h-10 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>
|
||||
<p class="text-white font-black text-2xl mb-1">@malaz_community</p>
|
||||
<p class="text-white/50 text-sm serif">القناة الرسمية لملاذ على تيليغرام</p>
|
||||
</div>
|
||||
<a href="https://t.me/malaz_community" target="_blank" rel="noopener noreferrer" class="w-full telegram-btn justify-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-5 h-5 fill-current 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>
|
||||
<div class="bg-white/5 border border-white/15 rounded-2xl p-6 flex items-center gap-4">
|
||||
<div class="w-12 h-12 bg-[#36909E]/30 rounded-full flex items-center justify-center flex-shrink-0 text-xl">🔒</div>
|
||||
<div>
|
||||
<p class="text-white font-bold text-sm mb-1">سرية تامة ومساحة آمنة</p>
|
||||
<p class="text-white/50 text-xs serif">مجتمع مُدار ومحمي، يمكنك الانضمام بهوية مجهولة</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white/5 border border-white/15 rounded-2xl p-6 flex items-center gap-4">
|
||||
<div class="w-12 h-12 bg-[#36909E]/30 rounded-full flex items-center justify-center flex-shrink-0 text-xl">⚡</div>
|
||||
<div>
|
||||
<p class="text-white font-bold text-sm mb-1">دعم فوري على مدار الساعة</p>
|
||||
<p class="text-white/50 text-xs serif">متواجدون دائماً للمساعدة</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- FAQ SECTION -->
|
||||
<section id="faq" class="py-32 px-8 md:px-20 bg-[var(--stone)]">
|
||||
<!-- Quick FAQ Preview -->
|
||||
<section class="py-24 px-6 md:px-20 bg-[#FAFAF8]">
|
||||
<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>
|
||||
<h3 class="text-4xl md:text-5xl font-black leading-tight reveal-up">هل لديك تساؤلات؟</h3>
|
||||
</div>
|
||||
|
||||
<div class="border-t border-black/10">
|
||||
<div class="faq-item reveal-up">
|
||||
<div class="faq-question hover-target" onclick="toggleFaq(this)">
|
||||
<div class="faq-question" onclick="toggleFaq(this)">
|
||||
<h4>هل هويتي مكفولة السرية تماماً؟</h4>
|
||||
<div class="faq-icon text-2xl font-light">+</div>
|
||||
</div>
|
||||
@@ -299,9 +320,8 @@
|
||||
<p class="text-black/60 leading-relaxed pr-8 serif">نعم، بشكل مطلق. نستخدم تقنيات تشفير متقدمة ولا نطلب أي بيانات تعريفية. حتى فريق الدعم لا يرى هويتك الحقيقية.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="faq-item reveal-up">
|
||||
<div class="faq-question hover-target" onclick="toggleFaq(this)">
|
||||
<div class="faq-question" onclick="toggleFaq(this)">
|
||||
<h4>ماذا يجب أن أفعل إذا تعرضت للابتزاز؟</h4>
|
||||
<div class="faq-icon text-2xl font-light">+</div>
|
||||
</div>
|
||||
@@ -309,222 +329,129 @@
|
||||
<p class="text-black/60 leading-relaxed pr-8 serif">توقف عن التواصل مع المبتز فوراً ولا تدفع أي أموال. خذ لقطات شاشة للأدلة. تواصل معنا عبر القناة الآمنة لتوجيهك قانونياً وتقنياً.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="faq-item reveal-up">
|
||||
<div class="faq-question hover-target" onclick="toggleFaq(this)">
|
||||
<h4>هل يمكنكم مساعدتي في حذف صور خاصة من الإنترنت؟</h4>
|
||||
<div class="faq-question" onclick="toggleFaq(this)">
|
||||
<h4>هل الانضمام إلى مجتمع تيليغرام آمن؟</h4>
|
||||
<div class="faq-icon text-2xl font-light">+</div>
|
||||
</div>
|
||||
<div class="faq-answer">
|
||||
<p class="text-black/60 leading-relaxed pr-8 serif">نعم، لدينا فريق تقني متخصص في إزالة المحتوى من المنصات والتعاون مع الجهات المعنية لسحب المواد المخالفة.</p>
|
||||
<p class="text-black/60 leading-relaxed pr-8 serif">نعم. المجموعة مُدارة بعناية من قِبل فريق ملاذ. يمكنك الانضمام بهوية مجهولة، ولا يُشارَك أي معلومة شخصية. يُطبَّق قانون صارم للحفاظ على سلامة الأعضاء.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-center mt-10">
|
||||
<a href="faq.html" class="inline-block px-8 py-4 border-2 border-[var(--ink)] rounded-full font-bold hover:bg-[var(--ink)] hover:text-white transition-colors">
|
||||
جميع الأسئلة
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- THE SANCTUARY (Chat) -->
|
||||
<section id="sanctuary" class="min-h-screen py-32 px-8 md:px-20 grid grid-cols-1 md:grid-cols-12 gap-16 items-center bg-[#FAFAF8]">
|
||||
<div class="md:col-span-4 flex flex-col justify-center">
|
||||
<span class="text-xs font-bold tracking-[0.2em] text-[var(--sage)] mb-6 reveal-up">قناة الاستماع</span>
|
||||
<h2 class="text-5xl md:text-6xl font-black leading-tight mb-8 reveal-up">الحديث<br>أول خطوات<br>الشفاء.</h2>
|
||||
<p class="text-black/60 leading-relaxed mb-8 font-light reveal-up">هذه القناة مشفرة بالكامل. رسائلك تمحى فور إغلاق الجلسة.</p>
|
||||
|
||||
<div class="space-y-4 mt-4 text-sm">
|
||||
<div class="flex items-center gap-3 reveal-up">
|
||||
<span class="w-8 h-8 rounded-full bg-[var(--ink)] text-white flex items-center justify-center font-bold">١</span>
|
||||
<span>اكتب مشكلتك</span>
|
||||
</div>
|
||||
<div class="flex items-center 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">٢</span>
|
||||
<span class="opacity-50">استمع للدعم</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="md:col-span-8 glass-card p-8 md:p-12 rounded-sm shadow-xl border-l-4 border-[var(--accent-soft)]">
|
||||
<div id="chatBox" class="min-h-[450px] flex flex-col justify-end mb-8 pr-2 space-y-6 overflow-y-auto max-h-[60vh]">
|
||||
<div class="flex justify-start reveal-up">
|
||||
<div class="msg-bot max-w-md">
|
||||
<p class="font-bold text-sm text-[#3A5A48] mb-1">مرحباً بك في "أمان"</p>
|
||||
<p class="text-sm leading-relaxed">سواء كنت تواجهين تنمراً، خطاب كراهية، أو أي خطر رقمي... نحن هنا لنساعدك. كيف يمكننا مساعدتك اليوم؟</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex gap-6 items-end pt-6 border-t border-black/5">
|
||||
<div class="flex-1">
|
||||
<input type="text" id="userInput" placeholder="اكتب رسالتك هنا..." class="chat-input-line hover-target">
|
||||
</div>
|
||||
<button id="sendBtn" class="w-14 h-14 rounded-full bg-[var(--ink)] text-white flex items-center justify-center hover:bg-[var(--accent-bold)] transition-colors hover-target">
|
||||
<i class="fas fa-long-arrow-alt-left"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="mt-6 flex items-center gap-2 text-xs text-black/40 bg-[#FFD9C0]/20 p-3 rounded-sm">
|
||||
<i class="fas fa-shield-heart"></i>
|
||||
<span>هذه المحادثة محمية بتشفير من طرف إلى طرف ولا يتم تسجيلها.</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- FOOTER -->
|
||||
<footer class="bg-[var(--ink)] text-white pt-24 pb-12 px-8 md:px-20 relative overflow-hidden">
|
||||
<div class="absolute top-0 left-0 w-full h-2 bg-gradient-to-l from-[var(--accent-bold)] via-[var(--accent-soft)] to-[var(--sage)]"></div>
|
||||
<div class="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-4 gap-16 mb-20">
|
||||
<!-- 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">
|
||||
<h3 class="text-4xl font-black mb-4">أمان</h3>
|
||||
<p class="text-sm text-white/50 leading-relaxed mb-6 max-w-md">مبادرة غير ربحية تهدف لتوفير ملاذ رقمي آمن للناجيات من العنف الإلكتروني في المنطقة العربية.</p>
|
||||
<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">
|
||||
<a href="#" class="w-10 h-10 rounded-full border border-white/20 flex items-center justify-center hover:bg-white/10 transition hover-target"><i class="fab fa-twitter text-sm"></i></a>
|
||||
<a href="#" class="w-10 h-10 rounded-full border border-white/20 flex items-center justify-center hover:bg-white/10 transition hover-target"><i class="fab fa-instagram text-sm"></i></a>
|
||||
<!-- 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 class="md:col-span-1">
|
||||
<h4 class="font-bold text-sm mb-6 tracking-wider">روابط سريعة</h4>
|
||||
<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="#" class="hover:text-white hover-target transition">الرئيسية</a></li>
|
||||
<li><a href="#knowledge" class="hover:text-white hover-target transition">المعرفة القانونية</a></li>
|
||||
<li><a href="#faq" class="hover:text-white hover-target transition">الأسئلة الشائعة</a></li>
|
||||
<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 class="md:col-span-1 bg-white/5 p-6 rounded-sm">
|
||||
<h4 class="font-bold text-sm mb-2">طوارئ</h4>
|
||||
<p class="text-xs text-white/40 mb-4">إذا كنت في خطر جسدي فوري، يرجى التواصل مع:</p>
|
||||
<a href="tel:911" class="flex items-center gap-2 text-[var(--accent-soft)] text-sm font-bold hover-target">
|
||||
<i class="fas fa-phone"></i>
|
||||
الطوارئ المحلية
|
||||
</a>
|
||||
<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"></span>
|
||||
<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">© ٢٠٢٥ أمان. جميع الحقوق محمية.</p>
|
||||
<p class="text-xs text-white/20">© 2026 ملاذ. جميع الحقوق محفوظة.</p>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// --- Cursor Logic ---
|
||||
const cursorDot = document.querySelector('.cursor-dot');
|
||||
const cursorRing = document.querySelector('.cursor-ring');
|
||||
let mouseX = 0, mouseY = 0; let ringX = 0, ringY = 0;
|
||||
window.addEventListener('mousemove', e => { mouseX = e.clientX; mouseY = e.clientY; gsap.to(cursorDot, { x: mouseX, y: mouseY, duration: 0 }); });
|
||||
function animateRing() { ringX += (mouseX - ringX) * 0.1; ringY += (mouseY - ringY) * 0.1; cursorRing.style.left = ringX + 'px'; cursorRing.style.top = ringY + 'px'; requestAnimationFrame(animateRing); } animateRing();
|
||||
const hoverTargets = document.querySelectorAll('.hover-target, a, button, input');
|
||||
hoverTargets.forEach(target => { target.addEventListener('mouseenter', () => document.body.classList.add('hover-active')); target.addEventListener('mouseleave', () => document.body.classList.remove('hover-active')); });
|
||||
|
||||
// --- Hero Interaction Logic ---
|
||||
// 1. Spotlight Follow
|
||||
const spotlight = document.getElementById('spotlight');
|
||||
const heroSection = document.querySelector('.hero-sanctuary');
|
||||
|
||||
heroSection.addEventListener('mousemove', (e) => {
|
||||
const rect = heroSection.getBoundingClientRect();
|
||||
const x = e.clientX - rect.left;
|
||||
const y = e.clientY - rect.top;
|
||||
|
||||
// Move spotlight slightly delayed for dreamy effect
|
||||
gsap.to(spotlight, {
|
||||
x: x - (rect.width / 2),
|
||||
y: y - (rect.height / 2),
|
||||
duration: 0.8,
|
||||
ease: "power2.out"
|
||||
});
|
||||
gsap.to(spotlight, { x: e.clientX - rect.left - rect.width/2, y: e.clientY - rect.top - rect.height/2, duration: 0.8, ease: "power2.out" });
|
||||
});
|
||||
|
||||
// 2. Magnetic Button
|
||||
const magneticBtn = document.querySelector('.magnetic-btn');
|
||||
const magneticArea = document.getElementById('magneticArea');
|
||||
|
||||
magneticArea.addEventListener('mousemove', (e) => {
|
||||
const rect = magneticArea.getBoundingClientRect();
|
||||
const x = e.clientX - rect.left - rect.width / 2;
|
||||
const y = e.clientY - rect.top - rect.height / 2;
|
||||
|
||||
gsap.to(magneticBtn, {
|
||||
x: x * 0.3,
|
||||
y: y * 0.3,
|
||||
duration: 0.2
|
||||
if (magneticArea) {
|
||||
magneticArea.addEventListener('mousemove', (e) => {
|
||||
const rect = magneticArea.getBoundingClientRect();
|
||||
gsap.to(magneticBtn, { x: (e.clientX - rect.left - rect.width/2) * 0.3, y: (e.clientY - rect.top - rect.height/2) * 0.3, duration: 0.2 });
|
||||
});
|
||||
});
|
||||
|
||||
magneticArea.addEventListener('mouseleave', () => {
|
||||
gsap.to(magneticBtn, {
|
||||
x: 0,
|
||||
y: 0,
|
||||
duration: 0.5,
|
||||
ease: "elastic.out(1, 0.3)"
|
||||
magneticArea.addEventListener('mouseleave', () => {
|
||||
gsap.to(magneticBtn, { x: 0, y: 0, duration: 0.5, ease: "elastic.out(1, 0.3)" });
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// --- GSAP Animations ---
|
||||
gsap.registerPlugin(ScrollTrigger);
|
||||
|
||||
// Hero Parallax Text on Scroll
|
||||
gsap.to('.ghost-text', {
|
||||
scale: 1.5,
|
||||
opacity: 0.1,
|
||||
scrollTrigger: {
|
||||
trigger: ".hero-sanctuary",
|
||||
start: "top top",
|
||||
end: "bottom top",
|
||||
scrub: 1
|
||||
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();
|
||||
|
||||
// Reveal Up Animations
|
||||
gsap.registerPlugin(ScrollTrigger);
|
||||
gsap.to('.ghost-text', { scale: 1.5, opacity: 0.1, scrollTrigger: { trigger: ".hero-sanctuary", start: "top top", end: "bottom top", scrub: 1 } });
|
||||
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" }
|
||||
});
|
||||
gsap.to(elem, { y: 0, opacity: 1, duration: 1, ease: "power3.out", scrollTrigger: { trigger: elem, start: "top 85%", toggleActions: "play none none reverse" } });
|
||||
});
|
||||
|
||||
// Fade In Animations (Hero specific)
|
||||
gsap.to('.fade-in', { opacity: 0.8, duration: 1.5, stagger: 0.2, delay: 0.5 });
|
||||
|
||||
// --- FAQ Logic ---
|
||||
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');
|
||||
}
|
||||
|
||||
// --- Chat Logic ---
|
||||
const chatBox = document.getElementById('chatBox');
|
||||
const userInput = document.getElementById('userInput');
|
||||
const sendBtn = document.getElementById('sendBtn');
|
||||
|
||||
function addMsg(text, isUser) {
|
||||
const div = document.createElement('div');
|
||||
div.className = `flex ${isUser ? 'justify-end' : 'justify-start'} mb-4`;
|
||||
const bubble = document.createElement('div');
|
||||
bubble.className = isUser ? 'msg-user max-w-sm' : 'msg-bot max-w-sm';
|
||||
bubble.innerHTML = `<p class="text-sm">${text}</p>`;
|
||||
div.appendChild(bubble);
|
||||
chatBox.appendChild(div);
|
||||
chatBox.scrollTop = chatBox.scrollHeight;
|
||||
gsap.from(div, { opacity: 0, y: 20, duration: 0.4 });
|
||||
}
|
||||
|
||||
function handleSend() {
|
||||
const text = userInput.value.trim();
|
||||
if(!text) return;
|
||||
addMsg(text, true);
|
||||
userInput.value = '';
|
||||
setTimeout(() => {
|
||||
addMsg("تم استلام رسالتك بسرية تامة. فريقنا سيقوم بالرد عليك وتقديم الدعم المناسب لحالتك.", false);
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
sendBtn.addEventListener('click', handleSend);
|
||||
userInput.addEventListener('keypress', e => { if(e.key === 'Enter') handleSend(); });
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
</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>
|
||||
المرجع في مشكلة جديدة
حظر مستخدم