Code Runner with Fullscreen

Code Input

<!DOCTYPE html>
<html>
<head>
    <title>My Interactive Page</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background: linear-gradient(to right, #6a11cb, #2575fc);
            color: white;
            padding: 40px;
            text-align: center;
        }
        h1 {
            font-size: 2.5rem;
            margin-bottom: 20px;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
        }
        .container {
            max-width: 800px;
            margin: 0 auto;
            background-color: rgba(255,255,255,0.1);
            padding: 30px;
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.2);
        }
        .btn {
            background-color: #FF4081;
            border: none;
            color: white;
            padding: 12px 24px;
            font-size: 1.1rem;
            border-radius: 50px;
            cursor: pointer;
            margin-top: 20px;
            transition: all 0.3s ease;
        }
        .btn:hover {
            background-color: #F50057;
            transform: scale(1.05);
        }
        .counter {
            font-size: 4rem;
            font-weight: bold;
            margin: 30px 0;
            color: #FFEB3B;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Welcome to My Interactive Page!</h1>
        <p>This is a demo page created with the Code Runner. You can edit the code on the left and see the changes instantly.</p>
        
        <div class="counter" id="counter">0</div>
        <p>Click the button to increase the counter:</p>
        <button class="btn" onclick="increaseCounter()">Click Me!</button>
        
        <div style="margin-top: 40px;">
            <p>You can add any HTML, CSS, or JavaScript code in the editor.</p>
        </div>
    </div>
    
    <script>
        let count = 0;
        
        function increaseCounter() {
            count++;
            document.getElementById('counter').textContent = count;
            
            if (count % 10 === 0) {
                alert(`You reached ${count} clicks!`);
            }
        }
        
        // Change background color every 5 seconds
        setInterval(() => {
            const colors = ['#6a11cb', '#2575fc', '#ff416c', '#11998e', '#38ef7d'];
            const randomColor = colors[Math.floor(Math.random() * colors.length)];
            document.body.style.background = `linear-gradient(to right, ${randomColor}, #${Math.floor(Math.random()*16777215).toString(16)})`;
        }, 5000);
    </script>
</body>
</html>

Live Output

How to Use This Code Runner

Enter your HTML, CSS, and JavaScript code in the input area on the left
Click the Run Code button to execute your code and see the result
Use the Fullscreen button to view the output in fullscreen mode
Click the Clear button to reset the code editor
Your code will be executed in a secure sandboxed iframe

Quick Example: Try this simple HTML code:

<h1 style="color: #FF5722;">Hello World!</h1>
<p>This is a test paragraph.</p>
<button onclick="alert('Button clicked!')">Click Me</button>