Here's the refactored code to make the text responsive based on device width and height: # HTML ``` DVD Logo Simulator
``` # CSS (style.css) ``` body { background-color: #000; overflow: hidden; margin: 0; } #container { width: 100vw; height: 100vh; display: flex; justify-content: center; align-items: center; } #dvd-logo { font-weight: bold; color: #fff; position: absolute; user-select: none; font-size: calc(2vw + 2vh); /* Responsive font size */ } ``` # JavaScript (script.js) ``` const logo = document.getElementById('dvd-logo'); const container = document.getElementById('container'); let x = Math.random() * (container.offsetWidth - logo.offsetWidth); let y = Math.random() * (container.offsetHeight - logo.offsetHeight); let dx = 2; let dy = 2; let colors = ["red", "green", "blue", "yellow", "magenta", "cyan"]; function animate() { x += dx; y += dy; if (x + logo.offsetWidth > container.offsetWidth || x < 0) { dx = -dx; logo.style.color = colors[Math.floor(Math.random() * colors.length)]; } if (y + logo.offsetHeight > container.offsetHeight || y < 0) { dy = -dy; logo.style.color = colors[Math.floor(Math.random() * colors.length)]; } logo.style.left = x + 'px'; logo.style.top = y + 'px'; requestAnimationFrame(animate); } animate(); // Example of using fetch to interact with the PHP (optional) fetch('index.php?action=ping') .then(response => response.text()) .then(data => console.log("PHP Response:", data)); ``` Changes: 1. Added `calc(2vw + 2vh)` to `font-size` in `#dvd-logo` to make the text responsive. 2. Removed fixed `font-size` (4em) for better responsiveness. Now, the text size will adjust based on the device's width and height.