107 lines
4.8 KiB
HTML
107 lines
4.8 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="custom-cards-page">
|
|
<div class="container">
|
|
<header>
|
|
<h1>战锤40K自制卡牌</h1>
|
|
<div class="header-actions">
|
|
<a href="{{ url_for('index') }}" class="btn">返回主页</a>
|
|
<a href="{{ url_for('create_card') }}" class="btn btn-primary">创建新卡牌</a>
|
|
</div>
|
|
</header>
|
|
|
|
<main>
|
|
<div class="filters">
|
|
<div class="filter-group">
|
|
<label for="sort-by">排序方式：</label>
|
|
<select id="sort-by">
|
|
<option value="newest">最新创建</option>
|
|
<option value="popular">最受欢迎</option>
|
|
<option value="controversial">最具争议</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="filter-group">
|
|
<label for="filter-by">筛选：</label>
|
|
<select id="filter-by">
|
|
<option value="all">全部卡牌</option>
|
|
<option value="my">我的卡牌</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="cards-wrapper">
|
|
<div class="cards-grid" id="cards-container">
|
|
<!-- 卡牌将通过JavaScript动态加载 -->
|
|
<div class="loading-indicator">加载中...</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 卡牌详情弹窗 -->
|
|
<div class="card-modal" id="card-modal">
|
|
<div class="modal-content">
|
|
<span class="close-modal">×</span>
|
|
<div class="card-detail-container">
|
|
<h2 class="card-title" id="modal-card-title">卡牌标题</h2>
|
|
<div class="card-creator">
|
|
创建者: <span id="modal-card-creator">创建者名称</span>
|
|
</div>
|
|
<div class="card-date">
|
|
创建于: <span id="modal-card-date">创建日期</span>
|
|
</div>
|
|
|
|
<div class="card-description">
|
|
<p id="modal-card-description">卡牌描述内容</p>
|
|
</div>
|
|
|
|
<div class="card-options">
|
|
<div class="option">
|
|
<h3>选项 A</h3>
|
|
<p id="modal-option-a-text">选项A文本</p>
|
|
<div class="effects" id="modal-option-a-effects">
|
|
<!-- 效果将在此动态显示 -->
|
|
</div>
|
|
</div>
|
|
|
|
<div class="option">
|
|
<h3>选项 B</h3>
|
|
<p id="modal-option-b-text">选项B文本</p>
|
|
<div class="effects" id="modal-option-b-effects">
|
|
<!-- 效果将在此动态显示 -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card-voting">
|
|
<div class="vote-count">
|
|
<span id="modal-card-votes">0</span> 票
|
|
</div>
|
|
<div class="vote-buttons">
|
|
<button id="upvote-btn" class="btn btn-vote upvote">
|
|
<span class="vote-icon">👍</span> 支持
|
|
</button>
|
|
<button id="downvote-btn" class="btn btn-vote downvote">
|
|
<span class="vote-icon">👎</span> 反对
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<footer>
|
|
<p>为帝皇而战! 异端者当诛!</p>
|
|
</footer>
|
|
</div>
|
|
|
|
<script src="{{ url_for('static', filename='js/custom_cards.js') }}"></script>
|
|
</body>
|
|
</html> |