From b2aa1817b6316bd2b7002231bee6390f07361aa9 Mon Sep 17 00:00:00 2001
From: pommicket <pommicket@gmail.com>
Date: Thu, 24 Aug 2023 22:04:16 -0400
Subject: controls

---
 index.html | 57 ++++++++++++++++++++++++++++++++++++++++++++++++++++-----
 1 file changed, 52 insertions(+), 5 deletions(-)

(limited to 'index.html')

diff --git a/index.html b/index.html
index dd8853c..9c5a189 100644
--- a/index.html
+++ b/index.html
@@ -85,6 +85,13 @@
 	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;
 	}
@@ -207,6 +214,26 @@
 	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">
@@ -227,19 +254,39 @@
 			<div id="title">
 				<img src="icon.png"> pugl
 			</div>
-			<form action="#" method="dialog" id="code-form">
+			<form action="#" method="dialog" id="code-form" class="ui-section inline-block">
 				<input type="text" placeholder="Code" id="code">
 				<input type="submit" value="import">
 			</form>
-			<form action="#" method="dialog" id="resolution-form">
+			<form action="#" method="dialog" id="resolution-form" class="ui-section inline-block">
 				<input type="number" placeholder="width" id="resolution-x">
 				×
 				<input type="number" placeholder="height" id="resolution-y">
 				<input type="submit" value="change resolution">
 			</form>
-			Add <input type="text" id="widget-search" placeholder="Search">
-			<div id="widget-choices"></div>
-			<div id="widgets-container"></div>
+			<div class="ui-section">
+				<div class="inline-block no-wrap">
+					<button id="play" class="img-button" disabled>
+						<img alt="play" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiI+PHBhdGggZD0iTSA2IDI2IEwgMjYgMTYgTCA2IDYgeiIgZmlsbD0iI2ZmZiIgc3Ryb2tlPSJub25lIiAvPjwvc3ZnPgo=">
+					</button>
+					<button id="pause" class="img-button">
+						<img alt="pause" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiI+CjxwYXRoIGQ9Ik0gNiA2IGwgMCAyMCBsIDcgMCBsIDAgLTIwIHogTSAxOSA2IGwgMCAyMCBsIDcgMCBsIDAgLTIwIHoiIGZpbGw9IiNmZmYiIHN0cm9rZT0ibm9uZSIgLz4KPC9zdmc+Cg==">
+					</button>
+					<button id="step" class="img-button" disabled>
+						<img alt="step" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiI+CjxwYXRoIGQ9Ik0gNiA2IGwgMCAyMCBsIDQgMCBsIDAgLTIwIHogTSAxNCA2IGwgMTIgMTAgbCAtMTIgMTAgeiIgZmlsbD0iI2ZmZiIgc3Ryb2tlPSJub25lIiAvPgo8L3N2Zz4K">
+					</button>
+				</div>
+				&nbsp;
+				<div class="inline-block no-wrap" title="automatically update display when anything is changed">
+					<input id="auto-update" type="checkbox">
+					<label for="auto-update">auto-update</label>
+				</div>
+			</div>
+			<div class="ui-section">
+				Add <input type="text" id="widget-search" placeholder="Search">
+				<div id="widget-choices"></div>
+				<div id="widgets-container"></div>
+			</div>
 		</div>
 		
 		<div id="ui-resize"></div>
-- 
cgit v1.2.3