start "about"

author: pommicket <pommicket@gmail.com> 2023-08-27 13:13:12 -0400
committer: pommicket <pommicket@gmail.com> 2023-08-27 13:13:12 -0400
commit: d83e63310a5fe2a35775cb70327c24204ea7464b (patch)
tree: 21b6b676617c412a3c22a0577f1915791540169d
parent: 132289ea7c3bffb99bd392fd44a6b1508b6a740b (diff)
4 files changed, 292 insertions, 236 deletions
diff --git a/guide/index.html b/guide/index.html
new file mode 100644
index 0000000..643a12f
--- /dev/null
+++ b/guide/index.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+	<title>pugl guide</title>
+	<meta charset="utf-8">
+	<meta content="width=device-width,initial-scale=1" name="viewport">
+	<link rel="icon" href="../favicon.ico">
+	<link rel="stylesheet" href="../style.css">
+</head>
+
+<body>
+<div id="page">
+	<h2>guide</h2>
+	<p>
+	Lorem ipsum dolor sit amet
+	</p>
+</div>
+
+</body>
+</html>
diff --git a/index.html b/index.html
index 1abacc8..e82cd4b 100644
--- a/index.html
+++ b/index.html
@@ -1,247 +1,16 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
 
 <head>
 	<title>pugl</title>
-	<style>
-	body {
-		font-family: sans-serif;
-		background-color: black;
-		margin: 0;
-		padding: 0;
-		color: white;
-		overflow: hidden;
-	}
-	
-	
-	:root {
-		--ui-border: white;
-		--ui-height: 2.5em;
-	}
-	
-	#page {
-		display: flex;
-		flex-direction: column;
-		width: 100vw;
-		height: 100vh;
-	}
-	
-	#main {
-		display: flex;
-		flex-grow: 1;
-		overflow: hidden;
-	}
-	
-	#error {
-		color: red;
-		border-top: 2px solid red;
-		padding: 0.2em;
-		display: none;
-	}
-	
-	.widget.error, .widget.error:hover {
-		background-color: #f004;
-	}
-	
-	#canvas-container {
-	  position: relative;
-		width: 100%;
-		height: 100%;
-	  flex-grow: 0;
-	  flex-shrink: 1;
-	}
-	
-	#canvas {
-		position: absolute;
-	}
-	
-	#ui-resize {
-		flex-grow: 0;
-		flex-shrink: 0;
-		width: 0.3cm;
-		cursor: col-resize;
-		display: flex;
-		justify-content: center;
-		background: linear-gradient(90deg, #000, #444 30%, #fff 50%, #444 70%, #000);
-	}
-	#ui {
-		overflow-x: auto;
-		overflow-y: scroll;
-		width: 100%;
-		height: 100%;
-		flex-grow: 0;
-		flex-shrink: 0;
-		flex-basis: 30%;
-	}
-	input, button {
-		border: 1px solid var(--ui-border);
-		background-color: transparent;
-		color: white;
-		padding: 0;
-	}
-	input[type=submit]:hover, button:hover {
-		background-color: #fff5;
-	}
-	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;
-	}
-	.in select {
-		width: 5em;
-	}
-	.entry[contenteditable], .widget-name {
-		min-width: 1em;
-		border-bottom: 2px solid #fff4;
-		cursor: text;
-		display: inline-block;
-	}
-	.in, .ins, .control, .widget-title {
-		display: inline;
-	}
-	.in, .control {
-		margin-left: 0.5em;
-		white-space: nowrap;
-	}
-	input[type="submit"] {
-		padding-left: 0.5em;
-		padding-right: 0.5em;
-	}
-	input[type="color"] {
-		padding: 0;
-		margin: 0.2em 0.5em;
-		border: 2px solid #000;
-		outline: 1px solid #fff;
-		height: 1.3em;
-		width: 1.3em;
-	}
-	input[type="range"] {
-		max-height: 1.2em;
-		vertical-align: middle;
-	}
-	input[type="checkbox"] {
-		margin: 0;
-	}
-	.widget input[data-is-int="true"] {
-		font-size: 1em;
-		padding: 0;
-		line-height: 1;
-		border-width: 1px;
-		width: 5em;
-	}
-	.widget {
-		display: block;
-		border-bottom: 2px solid #777;
-		position: relative;
-		cursor: pointer;
-		padding: 0.1em 0;
-	}
-	.widget[data-display="1"] .widget-type {
-		color: #ff0;
-	}
-	.widget-type:hover {
-		color: #aa0;
-	}
-	.widget.dragging {
-		background: #aaf6;
-	}
-	.widget-title {
-		font-weight: bold;
-	}
-	.widget-button {
-		width: 1.5em;
-		height: 1.5em;
-		border: 0;
-		vertical-align: middle;
-		background-size: contain;
-	}
-	.widget-move {
-		background-image: url(move.svg);
-	}
-	.widget-delete {
-		background-image: url(x.svg);
-	}
-	
-	.widget-button:hover, .widget-button:active {
-		background-color: transparent;
-		outline: 0;
-		filter: saturate(500%);
-	}
-	.widget-choice {
-		width: calc(100% - 0.4em);
-		border: 1px solid white;
-		margin: 0.2em;
-		padding: 0.1em 0;
-	}
-	.widget-choice:focus {
-		outline: 0;
-		z-index: 10;
-	}
-	#widget-choices {
-		margin: 0.2em;
-		padding-bottom: 0.3em;
-		border-bottom: 2px solid white;
-	}
-	summary {
-		cursor: pointer;
-	}
-	#title {
-		vertical-align: middle;
-		font-weight: bold;
-		font-size: 0.5cm;
-	}
-	#title img {
-		height: 1cm;
-	}
-	#resolution-form input[type=number] {
-		width: 4em;
-	}
-
-	input[type=number]::-webkit-inner-spin-button,
-	input[type=number]::-webkit-outer-spin-button {
-		-webkit-appearance: none;
-		appearance: none;
-		margin: 0;
-	}
-	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">
 	<link rel="icon" href="favicon.ico">
