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" />
<title>可视化小说提示词生成器</title>
<script src="https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js"></script>
<style>
  *{box-sizing:border-box;margin:0;padding:0}
  :root{
    --bg:#0e1016; --bg2:#151922; --bg3:#1c2130; --line:#2a3142;
    --txt:#e8ecf5; --txt2:#9aa5bd; --acc:#7c5cff; --acc2:#22d3ee;
  }
  html,body{height:100%}
  body{
    background:var(--bg); color:var(--txt);
    font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Segoe UI",sans-serif;
    -webkit-font-smoothing:antialiased; overflow:hidden;
  }
  ::-webkit-scrollbar{width:9px;height:9px}
  ::-webkit-scrollbar-track{background:transparent}
  ::-webkit-scrollbar-thumb{background:#2a3142;border-radius:9px}
  ::-webkit-scrollbar-thumb:hover{background:#3a4459}

  .app{display:flex;flex-direction:column;height:100vh}

  /* 顶栏 */
  .topbar{
    height:58px;flex:none;display:flex;align-items:center;justify-content:space-between;
    padding:0 18px;border-bottom:1px solid var(--line);
    background:linear-gradient(180deg,#171c28,#11141c);
  }
  .brand{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:700;letter-spacing:.5px}
  .brand .dot{
    width:10px;height:10px;border-radius:50%;
    background:linear-gradient(135deg,#7c5cff,#22d3ee);
    box-shadow:0 0 12px rgba(124,92,255,.9);
  }
  .actions{display:flex;gap:8px;flex-wrap:wrap}

  button{
    font-family:inherit;font-size:13px;cursor:pointer;border-radius:8px;
    border:1px solid var(--line);background:var(--bg3);color:var(--txt);
    padding:7px 13px;transition:.16s;white-space:nowrap;
  }
  button:hover{border-color:var(--acc);color:#fff;transform:translateY(-1px)}
  button:active{transform:translateY(0)}
  button.primary{
    background:linear-gradient(135deg,#7c5cff,#22d3ee);border:none;color:#fff;font-weight:600;
    box-shadow:0 4px 14px rgba(124,92,255,.35);
  }
  button.primary:hover{box-shadow:0 6px 20px rgba(124,92,255,.55)}
  button.danger:hover{border-color:#f43f5e;color:#f43f5e}
  button.mini{padding:3px 9px;font-size:11px;border-radius:6px}
  button.block{
    width:100%;padding:11px;border-style:dashed;color:var(--txt2);background:transparent;font-size:13px;
  }
  button.block:hover{color:var(--acc2);border-color:var(--acc2);background:rgba(34,211,238,.05)}

  /* 主区 */
  main{flex:1;display:grid;grid-template-columns:410px 1fr;overflow:hidden}

  .editor{border-right:1px solid var(--line);display:flex;flex-direction:column;overflow:hidden;background:var(--bg2)}
  .preview{display:flex;flex-direction:column;overflow:hidden;background:var(--bg)}

  .tabs{
    flex:none;display:flex;gap:6px;padding:10px;border-bottom:1px solid var(--line);
    align-items:center;background:rgba(0,0,0,.15);
  }
  .tab{
    padding:7px 10px;border-radius:8px;background:transparent;color:var(--txt2);
    border:1px solid transparent;font-size:12.5px;
  }
  .editor .tabs .tab{flex:1;text-align:center}
  .tab.active{background:var(--bg3);color:var(--txt);border-color:var(--line);font-weight:600}
  .spacer{flex:1}

  .panels{flex:1;overflow-y:auto;padding:14px}
  .panel{display:none}
  .panel.active{display:block}

  /* 表单 */
  .field{margin-bottom:11px}
  .field label{display:block;font-size:11.5px;color:var(--txt2);margin-bottom:5px;letter-spacing:.3px}
  input,textarea,select{
    width:100%;background:#10141d;border:1px solid var(--line);border-radius:8px;
    color:var(--txt);padding:8px 10px;font-size:13px;font-family:inherit;outline:none;transition:.16s;
  }
  input:focus,textarea:focus,select:focus{border-color:var(--acc);box-shadow:0 0 0 3px rgba(124,92,255,.16)}
  input::placeholder,textarea::placeholder{color:#4d5670}
  textarea{resize:vertical;min-height:70px;line-height:1.65}
  select{cursor:pointer}
  select option{background:#151922}
  .grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}

  .item-card{
    background:#12161f;border:1px solid var(--line);border-radius:12px;padding:12px;margin-bottom:12px;
    transition:.18s;
  }
  .item-card:hover{border-color:#38415a}
  .item-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
  .item-head .title{
    font-size:12px;font-weight:700;color:var(--acc2);letter-spacing:.5px;
    display:flex;align-items:center;gap:6px;
  }
  .item-head .title::before{content:''.........完整代码请登录后点击上方下载按钮下载查看