keiji/pkg/webpages/html/digital_art.html

{{ define "centered_image" }}
<!DOCTYPE html>
<html lang="en">
    <div class="row container-fluid m-0 p-0">
        <div class="col container-fluid" style="background-color: black;"></div>
        {{ if eq .MediaType "video/webm" }}
        <video src="/api/v1/images/{{ .Ident }}" autoplay muted loop playsinline preload="metadata" aria-label="{{ .Title }}" class="img-fluid m-0 p-0 col-auto" style="background-color: black; max-height: 70vh;"></video>
        {{ else }}
        <img src="/api/v1/images/{{ .Ident }}" alt="{{ .Title }}" loading="lazy" class="img-fluid m-0 p-0 col-auto" style="background-color: black; max-height: 70vh;">
        {{ end }}
        <div class="col container-fluid" style="background-color: black;"></div>
    </div>
    {{ if ne .MediaType "video/webm" }}<a href="#">{{ end }}
        <div class="mask{{ if eq .MediaType "video/webm" }} video-highlight{{ end }}" style="background-color: hsla(0, 0%, 98%, 0.2)">
            <div class="row align-items-center" style="font-family: monospace; color: white; min-height: 100%;">
                <div class="col"></div>
                <div class="col-auto">
                    <div class="row col-auto p-2 m-2" style="font-size: xx-large;">
                        '{{ .Title }}'
                    </div>
                    <div class="row col-auto p-2 m-2" style="font-size: x-large;">
                        {{ .Desc }}
                    </div>
                </div>
                <div class="col"></div>
            </div>
        </div>
    {{ if ne .MediaType "video/webm" }}</a>{{ end }}
</html>
{{ end }}





{{ define "digital_art" }}
<!DOCTYPE html>
<html lang="en">
    <html lang="en">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="/api/v1/style/bootstrap.min.css">
        <link rel="stylesheet" href="/api/v1/style/mdb/mdb.min.css">
        <link rel="stylesheet" href="/api/v1/cdn/custom.css">
    </head>
    <body style="background-color: rgb(56, 56, 56);">
    <div id="main">

        <div class="container-fluid row">
            {{ range .images }}
                <div class="col-sm hover-overlay" data-mdb-ripple-init data-mdb-ripple-color="light">
                    <div class="col-auto">
                        <div class="row position-relative shadow-lg p-3 m-3 rounded justify-content-center media-card"
                            style="width: 80vh; max-width: 95%; background-color: rgb(22, 22, 22);">
                                {{ template "centered_image" . }}
                        </div>
                    </div>
                </div>
            {{ end }}
            </div>
        </div>
    </body>
</html>
{{ end }}