پرش به محتوا

منو اصلی/بخشنده - فراغیب

از فراغیب
→ تفاوت با ویرایش قدیمی‌ترتفاوت با ویرایش جدیدتر ←
دیداریویکی‌متن
بدون خلاصۀ ویرایش
بدون خلاصۀ ویرایش
خط ۱: خط ۱:
 
<!DOCTYPE html>
<html lang="fa" dir="rtl">
<html lang="fa" dir="rtl">
<head>
<head>
     <meta charset="UTF-8">
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>خدمات تخصصی اهدای تخمک و رحم | ثبت‌نام آنلاین</title>
     <title>خدمات تخصصی سلامت بانوان | ثبت‌نام آنلاین</title>
     <meta name="description" content="ثبت‌نام سریع برای اهدای تخمک، رحم جایگزین و جنین با رعایت کامل ضوابط پزشکی و شرعی.">
     <meta name="description" content="ثبت‌نام سریع برای اهدای تخمک، رحم جایگزین و جنین با رعایت کامل ضوابط پزشکی و شرعی.">
      
      
    <!-- استفاده از Tailwind برای سرعت و ریسپانسیو بودن فوق‌العاده -->
     <script src="https://cdn.tailwindcss.com"></script>
     <script src="https://cdn.tailwindcss.com"></script>
      
      
خط ۱۵: خط ۱۴:
         :root {
         :root {
             --primary-color: #db2777;
             --primary-color: #db2777;
            --primary-hover: #be185d;
         }
         }


         body {  
         body {  
             font-family: 'Vazirmatn', sans-serif;  
             font-family: 'Vazirmatn', sans-serif;  
             overflow-x: hidden;
             margin: 0;
            padding: 0;
         }
         }


         /* استایل منو */
         /* اصلاح مشکل زیرمنوها */
         .poly-nav a {
         .dropdown-menu {
             transition: all 0.3s ease;
             display: none;
            position: absolute;
            top: 100%;
            right: 0;
            min-width: 200px;
            background-color: white;
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
            border-radius: 0.5rem;
            z-index: 50;
            border-top: 2px solid #db2777;
         }
         }


         /* استایل Modal (پنجره فرم) */
        /* نمایش زیرمنو فقط هنگام هاور روی والد */
        .group:hover .dropdown-menu {
            display: block;
        }
 
         /* استایل Modal */
         #registrationModal {
         #registrationModal {
             display: none; /* در حالت عادی مخفی است */
             display: none;
             position: fixed;
             position: fixed;
             inset: 0;
             inset: 0;
خط ۳۷: خط ۵۰:
         }
         }


        /* لایه مات پشت فرم */
         .modal-overlay {
         .modal-overlay {
             position: fixed;
             position: fixed;
             inset: 0;
             inset: 0;
             background: rgba(0, 0, 0, 0.6);
             background: rgba(0, 0, 0, 0.6);
             backdrop-filter: blur(8px); /* ایجاد حالت مات کردن صفحه اصلی */
             backdrop-filter: blur(8px);
             z-index: -1;
             z-index: -1;
         }
         }


        /* انیمیشن ورود فرم */
         .modal-content {
         .modal-content {
             animation: slideUp 0.4s ease-out;
             animation: slideUp 0.4s ease-out;
خط ۵۶: خط ۶۷:
         }
         }


        /* استایل مراحل فرم */
         .step-card { display: none; }
         .step-card { display: none; }
         .step-card.active { display: block; }
         .step-card.active { display: block; }


        /* حذف انیمیشن در موبایل برای سرعت بیشتر */
         @media (max-width: 768px) {
         @media (max-width: 768px) {
             .modal-content {
             .modal-content {
خط ۶۶: خط ۷۵:
                 height: 100%;
                 height: 100%;
                 border-radius: 0;
                 border-radius: 0;
                margin: 0 !important;
             }
             }
         }
         }
