diff options
| author | james pannacciulli <jpnc@jpnc.info> | 2023-07-03 16:27:19 -0400 |
|---|---|---|
| committer | james pannacciulli <jpnc@jpnc.info> | 2023-07-03 16:27:19 -0400 |
| commit | 60d375a3256a9284783635d24327e5bdcadf8f72 (patch) | |
| tree | 638924d5abecdd467c34941c7fdb56e039643d60 | |
| parent | 0abbfcde98660f0e9677ba35e864b91ade9b406a (diff) | |
| download | calligram.me-60d375a3256a9284783635d24327e5bdcadf8f72.tar.gz calligram.me-60d375a3256a9284783635d24327e5bdcadf8f72.tar.bz2 | |
add hamburger menu and hide/show options modal
| -rw-r--r-- | html/index.html | 46 |
1 files changed, 39 insertions, 7 deletions
diff --git a/html/index.html b/html/index.html index 8ae4d08..79a471e 100644 --- a/html/index.html +++ b/html/index.html @@ -1,4 +1,5 @@ <!DOCTYPE html> +<meta charset="UTF-8"> <html> <head> <title>calligram.me</title> @@ -28,11 +29,26 @@ background-image: url('./images/symphony_brown.png'); color: #000305; + font-family: 'Ubuntu', 'Ubuntu Mono', 'Trebuchet MS', Trebuchet, 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; font-size:100% } - div { + #inputs { + width: 100%; + height: 100%; + display: none; + position: fixed; + z-index: 1; + } + + #hamburger { + background: none; + border: none; + font-size:1vw; + } + + #svg-target { width: 100%; height: 100%; overflow: visible; @@ -64,15 +80,31 @@ </style> </head> <body> - <input id="the_text" type="text" value="" title="Place text here"> - <input id="the_svg" type="text" value="" title="Paste SVG path 'd' field here"> - <input id="the_rainbow" name = "textgradient" type="checkbox" value="Rainbow" title="Rainbow Colors?"> - <input id="the_lines" name = "pathlines" type="checkbox" value="Lines" title="Show lines?"> - <a href="" id=link_href title="link to this calligramme">link</a> - <a href="https://git.jpnc.info/calligram.me/about/" title="link to agpl source repo">src</a> + <button id="hamburger" onclick="showInputs()">🍔</button> + <div id="inputs" style="display: none"> + <p> + <input id="the_text" type="text" value="" title="Place text here"> + </p><p> + <input id="the_svg" type="text" value="" title="Paste SVG path 'd' field here"> + </p><p> + <input id="the_rainbow" name = "textgradient" type="checkbox" value="Rainbow" title="Rainbow Colors?"> + <input id="the_lines" name = "pathlines" type="checkbox" value="Lines" title="Show lines?"> + <a href="" id=link_href title="link to this calligramme">link</a> + <a href="https://git.jpnc.info/calligram.me/about/" title="link to agpl source repo">src</a> + </p> + </div> <div id="svg-target"></div> <script> // @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt + function showInputs() { + const inputsDiv = document.getElementById('inputs'); + if ( inputsDiv.style.display === "none" ) { + inputsDiv.style.display = "block"; + } else { + inputsDiv.style.display = "none"; + }; + }; + const targetDiv = document.getElementById('svg-target'); const svgNode = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); svgNode.setAttributeNS(null, 'viewBox', '0 0 1500 1000'); |