باکس شناور/کابینت یاشیل - فراغیب


<html lang="fa" dir="rtl">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />

  <title>کادر معرفی</title>
  <meta name="description" content="کابینت یاشیل" />

  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link
    href="https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;500;700&display=swap"
    rel="stylesheet"
  />

  <link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css"
  />

  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: "Vazirmatn", sans-serif;
      background: #f5f5f5;
      padding: 20px;
      line-height: 1.9;
      color: #444;
    }

    /* محل قرارگیری کادر در دسکتاپ */
    .online-support-box {
      position: fixed;
      left: 20px;
      bottom: 20px;
      z-index: 999999;
    }

    /* کادر اصلی */
    .info-box {
      max-width: 340px;
      width: 100%;
      background: #fff;
      border-radius: 14px;
      box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08);
      padding: 14px;
      position: relative;
      overflow: hidden;
      transition: opacity 0.3s ease, transform 0.3s ease;
    }

    .info-box.hide {
      opacity: 0;
      transform: translateY(15px);
      pointer-events: none;
    }

    /* دکمه ضربدر */
    .close {
      position: absolute;
      top: 10px;
      left: 10px;
      width: 30px;
      height: 30px;
      border: none;
      background: #006400;
      border-radius: 50%;
      cursor: pointer;
      transition: 0.3s;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #D4AF37;
      font-size: 14px;
    }

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

    /* بخش عنوان */
    .info-header {
      display: flex;
      align-items: center;
      gap: 10px;
      
      padding:24px 0 0 14px;
    }

    /* آیکون داخل کادر */
    .avatar {
      width: 90px;
      height: 52px;
      border-radius: 50%;
      background: linear-gradient(135deg, #0EA5E9, #E0F2FE);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      color: #fff;
      flex-shrink: 0;
      box-shadow: 0 3px 10px rgba(44, 155, 102, 0.25);
    }

    .info-title {
      font-size: 14px;
      font-weight: 700;
      color:  #006400;
      line-height: 1.8;
      padding: 20px 10px 0 0;
    }

    .info-text {
      font-size: 14px;
      color: #666;
    }

    /* آیکون شناور مخصوص موبایل */
    .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 {
        left: 14px;
        bottom: 80px;
      }

      .info-box {
        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>
</head>

<body>
  <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="محصولات">
      <button class="close" id="closeBtn" aria-label="بستن">
        <i class="fa-solid fa-xmark"></i>
      </button>

      <div class="info-header">
        <div class="avatar">
          <i ><img src="https://dl.faraghaib.ir/m/100/vorojak.gif" width: 52px;
      height: 52px;></i>
        </div>
      </div>

      <p class="info-title">
        تماس با ما
      </p>
    </section>
  </div>

  <script>
    const closeBtn = document.getElementById("closeBtn");
    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");

        setTimeout(function () {
          infoBox.style.display = "none";
        }, 300);
      }
    });
  </script>
</body>
</html>