聊天 - 猫酒馆

🎁 新人注册领取免费积分,开启你的角色之旅
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>霓虹全息档案库·插件模板版</title>
<style>
    :root {
        --bg-dark: #090a0f;
        --glass-bg: rgba(15, 20, 30, 0.75);
        --text-main: #e2e8f0;
        --text-muted: #94a3b8;
    }

    * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

    body {
        margin: 0; padding: 10px; height: 100vh; 
        background-color: var(--bg-dark);
        font-family: 'Segoe UI', system-ui, sans-serif;
        display: flex; flex-direction: column; overflow: hidden;
        color: var(--text-main);
    }

    body::before {
        content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
        background: 
            radial-gradient(circle at 15% 50%, rgba(255, 0, 128, 0.15), transparent 40%),
            radial-gradient(circle at 85% 30%, rgba(0, 255, 255, 0.15), transparent 40%),
            radial-gradient(circle at 50% 80%, rgba(255, 255, 0, 0.1), transparent 40%);
        animation: bgShift 10s ease-in-out infinite alternate;
        z-index: -1;
    }

    @keyframes bgShift {
        0% { filter: hue-rotate(0deg); }
        100% { filter: hue-rotate(360deg); }
    }

    .app-wrapper {
        width: 100%; max-width: 600px; height: 100%; margin: 0 auto;
        display: flex; flex-direction: column; gap: 15px;
    }

    .neon-container {
        position: relative; background: var(--glass-bg); border-radius: 16px;
        padding: 12px; backdrop-filter: blur(10px); display: flex; flex-direction: column;
    }

    .neon-container::after {
        content: ''; position: absolute; inset: -2px; border-radius: 18px;
        background: linear-gradient(45deg, #ff007f, #00f2fe, #f6d365, #ff0844, #8a2be2);
        background-size: 400% 400%; z-index: -1; animation: neonBorder 5s linear infinite;
    }

    @keyframes neonBorder { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }

    .top-section { flex: 0 0 auto; max-height: 40vh; }
    .bottom-section { flex: 1 1 auto; min-height: 0; }

    .inner-scroll { overflow-y: auto; -webkit-overflow-scrolling: touch; padding-right: 5px; }
    .inner-scroll::-webkit-scrollbar { width: 2px; }
    .inner-scroll::-webkit-scrollbar-thumb { background: rgba(0, 242, 254, 0.5); }

    .neon-title {
        font-size: 16px; font-weight: 900; margin-bottom: 8px; text-transform: uppercase;
        animation: textGlow 2s ease-in-out infinite alternate;
    }
    .title-pro { color: #00f2fe; text-shadow: 0 0 10px rgba(0, 242, 254, 0.8); }
    .title-char { color: #ff007f; text-shadow: 0 0 10px rgba(255, 0, 127, 0.8); }

    @keyframes textGlow {
        from { text-shadow: 0 0 5px currentColor, 0 0 10px currentColor; }
        to { text-shadow: 0 0 10px currentColor, 0 0 20px currentColor, 0 0 30px currentColor; }
    }

    .data-row {
        display: flex; justify-content: space-between; align-items: flex-start;
        padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,0.05);
    }
    .data-row:last-child { border-bottom: none; }
    
    .lbl { font-size: 11px; color: var(--text-muted); flex: 0 0 auto; margin-right: 10px; }
    .val { font-size: 13px; font-weight: bold; text-align: right; }
    .long-txt { font-size: 12px; color: #cbd5e1; line-height: 1.5; margin-top: 5px; }

    .c-gold { color: #ffd700; text-shadow: 0 0 10px #ffd700; }
    .c-pink { color: #ff69b4; text-shadow: 0 0 8px #ff69b4; }
    .c-blue { color: #00f2fe; text-shadow: 0 0 5px #00f2fe; }

    .section-divider {
        display: flex; align-items: center; text-align: center; color: #00f2fe;
        font-size: 12px; font-weight: 800; margin: 15px 0; letter-spacing: 2px;
        text-shadow: 0 0 8px #00f2fe;
    }
    .section-divider::before, .section-divider::after {
        content: ''; flex: 1; border-bottom: 1px solid #00f2fe; margin: 0 10px;
        box-shadow: 0 0 5px #00f2fe;
    }
    .divider-history { color: #ff007f; text-shadow: 0 0 8px #ff007f; }
    .divider-history::before, .divider-history::after { border-bottom-color: #ff007f; box-shadow: 0 0 5px #ff007f; }

    .card { background: rgba(0,0,0,0.5); border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; margin-bottom: 10px; }
    .card-head { padding: 10px; display: flex; justify-content: space-between; cursor: pointer; }
    .c-name { font-size: 14px; font-weight: bold; color: #ff007f; text-shadow: 0 0 5px rgba(255,0,127,0.5); }
    .c-stat { font-size: 10px; color: #00f2fe; margin-top: 2px; }
    
    .c-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.3s; }
    .card.open .c-body { grid-template-rows: 1fr; }
    .c-inner { overflow: hidden; }
    .c-scroll { max-height: 250px; overflow-y: auto; padding: 0 10px 10px; }

    .neon-box {
        margin-top: 5px; padding: 8px; border-radius: 6px; font-size: 12px; font-style: italic; line-height: 1.5;
        background: rgba(255, 0, 127, 0.1); border-left: 3px solid #ff007f; color: #ffb3d9;
        box-shadow: inset 0 0 10px rgba(255,0,127,0.05);
    }
    .neon-box-history {
        border-color: #b53471; color: #ff9ff3; background: rgba(181, 52, 113, 0.1);
    }

</style>
</head>
<body>

<div class="app-wrapper">

    <!-- ================= 上半区：主角档案占位符 ================= -->
    <div class="neon-container top-section">
        <div class="neon-title title-pro">【主角档案】{{主角名称}}</div>
        <div class="inner-scroll">
            <div class="data-row">
                <span class="lbl">等级 / 核心能力</span>
                <span class="val" style="color:#00f2fe;">{{主角等级}} | <span class="c-gold">{{主角核心武魂或职业}}</span></span>
            </div>
            <div class="data-row">
                <span class="lbl">特殊血脉/体质</span>
                <span class="val" style="color:#ff0000; text-shadow:0 0 10px #ff0000;">{{主角血脉状态}}</span>
            </div>
            <div class="data-row">
                <span class="lbl">力量配置标识</span>
                <span class="val">{{主角光环配置}}</span>
            </div>
            <div class="data-row" style="flex-direction: column;">
                <span class="lbl" style="margin-bottom: 4px; font-size: 12px; color:#fff;">掌握技能清单：</span>
                <div class="long-txt c-blue">
                    {{主角技能列表HTML代码注入区}}
                </div>
            </div>
            <div class="data-row">
                <span class="lbl">当前状态</span>
                <span class="val" style="color:#00ff00; text-shadow: 0 0 5px #00ff00;">{{主角当前生理与心理状态}}</span>
            </div>
        </div>
    </div>

    <!-- ================= 下半区：红颜网络动态生成容器 ================= -->
    <div class="neon-container bottom-section">
        <div class="neon-title title-char">【红颜网络枢纽】</div>
        
        <div class="inner-scroll">

            <!-- 动态生成区1：当前互动的角色 -->
            <div class="section-divider">当前实时互动区</div>
            
            <!-- 插件循环渲染点 - 实时互动角色 -->
            <!-- 假设插件注入以下HTML结构 -->
            <div class="card open" onclick="toggleCard(this)">
                <div class="card-head">
                    <div>
                        <div class="c-name">{{互动角色名称}}</div>
                        <div class="c-stat">▶ {{互动角色当前所处位置或动作}}</div>
                    </div>
                </div>
                <div class="c-body">
                    <div class="c-inner">
                        <div class="c-scroll">
                            <div class="data-row">
                                <span class="lbl">身份 / 等级</span>
                                <span class="val">{{互动角色身份}} | {{互动角色等级}}</span>
                            </div>
                            <div class="data-row">
                                <span class="lbl">核心能力 / 好感度</span>
                                <span class="val c-gold">{{互动角色核心能力}} | <span class="c-pink">{{互动角色好感度数值及描述}}</span></span>
                            </div>
                            <div class="data-row" style="flex-direction: column;">
                                <span class="lbl">穿着打扮：</span>
                                <div class="long-txt">{{互动角色当前外观衣着描写}}</div>
                            </div>
                            <div class="data-row" style="flex-direction: column;">
                                <span class="lbl">力量与技能：</span>
                                <div class="long-txt c-gold">{{互动角色详细技能与作战方式}}</div>
                            </div>
                            <div class="data-row" style="flex-direction: column;">
                                <span class="lbl">对主角的看法：</span>
                                <div class="long-txt">{{互动角色对主角的深层印象}}</div>
                            </div>
                            <div class="data-row" style="flex-direction: column; border:none;">
                                <span class="lbl">当前脑海中的想法：</span>
                                <div class="neon-box">
                                    {{互动角色当前正在思考的心声或心理活动}}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 动态生成区2：历史交流的角色 -->
            <div class="section-divider divider-history">过往历史结识区</div>

            <!-- 插件循环渲染点 - 历史角色 -->
            <!-- 假设插件注入以下HTML结构 -->
            <div class="card" onclick="toggleCard(this)">
                <div class="card-head">
                    <div>
                        <div class="c-name" style="color:#b53471;">{{历史角色名称}}</div>
                        <div class="c-stat" style="color:#f39c12;">地理位置：{{历史角色当前所处地理位置}}</div>
                    </div>
                </div>
                <div class="c-body">
                    <div class="c-inner">
                        <div class="c-scroll">
                            <div class="data-row">
                                <span class="lbl">身份 / 等级</span>
                                <span class="val">{{历史角色身份}} | {{历史角色等级}}</span>
                            </div>
                            <div class="data-row">
                                <span class="lbl">核心能力 / 好感度</span>
                                <span class="val" style="color:#9b59b6;">{{历史角色核心能力}} | <span class="c-pink">{{历史角色好感度数值及描述}}</span></span>
                            </div>
                            <div class="data-row" style="flex-direction: column;">
                                <span class="lbl">穿着打扮：</span>
                                <div class="long-txt">{{历史角色当前外观衣着描写}}</div>
                            </div>
                            <div class="data-row" style="flex-direction: column;">
                                <span class="lbl">力量与技能：</span>
                                <div class="long-txt" style="color:#00f2fe;">{{历史角色详细技能与作战方式}}</div>
                            </div>
                            <div class="data-row" style="flex-direction: column;">
                                <span class="lbl">对主角的看法：</span>
                                <div class="long-txt">{{历史角色对主角的深层印象}}</div>
                            </div>
                            <div class="data-row" style="flex-direction: column; border:none;">
                                <span class="lbl">当前不在身边的实时境遇与想法：</span>
                                <div class="neon-box neon-box-history">
                                    {{历史角色当前正在做的事情，以及内心的实时想法}}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 可在此处由插件继续插入更多的历史角色卡片 -->

        </div>
    </div>

</div>

<script>
    // 通用折叠交互逻辑
    function toggleCard(el) {
        let open = el.classList.contains('open');
        document.querySelectorAll('.card').forEach(c => c.classList.remove('open'));
        if (!open) el.classList.add('open');
    }
</script>
</body>
</html>
创建角色档案,一键开启对话