+	<link rel="stylesheet" href="style.css">
 </head>
 
 <body>
-<script src="pugl.js" type="text/javascript"></script>
+<script src="pugl.js"></script>
 <noscript>
 	<p>
 		This page requires JavaScript to function.<br>
@@ -252,7 +21,10 @@
 	<div id="main">
 		<div id="ui">
 			<div id="title">
-				<img src="icon.png"> pugl
+				<img src="icon.png" alt="" id="title-icon"> pugl
+					<button id="about-button" class="img-button" title="about pugl">
+						<img alt="about" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiI+CjxlbGxpcHNlIGN4PSIxNiIgY3k9IjE2IiByeD0iMTIiIHJ5PSIxMiIgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjMiIGZpbGw9Im5vbmUiIC8+Cjx0ZXh0IGZpbGw9IiNmZmYiIHg9IjE2IiB5PSIyNCIgZm9udC13ZWlnaHQ9ImJvbGQiIGZvbnQtZmFtaWx5PSJzYW5zLXNlcmlmIiBmb250LXNpemU9IjIwcHgiIHRleHQtYW5jaG9yPSJtaWRkbGUiPj88L3RleHQ+Cjwvc3ZnPgo=">
+					</button>
 			</div>
 			<form action="#" method="dialog" id="code-form" class="ui-section inline-block">
 				<input type="text" placeholder="Code" id="code">
@@ -304,6 +76,27 @@
 		</div>
 	</div>
 	<div id="error">error</div>
+	<dialog id="about-dialog">
+		<h2>about pugl</h2>
+		<hr>
+		<p>
+			Lorem ipsum dolor sit amet
+		</p>
+		<h3>credits</h3>
+		<hr>
+		<p>
+		icon based on
+		<a href="https://commons.wikimedia.org/wiki/File:Long-beakedEchidna.jpg
+">Long-beakedEchidna.jpg from WikiMedia</a>
+		CC BY-SA 3.0.
+		</p>
+		<p>
+		everything else is licensed under WTFPLv2.
+		</p>
+		<form method="dialog">
+			<button>close</button>
+		</form>
+	</dialog>
 </div>
 
 </body>
diff --git a/pugl.js b/pugl.js
index 35b2df6..cbb1e6f 100644
--- a/pugl.js
+++ b/pugl.js
@@ -2,9 +2,11 @@
 
 /*
 TODO:
-- reset button
 - guide
 - about dialog
+- widgets:
+  - min
+  - max
 */
 
 const APP_ID = 'dh3YgVZQdX1Q';
@@ -2371,6 +2373,10 @@ function startup() {
 		}
 	});
 
