feat(character-sheet): Create the pools
This commit is contained in:
63
index.html
63
index.html
@@ -185,6 +185,30 @@
|
|||||||
#cont-no-loaded {
|
#cont-no-loaded {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.pool-container {
|
||||||
|
display: inline-block;
|
||||||
|
border-width: 2px;
|
||||||
|
border-style: solid;
|
||||||
|
border-color: var(--box-border);
|
||||||
|
border-radius: 10px;
|
||||||
|
width: 32%;
|
||||||
|
padding: .6em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pool-container:has(> h3 > input[name=pool-selector]:checked) {
|
||||||
|
border-color: var(--hl-box-border);
|
||||||
|
}
|
||||||
|
|
||||||
|
input[name=pool-selector] {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pool-container h4 {
|
||||||
|
color: var(--hl-box-border);
|
||||||
|
font-weight: normal;
|
||||||
|
font-size: 80%;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
@@ -211,6 +235,45 @@
|
|||||||
<strong>Max Effort</strong> <input type="number" id="inp-max-effort" min="1" value="1">
|
<strong>Max Effort</strong> <input type="number" id="inp-max-effort" min="1" value="1">
|
||||||
<strong>Armor</strong> <input type="number" id="inp-armor" min="0" value="0">
|
<strong>Armor</strong> <input type="number" id="inp-armor" min="0" value="0">
|
||||||
</div>
|
</div>
|
||||||
|
<div class="box">
|
||||||
|
<h2>Pools</h2>
|
||||||
|
<div class="pool-container">
|
||||||
|
<h3>
|
||||||
|
<input id="pool-selector-might" type="radio" name="pool-selector" value="might">
|
||||||
|
<label for="pool-selector-might">Might</label>
|
||||||
|
</h3>
|
||||||
|
<h4>Pool</h4>
|
||||||
|
<input type="number" id="inp-pool-value-might" min="0" value="0">
|
||||||
|
/
|
||||||
|
<input type="number" id="inp-pool-max-might" min="0" value="0">
|
||||||
|
<h4>Edge</h4>
|
||||||
|
<input type="number" id="inp-pool-edge-might" min="0" value="0">
|
||||||
|
</div>
|
||||||
|
<div class="pool-container">
|
||||||
|
<h3>
|
||||||
|
<input id="pool-selector-speed" type="radio" name="pool-selector" value="speed">
|
||||||
|
<label for="pool-selector-speed">Speed</label>
|
||||||
|
</h3>
|
||||||
|
<h4>Pool</h4>
|
||||||
|
<input type="number" id="inp-pool-value-speed" min="0" value="0">
|
||||||
|
/
|
||||||
|
<input type="number" id="inp-pool-max-speed" min="0" value="0">
|
||||||
|
<h4>Edge</h4>
|
||||||
|
<input type="number" id="inp-pool-edge-speed" min="0" value="0">
|
||||||
|
</div>
|
||||||
|
<div class="pool-container">
|
||||||
|
<h3>
|
||||||
|
<input id="pool-selector-intellect" type="radio" name="pool-selector" value="intellect">
|
||||||
|
<label for="pool-selector-intellect">Intellect</label>
|
||||||
|
</h3>
|
||||||
|
<h4>Pool</h4>
|
||||||
|
<input type="number" id="inp-pool-value-intellect" min="0" value="0">
|
||||||
|
/
|
||||||
|
<input type="number" id="inp-pool-max-intellect" min="0" value="0">
|
||||||
|
<h4>Edge</h4>
|
||||||
|
<input type="number" id="inp-pool-edge-intellect" min="0" value="0">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<script>
|
<script>
|
||||||
|
Reference in New Issue
Block a user