mirror of
https://github.com/ikrpg/ikrpg.github.io.git
synced 2026-05-14 14:49:26 +00:00
Added another custom character sheets containing hero details.
This commit is contained in:
phil
parent
0d5d03216a
commit
df25ce900a
7 changed files with 275 additions and 132 deletions
102
_posts/Character-Sheet/0000-01-01-Details.html
Normal file
102
_posts/Character-Sheet/0000-01-01-Details.html
Normal file
|
|
@ -0,0 +1,102 @@
|
||||||
|
---
|
||||||
|
layout: ikrpg
|
||||||
|
tags: [ Character Sheet, None, None ]
|
||||||
|
categories: [ Character-Sheet ]
|
||||||
|
---
|
||||||
|
|
||||||
|
<p>
|
||||||
|
<a href="/portal/Character-Sheet">Back to the Character Sheet main page</a>.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<h2>Usage</h2>
|
||||||
|
<ol>
|
||||||
|
<li><strong>Fill out</strong> the input fields of the character sheet.</li>
|
||||||
|
<li>Click the <strong>Save sheet to URL</strong> link below the sheet.</li>
|
||||||
|
<li><strong>Copy the URL</strong> and share it with your friends!</li>
|
||||||
|
</ol>
|
||||||
|
|
||||||
|
<div class="sheet">
|
||||||
|
<form id="details" class="card">
|
||||||
|
<input id="name" type="text" />
|
||||||
|
<div id="attributes">
|
||||||
|
<input id="playerName" type="text" />
|
||||||
|
<input id="careers" type="text" />
|
||||||
|
<input id="sex" type="text" />
|
||||||
|
<input id="archetype" type="text" />
|
||||||
|
<input id="race" type="text" />
|
||||||
|
<input id="definingCharacteristics" type="text" />
|
||||||
|
<input id="faith" type="text" />
|
||||||
|
<input id="weight" type="text" />
|
||||||
|
<input id="height" type="text" />
|
||||||
|
</div>
|
||||||
|
<div id="injuries">
|
||||||
|
<input id="injury1" type="text" />
|
||||||
|
<input id="injury2" type="text" />
|
||||||
|
<input id="injury3" type="text" />
|
||||||
|
</div>
|
||||||
|
<div id="beliefs">
|
||||||
|
<input id="belief1" type="text" />
|
||||||
|
<input id="belief2" type="text" />
|
||||||
|
<input id="belief3" type="text" />
|
||||||
|
</div>
|
||||||
|
<div id="connections">
|
||||||
|
<input id="connection1" type="text" />
|
||||||
|
<input id="connection2" type="text" />
|
||||||
|
<input id="connection3" type="text" />
|
||||||
|
<input id="connection4" type="text" />
|
||||||
|
</div>
|
||||||
|
<div id="languages">
|
||||||
|
<input id="language1" type="text" />
|
||||||
|
<input id="language2" type="text" />
|
||||||
|
<input id="language3" type="text" />
|
||||||
|
<input id="language4" type="text" />
|
||||||
|
<input id="language5" type="text" />
|
||||||
|
<input id="language6" type="text" />
|
||||||
|
<input id="language7" type="text" />
|
||||||
|
<input id="language8" type="text" />
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
<a href="javascript:hero.url();">Save sheet to URL</a>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p class="right">
|
||||||
|
Thanks to XYZ for the Sheet!
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<script type="text/javascript" src="/static/javascripts/heroic.js"></script>
|
||||||
|
<script type="text/javascript">
|
||||||
|
var hero = new Heroic({
|
||||||
|
"name": "Hero's name",
|
||||||
|
"archetype": "Archetype",
|
||||||
|
"race": "Race",
|
||||||
|
"careers": "Careers",
|
||||||
|
"playerName": "Player's Name",
|
||||||
|
"sex":"sex",
|
||||||
|
"definingCharacteristics": "Defining Characteristics",
|
||||||
|
"faith": "Faith",
|
||||||
|
"weight": "Weight",
|
||||||
|
"height": "Height",
|
||||||
|
"injury1": "Injury 1",
|
||||||
|
"injury2": "Injury 2",
|
||||||
|
"injury3": "...",
|
||||||
|
"belief1": "Religious Belief 1",
|
||||||
|
"belief2": "Religious Belief 2",
|
||||||
|
"belief3": "...",
|
||||||
|
"connection1": "Connection 1",
|
||||||
|
"connection2": "Connection 2",
|
||||||
|
"connection3": "...",
|
||||||
|
"connection4": "",
|
||||||
|
"language1": "Language 1",
|
||||||
|
"language2": "Language 2",
|
||||||
|
"language3": "...",
|
||||||
|
"language4": "",
|
||||||
|
"language5": "",
|
||||||
|
"language6": "",
|
||||||
|
"language7": "",
|
||||||
|
"language8": ""
|
||||||
|
});
|
||||||
|
hero.bind();
|
||||||
|
</script>
|
||||||
|
|
@ -105,9 +105,11 @@ categories: [ Character-Sheet ]
|
||||||
<input title="XP" id="xp" type="text" />
|
<input title="XP" id="xp" type="text" />
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<p>
|
<p>
|
||||||
<a href="javascript:hero.url();">Save sheet to URL</a>
|
<a href="javascript:hero.url();">Save sheet to URL</a>
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<script type="text/javascript" src="/static/javascripts/heroic.js"></script>
|
<script type="text/javascript" src="/static/javascripts/heroic.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var hero = new Heroic({
|
var hero = new Heroic({
|
||||||
|
|
@ -142,7 +144,6 @@ categories: [ Character-Sheet ]
|
||||||
"arm_mod": 0,
|
"arm_mod": 0,
|
||||||
"cmd_mod": 0,
|
"cmd_mod": 0,
|
||||||
"xp": 0,
|
"xp": 0,
|
||||||
"hash": "stats",
|
|
||||||
"r1m1": true,
|
"r1m1": true,
|
||||||
"r2m1": false,
|
"r2m1": false,
|
||||||
"r1m2": false,
|
"r1m2": false,
|
||||||
|
|
|
||||||
|
|
@ -9,9 +9,9 @@ tags:
|
||||||
---
|
---
|
||||||
|
|
||||||
<p>
|
<p>
|
||||||
The character sheet is composed of the <em>Stats page</em>, the <em>Skills page</em>, the
|
Our custom character sheet is composed of the <em>Stats page</em>, the <em>Skills page</em>, the
|
||||||
<em>Benefits page</em>, the <em>Abilities page</em>, the <em>Spells page</em>, the <em>Gear page</em>
|
<em>Benefits page</em>, the <em>Abilities page</em>, the <em>Spells page</em>, the <em>Gear page</em>,
|
||||||
and the <em>Notes page</em>.
|
the <em>Notes page</em> and the <em>Details page</em>.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<h2>Character sheets</h2>
|
<h2>Character sheets</h2>
|
||||||
|
|
@ -23,6 +23,7 @@ tags:
|
||||||
<li><a href="/character-sheet/Spells">Spells</a></li>
|
<li><a href="/character-sheet/Spells">Spells</a></li>
|
||||||
<li><a href="/character-sheet/Gear">Gear</a></li>
|
<li><a href="/character-sheet/Gear">Gear</a></li>
|
||||||
<li><a href="/character-sheet/Notes">Notes</a></li>
|
<li><a href="/character-sheet/Notes">Notes</a></li>
|
||||||
|
<li><a href="/character-sheet/Details">Details</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
<h2>Example</h2>
|
<h2>Example</h2>
|
||||||
|
|
|
||||||
BIN
static/images/sheet/Details.png
Normal file
BIN
static/images/sheet/Details.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
|
|
@ -166,7 +166,7 @@ function Heroic(Hero) {
|
||||||
if (sheet) {
|
if (sheet) {
|
||||||
sheet.style["backgroundImage"] = "url("+url+")";
|
sheet.style["backgroundImage"] = "url("+url+")";
|
||||||
sheet.style["backgroundPosition"] = x+"px "+y+"px";
|
sheet.style["backgroundPosition"] = x+"px "+y+"px";
|
||||||
sheet.style["backgroundSize"] = size == "auto" ? "auto" : size+"px";
|
sheet.style["backgroundSize"] = isNaN(parseInt(size, 10)) ? size : size+"px";
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -195,11 +195,13 @@ function Heroic(Hero) {
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
var portrait = document.querySelector("#portrait")
|
|
||||||
, button = portrait.querySelector("input[type='button']");
|
|
||||||
|
|
||||||
|
var portrait = document.querySelector("#portrait");
|
||||||
|
if (portrait != null) {
|
||||||
addListener(portrait, "click", displayPortrait(portrait, "block", "none"));
|
addListener(portrait, "click", displayPortrait(portrait, "block", "none"));
|
||||||
|
var button = portrait.querySelector("input[type='button']");
|
||||||
addListener(button, "click", function(event) { displayPortrait(portrait, "none", "auto")(event); setPortrait(Hero); });
|
addListener(button, "click", function(event) { displayPortrait(portrait, "none", "auto")(event); setPortrait(Hero); });
|
||||||
|
}
|
||||||
|
|
||||||
redirect();
|
redirect();
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -6,6 +6,8 @@ section.content {
|
||||||
section.content > p {
|
section.content > p {
|
||||||
margin: 1.5em 0;
|
margin: 1.5em 0;
|
||||||
text-align: justify; }
|
text-align: justify; }
|
||||||
|
section.content > p.right {
|
||||||
|
text-align: right; }
|
||||||
section.content > h2 {
|
section.content > h2 {
|
||||||
font-size: 1.5em;
|
font-size: 1.5em;
|
||||||
margin-bottom: -0.5em;
|
margin-bottom: -0.5em;
|
||||||
|
|
|
||||||
|
|
@ -121,6 +121,41 @@ div.sheet > form#notes div.content div.note { position: relative; }
|
||||||
div.sheet > form#notes div.content div.note input.title { position: relative; width: 658px; font-size: 17px; text-transform: uppercase; font-weight: bold; }
|
div.sheet > form#notes div.content div.note input.title { position: relative; width: 658px; font-size: 17px; text-transform: uppercase; font-weight: bold; }
|
||||||
div.sheet > form#notes div.content div.note textarea.text { position: relative; width: 658px; height: auto; font-size: 17px; }
|
div.sheet > form#notes div.content div.note textarea.text { position: relative; width: 658px; height: auto; font-size: 17px; }
|
||||||
|
|
||||||
|
div.sheet > form#details { padding-top: 66px; background-image: url(/static/images/sheet/Details.png); background-size: contain; }
|
||||||
|
div.sheet > form#details input#name { top: 46px; left: 180px; height: 45px; width: 485px; font-size: 37px; text-transform: uppercase; }
|
||||||
|
div.sheet > form#details div#attributes { top: 143px; left: 275px; }
|
||||||
|
div.sheet > form#details div#attributes > input#playerName { width: 375px; }
|
||||||
|
div.sheet > form#details div#attributes > input#careers { top: 57px; width: 270px; }
|
||||||
|
div.sheet > form#details div#attributes > input#sex { top: 57px; left: 288px; width: 73px; }
|
||||||
|
div.sheet > form#details div#attributes > input#archetype { top: 112px; width: 190px; }
|
||||||
|
div.sheet > form#details div#attributes > input#race { top: 112px; left: 210px; width: 150px; }
|
||||||
|
div.sheet > form#details div#attributes > input#definingCharacteristics { top: 167px; width: 350px; }
|
||||||
|
div.sheet > form#details div#attributes > input#faith { top: 222px; width: 190px; }
|
||||||
|
div.sheet > form#details div#attributes > input#weight { top: 222px; left: 200px; width: 190px; }
|
||||||
|
div.sheet > form#details div#attributes > input#height { top: 277px; width: 190px; }
|
||||||
|
div.sheet > form#details div#injuries { top: 500px; left: 270px; }
|
||||||
|
div.sheet > form#details div#injuries > input { width: 390px; }
|
||||||
|
div.sheet > form#details div#injuries > input#injury2 { top: 31px; }
|
||||||
|
div.sheet > form#details div#injuries > input#injury3 { top: 62px; }
|
||||||
|
div.sheet > form#details div#beliefs { top: 642px; left: 270px; }
|
||||||
|
div.sheet > form#details div#beliefs > input { width: 390px; }
|
||||||
|
div.sheet > form#details div#beliefs > input#belief2 { top: 31px; }
|
||||||
|
div.sheet > form#details div#beliefs > input#belief3 { top: 62px; }
|
||||||
|
div.sheet > form#details div#connections { top: 805px; left: 270px; }
|
||||||
|
div.sheet > form#details div#connections > input { width: 390px; }
|
||||||
|
div.sheet > form#details div#connections > input#connection2 { top: 28px; }
|
||||||
|
div.sheet > form#details div#connections > input#connection3 { top: 56px; }
|
||||||
|
div.sheet > form#details div#connections > input#connection4 { top: 84px; }
|
||||||
|
div.sheet > form#details div#languages { top: 205px; left: 33px; }
|
||||||
|
div.sheet > form#details div#languages > input { width: 230px; }
|
||||||
|
div.sheet > form#details div#languages > input#language2 { top: 31px; }
|
||||||
|
div.sheet > form#details div#languages > input#language3 { top: 62px; }
|
||||||
|
div.sheet > form#details div#languages > input#language4 { top: 93px; }
|
||||||
|
div.sheet > form#details div#languages > input#language5 { top: 124px; }
|
||||||
|
div.sheet > form#details div#languages > input#language6 { top: 155px; }
|
||||||
|
div.sheet > form#details div#languages > input#language7 { top: 186px; }
|
||||||
|
div.sheet > form#details div#languages > input#language8 { top: 217px; }
|
||||||
|
|
||||||
@media print {
|
@media print {
|
||||||
section.content > div.sheet { display: block; -webkit-transform: scale(0.4); -o-transform: scale(0.4); transform: scale(0.4); }
|
section.content > div.sheet { display: block; -webkit-transform: scale(0.4); -o-transform: scale(0.4); transform: scale(0.4); }
|
||||||
}
|
}
|
||||||
Loading…
Add table
Add a link
Reference in a new issue