Rainbow Mica Code Runner

HTML / CSS / JS Source (Single File)

<!DOCTYPE html>
<html>
<head>
<style>
  body { 
    font-family: 'Segoe UI', sans-serif; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    height: 100vh; 
    background: #121212; 
    color: #e0e0e0;
    margin: 0;
  }
  .card {
    background: #1e1e1e;
    padding: 2rem;
    border-radius: 1rem;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    text-align: center;
    border: 1px solid #333;
    max-width: 350px;
  }
  h1 { 
    background: linear-gradient(90deg, #bb86fc, #9d4edd);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 0.5rem;
  }
  p { color: #a0a0a0; }
  button {
    background: #bb86fc;
    color: #121212;
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
    margin-top: 15px;
    font-weight: bold;
    transition: 0.2s;
  }
  button:hover { background: #9d4edd; }
</style>
</head>
<body>

<div class="card">
  <h1>✨ Hello World</h1>
  <p>这是一个实时 HTML 编辑器</p>
  <p style="font-size:0.8em; color:#666;">点击下方按钮清空代码框</p>
  
   <button onclick="console.log('❤LOVE❤');">❤</button>
  <button onclick="window.parent.clearEditor()">点击我开始编写自己的代码吧！❤</button>
  <br>
  
</div>

</body>
</html>

HTML Body

CSS <style>

JS <script>

Live Preview 🎨

Console Output

▲