diff options
Diffstat (limited to 'html/index.html')
| -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'); |