aboutsummaryrefslogtreecommitdiff
path: root/templates
diff options
context:
space:
mode:
authortoufic ar <contact@toufy.me>2026-05-11 19:43:18 +0300
committertoufic ar <contact@toufy.me>2026-05-11 19:43:18 +0300
commit1817d117d020318ba5fcd281708015eaad3f092c (patch)
treed921291bbe95524eff1ff628591426e25541c0dc /templates
parentebbdc72f0a4c9bcf38526520a7728221f05eaedb (diff)
downloadmakeshiftci-1817d117d020318ba5fcd281708015eaad3f092c.tar.gz
makeshiftci-1817d117d020318ba5fcd281708015eaad3f092c.zip
initial web UI
Diffstat (limited to 'templates')
-rw-r--r--templates/base.html74
-rw-r--r--templates/home.html66
-rw-r--r--templates/project.html119
-rw-r--r--templates/run.html19
4 files changed, 278 insertions, 0 deletions
diff --git a/templates/base.html b/templates/base.html
new file mode 100644
index 0000000..81d6a59
--- /dev/null
+++ b/templates/base.html
@@ -0,0 +1,74 @@
+<!doctype html>
+<html lang="en">
+ <head>
+ {% block head %}
+ <meta charset="utf-8" />
+ <title>makeshiftci{% block title %}{% endblock %}</title>
+ <link
+ rel="shortcut icon"
+ href="/favicon.ico"
+ />
+ {% endblock %}
+ <style
+ type="text/css"
+ media="all"
+ >
+ * {
+ margin: 0;
+ padding: 0;
+ }
+ html,
+ body {
+ height: 100%;
+ }
+ :root {
+ --primary: #de3163;
+ --secondary: #722f37;
+ --overlay: #f0ead6;
+ --blue: #0054b4;
+ --orange: #f94d00;
+ --green: #228b22;
+ --red: #ce2029;
+ --brown: #6f4e37;
+ @media (prefers-color-scheme: dark) {
+ --primary: #ffb7c5;
+ --secondary: #ddadaf;
+ --overlay: #534b4f;
+ --blue: #73c2fb;
+ --orange: #f28500;
+ --green: #85bb65;
+ --red: #e66771;
+ --brown: #c19a6b;
+ }
+ .heading {
+ top: 0;
+ left: 0;
+ position: sticky;
+ padding: 10px;
+ background-color: var(--overlay);
+ color: var(--primary);
+ }
+ .content-box {
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+ }
+ a {
+ color: var(--primary);
+ }
+ color-scheme: light dark;
+ }
+ </style>
+ {% block extrastyle %}{% endblock %}
+ </head>
+ <body>
+ <div class="content-box">
+ <div class="heading">
+ <h1><a href="/">makeshiftci</a>{% block path %}{% endblock %}</h1>
+ {% block headingcontent %}{% endblock %}
+ </div>
+ {% block content %}{% endblock %}
+ </div>
+ </body>
+</html>
+<!-- vim: set filetype=jinja: -->
diff --git a/templates/home.html b/templates/home.html
new file mode 100644
index 0000000..20ef75a
--- /dev/null
+++ b/templates/home.html
@@ -0,0 +1,66 @@
+{% extends "base.html" %} {% block extrastyle %}
+<style
+ type="text/css"
+ media="all"
+>
+ .fullbody {
+ display: grid;
+ place-items: stretch;
+ grid-template-columns: repeat(2, 1fr);
+ padding: 20px;
+ gap: 20px;
+ .projectcard {
+ display: felx;
+ background-color: var(--overlay);
+ padding: 10px;
+ border-radius: 4px;
+ width: 90%;
+ .headlink a {
+ color: var(--secondary);
+ font-weight: bolder;
+ font-style: italic;
+ text-decoration: none;
+ }
+ .urllink a {
+ color: var(--blue);
+ text-decoration: underline;
+ font-style: italic;
+ }
+ .cronlink a {
+ color: var(--orange);
+ text-decoration: none;
+ font-weight: bolder;
+ }
+ }
+ }
+</style>
+{% endblock %} {% block content %}
+<div class="fullbody">
+ {% for project in projects %}
+ <div class="projectcard">
+ <h2 class="headlink"
+ ><a href="/{{ project[0] }}">{{ project[1]['name'] }}</a></h2
+ >
+ <hr style="margin: 10px 0" />
+ <h4 class="urllink"
+ >url:
+ <a
+ href="{{ project[1]['url'] }}"
+ target="_blank"
+ >{{ project[1]['url'] }}</a
+ ></h4
+ >
+ <h4 class="cronlink"
+ >cron:
+ <a
+ href="https://crontab.guru/#{{ project[1]['cron'] }}"
+ target="_blank"
+ >{{ project[1]['cron'] }}</a
+ ></h4
+ >
+ </div>
+ {% endfor %}
+</div>
+{% endblock %}
+
+<!-- vim: set filetype=jinja: -->
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: -->
diff --git a/templates/run.html b/templates/run.html
new file mode 100644
index 0000000..77f9f90
--- /dev/null
+++ b/templates/run.html
@@ -0,0 +1,19 @@
+{% extends "base.html" %} {% block title %}/{{ project_path }}/{{ run_number
+}}{% endblock %} {% block path %}/<a href="/{{ project_path }}"
+ >{{ project_path }}</a
+>/<a href="/{{ project_path }}/{{ run_number }}">{{ run_number }}</a>{% endblock
+%} {% block content %}
+<pre
+ id="stdout"
+ style="white-space: pre-wrap"
+></pre>
+
+{% for n in run %}
+<script>
+ document.getElementById('stdout').textContent = {{ n|tojson }};
+ var s = document.currentScript;
+ s.parentNode.removeChild(s);
+</script>
+{% endfor %} {% endblock %}
+
+<!-- vim: set filetype=jinja: -->
generated by cgit v1.2.3 (git 2.25.1) at 2026-05-26 06:29:21 +0000