+	document.getElementById('about-button').addEventListener('click', () => {
+		document.getElementById('about-dialog').showModal();
+	});
+
 	document.getElementById('resolution-form').addEventListener('submit', () => {
 		render_width = resolution_x_element.value;
 		render_height = resolution_y_element.value;
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..ab55c4e
--- /dev/null
+++ b/style.css
@@ -0,0 +1,236 @@
+:root {
+	--ui-border: white;
+	--ui-height: 2.5em;
+}
+
+body {
+	font-family: sans-serif;
+	margin: 0;
+	padding: 0;
+	overflow: hidden;
+}
+body, dialog {
+	background-color: black;
+	color: white;
+}
+a, a:visited {
+	color: #8fc;
+}
+h1, h2, h3, h4, h5, h6 {
+	margin: 0.1em;
+}
+
+#page {
+	display: flex;
+	flex-direction: column;
+	width: 100vw;
+	height: 100vh;
+}
+
+#main {
+	display: flex;
+	flex-grow: 1;
+	overflow: hidden;
+}
+
+#error {
+	color: red;
+	border-top: 2px solid red;
+	padding: 0.2em;
+	display: none;
+}
+
+.widget.error, .widget.error:hover {
+	background-color: #f004;
+}
+
+#canvas-container {
+	position: relative;
+	width: 100%;
+	height: 100%;
+	flex-grow: 0;
+	flex-shrink: 1;
+}
+
+#canvas {
+	position: absolute;
+}
+
+#ui-resize {
+	flex-grow: 0;
+	flex-shrink: 0;
+	width: 0.3cm;
+	cursor: col-resize;
+	display: flex;
+	justify-content: center;
+	background: linear-gradient(90deg, #000, #444 30%, #fff 50%, #444 70%, #000);
+}
+#ui {
+	overflow-x: auto;
+	overflow-y: scroll;
+	width: 100%;
+	height: 100%;
+	flex-grow: 0;
+	flex-shrink: 0;
+	flex-basis: 30%;
+}
+input, button {
+	border: 1px solid var(--ui-border);
+	background-color: transparent;
+	color: white;
+}
+input[type="submit"]:hover, button:hover {
+	background-color: #fff5;
+}
+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;
+}
+.in select {
+	width: 5em;
+}
+.entry[contenteditable], .widget-name {
+	min-width: 1em;
+	border-bottom: 2px solid #fff4;
+	cursor: text;
+	display: inline-block;
+}
+.in, .ins, .control, .widget-title {
+	display: inline;
+}
+.in, .control {
+	margin-left: 0.5em;
+	white-space: nowrap;
+}
+input[type="color"] {
+	padding: 0;
+	margin: 0.2em 0.5em;
+	border: 2px solid #000;
+	outline: 1px solid #fff;
+	height: 1.3em;
+	width: 1.3em;
+}
+input[type="range"] {
+	max-height: 1.2em;
+	vertical-align: middle;
+}
+input[type="checkbox"] {
+	margin: 0;
+}
+.widget input[data-is-int="true"] {
+	font-size: 1em;
+	padding: 0;
+	line-height: 1;
+	border-width: 1px;
+	width: 5em;
+}
+.widget {
+	display: block;
+	border-bottom: 2px solid #777;
+	position: relative;
+	cursor: pointer;
+	padding: 0.1em 0;
+}
+.widget[data-display="1"] .widget-type {
+	color: #ff0;
+}
+.widget-type:hover {
+	color: #aa0;
+}
+.widget.dragging {
+	background: #aaf6;
+}
+.widget-title {
+	font-weight: bold;
+}
+.widget-button {
+	width: 1.5em;
+	height: 1.5em;
+	border: 0;
+	vertical-align: middle;
+	background-size: contain;
+}
+.widget-move {
+	background-image: url(move.svg);
+}
+.widget-delete {
+	background-image: url(x.svg);
+}
+
+.widget-button:hover, .widget-button:active {
+	background-color: transparent;
+	outline: 0;
+	filter: saturate(500%);
+}
+.widget-choice {
+	width: calc(100% - 0.4em);
+	border: 1px solid white;
+	margin: 0.2em;
+	padding: 0.1em 0;
+}
+.widget-choice:focus {
+	outline: 0;
+	z-index: 10;
+}
+#widget-choices {
+	margin: 0.2em;
+	padding-bottom: 0.3em;
+	border-bottom: 2px solid white;
+}
+summary {
+	cursor: pointer;
+}
+#title {
+	vertical-align: middle;
+	font-weight: bold;
+	font-size: 0.5cm;
+}
+#title-icon {
+	height: 1cm;
+}
+#resolution-form input[type="number"] {
+	width: 4em;
+}
+
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button {
+	-webkit-appearance: none;
+	appearance: none;
+	margin: 0;
+}
+input[type="number"] {
+	-moz-appearance: textfield;
+}
+.img-button {
+	height: 2em;
+	padding: 0;
+}
+.img-button img, .img-button svg {
+	height: 100%;
+	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;
+}
author	pommicket <pommicket@gmail.com>	2023-08-27 13:13:12 -0400
committer	pommicket <pommicket@gmail.com>	2023-08-27 13:13:12 -0400
commit	d83e63310a5fe2a35775cb70327c24204ea7464b (patch)
tree	21b6b676617c412a3c22a0577f1915791540169d
parent	132289ea7c3bffb99bd392fd44a6b1508b6a740b (diff)