<!-- Haloo Cantik ngapain Liat2 Source Code??  -->
<!-- ⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣀⠀⠀⠀⠀⢀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠴⣦⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣰⢻⠀⠀⠀⢀⡎⠀⡄⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣿⠘⡆⠀⠀⢸⢠⠀⣇⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣿⠀⢧⠀⠀⡞⢸⠀⠸⡄⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠘⢦⡀⠀⠀⠀⢀⣀⣀⣀⣟⣆⠈⢧⡀⣇⠸⡇⠀⠹⣄⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠙⠢⣄⠀⠀⠀⠀⠀⠀⠬⠀⠀⠉⠻⠄⠁⠀⠀⠈⠳⣄⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⠛⢷⣒⠒⠒⠒⠒⠚⠳⠶⠤⠐⠒⡂⠀⠀⢀⣀⡤⠖⠒⠀⠀⠀⠀⠀⠙⠶⠤⢄⣀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠐⠦⣄⠀⠀⠈⠉⠲⠶⠶⠶⠒⠀⠀⢠⡎⠀⠀⠀⠉⠀⠀⠀⢠⡇⠀⠀⠀⠀⠀⠀⠀⠀⠙⠷⣦⣄⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⠉⢙⣲⠦⢄⣠⡖⢂⡄⠀⢠⡏⠀⡀⠀⠀⠀⠀⠀⢠⣮⠇⠀⢰⠀⠈⢳⡈⠓⢦⡀⠀⠈⢣⡉⠓⠶⠤⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣠⠞⠉⢀⣴⠟⠋⠀⡼⠀⣠⣿⠃⢠⡇⠀⢀⠀⠀⢀⣾⠏⠀⢠⣏⡆⠀⠀⠙⢦⠀⠙⢦⠀⠀⢹⡀⢆⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣀⣀⣤⣴⣯⡥⢤⡴⠋⠁⠀⠀⡼⠁⡴⢻⡎⣠⢻⠀⣠⣾⠇⢀⠞⡇⠀⢀⣟⣼⠇⠀⠀⠀⠀⢱⠀⠀⡆⠀⢠⢧⠘⡄⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢠⠞⠁⣠⠄⢠⢾⣡⢞⣠⣾⠛⠁⢸⣴⢫⠟⣠⡏⢰⠁⢠⣯⣾⠏⠀⠀⠀⠀⠀⢈⡄⠀⡿⡄⠀⣏⢧⣳⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣠⣏⣠⣼⡏⢠⣯⣿⠋⡞⣡⣿⣗⠲⣾⢀⡞⠈⠙⢠⡇⣰⣿⠋⣠⠔⣉⣓⢦⡀⠀⠀⣧⠀⡇⠈⢦⠘⢦⠉⣇⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠤⠾⠛⢉⣦⣾⢳⠟⣿⣀⣸⣿⣿⣿⣏⠙⠋⠉⠉⡉⠉⣹⡶⣿⡷⠋⠉⣞⣷⣿⡇⢹⡆⠀⢻⠀⢹⣄⠈⣗⠲⠽⠊⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣼⠏⢹⣿⣾⣿⠋⢻⣿⣿⠟⡩⠄⠀⠀⠀⠁⠠⣿⣽⠟⠁⠀⠀⣽⡿⠆⠀⡼⢳⡀⠘⣇⠈⣯⠓⠚⠦⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⣤⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢠⣞⡿⠟⠉⠀⠈⠛⠉⠈⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠯⠇⠀⡴⠁⢀⡟⠀⠸⡄⡿⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⣸⡏⢹⣄⠀⠀⠀⠀⠀⠀⠀⠀⠀⠹⣅⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣀⣀⣠⣾⡁⠀⠘⠀⠀⢠⣿⡇⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⣰⠏⠀⡸⠘⡇⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⢷⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢠⠿⠿⠀⠀⢳⡴⣤⡀⠀⢸⠙⠃⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⡴⢋⣾⣿⡇⢀⡇⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢼⣇⡤⣤⠤⠖⠒⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢸⡄⠀⠀⠀⠀⠻⣿⡿⣦⢸⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⡼⢠⠟⠋⢀⡇⡼⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢄⠙⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⣀⡤⠄⣠⠄⠀⠀⠀⠀⠈⠇⢸⡟⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⣼⣱⠏⠀⢠⠞⣸⠃⠀⠀⢀⡤⠤⣄⠀⠀⠀⠀⠀⠀⠸⡆⠀⠀⠀⠀⠀⠀⠀⢀⣠⠤⠖⠋⠁⠀⣴⠟⠁⠀⠀⠀⠀⢀⣠⣾⣿⣿⣿⡆⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⣸⡟⠁⠀⣰⣿⣲⡏⠀⢀⡴⠉⠀⢀⡽⠀⠀⠀⠀⠀⠀⠀⣗⠀⠀⠀⢀⡠⠖⠊⠁⠀⠀⠀⠀⣲⡿⠃⠀⠀⣀⣤⣶⣿⣿⣿⡿⣿⣿⣿⣿⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⣸⠁⠀⣀⡾⠻⠄⣿⠁⢀⠞⠁⠀⣠⠎⠀⠀⠀⠀⠀⠀⠀⠠⣿⡀⢀⣀⣀⣠⣤⡀⠀⠀⠀⠀⠀⢈⣁⣴⣾⣿⣿⣿⡿⠿⣿⣿⣾⣿⣿⣿⣿⣷⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⡇⡴⠚⠉⠁⠀⡠⠋⠳⣾⣄⠀⡾⠃⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⠉⠉⠁⠀⠀⠈⢷⡀⢀⣠⣴⣾⣿⣿⡿⠋⠉⠉⠀⠀⠀⠙⢿⣿⣿⣿⣿⣿⣿⡇⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠟⠁⠀⣤⠖⣻⠃⠀⠀⠈⠉⠀⡇⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣠⣴⣿⣿⣿⣿⣿⣷⣶⡀⠀⠀⠀⠀⢠⣶⣾⣿⣿⣿⣿⣿⣿⣿⣿⡄⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⣾⠃⡴⠃⠀⠀⠀⠀⠀⣠⠇⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠘⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⡇⢀⣤⣴⣾⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣷⣄⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠉⢁⣴⢃⠀⡄⠀⠀⢀⡴⠋⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢻⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⡿⠟⠋⠁⠹⢿⣿⣿⣿⣿⣿⣷⣤⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠉⠀⠸⣤⠁⠀⣠⠟⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⠋⠀⠀⠀⠀⠀⠀⢈⣿⣿⣿⣿⣿⣿⣿⣦⣄⠀⠀⠀⠀
⠀⢀⠀⠀⣰⠟⠀⢰⣏⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣠⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣶⣶⣶⣶⣾⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣥⡀⠀⠀
⠀⠀⢦⡴⠁⠀⠀⢸⣿⣿⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⣰⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣟⠋⠁⣻⣿⣿⣿⣯⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣶⣤ -->
<!-- _____ _____  _   _   ___  ______  ___   ______  ___   _____ _____  _   _   ___  
|  ___/  __ \| | | | / _ \ | ___ \/ _ \  | ___ \/ _ \ /  ___/  __ \| | | | / _ \ 
| |__ | /  \/| |_| |/ /_\ \| |_/ / /_\ \ | |_/ / /_\ \\ `--.| /  \/| |_| |/ /_\ \
|  __|| |    |  _  ||  _  ||    /|  _  | |  __/|  _  | `--. \ |    |  _  ||  _  |
| |___| \__/\| | | || | | || |\ \| | | | | |   | | | |/\__/ / \__/\| | | || | | |
\____/ \____/\_| |_/\_| |_/\_| \_\_| |_/ \_|   \_| |_/\____/ \____/\_| |_/\_| |_/
                                                                                 
                                                                                  -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" href="giyu.png" type="image/x-icon">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="style2.css">
    <title>Echara Pascha</title>
