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

Stars Without Number Generic PC

Author: Empiricist

Slug: swn_generic

Type: GameCharacter

System: Stars Without Number

DST Source Code

HTML Template

<div id="rec_body">
      <div id="layer1">
       <div class="leftmost">
        <h1>Personnel Record</h1>
        <h3>CLICK TO <button id="character-save-button">Save</button> UPDATES</h3>
        <div id="dynamic_sheet_values" style="display:none;"></div>
        <h2>Personal Information</h2>
        <ul>
         <li>Name:</li>
         <li class="dsf dsf_name">-</li>
        </ul>
        <ul>
         <li>Player:</li>
         <li class="dsf dsf_player">-</li>
        </ul>
        <ul>
         <li>Campaign:</li>
         <li class="dsf dsf_campaign">-</li>
        </ul>
        <ul>
         <li>World:</li>
         <li class="dsf dsf_home_world">-</li>
        </ul>
        <ul>
         <li>Race:</li>
         <li class="dsf dsf_race">-</li>
        </ul>
        <ul>
         <li>Gender:</li>
         <li class="dsf dsf_gender">-</li>   
        </ul>
        <ul>
        <li>Class:</li>
        <li class="dsf dsf_class">-</li>
        </ul>
        <ul>
         <li>Level:</li>
         <li class="dsf dsf_level">-</li>
        </ul>
        <ul>
         <li>XP Total:</li>
         <li class="dsf dsf_xp_total">-</li>
        </ul>
        <ul>
         <li>Next Lvl XP:</li>
         <li class="dsf dsf_next_lvl">-</li>
        </ul>
        <h2>Attributes</h2>
        <ul>
         <li>Strength</li>
         <li class="dsf ability_score_score dsf_str">-</li>
        </ul>
        <ul>
         <li>Intelligence</li>
         <li class="dsf ability_score_score dsf_int">-</li>
        </ul>
        <ul>
         <li>Dexterity</li>
         <li class="dsf ability_score_score dsf_dex">-</li>
        </ul>
        <ul>
         <li>Constitution</li>
         <li class="dsf ability_score_score dsf_con">-</li>
        </ul>
        <ul>
        <li>Wisdom</li>
         <li class="dsf ability_score_score dsf_wis">-</li>
        </ul>
        <ul>
        <li>Charisma</li>
         <li class="dsf ability_score_score dsf_cha">-</li>
        </ul>
        <h2>Saves</h2>
        <ul>
         <li>Physical</li>
         <li class="dsf dsf_phys_sav">-</li>
        </ul>
        <ul>
         <li>Mental</li>
         <li class="dsf dsf_ment_sav">-</li>
        </ul>
        <ul>
         <li>Evasion</li>
         <li class="dsf dsf_phys_sav">-</li>
        </ul>
        <ul>
         <li>Tech</li>
         <li class="dsf dsf_tech_sav">-</li>
        </ul>
        <ul>
         <li>Luck</li>
         <li class="dsf dsf_luck_sav">-</li>
        </ul>
        <h2>Tactical</h2>
        <ul>
         <li>Movement:</li>
         <li class="dsf dsf_mvmnt_rt">-</li>
        </ul>
        <ul>
         <li>Initiative:</li>
         <li class="dsf dsf_init">-</li>
        </ul>
        <ul>
         <li>Hit Dice:</li>
         <li class="dsf dsf_hit_dice">-</li>
        </ul>
        <ul>
         <li>Max HP:</li>
         <li class="dsf dsf_max_hp">-</li>
        </ul>
        <ul>
         <li>Current HP:</li>
         <li class="dsf dsf_curr_hp">-</li>
        <ul>
        <li>Armor Class:</li>
         <li class="dsf dsf_ac">-</li>
        </ul>
        <ul>
         <li>Sys. Strain:</li>
         <li class="dsf dsf_sys_strain">-</li>
        </ul>
      </div>
      <div class="rightmost">
        <h2>Skills</h2>
        <ul>
         <li>Background:</li>
         <li class="dsf dsf_background">-</li>
        </ul>
        <ul>
         <li>Training:</li>
         <li class="dsf dsf_training">-</li>
        </ul>
        <ul >
         <li>Skill Name</li>
         <li>Skill Level</li>
        </ul>
        <ul>
          <li class="dsf dsf_skill_1">-</li>
          <li class="dsf dsf_skill_1_lvl">-</li>
        </ul>
        <ul>
         <li class="dsf dsf_skill_2">-</li>
         <li class="dsf dsf_skill_2_lvl">-</li>
        </ul>
        <ul>
         <li class="dsf dsf_skill_3">-</li>
         <li class="dsf dsf_skill_3_lvl">-</li>
        </ul>
        <ul>
         <li class="dsf dsf_skill_4">-</li>
         <li class="dsf dsf_skill_4_lvl">-</li>
        </ul>
        <ul>
         <li class="dsf dsf_skill_5">-</li>
         <li class="dsf dsf_skill_5_lvl">-</li>
        </ul>
        <ul>
         <li class="dsf dsf_skill_6">-</li>
         <li class="dsf dsf_skill_6_lvl">-</li>
        </ul>
        <ul>
         <li class="dsf dsf_skill_7">-</li>
         <li class="dsf dsf_skill_7_lvl">-</li>
        </ul>
        <ul>
         <li class="dsf dsf_skill_8">-</li>
         <li class="dsf dsf_skill_8_lvl">-</li>
        </ul>
        <ul>
         <li class="dsf dsf_skill_9">-</li>
         <li class="dsf dsf_skill_9_lvl">-</li>
        </ul>
        <ul>
         <li class="dsf dsf_skill_10">-</li>
         <li class="dsf dsf_skill_10_lvl">-</li>
        </ul>
        <ul>
         <li class="dsf dsf_skill_11">-</li>
         <li class="dsf dsf_skill_11_lvl">-</li>
        </ul>
        <ul>
         <li class="dsf dsf_skill_12">-</li>
         <li class="dsf dsf_skill_12_lvl">-</li>
        </ul>
        <ul>
         <li class="dsf dsf_skill_13">-</li>
         <li class="dsf dsf_skill_13_lvl">-</li>
        </ul>
        <ul>
         <li class="dsf dsf_skill_14">-</li>
         <li class="dsf dsf_skill_14_lvl">-</li>
        </ul>
        <ul>
         <li class="dsf dsf_skill_15">-</li>
         <li class="dsf dsf_skill_15_lvl">-</li>
        </ul>
        <ul>
         <li class="dsf dsf_skill_16">-</li>
         <li class="dsf dsf_skill_16_lvl">-</li>
        </ul>
        <ul>
         <li class="dsf dsf_skill_17">-</li>
         <li class="dsf dsf_skill_17_lvl">-</li>
        </ul>
        <ul>
         <li class="dsf dsf_skill_18">-</li>
         <li class="dsf dsf_skill_18_lvl">-</li>
        </ul>
        <ul>
         <li class="dsf dsf_skill_19">-</li>
         <li class="dsf dsf_skill_19_lvl">-</li>
        </ul>
        <ul>
         <li class="dsf dsf_skill_20">-</li>
         <li class="dsf dsf_skill_20_lvl">-</li>
        </ul>
        <h2>Psionics</h2>
        <ul>
         <li>Max Power Points:</li>
         <li class="dsf dsf_maxpp">-</li>
        </ul>
        <ul>
        <li>Current Power Points:</li>
        <li class="dsf dsf_currpp">-</li>
        </ul>
        <h3>Disciplines</h3>
        <ul >
         <li class="dsf dsf_disc1">-</li>
         <li class="dsf dsf_disc2">-</li>
         <li class="dsf dsf_disc3">-</li>
         <li class="dsf dsf_disc4">-</li>
         <li class="dsf dsf_disc5">-</li>
         <li class="dsf dsf_disc6">-</li>
         <li class="dsf dsf_disc7">-</li>
         <li class="dsf dsf_disc8">-</li>
         <li class="dsf dsf_disc9">-</li>
         <li class="dsf dsf_disc10">-</li>
         <li class="dsf dsf_disc11">-</li>
         <li class="dsf dsf_disc12">-</li>
         <li class="dsf dsf_disc13">-</li>
         <li class="dsf dsf_disc14">-</li>
         <li class="dsf dsf_disc15">-</li>
         <li class="dsf dsf_disc16">-</li>
         <li class="dsf dsf_disc17">-</li>
         <li class="dsf dsf_disc18">-</li>
         <li class="dsf dsf_disc19">-</li>
         <li class="dsf dsf_disc20">-</li>
        </ul>
       </div>
      </div>

