summaryrefslogtreecommitdiffhomepage
path: root/cards/card.html
diff options
context:
space:
mode:
Diffstat (limited to 'cards/card.html')
-rw-r--r--cards/card.html857
1 files changed, 0 insertions, 857 deletions
diff --git a/cards/card.html b/cards/card.html
deleted file mode 100644
index 764fe1d..0000000
--- a/cards/card.html
+++ /dev/null
@@ -1,857 +0,0 @@
-<!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;
- }
- .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>
- Thrusting Sword
- </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>d8 + Prc</strong> to hit.</p>
- </div>
- </div>
- </div>
- <div class="action">
- <hr>
- <p><strong>Opportune Strike</strong>: When targeting an enemy with this weapon, mark them until the end of their turn. While marked if they attack somone other then you then you can perform a reposte on them.</p>
- </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>
- Polearm
- </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">
- <hr>
- <p><strong>Reach</strong>: When making an attack, you ignore repostes from your target unless they also have Reach.</p>
- </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>
- 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>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 spades_icon">
- ♠️
- </span>
- </div>
- <div class="action_detail">
- <p>(even) <strong>Swift Attack</strong>: Refresh this card.</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>
- Bow
- </p>
- <div class="attrib_icon attrib_bl">
- ⚔️ 3
- </div>
- <div class="attrib_icon attrib_br">
- 1 🎲
- </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 + (2·Prc)</strong> to hit.</p>
- </div>
- </div>
- </div>
- <div class="action">
- <hr>
- <p><strong>Ranged</strong>: When making an attack, you ignore repostes from your target. You can’t deal a reposte either.</p>
- </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">
- ⚔️ 4
- </div>
- <div class="attrib_icon attrib_br">
- 1 🎲
- </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>(must be loaded) 🎲 <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>
- </div>
- <div class="action_detail">
- <p><strong>Reload</strong>: Load this weapon.</p>
- </div>
- </div>
- </div>
- <div class="action">
- <hr>
- <p><strong>Ranged</strong>: When making an attack, you ignore repostes from your target. You can’t deal a reposte either.</p>
- </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>
- Hammer
- </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">
- <hr>
- <div class="symbol_wrapper_outer">
- <div class="symbol_wrapper_inner">
- <span class="icon tap_icon">
- ↪️
- </span>
- </div>
- <div class="action_detail">
- <p><strong>Power Swing</strong>: 🎲 <strong>d4 + Str</strong> to hit. Deal <strong>Str + 2</strong> damage.</p>
- </div>
- </div>
- </div>
- <div class="flavour_wrapper">
- <div class="flavour">
- <hr>
- <p>“If you can pick it up, then you are worthy enough to use it.”</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>
- Straight 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">
- <hr>
- <div class="symbol_wrapper_outer">
- <div class="symbol_wrapper_inner">
- <span class="icon tap_icon">
- ↪️
- </span>
- </div>
- <div class="action_detail">
- <p>(Two Handed) 🎲 <strong>d6 + Str</strong> to hit. Deal <strong>Str</strong> damage.</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">
- ⚔️ 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="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>Throw</strong>: 🎲 <strong>d6 + Str</strong> to hit. This attack is <strong>Ranged</strong> and thus you ignore repostes from your target. You lose this weapon by using this attack.</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 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>
- </div>
- <div class="action_detail">
- <p>(Two Handed) 🎲 <strong>d8 + Str</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 spades_icon">
- ♠️
- </span>
- </div>
- <div class="action_detail">
- <p>(odd) <strong>Swift Attack</strong>: Refresh this card.</p>
- </div>
- </div>
- </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>
- Curved Sword
- </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 hit.</p>
- </div>
- </div>
- </div>
- <div class="action">
- <hr>
- <div class="symbol_wrapper_outer">
- <div class="symbol_wrapper_inner">
- <span class="icon suit_icon spades_icon">
- ♠️
- </span>
- </div>
- <div class="action_detail">
- <p>(odd, recieving a reposte) <strong>Close Quarters</strong>: Deal damage equal to your reposte.</p>
- </div>
- </div>
- </div>
- <div class="flavour_wrapper">
- <div class="flavour">
- <hr>
- <p>“Arrrgh”</p>
- </div>
- </div>
- </div>
- <div class="card_type">
- Curved Sword 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%, rebeccapurple 100%)" class="card">
- <div class="group">
- <div class="title">
- <p>
- Test Weapon
- </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 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>“Arrrgh”</p>
- </div>
- </div>
- </div>
- <div class="card_type">
- Curved Sword 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>
generated by cgit v1.2.3 (git 2.39.1) at 2026-04-14 16:45:54 +0000