خط ۷۲: خط ۸۲:
<body class="bg-gray-50">
<body class="bg-gray-50">


     <!-- محتوای فرضی صفحه اصلی (برای تست مات شدن) -->
     <!-- بخش منوی اصلی (فقط منو باقی مانده است) -->
     <div id="mainContent">
     <header class="bg-white shadow-md sticky top-0 z-40">
         <header class="bg-gradient-to-r from-pink-500 to-rose-400 py-12 text-white text-center">
         <nav class="max-w-6xl mx-auto px-4" aria-label="منوی اصلی">
             <h1 class="text-3xl font-bold">پورتال خدمات تخصصی سلامت بانوان</h1>
             <ul class="flex items-center justify-between h-16">
            <p class="mt-2 opacity-90">با رعایت کامل فتاوای مراجع تقلید و پروتکل‌های پزشکی</p>
                <!-- لوگو یا نام سایت در سمت راست (اختیاری) -->
        </header>
                <li class="font-bold text-pink-600 text-xl">سلامت بانوان</li>


        <!-- منوی اصلی -->
                <!-- لیست لینک‌ها -->
        <div class="poly-menu-container bg-white shadow-md sticky top-0 z-40">
                <ul class="hidden md:flex items-center space-x-reverse space-x-6 h-full">
            <nav class="poly-nav max-w-6xl mx-auto" aria-label="منوی اصلی">
                    <li class="h-full flex items-center"><a href="#" class="text-gray-700 hover:text-pink-600 transition">اصلی</a></li>
                <ul class="flex flex-wrap justify-center items-center py-2">
                    <li class="px-3"><a href="#" class="text-gray-700 hover:text-pink-600">اصلی</a></li>
                      
                      
                     <li class="relative group px-3">
                    <!-- زیرمنوی انواع خدمات -->
                         <a href="#" class="text-gray-700 group-hover:text-pink-600 flex items-center">
                     <li class="relative group h-full flex items-center">
                             خدمات اهدایی ▾
                         <a href="#" class="text-gray-700 group-hover:text-pink-600 flex items-center h-full">
                             انواع خدمات اهدایی  
                            <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
                         </a>
                         </a>
                         <ul class="absolute right-0 w-48 bg-white shadow-lg rounded-lg py-2 hidden group-hover:block border-t-2 border-pink-500">
                         <ul class="dropdown-menu py-2">
                             <li><a href="#" class="block px-4 py-2 hover:bg-pink-50">اهدای تخمک</a></li>
                             <li><a href="/wiki/اهدای_تخمک" class="block px-4 py-2 text-gray-700 hover:bg-pink-50 hover:text-pink-600">اهدای تخمک</a></li>
                             <li><a href="#" class="block px-4 py-2 hover:bg-pink-50">رحم جایگزین</a></li>
                             <li><a href="/wiki/رحم_جایگزین" class="block px-4 py-2 text-gray-700 hover:bg-pink-50 hover:text-pink-600">رحم جایگزین</a></li>
                             <li><a href="#" class="block px-4 py-2 hover:bg-pink-50">اهدای جنین</a></li>
                             <li><a href="/wiki/اهدای_جنین" class="block px-4 py-2 text-gray-700 hover:bg-pink-50 hover:text-pink-600">اهدای جنین</a></li>
                         </ul>
                         </ul>
                     </li>
                     </li>


                     <li class="px-3"><a href="#" class="text-gray-700 hover:text-pink-600">شرایط و ضوابط</a></li>
                    <!-- زیرمنوی شرایط و ضوابط -->
                    <li class="px-3"><a href="#" class="text-gray-700 hover:text-pink-600">استعلام هزینه</a></li>
                     <li class="relative group h-full flex items-center">
                   
                        <a href="#" class="text-gray-700 group-hover:text-pink-600 flex items-center h-full">
                    <!-- دکمه اصلی برای باز کردن فرم -->
                            شرایط و ضوابط
                    <li class="px-3">
                            <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
                        <button onclick="openModal()" class="bg-pink-600 text-white px-5 py-2 rounded-full font-bold hover:bg-pink-700 transition shadow-lg">
                        </a>
                            ثبت‌نام سریع
                        <ul class="dropdown-menu py-2">
                         </button>
                            <li><a href="/wiki/شرایط_سن_و_جسمانی" class="block px-4 py-2 text-gray-700 hover:bg-pink-50 hover:text-pink-600">شرایط سن و جسمانی</a></li>
                            <li><a href="/wiki/ممنوعیت‌های_پزشکی" class="block px-4 py-2 text-gray-700 hover:bg-pink-50 hover:text-pink-600">ممنوعیت‌های پزشکی</a></li>
                            <li><a href="/wiki/سوالات_متداول" class="block px-4 py-2 text-gray-700 hover:bg-pink-50 hover:text-pink-600">سوالات متداول</a></li>
                            <li><a href="/wiki/ضوابط_شرعی" class="block px-4 py-2 text-gray-700 hover:bg-pink-50 hover:text-pink-600">ضوابط شرعی</a></li>
                         </ul>
                     </li>
                     </li>
                    <li><a href="/wiki/استعلام_هزینه" class="text-gray-700 hover:text-pink-600">استعلام هزینه</a></li>
                    <li><a href="/wiki/مناطق_خدماتی" class="text-gray-700 hover:text-pink-600">مناطق و شهرها</a></li>
                 </ul>
                 </ul>
            </nav>
        </div>


        <!-- محتوای صفحه اصلی (نمونه) -->
                <!-- دکمه ثبت‌نام (موبایل و دسکتاپ) -->
        <section class="max-w-4xl mx-auto py-20 px-6 text-center text-gray-600">
                <div class="flex items-center">
            <h2 class="text-2xl font-bold text-gray-800 mb-4">خوش آمدید</h2>
                    <button onclick="openModal()" class="bg-pink-600 text-white px-5 py-2 rounded-full font-bold hover:bg-pink-700 transition shadow-md text-sm md:text-base">
            <p>این بخش محتوای سایت شماست که هنگام باز شدن فرم، مات خواهد شد.</p>
                        ثبت‌نام سریع
             <div class="mt-10 grid grid-cols-1 md:grid-cols-3 gap-6">
                    </button>
                <div class="p-6 bg-white rounded-xl shadow">بخش اطلاعات ۱</div>
                </div>
                <div class="p-6 bg-white rounded-xl shadow">بخش اطلاعات ۲</div>
             </ul>
                <div class="p-6 bg-white rounded-xl shadow">بخش اطلاعات ۳</div>
        </nav>
            </div>
    </header>
        </section>
 
     </div>
    <!-- بخش محتوای خالی (فقط برای اینکه صفحه سفید نباشد) -->
    <main class="p-10 text-center text-gray-400">
        <p>محتوای اصلی سایت شما در اینجا قرار می‌گیرد...</p>
     </main>


     <!-- MODAL: پنجره ثبت‌نام -->
     <!-- MODAL: پنجره ثبت‌نام (بدون تغییر در منطق قبلی) -->
     <div id="registrationModal">
     <div id="registrationModal">
        <!-- لایه پس‌زمینه مات -->
         <div class="modal-overlay" onclick="closeModal()"></div>
         <div class="modal-overlay" onclick="closeModal()"></div>
        <!-- کانتینر فرم -->
         <div class="modal-content relative bg-white max-w-xl mx-auto my-10 md:my-20 rounded-2xl shadow-2xl overflow-hidden">
         <div class="modal-content relative bg-white max-w-xl mx-auto my-10 md:my-20 rounded-2xl shadow-2xl overflow-hidden">
           
             <button onclick="closeModal()" class="absolute top-4 left-4 text-gray-400 hover:text-pink-600 text-3xl z-50">&times;</button>
            <!-- دکمه بستن -->
             <button onclick="closeModal()" class="absolute top-4 left-4 text-gray-400 hover:text-pink-600 text-2xl font-bold z-50">
                &times;
            </button>
 
             <div class="p-6 md:p-10">
             <div class="p-6 md:p-10">
                 <div class="text-center mb-8">
                 <div class="text-center mb-8">
