فراغیب

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

دیداریویکی‌متن
صفحه‌ای تازه حاوی « <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="کافه پاتوق محمد؛ انتخابی عالی برای قهوه، نوشیدنی‌های خوش‌طعم و دورهمی در فضایی دنج و صمیمی. تجربه‌ای متفاوت از یک کافه‌گرد...» ایجاد کرد
 
بدون خلاصۀ ویرایش
 
(۶ نسخهٔ میانیِ ایجادشده توسط همین کاربر نشان داده نشد)
خط ۱: خط ۱:
<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: #BCAAA4; 
      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: #f3f3f3; 
      border-radius: 50%; 
      cursor: pointer; 
      transition: 0.3s; 
      display: flex; 
      align-items: center; 
      justify-content: center; 
      color: #777; 
      font-size: 14px; 
    } 
 
    .close:hover { 
      background: #e7e7e7; 
      transform: rotate(90deg); 
    } 
 
    /* بخش عنوان */ 
    .info-header { 
      display: flex; 
      align-items: center; 
      gap: 10px; 
      margin-bottom: 10px; 
      padding-left: 34px; 
    } 
 
    /* آیکون داخل کادر */ 
    .avatar { 
      width: 52px; 
      height: 52px; 
      border-radius: 50%; 
    background: linear-gradient(135deg, #5C3A21, #8B5E3C); 
      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: #4E342E; 
      line-height: 1.8; 
    } 
 
    .info-text { 
      font-size: 14px; 
      color: #000; 
    } 
 
    /* آیکون شناور مخصوص موبایل */ 
    .mobile-toggle { 
      display: none; 
      width: 56px; 
      height: 56px; 
      border: none; 
      border-radius: 50%; 
      background: linear-gradient(135deg, #5C3A21, #8B5E3C); 
      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: 14px; 
      } 
 
      .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> 


<html lang="fa" dir="rtl">
<!-- کادر معرفی --> 
<head>
<section class="info-box" id="infoBox" aria-label="معرفی استاد">
   <meta charset="UTF-8" />
   <button class="close" id="closeBtn" aria-label="بستن">
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <i class="fa-solid fa-xmark"></i> 
  </button>


   <title>کادر معرفی</title>
   <div class="info-header">
  <meta name="description" content="کافه پاتوق محمد؛ انتخابی عالی برای قهوه، نوشیدنی‌های خوش‌طعم و دورهمی در فضایی دنج و صمیمی. تجربه‌ای متفاوت از یک کافه‌گردی لذت‌بخش.">
    <div class="avatar"> 
      <i class="fa-solid fa-mug-hot"></i> 
    </div> 


  <link rel="preconnect" href="https://fonts.googleapis.com" />
    <h2 class="info-title">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
      کافه پاتوق محمد 
   <link
    </h2>
    href="https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;500;700&display=swap"
   </div>
    rel="stylesheet"
  />


   <link
   <p class="info-text"> 
    rel="stylesheet"
  تجربه‌ای متفاوت از یک کافه‌گردی لذت‌بخش.
    href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css"
  </p> 
  />
</section>


  <style>
   </div>   <script>
    * {
     const closeBtn = document.getElementById("closeBtn");
      margin: 0;
     const infoBox = document.getElementById("infoBox");
      padding: 0;
     const mobileToggle = document.getElementById("mobileToggle");
      box-sizing: border-box;
 
    }
     // باز کردن کادر در موبایل
 
     mobileToggle.addEventListener("click", function () {
    body {
       infoBox.classList.add("mobile-open");
      font-family: "Vazirmatn", sans-serif;
       mobileToggle.classList.add("hidden");
      background: #f5f5f5;
     });
      padding: 20px;
 
      line-height: 1.9;
     // بستن کادر
      color: #444;
     closeBtn.addEventListener("click", function () {
    }
       if (window.innerWidth <= 600) {
 
         infoBox.classList.remove("mobile-open");
    /* محل قرارگیری کادر در دسکتاپ */
         mobileToggle.classList.remove("hidden");
    .online-support-box {
       } else {
      position: fixed;
         infoBox.classList.add("hide");
      left: 20px;
 
      bottom: 20px;
         setTimeout(function () {
      z-index: 999999;
           infoBox.style.display = "none";
    }
         }, 300);
 
       }
    /* کادر اصلی */
     });
    .info-box {
   </script> </body>
      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: #f3f3f3;
      border-radius: 50%;
      cursor: pointer;
      transition: 0.3s;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #777;
      font-size: 14px;
    }
 
    .close:hover {
      background: #e7e7e7;
      transform: rotate(90deg);
    }
 
    /* بخش عنوان */
    .info-header {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 10px;
      padding-left: 34px;
    }
 
    /* آیکون داخل کادر */
    .avatar {
      width: 52px;
      height: 52px;
      border-radius: 50%;
      background: linear-gradient(135deg, #2c9b66, #45b883);
      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: #2c9b66;
      line-height: 1.8;
    }
 
    .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: 14px;
      }
 
      .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 class="fa-solid fa-headset"></i>
        </div>
 
        <h2 class="info-title">
          کافه پاتوق محمد
        </h2>
      </div>
 
      <p class="info-text">
      تجربه‌ای متفاوت از یک کافه‌گردی لذت‌بخش.
      </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>
</html>
برگرفته از «https://fa.faraghaib.ir/wiki/الگو:باکس_شناور/کافه_محمد»