waggeling.net/glauth-ui
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

continued

Browse source 
implemented HTMX
implemented ORM (sequelize)
This commit is contained in:
Kai Waggeling 2025-11-29 21:56:21 +01:00
parent 2a9bd4e81b
commit d756a192e4
71 changed files with 3822 additions and 694 deletions
Download patch file Download diff file Expand all files Collapse all files

170
views/components/meta.njk Normal file
View file

@ -0,0 +1,170 @@
<link rel="icon" type="image/x-icon" href="/img/favicon.svg">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="/js/tailwind.min.js"></script>
<script src="/js/htmx.min.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="/styles/tabler-icons.min.css">
<link rel="stylesheet" href="/styles/theme.default.css">
<link rel="stylesheet" href="/styles/theme.light.css">
<style>
body,
html {
/* width: 100svw; */
min-height: 100svh;
user-select: none;
}
* {
box-sizing: border-box;
}
</style>
<style type="text/tailwindcss">
@layer components {
body {
@apply w-full flex flex-col items-center;
background: var(--color-base-bg-400);
color: var(--color-base-fg-100);
}
#navbar {
@apply: sticky top-0 z-50 w-full flex flex-col;
background: var(--color-base-bg-100);
}
#pageHeader {
@apply w-full flex flex-col items-center;
padding: 2rem 0rem 5rem;
margin: 0rem 0rem -3rem;
background: var(--color-base-bg-100);
color: var(--color-base-fg-100);
}
#pageContent {
@apply container flex flex-col items-center gap-8;
color: var(--color-base-fg-100);
}
.card {
@apply rounded-lg;
background: var(--color-base-bg-300);
border: 1px solid var(--color-base-bg-200);
}
.button {
@apply rounded-lg text-center font-medium;
@apply px-5 py-2.5;
border: 1px solid transparent;
}
.button-sm {
@apply rounded-lg text-center font-medium;
@apply px-3 py-2 text-sm;
}
.primary-outline,
.primary-outline-hover:hover {
border: 1px solid var(--color-primary-bg);
}
.primary-fill,
.primary-fill-hover:hover {
color: var(--color-primary-fg);
background: var(--color-primary-bg);
}
.primary-text,
.primary-text-hover:hover {
color: var(--color-primary-bg);
}
.danger-outline,
.danger-outline-hover:hover {
border: 1px solid var(--color-error-fg);
}
.danger-fill,
.danger-fill-hover:hover {
color: var(--color-error-fg);
background: var(--color-error-bg);
}
.danger-text,
.danger-text-hover:hover {
color: var(--color-error-fg);
}
.success-outline,
.success-outline-hover:hover {
border: 1px solid var(--color-success-fg);
}
.success-fill,
.success-fill-hover:hover {
color: var(--color-success-fg);
background: var(--color-success-bg);
}
.success-text,
.success-text-hover:hover {
color: var(--color-success-fg);
}
input,
textarea,
select {
@apply rounded-lg py-2 px-4 text-sm;
color: var(--color-base-fg-300);
background: var(--color-base-bg-200);
border: 1px solid var(--color-base-fg-300);
}
input:focus,
textarea:focus,
select:focus {
color: var(--color-base-fg-100);
border: 1px solid var(--color-primary-bg) !important;
}
input::placeholder {
color: var(--color-base-fg-300);
}
div.table {
@apply grid;
}
div.thead {
@apply grid grid-cols-subgrid col-span-full items-center;
@apply px-6 py-4 gap-8;
@apply border-b text-xs tracking-widest uppercase;
background: var(--color-base-bg-100);
border-color: var(--color-base-bg-300);
color: var(--color-base-fg-300);
}
div.trow {
@apply grid grid-cols-subgrid col-span-full items-center;
@apply px-6 py-4 gap-8;
@apply border-b;
border-color: var(--color-base-bg-100);
}
div.trow:hover {
background: var(--color-base-bg-300);
}
div.table > *:last-child {
@apply border-b-0;
}
.alert-danger {
@apply rounded-lg border-t-4;
@apply flex items-center px-4 py-3;
background: var(--color-base-bg-300);
border-color: var(--color-error-fg);
color: var(--color-error-fg);
}
}
</style>