Editor HTML: vista previa en tiempo real e introducción de código.

30 ONEANOLNYJEFEPP

Abrir en el editor Publica tu código

Editor HTML: vista previa en tiempo real e introducción de código.

Recomendado

15 May 2025

icono de carga 1

3 October 2025

Ejemplo de animación de reflexión CSS

16 October 2025

Ejemplos de animaciones CSS: Carga, Cubos, Esferas

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 2K</title>
    <style>
        body {
            margin: 0;
            height: 100vh;
            display: flex;
            flex-direction: column;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
            background: #1e1e1e;
            color: #fff;
            overflow: hidden;
        }
        header {
            padding: 10px 20px;
            background: #252526;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid #333;
            font-size: 14px;
            letter-spacing: 1px;
        }
        .main {
            display: flex;
            flex: 1;
            height: calc(100vh - 41px);
        }
        #editor {
            flex: 1;
            background: #1e1e1e;
            color: #d4d4d4;
            border: none;
            padding: 20px;
            font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
            font-size: 16px;
            line-height: 1.5;
            resize: none;
            outline: none;
            border-right: 1px solid #333;
        }
        #preview {
            flex: 1;
            background: #ffffff;
            border: none;
        }
        .label {
            position: absolute;
            bottom: 10px;
            right: 10px;
            background: rgba(0,0,0,0.5);
            padding: 5px 10px;
            border-radius: 4px;
            font-size: 10px;
            pointer-events: none;
        }
    </style>
</head>
<body>

<header>
        <div>EDITOR_2K // HTML REPLICA</div>
        <div style="color: #007acc;">LIVE_PREVIEW</div>
    </header>

<div class="main">
        <input id="editor" spellcheck="false" placeholder="Enter HTML here..."<!DOCTYPE html>
<html>
<head>
  <style>
    body { 
      font-family: sans-serif; 
      display: flex; 
      justify-content: center; 
      align-items: center; 
      height: 90vh; 
      margin: 0;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: white;
    }
    .card {
      background: rgba(255,255,255,0.1);
      padding: 2rem;
      border-radius: 15px;
      backdrop-filter: blur(10px);
      box-shadow: 0 8px 32px rgba(0,0,0,0.3);
      text-align: center;
    }
  </style>
</head>
<body>
  <div class="card">
    <h1>Hello 2K</h1>
    <p>Edit the code on the left to see changes here.</p>
  </div>
</body>
</html>/>
        <iframe id="preview"></iframe>
    </div>

function update() {
            const html = editor.value;
            preview.srcdoc = html;
        }

editor.addEventListener('input', update);
        
        // Initial render
        window.onload = update;
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>NBA 2K Replica - Shot Simulator</title>
    <style>
        :root {
            --primary: #e10600;
            --secondary: #1d428a;
            --dark: #050505;
            --gold: #ffcc00;
            --green: #00ff41;
        }

body, html {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            font-family: 'Arial Black', sans-serif;
            background-color: var(--dark);
            color: white;
            overflow: hidden;
            text-transform: uppercase;
        }

/* Background Court */
        .court {
            position: absolute;
            width: 100%;
            height: 100%;
            background: radial-gradient(circle, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.9) 100%),
                        url('https://images.unsplash.com/photo-1544919982-b61976f0ba43?auto=format&fit=crop&w=1920&q=80');
            background-size: cover;
            background-position: center;
            filter: grayscale(30%) brightness(50%);
            z-index: -1;
        }

/* UI Overlay */
        .ui-container {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            height: 100vh;
            padding: 40px;
            box-sizing: border-box;
        }

.header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
        }

.logo {
            font-size: 3rem;
            font-style: italic;
            border-left: 8px solid var(--primary);
            padding-left: 15px;
        }

.scoreboard {
            background: rgba(0,0,0,0.8);
            padding: 20px;
            border-bottom: 4px solid var(--secondary);
            text-align: center;
        }

