mirror of
https://github.com/sergi0g/cup.git
synced 2025-11-08 05:03:49 -05:00
330 lines
16 KiB
HTML
330 lines
16 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf8">
|
|
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
|
<meta name="color-scheme" content="light dark">
|
|
{% if theme == 'neutral' %}
|
|
<meta
|
|
name="theme-color"
|
|
media="(prefers-color-scheme: light)"
|
|
content="#ffffff"
|
|
>
|
|
<meta
|
|
name="theme-color"
|
|
media="(prefers-color-scheme: dark)"
|
|
content="#0a0a0a"
|
|
>
|
|
{% else %}
|
|
<meta
|
|
name="theme-color"
|
|
media="(prefers-color-scheme: light)"
|
|
content="#ffffff"
|
|
>
|
|
<meta
|
|
name="theme-color"
|
|
media="(prefers-color-scheme: dark)"
|
|
content="#030712"
|
|
>
|
|
{% endif %}
|
|
<link rel="icon" type="image/svg+xml" href="./favicon.svg">
|
|
<link rel="icon" type="image/x-icon" href="./favicon.ico">
|
|
<link rel="apple-touch-icon" href="./apple-touch-icon.png">
|
|
<title>Cup</title>
|
|
</head>
|
|
<body>
|
|
<div id="root">
|
|
<div
|
|
class="flex justify-center min-h-screen bg-white dark:bg-{{ theme }}-950"
|
|
>
|
|
<div class="mx-auto h-full w-full max-w-[80rem] px-4 sm:px-6 lg:px-8">
|
|
<div class="mx-auto my-8 h-full max-w-[48rem] flex-col">
|
|
<div class="flex items-center gap-1">
|
|
<h1 class="text-5xl font-bold lg:text-6xl dark:text-white tracking-tight">Cup</h1>
|
|
<svg
|
|
version="1.1"
|
|
id="Layer_2"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
xmlns:xlink="http://www.w3.org/1999/xlink"
|
|
x="0px"
|
|
y="0px"
|
|
viewBox="0 0 128 128"
|
|
style="enable-background: new 0 0 128 128"
|
|
xml:space="preserve"
|
|
class="size-14 lg:size-16"
|
|
>
|
|
<path
|
|
style="fill: #a6cfd6"
|
|
d="M65.12,17.55c-17.6-0.53-34.75,5.6-34.83,14.36c-0.04,5.2,1.37,18.6,3.62,48.68s2.25,33.58,3.5,34.95
|
|
c1.25,1.37,10.02,8.8,25.75,8.8s25.93-6.43,26.93-8.05c0.48-0.78,1.83-17.89,3.5-37.07c1.81-20.84,3.91-43.9,3.99-45.06
|
|
C97.82,30.66,94.2,18.43,65.12,17.55z"
|
|
/>
|
|
<path
|
|
style="fill: #dcedf6"
|
|
d="M41.4,45.29c-0.12,0.62,1.23,24.16,2.32,27.94c1.99,6.92,9.29,7.38,10.23,4.16
|
|
c0.9-3.07-0.38-29.29-0.38-29.29s-3.66-0.3-6.43-0.84C44,46.63,41.4,45.29,41.4,45.29z"
|
|
/>
|
|
<path
|
|
style="fill: #6ca4ae"
|
|
d="M33.74,32.61c-0.26,8.83,20.02,12.28,30.19,12.22c13.56-0.09,29.48-4.29,29.8-11.7
|
|
S79.53,21.1,63.35,21.1C49.6,21.1,33.96,25.19,33.74,32.61z"
|
|
/>
|
|
<path
|
|
style="fill: #dc0d27"
|
|
d="M84.85,13.1c-0.58,0.64-9.67,30.75-9.67,30.75s2.01-0.33,4-0.79c2.63-0.61,3.76-1.06,3.76-1.06
|
|
s7.19-22.19,7.64-23.09c0.45-0.9,21.61-7.61,22.31-7.93c0.7-0.32,1.39-0.4,1.46-0.78c0.06-0.38-2.34-6.73-3.11-6.73
|
|
C110.47,3.47,86.08,11.74,84.85,13.1z"
|
|
/>
|
|
<path
|
|
style="fill: #8a1f0f"
|
|
d="M110.55,7.79c1.04,2.73,2.8,3.09,3.55,2.77c0.45-0.19,1.25-1.84,0.01-4.47
|
|
c-0.99-2.09-2.17-2.74-2.93-2.61C110.42,3.6,109.69,5.53,110.55,7.79z"
|
|
/>
|
|
<g>
|
|
<path
|
|
style="fill: #8a1f0f"
|
|
d="M91.94,18.34c-0.22,0-0.44-0.11-0.58-0.3l-3.99-5.77c-0.22-0.32-0.14-0.75,0.18-0.97
|
|
c0.32-0.22,0.76-0.14,0.97,0.18l3.99,5.77c0.22,0.32,0.14,0.75-0.18,0.97C92.21,18.3,92.07,18.34,91.94,18.34z"
|
|
/>
|
|
</g>
|
|
<g>
|
|
<path
|
|
style="fill: #8a1f0f"
|
|
d="M90.28,19.43c-0.18,0-0.35-0.07-0.49-0.2l-5.26-5.12c-0.28-0.27-0.28-0.71-0.01-0.99
|
|
c0.27-0.28,0.71-0.28,0.99-0.01l5.26,5.12c0.28,0.27,0.28,0.71,0.01,0.99C90.64,19.36,90.46,19.43,90.28,19.43z"
|
|
/>
|
|
</g>
|
|
<g>
|
|
<path
|
|
style="fill: #8a1f0f"
|
|
d="M89.35,21.22c-0.12,0-0.25-0.03-0.36-0.1l-5.6-3.39c-0.33-0.2-0.44-0.63-0.24-0.96
|
|
c0.2-0.33,0.63-0.44,0.96-0.24l5.6,3.39c0.33,0.2,0.44,0.63,0.24,0.96C89.82,21.1,89.59,21.22,89.35,21.22z"
|
|
/>
|
|
</g>
|
|
</svg>
|
|
</div>
|
|
<div
|
|
class="border shadow-sm border-{{theme}}-200 dark:border-{{theme}}-900 my-8 rounded-md"
|
|
>
|
|
<dl
|
|
class="grid grid-cols-2 gap-1 overflow-hidden *:relative lg:grid-cols-4"
|
|
>
|
|
{% assign metrics_to_show = 'monitored_images,up_to_date,updates_available,unknown' | split: ',' %}
|
|
{% for metric in metrics %}
|
|
{% if metrics_to_show contains metric.name %}
|
|
<div
|
|
class="before:bg-{{ theme }}-200 before:dark:bg-{{ theme }}-900 after:bg-{{ theme }}-200 after:dark:bg-{{ theme }}-900 gi"
|
|
>
|
|
<div
|
|
class="flex h-full flex-col justify-between gap-x-4 gap-y-2 px-6 py-4 align-baseline lg:min-h-32"
|
|
>
|
|
<dt
|
|
class="text-{{ theme }}-500 dark:text-{{ theme }}-400 text-sm font-semibold uppercase leading-6"
|
|
>
|
|
{{ metric.name | replace: '_', ' ' }}
|
|
</dt>
|
|
<div class="flex items-center justify-between gap-1">
|
|
<dd
|
|
class="w-full text-3xl font-medium leading-10 tracking-tight text-black dark:text-white"
|
|
>
|
|
{{ metric.value }}
|
|
</dd>
|
|
{% case metric.name %}
|
|
{% when 'monitored_images' %}
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="24"
|
|
height="24"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
class="size-6 shrink-0 text-black dark:text-white"
|
|
>
|
|
<path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"/><circle cx="12" cy="12" r="3"/>
|
|
</svg>
|
|
{% when 'up_to_date' %}
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="24"
|
|
height="24"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
class="size-6 shrink-0 text-green-500"
|
|
>
|
|
<circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/>
|
|
</svg>
|
|
{% when 'updates_available' %}
|
|
{% assign max_metric = '' %}
|
|
{% assign max_value = 0 %}
|
|
{% for m in metrics %}
|
|
{% unless metrics_to_show contains m.name %}
|
|
{% if m.value > max_value %}
|
|
{% assign max_metric = m.name %}
|
|
{% assign max_value = m.value %}
|
|
{% endif %}
|
|
{% endunless %}
|
|
{% endfor %}
|
|
{% case max_metric %}
|
|
{% when 'major_updates' %}
|
|
{% assign color = 'text-red-500' %}
|
|
{% when 'minor_updates' %}
|
|
{% assign color = 'text-yellow-500' %}
|
|
{% else %}
|
|
{% assign color = 'text-blue-500' %}
|
|
{% endcase %}
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="24"
|
|
height="24"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
class="size-6 shrink-0 {{ color }}"
|
|
>
|
|
<circle cx="12" cy="12" r="10"/><path d="m16 12-4-4-4 4"/><path d="M12 16V8"/>
|
|
</svg>
|
|
{% when 'unknown' %}
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="24"
|
|
height="24"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
class="size-6 text-{{ theme }}-500 shrink-0"
|
|
>
|
|
<circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/><path d="M12 17h.01"/>
|
|
</svg>
|
|
{% endcase %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
{% endfor %}
|
|
</dl>
|
|
</div>
|
|
<div
|
|
class="border shadow-sm border-{{theme}}-200 dark:border-{{theme}}-900 my-8 rounded-md"
|
|
>
|
|
<div
|
|
class="flex justify-between items-center px-6 py-4"
|
|
>
|
|
<h3 class="text-{{theme}}-600 dark:text-{{theme}}-500">Last checked: {{ last_updated }}</h3>
|
|
</div>
|
|
<ul>
|
|
{% for server in server_ids %}
|
|
<li class="mb-4 last:mb-0">
|
|
<p
|
|
class="my-4 text-lg font-semibold text-{{ theme }}-600 dark:text-{{ theme }}-400 px-6"
|
|
>
|
|
{% if server == '' %}
|
|
Local images
|
|
{% else %}
|
|
{{ server }}
|
|
{% endif %}
|
|
</p>
|
|
<ul
|
|
class="dark:divide-{{theme}}-900 divide-y dark:text-white"
|
|
>
|
|
{% for image in servers[server] %}
|
|
<li
|
|
class="flex items-center gap-4 break-all px-6 py-4 text-start hover:bg-{{theme}}-100 hover:dark:bg-{{theme}}-900/50 transition-colors duration-200"
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="24"
|
|
height="24"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
class="size-6 shrink-0 text-{{ theme }}-500"
|
|
>
|
|
<path d="M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z"/><path d="m3.3 7 8.7 5 8.7-5"/><path d="M12 22V12"/>
|
|
</svg>
|
|
<span class="font-mono">{{ image.name }}</span>
|
|
{% case image.status %}
|
|
{% when 'Up to date' %}
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="24"
|
|
height="24"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
class="ml-auto text-green-500"
|
|
>
|
|
<circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/>
|
|
</svg>
|
|
{% when 'Unknown' %}
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="24"
|
|
height="24"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
class="text-{{ theme }}-500 ml-auto"
|
|
>
|
|
<circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/><path d="M12 17h.01"/>
|
|
</svg>
|
|
{% else %}
|
|
{% case image.status %}
|
|
{% when 'Major update' %}
|
|
{% assign color = 'text-red-500' %}
|
|
{% when 'Minor update' %}
|
|
{% assign color = 'text-yellow-500' %}
|
|
{% else %}
|
|
{% assign color = 'text-blue-500' %}
|
|
{% endcase %}
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="24"
|
|
height="24"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
class="ml-auto {{ color }}"
|
|
>
|
|
<circle cx="12" cy="12" r="10"/><path d="m16 12-4-4-4 4"/><path d="M12 16V8"/>
|
|
</svg>
|
|
{% endcase %}
|
|
</li>
|
|
{% endfor %}
|
|
</ul>
|
|
</li>
|
|
{% endfor %}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script type="module" src="/src/main.tsx"></script>
|
|
</body>
|
|
</html>
|