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.