From d4850b6e37c4ad57dab15a565dc8947b8aa62789 Mon Sep 17 00:00:00 2001
From: Craig Garrett <craiggarrett@MacBookPro.lan>
Date: Sun, 21 Jun 2026 14:00:44 -0400
Subject: [PATCH] added translations to old world sheet

---
 TheOldWorldRPG/sheet.html       | 240 ++++++++++++++++----------------
 TheOldWorldRPG/translation.json | 107 ++++++++++++++
 2 files changed, 227 insertions(+), 120 deletions(-)
 create mode 100644 TheOldWorldRPG/translation.json

diff --git a/TheOldWorldRPG/sheet.html b/TheOldWorldRPG/sheet.html
index ec0bab4846..60525cfaf7 100644
--- a/TheOldWorldRPG/sheet.html
+++ b/TheOldWorldRPG/sheet.html
@@ -1,51 +1,51 @@
 <div class="sheet-character">
-        <h1 class="main-title header-font">TOW RPG Character Sheet</h1>
+        <h1 class="main-title header-font" data-i18n="TOW RPG Character Sheet">TOW RPG Character Sheet</h1>
         
         <div class="grid-container">
             <div class="char-info-box">
                 <div class="info-line">
-                    <label for="name">Name</label>
+                    <label for="name" data-i18n="Name">Name</label>
                     <input type="text" id="character_name" name="attr_character_name">
                 </div>
                 <div class="info-line">
-                    <label for="origin">Origin</label>
+                    <label for="origin" data-i18n="Origin">Origin</label>
                     <input type="text" id="origin" name="attr_origin">
                 </div>
                 <div class="info-line">
-                    <label for="career">Career</label>
+                    <label for="career" data-i18n="Career">Career</label>
                     <input type="text" id="career" name="attr_career">
                 </div>
             </div>
 
             <div class="top-stats-box">
                 <div class="stat-box">
-                    <div >Fate</div>
+                    <div data-i18n="Fate">Fate</div>
                     <div class="fate-container">
                         <div class="fate-input-group">
                             <input type="number" id="fate_current" name="attr_fate_current">
-                            <span class="sub-label">Remaining</span>
+                            <span class="sub-label" data-i18n="Remaining">Remaining</span>
                         </div>
                         <div class="fate-input-group">
                             <input type="number" id="fate_max" name="attr_fate_max">
-                            <span class="sub-label">Maximum</span>
+                            <span class="sub-label" data-i18n="Maximum">Maximum</span>
                         </div>
                       </div>
                 </div>
                 <div class="stat-box">
-                    <div >XP</div>
+                    <div data-i18n="XP">XP</div>
                     <div class="fate-container">
                       <div class="fate-input-group">
                           <input type="number" id="xp" name="attr_xp">
-                          <span class="sub-label">Current</span>
+                          <span class="sub-label" data-i18n="Current">Current</span>
                       </div>
                       <div class="fate-input-group">
                           <input type="number" id="xp_total" name="attr_xp_total">
-                          <span class="sub-label">Total</span>
+                          <span class="sub-label" data-i18n="Total">Total</span>
                       </div>
                     </div>
                 </div>
                 <div class="stat-box">
-                    <div >Speed</div>
+                    <div data-i18n="Speed">Speed</div>
                     <div class="fate-container">
                         <input type="text"
                                id="speed" name="attr_speed"
@@ -54,12 +54,12 @@
                 </div>
                 <div style="visibility: hidden; display: flex; gap: 0.5rem; justify-content: center;">
                     <div style="display: flex; flex-direction: column; gap: 0.25rem; justify-content: center;">
-                        <button class="export-button" @click="triggerImport">Import Sheet</button>
-                        <button class="export-button" @click="clearSheet">Clear Sheet</button>
+                        <button class="export-button" @click="triggerImport" data-i18n="Import Sheet">Import Sheet</button>
+                        <button class="export-button" @click="clearSheet" data-i18n="Clear Sheet">Clear Sheet</button>
                     </div>
                     <div style="display: flex; flex-direction: column; gap: 0.25rem; justify-content: center;">
-                        <button class="export-button" @click="exportSheet">Export Sheet</button>
-                        <button class="export-button" @click="printSheet">Print Sheet</button>
+                        <button class="export-button" @click="exportSheet" data-i18n="Export Sheet">Export Sheet</button>
+                        <button class="export-button" @click="printSheet" data-i18n="Print Sheet">Print Sheet</button>
                     </div>
                 </div>
                 <input type="file" id="sheet-import" @change="importSheet($event)" accept=".json" style="display: none;">
@@ -71,8 +71,8 @@
                         <div class="char-skill-row">
                             <div class="char-side">
                                 <div class="char-info">
-                                    <span class="char-abbr">WS</span>
-                                    <span class="char-fullname">WEAPON SKILL</span>
+                                    <span class="char-abbr" data-i18n="WS">WS</span>
+                                    <span class="char-fullname" data-i18n="WEAPON SKILL">WEAPON SKILL</span>
                                   </button>
                                 </div>
                                 <div class="char-value-container">
@@ -83,14 +83,14 @@
                             <div class="skills-side">
                                 <div class="skill-line">
                                     <input type="number" id="attr_skill_melee" name="attr_skill_melee" style="width: 40px; text-align: center;">
-                                    <button type="action" value="ws|melee|skill" name="act_towroll"><span class="skill-name">Melee</span></button>
+                                    <button type="action" value="ws|melee|skill" name="act_towroll"><span class="skill-name" data-i18n="Melee">Melee</span></button>
                                     <div style="display: flex; align-items: center; gap: 0.5rem;">
                                         <input type="number" id="attr_skill_melee_improvement" name="attr_skill_melee_improvement" style="width: 40px; text-align: center;">
                                     </div>
                                 </div>
                                 <div class="skill-line">
                                     <input type="number" id="attr_skill_defence" name="attr_skill_defence" style="width: 40px; text-align: center;">
