Éditeur HTML : Aperçu en direct et saisie de code

392 ONEANOLNYJEFEPP

Ouvrir dans l'éditeur Publiez votre code

Éditeur HTML : Aperçu en direct et saisie de code

Recommandé

20 August 2024

Carte de retournement de prix

28 September 2025

Modèle HTML pour boutique de baskets en ligne

28 January 2026

Metehan

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