81 lines
2.4 KiB
HTML
81 lines
2.4 KiB
HTML
|
<html>
|
||
|
<head>
|
||
|
<title>Card: {{ card.name }}</title>
|
||
|
<style type="text/css">
|
||
|
.card {
|
||
|
border: 1px solid gray;
|
||
|
background-color: #999;
|
||
|
padding: 3px;
|
||
|
}
|
||
|
.card.R { background-color: red; }
|
||
|
.card.G { background-color: green; }
|
||
|
.card.U { background-color: blue; }
|
||
|
.card.B { background-color: black; }
|
||
|
.card.W { background-color: white; }
|
||
|
.card .title,
|
||
|
.card .info {
|
||
|
border: 1px solid gray;
|
||
|
background-color: #eee;
|
||
|
padding: 3px;
|
||
|
height: 1em;
|
||
|
}
|
||
|
.card .title .name,
|
||
|
.card .info .type {
|
||
|
font-weight: bold;
|
||
|
float: left;
|
||
|
}
|
||
|
.card .title .cost,
|
||
|
.card .info .rarity {
|
||
|
float: right;
|
||
|
}
|
||
|
.card .rarity {
|
||
|
}
|
||
|
.card .rarity.U { color: gray; }
|
||
|
.card .rarity.R { color: darkgoldenrod; }
|
||
|
.card .rarity.M { color: red; }
|
||
|
.card .picture {
|
||
|
height: 5em;
|
||
|
background-color: #ccc;
|
||
|
margin: 5px;
|
||
|
}
|
||
|
.card .text {
|
||
|
margin-top: 5px;
|
||
|
border: 1px solid gray;
|
||
|
background-color: white;
|
||
|
padding: 3px;
|
||
|
}
|
||
|
|
||
|
</style>
|
||
|
</head>
|
||
|
<body>
|
||
|
<div class="card {{ card.colors|join:" " }}">
|
||
|
<div class="title">
|
||
|
<span class="name">{{ card.name|title }}</span>
|
||
|
<span class="cost">{% if card.cost %}{{ card.cost }}{% endif %}</span>
|
||
|
</div>
|
||
|
<div class="picture"></div>
|
||
|
<div class="info">
|
||
|
<span class="type">
|
||
|
{{ card.type|title }}
|
||
|
{% if card.attributes %}
|
||
|
—
|
||
|
{{ card.attributes|join:" "|title }}
|
||
|
{% endif %}
|
||
|
</span>
|
||
|
<span class="rarity {{ card.rarity }}">
|
||
|
{% for key, rarity in card.rarities.items %}
|
||
|
{% if key == card.rarity %}{{ rarity }}{% endif %}
|
||
|
{% endfor %}
|
||
|
</span>
|
||
|
</div>
|
||
|
<div class="text">
|
||
|
<ul>
|
||
|
{% for ability in card.text %}
|
||
|
<li>{{ ability }}</li>
|
||
|
{% endfor %}
|
||
|
</ul>
|
||
|
</div>
|
||
|
</div>
|
||
|
</body>
|
||
|
</html>
|