mentos1386/zdravko
1
0
Fork 0
mirror of https://github.com/mentos1386/zdravko.git synced 2024-11-21 23:33:34 +00:00
Code Issues Projects Releases Packages Wiki Activity

feat: style and screenshot

Browse source
This commit is contained in:
Tine 2024-02-10 18:05:11 +01:00
parent 02a27a89b8
commit d802745b0a
Signed by: mentos1386
SSH key fingerprint: SHA256:MNtTsLbihYaWF8j1fkOHfkKNlnN1JQfxEU/rBU8nCGw
8 changed files with 187 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
.envrc Normal file
View file

@ -0,0 +1,7 @@
# Automatically sets up your devbox environment whenever you cd into this
# directory via our direnv integration:
eval "$(devbox generate direnv --print-envrc)"
# check out https://www.jetpack.io/devbox/docs/ide_configuration/direnv/
# for more details

2
README.md
View file

@ -10,6 +10,8 @@ Mostly just a project to test [temporal.io](https://temporal.io/).
- Otherwise using a cronjob would do the job, no need for temporal. - Otherwise using a cronjob would do the job, no need for temporal.
- [ ] Some nice UI to try out [htmx](https://htmx.org/). - [ ] Some nice UI to try out [htmx](https://htmx.org/).
![Screenshot](docs/screenshot.png)
# Development # Development
### Dependencies ### Dependencies

10
devbox.json
View file

@ -4,15 +4,5 @@
"temporal-cli@latest", "temporal-cli@latest",
"watchexec@latest", "watchexec@latest",
"tailwindcss@latest" "tailwindcss@latest"
],
"shell": {
"init_hook": [
"echo 'Welcome to devbox!' > /dev/null"
],
"scripts": {
"test": [
"echo \"Error: no test specified\" && exit 1"
] ]
} }
}
}

BIN
docs/screenshot.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 181 KiB

72
internal/static/css/tailwind.css
View file

@ -594,6 +594,11 @@ video {
grid-column: span 2 / span 2; grid-column: span 2 / span 2;
} }
.mx-auto {
margin-left: auto;
margin-right: auto;
}
.mt-20 { .mt-20 {
margin-top: 5rem; margin-top: 5rem;
} }
@ -602,6 +607,10 @@ video {
margin-top: 1.5rem; margin-top: 1.5rem;
} }
.mt-8 {
margin-top: 2rem;
}
.flex { .flex {
display: flex; display: flex;
} }
@ -614,6 +623,10 @@ video {
height: 5rem; height: 5rem;
} }
.h-8 {
height: 2rem;
}
.w-20 { .w-20 {
width: 5rem; width: 5rem;
} }
@ -622,6 +635,14 @@ video {
max-width: 768px; max-width: 768px;
} }
.flex-auto {
flex: 1 1 auto;
}
.grid-flow-col {
grid-auto-flow: column;
}
.grid-cols-2 { .grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-columns: repeat(2, minmax(0, 1fr));
} }
@ -650,6 +671,10 @@ video {
gap: 0.5rem; gap: 0.5rem;
} }
.gap-px {
gap: 1px;
}
.space-x-2 > :not([hidden]) ~ :not([hidden]) { .space-x-2 > :not([hidden]) ~ :not([hidden]) {
--tw-space-x-reverse: 0; --tw-space-x-reverse: 0;
margin-right: calc(0.5rem * var(--tw-space-x-reverse)); margin-right: calc(0.5rem * var(--tw-space-x-reverse));
@ -664,6 +689,10 @@ video {
justify-self: end; justify-self: end;
} }
.overflow-hidden {
overflow: hidden;
}
.overflow-visible { .overflow-visible {
overflow: visible; overflow: visible;
} }
@ -676,6 +705,10 @@ video {
border-radius: 9999px; border-radius: 9999px;
} }
.rounded-lg {
border-radius: 0.5rem;
}
.bg-gray-100 { .bg-gray-100 {
--tw-bg-opacity: 1; --tw-bg-opacity: 1;
background-color: rgb(243 244 246 / var(--tw-bg-opacity)); background-color: rgb(243 244 246 / var(--tw-bg-opacity));
@ -691,11 +724,21 @@ video {
background-color: rgb(134 239 172 / var(--tw-bg-opacity)); background-color: rgb(134 239 172 / var(--tw-bg-opacity));
} }
.bg-green-500 {
--tw-bg-opacity: 1;
background-color: rgb(34 197 94 / var(--tw-bg-opacity));
}
.bg-red-300 { .bg-red-300 {
--tw-bg-opacity: 1; --tw-bg-opacity: 1;
background-color: rgb(252 165 165 / var(--tw-bg-opacity)); background-color: rgb(252 165 165 / var(--tw-bg-opacity));
} }
.bg-red-500 {
--tw-bg-opacity: 1;
background-color: rgb(239 68 68 / var(--tw-bg-opacity));
}
.p-4 { .p-4 {
padding: 1rem; padding: 1rem;
} }
@ -704,6 +747,25 @@ video {
padding: 1.25rem; padding: 1.25rem;
} }
.text-center {
text-align: center;
}
.text-sm {
font-size: 0.875rem;
line-height: 1.25rem;
}
.text-xs {
font-size: 0.75rem;
line-height: 1rem;
}
.text-gray-500 {
--tw-text-opacity: 1;
color: rgb(107 114 128 / var(--tw-text-opacity));
}
.text-slate-500 { .text-slate-500 {
--tw-text-opacity: 1; --tw-text-opacity: 1;
color: rgb(100 116 139 / var(--tw-text-opacity)); color: rgb(100 116 139 / var(--tw-text-opacity));
@ -747,3 +809,13 @@ video {
--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color); --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
} }
.hover\:bg-green-700:hover {
--tw-bg-opacity: 1;
background-color: rgb(21 128 61 / var(--tw-bg-opacity));
}
.hover\:bg-red-700:hover {
--tw-bg-opacity: 1;
background-color: rgb(185 28 28 / var(--tw-bg-opacity));
}

4
internal/ui/components/base.tmpl
View file

@ -10,6 +10,10 @@
</head> </head>
<body class="bg-gray-100"> <body class="bg-gray-100">
{{template "main" .}} {{template "main" .}}
<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>
</footer>
<script src="/static/js/htmx.min.js"></script> <script src="/static/js/htmx.min.js"></script>
</body> </body>
</html> </html>

105
internal/ui/pages/index.tmpl
View file

@ -10,20 +10,111 @@
<div class="flex flex-col items-center mt-20"> <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> <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> <h1 class="text-slate-500">All services are online</h1>
<p class="text-slate-500">Last updated on Feb 10 at 10:55am UTC</p> <p class="text-slate-500 text-sm">Last updated on Feb 10 at 10:55am UTC</p>
</div> </div>
<div class="flex flex-col items-center mt-20"> <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> <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> <h3 class="text-slate-500">Degraded performance</h3>
<p class="text-slate-500">Last updated on Feb 10 at 10:55am UTC</p> <p class="text-slate-500 text-sm">Last updated on Feb 10 at 10:55am UTC</p>
</div> </div>
<div class="grid justify-items-stretch justify-stretch items-center mt-20 bg-gray-200 shadow-inner p-5 rounded"> <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="grid grid-cols-2 gap-2">
<div class="">foo.bar</div> <div class="">foo.bar</div>
<div class="justify-self-end">100% uptime</div> <div class="justify-self-end text-sm">69.420% uptime</div>
<div class="col-span-2">todo: bars showing uptime</div> <div class="grid gap-px col-span-2 grid-flow-col h-8 rounded overflow-hidden">
<div class="text-slate-500 justify-self-start">90 days ago</div> <div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="text-slate-500 justify-self-end">Today</div> <div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
<div class="bg-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>
</div> </div>
</div> </div>

3
justfile
View file

@ -1,3 +1,6 @@
# Always use devbox environment to run commands.
set shell := ["devbox", "run"]
STATIC_DIR := "./internal/static" STATIC_DIR := "./internal/static"
# Start devbox shell # Start devbox shell