پرش به محتوا

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

از فراغیب
→ تفاوت با ویرایش قدیمی‌تر
دیداریویکی‌متن
بدون خلاصۀ ویرایش
بدون خلاصۀ ویرایش
 
(۴ نسخهٔ میانیِ ایجادشده توسط همین کاربر نشان داده نشد)
خط ۳: خط ۳:
<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>
      /* ===========================
        /* تعریف فونت ایران سنس */
  HEADER (Desktop)
        @font-face {
=========================== */
            font-family: 'Iransans';
            font-weight: normal;
            font-style: normal;
        }


header{
        /* تنظیمات کلی منو */
    position:sticky;
        body { margin: 0; padding: 0; } /* اطمینان از نبود padding/margin پیش‌فرض */
    top:0;
    right:0;
    left:0;
    width:100%;
    margin:0;
    padding:0;
    z-index:999;
    background:#fff;
    box-shadow:0 3px 15px rgba(0,0,0,.08);
}


header nav{
        .desktop-nav {
    width:100%;
            font-family: 'Iransans', Tahoma, Arial, sans-serif; /* اولویت با ایران سنس */
    max-width:100%;
            background: #fff;
    margin:0;
            padding: 10px 50px;
    padding:0 20px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    box-sizing:border-box;
            display: block; /* همیشه نمایش داده شود تا Media Query آن را کنترل کند */
}
        }


header nav>ul{
        .menu-wrapper {
    width:100%;
            display: flex;
    margin:0;
            align-items: center;
    padding:0;
            justify-content: flex-end; /* چیدمان از راست */
    min-height:64px;
            list-style: none;
}
            margin: 0;
            padding: 0;
            gap: 30px;
        }


/* حذف فاصله‌های اضافی */
        .menu-item { position: relative; cursor: pointer; }
        .menu-item > a { text-decoration: none; color: #444; font-size: 14px; font-weight: 600; }


body{
        /* استایل زیرمنوها */
    margin:0;
        .submenu {
    padding:0;
            display: none;
}
            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; }
  Dropdown
        .submenu li a { text-decoration: none; color: #555; font-size: 13px; }
=========================== */
        .submenu li:hover { background: #f9f9f9; }


.dropdown-menu{
        /* استایل دکمه ثبت‌نام */
    display:none;
        .btn-signup {
    position:absolute;
            background-color: #e91e63;
    top:100%;
            color: #fff !important;
    right:0;
            padding: 10px 25px;
    min-width:220px;
            border-radius: 30px;
    background:#fff;
            transition: all 0.3s;
    border-radius:10px;
        }
    border-top:3px solid #db2777;
        .btn-signup:hover { background-color: #c2185b; }
    box-shadow:0 12px 25px rgba(0,0,0,.12);
    z-index:9999;
}


.group:hover>.dropdown-menu{
        /* --- تغییرات برای موبایل --- */
    display:block;
        /* Media Query برای موبایل و تبلت: منو را مخفی می‌کند */
}
        @media (max-width: 1024px) {
            .desktop-nav {
                display: none !important; /* منو را کاملاً مخفی می‌کند */
            }
            /* اگر بخواهید در موبایل المان دیگری نمایش داده شود، اینجا اضافه کنید */
        }


/* ===========================
        /* Media Query برای دسکتاپ: منو را نمایش می‌دهد */
  Mobile
        @media (min-width: 1024px) {
=========================== */
            .desktop-nav {
 
                display: block !important; /* اطمینان از نمایش در دسکتاپ */
@media (max-width:768px){
            }
 
         }
    header{
        display:none;
    }
 
}
 
/* ===========================
  Tablet
=========================== */
 
@media (min-width:769px){
 
    header{
         display:block;
    }
 
}
     </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">
                        <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>
                        <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>
                        </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">
        <li class="menu-item" onmouseover="showSub(this)" onmouseout="hideSub(this)">
                    <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">
            <a>شرایط و ضوابط ▾</a>
                        ثبت‌نام سریع
            <ul class="submenu">
                    </button>
                <li><a href="#">شرایط سن و جسمانی</a></li>
                 </div>
                <li><a href="#">ممنوعیت‌های پزشکی</a></li>
                <li><a href="#">سوالات متداول</a></li>
                 <li><a href="#">ضوابط شرعی</a></li>
             </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>


                    <!-- مرحله ۲ -->
        <li><a href="#">استعلام هزینه</a></li>
                    <div class="step-card" id="step2">
        <li><a href="#">مناطق و شهرها</a></li>
                        <h3 class="text-lg font-bold mb-5">۲. مشخصات فردی:</h3>
        <li><a href="#" class="btn-signup">ثبت‌نام سریع</a></li>
                        <div class="space-y-4">
    </ul>
                            <input type="text" placeholder="نام و نام خانوادگی" class="w-full p-3 border rounded-lg outline-none focus:ring-2 focus:ring-pink-400">
</nav>
                            <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>


                    <!-- مرحله ۳ -->
<script>
                    <div class="step-card" id="step3">
    // تابع ساده برای نمایش زیرمنو
                        <h3 class="text-lg font-bold mb-5">۳. بررسی سلامت (بسیار مهم):</h3>
    function showSub(el) {
                        <div class="space-y-3 text-sm text-gray-700">
        // اطمینان از اینکه زیرمنو فقط در صورتی نمایش داده شود که صفحه به اندازه کافی بزرگ باشد
                            <label class="flex items-center"><input type="checkbox" class="ml-2"> تالاسمی یا هموفیلی ندارم</label>
        if (window.innerWidth > 1024) {
                            <label class="flex items-center"><input type="checkbox" class="ml-2"> در حال مصرف دارو یا قرص اورژانسی نیستم</label>
             el.querySelector('.submenu').style.display = 'block';
                            <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() {
            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');
            document.getElementById('progressBar').style.width = (step * 25) + '%';
        }
        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/w/index.php?title=الگو:منو_اصلی/بخشنده&oldid=6360»