diff options
Diffstat (limited to 'index.html')
| -rw-r--r-- | index.html | 46 |
1 files changed, 44 insertions, 2 deletions
@@ -13,8 +13,21 @@ overflow: hidden; } + :root { + --ui-border: white; + --ui-height: 2.5em; + } + #page { width: 100vw; + position: relative; + } + #page[data-ui-shown="1"] { + top: var(--ui-height); + height: calc(100vh - var(--ui-height)); + } + #page[data-ui-shown="0"] { + top: 0; height: 100vh; } @@ -36,7 +49,7 @@ font-family: monospace; } button { - border: 2px solid white; + border: 2px solid var(--ui-border); background-color: black; color: white; } @@ -49,6 +62,29 @@ button:focus { outline: 2px solid #0a0; } + #ui { + display: block; + width: 100vw; + height: var(--ui-height); + background-color: #111; + border-bottom: 2px solid var(--ui-border); + position: absolute; + top: 0; + left: 0; + vertical-align:middle; + } + #ui input { + vertical-align: middle; + display: inline-block; + height: 2.0em; + margin: 0.5em 0.2em 0.5em 0.5em; + padding: 0; + border: 2px solid var(--ui-border); + background-color: #333; + } + #ui label { + margin-right: 0.5em; + } </style> <meta charset="utf-8"> <meta content="width=device-width,initial-scale=1" name="viewport"> @@ -56,7 +92,7 @@ <body> <script src="fractiform.js" type="text/javascript"></script> -<div id="page"> +<div id="page" data-ui-shown="1"> <noscript> <p> This page requires JavaScript to function.<br> @@ -71,6 +107,12 @@ </canvas> <canvas id="ui-canvas"></canvas> </div> +<div id="ui"> + <input type="color" value="#ffffff" name="color-input" id="color-input"> + <label for="color-input">color</label> + <input type="range" value="0" min="0" max="1" step="any" name="color-mix-input" id="color-mix-input"> + <label for="color-mix-input">opacity</label> +</div> <dialog id="error-dialog"> <pre id="error-message" class="error"></pre> |