<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="styles.css" rel="stylesheet">
    <link rel="icon" type="image/x-icon" href="https://r2.interrupted.me/F/lhBc4CHi.png">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <title>Noire</title>
    <meta name="description" content="Noire">
    <meta name="keywords" content="Noire, cryptocurrency, community, Telegram, Monero, Bitcoin, Ethereum">
    <meta name="author" content="Noire">
    <style>
        #overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.8);
            display: flex;
            justify-content: center;
            align-items: center;
            color: #fff;
            font-size: 24px;
            z-index: 9999;
            cursor: pointer;
        }

        #overlay.hidden {
            display: none;
        }

        @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Poppins', sans-serif;
        }

        :root {
            --text: #d8d8d8;
            --background: #151515;
            --primary: #274dce;
            --secondary: #2b2b2b;
            --accent: #433bff;
            --blog-color: #274dce;
        }

        html, body {
            height: 100vh;
        }

        body {
            background-color: var(--background);
        }

        .container {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            height: 100vh;
        }

        .video-bg a {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 3rem;
            height: 3rem;
            z-index: 100;
            margin: 2rem;
            position: absolute;
            background-color: #d8d8d810;
            padding: 0.6rem;
            border-radius: 1.4vh;
            cursor: pointer;
            right: 0;
            top: 0;
            transition: all 0.2s;
        }

        .video-bg a:hover {
            transition: all 0.2s;
            background-color: #d8d8d888;
        }

        #audio-control {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 3rem;
            height: 3rem;
            z-index: 100;
            margin: 1.5rem;
            position: absolute;
            background-color: #d8d8d810;
            padding: 0.6rem;
            border-radius: 1.4vh;
            cursor: pointer;
            right: 0;
            top: 0;
            transition: all 0.2s;
        }

        .profile-container {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
        }

        .card {
            padding: 1rem;
            padding-bottom: 2rem;
            width: 40rem;
            max-height: 34rem;
            background: rgba(25, 25, 25, 0.534);
            border-radius: 16px;
            box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
            backdrop-filter: blur(6.4px);
            -webkit-backdrop-filter: blur(6.4px);
            border: 1px solid rgba(25, 25, 25, 0.3);
            position: relative;
            transition: transform 0.1s;
        }

        .banner {
            width: 100%;
            height: 35%;
            border-radius: 16px 16px 0 0;
            margin-bottom: -1rem;
            position: absolute;
            top: 0;
            left: 0;
            background-image: url('https://r2.interrupted.me/F/i7dy.png');
            background-size: cover;
            background-position: center;
        }

        .pfp {
            margin-top: 20%;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            z-index: 100;
            position: relative;
        }

        .pfp img {
            border-radius: 50%;
            width: 128px;
            height: 128px;
            object-fit: cover;
        }

        .pfp::before {
            content: '';
            background-image: url('https://slat.cc/decorations/cat-ears.png');
            width: 128px;
            height: 128px;
            position: absolute;
            top: 0;
            left: 0;
            z-index: -1;
        }

        .username {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            text-align: left;
        }

        .username a {
            font-weight: 600;
            margin-top: 0.5%;
            font-size: 32px;
            color: #f7f7f7;
            text-shadow: 0px 0px 16.5px #f7f7f7;
        }

        .status {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            height: 1.2rem;
            margin-top: 0.8%;
            color: #f7f7f7ef;
            text-shadow: 0px 0px 2.5px #f7f7f7ef;
            font-size: 13px;
        }

        .badges-container {
            display: flex;
            justify-content: flex-start;
            align-items: center;
        }

        .badges {
            display: flex;
            justify-content: center;
            align-items: center;
            width: fit-content;
            background: rgba(60, 60, 60, 0.17);
            border-radius: 16px;
            box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
            backdrop-filter: blur(5.8px);
            -webkit-backdrop-filter: blur(5.8px);
            border: 1px solid rgba(60, 60, 60, 0.3);
            display: flex;
            padding: 0.4rem;
            border-radius: 1vh;
            margin-top: 2%;
            gap: 0.1rem;
        }

        .badges img {
            cursor: pointer;
            width: 22px;
            height: 22px;
        }

        .links-container {
            justify-content: center;
            display: flex;
            align-items: center;
            flex-direction: column;
            margin-top: 2rem;
        }

        .links {
            margin-top: 3%;
            border-radius: 1vh;
            width: 40rem;
            height: auto; 
            display: flex;
            flex-wrap: wrap; 
            justify-content: center;
        }

        .link {
            background: rgba(60, 60, 60, 0.17);
            border-radius: 16px;
            box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
            backdrop-filter: blur(5.8px);
            -webkit-backdrop-filter: blur(5.8px);
            border: 1px solid rgba(60, 60, 60, 0.3);
            width: 100%; 
            margin: 1%; 
            border-radius: 1vh;
            padding: 0.4rem;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .link-content {
            display: flex;
            align-items: center;
            width: 100%;
        }

        .link-content a {
            display: flex;
            align-items: center;
        }

        .link p {
            color: #646363;
            font-weight: 600;
            font-size: 12px;
        }

        .link-content h4 {
            color: #d8d8d8;
            font-weight: 600;
        }

        .link-content a {
            margin-left: auto;
        }

        .tooltip {
            z-index: 100;
            position: relative;
            display: inline-block;
        }

        .tooltip:before {
            z-index: 100;
            font-weight: 500;
            font-family: 'Poppins', sans-serif;
            text-align: center;
            font-size: 13px;
            content: attr(data-text);
            position: absolute;
            top: -160%;
            right: -190%;
            margin-top: 15px;
            width: 100px;
            padding: 0.4rem;
            border-radius: 10px;
            background: #131313e0;
            color: #fff;
            transform: translateY(-50%);
            display: none;
        }

        .tooltip:hover:before {
            display: block;
        }

        .tooltip svg {
            z-index: 101;
            display: block;
            margin: auto;
        }

        .icon {
            font-size: 24px;
            color: #d8d8d8;
            transition: 0.3s;
        }

        .icon:hover {
            color: white;
            text-shadow: 0 0 20px white, 0 0 30px white, 0 0 40px white;
        }

        @media only screen and (max-width: 600px) { 
            .link {
                width: 100%; 
            }
            .links {
                margin-left: 2rem;
                margin-right: 2rem;
                margin-top: 0;
            }
        }

        @media (max-width: 768px) {
            .card {
                width: 23rem;
            }
            .links-container {
                margin-top: 4%;
            }
        }

        .noise {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            opacity: 0.05;
            z-index: 2;
        }
    </style>
</head>
<body style="background-image: url('https://r2.interrupted.me/F/ztPcxGab.jpg'); background-repeat: no-repeat; background-position: center; background-size: cover;">
    <div id="overlay">
        Click to enter
    </div>  
    <main>
        <div class="container">
            <div class="audio-bg">
                <a id="audio-control">
                    <svg fill='#d8d8d8' width="18px" height="18px" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="m2 7.5v3c0 .8.6 1.5 1.4 1.5h2.3l3.2 2.8c.1.1.3.2.4.2s.2 0 .3-.1c.2-.1.4-.4.4-.7v-.9l-7.2-7.2c-.5.2-.8.8-.8 1.4zm8 2v-5.8c0-.3-.1-.5-.4-.7-.1 0-.2 0-.3 0s-.3 0-.4.2l-2.8 2.5-4.1-4.1-1 1 3.4 3.4 5.6 5.6 3.6 3.6 1-1z" fill-rule="evenodd"/></svg>
                </a>
                <audio id="myAudio" loop muted>
                    <source src="https://r2.interrupted.me/F/tFM2tj4d.mp3" type="audio/mpeg">
                    Your browser does not support the audio element.
                </audio>
            </div>
            <div class="profile-container">
                <div class="card">
                    <div class="banner"></div>
                    <div class="pfp">
                        <img src="https://r2.interrupted.me/F/Ll2rchf0.jpg">
                    </div>
                    <div class="username">
                        <a>Noire</a>
                    </div>
                    <div class="status">
                        <a id="typewriter" class="typewriter"></a>
                    </div>
                    <div class="badges-container">
                        <div class="badges">
                            <div class="tooltip" data-text="Monero">
                                <img src="https://r2.interrupted.me/F/cl6qLETD.png" alt="Monero Logo">
                            </div>
                            <div class="tooltip" data-text="Bitcoin">
                                <img src="https://r2.interrupted.me/F/2wzBuJvE.png" alt="Bitcoin Logo">
                            </div>
                            <div class="tooltip" data-text="Ethereum">
                                <img src="https://r2.interrupted.me/F/tuL3gwma.png" alt="Ethereum Logo">
                            </div>
                        </div>
                    </div>
                    <div class="links-container">
                        <div class="links">
                            <div class="link">
                                <div class="link-content">
                                    <p>Telegram</p>
                                    <a href="https://t.me/Trulyheartless" target="_blank">
                                        <i class="fab fa-telegram-plane icon"></i>
                                    </a>
                                </div>
                            </div>
                            <div class="link">
                                <div class="link-content">
                                    <p>Larpbin</p>
                                    <a href="https://larpbin.lol" target="_blank">
                                        <i class="fas fa-globe icon"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="links-container">
                    <div class="links">
                        <div class="link">
                            <div class="link-content">
                                <p>Email</p>
                                <a href="mailto:noire@afra.id" style="width: 100%; display: flex; justify-content: space-between;">
                                    <span style="flex-grow: 1; text-align: center;">noire@afra.id</span>
                                    <i class="fas fa-envelope icon"></i>
                                </a>
                            </div>
                        </div>
                        <div class="link">
                            <div class="link-content">
                                <p>Blog</p>
                                <a href="https://trulyheartless.github.io/blog/" target="_blank" style="width: 100%; display: flex; justify-content: space-between; color: var(--blog-color);">
                                    <span style="flex-grow: 1; text-align: center;">trulyheartless.github.io/blog</span>
                                    <i class="fas fa-book icon"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>            
        </main>
        <script>
            const audio = document.getElementById("myAudio");
            const audioControl = document.getElementById("audio-control");
            audioControl.addEventListener("click", () => {
                if (audio.paused) {
                    audio.muted = false;
                    audio.play();
                    audioControl.innerHTML = `<svg fill='#d8d8d8' width="20px" height="20px" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="m2 7.5v3c0 .8.6 1.5 1.4 1.5h2.3l3.2 2.8c.1.1.3.2.4.2s.2 0 .3-.1c.2-.1.4-.4.4-.7v-.9l-7.2-7.2c-.5.2-.8.8-.8 1.4zm8 2v-5.8c0-.3-.1-.5-.4-.7-.1 0-.2 0-.3 0s-.3 0-.4.2l-2.8 2.5-4.1-4.1-1 1 3.4 3.4 5.6 5.6 3.6 3.6 1-1z" fill-rule="evenodd"/></svg>`;
                } else {
                    audio.muted = true;
                    audio.pause();
                    audioControl.innerHTML = `<svg width="18px" height="18px" viewBox="-1 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs></defs><g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="Dribbble-Light-Preview" transform="translate(-65.000000, -3803.000000)" fill="#d8d8d8"><g id="icons" transform="translate(56.000000, 160.000000)"><path d="M18.074,3650.7335 L12.308,3654.6315 C10.903,3655.5815 9,3654.5835 9,3652.8985 L9,3645.1015 C9,3643.4155 10.903,3642.4185 12.308,3643.3685 L18.074,3647.2665 C19.306,3648.0995 19.306,3649.9005 18.074,3650.7335" id="play-[#1000]"></path></g></g></g></svg>`;
                }
            });
            const overlay = document.getElementById("overlay");
            overlay.addEventListener("click", () => {
                overlay.classList.add("hidden");
                audio.muted = false;
                audio.play();
            });
            const card = document.querySelector(".card");
            card.addEventListener("mousemove", (event) => {
                const { clientX, clientY } = event;
                const { left, top, width, height } = card.getBoundingClientRect();
                const x = (clientX - left) / width;
                const y = (clientY - top) / height;
                const tiltX = (y - 0.5) * -10; 
                const tiltY = (x - 0.5) * 10; 
                card.style.transform = `perspective(1000px) rotateX(${tiltX}deg) rotateY(${tiltY}deg)`;
            });
            card.addEventListener("mouseleave", () => {
                card.style.transform = `perspective(1000px) rotateX(0deg) rotateY(0deg)`;
            });
        </script>
        <script>
            var txt = 'Staff @ doxbin.gg';
            var speed = 200; 
            var eraseSpeed = 80;
            var loopCount = 0;
            var maxLoop = 0; 
            var forward = true; 
            function typeWriter() {
                var typewriter = document.getElementById("typewriter");
                var textLength = txt.length;
                if (forward) {
                    if (typewriter.innerHTML.length < textLength) {
                        typewriter.innerHTML += txt.charAt(typewriter.innerHTML.length);
                        setTimeout(typeWriter, speed);
                    } else {
                        forward = false;
                        setTimeout(typeWriter, speed * 3); 
                    }
                } else {
                    if (typewriter.innerHTML.length > 0) {
                        typewriter.innerHTML = typewriter.innerHTML.slice(0, -1);
                        setTimeout(typeWriter, eraseSpeed);
                    } else {
                        forward = true;
                        setTimeout(typeWriter, speed * 3); 
                    }
                }
            }
            window.onload = function() {
                typeWriter();
            };
        </script>
        <script>
            function createNoise() {
                const canvas = document.createElement('canvas');
                canvas.classList.add('noise');
                const ctx = canvas.getContext('2d');
                
                const resize = () => {
                    canvas.width = window.innerWidth;
                    canvas.height = window.innerHeight;
                };
                
                resize();
                window.addEventListener('resize', resize);
                
                function noise() {
                    const imageData = ctx.createImageData(canvas.width, canvas.height);
                    const data = imageData.data;
                    
                    for (let i = 0; i < data.length; i += 4) {
                        const value = Math.random() * 255;
                        data[i] = value;     
                        data[i + 1] = value; 
                        data[i + 2] = value; 
                        data[i + 3] = 255;   
                    }
                    
                    ctx.putImageData(imageData, 0, 0);
                }
                
                setInterval(noise, 50);
                document.body.appendChild(canvas);
            }

            createNoise();
        </script>
    </body>
</html>