-                                    <button type="action" value="ws|defence|skill" name="act_towroll"><span class="skill-name">Defence</span></button>
+                                    <button type="action" value="ws|defence|skill" name="act_towroll"><span class="skill-name" data-i18n="Defence">Defence</span></button>
                                     <div style="display: flex; align-items: center; gap: 0.5rem;">
                                         <input type="number" id="attr_skill_defence_improvement" name="attr_skill_defence_improvement" style="width: 40px; text-align: center;">
                                     </div>
@@ -100,8 +100,8 @@
                         <div class="char-skill-row">
                             <div class="char-side">
                                 <div class="char-info">
-                                    <span class="char-abbr" >BS</span>
-                                    <span class="char-fullname">BALLISTIC SKILL</span>
+                                    <span class="char-abbr" data-i18n="BS">BS</span>
+                                    <span class="char-fullname" data-i18n="BALLISTIC SKILL">BALLISTIC SKILL</span>
                                 </div>
                                 <div class="char-value-container">
                                     <input type="number" id="attr_bs" name="attr_bs">
@@ -111,14 +111,14 @@
                             <div class="skills-side">
                                 <div class="skill-line">
                                     <input type="number" id="attr_skill_shooting" name="attr_skill_shooting" style="width: 40px; text-align: center;">
-                                    <button type="action" value="bs|shooting|skill" name="act_towroll"><span class="skill-name">Shooting</span></button>
+                                    <button type="action" value="bs|shooting|skill" name="act_towroll"><span class="skill-name" data-i18n="Shooting">Shooting</span></button>
                                     <div style="display: flex; align-items: center; gap: 0.5rem;">
                                         <input type="number" id="attr_skill_shooting_improvement" name="attr_skill_shooting_improvement" style="width: 40px; text-align: center;">
                                     </div>
                                 </div>
                                 <div class="skill-line">
                                     <input type="number" id="attr_skill_throwing" name="attr_skill_throwing" style="width: 40px; text-align: center;">
-                                    <button type="action" value="bs|throwing|skill" name="act_towroll"><span class="skill-name">Throwing</span></button>
+                                    <button type="action" value="bs|throwing|skill" name="act_towroll"><span class="skill-name" data-i18n="Throwing">Throwing</span></button>
                                     <div style="display: flex; align-items: center; gap: 0.5rem;">
                                         <input type="number" id="attr_skill_throwing_improvement" name="attr_skill_throwing_improvement" style="width: 40px; text-align: center;">
                                     </div>
@@ -128,8 +128,8 @@
                         <div class="char-skill-row">
                             <div class="char-side">
                                 <div class="char-info">
-                                    <span class="char-abbr" >S</span>
-                                    <span class="char-fullname">STRENGTH</span>
+                                    <span class="char-abbr" data-i18n="S">S</span>
+                                    <span class="char-fullname" data-i18n="STRENGTH">STRENGTH</span>
                                 </div>
                                 <div class="char-value-container">
                                     <input type="number" id="attr_s" name="attr_s">
@@ -139,14 +139,14 @@
                             <div class="skills-side">
                                 <div class="skill-line">
                                     <input type="number" id="attr_skill_brawn" name="attr_skill_brawn" style="width: 40px; text-align: center;">
-                                    <button type="action" value="s|brawn|skill" name="act_towroll"><span class="skill-name">Brawn</span></button>
+                                    <button type="action" value="s|brawn|skill" name="act_towroll"><span class="skill-name" data-i18n="Brawn">Brawn</span></button>
                                     <div style="display: flex; align-items: center; gap: 0.5rem;">
                                         <input type="number" id="attr_skill_brawn_improvement" name="attr_skill_brawn_improvement" style="width: 40px; text-align: center;">
                                     </div>
                                 </div>
                                 <div class="skill-line">
                                     <input type="number" id="attr_skill_toil" name="attr_skill_toil" style="width: 40px; text-align: center;">
-                                    <button type="action" value="s|toil|skill" name="act_towroll"><span class="skill-name">Toil</span></button>
+                                    <button type="action" value="s|toil|skill" name="act_towroll"><span class="skill-name" data-i18n="Toil">Toil</span></button>
                                     <div style="display: flex; align-items: center; gap: 0.5rem;">
                                         <input type="number" id="attr_skill_toil_improvement" name="attr_skill_toil_improvement" style="width: 40px; text-align: center;">
                                     </div>
@@ -156,8 +156,8 @@
                         <div class="char-skill-row">
                             <div class="char-side">
                                 <div class="char-info">
-                                    <span class="char-abbr" >T</span>
-                                    <span class="char-fullname">TOUGHNESS</span>
+                                    <span class="char-abbr" data-i18n="T">T</span>
+                                    <span class="char-fullname" data-i18n="TOUGHNESS">TOUGHNESS</span>
                                 </div>
                                 <div class="char-value-container">
                                     <input type="number" id="attr_t" name="attr_t">
@@ -167,14 +167,14 @@
                             <div class="skills-side">
                                 <div class="skill-line">
                                     <input type="number" id="attr_skill_survival" name="attr_skill_survival" style="width: 40px; text-align: center;">
-                                    <button type="action" value="t|survival|skill" name="act_towroll"><span class="skill-name">Survival</span></button>
+                                    <button type="action" value="t|survival|skill" name="act_towroll"><span class="skill-name" data-i18n="Survival">Survival</span></button>
                                     <div style="display: flex; align-items: center; gap: 0.5rem;">
                                         <input type="number" id="attr_skill_survival_improvement" name="attr_skill_survival_improvement" style="width: 40px; text-align: center;">
                                     </div>
                                 </div>
                                 <div class="skill-line">
                                     <input type="number" id="attr_skill_endurance" name="attr_skill_endurance" style="width: 40px; text-align: center;">
-                                    <button type="action" value="t|endurance|skill" name="act_towroll"><span class="skill-name">Endurance</span></button>
+                                    <button type="action" value="t|endurance|skill" name="act_towroll"><span class="skill-name" data-i18n="Endurance">Endurance</span></button>
                                     <div style="display: flex; align-items: center; gap: 0.5rem;">
                                         <input type="number" id="attr_skill_endurance_improvement" name="attr_skill_endurance_improvement" style="width: 40px; text-align: center;">
                                     </div>
