Responsive Website Tester Tool

body { font-family: Arial, sans-serif; background-color: #f0f0f0; color: #333; margin: 0; padding: 0; } .container { max-width: 1200px; margin: 20px auto; padding: 20px; background-color: #fff; border-radius: 8px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); text-align: center; } h1 { color: #4CAF50; } .url-input { margin-bottom: 20px; } .url-input input { width: 70%; padding: 10px; font-size: 16px; border: 1px solid #ccc; border-radius: 4px; } .url-input button { padding: 10px 20px; font-size: 16px; background-color: #4CAF50; color: #fff; border: none; border-radius: 4px; cursor: pointer; } .url-input button:hover { background-color: #45a049; } .device-buttons { margin-bottom: 20px; } .device-buttons button { padding: 10px 20px; font-size: 16px; margin: 0 5px; background-color: #008CBA; color: #fff; border: none; border-radius: 4px; cursor: pointer; } .device-buttons button:hover { background-color: #007B9E; } .iframe-container { width: 100%; overflow: hidden; border: 1px solid #ccc; border-radius: 8px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } iframe { width: 100%; height: 600px; border: none; } function loadWebsite() { const url = document.getElementById('url').value; if (url) { document.getElementById('website-frame').src = url.startsWith('http') ? url : 'http://' + url; } else { alert('Please enter a valid URL'); } } function setDevice(device) { const iframe = document.getElementById('website-frame'); switch (device) { case 'desktop': iframe.style.width = '100%'; iframe.style.height = '600px'; break; case 'tablet': iframe.style.width = '768px'; iframe.style.height = '1024px'; break; case 'mobile': iframe.style.width = '375px'; iframe.style.height = '667px'; break; default: iframe.style.width = '100%'; iframe.style.height = '600px'; } }