okos
/
rpg-cards


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134
							<!DOCTYPE html>
<html lang="en">
<head>
    <title>RPG cards</title>
    <!-- Components -->
    <link rel="import" href="components/card.html">
    <style type="text/css">

        body {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-content: center;
            background: rgb(204,204,204);
        }

        card-page {
            width: 210mm;
            height: 296mm;
        }

        @media print {
            html, body {
                width: 210mm;
            }
            body {
                margin: 0;
                padding: 0;
                border: 0;
            }
        }

        @page {
            size: A4;
            margin: 0;
        }
    </style>

</head>
<body>
    <card-page>
        <rpg-card class="card-size-25x35" color="maroon">
            <card-title>
                <h1>Burning Hands</h1>
                <h2>1</h2>
                <card-icon src="/icons/book-cover.svg"></card-icon>
            </card-title>
            <card-contents>
                <card-subtitle>1st level evocation</card-subtitle>
                <card-rule></card-rule>
                <card-property>
                    <h4>Casting time</h4>
                    <p>1 action</p></card-property>
                <card-property>
                    <h4>Range</h4>
                    <p>Self (15ft cone)</p></card-property>
                <card-property>
                    <h4>Components</h4>
                    <p>V,S,Some obscure long named material</p></card-property>
                <card-rule></card-rule>
                <card-fill size="1"></card-fill>
                <card-description>
                    <h4>Mechanics</h4>
                    <p>Each creature in a 15-foot cone must make a Dexterity saving throw. A creature takes <b>3d6 fire damage</b> on a failed save, or half as much damage on a successful one.</p></card-description>
                <card-description>
                    <h4>Ignite</h4>
                    <p>The fire ignites any flammable objects in the area that aren't being worn or carried.</p></card-description>
                <card-fill size="2"></card-fill>
                <card-section>At higher levels</card-section>
                <card-description><p>+1d6 damage for each slot above 1st</p></card-description>
            </card-contents>
        </rpg-card>
        <rpg-card class="card-size-25x35" color="saddlebrown">
            <card-title>
                <h1>Brown bear</h1>
                <h2>2</h2>
                <card-icon src="/icons/pawprint.svg"></card-icon>
            </card-title>
            <card-contents>
                <card-subtitle>Medium beast</card-subtitle>
                <card-rule></card-rule>
                <card-dndstats mode="both" str="13" dex="10" con="15" int="-" wis="-" cha="-"></card-dndstats>
                <card-rule></card-rule>
                <card-property><h4>Armor class</h4><p>12 (natural armor)</p></card-property>
                <card-property><h4>Hit points</h4><p>7 (2d6)</p></card-property>
                <card-rule></card-rule>
                <card-description>
                    <h4>Multiattack</h4>
                    <p>One bite and one claw.</p></card-description>
                <card-fill size="2"></card-fill>
                <card-section>Actions</card-section>
                <card-description>
                    <h4>Bite</h4>
                    <p>+4 to hit, 2d6+2 piercing damage.</p></card-description>
                <card-description>
                    <h4>Claw</h4>
                    <p>+4 to hit, 1d8+2 piercing damage.</p></card-description>
            </card-contents>
            <card-title>
                <h1>Druid thingy</h1>
                <card-icon src="/icons/stag-head.svg"></card-icon>
            </card-title>
        </rpg-card>
        <rpg-card class="card-size-25x35" color="indigo">
            <card-title size="12">
                <h1>Wand of Magic Missile</h1>
                <card-icon src="/icons/crossed-swords.svg"></card-icon>
            </card-title>
            <card-contents>
                <card-subtitle>Wondrous item</card-subtitle>
                <card-rule></card-rule>
                <card-property><h4>Maximum charges</h4><p>7</p></card-property>
                <card-property><h4>Recharge</h4><p>1d6+1</p></card-property>
                <card-rule></card-rule>
                <card-fill size="2"></card-fill>
                <card-description><h4>Spells</h4><p>You can use your action to cast the following spells:</p></card-description>
                <card-bullet>Magic missile</card-bullet>
                <card-bullet>Magic missile</card-bullet>
                <card-bullet>Magic missile</card-bullet>
                <card-fill size="3"></card-fill>
                <card-boxes size="2.5" count="7"></card-boxes>
                <card-boxes size="2.5" count="7"></card-boxes>
            </card-contents>
        </rpg-card>
        <rpg-card class="card-size-25x35" color="forestgreen">
            <card-back>
                <card-icon src="/icons/robe.svg"></card-icon>
            </card-back>
        </rpg-card>
    </card-page>
    <card-page>
    </card-page>
</body>
</html>