Posandu/uikit.html

## uikit.html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *,
        :after,
        :before {
            margin: 0;
            padding: 0;
            font-family: inherit;
        }

        body {
            min-height: 60vh;
            max-width: 700px;
            padding: 10px;
            margin: 20px auto;
            background: #1c1b22;
            color: #fff;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif
        }

        .btn {
            background: #0560ef;
            color: white;
            font-size: 12px;
            border-radius: 50px;
            border: none;
            transition: all 0.3s ease;
            cursor: pointer;
            position: relative;
            display: inline-grid;
            place-content: center;
            padding: 10px 18px;
            user-select: none;
        }

        .btn:hover {
            background: #0051d1;
        }

        .btn:active {
            background: #0045b2;
        }

        .dialog {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: none;
            background: #181b22c4;
            z-index: 999;
            align-items: center;
            justify-content: center;
        }

        .dialog.open {
            display: flex;
        }

        .dialog__content {
            background: #242b3b;
            padding: 23px 36px;
            border-radius: 20px;
            transition: all 0.2s ease;
            animation: dialog_in 0.2s ease forwards;
            max-width: 300px;
            max-height: 76vh;
            overflow: auto;
        }

        @keyframes dialog_in {
            0% {
                transform: scale(0.9);
                opacity: 0;
            }

            100% {
                transform: scale(1);
            }
        }

        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
            margin-bottom: 14px;
        }

        p {
            margin: 20px 0px;
        }


        .input {
            display: flex;
            flex-direction: column;
            position: relative;
        }

        .input__label {
            font-size: 15px;
            position: absolute;
            left: 0;
            padding: 10px 14px;
            width: 100%;
            top: 0;
            border-radius: 50px;
            border: 2px solid transparent;
            transition: all 0.2s ease;
            user-select: none;
        }

        .input__field {
            padding: 10px 14px;
            font-size: 15px;
            border-radius: 50px;
            border: 2px solid #292833;
            background: #23212b;
            color: transparent;
            outline: none;
            transition: all 0.2s ease;
            width: 100%;
        }

        .input__label+.input__field::placeholder {
            color: transparent;
        }

        .input__field:hover {
            border-color: #32303d;
        }

        .input__field:focus {
            border-color: #0560ef;
        }

        .input__label.float {
            font-size: 12px;
            margin-top: -20px;
        }

        .input__label.float+.input__field {
            color: #fff;
        }

        .input__label.float+.input__field::placeholder {
            color: revert;
        }


        .toastbox {
            position: fixed;
            bottom: 30px;
            left: 18px;
        }

        .toast {
            background: #19263e;
            border: 1px solid #1c2a45;
            padding: 15px 23px;
            font-size: 14px;
            border-radius: 10px;
            transition: all 0.2s ease;
            margin-top: 10px;
            display: block;
            color: white;
            animation: toast_in 0.2s ease forwards;
        }

        @keyframes toast_in {
            0% {
                transform: scale(0.9);
                opacity: 0;
            }

            100% {
                transform: scale(1);
            }
        }

        .toast:hover {
            background: #1d2c47;
        }

        hr {
            margin: 17px 50px;
            border: none;
            border-bottom: 1px solid #5e6985;
            transition: all 0.2s ease;
        }

        details {
            background: #23212b;
            padding: 14px 18px;
            border-radius: 10px;
            border: 1px solid transparent;
            transition: all 0.2s ease;
            width: 100%;
        }

        details:hover {
            background: #282532;
        }

        summary {
            user-select: none;
        }

        details[open]:focus-within,
        details[open]:focus {
            border: 1px solid #0560ef;
        }

        .effect {
            position: relative;
            overflow: hidden;
        }

        .ripple {
            position: absolute;
            border-radius: 50%;
            background-color: rgba(255, 255, 255, 0.397);
            transform: scale(0);
            animation: ripple 1s cubic-bezier(0.075, 0.82, 0.165, 1) forwards;
            pointer-events: none;
            transition: all 0.2s ease;
        }

        @keyframes ripple {
            0% {
                transform: scale(0);
            }

            100% {
                transform: scale(1);
            }
        }
    </style>
</head>