@@ -184,8 +184,8 @@
                         <div class="char-skill-row">
                             <div class="char-side">
                                 <div class="char-info">
-                                    <span class="char-abbr" >I</span>
-                                    <span class="char-fullname">Initiative</span>
+                                    <span class="char-abbr" data-i18n="I">I</span>
+                                    <span class="char-fullname" data-i18n="Initiative">Initiative</span>
                                 </div>
                                 <div class="char-value-container">
                                     <input type="number" id="attr_i" name="attr_i">
@@ -195,14 +195,14 @@
                             <div class="skills-side">
                                 <div class="skill-line">
                                     <input type="number" id="attr_skill_awareness" name="attr_skill_awareness" style="width: 40px; text-align: center;">
-                                    <button type="action" value="i|awareness|skill" name="act_towroll"><span class="skill-name">Awareness</span></button>
+                                    <button type="action" value="i|awareness|skill" name="act_towroll"><span class="skill-name" data-i18n="Awareness">Awareness</span></button>
                                     <div style="display: flex; align-items: center; gap: 0.5rem;">
                                         <input type="number" id="attr_skill_awareness_improvement" name="attr_skill_awareness_improvement" style="width: 40px; text-align: center;">
                                     </div>
                                 </div>
                                 <div class="skill-line">
                                     <input type="number" id="attr_skill_dexterity" name="attr_skill_dexterity" style="width: 40px; text-align: center;">
-                                    <button type="action" value="i|dexterity|skill" name="act_towroll"><span class="skill-name">Dexterity</span></button>
+                                    <button type="action" value="i|dexterity|skill" name="act_towroll"><span class="skill-name" data-i18n="Dexterity">Dexterity</span></button>
                                     <div style="display: flex; align-items: center; gap: 0.5rem;">
                                         <input type="number" id="attr_skill_dexterity_improvement" name="attr_skill_dexterity_improvement" style="width: 40px; text-align: center;">
                                     </div>
@@ -212,8 +212,8 @@
                         <div class="char-skill-row">
                             <div class="char-side">
                                 <div class="char-info">
-                                    <span class="char-abbr" >Ag</span>
-                                    <span class="char-fullname">AGILITY</span>
+                                    <span class="char-abbr" data-i18n="Ag">Ag</span>
+                                    <span class="char-fullname" data-i18n="AGILITY">AGILITY</span>
                                 </div>
                                 <div class="char-value-container">
                                     <input type="number" id="attr_ag" name="attr_ag">
@@ -223,14 +223,14 @@
                             <div class="skills-side">
                                 <div class="skill-line">
                                     <input type="number" id="attr_skill_athletics" name="attr_skill_athletics" style="width: 40px; text-align: center;">
-                                    <button type="action" value="ag|athletics|skill" name="act_towroll"><span class="skill-name">Athletics</span></button>
+                                    <button type="action" value="ag|athletics|skill" name="act_towroll"><span class="skill-name" data-i18n="Athletics">Athletics</span></button>
                                     <div style="display: flex; align-items: center; gap: 0.5rem;">
                                         <input type="number" id="attr_skill_athletics_improvement" name="attr_skill_athletics_improvement" style="width: 40px; text-align: center;">
                                     </div>
                                 </div>
                                 <div class="skill-line">
                                     <input type="number" id="attr_skill_stealth" name="attr_skill_stealth" style="width: 40px; text-align: center;">
-                                    <button type="action" value="ag|stealth|skill" name="act_towroll"><span class="skill-name">Stealth</span></button>
+                                    <button type="action" value="ag|stealth|skill" name="act_towroll"><span class="skill-name" data-i18n="Stealth">Stealth</span></button>
                                     <div style="display: flex; align-items: center; gap: 0.5rem;">
                                         <input type="number" id="attr_skill_stealth_improvement" name="attr_skill_stealth_improvement" style="width: 40px; text-align: center;">
                                     </div>
@@ -240,8 +240,8 @@
                         <div class="char-skill-row">
                             <div class="char-side">
                                 <div class="char-info">
-                                    <span class="char-abbr" >RE</span>
-                                    <span class="char-fullname">REASON</span>
+                                    <span class="char-abbr" data-i18n="RE">RE</span>
+                                    <span class="char-fullname" data-i18n="REASON">REASON</span>
                                 </div>
                                 <div class="char-value-container">
                                     <input type="number" id="attr_re" name="attr_re">
@@ -251,14 +251,14 @@
                             <div class="skills-side">
                                 <div class="skill-line">
                                     <input type="number" id="attr_skill_willpower" name="attr_skill_willpower" style="width: 40px; text-align: center;">
-                                    <button type="action" value="re|willpower|skill" name="act_towroll"><span class="skill-name">Willpower</span></button>
+                                    <button type="action" value="re|willpower|skill" name="act_towroll"><span class="skill-name" data-i18n="Willpower">Willpower</span></button>
                                     <div style="display: flex; align-items: center; gap: 0.5rem;">
                                         <input type="number" id="attr_skill_willpower_improvement" name="attr_skill_willpower_improvement" style="width: 40px; text-align: center;">
                                     </div>
                                 </div>
                                 <div class="skill-line">
                                     <input type="number" id="attr_skill_recall" name="attr_skill_recall" style="width: 40px; text-align: center;">
-                                    <button type="action" value="re|recall|skill" name="act_towroll"><span class="skill-name">Recall</span></button>
+                                    <button type="action" value="re|recall|skill" name="act_towroll"><span class="skill-name" data-i18n="Recall">Recall</span></button>
                                     <div style="display: flex; align-items: center; gap: 0.5rem;">
                                         <input type="number" id="attr_skill_recall_improvement" name="attr_skill_recall_improvement" style="width: 40px; text-align: center;">
                                     </div>
@@ -268,8 +268,8 @@
                         <div class="char-skill-row">
                             <div class="char-side">
                                 <div class="char-info">
-                                    <span class="char-abbr" >Fel</span>
-                                    <span class="char-fullname">FELLOWSHIP</span>
+                                    <span class="char-abbr" data-i18n="Fel">Fel</span>
+                                    <span class="char-fullname" data-i18n="FELLOWSHIP">FELLOWSHIP</span>
                                 </div>
                                 <div class="char-value-container">
                                     <input type="number" id="attr_fel" name="attr_fel">
@@ -279,14 +279,14 @@
                             <div class="skills-side">
                                 <div class="skill-line">
                                     <input type="number" id="attr_skill_leadership" name="attr_skill_leadership" style="width: 40px; text-align: center;">
-                                    <button type="action" value="fel|leadership|skill" name="act_towroll"><span class="skill-name">Leadership</span></button>
+                                    <button type="action" value="fel|leadership|skill" name="act_towroll"><span class="skill-name" data-i18n="Leadership">Leadership</span></button>
                                     <div style="display: flex; align-items: center; gap: 0.5rem;">
                                         <input type="number" id="attr_skill_leadershp_improvement" name="attr_skill_leadershp_improvement" style="width: 40px; text-align: center;">
                                     </div>
                                 </div>
                                 <div class="skill-line">
                                     <input type="number" id="attr_skill_charm" name="attr_skill_charm" style="width: 40px; text-align: center;">
-                                    <button type="action" value="fel|charm|skill" name="act_towroll"><span class="skill-name">Charm</span></button>
+                                    <button type="action" value="fel|charm|skill" name="act_towroll"><span class="skill-name" data-i18n="Charm">Charm</span></button>
                                     <div style="display: flex; align-items: center; gap: 0.5rem;">
                                         <input type="number" id="attr_skill_charm_improvement" name="attr_skill_charm_improvement" style="width: 40px; text-align: center;">
                                     </div>
@@ -297,7 +297,7 @@
             </div>
 
             <div class="lore-talents-box box">
-                <h3 class="box-title" x-tooltip="tooltips.lore">Lore</h3>
+                <h3 class="box-title" x-tooltip="tooltips.lore" data-i18n="Lore">Lore</h3>
                 <div class="lore-inputs">
                   <input type="text" id="attr_lore1" name="attr_lore1">
                   <input type="text" id="attr_lore2" name="attr_lore2">
@@ -306,7 +306,7 @@
                   <input type="text" id="attr_lore5" name="attr_lore5">
                   <input type="text" id="attr_lore6" name="attr_lore6">
                 </div>
-                <h3 class="box-title" x-tooltip="tooltips.talents">Talents</h3>
+                <h3 class="box-title" x-tooltip="tooltips.talents" data-i18n="Talents">Talents</h3>
                 <div class="talents-inputs">
                   <textarea class="talents-textarea" id="attr-talent" name="attr_talent"></textarea>
                   <fieldset class="repeating_talents">
@@ -317,7 +317,7 @@
 
             <div class="appearance-coin-box">
                 <div class="box">
-                    <h3 class="box-title">Appearance</h3>
+                    <h3 class="box-title" data-i18n="Appearance">Appearance</h3>
                     <div class="talents-inputs">
                       <input type="text" id="attr_appearance1" name="attr_appearance1">
                       <input type="text" id="attr_appearance2" name="attr_appearance2">
@@ -328,27 +328,27 @@
                     </div>
                 </div>
                 <div class="box" style="margin-top: 1rem;">
-                    <h3 class="box-title">Coin</h3>
+                    <h3 class="box-title" data-i18n="Coin">Coin</h3>
                     <div class="info-line">
-                        <label for="status">Status</label>
+                        <label for="status" data-i18n="Status">Status</label>
                         <select id="status" name="attr_coin_status">
-                            <option value="brass">Brass</option>
-                            <option value="silver">Silver</option>
-                            <option value="gold">Gold</option>
+                            <option value="brass" data-i18n="Brass">Brass</option>
+                            <option value="silver" data-i18n="Silver">Silver</option>
+                            <option value="gold" data-i18n="Gold">Gold</option>
                         </select>
                     </div>
                     <div class="coin-grid-container" style="margin-top: 1rem;">
-                        <label>Brass</label>
+                        <label data-i18n="Brass">Brass</label>
                         <div class="coin-slots-container">
                             <input type="text" id="attr_coins_brass" name="attr_coins_brass">
                         </div>
-                        <label>Silver</label>
+                        <label data-i18n="Silver">Silver</label>
                         <div class="coin-slots-container">
                         <div class="coin-slots-container">
                             <input type="text" id="attr_coins_silver" name="attr_coins_silver">
                         </div>
                         </div>
-                        <label>Gold</label>
+                        <label data-i18n="Gold">Gold</label>
                         <div class="coin-slots-container">
                             <input type="text" id="attr_coins_gold" name="attr_coins_gold">
                         </div>
@@ -356,38 +356,38 @@
                 </div>
                 <div class="box" style="margin-top: 1rem; display: flex; gap: 1rem; justify-content: center;">
                     <div style="text-align: center;">
-                        <h3 class="box-title">Resilience</h3>
+                        <h3 class="box-title" data-i18n="Resilience">Resilience</h3>
                         <div style="height: 30px; display: flex; align-items: center; justify-content: center;">
                             <input type="number" id="attr_resilience" name="attr_resilience" style="width: 50px; text-align: center; font-size: 1.5rem;">
                         </div>
-                        <span class="sub-label" style="font-size: 0.8rem;">Toughness + Armour</span>
+                        <span class="sub-label" style="font-size: 0.8rem;" data-i18n="Toughness + Armour">Toughness + Armour</span>
                     </div>
                     <div style="text-align: center;">
-                        <h3 class="box-title">Protection</h3>
+                        <h3 class="box-title" data-i18n="Protection">Protection</h3>
                         <div style="height: 30px; display: flex; align-items: center; justify-content: center;">
                             <input type="number" id="attr_protection" name="attr_protection" style="width: 50px; text-align: center; font-size: 1.5rem;">
                         </div>
-                        <span class="sub-label" style="font-size: 0.8rem;">Armour</span>
+                        <span class="sub-label" style="font-size: 0.8rem;"data-i18n="Armour" >Armour</span>
                     </div>
                 </div>
             </div>
 
             <div class="weapons-box box">
-                <h3 class="box-title">Weapons</h3>
+                <h3 class="box-title"data-i18n="Weapons" >Weapons</h3>
                 <div class="weapons">
                     <div class="weapons-row">
-                        <h5>Action</h5>
-                        <h5>Name</h5>
-                        <h5>Range</h5>
-                        <h5>Dice Pool</h5>
-                        <h5>Skill</h5>
-                        <h5>Damage</h5>
-                        <h5>1h/2h</h5>
-                        <h5>Traits</h5>
+                        <h5 data-i18n="Action">Action</h5>
+                        <h5 data-i18n="Name">Name</h5>
+                        <h5 data-i18n="Range">Range</h5>
+                        <h5 data-i18n="Dice Pool">Dice Pool</h5>
+                        <h5 data-i18n="Skill">Skill</h5>
+                        <h5 data-i18n="Damage">Damage</h5>
+                        <h5 data-i18n="1h/2h">1h/2h</h5>
+                        <h5 data-i18n="Traits">Traits</h5>
                     </div>
                     <fieldset class="repeating_weapons">
                         <div class="weapons-row">
-                            <button type="action" value="bs|shooting|skill" name="act_towroll"><span class="skill-name">Roll</span></button>
+                            <button type="action" value="bs|shooting|skill" name="act_towroll"><span class="skill-name" data-i18n="Roll">Roll</span></button>
                             <input type="text" name="attr_weapon_name">
                             <input type="text" name="attr_weapon_range">
                             <input type="number" name="attr_weapon_dice_pool" step="1">
@@ -401,9 +401,9 @@
             </div>
 
             <div class="wounds-box box">
-                <h3 class="box-title">Wounds</h3>
+                <h3 class="box-title" data-i18n="Wounds">Wounds</h3>
                 <ul class="wounds-list">
-                    <li>Treated</li>
+                    <li data-i18n="Treated">Treated</li>
                     <li><input type="checkbox" id="attr_wound_treated1" name="attr_wound_treated1"><input type="text"  id="attr_wound_description1" name="attr_wound_description1"></li>
                     <li><input type="checkbox" id="attr_wound_treated2" name="attr_wound_treated2"><input type="text"  id="attr_wound_description2" name="attr_wound_description2"></li>
                     <li><input type="checkbox" id="attr_wound_treated3" name="attr_wound_treated3"><input type="text"  id="attr_wound_description3" name="attr_wound_description3"></li>
@@ -412,9 +412,9 @@
                     <li><input type="checkbox" id="attr_wound_treated6" name="attr_wound_treated6"><input type="text"  id="attr_wound_description6" name="attr_wound_description6"></li>
                     <li><input type="checkbox" id="attr_wound_treated7" name="attr_wound_treated7"><input type="text"  id="attr_wound_description7" name="attr_wound_description7"></li>
                 </ul>
-                <h3 class="box-title" style="margin-top: 1rem;">Conditions</h3>
+                <h3 class="box-title" style="margin-top: 1rem;" data-i18n="Conditions">Conditions</h3>
                 <ul class="wounds-list">
-                    <li><span ><input type="checkbox" id="attr_staggered" name="attr_staggered"> Staggered</span></li>
+                    <li><span ><input type="checkbox" id="attr_staggered" name="attr_staggered" data-i18n="Staggered"> Staggered</span></li>
                     <li><input type="text" id="attr_condition1" name="attr_condition1"></li>
                     <li><input type="text" id="attr_condition2" name="attr_condition2"></li>
                     <li><input type="text" id="attr_condition3" name="attr_condition3"></li>
@@ -423,7 +423,7 @@
             </div>
 
             <div class="trappings-box box">
-                <h3 class="box-title" x-tooltip="tooltips.trappings">Trappings</h3>
+                <h3 class="box-title" x-tooltip="tooltips.trappings" data-i18n="Trappings">Trappings</h3>
                 <div class="talents-inputs">
                 <input type="text" id="attr_trappings" name="attr_trappings">
                 <fieldset class="repeating_trappings">
@@ -431,7 +431,7 @@
                 </fieldset>
 
                 </div>
-                <h3 class="box-title" x-tooltip="tooltips.assets" style="margin-top: 1rem;">Assets</h3>
+                <h3 class="box-title" x-tooltip="tooltips.assets" style="margin-top: 1rem;" data-i18n="Assets">Assets</h3>
                 <div class="talents-inputs">
                   <input type="text" id="attr_assets" name="attr_assets">
                   <fieldset class="repeating_assets">
@@ -441,9 +441,9 @@
             </div>
 
             <div class="contacts-box box">
-                <h3 class="box-title">Contacts</h3>
+                <h3 class="box-title" data-i18n="Contacts">Contacts</h3>
                 <ul class="contacts-list">
-                    <li><strong>Name</strong><strong style="margin-left: 80px;">Relationship</strong></li>
+                    <li data-i18n="Name"><strong>Name</strong><strong style="margin-left: 80px;" data-i18n="Relationship">Relationship</strong></li>
                     <li><input type="text" id="attr_contact" name="attr_contact" style="width: 100px;"><input type="text" id="attr_relationship" name="attr_relationship"></li>
                     <fieldset class="repeating_contacts">
                       <li><input type="text" id="attr_contact" name="attr_contact" style="width: 100px;"><input type="text" id="attr_relationship" name="attr_relationship"></li>
@@ -452,33 +452,33 @@
             </div>
 
             <div class="magic-box box">
-                <h3 class="box-title">Magic</h3>
+                <h3 class="box-title" data-i18n="Magic">Magic</h3>
                 <div style="display: flex; justify-content: space-around; gap: 1rem; margin-bottom: 1rem;">
                     <div style="text-align: center;">
-                        <label class="header-font">Wizard Level</label>
+                        <label class="header-font" data-i18n="Wizard Level">Wizard Level</label>
                         <input type="number" id="attr_wizard_level" name="attr_wizard_level" style="width: 80px; text-align: center;">
                     </div>
                     <div style="text-align: center;">
-                        <label class="header-font">Roll to Cast</label>
-                        <button type="action" value="re|willpower|spell" name="act_towroll"><span class="skill-name">Cast</span></button>
+                        <label class="header-font" data-i18n="Roll to Cast">Roll to Cast</label>
+                        <button type="action" value="re|willpower|spell" name="act_towroll"><span class="skill-name" data-i18n="Cast">Cast</span></button>
                     </div>
                 </div>
                 <div style="border: 1px solid var(--ink-main); padding: 0.5rem; text-align: center;">
-                    <h4 class="header-font" style="margin: 0 0 0.5rem 0; color: var(--ink-header);">Miscast Pool</h4>
+                    <h4 class="header-font" style="margin: 0 0 0.5rem 0; color: var(--ink-header);" data-i18n="Miscast Pool">Miscast Pool</h4>
                     <div style="display: flex; justify-content: center; align-items: center; gap: 5px;">
                       <input type="number" id="attr_miscast_pool" name="attr_miscast_pool" style="width: 80px; text-align: center;">
                     </div>
                 </div>
                 <div style="margin-top: 1rem;">
-                    <h4 class="header-font" style="margin: 0 0 0.5rem 0; text-align: center; color: var(--ink-header);">Miscast Effects</h4>
+                    <h4 class="header-font" style="margin: 0 0 0.5rem 0; text-align: center; color: var(--ink-header);" data-i18n="Miscast Effects">Miscast Effects</h4>
                     <input type="text"  id="attr_miscast_effects" name="attr_miscast_effects"  style="margin-bottom: 0.5rem;">
                 </div>
             </div>
 
             <div class="other-characters-box box">
-                <h3 class="box-title">Other Characters</h3>
+                <h3 class="box-title" data-i18n="Other Characters">Other Characters</h3>
                 <ul class="contacts-list">
-                    <li><strong>Name</strong><strong style="margin-left: 80px;">Relationship</strong></li>
+                    <li><strong>Name</strong><strong style="margin-left: 80px;" data-i18n="Relationship">Relationship</strong></li>
                     <li><input type="text" id="attr_other_character_name1" name="attr_other_character_name1" style="width: 100px;"><input type="text"  id="attr_other_character_relationship1" name="attr_other_character_relationship1" ></li>
                     <li><input type="text" id="attr_other_character_name2" name="attr_other_character_name2" style="width: 100px;"><input type="text"  id="attr_other_character_relationship2" name="attr_other_character_relationship2" ></li>
                     <li><input type="text" id="attr_other_character_name3" name="attr_other_character_name3" style="width: 100px;"><input type="text"  id="attr_other_character_relationship3" name="attr_other_character_relationship3" ></li>
@@ -490,16 +490,16 @@
             </div>
 
             <div class="spells-box box">
-                <h3 class="box-title">Spells</h3>
+                <h3 class="box-title" data-i18n="Spells">Spells</h3>
                 <div class="spells">
                     <div class="spells-row">
-                        <h5>CV</h5>
-                        <h5>Target</h5>
-                        <h5>Range</h5>
-                        <h5>Duration</h5>
-                        <h5>Formalised</h5>
-                        <h5>Memorised</h5>
-                        <h5>Effect</h5>
+                        <h5 data-i18n="CV">CV</h5>
+                        <h5 data-i18n="Target">Target</h5>
+                        <h5 data-i18n="Range">Range</h5>
+                        <h5 data-i18n="Duration">Duration</h5>
+                        <h5 data-i18n="Formalised">Formalised</h5>
+                        <h5 data-i18n="Memorised">Memorised</h5>
+                        <h5 data-i18n="Effect">Effect</h5>
                     </div>
                     <fieldset class="repeating_spells">
                         <div class="spells-row">
@@ -516,7 +516,7 @@
             </div>
 
             <div class="grim-portent-box box">
-                <h3 class="box-title" x-tooltip="tooltips.grimPortent">Grim Portent</h3>
+                <h3 class="box-title" x-tooltip="tooltips.grimPortent" data-i18n="Grim Portent">Grim Portent</h3>
                 <div class="talents-inputs">
                   <input type="text" id="attr_grim_portent1" name="attr_grim_portent1">
                   <input type="text" id="attr_grim_portent2" name="attr_grim_portent2">
@@ -528,7 +528,7 @@
             </div>
 
             <div class="exacting-test-box box">
-                <h3 class="box-title" x-tooltip="tooltips.exactingTest">Exacting Test Progress</h3>
+                <h3 class="box-title" x-tooltip="tooltips.exactingTest" data-i18n="Exacting Test Progress">Exacting Test Progress</h3>
                 <div class="talents-inputs">
                   <input type="text" id="attr_exacting_test1" name="attr_exacting_test1">
                   <input type="text" id="attr_exacting_test2" name="attr_exacting_test2">
@@ -540,7 +540,7 @@
             </div>
 
             <div class="clues-insights-box box">
-                <h3 class="box-title" x-tooltip="tooltips.cluesAndInsights">Clues and Insights</h3>
+                <h3 class="box-title" x-tooltip="tooltips.cluesAndInsights" data-i18n="Clues and Insights">Clues and Insights</h3>
                 <div class="talents-inputs">
                   <input type="text" id="attr_clues_insights1" name="attr_clues_insights1">
                   <input type="text" id="attr_clues_insights2" name="attr_clues_insights2">
@@ -552,7 +552,7 @@
             </div>
 
             <div class="favours-owed-box box">
-                <h3 class="box-title" x-tooltip="tooltips.favoursOwed">Favours Owed</h3>
+                <h3 class="box-title" x-tooltip="tooltips.favoursOwed" data-i18n="Favours Owed">Favours Owed</h3>
                 <div class="talents-inputs">
                   <input type="text" id="attr_favours_owed1" name="attr_favours_owed1">
                   <input type="text" id="attr_favours_owed2" name="attr_favours_owed2">
@@ -564,7 +564,7 @@
             </div>
 
             <div class="notes-box box">
-                <h3 class="box-title" x-tooltip="tooltips.notes">Notes</h3>
+                <h3 class="box-title" x-tooltip="tooltips.notes" data-i18n="Notes">Notes</h3>
                 <textarea class="notes-textarea" id="attr_notes" name="attr_notes"></textarea>
             </div>
         </div>
@@ -578,46 +578,46 @@
 			<th colspan="2" class="sheet-title"><b>{{ Character Name }}</b> {{selected_skill}}</th>
 		</tr>
 		<tr>
-			<td><span class="sheet-tcat">Skill: </span></td>
+			<td><span class="sheet-tcat" data-i18n="Skill: ">Skill: </span></td>
 			<td><span class="sheet-inlinerollresult">{{skill}}</span></td>
 		</tr>
     <tr>
-			<td><span class="sheet-tcat">Dice Pool: </span></td>
+			<td><span class="sheet-tcat" data-i18n="Dice Pool: ">Dice Pool: </span></td>
 			<td><span class="sheet-inlinerollresult">{{characteristic}}d + {{modifier}}d</span></td>
 		</tr>
     <tr class="sheet-topline">
 			<th colspan="2"><span></span></th>
 		</tr>
     <tr>
-			<td><span class="sheet-tcat">Numbers Rolled:</span></td>
+			<td><span class="sheet-tcat" data-i18n="Numbers Rolled:">Numbers Rolled:</span></td>
 			<td><span class="sheet-inlinerollresult">{{computed::numbers_rolled}}</span></td>
 		</tr>
     <tr>
