الگو:منو اصلی/بخشنده: تفاوت میان نسخهها
بدون خلاصۀ ویرایش |
بدون خلاصۀ ویرایش |
||
| خط ۴: | خط ۴: | ||
<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> | ||
<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'); | ||
:root { | :root { | ||
--primary-color: #db2777; | --primary-color: #db2777; | ||
-- | --primary-hover: #be185d; | ||
} | } | ||
body { | body { | ||
font-family: 'Vazirmatn', sans-serif; | |||
font-family: ' | overflow-x: hidden; | ||
} | } | ||
/* استایل منو */ | |||
.poly-nav a { | .poly-nav a { | ||
transition: all 0.3s ease; | transition: all 0.3s ease; | ||
} | } | ||
/* استایل Modal (پنجره فرم) */ | |||
#registrationModal { | |||
display: none; /* در حالت عادی مخفی است */ | |||
position: fixed; | |||
inset: 0; | |||
z-index: 9999; | |||
overflow-y: auto; | |||
} | } | ||
/* | /* لایه مات پشت فرم */ | ||
. | .modal-overlay { | ||
position: fixed; | |||
inset: 0; | |||
background: rgba(0, 0, 0, 0.6); | |||
backdrop-filter: blur(8px); /* ایجاد حالت مات کردن صفحه اصلی */ | |||
z-index: -1; | |||
} | } | ||
/* انیمیشن ورود فرم */ | |||
.modal-content { | |||
animation: slideUp 0.4s ease-out; | |||
} | } | ||
@keyframes slideUp { | |||
from { transform: translateY(50px); opacity: 0; } | |||
to { transform: translateY(0); opacity: 1; } | |||
} | } | ||
. | /* استایل مراحل فرم */ | ||
.step-card { display: none; } | |||
} | .step-card.active { display: block; } | ||
/* | /* حذف انیمیشن در موبایل برای سرعت بیشتر */ | ||
@media (max-width: 768px) { | @media (max-width: 768px) { | ||
. | .modal-content { | ||
width: 100%; | width: 100%; | ||
height: 100%; | |||
border-radius: 0; | |||
} | } | ||
} | } | ||
</style> | </style> | ||
</head> | </head> | ||
<body> | <body class="bg-gray-50"> | ||
<!-- محتوای فرضی صفحه اصلی (برای تست مات شدن) --> | |||
<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"> | <!-- منوی اصلی --> | ||
<div class="poly-menu-container bg-white shadow-md sticky top-0 z-40"> | |||
<nav class="poly-nav max-w-6xl mx-auto" aria-label="منوی اصلی"> | |||
<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"> | |||
خدمات اهدایی ▾ | |||
</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="px-3"> | |||
<button onclick="openModal()" class="bg-pink-600 text-white px-5 py-2 rounded-full font-bold hover:bg-pink-700 transition shadow-lg"> | |||
ثبتنام سریع | |||
</button> | |||
</li> | |||
</ul> | |||
</nav> | |||
</div> | |||
<!-- محتوای صفحه اصلی (نمونه) --> | |||
<section class="max-w-4xl mx-auto py-20 px-6 text-center text-gray-600"> | |||
<h2 class="text-2xl font-bold text-gray-800 mb-4">خوش آمدید</h2> | |||
<p>این بخش محتوای سایت شماست که هنگام باز شدن فرم، مات خواهد شد.</p> | |||
<div class="mt-10 grid grid-cols-1 md:grid-cols-3 gap-6"> | |||
<div class="p-6 bg-white rounded-xl shadow">بخش اطلاعات ۱</div> | |||
<div class="p-6 bg-white rounded-xl shadow">بخش اطلاعات ۲</div> | |||
<div class="p-6 bg-white rounded-xl shadow">بخش اطلاعات ۳</div> | |||
</div> | |||
</section> | |||
</div> | |||
<!-- MODAL: پنجره ثبتنام --> | |||
<div id="registrationModal"> | |||
<!-- لایه پسزمینه مات --> | |||
<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"> | |||
<!-- | <!-- دکمه بستن --> | ||
< | <button onclick="closeModal()" class="absolute top-4 left-4 text-gray-400 hover:text-pink-600 text-2xl font-bold z-50"> | ||
× | |||
</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> | </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> | </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 closeModal() { | |||
modal.style.display = 'none'; | |||
document.body.style.overflow = 'auto'; // فعال کردن مجدد اسکرول | |||
} | |||
// مدیریت مراحل فرم | |||
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> | ||