<body>
    <button class="btn" a>
        Hello World
    </button>

    <div class="dialog">
        <div class="dialog__overlay"></div>

        <div class="dialog__content">
            <h1>Hello World</h1>
            <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt totam laudantium quasi, fugiat aliquid
                rem numquam, explicabo quis sunt accusamus, fuga harum atque veritatis sequi mollitia facere est ipsum
                eligendi. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Facilis explicabo harum non fugiat
                doloremque accusantium. Rerum, voluptatibus animi. Sunt iste omnis debitis dolor repellendus quo ad
                facilis veniam, explicabo dolore!
            </p>
            <button class="btn" a>Close</button>
        </div>
    </div>

    <brr></brr>
    <br>
    <br>

    <hr>

    <div class="input">
        <label for="input_i" class="input__label">Name</label>
        <input type="text" id="input_i" class="input__field" placeholder="Enter your name">
    </div>

    <br>

    <div class="toastbox"></div>

    <button onclick="toast('world')" class="btn">Toast!</button>

    <br><br>

    <details>
        <summary>Details</summary>
        <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt totam laudantium quasi, fugiat aliquid
            rem numquam, explicabo quis sunt accusamus, fuga harum atque veritatis sequi mollitia facere est ipsum
            eligendi. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Facilis explicabo harum non fugiat
        </p>
    </details>

    <br><br>

    <button class="btn effect">button</button>

    <script>
        document.querySelectorAll('.btn[a]').forEach(el => (el.onclick = e => {
            document.querySelector('.dialog').classList.toggle('open');
        }))

        document.querySelectorAll(".input").forEach(el => {
            const input = el.querySelector(".input__field");
            const label = el.querySelector(".input__label");

            const floatLabel = () => label.classList.add("float");
            const removeFloat = () => !input.value && label.classList.remove("float");

            input.addEventListener("focus", floatLabel);
            input.addEventListener("blur", removeFloat);

            input.value && floatLabel();
        })

        const noop = () => { };

        const toast = (text, onClick = noop, time = 6000, renderFn = noop) => {
            const toast = document.createElement("button");
            toast.classList.add("toast");

            toast.innerHTML = text;

            renderFn(toast);

            toast.onclick = () => {
                toast.remove();
                onClick();
            }

            document.querySelector(".toastbox").appendChild(toast);

            let timeAfter = time;
            let mouseover = false;

            toast.onmouseover = () => (mouseover = true);
            toast.onmouseout = () => (mouseover = false);

            if (time === "never") {
                return;
            }

            const interval = setInterval(() => {
                // If mouse is not over the toast
                if (!mouseover) {
                    timeAfter -= 100;
                }
                else {
                    timeAfter = time;
                }

                if (timeAfter <= 0) {
                    clearInterval(interval);
                    toast.remove();
                }
            }, 100);
        }

        const attachRipple = element => {
            let circle;
            let rippling = false;

            const findFurthestPoint = (clickPointX, elementWidth, offsetX, clickPointY, elementHeight, offsetY) => {
                const x = clickPointX - offsetX > elementWidth / 2 ? 0 : elementWidth;
                const y = clickPointY - offsetY > elementHeight / 2 ? 0 : elementHeight;
                const d = Math.hypot(x - (clickPointX - offsetX), y - (clickPointY - offsetY));
                return d;
            }

            element.onpointerdown = (e, _) => {
                console.log(_);
                if (rippling) return;
                rippling = true;

                const rect = e.target.getBoundingClientRect();
                const radius = findFurthestPoint(e.clientX, e.target.offsetWidth, rect.left, e.clientY, e.target.offsetHeight, rect.top);

                circle = document.createElement("div");
                circle.classList.add("ripple");

                circle.style.left = e.clientX - rect.left - radius + "px";
                circle.style.top = e.clientY - rect.top - radius + "px";
                circle.style.width = circle.style.height = radius * 2 + "px";

                e.target.appendChild(circle);
            }

            "pointerup mouseleave dragleave touchmove touchend touchcancel".split(" ").forEach(event => {
                element.addEventListener(event, () => {
                    if (circle) {
                        // Remove ripple after animation is finished
                        setTimeout(() => {
                            circle.style.opacity = 0;
                            rippling = false;
                        }, 400);
                    }
                });
            });
        }

        document.querySelectorAll(".effect").forEach(el => attachRipple(el));

    </script>


