diff options
Diffstat (limited to 'templates')
| -rw-r--r-- | templates/base.html | 74 | ||||
| -rw-r--r-- | templates/home.html | 66 | ||||
| -rw-r--r-- | templates/project.html | 119 | ||||
| -rw-r--r-- | templates/run.html | 19 |
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: --> |