<!DOCTYPE html>
<!-- I see you looking at the code! Well if you're gonna copy it might as well give it a star ⭐ :D -->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Yоutube Unblоcker</title>
    <style>
        /* General reset */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: Arial, sans-serif;
            color: white;
            position: relative;
            overflow: hidden;
            height: 100vh;
        }

        ._checkers_l90pt_12 {
            z-index: -1;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0.08;
            background-image: url('your-image-path.jpg'); /* Specify your image path */
            background-size: auto;
            background-repeat: repeat;
            transform: rotate(15deg);
        }

        .top-bar {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 60px;
            background-color: rgb(75, 0, 130);
            border-bottom-left-radius: 15px;
            border-bottom-right-radius: 15px;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 0 20px;
            z-index: 1;
        }

        .top-bar img {
            height: 40px;
            position: absolute;
            left: 20px;
        }

        .top-bar-title {
            font-size: 24px;
            font-weight: bold;
            color: white;
        }

        .top-bar a {
            position: absolute;
            right: 20px;
            color: white;
            text-decoration: none;
            font-weight: bold;
            font-size: 18px;
        }

        #inputContainer {
            margin-top: 80px;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
        }

        #youtubeLink {
            padding: 8px;
            border: 1px solid #ccc;
            border-radius: 4px;
            font-size: 16px;
            width: 300px;
            background-color: #333;
            color: #fff;
            margin-bottom: 10px;
        }

        #embedButton, #fullscreenButton {
            padding: 10px 20px;
            background-color: rgb(75, 0, 130);
            color: white;
            border: none;
            border-radius: 4px;
            font-size: 16px;
            cursor: pointer;
            margin-top: 10px;
        }

        #embedButton:hover, #fullscreenButton:hover {
            background-color: rgb(100, 0, 160);
        }

        #videoContainer {
            margin-top: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            height: calc(100vh - 200px);
        }

        iframe {
            width: 560px;
            height: 315px;
            border: none;
        }
    </style>
</head>
<body>
    <!-- Background Image -->
    <div class="_checkers_l90pt_12"></div>

    <!-- Top Bar -->
    <div class="top-bar">
        <img src="logo.png" alt="Logo">
        <div class="top-bar-title">Yоutube Unblоcker</div>
        <a href="tickets.html">Tickets</a>
    </div>

    <!-- Input Container -->
    <div id="inputContainer">
        <input type="text" id="youtubeLink" placeholder="Enter YouTube Link">
        <button id="embedButton" onclick="embedVideo()">Unblоck Video</button>
        <button id="fullscreenButton" onclick="toggleFullscreen()">Fullscreen</button>
    </div>

    <!-- Main Content: Video Container -->
    <div id="videoContainer">
        <!-- Embedded YouTube video will appear here -->
    </div>

    <script>
        var currentIframe = null;
        var isFullscreen = false;

        function embedVideo() {
            var youtubeLink = document.getElementById("youtubeLink").value;
            var videoContainer = document.getElementById("videoContainer");

            if (youtubeLink.includes("youtube.com") && youtubeLink.includes("watch?v=")) {
                var parts = youtubeLink.split("watch?v=");
                if (parts.length === 2) {
                    var videoId = parts[1];
                    var modifiedLink = "https://www.youtube.com/embed/" + videoId + "?autoplay=1";
                    var iframe = createIframe(modifiedLink);

                    // If there's an existing iframe, remove it
                    if (currentIframe) {
                        videoContainer.removeChild(currentIframe);
                    }

                    // Append the new iframe
                    videoContainer.appendChild(iframe);

                    // Set the currentIframe to the new iframe
                    currentIframe = iframe;
                } else {
                    videoContainer.innerHTML = "Invalid YouTube link";
                }
            } else {
                videoContainer.innerHTML = "Not a YouTube video link";
            }
        }

        function createIframe(src) {
            var iframe = document.createElement("iframe");
            iframe.src = src;
            iframe.allowfullscreen = true;
            iframe.frameborder = "0";
            return iframe;
        }

        function toggleFullscreen() {
            var videoContainer = document.getElementById("videoContainer");
            if (!isFullscreen) {
                videoContainer.style.height = "calc(100vh - 80px)";
                if (currentIframe) {
                    currentIframe.style.width = "100%";
                    currentIframe.style.height = "100%";
                }
                isFullscreen = true;
            } else {
                videoContainer.style.height = "calc(100vh - 200px)";
                if (currentIframe) {
                    currentIframe.style.width = "560px";
                    currentIframe.style.height = "315px";
                }
                isFullscreen = false;
            }
        }
    </script>
</body>
</html>
