<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rebecca Lab</title>
<style>
body{
margin:0;
font-family:-apple-system,BlinkMacSystemFont;
background:linear-gradient(180deg,#0b0f1a,#05070c);
color:#fff;
}
.container{
max-width:1100px;
margin:auto;
padding:40px 20px;
}
h1{
font-size:48px;
margin-bottom:10px;
}
.subtitle{
color:#888;
margin-bottom:40px;
}
.grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:20px;
}
.card{
background:rgba(255,255,255,0.05);
border-radius:18px;
padding:20px;
transition:0.3s;
backdrop-filter:blur(10px);
border:1px solid rgba(255,255,255,0.08);
}
.card:hover{
transform:translateY(-5px);
background:rgba(255,255,255,0.08);
}
.tag{
font-size:12px;
color:#00e0ff;
}
button{
margin-top:10px;
padding:6px 12px;
border:none;
border-radius:8px;
background:#00e0ff;
color:#000;
cursor:pointer;
}
.search{
margin-bottom:30px;
padding:12px;
width:100%;
border-radius:10px;
border:none;
background:#111;
color:#fff;
}
</style>
</head>
<body>
<div class="container">
<h1>Rebecca Lab</h1>
<div class="subtitle">AI工作流 · 提示词 · 作品集</div>
<input class="search" placeholder="搜索工作流 / 提示词..." oninput="search(this.value)">
<div class="grid" id="list">
<div class="card">
<div class="tag">工作流</div>
<h3>AI产品需求拆解</h3>
<p>一句话生成完整PRD结构</p>
</div>
<div class="card">
<div class="tag">提示词</div>
<h3>高级UI优化</h3>
<p id="p1">你是一名资深设计师，请优化UI层级与高级感</p>
<button onclick="copy('p1')">复制</button>
</div>
<div class="card">
<div class="tag">作品集</div>
<h3>智能家居APP</h3>
<p>AI + 3D交互 + 语音控制</p>
</div>
</div>
</div>
<script>
function copy(id){
let text=document.getElementById(id).innerText;
navigator.clipboard.writeText(text);
alert("已复制！");
}
function search(val){
let cards=document.querySelectorAll(".card");
cards.forEach(c=>{
c.style.display=c.innerText.includes(val)?'block':'none';
});
}
</script>
</body>
</html>