<script>
    let nyanContainer = document.createElement("div");
    nyanContainer.style = `
        position: fixed;
        top: 10%;
        left: 10%;
        width: 40%;
        max-width: 550px;
        min-width: 250px;
        background: black;
        border: 5px solid magenta;
        border-radius: 20px;
        padding: 20px;
        box-shadow: 0 0 20px magenta;
        text-align: center;
        z-index: 9999;
        cursor: grab;
        display: flex;
        flex-direction: column;
        align-items: center;
        transform-origin: center;
    `;

    let nyanImg = document.createElement("img");
    nyanImg.src = "https://media1.tenor.com/m/2roX3uxz_68AAAAd/cat-space.gif";
    nyanImg.style.width = "100%";
    nyanImg.style.height = "auto";

    let hackedText = document.createElement("p");
    hackedText.style = `
        font-size: 20px;
        color: cyan;
        font-weight: bold;
        text-shadow: 2px 2px magenta;
        margin-top: 10px;
        white-space: nowrap;
    `;
    hackedText.innerHTML = "hacked by aw3s0mecat";

    nyanContainer.appendChild(nyanImg);
    nyanContainer.appendChild(hackedText);
    document.body.appendChild(nyanContainer);

    // Dragging for Mouse and Touch
    let isDragging = false, offsetX, offsetY;
    
    function preventScroll(e) {
        e.preventDefault();
    }

    function startDrag(e) {
        isDragging = true;
        let event = e.type.includes("touch") ? e.touches[0] : e;
        offsetX = event.clientX - nyanContainer.getBoundingClientRect().left;
        offsetY = event.clientY - nyanContainer.getBoundingClientRect().top;
        nyanContainer.style.cursor = "grabbing";
        document.addEventListener("touchmove", preventScroll, { passive: false }); // Prevents page scrolling
    }

    function moveDrag(e) {
        if (!isDragging) return;
        let event = e.type.includes("touch") ? e.touches[0] : e;
        let x = event.clientX - offsetX;
        let y = event.clientY - offsetY;
        nyanContainer.style.left = `${x}px`;
        nyanContainer.style.top = `${y}px`;
    }

    function stopDrag() {
        isDragging = false;
        nyanContainer.style.cursor = "grab";
        document.removeEventListener("touchmove", preventScroll); // Re-enable scrolling after drag
    }

    // Mouse events
    nyanContainer.addEventListener("mousedown", startDrag);
    document.addEventListener("mousemove", moveDrag);
    document.addEventListener("mouseup", stopDrag);

    // Touch events for mobile
    nyanContainer.addEventListener("touchstart", startDrag);
    document.addEventListener("touchmove", moveDrag);
    document.addEventListener("touchend", stopDrag);

    // Pinch-to-Zoom for Mobile
    let initialDistance = null;
    let scale = 1;

    function getDistance(touches) {
        let dx = touches[0].clientX - touches[1].clientX;
        let dy = touches[0].clientY - touches[1].clientY;
        return Math.sqrt(dx * dx + dy * dy);
    }

    function startPinch(e) {
        if (e.touches.length === 2) {
            initialDistance = getDistance(e.touches);
        }
    }

    function pinchZoom(e) {
        if (e.touches.length === 2 && initialDistance !== null) {
            let newDistance = getDistance(e.touches);
            let zoomFactor = newDistance / initialDistance;
            scale = Math.max(0.5, Math.min(2, scale * zoomFactor)); // Limit scaling between 0.5x and 2x
            nyanContainer.style.transform = `scale(${scale})`;
            initialDistance = newDistance;
        }
    }

    function endPinch() {
        initialDistance = null;
    }

    // Touch event listeners for pinch-to-zoom
    nyanContainer.addEventListener("touchstart", startPinch);
    nyanContainer.addEventListener("touchmove", pinchZoom);
    nyanContainer.addEventListener("touchend", endPinch);
</script>
