HTML
CSS
JavaScript
<!DOCTYPE html> <html> <head> <title>My Page</title> </head> <body> <h1>Hello World!</h1> <p>Welcome to Live Preview AR</p> <button onclick="changeColor()">Change Color</button> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-1234567890" data-ad-slot="1234567890"></ins> </body> </html>
body { font-family: Arial, sans-serif; background: linear-gradient(45deg, #ff6b6b, #4ecdc4); margin: 0; padding: 20px; min-height: 100vh; } h1 { color: white; text-align: center; text-shadow: 2px 2px 4px rgba(0,0,0,0.3); } p { color: white; text-align: center; font-size: 18px; } button { display: block; margin: 20px auto; padding: 10px 20px; background: white; border: none; border-radius: 25px; cursor: pointer; font-size: 16px; transition: transform 0.3s ease; } button:hover { transform: scale(1.1); }
function changeColor() { const colors = ['#ff6b6b', '#4ecdc4', '#45b7d1', '#96ceb4', '#ffeaa7', '#dda0dd']; const randomColor = colors[Math.floor(Math.random() * colors.length)]; document.body.style.background = `linear-gradient(45deg, ${randomColor}, #667eea)`; }
X
X