summaryrefslogtreecommitdiffhomepage
path: root/cards/output
diff options
context:
space:
mode:
Diffstat (limited to 'cards/output')
-rw-r--r--cards/output/alchemical_recipes.html300
-rw-r--r--cards/output/armour.html380
-rw-r--r--cards/output/beginner_spells.html568
-rw-r--r--cards/output/class_abilities.html595
-rw-r--r--cards/output/common_items.html556
-rw-r--r--cards/output/common_weapons.html1047
-rw-r--r--cards/output/paladin_abilities.html639
-rw-r--r--cards/output/rare_weapons.html512
8 files changed, 4597 insertions, 0 deletions
diff --git a/cards/output/alchemical_recipes.html b/cards/output/alchemical_recipes.html
new file mode 100644
index 0000000..7218bd8
--- /dev/null
+++ b/cards/output/alchemical_recipes.html
@@ -0,0 +1,300 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <style>
+ .flavour {
+ color: rgba(0,0,0,0.5);
+ padding: 35px;
+ font-size: 35px;
+ }
+ .flavour_wrapper {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ width: 100%;
+ text-align: center;
+ }
+ .action_detail {
+ padding-top: 0px;
+ text-align: left;
+ }
+ .symbol_wrapper_inner {
+ display: flex;
+ flex-direction: column;
+ gap: 5px;
+ }
+ .symbol_wrapper_outer {
+ display: flex;
+ gap: 20px;
+ }
+ .card_type {
+ background-color: antiquewhite;
+ text-align: center;
+ font-size: 40px;
+ padding: 10px;
+ -moz-border-radius: 15px 15px 0 0;
+ -webkit-border-radius: 15px 15px 0 0;
+ border-radius: 15px 15px 0 0;
+ font-weight: bold;
+ border-width: 2px 2px 0 2px;
+ border-color: black;
+ border-style: solid;
+ }
+ .icon {
+ display: inline-block;
+ padding: 8px 4px 0px 4px;
+ -moz-border-radius: 15px;
+ -webkit-border-radius: 15px;
+ border-radius: 15px;
+ aspect-ratio: 1/1;
+ font-size: 40px;
+ height: 52px;
+ width: 52px;
+ }
+ .face_icon {
+ background-color: black;
+ padding: 6px 3px 2px 5px;
+ }
+ .lesser_icon {
+ background-color: black;
+ padding: 12px 0px 0px 12px;
+ font-size: 30px;
+ height: 48px;
+ width: 48px;
+ }
+ .greater_icon {
+ background-color: black;
+ padding: 12px 0px 0px 12px;
+ font-size: 30px;
+ height: 48px;
+ width: 48px;
+ }
+ .even_icon {
+ background-color: black;
+ padding: 12px 0px 0px 12px;
+ font-size: 30px;
+ height: 48px;
+ width: 48px;
+ }
+ .odd_icon {
+ background-color: black;
+ padding: 12px 0px 0px 12px;
+ font-size: 30px;
+ height: 48px;
+ width: 48px;
+ }
+ .hearts_icon {
+ color: orangered;
+ }
+ .diamonds_icon {
+ color: orangered;
+ }
+ .clubs_icon {
+ color: antiquewhite;
+ }
+ .spades_icon {
+ color: antiquewhite;
+ }
+ .suit_icon {
+ background-color: black;
+ text-align: center;
+ font-size: 60px;
+ line-height: 40px;
+ }
+ .blood_icon {
+ background-color: black;
+ padding: 6px 3px 2px 5px;
+ }
+ .joker_icon {
+ background-color: black;
+ padding: 6px 3px 2px 5px;
+ }
+ .tap_icon {
+ background-color: black;
+ }
+ .content {
+ background-color: antiquewhite;
+ color: black;
+ flex: 5;
+ -moz-border-radius: 25px;
+ -webkit-border-radius: 25px;
+ border-radius: 25px;
+ overflow: hidden;
+ position: relative;
+ font-size: 50px;
+ display: flex;
+ justify-content: flex-start;
+ gap: 5px;
+ text-align: left;
+ padding: 35px 30px 30px 30px;
+ flex-direction: column;
+ border-width: 2px 2px 2px 2px;
+ border-color: black;
+ border-style: solid;
+ }
+ .attrib_bottom_icons {
+ bottom: 0;
+ }
+ .attrib_top_icons {
+ top: 0;
+ }
+ .attrib_bl {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ -moz-border-radius: 0 50px 0 0;
+ -webkit-border-radius: 0 50px 0 0;
+ border-radius: 0 50px 0 0;
+ border-color: rgba(255,255,255,0.50);
+ border-style: solid;
+ border-width: 5px 5px 0 0;
+ padding: 15px 25px 15px 15px;
+ }
+ .attrib_br {
+ position: absolute;
+ bottom: 0;
+ right: 0;
+ -moz-border-radius: 50px 0 0 0;
+ -webkit-border-radius: 50px 0 0 0;
+ border-radius: 50px 0 0 0;
+ border-color: rgba(255,255,255,0.50);
+ border-style: solid;
+ border-width: 5px 0 0 5px;
+ padding: 15px 15px 15px 25px;
+ }
+ .attrib_tr {
+ position: absolute;
+ top: 0;
+ right: 0;
+ -moz-border-radius: 0 0 0 50px;
+ -webkit-border-radius: 0 0 0 50px;
+ border-radius: 0 0 0 50px;
+ border-color: rgba(255,255,255,0.50);
+ border-style: solid;
+ border-width: 0 0 5px 5px;
+ padding: 15px 15px 15px 25px;
+ }
+ .attrib_tl {
+ position: absolute;
+ top: 0;
+ left: 0;
+ -moz-border-radius: 0 0 50px 0;
+ -webkit-border-radius: 0 0 50px 0;
+ border-radius: 0 0 50px 0;
+ border-color: rgba(255,255,255,0.50);
+ border-style: solid;
+ border-width: 0 5px 5px 0;
+ padding: 15px 25px 15px 15px;
+ }
+ .attrib_icon {
+ background-color: rgba(255,255,255,0.10);
+ }
+ .title {
+ background-color: black;
+ color: antiquewhite;
+ flex: 3;
+ -moz-border-radius: 25px;
+ -webkit-border-radius: 25px;
+ border-radius: 25px;
+ overflow: hidden;
+ position: relative;
+ font-size: 85px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ text-align: center;
+ flex-direction: column;
+ padding: 25px;
+ border-width: 2px 2px 2px 2px;
+ border-color: black;
+ border-style: solid;
+ }
+ .group {
+ margin: 50px 50px 0px 50px;
+ -moz-border-radius: 25px;
+ -webkit-border-radius: 25px;
+ border-radius: 25px;
+ display: flex;
+ flex-direction: column;
+ align-content: space-between;
+ height: auto;
+ flex: 2;
+ gap: 35px;
+ }
+ .card {
+ height: 1425px;
+ width: 825px;
+ background-color: black;
+ display: flex;
+ }
+ .card_wrapper {
+ min-height: 2850px;
+ width: 5775px;
+ display: flex;
+ flex-wrap: wrap;
+ height: 100%;
+ }
+ button {
+ font-size: 50px;
+ padding: 30px;
+ margin: 30px;
+ }
+ p {
+ margin: 0;
+ }
+ body {
+ background-color: #1e1e1e;
+ }
+ </style>
+ </head>
+ <button onclick="downloadAsImage()">
+ Download
+ </button>
+ <div id="card_wrapper" class="card_wrapper">
+ <div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, firebrick 100%)" class="card">
+ <div class="group">
+ <div class="title">
+ <p>
+ Crystal Encasement Recipe
+ </p>
+ </div>
+ <div class="content">
+ <div class="action">
+ <div class="symbol_wrapper_outer">
+ <div class="symbol_wrapper_inner">
+ <span class="icon blood_icon">
+ 🩸
+ </span>
+ <span class="icon suit_icon diamonds_icon">
+ ♦️
+ </span>
+ </div>
+ <div class="action_detail">
+ <p>A potion which when applied to a surface quickly grows strong blue crystals. Can also be thrown.</p>
+ </div>
+ </div>
+ </div>
+ <div class="flavour_wrapper">
+ <div class="flavour">
+ <hr>
+ <p>“You arent making a bomb, are you?”</p>
+ </div>
+ </div>
+ </div>
+ <div class="card_type">
+ Blood Magic (Eldritch)
+ </div>
+ </div>
+ </div>
+ </div>
+ <script src="./web/bundle.js">
+ </script>
+ <script>
+ function downloadAsImage() {
+ htmlToImage.toPng(document.getElementById('card_wrapper'))
+ .then(function (dataUrl) {
+ download(dataUrl, 'card_wrapper.png');
+ });
+ }
+ </script>
+</html>
diff --git a/cards/output/armour.html b/cards/output/armour.html
new file mode 100644
index 0000000..feb99a8
--- /dev/null
+++ b/cards/output/armour.html
@@ -0,0 +1,380 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <style>
+ .flavour {
+ color: rgba(0,0,0,0.5);
+ padding: 35px;
+ font-size: 35px;
+ }
+ .flavour_wrapper {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ width: 100%;
+ text-align: center;
+ }
+ .action_detail {
+ padding-top: 0px;
+ text-align: left;
+ }
+ .symbol_wrapper_inner {
+ display: flex;
+ flex-direction: column;
+ gap: 5px;
+ }
+ .symbol_wrapper_outer {
+ display: flex;
+ gap: 20px;
+ }
+ .card_type {
+ background-color: antiquewhite;
+ text-align: center;
+ font-size: 40px;
+ padding: 10px;
+ -moz-border-radius: 15px 15px 0 0;
+ -webkit-border-radius: 15px 15px 0 0;
+ border-radius: 15px 15px 0 0;
+ font-weight: bold;
+ border-width: 2px 2px 0 2px;
+ border-color: black;
+ border-style: solid;
+ }
+ .icon {
+ display: inline-block;
+ padding: 8px 4px 0px 4px;
+ -moz-border-radius: 15px;
+ -webkit-border-radius: 15px;
+ border-radius: 15px;
+ aspect-ratio: 1/1;
+ font-size: 40px;
+ height: 52px;
+ width: 52px;
+ }
+ .face_icon {
+ background-color: black;
+ padding: 6px 3px 2px 5px;
+ }
+ .lesser_icon {
+ background-color: black;
+ padding: 12px 0px 0px 12px;
+ font-size: 30px;
+ height: 48px;
+ width: 48px;
+ }
+ .greater_icon {
+ background-color: black;
+ padding: 12px 0px 0px 12px;
+ font-size: 30px;
+ height: 48px;
+ width: 48px;
+ }
+ .even_icon {
+ background-color: black;
+ padding: 12px 0px 0px 12px;
+ font-size: 30px;
+ height: 48px;
+ width: 48px;
+ }
+ .odd_icon {
+ background-color: black;
+ padding: 12px 0px 0px 12px;
+ font-size: 30px;
+ height: 48px;
+ width: 48px;
+ }
+ .hearts_icon {
+ color: orangered;
+ }
+ .diamonds_icon {
+ color: orangered;
+ }
+ .clubs_icon {
+ color: antiquewhite;
+ }
+ .spades_icon {
+ color: antiquewhite;
+ }
+ .suit_icon {
+ background-color: black;
+ text-align: center;
+ font-size: 60px;
+ line-height: 40px;
+ }
+ .blood_icon {
+ background-color: black;
+ padding: 6px 3px 2px 5px;
+ }
+ .joker_icon {
+ background-color: black;
+ padding: 6px 3px 2px 5px;
+ }
+ .tap_icon {
+ background-color: black;
+ }
+ .content {
+ background-color: antiquewhite;
+ color: black;
+ flex: 5;
+ -moz-border-radius: 25px;
+ -webkit-border-radius: 25px;
+ border-radius: 25px;
+ overflow: hidden;
+ position: relative;
+ font-size: 50px;
+ display: flex;
+ justify-content: flex-start;
+ gap: 5px;
+ text-align: left;
+ padding: 35px 30px 30px 30px;
+ flex-direction: column;
+ border-width: 2px 2px 2px 2px;
+ border-color: black;
+ border-style: solid;
+ }
+ .attrib_bottom_icons {
+ bottom: 0;
+ }
+ .attrib_top_icons {
+ top: 0;
+ }
+ .attrib_bl {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ -moz-border-radius: 0 50px 0 0;
+ -webkit-border-radius: 0 50px 0 0;
+ border-radius: 0 50px 0 0;
+ border-color: rgba(255,255,255,0.50);
+ border-style: solid;
+ border-width: 5px 5px 0 0;
+ padding: 15px 25px 15px 15px;
+ }
+ .attrib_br {
+ position: absolute;
+ bottom: 0;
+ right: 0;
+ -moz-border-radius: 50px 0 0 0;
+ -webkit-border-radius: 50px 0 0 0;
+ border-radius: 50px 0 0 0;
+ border-color: rgba(255,255,255,0.50);
+ border-style: solid;
+ border-width: 5px 0 0 5px;
+ padding: 15px 15px 15px 25px;
+ }
+ .attrib_tr {
+ position: absolute;
+ top: 0;
+ right: 0;
+ -moz-border-radius: 0 0 0 50px;
+ -webkit-border-radius: 0 0 0 50px;
+ border-radius: 0 0 0 50px;
+ border-color: rgba(255,255,255,0.50);
+ border-style: solid;
+ border-width: 0 0 5px 5px;
+ padding: 15px 15px 15px 25px;
+ }
+ .attrib_tl {
+ position: absolute;
+ top: 0;
+ left: 0;
+ -moz-border-radius: 0 0 50px 0;
+ -webkit-border-radius: 0 0 50px 0;
+ border-radius: 0 0 50px 0;
+ border-color: rgba(255,255,255,0.50);
+ border-style: solid;
+ border-width: 0 5px 5px 0;
+ padding: 15px 25px 15px 15px;
+ }
+ .attrib_icon {
+ background-color: rgba(255,255,255,0.10);
+ }
+ .title {
+ background-color: black;
+ color: antiquewhite;
+ flex: 3;
+ -moz-border-radius: 25px;
+ -webkit-border-radius: 25px;
+ border-radius: 25px;
+ overflow: hidden;
+ position: relative;
+ font-size: 85px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ text-align: center;
+ flex-direction: column;
+ padding: 25px;
+ border-width: 2px 2px 2px 2px;
+ border-color: black;
+ border-style: solid;
+ }
+ .group {
+ margin: 50px 50px 0px 50px;
+ -moz-border-radius: 25px;
+ -webkit-border-radius: 25px;
+ border-radius: 25px;
+ display: flex;
+ flex-direction: column;
+ align-content: space-between;
+ height: auto;
+ flex: 2;
+ gap: 35px;
+ }
+ .card {
+ height: 1425px;
+ width: 825px;
+ background-color: black;
+ display: flex;
+ }
+ .card_wrapper {
+ min-height: 2850px;
+ width: 5775px;
+ display: flex;
+ flex-wrap: wrap;
+ height: 100%;
+ }
+ button {
+ font-size: 50px;
+ padding: 30px;
+ margin: 30px;
+ }
+ p {
+ margin: 0;
+ }
+ body {
+ background-color: #1e1e1e;
+ }
+ </style>
+ </head>
+ <button onclick="downloadAsImage()">
+ Download
+ </button>
+ <div id="card_wrapper" class="card_wrapper">
+ <div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, cadetblue 100%)" class="card">
+ <div class="group">
+ <div class="title">
+ <p>
+ Iron Plate
+ </p>
+ <div class="attrib_icon attrib_br">
+ 5 🛡️
+ </div>
+ </div>
+ <div class="content">
+ <div class="flavour_wrapper">
+ <div class="flavour">
+ <hr>
+ <p>“Strong but heavy”</p>
+ </div>
+ </div>
+ </div>
+ <div class="card_type">
+ Body Armour
+ </div>
+ </div>
+ </div>
+ <div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, cadetblue 100%)" class="card">
+ <div class="group">
+ <div class="title">
+ <p>
+ Chain Mail
+ </p>
+ <div class="attrib_icon attrib_br">
+ 4 🛡️
+ </div>
+ </div>
+ <div class="content">
+ <div class="flavour_wrapper">
+ <div class="flavour">
+ <hr>
+ <p>“The fairly lightweight option”</p>
+ </div>
+ </div>
+ </div>
+ <div class="card_type">
+ Body Armour
+ </div>
+ </div>
+ </div>
+ <div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, cadetblue 100%)" class="card">
+ <div class="group">
+ <div class="title">
+ <p>
+ Leather
+ </p>
+ <div class="attrib_icon attrib_br">
+ 3 🛡️
+ </div>
+ </div>
+ <div class="content">
+ <div class="flavour_wrapper">
+ <div class="flavour">
+ <hr>
+ <p>“Popular with goths and punks”</p>
+ </div>
+ </div>
+ </div>
+ <div class="card_type">
+ Body Armour
+ </div>
+ </div>
+ </div>
+ <div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, cadetblue 100%)" class="card">
+ <div class="group">
+ <div class="title">
+ <p>
+ Padded
+ </p>
+ <div class="attrib_icon attrib_br">
+ 2 🛡️
+ </div>
+ </div>
+ <div class="content">
+ <div class="flavour_wrapper">
+ <div class="flavour">
+ <hr>
+ <p>“A <em>LOT</em> of regular clothing stacked together”</p>
+ </div>
+ </div>
+ </div>
+ <div class="card_type">
+ Body Armour
+ </div>
+ </div>
+ </div>
+ <div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, cadetblue 100%)" class="card">
+ <div class="group">
+ <div class="title">
+ <p>
+ None
+ </p>
+ <div class="attrib_icon attrib_br">
+ 1 🛡️
+ </div>
+ </div>
+ <div class="content">
+ <div class="flavour_wrapper">
+ <div class="flavour">
+ <hr>
+ <p>“Just the skin on your back”</p>
+ </div>
+ </div>
+ </div>
+ <div class="card_type">
+ Body Armour
+ </div>
+ </div>
+ </div>
+ </div>
+ <script src="./web/bundle.js">
+ </script>
+ <script>
+ function downloadAsImage() {
+ htmlToImage.toPng(document.getElementById('card_wrapper'))
+ .then(function (dataUrl) {
+ download(dataUrl, 'card_wrapper.png');
+ });
+ }
+ </script>
+</html>
diff --git a/cards/output/beginner_spells.html b/cards/output/beginner_spells.html
new file mode 100644
index 0000000..7d35cb8
--- /dev/null
+++ b/cards/output/beginner_spells.html
@@ -0,0 +1,568 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <style>
+ .flavour {
+ color: rgba(0,0,0,0.5);
+ padding: 35px;
+ font-size: 35px;
+ }
+ .flavour_wrapper {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ width: 100%;
+ text-align: center;
+ }
+ .action_detail {
+ padding-top: 0px;
+ text-align: left;
+ }
+ .symbol_wrapper_inner {
+ display: flex;
+ flex-direction: column;
+ gap: 5px;
+ }
+ .symbol_wrapper_outer {
+ display: flex;
+ gap: 20px;
+ }
+ .card_type {
+ background-color: antiquewhite;
+ text-align: center;
+ font-size: 40px;
+ padding: 10px;
+ -moz-border-radius: 15px 15px 0 0;
+ -webkit-border-radius: 15px 15px 0 0;
+ border-radius: 15px 15px 0 0;
+ font-weight: bold;
+ border-width: 2px 2px 0 2px;
+ border-color: black;
+ border-style: solid;
+ }
+ .icon {
+ display: inline-block;
+ padding: 8px 4px 0px 4px;
+ -moz-border-radius: 15px;
+ -webkit-border-radius: 15px;
+ border-radius: 15px;
+ aspect-ratio: 1/1;
+ font-size: 40px;
+ height: 52px;
+ width: 52px;
+ }
+ .face_icon {
+ background-color: black;
+ padding: 6px 3px 2px 5px;
+ }
+ .lesser_icon {
+ background-color: black;
+ padding: 12px 0px 0px 12px;
+ font-size: 30px;
+ height: 48px;
+ width: 48px;
+ }
+ .greater_icon {
+ background-color: black;
+ padding: 12px 0px 0px 12px;
+ font-size: 30px;
+ height: 48px;
+ width: 48px;
+ }
+ .even_icon {
+ background-color: black;
+ padding: 12px 0px 0px 12px;
+ font-size: 30px;
+ height: 48px;
+ width: 48px;
+ }
+ .odd_icon {
+ background-color: black;
+ padding: 12px 0px 0px 12px;
+ font-size: 30px;
+ height: 48px;
+ width: 48px;
+ }
+ .hearts_icon {
+ color: orangered;
+ }
+ .diamonds_icon {
+ color: orangered;
+ }
+ .clubs_icon {
+ color: antiquewhite;
+ }
+ .spades_icon {
+ color: antiquewhite;
+ }
+ .suit_icon {
+ background-color: black;
+ text-align: center;
+ font-size: 60px;
+ line-height: 40px;
+ }
+ .blood_icon {
+ background-color: black;
+ padding: 6px 3px 2px 5px;
+ }
+ .joker_icon {
+ background-color: black;
+ padding: 6px 3px 2px 5px;
+ }
+ .tap_icon {
+ background-color: black;
+ }
+ .content {
+ background-color: antiquewhite;
+ color: black;
+ flex: 5;
+ -moz-border-radius: 25px;
+ -webkit-border-radius: 25px;
+ border-radius: 25px;
+ overflow: hidden;
+ position: relative;
+ font-size: 50px;
+ display: flex;
+ justify-content: flex-start;
+ gap: 5px;
+ text-align: left;
+ padding: 35px 30px 30px 30px;
+ flex-direction: column;
+ border-width: 2px 2px 2px 2px;
+ border-color: black;
+ border-style: solid;
+ }
+ .attrib_bottom_icons {
+ bottom: 0;
+ }
+ .attrib_top_icons {
+ top: 0;
+ }
+ .attrib_bl {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ -moz-border-radius: 0 50px 0 0;
+ -webkit-border-radius: 0 50px 0 0;
+ border-radius: 0 50px 0 0;
+ border-color: rgba(255,255,255,0.50);
+ border-style: solid;
+ border-width: 5px 5px 0 0;
+ padding: 15px 25px 15px 15px;
+ }
+ .attrib_br {
+ position: absolute;
+ bottom: 0;
+ right: 0;
+ -moz-border-radius: 50px 0 0 0;
+ -webkit-border-radius: 50px 0 0 0;
+ border-radius: 50px 0 0 0;
+ border-color: rgba(255,255,255,0.50);
+ border-style: solid;
+ border-width: 5px 0 0 5px;
+ padding: 15px 15px 15px 25px;
+ }
+ .attrib_tr {
+ position: absolute;
+ top: 0;
+ right: 0;
+ -moz-border-radius: 0 0 0 50px;
+ -webkit-border-radius: 0 0 0 50px;
+ border-radius: 0 0 0 50px;
+ border-color: rgba(255,255,255,0.50);
+ border-style: solid;
+ border-width: 0 0 5px 5px;
+ padding: 15px 15px 15px 25px;
+ }
+ .attrib_tl {
+ position: absolute;
+ top: 0;
+ left: 0;
+ -moz-border-radius: 0 0 50px 0;
+ -webkit-border-radius: 0 0 50px 0;
+ border-radius: 0 0 50px 0;
+ border-color: rgba(255,255,255,0.50);
+ border-style: solid;
+ border-width: 0 5px 5px 0;
+ padding: 15px 25px 15px 15px;
+ }
+ .attrib_icon {
+ background-color: rgba(255,255,255,0.10);
+ }
+ .title {
+ background-color: black;
+ color: antiquewhite;
+ flex: 3;
+ -moz-border-radius: 25px;
+ -webkit-border-radius: 25px;
+ border-radius: 25px;
+ overflow: hidden;
+ position: relative;
+ font-size: 85px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ text-align: center;
+ flex-direction: column;
+ padding: 25px;
+ border-width: 2px 2px 2px 2px;
+ border-color: black;
+ border-style: solid;
+ }
+ .group {
+ margin: 50px 50px 0px 50px;
+ -moz-border-radius: 25px;
+ -webkit-border-radius: 25px;
+ border-radius: 25px;
+ display: flex;
+ flex-direction: column;
+ align-content: space-between;
+ height: auto;
+ flex: 2;
+ gap: 35px;
+ }
+ .card {
+ height: 1425px;
+ width: 825px;
+ background-color: black;
+ display: flex;
+ }
+ .card_wrapper {
+ min-height: 2850px;
+ width: 5775px;
+ display: flex;
+ flex-wrap: wrap;
+ height: 100%;
+ }
+ button {
+ font-size: 50px;
+ padding: 30px;
+ margin: 30px;
+ }
+ p {
+ margin: 0;
+ }
+ body {
+ background-color: #1e1e1e;
+ }
+ </style>
+ </head>
+ <button onclick="downloadAsImage()">
+ Download
+ </button>
+ <div id="card_wrapper" class="card_wrapper">
+ <div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, firebrick 100%)" class="card">
+ <div class="group">
+ <div class="title">
+ <div class="attrib_icon attrib_tr">
+ 1 🩸
+ </div>
+ <p>
+ Planes of Igneous
+ </p>
+ </div>
+ <div class="content">
+ <div class="action">
+ <div class="symbol_wrapper_outer">
+ <div class="symbol_wrapper_inner">
+ <span class="icon blood_icon">
+ 🩸
+ </span>
+ </div>
+ <div class="action_detail">
+ <p>Attune to the planes of igneous.</p>
+ </div>
+ </div>
+ </div>
+ <div class="flavour_wrapper">
+ <div class="flavour">
+ <hr>
+ <p>“Sea of flames and ashes.”</p>
+ </div>
+ </div>
+ </div>
+ <div class="card_type">
+ Blood Spell Base
+ </div>
+ </div>
+ </div>
+ <div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, firebrick 100%)" class="card">
+ <div class="group">
+ <div class="title">
+ <div class="attrib_icon attrib_tr">
+ 1 🩸
+ </div>
+ <p>
+ Planes of Storm
+ </p>
+ </div>
+ <div class="content">
+ <div class="action">
+ <div class="symbol_wrapper_outer">
+ <div class="symbol_wrapper_inner">
+ <span class="icon blood_icon">
+ 🩸
+ </span>
+ </div>
+ <div class="action_detail">
+ <p>Attune to the planes of storm.</p>
+ </div>
+ </div>
+ </div>
+ <div class="flavour_wrapper">
+ <div class="flavour">
+ <hr>
+ <p>“Ice cold winds and storms.”</p>
+ </div>
+ </div>
+ </div>
+ <div class="card_type">
+ Blood Spell Base
+ </div>
+ </div>
+ </div>
+ <div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, firebrick 100%)" class="card">
+ <div class="group">
+ <div class="title">
+ <div class="attrib_icon attrib_tr">
+ 1 🩸
+ </div>
+ <p>
+ Planes of Eldritch
+ </p>
+ </div>
+ <div class="content">
+ <div class="action">
+ <div class="symbol_wrapper_outer">
+ <div class="symbol_wrapper_inner">
+ <span class="icon blood_icon">
+ 🩸
+ </span>
+ </div>
+ <div class="action_detail">
+ <p>Attune to the planes of eldritch.</p>
+ </div>
+ </div>
+ </div>
+ <div class="flavour_wrapper">
+ <div class="flavour">
+ <hr>
+ <p>“Alchemicals and fleshy masses.”</p>
+ </div>
+ </div>
+ </div>
+ <div class="card_type">
+ Blood Spell Base
+ </div>
+ </div>
+ </div>
+ <div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, firebrick 100%)" class="card">
+ <div class="group">
+ <div class="title">
+ <div class="attrib_icon attrib_tr">
+ 1 🩸
+ </div>
+ <p>
+ Planes of Void
+ </p>
+ </div>
+ <div class="content">
+ <div class="action">
+ <div class="symbol_wrapper_outer">
+ <div class="symbol_wrapper_inner">
+ <span class="icon blood_icon">
+ 🩸
+ </span>
+ </div>
+ <div class="action_detail">
+ <p>Attune to the planes of void.</p>
+ </div>
+ </div>
+ </div>
+ <div class="flavour_wrapper">
+ <div class="flavour">
+ <hr>
+ <p>“Control Gravity”</p>
+ </div>
+ </div>
+ </div>
+ <div class="card_type">
+ Blood Spell Base
+ </div>
+ </div>
+ </div>
+ <div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, firebrick 100%)" class="card">
+ <div class="group">
+ <div class="title">
+ <div class="attrib_icon attrib_tr">
+ 1 🩸
+ </div>
+ <p>
+ Planes of Soul
+ </p>
+ </div>
+ <div class="content">
+ <div class="action">
+ <div class="symbol_wrapper_outer">
+ <div class="symbol_wrapper_inner">
+ <span class="icon blood_icon">
+ 🩸
+ </span>
+ </div>
+ <div class="action_detail">
+ <p>Attune to the planes of soul.</p>
+ </div>
+ </div>
+ </div>
+ <div class="flavour_wrapper">
+ <div class="flavour">
+ <hr>
+ <p>“Dreams and Memories?”</p>
+ </div>
+ </div>
+ </div>
+ <div class="card_type">
+ Blood Spell Base
+ </div>
+ </div>
+ </div>
+ <div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, firebrick 100%)" class="card">
+ <div class="group">
+ <div class="title">
+ <div class="attrib_icon attrib_tr">
+ 1 🩸
+ </div>
+ <p>
+ Touch of Magic
+ </p>
+ </div>
+ <div class="content">
+ <div class="action">
+ <div class="symbol_wrapper_outer">
+ <div class="symbol_wrapper_inner">
+ <span class="icon blood_icon">
+ 🩸
+ </span>
+ <span class="icon odd_icon">
+ 🔻
+ </span>
+ </div>
+ <div class="action_detail">
+ <p>Summon magic around your hand.</p>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="card_type">
+ Blood Spell Modified
+ </div>
+ </div>
+ </div>
+ <div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, firebrick 100%)" class="card">
+ <div class="group">
+ <div class="title">
+ <div class="attrib_icon attrib_tr">
+ 2 🩸
+ </div>
+ <p>
+ Elemental Engulf
+ </p>
+ </div>
+ <div class="content">
+ <div class="action">
+ <div class="symbol_wrapper_outer">
+ <div class="symbol_wrapper_inner">
+ <span class="icon blood_icon">
+ 🩸
+ </span>
+ <span class="icon greater_icon">
+ ➕
+ </span>
+ </div>
+ <div class="action_detail">
+ <p>Summon magic around your self.</p>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="card_type">
+ Blood Spell Modified
+ </div>
+ </div>
+ </div>
+ <div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, firebrick 100%)" class="card">
+ <div class="group">
+ <div class="title">
+ <div class="attrib_icon attrib_tr">
+ 2 🩸
+ </div>
+ <p>
+ Distance Casting
+ </p>
+ </div>
+ <div class="content">
+ <div class="action">
+ <div class="symbol_wrapper_outer">
+ <div class="symbol_wrapper_inner">
+ <span class="icon blood_icon">
+ 🩸
+ </span>
+ <span class="icon face_icon">
+ 🎭
+ </span>
+ </div>
+ <div class="action_detail">
+ <p>Summon magic at a distance.</p>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="card_type">
+ Blood Spell Modified
+ </div>
+ </div>
+ </div>
+ <div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, firebrick 100%)" class="card">
+ <div class="group">
+ <div class="title">
+ <div class="attrib_icon attrib_tr">
+ 0 🩸
+ </div>
+ <p>
+ Enduring Arcana
+ </p>
+ </div>
+ <div class="content">
+ <div class="action">
+ <div class="symbol_wrapper_outer">
+ <div class="symbol_wrapper_inner">
+ <span class="icon blood_icon">
+ 🩸
+ </span>
+ <span class="icon even_icon">
+ ⬜
+ </span>
+ </div>
+ <div class="action_detail">
+ <p>Keep casting for a duration. Whenever distractions occurs to you while casting, such as an attack or a suprise, do a blood check with difficulty equal to the sum of the blood value of spell components used.</p>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="card_type">
+ Blood Spell Modified
+ </div>
+ </div>
+ </div>
+ </div>
+ <script src="./web/bundle.js">
+ </script>
+ <script>
+ function downloadAsImage() {
+ htmlToImage.toPng(document.getElementById('card_wrapper'))
+ .then(function (dataUrl) {
+ download(dataUrl, 'card_wrapper.png');
+ });
+ }
+ </script>
+</html>
diff --git a/cards/output/class_abilities.html b/cards/output/class_abilities.html
new file mode 100644
index 0000000..77f111a
--- /dev/null
+++ b/cards/output/class_abilities.html
@@ -0,0 +1,595 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <style>
+ .flavour {
+ color: rgba(0,0,0,0.5);
+ padding: 35px;
+ font-size: 35px;
+ }
+ .flavour_wrapper {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ width: 100%;
+ text-align: center;
+ }
+ .action_detail {
+ padding-top: 0px;
+ text-align: left;
+ }
+ .symbol_wrapper_inner {
+ display: flex;
+ flex-direction: column;
+ gap: 5px;
+ }
+ .symbol_wrapper_outer {
+ display: flex;
+ gap: 20px;
+ }
+ .card_type {
+ background-color: antiquewhite;
+ text-align: center;
+ font-size: 40px;
+ padding: 10px;
+ -moz-border-radius: 15px 15px 0 0;
+ -webkit-border-radius: 15px 15px 0 0;
+ border-radius: 15px 15px 0 0;
+ font-weight: bold;
+ border-width: 2px 2px 0 2px;
+ border-color: black;
+ border-style: solid;
+ }
+ .icon {
+ display: inline-block;
+ padding: 8px 4px 0px 4px;
+ -moz-border-radius: 15px;
+ -webkit-border-radius: 15px;
+ border-radius: 15px;
+ aspect-ratio: 1/1;
+ font-size: 40px;
+ height: 52px;
+ width: 52px;
+ }
+ .face_icon {
+ background-color: black;
+ padding: 6px 3px 2px 5px;
+ }
+ .lesser_icon {
+ background-color: black;
+ padding: 12px 0px 0px 12px;
+ font-size: 30px;
+ height: 48px;
+ width: 48px;
+ }
+ .greater_icon {
+ background-color: black;
+ padding: 12px 0px 0px 12px;
+ font-size: 30px;
+ height: 48px;
+ width: 48px;
+ }
+ .even_icon {
+ background-color: black;
+ padding: 12px 0px 0px 12px;
+ font-size: 30px;
+ height: 48px;
+ width: 48px;
+ }
+ .odd_icon {
+ background-color: black;
+ padding: 12px 0px 0px 12px;
+ font-size: 30px;
+ height: 48px;
+ width: 48px;
+ }
+ .hearts_icon {
+ color: orangered;
+ }
+ .diamonds_icon {
+ color: orangered;
+ }
+ .clubs_icon {
+ color: antiquewhite;
+ }
+ .spades_icon {
+ color: antiquewhite;
+ }
+ .suit_icon {
+ background-color: black;
+ text-align: center;
+ font-size: 60px;
+ line-height: 40px;
+ }
+ .blood_icon {
+ background-color: black;
+ padding: 6px 3px 2px 5px;
+ }
+ .joker_icon {
+ background-color: black;
+ padding: 6px 3px 2px 5px;
+ }
+ .tap_icon {
+ background-color: black;
+ }
+ .content {
+ background-color: antiquewhite;
+ color: black;
+ flex: 5;
+ -moz-border-radius: 25px;
+ -webkit-border-radius: 25px;
+ border-radius: 25px;
+ overflow: hidden;
+ position: relative;
+ font-size: 50px;
+ display: flex;
+ justify-content: flex-start;
+ gap: 5px;
+ text-align: left;
+ padding: 35px 30px 30px 30px;
+ flex-direction: column;
+ border-width: 2px 2px 2px 2px;
+ border-color: black;
+ border-style: solid;
+ }
+ .attrib_bottom_icons {
+ bottom: 0;
+ }
+ .attrib_top_icons {
+ top: 0;
+ }
+ .attrib_bl {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ -moz-border-radius: 0 50px 0 0;
+ -webkit-border-radius: 0 50px 0 0;
+ border-radius: 0 50px 0 0;
+ border-color: rgba(255,255,255,0.50);
+ border-style: solid;
+ border-width: 5px 5px 0 0;
+ padding: 15px 25px 15px 15px;
+ }
+ .attrib_br {
+ position: absolute;
+ bottom: 0;
+ right: 0;
+ -moz-border-radius: 50px 0 0 0;
+ -webkit-border-radius: 50px 0 0 0;
+ border-radius: 50px 0 0 0;
+ border-color: rgba(255,255,255,0.50);
+ border-style: solid;
+ border-width: 5px 0 0 5px;
+ padding: 15px 15px 15px 25px;
+ }
+ .attrib_tr {
+ position: absolute;
+ top: 0;
+ right: 0;
+ -moz-border-radius: 0 0 0 50px;
+ -webkit-border-radius: 0 0 0 50px;
+ border-radius: 0 0 0 50px;
+ border-color: rgba(255,255,255,0.50);
+ border-style: solid;
+ border-width: 0 0 5px 5px;
+ padding: 15px 15px 15px 25px;
+ }
+ .attrib_tl {
+ position: absolute;
+ top: 0;
+ left: 0;
+ -moz-border-radius: 0 0 50px 0;
+ -webkit-border-radius: 0 0 50px 0;
+ border-radius: 0 0 50px 0;
+ border-color: rgba(255,255,255,0.50);
+ border-style: solid;
+ border-width: 0 5px 5px 0;
+ padding: 15px 25px 15px 15px;
+ }
+ .attrib_icon {
+ background-color: rgba(255,255,255,0.10);
+ }
+ .title {
+ background-color: black;
+ color: antiquewhite;
+ flex: 3;
+ -moz-border-radius: 25px;
+ -webkit-border-radius: 25px;
+ border-radius: 25px;
+ overflow: hidden;
+ position: relative;
+ font-size: 85px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ text-align: center;
+ flex-direction: column;
+ padding: 25px;
+ border-width: 2px 2px 2px 2px;
+ border-color: black;
+ border-style: solid;
+ }
+ .group {
+ margin: 50px 50px 0px 50px;
+ -moz-border-radius: 25px;
+ -webkit-border-radius: 25px;
+ border-radius: 25px;
+ display: flex;
+ flex-direction: column;
+ align-content: space-between;
+ height: auto;
+ flex: 2;
+ gap: 35px;
+ }
+ .card {
+ height: 1425px;
+ width: 825px;
+ background-color: black;
+ display: flex;
+ }
+ .card_wrapper {
+ min-height: 2850px;
+ width: 5775px;
+ display: flex;
+ flex-wrap: wrap;
+ height: 100%;
+ }
+ button {
+ font-size: 50px;
+ padding: 30px;
+ margin: 30px;
+ }
+ p {
+ margin: 0;
+ }
+ body {
+ background-color: #1e1e1e;
+ }
+ </style>
+ </head>
+ <button onclick="downloadAsImage()">
+ Download
+ </button>
+ <div id="card_wrapper" class="card_wrapper">
+ <div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, Maroon 100%)" class="card">
+ <div class="group">
+ <div class="title">
+ <p>
+ Duel
+ </p>
+ </div>
+ <div class="content">
+ <div class="action">
+ <p>Pick a target. You and that target a duel where you and the target may not attack anyone other then eachother. You cannot use this while in a duel.</p>
+ </div>
+ <div class="flavour_wrapper">
+ <div class="flavour">
+ <hr>
+ <p>“Stabby stabby stab”</p>
+ </div>
+ </div>
+ </div>
+ <div class="card_type">
+ Rogue Ability
+ </div>
+ </div>
+ </div>
+ <div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, Maroon 100%)" class="card">
+ <div class="group">
+ <div class="title">
+ <p>
+ Duck and Weave
+ </p>
+ </div>
+ <div class="content">
+ <div class="action">
+ <div class="symbol_wrapper_outer">
+ <div class="symbol_wrapper_inner">
+ <span class="icon tap_icon">
+ ↪️
+ </span>
+ <span class="icon suit_icon diamonds_icon">
+ ♦️
+ </span>
+ </div>
+ <div class="action_detail">
+ <p>Ignore up to the card played worth of damage from a <strong>reposte</strong>.</p>
+ </div>
+ </div>
+ </div>
+ <div class="flavour_wrapper">
+ <div class="flavour">
+ <hr>
+ <p>“Missed me”</p>
+ </div>
+ </div>
+ </div>
+ <div class="card_type">
+ Rogue Ability
+ </div>
+ </div>
+ </div>
+ <div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, Maroon 100%)" class="card">
+ <div class="group">
+ <div class="title">
+ <p>
+ Surgical Strike
+ </p>
+ </div>
+ <div class="content">
+ <div class="action">
+ <div class="symbol_wrapper_outer">
+ <div class="symbol_wrapper_inner">
+ <span class="icon tap_icon">
+ ↪️
+ </span>
+ <span class="icon suit_icon spades_icon">
+ ♠️
+ </span>
+ </div>
+ <div class="action_detail">
+ <p>(less then 5) Replace a weapon’s damage with the value of the card played. Only affects the current attack.</p>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="card_type">
+ Rogue Ability
+ </div>
+ </div>
+ </div>
+ <div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, Maroon 100%)" class="card">
+ <div class="group">
+ <div class="title">
+ <p>
+ Down the Alleys
+ </p>
+ </div>
+ <div class="content">
+ <div class="action">
+ <div class="symbol_wrapper_outer">
+ <div class="symbol_wrapper_inner">
+ <span class="icon suit_icon diamonds_icon">
+ ♦️
+ </span>
+ </div>
+ <div class="action_detail">
+ <p>(odd) When travelling inside a settlement, after an encounter has been revealed: you may choose to either discard the encounter and draw another one or skip the encounter.</p>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="card_type">
+ Rogue Ability
+ </div>
+ </div>
+ </div>
+ <div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, ForestGreen 100%)" class="card">
+ <div class="group">
+ <div class="title">
+ <p>
+ Spot
+ </p>
+ </div>
+ <div class="content">
+ <div class="action">
+ <div class="symbol_wrapper_outer">
+ <div class="symbol_wrapper_inner">
+ <span class="icon suit_icon hearts_icon">
+ ♥️
+ </span>
+ </div>
+ <div class="action_detail">
+ <p>(face) Mark a target. Choose up to one dice to reroll on each attack agaisnt this target. You can only have one target marked at a time. Lasts until 3 rerolls or the end of combat.</p>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="card_type">
+ Ranger Ability
+ </div>
+ </div>
+ </div>
+ <div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, ForestGreen 100%)" class="card">
+ <div class="group">
+ <div class="title">
+ <p>
+ Flexible Shooter
+ </p>
+ </div>
+ <div class="content">
+ <div class="action">
+ <p>You can deal reposte damage with any ranged weapon.</p>
+ </div>
+ </div>
+ <div class="card_type">
+ Ranger Ability
+ </div>
+ </div>
+ </div>
+ <div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, ForestGreen 100%)" class="card">
+ <div class="group">
+ <div class="title">
+ <p>
+ Scouting Ahead
+ </p>
+ </div>
+ <div class="content">
+ <div class="action">
+ <div class="symbol_wrapper_outer">
+ <div class="symbol_wrapper_inner">
+ <span class="icon suit_icon diamonds_icon">
+ ♦️
+ </span>
+ </div>
+ <div class="action_detail">
+ <p>(even) When travelling outside of a settlement, before the next encounter: reveal 2 encounters and pick 1. Discard the other.</p>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="card_type">
+ Ranger Ability
+ </div>
+ </div>
+ </div>
+ <div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, ForestGreen 100%)" class="card">
+ <div class="group">
+ <div class="title">
+ <p>
+ Healing Salve Recipe
+ </p>
+ </div>
+ <div class="content">
+ <div class="action">
+ <div class="symbol_wrapper_outer">
+ <div class="symbol_wrapper_inner">
+ <span class="icon suit_icon diamonds_icon">
+ ♦️
+ </span>
+ <span class="icon suit_icon hearts_icon">
+ ♥️
+ </span>
+ </div>
+ <div class="action_detail">
+ <p>(each suit) Healberry Herb, Cloth.</p>
+ </div>
+ </div>
+ </div>
+ <div class="flavour_wrapper">
+ <div class="flavour">
+ <hr>
+ <p>“<em>Don’t</em> eat the berries”</p>
+ </div>
+ </div>
+ </div>
+ <div class="card_type">
+ Ranger Recipe
+ </div>
+ </div>
+ </div>
+ <div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, DodgerBlue 100%)" class="card">
+ <div class="group">
+ <div class="title">
+ <p>
+ Recast
+ </p>
+ </div>
+ <div class="content">
+ <div class="action">
+ <div class="symbol_wrapper_outer">
+ <div class="symbol_wrapper_inner">
+ <span class="icon tap_icon">
+ ↪️
+ </span>
+ <span class="icon suit_icon hearts_icon">
+ ♥️
+ </span>
+ </div>
+ <div class="action_detail">
+ <p>(less then or equal to your max blood roll) Replace the blood roll with the value of the card played and reroll any other associated dice with a spell you cast.</p>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="card_type">
+ Astrologist Ability
+ </div>
+ </div>
+ </div>
+ <div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, DodgerBlue 100%)" class="card">
+ <div class="group">
+ <div class="title">
+ <p>
+ Focused Cast
+ </p>
+ </div>
+ <div class="content">
+ <div class="action">
+ <div class="symbol_wrapper_outer">
+ <div class="symbol_wrapper_inner">
+ <span class="icon tap_icon">
+ ↪️
+ </span>
+ </div>
+ <div class="action_detail">
+ <p>Upgrade the blood dice for one spell you cast.</p>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="card_type">
+ Astrologist Ability
+ </div>
+ </div>
+ </div>
+ <div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, DodgerBlue 100%)" class="card">
+ <div class="group">
+ <div class="title">
+ <div class="attrib_icon attrib_tr">
+ 1 🩸
+ </div>
+ <p>
+ Change of Fate
+ </p>
+ </div>
+ <div class="content">
+ <div class="action">
+ <div class="symbol_wrapper_outer">
+ <div class="symbol_wrapper_inner">
+ <span class="icon blood_icon">
+ 🩸
+ </span>
+ </div>
+ <div class="action_detail">
+ <p>Swap 1 card with a willing player.</p>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="card_type">
+ Astrologist Ability
+ </div>
+ </div>
+ </div>
+ <div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, DodgerBlue 100%)" class="card">
+ <div class="group">
+ <div class="title">
+ <div class="attrib_icon attrib_tr">
+ 1 🩸
+ </div>
+ <p>
+ Palm Reading
+ </p>
+ </div>
+ <div class="content">
+ <div class="action">
+ <div class="symbol_wrapper_outer">
+ <div class="symbol_wrapper_inner">
+ <span class="icon blood_icon">
+ 🩸
+ </span>
+ </div>
+ <div class="action_detail">
+ <p>Discard a willing players hand and replace it with new cards drawn.</p>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="card_type">
+ Astrologist Ability
+ </div>
+ </div>
+ </div>
+ </div>
+ <script src="./web/bundle.js">
+ </script>
+ <script>
+ function downloadAsImage() {
+ htmlToImage.toPng(document.getElementById('card_wrapper'))
+ .then(function (dataUrl) {
+ download(dataUrl, 'card_wrapper.png');
+ });
+ }
+ </script>
+</html>
diff --git a/cards/output/common_items.html b/cards/output/common_items.html
new file mode 100644
index 0000000..fc8b188
--- /dev/null
+++ b/cards/output/common_items.html
@@ -0,0 +1,556 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <style>
+ .flavour {
+ color: rgba(0,0,0,0.5);
+ padding: 35px;
+ font-size: 35px;
+ }
+ .flavour_wrapper {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ width: 100%;
+ text-align: center;
+ }
+ .action_detail {
+ padding-top: 0px;
+ text-align: left;
+ }
+ .symbol_wrapper_inner {
+ display: flex;
+ flex-direction: column;
+ gap: 5px;
+ }
+ .symbol_wrapper_outer {
+ display: flex;
+ gap: 20px;
+ }
+ .card_type {
+ background-color: antiquewhite;
+ text-align: center;
+ font-size: 40px;
+ padding: 10px;
+ -moz-border-radius: 15px 15px 0 0;
+ -webkit-border-radius: 15px 15px 0 0;
+ border-radius: 15px 15px 0 0;
+ font-weight: bold;
+ border-width: 2px 2px 0 2px;
+ border-color: black;
+ border-style: solid;
+ }
+ .icon {
+ display: inline-block;
+ padding: 8px 4px 0px 4px;
+ -moz-border-radius: 15px;
+ -webkit-border-radius: 15px;
+ border-radius: 15px;
+ aspect-ratio: 1/1;
+ font-size: 40px;
+ height: 52px;
+ width: 52px;
+ }
+ .face_icon {
+ background-color: black;
+ padding: 6px 3px 2px 5px;
+ }
+ .lesser_icon {
+ background-color: black;
+ padding: 12px 0px 0px 12px;
+ font-size: 30px;
+ height: 48px;
+ width: 48px;
+ }
+ .greater_icon {
+ background-color: black;
+ padding: 12px 0px 0px 12px;
+ font-size: 30px;
+ height: 48px;
+ width: 48px;
+ }
+ .even_icon {
+ background-color: black;
+ padding: 12px 0px 0px 12px;
+ font-size: 30px;
+ height: 48px;
+ width: 48px;
+ }
+ .odd_icon {
+ background-color: black;
+ padding: 12px 0px 0px 12px;
+ font-size: 30px;
+ height: 48px;
+ width: 48px;
+ }
+ .hearts_icon {
+ color: orangered;
+ }
+ .diamonds_icon {
+ color: orangered;
+ }
+ .clubs_icon {
+ color: antiquewhite;
+ }
+ .spades_icon {
+ color: antiquewhite;
+ }
+ .suit_icon {
+ background-color: black;
+ text-align: center;
+ font-size: 60px;
+ line-height: 40px;
+ }
+ .blood_icon {
+ background-color: black;
+ padding: 6px 3px 2px 5px;
+ }
+ .joker_icon {
+ background-color: black;
+ padding: 6px 3px 2px 5px;
+ }
+ .tap_icon {
+ background-color: black;
+ }
+ .content {
+ background-color: antiquewhite;
+ color: black;
+ flex: 5;
+ -moz-border-radius: 25px;
+ -webkit-border-radius: 25px;
+ border-radius: 25px;
+ overflow: hidden;
+ position: relative;
+ font-size: 50px;
+ display: flex;
+ justify-content: flex-start;
+ gap: 5px;
+ text-align: left;
+ padding: 35px 30px 30px 30px;
+ flex-direction: column;
+ border-width: 2px 2px 2px 2px;
+ border-color: black;
+ border-style: solid;
+ }
+ .attrib_bottom_icons {
+ bottom: 0;
+ }
+ .attrib_top_icons {
+ top: 0;
+ }
+ .attrib_bl {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ -moz-border-radius: 0 50px 0 0;
+ -webkit-border-radius: 0 50px 0 0;
+ border-radius: 0 50px 0 0;
+ border-color: rgba(255,255,255,0.50);
+ border-style: solid;
+ border-width: 5px 5px 0 0;
+ padding: 15px 25px 15px 15px;
+ }
+ .attrib_br {
+ position: absolute;
+ bottom: 0;
+ right: 0;
+ -moz-border-radius: 50px 0 0 0;
+ -webkit-border-radius: 50px 0 0 0;
+ border-radius: 50px 0 0 0;
+ border-color: rgba(255,255,255,0.50);
+ border-style: solid;
+ border-width: 5px 0 0 5px;
+ padding: 15px 15px 15px 25px;
+ }
+ .attrib_tr {
+ position: absolute;
+ top: 0;
+ right: 0;
+ -moz-border-radius: 0 0 0 50px;
+ -webkit-border-radius: 0 0 0 50px;
+ border-radius: 0 0 0 50px;
+ border-color: rgba(255,255,255,0.50);
+ border-style: solid;
+ border-width: 0 0 5px 5px;
+ padding: 15px 15px 15px 25px;
+ }
+ .attrib_tl {
+ position: absolute;
+ top: 0;
+ left: 0;
+ -moz-border-radius: 0 0 50px 0;
+ -webkit-border-radius: 0 0 50px 0;
+ border-radius: 0 0 50px 0;
+ border-color: rgba(255,255,255,0.50);
+ border-style: solid;
+ border-width: 0 5px 5px 0;
+ padding: 15px 25px 15px 15px;
+ }
+ .attrib_icon {
+ background-color: rgba(255,255,255,0.10);
+ }
+ .title {
+ background-color: black;
+ color: antiquewhite;
+ flex: 3;
+ -moz-border-radius: 25px;
+ -webkit-border-radius: 25px;
+ border-radius: 25px;
+ overflow: hidden;
+ position: relative;
+ font-size: 85px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ text-align: center;
+ flex-direction: column;
+ padding: 25px;
+ border-width: 2px 2px 2px 2px;
+ border-color: black;
+ border-style: solid;
+ }
+ .group {
+ margin: 50px 50px 0px 50px;
+ -moz-border-radius: 25px;
+ -webkit-border-radius: 25px;
+ border-radius: 25px;
+ display: flex;
+ flex-direction: column;
+ align-content: space-between;
+ height: auto;
+ flex: 2;
+ gap: 35px;
+ }
+ .card {
+ height: 1425px;
+ width: 825px;
+ background-color: black;
+ display: flex;
+ }
+ .card_wrapper {
+ min-height: 2850px;
+ width: 5775px;
+ display: flex;
+ flex-wrap: wrap;
+ height: 100%;
+ }
+ button {
+ font-size: 50px;
+ padding: 30px;
+ margin: 30px;
+ }
+ p {
+ margin: 0;
+ }
+ body {
+ background-color: #1e1e1e;
+ }
+ </style>
+ </head>
+ <button onclick="downloadAsImage()">
+ Download
+ </button>
+ <div id="card_wrapper" class="card_wrapper">
+ <div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, rebeccapurple 100%)" class="card">
+ <div class="group">
+ <div class="title">
+ <p>
+ Test
+ </p>
+ <div class="attrib_icon attrib_bl">
+ ⚔️ 3
+ </div>
+ <div class="attrib_icon attrib_br">
+ Prc 🛡️
+ </div>
+ </div>
+ <div class="content">
+ <div class="action">
+ <div class="symbol_wrapper_outer">
+ <div class="symbol_wrapper_inner">
+ <span class="icon tap_icon">
+ ↪️
+ </span>
+ <span class="icon blood_icon">
+ 🩸
+ </span>
+ <span class="icon lesser_icon">
+ 📣
+ </span>
+ <span class="icon odd_icon">
+ 🔻
+ </span>
+ <span class="icon even_icon">
+ ⬜
+ </span>
+ <span class="icon face_icon">
+ 🎭
+ </span>
+ <span class="icon greater_icon">
+ ➕
+ </span>
+ <span class="icon lesser_icon">
+ ➖
+ </span>
+ </div>
+ <div class="action_detail">
+ <p>🎲 <strong>d8 · Prc</strong> to Bludgeon.</p>
+ </div>
+ </div>
+ </div>
+ <div class="action">
+ <div class="symbol_wrapper_outer">
+ <div class="symbol_wrapper_inner">
+ <span class="icon suit_icon spades_icon">
+ ♠️
+ </span>
+ </div>
+ <div class="action_detail">
+ <p>🎲 <strong>d6 + Prc</strong> to hit.</p>
+ </div>
+ </div>
+ </div>
+ <div class="action">
+ <hr>
+ <div class="symbol_wrapper_outer">
+ <div class="symbol_wrapper_inner">
+ <span class="icon suit_icon clubs_icon">
+ ♣️
+ </span>
+ </div>
+ <div class="action_detail">
+ <p>🎲 <strong>d6 + Prc</strong> to hit.</p>
+ </div>
+ </div>
+ </div>
+ <div class="action">
+ <hr>
+ <div class="symbol_wrapper_outer">
+ <div class="symbol_wrapper_inner">
+ <span class="icon suit_icon diamonds_icon">
+ ♦️
+ </span>
+ </div>
+ <div class="action_detail">
+ <p>🎲 <strong>d6 + Prc</strong> to hit.</p>
+ </div>
+ </div>
+ </div>
+ <div class="action">
+ <hr>
+ <div class="symbol_wrapper_outer">
+ <div class="symbol_wrapper_inner">
+ <span class="icon joker_icon">
+ 🃏
+ </span>
+ </div>
+ <div class="action_detail">
+ <p>🎲 <strong>d6 + Prc</strong> to hit.</p>
+ </div>
+ </div>
+ </div>
+ <div class="action">
+ <hr>
+ <div class="symbol_wrapper_outer">
+ <div class="symbol_wrapper_inner">
+ <span class="icon tap_icon">
+ ↪️
+ </span>
+ <span class="icon suit_icon hearts_icon">
+ ♥️
+ </span>
+ </div>
+ <div class="action_detail">
+ <p>🎲 <strong>d6 + Prc</strong> to hit.</p>
+ </div>
+ </div>
+ </div>
+ <div class="flavour_wrapper">
+ <div class="flavour">
+ <hr>
+ <p>“World Famous Iron Toothpick”</p>
+ </div>
+ </div>
+ </div>
+ <div class="card_type">
+ Thrusting Sword Weapon
+ </div>
+ </div>
+ </div>
+ <div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, saddlebrown 100%)" class="card">
+ <div class="group">
+ <div class="title">
+ <p>
+ Sack
+ </p>
+ </div>
+ <div class="content">
+ <div class="action">
+ <p><strong>Item slot</strong>: 12 spaces.</p>
+ </div>
+ <div class="action">
+ <hr>
+ <div class="symbol_wrapper_outer">
+ <div class="symbol_wrapper_inner">
+ <span class="icon tap_icon">
+ ↪️
+ </span>
+ </div>
+ <div class="action_detail">
+ <p>Draw up to 2 cards from this inventory and place up to 2 items to the front or back of this inventory.</p>
+ </div>
+ </div>
+ </div>
+ <div class="action">
+ <hr>
+ <p>Equips on your back.</p>
+ </div>
+ </div>
+ <div class="card_type">
+ Leather Item Container
+ </div>
+ </div>
+ </div>
+ <div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, saddlebrown 100%)" class="card">
+ <div class="group">
+ <div class="title">
+ <p>
+ Satchel
+ </p>
+ </div>
+ <div class="content">
+ <div class="action">
+ <p><strong>Item slot</strong>: 6 spaces.</p>
+ </div>
+ <div class="action">
+ <hr>
+ <div class="symbol_wrapper_outer">
+ <div class="symbol_wrapper_inner">
+ <span class="icon tap_icon">
+ ↪️
+ </span>
+ </div>
+ <div class="action_detail">
+ <p>Draw up to 3 cards from this inventory and place up to 3 items to the front or back of this inventory.</p>
+ </div>
+ </div>
+ </div>
+ <div class="action">
+ <hr>
+ <p>Equips on your back.</p>
+ </div>
+ </div>
+ <div class="card_type">
+ Leather Item Container
+ </div>
+ </div>
+ </div>
+ <div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, saddlebrown 100%)" class="card">
+ <div class="group">
+ <div class="title">
+ <p>
+ Rucksack
+ </p>
+ </div>
+ <div class="content">
+ <div class="action">
+ <p><strong>Item slot</strong>: 12 spaces.</p>
+ </div>
+ <div class="action">
+ <p><strong>Item slot</strong>: 6 spaces.</p>
+ </div>
+ <div class="action">
+ <hr>
+ <div class="symbol_wrapper_outer">
+ <div class="symbol_wrapper_inner">
+ <span class="icon tap_icon">
+ ↪️
+ </span>
+ </div>
+ <div class="action_detail">
+ <p>Draw up to 2 cards from this inventory and place up to 2 items to the front or back of this inventory.</p>
+ </div>
+ </div>
+ </div>
+ <div class="action">
+ <hr>
+ <p>Equips on your back.</p>
+ </div>
+ </div>
+ <div class="card_type">
+ Leather Item Container
+ </div>
+ </div>
+ </div>
+ <div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, saddlebrown 100%)" class="card">
+ <div class="group">
+ <div class="title">
+ <p>
+ Sheath
+ </p>
+ </div>
+ <div class="content">
+ <div class="action">
+ <p><strong>Item slot</strong>: 1 weapon.</p>
+ </div>
+ <div class="action">
+ <hr>
+ <div class="symbol_wrapper_outer">
+ <div class="symbol_wrapper_inner">
+ <span class="icon tap_icon">
+ ↪️
+ </span>
+ </div>
+ <div class="action_detail">
+ <p>Draw up to 1 cards from this inventory and place up to 1 weapon to this inventory.</p>
+ </div>
+ </div>
+ </div>
+ <div class="action">
+ <hr>
+ <p>Equips on your back or hip.</p>
+ </div>
+ </div>
+ <div class="card_type">
+ Leather Item Container
+ </div>
+ </div>
+ </div>
+ <div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, grey 100%)" class="card">
+ <div class="group">
+ <div class="title">
+ <p>
+ Hand Bomb
+ </p>
+ </div>
+ <div class="content">
+ <div class="action">
+ <div class="symbol_wrapper_outer">
+ <div class="symbol_wrapper_inner">
+ <span class="icon tap_icon">
+ ↪️
+ </span>
+ </div>
+ <div class="action_detail">
+ <p>Deal <strong>3 damage</strong>. Consumes this item.</p>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="card_type">
+ Consumable Weapon
+ </div>
+ </div>
+ </div>
+ </div>
+ <script src="./web/bundle.js">
+ </script>
+ <script>
+ function downloadAsImage() {
+ htmlToImage.toPng(document.getElementById('card_wrapper'))
+ .then(function (dataUrl) {
+ download(dataUrl, 'card_wrapper.png');
+ });
+ }
+ </script>
+</html>
diff --git a/cards/output/common_weapons.html b/cards/output/common_weapons.html
new file mode 100644
index 0000000..fe55b0c
--- /dev/null
+++ b/cards/output/common_weapons.html
@@ -0,0 +1,1047 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <style>
+ .flavour {
+ color: rgba(0,0,0,0.5);
+ padding: 35px;
+ font-size: 35px;
+ }
+ .flavour_wrapper {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ width: 100%;
+ text-align: center;
+ }
+ .action_detail {
+ padding-top: 0px;
+ text-align: left;
+ }
+ .symbol_wrapper_inner {
+ display: flex;
+ flex-direction: column;
+ gap: 5px;
+ }
+ .symbol_wrapper_outer {
+ display: flex;
+ gap: 20px;
+ }
+ .card_type {
+ background-color: antiquewhite;
+ text-align: center;
+ font-size: 40px;
+ padding: 10px;
+ -moz-border-radius: 15px 15px 0 0;
+ -webkit-border-radius: 15px 15px 0 0;
+ border-radius: 15px 15px 0 0;
+ font-weight: bold;
+ border-width: 2px 2px 0 2px;
+ border-color: black;
+ border-style: solid;
+ }
+ .icon {
+ display: inline-block;
+ padding: 8px 4px 0px 4px;
+ -moz-border-radius: 15px;
+ -webkit-border-radius: 15px;
+ border-radius: 15px;
+ aspect-ratio: 1/1;
+ font-size: 40px;
+ height: 52px;
+ width: 52px;
+ }
+ .face_icon {
+ background-color: black;
+ padding: 6px 3px 2px 5px;
+ }
+ .lesser_icon {
+ background-color: black;
+ padding: 12px 0px 0px 12px;
+ font-size: 30px;
+ height: 48px;
+ width: 48px;
+ }
+ .greater_icon {
+ background-color: black;
+ padding: 12px 0px 0px 12px;
+ font-size: 30px;
+ height: 48px;
+ width: 48px;
+ }
+ .even_icon {
+ background-color: black;
+ padding: 12px 0px 0px 12px;
+ font-size: 30px;
+ height: 48px;
+ width: 48px;
+ }
+ .odd_icon {
+ background-color: black;
+ padding: 12px 0px 0px 12px;
+ font-size: 30px;
+ height: 48px;
+ width: 48px;
+ }
+ .hearts_icon {
+ color: orangered;
+ }
+ .diamonds_icon {
+ color: orangered;
+ }
+ .clubs_icon {
+ color: antiquewhite;
+ }
+ .spades_icon {
+ color: antiquewhite;
+ }
+ .suit_icon {
+ background-color: black;
+ text-align: center;
+ font-size: 60px;
+ line-height: 40px;
+ }
+ .blood_icon {
+ background-color: black;
+ padding: 6px 3px 2px 5px;
+ }
+ .joker_icon {
+ background-color: black;
+ padding: 6px 3px 2px 5px;
+ }
+ .tap_icon {
+ background-color: black;
+ }
+ .content {
+ background-color: antiquewhite;
+ color: black;
+ flex: 5;
+ -moz-border-radius: 25px;
+ -webkit-border-radius: 25px;
+ border-radius: 25px;
+ overflow: hidden;
+ position: relative;
+ font-size: 50px;
+ display: flex;
+ justify-content: flex-start;
+ gap: 5px;
+ text-align: left;
+ padding: 35px 30px 30px 30px;
+ flex-direction: column;
+ border-width: 2px 2px 2px 2px;
+ border-color: black;
+ border-style: solid;
+ }
+ .attrib_bottom_icons {
+ bottom: 0;
+ }
+ .attrib_top_icons {
+ top: 0;
+ }
+ .attrib_bl {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ -moz-border-radius: 0 50px 0 0;
+ -webkit-border-radius: 0 50px 0 0;
+ border-radius: 0 50px 0 0;
+ border-color: rgba(255,255,255,0.50);
+ border-style: solid;
+ border-width: 5px 5px 0 0;
+ padding: 15px 25px 15px 15px;
+ }
+ .attrib_br {
+ position: absolute;
+ bottom: 0;
+ right: 0;
+ -moz-border-radius: 50px 0 0 0;
+ -webkit-border-radius: 50px 0 0 0;
+ border-radius: 50px 0 0 0;
+ border-color: rgba(255,255,255,0.50);
+ border-style: solid;
+ border-width: 5px 0 0 5px;
+ padding: 15px 15px 15px 25px;
+ }
+ .attrib_tr {
+ position: absolute;
+ top: 0;
+ right: 0;
+ -moz-border-radius: 0 0 0 50px;
+ -webkit-border-radius: 0 0 0 50px;
+ border-radius: 0 0 0 50px;
+ border-color: rgba(255,255,255,0.50);
+ border-style: solid;
+ border-width: 0 0 5px 5px;
+ padding: 15px 15px 15px 25px;
+ }
+ .attrib_tl {
+ position: absolute;
+ top: 0;
+ left: 0;
+ -moz-border-radius: 0 0 50px 0;
+ -webkit-border-radius: 0 0 50px 0;
+ border-radius: 0 0 50px 0;
+ border-color: rgba(255,255,255,0.50);
+ border-style: solid;
+ border-width: 0 5px 5px 0;
+ padding: 15px 25px 15px 15px;
+ }
+ .attrib_icon {
+ background-color: rgba(255,255,255,0.10);
+ }
+ .title {
+ background-color: black;
+ color: antiquewhite;
+ flex: 3;
+ -moz-border-radius: 25px;
+ -webkit-border-radius: 25px;
+ border-radius: 25px;
+ overflow: hidden;
+ position: relative;
+ font-size: 85px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ text-align: center;
+ flex-direction: column;
+ padding: 25px;
+ border-width: 2px 2px 2px 2px;
+ border-color: black;
+ border-style: solid;
+ }
+ .group {
+ margin: 50px 50px 0px 50px;
+ -moz-border-radius: 25px;
+ -webkit-border-radius: 25px;
+ border-radius: 25px;
+ display: flex;
+ flex-direction: column;
+ align-content: space-between;
+ height: auto;
+ flex: 2;
+ gap: 35px;
+ }
+ .card {
+ height: 1425px;
+ width: 825px;
+ background-color: black;
+ display: flex;
+ }
+ .card_wrapper {
+ min-height: 2850px;
+ width: 5775px;
+ display: flex;
+ flex-wrap: wrap;
+ height: 100%;
+ }
+ button {
+ font-size: 50px;
+ padding: 30px;
+ margin: 30px;
+ }
+ p {
+ margin: 0;
+ }
+ body {
+ background-color: #1e1e1e;
+ }
+ </style>
+ </head>
+ <button onclick="downloadAsImage()">
+ Download
+ </button>
+ <div id="card_wrapper" class="card_wrapper">
+ <div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, rebeccapurple 100%)" class="card">
+ <div class="group">
+ <div class="title">
+ <p>
+ Test
+ </p>
+ <div class="attrib_icon attrib_bl">
+ ⚔️ 3
+ </div>
+ <div class="attrib_icon attrib_br">
+ Prc 🛡️
+ </div>
+ </div>
+ <div class="content">
+ <div class="action">
+ <div class="symbol_wrapper_outer">
+ <div class="symbol_wrapper_inner">
+ <span class="icon tap_icon">
+ ↪️
+ </span>
+ <span class="icon blood_icon">
+ 🩸
+ </span>
+ <span class="icon lesser_icon">
+ 📣
+ </span>
+ <span class="icon odd_icon">
+ 🔻
+ </span>
+ <span class="icon even_icon">
+ ⬜
+ </span>
+ <span class="icon face_icon">
+ 🎭
+ </span>
+ <span class="icon greater_icon">
+ ➕
+ </span>
+ <span class="icon lesser_icon">
+ ➖
+ </span>
+ </div>
+ <div class="action_detail">
+ <p>🎲 <strong>d8 · Prc</strong> to Bludgeon.</p>
+ </div>
+ </div>
+ </div>
+ <div class="action">
+ <div class="symbol_wrapper_outer">
+ <div class="symbol_wrapper_inner">
+ <span class="icon suit_icon spades_icon">
+ ♠️
+ </span>
+ </div>
+ <div class="action_detail">
+ <p>🎲 <strong>d6 + Prc</strong> to hit.</p>
+ </div>
+ </div>
+ </div>
+ <div class="action">
+ <hr>
+ <div class="symbol_wrapper_outer">
+ <div class="symbol_wrapper_inner">
+ <span class="icon suit_icon clubs_icon">
+ ♣️
+ </span>
+ </div>
+ <div class="action_detail">
+ <p>🎲 <strong>d6 + Prc</strong> to hit.</p>
+ </div>
+ </div>
+ </div>
+ <div class="action">
+ <hr>
+ <div class="symbol_wrapper_outer">
+ <div class="symbol_wrapper_inner">
+ <span class="icon suit_icon diamonds_icon">
+ ♦️
+ </span>
+ </div>
+ <div class="action_detail">
+ <p>🎲 <strong>d6 + Prc</strong> to hit.</p>
+ </div>
+ </div>
+ </div>
+ <div class="action">
+ <hr>
+ <div class="symbol_wrapper_outer">
+ <div class="symbol_wrapper_inner">
+ <span class="icon joker_icon">
+ 🃏
+ </span>
+ </div>
+ <div class="action_detail">
+ <p>🎲 <strong>d6 + Prc</strong> to hit.</p>
+ </div>
+ </div>
+ </div>
+ <div class="action">
+ <hr>
+ <div class="symbol_wrapper_outer">
+ <div class="symbol_wrapper_inner">
+ <span class="icon tap_icon">
+ ↪️
+ </span>
+ <span class="icon suit_icon hearts_icon">
+ ♥️
+ </span>
+ </div>
+ <div class="action_detail">
+ <p>🎲 <strong>d6 + Prc</strong> to hit.</p>
+ </div>
+ </div>
+ </div>
+ <div class="flavour_wrapper">
+ <div class="flavour">
+ <hr>
+ <p>“World Famous Iron Toothpick”</p>
+ </div>
+ </div>
+ </div>
+ <div class="card_type">
+ Thrusting Sword Weapon
+ </div>
+ </div>
+ </div>
+ <div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, rebeccapurple 100%)" class="card">
+ <div class="group">
+ <div class="title">
+ <p>
+ Spear
+ </p>
+ <div class="attrib_icon attrib_bl">
+ ⚔️ 3
+ </div>
+ <div class="attrib_icon attrib_br">
+ Prc 🛡️
+ </div>
+ </div>
+ <div class="content">
+ <div class="action">
+ <div class="symbol_wrapper_outer">
+ <div class="symbol_wrapper_inner">
+ <span class="icon tap_icon">
+ ↪️
+ </span>
+ </div>
+ <div class="action_detail">
+ <p>🎲 <strong>d6 · Prc</strong> to Pierce.</p>
+ </div>
+ </div>
+ </div>
+ <div class="action">
+ <div class="symbol_wrapper_outer">
+ <div class="symbol_wrapper_inner">
+ <span style="visibility: hidden;" class="icon lesser_icon">
+ 🈷️
+ </span>
+ </div>
+ <div class="action_detail">
+ <p><strong>Reach</strong>, <strong>Throwable</strong></p>
+ </div>
+ </div>
+ </div>
+ <div class="flavour_wrapper">
+ <div class="flavour">
+ <hr>
+ <p>“5x more throwable then previous editions”</p>
+ </div>
+ </div>
+ </div>
+ <div class="card_type">
+ Polearm Weapon
+ </div>
+ </div>
+ </div>
+ <div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, rebeccapurple 100%)" class="card">
+ <div class="group">
+ <div class="title">
+ <p>
+ Dagger
+ </p>
+ <div class="attrib_icon attrib_bl">
+ ⚔️ 2
+ </div>
+ <div class="attrib_icon attrib_br">
+ Prc 🛡️
+ </div>
+ </div>
+ <div class="content">
+ <div class="action">
+ <div class="symbol_wrapper_outer">
+ <div class="symbol_wrapper_inner">
+ <span class="icon tap_icon">
+ ↪️
+ </span>
+ </div>
+ <div class="action_detail">
+ <p>🎲 <strong>d4 · Prc</strong> to Pierce.</p>
+ </div>
+ </div>
+ </div>
+ <div class="action">
+ <div class="symbol_wrapper_outer">
+ <div class="symbol_wrapper_inner">
+ <span style="visibility: hidden;" class="icon lesser_icon">
+ 🈷️
+ </span>
+ </div>
+ <div class="action_detail">
+ <p><strong>Light</strong>, <strong>Throwable</strong></p>
+ </div>
+ </div>
+ </div>
+ <div class="flavour_wrapper">
+ <div class="flavour">
+ <hr>
+ <p>“A quick and convinient way to turn a spleen into a sheath”</p>
+ </div>
+ </div>
+ </div>
+ <div class="card_type">
+ Dagger Weapon
+ </div>
+ </div>
+ </div>
+ <div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, rebeccapurple 100%)" class="card">
+ <div class="group">
+ <div class="title">
+ <p>
+ Longbow
+ </p>
+ <div class="attrib_icon attrib_bl">
+ ⚔️ 3
+ </div>
+ </div>
+ <div class="content">
+ <div class="action">
+ <div class="symbol_wrapper_outer">
+ <div class="symbol_wrapper_inner">
+ <span class="icon tap_icon">
+ ↪️
+ </span>
+ </div>
+ <div class="action_detail">
+ <p>🎲 <strong>d6 · Prc</strong> to Pierce.</p>
+ </div>
+ </div>
+ </div>
+ <div class="action">
+ <div class="symbol_wrapper_outer">
+ <div class="symbol_wrapper_inner">
+ <span style="visibility: hidden;" class="icon lesser_icon">
+ 🈷️
+ </span>
+ </div>
+ <div class="action_detail">
+ <p><strong>Ranged</strong></p>
+ </div>
+ </div>
+ </div>
+ <div class="flavour_wrapper">
+ <div class="flavour">
+ <hr>
+ <p>“One stringed instrument that got repurposed as a weapon.”</p>
+ </div>
+ </div>
+ </div>
+ <div class="card_type">
+ Bow Weapon
+ </div>
+ </div>
+ </div>
+ <div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, rebeccapurple 100%)" class="card">
+ <div class="group">
+ <div class="title">
+ <p>
+ Crossbow
+ </p>
+ <div class="attrib_icon attrib_bl">
+ ⚔️ 3
+ </div>
+ </div>
+ <div class="content">
+ <div class="action">
+ <div class="symbol_wrapper_outer">
+ <div class="symbol_wrapper_inner">
+ <span class="icon tap_icon">
+ ↪️
+ </span>
+ </div>
+ <div class="action_detail">
+ <p>Remove a counter.</p>
+ </div>
+ </div>
+ </div>
+ <div class="action">
+ <div class="symbol_wrapper_outer">
+ <div class="symbol_wrapper_inner">
+ <span style="visibility: hidden;" class="icon lesser_icon">
+ 🈷️
+ </span>
+ </div>
+ <div class="action_detail">
+ <p>🎲 <strong>d8 · Prc</strong> to Pierce.</p>
+ </div>
+ </div>
+ </div>
+ <div class="action">
+ <div class="symbol_wrapper_outer">
+ <div class="symbol_wrapper_inner">
+ <span style="visibility: hidden;" class="icon lesser_icon">
+ 🈷️
+ </span>
+ </div>
+ <div class="action_detail">
+ <p><strong>Ranged</strong></p>
+ </div>
+ </div>
+ </div>
+ <div class="action">
+ <hr>
+ <div class="symbol_wrapper_outer">
+ <div class="symbol_wrapper_inner">
+ <span class="icon tap_icon">
+ ↪️
+ </span>
+ </div>
+ <div class="action_detail">
+ <p><strong>Reload</strong>: Load this weapon. Add a counter to this card.</p>
+ </div>
+ </div>
+ </div>
+ <div class="flavour_wrapper">
+ <div class="flavour">
+ <hr>
+ <p>“No one will cross you with this weapon”</p>
+ </div>
+ </div>
+ </div>
+ <div class="card_type">
+ Crossbow Weapon
+ </div>
+ </div>
+ </div>
+ <div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, rebeccapurple 100%)" class="card">
+ <div class="group">
+ <div class="title">
+ <p>
+ Warhammer
+ </p>
+ <div class="attrib_icon attrib_bl">
+ ⚔️ 3
+ </div>
+ <div class="attrib_icon attrib_br">
+ Str 🛡️
+ </div>
+ </div>
+ <div class="content">
+ <div class="action">
+ <div class="symbol_wrapper_outer">
+ <div class="symbol_wrapper_inner">
+ <span class="icon tap_icon">
+ ↪️
+ </span>
+ </div>
+ <div class="action_detail">
+ <p>🎲 <strong>d8 · (Str)</strong> to Bludgeon.</p>
+ </div>
+ </div>
+ </div>
+ <div class="flavour_wrapper">
+ <div class="flavour">
+ <hr>
+ <p>“Made of over 39,000 minature hammers”</p>
+ </div>
+ </div>
+ </div>
+ <div class="card_type">
+ Hammer Weapon
+ </div>
+ </div>
+ </div>
+ <div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, rebeccapurple 100%)" class="card">
+ <div class="group">
+ <div class="title">
+ <p>
+ Sickle
+ </p>
+ <div class="attrib_icon attrib_bl">
+ ⚔️ 1
+ </div>
+ <div class="attrib_icon attrib_br">
+ Prc 🛡️
+ </div>
+ </div>
+ <div class="content">
+ <div class="action">
+ <div class="symbol_wrapper_outer">
+ <div class="symbol_wrapper_inner">
+ <span class="icon tap_icon">
+ ↪️
+ </span>
+ </div>
+ <div class="action_detail">
+ <p>🎲 <strong>d4 · (Prc)</strong> to Bludgeon.</p>
+ </div>
+ </div>
+ </div>
+ <div class="action">
+ <div class="symbol_wrapper_outer">
+ <div class="symbol_wrapper_inner">
+ <span style="visibility: hidden;" class="icon lesser_icon">
+ 🈷️
+ </span>
+ </div>
+ <div class="action_detail">
+ <p><strong>Light</strong>, <strong>Cleave</strong></p>
+ </div>
+ </div>
+ </div>
+ <div class="flavour_wrapper">
+ <div class="flavour">
+ <hr>
+ <p>“Made of over 39,000 minature hammers”</p>
+ </div>
+ </div>
+ </div>
+ <div class="card_type">
+ Farming Weapon
+ </div>
+ </div>
+ </div>
+ <div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, rebeccapurple 100%)" class="card">
+ <div class="group">
+ <div class="title">
+ <p>
+ Scythe
+ </p>
+ <div class="attrib_icon attrib_bl">
+ ⚔️ 2
+ </div>
+ <div class="attrib_icon attrib_br">
+ Prc 🛡️
+ </div>
+ </div>
+ <div class="content">
+ <div class="action">
+ <div class="symbol_wrapper_outer">
+ <div class="symbol_wrapper_inner">
+ <span class="icon tap_icon">
+ ↪️
+ </span>
+ </div>
+ <div class="action_detail">
+ <p>🎲 <strong>d6 · (Prc)</strong> to Bludgeon.</p>
+ </div>
+ </div>
+ </div>
+ <div class="action">
+ <div class="symbol_wrapper_outer">
+ <div class="symbol_wrapper_inner">
+ <span style="visibility: hidden;" class="icon lesser_icon">
+ 🈷️
+ </span>
+ </div>
+ <div class="action_detail">
+ <p><strong>Heavy</strong>, <strong>Cleave</strong></p>
+ </div>
+ </div>
+ </div>
+ <div class="flavour_wrapper">
+ <div class="flavour">
+ <hr>
+ <p>“Made of over 39,000 minature hammers”</p>
+ </div>
+ </div>
+ </div>
+ <div class="card_type">
+ Farming Weapon
+ </div>
+ </div>
+ </div>
+ <div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, rebeccapurple 100%)" class="card">
+ <div class="group">
+ <div class="title">
+ <p>
+ Short Sword
+ </p>
+ <div class="attrib_icon attrib_bl">
+ ⚔️ 3
+ </div>
+ <div class="attrib_icon attrib_br">
+ Str 🛡️
+ </div>
+ </div>
+ <div class="content">
+ <div class="action">
+ <div class="symbol_wrapper_outer">
+ <div class="symbol_wrapper_inner">
+ <span class="icon tap_icon">
+ ↪️
+ </span>
+ </div>
+ <div class="action_detail">
+ <p>🎲 <strong>d6 · Str</strong> to hit.</p>
+ </div>
+ </div>
+ </div>
+ <div class="action">
+ <div class="symbol_wrapper_outer">
+ <div class="symbol_wrapper_inner">
+ <span style="visibility: hidden;" class="icon lesser_icon">
+ 🈷️
+ </span>
+ </div>
+ <div class="action_detail">
+ <p><strong>Light</strong></p>
+ </div>
+ </div>
+ </div>
+ <div class="flavour_wrapper">
+ <div class="flavour">
+ <hr>
+ <p>“El Classico”</p>
+ </div>
+ </div>
+ </div>
+ <div class="card_type">
+ Straight Sword Weapon
+ </div>
+ </div>
+ </div>
+ <div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, rebeccapurple 100%)" class="card">
+ <div class="group">
+ <div class="title">
+ <p>
+ Long Sword
+ </p>
+ <div class="attrib_icon attrib_bl">
+ ⚔️ 3
+ </div>
+ <div class="attrib_icon attrib_br">
+ Str 🛡️
+ </div>
+ </div>
+ <div class="content">
+ <div class="action">
+ <div class="symbol_wrapper_outer">
+ <div class="symbol_wrapper_inner">
+ <span class="icon tap_icon">
+ ↪️
+ </span>
+ </div>
+ <div class="action_detail">
+ <p>🎲 <strong>d8 · Str</strong> to hit.</p>
+ </div>
+ </div>
+ </div>
+ <div class="flavour_wrapper">
+ <div class="flavour">
+ <hr>
+ <p>“El Classico”</p>
+ </div>
+ </div>
+ </div>
+ <div class="card_type">
+ Straight Sword Weapon
+ </div>
+ </div>
+ </div>
+ <div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, rebeccapurple 100%)" class="card">
+ <div class="group">
+ <div class="title">
+ <p>
+ Axe
+ </p>
+ <div class="attrib_icon attrib_bl">
+ ⚔️ 4
+ </div>
+ <div class="attrib_icon attrib_br">
+ Str 🛡️
+ </div>
+ </div>
+ <div class="content">
+ <div class="action">
+ <div class="symbol_wrapper_outer">
+ <div class="symbol_wrapper_inner">
+ <span class="icon tap_icon">
+ ↪️
+ </span>
+ </div>
+ <div class="action_detail">
+ <p>🎲 <strong>d6 · Str</strong> to Slash.</p>
+ </div>
+ </div>
+ </div>
+ <div class="flavour_wrapper">
+ <div class="flavour">
+ <hr>
+ <p>“Looks great with a flannel shirt.”</p>
+ </div>
+ </div>
+ </div>
+ <div class="card_type">
+ Axe Weapon
+ </div>
+ </div>
+ </div>
+ <div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, rebeccapurple 100%)" class="card">
+ <div class="group">
+ <div class="title">
+ <p>
+ Staff
+ </p>
+ <div class="attrib_icon attrib_bl">
+ ⚔️ 2
+ </div>
+ <div class="attrib_icon attrib_br">
+ Str 🛡️
+ </div>
+ </div>
+ <div class="content">
+ <div class="action">
+ <div class="symbol_wrapper_outer">
+ <div class="symbol_wrapper_inner">
+ <span class="icon tap_icon">
+ ↪️
+ </span>
+ </div>
+ <div class="action_detail">
+ <p>🎲 <strong>d6 + Str</strong> to Bludgeon.</p>
+ </div>
+ </div>
+ </div>
+ <div class="action">
+ <hr>
+ <div class="symbol_wrapper_outer">
+ <div class="symbol_wrapper_inner">
+ <span class="icon tap_icon">
+ ↪️
+ </span>
+ </div>
+ <div class="action_detail">
+ <p>🎲 <strong>d8 + Str</strong> to Bludgeon.</p>
+ </div>
+ </div>
+ </div>
+ <div class="action">
+ <p><strong>Heavy</strong></p>
+ </div>
+ <div class="flavour_wrapper">
+ <div class="flavour">
+ <hr>
+ <p>“Says ‘Made by the Ninja Custodial Group’ on the handle”</p>
+ </div>
+ </div>
+ </div>
+ <div class="card_type">
+ Staff Weapon
+ </div>
+ </div>
+ </div>
+ <div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, rebeccapurple 100%)" class="card">
+ <div class="group">
+ <div class="title">
+ <p>
+ Kite Shield
+ </p>
+ </div>
+ <div class="content">
+ <div class="action">
+ <div class="symbol_wrapper_outer">
+ <div class="symbol_wrapper_inner">
+ <span class="icon tap_icon">
+ ↪️
+ </span>
+ <span class="icon lesser_icon">
+ 📣
+ </span>
+ </div>
+ <div class="action_detail">
+ <p>When <strong>targeted with a weapon:</strong> your attacker recieves <strong>2 disadvantage</strong> on their action.</p>
+ </div>
+ </div>
+ </div>
+ <div class="flavour_wrapper">
+ <div class="flavour">
+ <hr>
+ <p>“Looks great with a flannel shirt.”</p>
+ </div>
+ </div>
+ </div>
+ <div class="card_type">
+ Shield Weapon
+ </div>
+ </div>
+ </div>
+ <div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, rebeccapurple 100%)" class="card">
+ <div class="group">
+ <div class="title">
+ <p>
+ Buckler Shield
+ </p>
+ </div>
+ <div class="content">
+ <div class="action">
+ <div class="symbol_wrapper_outer">
+ <div class="symbol_wrapper_inner">
+ <span class="icon tap_icon">
+ ↪️
+ </span>
+ <span class="icon lesser_icon">
+ 📣
+ </span>
+ </div>
+ <div class="action_detail">
+ <p>When <strong>targeted with a weapon:</strong> your attacker recieves <strong>1 disadvantage</strong> on their action. If your reposte triggers then deal double damage with it.</p>
+ </div>
+ </div>
+ </div>
+ <div class="flavour_wrapper">
+ <div class="flavour">
+ <hr>
+ <p>“Looks great with a flannel shirt.”</p>
+ </div>
+ </div>
+ </div>
+ <div class="card_type">
+ Shield Weapon
+ </div>
+ </div>
+ </div>
+ <div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, DarkBlue 100%)" class="card">
+ <div class="group">
+ <div class="title">
+ <p>
+ Caestus
+ </p>
+ </div>
+ <div class="content">
+ <div class="action">
+ <p>While equipped: Unarmed Strikes deal <strong>Str</strong> additional damage.</p>
+ </div>
+ <div class="flavour_wrapper">
+ <div class="flavour">
+ <hr>
+ <p>“Weapon of choice for a fit bronze statue”</p>
+ </div>
+ </div>
+ </div>
+ <div class="card_type">
+ Weapon Equipment
+ </div>
+ </div>
+ </div>
+ <div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, DarkBlue 100%)" class="card">
+ <div class="group">
+ <div class="title">
+ <div class="attrib_icon attrib_tl">
+ 🎲 1d4
+ </div>
+ <p>
+ Tuning Fork
+ </p>
+ </div>
+ <div class="content">
+ <div class="action">
+ <p><strong>Casting Focus</strong></p>
+ </div>
+ <div class="flavour_wrapper">
+ <div class="flavour">
+ <hr>
+ <p>“Resonates with various magical frequencies to help with casting blood magic”</p>
+ </div>
+ </div>
+ </div>
+ <div class="card_type">
+ Magic Casting Tool
+ </div>
+ </div>
+ </div>
+ </div>
+ <script src="./web/bundle.js">
+ </script>
+ <script>
+ function downloadAsImage() {
+ htmlToImage.toPng(document.getElementById('card_wrapper'))
+ .then(function (dataUrl) {
+ download(dataUrl, 'card_wrapper.png');
+ });
+ }
+ </script>
+</html>
diff --git a/cards/output/paladin_abilities.html b/cards/output/paladin_abilities.html
new file mode 100644
index 0000000..2506e5c
--- /dev/null
+++ b/cards/output/paladin_abilities.html
@@ -0,0 +1,639 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <style>
+ .flavour {
+ color: rgba(0,0,0,0.5);
+ padding: 35px;
+ font-size: 35px;
+ }
+ .flavour_wrapper {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ width: 100%;
+ text-align: center;
+ }
+ .action_detail {
+ padding-top: 0px;
+ text-align: left;
+ }
+ .symbol_wrapper_inner {
+ display: flex;
+ flex-direction: column;
+ gap: 5px;
+ }
+ .symbol_wrapper_outer {
+ display: flex;
+ gap: 20px;
+ }
+ .card_type {
+ background-color: antiquewhite;
+ text-align: center;
+ font-size: 40px;
+ padding: 10px;
+ -moz-border-radius: 15px 15px 0 0;
+ -webkit-border-radius: 15px 15px 0 0;
+ border-radius: 15px 15px 0 0;
+ font-weight: bold;
+ border-width: 2px 2px 0 2px;
+ border-color: black;
+ border-style: solid;
+ }
+ .icon {
+ display: inline-block;
+ padding: 8px 4px 0px 4px;
+ -moz-border-radius: 15px;
+ -webkit-border-radius: 15px;
+ border-radius: 15px;
+ aspect-ratio: 1/1;
+ font-size: 40px;
+ height: 52px;
+ width: 52px;
+ }
+ .face_icon {
+ background-color: black;
+ padding: 6px 3px 2px 5px;
+ }
+ .lesser_icon {
+ background-color: black;
+ padding: 12px 0px 0px 12px;
+ font-size: 30px;
+ height: 48px;
+ width: 48px;
+ }
+ .greater_icon {
+ background-color: black;
+ padding: 12px 0px 0px 12px;
+ font-size: 30px;
+ height: 48px;
+ width: 48px;
+ }
+ .even_icon {
+ background-color: black;
+ padding: 12px 0px 0px 12px;
+ font-size: 30px;
+ height: 48px;
+ width: 48px;
+ }
+ .odd_icon {
+ background-color: black;
+ padding: 12px 0px 0px 12px;
+ font-size: 30px;
+ height: 48px;
+ width: 48px;
+ }
+ .hearts_icon {
+ color: orangered;
+ }
+ .diamonds_icon {
+ color: orangered;
+ }
+ .clubs_icon {
+ color: antiquewhite;
+ }
+ .spades_icon {
+ color: antiquewhite;
+ }
+ .suit_icon {
+ background-color: black;
+ text-align: center;
+ font-size: 60px;
+ line-height: 40px;
+ }
+ .blood_icon {
+ background-color: black;
+ padding: 6px 3px 2px 5px;
+ }
+ .joker_icon {
+ background-color: black;
+ padding: 6px 3px 2px 5px;
+ }
+ .tap_icon {
+ background-color: black;
+ }
+ .content {
+ background-color: antiquewhite;
+ color: black;
+ flex: 5;
+ -moz-border-radius: 25px;
+ -webkit-border-radius: 25px;
+ border-radius: 25px;
+ overflow: hidden;
+ position: relative;
+ font-size: 50px;
+ display: flex;
+ justify-content: flex-start;
+ gap: 5px;
+ text-align: left;
+ padding: 35px 30px 30px 30px;
+ flex-direction: column;
+ border-width: 2px 2px 2px 2px;
+ border-color: black;
+ border-style: solid;
+ }
+ .attrib_bottom_icons {
+ bottom: 0;
+ }
+ .attrib_top_icons {
+ top: 0;
+ }
+ .attrib_bl {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ -moz-border-radius: 0 50px 0 0;
+ -webkit-border-radius: 0 50px 0 0;
+ border-radius: 0 50px 0 0;
+ border-color: rgba(255,255,255,0.50);
+ border-style: solid;
+ border-width: 5px 5px 0 0;
+ padding: 15px 25px 15px 15px;
+ }
+ .attrib_br {
+ position: absolute;
+ bottom: 0;
+ right: 0;
+ -moz-border-radius: 50px 0 0 0;
+ -webkit-border-radius: 50px 0 0 0;
+ border-radius: 50px 0 0 0;
+ border-color: rgba(255,255,255,0.50);
+ border-style: solid;
+ border-width: 5px 0 0 5px;
+ padding: 15px 15px 15px 25px;
+ }
+ .attrib_tr {
+ position: absolute;
+ top: 0;
+ right: 0;
+ -moz-border-radius: 0 0 0 50px;
+ -webkit-border-radius: 0 0 0 50px;
+ border-radius: 0 0 0 50px;
+ border-color: rgba(255,255,255,0.50);
+ border-style: solid;
+ border-width: 0 0 5px 5px;
+ padding: 15px 15px 15px 25px;
+ }
+ .attrib_tl {
+ position: absolute;
+ top: 0;
+ left: 0;
+ -moz-border-radius: 0 0 50px 0;
+ -webkit-border-radius: 0 0 50px 0;
+ border-radius: 0 0 50px 0;
+ border-color: rgba(255,255,255,0.50);
+ border-style: solid;
+ border-width: 0 5px 5px 0;
+ padding: 15px 25px 15px 15px;
+ }
+ .attrib_icon {
+ background-color: rgba(255,255,255,0.10);
+ }
+ .title {
+ background-color: black;
+ color: antiquewhite;
+ flex: 3;
+ -moz-border-radius: 25px;
+ -webkit-border-radius: 25px;
+ border-radius: 25px;
+ overflow: hidden;
+ position: relative;
+ font-size: 85px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ text-align: center;
+ flex-direction: column;
+ padding: 25px;
+ border-width: 2px 2px 2px 2px;
+ border-color: black;
+ border-style: solid;
+ }
+ .group {
+ margin: 50px 50px 0px 50px;
+ -moz-border-radius: 25px;
+ -webkit-border-radius: 25px;
+ border-radius: 25px;
+ display: flex;
+ flex-direction: column;
+ align-content: space-between;
+ height: auto;
+ flex: 2;
+ gap: 35px;
+ }
+ .card {
+ height: 1425px;
+ width: 825px;
+ background-color: black;
+ display: flex;
+ }
+ .card_wrapper {
+ min-height: 2850px;
+ width: 5775px;
+ display: flex;
+ flex-wrap: wrap;
+ height: 100%;
+ }
+ button {
+ font-size: 50px;
+ padding: 30px;
+ margin: 30px;
+ }
+ p {
+ margin: 0;
+ }
+ body {
+ background-color: #1e1e1e;
+ }
+ </style>
+ </head>
+ <button onclick="downloadAsImage()">
+ Download
+ </button>
+ <div id="card_wrapper" class="card_wrapper">
+ <div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, GoldenRod 100%)" class="card">
+ <div class="group">
+ <div class="title">
+ <p>
+ Duel
+ </p>
+ </div>
+ <div class="content">
+ <div class="action">
+ <div class="symbol_wrapper_outer">
+ <div class="symbol_wrapper_inner">
+ <span class="icon tap_icon">
+ ↪️
+ </span>
+ <span class="icon even_icon">
+ ⬜
+ </span>
+ </div>
+ <div class="action_detail">
+ <p>Pick a target. You and that target enter a duel where you and the target may not attack anyone other then each other. You cannot use this while in a duel.</p>
+ </div>
+ </div>
+ </div>
+ <div class="flavour_wrapper">
+ <div class="flavour">
+ <hr>
+ <p>“A famous commander’s signature thing.”</p>
+ </div>
+ </div>
+ </div>
+ <div class="card_type">
+ Paladin Ability
+ </div>
+ </div>
+ </div>
+ <div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, GoldenRod 100%)" class="card">
+ <div class="group">
+ <div class="title">
+ <p>
+ Leading Charge
+ </p>
+ </div>
+ <div class="content">
+ <div class="action">
+ <div class="symbol_wrapper_outer">
+ <div class="symbol_wrapper_inner">
+ <span class="icon tap_icon">
+ ↪️
+ </span>
+ <span class="icon lesser_icon">
+ 📣
+ </span>
+ <span class="icon face_icon">
+ 🎭
+ </span>
+ </div>
+ <div class="action_detail">
+ <p>When making an attack, <strong>mark the target</strong> and <strong>choose an ally</strong>. During <strong>the ally’s</strong> next turn: they <strong>gain an advatage</strong> for all attacks they do <strong>agaisnt the marked target</strong>.</p>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="card_type">
+ Paladin Ability
+ </div>
+ </div>
+ </div>
+ <div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, Maroon 100%)" class="card">
+ <div class="group">
+ <div class="title">
+ <p>
+ Duck and Weave
+ </p>
+ </div>
+ <div class="content">
+ <div class="action">
+ <div class="symbol_wrapper_outer">
+ <div class="symbol_wrapper_inner">
+ <span class="icon tap_icon">
+ ↪️
+ </span>
+ <span class="icon suit_icon diamonds_icon">
+ ♦️
+ </span>
+ </div>
+ <div class="action_detail">
+ <p>Ignore up to the card played worth of damage from a <strong>reposte</strong>.</p>
+ </div>
+ </div>
+ </div>
+ <div class="flavour_wrapper">
+ <div class="flavour">
+ <hr>
+ <p>“Missed me”</p>
+ </div>
+ </div>
+ </div>
+ <div class="card_type">
+ Rogue Ability
+ </div>
+ </div>
+ </div>
+ <div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, Maroon 100%)" class="card">
+ <div class="group">
+ <div class="title">
+ <p>
+ Surgical Strike
+ </p>
+ </div>
+ <div class="content">
+ <div class="action">
+ <div class="symbol_wrapper_outer">
+ <div class="symbol_wrapper_inner">
+ <span class="icon tap_icon">
+ ↪️
+ </span>
+ <span class="icon suit_icon spades_icon">
+ ♠️
+ </span>
+ </div>
+ <div class="action_detail">
+ <p>(less then 5) Replace a weapon’s damage with the value of the card played. Only affects the current attack.</p>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="card_type">
+ Rogue Ability
+ </div>
+ </div>
+ </div>
+ <div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, Maroon 100%)" class="card">
+ <div class="group">
+ <div class="title">
+ <p>
+ Down the Alleys
+ </p>
+ </div>
+ <div class="content">
+ <div class="action">
+ <div class="symbol_wrapper_outer">
+ <div class="symbol_wrapper_inner">
+ <span class="icon suit_icon diamonds_icon">
+ ♦️
+ </span>
+ </div>
+ <div class="action_detail">
+ <p>(odd) When travelling inside a settlement, after an encounter has been revealed: you may choose to either discard the encounter and draw another one or skip the encounter.</p>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="card_type">
+ Rogue Ability
+ </div>
+ </div>
+ </div>
+ <div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, ForestGreen 100%)" class="card">
+ <div class="group">
+ <div class="title">
+ <p>
+ Spot
+ </p>
+ </div>
+ <div class="content">
+ <div class="action">
+ <div class="symbol_wrapper_outer">
+ <div class="symbol_wrapper_inner">
+ <span class="icon suit_icon hearts_icon">
+ ♥️
+ </span>
+ </div>
+ <div class="action_detail">
+ <p>(face) Mark a target. Choose up to one dice to reroll on each attack agaisnt this target. You can only have one target marked at a time. Lasts until 3 rerolls or the end of combat.</p>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="card_type">
+ Ranger Ability
+ </div>
+ </div>
+ </div>
+ <div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, ForestGreen 100%)" class="card">
+ <div class="group">
+ <div class="title">
+ <p>
+ Flexible Shooter
+ </p>
+ </div>
+ <div class="content">
+ <div class="action">
+ <p>You can deal reposte damage with any ranged weapon.</p>
+ </div>
+ </div>
+ <div class="card_type">
+ Ranger Ability
+ </div>
+ </div>
+ </div>
+ <div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, ForestGreen 100%)" class="card">
+ <div class="group">
+ <div class="title">
+ <p>
+ Scouting Ahead
+ </p>
+ </div>
+ <div class="content">
+ <div class="action">
+ <div class="symbol_wrapper_outer">
+ <div class="symbol_wrapper_inner">
+ <span class="icon suit_icon diamonds_icon">
+ ♦️
+ </span>
+ </div>
+ <div class="action_detail">
+ <p>(even) When travelling outside of a settlement, before the next encounter: reveal 2 encounters and pick 1. Discard the other.</p>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="card_type">
+ Ranger Ability
+ </div>
+ </div>
+ </div>
+ <div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, ForestGreen 100%)" class="card">
+ <div class="group">
+ <div class="title">
+ <p>
+ Healing Salve Recipe
+ </p>
+ </div>
+ <div class="content">
+ <div class="action">
+ <div class="symbol_wrapper_outer">
+ <div class="symbol_wrapper_inner">
+ <span class="icon suit_icon diamonds_icon">
+ ♦️
+ </span>
+ <span class="icon suit_icon hearts_icon">
+ ♥️
+ </span>
+ </div>
+ <div class="action_detail">
+ <p>(each suit) Healberry Herb, Cloth.</p>
+ </div>
+ </div>
+ </div>
+ <div class="flavour_wrapper">
+ <div class="flavour">
+ <hr>
+ <p>“<em>Don’t</em> eat the berries”</p>
+ </div>
+ </div>
+ </div>
+ <div class="card_type">
+ Ranger Recipe
+ </div>
+ </div>
+ </div>
+ <div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, DodgerBlue 100%)" class="card">
+ <div class="group">
+ <div class="title">
+ <p>
+ Recast
+ </p>
+ </div>
+ <div class="content">
+ <div class="action">
+ <div class="symbol_wrapper_outer">
+ <div class="symbol_wrapper_inner">
+ <span class="icon tap_icon">
+ ↪️
+ </span>
+ <span class="icon suit_icon hearts_icon">
+ ♥️
+ </span>
+ </div>
+ <div class="action_detail">
+ <p>(less then or equal to your max blood roll) Replace the blood roll with the value of the card played and reroll any other associated dice with a spell you cast.</p>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="card_type">
+ Astrologist Ability
+ </div>
+ </div>
+ </div>
+ <div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, DodgerBlue 100%)" class="card">
+ <div class="group">
+ <div class="title">
+ <p>
+ Focused Cast
+ </p>
+ </div>
+ <div class="content">
+ <div class="action">
+ <div class="symbol_wrapper_outer">
+ <div class="symbol_wrapper_inner">
+ <span class="icon tap_icon">
+ ↪️
+ </span>
+ </div>
+ <div class="action_detail">
+ <p>Upgrade the blood dice for one spell you cast.</p>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="card_type">
+ Astrologist Ability
+ </div>
+ </div>
+ </div>
+ <div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, DodgerBlue 100%)" class="card">
+ <div class="group">
+ <div class="title">
+ <div class="attrib_icon attrib_tr">
+ 1 🩸
+ </div>
+ <p>
+ Change of Fate
+ </p>
+ </div>
+ <div class="content">
+ <div class="action">
+ <div class="symbol_wrapper_outer">
+ <div class="symbol_wrapper_inner">
+ <span class="icon blood_icon">
+ 🩸
+ </span>
+ </div>
+ <div class="action_detail">
+ <p>Swap 1 card with a willing player.</p>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="card_type">
+ Astrologist Ability
+ </div>
+ </div>
+ </div>
+ <div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, DodgerBlue 100%)" class="card">
+ <div class="group">
+ <div class="title">
+ <div class="attrib_icon attrib_tr">
+ 1 🩸
+ </div>
+ <p>
+ Palm Reading
+ </p>
+ </div>
+ <div class="content">
+ <div class="action">
+ <div class="symbol_wrapper_outer">
+ <div class="symbol_wrapper_inner">
+ <span class="icon blood_icon">
+ 🩸
+ </span>
+ </div>
+ <div class="action_detail">
+ <p>Discard a willing players hand and replace it with new cards drawn.</p>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="card_type">
+ Astrologist Ability
+ </div>
+ </div>
+ </div>
+ </div>
+ <script src="./web/bundle.js">
+ </script>
+ <script>
+ function downloadAsImage() {
+ htmlToImage.toPng(document.getElementById('card_wrapper'))
+ .then(function (dataUrl) {
+ download(dataUrl, 'card_wrapper.png');
+ });
+ }
+ </script>
+</html>
diff --git a/cards/output/rare_weapons.html b/cards/output/rare_weapons.html
new file mode 100644
index 0000000..76db3a3
--- /dev/null
+++ b/cards/output/rare_weapons.html
@@ -0,0 +1,512 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <style>
+ .flavour {
+ color: rgba(0,0,0,0.5);
+ padding: 35px;
+ font-size: 35px;
+ }
+ .flavour_wrapper {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ width: 100%;
+ text-align: center;
+ }
+ .action_detail {
+ padding-top: 0px;
+ text-align: left;
+ }
+ .symbol_wrapper_inner {
+ display: flex;
+ flex-direction: column;
+ gap: 5px;
+ }
+ .symbol_wrapper_outer {
+ display: flex;
+ gap: 20px;
+ }
+ .card_type {
+ background-color: antiquewhite;
+ text-align: center;
+ font-size: 40px;
+ padding: 10px;
+ -moz-border-radius: 15px 15px 0 0;
+ -webkit-border-radius: 15px 15px 0 0;
+ border-radius: 15px 15px 0 0;
+ font-weight: bold;
+ border-width: 2px 2px 0 2px;
+ border-color: black;
+ border-style: solid;
+ }
+ .icon {
+ display: inline-block;
+ padding: 8px 4px 0px 4px;
+ -moz-border-radius: 15px;
+ -webkit-border-radius: 15px;
+ border-radius: 15px;
+ aspect-ratio: 1/1;
+ font-size: 40px;
+ height: 52px;
+ width: 52px;
+ }
+ .face_icon {
+ background-color: black;
+ padding: 6px 3px 2px 5px;
+ }
+ .lesser_icon {
+ background-color: black;
+ padding: 12px 0px 0px 12px;
+ font-size: 30px;
+ height: 48px;
+ width: 48px;
+ }
+ .greater_icon {
+ background-color: black;
+ padding: 12px 0px 0px 12px;
+ font-size: 30px;
+ height: 48px;
+ width: 48px;
+ }
+ .even_icon {
+ background-color: black;
+ padding: 12px 0px 0px 12px;
+ font-size: 30px;
+ height: 48px;
+ width: 48px;
+ }
+ .odd_icon {
+ background-color: black;
+ padding: 12px 0px 0px 12px;
+ font-size: 30px;
+ height: 48px;
+ width: 48px;
+ }
+ .hearts_icon {
+ color: orangered;
+ }
+ .diamonds_icon {
+ color: orangered;
+ }
+ .clubs_icon {
+ color: antiquewhite;
+ }
+ .spades_icon {
+ color: antiquewhite;
+ }
+ .suit_icon {
+ background-color: black;
+ text-align: center;
+ font-size: 60px;
+ line-height: 40px;
+ }
+ .blood_icon {
+ background-color: black;
+ padding: 6px 3px 2px 5px;
+ }
+ .joker_icon {
+ background-color: black;
+ padding: 6px 3px 2px 5px;
+ }
+ .tap_icon {
+ background-color: black;
+ }
+ .content {
+ background-color: antiquewhite;
+ color: black;
+ flex: 5;
+ -moz-border-radius: 25px;
+ -webkit-border-radius: 25px;
+ border-radius: 25px;
+ overflow: hidden;
+ position: relative;
+ font-size: 50px;
+ display: flex;
+ justify-content: flex-start;
+ gap: 5px;
+ text-align: left;
+ padding: 35px 30px 30px 30px;
+ flex-direction: column;
+ border-width: 2px 2px 2px 2px;
+ border-color: black;
+ border-style: solid;
+ }
+ .attrib_bottom_icons {
+ bottom: 0;
+ }
+ .attrib_top_icons {
+ top: 0;
+ }
+ .attrib_bl {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ -moz-border-radius: 0 50px 0 0;
+ -webkit-border-radius: 0 50px 0 0;
+ border-radius: 0 50px 0 0;
+ border-color: rgba(255,255,255,0.50);
+ border-style: solid;
+ border-width: 5px 5px 0 0;
+ padding: 15px 25px 15px 15px;
+ }
+ .attrib_br {
+ position: absolute;
+ bottom: 0;
+ right: 0;
+ -moz-border-radius: 50px 0 0 0;
+ -webkit-border-radius: 50px 0 0 0;
+ border-radius: 50px 0 0 0;
+ border-color: rgba(255,255,255,0.50);
+ border-style: solid;
+ border-width: 5px 0 0 5px;
+ padding: 15px 15px 15px 25px;
+ }
+ .attrib_tr {
+ position: absolute;
+ top: 0;
+ right: 0;
+ -moz-border-radius: 0 0 0 50px;
+ -webkit-border-radius: 0 0 0 50px;
+ border-radius: 0 0 0 50px;
+ border-color: rgba(255,255,255,0.50);
+ border-style: solid;
+ border-width: 0 0 5px 5px;
+ padding: 15px 15px 15px 25px;
+ }
+ .attrib_tl {
+ position: absolute;
+ top: 0;
+ left: 0;
+ -moz-border-radius: 0 0 50px 0;
+ -webkit-border-radius: 0 0 50px 0;
+ border-radius: 0 0 50px 0;
+ border-color: rgba(255,255,255,0.50);
+ border-style: solid;
+ border-width: 0 5px 5px 0;
+ padding: 15px 25px 15px 15px;
+ }
+ .attrib_icon {
+ background-color: rgba(255,255,255,0.10);
+ }
+ .title {
+ background-color: black;
+ color: antiquewhite;
+ flex: 3;
+ -moz-border-radius: 25px;
+ -webkit-border-radius: 25px;
+ border-radius: 25px;
+ overflow: hidden;
+ position: relative;
+ font-size: 85px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ text-align: center;
+ flex-direction: column;
+ padding: 25px;
+ border-width: 2px 2px 2px 2px;
+ border-color: black;
+ border-style: solid;
+ }
+ .group {
+ margin: 50px 50px 0px 50px;
+ -moz-border-radius: 25px;
+ -webkit-border-radius: 25px;
+ border-radius: 25px;
+ display: flex;
+ flex-direction: column;
+ align-content: space-between;
+ height: auto;
+ flex: 2;
+ gap: 35px;
+ }
+ .card {
+ height: 1425px;
+ width: 825px;
+ background-color: black;
+ display: flex;
+ }
+ .card_wrapper {
+ min-height: 2850px;
+ width: 5775px;
+ display: flex;
+ flex-wrap: wrap;
+ height: 100%;
+ }
+ button {
+ font-size: 50px;
+ padding: 30px;
+ margin: 30px;
+ }
+ p {
+ margin: 0;
+ }
+ body {
+ background-color: #1e1e1e;
+ }
+ </style>
+ </head>
+ <button onclick="downloadAsImage()">
+ Download
+ </button>
+ <div id="card_wrapper" class="card_wrapper">
+ <div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, rebeccapurple 100%)" class="card">
+ <div class="group">
+ <div class="title">
+ <p>
+ Glaive
+ </p>
+ <div class="attrib_icon attrib_bl">
+ ⚔️ 4
+ </div>
+ <div class="attrib_icon attrib_br">
+ Prc 🛡️
+ </div>
+ </div>
+ <div class="content">
+ <div class="action">
+ <div class="symbol_wrapper_outer">
+ <div class="symbol_wrapper_inner">
+ <span class="icon tap_icon">
+ ↪️
+ </span>
+ </div>
+ <div class="action_detail">
+ <p>🎲 <strong>d6 · Str</strong> to Slash.</p>
+ </div>
+ </div>
+ </div>
+ <div class="action">
+ <div class="symbol_wrapper_outer">
+ <div class="symbol_wrapper_inner">
+ <span style="visibility: hidden;" class="icon lesser_icon">
+ 🈷️
+ </span>
+ </div>
+ <div class="action_detail">
+ <p><strong>Reach</strong>, <strong>Heavy</strong></p>
+ </div>
+ </div>
+ </div>
+ <div class="flavour_wrapper">
+ <div class="flavour">
+ <hr>
+ <p>“Getting up close and personal while staying far away”</p>
+ </div>
+ </div>
+ </div>
+ <div class="card_type">
+ Polearm Weapon
+ </div>
+ </div>
+ </div>
+ <div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, rebeccapurple 100%)" class="card">
+ <div class="group">
+ <div class="title">
+ <p>
+ Twinblade
+ </p>
+ <div class="attrib_icon attrib_bl">
+ ⚔️ 3
+ </div>
+ <div class="attrib_icon attrib_br">
+ Prc 🛡️
+ </div>
+ </div>
+ <div class="content">
+ <div class="action">
+ <div class="symbol_wrapper_outer">
+ <div class="symbol_wrapper_inner">
+ <span class="icon tap_icon">
+ ↪️
+ </span>
+ </div>
+ <div class="action_detail">
+ <p>🎲 <strong>d4 + Prc</strong> to Slash.</p>
+ </div>
+ </div>
+ </div>
+ <div class="action">
+ <hr>
+ <div class="symbol_wrapper_outer">
+ <div class="symbol_wrapper_inner">
+ <span class="icon tap_icon">
+ ↪️
+ </span>
+ </div>
+ <div class="action_detail">
+ <p>🎲 <strong>d6 + Prc</strong> to Slash.</p>
+ </div>
+ </div>
+ </div>
+ <div class="action">
+ <p><strong>Heavy</strong></p>
+ </div>
+ <div class="flavour_wrapper">
+ <div class="flavour">
+ <hr>
+ <p>“Says ‘Made by the Ninja Custodial Group’ on the handle”</p>
+ </div>
+ </div>
+ </div>
+ <div class="card_type">
+ Staff Weapon
+ </div>
+ </div>
+ </div>
+ <div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, rebeccapurple 100%)" class="card">
+ <div class="group">
+ <div class="title">
+ <p>
+ Forked Sword
+ </p>
+ <div class="attrib_icon attrib_bl">
+ ⚔️ 3
+ </div>
+ <div class="attrib_icon attrib_br">
+ Str 🛡️
+ </div>
+ </div>
+ <div class="content">
+ <div class="action">
+ <div class="symbol_wrapper_outer">
+ <div class="symbol_wrapper_inner">
+ <span class="icon tap_icon">
+ ↪️
+ </span>
+ </div>
+ <div class="action_detail">
+ <p>🎲 <strong>d6 + Str</strong> to Pierce.</p>
+ </div>
+ </div>
+ </div>
+ <div class="action">
+ <div class="symbol_wrapper_outer">
+ <div class="symbol_wrapper_inner">
+ <span style="visibility: hidden;" class="icon lesser_icon">
+ 🈷️
+ </span>
+ </div>
+ <div class="action_detail">
+ <p>You can use the ‘Cast a spell’ ability as a part of this action.</p>
+ </div>
+ </div>
+ </div>
+ <div class="action">
+ <hr>
+ <div class="symbol_wrapper_outer">
+ <div class="symbol_wrapper_inner">
+ <span class="icon tap_icon">
+ ↪️
+ </span>
+ </div>
+ <div class="action_detail">
+ <p>Cast a <strong>Blood Magic Spell</strong></p>
+ </div>
+ </div>
+ </div>
+ <div class="flavour_wrapper">
+ <div class="flavour">
+ <hr>
+ <p>“Weapon used in the war against the gods. Vintage!”</p>
+ </div>
+ </div>
+ </div>
+ <div class="card_type">
+ Forked Sword Weapon
+ </div>
+ </div>
+ </div>
+ <div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, rebeccapurple 100%)" class="card">
+ <div class="group">
+ <div class="title">
+ <p>
+ Tower Shield
+ </p>
+ </div>
+ <div class="content">
+ <div class="action">
+ <div class="symbol_wrapper_outer">
+ <div class="symbol_wrapper_inner">
+ <span class="icon tap_icon">
+ ↪️
+ </span>
+ <span class="icon lesser_icon">
+ 📣
+ </span>
+ </div>
+ <div class="action_detail">
+ <p>When <strong>targeted with a weapon:</strong> your attacker recieves <strong>2 disadvantage</strong> on their action.</p>
+ </div>
+ </div>
+ </div>
+ <div class="action">
+ <div class="symbol_wrapper_outer">
+ <div class="symbol_wrapper_inner">
+ <span style="visibility: hidden;" class="icon lesser_icon">
+ 🈷️
+ </span>
+ </div>
+ <div class="action_detail">
+ <p><strong>Heavy</strong>.</p>
+ </div>
+ </div>
+ </div>
+ <div class="action">
+ <hr>
+ <p>You can act as cover for another character.</p>
+ </div>
+ <div class="action">
+ <p><strong>Heavy</strong>.</p>
+ </div>
+ <div class="flavour_wrapper">
+ <div class="flavour">
+ <hr>
+ <p>“Looks great with a flannel shirt.”</p>
+ </div>
+ </div>
+ </div>
+ <div class="card_type">
+ Shield Weapon
+ </div>
+ </div>
+ </div>
+ <div style="background:linear-gradient(225deg, rgba(0,0,0,1) -50%, DarkBlue 100%)" class="card">
+ <div class="group">
+ <div class="title">
+ <div class="attrib_icon attrib_tl">
+ 🎲 1d8
+ </div>
+ <p>
+ Caster&#39;s Glove
+ </p>
+ </div>
+ <div class="content">
+ <div class="action">
+ <p><strong>Casting Focus</strong></p>
+ </div>
+ <div class="flavour_wrapper">
+ <div class="flavour">
+ <hr>
+ <p>“Modern casting tool that works by directly drawing your blood”</p>
+ </div>
+ </div>
+ </div>
+ <div class="card_type">
+ Magic Casting Tool
+ </div>
+ </div>
+ </div>
+ </div>
+ <script src="./web/bundle.js">
+ </script>
+ <script>
+ function downloadAsImage() {
+ htmlToImage.toPng(document.getElementById('card_wrapper'))
+ .then(function (dataUrl) {
+ download(dataUrl, 'card_wrapper.png');
+ });
+ }
+ </script>
+</html>
generated by cgit v1.2.3 (git 2.39.1) at 2026-04-14 17:03:28 +0000