345 lines
13 KiB
HTML
345 lines
13 KiB
HTML
|
<!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>
|