mtg-web/templates/cards/view.html

96 lines
2.8 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">
2010-09-17 21:44:54 +00:00
{% include 'cards/manacost.html' %}
</span>
2010-08-26 03:43:19 +00:00
</div>
<div class="picture"></div>
<div class="info">
<span class="type">
{{ card.type|title }}
2010-09-17 21:44:54 +00:00
&mdash;
{% for attr in card.attributes.all %}
{{ attr|title }}
{% endfor %}
2010-08-26 03:43:19 +00:00
</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>
2010-09-17 21:44:54 +00:00
{% for ability in abilities %}
2010-08-26 03:43:19 +00:00
<li>{{ ability }}</li>
{% endfor %}
</ul>
</div>
</div>
</body>
</html>