Um Código por códice

1204 codex

Abrir no Editor Video Publique Seu Código

Recomendado

27 June 2025

Exemplo de página de portfólio

22 August 2025

Comentário de espaço reservado para código HTML

10 March 2025

Barra de navegação responsiva premium

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Apple Liquid Glass HTML Editor</title>
    <style>
        /* Global Styles & iOS-inspired Typography */
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
            margin: 0;
            padding: 0;
            background: linear-gradient(to bottom right, #1a1a2e, #16213e, #0f3460); /* Deep, modern dark background */
            color: #e0e0e0;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            overflow: hidden; /* Hide body scrollbar, let editor content handle scrolling */
        }

/* Editor Container - The "Liquid Glass" Element */
        .editor-container {
            display: flex;
            flex-direction: column;
            width: 90vw;
            max-width: 1400px;
            height: 90vh;
            max-height: 900px;
            background: rgba(255, 255, 255, 0.05); /* Very subtle white background for transparency */
            border-radius: 20px;
            box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3); /* Soft shadow for depth */
            border: 1px solid rgba(255, 255, 255, 0.1); /* Subtle white border */
            backdrop-filter: blur(15px); /* The core "liquid glass" blur effect */
            -webkit-backdrop-filter: blur(15px); /* Safari support */
            overflow: hidden; /* Ensures rounded corners are respected for children */
        }

/* Editor Header */
        .editor-header {
            padding: 15px 25px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            display: flex;
            justify-content: space-between;
            align-items: center;
            color: #f0f0f0;
            font-weight: 600;
            font-size: 1.1em;
            letter-spacing: 0.5px;
            background: rgba(255, 255, 255, 0.03); /* Slightly lighter glass for header */
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
        }

.editor-header span {
            color: #88c0d0; /* A subtle accent color for the concept text */
        }

/* Editor Panels Layout */
        .editor-panels {
            display: flex;
            flex-grow: 1; /* Take remaining vertical space */
            padding: 15px;
            gap: 15px; /* Space between code and preview panels */
        }

.editor-panel {
            flex: 1; /* Each panel takes equal width */
            display: flex;
            flex-direction: column;
            background: rgba(0, 0, 0, 0.2); /* Slightly darker glass for individual panels */
            border-radius: 15px;
            border: 1px solid rgba(255, 255, 255, 0.08);
            overflow: hidden; /* For scrollable content inside */
        }

.panel-header {
            padding: 10px 15px;
            font-size: 0.9em;
            color: #b0b0b0;
            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
            background: rgba(255, 255, 255, 0.02);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            font-weight: 500;
        }

/* Textarea for Code Input */
        textarea {
            flex-grow: 1; /* Takes all available space in its panel */
            width: 100%;
            padding: 15px;
            background: transparent; /* Transparent to show panel background */
            border: none;
            color: #e0e0e0; /* Light text for code */
            font-family: 'SF Mono', 'Monaco', 'Consolas', 'Liberation Mono', 'Courier New', monospace; /* Monospace for code */
            font-size: 0.95em;
            resize: none; /* Disable manual resize handle */
            outline: none; /* Remove focus outline */
            line-height: 1.5;
            -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
            spellcheck: false; /* Disable spell check for code */
            autocapitalize: off;
            autocomplete: off;
            autocorrect: off;
        }

/* Custom Scrollbar for WebKit browsers (iOS/Safari/Chrome) */
        textarea::-webkit-scrollbar {
            width: 8px;
            height: 8px;
        }

textarea::-webkit-scrollbar-track {
            background: rgba(255, 255, 255, 0.05);
            border-radius: 10px;
        }

textarea::-webkit-scrollbar-thumb {
            background-color: rgba(255, 255, 255, 0.2);
            border-radius: 10px;
            border: 2px solid transparent; /* Creates padding around the thumb */
            background-clip: content-box; /* Ensures border doesn't cover thumb */
        }

textarea::-webkit-scrollbar-thumb:hover {
            background-color: rgba(255, 255, 255, 0.3);
        }

/* Live Preview Output Area */
        .preview-output {
            flex-grow: 1;
            background: #ffffff; /* Standard white background for web content preview */
            border-bottom-left-radius: 15px;
            border-bottom-right-radius: 15px;
            overflow: auto; /* Enable scrolling for preview content */
            color: #333; /* Default text color for preview */
            padding: 15px; /* Add padding to preview content */
        }

