216 lines
12 KiB
HTML
216 lines
12 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>创建卡牌 - 战锤40K行星总督</title>
|
||
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
|
||
<link rel="stylesheet" href="{{ url_for('static', filename='css/custom_cards.css') }}">
|
||
</head>
|
||
<body class="create-card-page">
|
||
<div class="container">
|
||
<header>
|
||
<h1>创建自制卡牌</h1>
|
||
<div class="header-actions">
|
||
<a href="{{ url_for('custom_cards') }}" class="btn">返回卡牌列表</a>
|
||
</div>
|
||
</header>
|
||
|
||
<main>
|
||
<div class="card-form-container">
|
||
<form id="create-card-form" method="post" action="javascript:void(0);">
|
||
<div class="form-section">
|
||
<h2>基本信息</h2>
|
||
|
||
<div class="form-group">
|
||
<label for="card-title">卡牌标题 <span class="required">*</span></label>
|
||
<input type="text" id="card-title" name="title" maxlength="50" required>
|
||
<div class="character-count"><span id="title-count">0</span>/50</div>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="character-name">角色名称 <span class="required">*</span></label>
|
||
<input type="text" id="character-name" name="characterName" maxlength="30" required>
|
||
<div class="character-count"><span id="name-count">0</span>/30</div>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="character-title">角色头衔 <span class="required">*</span></label>
|
||
<input type="text" id="character-title" name="characterTitle" maxlength="30" required>
|
||
<div class="character-count"><span id="title-count-2">0</span>/30</div>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="character-avatar">角色图标 <span class="required">*</span></label>
|
||
<input type="text" id="character-avatar" name="characterAvatar" maxlength="5" placeholder="使用表情符号，例如: 👨⚖️" required>
|
||
<div class="emoji-picker">
|
||
<div class="emoji-group">
|
||
<span class="emoji-item" data-emoji="👨⚖️">👨⚖️</span>
|
||
<span class="emoji-item" data-emoji="👸">👸</span>
|
||
<span class="emoji-item" data-emoji="🤖">🤖</span>
|
||
<span class="emoji-item" data-emoji="👽">👽</span>
|
||
<span class="emoji-item" data-emoji="👹">👹</span>
|
||
<span class="emoji-item" data-emoji="🛡️">🛡️</span>
|
||
<span class="emoji-item" data-emoji="⚔️">⚔️</span>
|
||
<span class="emoji-item" data-emoji="🔮">🔮</span>
|
||
<span class="emoji-item" data-emoji="📊">📊</span>
|
||
<span class="emoji-item" data-emoji="💰">💰</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="card-description">卡牌描述 <span class="required">*</span></label>
|
||
<textarea id="card-description" name="description" rows="4" maxlength="200" required></textarea>
|
||
<div class="character-count"><span id="desc-count">0</span>/200</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-section">
|
||
<h2>选项 A（同意/点头）</h2>
|
||
|
||
<div class="form-group">
|
||
<label for="option-a-text">选项 A 文本 <span class="required">*</span></label>
|
||
<input type="text" id="option-a-text" name="optionAText" maxlength="50" required>
|
||
<div class="character-count"><span id="option-a-count">0</span>/50</div>
|
||
</div>
|
||
|
||
<div class="form-group effects-group">
|
||
<h3>效果</h3>
|
||
|
||
<div class="effects-grid">
|
||
<div class="effect-item">
|
||
<label for="option-a-loyalty">帝国忠诚度:</label>
|
||
<input type="number" id="option-a-loyalty" name="optionALoyalty" min="-25" max="25" value="0">
|
||
</div>
|
||
|
||
<div class="effect-item">
|
||
<label for="option-a-chaos">混沌侵染:</label>
|
||
<input type="number" id="option-a-chaos" name="optionAChaos" min="-25" max="25" value="0">
|
||
</div>
|
||
|
||
<div class="effect-item">
|
||
<label for="option-a-population">民众控制:</label>
|
||
<input type="number" id="option-a-population" name="optionAPopulation" min="-25" max="25" value="0">
|
||
</div>
|
||
|
||
<div class="effect-item">
|
||
<label for="option-a-military">军事力量:</label>
|
||
<input type="number" id="option-a-military" name="optionAMilitary" min="-25" max="25" value="0">
|
||
</div>
|
||
|
||
<div class="effect-item">
|
||
<label for="option-a-resources">资源储备:</label>
|
||
<input type="number" id="option-a-resources" name="optionAResources" min="-25" max="25" value="0">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="total-effects">
|
||
总计: <span id="option-a-total">0</span>/80
|
||
<div class="effect-warning" id="option-a-warning">效果总值超过限制！</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-section">
|
||
<h2>选项 B（拒绝/摇头）</h2>
|
||
|
||
<div class="form-group">
|
||
<label for="option-b-text">选项 B 文本 <span class="required">*</span></label>
|
||
<input type="text" id="option-b-text" name="optionBText" maxlength="50" required>
|
||
<div class="character-count"><span id="option-b-count">0</span>/50</div>
|
||
</div>
|
||
|
||
<div class="form-group effects-group">
|
||
<h3>效果</h3>
|
||
|
||
<div class="effects-grid">
|
||
<div class="effect-item">
|
||
<label for="option-b-loyalty">帝国忠诚度:</label>
|
||
<input type="number" id="option-b-loyalty" name="optionBLoyalty" min="-25" max="25" value="0">
|
||
</div>
|
||
|
||
<div class="effect-item">
|
||
<label for="option-b-chaos">混沌侵染:</label>
|
||
<input type="number" id="option-b-chaos" name="optionBChaos" min="-25" max="25" value="0">
|
||
</div>
|
||
|
||
<div class="effect-item">
|
||
<label for="option-b-population">民众控制:</label>
|
||
<input type="number" id="option-b-population" name="optionBPopulation" min="-25" max="25" value="0">
|
||
</div>
|
||
|
||
<div class="effect-item">
|
||
<label for="option-b-military">军事力量:</label>
|
||
<input type="number" id="option-b-military" name="optionBMilitary" min="-25" max="25" value="0">
|
||
</div>
|
||
|
||
<div class="effect-item">
|
||
<label for="option-b-resources">资源储备:</label>
|
||
<input type="number" id="option-b-resources" name="optionBResources" min="-25" max="25" value="0">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="total-effects">
|
||
总计: <span id="option-b-total">0</span>/80
|
||
<div class="effect-warning" id="option-b-warning">效果总值超过限制！</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-actions">
|
||
<button type="button" id="preview-button" class="btn btn-secondary">预览</button>
|
||
<button type="submit" class="btn btn-primary">提交卡牌</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
|
||
<!-- 卡牌预览弹窗 -->
|
||
<div class="card-modal" id="preview-modal">
|
||
<div class="modal-content">
|
||
<span class="close-modal" id="close-preview">×</span>
|
||
<div class="card-detail-container">
|
||
<h2 class="modal-title">卡牌预览</h2>
|
||
|
||
<h2 class="card-title" id="preview-card-title">卡牌标题</h2>
|
||
<div class="card-creator">
|
||
角色: <span id="preview-character-name">角色名称</span> (<span id="preview-character-avatar">👤</span>)
|
||
</div>
|
||
<div class="card-date">
|
||
头衔: <span id="preview-character-title">角色头衔</span>
|
||
</div>
|
||
|
||
<div class="card-description">
|
||
<p id="preview-card-description">卡牌描述内容</p>
|
||
</div>
|
||
|
||
<div class="card-options">
|
||
<div class="option">
|
||
<h3>选项 A</h3>
|
||
<p id="preview-option-a-text">选项A文本</p>
|
||
<div class="effects" id="preview-option-a-effects">
|
||
<!-- 效果将在此动态显示 -->
|
||
</div>
|
||
</div>
|
||
|
||
<div class="option">
|
||
<h3>选项 B</h3>
|
||
<p id="preview-option-b-text">选项B文本</p>
|
||
<div class="effects" id="preview-option-b-effects">
|
||
<!-- 效果将在此动态显示 -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</main>
|
||
|
||
<footer>
|
||
<p>为帝皇而战! 异端者当诛!</p>
|
||
</footer>
|
||
</div>
|
||
|
||
<script src="{{ url_for('static', filename='js/create_card.js') }}"></script>
|
||
</body>
|
||
</html> |