aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorjames pannacciulli <jpnc@jpnc.info>2023-07-03 16:27:19 -0400
committerjames pannacciulli <jpnc@jpnc.info>2023-07-03 16:27:19 -0400
commit60d375a3256a9284783635d24327e5bdcadf8f72 (patch)
tree638924d5abecdd467c34941c7fdb56e039643d60
parent0abbfcde98660f0e9677ba35e864b91ade9b406a (diff)
downloadcalligram.me-60d375a3256a9284783635d24327e5bdcadf8f72.tar.gz
calligram.me-60d375a3256a9284783635d24327e5bdcadf8f72.tar.bz2
add hamburger menu and hide/show options modal
-rw-r--r--html/index.html46
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');