|
|
| (۱۲ نسخهٔ میانیِ ایجادشده توسط همین کاربر نشان داده نشد) |
| خط ۳: |
خط ۳: |
| <head> | | <head> |
| <meta charset="UTF-8"> | | <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0">
| | <title>منوی دسکتاپ واکنشگرا</title> |
| <title>خدمات تخصصی اهدای تخمک و رحم | ثبتنام آنلاین</title> | |
| <meta name="description" content="ثبتنام سریع برای اهدای تخمک، رحم جایگزین و جنین با رعایت کامل ضوابط پزشکی و شرعی.">
| |
|
| |
| <!-- استفاده از Tailwind برای سرعت و ریسپانسیو بودن فوقالعاده -->
| |
| <script src="https://cdn.tailwindcss.com"></script>
| |
|
| |
| <style> | | <style> |
| @import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@100;400;700&display=swap'); | | /* تعریف فونت ایران سنس */ |
|
| | @font-face { |
| :root {
| | font-family: 'Iransans'; |
| --primary-color: #db2777; | | font-weight: normal; |
| --primary-hover: #be185d; | | font-style: normal; |
| } | | } |
|
| |
|
| body { | | /* تنظیمات کلی منو */ |
| font-family: 'Vazirmatn', sans-serif; | | body { margin: 0; padding: 0; } /* اطمینان از نبود padding/margin پیشفرض */ |
| overflow-x: hidden; | | |
| | .desktop-nav { |
| | font-family: 'Iransans', Tahoma, Arial, sans-serif; /* اولویت با ایران سنس */ |
| | background: #fff; |
| | padding: 10px 50px; |
| | box-shadow: 0 2px 5px rgba(0,0,0,0.05); |
| | display: block; /* همیشه نمایش داده شود تا Media Query آن را کنترل کند */ |
| } | | } |
|
| |
|
| /* استایل منو */ | | .menu-wrapper { |
| .poly-nav a {
| | display: flex; |
| transition: all 0.3s ease; | | align-items: center; |
| | justify-content: flex-end; /* چیدمان از راست */ |
| | list-style: none; |
| | margin: 0; |
| | padding: 0; |
| | gap: 30px; |
| } | | } |
|
| |
|
| /* استایل Modal (پنجره فرم) */ | | .menu-item { position: relative; cursor: pointer; } |
| #registrationModal { | | .menu-item > a { text-decoration: none; color: #444; font-size: 14px; font-weight: 600; } |
| display: none; /* در حالت عادی مخفی است */ | | |
| position: fixed; | | /* استایل زیرمنوها */ |
| inset: 0; | | .submenu { |
| z-index: 9999; | | display: none; |
| overflow-y: auto; | | position: absolute; |
| | top: 100%; |
| | right: 0; |
| | background: #fff; |
| | box-shadow: 0 8px 16px rgba(0,0,0,0.1); |
| | padding: 10px 0; |
| | width: 180px; |
| | border-radius: 5px; |
| | z-index: 1000; |
| } | | } |
|
| |
|
| /* لایه مات پشت فرم */
| | .submenu li { list-style: none; padding: 8px 15px; } |
| .modal-overlay { | | .submenu li a { text-decoration: none; color: #555; font-size: 13px; } |
| position: fixed;
| | .submenu li:hover { background: #f9f9f9; } |
| inset: 0;
| |
| background: rgba(0, 0, 0, 0.6);
| |
| backdrop-filter: blur(8px); /* ایجاد حالت مات کردن صفحه اصلی */
| |
| z-index: -1;
| |
| } | |
|
| |
|
| /* انیمیشن ورود فرم */ | | /* استایل دکمه ثبتنام */ |
| .modal-content { | | .btn-signup { |
| animation: slideUp 0.4s ease-out; | | background-color: #e91e63; |
| | color: #fff !important; |
| | padding: 10px 25px; |
| | border-radius: 30px; |
| | transition: all 0.3s; |
| } | | } |
| | .btn-signup:hover { background-color: #c2185b; } |
|
| |
|
| @keyframes slideUp { | | /* --- تغییرات برای موبایل --- */ |
| from { transform: translateY(50px); opacity: 0; } | | /* Media Query برای موبایل و تبلت: منو را مخفی میکند */ |
| to { transform: translateY(0); opacity: 1; } | | @media (max-width: 1024px) { |
| | .desktop-nav { |
| | display: none !important; /* منو را کاملاً مخفی میکند */ |
| | } |
| | /* اگر بخواهید در موبایل المان دیگری نمایش داده شود، اینجا اضافه کنید */ |
| } | | } |
|
| |
|
| /* استایل مراحل فرم */ | | /* Media Query برای دسکتاپ: منو را نمایش میدهد */ |
| .step-card { display: none; }
| | @media (min-width: 1024px) { |
| .step-card.active { display: block; }
| | .desktop-nav { |
| | | display: block !important; /* اطمینان از نمایش در دسکتاپ */ |
| /* حذف انیمیشن در موبایل برای سرعت بیشتر */
| |
| @media (max-width: 768px) { | |
| .modal-content { | |
| width: 100%; | |
| height: 100%;
| |
| border-radius: 0;
| |
| } | | } |
| } | | } |
| </style> | | </style> |
| </head> | | </head> |
| <body class="bg-gray-50"> | | <body> |
| | |
| <!-- محتوای فرضی صفحه اصلی (برای تست مات شدن) -->
| |
| <div id="mainContent">
| |
| <header class="bg-gradient-to-r from-pink-500 to-rose-400 py-12 text-white text-center">
| |
| <h1 class="text-3xl font-bold">پورتال خدمات تخصصی سلامت بانوان</h1>
| |
| <p class="mt-2 opacity-90">با رعایت کامل فتاوای مراجع تقلید و پروتکلهای پزشکی</p>
| |
| </header>
| |
|
| |
|
| <!-- منوی اصلی -->
| | <!-- منوی ناوبری دسکتاپ --> |
| <div class="poly-menu-container bg-white shadow-md sticky top-0 z-40">
| | <nav class="desktop-nav"> |
| <nav class="poly-nav max-w-6xl mx-auto" aria-label="منوی اصلی">
| | <ul class=" menu- wrapper"> |
| <ul class=" flex flex-wrap justify-center items-center py- 2"> | | <li><a href="#">اصلی</a></li> |
| <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">
| |
| خدمات اهدایی ▾
| |
| </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">
| |
| <li><a href="#" class="block px-4 py-2 hover:bg-pink-50">اهدای تخمک</a></li>
| |
| <li><a href="#" class="block px-4 py-2 hover:bg-pink-50">رحم جایگزین</a></li>
| |
| <li><a href="#" class="block px-4 py-2 hover:bg-pink-50">اهدای جنین</a></li>
| |
| </ul>
| |
| </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="menu-item" onmouseover="showSub(this)" onmouseout="hideSub(this)"> |
|
| | <a> انواع خدمات اهدایی ▾</ a> |
| <!-- دکمه اصلی برای باز کردن فرم -->
| | <ul class="submenu"> |
| <li class="px-3">
| | <li><a href="#"> اهدای تخمک</a></li> |
| <button onclick="openModal()" class="bg-pink-600 text-white px-5 py-2 rounded-full font-bold hover:bg-pink-700 transition shadow-lg">
| | <li><a href="#">رحم جایگزین</a></li> |
| ثبتنام سریع
| | <li><a href="#">اهدای جنین</a></li> |
| </button>
| | </ul> |
| </li>
| | </li> |
| </ul>
| |
| </nav>
| |
| </div> | |
|
| |
|
| <!-- محتوای صفحه اصلی (نمونه) --> | | <!-- شرایط و ضوابط --> |
| <section class="max-w-4xl mx-auto py-20 px-6 text-center text-gray-600"> | | <li class="menu-item" onmouseover="showSub(this)" onmouseout="hideSub(this)"> |
| <h2 class="text-2xl font-bold text-gray-800 mb-4">خوش آمدید</h2>
| | <a>شرایط و ضوابط ▾</a> |
| <p>این بخش محتوای سایت شماست که هنگام باز شدن فرم، مات خواهد شد.</p> | | <ul class="submenu"> |
| <div class="mt-10 grid grid-cols-1 md:grid-cols-3 gap-6"> | | <li><a href="#">شرایط سن و جسمانی</a></li> |
| <div class="p-6 bg-white rounded-xl shadow">بخش اطلاعات ۱</div> | | <li><a href="#">ممنوعیتهای پزشکی</a></li> |
| <div class="p-6 bg-white rounded-xl shadow">بخش اطلاعات ۲</div> | | <li><a href="#">سوالات متداول</a></li> |
| <div class="p-6 bg-white rounded-xl shadow">بخش اطلاعات ۳</div> | | <li><a href="#">ضوابط شرعی</a></li> |
| </div>
| | </ul> |
| </section>
| | </li> |
| </div>
| |
|
| |
|
| <!-- MODAL: پنجره ثبتنام -->
| | <li><a href="#">استعلام هزینه</a></li> |
| <div id="registrationModal">
| | <li><a href="#">مناطق و شهرها</a></li> |
| <!-- لایه پسزمینه مات --> | | <li><a href="#" class="btn-signup">ثبتنام سریع</a></li> |
| <div class="modal-overlay" onclick="closeModal()"></div> | | </ul> |
| | </nav> |
|
| |
|
| <!-- کانتینر فرم -->
| | <script> |
| <div class="modal-content relative bg-white max-w-xl mx-auto my-10 md:my-20 rounded-2xl shadow-2xl overflow-hidden">
| | // تابع ساده برای نمایش زیرمنو |
|
| | function showSub(el) { |
| <!-- دکمه بستن -->
| | // اطمینان از اینکه زیرمنو فقط در صورتی نمایش داده شود که صفحه به اندازه کافی بزرگ باشد |
| <button onclick="closeModal()" class="absolute top-4 left-4 text-gray-400 hover:text-pink-600 text-2xl font-bold z-50">
| | if (window.innerWidth > 1024) { |
| ×
| | el.querySelector('.submenu').style.display = 'block'; |
| </button>
| |
| | |
| <div class="p-6 md:p-10">
| |
| <div class="text-center mb-8">
| |
| <h2 class="text-2xl font-bold text-pink-600">فرم ثبتنام همکاری</h2>
| |
| <p class="text-sm text-gray-500 mt-1">لطفاً اطلاعات خود را با دقت وارد کنید</p>
| |
| </div>
| |
| | |
| <!-- Progress Bar -->
| |
| <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>
| |
| | |
| <form id="multiStepForm">
| |
|
| |
| <!-- مرحله ۱: نوع همکاری -->
| |
| <div class="step-card active" id="step1">
| |
| <h3 class="text-lg font-bold mb-5">۱. نوع همکاری مورد نظر:</h3>
| |
| <div class="space-y-3">
| |
| <label class="flex items-center p-4 border rounded-xl cursor-pointer hover:border-pink-400 transition">
| |
| <input type="radio" name="service" value="egg" class="w-5 h-5 text-pink-600">
| |
| <span class="mr-3 font-medium">اهدای تخمک</span>
| |
| </label>
| |
| <label class="flex items-center p-4 border rounded-xl cursor-pointer hover:border-pink-400 transition">
| |
| <input type="radio" name="service" value="surrogacy" class="w-5 h-5 text-pink-600">
| |
| <span class="mr-3 font-medium">رحم جایگزین</span>
| |
| </label>
| |
| <label class="flex items-center p-4 border rounded-xl cursor-pointer hover:border-pink-400 transition">
| |
| <input type="radio" name="service" value="embryo" class="w-5 h-5 text-pink-600">
| |
| <span class="mr-3 font-medium">اهدای جنین</span>
| |
| </label>
| |
| </div>
| |
| <button type="button" onclick="nextStep(2)" class="w-full mt-8 bg-pink-600 text-white py-3 rounded-xl font-bold">مرحله بعد</button>
| |
| </div>
| |
| | |
| <!-- مرحله ۲: مشخصات -->
| |
| <div class="step-card" id="step2">
| |
| <h3 class="text-lg font-bold mb-5">۲. مشخصات فردی:</h3>
| |
| <div class="space-y-4">
| |
| <input type="text" placeholder="نام و نام خانوادگی" class="w-full p-3 border rounded-lg outline-none focus:ring-2 focus:ring-pink-400">
| |
| <div class="grid grid-cols-2 gap-3">
| |
| <input type="number" placeholder="سن" class="w-full p-3 border rounded-lg outline-none focus:ring-2 focus:ring-pink-400">
| |
| <input type="text" placeholder="قد (سانتیمتر)" class="w-full p-3 border rounded-lg outline-none focus:ring-2 focus:ring-pink-400">
| |
| </div>
| |
| <input type="text" placeholder="شهر محل سکونت" class="w-full p-3 border rounded-lg outline-none focus:ring-2 focus:ring-pink-400">
| |
| </div>
| |
| <div class="flex gap-3 mt-8">
| |
| <button type="button" onclick="nextStep(1)" class="w-1/2 py-3 bg-gray-100 rounded-xl font-bold text-gray-600">بازگشت</button>
| |
| <button type="button" onclick="nextStep(3)" class="w-1/2 py-3 bg-pink-600 text-white rounded-xl font-bold">مرحله بعد</button>
| |
| </div>
| |
| </div>
| |
| | |
| <!-- مرحله ۳: سلامت -->
| |
| <div class="step-card" id="step3">
| |
| <h3 class="text-lg font-bold mb-5">۳. بررسی سلامت (بسیار مهم):</h3>
| |
| <div class="space-y-3 text-sm text-gray-700">
| |
| <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 class="flex gap-3 mt-8">
| |
| <button type="button" onclick="nextStep(2)" class="w-1/2 py-3 bg-gray-100 rounded-xl font-bold text-gray-600">بازگشت</button>
| |
| <button type="button" onclick="nextStep(4)" class="w-1/2 py-3 bg-pink-600 text-white rounded-xl font-bold">مرحله بعد</button>
| |
| </div>
| |
| </div>
| |
| | |
| <!-- مرحله ۴: تماس -->
| |
| <div class="step-card" id="step4">
| |
| <h3 class="text-lg font-bold mb-5">۴. تایید نهایی:</h3>
| |
| <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">
| |
| <p class="text-xs text-gray-500 leading-relaxed">
| |
| با ثبت درخواست، شما تایید میکنید که تمامی اطلاعات ارائه شده صحیح است و با قوانین قرارداد محضری مطابقت دارد.
| |
| </p>
| |
| </div>
| |
| <div class="flex gap-3 mt-8">
| |
| <button type="button" onclick="nextStep(3)" class="w-1/2 py-3 bg-gray-100 rounded-xl font-bold text-gray-600">بازگشت</button>
| |
| <button type="submit" class="w-1/2 py-3 bg-green-600 text-white rounded-xl font-bold">ارسال درخواست</button>
| |
| </div>
| |
| </div>
| |
| | |
| </form>
| |
| </div> | |
| </div>
| |
| </div>
| |
| | |
| <script>
| |
| // مدیریت باز و بسته شدن مودال
| |
| const modal = document.getElementById('registrationModal');
| |
| const mainContent = document.getElementById('mainContent');
| |
| | |
| function openModal() {
| |
| modal.style.display = 'block';
| |
| document.body.style.overflow = 'hidden'; // جلوگیری از اسکرول صفحه اصلی
| |
| } | | } |
| | } |
| | // تابع برای مخفی کردن زیرمنو |
| | function hideSub(el) { |
| | el.querySelector('.submenu').style.display = 'none'; |
| | } |
|
| |
|
| function closeModal() { | | // یک رویداد listener اضافه میکنیم که اگر اندازه صفحه تغییر کرد، وضعیت نمایش زیرمنو را بررسی کند |
| modal.style.display = 'none'; | | window.addEventListener('resize', () => { |
| document.body.style.overflow = 'auto'; // فعال کردن مجدد اسکرول
| | // اگر اندازه صفحه کوچکتر از ۱۰۲۴ پیکسل شد، اطمینان حاصل کنیم که هیچ زیرمنویی باز نماند |
| | if (window.innerWidth <= 1024) { |
| | document.querySelectorAll('.submenu').forEach(sub => sub.style.display = 'none'); |
| } | | } |
| | }); |
| | </script> |
|
| |
|
| // مدیریت مراحل فرم
| |
| function nextStep(step) {
| |
| // پنهان کردن همه مراحل
| |
| document.querySelectorAll('.step-card').forEach(card => {
| |
| card.classList.remove('active');
| |
| });
| |
|
| |
| // نمایش مرحله جدید
| |
| document.getElementById('step' + step).classList.add('active');
| |
|
| |
| // آپدیت نوار پیشرفت
| |
| const progress = step * 25;
| |
| document.getElementById('progressBar').style.width = progress + '%';
| |
| }
| |
|
| |
| // مدیریت ارسال فرم
| |
| document.getElementById('multiStepForm').onsubmit = function(e) {
| |
| e.preventDefault();
| |
| alert('درخواست شما با موفقیت ثبت شد. کارشناسان ما به زودی با شما تماس میگیرند.');
| |
| closeModal();
| |
| };
| |
|
| |
| // بستن با کلیک روی دکمه Esc
| |
| document.addEventListener('keydown', function(e) {
| |
| if (e.key === "Escape") closeModal();
| |
| });
| |
| </script>
| |
| </body> | | </body> |
| </html> | | </html> |