<!DOCTYPE html>
<html>
<head>
<!-- style sheets -->
<link rel="stylesheet" href="/lib/bootstrap/bootstrap.min.css">
<!-- <link rel="stylesheet" href="/css/cyberpunk-2077.css"> -->
<!-- Local style sheet relative to workspace folder -->
<link rel="stylesheet" href="/style.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=VT323&display=swap">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Advent+Pro:wght@200;300;500;600;700&display=swap"">
<!-- Local style sheet relative to this file -->
<!-- <link rel="stylesheet" href="style.css"> -->
<!-- Embedded style sheet -->
<style>
body {
font-family: "Advent Pro", Arial, Helvetica, sans-serif;
font-weight: 600;
background-color: #e6e6e6;
}
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
appearance: none;
margin: 0;
}
/* Firefox */
input[type=number] {
-moz-appearance: textfield;
appearance: textfield;
}
table {
//width: 100%;
}
th, td {
padding: 0 2px;
text-align: center;
border: 1px solid black;
vertical-align: middle;
}
td {
font-size: 0.8em;
font-weight: 700;
}
td > input {
border: none;
background-color: #0000;
}
table > tbody > tr > th {
border-spacing: 10px 10px;
border-collapse: separate;
}
th {
color: #fff;
background-color: black;
padding: 8px;
/* border-right: px solid transparent; /* Add a transparent border to the bottom of the header cells */
}
#handle {
display: flex;
align-items: center;
gap: 10px;
}
#HANDLE {
/*padding: 4px 0;*/
width: 100%;
box-sizing: border-box;
flex-grow: 1;
}
/* #armor {
display: flex;
align-items: center;
gap: 5px;
} */
.bb {
font-weight: 700;
color: white;
background-color: black;
padding: 4px;
}
.input-brack {
display: inline-block;
}
.input-brack::before {
content: "[";
}
.input-brack::after {
content: "]";
}
#sec-stats.my-1 input{
border: 0;
width: 1.2em;
background-color: #0000;
}
.right-align {
text-align: right;
}
.input-short {
width: 3em;
}
</style>
</head>
<body>
<header></header>
<div class="content container-fluid">
<div class="row">
<div class="col my-2">
<div class="my-1" id="handle">
<label class="bb" for="HANDLE">HANDLE</label>
<input type="text" name="" id="HANDLE">
</div>
<div class="my-1" id="role">
<span class="bb">ROLE</span>
<input type="checkbox" name="" id="RSolo">
<label for="RSolo">Solo</label>
<input type="checkbox" name="" id="RRocker">
<label for="RRocker">Rocker</label>
<input type="checkbox" name="" id="RNetrunner">
<label for="RNetrunner">Netrunner</label>
<input type="checkbox" name="" id="RMedia">
<label for="RMedia">Media</label>
<input type="checkbox" name="" id="RNomad">
<label for="RNomad">Nomad</label>
<input type="checkbox" name="" id="RFixer">
<label for="RFixer">Fixer</label>
<input type="checkbox" name="" id="RCop">
<label for="RCop">Cop</label>
<input type="checkbox" name="" id="RCorp">
<label for="RCorp">Corp</label>
<input type="checkbox" name="" id="RTechie">
<label for="RTechie">Techie</label>
<input type="checkbox" name="" id="RMedtechie">
<label for="RMedtechie">Medtechie</label>
</div>
<div class="my-1" id="sec-char-point">
<span class="bb">CHARACTER POINTS</span>
<input type="number" name="" id="CHAR" style="width: 3em;">
</div>
<div class="my-1" id="sec-stats">
<span class="bb">STATS</span>
<br>
<label for="SINT">INT</label>
<div class="input-brack">
<input type="number" name="" id="SINT">
</div>
<label for="SREF">REF</label>
<div class="input-brack" id="SREF">
<input type="number" name="" id="SREF1">
<span>/</span>
<input type="number" name="" id="SREF2">
</div>
<label for="STECH">TECH</label>
<div class="input-brack">
<input type="number" name="" id="STECH">
</div>
<label for="SCOOL">COOL</label>
<div class="input-brack">
<input type="number" name="" id="SCOOL">
</div>
<label for="SATTR">ATTR</label>
<div class="input-brack">
<input type="number" name="" id="SATTR">
</div>
<label for="SLUCK">LUCK</label>
<div class="input-brack">
<input type="number" name="" id="SLUCK">
</div>
<label for="SMA">MA</label>
<div class="input-brack">
<input type="number" name="" id="SMA">
</div>
<label for="SBODY">BODY</label>
<div class="input-brack">
<input type="number" name="" id="SBODY">
</div>
<label for="SEMP">EMP</label>
<div class="input-brack">
<input type="number" name="" id="SEMP">
</div>
<label for="SRun">Run</label>
<div class="input-brack">
<input type="number" name="" id="SRun">
</div>
<label for="SLeap">Leap</label>
<div class="input-brack">
<input type="number" name="" id="SLeap">
</div>
<label for="SLift">Lift</label>
<div class="input-brack">
<input type="number" name="" id="SLift">
</div>
</div>
<div class="my-1">
<style type="text/css">
#armor thead,#armor tbody{
display:inline-block;
}
</style>
<table id="armor">
<thead style="margin: 0 0px 0 0;">
<tr style="border-bottom: 2px #fff solid;">
<th colspan="3">Location</th>
</tr>
<tr>
<th colspan="3">Armor SP</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Head <br> 1
</td>
<td>
Torso <br> 2-4
</td>
<td>
R.Arm <br> 5
</td>
<td>
L.Arm <br> 6
</td>
<td>
R.Leg <br> 7-8
</td>
<td>
L.Leg <br> 9-0
</td>
</tr>
<tr>
<td>
<input type="number" name="" id="ASPHead" class="input-short">
</td>
<td>
<input type="number" name="" id="ASPTorso" class="input-short">
</td>
<td>
<input type="number" name="" id="ASPRArm" class="input-short">
</td>
<td>
<input type="number" name="" id="ASPLArm" class="input-short">
</td>
<td>
<input type="number" name="" id="ASPRLeg" class="input-short">
</td>
<td>
<input type="number" name="" id="ASPLLeg" class="input-short">
</td>
</tr>
</tbody>
</table>
<table id="armor1">
<tbody>
<tr>
<th style="border-bottom: 2px #fff solid;">Location</th>
<td>
Head <br> 1
</td>
<td>
Torso <br> 2-4
</td>
<td>
R.Arm <br> 5
</td>
<td>
L.Arm <br> 6
</td>
<td>
R.Leg <br> 7-8
</td>
<td>
L.Leg <br> 9-0
</td>
</tr>
<tr>
<th>Armor SP</th>
<td>
<input type="number" name="" id="ASPHead" class="input-short">
</td>
<td>
<input type="number" name="" id="ASPTorso" class="input-short">
</td>
<td>
<input type="number" name="" id="ASPRArm" class="input-short">
</td>
<td>
<input type="number" name="" id="ASPLArm" class="input-short">
</td>
<td>
<input type="number" name="" id="ASPRLeg" class="input-short">
</td>
<td>
<input type="number" name="" id="ASPLLeg" class="input-short">
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="col my-2">
<div class="row my-1" id="sec-cyberpunk-logo">
<img src="/img/Screenshot_20231002_172959.png" alt="Cyberpunk Logo">
</div>
<div class="row my-1">
<span class="right-align">DRAWING OF CHARACTER</span>
</div>
</div>
</div>
<div>
</div>
</div>
<!--
<div class="container external internal" id="content">
<div class="row">
<div class="col">1 of 2</div>
<div class="col">2 of 2</div>
</div>
</div> -->
</body>
</html>