mirror of
https://github.com/Nighthawk42/roll20-character-sheets.git
synced 2026-08-30 19:52:29 +00:00
841 lines
31 KiB
HTML
841 lines
31 KiB
HTML
|
|
<div class="row"><!-- TITLE ROW -->
|
|
<div class="empty"></div>
|
|
<div class=""><br>
|
|
<h1 style="font-family: patrick hand; text-shadow: 4px 4px 8px rgba(0,0,0,.8); color: indigo; text-decoration: underline"><em>To Change</em></h1>
|
|
</div>
|
|
<div >
|
|
|
|
<p style="font-size:8px; float: right"><em>To Change</em> by Ulysses Duckler & Ewen Albright (https://usducktape.itch.io/to-change)</p>
|
|
<br>
|
|
<p style="font-size:8px; float: right">R20 Character Sheet V2.5</p>
|
|
</div>
|
|
</div>
|
|
<br>
|
|
<br>
|
|
|
|
<div class="row"><!-- NAME ROW -->
|
|
<div class="flex-end">
|
|
<h3>Character name:</h3>
|
|
</div>
|
|
<div class="flex-start">
|
|
<input type="text" name="attr_character_name">
|
|
</div>
|
|
|
|
<div class="flex-end">
|
|
<h3>Story:</h3>
|
|
</div>
|
|
<div class="flex-start">
|
|
<input type="text" name="attr_story_title">
|
|
</div>
|
|
</div>
|
|
|
|
<br>
|
|
<br>
|
|
<div class="row"><!-- CARD ROW -->
|
|
<div class="flex-column align-center" style="width: 33%"><!-- FACE CARD -->
|
|
<h4>Face card:</h4>
|
|
<select name="attr_facecard" class="cardpicker" title="select face card">
|
|
<option value="default" selected disabled>- Select your Face card -</option>
|
|
<option value="thefool">The Fool</option>
|
|
<option value="themagician">The Magician</option>
|
|
<option value="thehighpriestess">The High Priestess</option>
|
|
<option value="theempress">The Empress</option>
|
|
<option value="theemperor">The Emperor</option>
|
|
<option value="thehierophant">The Hierophant</option>
|
|
<option value="thelovers">The Lovers</option>
|
|
<option value="thechariot">The Chariot</option>
|
|
<option value="strength">Strength</option>
|
|
<option value="thehermit">The Hermit</option>
|
|
<option value="wheeloffortune">Wheel of Fortune</option>
|
|
<option value="justice">Justice</option>
|
|
<option value="thehangedman">The Hanged Man</option>
|
|
<option value="death">Death</option>
|
|
<option value="temperance">Temperance</option>
|
|
<option value="thedevil">The Devil</option>
|
|
<option value="thetower">The Tower</option>
|
|
<option value="thestar">The Star</option>
|
|
<option value="themoon">The Moon</option>
|
|
<option value="thesun">The Sun</option>
|
|
<option value="judgement">Judgement</option>
|
|
<option value="theworld">The World</option>
|
|
</select>
|
|
<div class="cardtext">
|
|
|
|
<input type="hidden" class="sheet-facecardtoggle" name="attr_facecard" value="default" />
|
|
|
|
<div class="sheet-default" class="facetext">
|
|
<span>Your Face card gives you a special ability associated with that card.</span>
|
|
</div>
|
|
|
|
<div class="sheet-thefool" class="facetext">
|
|
<span>Whenever you fail on a draw, if The Fool is in the discard pile, return it to the deck and reshuffle.</span>
|
|
</div>
|
|
|
|
<div class="sheet-themagician" class="facetext">
|
|
<span>The Magician gives you success on all attributes, and your success is fantastical, appearing as a miracle to the untrained eye.</span>
|
|
</div>
|
|
|
|
<div class="sheet-thehighpriestess" class="facetext">
|
|
<span>The High Priestess gives you success on all attributes, and your success comes from your past, sparking a lost memory.</span>
|
|
</div>
|
|
|
|
<div class="sheet-theempress" class="facetext">
|
|
<span>The Empress gives you success on all attributes, and your success is for the benefit of others, shared with everyone around you.</span>
|
|
</div>
|
|
|
|
<div class="sheet-theemperor" class="facetext">
|
|
<span>The Emperor gives you success on all attributes, and your success imposes your will over others, marking you as a leader.</span>
|
|
</div>
|
|
|
|
<div class="sheet-thehierophant" class="facetext">
|
|
<span>The Hierophant gives you success on all attributes, and your success is instructive, teaching an unforgettable lesson.</span>
|
|
</div>
|
|
|
|
<div class="sheet-thelovers" class="facetext">
|
|
<span>The Lovers gives you success on all attributes, and your success draws infatuation towards you, feeding the flame of love.</span>
|
|
</div>
|
|
|
|
<div class="sheet-thechariot" class="facetext">
|
|
<span>The Chariot gives you success on all attributes, and your success is undeniable; nobody can doubt it.</span>
|
|
</div>
|
|
|
|
<div class="sheet-strength" class="facetext">
|
|
<span>Strength gives you success on all attributes, and your success feels superhuman, pulsing with energy and raw power.</span>
|
|
</div>
|
|
|
|
<div class="sheet-thehermit" class="facetext">
|
|
<span>The Hermit gives you success on all attributes, and your success is yours alone, no one else can take credit for your actions.</span>
|
|
</div>
|
|
|
|
<div class="sheet-wheeloffortune" class="facetext">
|
|
<span>Wheel of Fortune gives you success on all attributes, and your success signals a change in the tides of fortune.</span>
|
|
</div>
|
|
|
|
<div class="sheet-justice" class="facetext">
|
|
<span>Whenever your change cross is horizontally or vertically symmetrical with changed attributes, you reveal one additional card on all your draws.</span>
|
|
</div>
|
|
|
|
<div class="sheet-thehangedman" class="facetext">
|
|
<span>The Hanged Man gives you success on all attributes, and your success works in ways that only you can understand.</span>
|
|
</div>
|
|
|
|
<div class="sheet-death" class="facetext">
|
|
<span>Whenever a card is used and discarded, you can make it become your face card, gaining its ability, and replacing your current face card.</span>
|
|
</div>
|
|
|
|
<div class="sheet-temperance" class="facetext">
|
|
<span>Whenever you take a change, you can choose to make it permanent.</span>
|
|
</div>
|
|
|
|
<div class="sheet-thedevil" class="facetext">
|
|
<span>When you use The Devil, you decide how many attribute points are changed and which ones, even ones that are out of order.</span>
|
|
</div>
|
|
|
|
<div class="sheet-thetower" class="facetext">
|
|
<span>After you use a card, you discard all the revealed cards (except Death and Temperance) instead of just discarding the one you used.</span>
|
|
</div>
|
|
|
|
<div class="sheet-thestar" class="facetext">
|
|
<span>The Star gives you success on all attributes, and your success is a stroke of sheer genius.</span>
|
|
</div>
|
|
|
|
<div class="sheet-themoon" class="facetext">
|
|
<span>Once per draw, you can treat any card (except Death or Temperance) as if it were The Moon.</span>
|
|
</div>
|
|
|
|
<div class="sheet-thesun" class="facetext">
|
|
<span>Whenever any player succeeds on a draw, after the deck is shuffled, you can ask the Storyteller to let you look at the top card of the deck.</span>
|
|
</div>
|
|
<div class="sheet-judgement" class="facetext">
|
|
<span>Whenever Judgement is used, you are the one who decides success or failure, instead of the Storyteller.</span>
|
|
</div>
|
|
|
|
<div class="sheet-theworld" class="facetext">
|
|
<span>When you use The World, take any number of cards from the discard pile (other than The World) and return them to the deck, instead of just one.</span>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
<div class="flex-column align-center" style="width: 33%"><!-- RISING CARD -->
|
|
<h4>Rising card:</h4>
|
|
<select class="cardpicker" name="attr_risingcard">
|
|
<option value="default" selected disabled>- Select your Rising card -</option>
|
|
<option value="thefool">The Fool</option>
|
|
<option value="themagician">The Magician</option>
|
|
<option value="thehighpriestess">The High Priestess</option>
|
|
<option value="theempress">The Empress</option>
|
|
<option value="theemperor">The Emperor</option>
|
|
<option value="thehierophant">The Hierophant</option>
|
|
<option value="thelovers">The Lovers</option>
|
|
<option value="thechariot">The Chariot</option>
|
|
<option value="strength">Strength</option>
|
|
<option value="thehermit">The Hermit</option>
|
|
<option value="wheeloffortune">Wheel of Fortune</option>
|
|
<option value="justice">Justice</option>
|
|
<option value="thehangedman">The Hanged Man</option>
|
|
<option value="death" disabled>Death (cannot be a Rising card)</option>
|
|
<option value="temperance">Temperance</option>
|
|
<option value="thedevil">The Devil</option>
|
|
<option value="thetower">The Tower</option>
|
|
<option value="thestar">The Star</option>
|
|
<option value="themoon">The Moon</option>
|
|
<option value="thesun">The Sun</option>
|
|
<option value="judgement">Judgement</option>
|
|
<option value="theworld">The World</option>
|
|
</select>
|
|
<span class="cardtext">
|
|
When you reveal your Rising card, you move closer to reaching your goals and reveal another card into the current hand.
|
|
</span>
|
|
|
|
</div>
|
|
|
|
<div class="flex-column align-center" style="width: 33%"><!-- FALLING CARD -->
|
|
<h4>Falling card:</h4>
|
|
<select class="cardpicker" name="attr_fallingcard">
|
|
<option value="default" selected disabled>- Select your Falling card -</option>
|
|
<option value="thefool">The Fool</option>
|
|
<option value="themagician">The Magician</option>
|
|
<option value="thehighpriestess">The High Priestess</option>
|
|
<option value="theempress">The Empress</option>
|
|
<option value="theemperor">The Emperor</option>
|
|
<option value="thehierophant">The Hierophant</option>
|
|
<option value="thelovers">The Lovers</option>
|
|
<option value="thechariot">The Chariot</option>
|
|
<option value="strength">Strength</option>
|
|
<option value="thehermit">The Hermit</option>
|
|
<option value="wheeloffortune">Wheel of Fortune</option>
|
|
<option value="justice">Justice</option>
|
|
<option value="thehangedman">The Hanged Man</option>
|
|
<option value="death" disabled>Death (cannot be a Falling card)</option>
|
|
<option value="temperance">Temperance</option>
|
|
<option value="thedevil">The Devil</option>
|
|
<option value="thetower">The Tower</option>
|
|
<option value="thestar">The Star</option>
|
|
<option value="themoon">The Moon</option>
|
|
<option value="thesun">The Sun</option>
|
|
<option value="judgement">Judgement</option>
|
|
<option value="theworld">The World</option>
|
|
</select>
|
|
<span class="cardtext">
|
|
When you reveal your Falling card, you move closer to the source of your fears and must shuffle the first card revealed for the hand back into the deck.
|
|
</span>
|
|
</div>
|
|
</div><!-- END CARD ROW -->
|
|
|
|
|
|
<div>
|
|
<label class="switch large change-gender">
|
|
<input class="switch-input large change-gender" name="attr_cross-wheel" type="checkbox">
|
|
<span class="switch-label large change-gender" data-on="Gender Wheel" data-off="Change Cross"></span>
|
|
<span class="switch-handle large change-gender"></span>
|
|
</label>
|
|
|
|
<input type="checkbox" class="hidden cross-wheel" name="attr_cross-wheel">
|
|
|
|
<div class="changetab">
|
|
<div class="row"><!-- ATTRIBUTE HEADER -->
|
|
<h2 style="float: left; font-family: contrail one; text-shadow: 4px 4px 8px rgba(0,0,0,.8);">Physical Aptitude</h2>
|
|
|
|
<div style="width:280px"></div>
|
|
|
|
<h2 style="float: right; font-family: contrail one; text-shadow: 4px 4px 8px rgba(0,0,0,.8);">Mental Aptitude</h2>
|
|
|
|
</div>
|
|
<div class="row"><!-- CHANGE ROW APTITUDE 1 -->
|
|
|
|
<div class="enclosure">
|
|
<input type="checkbox" name="attr_pa1changed" class="changecheck" style="display:none">
|
|
<input type="checkbox" name="attr_pa1damaged" class="damagecheck" style="display:none">
|
|
<div class="box phys apt">
|
|
<span name="attr_pacross1" class="changetext">
|
|
</span>
|
|
</div>
|
|
|
|
|
|
<div class="wrapper">
|
|
<div class="inner"><input type="checkbox" style= "margin:4px" name="attr_pa1changed"> <h3>Changed</h3></div>
|
|
<div class="inner"> <input type="checkbox" style= "margin:4px" name="attr_pa1damaged"> <h3>Damaged</h3></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="spacer"></div>
|
|
|
|
|
|
<div class="enclosure">
|
|
<div class="wrapper">
|
|
<div class="inner"><h3>Changed</h3><input type="checkbox" style= "margin-left:4px" name="attr_ma1changed"></div>
|
|
<div class="inner"><h3>Damaged</h3><input type="checkbox" style= "margin-left:4px" name="attr_ma1damaged"></div>
|
|
</div>
|
|
<input type="checkbox" name="attr_ma1changed" class="changecheck" style="display:none">
|
|
<input type="checkbox" name="attr_ma1damaged" class="damagecheck" style="display:none">
|
|
<div class="box ment apt">
|
|
<span name="attr_macross1" class="changetext">
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<br>
|
|
|
|
<div class="row second space-between"><!-- CHANGE ROW APTITUDE 2 -->
|
|
|
|
<div class="enclosure">
|
|
<input type="checkbox" name="attr_pa2changed" class="changecheck" style="display:none">
|
|
<input type="checkbox" name="attr_pa2damaged" class="damagecheck" style="display:none">
|
|
<div class="box phys apt">
|
|
<span name="attr_pacross2" class="changetext">
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="wrapper">
|
|
<div class="inner"><input type="checkbox" style= "margin:4px" name="attr_pa2changed"> <h3>Changed</h3></div>
|
|
<div class="inner"><input type="checkbox" style= "margin:4px" name="attr_pa2damaged"> <h3>Damaged</h3></div>
|
|
</div>
|
|
|
|
|
|
<div class="spacer"></div>
|
|
|
|
|
|
<div class="enclosure">
|
|
<div class="wrapper">
|
|
<div class="inner"><h3>Changed</h3><input type="checkbox" style= "margin-left:4px" name="attr_ma2changed"></div>
|
|
<div class="inner"><h3>Damaged</h3><input type="checkbox" style= "margin-left:4px" name="attr_ma2damaged"></div>
|
|
</div>
|
|
<input type="checkbox" name="attr_ma2changed" class="changecheck" style="display:none">
|
|
<input type="checkbox" name="attr_ma2damaged" class="damagecheck" style="display:none">
|
|
<div class="box ment apt">
|
|
<span name="attr_macross2" class="changetext">
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<br>
|
|
|
|
<div class="row third space-between"><!-- CHANGE ROW APTITUDE 3 -->
|
|
|
|
<div class="enclosure">
|
|
<input type="checkbox" name="attr_pa3changed" class="changecheck" style="display:none">
|
|
<input type="checkbox" name="attr_pa3damaged" class="damagecheck" style="display:none">
|
|
<div class="box phys apt">
|
|
<span name="attr_pacross3" class="changetext">
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="wrapper">
|
|
<div class="inner"><input type="checkbox" style= "margin:4px" name="attr_pa3changed"> <h3>Changed</h3></div>
|
|
<div class="inner"> <input type="checkbox" style= "margin:4px" name="attr_pa3damaged"> <h3>Damaged</h3></div>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="enclosure">
|
|
<div class="wrapper">
|
|
<div class="inner"><h3>Changed</h3><input type="checkbox" style= "margin-left:4px" name="attr_ma3changed"></div>
|
|
<div class="inner"><h3>Damaged</h3><input type="checkbox" style= "margin-left:4px" name="attr_ma3damaged"></div>
|
|
</div>
|
|
<input type="checkbox" name="attr_ma3changed" class="changecheck" style="display:none">
|
|
<input type="checkbox" name="attr_ma3damaged" class="damagecheck" style="display:none">
|
|
<div class="box ment apt">
|
|
<span name="attr_macross3" class="changetext">
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="row" style="align-items: flex-end; font-family: contrail one; max-height:10px; text-shadow: 4px 4px 8px rgba(0,0,0,.8);"> <h2>Permanence</h2></div>
|
|
|
|
|
|
<div class="row space-between"><!-- CHANGE ROW PERMANENCE -->
|
|
|
|
<div class="empty" style="width: 10%"></div>
|
|
|
|
<div class="center">
|
|
<input type="checkbox" name="attr_permchanged" class="changecheck" style="display:none">
|
|
<input type="checkbox" name="attr_permdamaged" class="damagecheck" style="display:none">
|
|
<div class="box perm">
|
|
<span name="attr_permcross" class="changetext">
|
|
</span></div>
|
|
</div>
|
|
|
|
<div style="justify-content: flex-start">
|
|
<div class="wrapper">
|
|
|
|
<div class="inner"><input type="checkbox" style= "margin:4px" name="attr_permchanged"> <h3>Changed</h3></div>
|
|
<div class="inner"> <input type="checkbox" style= "margin:4px" name="attr_permdamaged"> <h3>Damaged</h3></div>
|
|
|
|
</div></div>
|
|
</div>
|
|
|
|
|
|
<div class="row perm" style="align-items: flex-end; font-family: contrail one; max-height:10px">
|
|
<input type="checkbox" name="attr_permchanged" class="changecheck" style="display:none">
|
|
<span style="font-size: 30px; text-shadow: 4px 4px 8px rgba(0,0,0,.8);" class="perm"><em>no going back</em></span>
|
|
</div>
|
|
|
|
|
|
<div class="row third space-between"><!--CHANGE ROW FORTITUDE 3 -->
|
|
|
|
|
|
<div class="enclosure">
|
|
<input type="checkbox" name="attr_mf3changed" class="changecheck" style="display:none">
|
|
<input type="checkbox" name="attr_mf3damaged" class="damagecheck" style="display:none">
|
|
<div class="box ment fort">
|
|
<span name="attr_mfcross3" class="changetext">
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="wrapper">
|
|
<div class="inner"><input type="checkbox" style= "margin:4px" name="attr_mf3changed"> <h3>Changed</h3></div>
|
|
<div class="inner"> <input type="checkbox" style= "margin:4px" name="attr_mf3damaged"> <h3>Damaged</h3></div>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="enclosure">
|
|
<div class="wrapper">
|
|
<div class="inner"><h3>Changed</h3><input type="checkbox" style= "margin-left:4px" name="attr_pf3changed"></div>
|
|
<div class="inner"><h3>Damaged</h3><input type="checkbox" style= "margin-left:4px" name="attr_pf3damaged"></div>
|
|
</div>
|
|
<input type="checkbox" name="attr_pf3changed" class="changecheck" style="display:none">
|
|
<input type="checkbox" name="attr_pf3damaged" class="damagecheck" style="display:none">
|
|
<div class="box phys fort">
|
|
<span name="attr_pfcross3" class="changetext">
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<br>
|
|
|
|
<div class="row second space-between"><!-- CHANGE ROW FORTITUDE 2 -->
|
|
|
|
<div class="enclosure">
|
|
<input type="checkbox" name="attr_mf2changed" class="changecheck" style="display:none">
|
|
<input type="checkbox" name="attr_mf2damaged" class="damagecheck" style="display:none">
|
|
<div class="box ment fort">
|
|
<span name="attr_mfcross2" class="changetext">
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="wrapper">
|
|
<div class="inner"><input type="checkbox" style= "margin:4px" name="attr_mf2changed"> <h3>Changed</h3></div>
|
|
<div class="inner"> <input type="checkbox" style= "margin:4px" name="attr_mf2damaged"> <h3>Damaged</h3></div>
|
|
</div>
|
|
|
|
|
|
<div class="spacer"></div>
|
|
|
|
|
|
<div class="enclosure">
|
|
<div class="wrapper">
|
|
<div class="inner"><h3>Changed</h3><input type="checkbox" style= "margin-left:4px" name="attr_pf2changed"></div>
|
|
<div class="inner"><h3>Damaged</h3><input type="checkbox" style= "margin-left:4px" name="attr_pf2damaged"></div>
|
|
</div>
|
|
<input type="checkbox" name="attr_pf2changed" class="changecheck" style="display:none">
|
|
<input type="checkbox" name="attr_pf2damaged" class="damagecheck" style="display:none">
|
|
<div class="box phys fort">
|
|
<span name="attr_pfcross2" class="changetext">
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<br>
|
|
|
|
<div class="row"><!-- CHANGE ROW FORTITUDE 1 -->
|
|
|
|
<div class="enclosure">
|
|
<input type="checkbox" name="attr_mf1changed" class="changecheck" style="display:none">
|
|
<input type="checkbox" name="attr_mf1damaged" class="damagecheck" style="display:none">
|
|
<div class="box ment fort">
|
|
<span name="attr_mfcross1" class="changetext">
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="wrapper">
|
|
<div class="inner"><input type="checkbox" style= "margin:4px" name="attr_mf1changed"> <h3>Changed</h3></div>
|
|
<div class="inner"> <input type="checkbox" style= "margin:4px" name="attr_mf1damaged"> <h3>Damaged</h3></div>
|
|
</div>
|
|
|
|
|
|
<div class="spacer"></div>
|
|
|
|
|
|
<div class="enclosure">
|
|
<div class="wrapper">
|
|
<div class="inner"><h3>Changed</h3><input type="checkbox" style= "margin-left:4px" name="attr_pf1changed"></div>
|
|
<div class="inner"><h3>Damaged</h3><input type="checkbox" style= "margin-left:4px" name="attr_pf1damaged"></div>
|
|
</div>
|
|
<input type="checkbox" name="attr_pf1changed" class="changecheck" style="display:none">
|
|
<input type="checkbox" name="attr_pf1damaged" class="damagecheck" style="display:none">
|
|
<div class="box phys fort">
|
|
<span name="attr_pfcross1" class="changetext">
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="row"><!-- ATTRIBUTE FOOTER -->
|
|
|
|
<h2 style="float: left; font-family: contrail one; text-shadow: 4px 4px 8px rgba(0,0,0,.8);">Mental Fortitude</h2>
|
|
|
|
<div style="width:280px"></div>
|
|
|
|
<h2 style="float: right; font-family: contrail one; text-shadow: 4px 4px 8px rgba(0,0,0,.8);">Physical Fortitude</h2>
|
|
|
|
</div>
|
|
|
|
<br>
|
|
|
|
|
|
<div class="row input-menu">
|
|
|
|
<div>
|
|
|
|
|
|
<div class="bar cross">
|
|
<label class="switch small">
|
|
<input class="switch-input small cross-console" name="attr_console-switch" type="checkbox">
|
|
<span class="switch-label small cross-console"></span>
|
|
<span class="switch-handle small cross-console"></span>
|
|
</label> <h4> ← edit change cross</h4>
|
|
|
|
<input type="checkbox" class="hidden cross-console" name="attr_console-switch">
|
|
|
|
<div style="margin:auto" class="opened-console"><h1 =>↓ ↓ ↓</h1></div>
|
|
|
|
</div>
|
|
|
|
<input type="checkbox" class="hidden cross-console" name="attr_console-switch">
|
|
|
|
<div class="opened-console">
|
|
|
|
<div class="text-input" style="display:flex flex-direction:column align-items:center">
|
|
<h3 style="display:block">Physical Aptitude</h3>
|
|
<textarea name='attr_physapttext'
|
|
placeholder="Enter Physical Aptitude attribute changes here, starting with the first change in each attribute and separating each change with '|'."></textarea>
|
|
</div>
|
|
|
|
<div class="text-input" style="display:flex flex-direction:column align-items:center">
|
|
<h3 style="display:block">Mental Aptitude</h3>
|
|
<textarea name='attr_mentapttext'
|
|
placeholder="Enter Mental Aptitude attribute changes here, starting with the first change in each attribute and separating each change with '|'."></textarea>
|
|
</div>
|
|
|
|
<div class="text-input" style="display:flex flex-direction:column align-items:center">
|
|
<h3 style="display:block">Physical Fortitude</h3>
|
|
<textarea name='attr_physforttext'
|
|
placeholder="Enter Physical Fortitude attribute changes here, starting with the first change in each attribute and separating each change with '|'."></textarea>
|
|
</div>
|
|
|
|
<div class="text-input" style="display:flex flex-direction:column align-items:center">
|
|
<h3 style="display:block">Mental Fortitude</h3>
|
|
<textarea name='attr_mentforttext'
|
|
placeholder="Enter Mental Fortitude attribute changes here, starting with the first change in each attribute and separating each change with '|'."></textarea>
|
|
</div>
|
|
|
|
<div class="text-input" style="display:flex flex-direction:column align-items:center">
|
|
<h3 style="display:block">Permanence</h3>
|
|
<textarea name='attr_permtext'
|
|
placeholder="Enter the Permanence attribute change here."></textarea>
|
|
</div>
|
|
<br>
|
|
<div class="flex-column center">
|
|
<button type="action" class="submit" name="act_submit">SUBMIT</button><br>
|
|
<div style="max-width: 400px; text-align: center">
|
|
<h4>Enter attribute changes here, starting with the first change in each attribute and separating each change with "|".</h4>
|
|
<br>
|
|
<h4>Click "SUBMIT" to add data to the Change Cross.</h4>
|
|
</div>
|
|
</div>
|
|
|
|
<input type="hidden" name="attr_pacross1"
|
|
value="Click the switch at the bottom of the sheet to edit the Change Cross">
|
|
<input type="hidden" name="attr_macross1"
|
|
value="Click the switch at the bottom of the sheet to edit the Change Cross">
|
|
<input type="hidden" name="attr_pacross2"
|
|
value="Click the switch at the bottom of the sheet to edit the Change Cross">
|
|
<input type="hidden" name="attr_macross2"
|
|
value="Click the switch at the bottom of the sheet to edit the Change Cross">
|
|
<input type="hidden" name="attr_pacross3"
|
|
value="Click the switch at the bottom of the sheet to edit the Change Cross">
|
|
<input type="hidden" name="attr_macross3"
|
|
value="Click the switch at the bottom of the sheet to edit the Change Cross">
|
|
<input type="hidden" name="attr_pfcross3"
|
|
value="Click the switch at the bottom of the sheet to edit the Change Cross">
|
|
<input type="hidden" name="attr_mfcross3"
|
|
value="Click the switch at the bottom of the sheet to edit the Change Cross">
|
|
<input type="hidden" name="attr_pfcross2"
|
|
value="Click the switch at the bottom of the sheet to edit the Change Cross">
|
|
<input type="hidden" name="attr_mfcross2"
|
|
value="Click the switch at the bottom of the sheet to edit the Change Cross">
|
|
<input type="hidden" name="attr_pfcross1"
|
|
value="Click the switch at the bottom of the sheet to edit the Change Cross">
|
|
<input type="hidden" name="attr_mfcross1"
|
|
value="Click the switch at the bottom of the sheet to edit the Change Cross">
|
|
<input type="hidden" name="attr_permcross"
|
|
value="Click the switch at the bottom of the sheet to edit the Change Cross">
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<div class="gendertab">
|
|
<div class="bar gender">
|
|
<h4>switch colors→ </h4>
|
|
<label class="switch small gender-colors">
|
|
<input class="switch-input small switch gender-colors" name="attr_gendercolor" type="checkbox">
|
|
<span class="switch-label small gender-colors"></span>
|
|
<span class="switch-handle small gender-colors"></span>
|
|
</label>
|
|
|
|
<!--<label class="switch">
|
|
<input type="checkbox" class="switch colors">
|
|
<span class="slider round"></span>
|
|
</label> <div style="position: absolute; margin-right:500px"><h2 style="color: plum">←switch colors</h2></div>
|
|
<div></div>-->
|
|
</div>
|
|
<div class="holder">
|
|
|
|
<div class="cluster phys apt">
|
|
<div class="sleeve"><input type="checkbox" name="attr_x" class="right gender checkbox x">
|
|
<span class="checkmark blue-pink">X</span><div></div>
|
|
<input type="text" class="gender text" value="Body hair growth/loss" name="attr_x-text">
|
|
</div>
|
|
<div class="sleeve"><input type="checkbox" name="attr_xi" class="right gender checkbox xi">
|
|
<span class="checkmark blue-pink">XI</span><div></div>
|
|
<input type="text" class="gender text" value="Breast growth/loss" name="attr_xi-text">
|
|
</div>
|
|
<div class="sleeve"><input type="checkbox" name="attr_xii" class="gender checkbox xii">
|
|
<span class="checkmark blue-pink">XII</span><div></div>
|
|
<input type="text" class="gender text" value="External genitalia changes" name="attr_xii-text">
|
|
</div>
|
|
<span class="changetype phys">PA</span>
|
|
</div>
|
|
|
|
<div class="wheel">
|
|
|
|
|
|
|
|
<input type="checkbox" name="attr_xi" class="hidden gender">
|
|
<div class="dot xi blue-pink">XI</div>
|
|
|
|
<input type="checkbox" name="attr_xii" class="hidden gender">
|
|
<div class="dot xii blue-pink">XII</div>
|
|
|
|
<input type="checkbox" name="attr_i" class="hidden gender">
|
|
<div class="dot i blue-pink">I</div>
|
|
|
|
<input type="checkbox" name="attr_ii" class="hidden gender">
|
|
<div class="dot ii blue-pink">II</div>
|
|
|
|
<input type="checkbox" name="attr_iii" class="hidden gender">
|
|
<div class="dot iii blue-pink">III</div>
|
|
|
|
<input type="checkbox" name="attr_iv" class="hidden gender">
|
|
<div class="dot iv blue-pink">IV</div>
|
|
|
|
<input type="checkbox" name="attr_v" class="hidden gender">
|
|
<div class="dot v blue-pink">V</div>
|
|
|
|
<input type="checkbox" name="attr_vi" class="hidden gender">
|
|
<div class="dot vi blue-pink">VI</div>
|
|
|
|
<input type="checkbox" name="attr_vii" class="hidden gender">
|
|
<div class="dot vii blue-pink">VII</div>
|
|
|
|
<input type="checkbox" name="attr_viii" class="hidden gender">
|
|
<div class="dot viii blue-pink">VIII</div>
|
|
|
|
<input type="checkbox" name="attr_ix" class="hidden gender">
|
|
<div class="dot ix blue-pink">IX</div>
|
|
|
|
<input type="checkbox" name="attr_x" class="hidden gender">
|
|
<div class="dot x blue-pink">X</div>
|
|
</div>
|
|
|
|
|
|
<div class="cluster ment apt">
|
|
<div class="sleeve">
|
|
<input type="checkbox" name="attr_i" data-stat="i" class="gender checkbox i">
|
|
<span class="checkmark blue-pink">I</span><div></div>
|
|
<input type="text" class="gender text" value="Voice changes" name="attr_i-text">
|
|
</div>
|
|
<div class="sleeve">
|
|
<input type="checkbox" name="attr_ii" data-stat="ii" class="gender checkbox ii">
|
|
<span class="checkmark blue-pink">II</span><div></div>
|
|
<input type="text" class="gender text" value="Skin texture/sensitivity" name="attr_ii-text">
|
|
</div>
|
|
<div class="sleeve">
|
|
<input type="checkbox" name="attr_iii" data-stat="iii" class="gender checkbox iii">
|
|
<span class="checkmark blue-pink">III</span><div></div>
|
|
<input type="text" class="gender text" value="Body odor/smell changes" name="attr_iii-text">
|
|
</div>
|
|
<span class="changetype ment">MA</span>
|
|
</div>
|
|
|
|
|
|
<div class="cluster ment fort">
|
|
<span class="changetype ment">MF</span>
|
|
<div class="sleeve"><input type="checkbox" name="attr_vii" data-stat="vii" class="gender checkbox vii">
|
|
<span class="checkmark blue-pink">VII</span><div></div>
|
|
<input type="text" class="gender text" value="Mood/emotional changes" name="attr_vii-text">
|
|
</div>
|
|
<div class="sleeve"><input type="checkbox" name="attr_viii" data-stat="viii" class="gender checkbox viii">
|
|
<span class="checkmark blue-pink">VIII</span><div></div>
|
|
<input type="text" class="gender text" value="Libido changes" name="attr_viii-text">
|
|
</div>
|
|
<div class="sleeve"><input type="checkbox" name="attr_ix" data-stat="ix" class="gender checkbox ix">
|
|
<span class="checkmark blue-pink">IX</span><div></div>
|
|
<input type="text" class="gender text" value="Euphoria/dysphoria" name="attr_ix-text">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="cluster phys fort">
|
|
<span class="changetype phys">PF</span>
|
|
<div class="sleeve"><input type="checkbox" name="attr_iv" class="gender checkbox iv">
|
|
<span class="checkmark blue-pink">IV</span><div></div>
|
|
<input type="text" class="gender text" value="Perspiration changes" name="attr_iv-text">
|
|
</div>
|
|
<div class="sleeve"><input type="checkbox" name="attr_v" class="gender checkbox v">
|
|
<span class="checkmark blue-pink">V</span><div></div>
|
|
<input type="text" class="gender text" value="Fat/muscle redistribution" name="attr_v-text">
|
|
</div>
|
|
<div class="sleeve"><input type="checkbox" name="attr_vi" class="gender checkbox vi">
|
|
<span class="checkmark blue-pink">VI</span><div></div>
|
|
<input type="text" class="gender text" value="Internal genitalia" name="attr_vi-text">
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
<script type="text/worker">
|
|
|
|
//for updating the change boxes (come back later to tidy this up into fewer functions)
|
|
|
|
on("clicked:submit sheet:opened", function() {
|
|
|
|
getAttrs(["physAptText"], function(values) {
|
|
|
|
|
|
let x = values.physAptText;
|
|
let y = x.indexOf("|");
|
|
let z = x.indexOf("|", y + 1);
|
|
let slice1 = x.slice(0,y);
|
|
let slice2 = x.slice(y + 1, z);
|
|
let slice3 = x.slice(z + 1, )
|
|
|
|
setAttrs ({paCross1: slice1, paCross2: slice2, paCross3: slice3
|
|
})
|
|
})
|
|
})
|
|
|
|
on("clicked:submit sheet:opened", function() {
|
|
|
|
getAttrs(["mentAptText"], function(values) {
|
|
|
|
|
|
let x = values.mentAptText;
|
|
let y = x.indexOf("|");
|
|
let z = x.indexOf("|", y + 1);
|
|
let slice1 = x.slice(0,y);
|
|
let slice2 = x.slice(y + 1, z);
|
|
let slice3 = x.slice(z + 1, )
|
|
|
|
setAttrs ({maCross1: slice1, maCross2: slice2, maCross3: slice3
|
|
})
|
|
})
|
|
})
|
|
|
|
on("clicked:submit sheet:opened", function() {
|
|
|
|
getAttrs(["physFortText"], function(values) {
|
|
|
|
|
|
let x = values.physFortText;
|
|
let y = x.indexOf("|");
|
|
let z = x.indexOf("|", y + 1);
|
|
let slice1 = x.slice(0,y);
|
|
let slice2 = x.slice(y + 1, z);
|
|
let slice3 = x.slice(z + 1, )
|
|
|
|
setAttrs ({pfCross1: slice1, pfCross2: slice2, pfCross3: slice3
|
|
})
|
|
})
|
|
})
|
|
|
|
on("clicked:submit sheet:opened", function() {
|
|
|
|
getAttrs(["mentFortText"], function(values) {
|
|
|
|
|
|
let x = values.mentFortText;
|
|
let y = x.indexOf("|");
|
|
let z = x.indexOf("|", y + 1);
|
|
let slice1 = x.slice(0,y);
|
|
let slice2 = x.slice(y + 1, z);
|
|
let slice3 = x.slice(z + 1, )
|
|
|
|
setAttrs ({mfCross1: slice1, mfCross2: slice2, mfCross3: slice3
|
|
})
|
|
})
|
|
})
|
|
|
|
on("clicked:submit sheet:opened", function() {
|
|
|
|
getAttrs(["permText"], function(values) {
|
|
|
|
|
|
let x = values.permText
|
|
|
|
setAttrs ({permCross: x
|
|
})
|
|
})
|
|
})
|
|
|
|
// script for gender change wheel:
|
|
$20('.switch').on('click', (e) => {
|
|
$20('div.dot').toggleClass('pink-blue');
|
|
$20('div.dot').toggleClass('blue-pink');
|
|
$20('span.checkmark').toggleClass('pink-blue');
|
|
$20('span.checkmark').toggleClass('blue-pink');
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|