A character sheet that runs in browser for D&D 5th edition for A5 sized paper
at main 233 lines 20 kB view raw
1<!DOCTYPE html> 2<html> 3 <head> 4 <title>A5 5E Character Sheet</title> 5 <link rel="stylesheet" href="/style.css" /> 6 <script src="https://cdn.jsdelivr.net/npm/handlebars@latest/dist/handlebars.runtime.js"></script> 7 <script src="/holePunch.precompiled.js" type="text/javascript"></script> 8 <script src="/page.precompiled.js" type="text/javascript"></script> 9 <script type="text/javascript"> 10 const page = Handlebars.templates.page; 11 12 window.onload = () => { 13 const pages = document.querySelectorAll("page"); 14 const outer = document.querySelector(".sheet-outer.A5"); 15 outer.innerHTML = ""; 16 17 for (var i = 0; i < pages.length; i++) { 18 outer.innerHTML += page({ content: pages[i].innerHTML }); 19 } 20 }; 21 </script> 22 </head> 23 <body> 24 <div class="sheet-outer A5"> 25 <page> 26 <div> 27 <svg width="40mm" height="15mm" xmlns="http://www.w3.org/2000/svg" class="carlito"> 28 <polygon fill="none" stroke="black" stroke-width="0.5mm" points="24.803149,10.629921 150.5905475,10.629921 150.5905475,46.062991 24.803149,46.062991" /> 29 <text x="15.5mm" fill="black" y="8.335mm" textLength="23.25mm" style="font-size:8pt;">Proficiency Bonus</text> 30 <circle stroke="black" r="7mm" stroke-width="0.5mm" cx="7.5mm" cy="7.5mm" fill="white" /> 31 </svg> 32 <svg width="40mm" height="15mm" xmlns="http://www.w3.org/2000/svg" class="carlito"> 33 <polygon fill="none" stroke="black" stroke-width="0.5mm" points="24.803149,10.629921 150.5905475,10.629921 150.5905475,46.062991 24.803149,46.062991" /> 34 <text x="15.5mm" fill="black" y="8.335mm" textLength="23.25mm" style="font-size:8pt;">Passive Perception</text> 35 <circle stroke="black" r="7mm" stroke-width="0.5mm" cx="7.5mm" cy="7.5mm" fill="white" /> 36 </svg> 37 <svg width="40mm" height="15mm"height="15mm" xmlns="http://www.w3.org/2000/svg" class="carlito"> 38 <polygon fill="none" stroke="black" stroke-width="0.5mm" points="24.803149,10.629921 150.5905475,10.629921 150.5905475,46.062991 24.803149,46.062991" /> 39 <text x="18.5mm" fill="black" y="8.335mm" style="font-size:10pt;">Initiative</text> 40 <circle stroke="black" r="7mm" stroke-width="0.5mm" cx="7.5mm" cy="7.5mm" fill="white" /> 41 </svg> 42 <br /> 43 <br /> 44 <hr style="margin-bottom:0;" /> 45 <span class="carlito" style="font-size:9pt;margin-bottom:2mm;">Name</span> 46 <br /> 47 <br /> 48 <svg width="15mm" height="30mm" xmlns="http://www.w3.org/2000/svg" class="caladea attr"> 49 <text x="4mm" y="3.1mm" fill="black">STR</text> 50 <rect x="0.5mm" y="5mm" width="14mm" height="19.5mm" stroke="black" stroke-width="0.5mm" fill="none" /> 51 <ellipse rx="5mm" ry="3mm" cx="7.5mm" cy="25mm" stroke="black" stroke-width="0.5mm" fill="white" /> 52 </svg> 53 <svg width="15mm" height="30mm" xmlns="http://www.w3.org/2000/svg" class="caladea attr"> 54 <text x="4mm" y="3.1mm" fill="black">DEX</text> 55 <rect x="0.5mm" y="5mm" width="14mm" height="19.5mm" stroke="black" stroke-width="0.5mm" fill="none" /> 56 <ellipse rx="5mm" ry="3mm" cx="7.5mm" cy="25mm" stroke="black" stroke-width="0.5mm" fill="white" /> 57 </svg> 58 <svg width="15mm" height="30mm" xmlns="http://www.w3.org/2000/svg" class="caladea attr"> 59 <text x="4mm" y="3.1mm" fill="black">CON</text> 60 <rect x="0.5mm" y="5mm" width="14mm" height="19.5mm" stroke="black" stroke-width="0.5mm" fill="none" /> 61 <ellipse rx="5mm" ry="3mm" cx="7.5mm" cy="25mm" stroke="black" stroke-width="0.5mm" fill="white" /> 62 </svg> 63 <svg width="15mm" height="30mm" xmlns="http://www.w3.org/2000/svg" class="caladea attr"> 64 <text x="4mm" y="3.1mm" fill="black">INT</text> 65 <rect x="0.5mm" y="5mm" width="14mm" height="19.5mm" stroke="black" stroke-width="0.5mm" fill="none" /> 66 <ellipse rx="5mm" ry="3mm" cx="7.5mm" cy="25mm" stroke="black" stroke-width="0.5mm" fill="white" /> 67 </svg> 68 <svg width="15mm" height="30mm" xmlns="http://www.w3.org/2000/svg" class="caladea attr"> 69 <text x="4mm" y="3.1mm" fill="black">WIS</text> 70 <rect x="0.5mm" y="5mm" width="14mm" height="19.5mm" stroke="black" stroke-width="0.5mm" fill="none" /> 71 <ellipse rx="5mm" ry="3mm" cx="7.5mm" cy="25mm" stroke="black" stroke-width="0.5mm" fill="white" /> 72 </svg> 73 <svg width="15mm" height="30mm" xmlns="http://www.w3.org/2000/svg" class="caladea attr"> 74 <text x="4mm" y="3.1mm" fill="black">CHA</text> 75 <rect x="0.5mm" y="5mm" width="14mm" height="19.5mm" stroke="black" stroke-width="0.5mm" fill="none" /> 76 <ellipse rx="5mm" ry="3mm" cx="7.5mm" cy="25mm" stroke="black" stroke-width="0.5mm" fill="white" /> 77 </svg> 78 <svg width="55mm" height="130mm" xmlns="http://www.w3.org/2000/svg" class="carlito"> 79 <rect x="0.5mm" y="0.5mm" width="54mm" height="129mm" stroke="black" stroke-width="0.5mm" fill="none" /> 80 <!-- Acrobatics (DEX) --> 81 <circle r="1mm" cx="5mm" cy="4.5mm" stroke="black" stroke-width="0.5mm" fill="white" /> 82 <circle r="1.5mm" cx="7mm" cy="5.5mm" stroke="black" stroke-width="0.5mm" fill="white" /> 83 <line x1="10mm" y1="7mm" x2="16mm" y2="7mm" stroke="black" stroke-width="0.5mm" /> 84 <text x="18mm" y="7mm" fill="black">Acrobatics</text> 85 <text x="37mm" y="7mm" fill="grey" style="font-size:8pt;">(Dex)</text> 86 <!-- Animal Handling (WIS) --> 87 <circle r="1mm" cx="5mm" cy="11.5mm" stroke="black" stroke-width="0.5mm" fill="white" /> 88 <circle r="1.5mm" cx="7mm" cy="12.5mm" stroke="black" stroke-width="0.5mm" fill="white" /> 89 <line x1="10mm" y1="14mm" x2="16mm" y2="14mm" stroke="black" stroke-width="0.5mm" /> 90 <text x="18mm" y="14mm" fill="black">Animal Handling</text> 91 <text x="47mm" y="14mm" fill="grey" style="font-size:8pt;">(Wis)</text> 92 <!-- Arcana (INT) --> 93 <circle r="1mm" cx="5mm" cy="18.5mm" stroke="black" stroke-width="0.5mm" fill="white" /> 94 <circle r="1.5mm" cx="7mm" cy="19.5mm" stroke="black" stroke-width="0.5mm" fill="white" /> 95 <line x1="10mm" y1="21mm" x2="16mm" y2="21mm" stroke="black" stroke-width="0.5mm" /> 96 <text x="18mm" y="21mm" fill="black">Arcana</text> 97 <text x="31mm" y="21mm" fill="grey" style="font-size:8pt;">(Int)</text> 98 <!-- Athletics (STR) --> 99 <circle r="1mm" cx="5mm" cy="25.5mm" stroke="black" stroke-width="0.5mm" fill="white" /> 100 <circle r="1.5mm" cx="7mm" cy="26.5mm" stroke="black" stroke-width="0.5mm" fill="white" /> 101 <line x1="10mm" y1="28mm" x2="16mm" y2="28mm" stroke="black" stroke-width="0.5mm" /> 102 <text x="18mm" y="28mm" fill="black">Athletics</text> 103 <text x="34mm" y="28mm" fill="grey" style="font-size:8pt;">(Str)</text> 104 <!-- Deception (CHA) --> 105 <circle r="1mm" cx="5mm" cy="32.5mm" stroke="black" stroke-width="0.5mm" fill="white" /> 106 <circle r="1.5mm" cx="7mm" cy="33.5mm" stroke="black" stroke-width="0.5mm" fill="white" /> 107 <line x1="10mm" y1="35mm" x2="16mm" y2="35mm" stroke="black" stroke-width="0.5mm" /> 108 <text x="18mm" y="35mm" fill="black">Deception</text> 109 <text x="37mm" y="35mm" fill="grey" style="font-size:8pt;">(Cha)</text> 110 <!-- History (INT) --> 111 <circle r="1mm" cx="5mm" cy="39.5mm" stroke="black" stroke-width="0.5mm" fill="white" /> 112 <circle r="1.5mm" cx="7mm" cy="40.5mm" stroke="black" stroke-width="0.5mm" fill="white" /> 113 <line x1="10mm" y1="42mm" x2="16mm" y2="42mm" stroke="black" stroke-width="0.5mm" /> 114 <text x="18mm" y="42mm" fill="black">History</text> 115 <text x="31mm" y="42mm" fill="grey" style="font-size:8pt;">(Int)</text> 116 <!-- Insight (WIS) --> 117 <circle r="1mm" cx="5mm" cy="46.5mm" stroke="black" stroke-width="0.5mm" fill="white" /> 118 <circle r="1.5mm" cx="7mm" cy="47.5mm" stroke="black" stroke-width="0.5mm" fill="white" /> 119 <line x1="10mm" y1="49mm" x2="16mm" y2="49mm" stroke="black" stroke-width="0.5mm" /> 120 <text x="18mm" y="49mm" fill="black">Insight</text> 121 <text x="31mm" y="49mm" fill="grey" style="font-size:8pt;">(Wis)</text> 122 <!-- Intimidation (CHA) --> 123 <circle r="1mm" cx="5mm" cy="53.5mm" stroke="black" stroke-width="0.5mm" fill="white" /> 124 <circle r="1.5mm" cx="7mm" cy="54.5mm" stroke="black" stroke-width="0.5mm" fill="white" /> 125 <line x1="10mm" y1="56mm" x2="16mm" y2="56mm" stroke="black" stroke-width="0.5mm" /> 126 <text x="18mm" y="56mm" fill="black">Intimidation</text> 127 <text x="40mm" y="56mm" fill="grey" style="font-size:8pt;">(Cha)</text> 128 <!-- Investigation (INT) --> 129 <circle r="1mm" cx="5mm" cy="60.5mm" stroke="black" stroke-width="0.5mm" fill="white" /> 130 <circle r="1.5mm" cx="7mm" cy="61.5mm" stroke="black" stroke-width="0.5mm" fill="white" /> 131 <line x1="10mm" y1="63mm" x2="16mm" y2="63mm" stroke="black" stroke-width="0.5mm" /> 132 <text x="18mm" y="63mm" fill="black">Investigation</text> 133 <text x="41mm" y="63mm" fill="grey" style="font-size:8pt;">(Int)</text> 134 <!-- Medicine (WIS) --> 135 <circle r="1mm" cx="5mm" cy="67.5mm" stroke="black" stroke-width="0.5mm" fill="white" /> 136 <circle r="1.5mm" cx="7mm" cy="68.5mm" stroke="black" stroke-width="0.5mm" fill="white" /> 137 <line x1="10mm" y1="70mm" x2="16mm" y2="70mm" stroke="black" stroke-width="0.5mm" /> 138 <text x="18mm" y="70mm" fill="black">Medicine</text> 139 <text x="35mm" y="70mm" fill="grey" style="font-size:8pt;">(Wis)</text> 140 <!-- Nature (INT) --> 141 <circle r="1mm" cx="5mm" cy="74.5mm" stroke="black" stroke-width="0.5mm" fill="white" /> 142 <circle r="1.5mm" cx="7mm" cy="75.5mm" stroke="black" stroke-width="0.5mm" fill="white" /> 143 <line x1="10mm" y1="77mm" x2="16mm" y2="77mm" stroke="black" stroke-width="0.5mm" /> 144 <text x="18mm" y="77mm" fill="black">Nature</text> 145 <text x="31mm" y="77mm" fill="grey" style="font-size:8pt;">(Int)</text> 146 <!-- Perception (WIS) --> 147 <circle r="1mm" cx="5mm" cy="81.5mm" stroke="black" stroke-width="0.5mm" fill="white" /> 148 <circle r="1.5mm" cx="7mm" cy="82.5mm" stroke="black" stroke-width="0.5mm" fill="white" /> 149 <line x1="10mm" y1="84mm" x2="16mm" y2="84mm" stroke="black" stroke-width="0.5mm" /> 150 <text x="18mm" y="84mm" fill="black">Perception</text> 151 <text x="38mm" y="84mm" fill="grey" style="font-size:8pt;">(Wis)</text> 152 <!-- Performance (CHA) --> 153 <circle r="1mm" cx="5mm" cy="88.5mm" stroke="black" stroke-width="0.5mm" fill="white" /> 154 <circle r="1.5mm" cx="7mm" cy="89.5mm" stroke="black" stroke-width="0.5mm" fill="white" /> 155 <line x1="10mm" y1="91mm" x2="16mm" y2="91mm" stroke="black" stroke-width="0.5mm" /> 156 <text x="18mm" y="91mm" fill="black">Performance</text> 157 <text x="41mm" y="91mm" fill="grey" style="font-size:8pt;">(Cha)</text> 158 <!-- Persuasion (CHA) --> 159 <circle r="1mm" cx="5mm" cy="95.5mm" stroke="black" stroke-width="0.5mm" fill="white" /> 160 <circle r="1.5mm" cx="7mm" cy="96.5mm" stroke="black" stroke-width="0.5mm" fill="white" /> 161 <line x1="10mm" y1="98mm" x2="16mm" y2="98mm" stroke="black" stroke-width="0.5mm" /> 162 <text x="18mm" y="98mm" fill="black">Persuasion</text> 163 <text x="37.5mm" y="98mm" fill="grey" style="font-size:8pt;">(Cha)</text> 164 <!-- Religion (INT) --> 165 <circle r="1mm" cx="5mm" cy="102.5mm" stroke="black" stroke-width="0.5mm" fill="white" /> 166 <circle r="1.5mm" cx="7mm" cy="103.5mm" stroke="black" stroke-width="0.5mm" fill="white" /> 167 <line x1="10mm" y1="105mm" x2="16mm" y2="105mm" stroke="black" stroke-width="0.5mm" /> 168 <text x="18mm" y="105mm" fill="black">Religion</text> 169 <text x="33mm" y="105mm" fill="grey" style="font-size:8pt;">(Int)</text> 170 <!-- Sleight of Hand (DEX) --> 171 <circle r="1mm" cx="5mm" cy="109.5mm" stroke="black" stroke-width="0.5mm" fill="white" /> 172 <circle r="1.5mm" cx="7mm" cy="110.5mm" stroke="black" stroke-width="0.5mm" fill="white" /> 173 <line x1="10mm" y1="112mm" x2="16mm" y2="112mm" stroke="black" stroke-width="0.5mm" /> 174 <text x="18mm" y="112mm" fill="black">Sleight of Hand</text> 175 <text x="45mm" y="112mm" fill="grey" style="font-size:8pt;">(Dex)</text> 176 <!-- Stealth (DEX) --> 177 <circle r="1mm" cx="5mm" cy="116.5mm" stroke="black" stroke-width="0.5mm" fill="white" /> 178 <circle r="1.5mm" cx="7mm" cy="117.5mm" stroke="black" stroke-width="0.5mm" fill="white" /> 179 <line x1="10mm" y1="119mm" x2="16mm" y2="119mm" stroke="black" stroke-width="0.5mm" /> 180 <text x="18mm" y="119mm" fill="black">Stealth</text> 181 <text x="31mm" y="119mm" fill="grey" style="font-size:8pt;">(Dex)</text> 182 <!-- Survival (WIS) --> 183 <circle r="1mm" cx="5mm" cy="123.5mm" stroke="black" stroke-width="0.5mm" fill="white" /> 184 <circle r="1.5mm" cx="7mm" cy="124.5mm" stroke="black" stroke-width="0.5mm" fill="white" /> 185 <line x1="10mm" y1="126mm" x2="16mm" y2="126mm" stroke="black" stroke-width="0.5mm" /> 186 <text x="18mm" y="126mm" fill="black">Survival</text> 187 <text x="32mm" y="126mm" fill="grey" style="font-size:8pt;">(Wis)</text> 188 </svg> 189 <svg width="65mm" height="130mm" xmlns="http://www.w3.org/2000/svg" class="carlito"> 190 <!-- Saving Throws --> 191 <rect x="0.5mm" y="0.5mm" width="64mm" height="24mm" stroke="black" stroke-width="0.5mm" fill="none" /> 192 <!-- -- Strength -- --> 193 <circle r="1.5mm" cx="5mm" cy="5.5mm" stroke="black" stroke-width="0.5mm" fill="white" /> 194 <line x1="8mm" y1="7mm" x2="13mm" y2="7mm" stroke="black" stroke-width="0.5mm" /> 195 <text x="14mm" y="7mm" fill="black">STR</text> 196 <!-- -- Dexterity -- --> 197 <circle r="1.5mm" cx="5mm" cy="12.5mm" stroke="black" stroke-width="0.5mm" fill="white" /> 198 <line x1="8mm" y1="14mm" x2="13mm" y2="14mm" stroke="black" stroke-width="0.5mm" /> 199 <text x="14mm" y="14mm" fill="black">DEX</text> 200 <!-- -- Constitution -- --> 201 <circle r="1.5mm" cx="5mm" cy="19.5mm" stroke="black" stroke-width="0.5mm" fill="white" /> 202 <line x1="8mm" y1="21mm" x2="13mm" y2="21mm" stroke="black" stroke-width="0.5mm" /> 203 <text x="14mm" y="21mm" fill="black">CON</text> 204 <!-- -- Intelligence -- --> 205 <circle r="1.5mm" cx="33mm" cy="5.5mm" stroke="black" stroke-width="0.5mm" fill="white" /> 206 <line x1="36mm" y1="7mm" x2="41mm" y2="7mm" stroke="black" stroke-width="0.5mm" /> 207 <text x="42mm" y="7mm" fill="black">INT</text> 208 <!-- -- Wisdom -- --> 209 <circle r="1.5mm" cx="33mm" cy="12.5mm" stroke="black" stroke-width="0.5mm" fill="white" /> 210 <line x1="36mm" y1="14mm" x2="41mm" y2="14mm" stroke="black" stroke-width="0.5mm" /> 211 <text x="42mm" y="14mm" fill="black">WIS</text> 212 <!-- -- Charisma -- --> 213 <circle r="1.5mm" cx="33mm" cy="19.5mm" stroke="black" stroke-width="0.5mm" fill="white" /> 214 <line x1="36mm" y1="21mm" x2="41mm" y2="21mm" stroke="black" stroke-width="0.5mm" /> 215 <text x="42mm" y="21mm" fill="black">CHA</text> 216 <!-- Speed --> 217 <text x="17mm" y="35.5mm" fill="black">Speed</text> 218 <rect x="8mm" y="30mm" width="25mm" height="9mm" stroke="black" stroke-width="0.5mm" fill="none" /> 219 <circle r="7mm" cx="7.5mm" cy="34.5mm" stroke="black" stroke-width="0.5mm" fill="white" /> 220 <!-- AC --> 221 <rect x="40mm" y="30mm" width="25mm" height="9mm" stroke="black" stroke-width="0.5mm" fill="none" /> 222 <text x="53.5mm" y="35.5mm" fill="black">AC</text> 223 <circle r="7mm" cx="42mm" cy="34.5mm" stroke="black" stroke-width="0.5mm" fill="white" /> 224 <!-- HP --> 225 <rect x="0.5mm" y="44mm" width="64mm" height="40mm" stroke="black" stroke-width="0.5mm" fill="none" /> 226 <text x="2mm" y="49mm" fill="rgb(78, 78, 78)">Hit Point Max</text> 227 <line x1="27mm" y1="49mm" x2="60mm" y2="49mm" stroke="rgb(78, 78, 78)" stroke-width="0.5mm" /> 228 </svg> 229 </div> 230 </page> 231 </div> 232 </body> 233</html>