Add: start content
This commit is contained in:
parent
72f1723384
commit
8d330cf600
GPG key ID:
583642324A1D2070
6 changed files with 2454 additions and 0 deletions
345
index.html
Normal file
345
index.html
Normal file
|
|
@ -0,0 +1,345 @@
|
|||
<!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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue