initial upload

ui/components/meta.njk

@@ -0,0 +1,20 @@
+<link rel="icon" type="image/x-icon" href="/img/AppLogo.svg">
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<script src="https://cdn.tailwindcss.com"></script>
+<link href="https://cdn.jsdelivr.net/npm/flowbite@2.5.1/dist/flowbite.min.css" rel="stylesheet" />
+<link rel="stylesheet" href="/css/tabler-icons.min.css">
+<!-- <script src="/js/vue.global.prod.js"></script> -->
+<script src="https://unpkg.com/vue@latest"></script>
+<style>
+
+    body,
+    html {
+        /* width: 100svw; */
+        min-height: 100svh;
+
+        user-select: none;
+        background: var(--bs-body-bg);
+    }
+
+</style>

ui/components/navbar.njk

@@ -0,0 +1,27 @@
+<header class="sticky top-0 z-50 w-full flex flex-col bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-600">
+    <nav class="container flex justify-between items-center py-4 mx-auto relative ">
+        <!-- Application Logo -->
+        <a href="https://flowbite.com/" class="flex items-center space-x-3 rtl:space-x-reverse z-10">
+            <img src="https://flowbite.com/docs/images/logo.svg" class="h-6" alt="Flowbite Logo" />
+            <span class="self-center text-xl font-semibold whitespace-nowrap">Identity Manager</span>
+        </a>
+
+        <!-- Menu Items -->
+        <div class="flex items-center gap-12">
+            <a href="/profile" class="rounded text-gray-900 hover:text-blue-700 dark:text-white dark:hover:text-blue-500">
+                Profile
+            </a>
+            <a href="/admin" class="rounded text-gray-900 hover:text-blue-700 dark:text-white dark:hover:text-blue-500">
+                Administration
+            </a>
+        </div>
+
+        <!-- User Menu -->
+        <div class="flex flex-row gap-2 z-10">
+            <a href="/logout" class="py-2 px-6 rounded text-sm text-white bg-primary-500 hover:bg-primary-600">Sign Out</a>
+        </div>
+    </nav>
+</header>
+
+
+

ui/components/widgets.njk

@@ -0,0 +1,37 @@
+
+{% macro jumbotron(id='', title='', text='') %}
+<section class="w-full">
+    <div class="py-4 px-4 mx-auto max-w-screen-xl text-center">
+        <h1 class="my-4 font-extrabold tracking-tight leading-none text-gray-900 text-4xl md:text-5xl lg:text-6xl">
+            {{ title }}
+        </h1>
+        <p class="my-4 text-lg font-normal text-gray-500 lg:text-xl sm:px-16 lg:px-48">
+            {{ text }}
+        </p>
+        {{ caller() }}
+    </div>
+</section>
+{% endmacro %}
+
+{% macro container(id='', width='w-full', flow='row', vAlign='center', hAlign='center') %}
+<div class="container mx-auto {{width}} pt-24 pb-32 flex flex-{{flow}} justify-{{hAlign}} items-{{vAlign}}">
+    {{ caller() }}
+</div>
+{% endmacro %}
+
+{% macro grid(id='', title='', columns=3) %}
+<div class="my-4 grid grid-cols-1 md:grid-cols-{{2 if columns > 2 else columns}} lg:grid-cols-{{columns}} gap-6">
+    {{ caller() }}
+</div>
+{% endmacro %}
+
+{% macro link(id='', link='#', title='New Link', description='Description') %}
+<a href="{{ link }}" target="_blank" class="p-8 bg-gray-50 rounded-md border border-gray-200 hover:border-purple-400">
+    <h4 class="font-medium text-gray-700 text-lg mb-4">
+        {{ title }}
+    </h4>
+    <p class="font-normal text-gray-500 text-md">
+        {{ description }}
+    </p>
+</a>
+{% endmacro %}