Obsidian Portal - Campaign websites for Dungeons and Dragons and other tabletop RPGs

Huyderman Maid

Author: Huyderman

Slug: huyderman_maid

System: Maid

DST Source Code

HTML Template

<div class="huyderman_maid_top">
  <div class="huyderman_maid_top_left">
    <h1>Maid RPG
    </h1>
    <h2>Character Sheet
    </h2>
    <div class="huyderman_maid_statblock">
      <span>Maid Types:
      </span>
      <span class="dsf dsf_maid_type_1">
      </span>/
      <span class="dsf dsf_maid_type_2">
      </span>
    </div>
    <div class="huyderman_maid_top_left_left">
      <div class="huyderman_maid_statblock">
        <span class="huyderman_maid_blockheader">Special Qualities
        </span>
        <ul>
          <li>
            <span class="dsf dsf_special_quality_1">
            </span>
          </li>
          <li>
            <span class="dsf dsf_special_quality_2">
            </span>
          </li>
          <li>
            <span class="dsf dsf_special_quality_3">
            </span>
          </li>
          <li>
            <span class="dsf dsf_special_quality_4">
            </span>
          </li>
          <li>
            <span class="dsf dsf_special_quality_5">
            </span>
          </li>
          <li>
            <span class="dsf dsf_special_quality_6">
            </span>
          </li>
        </ul>
      </div>
    </div>
    <div class="huyderman_maid_top_left_right">
      <div>
        <div class="huyderman_maid_statblock">
          <span class="huyderman_maid_blockheader">Maid Roots
          </span>
          <span class="dsf dsf_maid_roots">
          </span>
        </div>
        <div class="huyderman_maid_statblock">
          <span class="huyderman_maid_blockheader">Stress Explosion!
          </span>
          <span class="dsf dsf_stress_explosion">
          </span>
        </div>
        <div class="huyderman_maid_statblock">
          <span class="huyderman_maid_blockheader">Maid Power
          </span>
          <span class="dsf dsf_maid_power">
          </span>
        </div>
      </div>
    </div>
  </div>
  <div class="huyderman_maid_top_right">
    <div class="huyderman_maid_personalia huyderman_maid_statblock">
      <div class="huyderman_maid_personalia_header">
        <div class="huyderman_maid_name">
          <span>Name:
          </span>
          <span class="dsf dsf_name">
          </span>
        </div>
        <div class="huyderman_maid_age">
          <span>Age:
          </span>
          <span class="dsf dsf_age">
          </span>
        </div>
        <div class="huyderman_maid_player">
          <span>Player:
          </span>
          <span class="dsf dsf_player">
          </span>
        </div>
        <div class="huyderman_maid_campaign">
          <span>Campaign:
          </span>
          <span class="dsf dsf_campaign">
          </span>
        </div>
      </div>
      <div class="huyderman_maid_image">
        <span class="dsf dsf_avatar_image">
        </span>
      </div>
      <div class="huyderman_maid_colors">
        <span class="huyderman_maid_blockheader">Maid Colors
        </span>
        <div class="huyderman_maid_colors_clothes">
          <span class="huyderman_maid_blockheader">Clothes:
            <span>
              <span class="dsf dsf_colors_clothes">
              </span>
            </div>
            <div class="huyderman_maid_colors_eyes">
              <span class="huyderman_maid_blockheader">Eyes:
              </span>
              <span class="dsf dsf_colors_eyes">
              </span>
            </div>
            <div class="huyderman_maid_colors_hair">
              <span class="huyderman_maid_blockheader">Hair:
              </span>
              <span class="dsf dsf_colors_hair">
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="huyderman_maid_middle">
      <div class="huyderman_maid_attributes huyderman_maid_statblock"">
        <span class="huyderman_maid_blockheader">Attributes
        </span>
        <div>
          <span class="huyderman_maid_blockheader">Athletics
          </span>
          <span class="dsf dsf_athletics">
          </span>
        </div>
        <div>
          <span class="huyderman_maid_blockheader">Affection
          </span>
          <span class="dsf dsf_affection">
          </span>
        </div>
        <div>
          <span class="huyderman_maid_blockheader">Skill
          </span>
          <span class="dsf dsf_skill">
          </span>
        </div>
        <div>
          <span class="huyderman_maid_blockheader">Cunning
          </span>
          <span class="dsf dsf_cunning">
          </span>
        </div>
        <div>
          <span class="huyderman_maid_blockheader">Luck
          </span>
          <span class="dsf dsf_luck">
          </span>
        </div>
        <div>
          <span class="huyderman_maid_blockheader">Will
          </span>
          <span class="dsf dsf_will">
          </span>
        </div>
      </div>
    </div>
    <div class="huyderman_maid_bottom">
      <div class="huyderman_maid_bottom_left">
        <div class="huyderman_maid_statblock huyderman_maid_scratchblock">
          <div class="huyderman_maid_cornernote">
            <span>Spirit
            </span>
            <span class="dsf dsf_spirit">
            </span>
            <span>Will &times;10
            </span>
          </div>
          <div>
            <span class="huyderman_maid_blockheader">Stress
            </span>
            <span class="dsf dsf_stress">
            </span>
          </div>
        </div>
        <div class="huyderman_maid_statblock huyderman_maid_scratchblock">
          <div class="huyderman_maid_cornernote">
            <span>Starting Favor
            </span>
            <span class="dsf dsf_starting_favor">
            </span>
            <span>Affection &times;2
            </span>
          </div>
          <div>
            <span class="huyderman_maid_blockheader">Favor
            </span>
            <span class="dsf dsf_favor">
            </span>
          </div>
        </div>
        <div class="huyderman_maid_statblock huyderman_maid_scratchblock">
          <div>
            <span class="huyderman_maid_blockheader">
              Notes 
              <span class="huyderman_maid_note">(Appearance, Personality, Items, etc.)
              </span>
            </div>
            <div>
              <span class="dsf dsf_bio">
              </span>
            </div>
          </div>
        </div>
        <div class="huyderman_maid_bottom_right">
          <div class="huyderman_maid_statblock">
            <span class="huyderman_maid_blockheader">Maid Weapons
            </span>
            <span class="dsf dsf_maid_weapons">
            </span>
          </div>
          <div class="huyderman_maid_statblock">
            <span class="huyderman_maid_blockheader">Trauma
            </span>
            <span class="dsf dsf_trauma">
            </span>
          </div>
          <div class="huyderman_maid_statblock">
            <span class="huyderman_maid_blockheader">Seduction 
              <span class="huyderman_maid_note">(Seducer&rarr;Target)
              </span>
            </span>
            <table>
              <tr>
                <td>
                  <span class="dsf dsf_seducer_1">
                  </span>
                </td>
                <td>
                  &rarr;
                </td>
                <td>
                  <span class="dsf dsf_target_1">
                  </span>
                </td>
              </tr>
              <tr>
                <td>
                  <span class="dsf dsf_seducer_2">
                  </span>
                </td>
                <td>
                  &rarr;
                </td>
                <td>
                  <span class="dsf dsf_target_2">
                  </span>
                </td>
              </tr>
              <tr>
                <td>
                  <span class="dsf dsf_seducer_3">
                  </span>
                </td>
                <td>
                  &rarr;
                </td>
                <td>
                  <span class="dsf dsf_target_3">
                  </span>
                </td>
              </tr>
            </table>
          </div>
        </div>
        <div class="huyderman_maid_footer">
          Created by 
          <span class="dsf dsf_dst_author">
          </span>.
        </div>
      </div>

