2023-04-11 17:11:02 +00:00
|
|
|
<!DOCTYPE html>
|
2023-04-14 00:47:12 +00:00
|
|
|
<html lang="en">
|
2023-04-11 17:11:02 +00:00
|
|
|
<head>
|
2023-04-14 00:47:12 +00:00
|
|
|
<title>Character Sheet - SotSA</title>
|
2023-04-11 17:11:02 +00:00
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
2023-04-13 15:19:11 +00:00
|
|
|
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
|
2023-04-13 20:16:38 +00:00
|
|
|
<link rel="stylesheet" href="sheet.css">
|
2023-04-14 03:42:08 +00:00
|
|
|
<script src="utils.js" type="module"></script>
|
2023-04-17 00:40:19 +00:00
|
|
|
<script src="songs-meta.js" type="module"></script>
|
|
|
|
|
<script src="songs.js" type="module"></script>
|
2023-04-11 17:11:02 +00:00
|
|
|
</head>
|
2023-04-17 05:07:49 +00:00
|
|
|
<body style="padding: 0px;">
|
|
|
|
|
<header class="w3-black w3-bar w3-top">
|
|
|
|
|
<nav class="w3-large w3-bar flex" style="align-items: center; justify-content: center;">
|
2023-04-17 05:08:55 +00:00
|
|
|
<a class="w3-bar-item w3-mobile w3-button" href="index.html" aria-current="true">Character Sheet</a>
|
2023-04-17 05:07:49 +00:00
|
|
|
<a class="w3-bar-item w3-mobile w3-button" href="settings.html" aria-current="true">Settings</a>
|
|
|
|
|
<a class="w3-bar-item w3-mobile w3-button" href="focus.html" aria-current="true">Focus Mode</a>
|
|
|
|
|
</nav>
|
|
|
|
|
</header>
|
2023-04-14 02:16:43 +00:00
|
|
|
<main>
|
2023-04-17 05:24:34 +00:00
|
|
|
<div class="w3-large w3-bar flex hidden">
|
|
|
|
|
<a class="w3-bar-item w3-mobile w3-button">♥</a>
|
|
|
|
|
<a class="w3-bar-item w3-mobile w3-button">♥</a>
|
|
|
|
|
<a class="w3-bar-item w3-mobile w3-button">♥</a>
|
|
|
|
|
</div>
|
2023-04-14 02:43:10 +00:00
|
|
|
<form id="character-data" style="display: contents;">
|
2023-04-14 02:16:43 +00:00
|
|
|
<div class="page w3-container w3-card-4 w3-padding-16">
|
|
|
|
|
<h1 class="w3-center">Songs of the Second Age: Character Sheet</h1>
|
2023-04-14 02:43:10 +00:00
|
|
|
<div class="page-data w3-container">
|
|
|
|
|
<section class="mobile grid" style="grid-template-columns: auto auto auto;">
|
2023-04-14 02:16:43 +00:00
|
|
|
<label>Player<input id="player" name="player" type="text"></label>
|
|
|
|
|
<label>Name<input id="name" name="name" type="text"></label>
|
|
|
|
|
<label>Level<input id="level" name="level" type="number"></label>
|
|
|
|
|
<label>Species<input id="species" name="species" type="text"></label>
|
|
|
|
|
<label>Background<input id="background" name="background" type="text"></label>
|
|
|
|
|
<label>Class<input id="class" name="class" type="text"></label>
|
2023-04-14 02:43:10 +00:00
|
|
|
</section>
|
|
|
|
|
<section class="mobile grid" style="grid-template-columns: auto auto;">
|
2023-04-14 02:16:43 +00:00
|
|
|
<label>Health<input id="health" name="health" type="number"></label>
|
|
|
|
|
<label>Stamina<input id="stamina" name="stamina" type="number"></label>
|
|
|
|
|
<div class="grid" style="grid-column: 1 / span 2; grid-template-columns: auto auto auto auto auto;">
|
|
|
|
|
<label>Deathrolls</label>
|
|
|
|
|
<label>W<input id="deathroll-w" name="deathroll-w" type="checkbox"></label>
|
|
|
|
|
<label>S<input id="deathroll-s" name="deathroll-s" type="checkbox"></label>
|
|
|
|
|
<label>D<input id="deathroll-d" name="deathroll-d" type="checkbox"></label>
|
|
|
|
|
<label>I<input id="deathroll-i" name="deathroll-i" type="checkbox"></label>
|
|
|
|
|
</div>
|
2023-04-14 02:43:10 +00:00
|
|
|
</section>
|
|
|
|
|
<section class="mobile grid" style="grid-template-columns: repeat(6, calc((100% / 6) - 10px));">
|
2023-04-14 02:16:43 +00:00
|
|
|
<label style="flex-direction: column;"><p><u>Str</u>ength</p><input id="str" name="str" type="number"></label>
|
|
|
|
|
<label style="flex-direction: column;"><p><u>End</u>urance</p><input id="end" name="end" type="number"></label>
|
|
|
|
|
<label style="flex-direction: column;"><p><u>Agi</u>lity</p><input id="agi" name="agi" type="number"></label>
|
|
|
|
|
<label style="flex-direction: column;"><p><u>Wit</u>s</p><input id="wit" name="wit" type="number"></label>
|
|
|
|
|
<label style="flex-direction: column;"><p><u>Int</u>elligence</p><input id="int" name="int" type="number"></label>
|
|
|
|
|
<label style="flex-direction: column;"><p><u>Cha</u>risma</p><input id="cha" name="cha" type="number"></label>
|
2023-04-14 02:43:10 +00:00
|
|
|
</section>
|
|
|
|
|
<section class="mobile grid" style="grid-template-columns: repeat(6, calc((100% / 6) - 10px));">
|
2023-04-14 02:16:43 +00:00
|
|
|
<label style="flex-direction: column;">Armor<input id="armor" name="armor" type="number"></label>
|
|
|
|
|
<label style="flex-direction: column;">Soak<input id="soak" name="soak" type="number"></label>
|
|
|
|
|
<label style="flex-direction: column;">Speed<input id="speed" name="speed" type="number"></label>
|
|
|
|
|
<label style="flex-direction: column;">Initiative<input id="initiative" name="initiative" type="number"></label>
|
|
|
|
|
<label style="flex-direction: column;">Mastery<input id="mastery" name="mastery" type="number"></label>
|
|
|
|
|
<label for="bulk" style="flex-direction: column;">Bulk
|
|
|
|
|
<div class="flex" style="flex-wrap: nowrap;">
|
|
|
|
|
<input id="bulk" name="bulk" type="number">
|
|
|
|
|
<p>/</p>
|
2023-04-14 05:56:55 +00:00
|
|
|
<input aria-label="Max Bulk" id="max-bulk" name="max-bulk" type="number">
|
2023-04-14 02:16:43 +00:00
|
|
|
</div>
|
|
|
|
|
</label>
|
2023-04-14 02:43:10 +00:00
|
|
|
</section>
|
|
|
|
|
<section class="grid mobile" style="grid-template-columns: 1fr auto 1fr; align-items: start;">
|
2023-04-14 02:16:43 +00:00
|
|
|
<div class="grid" style="grid-template-columns: auto auto auto auto;" id="combat-modifiers"></div>
|
|
|
|
|
<hr>
|
|
|
|
|
<div class="grid" style="grid-template-columns: auto auto auto auto;" id="rp-modifiers"></div>
|
2023-04-14 02:43:10 +00:00
|
|
|
</section>
|
|
|
|
|
<section class="grow-wrap">
|
|
|
|
|
<textarea id="notes" name="notes" placeholder="Notes" onInput="this.parentNode.dataset.replicatedValue = this.value"></textarea>
|
|
|
|
|
</section>
|
|
|
|
|
</div>
|
2023-04-14 02:16:43 +00:00
|
|
|
</div>
|
|
|
|
|
<div class="page w3-container w3-card-4 w3-padding-16">
|
|
|
|
|
<h2 class="w3-center">Character Features</h2>
|
2023-04-17 05:24:34 +00:00
|
|
|
<section class="mobile grid" id="features" style="grid-template-columns: auto auto 1fr; column-gap: 20px; padding: 0px 16px;"></section>
|
2023-04-14 02:16:43 +00:00
|
|
|
</div>
|
2023-04-14 05:56:55 +00:00
|
|
|
<div class="page w3-container w3-card-4 w3-padding-16" style="padding-left: 32px; padding-right: 32px;">
|
|
|
|
|
<h2 class="w3-center">Character Inventory</h2>
|
|
|
|
|
<section class="mobile grid" style="grid-template-columns: 1fr auto 1fr; align-items: start;">
|
|
|
|
|
<div class="grid" style="grid-template-columns: auto auto;">
|
|
|
|
|
<p style="grid-column: 1 / span 2;">Armor & Apparel</p>
|
|
|
|
|
<p>Name</p>
|
|
|
|
|
<p>Properties</p>
|
|
|
|
|
<input aria-label="Armor 1 Name" id="armor-1-name" name="armor-1-name" type="text">
|
|
|
|
|
<input aria-label="Armor 1 Info" id="armor-1-info" name="armor-1-info" type="text">
|
|
|
|
|
<input aria-label="Armor 2 Name" id="armor-2-name" name="armor-2-name" type="text">
|
|
|
|
|
<input aria-label="Armor 2 Info" id="armor-2-info" name="armor-2-info" type="text">
|
|
|
|
|
<input aria-label="Armor 3 Name" id="armor-3-name" name="armor-3-name" type="text">
|
|
|
|
|
<input aria-label="Armor 3 Info" id="armor-3-info" name="armor-3-info" type="text">
|
|
|
|
|
<input aria-label="Armor 4 Name" id="armor-4-name" name="armor-4-name" type="text">
|
|
|
|
|
<input aria-label="Armor 4 Info" id="armor-4-info" name="armor-4-info" type="text">
|
|
|
|
|
</div>
|
|
|
|
|
<hr>
|
|
|
|
|
<div class="grid" style="grid-template-columns: auto auto;">
|
|
|
|
|
<label for="money">Money</label>
|
|
|
|
|
<input id="money" name="money" type="number">
|
|
|
|
|
<p>Incomes</p>
|
|
|
|
|
<p>Debts</p>
|
|
|
|
|
<input aria-label="Income 1" id="incomes-1" name="incomes-1" type="text">
|
|
|
|
|
<input aria-label="Debt 1" id="debts-1" name="debts-1" type="text">
|
|
|
|
|
<input aria-label="Income 2" id="incomes-2" name="incomes-2" type="text">
|
|
|
|
|
<input aria-label="Debt 2" id="debts-2" name="debts-2" type="text">
|
|
|
|
|
<input aria-label="Income 3" id="incomes-3" name="incomes-3" type="text">
|
|
|
|
|
<input aria-label="Debt 3" id="debts-3" name="debts-3" type="text">
|
|
|
|
|
<input aria-label="Income 4" id="incomes-4" name="incomes-4" type="text">
|
|
|
|
|
<input aria-label="Debt 4" id="debts-4" name="debts-4" type="text">
|
|
|
|
|
</div>
|
|
|
|
|
</section>
|
2023-04-14 06:43:47 +00:00
|
|
|
<section class="mobile grid" style="grid-template-columns: auto auto auto auto;">
|
2023-04-14 05:56:55 +00:00
|
|
|
<p style="grid-column: 1 / span 4;">Weapons</p>
|
|
|
|
|
<p>Name</p>
|
|
|
|
|
<p>Attack Bonus</p>
|
|
|
|
|
<p>Damage (Type)</p>
|
|
|
|
|
<p>Properties</p>
|
|
|
|
|
<input aria-label="Weapon 1 Name" id="weapons-1-name" name="weapons-1-name" type="text">
|
|
|
|
|
<input aria-label="Weapon 1 Attack Bonus" id="weapons-1-atkbonus" name="weapons-1-atkbonus" type="text">
|
|
|
|
|
<input aria-label="Weapon 1 Damage" id="weapons-1-damage" name="weapons-1-damage" type="text">
|
|
|
|
|
<input aria-label="Weapon 1 Properties" id="weapons-1-properties" name="weapons-1-properties" type="text">
|
|
|
|
|
<input aria-label="Weapon 2 Name" id="weapons-2-name" name="weapons-2-name" type="text">
|
|
|
|
|
<input aria-label="Weapon 2 Attack Bonus" id="weapons-2-atkbonus" name="weapons-2-atkbonus" type="text">
|
|
|
|
|
<input aria-label="Weapon 2 Damage" id="weapons-2-damage" name="weapons-2-damage" type="text">
|
|
|
|
|
<input aria-label="Weapon 2 Properties" id="weapons-2-properties" name="weapons-2-properties" type="text">
|
|
|
|
|
<input aria-label="Weapon 3 Name" id="weapons-3-name" name="weapons-3-name" type="text">
|
|
|
|
|
<input aria-label="Weapon 3 Attack Bonus" id="weapons-3-atkbonus" name="weapons-3-atkbonus" type="text">
|
|
|
|
|
<input aria-label="Weapon 3 Damage" id="weapons-3-damage" name="weapons-3-damage" type="text">
|
|
|
|
|
<input aria-label="Weapon 3 Properties" id="weapons-3-properties" name="weapons-3-properties" type="text">
|
|
|
|
|
<input aria-label="Weapon 4 Name" id="weapons-4-name" name="weapons-4-name" type="text">
|
|
|
|
|
<input aria-label="Weapon 4 Attack Bonus" id="weapons-4-atkbonus" name="weapons-4-atkbonus" type="text">
|
|
|
|
|
<input aria-label="Weapon 4 Damage" id="weapons-4-damage" name="weapons-4-damage" type="text">
|
|
|
|
|
<input aria-label="Weapon 4 Properties" id="weapons-4-properties" name="weapons-4-properties" type="text">
|
|
|
|
|
</section>
|
|
|
|
|
<section class="grow-wrap">
|
|
|
|
|
<textarea id="inventory" name="inventory" placeholder="Inventory" onInput="this.parentNode.dataset.replicatedValue = this.value"></textarea>
|
|
|
|
|
</section>
|
|
|
|
|
</div>
|
2023-04-14 06:43:47 +00:00
|
|
|
<div class="page w3-container w3-card-4 w3-padding-16" style="padding-left: 32px; padding-right: 32px;">
|
2023-04-14 06:44:20 +00:00
|
|
|
<h2 class="w3-center">Spellcasting</h2>
|
2023-04-14 06:43:47 +00:00
|
|
|
<section class="grid mobile" style="grid-template-columns: auto auto auto; align-items: start;">
|
|
|
|
|
<label class="mobile" style="flex-direction: column; align-items: flex-start;">Spellcasting Attribute
|
|
|
|
|
<select id="spellcasting-attribute" name="spellcasting-attribute">
|
|
|
|
|
<option value="none"></option>
|
|
|
|
|
<option value="int">INT</option>
|
|
|
|
|
<option value="cha">CHA</option>
|
|
|
|
|
</select>
|
|
|
|
|
</label>
|
|
|
|
|
<div class="flex mobile" style="flex-direction: column; align-items: flex-start;">
|
|
|
|
|
<p>Spellcasting Modifier</p>
|
|
|
|
|
<div class="flex mobile">
|
|
|
|
|
<label>Training<input id="spellcasting-training" name="spellcasting-training" type="number"></label>
|
|
|
|
|
<label>MB<input id="spellcasting-mb" name="spellcasting-mb" type="checkbox"></label>
|
|
|
|
|
<output id="spellcasting-modifier"></output>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="flex mobile" style="flex-direction: column; align-items: flex-start;">
|
|
|
|
|
<p>Spell Save DC</p>
|
|
|
|
|
<output class="w3-center" id="spellcasting-dc"></output>
|
|
|
|
|
</div>
|
|
|
|
|
</section>
|
2023-04-17 05:24:34 +00:00
|
|
|
<section id="spellcasting-spells" class="grid" style="grid-template-columns: auto 1fr;">
|
2023-04-14 06:43:47 +00:00
|
|
|
<p>Prep</p>
|
|
|
|
|
<p>Spell Name & Description</p>
|
|
|
|
|
</section>
|
|
|
|
|
</div>
|
2023-04-14 02:43:10 +00:00
|
|
|
</form>
|
2023-04-11 17:11:02 +00:00
|
|
|
</main>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
