Webleb - Snippet di Codice - Notifica di brindisi

HTML

CSS

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500&display=swap');
*
{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}
body
{
    width: 100%;
    min-height: 100vh;
    background: #e6e6e6;
}
.connection
{
    position: fixed;
    bottom: 50px;
    left: 50px;
    width: 360px;
    height: 70px;
    background: #242526;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    transform: translateX(-100%);
    opacity: 0;
    pointer-events: none;
    transition: 0.5s;
}
.connection p
{
    font-size: 14px;
    color: #fff;
    font-weight: 300;
}
.connection .refreshBtn
{
    font-size: 16px;
    margin-left: 10px;
    text-decoration: none;
    color: #469aff;
}
.connection .wifi-off
{
    margin-right: 20px;
    font-size: 26px;
    color: #7c7c7c;
}
.connection .close
{
    margin-left: 20px;
    width: 25px;
    height: 25px;
    line-height: 25px;
    background: #474747;
    text-align: center;
    border-radius: 50%;
    font-size: 20px;
    color: #fff;
    cursor: pointer;
}
.connection .wifi
{
    color: #029702;
    font-size: 26px;
    margin-right: 20px;
}
.online.active
{
    width: 420px;
    transform: translateX(0%);
    opacity: 1;
    pointer-events: auto;
}
.offline.active
{
    transform: translateX(0%);
    opacity: 1;
    pointer-events: auto;
}
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
body{
  overflow: hidden;
  background: #f2f2f2;
}
.wrapper{
  position: absolute;
  top: 20px;
  left: 20px;
  animation: show_toast 1s ease forwards;
}
@keyframes show_toast {
  0%{
    transform: translateX(-100%);
  }
  40%{
    transform: translateX(10%);
  }
  80%, 100%{
    transform: translateX(20px);
  }
}
.wrapper.hide{
  animation: hide_toast 1s ease forwards;
}
@keyframes hide_toast {
  0%{
    transform: translateX(20px);
  }
  40%{
    transform: translateX(10%);
  }
  80%, 100%{
    opacity: 0;
    pointer-events: none;
    transform: translateX(-100%);
  }
}
.wrapper .toast{
  background: #fff;
  padding: 20px 15px 20px 20px;
  border-radius: 10px;
  border-left: 5px solid #2ecc71;
  box-shadow: 1px 7px 14px -5px rgba(0,0,0,0.15);
  width: 430px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.wrapper .toast.offline{
  border-color: #ccc;
}
.toast .content{
  display: flex;
  align-items: center;
}
.content .icon{
  font-size: 25px;
  color: #fff;
  height: 50px;
  width: 50px;
  text-align: center;
  line-height: 50px;
  border-radius: 50%;
  background: #2ecc71;
}
.toast.offline .content .icon{
  background: #ccc;
}
.content .details{
  margin-left: 15px;
}
.details span{
  font-size: 20px;
  font-weight: 500;
}
.details p{
  color: #878787;
}
.toast .close-icon{
  color: #878787;
  font-size: 23px;
  cursor: pointer;
  height: 40px;
  width: 40px;
  text-align: center;
  line-height: 40px;
  border-radius: 50%;
  background: #f2f2f2;
  transition: all 0.3s ease;
}
.close-icon:hover{
  background: #efefef;
}

JS

// Selecting all required elements
const wrapper = document.querySelector(".wrapper"),
toast = wrapper.querySelector(".toast"),
title = toast.querySelector("span"),
subTitle = toast.querySelector("p"),
wifiIcon = toast.querySelector(".icon"),
closeIcon = toast.querySelector(".close-icon");

function offline(){ //function for offline
        wrapper.classList.remove("hide");
        toast.classList.add("offline");
        title.innerText = "You're offline now";
        subTitle.innerText = "Opps! Internet is disconnected.";
        wifiIcon.innerHTML = '<i class="uil uil-wifi-slash"></i>';
    }

setInterval(()=>{ //this setInterval function call ajax frequently after 100ms
        ajax();
    }, 100);
}

Notifica di brindisi

Consigliato

Indirizzo delle pagine di accesso

Un codice di Metehan

elenchi di automobili

HTML

CSS

JS

Consigliato

Indirizzo delle pagine di accesso

Un codice di Metehan

elenchi di automobili

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS