Shikues HTML

Shkruani ose ngjitni HTML në të majtë dhe shihni parapamjen në të djathtë.

HTML hyrje

Skriptet ekzekutohen në një iframe të izoluar ndaj nuk mund të aksesojnë faqen kryesore.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>Live Preview</title>
  <style>
    :root {
      color-scheme: light;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }
    body {
      margin: 0;
      padding: 2.5rem;
      line-height: 1.6;
      background: radial-gradient(circle at top, #f8fafc, #eef2ff 55%, #e0f2fe 100%);
      color: #1f2937;
    }
    h1 {
      color: #2563eb;
      font-size: clamp(2rem, 5vw, 3rem);
      margin-bottom: 1rem;
    }
    .card {
      background: white;
      border-radius: 1rem;
      border: 1px solid rgba(37, 99, 235, 0.15);
      box-shadow: 0 25px 45px -20px rgba(37, 99, 235, 0.45);
      padding: 2rem;
      max-width: 560px;
    }
    .note {
      border-left: 4px solid #f59e0b;
      padding-left: 1rem;
      margin-top: 1.5rem;
      font-size: 0.95rem;
      background: linear-gradient(90deg, rgba(245, 158, 11, 0.08), transparent);
    }
    a {
      color: #0ea5e9;
    }
    code {
      background: rgba(148, 163, 184, 0.15);
      padding: 0.15rem 0.35rem;
      border-radius: 0.35rem;
      font-family: "JetBrains Mono", "Fira Code", ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
    }
    @media (prefers-color-scheme: dark) {
      :root {
        color-scheme: dark;
        background: #020617;
        color: #e2e8f0;
      }
      body {
        background: radial-gradient(circle at top, #0f172a, #1e293b 55%, #0b1120 100%);
        color: #e2e8f0;
      }
      .card {
        background: rgba(15, 23, 42, 0.75);
        border: 1px solid rgba(94, 234, 212, 0.2);
        box-shadow: 0 25px 40px -22px rgba(8, 145, 178, 0.4);
      }
      .note {
        border-left-color: #fcd34d;
        background: linear-gradient(90deg, rgba(252, 211, 77, 0.08), transparent);
      }
      a {
        color: #38bdf8;
      }
      code {
        background: rgba(148, 163, 184, 0.2);
      }
    }
  </style>
</head>
<body>
  <div class="card">
    <h1>Live HTML Preview</h1>
    <p>Edit the markup on the left to see changes here instantly. Styles, scripts, and external assets are supported.</p>
    <div class="note">
      <strong>Tip:</strong> Wrap your components with <code>&lt;main&gt;</code> and use flexbox utilities to preview layouts quickly.
    </div>
  </div>
</body>
</html>

Parapamje e gjallëDirekt