summaryrefslogtreecommitdiffstats
path: root/core
diff options
context:
space:
mode:
Diffstat (limited to 'core')
-rw-r--r--core/static/css/output.css674
-rw-r--r--core/templates/core/base.html38
-rw-r--r--core/templates/core/index.html152
3 files changed, 682 insertions, 182 deletions
diff --git a/core/static/css/output.css b/core/static/css/output.css
index e8bd71c..e25155d 100644
--- a/core/static/css/output.css
+++ b/core/static/css/output.css
@@ -916,12 +916,6 @@ html {
--tw-bg-opacity: 1;
background-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-bg-opacity)));
}
-
- .table-zebra tr.hover:hover,
- .table-zebra tr.hover:nth-child(even):hover {
- --tw-bg-opacity: 1;
- background-color: var(--fallback-b3,oklch(var(--b3)/var(--tw-bg-opacity)));
- }
}
.btn {
@@ -1112,48 +1106,7 @@ html {
min-height: fit-content;
}
-.dropdown {
- position: relative;
- display: inline-block;
-}
-
-.dropdown > *:not(summary):focus {
- outline: 2px solid transparent;
- outline-offset: 2px;
-}
-
-.dropdown .dropdown-content {
- position: absolute;
-}
-
-.dropdown:is(:not(details)) .dropdown-content {
- visibility: hidden;
- opacity: 0;
- transform-origin: top;
- --tw-scale-x: .95;
- --tw-scale-y: .95;
- transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
- transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
- transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
- transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
- transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
- transition-duration: 200ms;
-}
-
-.dropdown.dropdown-open .dropdown-content,
-.dropdown:not(.dropdown-hover):focus .dropdown-content,
-.dropdown:focus-within .dropdown-content {
- visibility: visible;
- opacity: 1;
-}
-
@media (hover: hover) {
- .dropdown.dropdown-hover:hover .dropdown-content {
- visibility: visible;
- opacity: 1;
- }
-
.btm-nav > *.disabled:hover,
.btm-nav > *[disabled]:hover {
pointer-events: none;
@@ -1227,12 +1180,6 @@ html {
}
}
- .dropdown.dropdown-hover:hover .dropdown-content {
- --tw-scale-x: 1;
- --tw-scale-y: 1;
- transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
- }
-
.tab[disabled],
.tab[disabled]:hover {
cursor: not-allowed;
@@ -1241,10 +1188,6 @@ html {
}
}
-.dropdown:is(details) summary::-webkit-details-marker {
- display: none;
-}
-
.form-control {
display: flex;
flex-direction: column;
@@ -1288,12 +1231,6 @@ html {
margin-inline-end: -1rem;
}
-.join .dropdown .join-item:first-child:not(:last-child),
- .join *:first-child:not(:last-child) .dropdown .join-item {
- border-start-end-radius: inherit;
- border-end-end-radius: inherit;
-}
-
.link {
cursor: pointer;
text-decoration-line: underline;
@@ -1376,6 +1313,40 @@ html {
--tw-border-opacity: 0.2;
}
+.select {
+ display: inline-flex;
+ cursor: pointer;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ user-select: none;
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ appearance: none;
+ height: 3rem;
+ min-height: 3rem;
+ padding-inline-start: 1rem;
+ padding-inline-end: 2.5rem;
+ font-size: 0.875rem;
+ line-height: 1.25rem;
+ line-height: 2;
+ border-radius: var(--rounded-btn, 0.5rem);
+ border-width: 1px;
+ border-color: transparent;
+ --tw-bg-opacity: 1;
+ background-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity)));
+ background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
+ linear-gradient(135deg, currentColor 50%, transparent 50%);
+ background-position: calc(100% - 20px) calc(1px + 50%),
+ calc(100% - 16.1px) calc(1px + 50%);
+ background-size: 4px 4px,
+ 4px 4px;
+ background-repeat: no-repeat;
+}
+
+.select[multiple] {
+ height: auto;
+}
+
.tabs {
display: grid;
align-items: flex-end;
@@ -1485,11 +1456,6 @@ input.tab:checked + .tab-content,
background-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity)));
}
-.table-zebra tbody tr:nth-child(even) :where(.table-pin-cols tr th) {
- --tw-bg-opacity: 1;
- background-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-bg-opacity)));
-}
-
.btm-nav > *:where(.active) {
border-top-width: 2px;
--tw-bg-opacity: 1;
@@ -1833,14 +1799,6 @@ details.collapse summary::-webkit-details-marker {
content: "−";
}
-.dropdown.dropdown-open .dropdown-content,
-.dropdown:focus .dropdown-content,
-.dropdown:focus-within .dropdown-content {
- --tw-scale-x: 1;
- --tw-scale-y: 1;
- transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-
.input input {
--tw-bg-opacity: 1;
background-color: var(--fallback-p,oklch(var(--p)/var(--tw-bg-opacity)));
@@ -2059,6 +2017,50 @@ details.collapse summary::-webkit-details-marker {
}
}
+.select:focus {
+ box-shadow: none;
+ border-color: var(--fallback-bc,oklch(var(--bc)/0.2));
+ outline-style: solid;
+ outline-width: 2px;
+ outline-offset: 2px;
+ outline-color: var(--fallback-bc,oklch(var(--bc)/0.2));
+}
+
+.select-disabled,
+ .select:disabled,
+ .select[disabled] {
+ cursor: not-allowed;
+ --tw-border-opacity: 1;
+ border-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-border-opacity)));
+ --tw-bg-opacity: 1;
+ background-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-bg-opacity)));
+ color: var(--fallback-bc,oklch(var(--bc)/0.4));
+}
+
+.select-disabled::-moz-placeholder, .select:disabled::-moz-placeholder, .select[disabled]::-moz-placeholder {
+ color: var(--fallback-bc,oklch(var(--bc)/var(--tw-placeholder-opacity)));
+ --tw-placeholder-opacity: 0.2;
+}
+
+.select-disabled::placeholder,
+ .select:disabled::placeholder,
+ .select[disabled]::placeholder {
+ color: var(--fallback-bc,oklch(var(--bc)/var(--tw-placeholder-opacity)));
+ --tw-placeholder-opacity: 0.2;
+}
+
+.select-multiple,
+ .select[multiple],
+ .select[size].select:not([size="1"]) {
+ background-image: none;
+ padding-right: 1rem;
+}
+
+[dir="rtl"] .select {
+ background-position: calc(0% + 12px) calc(1px + 50%),
+ calc(0% + 16px) calc(1px + 50%);
+}
+
@keyframes skeleton {
from {
background-position: 150%;
@@ -2349,36 +2351,80 @@ details.collapse summary::-webkit-details-marker {
margin: 0px;
}
-.m-3 {
- margin: 0.75rem;
-}
-
.mx-auto {
margin-left: auto;
margin-right: auto;
}
-.my-2 {
- margin-top: 0.5rem;
- margin-bottom: 0.5rem;
+.my-8 {
+ margin-top: 2rem;
+ margin-bottom: 2rem;
}
.mb-0 {
margin-bottom: 0px;
}
+.mb-1 {
+ margin-bottom: 0.25rem;
+}
+
+.mb-12 {
+ margin-bottom: 3rem;
+}
+
.mb-2 {
margin-bottom: 0.5rem;
}
+.mb-4 {
+ margin-bottom: 1rem;
+}
+
+.mb-6 {
+ margin-bottom: 1.5rem;
+}
+
+.mb-8 {
+ margin-bottom: 2rem;
+}
+
.ml-2 {
margin-left: 0.5rem;
}
+.ml-4 {
+ margin-left: 1rem;
+}
+
+.mt-1 {
+ margin-top: 0.25rem;
+}
+
+.mt-2 {
+ margin-top: 0.5rem;
+}
+
+.mt-4 {
+ margin-top: 1rem;
+}
+
+.mt-6 {
+ margin-top: 1.5rem;
+}
+
+.mt-8 {
+ margin-top: 2rem;
+}
+
.block {
display: block;
}
+.flex {
+ display: flex;
+}
+
.table {
display: table;
}
@@ -2391,25 +2437,291 @@ details.collapse summary::-webkit-details-marker {
display: none;
}
+.h-4 {
+ height: 1rem;
+}
+
.h-auto {
height: auto;
}
+.w-4 {
+ width: 1rem;
+}
+
+.w-full {
+ width: 100%;
+}
+
+.min-w-full {
+ min-width: 100%;
+}
+
+.max-w-2xl {
+ max-width: 42rem;
+}
+
+.list-inside {
+ list-style-position: inside;
+}
+
+.list-disc {
+ list-style-type: disc;
+}
+
+.grid-cols-1 {
+ grid-template-columns: repeat(1, minmax(0, 1fr));
+}
+
+.items-center {
+ align-items: center;
+}
+
+.justify-center {
+ justify-content: center;
+}
+
+.justify-between {
+ justify-content: space-between;
+}
+
+.gap-8 {
+ gap: 2rem;
+}
+
+.space-x-4 > :not([hidden]) ~ :not([hidden]) {
+ --tw-space-x-reverse: 0;
+ margin-right: calc(1rem * var(--tw-space-x-reverse));
+ margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
+}
+
+.space-y-4 > :not([hidden]) ~ :not([hidden]) {
+ --tw-space-y-reverse: 0;
+ margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
+ margin-bottom: calc(1rem * var(--tw-space-y-reverse));
+}
+
+.space-y-6 > :not([hidden]) ~ :not([hidden]) {
+ --tw-space-y-reverse: 0;
+ margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
+ margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
+}
+
+.divide-y > :not([hidden]) ~ :not([hidden]) {
+ --tw-divide-y-reverse: 0;
+ border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
+ border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
+}
+
+.divide-gray-200 > :not([hidden]) ~ :not([hidden]) {
+ --tw-divide-opacity: 1;
+ border-color: rgb(229 231 235 / var(--tw-divide-opacity));
+}
+
+.overflow-hidden {
+ overflow: hidden;
+}
+
+.overflow-x-auto {
+ overflow-x: auto;
+}
+
+.whitespace-nowrap {
+ white-space: nowrap;
+}
+
+.rounded {
+ border-radius: 0.25rem;
+}
+
+.rounded-lg {
+ border-radius: 0.5rem;
+}
+
+.rounded-md {
+ border-radius: 0.375rem;
+}
+
.border {
border-width: 1px;
}
+.border-b {
+ border-bottom-width: 1px;
+}
+
+.border-l-4 {
+ border-left-width: 4px;
+}
+
+.border-t {
+ border-top-width: 1px;
+}
+
+.border-blue-500 {
+ --tw-border-opacity: 1;
+ border-color: rgb(59 130 246 / var(--tw-border-opacity));
+}
+
+.border-gray-200 {
+ --tw-border-opacity: 1;
+ border-color: rgb(229 231 235 / var(--tw-border-opacity));
+}
+
+.border-gray-300 {
+ --tw-border-opacity: 1;
+ border-color: rgb(209 213 219 / var(--tw-border-opacity));
+}
+
+.border-green-500 {
+ --tw-border-opacity: 1;
+ border-color: rgb(34 197 94 / var(--tw-border-opacity));
+}
+
+.border-transparent {
+ border-color: transparent;
+}
+
+.border-yellow-500 {
+ --tw-border-opacity: 1;
+ border-color: rgb(234 179 8 / var(--tw-border-opacity));
+}
+
+.bg-blue-100 {
+ --tw-bg-opacity: 1;
+ background-color: rgb(219 234 254 / var(--tw-bg-opacity));
+}
+
+.bg-blue-50 {
+ --tw-bg-opacity: 1;
+ background-color: rgb(239 246 255 / var(--tw-bg-opacity));
+}
+
.bg-blue-500 {
--tw-bg-opacity: 1;
background-color: rgb(59 130 246 / var(--tw-bg-opacity));
}
-.p-3 {
- padding: 0.75rem;
+.bg-blue-600 {
+ --tw-bg-opacity: 1;
+ background-color: rgb(37 99 235 / var(--tw-bg-opacity));
+}
+
+.bg-gray-100 {
+ --tw-bg-opacity: 1;
+ background-color: rgb(243 244 246 / var(--tw-bg-opacity));
+}
+
+.bg-gray-200 {
+ --tw-bg-opacity: 1;
+ background-color: rgb(229 231 235 / var(--tw-bg-opacity));
+}
+
+.bg-gray-50 {
+ --tw-bg-opacity: 1;
+ background-color: rgb(249 250 251 / var(--tw-bg-opacity));
+}
+
+.bg-indigo-600 {
+ --tw-bg-opacity: 1;
+ background-color: rgb(79 70 229 / var(--tw-bg-opacity));
+}
+
+.bg-white {
+ --tw-bg-opacity: 1;
+ background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}
-.pe-3 {
- padding-inline-end: 0.75rem;
+.bg-yellow-100 {
+ --tw-bg-opacity: 1;
+ background-color: rgb(254 249 195 / var(--tw-bg-opacity));
+}
+
+.p-2 {
+ padding: 0.5rem;
+}
+
+.p-4 {
+ padding: 1rem;
+}
+
+.p-6 {
+ padding: 1.5rem;
+}
+
+.px-2 {
+ padding-left: 0.5rem;
+ padding-right: 0.5rem;
+}
+
+.px-3 {
+ padding-left: 0.75rem;
+ padding-right: 0.75rem;
+}
+
+.px-4 {
+ padding-left: 1rem;
+ padding-right: 1rem;
+}
+
+.px-6 {
+ padding-left: 1.5rem;
+ padding-right: 1.5rem;
+}
+
+.px-8 {
+ padding-left: 2rem;
+ padding-right: 2rem;
+}
+
+.py-1 {
+ padding-top: 0.25rem;
+ padding-bottom: 0.25rem;
+}
+
+.py-2 {
+ padding-top: 0.5rem;
+ padding-bottom: 0.5rem;
+}
+
+.py-3 {
+ padding-top: 0.75rem;
+ padding-bottom: 0.75rem;
+}
+
+.py-4 {
+ padding-top: 1rem;
+ padding-bottom: 1rem;
+}
+
+.py-5 {
+ padding-top: 1.25rem;
+ padding-bottom: 1.25rem;
+}
+
+.py-8 {
+ padding-top: 2rem;
+ padding-bottom: 2rem;
+}
+
+.pb-8 {
+ padding-bottom: 2rem;
+}
+
+.pt-6 {
+ padding-top: 1.5rem;
+}
+
+.text-left {
+ text-align: left;
+}
+
+.text-center {
+ text-align: center;
+}
+
+.text-right {
+ text-align: right;
}
.text-2xl {
@@ -2427,7 +2739,195 @@ details.collapse summary::-webkit-details-marker {
line-height: 2.5rem;
}
+.text-base {
+ font-size: 1rem;
+ line-height: 1.5rem;
+}
+
+.text-lg {
+ font-size: 1.125rem;
+ line-height: 1.75rem;
+}
+
+.text-sm {
+ font-size: 0.875rem;
+ line-height: 1.25rem;
+}
+
+.text-xl {
+ font-size: 1.25rem;
+ line-height: 1.75rem;
+}
+
+.text-xs {
+ font-size: 0.75rem;
+ line-height: 1rem;
+}
+
+.font-bold {
+ font-weight: 700;
+}
+
+.font-medium {
+ font-weight: 500;
+}
+
+.font-semibold {
+ font-weight: 600;
+}
+
+.uppercase {
+ text-transform: uppercase;
+}
+
+.tracking-wider {
+ letter-spacing: 0.05em;
+}
+
+.text-black {
+ --tw-text-opacity: 1;
+ color: rgb(0 0 0 / var(--tw-text-opacity));
+}
+
+.text-blue-600 {
+ --tw-text-opacity: 1;
+ color: rgb(37 99 235 / var(--tw-text-opacity));
+}
+
+.text-gray-500 {
+ --tw-text-opacity: 1;
+ color: rgb(107 114 128 / var(--tw-text-opacity));
+}
+
+.text-gray-600 {
+ --tw-text-opacity: 1;
+ color: rgb(75 85 99 / var(--tw-text-opacity));
+}
+
+.text-gray-700 {
+ --tw-text-opacity: 1;
+ color: rgb(55 65 81 / var(--tw-text-opacity));
+}
+
+.text-gray-900 {
+ --tw-text-opacity: 1;
+ color: rgb(17 24 39 / var(--tw-text-opacity));
+}
+
+.text-red-600 {
+ --tw-text-opacity: 1;
+ color: rgb(220 38 38 / var(--tw-text-opacity));
+}
+
.text-white {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
+}
+
+.shadow {
+ --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+ --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);
+}
+
+.shadow-md {
+ --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+ --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+.shadow-sm {
+ --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+ --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+.hover\:bg-blue-600:hover {
+ --tw-bg-opacity: 1;
+ background-color: rgb(37 99 235 / var(--tw-bg-opacity));
+}
+
+.hover\:bg-blue-700:hover {
+ --tw-bg-opacity: 1;
+ background-color: rgb(29 78 216 / var(--tw-bg-opacity));
+}
+
+.hover\:bg-indigo-700:hover {
+ --tw-bg-opacity: 1;
+ background-color: rgb(67 56 202 / var(--tw-bg-opacity));
+}
+
+.hover\:text-blue-200:hover {
+ --tw-text-opacity: 1;
+ color: rgb(191 219 254 / var(--tw-text-opacity));
+}
+
+.hover\:text-blue-900:hover {
+ --tw-text-opacity: 1;
+ color: rgb(30 58 138 / var(--tw-text-opacity));
+}
+
+.hover\:text-gray-800:hover {
+ --tw-text-opacity: 1;
+ color: rgb(31 41 55 / var(--tw-text-opacity));
+}
+
+.hover\:underline:hover {
+ text-decoration-line: underline;
+}
+
+.focus\:border-blue-500:focus {
+ --tw-border-opacity: 1;
+ border-color: rgb(59 130 246 / var(--tw-border-opacity));
+}
+
+.focus\:outline-none:focus {
+ outline: 2px solid transparent;
+ outline-offset: 2px;
+}
+
+.focus\:ring-2:focus {
+ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+ box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
+
+.focus\:ring-blue-500:focus {
+ --tw-ring-opacity: 1;
+ --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity));
+}
+
+.focus\:ring-indigo-500:focus {
+ --tw-ring-opacity: 1;
+ --tw-ring-color: rgb(99 102 241 / var(--tw-ring-opacity));
+}
+
+.focus\:ring-offset-2:focus {
+ --tw-ring-offset-width: 2px;
+}
+
+@media (min-width: 640px) {
+ .sm\:rounded-lg {
+ border-radius: 0.5rem;
+ }
+
+ .sm\:p-6 {
+ padding: 1.5rem;
+ }
+
+ .sm\:px-6 {
+ padding-left: 1.5rem;
+ padding-right: 1.5rem;
+ }
+
+ .sm\:text-sm {
+ font-size: 0.875rem;
+ line-height: 1.25rem;
+ }
+}
+
+@media (min-width: 768px) {
+ .md\:grid-cols-2 {
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+ }
} \ No newline at end of file
diff --git a/core/templates/core/base.html b/core/templates/core/base.html
index 65c1842..682395f 100644
--- a/core/templates/core/base.html
+++ b/core/templates/core/base.html
@@ -27,28 +27,26 @@
</head>
<body>
{% block navbar %}
-<div class="navbar bg-blue-500">
- <!-- <a href="/" class="w3-bar-item w3-button w3-dark-gray w3-xxlarge"><i class="fa fa-home"></i></a> -->
- <a href="#" class="text-3xl pe-3">Home</a>
- <a href="{% url 'engagements:home' %}" class="text-3xl link pe-3">Engagement Plans</a>
- <a href="{% url 'engagements:regulatedentities' %}" class="text-3xl link pe-3">Regulated Entities</a>
- <a href="#" class="text-3xl link pe-3">Reporting</a>
- <a href="#" class="text-3xl link pe-3">Dashboards</a>
- <div class="dropdown">
- <button class="w3-button w3-large">Teams</button>
- <div class="w3-dropdown-content w3-bar-block w3-card-4">
- <a href="#" class="w3-bar-item w3-button">Submarines and Propulsion</a>
- <a href="#" class="w3-bar-item w3-button">Transport</a>
+<nav class="bg-blue-600 p-4">
+ <div class="container mx-auto flex items-center justify-between">
+ <div class="flex items-center space-x-4">
+ <a href="#" class="text-white text-xl font-semibold">Home</a>
+ <a href="{% url 'engagements:home' %}" class="text-white hover:text-blue-200">Engagement Plans</a>
+ <a href="{% url 'engagements:regulatedentities' %}" class="text-white hover:text-blue-200">Regulated Entities</a>
+ <a href="#" class="text-white hover:text-blue-200">Reporting</a>
+ <a href="#" class="text-white hover:text-blue-200">Dashboards</a>
+ </div>
+ <div class="flex items-center space-x-4">
+ {% if request.user.is_authenticated %}
+ <span class="text-white">{{ user }}</span>
+ <a href="{% url 'logout' %}" class="text-white hover:text-blue-200">Log Out</a>
+ {% else %}
+ <a href="{% url 'login' %}" class="text-white hover:text-blue-200">Log In</a>
+ {% endif %}
+ <a href="#" class="text-white hover:text-blue-200">Help</a>
</div>
</div>
- {% if request.user.is_authenticated %}
- <a class="w3-bar-item w3-right w3-button w3-large" href="#">{{ user }}</a>
- <a class="w3-bar-item w3-right w3-button w3-large" href="{% url 'logout' %}">Log Out</a>
- {% else %}
- <a class="w3-bar-item w3-right w3-button w3-large" href="{% url 'login' %}">Log In</a>
- {% endif %}
- <a href="#" class="w3-right w3-bar-item w3-button w3-large">Help</a>
-</div>
+</nav>
{% endblock navbar %}
<div class="container mx-auto">
diff --git a/core/templates/core/index.html b/core/templates/core/index.html
index a2c9307..ae25fbd 100644
--- a/core/templates/core/index.html
+++ b/core/templates/core/index.html
@@ -4,101 +4,103 @@
{% block title %}DefNucSyR Engagement Database (DED) - Information Management for DefNucSyR{% endblock title %}
{% block content %}
+ <div class="container mx-auto px-4 py-8">
+ <h1 class="text-4xl font-bold mb-8">DED - Information Management for DefNucSyR</h1>
- <div class="bg-blue-500 text-white p-3 my-2">
- This is a Tailwind styled div.
- </div>
-
- <div class="container mx-auto">
- <h1 class="text-4xl">DED - Information Management for DefNucSyR</h1>
- <div class="w3-panel w3-leftbar w3-sand w3-xlarge w3-serif w3-display-container">
- <span onclick="this.parentElement.style.display='none'"
- class="w3-button w3-display-topright">&times;</span>
- <h3>Quote of the day</h3>
- <p>This is a placeholder for some interesting test. Use of lose.</p>
+ <div class="bg-yellow-100 border-l-4 border-yellow-500 p-4 mb-8">
+ <div class="flex justify-between items-center">
+ <h3 class="text-xl font-semibold">Quote of the day</h3>
+ <button class="text-gray-600 hover:text-gray-800"
+ onclick="this.parentElement.parentElement.style.display='none'">&times;
+ </button>
+ </div>
+ <p class="mt-2">This is a placeholder for some interesting test. Use or lose.</p>
</div>
- <p>{% lorem %}</p>
+ <p class="mb-8">{% lorem %}</p>
- <div class="container">
- <header class="text-3xl">
- <h3>Submarines and Propulsion</h3>
- </header>
- <div class="w3-container">
-
- <h3 class="text-2xl">Assessments & Inspections:</h3>
- <table class="table table-zebra">
- <tr>
- <th>Start Date</th>
- <th>End Date</th>
- <th>Event</th>
- <th>Site</th>
- <th>Inspectors</th>
+ <div class="mb-12">
+ <div class="bg-white shadow-md rounded-lg overflow-hidden">
+ <header class="bg-blue-100 p-4">
+ <h2 class="text-3xl font-bold">Submarines and Propulsion</h2>
+ </header>
+ <div class="p-4">
+ <h3 class="text-2xl font-semibold mb-4">Assessments & Inspections:</h3>
+ <table class="w-full mb-4">
+ <thead>
+ <tr class="bg-gray-200">
+ <th class="p-2 text-left">Start Date</th>
+ <th class="p-2 text-left">End Date</th>
+ <th class="p-2 text-left">Event</th>
+ <th class="p-2 text-left">Site</th>
+ <th class="p-2 text-left">Inspectors</th>
</tr>
+ </thead>
+ <tbody>
{% for s in subs_regulatory %}
- <tr>
- <td>{{ s.proposed_start_date|date:'j M y' }}</td>
- <td>{{ s.proposed_end_date|date:'j M y' }}</td>
- <td><a href="{% url 'engagements:engagement_detail' s.pk %}">{{ s }}</a></td>
- <td>{{ s.external_party }}</td>
- <td>
- {% if s.officers.all %}
- {{ s.officers.all|commalist }}
- {% endif %}
- </td>
- </tr>
+ <tr class="{% cycle 'bg-white' 'bg-gray-100' %}">
+ <td class="p-2">{{ s.proposed_start_date|date:'j M y' }}</td>
+ <td class="p-2">{{ s.proposed_end_date|date:'j M y' }}</td>
+ <td class="p-2"><a href="{% url 'engagements:engagement_detail' s.pk %}" class="text-blue-600 hover:underline">{{ s }}</a></td>
+ <td class="p-2">{{ s.external_party }}</td>
+ <td class="p-2">
+ {% if s.officers.all %}
+ {{ s.officers.all|commalist }}
+ {% endif %}
+ </td>
+ </tr>
{% endfor %}
- </table>
- <div class="w3-cell-row">
- <div class="w3-cell w3-left">
- <a href="{% url 'engagements:create' 'reg' %}" class="w3-button w3-round w3-blue">Add New</a>
- </div>
- <div class="w3-cell w3-right">
- <small>See <a href="#">Enagements</a> for full list</small>
- </div>
- </div>
- <hr>
- <h4>Non-regulatory events:</h4>
- <table class="table table-zebra">
- <tr>
- <th>Start Date</th>
- <th>End Date</th>
- <th>Summary</th>
+ </tbody>
+ </table>
+
+ <div class="flex justify-between items-center mb-8">
+ <a href="{% url 'engagements:create' 'reg' %}" class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded">Add New</a>
+ <small>See <a href="#" class="text-blue-600 hover:underline">Engagements</a> for full list</small>
+ </div>
+
+ <div class="border-b border-gray-300 my-8"></div>
+
+ <h4 class="text-xl font-semibold mb-4">Non-regulatory events:</h4>
+ <table class="w-full mb-4">
+ <thead>
+ <tr class="bg-gray-200">
+ <th class="p-2 text-left">Start Date</th>
+ <th class="p-2 text-left">End Date</th>
+ <th class="p-2 text-left">Summary</th>
</tr>
+ </thead>
+ <tbody>
{% if not subs %}
- <tr>
- <td>None</td>
- <td>None</td>
- <td>None</td>
- </tr>
+ <tr>
+ <td class="p-2" colspan="3">No events found</td>
+ </tr>
{% else %}
{% for s in subs %}
- <tr>
- <td>{{ s.proposed_start_date|date:'j M y' }}</td>
- <td>{{ s.proposed_end_date|date:'j M y' }}</td>
- <td><a href="#">{{ s }}</a></td>
- </tr>
+ <tr class="{% cycle 'bg-white' 'bg-gray-100' %}">
+ <td class="p-2">{{ s.proposed_start_date|date:'j M y' }}</td>
+ <td class="p-2">{{ s.proposed_end_date|date:'j M y' }}</td>
+ <td class="p-2"><a href="#" class="text-blue-600 hover:underline">{{ s }}</a></td>
+ </tr>
{% endfor %}
{% endif %}
- </table>
- <div>
- <button class="w3-button w3-round w3-blue">Add New</button>
- </div>
-
- <p>{% lorem %}</p>
+ </tbody>
+ </table>
+ <div class="mt-4">
+ <button class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded">Add New</button>
</div>
</div>
+ </div>
+</div>
+
- <div class="w3-card-2 w3-margin-top">
- <header class="w3-container w3-light-blue">
- <h3>Transport</h3>
+ <div class="bg-white shadow-md rounded-lg overflow-hidden">
+ <header class="bg-blue-100 p-4">
+ <h3 class="text-2xl font-bold">Transport</h3>
</header>
- <div class="w3-container">
+ <div class="p-4">
<p>{% lorem %}</p>
</div>
</div>
-
</div>
-
{% endblock content %}
generated by cgit v1.2.3 (git 2.25.1) at 2025-01-08 20:05:50 +0000