|
|
| （未显示同一用户的16个中间版本） |
| 第1行： |
第1行： |
| <div id="card-manager">
| | {{ResourceLoader|Card.js}} |
| <style>
| | <div id="card-manager-container"></div> |
| #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>
| |