feat: restructure and add settings page

This commit is contained in:
Tine 2024-02-10 18:35:16 +01:00
parent d4647edfd2
commit e45fc81faa
Signed by: mentos1386
SSH key fingerprint: SHA256:MNtTsLbihYaWF8j1fkOHfkKNlnN1JQfxEU/rBU8nCGw
6 changed files with 178 additions and 120 deletions

View file

@ -17,6 +17,7 @@ func main() {
r.PathPrefix("/static/").Handler(http.FileServer(http.FS(internal.Static)))
r.HandleFunc("/", pages.Index).Methods("GET")
r.HandleFunc("/settings", pages.Settings).Methods("GET")
log.Println("Server started on :8000")
log.Fatal(http.ListenAndServe(":8000", r))

View file

@ -0,0 +1,24 @@
package pages
import (
"net/http"
"text/template"
"code.tjo.space/mentos1386/zdravko/internal"
)
func Settings(w http.ResponseWriter, r *http.Request) {
ts, err := template.ParseFS(internal.Templates,
"ui/components/base.tmpl",
"ui/pages/settings.tmpl",
)
if err != nil {
http.Error(w, err.Error(), http.StatusInternalServerError)
return
}
err = ts.ExecuteTemplate(w, "base", nil)
if err != nil {
http.Error(w, err.Error(), http.StatusInternalServerError)
}
}

View file

@ -599,12 +599,16 @@ video {
margin-right: auto;
}
.mt-20 {
margin-top: 5rem;
.mr-1 {
margin-right: 0.25rem;
}
.mt-6 {
margin-top: 1.5rem;
.mt-10 {
margin-top: 2.5rem;
}
.mt-20 {
margin-top: 5rem;
}
.mt-8 {
@ -623,6 +627,10 @@ video {
height: 5rem;
}
.h-5 {
height: 1.25rem;
}
.h-8 {
height: 2rem;
}
@ -631,6 +639,10 @@ video {
width: 5rem;
}
.w-5 {
width: 1.25rem;
}
.max-w-screen-md {
max-width: 768px;
}
@ -724,6 +736,11 @@ video {
background-color: rgb(134 239 172 / var(--tw-bg-opacity));
}
.bg-green-400 {
--tw-bg-opacity: 1;
background-color: rgb(74 222 128 / var(--tw-bg-opacity));
}
.bg-green-500 {
--tw-bg-opacity: 1;
background-color: rgb(34 197 94 / var(--tw-bg-opacity));
@ -739,6 +756,14 @@ video {
background-color: rgb(239 68 68 / var(--tw-bg-opacity));
}
.stroke-\[3\] {
stroke-width: 3;
}
.p-1 {
padding: 0.25rem;
}
.p-4 {
padding: 1rem;
}

View file

@ -9,7 +9,14 @@
<link rel="stylesheet" href="/static/css/tailwind.css">
</head>
<body class="bg-gray-100">
{{template "main" .}}
<nav class="justify-center flex space-x-2 mt-10">
<a href="/" class="btn btn-active">Status</a>
<a href="/incidents" class="btn">Incidents</a>
<a href="/settings" class="btn">Settings</a>
</nav>
<div class="container max-w-screen-md flex flex-col mt-20">
{{template "main" .}}
</div>
<div class="container mx-auto">
<footer class="text-center text-gray-500 text-xs mt-8">
&copy; 2024 Zdravko - <a href="https://github.com/mentos1386/zdravko">Source</a>

View file

@ -1,121 +1,117 @@
{{define "title"}}Home{{end}}
{{define "title"}}Status{{end}}
{{define "main"}}
<div class="container max-w-screen-md mt-6 flex flex-col">
<nav class="justify-center flex space-x-2">
<a href="/" class="btn btn-active">Status</a>
<a href="/incidents" class="btn">Incidents</a>
<a href="/about" class="btn">About</a>
</nav>
<div class="flex flex-col items-center mt-20">
<svg class="feather h-20 w-20 rounded-full bg-green-300 p-4 overflow-visible"><use href="/static/icons/feather-sprite.svg#check" /></svg>
<h1 class="text-slate-500">All services are online</h1>
<p class="text-slate-500 text-sm">Last updated on Feb 10 at 10:55am UTC</p>
</div>
<div class="flex flex-col items-center mt-20">
<svg class="feather h-20 w-20 rounded-full bg-red-300 p-4 overflow-visible"><use href="/static/icons/feather-sprite.svg#alert-triangle" /></svg>
<h3 class="text-slate-500">Degraded performance</h3>
<p class="text-slate-500 text-sm">Last updated on Feb 10 at 10:55am UTC</p>
</div>
<div class="grid justify-items-stretch justify-stretch items-center mt-20 bg-gray-200 shadow-inner p-5 rounded-lg">
<div class="grid grid-cols-2 gap-2">
<div class="">foo.bar</div>
<div class="justify-self-end text-sm">69.420% uptime</div>
<div class="grid gap-px col-span-2 grid-flow-col h-8 rounded overflow-hidden">
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-red-500 hover:bg-red-700 flex-auto"></div>
<div class="bg-red-500 hover:bg-red-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-red-500 hover:bg-red-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
</div>
<div class="text-slate-500 justify-self-start text-sm">90 days ago</div>
<div class="text-slate-500 justify-self-end text-sm">Today</div>
<div class="flex flex-col items-center">
<svg class="feather h-20 w-20 rounded-full bg-green-300 p-4 overflow-visible"><use href="/static/icons/feather-sprite.svg#check" /></svg>
<h1 class="text-slate-500">All services are online</h1>
<p class="text-slate-500 text-sm">Last updated on Feb 10 at 10:55am UTC</p>
</div>
<div class="flex flex-col items-center mt-20">
<svg class="feather h-20 w-20 rounded-full bg-red-300 p-4 overflow-visible"><use href="/static/icons/feather-sprite.svg#alert-triangle" /></svg>
<h3 class="text-slate-500">Degraded performance</h3>
<p class="text-slate-500 text-sm">Last updated on Feb 10 at 10:55am UTC</p>
</div>
<div class="grid justify-items-stretch justify-stretch items-center mt-20 bg-gray-200 shadow-inner p-5 rounded-lg">
<div class="grid grid-cols-2 gap-2">
<div class="flex items-center">
<svg class="feather h-5 w-5 stroke-[3] rounded-full bg-green-400 p-1 mr-1"><use href="/static/icons/feather-sprite.svg#check" /></svg>
<p>foo.bar</p>
</div>
<div class="justify-self-end text-sm">69.420% uptime</div>
<div class="grid gap-px col-span-2 grid-flow-col h-8 rounded overflow-hidden">
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-red-500 hover:bg-red-700 flex-auto"></div>
<div class="bg-red-500 hover:bg-red-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-red-500 hover:bg-red-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
</div>
<div class="text-slate-500 justify-self-start text-sm">90 days ago</div>
<div class="text-slate-500 justify-self-end text-sm">Today</div>
</div>
</div>
{{end}}

View file

@ -0,0 +1,5 @@
{{define "title"}}Settings{{end}}
{{define "main"}}
<h1>The settings!</h1>
{{end}}