خط ۱۴۰: خط ۱۵۰:
                 </div>
                 </div>


                <!-- Progress Bar -->
                 <div class="w-full bg-gray-100 h-1.5 rounded-full mb-8">
                 <div class="w-full bg-gray-100 h-1.5 rounded-full mb-8">
                     <div id="progressBar" class="bg-pink-500 h-1.5 rounded-full transition-all duration-500" style="width: 25%;"></div>
                     <div id="progressBar" class="bg-pink-500 h-1.5 rounded-full transition-all duration-500" style="width: 25%;"></div>
خط ۱۴۶: خط ۱۵۵:


                 <form id="multiStepForm">
                 <form id="multiStepForm">
                   
                     <!-- مرحله ۱ -->
                     <!-- مرحله ۱: نوع همکاری -->
                     <div class="step-card active" id="step1">
                     <div class="step-card active" id="step1">
                         <h3 class="text-lg font-bold mb-5">۱. نوع همکاری مورد نظر:</h3>
                         <h3 class="text-lg font-bold mb-5">۱. نوع همکاری مورد نظر:</h3>
خط ۱۶۷: خط ۱۷۵:
                     </div>
                     </div>


                     <!-- مرحله ۲: مشخصات -->
                     <!-- مرحله ۲ -->
                     <div class="step-card" id="step2">
                     <div class="step-card" id="step2">
                         <h3 class="text-lg font-bold mb-5">۲. مشخصات فردی:</h3>
                         <h3 class="text-lg font-bold mb-5">۲. مشخصات فردی:</h3>
