js+css实现修仙爽文小说可视化提示词设定器代码-html代码-BFW代码库

代码语言：html

所属分类：其他

代码由deepseek-4.1-flash ai生成，可能有错误，仅供参考：点击查看提示词

代码描述：修仙爽文小说可视化设定器

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>修仙小说设定可视化设计器 · Novel Bible</title>
<style>
:root{
  --bg:#0d1117;
  --bg2:#151b24;
  --card:#1a2130;
  --card2:#1f2839;
  --line:#2a3446;
  --text:#e6ecf5;
  --muted:#8695aa;
  --gold:#d9b26a;
  --gold2:#f2d79b;
  --jade:#4fd1a5;
  --red:#e5646b;
  --blue:#6aa9ff;
  --purple:#b07cff;
  --radius:14px;
}
*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,-apple-system,sans-serif;
  font-size:14px;line-height:1.65;-webkit-font-smoothing:antialiased;
}
::-webkit-scrollbar{width:9px;height:9px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:#2c3purple;background:#2c3648;border-radius:9px;}
::-webkit-scrollbar-thumb:hover{background:#3b4a63;}

.app{display:flex;height:100vh;overflow:hidden;}

/* ============ 侧边栏 ============ */
.sidebar{
  width:236px;flex:0 0 236px;display:flex;flex-direction:column;
  background:linear-gradient(180deg,#111721 0%,#0b0f15 100%);
  border-right:1px solid var(--line);padding:18px 14px;
}
.brand{display:flex;gap:10px;align-items:center;padding:0 6px 18px;border-bottom:1px solid var(--line);margin-bottom:14px;}
.logo{
  width:38px;height:38px;flex:0 0 38px;border-radius:11px;
  background:linear-gradient(135deg,#d9b26a,#8a6a2a);
  color:#1a1206;font-weight:900;font-size:19px;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 16px rgba(217,178,106,.25);
}
.brand h1{font-size:14px;margin:0;letter-spacing:.5px;}
.brand p{font-size:10px;margin:1px 0 0;color:var(--muted);letter-spacing:1.4px;text-transform:uppercase;}

#nav{display:flex;flex-direction:column;gap:3px;flex:1;}
#nav button{
  display:flex;align-items:center;gap:10px;
  background:transparent;border:none;color:var(--muted);
  padding:10px 12px;border-radius:10px;cursor:pointer;
  font-size:13.5px;font-family:inherit;text-align:left;transition:.18s;
  position:relative;
}
#nav button i{font-style:normal;font-size:14px;width:16px;text-align:center;opacity:.85;}
#nav button:hover{background:#1a2130;color:var(--text);}
#nav button.active{
  background:linear-gradient(90deg,rgba(217,178,106,.16),rgba(217,178,106,.02));
  color:var(--gold2);font-weight:600;
}
#nav button.active::before{
  content:'';position:absolute;left:0;top:9px;bottom:9px;width:3px;
  background:var(--gold);border-radius:3px;
}
.sidebar-foot{display:flex;gap:8px;padding-top:12px;border-top:1px solid var(--line);}
.sidebar-foot .btn{flex:1;justify-content:center;}

/* ============ 主区 ============ */
.main{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0;}
.topbar{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:16px 28px;border-bottom:1px solid var(--line);
  background:rgba(13,17,23,.85);backdrop-filter:blur(8px);
}
.topbar h2{margin:0;font-size:17px;letter-spacing:.5px;}
.topbar p{margin:2px 0 0;font-size:12px;color:var(--muted);}
.content{flex:1;overflow-y:auto;padding:24px 28px 80px;}

/* ============ 按钮 ============ */
.btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 15px;border-radius:10px;cursor:pointer;
  font-size:13px;font-family:inherit;font-weight:500;
  border:1px solid transparent;transition:.18s;white-space:nowrap;
}
.btn.primary{
  background:linear-gradient(135deg,#d9b26a,#b8913f);color:#1a1206;font-weight:700;
  box-shadow:0 4px 14px rgba(217,178,106,.2);
}
.btn.primary:hover{filter:brightness(1.1);transform:translateY(-1px);}
.btn.ghost{background:#1a2130;border-color:var(--line);color:var(--text);}
.btn.ghost:hover{background:#222c3d;border-color:#3b4a63;}
.btn.small{padding:6px 10px;font-size:12px;}
.btn.danger{color:var(--red);border-color:rgba(229,100,107,.35);}
.btn.danger:hover{background:rgba(229,100,107,.12);}

.icon{
  width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center;
  background:transparent;border:1px solid transparent;border-radius:7px;
  color:var(--muted);cursor:pointer;font-size:13px;font-family:inherit;transition:.15s;line-height:1;
}
.icon:hover{background:#26314a;color:var(--text);}
.icon.danger:hover{background:rgba(229,100,107,.15);color:var(--red);}
.icon:disabled{opacity:.25;cursor:default;}
.icon:disabled:hover{background:transparent;color:var(--muted);}

/* ============ 卡片 ============ */
.panel-head{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:16px;margin-bottom:20px;flex-wrap:wrap;
}
.panel-head h3{margin:0;font-size:15px;letter-spacing:.4px;}
.panel-head p{margin:3px 0 0;font-size:12px;color:var(--muted);}
.panel-head .ops{display:flex;gap:8px;}

.card{
  background:linear-gradient(180deg,var(--card),#171e2a);
  border:1px solid var(--line);border-radius:var(--radius);
  padding:15px 16px;transition:.2s;
}
.card:hover{border-color:#3a4considered;border-color:#39465c;box-shadow:0 6px 22px rgba(0,0,0,.28);}
.card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:8px;}
.card-head h4{margin:6px 0 0;font-size:15px;letter-spacing:.3px;}
.card-ops{display:flex;gap:2px;flex-shrink:0;}
.card .desc{margin:8px 0 0;color:#b9c5d6;font-size:13px;}
.badge{
  display:inline-block;padding:2px 9px;border-radius:20px;
  font-size:11px;font-weight:600;letter-spacing:.4px;
  background:#26314a;color:#9fb0c9;border:1px solid #33405a;
}
.badge.gold{background:rgba(217,178,106,.14);color:var(--gold2);border-color:rgba(217,178,106,.35);}
.badge.jade{background:rgba(79,209,165,.13);color:var(--jade);border-color:rgba(79,209,165,.32);}
.badge.red{background:rgba(229,100,107,.13);color:var(--red);border-color:rgba(229,100,107,.32);}
.badge.purple{background:rgba(176,124,255,.13);color:var(--purple);border-color:rgba(176,124,255,.32);}
.badge.plain{background:transparent;color:var(--muted);border-color:var(--line);}

.meta-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:8px;margin-top:12px;}
.meta-grid > div{
  background:#131a25;border:1px solid #232d3f;border-radius:9px;
  padding:7px 10px;font-size:12.5px;color:#b9c5d6;
}
.meta-grid > div span{display:block;font-size:10.5px;color:var(--muted);letter-spacing:.6px;margin-bottom:2px;}

.kv{margin-top:9px;font-size:13px;color:#b9c5d6;}
.kv > span{
  display:inline-block;min-width:66px;color:var(--muted);font-size:11.5px;
  letter-spacing:.5px;margin-right:6px;
}
.kv.climax{color:var(--gold2);}
.kv.climax > span{color:var(--gold);}

.events{margin-top:10px;font-size:13px;color:#b9c5d6;}
.events > span{display:block;color:var(--muted);font-size:11.5px;letter-spacing:.5px;margin-bottom:4px;}
.events ul{margin:0;padding-left:18px;}
.events li{margin-bottom:3px;}
.events li::marker{color:var(--gold);}

/* ============ 网格 / 分组 ============ */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:14px;}
.group{margin-bottom:26px;}
.group-title{
  display:flex;align-items:center;gap:8px;marg.........完整代码请登录后点击上方下载按钮下载查看