MediaWiki

Card:修订间差异

来自卡厄思梦境WIKI

律Rhyme留言 | 贡献
创建页面,内容为“<div id="card-manager"> <style> #card-manager { max-width: 1200px; margin: 0 auto; padding: 20px; } .control-panel { background: #f8f9fa; padding: 15px; border-radius: 5px; margin-bottom: 20px; } .control-panel button { margin-right: 10px; padding: 5px 15px; background: #36c;…”
 
律Rhyme留言 | 贡献
无编辑摘要
第1行: 第1行:
<div id="card-manager">
<div class="cm-wrapper">
     <style>
     <h2>卡牌数据管理器</h2>
         #card-manager {
   
             max-width: 1200px;
    <div class="cm-container">
             margin: 0 auto;
        <!-- 左侧:输入区域 -->
             padding: 20px;
         <div class="cm-section cm-input-section">
        }
            <div class="cm-section-title">卡牌数据</div>
       
           
        .control-panel {
            <div class="cm-form-group">
             background: #f8f9fa;
                <label>卡牌名称:</label>
             padding: 15px;
                <input type="text" id="card-name" class="cm-input" placeholder="请输入卡牌名称...">
             border-radius: 5px;
            </div>
             margin-bottom: 20px;
           
        }
             <div class="cm-form-group">
       
                <label>卡组类型:</label>
        .control-panel button {
                <select id="deck-type" class="cm-select">
            margin-right: 10px;
                    <option value="">请选择</option>
             padding: 5px 15px;
                    <option value="起始卡牌">起始卡牌</option>
             background: #36c;
                    <option value="独特卡牌">独特卡牌</option>
             color: white;
                    <option value="灵光一闪">灵光一闪</option>
             border: none;
                    <option value="衍生卡牌">衍生卡牌</option>
             border-radius: 3px;
                </select>
             cursor: pointer;
            </div>
        }
           
       
             <div class="cm-form-group">
        .control-panel button:hover {
                <label>图片文件:</label>
             background: #2a4b8d;
                <input type="text" id="card-art" class="cm-input" placeholder="如: unique_1003_01.png">
         }
            </div>
           
             <div class="cm-form-group">
                <label>属性:</label>
                <select id="card-attr" class="cm-select">
                    <option value="">请选择</option>
                    <option value="热情">热情</option>
                    <option value="秩序">秩序</option>
                    <option value="正义">正义</option>
                    <option value="本能">本能</option>
                    <option value="虚无">虚无</option>
                </select>
            </div>
           
            <div class="cm-form-group">
                <label>稀有度:</label>
                <select id="card-rarity" class="cm-select">
                    <option value="">请选择</option>
                    <option value="白">白</option>
                    <option value="蓝">蓝</option>
                    <option value="橙">橙</option>
                    <option value="彩">彩</option>
                </select>
            </div>
              
            <div class="cm-form-group">
                <label>AP (行动点):</label>
                <input type="text" id="card-ap" class="cm-input" placeholder="输入数字或X">
            </div>
           
             <div class="cm-form-group">
                <label>卡牌类型:</label>
                <select id="card-type" class="cm-select">
                    <option value="">请选择</option>
                    <option value="攻击">攻击</option>
                    <option value="技能">技能</option>
                    <option value="强化">强化</option>
                    <option value="状态异常">状态异常</option>
                </select>
            </div>
           
             <div class="cm-form-group">
                <label>卡牌机制:</label>
                <input type="text" id="card-mechanism" class="cm-input" placeholder="如:消灭">
            </div>
           
             <div class="cm-form-group">
                <label>卡牌描述:</label>
                <div class="cm-format-buttons">
                    <button id="blue-text-btn" class="cm-btn cm-btn-small cm-btn-blue">蓝色文本</button>
                    <button id="green-text-btn" class="cm-btn cm-btn-small cm-btn-green">绿色文本</button>
                    <button id="green-stroke-btn" class="cm-btn cm-btn-small cm-btn-green">绿色描边</button>
                    <button id="br-btn" class="cm-btn cm-btn-small cm-btn-orange">插入&lt;br&gt;</button>
                </div>
                <textarea id="card-desc" class="cm-textarea" placeholder="请输入卡牌描述..."></textarea>
            </div>
              
             <div class="cm-form-group">
                <label>衍生卡牌:</label>
                <input type="text" id="card-derived" class="cm-input" placeholder="请输入衍生卡牌名称">
             </div>
              
             <div class="cm-button-group">
                <button id="add-card-btn" class="cm-btn cm-btn-success">添加卡牌</button>
                <button id="add-variant-btn" class="cm-btn cm-btn-success">添加变体</button>
            </div>
              
            <div class="cm-button-group">
                <button id="save-card-btn" class="cm-btn">保存数据</button>
                <button id="clear-form-btn" class="cm-btn">清空表单</button>
             </div>
         </div>
          
          
         .control-panel select {
         <!-- 中间:列表区域 -->
             padding: 5px;
        <div class="cm-section cm-list-section">
             margin-right: 10px;
            <div class="cm-section-title">卡牌列表</div>
         }
            <div id="card-list" class="cm-list"></div>
              
             <div class="cm-section-title" style="margin-top: 20px;">变体列表</div>
            <div id="variant-list" class="cm-list"></div>
           
            <div class="cm-button-group">
                <button id="delete-card-btn" class="cm-btn cm-btn-danger">删除卡牌</button>
                <button id="delete-variant-btn" class="cm-btn cm-btn-danger">删除变体</button>
            </div>
         </div>
          
          
         #cards-container {
         <!-- 右侧:代码预览 -->
            background: white;
         <div class="cm-section cm-preview-section">
            padding: 20px;
             <div class="cm-section-title">Lua代码预览</div>
            border: 1px solid #ddd;
            <pre id="code-preview" class="cm-code-preview">-- 暂无数据</pre>
            border-radius: 5px;
           
        }
            <div class="cm-button-group">
       
                <button id="export-btn" class="cm-btn">导出到模块</button>
        .card-item {
                <button id="import-btn" class="cm-btn">从模块导入</button>
            margin-bottom: 20px;
            </div>
            border: 1px solid #e0e0e0;
            border-radius: 5px;
            overflow: hidden;
         }
       
        .card-item h3 {
            margin: 0;
            padding: 10px;
            background: #f0f0f0;
            cursor: pointer;
            user-select: none;
        }
       
        .card-item h3:hover {
            background: #e0e0e0;
        }
       
        .card-variants {
            padding: 10px;
            display: none;
        }
       
        .card-variant {
            background: #f8f8f8;
            padding: 15px;
             margin-bottom: 10px;
            border-radius: 3px;
            border: 1px solid #ddd;
        }
       
        .field {
            margin-bottom: 10px;
        }
       
        .field label {
            display: inline-block;
            width: 100px;
            font-weight: bold;
        }
       
        .field input,
        .field select,
        .field textarea {
            width: calc(100% - 110px);
            padding: 5px;
            border: 1px solid #ccc;
            border-radius: 3px;
        }
       
        .field textarea {
            min-height: 60px;
            vertical-align: top;
        }
       
        button {
            padding: 5px 10px;
            margin-top: 10px;
            background: #36c;
            color: white;
            border: none;
            border-radius: 3px;
            cursor: pointer;
        }
       
        button:hover {
            background: #2a4b8d;
        }
       
        .card-variant button {
            background: #d33;
            margin-left: 5px;
        }
       
        .card-variant button:hover {
            background: #b32424;
        }
       
        .loading {
            text-align: center;
            padding: 20px;
            color: #666;
        }
       
        .error {
            color: #d33;
            padding: 10px;
            background: #fee;
            border: 1px solid #fcc;
            border-radius: 3px;
            margin: 10px 0;
        }
    </style>
   
    <div class="control-panel">
        <label>选择角色:</label>
        <select id="character-select">
            <option value="">加载中...</option>
        </select>
        <button id="refresh-btn">刷新列表</button>
        <button id="add-card-btn">添加新卡牌</button>
        <button id="save-btn">保存所有更改</button>
    </div>
   
    <div id="cards-container">
        <div class="loading">请选择一个角色来管理其卡牌</div>
    </div>