خط ۱۸۴: خط ۱۹۲:
                     </div>
                     </div>


                     <!-- مرحله ۳: سلامت -->
                     <!-- مرحله ۳ -->
                     <div class="step-card" id="step3">
                     <div class="step-card" id="step3">
                         <h3 class="text-lg font-bold mb-5">۳. بررسی سلامت (بسیار مهم):</h3>
                         <h3 class="text-lg font-bold mb-5">۳. بررسی سلامت (بسیار مهم):</h3>
خط ۱۹۱: خط ۱۹۹:
                             <label class="flex items-center"><input type="checkbox" class="ml-2"> در حال مصرف دارو یا قرص اورژانسی نیستم</label>
                             <label class="flex items-center"><input type="checkbox" class="ml-2"> در حال مصرف دارو یا قرص اورژانسی نیستم</label>
                             <label class="flex items-center"><input type="checkbox" class="ml-2"> سابقه خودزنی بر روی پوست ندارم</label>
                             <label class="flex items-center"><input type="checkbox" class="ml-2"> سابقه خودزنی بر روی پوست ندارم</label>
                             <label class="flex items-center"><input type="checkbox" class="ml-2"> (مخصوص رحم جایگزین) سابقه زایمان دارم</label>
                             <label class="flex items-center"><input type="checkbox" class="ml-2">(مخصوص رحم جایگزین) سابقه زایمان دارم</label>
                         </div>
                         </div>
                         <div class="flex gap-3 mt-8">
                         <div class="flex gap-3 mt-8">
خط ۱۹۹: خط ۲۰۷:
                     </div>
                     </div>


                     <!-- مرحله ۴: تماس -->
                     <!-- مرحله ۴ -->
                     <div class="step-card" id="step4">
                     <div class="step-card" id="step4">
                         <h3 class="text-lg font-bold mb-5">۴. تایید نهایی:</h3>
                         <h3 class="text-lg font-bold mb-5">۴. تایید نهایی:</h3>
                         <div class="space-y-4">
                         <div class="space-y-4">
                             <input type="tel" placeholder="شماره موبایل جهت تماس کارشناس" class="w-full p-3 border rounded-lg outline-none focus:ring-2 focus:ring-pink-400">
                             <input type="tel" placeholder="شماره موبایل جهت تماس کارشناس" class="w-full p-3 border rounded-lg outline-none focus:ring-2 focus:ring-pink-400">
                             <p class="text-xs text-gray-500 leading-relaxed">
                             <p class="text-xs text-gray-500 leading-relaxed">با ثبت درخواست، شما تایید می‌کنید که تمامی اطلاعات ارائه شده صحیح است.</p>
                                با ثبت درخواست، شما تایید می‌کنید که تمامی اطلاعات ارائه شده صحیح است و با قوانین قرارداد محضری مطابقت دارد.
                            </p>
                         </div>
                         </div>
                         <div class="flex gap-3 mt-8">
                         <div class="flex gap-3 mt-8">
