Add start and statistics page

1 files changed, 284 insertions, 0 deletions

diff --git a/src/main/resources/static/style.css b/src/main/resources/static/style.css
new file mode 100644
index 0000000..bf37db2
--- /dev/null
+++ b/src/main/resources/static/style.css
@@ -0,0 +1,284 @@
+body {
+    margin: 0;
+    font-family: sans-serif;
+    font-size: .8rem;
+    color: #333;
+}
+
+nav {
+    margin: 0 auto;
+    background: #d5dad5;
+    height: 3rem;
+    max-width: 1140px;
+}
+
+nav a {
+    color: #004a8f;
+    text-transform: uppercase;
+    text-decoration: none;
+    line-height: 2rem;
+    font-weight: 700;
+}
+
+nav a:hover {
+    text-decoration: underline;
+}
+
+nav > ul {
+    margin: 0 3rem;
+    padding: 0;
+}
+
+nav > ul > li {
+    background: #fbfbfb;
+    display: block;
+    float: left;
+    padding: 2px 1rem;
+    border-left: 1px solid #d5dad5;
+}
+
+nav > ul > li:first-of-type {
+    border-left: none;
+}
+
+.breadcrumps {
+    margin: 0 auto;
+    max-width: 1140px;
+}
+
+.breadcrumps ul {
+    margin: 2px 0;
+    padding: .4rem 1rem;
+    list-style: none;
+    background: #eee;
+}
+
+.breadcrumps ul li {
+    display: inline;
+}
+
+.breadcrumps ul li+li:before {
+    padding: .4rem;
+    color: gray;
+    content: "/\00a0";
+}
+
+.breadcrumps ul li a {
+    color: #333333;
+    text-decoration: none;
+}
+
+main {
+    margin: 0 auto;
+    max-width: 1140px;
+}
+
+form {
+    margin: 1rem 0;
+    padding: 1rem;
+
+    border: 1px solid lightgray;
+    border-radius: 3px;
+    background: #eee;
+
+    text-align: center;
+}
+
+form > h2 {
+    margin: 0;
+}
+
+form.samplecode-input > div {
+    padding: 0.6rem;
+    display: inline-block;
+
+    border: 1px solid lightgray;
+    border-radius: 3px;
+
+    background: white;
+}
+
+form.samplecode-input input {
+    padding: 0;
+
+    border: none;
+    outline: none;
+
+    text-align: left;
+    appearance: textfield;
+    font-size: 1.2rem;
+    font-weight: bold;
+}
+
+form.samplecode-input input:focus-visible {
+    background: lightgreen;
+}
+
+table {
+    border-top: 1px solid lightgray;
+    border-left: 1px solid lightgray;
+    border-spacing: 0;
+    border-radius: 3px;
+
+    min-width: 100%;
+    font-family: sans-serif;
+}
+
+#samples-table.max {
+    width: 100vw;
+    position: fixed;
+    padding: 1rem;
+    top: 0;
+    left: 0;
+    background: white;
+    min-height: 100vh;
+}
+
+table.samples {
+    max-width: 100%;
+    overflow-x: scroll;
+    display: block;
+}
+
+th {
+    background: #eee;
+}
+
+td, th {
+    padding: .2rem;
+
+    border-right: 1px solid lightgray;
+    border-bottom: 1px solid lightgray;
+
+    text-align: left;
+    white-space: nowrap;
+    vertical-align: top;
+}
+
+td {
+    font-family: monospace;
+}
+
+td.bg-green, th.bg-green {
+    background: green;
+    color: white;
+}
+
+td.bg-yellow, th.bg-yellow {
+    background: darkorange;
+    color: white;
+}
+
+td.bg-red, th.bg-red {
+    background: red;
+    color: white;
+}
+
+td.bg-gray, th.bg-gray {
+    background: slategray;
+    color: white;
+}
+
+td.bg-shaded, th.bg-shaded {
+    background: repeating-linear-gradient(140deg, white, #e5e5f5 4px, white 8px);
+}
+
+td.clipboard {
+    cursor: copy;
+}
+
+td.clipboard.clipped {
+    box-shadow: 0 0 1rem lightgreen inset;
+}
+
+.btn {
+    margin: 4px;
+    padding: 4px 8px;
+
+    line-height: 1.2rem;
+    vertical-align: middle;
+
+    border: 0 solid transparent;
+    border-radius: 3px;
+
+    text-decoration: none;
+    font-size: 0.8rem;
+    font-weight: normal;
+
+    cursor: pointer;
+}
+
+.btn:hover {
+    filter: drop-shadow(1px 2px 2px gray);
+}
+
+.btn:active {
+    filter: drop-shadow(1px 1px 2px gray);
+    translate: 0 1px;
+}
+
+.btn.btn-red {
+    background: red;
+    color: white;
+}
+
+.btn.btn-red:hover, .btn.btn-red:active {
+    background: darkred !important;
+}
+
+.btn.btn-blue {
+    background: slategray;
+    color: white;
+}
+
+.btn.btn-blue:hover, .btn.btn-blue:active {
+    background: darkslategray !important;
+}
+
+.btn.btn-delete:before {
+    content: '\1F5D1';
+    padding: .2rem;
+}
+
+input.inline {
+    border: none;
+    font-size: 1.1rem;
+    outline: none;
+}
+
+input.inline:focus-visible {
+    background: lightgreen;
+}
+
+.monospace {
+    font-family: monospace;
+    color: #333333;
+    border-bottom: 1px dotted gray !important;
+}
+
+.help {
+    padding: 1rem;
+
+    border: 1px solid darkslategray;
+    border-radius: 3px;
+    background: slategray;
+    color: white;
+}
+
+.help.error {
+    border: 3px dashed red;
+    background: darkorange;
+}
+
+.help .help-header {
+    font-size: 1.2rem;
+    font-weight: bold;
+}
+
+.chart {
+    padding: 1rem;
+    margin: .2rem;
+
+    border: 1px solid lightgray;
+    border-radius: 3px;
+}
\ No newline at end of file