Added docker widget with documentation ✨

internal/assets/static/main.css

@@ -1545,6 +1545,37 @@ details[open] .summary::after {
     background: linear-gradient(0deg, var(--color-widget-background) 10%, transparent);
 }
 
+.docker-container-icon {
+    display: block;
+    opacity: 0.8;
+    filter: grayscale(0.4);
+    object-fit: contain;
+    aspect-ratio: 1 / 1;
+    width: 3.2rem;
+    position: relative;
+    top: -0.1rem;
+    transition: filter 0.3s, opacity 0.3s;
+}
+
+.docker-container-icon.simple-icon {
+    opacity: 0.7;
+}
+
+.docker-container:hover .docker-container-icon {
+    opacity: 1;
+}
+
+.docker-container:hover .docker-container-icon:not(.simple-icon) {
+    filter: grayscale(0);
+}
+
+.docker-container-status-icon {
+    flex-shrink: 0;
+    margin-left: auto;
+    width: 2rem;
+    height: 2rem;
+}
+
 @media (max-width: 1190px) {
     .header-container {
         display: none;

internal/assets/templates.go

@@ -42,6 +42,7 @@ var (
 	DNSStatsTemplate              = compileTemplate("dns-stats.html", "widget-base.html")
 	SplitColumnTemplate           = compileTemplate("split-column.html", "widget-base.html")
 	CustomAPITemplate             = compileTemplate("custom-api.html", "widget-base.html")
+	DockerTemplate                = compileTemplate("docker.html", "widget-base.html")
 )
 
 var GlobalTemplateFunctions = template.FuncMap{

internal/assets/templates/docker.html

@@ -0,0 +1,44 @@
+{{ template "widget-base.html" . }}
+
+{{ define "widget-content" }}
+<div class="dynamic-columns list-gap-20 list-with-separator">
+    {{ range .Containers }}
+    <div class="docker-container flex items-center gap-15">
+        {{ template "container" . }}
+    </div>
+    {{ end }}
+</div>
+{{ end }}
+
+{{ define "container" }}
+{{ if .Icon.URL }}
+<img class="monitor-site-icon{{ if .Icon.IsFlatIcon }} flat-icon{{ end }}" src="{{ .Icon.URL }}" alt="" loading="lazy">
+{{ end }}
+<div class="min-width-0">
+    <a class="size-h3 color-highlight text-truncate block" href="{{ .URL }}" target="_blank" rel="noreferrer" title="{{ .Title }}">{{ .Title }}</a>
+    <div class="text-truncate" title="{{ .Image }}">{{ .Image }}</div>
+    <ul class="size-h6 color-subdue list-horizontal-text">
+        <li>{{ .StatusShort }}</li>
+        <li>{{ .StatusFull }}</li>
+    </ul>
+</div>
+{{ if eq .StatusStyle "success" }}
+<div class="docker-container-status-icon">
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="var(--color-positive)">
+        <path fill-rule="evenodd" d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm13.36-1.814a.75.75 0 1 0-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 0 0-1.06 1.06l2.25 2.25a.75.75 0 0 0 1.14-.094l3.75-5.25Z" clip-rule="evenodd" />
+    </svg>
+</div>
+{{ else if eq .StatusStyle "warning" }}
+<div class="docker-container-status-icon">
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="var(--color-positive)">
+        <path fill-rule="evenodd" d="M9.401 3.003c1.155-2 4.043-2 5.197 0l7.355 12.748c1.154 2-.29 4.5-2.599 4.5H4.645c-2.309 0-3.752-2.5-2.598-4.5L9.4 3.003ZM12 8.25a.75.75 0 0 1 .75.75v3.75a.75.75 0 0 1-1.5 0V9a.75.75 0 0 1 .75-.75Zm0 8.25a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Z" clip-rule="evenodd" />
+    </svg>
+</div>
+{{ else }}
+<div class="docker-container-status-icon">
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="var(--color-negative)">
+        <path fill-rule="evenodd" d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12ZM12 8.25a.75.75 0 0 1 .75.75v3.75a.75.75 0 0 1-1.5 0V9a.75.75 0 0 1 .75-.75Zm0 8.25a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Z"  clip-rule="evenodd" />
+    </svg>
+</div>
+{{ end }}
+{{ end }}