فراغیب

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

→ تفاوت با ویرایش قدیمی‌تر
دیداریویکی‌متن
بدون خلاصۀ ویرایش
بدون خلاصۀ ویرایش
 
(۸ نسخهٔ میانیِ ایجادشده توسط همین کاربر نشان داده نشد)
خط ۳: خط ۳:
<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="ثبت‌نام سریع برای اهدای تخمک، رحم جایگزین و جنین با رعایت کامل ضوابط پزشکی و شرعی.">
   
    <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;
             font-style: normal;
         }
         }


         body {  
        /* تنظیمات کلی منو */
             font-family: 'Vazirmatn', sans-serif;  
         body { margin: 0; padding: 0; } /* اطمینان از نبود padding/margin پیش‌فرض */
 
        .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 {
            display: flex;
            align-items: center;
            justify-content: flex-end; /* چیدمان از راست */
            list-style: none;
             margin: 0;
             margin: 0;
             padding: 0;
             padding: 0;
            gap: 30px;
         }
         }


         /* اصلاح مشکل زیرمنوها */
        .menu-item { position: relative; cursor: pointer; }
         .dropdown-menu {
        .menu-item > a { text-decoration: none; color: #444; font-size: 14px; font-weight: 600; }
 
         /* استایل زیرمنوها */
         .submenu {
             display: none;
             display: none;
             position: absolute;
             position: absolute;
             top: 100%;
             top: 100%;
             right: 0;
             right: 0;
            min-width: 200px;
             background: #fff;
             background-color: white;
             box-shadow: 0 8px 16px rgba(0,0,0,0.1);
             box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
             padding: 10px 0;
             border-radius: 0.5rem;
             width: 180px;
             z-index: 50;
            border-radius: 5px;
             border-top: 2px solid #db2777;
             z-index: 1000;
         }
         }


         /* نمایش زیرمنو فقط هنگام هاور روی والد */
         .submenu li { list-style: none; padding: 8px 15px; }
         .group:hover .dropdown-menu {
         .submenu li a { text-decoration: none; color: #555; font-size: 13px; }
            display: block;
         .submenu li:hover { background: #f9f9f9; }
         }


         /* استایل Modal */
         /* استایل دکمه ثبت‌نام */
         #registrationModal {
         .btn-signup {
             display: none;
             background-color: #e91e63;
             position: fixed;
             color: #fff !important;
             inset: 0;
             padding: 10px 25px;
             z-index: 9999;
             border-radius: 30px;
             overflow-y: auto;
             transition: all 0.3s;
         }
         }
        .btn-signup:hover { background-color: #c2185b; }


         .modal-overlay {
         /* --- تغییرات برای موبایل --- */
            position: fixed;
        /* Media Query برای موبایل و تبلت: منو را مخفی می‌کند */
            inset: 0;
        @media (max-width: 1024px) {
             background: rgba(0, 0, 0, 0.6);
             .desktop-nav {
             backdrop-filter: blur(8px);
                display: none !important; /* منو را کاملاً مخفی می‌کند */
             z-index: -1;
             }
             /* اگر بخواهید در موبایل المان دیگری نمایش داده شود، اینجا اضافه کنید */
         }
         }


         .modal-content {
         /* Media Query برای دسکتاپ: منو را نمایش می‌دهد */
            animation: slideUp 0.4s ease-out;
         @media (min-width: 1024px) {
        }
             .desktop-nav {
 
                 display: block !important; /* اطمینان از نمایش در دسکتاپ */
        @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) {
             .modal-content {
                 width: 100%;
                height: 100%;
                border-radius: 0;
                margin: 0 !important;
             }
             }
         }
         }
     </style>
     </style>
</head>
</head>
<body class="bg-gray-50">
<body>


    <!-- بخش منوی اصلی (فقط منو باقی مانده است) -->
<!-- منوی ناوبری دسکتاپ -->
    <header class="bg-white shadow-md sticky top-0 z-40">
<nav class="desktop-nav">
        <nav class="max-w-6xl mx-auto px-4" aria-label="منوی اصلی">
    <ul class="menu-wrapper">
            <ul class="flex items-center justify-between h-16">
        <li><a href="#">اصلی</a></li>
                <!-- لوگو یا نام سایت در سمت راست (اختیاری) -->
                <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="menu-item" onmouseover="showSub(this)" onmouseout="hideSub(this)">
                    <li class="h-full flex items-center"><a href="#" class="text-gray-700 hover:text-pink-600 transition">اصلی</a></li>
            <a>انواع خدمات اهدایی ▾</a>
                   
            <ul class="submenu">
                    <!-- زیرمنوی انواع خدمات -->
                <li><a href="#">اهدای تخمک</a></li>
                    <li class="relative group h-full flex items-center">
                <li><a href="#">رحم جایگزین</a></li>
                        <a href="#" class="text-gray-700 group-hover:text-pink-600 flex items-center h-full">
                <li><a href="#">اهدای جنین</a></li>
                            انواع خدمات اهدایی  
            </ul>
                            <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>
        </li>
                        </a>
                        <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>
                        </ul>
                    </li>


                    <!-- زیرمنوی شرایط و ضوابط -->
        <!-- شرایط و ضوابط -->
                    <li class="relative group h-full flex items-center">
        <li class="menu-item" onmouseover="showSub(this)" onmouseout="hideSub(this)">
                        <a href="#" class="text-gray-700 group-hover:text-pink-600 flex items-center h-full">
            <a>شرایط و ضوابط ▾</a>
                            شرایط و ضوابط
            <ul class="submenu">
                            <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>
                <li><a href="#">شرایط سن و جسمانی</a></li>
                        </a>
                <li><a href="#">ممنوعیت‌های پزشکی</a></li>
                        <ul class="dropdown-menu py-2">
                <li><a href="#">سوالات متداول</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="#">ضوابط شرعی</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><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>
 
                <!-- دکمه ثبت‌نام (موبایل و دسکتاپ) -->
                <div class="flex items-center">
                    <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">
                        ثبت‌نام سریع
                    </button>
                </div>
             </ul>
             </ul>
         </nav>
         </li>
    </header>
 
    <!-- بخش محتوای خالی (فقط برای اینکه صفحه سفید نباشد) -->
    <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">
                    <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>
        // مدیریت Modal
        const modal = document.getElementById('registrationModal');


         function openModal() {
         <li><a href="#">استعلام هزینه</a></li>
            modal.style.display = 'block';
        <li><a href="#">مناطق و شهرها</a></li>
            document.body.style.overflow = 'hidden';
        <li><a href="#" class="btn-signup">ثبت‌نام سریع</a></li>
        }
    </ul>
</nav>


         function closeModal() {
<script>
             modal.style.display = 'none';
    // تابع ساده برای نمایش زیرمنو
            document.body.style.overflow = 'auto';
    function showSub(el) {
         // اطمینان از اینکه زیرمنو فقط در صورتی نمایش داده شود که صفحه به اندازه کافی بزرگ باشد
        if (window.innerWidth > 1024) {
             el.querySelector('.submenu').style.display = 'block';
         }
         }
    }
    // تابع برای مخفی کردن زیرمنو
    function hideSub(el) {
        el.querySelector('.submenu').style.display = 'none';
    }


         // مدیریت مراحل فرم
    // یک رویداد listener اضافه می‌کنیم که اگر اندازه صفحه تغییر کرد، وضعیت نمایش زیرمنو را بررسی کند
         function nextStep(step) {
    window.addEventListener('resize', () => {
             document.querySelectorAll('.step-card').forEach(card => card.classList.remove('active'));
         // اگر اندازه صفحه کوچکتر از ۱۰۲۴ پیکسل شد، اطمینان حاصل کنیم که هیچ زیرمنویی باز نماند
            document.getElementById('step' + step).classList.add('active');
         if (window.innerWidth <= 1024) {
            document.getElementById('progressBar').style.width = (step * 25) + '%';
             document.querySelectorAll('.submenu').forEach(sub => sub.style.display = 'none');
         }
         }
    });
</script>


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