Files
njump/templates/live_event.html
2023-12-11 17:34:53 +01:00

120 lines
4.6 KiB
HTML

<!doctype html>
<html class="theme--default text-lg font-light print:text-base sm:text-xl">
<meta charset="UTF-8" />
<head>
<title>Stream: {{.LiveEvent.Title}} by {{ .LiveEvent.Host.Name }}</title>
{{template "opengraph" .OpenGraphPartial}}
<!---->
{{template "head_common" .HeadCommonPartial}}
</head>
<body
class="mb-16 bg-white text-gray-600 dark:bg-neutral-900 dark:text-neutral-50 print:text-black"
>
{{template "top" .}}
<div class="mx-auto px-4 sm:flex sm:items-center sm:justify-center sm:px-0">
<div
class="w-full max-w-screen-2xl justify-between gap-10 overflow-visible print:w-full sm:flex sm:w-11/12 sm:px-4 md:w-10/12 lg:w-9/12 lg:gap-48vw"
>
<div class="w-full break-words print:w-full sm:w-3/4">
<header class="mb-4 max-w-full">
<a class="flex flex-wrap items-center" href="/{{.Npub}}">
<div
class="print:basis-1-12 imgclip mr-2 max-w-full basis-1/6 overflow-hidden sm:mr-4"
>
<img class="block h-auto w-full" src="{{.Metadata.Picture}}" />
</div>
<div class="block print:text-base sm:grow">
<div class="leading-4 sm:text-2xl">
{{.Metadata.Name}}
<!---->
{{if not (eq .Metadata.Name .Metadata.DisplayName)}}
<span class="text-stone-400 sm:text-xl"
>/ {{.Metadata.DisplayName}}</span
>
{{end}}
</div>
<div class="text-sm leading-4 text-stone-400 sm:text-base">
{{.NpubShort}}
</div>
</div>
</a>
</header>
<div class="w-full text-right text-sm text-stone-400">
{{.CreatedAt}}
</div>
<div class="w-full text-right text-sm text-stone-400">
{{ if not (eq "" .ParentLink) }} in reply to
<span class="text-strongpink">{{ .ParentLink }}</span> {{ end }}
</div>
<div
class="-ml-4 mb-6 h-1.5 w-1/3 bg-zinc-100 dark:bg-zinc-700 sm:-ml-2.5"
></div>
<article
class="prose-cite:text-sm prose mb-6 max-w-full leading-5 dark:prose-invert prose-headings:font-light prose-p:m-0 prose-p:mb-2 prose-blockquote:mx-0 prose-blockquote:my-8 prose-blockquote:border-l-05rem prose-blockquote:border-solid prose-blockquote:border-l-gray-100 prose-blockquote:py-2 prose-blockquote:pl-4 prose-blockquote:pr-0 prose-ol:m-0 prose-ol:p-0 prose-ol:pl-4 prose-ul:m-0 prose-ul:p-0 prose-ul:pl-4 prose-li:mb-2 dark:prose-blockquote:border-l-zinc-800 sm:prose-a:text-justify"
>
<h1 class="text-2xl">
<span class="mr-2">{{.LiveEvent.Title}}</span>{{ if (eq "ended"
.LiveEvent.Status)}}
<span
class="whitespace-nowrap rounded bg-neutral-400 px-4 py-1 align-text-top text-base text-white dark:bg-neutral-700"
>Ended</span
>
{{ else if (eq "live" .LiveEvent.Status)}}
<span
class="whitespace-nowrap rounded bg-strongpink px-4 py-1 align-text-top text-base text-white"
>Live now!</span
>
{{ end }}
</h1>
<div class="mb-4">
{{ if not (eq "" .LiveEvent.HostNpub) }} Streaming hosted by
<a href="/{{ .LiveEvent.HostNpub }}"
>{{ .LiveEvent.Host.Name }}</a
>
{{ end }}
</div>
<!-- main content -->
<div class="mb-4">
{{ range .LiveEvent.Tags }}
<span
class="mr-2 whitespace-nowrap rounded bg-neutral-200 px-2 dark:bg-neutral-700 dark:text-white"
>{{ . }}</span
>
{{ end }}
</div>
{{ if (not (eq "" .LiveEvent.Summary))}}
<div>{{ .LiveEvent.Summary }}</div>
{{ end }} {{ if (not (eq "" .LiveEvent.Image))}}
<img
src="{{ .LiveEvent.Image }}"
alt="{{ .Alt }}"
_="on load
repeat until '{{ .LiveEvent.Status }}' == 'ended'
set @src to '{{ .LiveEvent.Image }}'
wait 5s
end
"
/>
{{ end }}
</article>
{{template "details" .DetailsPartial}}
<div
class="-ml-4 mb-6 h-1.5 w-1/3 bg-zinc-100 dark:bg-zinc-700 sm:-ml-2.5"
></div>
</div>
{{template "clients" .ClientsPartial}}
</div>
</div>
{{template "footer" .}}
</body>
</html>