diff options
| author | pommicket <pommicket@gmail.com> | 2023-08-27 13:13:12 -0400 |
|---|---|---|
| committer | pommicket <pommicket@gmail.com> | 2023-08-27 13:13:12 -0400 |
| commit | d83e63310a5fe2a35775cb70327c24204ea7464b (patch) | |
| tree | 21b6b676617c412a3c22a0577f1915791540169d /index.html | |
| parent | 132289ea7c3bffb99bd392fd44a6b1508b6a740b (diff) | |
start "about"
Diffstat (limited to 'index.html')
| -rw-r--r-- | index.html | 263 |
1 files changed, 28 insertions, 235 deletions
@@ -1,247 +1,16 @@ <!DOCTYPE html> -<html> +<html lang="en"> <head> <title>pugl</title> - <style> - body { - font-family: sans-serif; - background-color: black; - margin: 0; - padding: 0; - color: white; - overflow: hidden; - } - - - :root { - --ui-border: white; - --ui-height: 2.5em; - } - - #page { - display: flex; - flex-direction: column; - width: 100vw; - height: 100vh; - } - - #main { - display: flex; - flex-grow: 1; - overflow: hidden; - } - - #error { - color: red; - border-top: 2px solid red; - padding: 0.2em; - display: none; - } - - .widget.error, .widget.error:hover { - background-color: #f004; - } - - #canvas-container { - position: relative; - width: 100%; - height: 100%; - flex-grow: 0; - flex-shrink: 1; - } - - #canvas { - position: absolute; - } - - #ui-resize { - flex-grow: 0; - flex-shrink: 0; - width: 0.3cm; - cursor: col-resize; - display: flex; - justify-content: center; - background: linear-gradient(90deg, #000, #444 30%, #fff 50%, #444 70%, #000); - } - #ui { - overflow-x: auto; - overflow-y: scroll; - width: 100%; - height: 100%; - flex-grow: 0; - flex-shrink: 0; - flex-basis: 30%; - } - input, button { - border: 1px solid var(--ui-border); - background-color: transparent; - color: white; - padding: 0; - } - input[type=submit]:hover, button:hover { - background-color: #fff5; - } - input[type=submit]:active, button:active { - background-color: #fff9; - } - input[type=submit][disabled]:hover, - input[type=submit][disabled]:active, - button[disabled]:hover, - button[disabled]:active { - background-color: transparent; - cursor: not-allowed; - } - input:focus, [contenteditable]:focus, button:focus { - outline: 2px solid #77f; - } - .in select { - width: 5em; - } - .entry[contenteditable], .widget-name { - min-width: 1em; - border-bottom: 2px solid #fff4; - cursor: text; - display: inline-block; - } - .in, .ins, .control, .widget-title { - display: inline; - } - .in, .control { - margin-left: 0.5em; - white-space: nowrap; - } - input[type="submit"] { - padding-left: 0.5em; - padding-right: 0.5em; - } - input[type="color"] { - padding: 0; - margin: 0.2em 0.5em; - border: 2px solid #000; - outline: 1px solid #fff; - height: 1.3em; - width: 1.3em; - } - input[type="range"] { - max-height: 1.2em; - vertical-align: middle; - } - input[type="checkbox"] { - margin: 0; - } - .widget input[data-is-int="true"] { - font-size: 1em; - padding: 0; - line-height: 1; - border-width: 1px; - width: 5em; - } - .widget { - display: block; - border-bottom: 2px solid #777; - position: relative; - cursor: pointer; - padding: 0.1em 0; - } - .widget[data-display="1"] .widget-type { - color: #ff0; - } - .widget-type:hover { - color: #aa0; - } - .widget.dragging { - background: #aaf6; - } - .widget-title { - font-weight: bold; - } - .widget-button { - width: 1.5em; - height: 1.5em; - border: 0; - vertical-align: middle; - background-size: contain; - } - .widget-move { - background-image: url(move.svg); - } - .widget-delete { - background-image: url(x.svg); - } - - .widget-button:hover, .widget-button:active { - background-color: transparent; - outline: 0; - filter: saturate(500%); - } - .widget-choice { - width: calc(100% - 0.4em); - border: 1px solid white; - margin: 0.2em; - padding: 0.1em 0; - } - .widget-choice:focus { - outline: 0; - z-index: 10; - } - #widget-choices { - margin: 0.2em; - padding-bottom: 0.3em; - border-bottom: 2px solid white; - } - summary { - cursor: pointer; - } - #title { - vertical-align: middle; - font-weight: bold; - font-size: 0.5cm; - } - #title img { - height: 1cm; - } - #resolution-form input[type=number] { - width: 4em; - } - - input[type=number]::-webkit-inner-spin-button, - input[type=number]::-webkit-outer-spin-button { - -webkit-appearance: none; - appearance: none; - margin: 0; - } - input[type=number] { - -moz-appearance: textfield; - } - .img-button img, .img-button svg { - height: 2em; - display: block; - } - .img-button[disabled] img, - .img-button[disabled] svg { - filter: brightness(50%); - } - .ui-section { - margin: 0.3em; - } - .ui-section label { - margin: auto; - } - .inline-block { - display: inline-block; - } - .no-wrap { - whitespace: no-wrap; - } - </style> <meta charset="utf-8"> <meta content="width=device-width,initial-scale=1" name="viewport"> <link rel="icon" href="favicon.ico"> + <link rel="stylesheet" href="style.css"> </head> <body> -<script src="pugl.js" type="text/javascript"></script> +<script src="pugl.js"></script> <noscript> <p> This page requires JavaScript to function.<br> @@ -252,7 +21,10 @@ <div id="main"> <div id="ui"> <div id="title"> - <img src="icon.png"> pugl + <img src="icon.png" alt="" id="title-icon"> pugl + <button id="about-button" class="img-button" title="about pugl"> + <img alt="about" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiI+CjxlbGxpcHNlIGN4PSIxNiIgY3k9IjE2IiByeD0iMTIiIHJ5PSIxMiIgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjMiIGZpbGw9Im5vbmUiIC8+Cjx0ZXh0IGZpbGw9IiNmZmYiIHg9IjE2IiB5PSIyNCIgZm9udC13ZWlnaHQ9ImJvbGQiIGZvbnQtZmFtaWx5PSJzYW5zLXNlcmlmIiBmb250LXNpemU9IjIwcHgiIHRleHQtYW5jaG9yPSJtaWRkbGUiPj88L3RleHQ+Cjwvc3ZnPgo="> + </button> </div> <form action="#" method="dialog" id="code-form" class="ui-section inline-block"> <input type="text" placeholder="Code" id="code"> @@ -304,6 +76,27 @@ </div> </div> <div id="error">error</div> + <dialog id="about-dialog"> + <h2>about pugl</h2> + <hr> + <p> + Lorem ipsum dolor sit amet + </p> + <h3>credits</h3> + <hr> + <p> + icon based on + <a href="https://commons.wikimedia.org/wiki/File:Long-beakedEchidna.jpg +">Long-beakedEchidna.jpg from WikiMedia</a> + CC BY-SA 3.0. + </p> + <p> + everything else is licensed under WTFPLv2. + </p> + <form method="dialog"> + <button>close</button> + </form> + </dialog> </div> </body> |