/* Player Card */
        .player-card {
            width: 300px;
            background: linear-gradient(135deg, #222, #000);
            border: 2px solid var(--gold);
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 0 20px rgba(255, 204, 0, 0.3);
        }

.ovr {
            font-size: 4rem;
            color: var(--gold);
            margin: 0;
        }

/* Shot Meter */
        .shot-meter-container {
            position: absolute;
            bottom: 150px;
            left: 50%;
            transform: translateX(-50%);
            text-align: center;
        }

.meter-bg {
            width: 300px;
            height: 20px;
            background: rgba(255,255,255,0.2);
            border-radius: 10px;
            position: relative;
            overflow: hidden;
            border: 2px solid white;
        }

.meter-target {
            position: absolute;
            left: 75%;
            width: 15px;
            height: 100%;
            background: var(--green);
            box-shadow: 0 0 15px var(--green);
        }

.meter-bar {
            position: absolute;
            left: 0;
            width: 0%;
            height: 100%;
            background: white;
        }

/* Controls */
        .controls {
            margin-top: 20px;
        }

button {
            background: var(--primary);
            color: white;
            border: none;
            padding: 15px 40px;
            font-size: 1.5rem;
            font-weight: bold;
            cursor: pointer;
            transition: 0.2s;
            clip-path: polygon(10% 0, 100% 0, 90% 100%, 0% 100%);
        }

button:active {
            transform: scale(0.95);
        }

.feedback {
            font-size: 2rem;
            height: 50px;
            margin-bottom: 10px;
            text-shadow: 2px 2px black;
        }

.green-release {
            color: var(--green);
            animation: flash 0.5s infinite;
        }

@keyframes flash {
            50% { opacity: 0; }
        }
    </style>
</head>
<body>

<div class="ui-container">
        <div class="header">
            <div class="logo">NBA 2K<span style="color:var(--primary)">25</span><br><small style="font-size: 1rem;">REPLICA ENGINE</small></div>
            <div class="scoreboard">
                <div>SCORE</div>
                <div id="score" style="font-size: 2.5rem;">0</div>
            </div>
        </div>

<div class="player-card">
            <p style="margin: 0; color: #aaa;">MY PLAYER</p>
            <h2 style="margin: 5px 0;">LEBRON JAMES</h2>
            <div style="display: flex; align-items: center; gap: 20px;">
                <h1 class="ovr">99</h1>
                <div style="font-size: 0.8rem;">
                    SF | LAKERS<br>
                    3PT: 88<br>
                    DUNK: 95
                </div>
            </div>
        </div>

<div class="shot-meter-container">
            <div id="feedback" class="feedback"></div>
            <div class="meter-bg">
                <div class="meter-target"></div>
                <div id="meter-bar" class="meter-bar"></div>
            </div>
            <div class="controls">
                <button onmousedown="startShot()" onmouseup="endShot()" ontouchstart="startShot()" ontouchend="endShot()">HOLD TO SHOOT</button>
            </div>
            <p style="font-size: 0.8rem; margin-top: 10px; opacity: 0.7;">Release in the green zone!</p>
        </div>
    </div>

function endShot() {
            if (!isShooting) return;
            clearInterval(interval);
            isShooting = false;

// Target is roughly 75% to 80%
            if (progress >= 73 && progress <= 82) {
                feedback.innerText = "EXCELLENT RELEASE";
                feedback.classList.add('green-release');
                score += 3;
                scoreEl.innerText = score;
                playEffect('green');
            } else if (progress >= 65 && progress <= 90) {
                feedback.innerText = "SLIGHTLY LATE/EARLY";
                feedback.style.color = "white";
                if(Math.random() > 0.5) {
                    score += 2;
                    scoreEl.innerText = score;
                }
            } else {
                feedback.innerText = "VERY LATE/EARLY";
                feedback.style.color = "red";
            }

// Reset meter after a delay
            setTimeout(() => {
                if (!isShooting) {
                    meterBar.style.width = "0%";
                }
            }, 1000);
        }

function playEffect(type) {
            // Visual shake
            document.body.style.transform = "translate(2px, 2px)";
            setTimeout(() => document.body.style.transform = "translate(0,0)", 50);
        }
    </script>
</body>
</html>

CSS