mirror of
https://github.com/mentos1386/zdravko.git
synced 2024-11-21 23:33:34 +00:00
feat: restructure and add settings page
This commit is contained in:
parent
d4647edfd2
commit
e45fc81faa
6 changed files with 178 additions and 120 deletions
|
@ -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))
|
||||
|
|
24
internal/pages/settings.go
Normal file
24
internal/pages/settings.go
Normal 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)
|
||||
}
|
||||
}
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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">
|
||||
© 2024 Zdravko - <a href="https://github.com/mentos1386/zdravko">Source</a>
|
||||
|
|
|
@ -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}}
|
||||
|
|
5
internal/ui/pages/settings.tmpl
Normal file
5
internal/ui/pages/settings.tmpl
Normal file
|
@ -0,0 +1,5 @@
|
|||
{{define "title"}}Settings{{end}}
|
||||
|
||||
{{define "main"}}
|
||||
<h1>The settings!</h1>
|
||||
{{end}}
|
Loading…
Reference in a new issue