خط ۲۱۳: خط ۲۱۹:
                         </div>
                         </div>
                     </div>
                     </div>
                 </form>
                 </form>
             </div>
             </div>
خط ۲۲۰: خط ۲۲۵:


     <script>
     <script>
         // مدیریت باز و بسته شدن مودال
         // مدیریت Modal
         const modal = document.getElementById('registrationModal');
         const modal = document.getElementById('registrationModal');
        const mainContent = document.getElementById('mainContent');


         function openModal() {
         function openModal() {
             modal.style.display = 'block';
             modal.style.display = 'block';
             document.body.style.overflow = 'hidden'; // جلوگیری از اسکرول صفحه اصلی
             document.body.style.overflow = 'hidden';
         }
         }


         function closeModal() {
         function closeModal() {
             modal.style.display = 'none';
             modal.style.display = 'none';
             document.body.style.overflow = 'auto'; // فعال کردن مجدد اسکرول
             document.body.style.overflow = 'auto';
         }
         }


         // مدیریت مراحل فرم
         // مدیریت مراحل فرم
         function nextStep(step) {
         function nextStep(step) {
            // پنهان کردن همه مراحل
             document.querySelectorAll('.step-card').forEach(card => card.classList.remove('active'));
             document.querySelectorAll('.step-card').forEach(card => {
                card.classList.remove('active');
            });
           
            // نمایش مرحله جدید
             document.getElementById('step' + step).classList.add('active');
             document.getElementById('step' + step).classList.add('active');
 
             document.getElementById('progressBar').style.width = (step * 25) + '%';
            // آپدیت نوار پیشرفت
            const progress = step * 25;
             document.getElementById('progressBar').style.width = progress + '%';
         }
         }


        // مدیریت ارسال فرم
         document.getElementById('multiStepForm').onsubmit = function(e) {
         document.getElementById('multiStepForm').onsubmit = function(e) {
             e.preventDefault();
             e.preventDefault();
             alert('درخواست شما با موفقیت ثبت شد. کارشناسان ما به زودی با شما تماس می‌گیرند.');
             alert('درخواست شما با موفقیت ثبت شد.');
             closeModal();
             closeModal();
         };
         };


        // بستن با کلیک روی دکمه Esc
         document.addEventListener('keydown', (e) => { if (e.key === "Escape") closeModal(); });
         document.addEventListener('keydown', function(e) {
            if (e.key === "Escape") closeModal();
        });
     </script>
     </script>
</body>
</body>
</html>
</html>

نسخهٔ ‏۱ اوت ۲۰۲۶، ساعت ۱۴:۲۰

<!DOCTYPE html> خدمات تخصصی سلامت بانوان | ثبت‌نام آنلاین

محتوای اصلی سایت شما در اینجا قرار می‌گیرد...

فرم ثبت‌نام همکاری

لطفاً اطلاعات خود را با دقت وارد کنید

۱. نوع همکاری مورد نظر:

۲. مشخصات فردی:

۳. بررسی سلامت (بسیار مهم):

۴. تایید نهایی:

با ثبت درخواست، شما تایید می‌کنید که تمامی اطلاعات ارائه شده صحیح است.

برگرفته از «https://fa.faraghaib.ir/w/index.php?title=الگو:منو_اصلی/بخشنده&oldid=4761»