feat: allow homepage customization
Some checks reported warnings
arcad/arcast/pipeline/head This commit is unstable

This commit is contained in:
2024-04-26 12:10:59 +02:00
parent 35585959f5
commit 768393adc8
18 changed files with 376 additions and 243 deletions

View File

@ -0,0 +1,64 @@
{{ define "base" }}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" type="image/x-icon" href="/logo.png" />
<title>Ready to cast !</title>
<link rel="stylesheet" href="style.css" />
{{ block "head" .
}}{{
end
}}
</head>
<body>
<div class="container">
<div class="panel">
<div id="icon"></div>
{{ block "message" . }}
<h2 id="title" class="text-centered">Ready to cast !</h2>
{{ end }}
{{ block "info" . }}
<p><b>Instance ID</b></p>
<p class="text-small text-centered">
<code>{{ .ID }}</code>
</p>
<p><b>Addresses</b></p>
<ul class="text-italic text-small text-centered">
{{ $port := .Port }}
{{
range.IPs
}}
<li>
<code>{{ . }}:{{ $port }}</code>
</li>
{{
end
}}
</ul>
{{ end }}
{{if .Apps }}
{{ block "apps" . }}
<p><b>Apps</b></p>
<ul class="text-italic text-small text-centered">
{{ $tlsPort := .TLSPort }}
{{
range.IPs
}}
<li>
<a href="https://{{ . }}:{{ $tlsPort }}/apps">
https://{{ . }}:{{ $tlsPort }}/apps
</a>
</li>
{{
end
}}
</ul>
{{ end }}
{{ end }}
</div>
</div>
</body>
</html>
{{ end }}

View File

@ -0,0 +1,3 @@
{{ define "index" }}
{{ template "base" . }}
{{ end }}

BIN
pkg/server/embed/logo.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 25 KiB

121
pkg/server/embed/style.css Normal file
View File

@ -0,0 +1,121 @@
html {
box-sizing: border-box;
font-size: 16px;
width: 100%;
height: 100%;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
"Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
sans-serif;
width: 100%;
height: 100%;
background: rgb(76, 96, 188);
background: linear-gradient(
415deg,
rgba(4, 168, 243, 1),
rgb(76, 136, 188, 1),
rgba(76, 96, 188, 1),
rgb(115, 76, 188, 1),
rgb(87, 76, 188, 1)
);
background-size: 400% 400%;
animation: gradient 15s ease infinite;
}
@keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
*,
*:before,
*:after {
box-sizing: inherit;
}
ol,
ul {
list-style: none;
}
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ol,
ul {
margin: 0;
padding: 0;
font-weight: normal;
}
.container {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.panel {
display: block;
background-color: #fff;
border-radius: 15px;
box-shadow: 10px 10px 10px #33333361;
position: relative;
padding: 50px 30px 30px 30px;
min-width: 50%;
color: #333;
}
#title {
margin: 10px 0px 20px 0px;
}
#icon {
width: 100px;
aspect-ratio: 1/1;
background-size: contain;
background-position: center center;
background-image: url("logo.png");
position: absolute;
left: 50%;
margin-left: -50px;
margin-top: -100px;
background-repeat: no-repeat;
}
.panel p,
.panel ul {
margin-top: 10px;
}
.text-centered {
text-align: center;
}
.text-italic {
font-style: italic;
}
.text-small {
font-size: 0.8em;
}
.mt {
margin-top: 1em;
display: block;
}