-			<td><span class="sheet-tcat">Successes:</span></td>
+			<td><span class="sheet-tcat" data-i18n="Successes:">Successes:</span></td>
 			<td><span class="sheet-inlinerollresult">{{computed::successes}}</span></td>
 		</tr>
     {{#rollTotal() glorious 1}}
     <tr>
-			<td><span class="sheet-tcat">Rerolled Failures:</span></td>
+			<td><span class="sheet-tcat" data-i18n="Rerolled Failures:">Rerolled Failures:</span></td>
 			<td><span class="sheet-inlinerollresult">{{computed::glorious_rerolled}}</span></td>
 		</tr>
     <tr>
-			<td><span class="sheet-tcat">Total Successes:</span></td>
+			<td><span class="sheet-tcat" data-i18n="Total Successes:">Total Successes:</span></td>
 			<td><span class="sheet-inlinerollresult">{{computed::total_successes}}</span></td>
 		</tr>
     {{/rollTotal() glorious 1}}
     {{#rollTotal() glorious 2}}
     <tr>
-			<td><span class="sheet-tcat">Rerolled Successes:</span></td>
+			<td><span class="sheet-tcat" data-i18n="Rerolled Successes:">Rerolled Successes:</span></td>
 			<td><span class="sheet-inlinerollresult">{{computed::grim_rerolled}}</span></td>
 		</tr>
     <tr>
-			<td><span class="sheet-tcat">Total Successes:</span></td>
+			<td><span class="sheet-tcat" data-i18n="Total Successes:">Total Successes:</span></td>
 			<td><span class="sheet-inlinerollresult">{{computed::total_successes}}</span></td>
 		</tr>
     {{/rollTotal() glorious 2}}
     <tr>
-			<td><span class="sheet-tcat">Success Type:</span></td>
+			<td><span class="sheet-tcat" data-i18n="Success Type:">Success Type:</span></td>
 			<td><span class="sheet-inlinerollresult">{{computed::success_type}}</span></td>
 		</tr>
 	</table>
@@ -630,50 +630,50 @@
 			<th colspan="2" class="sheet-title"><b>{{ Character Name }}</b> {{name}}</th>
 		</tr>
 		<tr>
-			<td><span class="sheet-tcat">Skill: </span></td>
+			<td><span class="sheet-tcat" data-i18n="Skill: ">Skill: </span></td>
 			<td><span class="sheet-inlinerollresult">{{skill}}</span></td>
 		</tr>
     <tr>
-			<td><span class="sheet-tcat">Dice Pool: </span></td>
+			<td><span class="sheet-tcat" data-i18n="Dice Pool: ">Dice Pool: </span></td>
 			<td><span class="sheet-inlinerollresult">{{dice_pool}}d + {{modifier}}d</span></td>
 		</tr>
     <tr class="sheet-topline">
 			<th colspan="2"><span></span></th>
 		</tr>
     <tr>
-			<td><span class="sheet-tcat">Numbers Rolled:</span></td>
+			<td><span class="sheet-tcat" data-i18n="Numbers Rolled:">Numbers Rolled:</span></td>
 			<td><span class="sheet-inlinerollresult">{{computed::numbers_rolled}}</span></td>
 		</tr>
     <tr>
-			<td><span class="sheet-tcat">Successes:</span></td>
+			<td><span class="sheet-tcat" data-i18n="Successes:">Successes:</span></td>
 			<td><span class="sheet-inlinerollresult">{{computed::successes}}</span></td>
 		</tr>
     {{#rollTotal() glorious 1}}
     <tr>
-			<td><span class="sheet-tcat">Rerolled Failures:</span></td>
+			<td><span class="sheet-tcat" data-i18n="Rerolled Failures:">Rerolled Failures:</span></td>
 			<td><span class="sheet-inlinerollresult">{{computed::glorious_rerolled}}</span></td>
 		</tr>
     <tr>
-			<td><span class="sheet-tcat">Total Successes:</span></td>
+			<td><span class="sheet-tcat" data-i18n="Total Successes:">Total Successes:</span></td>
 			<td><span class="sheet-inlinerollresult">{{computed::total_successes}}</span></td>
 		</tr>
     {{/rollTotal() glorious 1}}
     {{#rollTotal() glorious 2}}
     <tr>
-			<td><span class="sheet-tcat">Rerolled Successes:</span></td>
+			<td><span class="sheet-tcat" data-i18n="Rerolled Successes:">Rerolled Successes:</span></td>
 			<td><span class="sheet-inlinerollresult">{{computed::grim_rerolled}}</span></td>
 		</tr>
     <tr>
-			<td><span class="sheet-tcat">Total Successes:</span></td>
+			<td><span class="sheet-tcat" data-i18n="Total Successes:">Total Successes:</span></td>
 			<td><span class="sheet-inlinerollresult">{{computed::total_successes}}</span></td>
 		</tr>
     {{/rollTotal() glorious 2}}
     <tr>
-			<td><span class="sheet-tcat">Weapon Damage:</span></td>
+			<td><span class="sheet-tcat" data-i18n="Weapon Damage:">Weapon Damage:</span></td>
 			<td><span class="sheet-inlinerollresult">{{computed::damage}} - Opponent SL</span></td>
 		</tr>
     <tr>
-			<td><span class="sheet-tcat">Traits:</span></td>
+			<td><span class="sheet-tcat" data-i18n="Traits:">Traits:</span></td>
 			<td><span class="sheet-inlinerollresult">{{traits}}</span></td>
 		</tr>
 	</table>
diff --git a/TheOldWorldRPG/translation.json b/TheOldWorldRPG/translation.json
new file mode 100644
index 0000000000..9fe09796b2
--- /dev/null
+++ b/TheOldWorldRPG/translation.json
@@ -0,0 +1,107 @@
+{
+	"TOW RPG Character Sheet": "TOW RPG Character Sheet",
+	"Name": "Name",
+	"Origin": "Origin",
+	"Career": "Career",
+	"Fate": "Fate",
+	"Remaining": "Remaining",
+	"Maximum": "Maximum",
+	"XP": "XP",
+	"Current": "Current",
+	"Total": "Total",
+	"Speed": "Speed",
+	"Import Sheet": "Import Sheet",
+	"Clear Sheet": "Clear Sheet",
+	"Export Sheet": "Export Sheet",
+	"Print Sheet": "Print Sheet",
+	"WS": "WS",
+	"WEAPON SKILL": "WEAPON SKILL",
+	"Melee": "Melee",
+	"Defence": "Defence",
+	"BS": "BS",
+	"BALLISTIC SKILL": "BALLISTIC SKILL",
+	"Shooting": "Shooting",
+	"Throwing": "Throwing",
+	"S": "S",
+	"STRENGTH": "STRENGTH",
+	"Brawn": "Brawn",
+	"Toil": "Toil",
+	"T": "T",
+	"TOUGHNESS": "TOUGHNESS",
+	"Survival": "Survival",
+	"Endurance": "Endurance",
+	"I": "I",
+	"Initiative": "Initiative",
+	"Awareness": "Awareness",
+	"Dexterity": "Dexterity",
+	"Ag": "Ag",
+	"AGILITY": "AGILITY",
+	"Athletics": "Athletics",
+	"Stealth": "Stealth",
+	"RE": "RE",
+	"REASON": "REASON",
+	"Willpower": "Willpower",
+	"Recall": "Recall",
+	"Fel": "Fel",
+	"FELLOWSHIP": "FELLOWSHIP",
+	"Leadership": "Leadership",
+	"Charm": "Charm",
+	"Lore": "Lore",
+	"Talents": "Talents",
+	"Appearance": "Appearance",
+	"Coin": "Coin",
+	"Status": "Status",
+	"Brass": "Brass",
+	"Silver": "Silver",
+	"Gold": "Gold",
+	"Resilience": "Resilience",
+	"Toughness + Armour": "Toughness + Armour",
+	"Protection": "Protection",
+	"Armour": "Armour",
+	"Weapons": "Weapons",
+	"Action": "Action",
+	"Range": "Range",
+	"Dice Pool": "Dice Pool",
+	"Skill": "Skill",
+	"Damage": "Damage",
+	"1h/2h": "1h/2h",
+	"Traits": "Traits",
+	"Roll": "Roll",
+	"Wounds": "Wounds",
+	"Treated": "Treated",
+	"Conditions": "Conditions",
+	"Staggered": "Staggered",
+	"Trappings": "Trappings",
+	"Assets": "Assets",
+	"Contacts": "Contacts",
+	"Relationship": "Relationship",
+	"Magic": "Magic",
+	"Wizard Level": "Wizard Level",
+	"Roll to Cast": "Roll to Cast",
+	"Cast": "Cast",
+	"Miscast Pool": "Miscast Pool",
+	"Miscast Effects": "Miscast Effects",
+	"Other Characters": "Other Characters",
+	"Spells": "Spells",
+	"CV": "CV",
+	"Target": "Target",
+	"Duration": "Duration",
+	"Formalised": "Formalised",
+	"Memorised": "Memorised",
+	"Effect": "Effect",
+	"Grim Portent": "Grim Portent",
+	"Exacting Test Progress": "Exacting Test Progress",
+	"Clues and Insights": "Clues and Insights",
+	"Favours Owed": "Favours Owed",
+	"Notes": "Notes",
+	"Skill: ": "Skill: ",
+	"Dice Pool: ": "Dice Pool: ",
+	"Numbers Rolled:": "Numbers Rolled:",
+	"Successes:": "Successes:",
+	"Success Type:": "Success Type:",
+	"Weapon Damage:": "Weapon Damage:",
+	"Traits:": "Traits:",
+	"Rerolled Failures:": "Rerolled Failures:",
+	"Rerolled Successes:": "Rerolled Successes:",
+	"Total Successes:": "Total Successes:"
+}
\ No newline at end of file