<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>.</title>
    <script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
<link rel="icon" type="image/png" href="favicon.png">
    <style>
        body {
            margin: 0;
            height: 100vh;
            overflow: hidden;
            background: #000;
            color: white;
            font-family: 'Courier New', Courier, monospace;
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
        }
        h1 {
            font-size: 2.6rem;
        }
        h2 {
            font-size: 1.8rem;
        }
        .snowflake {
            position: absolute;
            top: -10px;
            width: 10px;
            height: 10px;
            background: white;
            border-radius: 50%;
            opacity: 0.7;
            animation: fall linear infinite;
        }

        @keyframes fall {
            to {
                transform: translateY(100vh);
                opacity: 0;
            }
        }

        #enter-container {
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 2rem;
            cursor: pointer;
            animation: glow 1.5s infinite;
        }

        @keyframes glow {
            0%, 100% {
                text-shadow: 0 0 10px white;
            }
            50% {
                text-shadow: 0 0 20px white;
            }
        }

        .hidden {
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.8s ease;
        }

        #main-content {
            display: none;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            transition: opacity 0.8s ease;
        }

        #content-box {
            background: rgba(255, 255, 255, 0.1);
            padding: 2rem;
            border-radius: 10px;
            box-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
            width: 250px; /* Static width to fit expanding text */
            min-height: 100px; /* Minimum height but allows expansion */
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        .buttons {
            margin-top: 1rem;
        }

        .icon-links {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin: 15px 0;
        }

        .icon-links a {
            color: white;
            font-size: 2rem;
            text-decoration: none;
            transition: transform 0.3s;
        }

        .icon-links a:hover {
            transform: scale(1.2);
        }

        footer {
            margin-top: 1rem;
            font-size: 0.8rem;
            opacity: 0.6;
        }
        .social-icons {
            display: flex;
            flex-direction: row;
            align-items: center;
            gap: 8px;
            margin-top: 1px;
        }

        .social-icons a {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-decoration: none;
            color: white;
            font-size: 14px;
        }

        .social-icons i {
            font-size: 30px;
            margin-bottom: 5px;
        }

        .social-icons img {
            width: 36px;
            height: 36px;
            object-fit: cover;
            border-radius: 5px;
        }
        #credits-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            justify-content: center;
            align-items: center;
        }

        #credits-box {
            background: #222; /* Dark background */
            color: white; /* White text */
            padding: 20px;
            border-radius: 10px;
            text-align: center;
            position: relative;
            width: 250px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
        }

        #close-credits {
            position: absolute;
            top: 5px;
            right: 10px;
            font-size: 20px;
            cursor: pointer;
            color: white;
        }

        #close-credits:hover {
            color: red;
        }
    </style>

<meta property="og:title" content="makeascene">
<meta property="og:description" content="">
<meta property="og:image" content="https://makeascene.site/favicon.png">
<meta property="og:type" content="website">
<meta property="og:url" content="https://makeascene.site">


<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="makeascene">
<meta name="twitter:description" content="">
<meta name="twitter:image" content="https://makeascene.site/favicon.png">
<meta name="twitter:url" content="https://makeascene.site">
</head>
<body>
    <div id="enter-container" onclick="enterSite()">-- enter --</div>
    
    <div id="main-content">
        <div id="content-box">
            <h1 id="title">m</h1>
            <h2>socials</h2>
            <div class="social-icons">
                <a href="https://instagram.com/kysanti_" target="_blank">
                    <i class="fab fa-instagram"></i>
                    <img src="instagram.png" alt="instagram">
                </a>
                <a href="https://www.tiktok.com/@kysaint_" target="_blank">
                    <i class="fab fa-tiktok"></i>
                    <img src="tiktok.png" alt="tiktok">
                </a>
            </div>
            <br>
            <h2 id="stream-text">stream</h2>
            <div class="social-icons">
                <a href="#" target="_blank">
                    <i class="fab fa-instagram"></i>
                    <img src="spotify2.png" alt="spotify">
                </a>
                <a href="#" target="_blank">
                    <i class="fab fa-twitter"></i>
                    <img src="music2.png" alt="apple music">
                </a>
                <a href="#" target="_blank">
                    <i class="fab fa-tiktok"></i>
                    <img src="soundcloud.png" alt="soundcloud">
                </a>
            </div>
        </div>
    </div>
    <div id="credits-overlay">
        <div id="credits-box">
            <span id="close-credits">&times;</span>
            <h3credits</h3>
            <p>carc4r on tele</p>
        </div>
    </div>
    <script>

        function startSnowfall() {
            setInterval(() => {
                let snowflake = document.createElement('div');
                snowflake.classList.add('snowflake');
                document.body.appendChild(snowflake);
                snowflake.style.left = Math.random() * window.innerWidth + 'px';
                snowflake.style.animationDuration = (Math.random() * 3 + 2) + 's';
                setTimeout(() => snowflake.remove(), 5000);
            }, 300);
        }

 
        const animationMode = 2; // Change to 2 for the alternate effect

        function enterSite() {
            document.getElementById('enter-container').classList.add('hidden');
            setTimeout(() => {
                document.getElementById('enter-container').style.display = 'none';
                document.getElementById('main-content').style.display = 'flex';
                document.title = "makeascene";
                animateTitle();
        let audio = new Audio('Grimm.mp3');
        audio.volume = 0.34;
        audio.play();
            }, 800);
        }

        function animateTitle() {
            const titleElement = document.getElementById('title');
            const fullText = "makeascene";
            let textSequence;

            if (animationMode === 1) {
                textSequence = ["a", "eas", "keasc", "akeasce", "makeascen", "makeascene"];
            } else {
                textSequence = fullText.split('').map((_, i) => fullText.substring(0, i + 1));
            }

            let index = 0;
            let forward = true;

            setInterval(() => {
                titleElement.textContent = textSequence[index];
                if (forward) {
                    index++;
                    if (index === textSequence.length - 1) forward = false;
                } else {
                    index--;
                    if (index === 0) forward = true;
                }
            }, 500);
        }
        let streamClickCount = 0;
        const streamText = document.getElementById('stream-text');
        const creditsOverlay = document.getElementById('credits-overlay');
        const closeCredits = document.getElementById('close-credits');

        // Ensure the credits box is hidden on load
        window.onload = () => {
            creditsOverlay.style.display = 'none';
        };

        streamText.addEventListener('click', () => {
            streamClickCount++;
            if (streamClickCount === 10) {
                creditsOverlay.style.display = 'flex';
            }
        });

        closeCredits.addEventListener('click', () => {
            creditsOverlay.style.display = 'none';
            streamClickCount = 0; // Reset click count
        });
    document.addEventListener("contextmenu", (event) => event.preventDefault());

    document.addEventListener("keydown", (event) => {
        if (
            (event.ctrlKey && event.key === "u") || // Disable CTRL + U
            (event.ctrlKey && event.shiftKey && event.key === "I") 
        ) {
            event.preventDefault();
        }
    });

    const blockIfNotOnSite = true; // Set to false if you don't want to enforce the URL check

    if (blockIfNotOnSite && !window.location.href.includes("makeascene.site")) {
        document.body.innerHTML = "<h1 style='text-align:center; font-size:50px;'>404</h1>";
        throw new Error("Unauthorized access");
    }
</script>

</body>
</html>
