Spaces:
Running
Running
| <html lang="ar" dir="rtl"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>د. رشيدة الطرشي - استشارية أمراض النساء والولادة</title> | |
| <link href="https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;600;700&family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet"> | |
| <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: '#f1b7ff', | |
| 'primary-dark': '#d895e6', | |
| 'primary-light': '#f9e0ff', | |
| secondary: '#f9f0fc', | |
| accent: '#e8a0f5', | |
| 'accent-dark': '#d580e6', | |
| background: 'hsl(0, 0%, 100%)', | |
| foreground: 'hsl(222.2, 84%, 4.9%)', | |
| muted: '#faf5fc', | |
| 'muted-foreground': 'hsl(215.4, 16.3%, 46.9%)' | |
| }, | |
| fontFamily: { | |
| 'cairo': ['Cairo', 'sans-serif'], | |
| 'inter': ['Inter', 'sans-serif'] | |
| }, | |
| backgroundImage: { | |
| 'gradient-primary': 'linear-gradient(135deg, #d895e6, #f1b7ff)', | |
| 'gradient-gold': 'linear-gradient(135deg, #d895e6, #f1b7ff)', | |
| 'gradient-warm': 'linear-gradient(135deg, #e8a0f5, #f9e0ff)' | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| .btn-primary { | |
| background: linear-gradient(135deg, #d895e6, #f1b7ff); | |
| color: white; | |
| padding: 12px 24px; | |
| border-radius: 8px; | |
| font-weight: 600; | |
| text-decoration: none; | |
| display: inline-block; | |
| transition: all 0.3s ease; | |
| border: none; | |
| cursor: pointer; | |
| } | |
| .btn-primary:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 10px 25px rgba(209, 143, 224, 0.4); | |
| background: linear-gradient(135deg, #f1b7ff, #d895e6); | |
| } | |
| .btn-outline { | |
| background: transparent; | |
| color: #d895e6; | |
| border: 2px solid #d895e6; | |
| padding: 12px 24px; | |
| border-radius: 8px; | |
| font-weight: 600; | |
| text-decoration: none; | |
| display: inline-block; | |
| transition: all 0.3s ease; | |
| cursor: pointer; | |
| } | |
| .btn-outline:hover { | |
| background: #d895e6; | |
| color: white; | |
| } | |
| .card { | |
| background: white; | |
| border-radius: 16px; | |
| padding: 32px; | |
| box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); | |
| transition: all 0.3s ease; | |
| border: 1px solid #f0e0f5; | |
| } | |
| .card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 20px 40px rgba(209, 143, 224, 0.2); | |
| } | |
| .icon-container { | |
| width: 64px; | |
| height: 64px; | |
| background: linear-gradient(135deg, #d895e6, #f1b7ff); | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| margin: 0 auto 24px; | |
| transition: transform 0.3s ease; | |
| } | |
| .card:hover .icon-container { | |
| transform: scale(1.1); | |
| } | |
| .hero-bg { | |
| background: linear-gradient(135deg, #f9f0fc 0%, #f5e5fc 100%); | |
| } | |
| .ai-chat-container { | |
| position: fixed; | |
| bottom: 20px; | |
| right: 20px; | |
| z-index: 1000; | |
| transition: all 0.3s ease; | |
| } | |
| .ai-chat-button { | |
| width: 60px; | |
| height: 60px; | |
| background: linear-gradient(135deg, #d895e6, #f1b7ff); | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| color: white; | |
| font-size: 24px; | |
| cursor: pointer; | |
| box-shadow: 0 4px 20px rgba(209, 143, 224, 0.3); | |
| transition: all 0.3s ease; | |
| border: none; | |
| } | |
| .ai-chat-button:hover { | |
| transform: scale(1.1); | |
| box-shadow: 0 6px 25px rgba(209, 143, 224, 0.4); | |
| } | |
| .ai-chat-window { | |
| position: absolute; | |
| bottom: 80px; | |
| right: 0; | |
| width: 350px; | |
| height: 500px; | |
| background: white; | |
| border-radius: 16px; | |
| box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15); | |
| display: none; | |
| flex-direction: column; | |
| overflow: hidden; | |
| } | |
| .ai-chat-header { | |
| background: linear-gradient(135deg, #d895e6, #f1b7ff); | |
| color: white; | |
| padding: 16px; | |
| display: flex; | |
| justify-content: between; | |
| align-items: center; | |
| } | |
| .ai-chat-body { | |
| flex: 1; | |
| padding: 16px; | |
| overflow-y: auto; | |
| background: #faf5fc; | |
| } | |
| .ai-chat-input { | |
| padding: 16px; | |
| border-top: 1px solid #f0e0f5; | |
| display: flex; | |
| gap: 8px; | |
| } | |
| .ai-message { | |
| background: white; | |
| padding: 12px 16px; | |
| border-radius: 18px 18px 18px 4px; | |
| margin-bottom: 12px; | |
| box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); | |
| max-width: 80%; | |
| } | |
| .user-message { | |
| background: linear-gradient(135deg, #d895e6, #f1b7ff); | |
| color: white; | |
| padding: 12px 16px; | |
| border-radius: 18px 18px 4px 18px; | |
| margin-bottom: 12px; | |
| margin-left: auto; | |
| max-width: 80%; | |
| } | |
| input, textarea, select { | |
| border: 2px solid #f0e0f5; | |
| border-radius: 8px; | |
| padding: 12px 16px; | |
| transition: all 0.3s ease; | |
| background: white; | |
| } | |
| input:focus, textarea:focus, select:focus { | |
| outline: none; | |
| border-color: #d895e6; | |
| box-shadow: 0 0 0 3px rgba(209, 143, 224, 0.2); | |
| } | |
| .sticky-header { | |
| position: sticky; | |
| top: 0; | |
| z-index: 50; | |
| background: rgba(255, 255, 255, 0.95); | |
| backdrop-filter: blur(10px); | |
| } | |
| @media (max-width: 768px) { | |
| .ai-chat-window { | |
| width: 300px; | |
| height: 400px; | |
| } | |
| } | |
| .fade-in { | |
| animation: fadeIn 0.8s ease-in; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(30px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .slide-in-right { | |
| animation: slideInRight 0.8s ease-out; | |
| } | |
| @keyframes slideInRight { | |
| from { opacity: 0; transform: translateX(50px); } | |
| to { opacity: 1; transform: translateX(0); } | |
| } | |
| .text-primary { | |
| color: #d895e6; | |
| } | |
| .bg-primary-light { | |
| background-color: #f9e0ff; | |
| } | |
| .border-primary { | |
| border-color: #d895e6; | |
| } | |
| </style> | |
| </head> | |
| <body class="font-cairo"> | |
| <!-- Header --> | |
| <header class="sticky-header border-b border-gray-100"> | |
| <div class="container mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex items-center justify-between h-16 lg:h-20"> | |
| <div class="flex items-center space-x-4 rtl:space-x-reverse"> | |
| <div class="w-12 h-12 bg-gradient-primary rounded-full flex items-center justify-center"> | |
| <i class="fas fa-user-md text-white text-xl"></i> | |
| </div> | |
| <div> | |
| <h1 class="text-lg font-bold text-gray-900">د. رشيدة الطورشي</h1> | |
| <p class="text-sm text-gray-600">استشارية أمراض النساء والولادة</p> | |
| </div> | |
| </div> | |
| <nav class="hidden md:flex space-x-8 rtl:space-x-reverse"> | |
| <a href="#about" class="text-gray-700 hover:text-purple-600 font-medium transition-colors">عني</a> | |
| <a href="#services" class="text-gray-700 hover:text-purple-600 font-medium transition-colors">خدماتي</a> | |
| <a href="#appointment" class="text-gray-700 hover:text-purple-600 font-medium transition-colors">موعد</a> | |
| <a href="#contact" class="text-gray-700 hover:text-purple-600 font-medium transition-colors">تواصل</a> | |
| </nav> | |
| <div class="flex items-center space-x-4 rtl:space-x-reverse"> | |
| <button id="langToggle" class="text-sm text-gray-600 hover:text-purple-600 transition-colors"> | |
| English | |
| </button> | |
| <a href="#appointment" class="btn-primary">تواصلي للحجز</a> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Hero Section --> | |
| <section id="about" class="hero-bg py-16 lg:py-24"> | |
| <div class="container mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="grid lg:grid-cols-2 gap-12 items-center"> | |
| <div class="fade-in"> | |
| <h1 class="text-4xl lg:text-6xl font-bold text-gray-900 mb-6"> | |
| مرحباً بكِ في عالم | |
| <span class="bg-gradient-primary bg-clip-text text-transparent">الصحة النسائية</span> | |
| </h1> | |
| <p class="text-xl text-gray-700 mb-8 leading-relaxed"> | |
| <strong>د. رشيدة الطورشي</strong>، استشارية أمراض النساء والولادة، أقدم لكِ خدمات رقمية متكاملة لدعمك في رحلة الأمومة والصحة النسائية من خلال المحتوى التعليمي والاستشارات الأونلاين. | |
| </p> | |
| <div class="flex flex-col sm:flex-row gap-4 mb-8"> | |
| <a href="#appointment" class="btn-primary text-center">احجزي استشارتك</a> | |
| <a href="#services" class="btn-outline text-center">تعرفي على خدماتي</a> | |
| </div> | |
| <div class="grid grid-cols-3 gap-6 text-center"> | |
| <div> | |
| <div class="text-2xl font-bold text-purple-600 mb-2">+500</div> | |
| <div class="text-sm text-gray-600">حالة متابعة</div> | |
| </div> | |
| <div> | |
| <div class="text-2xl font-bold text-purple-600 mb-2">+23</div> | |
| <div class="text-sm text-gray-600">سنوات خبرة</div> | |
| </div> | |
| <div> | |
| <div class="text-2xl font-bold text-purple-600 mb-2">24/7</div> | |
| <div class="text-sm text-gray-600">دعم مستمر</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="slide-in-right"> | |
| <img src="https://huggingface.co/spaces/Alkhinai/rasheeda-website/resolve/main/rasheeda.jpg" alt="rasheeda" class="w-full h-auto rounded-2xl shadow-xl"> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Services Section --> | |
| <section id="services" class="py-16 lg:py-24 bg-gray-50"> | |
| <div class="container mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl lg:text-4xl font-bold text-gray-900 mb-4">خدماتي الرقمية</h2> | |
| <p class="text-xl text-gray-600 max-w-3xl mx-auto"> | |
| <b>الدكتورة رشيدة الطورشي</b> | |
| استشارية أمراض النساء والولادة وطب الأم | |
| والجنين | |
| خبرة أكثر من ٢٣ سنة | |
| أُقدّم لكِ خدمات طبية و رقمية متكاملة لدعمك في رحلة الأمومة و*الصحة النسائية*و صحة الفتيات ، | |
| من خلال محتوى تعليمي موثوق و*استشارات طبية عبر الهاتف و أونلاين مخصصة لكِ انتي. | |
| </p> | |
| </div> | |
| <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Service 1 --> | |
| <div class="card cursor-pointer hovered-element" onclick="showPdfPurchase('صحة الفتيات (للمراهقات وأمهاتهن)', 'التوعية بالتغيرات الجسدية والنفسية: البلوغ والدورة الشهرية، النظافة الشخصية، التغذية وأسلوب الحياة الصحي، الصحة النفسية في سن المراهقة، والتثقيف الجنسي الوقائي من منظور علمي وأخلاقي.')"> | |
| <div class="icon-container"> | |
| <i class="fas fa-female text-white text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold text-gray-900 mb-4 text-center">صحة الفتيات (للمراهقات وأمهاتهن)</h3> | |
| <p class="text-gray-600 leading-relaxed text-center"> | |
| التوعية بالتغيرات الجسدية والنفسية: البلوغ والدورة الشهرية، النظافة الشخصية، التغذية وأسلوب الحياة الصحي، الصحة النفسية في سن المراهقة، والتثقيف الجنسي الوقائي من منظور علمي وأخلاقي. | |
| </p> | |
| </div> | |
| <!-- Service 2 --> | |
| <div class="card cursor-pointer" data-title="رحلة حمل آمن (للحوامل في جميع المراحل)" data-desc="تمكين المرأة من فهم مراحل الحمل: علامات الحمل السليم والخطر، الفحوصات الضرورية، التغذية والرياضة أثناء الحمل، التغيرات النفسية والتكيف معها، والتحضير للولادة."> | |
| <div class="icon-container"> | |
| <i class="fas fa-baby text-white text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold text-gray-900 mb-4 text-center">رحلة حمل آمن (للحوامل في جميع المراحل)</h3> | |
| <p class="text-gray-600 leading-relaxed text-center"> | |
| تمكين المرأة من فهم مراحل الحمل: علامات الحمل السليم والخطر، الفحوصات الضرورية، التغذية والرياضة أثناء الحمل، التغيرات النفسية والتكيف معها، والتحضير للولادة. | |
| </p> | |
| </div> | |
| <!-- Service 3 --> | |
| <div class="card cursor-pointer hovered-element" data-title="الاستعداد للولادة الطبيعية" data-desc="تقليل القلق وتعزيز الثقة بالولادة الطبيعية: مراحل الولادة، تقنيات التنفس والاسترخاء، الأوضاع المناسبة أثناء المخاض، دور الشريك أو المرافق، ومتى نذهب إلى المستشفى."> | |
| <div class="icon-container"> | |
| <i class="fas fa-heart text-white text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold text-gray-900 mb-4 text-center hovered-element">الاستعداد للولادة الطبيعية</h3> | |
| <p class="text-gray-600 leading-relaxed text-center hovered-element"> | |
| تقليل القلق وتعزيز الثقة بالولادة الطبيعية: مراحل الولادة، تقنيات التنفس والاسترخاء، الأوضاع المناسبة أثناء المخاض، دور الشريك أو المرافق، ومتى نذهب إلى المستشفى. | |
| </p> | |
| </div> | |
| <!-- Service 4 --> | |
| <div class="card cursor-pointer" data-title="الرضاعة الطبيعية" data-desc="دعم وتشجيع الأمهات على الرضاعة الحصرية: فوائد الرضاعة للأم والطفل، الوضعيات الصحيحة، التعامل مع التحديات (تشقق الحلمات، قلة الحليب)، تنظيم نوم الطفل والرضاعة، والفطام التدريجي الصحي."> | |
| <div class="icon-container"> | |
| <i class="fas fa-shield-alt text-white text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold text-gray-900 mb-4 text-center">الرضاعة الطبيعية</h3> | |
| <p class="text-gray-600 leading-relaxed text-center"> | |
| دعم وتشجيع الأمهات على الرضاعة الحصرية: فوائد الرضاعة للأم والطفل، الوضعيات الصحيحة، التعامل مع التحديات (تشقق الحلمات، قلة الحليب)، تنظيم نوم الطفل والرضاعة، والفطام التدريجي الصحي. | |
| </p> | |
| </div> | |
| <!-- Service 5 --> | |
| <div class="card cursor-pointer" data-title="دعم نفسي متخصص يراعي احتياجات المرأة" data-desc="تقديم الدعم النفسي المتخصص الذي يراعي الاحتياجات الفريدة للمرأة في مختلف مراحل حياتها، مع التركيز على تحقيق التوازن العقلي والعاطفي لتعزيز الصحة النفسية الشاملة."> | |
| <div class="icon-container"> | |
| <i class="fas fa-stethoscope text-white text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold text-gray-900 mb-4 text-center">دعم نفسي متخصص يراعي احتياجات المرأة في كل مرحلة من حياتها، مع تركيز على التوازن العقلي والعاطفي.</h3> | |
| <p class="text-gray-600 leading-relaxed text-center"> | |
| تقديم الدعم النفسي المتخصص الذي يراعي الاحتياجات الفريدة للمرأة في مختلف مراحل حياتها، مع التركيز على تحقيق التوازن العقلي والعاطفي لتعزيز الصحة النفسية الشاملة. | |
| </p> | |
| </div> | |
| <!-- Service 6 --> | |
| <div class="card cursor-pointer" data-title="علاج اضطراب الدورة الشهرية والتقلبات الهرمونية" data-desc="علاج شامل لمشاكل اضطراب الدورة الشهرية والتقلبات الهرمونية، لنمنحك راحة وانتظامًا كل شهر."> | |
| <div class="icon-container"> | |
| <i class="fas fa-calendar-alt text-white text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold text-gray-900 mb-4 text-center">علاج اضطراب الدورة الشهرية والتقلبات الهرمونية</h3> | |
| <p class="text-gray-600 leading-relaxed text-center"> | |
| علاج شامل لمشاكل اضطراب الدورة الشهرية والتقلبات الهرمونية، لنمنحك راحة وانتظامًا كل شهر. | |
| </p> | |
| </div> | |
| </div> | |
| <div class="mt-16 text-center"> | |
| <div class="bg-gradient-to-r from-purple-50 to-pink-50 rounded-3xl p-8 md:p-12"> | |
| <h3 class="text-2xl lg:text-3xl font-bold text-gray-900 mb-4">رسالتي إليكِ</h3> | |
| <p class="text-gray-700 mb-6 max-w-3xl mx-auto text-lg leading-relaxed"> | |
| أن أكون لكِ رفيقة طبية موثوقة، تجمع بين الدقة العلمية، والرحمة الإنسانية، والمشورة الهادفة. لكل امرأة تسعى لتفهم جسدها، تُوازن حياتها، وتعيش أنوثتها بسلام… هذه المساحة لكِ. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Appointment Options --> | |
| <section id="appointment" class="py-16 lg:py-24 bg-white"> | |
| <div class="container mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="max-w-4xl mx-auto"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl lg:text-4xl font-bold text-gray-900 mb-4">احجزي موعد للاستشارة</h2> | |
| <p class="text-xl text-gray-600">د. رشيدة الطورشي - استشارة هاتفية: يرجى التواصل عبر الواتساب لتحديد الوقت المناسب</p> | |
| </div> | |
| <div class="grid md:grid-cols-3 gap-8"> | |
| <!-- Direct Contact --> | |
| <div class="card cursor-pointer" data-title="الاتصال المباشر" data-desc="استشارة هاتفية مباشرة لمدة 30 دقيقة" data-price="5 ر.ع" data-number="99213846"> | |
| <h3 class="text-xl font-semibold text-gray-900 mb-4 text-center">الاتصال المباشر</h3> | |
| <p class="text-gray-600 leading-relaxed text-center"> | |
| استشارة هاتفية مباشرة: | |
| <br> | |
| <span class="font-medium">سعر الاستشارة: 5 ر.ع</span> | |
| <br> | |
| +968 99213846 | |
| </p> | |
| </div> | |
| <!-- Hospital 1 --> | |
| <div class="card cursor-pointer" data-title="المركز الأوروبي" data-desc="تواصل عبر الواتساب أو المكالمة مع رغدة" data-number="79910006"> | |
| <h3 class="text-xl font-semibold text-gray-900 mb-4 text-center">المركز الأوروبي</h3> | |
| <p class="text-gray-600 leading-relaxed text-center"> | |
| تواصل عبر الواتساب أو المكالمة مع رغدة | |
| <br> | |
| <span class="font-medium">+968 7991 0006</span> | |
| </p> | |
| </div> | |
| <!-- Hospital 2 --> | |
| <div class="card cursor-pointer" data-title="مستشفى السعادة" data-desc="تواصل عبر الواتساب أو المكالمة مع حمد" data-number="97243471"> | |
| <h3 class="text-xl font-semibold text-gray-900 mb-4 text-center">مستشفى السعادة</h3> | |
| <p class="text-gray-600 leading-relaxed text-center"> | |
| تواصل عبر الواتساب أو المكالمة مع حمد | |
| <br> | |
| <span class="font-medium">+968 9724 3471</span> | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer id="contact" class="bg-gray-900 text-white py-12"> | |
| <div class="container mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="grid md:grid-cols-3 gap-8"> | |
| <div> | |
| <div class="flex items-center space-x-4 rtl:space-x-reverse mb-6"> | |
| <div class="w-12 h-12 bg-gradient-primary rounded-full flex items-center justify-center"> | |
| <i class="fas fa-user-md text-white text-xl"></i> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-bold">د. رشيدة الطورشي</h3> | |
| <p class="text-gray-400">استشارية أمراض النساء والولادة</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-400 leading-relaxed"> | |
| رفيقتك الطبية الموثوقة في رحلة الأمومة والصحة النسائية | |
| </p> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-semibold mb-4">معلومات التواصل</h4> | |
| <div class="space-y-3"> | |
| <div class="flex items-center space-x-3 rtl:space-x-reverse"> | |
| <i class="fas fa-phone text-purple-400"></i> | |
| <span>+968 9208 0990</span> | |
| </div> | |
| <div class="flex items-center space-x-3 rtl:space-x-reverse"> | |
| <i class="fas fa-envelope text-purple-400"></i> | |
| <span>aldana.om@gmail.com</span> | |
| </div> | |
| <div class="flex items-center space-x-3 rtl:space-x-reverse"> | |
| <i class="fas fa-map-marker-alt text-purple-400"></i> | |
| <span> | |
| مستشفى صحار | |
| <br> | |
| مستشفى السعادة <br> | |
| المركز العربي الاوربي | |
| </span> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-semibold mb-4">تابعيني</h4> | |
| <div class="flex space-x-4 rtl:space-x-reverse"> | |
| <a href="https://www.instagram.com/drrasheedaal?igsh=cjh2Y3ZyYm4ydGs=" target="_blank" class="w-10 h-10 bg-purple-600 rounded-full flex items-center justify-center hover:bg-purple-700 transition-colors"> | |
| <i class="fab fa-instagram"></i> | |
| </a> | |
| <a href="https://x.com/rasheedatorshi?s=11" target="_blank" class="w-10 h-10 bg-purple-600 rounded-full flex items-center justify-center hover:bg-purple-700 transition-colors"> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| <a href="https://www.linkedin.com/in/%D8%AF%D9%83%D8%AA%D9%88%D8%B1%D9%87-%D8%B1%D8%B4%D9%8A%D8%AF%D8%A9-%D8%A7%D9%84%D8%B7%D9%88%D8%B1%D8%B4%D9%8A-348231338?utm_source=share&utm_campaign=share_via&utm_content=profile&utm_medium=ios_app" target="_blank" class="w-10 h-10 bg-purple-600 rounded-full flex items-center justify-center hover:bg-purple-700 transition-colors"> | |
| <i class="fab fa-linkedin"></i> | |
| </a> | |
| <a href="https://www.tiktok.com/@dr.rasheeda?_t=ZS-8yiT2yDR81y&_r=1" target="_blank" class="w-10 h-10 bg-purple-600 rounded-full flex items-center justify-center hover:bg-purple-700 transition-colors"> | |
| <i class="fab fa-tiktok"></i> | |
| </a> | |
| <a href="https://t.snapchat.com/qolmYKTS" target="_blank" class="w-10 h-10 bg-purple-600 rounded-full flex items-center justify-center hover:bg-purple-700 transition-colors"> | |
| <i class="fab fa-snapchat"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-800 mt-8 pt-8 text-center"> | |
| <p class="text-gray-400"> | |
| © 2025 د. رشيدة الطرشي. جميع الحقوق محفوظة. | |
| </p> | |
| </div> | |
| </div> | |
| </footer> | |
| <!-- Service Detail Modal --> | |
| <div id="serviceModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 opacity-0 pointer-events-none transition-opacity duration-300"> | |
| <div class="bg-white rounded-2xl p-8 w-96 max-w-full mx-4 relative" style="aspect-ratio: 1/1.1;"> | |
| <div class="absolute top-4 left-4"> | |
| <button onclick="closeServiceDetail()" class="text-gray-500 hover:text-gray-700 transition-colors"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div class="flex flex-col h-full"> | |
| <div class="text-center mb-6"> | |
| <h3 id="serviceTitle" class="text-2xl font-bold text-gray-900"></h3> | |
| </div> | |
| <p id="serviceDescription" class="text-gray-600 mb-6"></p> | |
| </div> | |
| </div> | |
| <!-- AI Chat Bot --> | |
| <div class="ai-chat-container"> | |
| <div class="ai-chat-window" id="chatWindow"> | |
| <div class="ai-chat-header"> | |
| <div class="flex items-center space-x-3 rtl:space-x-reverse"> | |
| <div class="w-8 h-8 bg-white/20 rounded-full flex items-center justify-center"> | |
| <i class="fas fa-robot text-white text-sm"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold">المساعد الذكي</h4> | |
| <p class="text-xs opacity-90">متاح 24/7</p> | |
| </div> | |
| </div> | |
| <div class="flex space-x-2 rtl:space-x-reverse"> | |
| <button onclick="minimizeChat()" class="text-white/80 hover:text-white"> | |
| <i class="fas fa-minus"></i> | |
| </button> | |
| <button onclick="closeChat()" class="text-white/80 hover:text-white"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="ai-chat-body" id="chatBody"> | |
| <div class="ai-message"> | |
| مرحباً! أنا المساعد الذكي للدكتورة رشida. كيف يمكنني مساعدتك اليوم؟ | |
| </div> | |
| </div> | |
| <div class="ai-chat-input"> | |
| <input type="text" id="chatInput" placeholder="اكتبي رسالتك..." class="flex-1 border-0 bg-gray-100 rounded-full px-4 py-2 text-sm"> | |
| <button onclick="sendMessage()" class="ai-chat-button w-8 h-8 text-sm"> | |
| <i class="fas fa-paper-plane"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <button class="ai-chat-button" onclick="toggleChat()" id="chatToggle"> | |
| <i class="fas fa-comments"></i> | |
| </button> | |
| </div> | |
| <script> | |
| // Chat functionality | |
| let chatOpen = false; | |
| function toggleChat() { | |
| const chatWindow = document.getElementById('chatWindow'); | |
| const chatToggle = document.getElementById('chatToggle'); | |
| if (chatOpen) { | |
| chatWindow.style.display = 'none'; | |
| chatToggle.innerHTML = '<i class="fas fa-comments"></i>'; | |
| chatOpen = false; | |
| } else { | |
| chatWindow.style.display = 'flex'; | |
| chatToggle.innerHTML = '<i class="fas fa-times"></i>'; | |
| chatOpen = true; | |
| } | |
| } | |
| function closeChat() { | |
| const chatWindow = document.getElementById('chatWindow'); | |
| const chatToggle = document.getElementById('chatToggle'); | |
| chatWindow.style.display = 'none'; | |
| chatToggle.innerHTML = '<i class="fas fa-comments"></i>'; | |
| chatOpen = false; | |
| } | |
| function minimizeChat() { | |
| closeChat(); | |
| } | |
| function sendMessage() { | |
| const input = document.getElementById('chatInput'); | |
| const chatBody = document.getElementById('chatBody'); | |
| if (input.value.trim() === '') return; | |
| // Add user message | |
| const userMessage = document.createElement('div'); | |
| userMessage.className = 'user-message'; | |
| userMessage.textContent = input.value; | |
| chatBody.appendChild(userMessage); | |
| // Clear input | |
| const userText = input.value; | |
| input.value = ''; | |
| // Simulate AI response | |
| setTimeout(() => { | |
| const aiMessage = document.createElement('div'); | |
| aiMessage.className = 'ai-message'; | |
| aiMessage.textContent = getAIResponse(userText); | |
| chatBody.appendChild(aiMessage); | |
| chatBody.scrollTop = chatBody.scrollHeight; | |
| }, 1000); | |
| chatBody.scrollTop = chatBody.scrollHeight; | |
| } | |
| function getAIResponse(message) { | |
| const responses = [ | |
| 'شكراً لتواصلك معي. سأوصل رسالتك للدكتورة رشيدة وستقوم بالرد عليك قريباً.', | |
| 'يمكنك حجز موعد من خلال النموذج أعلاه، أو التواصل مباشرة على الرقم المتوفر.', | |
| 'للاستشارات الطارئة، يرجى التواصل على رقم الهاتف المباشر.', | |
| 'الدكتورة رشيدة تقدم استشارات في جميع مجالات صحة المرأة والولادة.' | |
| ]; | |
| return responses[Math.floor(Math.random() * responses.length)]; | |
| } | |
| // Enter key support for chat | |
| document.getElementById('chatInput').addEventListener('keypress', function(e) { | |
| if (e.key === 'Enter') { | |
| sendMessage(); | |
| } | |
| }); | |
| // Smooth scrolling for navigation links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function (e) { | |
| e.preventDefault(); | |
| const target = document.querySelector(this.getAttribute('href')); | |
| if (target) { | |
| target.scrollIntoView({ | |
| behavior: 'smooth', | |
| block: 'start' | |
| }); | |
| } | |
| }); | |
| }); | |
| // Service detail modal functions | |
| document.querySelectorAll('.card').forEach(card => { | |
| card.addEventListener('click', function() { | |
| const title = this.dataset.title; | |
| const desc = this.dataset.desc; | |
| const price = this.dataset.price; | |
| const number = this.dataset.number; | |
| updateModalContent(title, desc, price, number); | |
| const modal = document.getElementById('serviceModal'); | |
| modal.classList.remove('pointer-events-none'); | |
| modal.classList.remove('opacity-0'); | |
| document.body.style.overflow = 'hidden'; | |
| }); | |
| }); | |
| function closeServiceDetail() { | |
| const modal = document.getElementById('serviceModal'); | |
| modal.classList.add('opacity-0'); | |
| modal.classList.add('pointer-events-none'); | |
| document.body.style.overflow = 'auto'; | |
| } | |
| // Show PDF purchase modal | |
| function showPdfPurchase(title, desc) { | |
| const modal = document.getElementById('serviceModal'); | |
| document.getElementById('serviceTitle').textContent = title; | |
| document.getElementById('serviceDescription').innerHTML = ` | |
| <div class="text-center mb-4"> | |
| <img src="https://huggingface.co/spaces/Alkhinai/rasheeda-website/resolve/main/images/{6FDBD605-AF59-4A0C-B148-16ED8CBBA9FF}.png" alt="${title}" class="w-full h-auto rounded-lg mb-4 max-h-48 object-contain mx-auto"> | |
| <p>${desc}</p> | |
| </div> | |
| <div class="bg-gray-100 p-4 rounded-lg"> | |
| <p class="font-medium text-center mb-2">سعر الدليل: 3 ر.ع (كان 5 ر.ع)</p> | |
| <div class="grid grid-cols-1 gap-2"> | |
| <a href="https://wa.me/96892080990?text=${encodeURIComponent('أريد شراء دليل ' + title)}" | |
| class="btn-primary w-full text-center py-2"> | |
| <i class="fab fa-whatsapp mr-2"></i> الدفع عبر واتساب | |
| </a> | |
| <a href="https://secure-oman.paytabs.com/payment/link/167701/7759816" | |
| target="_blank" | |
| class="btn-outline w-full text-center py-2"> | |
| <i class="fas fa-credit-card mr-2"></i> الدفع الإلكتروني | |
| </a> | |
| </div> | |
| </div> | |
| `; | |
| modal.classList.remove('pointer-events-none'); | |
| modal.classList.remove('opacity-0'); | |
| document.body.style.overflow = 'hidden'; | |
| } | |
| // Update modal content with payment info | |
| function updateModalContent(title, desc, price, number) { | |
| document.getElementById('serviceTitle').textContent = title; | |
| if (price) { | |
| document.getElementById('serviceDescription').innerHTML = ` | |
| <p class="mb-4">${desc}</p> | |
| <div class="bg-gray-100 p-4 rounded-lg mb-4"> | |
| <p class="font-medium text-center">طرق الدفع:</p> | |
| <p class="text-center my-2">الدفع عن طريق الرقم</p> | |
| <p class="text-center font-bold text-lg">${number}</p> | |
| <p class="text-center my-2">أو مسح رمز الدفع</p> | |
| <img src="qr-code.jpg" alt="QR Code" class="w-32 h-32 mx-auto my-2"> | |
| <p class="text-center font-medium">سعر الخدمة: ${price}</p> | |
| <p class="text-center text-sm">إرسال إيصال الدفع بعد التحويل</p> | |
| </div> | |
| <div class="text-center space-y-2"> | |
| <a href="https://wa.me/968${number}?text=${encodeURIComponent( | |
| `أريد حجز خدمة ${title} وقد قمت بالدفع ${price} على الرقم ${number} يرجى التأكيد` | |
| )}" class="btn-primary w-full text-center py-3 mt-2 block"> | |
| <i class="fab fa-whatsapp mr-2"></i> إرسال الإيصال عبر واتساب | |
| </a> | |
| <a href="https://huggingface.co/spaces/Alkhinai/pinkpulse-health-guides" | |
| target="_blank" | |
| class="btn-outline w-full text-center py-3 mt-2 block"> | |
| <i class="fas fa-shopping-cart mr-2"></i> اطلب الآن | |
| </a> | |
| </div> | |
| `; | |
| } else { | |
| document.getElementById('serviceDescription').innerHTML = ` | |
| <p class="mb-4">${desc}</p> | |
| <div class="text-center space-y-2"> | |
| <a href="https://wa.me/968${number}" | |
| class="btn-primary w-full text-center py-3 mt-4 block"> | |
| <i class="fab fa-whatsapp mr-2"></i> تواصل عبر واتساب | |
| </a> | |
| <a href="https://huggingface.co/spaces/Alkhinai/pinkpulse-health-guides" | |
| target="_blank" | |
| class="btn-outline w-full text-center py-3 mt-2 block"> | |
| <i class="fas fa-shopping-cart mr-2"></i> اطلب الآن | |
| </a> | |
| </div> | |
| `; | |
| } | |
| } | |
| // Language toggle placeholder | |
| document.getElementById('langToggle').addEventListener('click', function() { | |
| // Language toggle functionality would go here | |
| alert('ميزة تغيير اللغة قيد التطوير'); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Alkhinai/rasheeda-website" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |