gergely/cypher-player-assistant
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(character-sheet): Create the base character data box

Browse Source
This commit is contained in:
Gergely Polonkai
2025-06-06 15:24:29 +02:00
parent 2828facf7e
commit 511a3885ce
1 changed files with 42 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
index.html
View File

@@ -12,16 +12,19 @@
--dark-bg: #111111; --dark-bg: #111111;
--dark-text: #eeeeee; --dark-text: #eeeeee;
--dark-box-border: #333333; --dark-box-border: #333333;
--dark-hl-box-border: #cccccc;
/* Light Color Scheme */ /* Light Color Scheme */
--light-bg: #eeeeee; --light-bg: #eeeeee;
--light-text: #111111; --light-text: #111111;
--light-box-border: #cccccc; --light-box-border: #cccccc;
--light-hl-box-border: #333333;
/* Defaults */ /* Defaults */
--bg: var(--light-bg); --bg: var(--light-bg);
--text: var(--light-text); --text: var(--light-text);
--box-border: var(--light-box-border); --box-border: var(--light-box-border);
--hl-box-border: var(--light-hl-box-border);
} }
#color-scheme { #color-scheme {
@@ -32,6 +35,7 @@
--bg: var(--dark-bg); --bg: var(--dark-bg);
--text: var(--dark-text); --text: var(--dark-text);
--box-border: var(--dark-box-border); --box-border: var(--dark-box-border);
--hl-box-border: var(--dark-hl-box-border);
} }
#color-scheme:checked ~ .color-scheme-wrapper .dark-mode-hide { #color-scheme:checked ~ .color-scheme-wrapper .dark-mode-hide {
@@ -55,12 +59,14 @@
--bg: var(--dark-bg); --bg: var(--dark-bg);
--text: var(--dark-text); --text: var(--dark-text);
--box-border: var(--dark-box-border); --box-border: var(--dark-box-border);
--hl-box-border: var(--dark-hl-box-border);
} }
#color-scheme:checked ~ .color-scheme-wrapper { #color-scheme:checked ~ .color-scheme-wrapper {
--bg: var(--light-bg); --bg: var(--light-bg);
--text: var(--light-text); --text: var(--light-text);
--box-border: var(--light-box-border); --box-border: var(--light-box-border);
--hl-box-border: var(--light-hl-box-border);
} }
#color-scheme:checked ~ .color-scheme-wrapper .dark-mode-hide { #color-scheme:checked ~ .color-scheme-wrapper .dark-mode-hide {
@@ -147,6 +153,33 @@
padding: 1em; padding: 1em;
} }
.box h2 {
display: initial;
position: relative;
top: -1.8em;
padding: 0 .5em;
color: var(--hl-box-border);
background-color: var(--bg);
font-size: 100%;
font-weight: normal;
}
.box h2::after {
display: block;
content: "";
margin-bottom: -1.5em;
}
input {
border: 1px solid var(--hl-box-border);
background-color: var(--bg);
color: var(--text);
}
input[type=number] {
width: 4em;
}
/* No character loaded box (AKA the welcome screen) */ /* No character loaded box (AKA the welcome screen) */
#cont-no-loaded { #cont-no-loaded {
@@ -170,6 +203,15 @@
<div id="cont-no-loaded" class="box"> <div id="cont-no-loaded" class="box">
No character is loaded. No character is loaded.
</div> </div>
<div id="cont-character-sheet">
<div class="box">
<h2>Character data</h2>
<strong>Campaign</strong> <input type="text" id="inp-campaign-name">
<strong>Name</strong> <input type="text" id="inp-character-name">
<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">
</div>
</div>
</div> </div>
<script> <script>
const checkLocalStorage = () => { const checkLocalStorage = () => {