toymaker.git

commit ac76eaae5167de04190edf737a4321db68b1eccc

Author: Adam <git@apiote.xyz>

add html templates


 templates/item.html | 39 ++++++++++++++++++++++++++++++---------
 templates/message.html | 25 ++++++++++++++++++++++---
 templates/toy.html | 42 ++++++++++++++++++++++++++++++++----------
 templates/toys.html | 37 ++++++++++++++++++++++++++++++-------


diff --git a/templates/item.html b/templates/item.html
index 510d5dfd457aef3eb7ec69461ac9e935c8a7965f..6f63b69d3fad19725427b28f9e229a565bdad9c0 100644
--- a/templates/item.html
+++ b/templates/item.html
@@ -16,32 +16,53 @@ 		
 EOF
 	printf '\t\t<title>toymaker::%s/%s</title>\n' "$toy" "$item"
 	cat <<EOF
+		<style>
+			* {
+				box-sizing: border-box;
+			}
+			a {
+				color: #00afff;
+			}
+			a:hover {
+				background-color: #db9d3b;
+				color: #000000;
+			}
+		</style>
 	</head>
-	<body>
+	<body style="background-color: #292929; color: #fafafa;">
+		<header style="font-size: 1.25rem; padding-top: .3125rem; padding-bottom: .3125rem;">
+			<a href="/toys/" style="font-family: monospace; text-decoration: none;">toymaker</a>
+		</header>
+		<main style="margin-left: 1rem; margin-top: 2rem;">
 EOF
-	printf '\t\t<h1>%s/%s</h1>\n' "$toy" "$item"
+	printf '\t\t\t<h1><a href="/toys/%s">%s</a>/%s</h1>\n' "$toy" "$toy" "$item"
 	if [ "$status" = '0' ]
 	then
-		printf '\t\t<h2>OK</h2>\n'
+		printf '\t\t\t<h2 style="color: #5af78e;">OK</h2>\n'
 	elif [ "$status" = 'r' ]
 	then
-		printf '\t\t<h2>Running</h2>\n'
+		printf '\t\t\t<h2>Running</h2>\n'
 	else
-		printf '\t\t<h2>Error</h2>\n'
+		printf '\t\t\t<h2 style="color: #ff5c57;">Error</h2>\n'
 	fi
 
 	if [ -n "$artifacts" ]
 	then
-		printf '\t\t<details>\n\t\t\t<summary>artifacts</summary>\n\t\t\t<ul>\n'
+		printf '\t\t\t<details>\n'
+		printf '\t\t\t\t<summary style="cursor: pointer;">artifacts</summary>\n'
+		printf '\t\t\t\t<ul>\n'
 		for artifact in $artifacts
 		do
-			printf '\t\t\t<li><a href="/toys/%s/%s/%s">%s</a></li>\n' "$toy" "$item" "$artifact" "$artifact"
+			printf '\t\t\t\t\t<li><a href="/toys/%s/%s/%s">%s</a></li>\n' "$toy" "$item" "$artifact" "$artifact"
 		done
-		printf '\t\t</details>'
+		printf '\t\t\t</details>'
 	fi
 
-	printf '\t\t<code><pre>\n%s\n%s\n\t\t</pre></code>\n' "$content1" "$content2"
+	printf '\t\t\t<code><pre style="border: 1px #aaa solid; padding: 1rem; overflow: scroll; color: #cdb360;">\n'
+	printf '%s\n%s\n' "$content1" "$content2"
+	printf '\t\t\t</pre></code>\n'
 	cat <<EOF
+		</main>
 	</body>
 </html>
 EOF




diff --git a/templates/message.html b/templates/message.html
index f27f9e56d37d4aa4eac53e4bd5a73db290c0c97b..b7fcd958791ba26588e071f953ff7ce225ed9b45 100644
--- a/templates/message.html
+++ b/templates/message.html
@@ -6,12 +6,31 @@ 	cat < <!DOCTYPE html>
 <html>
 	<head>
-		<title>item</title>
+		<meta charset="UTF-8">
+		<meta name="viewport" content="width=device-width, initial-scale=1.0">
+		<title>toymaker::error</title>
+		<style>
+			* {
+				box-sizing: border-box;
+			}
+			a {
+				color: #00afff;
+			}
+			a:hover {
+				background-color: #db9d3b;
+				color: #000000;
+			}
+		</style>
 	</head>
-	<body>
+	<body style="background-color: #292929; color: #fafafa;">
+		<header style="font-size: 1.25rem; padding-top: .3125rem; padding-bottom: .3125rem;">
+			<a href="/toys/" style="font-family: monospace; text-decoration: none;">toymaker</a>
+		</header>
+		<main style="margin-left: 1rem; margin-top: 2rem;">
 EOF
-	printf '\t\t<p>%s</p>\n' "$message"
+	printf '\t\t\t<span style="font-size: 2rem; color: #ff5c57;">%s</span>\n' "$message"
 	cat <<EOF
+		</main>
 	</body>
 </html>
 EOF




diff --git a/templates/toy.html b/templates/toy.html
index f99e842eab8cd693c94f1b591853a51999d1279b..579bf69b09c8550d146954d1b1b242274b91943e 100644
--- a/templates/toy.html
+++ b/templates/toy.html
@@ -7,35 +7,57 @@ 	cat < <!DOCTYPE html>
 <html>
 	<head>
-		<title>$toy</title>
-	</head>
-	<body>
+		<meta charset="UTF-8">
+		<meta name="viewport" content="width=device-width, initial-scale=1.0">
 EOF
-
+	printf '\t\t<title>toymaker::%s</title>\n' "$toy"
 	cat <<EOF
-		<h1>$toy</h1>
+		<style>
+			* {
+				box-sizing: border-box;
+			}
+			a {
+				color: #00afff;
+			}
+			a:hover {
+				background-color: #db9d3b;
+				color: #000000;
+			}
+		</style>
+	</head>
+	<body style="background-color: #292929; color: #fafafa;">
+		<header style="font-size: 1.25rem; padding-top: .3125rem; padding-bottom: .3125rem;">
+			<a href="/toys/" style="font-family: monospace; text-decoration: none;">toymaker</a>
+		</header>
+		<main style="margin-left: 1rem; margin-top: 2rem;">
 EOF
+	printf '\t\t\t<h1>%s</h1>\n' "$toy"
 	if [ "$(echo "$content" | tr -d ' ' | sed 's/n,//')" = '' ]
 	then
-		printf '\t\tHave not run yet\n'
+		printf '\t\t\t<span style="font-size: 2rem;>Have not run yet</span>\n'
 	else
+		printf '\t\t\t<ul>\n'
 		for item in $content
 		do
 			status=$(echo "$item" | cut -d ',' -f1)
 			name=$(echo "$item" | cut -d ',' -f2)
+			printf '\t\t\t\t<li>\n'
 			if [ "$status" = '0' ]
 			then
-				printf '\t\tOK '
+				printf '\t\t\t\t\t<span style="color: #5af78e; font-size: .75rem; margin-right: .5rem;">OK</span>\n'
 			elif [ "$status" = 'r' ]
 			then
-				printf '\t\tRUN '
+				printf '\t\t\t\t\t<span style="font-size: .75rem; margin-right: .5rem;">R_</span>\n'
 			else
-				printf '\t\tERR '
+				printf '\t\t\t\t\t<span style="color: #ff5c57; font-size: .75rem; margin-right: .5rem;">ER</span>\n'
 			fi
-			printf '<a href="/toys/%s/%s">%s</a><br/>\n' "$toy" "$name" "$name"
+			printf '\t\t\t\t\t<a href="/toys/%s/%s"><span style="font-size: 1.5rem;">%s</span></a>\n' "$toy" "$name" "$name"
+			printf '\t\t\t\t</li>\n'
 		done
+		printf '\t\t\t</ul>\n'
 	fi
 	cat <<EOF
+		</main>
 	</body>
 </html>
 EOF




diff --git a/templates/toys.html b/templates/toys.html
index 9b362f3c2241233021b5d50e38f65ae2c088d6ea..98f8c0094b8f781169c470ac7f5849c652124ce9 100644
--- a/templates/toys.html
+++ b/templates/toys.html
@@ -5,29 +5,52 @@ 	cat < <!DOCTYPE html>
 <html>
 	<head>
-		<title>toys</title>
+		<meta charset="UTF-8">
+		<meta name="viewport" content="width=device-width, initial-scale=1.0">
+		<title>toymaker</title>
+		<style>
+			* {
+				box-sizing: border-box;
+			}
+			a {
+				color: #00afff;
+			}
+			a:hover {
+				background-color: #db9d3b;
+				color: #000000;
+			}
+		</style>
 	</head>
-	<body>
+	<body style="background-color: #292929; color: #fafafa;">
+		<header style="font-size: 1.25rem; padding-top: .3125rem; padding-bottom: .3125rem;">
+			<a href="/toys/" style="font-family: monospace; text-decoration: none;">toymaker</a>
+		</header>
+		<main style="margin-left: 1rem; margin-top: 2rem;">
+			<ul>
 EOF
 	for toy in $1
 	do
+		printf '\t\t\t\t<li>\n'
 		status=$(echo "$toy" | cut -d ';' -f1)
 		name=$(echo "$toy" | cut -d ';' -f2)
 		if [ "$status" = '0' ]
 		then
-			printf '\t\tOK '
+			printf '\t\t\t\t\t<span style="color: #5af78e; font-size: .75rem; margin-right: .5rem;">OK</span>\n'
 		elif [ "$status" = 'n' ]
 		then
-			printf '\t\tNY '
+			printf '\t\t\t\t\t<span style="font-size: .75rem; margin-right: .5rem;">N_</span>\n'
 		elif [ "$status" = 'r' ]
 		then
-			printf '\t\tRU '
+			printf '\t\t\t\t\t<span style="font-size: .75rem; margin-right: .5rem;">R_</span>\n'
 		else
-			printf '\t\tER '
+			printf '\t\t\t\t\t<span style="color: #ff5c57; font-size: .75rem; margin-right: .5rem;">ER</span>\n'
 		fi
-		printf '<a href="/toys/%s">%s</a><br/>\n' "$name" "$name"
+		printf '\t\t\t\t\t<a href="/toys/%s"><span style="font-size: 1.5rem;">%s</span></a>\n' "$name" "$name"
+		printf '\t\t\t\t</li>\n'
 	done
 	cat <<EOF
+			</ul>
+		</main>
 	</body>
 </html>
 EOF