Webleb - fragmentos de código - Código del editor HTML de pantalla completa

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);

Código del editor HTML de pantalla completa

Recomendado

Un código de Metehan

Icono giratorio de carga CSS

Un código de Mete

HTML

CSS

JS

Recomendado

Un código de Metehan

Icono giratorio de carga CSS

Un código de Mete

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS