TwastJS
TwastJS is made to achive the easiest popup and toast(alert) ever.
CDN
<script src="https://api.twiz.lol/cdn/twast.js">TwastJS was originally exclusive only to Twiz.lol
Easiest Way to make toast/alert
How to setup/use twastJS toast(alert)
Add this into the <head>
<script src="https://api.twiz.lol/cdn/twast.js"></script>There are only 3 designs currently you can customize them in the next tab
message can be an HTML
icon can be HTML-like <i class='i bi-exclamation-triangle-fill'></i>
icon can be left it will use deafult icons
fire("success", "message","time milliseconds",` icon`)
For Success toast/alert
<a onclick="fire("success","<h3>I can see the sun</h3>","5000","icon")>For Error toast/alert
<a onclick="fire("error","<h3>I can't see the sun</h3>","5000","icon")>For warning toast/alert
<a onclick="fire("warn","<h3>I might see the sun</h3>","5000","icon")>Add this into the css file or <style> element
<style>
/* add !Important to make it appear instand of the default */
/* warn */
.icon-warn {
color: #fff !Important;
}
.notification_warn {
border: 2px solid green !Important;
background-color: green !Important;
}
/* error */
.icon-error {
color: red !Important;
}
.notification_err {
border: 2px solid yellow !Important;
background-color: yellow !Important;
}
/* sucess */
.icon-success {
color: green !Important;
}
.notification-success {
border: 2px solid white !Important;
background-color: white !Important;
}
</style>How to make popup with TwastJS
If you had adaed the "setuping" from up then dont repeat
Add this into the <head>
<script src="https://api.twiz.lol/cdn/twast.js"></script>Still in beta expect problems
Random Meme Generator using Twast Popup,
<a onclick="randomFunc()">Click me to show random meme!</a>
<script>
async function randomFunc() {
let res = await fetch("https://meme-api.com/gimme");
let json = await res.json();
let url = json.url;
twast.popup({
name: "random_meme",
title: "by <a href='https://twiz.lol/@ceo'>Ömer</a>",
html: ` <div class='info__' style=' display: flex;
flex-direction: column;
align-items: center;
text-align: center;'>
<h3 style='font-weight: 450;
font-size: 16px;
max-width: 13rem;
margin-bottom: 12px; font-family: Satoshi,sans-serif !important;'>Random Meme Generator</h3>
</div>
<div class='qr__div' style=' display: flex;
flex-direction: column;
text-align: right;
max-width: 200px;
margin-left: auto;
margin-right: auto;
margin-bottom: 15px;'>
<div class='qr__pos' style='position: relative;
width: 100%;
height: 0;
padding-bottom: 100%;
overflow: hidden;'><img style=' border-radius: 7px;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;' class='hidden omer_sentiax_stiax_' id='qrrrPP' src='${url}' onload="document.getElementById('qrrrPP').classList.remove('hidden');document.getElementsByClassName('loading123')[0].classList.add('hidden');" alt='QR Code'>
<div class='loading123' style=' width: 100%;
height: 100%;
position: absolute;
background: #191919;
animation: loading__ .65s infinite alternate;
border-radius: 7px;
opacity: 1;'></div>
</div><span onclick='toggleSecretKey()' style='color: #b5b5b5;
font-size: 14px;
margin-top: 5px;
cursor: pointer; text-align: center; font-family: Satoshi!important;'>Image not working?</span>
</div>
<div id='secretKey' class='secret_key hidden' style='display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
padding: 10px;
background-color: #191919;
border: 2px solid #212121;
border-radius: 15px;
margin-bottom: 15px;
margin: 0; user-select: auto !important;'>
<h1 style=' margin: 0;font-size: 16px;
font-weight: 500;font-family: Satoshi!important;'>Enter the secret key manually in the app</h1>
<h3 style=' margin: 0; font-size: 14px;
color: #b9b9b9; font-weight: 450;
max-width: 20rem;
margin-bottom: 3px;font-family: Satoshi!important; USER-SELECT: ALL;' id='auth_key_se'>{{Authenticator_Key}}</h3>
</div>
<span style='padding: 8px 15px;
background-color: #171717;
border: 2px solid #232323;
border-radius: 12px;
display: flex;
width: -moz-fit-content;
width: fit-content;
margin-top: 15px;
cursor: pointer;
transition: .25s;' onclick="allc1();document.getElementsByClassName('omer_sentiax_stiax_')[0].src = '';document.getElementsByClassName('omer_sentiax_stiax_')[0].classList.add('hidden');
document.getElementById('qrrrPP').classList.add('hidden');document.getElementsByClassName('loading123')[0].classList.remove('hidden');">Next Meme</span>`, // Html only
})
}
function cc1() {
document.getElementsByClassName('omer_sentiax_stiax_')[0].src = '';
document.getElementsByClassName('omer_sentiax_stiax_')[0].onload="document.getElementById('qrrrPP').classList.remove('hidden');document.getElementsByClassName('loading123')[0].classList.add('hidden');";
document.getElementsByClassName('omer_sentiax_stiax_')[0].classList.add('hidden');
document.getElementById('qrrrPP').classList.add('hidden');document.getElementsByClassName('loading123')[0].classList.remove('hidden');
}
async function allc1() {
document.getElementsByClassName('omer_sentiax_stiax_')[0].onload="document.getElementById('qrrrPP').classList.remove('hidden');document.getElementsByClassName('loading123')[0].classList.add('hidden');";
document.getElementsByClassName('omer_sentiax_stiax_')[0].src = '';
document.getElementsByClassName('omer_sentiax_stiax_')[0].classList.add('hidden');
document.getElementById('qrrrPP').classList.add('hidden');document.getElementsByClassName('loading123')[0].classList.remove('hidden');
cc1();
let res;
let json;
let url;
fire("success","Fetched!","1000",`<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-patch-check-fill" viewBox="0 0 16 16">
<path d="M10.067.87a2.89 2.89 0 0 0-4.134 0l-.622.638-.89-.011a2.89 2.89 0 0 0-2.924 2.924l.01.89-.636.622a2.89 2.89 0 0 0 0 4.134l.637.622-.011.89a2.89 2.89 0 0 0 2.924 2.924l.89-.01.622.636a2.89 2.89 0 0 0 4.134 0l.622-.637.89.011a2.89 2.89 0 0 0 2.924-2.924l-.01-.89.636-.622a2.89 2.89 0 0 0 0-4.134l-.637-.622.011-.89a2.89 2.89 0 0 0-2.924-2.924l-.89.01zm.287 5.984-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 1 1 .708-.708L7 8.793l2.646-2.647a.5.5 0 0 1 .708.708"/>
</svg>`)
await fetch("https://meme-api.com/gimme").then(async(res)=> {
json = await res.json().then((json)=> {
url = json.url;
document.getElementById('qrrrPP').src = url;
})
})
}
</script>This is still in beta and does not offer straightforward customization options. However, you can customize it by applying CSS to the popup classes names.
Last updated
