From e07c3b32ae0f75c9c4fae9bc9f16ceb92e65830a Mon Sep 17 00:00:00 2001
From: pommicket <pommicket@gmail.com>
Date: Fri, 16 Jun 2023 23:25:01 +0100
Subject: cool tool buttons

---
 index.html | 21 +++++++++++++++------
 1 file changed, 15 insertions(+), 6 deletions(-)

(limited to 'index.html')

diff --git a/index.html b/index.html
index 3b80ccc..b4c4fd8 100644
--- a/index.html
+++ b/index.html
@@ -54,13 +54,13 @@
 		background-color: black;
 		color: white;
 	}
-	button:hover {
+	button:hover, input:hover, input:active {
 		background-color: #fff3;
 	}
-	button:active {
+	button:active, button[data-selected="true"] {
 		background-color: #fff6;
 	}
-	button:focus {
+	button:focus, input:focus {
 		outline: 2px solid #0a0;
 	}
 	#ui {
@@ -74,13 +74,13 @@
 		left: 0;
 		vertical-align:middle;
 	}
-	#ui input {
+	input, button {
 		vertical-align: middle;
 		display: inline-block;
 		height: 2.0em;
 		margin: 0.3em 0.1em 0.3em 0.3em;
 		border: 2px solid var(--ui-border);
-		background-color: #333;
+		background-color: black;
 		color: white;
 	}
 	#ui input[type=color] {
@@ -94,6 +94,9 @@
 	#ui label {
 		margin-right: 0.5em;
 	}
+	img.icon {
+		height: 1.5em;
+	}
 	</style>
 	<meta charset="utf-8">
 	<meta content="width=device-width,initial-scale=1" name="viewport">
@@ -169,9 +172,15 @@ void main() {
 	<input type="text" value="1.0" name="blue-input" id="blue-input">
 	<label for="blue-input">B</label>
 	-->
-	<input type="color" value="#ffffff" name="color-input" id="color-input" aria-label="Color">
+	<input type="color" value="#ff00aa" name="color-input" id="color-input" aria-label="Color">
 	<input type="text" value="0.1" name="color-mix-input" id="color-mix-input">
 	<label for="color-mix-input">opacity</label>
+	<button class="tool-button" data-tool="3" title="select tool (1)">
+		<img alt="select" class="icon" src="data:image/png;base64,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">
+	</button>
+	<button class="tool-button" data-tool="1" title="triangle tool (2)">
+		<img alt="triangle" class="icon" src="data:image/png;base64,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">
+	</button>
 </div>
 
 <dialog id="error-dialog">
-- 
cgit v1.2.3