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

Cyberpunk RED Worksheet

Author: Since1980

Slug: cp4WS

Type: GameCharacter

System: Cyberpunk RED

DST Source Code

HTML Template

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cyberpunk RED</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>

<div class="character-sheet">
    <h1>Cyberpunk RED</h1>

    <!-- Basic Info -->
    <section class="basic-info">
        <h2>Mug Shot</h2>
        <div class="grid">
            <p>Name: <span class="dsf dsf_name"></span></p>
            <p>Role & Level: <span class="dsf dsf_Role"></span></p>
            <p>Portrait: <span class="dsf dsf_avatar_image"></span></p>
        </div>
    </section>

    <!-- Attributes -->
<section class="attributes">
  <h2>Attributes sum: <span class="dsf dsf_sumStats"/></h2>
  <div class="attribute-row">
    <span>INT: <span class="dsf dsfu dsf_stat_INT"></span></span>
    <span>REF: <span class="dsf dsfu dsf_stat_REF"></span></span>
    <span>DEX: <span class="dsf dsfu dsf_stat_DEX"></span></span>
    <span>TECH: <span class="dsf dsfu dsf_stat_TECH"></span></span>
    <span>COOL: <span class="dsf dsfu dsf_stat_COOL"></span></span>
    <span>WILL: <span class="dsf dsfu dsf_stat_WILL"></span></span>
    <span>LUCK: <span class="dsf dsfu dsf_stat_LUCK"></span></span>
    <span>MOVE <span class = "dsf dsfu dsf_stat_MOVE"/></span></span>
    <span>BODY: <span class="dsf dsfu dsf_stat_BODY"></span></span>
    <span>Current EMP: <span class="dsf dsfu dsf_stat_EMP"></span></span>
    <span>Original EMP: <span class = "dsf dsfu dsf_stat_EMP_original"/></span></span>
  </div>
</section>

    <!--  (COOL) Skills -->
    <section class="ref-skills">
        <h2>Skills</h2>
        <div class="grid">
            <p>Accounting (INT) <span class = "dsf dsfu dsf_skill_Accounting"/>
            <p>Acting (COOL) <span class = "dsf dsfu dsf_skill_Acting"/>
            <p>Air Vehicle Tech (TECH) <span class = "dsf dsfu dsf_skill_Air_Vehicle_Tech"/>
            <p>Animal Handling (INT) <span class = "dsf dsfu dsf_skill_Animal_Handling"/>
            <p>Archery (REF) <span class = "dsf dsfu dsf_skill_Archery"/>
            <p>Athletics (DEX) <span class = "dsf dsfu dsf_skill_Athletics"/>
            <p>Autofire (REF) <span class = "dsf dsfu dsf_skill_Autofire"/>
            <p>Basic Tech (TECH) <span class = "dsf dsfu dsf_skill_Basic_Tech"/>
            <p>Brawling (DEX) <span class = "dsf dsfu dsf_skill_Brawling"/>
            <p>Bribery (COOL) <span class = "dsf dsfu dsf_skill_Bribery"/>
            <p>Bureaucracy (INT) <span class = "dsf dsfu dsf_skill_Bureaucracy"/>
            <p>Business (INT) <span class = "dsf dsfu dsf_skill_Business"/>
            <p>Composition (INT) <span class = "dsf dsfu dsf_skill_Composition "/>
            <p>Conceal/Reveal Object (INT) <span class = "dsf dsfu dsf_skill_Conceal"/>
            <p>Concentration (WILL) <span class = "dsf dsfu dsf_skill_Concentration"/>
            <p>Contortionist (DEX) <span class = "dsf dsfu dsf_skill_Contortionist"/>
            <p>Conversation (EMP) <span class = "dsf dsfu dsf_skill_Conversation"/>
            <p>Criminology (INT) <span class = "dsf dsfu dsf_skill_Criminology"/>
            <p>Cryptography (INT) <span class = "dsf dsfu dsf_skill_Cryptography "/>
            <p>Cybertech (TECH) <span class = "dsf dsfu dsf_skill_Cybertech"/>
            <p>Dance (DEX) <span class = "dsf dsfu dsf_skill_Dance"/>
            <p>Deduction (INT) <span class = "dsf dsfu dsf_skill_Deduction"/>
            <p>Demolitions (TECH) <span class = "dsf dsfu dsf_skill_Demolitions"/>
            <p>Drive Land Vehicle (REF) <span class = "dsf dsfu dsf_skill_Drive_Land_Vehicle"/>
            <p>Education (INT) <span class = "dsf dsfu dsf_skill_Education"/>
            <p>Electronics/Security Tech (TECH) <span class = "dsf dsfu dsf_skill_Electronics_Security_Tech"/>
            <p>Endurance (WILL) <span class = "dsf dsfu dsf_skill_Endurance"/>
            <p>Evasion (DEX) <span class = "dsf dsfu dsf_skill_Evasion"/>
            <p>First Aid (TECH) <span class = "dsf dsfu dsf_skill_First_Aid"/>
            <p>Forgery (TECH) <span class = "dsf dsfu dsf_skill_Forgery"/>
            <p>Gamble (INT) <span class = "dsf dsfu dsf_skill_Gamble"/>
            <p>Handgun (REF) <span class = "dsf dsfu dsf_skill_Handgun" />
            <p>Heavy Weapons (REF) <span class = "dsf dsfu dsf_skill_Heavy_Weapons"/>
            <p>Human Perception (EMP) <span class = "dsf dsfu dsf_skill_Human_Perception"/>
            <p>Interrogation (COOL) <span class = "dsf dsf_skill_Interrogation "/>
            <p>Land Vehicle Tech (TECH) <span class = "dsf dsfu dsf_skill_Land_Vehicle_Tech"/>
            <p>Language (INT) <span class = "dsf dsfu dsf_skill_Language"/>
            <p>Language(Streetslang) (INT) <span class = "dsf dsfu dsf_skill_Language_Streetslang"/>
            <p>Language(Native) (INT) <span class = "dsf dsfu dsf_skill_Language_Native"/>
            <p>Library Search (INT) <span class = "dsf dsfu dsf_skill_Library_Search"/>
            <p>Lip Reading (INT) <span class = "dsf dsfu dsf_skill_Lip Reading"/>
            <p>Local Expert (INT) <span class = "dsf dsfu dsf_skill_Local Expert"/>
            <p>Martial Arts (DEX) <span class = "dsf dsfu dsf_skill_Martial_Arts"/>
            <p>Melee Weapon (DEX) <span class = "dsf dsfu dsf_skill_Melee"/>
            <p>Paramedic (TECH) <span class = "dsf dsfu dsf_skill_Paramedic"/>
            <p>Perception (INT) <span class = "dsf dsfu dsf_skill_Perception"/>
            <p>Personal Grooming (COOL) <span class = "dsf dsfu dsf_skill_Personal_Grooming"/>
            <p>Persuasion (COOL) <span class = "dsf dsfu dsf_skill_Persuasion"/>
            <p>Photography/Film (TECH) <span class = "dsf dsfu dsf_skill_Photography"/>
            <p>Pick Lock (TECH) <span class = "dsf dsfu dsf_skill_Pick_Lock"/>
            <p>Pick Pocket (TECH) <span class = "dsf dsfu dsf_skill_Pick_Pocket"/>
            <p>Pilot Air Vehicle (REF) <span class = "dsf dsfu dsf_skill_Pilot_Air_Vehicle"/>
            <p>Pilot Sea Vehicle (REF) <span class = "dsf dsfu dsf_skill_Pilot_Sea_Vehicle"/>
            <p>Play Instrument (TECH) <span class = "dsf dsfu dsf_skill_Play_Instrument"/>
            <p>Resist Torture/Drugs (WILL) <span class = "dsf dsfu dsf_skill_Resist"/>
            <p>Riding (REF) <span class = "dsf dsfu dsf_skill_Riding"/>
            <p>Science (INT) <span class = "dsf dsfu dsf_skill_Science"/>
            <p>Sea Vehicle Tech (TECH) <span class = "dsf dsfu dsf_skill_Sea_Vehicle_Tech"/>
            <p>Shoulder Arms (REF) <span class = "dsf dsfu dsf_skill_Shoulder_Arms"/>
            <p>Stealth (DEX) <span class = "dsf dsfu dsf_skill_Stealth"/>
            <p>Streetwise (COOL) <span class = "dsf dsfu dsf_skill_Streetwise "/>
            <p>Tactics (INT) <span class = "dsf dsfu dsf_skill_Tactics"/>
            <p>Tracking (INT) <span class = "dsf dsfu dsf_skill_Tracking"/>
            <p>Trading (COOL) <span class = "dsf dsfu dsf_skill_Trading"/>
            <p>Wardrobe & Style (COOL) <span class = "dsf dsfu dsf_skill_Wardrobe"/>
            <p>Weaponstech (TECH) <span class = "dsf dsfu dsf_skill_Weaponstech"/>
            <p>Wilderness Survival (INT) <span class = "dsf dsfu dsf_skill_Wilderness_Survival"/>
        </div>
    </section>

    <!-- Less Mutable Stats -->
    <section class="other-stats">
        <h2>Less Changeable Stats</h2>
        <div class="grid">
            <p>Primary Weapon <span class = "dsf dsfu dsf_Weapon" />
            <p>Critical Injuries <span class = "dsf dsfu dsf_Critical_Injuries" />
            <p>Reputation <span class = "dsf dsfu dsf_Rep"/>
            <p>Improvement Points <span class = "dsf dsfu dsf_IP"/>
            <p>Evasion against Ranged attacks<span class="dsf dsf_Evasion_Ranged checkbox checked" onclick="this.classList.toggle('checked')">
        </div>
    </section>

    <!-- Mutable Stats -->
    <section class="mutable-stats">
        <h2>More Changeable Stats</h2>
        <div class="grid">
            <p>Initiative: <span class="dsfu dsf dsf_initiative_base"></span></p>
            <p>Hit Points: <span class="dsfu dsf dsf_current_hit_points"></span></p>
            <p>Body SP: <span class="dsfu dsf dsf_current_sp_body"></span></p>
            <p>Head SP: <span class="dsfu dsf dsf_current_sp_head"></span></p>
            <p>Current Ammo and Type <span class = "dsf dsfu dsf_Ammo" />
            <p>Current LUCK: <span class="dsfu dsf dsf_substat_Current_LUCK"></span></p>
            <p>Eurobucks: <span class="dsfu dsf dsf_money"></span></p>
            <p>Max Humanity: <span class="dsf dsfu dsf_substat_HUM_max"></span></p>
            <p>Current Humanity: <span class="dsfu dsfu dsf_substat_HUM"></span></p>
        </div>
    </section>

    <!-- Player & Campaign Info -->
    <section class="player-info">
        <h2>Player & Campaign</h2>
        <div class="grid">
            <p>Player: <span class="dsf dsf_player"></span></p>
            <p>Campaign: <span class="dsf dsf_campaign"></span></p>
            <p>DST Author: <span class="dsf dsf_dst_author"></span></p>
        </div>
    </section>
</div>

</body>
</html>

CSS

/* General Reset */
.ds_cp4WS body, html {
    margin: 0;
    padding: 0;
    font-family: 'Orbitron', sans-serif; /* Cyberpunk-style font */
    background-color: #0d0d0d;
    color: #f1f1f1;
    line-height: 1.6;
}

/* Title and Headers */
.ds_cp4WS h2 {
    margin-top: 25px;
    color: #ff0066;
    font-size: 1.5em;
    text-transform: uppercase;
    letter-spacing: 2px;
    border-bottom: 2px solid #ff0066;
    padding-bottom: 5px;
}

/* Container Styling */
.ds_cp4WS div {
    padding: 30px;
    margin: auto;
    max-width: 1000px;
    background: linear-gradient(135deg, #f39d9d, #3a3a3a);
    border-radius: 10px;
    box-shadow: 0px 0px 15px rgba(0, 255, 255, 0.6);
}

/* Paragraphs and Spans */
.ds_cp4WS p {
    margin: 12px 0;
}

.ds_cp4WS span {
    font-weight: bold;
    color: #00ccff;
    min-width: 30px;
}

/* Interactive Elements */
.ds_cp4WS input, select {
    background-color: #333;
    color: #00ccff;
    border: 2px solid #ff0066;
    padding: 5px;
    border-radius: 5px;
    font-size: 1.1em;
}

.ds_cp4WS input:focus, select:focus {
    outline: none;
    border-color: #00ffcc;
}

/* Classes for Styling Key Stats */
.dsf {
    display: inline-block;
    padding: 5px 8px;
    background-color: #222;
    border-radius: 4px;
    color: #eaeaea;
}

.dsfu {
    font-size: 1.2em;
    background-color: #222;
    color: #eaeaea;
    border: 1px solid #ff0066;
    border-radius: 6px;
    padding: 4px 8px;
}

/* Table-Like Presentation */
.dsf_name, .dsf_Role, .dsf_player, .dsf_campaign, .dsf_dst_author, dsf_bio {
    display: block;
    margin-bottom: 8px;
    color: white
}

/* Add Some Flair to Attributes */
.dsf_stat_REF, .dsf_stat_DEX, .dsf_stat_MOVE, 
.dsf_stat_BODY, .dsf_stat_TECH, .dsf_stat_INT,
.dsf_stat_COOL, .dsf_stat_EMP, .dsf_stat_WILL,
.dsf_stat_LUCK, .dsfu {
    border: 2px solid #00ccff;
    padding: 5px;
    background-color: #333;
    border-radius: 6px;
    margin: 5px 0;
    text-align: center;
}

/* Add Glow Effect on Hover */
.ds_cp4WS span:hover {
    color: #ffffff;
    background-color: #ff6600;
    transition: 0.3s ease;
}

/* Portrait Styling */
.dsf_avatar_image {
    display: block;
    margin: 15px auto;
    width: 180px;
    height: 150px;
    border-radius: 50%;
    background-color: #555;
}

/* Highlight Active Skills */
.dsf_skill_Handgun, .dsf_skill_Melee, .dsf_skill_Brawling, .dsf_skill_Shoulder_Arms, .dsf_skill_Evasion  {
    color: #33cc33;
    font-weight: bold;
}

/* Add a Border to Skills Sections */
.ds_cp4WS h2 + p {
    border-top: 1px solid #444;
    padding-top: 5px;
    margin-top: 10px;
}

JavaScript


// Global
cp4WS_options = {}

function cp4WS_sumStats()
{
  const intEl = cp4WS_options.defaultContext.querySelector('.dsf_stat_INT');
  const refEl = cp4WS_options.defaultContext.querySelector('.dsf_stat_REF');
  const dexEl = cp4WS_options.defaultContext.querySelector('.dsf_stat_DEX');
  const techEl = cp4WS_options.defaultContext.querySelector('.dsf_stat_TECH');
  const coolEl = cp4WS_options.defaultContext.querySelector('.dsf_stat_COOL');
  const willEl = cp4WS_options.defaultContext.querySelector('.dsf_stat_WILL');
  const moveEl = cp4WS_options.defaultContext.querySelector('.dsf_stat_MOVE');
  const bodyEl = cp4WS_options.defaultContext.querySelector('.dsf_stat_BODY');
  const luckEl = cp4WS_options.defaultContext.querySelector('.dsf_stat_LUCK');
  const empOrigEl = cp4WS_options.defaultContext.querySelector('.dsf_stat_EMP_original');

  const intVal = parseInt(intEl?.textContent || '5', 10);
  const refVal = parseInt(refEl?.textContent || '5', 10);
  const dexVal = parseInt(dexEl?.textContent || '5', 10);
  const techVal = parseInt(techEl?.textContent || '5', 10);
  const coolVal = parseInt(coolEl?.textContent || '5', 10);
  const willVal = parseInt(willEl?.textContent || '5', 10);
  const moveVal = parseInt(moveEl?.textContent || '5', 10);
  const bodyVal = parseInt(bodyEl?.textContent || '5', 10);
  const luckVal = parseInt(luckEl?.textContent || '0', 10);
  const empOrigVal = parseInt(empOrigEl?.textContent || '5', 10);

  const total = intVal + refVal + dexVal + techVal + coolVal + willVal + moveVal + bodyVal + luckVal + empOrigVal;

  return total;
}
function cp4WS_updateFields()
{
  const sumStatsEl = cp4WS_options.defaultContext.querySelector('.dsf_sumStats');

  sumStats = cp4WS_sumStats();

  if (sumStatsEl) 
  {
     if(!isNaN(sumStats))
       sumStatsEl.textContent = sumStats;
  }
}

function cp4WS_dataPostLoad(opts)
{
  cp4WS_options.defaultContext = document.getElementById(opts.containerId);

  cp4WS_updateFields()
}

function cp4WS_dataChange(opts)
{
  cp4WS_updateFields()
}

Back

Cyberpunk RED Worksheet

Create Your Campaign

Just One More Step

Just A Little More Info

Use a Social Account