403 lines
12 KiB
Django/Jinja
403 lines
12 KiB
Django/Jinja
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
|
|
|
|
<!--
|
|
XSLT file for the status card style. This file is shared between all cards of this style.
|
|
|
|
This file transforms XML into renderable XHTML. The output must be a valid XHTML document.
|
|
|
|
If you want something more advanced than what XSLT can offer, feel free to go nuts with javascript here.
|
|
The XML can easily be converted to JSON using XSLT (https://www.bjelic.net/2012/08/01/coding/convert-xml-to-json-using-xslt/),
|
|
and if you just put that output into a <script> tag you have everything you need in javascript.
|
|
|
|
I strongly urge styles to produce an empty card even if the input is empty or mismatching.
|
|
The preview window looks sad otherwise.
|
|
-->
|
|
|
|
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
|
|
<xsl:output method="xml" omit-xml-declaration="yes" />
|
|
<xsl:template match="/*">
|
|
|
|
<html xmlns='http://www.w3.org/1999/xhtml'>
|
|
<head>
|
|
<title>Status Card</title>
|
|
<style type="text/css">
|
|
/**
|
|
* The Danner style of cards. Using grid layouts.
|
|
**/
|
|
|
|
.danner_card
|
|
{
|
|
display: grid;
|
|
flex-flow: column;
|
|
border-radius: 0.1cm;
|
|
width: 2.5in;
|
|
height: 3.5in;
|
|
background-color: #222222;
|
|
padding: 0.2cm;
|
|
box-sizing: border-box;
|
|
page-break-inside: avoid;
|
|
color: #473538;
|
|
font-size: 0.7em;
|
|
border-radius: 0.1cm;
|
|
}
|
|
|
|
.danner_card > *
|
|
{
|
|
display: block;
|
|
box-sizing: border-box;
|
|
border-radius: 0.1cm;
|
|
padding: 0.1cm;
|
|
border: 0.1em solid #444444;
|
|
background-color: #eeeeee;
|
|
}
|
|
|
|
.danner_item_card
|
|
{
|
|
grid-template-columns: auto 30%;
|
|
grid-template-rows: 2.5em 8em auto 2.5em;
|
|
grid-template-areas:
|
|
"header header"
|
|
"image properties"
|
|
"details details"
|
|
"footer footer";
|
|
grid-column-gap: 0.1em;
|
|
grid-row-gap: 0.1em;
|
|
}
|
|
|
|
.danner_ability_card
|
|
{
|
|
grid-template-columns: auto 30%;
|
|
grid-template-rows: 2.5em 8em auto 2.5em;
|
|
grid-template-areas:
|
|
"header header"
|
|
"image playcost"
|
|
"details details"
|
|
"footer footer";
|
|
grid-column-gap: 0.1em;
|
|
grid-row-gap: 0.1em;
|
|
}
|
|
|
|
.danner_monster_card
|
|
{
|
|
grid-template-columns: auto 10% 10% 10%;
|
|
grid-template-rows: 2.5em 4em 4em auto 2.5em;
|
|
grid-template-areas:
|
|
"header header header header"
|
|
"image hp act mov"
|
|
"image cunning armor initiative"
|
|
"details details details details"
|
|
"footer footer footer footer";
|
|
grid-column-gap: 0.1em;
|
|
grid-row-gap: 0.1em;
|
|
}
|
|
|
|
.danner_status_card
|
|
{
|
|
display: grid;
|
|
grid-template-columns: auto;
|
|
grid-template-rows: 2.5em 12em auto 2em;
|
|
grid-template-areas:
|
|
"header"
|
|
"image"
|
|
"details"
|
|
"footer";
|
|
grid-column-gap: 0.1em;
|
|
grid-row-gap: 0.1em;
|
|
}
|
|
|
|
|
|
.danner_card .danner_image
|
|
{
|
|
grid-area: image;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
background-size: contain;
|
|
}
|
|
|
|
.danner_icon
|
|
{
|
|
float: right;
|
|
display: inline-block;
|
|
border: 0.13em solid;
|
|
text-align: center;
|
|
height: 1.2em;
|
|
line-height: 1.2em;
|
|
padding: 0.1em 0.1em;
|
|
border-radius: 2em;
|
|
box-shadow: 0.12em 0.12em 0.15em;
|
|
}
|
|
|
|
.danner_ability_icon
|
|
{
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
background-size: contain;
|
|
min-width: 0.80em;
|
|
width: 0.80em;
|
|
min-height: 0.7em;
|
|
float: left;
|
|
margin-right: 0.2em;
|
|
}
|
|
|
|
.danner_detail_table
|
|
{
|
|
display: grid;
|
|
align-content: start;
|
|
justify-content: start;
|
|
grid-template-columns: 1.2em auto;
|
|
grid-column-gap: 0.15em;
|
|
grid-row-gap: 0.15em;
|
|
}
|
|
|
|
.danner_detail_table .flavour
|
|
{
|
|
grid-column: 1 / span 2;
|
|
align-self: end;
|
|
font-size: 70%;
|
|
}
|
|
|
|
.danner_hitpoints_card > *
|
|
{
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
background-size: contain;
|
|
text-align: center;
|
|
font-size: 200%;
|
|
background-image: url(https://img.clipartxtras.com/fcb11f4becbc40a67ab7cded24564e27_heart-jpg-clipart-heart-clip-art-microsoft-clipart-panda-free-heart-jpg-clipart_1969-1829.png);
|
|
|
|
}
|
|
|
|
/* With a background image, the style is more transparent */
|
|
|
|
.danner_background_image
|
|
{
|
|
border: 0px solid black;
|
|
border-radius: 0.1em;
|
|
background-size: cover;
|
|
/* Specify background-image in XSL */
|
|
}
|
|
|
|
.danner_background_image > *
|
|
{
|
|
background-color: ;
|
|
display: block;
|
|
box-sizing: border-box;
|
|
border-radius: 0.1cm;
|
|
padding: 0.1cm;
|
|
border: 0.1em solid #444444;
|
|
background-color: #eeeeee;
|
|
}
|
|
|
|
|
|
</style>
|
|
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css"/>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="danner_card">
|
|
|
|
<!-- Build item card -->
|
|
<xsl:if test="name() = 'item_card'">
|
|
<xsl:attribute name="class">danner_card danner_item_card</xsl:attribute> <!-- Change class to this mouthful -->
|
|
<div class="danner_title" style="grid-area: header;background-color:#d3d3ef">
|
|
<span style="font-size:155%;"><xsl:value-of select="title"/></span>
|
|
</div>
|
|
<div class="danner_image" style="grid-area: image">
|
|
<xsl:attribute name="style">background-image: url('<xsl:value-of select="image" />');</xsl:attribute>
|
|
</div>
|
|
<div class="danner_properties" style="grid-area: properties">
|
|
<b>Properties:</b>
|
|
<xsl:for-each select="property">
|
|
<br/><xsl:value-of select="."/>
|
|
</xsl:for-each>
|
|
</div>
|
|
<div class="danner_detail_table" style="grid-area: details">
|
|
<xsl:for-each select="effect">
|
|
<xsl:choose>
|
|
<xsl:when test="@type='Consume'">
|
|
<div style="padding-top: 0.15em;text-align:center" class="fas fa-flask"/>
|
|
</xsl:when>
|
|
<xsl:when test="@type='Splash'">
|
|
<div style="padding-top: 0.15em;text-align:center" class="fas fa-bomb"/>
|
|
</xsl:when>
|
|
<xsl:when test="@type='Equip'">
|
|
<div style="padding-top: 0.15em;text-align:center" class="fas fa-tshirt"/>
|
|
</xsl:when>
|
|
<xsl:when test="@type='Equip-Ability'">
|
|
<div style="padding-top: 0.15em;text-align:center" class="fas fa-user-cog"/>
|
|
</xsl:when>
|
|
<xsl:otherwise>
|
|
<div style="padding-top: 0.15em;text-align:center" class="fas fa-question"/>
|
|
</xsl:otherwise>
|
|
</xsl:choose>
|
|
<div class="danner_ability_text" valign="top">
|
|
<xsl:if test="name">
|
|
<b><xsl:value-of select="name"/>: </b><br/>
|
|
</xsl:if>
|
|
<xsl:value-of select="details"/>
|
|
<xsl:if test="proc">
|
|
<br/>
|
|
<span class="fas fa-share" style="margin-right: 0.2em"/>
|
|
<xsl:value-of select="proc"/>
|
|
</xsl:if>
|
|
<b><xsl:value-of select="@type"/><xsl:if test="@type='Equip-Ability'">(<xsl:value-of select="@cost"/>)</xsl:if>:</b>
|
|
<xsl:value-of select="."/>
|
|
</div>
|
|
</xsl:for-each>
|
|
<xsl:if test="description">
|
|
<div class="flavour">
|
|
<xsl:value-of select="description"/>
|
|
</div>
|
|
</xsl:if>
|
|
</div>
|
|
<div class="danner_footer" style="grid-area: footer; background-color: #d3d3ef">
|
|
<span style="background-image: url('icons/icon_gp.svg')" class="danner_icon"/>
|
|
<xsl:value-of select="value"/>
|
|
</div>
|
|
</xsl:if>
|
|
|
|
<!-- Build monster card -->
|
|
<xsl:if test="name() = 'monster_card'">
|
|
<xsl:attribute name="class">danner_card danner_monster_card</xsl:attribute> <!-- Change class to this mouthful -->
|
|
<div class="danner_title" style="grid-area: header; background-color:#d3d3ef">
|
|
<span style="font-size:155%"><xsl:value-of select="title"/></span>
|
|
|
|
<!-- Monster Type icons -->
|
|
<xsl:for-each select="creature_type">
|
|
<xsl:choose>
|
|
<xsl:when test=".='Mechanical'">
|
|
<div class="danner_icon fas fa-cog" style="border-color:#989898;background-color: #B7B7B7; color: #383838;"></div>
|
|
</xsl:when>
|
|
<xsl:when test=".='Biological'">
|
|
<div class="danner_icon fas fa-leaf" style="border-color:#85A798;background-color: #A4C9B7; color: #354738;"></div>
|
|
</xsl:when>
|
|
<xsl:when test=".='Mist Monster'">
|
|
<div class="danner_icon" style="border-color:#A798A7;background-color: #C9B7C9; color: #473847;">👹</div>
|
|
</xsl:when>
|
|
<xsl:otherwise>
|
|
<div class="danner_icon fas fa-question" style="border-color:#A78598;background-color: #C9A4B7; color: #473538;"></div>
|
|
</xsl:otherwise>
|
|
</xsl:choose>
|
|
</xsl:for-each>
|
|
</div>
|
|
|
|
<div class="danner_image">
|
|
<xsl:attribute name="style">background-image: url('<xsl:value-of select="image" />');</xsl:attribute>
|
|
</div>
|
|
|
|
<!-- stats-->
|
|
<div style="text-align: center">
|
|
<div class="fas fa-heart"/><xsl:value-of select="hp"/>
|
|
</div>
|
|
<div style="text-align: center">
|
|
<div class="fas fa-hand-paper"/><xsl:value-of select="act"/>
|
|
</div>
|
|
<div style="text-align: center">
|
|
<div class="fas fa-shoe-prints"/><xsl:value-of select="mov"/>
|
|
</div>
|
|
<div style="text-align: center">
|
|
<div class="fas fa-lightbulb"/><xsl:value-of select="cunning"/>
|
|
</div>
|
|
<div style="text-align: center">
|
|
<div class="fas fa-shield-alt"/><xsl:value-of select="armor"/>
|
|
</div>
|
|
<div style="text-align: center">
|
|
<div class="fas fa-hourglass"/><xsl:value-of select="initiative"/>
|
|
</div>
|
|
|
|
<!-- Description -->
|
|
<div style="grid-area:details" class="danner_detail_table">
|
|
<xsl:for-each select="ability">
|
|
<xsl:choose>
|
|
<xsl:when test="@type='Melee-Attack'">
|
|
<div style="padding-top: 0.15em;text-align:center" class="fas fa-location-arrow"/>
|
|
</xsl:when>
|
|
<xsl:when test="@type='Magic-Attack'">
|
|
<div style="padding-top: 0.15em;text-align:center" class="fas fa-magic"/>
|
|
</xsl:when>
|
|
<xsl:when test="@type='Passive'">
|
|
<div style="padding-top: 0.15em;text-align:center" class="fas fa-shield-alt"/>
|
|
</xsl:when>
|
|
<xsl:when test="@type='Reaction'">
|
|
<div style="padding-top: 0.15em;text-align:center" class="fas fa-bolt"/>
|
|
</xsl:when>
|
|
<xsl:otherwise>
|
|
<div style="padding-top: 0.15em;text-align:center; background-image: url('icons/icon_ability_attack.svg');" class="danner_ability_icon" valign="top"/>
|
|
</xsl:otherwise>
|
|
</xsl:choose>
|
|
<div class="danner_ability_text" valign="top">
|
|
<xsl:if test="name">
|
|
<b><xsl:value-of select="name"/>: </b><br/>
|
|
</xsl:if>
|
|
<xsl:value-of select="details"/>
|
|
<xsl:if test="proc">
|
|
<br/>
|
|
<span class="fas fa-share" style="margin-right: 0.2em"/>
|
|
<xsl:value-of select="proc"/>
|
|
</xsl:if>
|
|
|
|
</div>
|
|
</xsl:for-each>
|
|
</div>
|
|
<!-- Footer -->
|
|
<div class="danner_footer" style="grid-area: footer; background-color: #d3d3ef">
|
|
<span style="background-image: url('icons/icon_gp.svg');" class="danner_icon"/>
|
|
<xsl:value-of select="value"/>
|
|
</div>
|
|
</xsl:if>
|
|
|
|
<!-- Build ability card -->
|
|
<xsl:if test="name() = 'ability_card'">
|
|
<xsl:attribute name="class">danner_card danner_ability_card</xsl:attribute> <!-- Change class to this mouthful -->
|
|
<div class="danner_title" style="grid-area: header; background-color:#d3d3ef">
|
|
<xsl:value-of select="name"/>
|
|
</div>
|
|
<div class="danner_image">
|
|
<xsl:attribute name="style">background-image: url('<xsl:value-of select="image" />');</xsl:attribute>
|
|
</div>
|
|
<div style="grid-area:playcost; font-size: 80%; white-space: pre-wrap">
|
|
<xsl:value-of select="playcost"/>
|
|
</div>
|
|
<div style="grid-area:details; white-space: pre-wrap">
|
|
<xsl:value-of select="description"/>
|
|
</div>
|
|
</xsl:if>
|
|
|
|
<!-- Build HP card -->
|
|
<xsl:if test="name() = 'hitpoints_card'">
|
|
<xsl:attribute name="class">danner_card danner_hitpoints_card</xsl:attribute> <!-- Change class to this mouthful -->
|
|
<div>
|
|
<xsl:value-of select="value"/>
|
|
</div>
|
|
</xsl:if>
|
|
|
|
<!-- Build Status Card -->
|
|
<xsl:if test="name() = 'status_card'">
|
|
<xsl:attribute name="class">danner_card</xsl:attribute>
|
|
<div class="danner_status_card danner_background_image">
|
|
<xsl:attribute name="style">background-image: url('<xsl:value-of select="image"/>'); </xsl:attribute>
|
|
<div class="danner_title" style="grid-area: header; background-color:#d3d3ef">
|
|
<xsl:value-of select="name"/>
|
|
<div style="float:right"><xsl:value-of select="class"/> Status Effect</div>
|
|
</div>
|
|
<div class="danner_description" style="grid-area: details">
|
|
<xsl:value-of select="description"/>
|
|
<br/><br/>
|
|
<xsl:value-of select="cure"/>
|
|
</div>
|
|
|
|
<div style="grid-area: footer; font-size: 90%; text-align: center; background-color:#d3d3ef">
|
|
Keep in your play area. Do not discard on death.
|
|
</div>
|
|
</div>
|
|
|
|
</xsl:if>
|
|
</div>
|
|
|
|
|
|
</body>
|
|
</html>
|
|
|
|
</xsl:template>
|
|
</xsl:stylesheet>
|