okos
/
rpg-cards


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

        rpg-card {
            margin: 4px;
        }

        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>Effect</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-vspace></card-vspace>
                <card-description>
                    <h4>Ignite</h4>
                    <p>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="maroon">
            <card-title>
                <h1>Burning Hands</h1>
                <!--
                <h2>1</h2>
                <card-icon src="./icons/book-cover.svg"></card-icon>
                -->
            </card-title>
            <card-contents style="flex: 0 1 auto">
                <!--
                <card-subtitle>1st level evocation</card-subtitle>
                <div style="display:block; width:100%; height:1px; background-color:maroon; margin-top:4px; margin-bottom:4px"></div>
                -->
                <div style="display:flex; flex-direction:row">
                    <div style="flex:0 1 auto; width:24px; height:24px; vertical-align:top; border:2px solid; border-radius:4px">
                        <card-icon src="./icons/gears.svg"></card-icon>
                    </div>
                    <div style="flex:1 1 0px; padding-left:4px; height:24px; vertical-align:top; border:0px solid; border-radius:4px; text-align:left">
                        Casting Time<br/>1 action
                    </div>
                    <div style="flex:1 1 0px; padding-right:4px; height:24px; vertical-align:top; border:0px solid; border-radius:4px; text-align:right">
                        Range<br/>Self (15ft cone)
                    </div>
                    <div style="flex:0 1 auto; width:24px; height:24px; vertical-align:top; border:2px solid; border-radius:4px">
                        <card-icon src="./icons/gears.svg"></card-icon>
                    </div>
                </div>
                <div style="display:block; width:100%; height:4px"></div>
                <div style="display:flex; flex-direction:row">
                    <div style="flex:0 1 auto; width:24px; height:24px; vertical-align:top; border:2px solid; border-radius:4px">
                        <card-icon src="./icons/gears.svg"></card-icon>
                    </div>
                    <div style="flex:1 1 0px; padding-left:4px; height:24px; vertical-align:top; border:0px solid; border-radius:4px; text-align:left">
                        Components<br/>V,S,M
                    </div>
                    <div style="flex:1 1 0px; padding-right:4px; height:24px; vertical-align:top; border:0px solid; border-radius:4px; text-align:right">
                        Duration<br/>&lt;10min
                    </div>
                    <div style="flex:0 1 auto; width:24px; height:24px; vertical-align:top; border:2px solid; border-radius:4px">
                        <card-icon src="./icons/gears.svg"></card-icon>
                    </div>
                </div>
            </card-contents>
            <div style="height:6px"></div>
            <card-contents>
                <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>
            <div style="height:14px;color:white;padding-top:4px">
                1st level evocation
            </div>
        </rpg-card>
        <rpg-card class="card-size-25x35" color="maroon">
            <card-title>
                <h1>Burning Hands</h1>
            </card-title>
            <card-contents>
                <card-subtitle>1st level evocation</card-subtitle>
                <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>
            <card-title>
                <card-icon src="./icons/gears.svg" style="float: left"></card-icon>
                <h1 style="text-align: center;">Evocation 1</h1>
                <card-icon src="./icons/stopwatch.svg"></card-icon>
            </card-title>
        </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>