530 أسطر
28 KiB
HTML
530 أسطر
28 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ar" dir="rtl">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>أمان | ملاذك الآمن</title>
|
||
|
||
<script src="https://cdn.tailwindcss.com"></script>
|
||
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
|
||
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"></script>
|
||
<link href="https://fonts.googleapis.com/css2?family=Cairo:wght@200;400;600;900&display=swap" rel="stylesheet">
|
||
<link href="https://fonts.googleapis.com/css2?family=Noto+Naskh+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;
|
||
}
|
||
|
||
* { 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;
|
||
}
|
||
|
||
/* --- 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;
|
||
}
|
||
|
||
/* The Background Text (Ghost Typography) */
|
||
.ghost-text {
|
||
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;
|
||
}
|
||
|
||
/* 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;
|
||
}
|
||
|
||
/* 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;
|
||
}
|
||
|
||
.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;
|
||
}
|
||
.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);
|
||
}
|
||
|
||
.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); }
|
||
|
||
.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; }
|
||
.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); }
|
||
.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: 2rem; }
|
||
|
||
</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>
|
||
</div>
|
||
<div class="text-white text-xl font-black hover-target">أمان.</div>
|
||
</nav>
|
||
|
||
<!-- HERO SECTION (The Sanctuary) -->
|
||
<section class="hero-sanctuary" id="hero">
|
||
|
||
<!-- Background Ghost Text -->
|
||
<div class="ghost-text">أمان</div>
|
||
|
||
<!-- Mouse Follow Spotlight -->
|
||
<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>
|
||
<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>
|
||
</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">
|
||
<div class="w-full h-1/2 bg-white absolute animate-pulse bottom-0"></div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- CONTENT WRAPPER (The Light) -->
|
||
<div class="content-wrapper">
|
||
|
||
<!-- IMPACT SECTION -->
|
||
<section id="impact" class="py-32 px-8 md:px-20 relative">
|
||
<div class="max-w-7xl mx-auto">
|
||
<div class="mb-20 grid md:grid-cols-2 gap-12 items-end">
|
||
<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">
|
||
تواجه النساء في الفضاء الرقمي أنواعاً متعددة من العنف، بدءاً من التحرش والابتزاز الإلكتروني، وصولاً إلى انتهاك الخصوصية وتشويه السمعة.
|
||
</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>
|
||
</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>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- FAQ SECTION -->
|
||
<section id="faq" class="py-32 px-8 md:px-20 bg-[var(--stone)]">
|
||
<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="border-t border-black/10">
|
||
<div class="faq-item reveal-up">
|
||
<div class="faq-question hover-target" 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>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="faq-item reveal-up">
|
||
<div class="faq-question hover-target" 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>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="faq-item reveal-up">
|
||
<div class="faq-question hover-target" 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>
|
||
</div>
|
||
</div>
|
||
</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">
|
||
<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>
|
||
<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>
|
||
</div>
|
||
</div>
|
||
<div class="md:col-span-1">
|
||
<h4 class="font-bold text-sm mb-6 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>
|
||
</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>
|
||
</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="text-xs text-white/30">اتصالك بهذه الصفحة آمن ومشفر بالكامل</span>
|
||
</div>
|
||
<p class="text-xs text-white/20">© ٢٠٢٥ أمان. جميع الحقوق محمية.</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"
|
||
});
|
||
});
|
||
|
||
// 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
|
||
});
|
||
});
|
||
|
||
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
|
||
}
|
||
});
|
||
|
||
// Reveal Up Animations
|
||
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" }
|
||
});
|
||
});
|
||
|
||
// 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> |