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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>SOBAT TELAT</title>
    <link rel="shortcut icon" href="/assets/compiled/png/sobattelat.png" type="image/x-icon">
    <link rel="stylesheet" href="/assets/compiled/css/app.css">
    <link rel="stylesheet" href="/assets/compiled/css/custom.css">
    <link rel="stylesheet" href="/assets/compiled/css/iconly.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
        integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />
    <style>
        .instagram-block {
            background: #f09433;
            background: -moz-linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
            background: -webkit-linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
            background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f09433', endColorstr='#bc1888', GradientType=1);
        }

        .scale-icon {
            scale: 2;
        }

        .fs-brutal {
            font-size: 2em;
        }
    </style>
</head>

<body class="position-relative">
    @include('alert')
    <div class="text-center bg-primary text-white fs-1 mb-4 fw-bold py-3" id="siswa_title">Halo Sobat Telat 😁</div>
    <section class="row mx-1">
        <div class="d-flex flex-md-row gap-2 flex-column">
            <div class="row" id="siswa_terlambat_alamak">
                <div class="col-12">
                    <div class="card">
                        <div class="card-header">
                            <h4>Oh Tidak Aku Terlambat 😭😭</h4>
                        </div>
                        <div class="card-body">
                            <a href="/tambah-terlambat"
                                class="btn btn-xl w-100 btn-primary text-white gap-4 d-flex flex-md-row flex-column justify-content-center">
                                <i class="bi bi-envelope-check-fill mb-md-3 mb-1 me-3 fs-2"></i>
                                <div class="text-start fw-bold">
                                    <div class="fs-2">Aku Butuh</div>
                                    <div class="fs-6">Surat Keterangan Terlambat</div>
                                </div>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row" id="siswa_ijin_alamak">
                <div class="col-12">
                    <div class="card">
                        <div class="card-header">
                            <h4>Aku Mau Izin, Tapi Kemana 😱🤔</h4>
                        </div>
                        <div class="card-body">
                            <a href="/tambah-ijin"
                                class="btn btn-xl w-100 btn-success text-white gap-4 d-flex flex-md-row flex-column justify-content-center">
                                <i class="bi bi-envelope-at-fill mb-md-3 mb-1 me-3 fs-2"></i>
                                <div class="text-start fw-bold">
                                    <div class="fs-2">Aku Butuh</div>
                                    <div class="fs-6">Surat Keterangan Izin Keluar</div>
                                </div>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="position-fixed w-100 start-0" id="we_em_badag" style="bottom: 1em;">
            <div class=" d-flex justify-content-start gap-3 align-items-center mx-3">
                <div class="px-2 py-1 rounded-3 w-50" style="background: #1c1c1c;">
                    <a href="https://github.com/dendik-creation" target="_blank"
                        class="d-flex justify-content-center text-white text-decoration-none align-items-center gap-2 p-1 w-100">
                        <i class="bi bi-github mb-2"></i>
                    </a>
                </div>
                <div class="px-2 py-1 rounded-3 w-50 instagram-block" onclick="getQuote()">
                    <div
                        class="d-flex justify-content-center text-white text-decoration-none align-items-center gap-2 p-1 w-100">
                        <i class="bi bi-lightbulb-fill mb-2" id="lamp_icon"></i>
                    </div>
                </div>
            </div>
        </div>
        <div class="position-fixed w-100 start-0 d-flex justify-content-center gap-4 align-items-center"
            id="quote_today" style="bottom: 1em;">
            <div class="bg-white p-3 mx-3 rounded-3 position-relative">
                <div class="position-absolute" style="top: 1.2em; right: 1.2em;" onclick="swapBottom('reversed')">
                    <div class="fw-bold">
                        <i class="bi bi-chevron-down"></i>
                    </div>
                </div>
                <div class="d-flex flex-column justify-content-center align-items-start gap-2">
                    <div class="d-flex justify-content-start align-items-start gap-3">
                        <div class="scale-icon">
                            <i class="bi bi-quote mb-2"></i>
                        </div>
                        <div class="fs-4 mb-2 fw-semibold" id="this_author_quote">This Author</div>
                    </div>
                    <div id="this_quote">This Quote</div>
                </div>
            </div>
        </div>
    </section>

    <script>
        if (localStorage.getItem('theme') == 'dark') {
            localStorage.setItem('theme', 'light');
        }
    </script>

    {{-- AnimeJs CDN --}}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.2/anime.min.js"
        integrity="sha512-aNMyYYxdIxIaot0Y1/PLuEu3eipGCmsEUBrUq+7aVyPGMFH8z0eTP0tkqAvv34fzN6z+201d3T8HPb1svWSKHQ=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>

    <script>
        anime({
            targets: ['#siswa_terlambat_alamak', '#siswa_ijin_alamak'],
            scaleY: 0,
            duration: 0,
        });
        anime({
            targets: '#siswa_title',
            translateY: -200,
            duration: 0,
        });
        anime({
            targets: '#we_em_badag',
            translateY: 200,
            duration: 0,
        });
        anime({
            targets: "#quote_today",
            translateY: 400,
            duration: 0,
        });
        setTimeout(() => {
            anime({
                targets: '#siswa_terlambat_alamak',
                scaleY: 1,
                duration: 500,
                easing: 'easeInOutExpo',
                delay: 150
            });
            anime({
                targets: '#siswa_ijin_alamak',
                scaleY: 1,
                duration: 500,
                easing: 'easeInOutExpo',
                delay: 300
            });
            anime({
                targets: '#siswa_title',
                translateY: 0,
                duration: 1000,
                easing: 'easeInOutExpo',
                delay: 450
            });
            anime({
                targets: '#we_em_badag',
                translateY: 0,
                duration: 500,
                easing: 'easeInOutExpo',
                delay: 350
            });
        }, 500);
    </script>

    <script>
        let isOnlyWan = true;
        async function getQuote() {
            if(isOnlyWan){
                isOnlyWan = false;
                document.getElementById('lamp_icon').classList.add('fa-bounce', 'opacity-50');
                await callQuote();
                swapBottom();
            }
        }

        async function callQuote() {
            const response = await fetch('https://api.quotable.io/quotes/random');
            const result = await response.json();
            const theQuote = await convertLanguage(result[0].content, "en|id")
            document.getElementById('this_author_quote').innerHTML = result[0].author;
            document.getElementById('this_quote').innerHTML = theQuote;
        }

        async function convertLanguage(value, language) {
            const response = await fetch(`https://api.mymemory.translated.net/get?q=${value}&langpair=${language}`)
            const result = await response.json();
            return result.responseData.translatedText;
        }

        function swapBottom(action) {
            if (action == "reversed") {
                isOnlyWan = true;
                document.getElementById('lamp_icon').classList.remove('fa-bounce', 'opacity-50');
                anime({
                    targets: '#quote_today',
                    translateY: 400,
                    duration: 1000,
                    easing: 'easeInOutExpo',
                });
                anime({
                    targets: '#we_em_badag',
                    translateY: 0,
                    duration: 1000,
                    easing: 'easeInOutExpo',
                    delay: 300,
                });
            } else {
                anime({
                    targets: '#we_em_badag',
                    translateY: 200,
                    duration: 1000,
                    easing: 'easeInOutExpo',
                });
                anime({
                    targets: '#quote_today',
                    translateY: 0,
                    duration: 1000,
                    easing: 'easeInOutExpo',
                    delay: 300,
                });
            }
        }
    </script>
</body>

</html>
