فراغیب

الگو:باکس شناور: تفاوت میان نسخه‌ها

→ تفاوت با ویرایش قدیمی‌تر
دیداریویکی‌متن
بدون خلاصۀ ویرایش
بدون خلاصۀ ویرایش
 
خط ۴: خط ۴:
   <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>کادر معرفی</title>
   <meta name="description" content="استاد شایق، استاد مدرس خودشناسی" />
   <meta name="description" content="استاد شایق، استاد مدرس خودشناسی" />
   <link rel="preconnect" href="https://fonts.googleapis.com" />
   <link rel="preconnect" href="https://fonts.googleapis.com" />
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
خط ۱۲: خط ۱۴:
     rel="stylesheet"
     rel="stylesheet"
   />
   />
   <link
   <link
     rel="stylesheet"
     rel="stylesheet"
خط ۲۵: خط ۲۸:


     body {
     body {
       font-family: 'Vazirmatn', sans-serif;
       font-family: "Vazirmatn", sans-serif;
       background: #f5f5f5;
       background: #f5f5f5;
       padding: 20px;
       padding: 20px;
خط ۳۲: خط ۳۵:
     }
     }


    /* محل قرارگیری کادر در دسکتاپ */
     .online-support-box {
     .online-support-box {
       position: fixed;
       position: fixed;
خط ۳۹: خط ۴۳:
     }
     }


    /* کادر اصلی */
     .info-box {
     .info-box {
       max-width: 340px;
       max-width: 340px;
خط ۵۷: خط ۶۲:
     }
     }


     .info-box .close {
     /* دکمه ضربدر */
    .close {
       position: absolute;
       position: absolute;
       top: 10px;
       top: 10px;
خط ۷۵: خط ۸۱:
     }
     }


     .info-box .close:hover {
     .close:hover {
       background: #e7e7e7;
       background: #e7e7e7;
       transform: rotate(90deg);
       transform: rotate(90deg);
     }
     }


    /* بخش عنوان */
     .info-header {
     .info-header {
       display: flex;
       display: flex;
خط ۸۸: خط ۹۵:
     }
     }


    /* آیکون داخل کادر */
     .avatar {
     .avatar {
       width: 52px;
       width: 52px;
خط ۱۱۴: خط ۱۲۲:
     }
     }


     @media (max-width: 480px) {
    /* آیکون شناور مخصوص موبایل */
    .mobile-toggle {
      display: none;
      width: 56px;
      height: 56px;
      border: none;
      border-radius: 50%;
      background: linear-gradient(135deg, #2c9b66, #45b883);
      color: #fff;
      font-size: 24px;
      cursor: pointer;
      box-shadow: 0 5px 16px rgba(44, 155, 102, 0.35);
      align-items: center;
      justify-content: center;
      transition: 0.3s;
    }
 
    .mobile-toggle:hover {
      transform: scale(1.08);
    }
 
    /* تنظیمات موبایل */
     @media (max-width: 600px) {
       .online-support-box {
       .online-support-box {
         left: 12px;
         left: 14px;
        right: 12px;
         bottom: 14px;
         bottom: 12px;
       }
       }


       .info-box {
       .info-box {
         max-width: 100%;
        display: none;
         max-width: calc(100vw - 28px);
      }
 
      .info-box.mobile-open {
        display: block;
        animation: showBox 0.3s ease forwards;
      }
 
      .mobile-toggle {
        display: flex;
      }
 
      .mobile-toggle.hidden {
        display: none;
      }
    }
 
    @keyframes showBox {
      from {
        opacity: 0;
        transform: translateY(15px);
      }
 
      to {
        opacity: 1;
        transform: translateY(0);
       }
       }
     }
     }
   </style>
   </style>
</head>
</head>
<body>
<body>
   <div class="online-support-box">
   <div class="online-support-box">
    <!-- آیکون مخصوص موبایل -->
    <button
      class="mobile-toggle"
      id="mobileToggle"
      aria-label="نمایش اطلاعات"
      title="نمایش اطلاعات"
    >
      <i class="fa-solid fa-headset"></i>
    </button>
    <!-- کادر معرفی -->
     <section class="info-box" id="infoBox" aria-label="معرفی استاد">
     <section class="info-box" id="infoBox" aria-label="معرفی استاد">
       <button class="close" id="closeBtn" aria-label="بستن">
       <button class="close" id="closeBtn" aria-label="بستن">
خط ۱۳۸: خط ۲۰۶:
           <i class="fa-solid fa-headset"></i>
           <i class="fa-solid fa-headset"></i>
         </div>
         </div>
         <h2 class="info-title">
         <h2 class="info-title">
           استاد شایق، استاد مدرس خودشناسی
           استاد شایق، استاد مدرس خودشناسی
خط ۱۵۰: خط ۲۱۹:


   <script>
   <script>
     const closeBtn = document.getElementById('closeBtn');
     const closeBtn = document.getElementById("closeBtn");
     const infoBox = document.getElementById('infoBox');
     const infoBox = document.getElementById("infoBox");
    const mobileToggle = document.getElementById("mobileToggle");
 
    // باز کردن کادر در موبایل
    mobileToggle.addEventListener("click", function () {
      infoBox.classList.add("mobile-open");
      mobileToggle.classList.add("hidden");
    });
 
    // بستن کادر
    closeBtn.addEventListener("click", function () {
      if (window.innerWidth <= 600) {
        infoBox.classList.remove("mobile-open");
        mobileToggle.classList.remove("hidden");
      } else {
        infoBox.classList.add("hide");


    closeBtn.addEventListener('click', function () {
        setTimeout(function () {
      infoBox.classList.add('hide');
          infoBox.style.display = "none";
      setTimeout(() => {
        }, 300);
        infoBox.style.display = 'none';
      }
      }, 300);
     });
     });
   </script>
   </script>
</body>
</body>
</html>
</html>
برگرفته از «https://fa.faraghaib.ir/wiki/الگو:باکس_شناور»