⚡ HTML/CSS/JS 在线工具

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>我的页面</title>
</head>
<body>
  <div class="card">
    <h1>你好，世界 👋</h1>
    <p>这是一个在线代码运行工具。</p>
    <button id="btn">点我试试</button>
    <p id="output"></p>
  </div>
</body>
</html>

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  background: linear-gradient(135deg, #667eea, #764ba2);
}

.card {
  background: #fff;
  padding: 40px 48px;
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
  text-align: center;
}

h1 {
  margin: 0 0 12px;
  color: #1f2937;
  font-size: 26px;
}

p {
  color: #6b7280;
  margin: 0 0 20px;
}

button {
  padding: 10px 28px;
  border: none;
  border-radius: 10px;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
}

:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(99, 102, 241, 0.4);
}

#output {
  margin-top: 16px;
  font-weight: 600;
  color: #6366f1;
}

const btn = document.getElementById('btn');
const output = document.getElementById('output');
let count = 0;

btn.addEventListener('click', () => {
  count++;
  output.textContent = `你点击了 ${count} 次`;
  console.log('点击次数:', count);
});

console.log('页面已加载 ✨');