CSS

@font-face {
  font-family: "Devinne Swash";
  src: url('http://cdn.obsidianportal.com/dynamic_sheet_template_assets/huyderman_maid/DevinneSwash.ttf'); }

@font-face {
  font-family: "Devinne Swash Shadow";
  src: url('http://cdn.obsidianportal.com/dynamic_sheet_template_assets/huyderman_maid/DevinneSwashShadow.ttf'); }

@font-face {
  font-family: "Sophie";
  src: url('http://cdn.obsidianportal.com/dynamic_sheet_template_assets/huyderman_maid/Sophie.ttf'); }

.ds_huyderman_maid {
  font-family: 'Devinne Swash', 'Comic Sans MS', 'Comic Sans', cursive;
  font-size: large;
  padding: 1em;
  background-color: #f4d8b2;
  background-image: url('http://cdn.obsidianportal.com/dynamic_sheet_template_assets/huyderman_maid/floral.svg');
  background-repeat: no-repeat;
  background-position: left top;
  background-size: contain; }
  .ds_huyderman_maid > div {
    width: 100%; }
    .ds_huyderman_maid > div div {
      vertical-align: top; }
  .ds_huyderman_maid ul {
    margin: 0;
    padding: 0; }
  .ds_huyderman_maid li {
    list-style-type: none; }
  .ds_huyderman_maid .dsf {
    display: inline-block;
    font-family: 'Sophie', 'Comic Sans MS', 'Comic Sans', cursive; }
  .ds_huyderman_maid .huyderman_maid_statblock {
    margin: 0.5em;
    padding: 0.5em;
    border-radius: 1em;
    -moz-border-radius: 1em;
    -webkit-border-radius: 1em;
    background-color: #fcf5ec;
    box-shadow: 0.1em 0.1em 0.5em rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0.1em 0.1em 0.5em rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: 0.1em 0.1em 0.5em rgba(0, 0, 0, 0.2); }
  .ds_huyderman_maid h1 {
    font-size: 3em; }
  .ds_huyderman_maid h1, .ds_huyderman_maid h2 {
    margin-top: 0;
    margin-bottom: 0;
    margin-left: 0.5em;
    margin-right: 0.5em;
    color: #182954;
    text-align: center;
    text-shadow: 0 0 1em #fff, 0 0 0.5em #fff, 0 0 0.25em #fff; }
  .ds_huyderman_maid .huyderman_maid_top {
    word-spacing: -1em; }
    .ds_huyderman_maid .huyderman_maid_top > * {
      word-spacing: normal; }
    .ds_huyderman_maid .huyderman_maid_top_left {
      display: inline-block;
      height: 100%;
      width: 60%;
      word-spacing: -1em; }
      .ds_huyderman_maid .huyderman_maid_top_left > * {
        word-spacing: normal; }
      .ds_huyderman_maid .huyderman_maid_top_left_left, .ds_huyderman_maid .huyderman_maid_top_left_right {
        display: inline-block;
        width: 50%; }
    .ds_huyderman_maid .huyderman_maid_top_right {
      display: inline-block;
      height: 100%;
      width: 40%; }
  .ds_huyderman_maid .huyderman_maid_bottom {
    word-spacing: -1em; }
    .ds_huyderman_maid .huyderman_maid_bottom > * {
      word-spacing: normal; }
    .ds_huyderman_maid .huyderman_maid_bottom_left {
      display: inline-block;
      width: 70%; }
    .ds_huyderman_maid .huyderman_maid_bottom_right {
      display: inline-block;
      width: 30%; }
  .ds_huyderman_maid .huyderman_maid_personalia_header {
    word-spacing: -1em; }
    .ds_huyderman_maid .huyderman_maid_personalia_header > * {
      word-spacing: normal; }
    .ds_huyderman_maid .huyderman_maid_personalia_header > div {
      display: inline-block;
      width: 50%; }
  .ds_huyderman_maid .huyderman_maid_attributes {
    text-align: center;
    word-spacing: -1em; }
    .ds_huyderman_maid .huyderman_maid_attributes > * {
      word-spacing: normal; }
    .ds_huyderman_maid .huyderman_maid_attributes > div {
      margin: 0.2em;
      display: inline-block;
      width: 15%;
      min-width: 80px;
      min-height: 4em;
      background-color: white;
      text-align: center;
      border-radius: 1em;
      -moz-border-radius: 1em;
      -webkit-border-radius: 1em; }
      .ds_huyderman_maid .huyderman_maid_attributes > div .dsf {
        font-size: 2.5em; }
  .ds_huyderman_maid .huyderman_maid_image {
    height: 256px;
    width: 256px; }
  .ds_huyderman_maid .huyderman_maid_colors {
    word-spacing: -1em; }
    .ds_huyderman_maid .huyderman_maid_colors > * {
      word-spacing: normal; }
    .ds_huyderman_maid .huyderman_maid_colors > div {
      display: inline-block;
      width: 33%;
      min-width: 70px; }
  .ds_huyderman_maid .huyderman_maid_blockheader {
    display: block;
    font-size: 1.2em; }
  .ds_huyderman_maid .huyderman_maid_cornernote {
    float: right;
    font-size: 0.8em; }
  .ds_huyderman_maid .huyderman_maid_note {
    font-size: 0.8em; }
  .ds_huyderman_maid .huyderman_maid_scratchblock {
    min-height: 6em; }
  .ds_huyderman_maid .huyderman_maid_blockheader ~ * .huyderman_maid_blockheader {
    font-size: 0.9em; }
  .ds_huyderman_maid .huyderman_maid_footer {
    font-size: 0.6em; }

Javascript

/**
 * Called immediately after a field value has been changed. This is
 * useful if you want to do auto-calculations or validation.
 *
 * @param opts
 *	a javascript object containing:
 * 		- @var containerId @type String The HTML id of the container div surrounding the HTML template
 * 		- @var fieldName @type String The name of the field changed. It will not include the "ds_" prefix.
 * 		- @var fieldValue @type String The value of the field.
 */
function huyderman_maid_dataChange(opts){
    if (opts.fieldName == "will") {
        $(".dsf_spirit").text($(".dsf_will").text() * 10);
    }
    else 
        if (opts.fieldName == "affection") {
            $(".dsf_starting_favor").text($(".dsf_affection").text() * 2);
        }
}

Back

Huyderman Maid

Create Your Campaign

Just One More Step

Just A Little More Info

Use a Social Account