</body>

</html>
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
	*,
	:after,
	:before {
	margin: 0;
	padding: 0;
	font-family: inherit;
	}

	body {
	min-height: 60vh;
	max-width: 700px;
	padding: 10px;
	margin: 20px auto;
	background: #1c1b22;
	color: #fff;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif
	}

	.btn {
	background: #0560ef;
	color: white;
	font-size: 12px;
	border-radius: 50px;
	border: none;
	transition: all 0.3s ease;
	cursor: pointer;
	position: relative;
	display: inline-grid;
	place-content: center;
	padding: 10px 18px;
	user-select: none;
	}

	.btn:hover {
	background: #0051d1;
	}

	.btn:active {
	background: #0045b2;
	}

	.dialog {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: none;
	background: #181b22c4;
	z-index: 999;
	align-items: center;
	justify-content: center;
	}

	.dialog.open {
	display: flex;
	}

	.dialog__content {
	background: #242b3b;
	padding: 23px 36px;
	border-radius: 20px;
	transition: all 0.2s ease;
	animation: dialog_in 0.2s ease forwards;
	max-width: 300px;
	max-height: 76vh;
	overflow: auto;
	}

	@keyframes dialog_in {
	0% {
	transform: scale(0.9);
	opacity: 0;
	}

	100% {
	transform: scale(1);
	}
	}

	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
	margin-bottom: 14px;
	}

	p {
	margin: 20px 0px;
	}


	.input {
	display: flex;
	flex-direction: column;
	position: relative;
	}

	.input__label {
	font-size: 15px;
	position: absolute;
	left: 0;
	padding: 10px 14px;
	width: 100%;
	top: 0;
	border-radius: 50px;
	border: 2px solid transparent;
	transition: all 0.2s ease;
	user-select: none;
	}

	.input__field {
	padding: 10px 14px;
	font-size: 15px;
	border-radius: 50px;
	border: 2px solid #292833;
	background: #23212b;
	color: transparent;
	outline: none;
	transition: all 0.2s ease;
	width: 100%;
	}

	.input__label+.input__field::placeholder {
	color: transparent;
	}

	.input__field:hover {
	border-color: #32303d;
	}

	.input__field:focus {
	border-color: #0560ef;
	}

	.input__label.float {
	font-size: 12px;
	margin-top: -20px;
	}

	.input__label.float+.input__field {
	color: #fff;
	}

	.input__label.float+.input__field::placeholder {
	color: revert;
	}


	.toastbox {
	position: fixed;
	bottom: 30px;
	left: 18px;
	}

	.toast {
	background: #19263e;
	border: 1px solid #1c2a45;
	padding: 15px 23px;
	font-size: 14px;
	border-radius: 10px;
	transition: all 0.2s ease;
	margin-top: 10px;
	display: block;
	color: white;
	animation: toast_in 0.2s ease forwards;
	}

	@keyframes toast_in {
	0% {
	transform: scale(0.9);
	opacity: 0;
	}

	100% {
	transform: scale(1);
	}
	}

	.toast:hover {
	background: #1d2c47;
	}

	hr {
	margin: 17px 50px;
	border: none;
	border-bottom: 1px solid #5e6985;
	transition: all 0.2s ease;
	}

	details {
	background: #23212b;
	padding: 14px 18px;
	border-radius: 10px;
	border: 1px solid transparent;
	transition: all 0.2s ease;
	width: 100%;
	}

	details:hover {
	background: #282532;
	}

	summary {
	user-select: none;
	}

	details[open]:focus-within,
	details[open]:focus {
	border: 1px solid #0560ef;
	}

	.effect {
	position: relative;
	overflow: hidden;
	}

	.ripple {
	position: absolute;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.397);
	transform: scale(0);
	animation: ripple 1s cubic-bezier(0.075, 0.82, 0.165, 1) forwards;
	pointer-events: none;
	transition: all 0.2s ease;
	}

	@keyframes ripple {
	0% {
	transform: scale(0);
	}

	100% {
	transform: scale(1);
	}
	}
	</style>
	</head>

	<body>
	<button class="btn" a>
	Hello World
	</button>

	<div class="dialog">
	<div class="dialog__overlay"></div>

	<div class="dialog__content">
	<h1>Hello World</h1>
	<p>
	Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt totam laudantium quasi, fugiat aliquid
	rem numquam, explicabo quis sunt accusamus, fuga harum atque veritatis sequi mollitia facere est ipsum
	eligendi. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Facilis explicabo harum non fugiat
	doloremque accusantium. Rerum, voluptatibus animi. Sunt iste omnis debitis dolor repellendus quo ad
	facilis veniam, explicabo dolore!
	</p>
	<button class="btn" a>Close</button>
	</div>
	</div>

	<brr></brr>
	<br>
	<br>

	<hr>

	<div class="input">
	<label for="input_i" class="input__label">Name</label>
	<input type="text" id="input_i" class="input__field" placeholder="Enter your name">
	</div>

	<br>

	<div class="toastbox"></div>

	<button onclick="toast('world')" class="btn">Toast!</button>

	<br><br>

	<details>
	<summary>Details</summary>
	<p>
	Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt totam laudantium quasi, fugiat aliquid
	rem numquam, explicabo quis sunt accusamus, fuga harum atque veritatis sequi mollitia facere est ipsum
	eligendi. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Facilis explicabo harum non fugiat
	</p>
	</details>

	<br><br>

	<button class="btn effect">button</button>

	<script>
	document.querySelectorAll('.btn[a]').forEach(el => (el.onclick = e => {
	document.querySelector('.dialog').classList.toggle('open');
	}))

	document.querySelectorAll(".input").forEach(el => {
	const input = el.querySelector(".input__field");
	const label = el.querySelector(".input__label");

	const floatLabel = () => label.classList.add("float");
	const removeFloat = () => !input.value && label.classList.remove("float");

	input.addEventListener("focus", floatLabel);
	input.addEventListener("blur", removeFloat);

	input.value && floatLabel();
	})

	const noop = () => { };

	const toast = (text, onClick = noop, time = 6000, renderFn = noop) => {
	const toast = document.createElement("button");
	toast.classList.add("toast");

	toast.innerHTML = text;

	renderFn(toast);

	toast.onclick = () => {
	toast.remove();
	onClick();
	}

	document.querySelector(".toastbox").appendChild(toast);

	let timeAfter = time;
	let mouseover = false;

	toast.onmouseover = () => (mouseover = true);
	toast.onmouseout = () => (mouseover = false);

	if (time === "never") {
	return;
	}

	const interval = setInterval(() => {
	// If mouse is not over the toast
	if (!mouseover) {
	timeAfter -= 100;
	}
	else {
	timeAfter = time;
	}

	if (timeAfter <= 0) {
	clearInterval(interval);
	toast.remove();
	}
	}, 100);
	}

	const attachRipple = element => {
	let circle;
	let rippling = false;

	const findFurthestPoint = (clickPointX, elementWidth, offsetX, clickPointY, elementHeight, offsetY) => {
	const x = clickPointX - offsetX > elementWidth / 2 ? 0 : elementWidth;
	const y = clickPointY - offsetY > elementHeight / 2 ? 0 : elementHeight;
	const d = Math.hypot(x - (clickPointX - offsetX), y - (clickPointY - offsetY));
	return d;
	}

	element.onpointerdown = (e, _) => {
	console.log(_);
	if (rippling) return;
	rippling = true;

	const rect = e.target.getBoundingClientRect();
	const radius = findFurthestPoint(e.clientX, e.target.offsetWidth, rect.left, e.clientY, e.target.offsetHeight, rect.top);

	circle = document.createElement("div");
	circle.classList.add("ripple");

	circle.style.left = e.clientX - rect.left - radius + "px";
	circle.style.top = e.clientY - rect.top - radius + "px";
	circle.style.width = circle.style.height = radius * 2 + "px";

	e.target.appendChild(circle);
	}

	"pointerup mouseleave dragleave touchmove touchend touchcancel".split(" ").forEach(event => {
	element.addEventListener(event, () => {
	if (circle) {
	// Remove ripple after animation is finished
	setTimeout(() => {
	circle.style.opacity = 0;
	rippling = false;
	}, 400);
	}
	});
	});
	}

	document.querySelectorAll(".effect").forEach(el => attachRipple(el));

	</script>


	</body>

	</html>