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

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

<style> /* فقط روی این باکس اعمال شود */ .online-support-box, .online-support-box *{

   margin:0;
   padding:0;
   box-sizing:border-box;
   font-family:Vazirmatn,Tahoma,sans-serif;

}

.online-support-box{

   position:fixed;
   left:20px;
   bottom:20px;
   z-index:999999;

}

.info-box{

   width:min(340px,calc(100vw - 30px));
   background:#BCAAA4;
   border-radius:14px;
   box-shadow:0 4px 18px rgba(0,0,0,.08);
   padding:14px;
   position:relative;
   overflow:hidden;
   transition:.3s;
   will-change:transform,opacity;

}

.info-box.hide{

   opacity:0;
   transform:translateY(15px);
   pointer-events:none;

}

.close{

   position:absolute;
   top:10px;
   left:10px;
   width:30px;
   height:30px;
   border:0;
   border-radius:50%;
   background:#f3f3f3;
   color:#777;
   cursor:pointer;
   display:flex;
   align-items:center;
   justify-content:center;
   transition:.3s;

}

.close:hover{

   transform:rotate(90deg);
   background:#e7e7e7;

}

.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);
   color:#fff;
   display:flex;
   align-items:center;
   justify-content:center;
   font-size:24px;
   flex-shrink:0;

}

.info-title{

   font-size:15px;
   font-weight:700;
   color:#4E342E;

}

.info-text{

   font-size:14px;
   color:#222;
   line-height:1.9;

}

.mobile-toggle{

   display:none;
   width:56px;
   height:56px;
   border:0;
   border-radius:50%;
   background:linear-gradient(135deg,#5C3A21,#8B5E3C);
   color:#fff;
   font-size:24px;
   cursor:pointer;
   box-shadow:0 5px 16px rgba(0,0,0,.2);

}

@media(max-width:600px){

.online-support-box{

   left:14px;
   bottom:14px;

}

.info-box{

   display:none;

}

.info-box.mobile-open{

   display:block;
   animation:show .3s;

}

.mobile-toggle{

   display:flex;
   align-items:center;
   justify-content:center;

}

.mobile-toggle.hidden{

   display:none;

}

}

@keyframes show{ from{opacity:0;transform:translateY(15px);} to{opacity:1;transform:translateY(0);} } </style>

<button class="mobile-toggle" id="mobileToggle" aria-label="نمایش اطلاعات"> </button>

<section class="info-box" id="infoBox" role="complementary" aria-label="معرفی کافه">

<button class="close" id="closeBtn" aria-label="بستن"> </button>

کافه پاتوق محمد | قهوه و نوشیدنی‌های گرم

کافه پاتوق محمد با ارائه انواع قهوه، نوشیدنی‌های گرم و سرد و فضایی دنج، محیطی مناسب برای دورهمی و لحظاتی آرام و دلنشین فراهم کرده است.

</section>

<script> const box=document.getElementById("infoBox"), btn=document.getElementById("mobileToggle"), close=document.getElementById("closeBtn");

const expire=86400000;

if(localStorage.getItem("coffeeBox")){ const t=Date.now()-Number(localStorage.getItem("coffeeBox")); if(t<expire){ box.style.display="none"; btn.style.display="none"; } }

btn.onclick=()=>{ box.classList.add("mobile-open"); btn.classList.add("hidden"); };

close.onclick=()=>{ localStorage.setItem("coffeeBox",Date.now());

if(innerWidth<=600){ box.classList.remove("mobile-open"); btn.classList.remove("hidden"); }else{ box.classList.add("hide"); setTimeout(()=>box.style.display="none",300); } }; </script>