查看“︁Card”︁的源代码

<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;
            color: white;
            border: none;
            border-radius: 3px;
            cursor: pointer;
        }
        
        .control-panel button:hover {
            background: #2a4b8d;
        }
        
        .control-panel select {
            padding: 5px;
            margin-right: 10px;
        }
        
        #cards-container {
            background: white;
            padding: 20px;
            border: 1px solid #ddd;
            border-radius: 5px;
        }
        
        .card-item {
            margin-bottom: 20px;
            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>