Webleb - UI Elements - Fullscreen HTML Editor Code

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML Editor Full Screen</title>
    <style>
        body {
            margin: 0;
            font-family: sans-serif;
            background-color: #1e1e1e;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }

#editor-container {
            width: 80%;
            height: 70%;
            background: #2d2d2d;
            display: flex;
            flex-direction: column;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0,0,0,0.5);
        }

#editor-container:fullscreen {
            width: 100vw;
            height: 100vh;
            border-radius: 0;
        }

/* Vendor prefix support for older browsers */
        #editor-container:-webkit-full-screen { width: 100vw; height: 100vh; }
        #editor-container:-ms-fullscreen { width: 100vw; height: 100vh; }

.toolbar {
            background: #333;
            padding: 10px;
            display: flex;
            justify-content: flex-end;
            border-bottom: 1px solid #444;
        }

.btn-fullscreen {
            background: #007acc;
            color: white;
            border: none;
            padding: 8px 15px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
            transition: background 0.2s;
        }

.btn-fullscreen:hover {
            background: #005f9e;
        }

textarea {
            flex-grow: 1;
            background: #1e1e1e;
            color: #d4d4d4;
            border: none;
            padding: 20px;
            font-family: 'Courier New', Courier, monospace;
            font-size: 16px;
            resize: none;
            outline: none;
        }
    </style>
</head>
<body>

<div id="editor-container">
        <div class="toolbar">
            <button class="btn-fullscreen" onclick="toggleFullScreen()">Toggle Full Screen</button>
        </div>
        <input id="editor" placeholder="Type your HTML here..."/>
    </div>

if (!document.fullscreenElement &&    // standard
                !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement) {  
                
                // Enter Fullscreen
                if (container.requestFullscreen) {
                    container.requestFullscreen();
                } else if (container.msRequestFullscreen) {
                    container.msRequestFullscreen();
                } else if (container.mozRequestFullScreen) {
                    container.mozRequestFullScreen();
                } else if (container.webkitRequestFullscreen) {
                    container.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
                }
            } else {
                // Exit Fullscreen
                if (document.exitFullscreen) {
                    document.exitFullscreen();
                } else if (document.msExitFullscreen) {
                    document.msExitFullscreen();
                } else if (document.mozCancelFullScreen) {
                    document.mozCancelFullScreen();
                } else if (document.webkitExitFullscreen) {
                    document.webkitExitFullscreen();
                }
            }
        }

// Optional: Update button text based on state
        document.addEventListener('fullscreenchange', updateBtn);
        document.addEventListener('webkitfullscreenchange', updateBtn);
        document.addEventListener('mozfullscreenchange', updateBtn);
        document.addEventListener('MSFullscreenChange', updateBtn);

CSS

JS

Fullscreen HTML Editor Code

Recommended