/* Action Buttons */
        .action-buttons {
            display: flex;
            gap: 10px;
        }

.btn {
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
            color: #f0f0f0;
            padding: 8px 15px;
            border-radius: 10px;
            cursor: pointer;
            font-size: 0.9em;
            transition: background 0.3s ease, border-color 0.3s ease;
            backdrop-filter: blur(5px); /* Subtle glass effect for buttons */
            -webkit-backdrop-filter: blur(5px);
        }

.btn:hover {
            background: rgba(255, 255, 255, 0.2);
            border-color: rgba(255, 255, 255, 0.3);
        }

.btn-primary {
            background: #007aff; /* Apple's signature blue */
            border-color: #007aff;
            color: #fff;
        }

.btn-primary:hover {
            background: #005bb5;
            border-color: #005bb5;
        }
    </style>
</head>
<body>
    <div class="editor-container">
        <div class="editor-header">
            <span>HTML Editor <span style="font-weight: 400; opacity: 0.7;">(iOS 26 Concept)</span></span>
            <div class="action-buttons">
                <button class="btn">Save</button>
                <button class="btn btn-primary" onclick="updatePreview()">Run Code</button>
            </div>
        </div>
        <div class="editor-panels">
            <div class="editor-panel">
                <div class="panel-header">HTML Code</div>
                <input id="htmlCode" spellcheck="false" autocapitalize="off" autocomplete="off" autocorrect="off"
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Awesome Page</title>
    <style>
        body { 
            font-family: -apple-system, sans-serif; 
            background-color: #f8f8f8; 
            color: #333; 
            padding: 20px; 
            line-height: 1.6;
        }
        h1 { 
            color: #007aff; /* Apple Blue */
            font-size: 2.2em;
            margin-bottom: 10px;
        }
        p { 
            margin-bottom: 15px; 
            color: #555;
        }
        .card { 
            background: white; 
            padding: 25px; 
            border-radius: 12px; 
            box-shadow: 0 5px 20px rgba(0,0,0,0.1); 
            margin-top: 20px; 
            border: 1px solid #eee;
        }
        .button {
            display: inline-block;
            background-color: #007aff;
            color: white;
            padding: 10px 20px;
            border-radius: 8px;
            text-decoration: none;
            font-weight: 600;
            transition: background-color 0.3s ease;
        }
        .button:hover {
            background-color: #005bb5;
        }
    </style>
</head>
<body>
    <div class="card">
        <h1>Welcome to iOS 26 Web Design!</h1>
        <p>This is a live preview demonstrating a clean, modern, and fluid aesthetic, inspired by Apple's latest UI principles.</p>
        <p>The 'liquid glass' effect is achieved using CSS <code>backdrop-filter</code> on the editor panels.</p>
        <a href="#" class="button">Learn More</a>
    </div>
</body>
</html>/>
            </div>
            <div class="editor-panel">
                <div class="panel-header">Live Preview</div>
                <div class="preview-output" id="livePreview">
                    
                    <h1>Welcome to iOS 26 Web Design!</h1>
                    <p>This is a live preview demonstrating a clean, modern, and fluid aesthetic, inspired by Apple's latest UI principles.</p>
                    <p>The 'liquid glass' effect is achieved using CSS <code>backdrop-filter</code> on the editor panels.</p>
                    <a href="#" class="button">Learn More</a>
                </div>
            </div>
        </div>
    </div>

function updatePreview() {
            // WARNING: Directly injecting user-provided HTML into innerHTML is a security risk (XSS).
            // For a real-world HTML editor, you should render the preview inside an sandboxed iframe
            // using `iframe.srcdoc` for security and isolation.
            livePreviewDiv.innerHTML = htmlCodeTextarea.value;
        }

// Initial update of the preview when the page loads
        updatePreview();

// Update the preview automatically as the user types
        htmlCodeTextarea.addEventListener('input', updatePreview);
    </script>
</body>
</html>

Recomendado

Exemplo de página de portfólio

Comentário de espaço reservado para código HTML

Barra de navegação responsiva premium

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS