added html and css; added background

This commit is contained in:
Bogdan Kosarev
2021-01-28 00:15:44 +04:00
parent e221239c70
commit 0d97b71ebd
3 changed files with 286 additions and 229 deletions
Binary file not shown.

After

Width:  |  Height:  |  Size: 1.6 MiB

+206
View File
@@ -0,0 +1,206 @@
@import url('https://fonts.googleapis.com/css2?family=PT+Sans&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Comic+Neue:wght@300&display=swap');
.sheet-main-container {
width: 712px;
height: 500px;
display: flex;
position: relative;
background-image: url("https://user-images.githubusercontent.com/5252033/105555152-37b7dd80-5d22-11eb-9c71-862ed52aefb8.png");
background-size: 712px 1010px;
}
.sheet-main-container>img {
position: absolute;
bottom: 75px;
right: 0;
z-index: -1;
}
.sheet-grid-container {
margin: 10px 30px 40px 10px;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-rows: repeat(12, max-content);
gap: 0px 0px;
grid-template-areas: "portrait-header positive-header" "portrait positive-feature" "portrait negative-header" "portrait nefative-feature" "portrait bonus-header" "portrait bonus" "portrait gear-header" "portrait gear1" "profession-name gear2" "power gear3" "karma gear4";
column-gap: 1em;
}
.sheet-portrait-header {
grid-area: portrait-header;
}
.sheet-positive-header {
grid-area: positive-header;
}
.sheet-positive-feature {
grid-area: positive-feature;
}
.sheet-negative-header {
grid-area: negative-header;
}
.sheet-negative-feature {
grid-area: nefative-feature;
}
.sheet-portrait {
display: inline-grid;
grid-template-columns: repeat(6, 1fr);
grid-template-rows: repeat(3, 1fr);
grid-template-areas: "head head head head head head" "right-hand right-hand torso torso left-hand left-hand" "right-leg right-leg right-leg left-leg left-leg left-leg";
grid-area: portrait;
}
.sheet-portrait-container {
display: flex;
width: 100%;
height: 100%;
align-items: center;
justify-content: center;
position: relative;
font-family: 'PT Sans', sans-serif;
}
.sheet-head {
grid-area: head;
}
.sheet-right-hand {
grid-area: right-hand;
}
.sheet-torso {
grid-area: torso;
}
.sheet-left-hand {
grid-area: left-hand;
}
.sheet-right-leg {
grid-area: right-leg;
}
.sheet-left-leg {
grid-area: left-leg;
}
.sheet-profession-name {
grid-area: profession-name;
display: flex;
}
.sheet-power {
grid-area: power;
display: grid;
grid-template-columns: 70px max-content max-content max-content;
align-items: center;
}
.sheet-karma {
grid-area: karma;
display: grid;
grid-template-columns: 70px max-content;
align-items: center;
}
.sheet-bonus {
grid-area: bonus;
}
.sheet-gear-header {
grid-area: gear-header;
}
.sheet-gear1 {
grid-area: gear1;
}
.sheet-gear2 {
grid-area: gear2;
}
.sheet-gear3 {
grid-area: gear3;
}
.sheet-gear4 {
grid-area: gear4;
}
.sheet-header {
font-family: 'Comic Neue', sans-serif;
margin: 5px 0px;
}
.sheet-row-input {
font-family: 'PT Sans', sans-serif;
margin: 5px 0px;
width: 100%;
}
.sheet-labeled-row {
display: grid;
grid-template-columns: max-content 1fr;
align-items: center;
}
input {
margin: 0px 5px;
}
button {
margin: 5px 0px;
}
.sheet-head-zone-enabled,
.sheet-torso-zone-enabled,
.sheet-rhand-zone-enabled,
.sheet-lhand-zone-enabled,
.sheet-rleg-zone-enabled,
.sheet-lleg-zone-enabled {
width: 105px;
height: 65px;
position: absolute;
z-index: -1;
}
.sheet-head-zone-disabled,
.sheet-torso-zone-disabled,
.sheet-rhand-zone-disabled,
.sheet-lhand-zone-disabled,
.sheet-rleg-zone-disabled,
.sheet-lleg-zone-disabled {
width: 105px;
height: 65px;
position: absolute;
z-index: -2;
}
.sheet-head-harm:not(:checked)~.sheet-head-zone-enabled,
.sheet-torso-harm:not(:checked)~.sheet-torso-zone-enabled,
.sheet-rhand-harm:not(:checked)~.sheet-rhand-zone-enabled,
.sheet-lhand-harm:not(:checked)~.sheet-lhand-zone-enabled,
.sheet-rleg-harm:not(:checked)~.sheet-rleg-zone-enabled,
.sheet-lleg-harm:not(:checked)~.sheet-lleg-zone-enabled {
display: none;
}
.sheet-rolltemplate-strengthcheck {
background-image: url(https://user-images.githubusercontent.com/5252033/105555152-37b7dd80-5d22-11eb-9c71-862ed52aefb8.png);
background-size: 285px 404px;
text-align: center;
}
.sheet-rolltemplate-strengthcheck .inlinerollresult {
background-color: transparent;
border: none;
color: black;
}
.sheet-rolltemplate-strengthcheck .sheet-upper-case-name {
text-transform: uppercase;
}
+80 -229
View File
@@ -1,235 +1,86 @@
<style>
@import url('https://fonts.googleapis.com/css2?family=PT+Sans&display=swap');
.sheet-grid-container {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-rows: repeat(12, max-content);
gap: 0px 0px;
grid-template-areas:
"portrait-header positive-header"
"portrait positive-feature"
"portrait negative-header"
"portrait nefative-feature"
"portrait bonus-header"
"portrait bonus"
"portrait gear-header"
"portrait gear1"
"profession-name gear2"
"power gear3"
"karma gear4";
width: 832px;
height: 584px;
}
.sheet-portrait-header {
grid-area: portrait-header;
}
.sheet-positive-header {
grid-area: positive-header;
}
.sheet-positive-feature {
grid-area: positive-feature;
}
.sheet-negative-header {
grid-area: negative-header;
}
.sheet-negative-feature {
grid-area: nefative-feature;
}
.sheet-portrait {
display: inline-grid;
grid-template-columns: repeat(6, 1fr);
grid-template-rows: repeat(3, 1fr);
grid-template-areas:
"head head head head head head"
"right-hand right-hand torso torso left-hand left-hand"
"right-leg right-leg right-leg left-leg left-leg left-leg";
grid-area: portrait;
}
.sheet-portrait-container {
display: flex;
width: 100%;
height: 100%;
border: 1px solid;
align-items: center;
justify-content: center;
position: relative;
}
.sheet-head {
grid-area: head;
}
.sheet-right-hand {
grid-area: right-hand;
}
.sheet-torso {
grid-area: torso;
}
.sheet-left-hand {
grid-area: left-hand;
}
.sheet-right-leg {
grid-area: right-leg;
}
.sheet-left-leg {
grid-area: left-leg;
}
.sheet-profession-name {
grid-area: profession-name;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-rows: 1fr;
}
.sheet-power {
grid-area: power;
display: grid;
grid-template-columns: 60px max-content max-content max-content;
}
.sheet-karma {
grid-area: karma;
display: grid;
grid-template-columns: 60px max-content;
}
.sheet-bonus {
grid-area: bonus;
}
.sheet-gear-header {
grid-area: gear-header;
}
.sheet-gear1 {
grid-area: gear1;
}
.sheet-gear2 {
grid-area: gear2;
}
.sheet-gear3 {
grid-area: gear3;
}
.sheet-gear4 {
grid-area: gear4;
}
.sheet-header {
font-family: 'PT Sans', sans-serif;
margin: 5px;
}
.sheet-row-input {
width: 100%;
}
.sheet-labeled-row {
display: grid;
grid-template-columns: max-content 1fr;
}
input {
margin: 5px;
}
button {
margin: 5px;
}
textarea {
width: 100%;
}
.sheet-harm-zone {
width: 100%;
height: 100%;
position: absolute;
z-index: -1;
}
.sheet-head-harm:checked ~ .sheet-head-zone,
.sheet-torso-harm:checked ~ .sheet-torso-zone,
.sheet-rhand-harm:checked ~ .sheet-rhand-zone,
.sheet-lhand-harm:checked ~ .sheet-lhand-zone,
.sheet-rleg-harm:checked ~ .sheet-rleg-zone,
.sheet-lleg-harm:checked ~ .sheet-lleg-zone {
background: #C41E3A;
}
/*.sheet-torso-harm:checked ~.sheet-torso-zone {*/
/* background: #C41E3A;*/
/*}*/
</style>
<div class="sheet-grid-container">
<div class="sheet-portrait-header"><label class="sheet-header">ПОРТРЕТ ПЕРСОНАЖА</label></div>
<div class="sheet-portrait">
<div class="sheet-head sheet-portrait-container">
<input type="checkbox" name="attr_head" class="sheet-head-harm" value="1">голова
<div class="sheet-head-zone sheet-harm-zone"></div>
<script type="text/worker">
on("change:power", function() {
getAttrs(["power", "karma"], function(values) {
setAttrs({
"karma": 7 - parseInt(values["power"])
});
});
});
</script>
<a href="http://exnihilum.info"> <img
src="https://raw.githubusercontent.com/Noisyflasher/roll20-character-sheets/stickstation13/stickstation13/images/stickstation13-emblem.png"
alt="Stickstation 13 by EX NIHILUM.INFO"></a>
<p></p>
<div class="sheet-main-container">
<div class="sheet-grid-container">
<div class="sheet-portrait-header"><label class="sheet-header">ЧАСТИ ТЕЛА</label></div>
<div class="sheet-portrait">
<div class="sheet-head sheet-portrait-container">
<input type="checkbox" name="attr_head" class="sheet-head-harm" value="1" checked> голова
<img class="sheet-head-zone-enabled" src="https://raw.githubusercontent.com/Noisyflasher/roll20-character-sheets/stickstation13/stickstation13/images/stickstation13-part-enabled.png">
<img class="sheet-head-zone-disabled" src="https://raw.githubusercontent.com/Noisyflasher/roll20-character-sheets/stickstation13/stickstation13/images/stickstation13-part-headntorso.png">
</div>
<div class="sheet-right-hand sheet-portrait-container">
<input type="checkbox" name="attr_rhand" class="sheet-rhand-harm" value="1" checked> прав. рука
<img class="sheet-rhand-zone-enabled" src="https://raw.githubusercontent.com/Noisyflasher/roll20-character-sheets/stickstation13/stickstation13/images/stickstation13-part-enabled.png">
<img class="sheet-rhand-zone-disabled" src="https://raw.githubusercontent.com/Noisyflasher/roll20-character-sheets/stickstation13/stickstation13/images/stickstation13-part-over.png">
</div>
<div class="sheet-torso sheet-portrait-container">
<input type="checkbox" name="attr_torso" class="sheet-torso-harm" value="1" checked> торс
<img class="sheet-torso-zone-enabled" src="https://raw.githubusercontent.com/Noisyflasher/roll20-character-sheets/stickstation13/stickstation13/images/stickstation13-part-enabled.png">
<img class="sheet-torso-zone-disabled" src="https://raw.githubusercontent.com/Noisyflasher/roll20-character-sheets/stickstation13/stickstation13/images/stickstation13-part-headntorso.png">
</div>
<div class="sheet-left-hand sheet-portrait-container">
<input type="checkbox" name="attr_lhand" class="sheet-lhand-harm" value="1" checked> лев. рука
<img class="sheet-lhand-zone-enabled" src="https://raw.githubusercontent.com/Noisyflasher/roll20-character-sheets/stickstation13/stickstation13/images/stickstation13-part-enabled.png">
<img class="sheet-lhand-zone-disabled" src="https://raw.githubusercontent.com/Noisyflasher/roll20-character-sheets/stickstation13/stickstation13/images/stickstation13-part-over.png">
</div>
<div class="sheet-right-leg sheet-portrait-container">
<input type="checkbox" name="attr_rleg" class="sheet-rleg-harm" value="1" checked> прав. нога
<img class="sheet-rleg-zone-enabled" src="https://raw.githubusercontent.com/Noisyflasher/roll20-character-sheets/stickstation13/stickstation13/images/stickstation13-part-enabled.png">
<img class="sheet-rleg-zone-disabled" src="https://raw.githubusercontent.com/Noisyflasher/roll20-character-sheets/stickstation13/stickstation13/images/stickstation13-part-over.png">
</div>
<div class="sheet-left-leg sheet-portrait-container">
<input type="checkbox" name="attr_lleg" class="sheet-lleg-harm" value="1" checked> лев.нога
<img class="sheet-lleg-zone-enabled" src="https://raw.githubusercontent.com/Noisyflasher/roll20-character-sheets/stickstation13/stickstation13/images/stickstation13-part-enabled.png">
<img class="sheet-lleg-zone-disabled" src="https://raw.githubusercontent.com/Noisyflasher/roll20-character-sheets/stickstation13/stickstation13/images/stickstation13-part-over.png">
</div>
</div>
<div class="sheet-right-hand sheet-portrait-container">
<input type="checkbox" name="attr_rhand" class="sheet-rhand-harm" value="1">правая рука
<div class="sheet-rhand-zone sheet-harm-zone"></div>
<div class="sheet-profession-name"><input type="text" class="sheet-row-input" name="attr_profession"
value="ПРОФЕССИЯ"><input type="text" class="sheet-row-input"
name="attr_name"
value="ИМЯ ПЕРСОНАЖА">
</div>
<div class="sheet-torso sheet-portrait-container">
<input type="checkbox" name="attr_torso" class="sheet-torso-harm" value="1">торс
<div class="sheet-torso-zone sheet-harm-zone"></div>
<div class="sheet-power"><label class="sheet-header">СИЛА: </label><input type="number" name="attr_power">
<button type="roll" name="power_button" value="&{template:strengthcheck} {{profession=@{profession}}} {{name=@{name}}} {{action=проверяет}} {{result=[[1d6+@{power}]]}}"></button>
<button type="roll" name="init_power_button" value="&{template:strengthcheck} {{profession=@{profession}}} {{name=@{name}}} {{action=накидывает}} {{result=[[1d6]]}}">НАКИДАТЬ!</button>
</div>
<div class="sheet-left-hand sheet-portrait-container">
<input type="checkbox" name="attr_lhand" class="sheet-lhand-harm" value="1">левая рука
<div class="sheet-lhand-zone sheet-harm-zone"></div>
</div>
<div class="sheet-right-leg sheet-portrait-container">
<input type="checkbox" name="attr_rleg" class="sheet-rleg-harm" value="1">правая нога
<div class="sheet-rleg-zone sheet-harm-zone"></div>
</div>
<div class="sheet-left-leg sheet-portrait-container">
<input type="checkbox" name="attr_lleg" class="sheet-lleg-harm" value="1">левая нога
<div class="sheet-lleg-zone sheet-harm-zone"></div>
<div class="sheet-karma"><label class="sheet-header">КАРМА: </label><input type="number" name="attr_karma">
</div>
<div class="sheet-positive-header"><label class="sheet-header">ПОЛОЖИТ. ОСОБЕННОСТЬ</label></div>
<div class="sheet-positive-feature"><input class="sheet-row-input" type="text" name="attr_positive"></div>
<div class="sheet-negative-header"><label class="sheet-header">ОТРИЦАТ. ОСОБЕННОСТЬ</label></div>
<div class="sheet-negative-feature"><input class="sheet-row-input" type="text" name="attr_negative"></div>
<div class="sheet-bonus-header"><label class="sheet-header">БОНУС: </label></div>
<div class="sheet-bonus"><input type="text" class="sheet-row-input" name="attr_bonus"></div>
<div class="sheet-gear-header"><label class="sheet-header">ИНВЕНТАРЬ</label></div>
<div class="sheet-gear1 sheet-labeled-row"><label class="sheet-header">1.</label><input class="sheet-row-input"
type="text"
name="attr_gear1"></div>
<div class="sheet-gear2 sheet-labeled-row"><label class="sheet-header">2.</label><input class="sheet-row-input"
type="text"
name="attr_gear2"></div>
<div class="sheet-gear3 sheet-labeled-row"><label class="sheet-header">3.</label><input class="sheet-row-input"
type="text"
name="attr_gear3"></div>
<div class="sheet-gear4 sheet-labeled-row"><label class="sheet-header">4.</label><input class="sheet-row-input"
type="text"
name="attr_gear4"></div>
</div>
<div class="sheet-profession-name"><input type="text" name="attr_profession" value="ПРОФЕССИЯ"><input type="text"
name="attr_name"
value="ИМЯ ПЕРСОНАЖА">
</div>
<div class="sheet-power"><label class="sheet-header">СИЛА: </label><input type="number" name="attr_power">
<button type="roll" name="power_button" value="/roll 1d6 + @{power}"></button>
<button type="roll" name="init_power_button" value="/roll 1d6">СТАРТОВАЯ СИЛА</button>
</div>
<div class="sheet-karma"><label class="sheet-header">КАРМА: </label><input type="number" name="attr_karma"></div>
<div class="sheet-positive-header"><label class="sheet-header">ПОЛОЖИТЕЛЬНАЯ ОСОБЕННОСТЬ</label></div>
<div class="sheet-positive-feature"><input class="sheet-row-input" type="text" name="attr_positive"></div>
<div class="sheet-negative-header"><label class="sheet-header">НЕГАТИВНАЯ ОСОБЕННОСТЬ</label></div>
<div class="sheet-negative-feature"><input class="sheet-row-input" type="text" name="attr_negative"></div>
<div class="sheet-bonus-header"><label class="sheet-header">БОНУС: </label></div>
<div class="sheet-bonus"><input type="text" class="sheet-row-input" name="attr_bonus"></div>
<div class="sheet-gear-header"><label class="sheet-header">ИНВЕНТАРЬ</label></div>
<div class="sheet-gear1 sheet-labeled-row"><label class="sheet-header">1.</label><input class="sheet-row-input"
type="text"
name="attr_gear1"></div>
<div class="sheet-gear2 sheet-labeled-row"><label class="sheet-header">2.</label><input class="sheet-row-input"
type="text"
name="attr_gear2"></div>
<div class="sheet-gear3 sheet-labeled-row"><label class="sheet-header">3.</label><input class="sheet-row-input"
type="text"
name="attr_gear3"></div>
<div class="sheet-gear4 sheet-labeled-row"><label class="sheet-header">4.</label><input class="sheet-row-input"
type="text"
name="attr_gear4"></div>
<img src="https://raw.githubusercontent.com/Noisyflasher/roll20-character-sheets/stickstation13/stickstation13/images/stickstation13-frame.png">
</div>
<rolltemplate class="sheet-rolltemplate-strengthcheck">
<div><span class="sheet-upper-case-name">{{profession}} {{name}}</span> {{action}} СИЛУ!!!</div>
<div>{{result}}</div>
</rolltemplate>