HTML Editor

`; document.body.appendChild(codeEditor); document.getElementById('bingus-code-close').onclick = () => { toggleCodeMode(false); }; document.getElementById('bingus-code-apply').onclick = () => { const newHTML = document.getElementById('bingus-code-textarea').value; document.open(); document.write(newHTML); document.close(); }; } function hideCodeEditor() { if (codeEditor) { codeEditor.remove(); codeEditor = null; } } // === BUDDY MODE === function toggleBuddyMode(enabled) { buddyModeEnabled = enabled; if (enabled) { createBuddy(); } else { removeBuddy(); } } function createBuddy() { if (buddy) return; buddy = document.createElement('div'); buddy.id = 'bingus-buddy'; buddy.textContent = '👁️'; document.body.appendChild(buddy); let mouseX = window.innerWidth / 2; let mouseY = window.innerHeight / 2; let buddyX = window.innerWidth / 2; let buddyY = window.innerHeight / 2; document.addEventListener('mousemove', (e) => { mouseX = e.clientX; mouseY = e.clientY; }); function animateBuddy() { if (!buddyModeEnabled) return; const dx = mouseX - buddyX; const dy = mouseY - buddyY; buddyX += dx * 0.05; buddyY += dy * 0.05; buddy.style.left = buddyX + 'px'; buddy.style.top = buddyY + 'px'; const angle = Math.atan2(dy, dx) * 180 / Math.PI; buddy.style.transform = `translate(-50%, -50%) rotate(${angle}deg)`; requestAnimationFrame(animateBuddy); } animateBuddy(); } function removeBuddy() { if (buddy) { buddy.remove(); buddy = null; } } // === BLOBS MODE === function toggleBlobsMode(enabled) { blobsModeEnabled = enabled; if (enabled) { createBlobs(); } else { removeBlobs(); } } function createBlobs() { if (blobs.length > 0) return; for (let i = 0; i < 8; i++) { const blob = document.createElement('div'); blob.className = 'bingus-blob'; blob.style.left = Math.random() * window.innerWidth + 'px'; blob.style.top = Math.random() * window.innerHeight + 'px'; blob.style.width = (30 + Math.random() * 50) + 'px'; blob.style.height = blob.style.width; blob.style.animationDelay = Math.random() * 5 + 's'; blob.style.animationDuration = (10 + Math.random() * 10) + 's'; const hue = Math.random() * 360; blob.style.background = `radial-gradient(circle, hsla(${hue}, 70%, 60%, 0.6), hsla(${hue}, 70%, 40%, 0.3))`; document.body.appendChild(blob); blobs.push(blob); } } function removeBlobs() { blobs.forEach(blob => blob.remove()); blobs = []; } // === FUNNY MODE (Flying Cats) === function toggleFunnyMode(enabled) { funnyModeEnabled = enabled; if (enabled) { createFlyingCats(); } else { removeFlyingCats(); } } function createFlyingCats() { if (cats.length > 0) return; const catEmojis = ['🐱', '😺', '😸', '😹', '😻', '😼', '😽', '🙀', '😿', '😾']; for (let i = 0; i < 12; i++) { const cat = document.createElement('div'); cat.className = 'bingus-cat'; cat.textContent = catEmojis[Math.floor(Math.random() * catEmojis.length)]; cat.style.left = Math.random() * window.innerWidth + 'px'; cat.style.top = Math.random() * window.innerHeight + 'px'; cat.style.animationDelay = Math.random() * 5 + 's'; cat.style.animationDuration = (8 + Math.random() * 8) + 's'; document.body.appendChild(cat); cats.push(cat); } } function removeFlyingCats() { cats.forEach(cat => cat.remove()); cats = []; } // === PING PONG MODE === function togglePingPong(enabled) { pingPongActive = enabled; if (enabled) { startPingPong(); } else { stopPingPong(); } } function startPingPong() { if (gameCanvas) return; gameCanvas = document.createElement('canvas'); gameCanvas.id = 'bingus-ping-pong-game'; gameCanvas.width = 800; gameCanvas.height = 600; document.body.appendChild(gameCanvas); game.canvas = gameCanvas; game.ctx = gameCanvas.getContext('2d'); resetGame(); document.addEventListener('keydown', handleKeyDown); document.addEventListener('keyup', handleKeyUp); gameInterval = setInterval(updateGame, 1000 / 60); } function stopPingPong() { if (!gameCanvas) return; gameCanvas.remove(); gameCanvas = null; clearInterval(gameInterval); gameInterval = null; document.removeEventListener('keydown', handleKeyDown); document.removeEventListener('keyup', handleKeyUp); } function resetGame() { game.ballX = game.canvas.width / 2; game.ballY = game.canvas.height / 2; game.ballVelX = (Math.random() > 0.5 ? 1 : -1) * 5; game.ballVelY = (Math.random() - 0.5) * 8; game.leftPaddleY = game.canvas.height / 2 - game.paddleHeight / 2; game.rightPaddleY = game.canvas.height / 2 - game.paddleHeight / 2; } function handleKeyDown(e) { game.keys[e.key] = true; } function handleKeyUp(e) { game.keys[e.key] = false; } function updateGame() { const canvas = game.canvas; const ctx = game.ctx; const paddleSpeed = 8; if (game.keys['w'] || game.keys['W']) { game.leftPaddleY -= paddleSpeed; } if (game.keys['s'] || game.keys['S']) { game.leftPaddleY += paddleSpeed; } if (game.keys['ArrowUp']) { game.rightPaddleY -= paddleSpeed; } if (game.keys['ArrowDown']) { game.rightPaddleY += paddleSpeed; } game.leftPaddleY = Math.max(0, Math.min(canvas.height - game.paddleHeight, game.leftPaddleY)); game.rightPaddleY = Math.max(0, Math.min(canvas.height - game.paddleHeight, game.rightPaddleY)); game.ballX += game.ballVelX; game.ballY += game.ballVelY; if (game.ballY - game.ballRadius <= 0 || game.ballY + game.ballRadius >= canvas.height) { game.ballVelY = -game.ballVelY; } if (game.ballX - game.ballRadius <= game.paddleWidth) { if (game.ballY >= game.leftPaddleY && game.ballY <= game.leftPaddleY + game.paddleHeight) { game.ballVelX = Math.abs(game.ballVelX); const hitPos = (game.ballY - game.leftPaddleY) / game.paddleHeight - 0.5; game.ballVelY += hitPos * 10; } } if (game.ballX + game.ballRadius >= canvas.width - game.paddleWidth) { if (game.ballY >= game.rightPaddleY && game.ballY <= game.rightPaddleY + game.paddleHeight) { game.ballVelX = -Math.abs(game.ballVelX); const hitPos = (game.ballY - game.rightPaddleY) / game.paddleHeight - 0.5; game.ballVelY += hitPos * 10; } } if (game.ballX - game.ballRadius <= 0) { game.rightScore++; resetGame(); } else if (game.ballX + game.ballRadius >= canvas.width) { game.leftScore++; resetGame(); } render(ctx, canvas); } function render(ctx, canvas) { ctx.fillStyle = '#000'; ctx.fillRect(0, 0, canvas.width, canvas.height); ctx.strokeStyle = 'rgba(255, 255, 255, 0.2)'; ctx.lineWidth = 2; ctx.setLineDash([10, 10]); ctx.beginPath(); ctx.moveTo(canvas.width / 2, 0); ctx.lineTo(canvas.width / 2, canvas.height); ctx.stroke(); ctx.setLineDash([]); ctx.fillStyle = '#fff'; ctx.fillRect(0, game.leftPaddleY, game.paddleWidth, game.paddleHeight); ctx.fillRect(canvas.width - game.paddleWidth, game.rightPaddleY, game.paddleWidth, game.paddleHeight); ctx.fillStyle = '#fff'; ctx.beginPath(); ctx.arc(game.ballX, game.ballY, game.ballRadius, 0, Math.PI * 2); ctx.fill(); ctx.fillStyle = '#fff'; ctx.font = '48px monospace'; ctx.textAlign = 'center'; ctx.fillText(game.leftScore, canvas.width / 4, 60); ctx.fillText(game.rightScore, (canvas.width / 4) * 3, 60); ctx.font = '14px monospace'; ctx.fillStyle = 'rgba(255, 255, 255, 0.5)'; ctx.textAlign = 'left'; ctx.fillText('W/S', 10, canvas.height - 10); ctx.textAlign = 'right'; ctx.fillText('↑/↓', canvas.width - 10, canvas.height - 10); } // === ADD TEXT MODE === function toggleAddTextMode(enabled) { addTextModeEnabled = enabled; if (enabled) { document.body.classList.add('bingus-addtext-mode'); document.body.style.cursor = 'text'; document.addEventListener('click', handleAddTextClick, true); } else { document.body.classList.remove('bingus-addtext-mode'); document.body.style.cursor = ''; document.removeEventListener('click', handleAddTextClick, true); } } function handleAddTextClick(e) { if (!addTextModeEnabled) return; if (e.target.closest('#bingus-ping-pong-game, #bingus-code-editor, #bingus-buddy, .bingus-blob, .bingus-cat')) return; e.preventDefault(); e.stopPropagation(); const textElement = document.createElement('div'); textElement.contentEditable = true; textElement.style.position = 'absolute'; textElement.style.left = (e.pageX - 50) + 'px'; textElement.style.top = (e.pageY - 10) + 'px'; textElement.style.minWidth = '100px'; textElement.style.padding = '8px'; textElement.style.border = '2px solid #000'; textElement.style.background = '#fff'; textElement.style.fontSize = '16px'; textElement.style.zIndex = '999999'; textElement.style.outline = 'none'; textElement.textContent = 'Click to edit'; document.body.appendChild(textElement); textElement.focus(); const range = document.createRange(); range.selectNodeContents(textElement); const selection = window.getSelection(); selection.removeAllRanges(); selection.addRange(range); textElement.addEventListener('blur', () => { if (textElement.textContent.trim().length === 0) { textElement.remove(); } else { textElement.style.border = '1px solid transparent'; } }); } // === ADD IMAGE MODE === function toggleAddImageMode(enabled) { addImageModeEnabled = enabled; if (enabled) { document.body.classList.add('bingus-addimage-mode'); document.body.style.cursor = 'crosshair'; document.addEventListener('click', handleAddImageClick, true); } else { document.body.classList.remove('bingus-addimage-mode'); document.body.style.cursor = ''; document.removeEventListener('click', handleAddImageClick, true); } } function handleAddImageClick(e) { if (!addImageModeEnabled) return; if (e.target.closest('#bingus-ping-pong-game, #bingus-code-editor, #bingus-buddy, .bingus-blob, .bingus-cat, #bingus-image-modal')) return; e.preventDefault(); e.stopPropagation(); const modal = document.createElement('div'); modal.id = 'bingus-image-modal'; modal.innerHTML = ` `; document.body.appendChild(modal); const urlInput = document.getElementById('bingus-img-url'); const addBtn = document.getElementById('bingus-img-add'); const cancelBtn = document.getElementById('bingus-img-cancel'); const uploadBtn = document.getElementById('bingus-img-upload'); const fileInput = document.getElementById('bingus-img-file'); const clickX = e.pageX; const clickY = e.pageY; urlInput.focus(); addBtn.onclick = () => { const imgSrc = urlInput.value.trim(); if (imgSrc) { const img = document.createElement('img'); img.src = imgSrc; img.style.position = 'absolute'; img.style.left = (clickX - 50) + 'px'; img.style.top = (clickY - 50) + 'px'; img.style.maxWidth = '300px'; img.style.maxHeight = '300px'; img.style.border = '2px solid #000'; img.style.zIndex = '999999'; img.style.cursor = 'move'; // Make image draggable let isDragging = false; let offsetX, offsetY; img.addEventListener('mousedown', (evt) => { isDragging = true; offsetX = evt.clientX - img.offsetLeft; offsetY = evt.clientY - img.offsetTop; }); document.addEventListener('mousemove', (evt) => { if (isDragging) { img.style.left = (evt.clientX - offsetX) + 'px'; img.style.top = (evt.clientY - offsetY) + 'px'; } }); document.addEventListener('mouseup', () => { isDragging = false; }); document.body.appendChild(img); } modal.remove(); }; cancelBtn.onclick = () => { modal.remove(); }; uploadBtn.onclick = () => { fileInput.click(); }; fileInput.onchange = (evt) => { const file = evt.target.files[0]; if (file) { const reader = new FileReader(); reader.onload = (event) => { urlInput.value = event.target.result; }; reader.readAsDataURL(file); } }; }

Edit Image

Add Image