summaryrefslogtreecommitdiffhomepage
path: root/cards/beginner_spells.html
diff options
context:
space:
mode:
Diffstat (limited to 'cards/beginner_spells.html')
-rw-r--r--cards/beginner_spells.html420
1 files changed, 420 insertions, 0 deletions
diff --git a/cards/beginner_spells.html b/cards/beginner_spells.html
new file mode 100644
index 0000000..7de8bd0
--- /dev/null
+++ b/cards/beginner_spells.html
@@ -0,0 +1,420 @@
+<!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;
+ }
+ .face_icon {
+ color: white;
+ display: inline-block;
+ padding: 4px;
+ height: 62px;
+ min-width: 62px;
+ font-size: 55px;
+ -moz-border-radius: 15px;
+ -webkit-border-radius: 15px;
+ border-radius: 15px;
+ background-color: black;
+ }
+ .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;
+ }
+ .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>
+ Wispy Flame
+ </p>
+ <div class="attrib_icon attrib_bl">
+ ⚔️ d4
+ </div>
+ </div>
+ <div class="content">
+ <div class="action">
+ <div class="symbol_wrapper_outer">
+ <div class="symbol_wrapper_inner">
+ <span class="icon suit_icon clubs_icon">
+ ♣️
+ </span>
+ <span class="icon blood_icon">
+ 🩸
+ </span>
+ </div>
+ <div class="action_detail">
+ <p>(<strong>even</strong>) Engulf your hand in flames for short while. You need to maintain concentration.</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>while concentrating</strong>) Deal melee damage. If it is a small object set it on fire.</p>
+ </div>
+ </div>
+ </div>
+ <div class="flavour_wrapper">
+ <div class="flavour">
+ <hr>
+ <p>“Portable Candle”</p>
+ </div>
+ </div>
+ </div>
+ <div class="card_type">
+ Blood Magic (Igneous)
+ </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>
+ Summon Flesh
+ </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>
+ <span class="icon blood_icon">
+ 🩸
+ </span>
+ </div>
+ <div class="action_detail">
+ <p>(<strong>5 or less</strong>) Heal a target within arms reach equal to the card played.</p>
+ </div>
+ </div>
+ </div>
+ <div class="action">
+ <hr>
+ <p>If this spell heals for more then half of the target’s max health then they get flesh mass disease.</p>
+ </div>
+ <div class="flavour_wrapper">
+ <div class="flavour">
+ <hr>
+ <p>“Writhing flesh mass that assimilates”</p>
+ </div>
+ </div>
+ </div>
+ <div class="card_type">
+ Blood Magic (Eldritch)
+ </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>
+ Lightning Fork
+ </p>
+ <div class="attrib_icon attrib_bl">
+ ⚔️ 2d4
+ </div>
+ </div>
+ <div class="content">
+ <div class="action">
+ <div class="symbol_wrapper_outer">
+ <div class="symbol_wrapper_inner">
+ <span class="icon suit_icon clubs_icon">
+ ♣️
+ </span>
+ <span class="icon blood_icon">
+ 🩸
+ </span>
+ </div>
+ <div class="action_detail">
+ <p>(<strong>even</strong>) Deal 1d4 damage to one target and 1d4 to another.</p>
+ </div>
+ </div>
+ </div>
+ <div class="flavour_wrapper">
+ <div class="flavour">
+ <hr>
+ <p>“Double the static, double the fun!”</p>
+ </div>
+ </div>
+ </div>
+ <div class="card_type">
+ Blood Magic (Storm)
+ </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>
+ Summon Alchemicals
+ </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 blood_icon">
+ 🩸
+ </span>
+ </div>
+ <div class="action_detail">
+ <p>(<strong>odd</strong>) Summon a random amount of a random alchemical depending on the card played and the number rolled for blood.</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>
generated by cgit v1.2.3 (git 2.39.1) at 2026-04-14 12:20:49 +0000