</div>
 
<script src="/index.php?title=MediaWiki:Card.js&action=raw&ctype=text/javascript"></script>

2025年10月2日 (四) 10:17的版本

卡牌数据管理器

卡牌数据
               <label>卡牌名称:</label>
               <input type="text" id="card-name" class="cm-input" placeholder="请输入卡牌名称...">
               <label>卡组类型:</label>
               <select id="deck-type" class="cm-select">
                   <option value="">请选择</option>
                   <option value="起始卡牌">起始卡牌</option>
                   <option value="独特卡牌">独特卡牌</option>
                   <option value="灵光一闪">灵光一闪</option>
                   <option value="衍生卡牌">衍生卡牌</option>
               </select>
               <label>图片文件:</label>
               <input type="text" id="card-art" class="cm-input" placeholder="如: unique_1003_01.png">
               <label>属性:</label>
               <select id="card-attr" class="cm-select">
                   <option value="">请选择</option>
                   <option value="热情">热情</option>
                   <option value="秩序">秩序</option>
                   <option value="正义">正义</option>
                   <option value="本能">本能</option>
                   <option value="虚无">虚无</option>
               </select>
               <label>稀有度:</label>
               <select id="card-rarity" class="cm-select">
                   <option value="">请选择</option>
                   <option value="白">白</option>
                   <option value="蓝">蓝</option>
                   <option value="橙">橙</option>
                   <option value="彩">彩</option>
               </select>
               <label>AP (行动点):</label>
               <input type="text" id="card-ap" class="cm-input" placeholder="输入数字或X">
               <label>卡牌类型:</label>
               <select id="card-type" class="cm-select">
                   <option value="">请选择</option>
                   <option value="攻击">攻击</option>
                   <option value="技能">技能</option>
                   <option value="强化">强化</option>
                   <option value="状态异常">状态异常</option>
               </select>
               <label>卡牌机制:</label>
               <input type="text" id="card-mechanism" class="cm-input" placeholder="如:消灭">
               <label>卡牌描述:</label>
                   <button id="blue-text-btn" class="cm-btn cm-btn-small cm-btn-blue">蓝色文本</button>
                   <button id="green-text-btn" class="cm-btn cm-btn-small cm-btn-green">绿色文本</button>
                   <button id="green-stroke-btn" class="cm-btn cm-btn-small cm-btn-green">绿色描边</button>
                   <button id="br-btn" class="cm-btn cm-btn-small cm-btn-orange">插入<br></button>
               <textarea id="card-desc" class="cm-textarea" placeholder="请输入卡牌描述..."></textarea>
               <label>衍生卡牌:</label>
               <input type="text" id="card-derived" class="cm-input" placeholder="请输入衍生卡牌名称">
               <button id="add-card-btn" class="cm-btn cm-btn-success">添加卡牌</button>
               <button id="add-variant-btn" class="cm-btn cm-btn-success">添加变体</button>
               <button id="save-card-btn" class="cm-btn">保存数据</button>
               <button id="clear-form-btn" class="cm-btn">清空表单</button>
卡牌列表
变体列表
               <button id="delete-card-btn" class="cm-btn cm-btn-danger">删除卡牌</button>
               <button id="delete-variant-btn" class="cm-btn cm-btn-danger">删除变体</button>
Lua代码预览
-- 暂无数据
               <button id="export-btn" class="cm-btn">导出到模块</button>
               <button id="import-btn" class="cm-btn">从模块导入</button>