diff --git a/resources/README.md b/resources/README.md new file mode 100644 index 0000000..4a583a4 --- /dev/null +++ b/resources/README.md @@ -0,0 +1,4 @@ +## Resources + +Any files used along with application source code, but not to be mixed with C/C++ code. +This can include CSS, JS, favicon, etc. diff --git a/resources/style.css b/resources/style.css new file mode 100644 index 0000000..6f1cce1 --- /dev/null +++ b/resources/style.css @@ -0,0 +1,233 @@ +/* +escaped by https://www.cescaper.com/ +source: https://cdn.jsdelivr.net/npm/@exampledev/new.css@1.1.2/new.min.css +*/ + +/* + * Usage: + * Compact / minify this code with any tool + * Copy one-line string to src/WebCfgServerConstants.h as stylecss + * TODO: automate this process upon building :) +*/ + +:root { + --nc-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; + --nc-font-mono: Consolas, monaco, 'Ubuntu Mono', 'Liberation Mono', 'Courier New', Courier, monospace; + --nc-tx-1: #000000; + --nc-tx-2: #1A1A1A; + --nc-bg-1: #FFFFFF; + --nc-bg-2: #F6F8FA; + --nc-bg-3: #E5E7EB; + --nc-lk-1: #0070F3; + --nc-lk-2: #0366D6; + --nc-lk-tx: #FFFFFF; + --nc-ac-1: #79FFE1; + --nc-ac-tx: #0C4047 +} + +@media (prefers-color-scheme:dark) { + :root { + --nc-tx-1: #ffffff; + --nc-tx-2: #eeeeee; + --nc-bg-1: #000000; + --nc-bg-2: #111111; + --nc-bg-3: #222222; + --nc-lk-1: #3291FF; + --nc-lk-2: #0070F3; + --nc-lk-tx: #FFFFFF; + --nc-ac-1: #7928CA; + --nc-ac-tx: #FFFFFF + } +} + +* { + margin: 0; + padding: 0 +} + +img, +input, +option, +p, +table, +textarea, +ul { + margin-bottom: 1rem +} + +button, +html, +input, +select { + font-family: var(--nc-font-sans) +} + +body { + margin: 0 auto; + max-width: 750px; + padding: 2rem; + border-radius: 6px; + overflow-x: hidden; + word-break: normal; + overflow-wrap: anywhere; + background: var(--nc-bg-1); + color: var(--nc-tx-2); + font-size: 1.03rem; + line-height: 1.5 +} + +::selection { + background: var(--nc-ac-1); + color: var(--nc-ac-tx) +} + +h1, h2, h3, h4, h5, h6 { + line-height: 1; + color: var(--nc-tx-1); + padding-top: .875rem +} + +h1, h2, h3 { + color: var(--nc-tx-1); + padding-bottom: 2px; + margin-bottom: 8px; + border-bottom: 1px solid var(--nc-bg-2) +} + +h4, h5, h6 { + margin-bottom: .3rem +} + +h1 { font-size: 2.25rem } +h2 { font-size: 1.85rem } +h3 { font-size: 1.55rem } +h4 { font-size: 1.25rem } +h5 { font-size: 1rem } +h6 { font-size: .875rem } +a { color: var(--nc-lk-1) } +a:hover { color: var(--nc-lk-2) } +abbr { cursor: help } +abbr:hover { cursor: help } + +a button, +button, +input[type=button], +input[type=reset], +input[type=submit] { + font-size: 1rem; + display: inline-block; + padding: 6px 12px; + text-align: center; + text-decoration: none; + white-space: nowrap; + background: var(--nc-lk-1); + color: var(--nc-lk-tx); + border: 0; + border-radius: 4px; + box-sizing: border-box; + cursor: pointer; + color: var(--nc-lk-tx) +} + +a button[disabled], +button[disabled], +input[type=button][disabled], +input[type=reset][disabled], +input[type=submit][disabled] { + cursor: default; + opacity: .5; + cursor: not-allowed +} + +.button:focus, +.button:hover, +button:focus, +button:hover, +input[type=button]:focus, +input[type=button]:hover, +input[type=reset]:focus, +input[type=reset]:hover, +input[type=submit]:focus, +input[type=submit]:hover { + background: var(--nc-lk-2) +} + +table { + border-collapse: collapse; + width: 100% +} + +td, th { + border: 1px solid var(--nc-bg-3); + text-align: left; + padding: .5rem +} + +th { background: var(--nc-bg-2) } +tr:nth-child(even) { background: var(--nc-bg-2) } + +textarea { max-width: 100% } + +input, select, textarea { + padding: 6px 12px; + margin-bottom: .5rem; + background: var(--nc-bg-2); + color: var(--nc-tx-2); + border: 1px solid var(--nc-bg-3); + border-radius: 4px; + box-shadow: none; + box-sizing: border-box +} + +img { max-width: 100% } + +td>input { + margin-top: 0px; + margin-bottom: 0px +} + +td>textarea { + margin-top: 0px; + margin-bottom: 0px +} + +td>select { + margin-top: 0px; + margin-bottom: 0px +} + +#tblnav td, th { + border: 0; + border-bottom: 1px solid; +} + +.tdbtn { + text-align: center; + vertical-align: middle; +} + +.warning { + color: #f00; +} + +@media only screen and (max-width: 600px) { + .adapt td { display: block; } + + .adapt input[type=text], + .adapt input[type=password], + .adapt input[type=submit], + .adapt textarea, + .adapt select { width: 100%; } + + .adapt td:has(input[type=checkbox]) { + text-align: center; + } + + .adapt input[type=checkbox] { + width: 1.5em; + height: 1.5em; + } + + .adapt table td:first-child { border-bottom: 0; } + .adapt table td:last-child { border-top: 0; } +} diff --git a/src/WebCfgServer.cpp b/src/WebCfgServer.cpp index b2e180b..1cb7e7c 100644 --- a/src/WebCfgServer.cpp +++ b/src/WebCfgServer.cpp @@ -1174,7 +1174,7 @@ void WebCfgServer::buildCredHtml(String &response) { buildHtmlHeader(response); - response.concat("