mtg-web/templates/cards/view.html

100 lines
3 KiB
HTML
Raw Normal View History

2010-08-26 03:43:19 +00:00
<html>
<head>
<title>Card: {{ card.name }}</title>
<style type="text/css">
.mana {
height: 1em;
width: 1em;
border-radius: 0.5em;
-moz-border-radius: 5px;
display: block;
float: left;
color: #eee;
background-color: gray;
border: 1px solid black;
margin-right: 2px;
text-align: center;
}
2010-08-26 03:43:19 +00:00
.card {
border: 1px solid gray;
background-color: #999;
padding: 3px;
}
.mana.R, .card.R { background-color: red; }
.mana.G, .card.G { background-color: green; }
.mana.U, .card.U { background-color: blue; }
.mana.B, .card.B { background-color: black; }
.mana.W, .card.W { background-color: white; }
2010-08-26 03:43:19 +00:00
.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 %}
{% with card.cost as cost %}
{% include 'cards/manacost.html' %}
{% endwith %}
{% endif %}
</span>
2010-08-26 03:43:19 +00:00
</div>
<div class="picture"></div>
<div class="info">
<span class="type">
{{ card.type|title }}
{% if card.attributes %}
&mdash;
{{ 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>