full website
هذا الالتزام موجود في:
sana-abboud@gma
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>
|
||||
|
||||
المرجع في مشكلة جديدة
حظر مستخدم