slaguru666/roll20-character-sheets-tester
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #11332 from JennyWolff/to_change_update_221229

Browse Source 
updating new features to_change_sheet
This commit is contained in:
Nic Bradley
2023-01-02 09:05:27 -08:00
committed by GitHub
parent 86f837b37e ea868ea613
commit 076235ea8f
3 changed files with 1150 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files
To Change/to_change_sheet.css
+912
View File
@@ -297,3 +297,915 @@ background: linear-gradient(40deg, rgba(255,228,225,.6) 10%, rgba(176,196,222,.6
.switch {
position: relative;
display: block;
vertical-align: top;
box-shadow: inset 0 -1px white, inset 0 1px 1px rgba(0, 0, 0, 0.05);
cursor: pointer;
box-sizing:content-box;
}
.switch.change-gender {
background: linear-gradient(to bottom, rebeccapurple, crimson 80%);
background-image: -webkit-linear-gradient(top, rebeccapurple, crimson 80%);
}
.switch.cross-console {
background: linear-gradient(to bottom, rebeccapurple, crimson 80%);
background-image: -webkit-linear-gradient(top, rebeccapurple, crimson 80%);
}
.switch.gender-colors {
background: linear-gradient(to bottom, rebeccapurple, crimson 80%);
background-image: -webkit-linear-gradient(top, rebeccapurple, crimson 80%);
}
.switch.large {
padding: 3px;
min-width: 130px;
max-width: 130px;
height: 30px;
border-radius: 18px;
margin: 0 10px 10px 0;
}
.switch.small {
padding: 1px;
min-width: 30px;
max-width: 30px;
height: 15px;
border-radius: 18px;
margin: 0 5px 5px 0;
}
.switch-input{
position: absolute;
top: 0;
left: 0;
opacity: 0;
box-sizing:content-box;
}
.switch-label{
position: relative;
display: block;
height: inherit;
font-size: 10px;
text-transform: uppercase;
border-radius: inherit;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.15);
box-sizing:content-box;
}
.switch-label.change-gender{
background: mediumpurple;
}
.switch-label.cross-console{
background: rebeccapurple;
}
.switch-label.gender-colors{
background: dodgerblue;
}
.switch-label.large{
font-size: 10px;
}
.switch-label.small.gender-colors{
font-size: 8px;
transform: translateY(-20px);
}
.switch-label.small.cross-console{
font-size: 8px;
}
.switch-label:before, .switch-label:after {
position: absolute;
top: 50%;
margin-top: -.5em;
line-height: 1;
-webkit-transition: inherit;
-moz-transition: inherit;
-o-transition: inherit;
transition: inherit;
box-sizing:content-box;
}
.switch-label.large:before {
content: attr(data-off);
right: 11px;
color: indigo;
text-shadow: 0 1px rgba(255, 255, 255, 0.5);
}
.switch-label.small:before{
right:6px;
}
.switch-label.large:after {
content: attr(data-on);
left: 11px;
text-shadow: 0 1px rgba(0, 0, 0, 0.2);
opacity: 0;
}
.switch-label.small:after {
left: 6px;
}
.switch-label.change-gender:after {
color: dodgerblue;
}
.switch-input:checked ~ .switch-label {
/* background: lightpink;*/
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 0 3px rgba(0, 0, 0, 0.2);
}
.switch-input.change-gender:checked ~ .switch-label.change-gender {
background: lightpink;
}
.switch-input.cross-console:checked ~ .switch-label.cross-console {
background: mediumvioletred;
}
.switch-input.gender-colors:checked ~ .switch-label.gender-colors {
background: hotpink;
}
.switch-input:checked ~ .switch-label:before {
opacity: 0;
}
.switch-input:checked ~ .switch-label:after {
opacity: 1;
}
.switch-handle {
position: absolute;
background: linear-gradient(to bottom, rgba(173,216,230,1) 40%, rgba(147,112,219,1));
background-image: -webkit-linear-gradient(top, rgba(173,216,230,1) 40%, rgba(147,112,219,1));
border-radius: 100%;
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
}
.switch-handle.large {
top: 4px;
left: 4px;
width: 28px;
height: 28px;
}
.switch-handle.small{
top: 2px;
left: 2px;
width: 14px;
height: 14px;
}
.switch-handle:before {
content: "";
position: absolute;
top: 50%;
left: 50%;
margin: -6px 0 0 -6px;
width: 12px;
height: 12px;
background: linear-gradient(to bottom, rgba(147,112,219,1), rgba(173,216,230,1));
background-image: -webkit-linear-gradient(top, rgba(147,112,219,1),1, rgba(173,216,230,1));
border-radius: 6px;
box-shadow: inset 0 1px rgba(0, 0, 0, 0.02);
}
.switch-handle.large:before {
margin: -6px 0 0 -6px;
width: 12px;
height: 12px;
}
.switch-handle.small:before {
margin: -3px 0 0 -3px;
width: 6px;
height: 6px;
}
.switch-input.large:checked ~ .switch-handle.large {
left: 104px;
box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.2);
}
.switch-input.small:checked ~ .switch-handle.small {
left: 15px;
box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.2);
}
/* Transition
========================== */
.switch-label, .switch-handle {
transition: All 0.3s ease;
-webkit-transition: All 0.3s ease;
-moz-transition: All 0.3s ease;
-o-transition: All 0.3s ease;
}
.charsheet{
border-radius: 16px;
background: rgb(147, 112, 219);
background: linear-gradient(180deg, rgba(173,216,230,1) 0%, rgba(147,112,219,1) 36%,
rgba(219,112,147,1) 56%, rgba(147,112,219,1) 76%, rgba(173,216,230,1) 100%);
width: 100%;
color: indigo;
}
h1{
font-size: 40px;
color: indigo;
}
h2{
color: indigo;
}
h3{
color: indigo;
}
h4{
color: indigo;
}
.row{
display: flex;
margin-right: auto;
margin-left: auto;
color: indigo;
justify-content: space-between;
background-color: transparent;
}
.first{
width: 100%;
min-width: 800px;
}
.second{
width: 80%;
min-width: 772px;
}
.third{
width: 70%;
min-width: 716px;
}
.enclosure{
display: flex;
}
.wrapper{
display: flex;
flex-direction: column;
justify-content: space-evenly;
min-height:180px;
}
.inner{
display: flex;
align-items: baseline;
}
.box{
display: flex;
direction: ltr;
resize: none;
box-sizing: border-box;
overflow: auto;
max-width: 250px;
min-width: 250px;
width: 100%;
max-height: 150px;
min-height: 150px;
padding: 5px;
border-radius: 12px;
font-size: 100%;
line-height: 115%;
color: black;
font-family: candal;
}
input.damagecheck:not(:checked) ~ div.box {
border: 5px solid rebeccapurple;
box-shadow: 5px 5px 10px 5px rgba(0,0,0,.5);
transition-duration: 2s;
transition-property: background, border, box shadow;
}
input.damagecheck:checked ~ div.box{
border: 5px solid red;
box-shadow: 5px 5px 10px 5px rgba(0,0,0,.5), 0 0 20px 0 red inset;
transition-duration: 2s;
transition-property: background, border, box shadow;
}
.empty{
display: block;
}
.center{
display: flex;
justify-content: flex-end;
}
.flex-end{
display: flex;
justify-content: flex-end;
}
.flex-space-between{
display: flex;
justify-content: space-between;
}
.flex-space-evenly{
display: flex;
justify-content: space-evenly;
}
.flex-start{
display: flex;
justify-content: flex-start;
}
.flex-column{
display: flex;
flex-direction: column;
}
.align-center{
display: flex;
align-items: center;
}
}
.cardpicker{
overflow: auto;
text-align: center;
}
.cardtext{
padding: 3px;
text-align: center;
}
input.changecheck:not(:checked) ~ div.box.phys.apt{
background: linear-gradient(310deg, rgba(230,230,250,.6) 10%, rgba(255,182,193,.6) 40%, rgba(153,102,204,.6) 100%);
transition-duration: 2s;
transition-property: background, border;
}
input.changecheck:checked ~ div.box.phys.apt{
background: rgb(255,182,193);
transition-duration: 2s;
transition-property: background, border;
}
input.changecheck:not(:checked) ~ div.box.phys.fort{
background: linear-gradient(130deg, rgba(230,230,250,.6) 10%, rgba(255,182,193,.6) 40%, rgba(153,102,204,.6) 100%);
transition-duration: 2s;
transition-property: background, border;
}
input.changecheck:checked ~ div.box.phys.fort{
background: rgb(255,182,193);
transition-duration: 2s;
transition-property: background, border;
}
input.changecheck:not(:checked) ~ div.box.ment.apt{
background: linear-gradient(40deg, rgba(255,228,225,.6) 10%, rgba(176,196,222,.6) 40%, rgba(153,102,204,.6) 100%);
transition-duration: 2s;
transition-property: background, border;
}
input.changecheck:checked ~ div.box.ment.apt{
background: rgb(176,196,222);
transition-duration: 2s;
transition-property: background, border;
}
input.changecheck:not(:checked) ~ div.box.ment.fort{
background: linear-gradient(220deg, rgba(255,228,225,.6) 10%, rgba(176,196,222,.6) 40%, rgba(153,102,204,.6) 100%);
transition-duration: 2s;
transition-property: background, border;
}
input.changecheck:checked ~ div.box.ment.fort{
background: rgb(176,196,222);
transition-duration: 2s;
transition-property: background, border;
}
input.changecheck:not(:checked) ~ div.box.perm{
background: radial-gradient(circle, rgba(220,20,60,.6) 10%, rgba(221, 160, 221,.6) 50%, rgba(201,112,165,0) 90%)rgba(153,102,204,.6) 100%;
background-position: center;
transition-duration: 2s;
transition-property: background, border;
}
input.changecheck:checked ~ div.box.perm{
background: fuchsia;
transition-duration: 2s;
transition-property: background, border;
}
input.changecheck:not(:checked) ~ span.perm{
opacity: 0;
transition-duration: 2s;
transition-property: opacity;
}
input.changecheck:checked ~ span.perm{
opacity: 0.7;
transition-duration: 2s;
transition-property: opacity;
}
/*FACE CARD TEXT CONTROL*/
/* hides the face card text*/
.charsheet .sheet-default,
.charsheet .sheet-thefool,
.charsheet .sheet-themagician,
.charsheet .sheet-thehighpriestess,
.charsheet .sheet-theempress,
.charsheet .sheet-theemperor,
.charsheet .sheet-thehierophant,
.charsheet .sheet-thelovers,
.charsheet .sheet-thechariot,
.charsheet .sheet-strength,
.charsheet .sheet-thehermit,
.charsheet .sheet-wheeloffortune,
.charsheet .sheet-justice,
.charsheet .sheet-thehangedman,
.charsheet .sheet-death,
.charsheet .sheet-temperance,
.charsheet .sheet-thedevil,
.charsheet .sheet-thetower,
.charsheet .sheet-thestar,
.charsheet .sheet-themoon,
.charsheet .sheet-thesun,
.charsheet .sheet-judgement,
.charsheet .sheet-theworld
{
display: none;
}
/* show the selected face card */
.charsheet .sheet-facecardtoggle[value="default"] ~ div.sheet-default,
.charsheet .sheet-facecardtoggle[value="thefool"] ~ div.sheet-thefool,
.charsheet .sheet-facecardtoggle[value="themagician"] ~ div.sheet-themagician,
.charsheet .sheet-facecardtoggle[value="thehighpriestess"] ~ div.sheet-thehighpriestess,
.charsheet .sheet-facecardtoggle[value="theempress"] ~ div.sheet-theempress,
.charsheet .sheet-facecardtoggle[value="theemperor"] ~ div.sheet-theemperor,
.charsheet .sheet-facecardtoggle[value="thehierophant"] ~ div.sheet-thehierophant,
.charsheet .sheet-facecardtoggle[value="thelovers"] ~ div.sheet-thelovers,
.charsheet .sheet-facecardtoggle[value="thechariot"] ~ div.sheet-thechariot,
.charsheet .sheet-facecardtoggle[value="strength"] ~ div.sheet-strength,
.charsheet .sheet-facecardtoggle[value="thehermit"] ~ div.sheet-thehermit,
.charsheet .sheet-facecardtoggle[value="wheeloffortune"] ~ div.sheet-wheeloffortune,
.charsheet .sheet-facecardtoggle[value="justice"] ~ div.sheet-justice,
.charsheet .sheet-facecardtoggle[value="thehangedman"] ~ div.sheet-thehangedman,
.charsheet .sheet-facecardtoggle[value="death"] ~ div.sheet-death,
.charsheet .sheet-facecardtoggle[value="temperance"] ~ div.sheet-temperance,
.charsheet .sheet-facecardtoggle[value="thedevil"] ~ div.sheet-thedevil,
.charsheet .sheet-facecardtoggle[value="thetower"] ~ div.sheet-thetower,
.charsheet .sheet-facecardtoggle[value="thestar"] ~ div.sheet-thestar,
.charsheet .sheet-facecardtoggle[value="themoon"] ~ div.sheet-themoon,
.charsheet .sheet-facecardtoggle[value="thesun"] ~ div.sheet-thesun,
.charsheet .sheet-facecardtoggle[value="judgement"] ~ div.sheet-judgement,
.charsheet .sheet-facecardtoggle[value="theworld"] ~ div.sheet-theworld
{
display: block;
}
.charsheet .input-menu {
display: flex;
justify-content: center;
}
.charsheet .input-menu > * {
flex: 1;
}
input.cross-console:not(:checked) ~ div.opened-console {
display: none;
}
.opened-console {
box-sizing: content-box;
display: flex;
flex-wrap:wrap;
gap: 10px;
justify-content: space-evenly;
}
.text-input {
max-width: 300px;
margin: 2px;
flex: 1 1 auto;
}
.submit {
max-width: 200 px;
align-self: center;
}
.changetab,
.cross-wheel:checked ~ .gendertab {
display: block;}
.gendertab,
.cross-wheel:checked ~ .changetab {
display: none;
}
.gendertab {
width: 100%;
min-height: 50px;
background: linear-gradient(145deg, darkorchid 20%, blueviolet 40%, blueviolet 60%, darkorchid 80%);
border-radius: 16px;
border: 3px solid rebeccapurple;
box-shadow: 0 0 10px 5px rgba(0,0,0,.6)
}
/* gender wheel styling */
.bar.gender {
display: flex;
margin: auto;
justify-content: center;
min-width:820 px;
max-width: 820px;
background: linear-gradient(145deg, darkorchid 60%, blueviolet 80%);
max-height: 34px;
}
.bar.cross {
display: flex;
margin: auto;
justify-content: flex-start;
min-width:820 px;
max-width: 820px;
height: 40px;
margin-bottom: 20px;
}
.switch {
position: relative;
display: inline-block;
max-width: 60px;
max-height: 34px;
}
input.switch{
opacity:0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 60px;
background-color: hotpink;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: aliceblue;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: cornflowerblue;
}
input:focus + .slider {
box-shadow: 0 0 1px magenta;
}
input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;}
.changetype{
font-weight: bold;
font-family: patrick hand;
font-size: 60px;
margin-left: 50px;
margin-right: 50px;
z-index: 1;
}
input.gender.text {
color: indigo;
background: plum;
font-family: patrick hand;
font-size: 120%;
height: 30px;
border-radius: 5px;
max-width: 180px;
z-index: 2;
}
div.sleeve {
display: flex;
justify-content: space-between;
min-width: 250px;
max-width: 250px;
}
.gender.checkbox {
position: absolute;
opacity: 0;
cursor: pointer;
min-height: 40px;
min-width: 40px;
z-index: 2;
}
.checkmark {
position: absolute;
height: 30px;
width: 30px;
font-size:18px;
align-content: center;
font-family: shadows;
text-align: center;
box-shadow: 0px 0px 5px 0 rgba(0,0,0,.6);
transition-duration: 1.5s;
transition-property: background-color border;
}
.checkmark.blue-pink {
background-color: cadetblue;
border: 5px outset cadetblue;
}
.checkmark.pink-blue {
background-color: lightcoral;
border: 5px outset lightcoral;
}
.checkbox:hover ~ .checkmark {
background-color: darkorchid;
border: 5px outset darkorchid;
transition-duration: .25s;
transition-property: background-color border;
}
.checkbox:checked ~ .checkmark.blue-pink {
background-color: lightcoral;
border: 5px inset lightcoral;
}
.checkbox:checked ~ .checkmark.pink-blue {
background-color: cadetblue;
border: 5px inset cadetblue;
}
.cluster {
display: flex;
flex-direction: column;
justify-content: space-evenly;
width: 300px;
height: 350px;
}
.cluster.phys.apt{
align-items: flex-start;
color: darkmagenta;
text-shadow: 5px 5px 10px rgba(0,0,0,1), 0 0 5px magenta;
}
.cluster.ment.apt{
align-items: flex-end;
color: rebeccapurple;
text-shadow: 5px 5px 10px rgba(0,0,0,1), 0 0 5px deepskyblue;
}
.cluster.ment.fort{
align-items: flex-start;
color: rebeccapurple;
text-shadow: 5px 5px 10px rgba(0,0,0,1), 0 0 5px deepskyblue;
}
.cluster.phys.fort{
align-items: flex-end;
color: darkmagenta;
text-shadow: 5px 5px 10px rgba(0,0,0,1), 0 0 5px magenta;
}
.holder {
margin: auto;
display: flex;
padding: 10px;
flex-wrap: wrap;
justify-content: space-between;
min-width: 800px;
max-width: 800px;
background: linear-gradient(145deg, darkorchid 20%, blueviolet 40%, blueviolet 60%, darkorchid 80%);
z-index: 0;
}
.wheel {
align-self: center;
position: absolute;
display: block;
background: #baa1d4;
border-radius: 50%;
width: 400px;
height: 400px;
transform: translateX(50%);
z-index: 0;
box-shadow: 0 0 50px 80px #baa1d4;
}
.hidden{
display:none;
}
.dot {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
height: 60px;
width: 60px;
border-radius: 50%;
font-weight: bold;
z-index: 3;
font-size: 30px;
font-family: shadows;
transition-delay: .75;
transition-duration: 1.5s;
transition-property: background box-shadow;
}
input.hidden.gender:not(:checked) + div.dot.blue-pink {
background: dodgerblue;
box-shadow: 0 0 5px 2px darkslateblue inset, 0 0 15px 10px slateblue;
}
input.hidden.gender:checked + div.dot.blue-pink {
background: hotpink;
box-shadow: 0 0 5px 2px firebrick inset, 0 0 30px 20px lightpink;
}
input.hidden.gender:not(:checked) + div.dot.pink-blue {
background: hotpink;
box-shadow: 0 0 5px 2px firebrick inset, 0 0 15px 10px indianred;
}
input.hidden.gender:checked + div.dot.pink-blue {
background: dodgerblue;
box-shadow: 0 0 5px 2px darkslateblue inset, 0 0 30px 20px lightskyblue;
}
.dot.xi{
left: 200px;
top: 0px;
transform: translate(-50%, -50%) rotate(0deg);
}
.dot.xii{
left: 300px;
top: 27px;
transform: translate(-50%, -50%) rotate(30deg);
}
.dot.i{
left: 373px;
top: 100px;
transform: translate(-50%, -50%) rotate(60deg);
}
.dot.ii{
left: 400px;
top: 200px;
transform: translate(-50%, -50%) rotate(90deg) ;
}
.dot.iii{
left: 373px;
top: 300px;
transform: translate(-50%, -50%) rotate(120deg);
}
.dot.iv{
left: 300px;
top: 373px;
transform: translate(-50%, -50%) rotate(150deg);
}
.dot.v{
left: 200px;
top: 400px;
transform: translate(-50%, -50%) rotate(180deg);
}
.dot.vi{
left: 100px;
top: 373px;
transform: translate(-50%, -50%) rotate(210deg);
}
.dot.vii{
left: 23px;
top: 300px;
transform: translate(-50%, -50%) rotate(240deg);
}
.dot.viii{
left: 0px;
top: 200px;
transform: translate(-50%, -50%) rotate(270deg);
}
.dot.ix{
left: 23px;
top: 100px;
transform: translate(-50%, -50%) rotate(300deg);
}
.dot.x{
left: 100px;
top: 23px;
transform: translate(-50%, -50%) rotate(330deg);
}
To Change/to_change_sheet.html
+238 -41
View File
@@ -2,13 +2,13 @@
<div class="row"><!-- TITLE ROW -->
<div class="empty"></div>
<div class=""><br>
<h1 style="font-family: patrick hand; color: indigo; text-decoration: underline"><em>To Change</em></h1>
<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.2</p>
<p style="font-size:8px; float: right">R20 Character Sheet V2.5</p>
</div>
</div>
<br>
@@ -227,17 +227,30 @@ When you reveal your Falling card, you move closer to the source of your fears a
</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;">Physical Aptitude</h2>
<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;">Mental Aptitude</h2>
<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>
@@ -258,7 +271,8 @@ When you reveal your Falling card, you move closer to the source of your fears a
<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>
@@ -272,6 +286,8 @@ When you reveal your Falling card, you move closer to the source of your fears a
<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>
@@ -292,7 +308,8 @@ When you reveal your Falling card, you move closer to the source of your fears a
<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>
@@ -306,6 +323,8 @@ When you reveal your Falling card, you move closer to the source of your fears a
<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>
@@ -325,7 +344,8 @@ When you reveal your Falling card, you move closer to the source of your fears a
<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>
@@ -334,7 +354,7 @@ When you reveal your Falling card, you move closer to the source of your fears a
</div>
<div class="row" style="font-family: contrail one"> <h2>Permanence</h2></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 -->
@@ -342,6 +362,8 @@ When you reveal your Falling card, you move closer to the source of your fears a
<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>
@@ -355,11 +377,20 @@ When you reveal your Falling card, you move closer to the source of your fears a
</div></div>
</div>
<br>
<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>
@@ -379,7 +410,8 @@ When you reveal your Falling card, you move closer to the source of your fears a
<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>
@@ -393,6 +425,8 @@ When you reveal your Falling card, you move closer to the source of your fears a
<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>
@@ -413,7 +447,8 @@ When you reveal your Falling card, you move closer to the source of your fears a
<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>
@@ -427,6 +462,8 @@ When you reveal your Falling card, you move closer to the source of your fears a
<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>
@@ -447,7 +484,8 @@ When you reveal your Falling card, you move closer to the source of your fears a
<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>
@@ -458,54 +496,67 @@ When you reveal your Falling card, you move closer to the source of your fears a
<div class="row"><!-- ATTRIBUTE FOOTER -->
<h2 style="float: left; font-family: contrail one;">Mental Fortitude</h2>
<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;">Physical Fortitude</h2>
<h2 style="float: right; font-family: contrail one; text-shadow: 4px 4px 8px rgba(0,0,0,.8);">Physical Fortitude</h2>
</div>
<br>
<!-- END OF CHARACTER SHEET -->
<div class="row input-menu">
<div style=>
<input type="checkbox" class="sheet-toggle-show" />
<div class="sheet-body console">
<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>&nbsp;&#8592&nbsp;edit&nbsp;change&nbsp;cross</h4>
<input type="checkbox" class="hidden cross-console" name="attr_console-switch">
<div style="margin:auto" class="opened-console"><h1 =>&#8595&nbsp;&#8595&nbsp;&#8595</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 "&#124;".'></textarea>
placeholder="Enter Physical Aptitude attribute changes here, starting with the first change in each attribute and separating each change with '&#124;'."></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 "&#124;".'></textarea>
placeholder="Enter Mental Aptitude attribute changes here, starting with the first change in each attribute and separating each change with '&#124;'."></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 "&#124;".'></textarea>
placeholder="Enter Physical Fortitude attribute changes here, starting with the first change in each attribute and separating each change with '&#124;'."></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 "&#124;".'></textarea>
placeholder="Enter Mental Fortitude attribute changes here, starting with the first change in each attribute and separating each change with '&#124;'."></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>
placeholder="Enter the Permanence attribute change here."></textarea>
</div>
<br>
<div class="flex-column center">
@@ -518,32 +569,172 @@ When you reveal your Falling card, you move closer to the source of your fears a
</div>
<input type="hidden" name="attr_pacross1"
value="Check the box at the bottom of the sheet to open text-entry console">
value="Click the switch at the bottom of the sheet to edit the Change Cross">
<input type="hidden" name="attr_macross1"
value="Check the box at the bottom of the sheet to open text-entry console">
value="Click the switch at the bottom of the sheet to edit the Change Cross">
<input type="hidden" name="attr_pacross2"
value="Check the box at the bottom of the sheet to open text-entry console">
value="Click the switch at the bottom of the sheet to edit the Change Cross">
<input type="hidden" name="attr_macross2"
value="Check the box at the bottom of the sheet to open text-entry console">
value="Click the switch at the bottom of the sheet to edit the Change Cross">
<input type="hidden" name="attr_pacross3"
value="Check the box at the bottom of the sheet to open text-entry console">
value="Click the switch at the bottom of the sheet to edit the Change Cross">
<input type="hidden" name="attr_macross3"
value="Check the box at the bottom of the sheet to open text-entry console">
value="Click the switch at the bottom of the sheet to edit the Change Cross">
<input type="hidden" name="attr_pfcross3"
value="Check the box at the bottom of the sheet to open text-entry console">
value="Click the switch at the bottom of the sheet to edit the Change Cross">
<input type="hidden" name="attr_mfcross3"
value="Check the box at the bottom of the sheet to open text-entry console">
value="Click the switch at the bottom of the sheet to edit the Change Cross">
<input type="hidden" name="attr_pfcross2"
value="Check the box at the bottom of the sheet to open text-entry console">
value="Click the switch at the bottom of the sheet to edit the Change Cross">
<input type="hidden" name="attr_mfcross2"
value="Check the box at the bottom of the sheet to open text-entry console">
value="Click the switch at the bottom of the sheet to edit the Change Cross">
<input type="hidden" name="attr_pfcross1"
value="Check the box at the bottom of the sheet to open text-entry console">
value="Click the switch at the bottom of the sheet to edit the Change Cross">
<input type="hidden" name="attr_mfcross1"
value="Check the box at the bottom of the sheet to open text-entry console">
value="Click the switch at the bottom of the sheet to edit the Change Cross">
<input type="hidden" name="attr_permcross"
value="Check the box at the bottom of the sheet to open text-entry console">
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&nbsp;colors&#8594&nbsp;</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">&#8592switch&nbsp;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)
@@ -628,6 +819,13 @@ 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');
});
@@ -635,5 +833,4 @@ setAttrs ({permCross: x
</script>
</script>
To Change/to_change_sheet.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 454 KiB

After

Width:  |  Height:  |  Size: 520 KiB