فراغیب

الگو:منو اصلی/بخشنده: تفاوت میان نسخه‌ها

→ تفاوت با ویرایش قدیمی‌ترتفاوت با ویرایش جدیدتر ←
دیداریویکی‌متن
بدون خلاصۀ ویرایش
بدون خلاصۀ ویرایش
برچسب: برگردانده‌شده
خط ۱: خط ۱:
<html>
<style>
/* جلوگیری از رفتن محتوا زیر منوی ثابت */


<html lang="fa" dir="rtl">
body{
<head>
     padding-top:64px;
     <meta charset="UTF-8">
}
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>خدمات تخصصی سلامت بانوان | ثبت‌نام آنلاین</title>
    <meta name="description" content="ثبت‌نام سریع برای اهدای تخمک، رحم جایگزین و جنین با رعایت کامل ضوابط پزشکی و شرعی.">
   
    <script src="https://cdn.tailwindcss.com"></script>
   
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@100;400;700&display=swap');
       
        :root {
            --primary-color: #db2777;
        }


        body {
/* منوی تمام عرض */
            font-family: 'Vazirmatn', sans-serif;
            margin: 0;
            padding:1px 0 0 0;
        }


        /* اصلاح مشکل زیرمنوها */
header{
        .dropdown-menu {
    width:100%;
            display: none;
    top:0;
            position: absolute;
    left:0;
            top: 100%;
    right:0;
            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;
        }


        /* نمایش زیرمنو فقط هنگام هاور روی والد */
/* منوی دسکتاپ */
        .group:hover .dropdown-menu {
            display: block;
        }


        /* استایل Modal */
@media (min-width:768px){
        #registrationModal {
            display: none;
            position: fixed;
            inset: 0;
            z-index: 9999;
            overflow-y: auto;
        }


        .modal-overlay {
    header{
            position: fixed;
        display:block;
            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; }
@media (max-width:767px){
        .step-card.active { display: block; }


        @media (max-width: 768px) {
    header{
            .modal-content {
        display:none;
                width: 100%;
    }
                height: 100%;
                border-radius: 0;
                margin: 0 !important;
            }
        }
    </style>
</head>
<body class="bg-gray-50">


     <!-- بخش منوی اصلی (فقط منو باقی مانده است) -->
     body{
    <header class="bg-white shadow-md sticky top-0 z-40">
        padding-top:0;
        <nav class="max-w-6xl mx-auto px-4" aria-label="منوی اصلی">
    }
            <ul class="flex items-center justify-between h-16">
                <!-- لوگو یا نام سایت در سمت راست (اختیاری) -->
                <li class="font-bold text-pink-600 text-xl">اهدای مثبت بخشنده</li>


                <!-- لیست لینک‌ها -->
}
                <ul class="hidden md:flex items-center space-x-reverse space-x-6 h-full">
 
                    <li class="h-full flex items-center"><a href="#" class="text-gray-700 hover:text-pink-600 transition">اصلی</a></li>
/* بهبود سئو و دسترسی */
                   
 
                    <!-- زیرمنوی انواع خدمات -->
nav ul{
                    <li class="relative group h-full flex items-center">
    list-style:none;
                         <a href="#" class="text-gray-700 group-hover:text-pink-600 flex items-center h-full">
    margin:0;
                             انواع خدمات اهدایی
    padding:0;
                            <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>
}
 
nav a{
    text-decoration:none;
    white-space:nowrap;
}
 
.dropdown-menu{
    min-width:220px;
}
</style>
 
<!-- =========================
    HEADER / MAIN MENU
========================= -->
<header
    class="fixed top-0 left-0 right-0 z-50 bg-white shadow-md border-b border-gray-100">
 
    <nav
        class="w-full"
        aria-label="منوی اصلی">
 
        <div class="max-w-7xl mx-auto px-5">
 
            <div class="hidden md:flex items-center justify-between h-16">
 
                <!-- لوگو -->
                <div class="font-bold text-pink-600 text-xl whitespace-nowrap">
                    اهدای مثبت بخشنده
                </div>
 
                <!-- منو -->
                <ul class="flex items-center gap-7 h-full">
 
                    <li>
                         <a href="#"
                          class="text-gray-700 hover:text-pink-600 transition-colors duration-200">
                             اصلی
                         </a>
                         </a>
                    </li>
                    <!-- انواع خدمات -->
                    <li class="relative group">
                        <a href="#"
                          class="flex items-center text-gray-700 hover:text-pink-600 transition-colors">
                            انواع خدمات اهدایی
                            <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"/>
                            </svg>
                        </a>
                         <ul class="dropdown-menu py-2">
                         <ul class="dropdown-menu py-2">
                             <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>
                             <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>
                         </ul>
                     </li>
                     </li>


                     <!-- زیرمنوی شرایط و ضوابط -->
                     <!-- شرایط -->
                     <li class="relative group h-full flex items-center">
                     <li class="relative group">
                         <a href="#" class="text-gray-700 group-hover:text-pink-600 flex items-center h-full">
 
                         <a href="#"
                          class="flex items-center text-gray-700 hover:text-pink-600 transition-colors">
 
                             شرایط و ضوابط
                             شرایط و ضوابط
                             <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>
 
                             <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"/>
 
                            </svg>
 
                         </a>
                         </a>
                         <ul class="dropdown-menu py-2">
                         <ul class="dropdown-menu py-2">
                             <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>
                             <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>
                         </ul>
                     </li>
                     </li>


                     <li><a href="/wiki/استعلام_هزینه" class="text-gray-700 hover:text-pink-600">استعلام هزینه</a></li>
                     <li>
                     <li><a href="/wiki/مناطق_خدماتی" class="text-gray-700 hover:text-pink-600">مناطق و شهرها</a></li>
                        <a href="/wiki/استعلام_هزینه"
                </ul>
                          class="text-gray-700 hover:text-pink-600 transition-colors">
                            استعلام هزینه
                        </a>
                     </li>


                <!-- دکمه ثبت‌نام (موبایل و دسکتاپ) -->
                    <li>
                <div class="flex items-center">
                        <a href="/wiki/مناطق_خدماتی"
                    <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">
                          class="text-gray-700 hover:text-pink-600 transition-colors">
                         ثبت‌نام سریع
                            مناطق و شهرها
                    </button>
                         </a>
                </div>
                    </li>
            </ul>
        </nav>
    </header>


    <!-- بخش محتوای خالی (فقط برای اینکه صفحه سفید نباشد) -->
                </ul>
    <main class="p-10 text-center text-gray-400">
        <p></p>
    </main>


    <!-- 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-3xl z-50">&times;</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 class="w-full bg-gray-100 h-1.5 rounded-full mb-8">
                 <button
                     <div id="progressBar" class="bg-pink-500 h-1.5 rounded-full transition-all duration-500" style="width: 25%;"></div>
                    onclick="openModal()"
                </div>
                     class="bg-pink-600 hover:bg-pink-700 text-white px-5 py-2 rounded-full font-bold shadow transition">


                <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>


                    <!-- مرحله ۲ -->
                </button>
                    <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>
                    <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>
    </div>
    <script>
        // مدیریت Modal
        const modal = document.getElementById('registrationModal');
        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');
            document.getElementById('progressBar').style.width = (step * 25) + '%';
        }


        document.getElementById('multiStepForm').onsubmit = function(e) {
    </nav>
            e.preventDefault();
            alert('درخواست شما با موفقیت ثبت شد.');
            closeModal();
        };


        document.addEventListener('keydown', (e) => { if (e.key === "Escape") closeModal(); });
</header>
    </script>
</body>
</html>
</html>
برگرفته از «https://fa.faraghaib.ir/wiki/الگو:منو_اصلی/بخشنده»