फुलस्क्रीन एचटीएमएल एडिटर कोड

संपादक में खोलें Video अपना कोड प्रकाशित करें

अनुशंसित

26 May 2025

HTML कैलकुलेटर UI कोड उदाहरण

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

फुलस्क्रीन एचटीएमएल एडिटर कोड

अनुशंसित

मेटेहन द्वारा एक कोड

मेटेहन द्वारा एक कोड

HTML कैलकुलेटर UI कोड उदाहरण

HTML

CSS

JS

अनुशंसित

मेटेहन द्वारा एक कोड

मेटेहन द्वारा एक कोड

HTML कैलकुलेटर UI कोड उदाहरण

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS