https://mininxd.vercel.app/

Scan ID:
f0f780f3-d5d2-4b64-a94b-b2771dc5b0bdFinished
Submitted URL:
https://mininxd.web.id/Redirected
Report Finished:

The outgoing links identified from the page

LinkText
https://qristiker.vercel.app QRIS Sticker Pembuat label harga yang include dengan QRIS
https://story-telling-one.vercel.app Story Telling Platform sosial media berbagi cerita tanpa login, memposting dengan CRUD
https://spotify.mininxd.my.id/ Spotify Downloader Downloader spotify gratis tanpa iklan
https://xdtoast.js.org xdtoast sebuah notifikasi toast untuk website, dan customizable
https://bmkg-web.vercel.app BMKG Informasi cuaca dari BMKG dengan simpan data dengan localStorage
https://mininxd.github.io/PBOFTY/ PBOFTY Progress Bar of The Year
https://revanced.mininxd.my.id Revanced Extended aplikasi youtube video dan music mod tanpa iklan
https://github.com/mininxd?tab=repositoriesPublic Repo103
https://github.com/Yudhass Yudhass
https://github.com/ka-shifuka ka-shifuka

JavaScript Variables · 7 found

Global JavaScript variables loaded on the window object of a page, are variables declared outside of functions and accessible from anywhere in the code within the current scope

NameType
onbeforetoggleobject
documentPictureInPictureobject
onscrollendobject
_sentryDebugIdsobject
_sentryDebugIdIdentifierstring
SENTRY_RELEASEobject
__SENTRY__object

Console log messages · 0 found

Messages logged to the web console

HTML

The raw HTML body of the page

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="description" content="Astro description"><meta name="viewport" content="width=device-width"><link rel="icon" type="image/svg+xml" href="/favicon.svg"><meta name="generator" content="Astro v4.15.11"><title>mininxd frontpage</title><link rel="stylesheet" href="/_astro/index.BfMUIo23.css">
<style>*{transition:all .15s ease-out}:root{--accent: 225, 97, 28;--accent-light: 255, 255, 255;--accent-dark: 49, 10, 101;--accent-gradient: linear-gradient( 45deg, rgb(var(--accent)), rgb(var(--accent-light)) 50%, white 50% )}html{font-family:system-ui,sans-serif;background:#13151a}code{font-family:Menlo,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New,monospace}.navbar:where(.astro-5blmo7yk){border-radius:10px;color:#a6adbb}.button:where(.astro-5blmo7yk),.btn:where(.astro-5blmo7yk){font-size:1.25em!important;font-weight:600!important;flex-wrap:no-wrap}div:where(.astro-5blmo7yk).button:is(:hover,:focus-within){color:#a6adbb;background:transparent}.navbar:where(.astro-5blmo7yk),.dropdown:where(.astro-5blmo7yk){background:#2b3440;color:#a6adbb}ul:where(.astro-5blmo7yk){border:1px solid #0002}@media (prefers-color-scheme: light){.button:where(.astro-5blmo7yk):is(:hover,:focus-within){color:#eee!important;background:#2b3440!important}.navbar:where(.astro-5blmo7yk),.dropdown:where(.astro-5blmo7yk){background:#eee;color:#2b3440}ul:where(.astro-5blmo7yk){background:#eee}}
div:where(.astro-4nobl2u4).pages{display:flex;flex-wrap:wrap;justify-content:flex-start}div:where(.astro-4nobl2u4).box{padding:2px 10px;border:1px #fff2 solid;min-width:-moz-fit-content;min-width:fit-content;height:-moz-fit-content;height:fit-content;margin:0;border-radius:5px 5px 0 0;border-bottom:none}div:where(.astro-4nobl2u4).line{width:100%;border-top:none;border-left:none;border-right:none;border-bottom:1px #fff2 solid}div:where(.astro-4nobl2u4).content{height:-moz-fit-content;height:fit-content;border-top:1px solid #fff2;border-bottom:1px solid #fff2;padding:10px;border-radius:0 10px 10px}@media (prefers-color-scheme: light){:where(.astro-4nobl2u4){color:#222}div:where(.astro-4nobl2u4).content{margin-top:-.5px;border-top:1px solid #0005;border-bottom:1px solid #0005}div:where(.astro-4nobl2u4).box{border:1px #2225 solid}}ul:where(.astro-pq7vq4sb)#listContainer{display:flex;flex-wrap:wrap;gap:5px}#username:where(.astro-pq7vq4sb){margin-left:5px}.stats:where(.astro-bhxv2qxz){overflow:scroll;max-width:100%}p:where(.astro-dohjnao5){transition:.3s}.link-card:where(.astro-dohjnao5){list-style:none;display:flex;flex-wrap:wrap;border-radius:5px;background-position:100%;border:1px solid #fff2;margin:0;padding:5px}.link-card:where(.astro-dohjnao5)>a:where(.astro-dohjnao5){width:100%;text-decoration:none;line-height:1.4;padding:calc(1.5rem - 1px);border-radius:8px;color:#a6adbb}h2:where(.astro-dohjnao5){margin:0;font-size:1.3rem}p:where(.astro-dohjnao5){margin-top:.5rem;margin-bottom:0;font-weight:300}.link-card:where(.astro-dohjnao5):is(:hover,:focus-within){background:#fff1}@media (prefers-color-scheme: light){:where(.astro-dohjnao5){color:#2b3440}.link-card:where(.astro-dohjnao5){background:#fafafa;border:1px solid #0002}.link-card:where(.astro-dohjnao5):is(:hover,:focus-within){background:#f5f5f5}}@media (prefers-color-scheme: dark){img:where(.astro-apb64oph){box-shadow:0 1px 1px #0007}}.button:where(.astro-qmzm2soj){font-weight:600!important}.modal-box:where(.astro-qmzm2soj){-webkit-backdrop-filter:brightness(.2);backdrop-filter:brightness(.2)}@media (prefers-color-scheme: light){.button:where(.astro-qmzm2soj){border:1px solid #2222;background:#fafafa}.button:where(.astro-qmzm2soj):is(:hover,:focus-within){background:#2b3440;color:#fff;border:1px solid #eee}}.bottom:where(.astro-sz7xmlte){padding:1em;margin-top:2em;display:flex;flex-wrap:wrap;justify-content:space-between}.left:where(.astro-sz7xmlte){justify-content:start;text-align:left}.right:where(.astro-sz7xmlte){justify-content:end;text-align:right}h4:where(.astro-sz7xmlte){font-weight:300;font-size:14px}
</style><script type="module" src="/_astro/hoisted.CgXweO24.js"></script>
<script type="module" src="/_astro/page.DMOpvZ_k.js"></script><style>@import url(https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200);</style><style>:root {
  --color-light: #222222;
  --color-dark: #f8f9fa;
  --color-success: #145122;
  --color-danger: #9c1a26;
  --color-info: #106d7c;
  --color-warning: #7e5e00;
  
  --bg-light: #fafafa;
  --bg-dark: #2a2a2a;
  --bg-success: #c3e6cb;
  --bg-danger: #f5c6cb;
  --bg-info: #bee5eb;
  --bg-warning: #fff0c1;
}



.toast-notification {
  position: fixed;
  text-decoration: none;
  z-index: 999999;
  max-width: 300px;
  background-color: #fff !important;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0);
  border-radius: 4px;
  display: flex;
  padding: 10px;
  transform: translate(0, -150%);
  -webkit-tap-highlight-color: transparent !important;
  -webkit-tap-highlight-color: rgb(0,0,0,0,) !important;
}
.toast-notification-icon {
  font-size: inherit;
  transform: translateY(3px);
}
.toast-notification .toast-notification-wrapper {
  flex: 1;
  padding-right: 10px;
  overflow: hidden;
}
.toast-notification .toast-notification-wrapper .toast-notification-header {
  padding: 0 0 5px 0;
  margin: 0;
  font-weight: 500;
  font-size: 18px;
  word-break: break-all;
  color: var(--color-light) !important;
}
.toast-notification.toast-notification-light {
background: var(--bg-light) !important;
}
.toast-notification .toast-notification-wrapper .toast-notification-content {
  font-size: 14px;
  margin: 0;
  padding: 0;
  word-break: break-all;
  color: var(--color-light) !important;
}
.toast-notification .toast-notification-close {
  appearance: none;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 24px;
  padding: 0;
  width: calc(fit-content + 5px);
  height:fit-content;
  font-weight: bold;
  color: rgba(0, 0, 0, 0.6) !important;
}
.toast-notification .toast-notification-close:hover {
  color: rgba(0, 0, 0, 0.4) !important;
}
.toast-notification.toast-notification-bottom-left, .toast-notification.toast-notification-bottom-right {
  transform: translate(0, 150%);
}





.toast-notification.toast-notification-dark {
  background-color: var(--bg-dark) !important;
}
.toast-notification.toast-notification-dark .toast-notification-wrapper .toast-notification-header {
  color: var(--color-dark) !important;
}
.toast-notification.toast-notification-dark .toast-notification-wrapper .toast-notification-content {
  color: var(--color-dark) !important;
}
.toast-notification.toast-notification-dark .toast-notification-close {
  color: rgba(255, 255, 255, 0.2) !important;
}
.toast-notification.toast-notification-dark .toast-notification-close:hover {
  color: rgba(255, 255, 255, 0.4) !important;
}





.toast-notification.toast-notification-success {
  background-color: var(--bg-success) !important;
}
.toast-notification.toast-notification-success .toast-notification-wrapper .toast-notification-header {
  color: var(--color-success) !important;
}
.toast-notification.toast-notification-success .toast-notification-wrapper .toast-notification-content {
  color: var(--color-success) !important;
}
.toast-notification.toast-notification-success .toast-notification-close {
  color: rgba(0, 0, 0, 0.2) !important;
}
.toast-notification.toast-notification-success .toast-notification-close:hover {
  color: rgba(0, 0, 0, 0.4) !important;
}



.toast-notification.toast-notification-warning {
  background-color: var(--bg-warning) !important;
}
.toast-notification.toast-notification-warning .toast-notification-wrapper .toast-notification-header {
  color: var(--color-warning) !important;
}
.toast-notification.toast-notification-warning .toast-notification-wrapper .toast-notification-content {
  color: var(--color-warning) !important;
}
.toast-notification.toast-notification-warning .toast-notification-close {
  color: rgba(0, 0, 0, 0.2) !important;
}
.toast-notification.toast-notification-warning .toast-notification-close:hover {
  color: rgba(0, 0, 0, 0.4) !important;
}



.toast-notification.toast-notification-danger {
  background-color: var(--bg-danger) !important;
}
.toast-notification.toast-notification-danger .toast-notification-wrapper .toast-notification-header {
  color: var(--color-danger) !important;
}
.toast-notification.toast-notification-danger .toast-notification-wrapper .toast-notification-content {
  color: var(--color-danger) !important;
}
.toast-notification.toast-notification-danger .toast-notification-close {
  color: rgba(0, 0, 0, 0.2) !important;
}
.toast-notification.toast-notification-danger .toast-notification-close:hover {
  color: rgba(0, 0, 0, 0.4) !important;
}




.toast-notification.toast-notification-info {
  background-color: var(--bg-info) !important;
}
.toast-notification.toast-notification-info .toast-notification-wrapper .toast-notification-header {
  color: var(--color-info) !important;
}
.toast-notification.toast-notification-info .toast-notification-wrapper .toast-notification-content {
  color: var(--color-info) !important;
}
.toast-notification.toast-notification-info .toast-notification-close {
  color: rgba(0, 0, 0, 0.2) !important;
}
.toast-notification.toast-notification-info .toast-notification-close:hover {
  color: rgba(0, 0, 0, 0.4) !important;
}




.toast-notification.toast-notification-dimmed {
  opacity: .3;
}
.toast-notification.toast-notification-dimmed:hover, .toast-notification.toast-notification-dimmed:active {
  opacity: 1;
}
</style></head> <body>  <link rel="stylesheet" href="/index.css"> <main class="container"> <div class="navbar shadow bg-base-100 astro-5blmo7yk"> <div class="navbar-start astro-5blmo7yk"></div> <div class="navbar-center astro-5blmo7yk"> <div class="dropdown astro-5blmo7yk"> <div tabindex="0" role="button" class="btn btn-ghost button w-full astro-5blmo7yk"> mininxd&nbsp;<span class="material-symbols-outlined astro-5blmo7yk">
arrow_drop_down
</span> </div> <ul tabindex="0" class="menu menu-sm dropdown-content bg-base-100 rounded-box z-[1] mt-3 w-52 p-2 shadow astro-5blmo7yk"> <li class="astro-5blmo7yk"><a href="/" class="active astro-5blmo7yk">Homepage</a></li> <li class="astro-5blmo7yk"><a href="/docs" class="astro-5blmo7yk">Docs</a></li> <li class="astro-5blmo7yk"><a href="/" class="astro-5blmo7yk">CV<span class="badge badge-accent astro-5blmo7yk">soon</span></a></li> </ul> </div> </div> <div class="navbar-end astro-5blmo7yk"></div> </div>  <br> <div style="z-index:1;" class="avatar"> <div class="w-24 rounded-full"> <img alt="avatar" id="image" src="https://avatars.githubusercontent.com/u/70429604?v=4"> </div> </div>  <h1>I'm muhammad mu'minin</h1> <h3>also known as <span class="text-gradient">mininxd</span></h3> <br> <h2 class="text-thin-bold">Full Stack Developer</h2> <p class="deskripsi">
I have a solid grasp of the fundamental web development languages: HTML, CSS, and JavaScript.
</p> <br> <br class="astro-4nobl2u4"> <div class="pages astro-4nobl2u4"> <div class="box astro-4nobl2u4"> <b class="astro-4nobl2u4">My skills</b> </div> </div> <div class="content astro-4nobl2u4">  <code>Frontend</code> <p style="display:flex; justify-content:flex-start; flex-wrap:wrap; gap:5px;"> <img alt="html" style="border-radius:5px" width="auto" src="https://img.shields.io/badge/html-1d232a?style=for-the-badge&amp;logo=html5&amp;logoColor=a6adbb" height="20px" class="astro-apb64oph">  <img alt="css" style="border-radius:5px" width="auto" src="https://img.shields.io/badge/css-1d232a?style=for-the-badge&amp;logo=css3&amp;logoColor=a6adbb" height="20px" class="astro-apb64oph">  <img alt="javascript" style="border-radius:5px" width="auto" src="https://img.shields.io/badge/javascript-1d232a?style=for-the-badge&amp;logo=javascript&amp;logoColor=a6adbb" height="20px" class="astro-apb64oph">  <img alt="jquery" style="border-radius:5px" width="auto" src="https://img.shields.io/badge/jquery-1d232a?style=for-the-badge&amp;logo=jquery&amp;logoColor=a6adbb" height="20px" class="astro-apb64oph">  <img alt="astro" style="border-radius:5px" width="auto" src="https://img.shields.io/badge/astro-1d232a?style=for-the-badge&amp;logo=Astro&amp;logoColor=a6adbb" height="20px" class="astro-apb64oph">  <img alt="vite" style="border-radius:5px" width="auto" src="https://img.shields.io/badge/vite-1d232a?style=for-the-badge&amp;logo=vite&amp;logoColor=a6adbb" height="20px" class="astro-apb64oph">  <img alt="tailwind" style="border-radius:5px" width="auto" src="https://img.shields.io/badge/tailwind-1d232a?style=for-the-badge&amp;logo=Tailwind css&amp;logoColor=a6adbb" height="20px" class="astro-apb64oph">  <img alt="bootstrap" style="border-radius:5px" width="auto" src="https://img.shields.io/badge/bootstrap-1d232a?style=for-the-badge&amp;logo=bootstrap&amp;logoColor=a6adbb" height="20px" class="astro-apb64oph">  </p> <code>Backend</code> <p style="display:flex; justify-content:flex-start; flex-wrap:wrap; gap:5px;"> <img alt="express" style="border-radius:5px" width="auto" src="https://img.shields.io/badge/express-1d232a?style=for-the-badge&amp;logo=express&amp;logoColor=a6adbb" height="20px" class="astro-apb64oph">  <img alt="vercel" style="border-radius:5px" width="auto" src="https://img.shields.io/badge/vercel-1d232a?style=for-the-badge&amp;logo=vercel&amp;logoColor=a6adbb" height="20px" class="astro-apb64oph">  <img alt="nodejs" style="border-radius:5px" width="auto" src="https://img.shields.io/badge/nodejs-1d232a?style=for-the-badge&amp;logo=node.js&amp;logoColor=a6adbb" height="20px" class="astro-apb64oph">  </p> <code>Other</code> <p style="display:flex; justify-content:flex-start; flex-wrap:wrap; gap:5px;"> <img alt="photoshop" style="border-radius:5px" width="auto" src="https://img.shields.io/badge/photoshop-1d232a?style=for-the-badge&amp;logo=adobe photoshop&amp;logoColor=a6adbb" height="20px" class="astro-apb64oph">  <img alt="ubuntu" style="border-radius:5px" width="auto" src="https://img.shields.io/badge/ubuntu-1d232a?style=for-the-badge&amp;logo=ubuntu&amp;logoColor=a6adbb" height="20px" class="astro-apb64oph">  <img alt="webpack" style="border-radius:5px" width="auto" src="https://img.shields.io/badge/webpack-1d232a?style=for-the-badge&amp;logo=webpack&amp;logoColor=a6adbb" height="20px" class="astro-apb64oph">  <img alt="github" style="border-radius:5px" width="auto" src="https://img.shields.io/badge/github-1d232a?style=for-the-badge&amp;logo=github&amp;logoColor=a6adbb" height="20px" class="astro-apb64oph">  </p>  </div>  <br class="astro-4nobl2u4"> <div class="pages astro-4nobl2u4"> <div class="box astro-4nobl2u4"> <b class="astro-4nobl2u4">My Latest Project</b> </div> </div> <div class="content astro-4nobl2u4">  <ul role="list" class="link-card-grid"> <li class="link-card astro-dohjnao5"> <a href="https://qristiker.vercel.app" target="_blank" class="astro-dohjnao5"> <h2 class="w-full astro-dohjnao5" style="font-weight:600"> QRIS Sticker </h2> <p class="line-clamp-2 sm:line-clamp-none hover:line-clamp-none astro-dohjnao5"> Pembuat label harga yang include dengan QRIS </p> </a> <br class="astro-dohjnao5">  </li>  <li class="link-card astro-dohjnao5"> <a href="https://story-telling-one.vercel.app" target="_blank" class="astro-dohjnao5"> <h2 class="w-full astro-dohjnao5" style="font-weight:600"> Story Telling </h2> <p class="line-clamp-2 sm:line-clamp-none hover:line-clamp-none astro-dohjnao5"> Platform sosial media berbagi cerita tanpa login, memposting dengan CRUD </p> </a> <br class="astro-dohjnao5">  </li>  <li class="link-card astro-dohjnao5"> <a href="https://spotify.mininxd.my.id/" target="_blank" class="astro-dohjnao5"> <h2 class="w-full astro-dohjnao5" style="font-weight:600"> Spotify Downloader </h2> <p class="line-clamp-2 sm:line-clamp-none hover:line-clamp-none astro-dohjnao5"> Downloader spotify gratis tanpa iklan </p> </a> <br class="astro-dohjnao5">  </li>  <li class="link-card astro-dohjnao5"> <a href="https://xdtoast.js.org" target="_blank" class="astro-dohjnao5"> <h2 class="w-full astro-dohjnao5" style="font-weight:600"> xdtoast </h2> <p class="line-clamp-2 sm:line-clamp-none hover:line-clamp-none astro-dohjnao5"> sebuah notifikasi toast untuk website, dan customizable </p> </a> <br class="astro-dohjnao5">  <button id="xdtoastBtn" class="btn btn-light btn-md sm:btn-sm md:btn-md lg:btn-lg w-full">
Test xdtoast</button>  </li>  </ul> <br> <!-- Open the modal using ID.showModal() method --><button id="btnAllProj" class="btn btn-light btn-md sm:btn-sm md:btn-md lg:btn-lg w-full button astro-qmzm2soj">All Project</button> <dialog id="modalAllProj" class="modal modal-bottom sm:modal-middle astro-qmzm2soj"> <div class="modal-box astro-qmzm2soj"> <p class="opacity-50 text-sm astro-qmzm2soj">project lama akan tersimpan disini</p>  <ul role="list" class="link-card-grid"> <li class="link-card astro-dohjnao5"> <a href="https://bmkg-web.vercel.app" target="_blank" class="astro-dohjnao5"> <h2 class="w-full astro-dohjnao5" style="font-weight:600"> BMKG </h2> <p class="line-clamp-2 sm:line-clamp-none hover:line-clamp-none astro-dohjnao5"> Informasi cuaca dari BMKG dengan simpan data dengan localStorage </p> </a> <br class="astro-dohjnao5">  </li>  <li class="link-card astro-dohjnao5"> <a href="https://mininxd.github.io/PBOFTY/" target="_blank" class="astro-dohjnao5"> <h2 class="w-full astro-dohjnao5" style="font-weight:600"> PBOFTY </h2> <p class="line-clamp-2 sm:line-clamp-none hover:line-clamp-none astro-dohjnao5"> Progress Bar of The Year </p> </a> <br class="astro-dohjnao5">  </li>  <li class="link-card astro-dohjnao5"> <a href="https://revanced.mininxd.my.id" target="_blank" class="astro-dohjnao5"> <h2 class="w-full astro-dohjnao5" style="font-weight:600"> Revanced Extended </h2> <p class="line-clamp-2 sm:line-clamp-none hover:line-clamp-none astro-dohjnao5"> aplikasi youtube video dan music mod tanpa iklan </p> </a> <br class="astro-dohjnao5">  </li>  <li class="link-card astro-dohjnao5"> <a href="https://api-mininxd.vercel.app/" target="_blank" class="astro-dohjnao5"> <h2 class="w-full astro-dohjnao5" style="font-weight:600"> Rest API </h2> <p class="line-clamp-2 sm:line-clamp-none hover:line-clamp-none astro-dohjnao5"> kumpulan API gratis yang berguna untuk development seperti bot whatsapp atau web </p> </a> <br class="astro-dohjnao5">  </li>  </ul>  <div class="modal-action astro-qmzm2soj"> <form method="dialog" class="astro-qmzm2soj"> <button class="btn button astro-qmzm2soj">Tutup</button> </form> </div> </div> </dialog>  <script>(function(){const idd = "modalAllProj";
const idb = "btnAllProj";

let btnId = document.getElementById(idb);
async function modal() {
let dialogId = document.getElementById(idd);
try {
 let show = await dialogId.showModal();
    return show;
  }
  catch(error) {
  alert(error) 
  }
  }
  btnId.addEventListener("click", () => {
  modal();
  })
})();</script>  </div>  <br class="astro-4nobl2u4"> <div class="pages astro-4nobl2u4"> <div class="box astro-4nobl2u4"> <b class="astro-4nobl2u4">Github Stats</b> </div> </div> <div class="content astro-4nobl2u4">  <div id="stats" class="stats shadow astro-bhxv2qxz"> 
   <div class="stat">
   <a href="https://github.com/mininxd?tab=repositories">
   <div class="stat-title">Public Repo</div>
    <div class="stat-value">103</div>
    <div class="stat-desc"></div>
   </a>
   </div>
   
   <div onclick="followerDial.showModal();" class="stat">
   <div class="stat-title">Followers</div>
    <div class="stat-value">41
    </div>
    <div class="stat-desc"></div>
   </div>
   
   <div class="stat">
   <div class="stat-title">Following</div>
    <div class="stat-value">27</div>
    <div class="stat-desc"></div>
   </div>
   </div> <dialog id="followerDial" class="modal modal-bottom sm:modal-middle astro-bhxv2qxz"> <div class="modal-box astro-bhxv2qxz"> <div class="container astro-pq7vq4sb"> <span class="text-sm astro-pq7vq4sb">
First <span id="totalFollowers" class="astro-pq7vq4sb">30</span> Follower Lists :
</span> <ul id="listContainer" class="astro-pq7vq4sb">
    <a href="https://github.com/Yudhass">
    <li class="list" style="border:none; outline: 0px; display: flex; flex-wrap: no-wrap; background: #1d232a; color:#a6adbb; padding: 0 5px 3px 5px; border-radius: 5px; box-shadow:0 1px 1px #0007">
  <div class="avatar" style="width: 20px; height: 20px; margin-top: 8px;">
  <div class="rounded-full">
    <img src="https://avatars.githubusercontent.com/u/106727245?v=4" alt="follower_avatar">
  </div>
  </div>
  <div class="name">
    <span style="margin-left:5px;" id="username" class="text-sm lg:text-md">
    Yudhass
    </span>
  </div>
    </li>
    </a>
     
    <a href="https://github.com/ka-shifuka">
    <li class="list" style="border:none; outline: 0px; display: flex; flex-wrap: no-wrap; background: #1d232a; color:#a6adbb; padding: 0 5px 3px 5px; border-radius: 5px; box-shadow:0 1px 1px #0007">
  <div class="avatar" style="width: 20px; height: 20px; margin-top: 8px;">
  <div class="rounded-full">
    <img src="https://avatars.githubusercontent.com/u/130840352?v=4" alt="follower_avatar">
  </div>
  </div>
  <div class="name">
    <span style="margin-left:5px;" id="username" class="text-sm lg:text-md">
    ka-shifuka
    </span>
  </div>
    </li>
    </a>
     
    <a href="https://github.com/Charles-Chrismann">
    <li class="list" style="border:none; outline: 0px; display: flex; flex-wrap: no-wrap; background: #1d232a; color:#a6adbb; padding: 0 5px 3px 5px; border-radius: 5px; box-shadow:0 1px 1px #0007">
  <div class="avatar" style="width: 20px; height: 20px; margin-top: 8px;">
  <div class="rounded-full">
    <img src="https://avatars.githubusercontent.com/u/78157563?v=4" alt="follower_avatar">
  </div>
  </div>
  <div class="name">
    <span style="margin-left:5px;" id="username" class="text-sm lg:text-md">
    Charles-Chrismann
    </span>
  </div>
    </li>
    </a>
     
    <a href="https://github.com/Dayrqct">
    <li class="list" style="border:none; outline: 0px; display: flex; flex-wrap: no-wrap; background: #1d232a; color:#a6adbb; padding: 0 5px 3px 5px; border-radius: 5px; box-shadow:0 1px 1px #0007">
  <div class="avatar" style="width: 20px; height: 20px; margin-top: 8px;">
  <div class="rounded-full">
    <img src="https://avatars.githubusercontent.com/u/112631688?v=4" alt="follower_avatar">
  </div>
  </div>
  <div class="name">
    <span style="margin-left:5px;" id="username" class="text-sm lg:text-md">
    Dayrqct
    </span>
  </div>
    </li>
    </a>
     
    <a href="https://github.com/mhdxr">
    <li class="list" style="border:none; outline: 0px; display: flex; flex-wrap: no-wrap; background: #1d232a; color:#a6adbb; padding: 0 5px 3px 5px; border-radius: 5px; box-shadow:0 1px 1px #0007">
  <div class="avatar" style="width: 20px; height: 20px; margin-top: 8px;">
  <div class="rounded-full">
    <img src="https://avatars.githubusercontent.com/u/40128140?v=4" alt="follower_avatar">
  </div>
  </div>
  <div class="name">
    <span style="margin-left:5px;" id="username" class="text-sm lg:text-md">
    mhdxr
    </span>
  </div>
    </li>
    </a>
     
    <a href="https://github.com/imamrasyid">
    <li class="list" style="border:none; outline: 0px; display: flex; flex-wrap: no-wrap; background: #1d232a; color:#a6adbb; padding: 0 5px 3px 5px; border-radius: 5px; box-shadow:0 1px 1px #0007">
  <div class="avatar" style="width: 20px; height: 20px; margin-top: 8px;">
  <div class="rounded-full">
    <img src="https://avatars.githubusercontent.com/u/64980773?v=4" alt="follower_avatar">
  </div>
  </div>
  <div class="name">
    <span style="margin-left:5px;" id="username" class="text-sm lg:text-md">
    imamrasyid
    </span>
  </div>
    </li>
    </a>
     
    <a href="https://github.com/iielse">
    <li class="list" style="border:none; outline: 0px; display: flex; flex-wrap: no-wrap; background: #1d232a; color:#a6adbb; padding: 0 5px 3px 5px; border-radius: 5px; box-shadow:0 1px 1px #0007">
  <div class="avatar" style="width: 20px; height: 20px; margin-top: 8px;">
  <div class="rounded-full">
    <img src="https://avatars.githubusercontent.com/u/7521943?v=4" alt="follower_avatar">
  </div>
  </div>
  <div class="name">
    <span style="margin-left:5px;" id="username" class="text-sm lg:text-md">
    iielse
    </span>
  </div>
    </li>
    </a>
     
    <a href="https://github.com/mol3x">
    <li class="list" style="border:none; outline: 0px; display: flex; flex-wrap: no-wrap; background: #1d232a; color:#a6adbb; padding: 0 5px 3px 5px; border-radius: 5px; box-shadow:0 1px 1px #0007">
  <div class="avatar" style="width: 20px; height: 20px; margin-top: 8px;">
  <div class="rounded-full">
    <img src="https://avatars.githubusercontent.com/u/72003120?v=4" alt="follower_avatar">
  </div>
  </div>
  <div class="name">
    <span style="margin-left:5px;" id="username" class="text-sm lg:text-md">
    mol3x
    </span>
  </div>
    </li>
    </a>
     
    <a href="https://github.com/Okeokeokecom12">
    <li class="list" style="border:none; outline: 0px; display: flex; flex-wrap: no-wrap; background: #1d232a; color:#a6adbb; padding: 0 5px 3px 5px; border-radius: 5px; box-shadow:0 1px 1px #0007">
  <div class="avatar" style="width: 20px; height: 20px; margin-top: 8px;">
  <div class="rounded-full">
    <img src="https://avatars.githubusercontent.com/u/150335398?v=4" alt="follower_avatar">
  </div>
  </div>
  <div class="name">
    <span style="margin-left:5px;" id="username" class="text-sm lg:text-md">
    Okeokeokecom12
    </span>
  </div>
    </li>
    </a>
     
    <a href="https://github.com/rizxyu">
    <li class="list" style="border:none; outline: 0px; display: flex; flex-wrap: no-wrap; background: #1d232a; color:#a6adbb; padding: 0 5px 3px 5px; border-radius: 5px; box-shadow:0 1px 1px #0007">
  <div class="avatar" style="width: 20px; height: 20px; margin-top: 8px;">
  <div class="rounded-full">
    <img src="https://avatars.githubusercontent.com/u/88314302?v=4" alt="follower_avatar">
  </div>
  </div>
  <div class="name">
    <span style="margin-left:5px;" id="username" class="text-sm lg:text-md">
    rizxyu
    </span>
  </div>
    </li>
    </a>
     
    <a href="https://github.com/MuhammadRestu999">
    <li class="list" style="border:none; outline: 0px; display: flex; flex-wrap: no-wrap; background: #1d232a; color:#a6adbb; padding: 0 5px 3px 5px; border-radius: 5px; box-shadow:0 1px 1px #0007">
  <div class="avatar" style="width: 20px; height: 20px; margin-top: 8px;">
  <div class="rounded-full">
    <img src="https://avatars.githubusercontent.com/u/83255517?v=4" alt="follower_avatar">
  </div>
  </div>
  <div class="name">
    <span style="margin-left:5px;" id="username" class="text-sm lg:text-md">
    MuhammadRestu999
    </span>
  </div>
    </li>
    </a>
     
    <a href="https://github.com/SHOAIB-22">
    <li class="list" style="border:none; outline: 0px; display: flex; flex-wrap: no-wrap; background: #1d232a; color:#a6adbb; padding: 0 5px 3px 5px; border-radius: 5px; box-shadow:0 1px 1px #0007">
  <div class="avatar" style="width: 20px; height: 20px; margin-top: 8px;">
  <div class="rounded-full">
    <img src="https://avatars.githubusercontent.com/u/114448781?v=4" alt="follower_avatar">
  </div>
  </div>
  <div class="name">
    <span style="margin-left:5px;" id="username" class="text-sm lg:text-md">
    SHOAIB-22
    </span>
  </div>
    </li>
    </a>
     
    <a href="https://github.com/AA00305">
    <li class="list" style="border:none; outline: 0px; display: flex; flex-wrap: no-wrap; background: #1d232a; color:#a6adbb; padding: 0 5px 3px 5px; border-radius: 5px; box-shadow:0 1px 1px #0007">
  <div class="avatar" style="width: 20px; height: 20px; margin-top: 8px;">
  <div class="rounded-full">
    <img src="https://avatars.githubusercontent.com/u/57448519?v=4" alt="follower_avatar">
  </div>
  </div>
  <div class="name">
    <span style="margin-left:5px;" id="username" class="text-sm lg:text-md">
    AA00305
    </span>
  </div>
    </li>
    </a>
     
    <a href="https://github.com/muhismail015">
    <li class="list" style="border:none; outline: 0px; display: flex; flex-wrap: no-wrap; background: #1d232a; color:#a6adbb; padding: 0 5px 3px 5px; border-radius: 5px; box-shadow:0 1px 1px #0007">
  <div class="avatar" style="width: 20px; height: 20px; margin-top: 8px;">
  <div class="rounded-full">
    <img src="https://avatars.githubusercontent.com/u/72483245?v=4" alt="follower_avatar">
  </div>
  </div>
  <div class="name">
    <span style="margin-left:5px;" id="username" class="text-sm lg:text-md">
    muhismail015
    </span>
  </div>
    </li>
    </a>
     
    <a href="https://github.com/maskoko69">
    <li class="list" style="border:none; outline: 0px; display: flex; flex-wrap: no-wrap; background: #1d232a; color:#a6adbb; padding: 0 5px 3px 5px; border-radius: 5px; box-shadow:0 1px 1px #0007">
  <div class="avatar" style="width: 20px; height: 20px; margin-top: 8px;">
  <div class="rounded-full">
    <img src="https://avatars.githubusercontent.com/u/52847534?v=4" alt="follower_avatar">
  </div>
  </div>
  <div class="name">
    <span style="margin-left:5px;" id="username" class="text-sm lg:text-md">
    maskoko69
    </span>
  </div>
    </li>
    </a>
     
    <a href="https://github.com/Ahmadariyadii">
    <li class="list" style="border:none; outline: 0px; display: flex; flex-wrap: no-wrap; background: #1d232a; color:#a6adbb; padding: 0 5px 3px 5px; border-radius: 5px; box-shadow:0 1px 1px #0007">
  <div class="avatar" style="width: 20px; height: 20px; margin-top: 8px;">
  <div class="rounded-full">
    <img src="https://avatars.githubusercontent.com/u/115801477?v=4" alt="follower_avatar">
  </div>
  </div>
  <div class="name">
    <span style="margin-left:5px;" id="username" class="text-sm lg:text-md">
    Ahmadariyadii
    </span>
  </div>
    </li>
    </a>
     
    <a href="https://github.com/Shafwan-8">
    <li class="list" style="border:none; outline: 0px; display: flex; flex-wrap: no-wrap; background: #1d232a; color:#a6adbb; padding: 0 5px 3px 5px; border-radius: 5px; box-shadow:0 1px 1px #0007">
  <div class="avatar" style="width: 20px; height: 20px; margin-top: 8px;">
  <div class="rounded-full">
    <img src="https://avatars.githubusercontent.com/u/154722981?v=4" alt="follower_avatar">
  </div>
  </div>
  <div class="name">
    <span style="margin-left:5px;" id="username" class="text-sm lg:text-md">
    Shafwan-8
    </span>
  </div>
    </li>
    </a>
     
    <a href="https://github.com/juntralala">
    <li class="list" style="border:none; outline: 0px; display: flex; flex-wrap: no-wrap; background: #1d232a; color:#a6adbb; padding: 0 5px 3px 5px; border-radius: 5px; box-shadow:0 1px 1px #0007">
  <div class="avatar" style="width: 20px; height: 20px; margin-top: 8px;">
  <div class="rounded-full">
    <img src="https://avatars.githubusercontent.com/u/148829500?v=4" alt="follower_avatar">
  </div>
  </div>
  <div class="name">
    <span style="margin-left:5px;" id="username" class="text-sm lg:text-md">
    juntralala
    </span>
  </div>
    </li>
    </a>
     
    <a href="https://github.com/ahnafi">
    <li class="list" style="border:none; outline: 0px; display: flex; flex-wrap: no-wrap; background: #1d232a; color:#a6adbb; padding: 0 5px 3px 5px; border-radius: 5px; box-shadow:0 1px 1px #0007">
  <div class="avatar" style="width: 20px; height: 20px; margin-top: 8px;">
  <div class="rounded-full">
    <img src="https://avatars.githubusercontent.com/u/112955346?v=4" alt="follower_avatar">
  </div>
  </div>
  <div class="name">
    <span style="margin-left:5px;" id="username" class="text-sm lg:text-md">
    ahnafi
    </span>
  </div>
    </li>
    </a>
     
    <a href="https://github.com/TheSboon">
    <li class="list" style="border:none; outline: 0px; display: flex; flex-wrap: no-wrap; background: #1d232a; color:#a6adbb; padding: 0 5px 3px 5px; border-radius: 5px; box-shadow:0 1px 1px #0007">
  <div class="avatar" style="width: 20px; height: 20px; margin-top: 8px;">
  <div class="rounded-full">
    <img src="https://avatars.githubusercontent.com/u/113154373?v=4" alt="follower_avatar">
  </div>
  </div>
  <div class="name">
    <span style="margin-left:5px;" id="username" class="text-sm lg:text-md">
    TheSboon
    </span>
  </div>
    </li>
    </a>
     
    <a href="https://github.com/ibrahimalanshor">
    <li class="list" style="border:none; outline: 0px; display: flex; flex-wrap: no-wrap; background: #1d232a; color:#a6adbb; padding: 0 5px 3px 5px; border-radius: 5px; box-shadow:0 1px 1px #0007">
  <div class="avatar" style="width: 20px; height: 20px; margin-top: 8px;">
  <div class="rounded-full">
    <img src="https://avatars.githubusercontent.com/u/70515810?v=4" alt="follower_avatar">
  </div>
  </div>
  <div class="name">
    <span style="margin-left:5px;" id="username" class="text-sm lg:text-md">
    ibrahimalanshor
    </span>
  </div>
    </li>
    </a>
     
    <a href="https://github.com/Zayidx">
    <li class="list" style="border:none; outline: 0px; display: flex; flex-wrap: no-wrap; background: #1d232a; color:#a6adbb; padding: 0 5px 3px 5px; border-radius: 5px; box-shadow:0 1px 1px #0007">
  <div class="avatar" style="width: 20px; height: 20px; margin-top: 8px;">
  <div class="rounded-full">
    <img src="https://avatars.githubusercontent.com/u/128061930?v=4" alt="follower_avatar">
  </div>
  </div>
  <div class="name">
    <span style="margin-left:5px;" id="username" class="text-sm lg:text-md">
    Zayidx
    </span>
  </div>
    </li>
    </a>
     
    <a href="https://github.com/IlhamApriansyah">
    <li class="list" style="border:none; outline: 0px; display: flex; flex-wrap: no-wrap; background: #1d232a; color:#a6adbb; padding: 0 5px 3px 5px; border-radius: 5px; box-shadow:0 1px 1px #0007">
  <div class="avatar" style="width: 20px; height: 20px; margin-top: 8px;">
  <div class="rounded-full">
    <img src="https://avatars.githubusercontent.com/u/90132863?v=4" alt="follower_avatar">
  </div>
  </div>
  <div class="name">
    <span style="margin-left:5px;" id="username" class="text-sm lg:text-md">
    IlhamApriansyah
    </span>
  </div>
    </li>
    </a>
     
    <a href="https://github.com/etherealxx">
    <li class="list" style="border:none; outline: 0px; display: flex; flex-wrap: no-wrap; background: #1d232a; color:#a6adbb; padding: 0 5px 3px 5px; border-radius: 5px; box-shadow:0 1px 1px #0007">
  <div class="avatar" style="width: 20px; height: 20px; margin-top: 8px;">
  <div class="rounded-full">
    <img src="https://avatars.githubusercontent.com/u/64251396?v=4" alt="follower_avatar">
  </div>
  </div>
  <div class="name">
    <span style="margin-left:5px;" id="username" class="text-sm lg:text-md">
    etherealxx
    </span>
  </div>
    </li>
    </a>
     
    <a href="https://github.com/Lputrri">
    <li class="list" style="border:none; outline: 0px; display: flex; flex-wrap: no-wrap; background: #1d232a; color:#a6adbb; padding: 0 5px 3px 5px; border-radius: 5px; box-shadow:0 1px 1px #0007">
  <div class="avatar" style="width: 20px; height: 20px; margin-top: 8px;">
  <div class="rounded-full">
    <img src="https://avatars.githubusercontent.com/u/89991061?v=4" alt="follower_avatar">
  </div>
  </div>
  <div class="name">
    <span style="margin-left:5px;" id="username" class="text-sm lg:text-md">
    Lputrri
    </span>
  </div>
    </li>
    </a>
     
    <a href="https://github.com/Hurricane4869">
    <li class="list" style="border:none; outline: 0px; display: flex; flex-wrap: no-wrap; background: #1d232a; color:#a6adbb; padding: 0 5px 3px 5px; border-radius: 5px; box-shadow:0 1px 1px #0007">
  <div class="avatar" style="width: 20px; height: 20px; margin-top: 8px;">
  <div class="rounded-full">
    <img src="https://avatars.githubusercontent.com/u/89368546?v=4" alt="follower_avatar">
  </div>
  </div>
  <div class="name">
    <span style="margin-left:5px;" id="username" class="text-sm lg:text-md">
    Hurricane4869
    </span>
  </div>
    </li>
    </a>
     
    <a href="https://github.com/ikhsan3adi">
    <li class="list" style="border:none; outline: 0px; display: flex; flex-wrap: no-wrap; background: #1d232a; color:#a6adbb; padding: 0 5px 3px 5px; border-radius: 5px; box-shadow:0 1px 1px #0007">
  <div class="avatar" style="width: 20px; height: 20px; margin-top: 8px;">
  <div class="rounded-full">
    <img src="https://avatars.githubusercontent.com/u/93766033?v=4" alt="follower_avatar">
  </div>
  </div>
  <div class="name">
    <span style="margin-left:5px;" id="username" class="text-sm lg:text-md">
    ikhsan3adi
    </span>
  </div>
    </li>
    </a>
     
    <a href="https://github.com/mulyadiusman464426">
    <li class="list" style="border:none; outline: 0px; display: flex; flex-wrap: no-wrap; background: #1d232a; color:#a6adbb; padding: 0 5px 3px 5px; border-radius: 5px; box-shadow:0 1px 1px #0007">
  <div class="avatar" style="width: 20px; height: 20px; margin-top: 8px;">
  <div class="rounded-full">
    <img src="https://avatars.githubusercontent.com/u/142065055?v=4" alt="follower_avatar">
  </div>
  </div>
  <div class="name">
    <span style="margin-left:5px;" id="username" class="text-sm lg:text-md">
    mulyadiusman464426
    </span>
  </div>
    </li>
    </a>
     
    <a href="https://github.com/rjbenningtona">
    <li class="list" style="border:none; outline: 0px; display: flex; flex-wrap: no-wrap; background: #1d232a; color:#a6adbb; padding: 0 5px 3px 5px; border-radius: 5px; box-shadow:0 1px 1px #0007">
  <div class="avatar" style="width: 20px; height: 20px; margin-top: 8px;">
  <div class="rounded-full">
    <img src="https://avatars.githubusercontent.com/u/65931218?v=4" alt="follower_avatar">
  </div>
  </div>
  <div class="name">
    <span style="margin-left:5px;" id="username" class="text-sm lg:text-md">
    rjbenningtona
    </span>
  </div>
    </li>
    </a>
     
    <a href="https://github.com/bassbestb">
    <li class="list" style="border:none; outline: 0px; display: flex; flex-wrap: no-wrap; background: #1d232a; color:#a6adbb; padding: 0 5px 3px 5px; border-radius: 5px; box-shadow:0 1px 1px #0007">
  <div class="avatar" style="width: 20px; height: 20px; margin-top: 8px;">
  <div class="rounded-full">
    <img src="https://avatars.githubusercontent.com/u/37255588?v=4" alt="follower_avatar">
  </div>
  </div>
  <div class="name">
    <span style="margin-left:5px;" id="username" class="text-sm lg:text-md">
    bassbestb
    </span>
  </div>
    </li>
    </a>
     </ul> </div> <script type="module">
function shuffle(array) {
  let index = array.length;
  while(index !=0) {
  let randomIndex = Math.floor(Math.random() * index)
  index--;
  
  [array[index], array[randomIndex]] = [array[randomIndex], array[index]]
  }
}


fetch(`https://api.github.com/users/mininxd/followers`).then(res => {return res.json()})
 .then(data => {
   listContainer.innerHTML = "";
   let i = 0;
   
   let arr = [...Array(data.length).keys()]
   shuffle(arr);
   
   let totalEl = document.getElementById("totalFollowers");
   totalEl.innerHTML = data.length;
   
   for(i; i < data.length; i++) {
  let pict = data[arr[i]].avatar_url;
  let name = data[arr[i]].login;
     listContainer.innerHTML += `
    <a href=${data[arr[i]].html_url}>
    <li class="list" style='border:none; outline: 0px; display: flex; flex-wrap: no-wrap; background: #1d232a; color:#a6adbb; padding: 0 5px 3px 5px; border-radius: 5px; box-shadow:0 1px 1px #0007'>
  <div class="avatar" style="width: 20px; height: 20px; margin-top: 8px;">
  <div class="rounded-full">
    <img src=${pict} alt="follower_avatar">
  </div>
  </div>
  <div class="name">
    <span style="margin-left:5px;" id="username" class="text-sm lg:text-md">
    ${name}
    </span>
  </div>
    </li>
    </a>
     `
   }
 })
</script>  <div class="modal-action astro-bhxv2qxz"> <form method="dialog" class="astro-bhxv2qxz"> <button class="btn button astro-bhxv2qxz">Tutup</button> </form> </div> </div> </dialog> <script type="module">
 fetch("https://api.github.com/users/mininxd", {
 }).then(res => {return res.json()})
 .then(data => {
   stats.innerHTML = ` 
   <div class="stat">
   <a href="https://github.com/mininxd?tab=repositories">
   <div class="stat-title">Public Repo</div>
    <div class="stat-value">${data.public_repos}</div>
    <div class="stat-desc"></div>
   </a>
   </div>
   
   <div onClick="followerDial.showModal();" class="stat">
   <div class="stat-title">Followers</div>
    <div class="stat-value">${data.followers}
    </div>
    <div class="stat-desc"></div>
   </div>
   
   <div class="stat">
   <div class="stat-title">Following</div>
    <div class="stat-value">${data.following}</div>
    <div class="stat-desc"></div>
   </div>
   `
 }).catch(e => {
 stats.innerHTML = "error" + e;
 alert(e)
 })
</script>   </div>  <!--
	<Pages header="Social Media">
	  <Socmed></Socmed>
	</Pages>
	--> <div class="bottom astro-sz7xmlte"> <div class="left astro-sz7xmlte"> <h4 class="astro-sz7xmlte"> <br class="astro-sz7xmlte">
Build with <a href="https://astro.build" class="astro-sz7xmlte">Astro 🚀</a> </h4> </div> <h4 class="astro-sz7xmlte">
© mininxd <br class="astro-sz7xmlte"> 2024 - Presents.
</h4> </div>  </main>   <script type="module">
  import xdtoast from 'https://unpkg.com/xdtoast@latest/dist/xdtoast.js';
  import {MarkdownBlock, MarkdownSpan, MarkdownElement} from "https://md-block.verou.me/md-block.js";


  let toast = new xdtoast({
  width:'fit-content',
  time: 2.5,
  position:'top-right'
  });
  function randomize(arr) {
  return arr[Math.floor(Math.random() * arr.length)];
}

let icons = [
  'download','search','close','visibility','star','check_circle', 'radio_button_unchecked','radio_button_checked']
let header = [
  'Welcome',
  'Good Morning',
  'Daily Update',
  'hi',
  'hello',
  'xd',
  'Greetings!',
  'Rise and Shine!',
  'Quick Update'
];

let content = [
  'Here’s your daily toast notification!',
  'Are you prepared for today’s tasks?',
  'Not too shabby, right?',
  'Did you spot the UFO today?',
    'Your morning toast is ready to serve!',
  'Ready to tackle today’s challenges?',
  'Looking good today!',
  'Here’s the latest content update just for you.',
  'This is the content message you’ve received.'
];

let style = [
  'light','dark','success','warning','danger','info'
  ]
  
  toast.push({
    icon: "",
    title: "Hey There  👋",
    content: "",
    style: "dark"
 });
  xdtoastBtn.addEventListener('click', () =>
  {
  toast.push({
    icon: randomize(icons),
    title: randomize(header),
    content: randomize(content),
    style: randomize(style)
 });
})
</script><div class="toast-notification toast-notification-dark toast-notification-top-right" data-transition-state="opening" style="top: 0px; right: 20px; transition: transform 0.25s ease-out 0s; transform: translate(0px, 20px);">
        <div class="toast-notification-wrapper">
            <h3 class="toast-notification-header"><span class="toast-notification-icon material-symbols-outlined"></span> Hey There  👋</h3>
            
        </div>
        <button class="toast-notification-close">×</button>
    </div></body></html>