<div id=layer2>
<h2>Combat: Weapon and Attack Details</h2>
    <div id="first_last">  
      <ul>
        <li>Weapon</li>
        <li>Attr</li>
        <li>Skill</li>
        <li>AB</li>
        <li>Misc</li>
        <li>Range</li>
        <li>TL</li>
        <li>Ammo</li>
        <li>Dmg</li>
        <li>Notes</li>
       </ul>
     <ul class="entry_field">
      <li class="dsf dsf_wpn_1">-</li>
      <li class="dsf dsf_attr_1">-</li>
      <li class="dsf dsf_skill_1">-</li>
      <li class="dsf dsf_ab_1">-</li>
      <li class="dsf dsf_misc_1">-</li>
      <li class="dsf dsf_rng_1">-</li>
      <li class="dsf dsf_tl_1">-</li>
      <li class="dsf dsf_ammo_1">-</li>
      <li class="dsf dsf_dmg_1">-</li>
      <li class="dsf dsf_nts_1">-</li>
     </ul>
     <ul class="entry_field">
      <li class="dsf dsf_wpn_2">-</li>
      <li class="dsf dsf_attr_2">-</li>
      <li class="dsf dsf_skill_2">-</li>
      <li class="dsf dsf_ab_2">-</li>
      <li class="dsf dsf_misc_2">-</li>
      <li class="dsf dsf_rng_2">-</li>
      <li class="dsf dsf_tl_2">-</li>
      <li class="dsf dsf_ammo_2">-</li>
      <li class="dsf dsf_dmg_2">-</li>
      <li class="dsf dsf_nts_2">-</li>
     </ul>
     <ul class="entry_field">
      <li class="dsf dsf_wpn_3">-</li>
      <li class="dsf dsf_attr_3">-</li>
      <li class="dsf dsf_skill_3">-</li>
      <li class="dsf dsf_ab_3">-</li>
      <li class="dsf dsf_misc_3">-</li>
      <li class="dsf dsf_rng_3">-</li>
      <li class="dsf dsf_tl_3">-</li>
      <li class="dsf dsf_ammo_3">-</li>
      <li class="dsf dsf_dmg_3">-</li>
      <li class="dsf dsf_nts_3">-</li>
     </ul>
     <ul class="entry_field">
      <li class="dsf dsf_wpn_4">-</li>
      <li class="dsf dsf_attr_4">-</li>
      <li class="dsf dsf_skill_4">-</li>
      <li class="dsf dsf_ab_4">-</li>
      <li class="dsf dsf_misc_4">-</li>
      <li class="dsf dsf_rng_4">-</li>
      <li class="dsf dsf_tl_4">-</li>
      <li class="dsf dsf_ammo_4">-</li>
      <li class="dsf dsf_dmg_4">-</li>
      <li class="dsf dsf_nts_4">-</li>
     </ul>
     <ul class="entry_field">
      <li class="dsf dsf_wpn_5">-</li>
      <li class="dsf dsf_attr_5">-</li>
      <li class="dsf dsf_skill_5">-</li>
      <li class="dsf dsf_ab_5">-</li>
      <li class="dsf dsf_misc_5">-</li>
      <li class="dsf dsf_rng_5">-</li>
      <li class="dsf dsf_tl_5">-</li>
      <li class="dsf dsf_ammo_5">-</li>
      <li class="dsf dsf_dmg_5">-</li>
      <li class="dsf dsf_nts_5">-</li>
     </ul>
      <ul class="entry_field">
      <li class="dsf dsf_wpn_6">-</li>
      <li class="dsf dsf_attr_6">-</li>
      <li class="dsf dsf_skill_6">-</li>
      <li class="dsf dsf_ab_6">-</li>
      <li class="dsf dsf_misc_6">-</li>
      <li class="dsf dsf_rng_6">-</li>
      <li class="dsf dsf_tl_6">-</li>
      <li class="dsf dsf_ammo_6">-</li>
      <li class="dsf dsf_dmg_6">-</li>
      <li class="dsf dsf_nts_6">-</li>
     </ul>  
     <ul class="entry_field">
      <li class="dsf dsf_wpn_7">-</li>
      <li class="dsf dsf_attr_7">-</li>
      <li class="dsf dsf_skill_7">-</li>
      <li class="dsf dsf_ab_7">-</li>
      <li class="dsf dsf_misc_7">-</li>
      <li class="dsf dsf_rng_7">-</li>
      <li class="dsf dsf_tl_7">-</li>
      <li class="dsf dsf_ammo_7">-</li>
      <li class="dsf dsf_dmg_7">-</li>
      <li class="dsf dsf_nts_7">-</li>
     </ul>
     <ul class="entry_field">
      <li class="dsf dsf_wpn_8">-</li>
      <li class="dsf dsf_attr_8">-</li>
      <li class="dsf dsf_skill_8">-</li>
      <li class="dsf dsf_ab_8">-</li>
      <li class="dsf dsf_misc_8">-</li>
      <li class="dsf dsf_rng_8">-</li>
      <li class="dsf dsf_tl_8">-</li>
      <li class="dsf dsf_ammo_8">-</li>
      <li class="dsf dsf_dmg_8">-</li>
      <li class="dsf dsf_nts_8">-</li>
     </ul>
     <ul class="entry_field">
      <li class="dsf dsf_wpn_9">-</li>
      <li class="dsf dsf_attr_9">-</li>
      <li class="dsf dsf_skill_9">-</li>
      <li class="dsf dsf_ab_9">-</li>
      <li class="dsf dsf_misc_9">-</li>
      <li class="dsf dsf_rng_9">-</li>
      <li class="dsf dsf_tl_9">-</li>
      <li class="dsf dsf_ammo_9">-</li>
      <li class="dsf dsf_dmg_9">-</li>
      <li class="dsf dsf_nts_9">-</li>
     </ul>
     </div>
</div>

<div id="layer3">
 <h2>Equipment</h2>

<div class="block">
  <h3>Readied Gear</h3>
   <ul class="border_first"> 
    <li class="dsf dsf_ready_1">-</li>
    <li class="dsf dsf_ready_2">-</li>
    <li class="dsf dsf_ready_3">-</li>
    <li class="dsf dsf_ready_4">-</li>
    <li class="dsf dsf_ready_5">-</li>
    <li class="dsf dsf_ready_6">-</li>
    <li class="dsf dsf_ready_7">-</li>
    <li class="dsf dsf_ready_8">-</li>
    <li class="dsf dsf_ready_9">-</li>
    <li class="dsf dsf_ready_10">-</li>
   </ul>
</div>
<div class="block">
  <h3>Stowed Gear</h3>
   <ul class="border_first">
    <li class="dsf dsf_stowed_1">-</li>
    <li class="dsf dsf_stowed_2">-</li>
    <li class="dsf dsf_stowed_3">-</li>
    <li class="dsf dsf_stowed_4">-</li>
    <li class="dsf dsf_stowed_5">-</li>
    <li class="dsf dsf_stowed_6">-</li>
    <li class="dsf dsf_stowed_7">-</li>
    <li class="dsf dsf_stowed_8">-</li>
    <li class="dsf dsf_stowed_9">-</li>
    <li class="dsf dsf_stowed_10">-</li>
    <li class="dsf dsf_stowed_11">-</li>
    <li class="dsf dsf_stowed_12">-</li>
    <li class="dsf dsf_stowed_13">-</li>
    <li class="dsf dsf_stowed_14">-</li>
    <li class="dsf dsf_stowed_15">-</li>
    <li class="dsf dsf_stowed_16">-</li>
    <li class="dsf dsf_stowed_17">-</li>
    <li class="dsf dsf_stowed_18">-</li>
   </ul>
   </div>
        <div class="block">   
          <h3>Non-Encumbering Gear</h3>
           <ul class="border_first"> 
            <li class="dsf dsf_nenc_1">-</li>
            <li class="dsf dsf_nenc_2">-</li>
            <li class="dsf dsf_nenc_3">-</li>
            <li class="dsf dsf_nenc_4">-</li>
            <li class="dsf dsf_nenc_5">-</li>
            <li class="dsf dsf_nenc_6">-</li>
            <li class="dsf dsf_nenc_7">-</li>
            <li class="dsf dsf_nenc_8">-</li>
            <li class="dsf dsf_nenc_9">-</li>
            <li class="dsf dsf_nenc_10">-</li>
            <li class="dsf dsf_nenc_12">-</li>
            <li class="dsf dsf_nenc_13">-</li>
           </ul>
        </div> 
</div>
</div>

CSS

#layer1, #layer2, #layer3 {
  clear: both;
  font-family: 'Jura';
 }


.leftmost {
 width: 40%;
 float: left;
}

.rightmost {
 width: 60%;
 float: left;
}
.leftmost li, .rightmost li {
  width: 48% !important;
}

.block {
  float:left;
  width: 33% !important;
}
.block li {
  width: 100% !important;
  background-color: aliceblue;
}

#first_last li:first-child {
  width: 20%;
}
#first_last li:last-child {
 width: 30%;
}

#rec_body ul {
  padding: 1px;
  margin: 1px;
}
#rec_body li {
  display: inline-block;
  background-color: lightgrey;
  width: 5%;
  padding: 1px;
  margin: 1px;
}

#rec_body li:nth-child(even) {
  background-color: aliceblue;
}

.block h3 {
  color: black;
}
#rec_body h1, h2, h3 {
 text-align: center;
 color: black !important;
}

JavaScript

Back

Stars Without Number Generic PC

Create Your Campaign

Just One More Step

Just A Little More Info

Use a Social Account