</head>

<body>
    <div class="rain"></div>

    <div class="card">
        <div class="character">
            <img src="giyu.png" alt="Karakter" class="character-image">
        </div>
        <div class="circle">
            <img src="profile.png" alt="Foto Aing Bos" class="circle-image">
        </div>
        <div class="profile-info">
            <h1>Echarawpascha</h1>
            <p id="typed-bio"></p>
            <div style="text-align: center; position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); background-color: #4b4c4e; box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.7); border-radius: 5px;">
                <a href="https://discord.com/users/714354776401379391" target="_blank">
                    <img src="https://discord.c99.nl/widget/theme-4/714354776401379391.png" style="width: 300px;">
                </a>
            </div>
        </div>
    </div>

    <div class="content-container">
        <div class="album small" data-cover-url="https://i.scdn.co/image/ab67616d0000b273d0bbd3ea2ec554f17a6603cc">
            <div class="cover">
                <img src="https://i.scdn.co/image/ab67616d0000b273d0bbd3ea2ec554f17a6603cc" alt="Album Cover">
            </div>
            <div class="vinyl">
                <div class="vinyl-cover"></div>
            </div>
        </div>
        <iframe class="spotify-player" style="border-radius: 12px;" src="https://open.spotify.com/embed/playlist/7gwUwhitgCuuoqv90wfDOA?utm_source=generator" width="300" height="80" frameborder="0" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" loading="lazy"></iframe>
    </div>

    <div class="button-container">
        <a href="https://open.spotify.com/user/qioloyqfs6y4ohfdz5gokoaud" target="_blank" class="card-button">
            <img src="spotify.png" alt="Icon" class="card-button-icon"> Spotify<span class="card-button-arrow">➜</span>
        </a>
        <a href="https://steamcommunity.com/id/Echarawpascha/" target="_blank" class="card-button">
            <img src="steam.png" alt="Icon" class="card-button-icon"> Steam<span class="card-button-arrow">➜</span>
        </a>
        <a href="https://www.youtube.com/channel/UC3WQKgNhbsZb1SJTIB6UhRw" target="_blank" class="card-button">
            <img src="Youtube.png" alt="Icon" class="card-button-icon"> Youtube<span class="card-button-arrow">➜</span>
        </a>
        <a href="https://www.instagram.com/echarawpascha_/" target="_blank" class="card-button">
            <img src="insta.png" alt="Icon" class="card-button-icon"> Instagram<span class="card-button-arrow">➜</span>
        </a>
    </div>

    

    <script>
        window.addEventListener('load', function () {
            const audioPlayer = document.getElementById("audio-player");
            audioPlayer.play().catch((error) => {
                console.log("Browser Lu Gaa Support Brokk");
            });
        });

        const typedBioElement = document.getElementById('typed-bio');
        const bios = ["''Pengen Jadi Fullstack Dev Ama Pianist''", "''Tapi Malazz Mending Turu''"];
        let currentBioIndex = 0;
        let currentText = '|';
        let isDeleting = false;
        let typingSpeed = 100;
        let deleteSpeed = 50;
        let delayTime = 7000;

        function typeBio() {
            const currentBio = bios[currentBioIndex];
            if (isDeleting) {
                currentText = currentBio.substring(0, currentText.length - 1);
            } else {
                currentText = currentBio.substring(0, currentText.length + 1);
            }
            typedBioElement.textContent = currentText;

            if (!isDeleting && currentText === currentBio) {
                setTimeout(() => {
                    isDeleting = true;
                    typingSpeed = deleteSpeed;
                }, delayTime);
            } else if (isDeleting && currentText === '') {
                isDeleting = false;
                currentBioIndex = (currentBioIndex + 1) % bios.length;
                typingSpeed = 100;
                delayTime = 2000;
            }
            setTimeout(typeBio, typingSpeed);
        }
        typeBio();
    </script>
</body>

</html>