CentreMetre/CodeList
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

Improve Styling

Browse Source
This commit is contained in:
CentreMetre
2026-06-01 21:29:56 +01:00
parent 3ba7d94441
commit ed7efdcaa3
2 changed files with 65 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
public/index.html
View File

@@ -7,28 +7,31 @@
<title>HTML 5 Boilerplate</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>CodeList</h1>
<div>
<h3>Generate new list</h3>
<div>
<label for="input-length">
Code Length (<i>n</i>)
</label>
<input id="input-length" placeholder="4" min="1" type="number">
</div>
<div>
<label>Character Set (<i>Σ</i>) <span title="Input comma seperated values. For example `1, 3, 6, 8` means that the code has 1, 3, 6, and 8 in it.">ⓘ</span></label>
<input id="input-char-set" placeholder="1, 2, 3, 4" min="1" type="text">
</div>
</div>
<div>
<h3>
Output
</h3>
<div id="output">
<div id="output-area" class="output-area"></div>
<body class="layer-0">
<div class="layer-1 content">
<h1>CodeList</h1>
<div>
<h3>Generate new list</h3>
<div>
<label for="input-length">
Code Length (<i>n</i>)
</label>
<input id="input-length" placeholder="4" min="1" type="number">
</div>
<div>
<label>Character Set (<i>Σ</i>) <span title="Input comma seperated values. For example `1, 3, 6, 8` means that the code has 1, 3, 6, and 8 in it.">ⓘ</span></label>
<input id="input-char-set" placeholder="1, 2, 3, 4" min="1" type="text">
</div>
</div>
<div>
<h3>
Output
</h3>
<div id="output">
<div id="output-area" class="output-area"></div>
</div>
</div>
</div>
<script>
@@ -95,7 +98,7 @@
outputArea.append(row)
}
setRows(["1","2","3","4","5"])
setRows(["0123","4567","89Aa","BbCC","DdEe"])
</script>
</body>
</html>

48
public/style.css
View File

@@ -1,22 +1,54 @@
#output-area {
border-right: 2px solid grey;
border-top: 1px solid grey;
border-bottom: 1px solid grey;
width: 30ch;
body {
font-family: sans-serif;
}
#output-area:focus {
outline: none;
.layer-0 {
background-color: #F2F4F6;
}
.layer-1 {
background-color: #F7F9FB;
}
.content {
padding-left: 2rem;
padding-right: 2rem;
margin-left: 1rem;
margin-right: 1rem;
border: 1px solid #dcd9e5;
border-radius: .5rem;
}
#output-area {
border-right: 2px solid #DCDBE6;
border-top: 1px solid #DCDBE6;
border-bottom: 1px solid #DCDBE6;
border-left: 1px solid #DCDBE6;
/* border-radius: .5rem; */
width: 30ch;
font-family: 'Courier New', Courier, monospace;
}
.gutter-row {
background-color: rgb(179, 179, 179);
background-color: #F2F4F6;
height: 4ch;
padding-right: 0.4rem;
padding-left: 2rem;
}
.output-row {
display: flex;
background-color: white;
}
.strike {
text-decoration: line-through;
}
.content-row {
padding-top: 0.1rem;
padding-left: .5rem;
}