فراغیب

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

→ تفاوت با ویرایش قدیمی‌ترتفاوت با ویرایش جدیدتر ←
دیداریویکی‌متن
بدون خلاصۀ ویرایش
بدون خلاصۀ ویرایش
خط ۴: خط ۴:
     <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>
     <meta name="description" content="محصولات مخزن پلی اتیلن - انواع مخازن آب شرب، صنعتی و ظرفیت‌های مختلف به همراه استعلام قیمت و راهنمای خرید">
     <meta name="description" content="ثبت‌نام سریع برای اهدای تخمک، رحم جایگزین و جنین با رعایت کامل ضوابط پزشکی و شرعی.">
     <title>مخزن پلی اتیلن | انواع مخازن و استعلام قیمت</title>
   
     <script src="https://cdn.tailwindcss.com"></script>
   
     <style>
     <style>
      /* ===========================
        /* ===== تنظیمات پایه ===== */
  HEADER (Desktop)
        *, *::before, *::after {
=========================== */
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }


header{
        html {
    position:sticky;
            font-size: 100%; /* 16px پیش‌فرض برای دسترس‌پذیری */
    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{
        body {
    width:100%;
            font-family: 'Vazirmatn', Tahoma, sans-serif;
    max-width:100%;
            line-height: 1.6;
    margin:0;
        }
    padding:0 20px;
    box-sizing:border-box;
}


header nav>ul{
        /* ========================================
    width:100%;
          مرحله ۱: موبایل (پایه) — تا 768px
    margin:0;
          ======================================== */
    padding:0;
        .poly-header {
    min-height:64px;
            background: #0a5c8a;
}
            box-shadow: 0 2px 8px rgba(0,0,0,0.15);
            position: sticky;
            top: 0;
            z-index: 1000;
        }


/* حذف فاصله‌های اضافی */
        .poly-menu-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 12px 16px;
        }


body{
        .poly-nav {
    margin:0;
            display: flex;
    padding:0;
            align-items: center;
}
            justify-content: space-between;
            gap: 12px;
        }


/* ===========================
        /* دکمه همبرگر */
  Dropdown
        .poly-nav__toggle {
=========================== */
            display: flex;
            flex-direction: column;
            gap: 5px;
            background: none;
            border: none;
            cursor: pointer;
            padding: 8px;
        }


.dropdown-menu{
        .poly-nav__bar {
    display:none;
            width: 26px;
    position:absolute;
            height: 3px;
    top:100%;
            background: #fff;
    right:0;
            border-radius: 3px;
    min-width:220px;
            transition: transform 0.3s, opacity 0.3s;
    background:#fff;
        }
    border-radius:10px;
    border-top:3px solid #db2777;
    box-shadow:0 12px 25px rgba(0,0,0,.12);
    z-index:9999;
}


.group:hover>.dropdown-menu{
        /* لیست منو (در موبایل: مخفی و از پایین باز می‌شود) */
    display:block;
        .poly-nav__list {
}
            display: none;
            flex-direction: column;
            position: absolute;
            top: 100%;
            right: 0;
            left: 0;
            background: #0a5c8a;
            list-style: none;
            padding: 12px;
            box-shadow: 0 8px 16px rgba(0,0,0,0.2);
        }


/* ===========================
        .poly-nav__list.is-open {
  Mobile
            display: flex;
=========================== */
        }


@media (max-width:768px){
        .poly-nav__list a {
            color: #fff;
            text-decoration: none;
            padding: 12px 16px;
            display: block;
            border-radius: 6px;
            transition: background 0.3s;
        }


    header{
        .poly-nav__list a:hover,
         display:none;
        .poly-nav__list a:focus-visible {
    }
            background: rgba(255,255,255,0.15);
        }
 
         /* منوی کشویی (در موبایل: زیر آیتم باز می‌شود) */
        .poly-dropdown__content {
            display: none;
            flex-direction: column;
            background: rgba(0,0,0,0.15);
            border-radius: 6px;
            margin: 4px 16px;
            padding: 4px 0;
        }
 
        .poly-dropdown.is-open .poly-dropdown__content {
            display: flex;
        }
 
        .poly-dropdown__content a {
            font-size: 0.95rem;
            padding: 10px 16px;
        }


}
        /* دکمه ثبت نام سریع */
        .poly-btn--register {
            background: #f59e0b;            /* رنگ نارنجی برای جلب توجه */
            color: #1a1a1a;
            font-weight: 700;
            text-decoration: none;
            padding: 10px 20px;
            border-radius: 8px;
            transition: background 0.3s, transform 0.2s;
            white-space: nowrap;
            font-size: 0.95rem;
        }
 
        .poly-btn--register:hover,
        .poly-btn--register:focus-visible {
            background: #fbbf24;
            transform: translateY(-2px);
        }


/* ===========================
        /* ========================================
  Tablet
          مرحله ۲: تبلت — 768px به بالا
=========================== */
          ======================================== */
        @media (min-width: 768px) {
            /* همبرگر مخفی شود */
            .poly-nav__toggle {
                display: none;
            }


@media (min-width:769px){
            /* منو به حالت افقی دربیاید */
            .poly-nav__list {
                display: flex;
                flex-direction: row;
                position: static;
                background: none;
                box-shadow: none;
                padding: 0;
                gap: 4px;
                flex: 1;
                justify-content: flex-start;
            }


    header{
            .poly-nav__list > li {
        display:block;
                position: relative;
    }
            }


}
            /* منوی کشویی (در دسکتاپ: آبشاری) */
    </style>
            .poly-dropdown__content {
</head>
                display: none;
<body class="bg-gray-50">
                position: absolute;
                top: 100%;
                right: 0;
                background: #fff;
                min-width: 220px;
                border-radius: 8px;
                box-shadow: 0 8px 16px rgba(0,0,0,0.2);
                padding: 8px 0;
                margin: 0;
            }


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


                <!-- لیست لینک‌ها -->
            .poly-dropdown__content a:hover {
                <ul class="hidden md:flex items-center space-x-reverse space-x-6 h-full">
                background: #e8f4fd;
                    <li class="h-full flex items-center"><a href="#" class="text-gray-700 hover:text-pink-600 transition">اصلی</a></li>
                color: #0a5c8a;
                   
            }
                    <!-- زیرمنوی انواع خدمات -->
                    <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>
                        </ul>
                    </li>


                    <!-- زیرمنوی شرایط و ضوابط -->
            /* باز شدن با hover در دسکتاپ */
                    <li class="relative group h-full flex items-center">
            .poly-dropdown:hover .poly-dropdown__content,
                        <a href="#" class="text-gray-700 group-hover:text-pink-600 flex items-center h-full">
            .poly-dropdown:focus-within .poly-dropdown__content {
                            شرایط و ضوابط
                display: block;
                            <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>
          مرحله ۳: دسکتاپ بزرگ — 1200px به بالا
                 </ul>
          ======================================== */
        @media (min-width: 1200px) {
            .poly-menu-container {
                 padding: 12px 24px;
            }


                <!-- دکمه ثبت‌نام (موبایل و دسکتاپ) -->
            .poly-nav__list a {
                 <div class="flex items-center">
                 font-size: 1rem;
                    <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">
                 padding: 12px 18px;
                        ثبت‌نام سریع
             }
                    </button>
                 </div>
             </ul>
        </nav>
    </header>


    <!-- بخش محتوای خالی (فقط برای اینکه صفحه سفید نباشد) -->
            .poly-btn--register {
     <main class="p-10 text-center text-gray-400">
                font-size: 1rem;
        <p></p>
                padding: 12px 24px;
    </main>
            }
        }
     </style>
</head>
<body>


    <!-- MODAL: پنجره ثبت‌نام (بدون تغییر در منطق قبلی) -->
<!-- ===== هدر + منوی ناوبری ===== -->
    <div id="registrationModal">
<header class="poly-header">
        <div class="modal-overlay" onclick="closeModal()"></div>
    <div class="poly-menu-container">
        <div class="modal-content relative bg-white max-w-xl mx-auto my-10 md:my-20 rounded-2xl shadow-2xl overflow-hidden">
        <nav class="poly-nav" aria-label="منوی محصولات مخزن پلی اتیلن">
            <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>
            <button class="poly-nav__toggle" aria-label="باز کردن منو" aria-expanded="false" aria-controls="poly-nav-menu">
                </div>
                <span class="poly-nav__bar"></span>
                <span class="poly-nav__bar"></span>
                <span class="poly-nav__bar"></span>
            </button>


                <form id="multiStepForm">
            <!-- لیست منو -->
                    <!-- مرحله ۱ -->
            <ul class="poly-nav__list" id="poly-nav-menu">
                    <div class="step-card active" id="step1">
                <li><a href="/wiki/اصلی">اصلی</a></li>
                        <h3 class="text-lg font-bold mb-5">۱. نوع همکاری مورد نظر:</h3>
                <li><a href="/wiki/مخزن_پلی_اتیلن_آب_شرب">مخزن آب شرب</a></li>
                        <div class="space-y-3">
                <li><a href="/wiki/مخزن_پلی_اتیلن_صنعتی">مخزن صنعتی</a></li>
                            <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">
                <li class="poly-dropdown">
                        <h3 class="text-lg font-bold mb-5">۲. مشخصات فردی:</h3>
                    <a href="/wiki/انواع_مخزن_پلی_اتیلن" class="poly-dropdown__link" aria-haspopup="true" aria-expanded="false">
                        <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">
                    </a>
                            <div class="grid grid-cols-2 gap-3">
                    <div class="poly-dropdown__content">
                                <input type="number" placeholder="سن" class="w-full p-3 border rounded-lg outline-none focus:ring-2 focus:ring-pink-400">
                        <a href="/wiki/مخزن_یک_قسمتی">مخزن یک قسمتی</a>
                                <input type="text" placeholder="قد (سانتی‌متر)" class="w-full p-3 border rounded-lg outline-none focus:ring-2 focus:ring-pink-400">
                        <a href="/wiki/مخزن_دو_قسمتی">مخزن دو قسمتی</a>
                            </div>
                         <a href="/wiki/مخزن_سه_قسمتی">مخزن سه قسمتی</a>
                            <input type="text" placeholder="شهر محل سکونت" class="w-full p-3 border rounded-lg outline-none focus:ring-2 focus:ring-pink-400">
                        <a href="/wiki/مخزن_پلی_اتیلن_بزرگ">مخازن با ظرفیت بالا</a>
                        </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>
                </li>


                    <!-- مرحله ۳ -->
                <li><a href="/wiki/قیمت_مخزن_پلی_اتیلن">استعلام قیمت</a></li>
                    <div class="step-card" id="step3">
                <li><a href="/wiki/راهنمای_خرید_مخزن">راهنمای خرید</a></li>
                        <h3 class="text-lg font-bold mb-5">۳. بررسی سلامت (بسیار مهم):</h3>
            </ul>
                        <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">
            <div class="poly-nav__actions">
                        <h3 class="text-lg font-bold mb-5">۴. تایید نهایی:</h3>
                <a href="/wiki/ثبت_نام" class="poly-btn poly-btn--register">ثبت نام سریع</a>
                        <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>
 
         </nav>
     </div>
     </div>
</header>
<script>
    // ===== منوی همبرگر (موبایل) =====
    const toggleBtn = document.querySelector('.poly-nav__toggle');
    const navList = document.querySelector('.poly-nav__list');
    toggleBtn.addEventListener('click', () => {
        const isOpen = navList.classList.toggle('is-open');
        toggleBtn.setAttribute('aria-expanded', isOpen);
    });


     <script>
     // ===== منوی کشویی (لمسی در موبایل) =====
        // مدیریت Modal
    const dropdowns = document.querySelectorAll('.poly-dropdown');
        const modal = document.getElementById('registrationModal');


         function openModal() {
    dropdowns.forEach(dropdown => {
             modal.style.display = 'block';
         const link = dropdown.querySelector('.poly-dropdown__link');
             document.body.style.overflow = 'hidden';
        const toggle = () => {
         }
             const isOpen = dropdown.classList.toggle('is-open');
             link.setAttribute('aria-expanded', isOpen);
         };


         function closeModal() {
         link.addEventListener('click', (e) => {
             modal.style.display = 'none';
             // فقط در موبایل: کلیک، زیرمنو را باز کند نه لینک را
             document.body.style.overflow = 'auto';
            if (window.innerWidth < 768) {
        }
                e.preventDefault();
                toggle();
             }
        });
    });


        // مدیریت مراحل فرم
    // ===== بستن منو با کلیک بیرون =====
        function nextStep(step) {
    document.addEventListener('click', (e) => {
            document.querySelectorAll('.step-card').forEach(card => card.classList.remove('active'));
        if (!e.target.closest('.poly-nav')) {
             document.getElementById('step' + step).classList.add('active');
            navList.classList.remove('is-open');
             document.getElementById('progressBar').style.width = (step * 25) + '%';
             toggleBtn.setAttribute('aria-expanded', 'false');
             dropdowns.forEach(d => d.classList.remove('is-open'));
         }
         }
    });
</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/الگو:منو_اصلی/بخشنده»