initial web UI

1 files changed, 119 insertions, 0 deletions

diff --git a/templates/project.html b/templates/project.html
new file mode 100644
index 0000000..9b0aa58
--- /dev/null
+++ b/templates/project.html
@@ -0,0 +1,119 @@
+{% extends "base.html" %} {% block title %}/{{ project_path }}{% endblock %} {%
+block path %}/<a href="/{{ project_path }}">{{ project_path }}</a>{% endblock %}
+{% block extrastyle %}
+<style
+	type="text/css"
+	media="all"
+>
+	.heading-name {
+		color: var(--secondary) !important;
+		font-weight: bolder;
+		font-style: italic;
+		text-decoration: none;
+	}
+	.heading-info {
+		display: flex;
+		flex-direction: row;
+		place-content: space-between;
+		.heading-url {
+			color: var(--blue);
+			text-decoration: underline;
+			font-style: italic;
+		}
+		.heading-cron {
+			color: var(--orange);
+			text-decoration: none;
+			font-weight: bolder;
+		}
+	}
+	.fullbody {
+		display: grid;
+		place-items: stretch;
+		grid-template-columns: repeat(2, 1fr);
+		padding: 20px;
+		gap: 20px;
+		.runcard {
+			display: felx;
+			background-color: var(--overlay);
+			padding: 10px;
+			border-radius: 4px;
+			width: 90%;
+			.runheader {
+				display: flex;
+				flex-direction: row;
+				place-content: space-between;
+				.runnumber {
+					font-weight: bolder;
+					color: var(--secondary);
+				}
+				.rundate {
+					font-size: 12px;
+					color: var(--secondary);
+				}
+			}
+			.runstatus {
+				padding: 4px;
+				color: var(--overlay);
+				&.success::before {
+					content: "success";
+					background-color: var(--green);
+					border-radius: 5px;
+					padding: 4px;
+				}
+				&.failure::before {
+					content: "failure";
+					background-color: var(--red);
+					border-radius: 5px;
+					padding: 4px;
+				}
+				&.running::before {
+					content: "running";
+					background-color: var(--brown);
+					border-radius: 5px;
+					padding: 4px;
+				}
+			}
+		}
+	}
+</style>
+{% endblock %} {% block headingcontent %}
+<h2 class="heading-name">{{ project.name }}</h2>
+<h4 class="heading-info"
+	><a
+		href="{{ project.url }}"
+		target="_blank"
+		class="heading-url"
+		>{{ project.url }}</a
+	><a
+		href="https://crontab.guru/#{{ project.cron }}"
+		target="_blank"
+		class="heading-cron"
+		>{{ project.cron }}</a
+	></h4
+>
+{% endblock %} {% block content %}
+
+<div class="fullbody">
+	{% for run in runlist %}
+	<div class="runcard">
+		<h3 class="runheader"
+			><span
+				>run
+				<span class="runnumber"
+					><a href="/{{ project_path }}/{{ run.number }}"
+						>#{{ run.number }}</a
+					></span
+				></span
+			><span class="rundate">{{ run.date }}</span></h3
+		>
+		<hr style="margin: 5px" />
+		<h4
+			class="runstatus {{ {true: 'success', false: 'failure', none: 'running'}[run.status]
+			}}"
+		></h4>
+	</div>
+	{% endfor %}
+</div>
+{% endblock %}
+
+<!-- vim: set filetype=jinja: -->