<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Preview</title>
</head>
<body>
    <h1>Hello World!</h1>
    <p>Edit the code to see changes.</p>
    <button onclick="alert('JavaScript is working!')">Click Me</button>
</body>
</html>

body {
    font-family: Arial, sans-serif;
    margin: 20px;
    background: #f0f0f0;
    text-align: center;
}

h1 {
    color: #333;
    margin-bottom: 20px;
}

button {
    background: #4CAF50;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
}

button:hover {
    background: #45a049;
}

console.log('Hello from JavaScript!');

document.addEventListener('DOMContentLoaded', function() {
    console.log('Page loaded successfully!');

    // Add some interactivity
    const buttons = document.querySelectorAll('button');
    buttons.forEach(button => {
        button.addEventListener('mouseover', function() {
            this.style.transform = 'scale(1.05)';
        });

        button.addEventListener('mouseout', function() {
            this.style.transform = 'scale(1)';
        });
    });
});

<form method='POST' class='contact-form'><h2>Contact Form</h2><input type='text' name='name' placeholder='Your Name' required><br><input type='email' name='email' placeholder='Your Email' required><br><textarea name='message' placeholder='Your Message' required>

Current time: 2025-08-22 14:49:26

Random number: 3

Code Editor & Live Preview

Live Preview