diff --git a/index.html b/index.html
index 15a794d..352e599 100644
--- a/index.html
+++ b/index.html
@@ -4,7 +4,7 @@
- APKT
+ Executive Information System
diff --git a/src/assets/css/style.css b/src/assets/css/style.css
index 46aa247..b0ad702 100644
--- a/src/assets/css/style.css
+++ b/src/assets/css/style.css
@@ -16,7 +16,7 @@
/* 2 */
border-style: solid;
/* 2 */
- border-color: #BCC4C5;
+ border-color: #e5e7eb;
/* 2 */
}
@@ -369,7 +369,7 @@ textarea {
input::-moz-placeholder, textarea::-moz-placeholder {
opacity: 1;
/* 1 */
- color: #8B989A;
+ color: #9ca3af;
/* 2 */
}
@@ -377,7 +377,7 @@ input::placeholder,
textarea::placeholder {
opacity: 1;
/* 1 */
- color: #8B989A;
+ color: #9ca3af;
/* 2 */
}
@@ -439,7 +439,7 @@ video {
-moz-appearance: none;
appearance: none;
background-color: #fff;
- border-color: #6E7E81;
+ border-color: #6b7280;
border-width: 1px;
border-radius: 0px;
padding-top: 0.5rem;
@@ -465,12 +465,12 @@ video {
}
input::-moz-placeholder, textarea::-moz-placeholder {
- color: #6E7E81;
+ color: #6b7280;
opacity: 1;
}
input::placeholder,textarea::placeholder {
- color: #6E7E81;
+ color: #6b7280;
opacity: 1;
}
@@ -493,7 +493,7 @@ input::placeholder,textarea::placeholder {
}
select {
- background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236E7E81' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
+ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
background-position: right 0.5rem center;
background-repeat: no-repeat;
background-size: 1.5em 1.5em;
@@ -530,7 +530,7 @@ select {
width: 1rem;
color: #2563eb;
background-color: #fff;
- border-color: #6E7E81;
+ border-color: #6b7280;
border-width: 1px;
--tw-shadow: 0 0 #0000;
}
@@ -1433,12 +1433,12 @@ select {
.divide-gray-50 > :not([hidden]) ~ :not([hidden]) {
--tw-divide-opacity: 1;
- border-color: rgb(241 242 242 / var(--tw-divide-opacity));
+ border-color: rgb(249 250 251 / var(--tw-divide-opacity));
}
.divide-gray-500 > :not([hidden]) ~ :not([hidden]) {
--tw-divide-opacity: 1;
- border-color: rgb(110 126 129 / var(--tw-divide-opacity));
+ border-color: rgb(107 114 128 / var(--tw-divide-opacity));
}
.divide-opacity-10 > :not([hidden]) ~ :not([hidden]) {
@@ -1553,22 +1553,22 @@ select {
.border-gray-100 {
--tw-border-opacity: 1;
- border-color: rgb(210 215 216 / var(--tw-border-opacity));
+ border-color: rgb(243 244 246 / var(--tw-border-opacity));
}
.border-gray-200 {
--tw-border-opacity: 1;
- border-color: rgb(188 196 197 / var(--tw-border-opacity));
+ border-color: rgb(229 231 235 / var(--tw-border-opacity));
}
.border-gray-300 {
--tw-border-opacity: 1;
- border-color: rgb(158 169 171 / var(--tw-border-opacity));
+ border-color: rgb(209 213 219 / var(--tw-border-opacity));
}
.border-gray-50 {
--tw-border-opacity: 1;
- border-color: rgb(241 242 242 / var(--tw-border-opacity));
+ border-color: rgb(249 250 251 / var(--tw-border-opacity));
}
.border-transparent {
@@ -1592,32 +1592,32 @@ select {
.bg-gray-100 {
--tw-bg-opacity: 1;
- background-color: rgb(210 215 216 / var(--tw-bg-opacity));
+ background-color: rgb(243 244 246 / var(--tw-bg-opacity));
}
.bg-gray-300 {
--tw-bg-opacity: 1;
- background-color: rgb(158 169 171 / var(--tw-bg-opacity));
+ background-color: rgb(209 213 219 / var(--tw-bg-opacity));
}
.bg-gray-50 {
--tw-bg-opacity: 1;
- background-color: rgb(241 242 242 / var(--tw-bg-opacity));
+ background-color: rgb(249 250 251 / var(--tw-bg-opacity));
}
.bg-gray-500 {
--tw-bg-opacity: 1;
- background-color: rgb(110 126 129 / var(--tw-bg-opacity));
+ background-color: rgb(107 114 128 / var(--tw-bg-opacity));
}
.bg-gray-600 {
--tw-bg-opacity: 1;
- background-color: rgb(100 115 117 / var(--tw-bg-opacity));
+ background-color: rgb(75 85 99 / var(--tw-bg-opacity));
}
.bg-gray-900 {
--tw-bg-opacity: 1;
- background-color: rgb(46 53 54 / var(--tw-bg-opacity));
+ background-color: rgb(17 24 39 / var(--tw-bg-opacity));
}
.bg-green-100 {
@@ -1652,32 +1652,32 @@ select {
.bg-primary-100 {
--tw-bg-opacity: 1;
- background-color: rgb(182 226 234 / var(--tw-bg-opacity));
+ background-color: rgb(205 222 227 / var(--tw-bg-opacity));
}
.bg-primary-400 {
--tw-bg-opacity: 1;
- background-color: rgb(67 181 200 / var(--tw-bg-opacity));
+ background-color: rgb(53 124 141 / var(--tw-bg-opacity));
}
.bg-primary-50 {
--tw-bg-opacity: 1;
- background-color: rgb(232 246 248 / var(--tw-bg-opacity));
+ background-color: rgb(230 239 241 / var(--tw-bg-opacity));
}
.bg-primary-500 {
--tw-bg-opacity: 1;
- background-color: rgb(20 162 186 / var(--tw-bg-opacity));
+ background-color: rgb(3 91 113 / var(--tw-bg-opacity));
}
.bg-red-100 {
--tw-bg-opacity: 1;
- background-color: rgb(254 226 226 / var(--tw-bg-opacity));
+ background-color: rgb(255 204 204 / var(--tw-bg-opacity));
}
.bg-red-600 {
--tw-bg-opacity: 1;
- background-color: rgb(220 38 38 / var(--tw-bg-opacity));
+ background-color: rgb(204 0 0 / var(--tw-bg-opacity));
}
.bg-transparent {
@@ -1686,17 +1686,17 @@ select {
.bg-vtd-primary-100 {
--tw-bg-opacity: 1;
- background-color: rgb(182 226 234 / var(--tw-bg-opacity));
+ background-color: rgb(205 222 227 / var(--tw-bg-opacity));
}
.bg-vtd-primary-500 {
--tw-bg-opacity: 1;
- background-color: rgb(20 162 186 / var(--tw-bg-opacity));
+ background-color: rgb(3 91 113 / var(--tw-bg-opacity));
}
.bg-vtd-primary-600 {
--tw-bg-opacity: 1;
- background-color: rgb(18 147 169 / var(--tw-bg-opacity));
+ background-color: rgb(2 73 90 / var(--tw-bg-opacity));
}
.bg-white {
@@ -2059,32 +2059,32 @@ select {
.text-gray-300 {
--tw-text-opacity: 1;
- color: rgb(158 169 171 / var(--tw-text-opacity));
+ color: rgb(209 213 219 / var(--tw-text-opacity));
}
.text-gray-400 {
--tw-text-opacity: 1;
- color: rgb(139 152 154 / var(--tw-text-opacity));
+ color: rgb(156 163 175 / var(--tw-text-opacity));
}
.text-gray-500 {
--tw-text-opacity: 1;
- color: rgb(110 126 129 / var(--tw-text-opacity));
+ color: rgb(107 114 128 / var(--tw-text-opacity));
}
.text-gray-600 {
--tw-text-opacity: 1;
- color: rgb(100 115 117 / var(--tw-text-opacity));
+ color: rgb(75 85 99 / var(--tw-text-opacity));
}
.text-gray-700 {
--tw-text-opacity: 1;
- color: rgb(78 89 92 / var(--tw-text-opacity));
+ color: rgb(55 65 81 / var(--tw-text-opacity));
}
.text-gray-900 {
--tw-text-opacity: 1;
- color: rgb(46 53 54 / var(--tw-text-opacity));
+ color: rgb(17 24 39 / var(--tw-text-opacity));
}
.text-green-400 {
@@ -2114,22 +2114,22 @@ select {
.text-primary-500 {
--tw-text-opacity: 1;
- color: rgb(20 162 186 / var(--tw-text-opacity));
+ color: rgb(3 91 113 / var(--tw-text-opacity));
}
.text-primary-900 {
--tw-text-opacity: 1;
- color: rgb(11 89 102 / var(--tw-text-opacity));
+ color: rgb(1 18 23 / var(--tw-text-opacity));
}
.text-red-400 {
--tw-text-opacity: 1;
- color: rgb(248 113 113 / var(--tw-text-opacity));
+ color: rgb(255 51 51 / var(--tw-text-opacity));
}
.text-red-600 {
--tw-text-opacity: 1;
- color: rgb(220 38 38 / var(--tw-text-opacity));
+ color: rgb(204 0 0 / var(--tw-text-opacity));
}
.text-slate-600 {
@@ -2144,12 +2144,12 @@ select {
.text-vtd-primary-500 {
--tw-text-opacity: 1;
- color: rgb(20 162 186 / var(--tw-text-opacity));
+ color: rgb(3 91 113 / var(--tw-text-opacity));
}
.text-vtd-primary-600 {
--tw-text-opacity: 1;
- color: rgb(18 147 169 / var(--tw-text-opacity));
+ color: rgb(2 73 90 / var(--tw-text-opacity));
}
.text-white {
@@ -2167,12 +2167,12 @@ select {
.placeholder-gray-500::-moz-placeholder {
--tw-placeholder-opacity: 1;
- color: rgb(110 126 129 / var(--tw-placeholder-opacity));
+ color: rgb(107 114 128 / var(--tw-placeholder-opacity));
}
.placeholder-gray-500::placeholder {
--tw-placeholder-opacity: 1;
- color: rgb(110 126 129 / var(--tw-placeholder-opacity));
+ color: rgb(107 114 128 / var(--tw-placeholder-opacity));
}
.opacity-0 {
@@ -2222,7 +2222,7 @@ select {
}
.shadow-gray-50 {
- --tw-shadow-color: #F1F2F2;
+ --tw-shadow-color: #f9fafb;
--tw-shadow: var(--tw-shadow-colored);
}
@@ -2259,7 +2259,7 @@ select {
.ring-gray-300 {
--tw-ring-opacity: 1;
- --tw-ring-color: rgb(158 169 171 / var(--tw-ring-opacity));
+ --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity));
}
.ring-transparent {
@@ -2383,22 +2383,22 @@ select {
.placeholder\:text-gray-400::-moz-placeholder {
--tw-text-opacity: 1;
- color: rgb(139 152 154 / var(--tw-text-opacity));
+ color: rgb(156 163 175 / var(--tw-text-opacity));
}
.placeholder\:text-gray-400::placeholder {
--tw-text-opacity: 1;
- color: rgb(139 152 154 / var(--tw-text-opacity));
+ color: rgb(156 163 175 / var(--tw-text-opacity));
}
.placeholder\:text-gray-600::-moz-placeholder {
--tw-text-opacity: 1;
- color: rgb(100 115 117 / var(--tw-text-opacity));
+ color: rgb(75 85 99 / var(--tw-text-opacity));
}
.placeholder\:text-gray-600::placeholder {
--tw-text-opacity: 1;
- color: rgb(100 115 117 / var(--tw-text-opacity));
+ color: rgb(75 85 99 / var(--tw-text-opacity));
}
.hover\:overflow-y-auto:hover {
@@ -2412,12 +2412,12 @@ select {
.hover\:bg-gray-200:hover {
--tw-bg-opacity: 1;
- background-color: rgb(188 196 197 / var(--tw-bg-opacity));
+ background-color: rgb(229 231 235 / var(--tw-bg-opacity));
}
.hover\:bg-gray-50:hover {
--tw-bg-opacity: 1;
- background-color: rgb(241 242 242 / var(--tw-bg-opacity));
+ background-color: rgb(249 250 251 / var(--tw-bg-opacity));
}
.hover\:bg-indigo-500:hover {
@@ -2437,42 +2437,42 @@ select {
.hover\:bg-primary-100:hover {
--tw-bg-opacity: 1;
- background-color: rgb(182 226 234 / var(--tw-bg-opacity));
+ background-color: rgb(205 222 227 / var(--tw-bg-opacity));
}
.hover\:bg-red-500:hover {
--tw-bg-opacity: 1;
- background-color: rgb(239 68 68 / var(--tw-bg-opacity));
+ background-color: rgb(255 0 0 / var(--tw-bg-opacity));
}
.hover\:bg-vtd-primary-700:hover {
--tw-bg-opacity: 1;
- background-color: rgb(14 115 132 / var(--tw-bg-opacity));
+ background-color: rgb(2 73 90 / var(--tw-bg-opacity));
}
.hover\:text-gray-500:hover {
--tw-text-opacity: 1;
- color: rgb(110 126 129 / var(--tw-text-opacity));
+ color: rgb(107 114 128 / var(--tw-text-opacity));
}
.hover\:text-gray-700:hover {
--tw-text-opacity: 1;
- color: rgb(78 89 92 / var(--tw-text-opacity));
+ color: rgb(55 65 81 / var(--tw-text-opacity));
}
.hover\:text-gray-900:hover {
--tw-text-opacity: 1;
- color: rgb(46 53 54 / var(--tw-text-opacity));
+ color: rgb(17 24 39 / var(--tw-text-opacity));
}
.hover\:text-primary-500:hover {
--tw-text-opacity: 1;
- color: rgb(20 162 186 / var(--tw-text-opacity));
+ color: rgb(3 91 113 / var(--tw-text-opacity));
}
.hover\:text-vtd-primary-700:hover {
--tw-text-opacity: 1;
- color: rgb(14 115 132 / var(--tw-text-opacity));
+ color: rgb(2 73 90 / var(--tw-text-opacity));
}
.focus\:border-0:focus {
@@ -2481,7 +2481,7 @@ select {
.focus\:border-gray-100:focus {
--tw-border-opacity: 1;
- border-color: rgb(210 215 216 / var(--tw-border-opacity));
+ border-color: rgb(243 244 246 / var(--tw-border-opacity));
}
.focus\:border-transparent:focus {
@@ -2490,22 +2490,22 @@ select {
.focus\:border-vtd-primary-300:focus {
--tw-border-opacity: 1;
- border-color: rgb(98 193 209 / var(--tw-border-opacity));
+ border-color: rgb(104 157 170 / var(--tw-border-opacity));
}
.focus\:bg-vtd-primary-50:focus {
--tw-bg-opacity: 1;
- background-color: rgb(232 246 248 / var(--tw-bg-opacity));
+ background-color: rgb(230 239 241 / var(--tw-bg-opacity));
}
.focus\:text-gray-500:focus {
--tw-text-opacity: 1;
- color: rgb(110 126 129 / var(--tw-text-opacity));
+ color: rgb(107 114 128 / var(--tw-text-opacity));
}
.focus\:text-vtd-primary-600:focus {
--tw-text-opacity: 1;
- color: rgb(18 147 169 / var(--tw-text-opacity));
+ color: rgb(2 73 90 / var(--tw-text-opacity));
}
.focus\:outline-none:focus {
@@ -2551,7 +2551,7 @@ select {
.focus\:ring-vtd-primary-500:focus {
--tw-ring-opacity: 1;
- --tw-ring-color: rgb(20 162 186 / var(--tw-ring-opacity));
+ --tw-ring-color: rgb(3 91 113 / var(--tw-ring-opacity));
}
.focus\:ring-white:focus {
@@ -2589,27 +2589,27 @@ select {
.disabled\:bg-primary-400:disabled {
--tw-bg-opacity: 1;
- background-color: rgb(67 181 200 / var(--tw-bg-opacity));
+ background-color: rgb(53 124 141 / var(--tw-bg-opacity));
}
.group:hover .group-hover\:bg-primary-100 {
--tw-bg-opacity: 1;
- background-color: rgb(182 226 234 / var(--tw-bg-opacity));
+ background-color: rgb(205 222 227 / var(--tw-bg-opacity));
}
.group:hover .group-hover\:text-gray-500 {
--tw-text-opacity: 1;
- color: rgb(110 126 129 / var(--tw-text-opacity));
+ color: rgb(107 114 128 / var(--tw-text-opacity));
}
.group:hover .group-hover\:text-gray-700 {
--tw-text-opacity: 1;
- color: rgb(78 89 92 / var(--tw-text-opacity));
+ color: rgb(55 65 81 / var(--tw-text-opacity));
}
.group:hover .group-hover\:text-gray-900 {
--tw-text-opacity: 1;
- color: rgb(46 53 54 / var(--tw-text-opacity));
+ color: rgb(17 24 39 / var(--tw-text-opacity));
}
@media (prefers-color-scheme: dark) {
@@ -2619,7 +2619,7 @@ select {
.dark\:text-vtd-primary-400 {
--tw-text-opacity: 1;
- color: rgb(11 89 102 / var(--tw-text-opacity));
+ color: rgb(53 124 141 / var(--tw-text-opacity));
}
.dark\:text-opacity-70 {
@@ -2628,12 +2628,12 @@ select {
.dark\:hover\:text-vtd-primary-300:hover {
--tw-text-opacity: 1;
- color: rgb(98 193 209 / var(--tw-text-opacity));
+ color: rgb(104 157 170 / var(--tw-text-opacity));
}
.dark\:focus\:border-vtd-primary-500:focus {
--tw-border-opacity: 1;
- border-color: rgb(20 162 186 / var(--tw-border-opacity));
+ border-color: rgb(3 91 113 / var(--tw-border-opacity));
}
.dark\:focus\:bg-opacity-50:focus {
@@ -2642,7 +2642,7 @@ select {
.dark\:focus\:text-vtd-primary-300:focus {
--tw-text-opacity: 1;
- color: rgb(98 193 209 / var(--tw-text-opacity));
+ color: rgb(104 157 170 / var(--tw-text-opacity));
}
.dark\:focus\:ring-opacity-20:focus {
diff --git a/src/assets/images/pln-with-text.png b/src/assets/images/pln-with-text.png
index 6626973..8505a8d 100644
Binary files a/src/assets/images/pln-with-text.png and b/src/assets/images/pln-with-text.png differ
diff --git a/tailwind.config.js b/tailwind.config.js
index 9fbeed5..cf4fde5 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -21,57 +21,80 @@ export default {
},
colors: {
"vtd-primary": {
- '50': '#E8F6F8',
- '100': '#B6E2EA',
- '200': '#93D4DF',
- '300': '#62C1D1',
- '400': '#0B5966', //#43B5C8
- '500': '#14A2BA',
- '600': '#1293A9',
- '700': '#0E7384',
- '800': '#0B5966',
- '900': '#0B5966',
- }, // Light mode Datepicker color
- // "vtd-secondary": colors.gray, // Dark mode Datepicker color
+ '50': '#e6eff1',
+ '100': '#cddee3',
+ '200': '#9abdc6',
+ '300': '#689daa',
+ '400': '#357c8d',
+ '500': '#035b71',
+ '600': '#02495a',
+ '700': '#02495a',
+ '800': '#01242d',
+ '900': '#011217',
+ },
'layout': '#F3F7F9',
'dark': '#151617',
'aside': '#2E3536',
'primary': {
- '50': '#E8F6F8',
- '100': '#B6E2EA',
- '200': '#93D4DF',
- '300': '#62C1D1',
- '400': '#43B5C8',
- '500': '#14A2BA',
- '600': '#1293A9',
- '700': '#0E7384',
- '800': '#0B5966',
- '900': '#0B5966',
+ '50': '#e6eff1',
+ '100': '#cddee3',
+ '200': '#9abdc6',
+ '300': '#689daa',
+ '400': '#357c8d',
+ '500': '#035b71',
+ '600': '#02495a',
+ '700': '#02495a',
+ '800': '#01242d',
+ '900': '#011217',
},
- 'accent': {
- '50': '#FCFAE8',
- '100': '#F5EFB6',
- '200': '#F0E893',
- '300': '#E9DD62',
- '400': '#E5D643',
- '500': '#DECC14',
- '600': '#CABA12',
- '700': '#9E910E',
- '800': '#7A700B',
- '900': '#5D5608',
+ 'secondary': {
+ '50': '#e5eef7',
+ '100': '#ccebef',
+ '200': '#99d7df',
+ '300': '#66c2d0',
+ '400': '#33aec0',
+ '500': '#00a2b9',
+ '600': '#007b8d',
+ '700': '#005c6a',
+ '800': '#003e46',
+ '900': '#001f23',
+ },
+ 'red': {
+ '50': '#ffe5e5',
+ '100': '#ffcccc',
+ '200': '#ff9999',
+ '300': '#ff6666',
+ '400': '#ff3333',
+ '500': '#ff0000',
+ '600': '#cc0000',
+ '700': '#990000',
+ '800': '#660000',
+ '900': '#330000',
+ },
+ 'yellow': {
+ '50': '#ffffe5',
+ '100': '#ffffcc',
+ '200': '#ffff99',
+ '300': '#ffff66',
+ '400': '#ffff33',
+ '500': '#ffff00',
+ '600': '#cccc00',
+ '700': '#999900',
+ '800': '#666600',
+ '900': '#333300',
},
'gray': {
- '50': '#F1F2F2',
- '100': '#D2D7D8',
- '200': '#BCC4C5',
- '300': '#9EA9AB',
- '400': '#8B989A',
- '500': '#6E7E81',
- '600': '#647375',
- '700': '#4E595C',
- '800': '#3D4547',
- '900': '#2E3536',
- }
+ '50': '#f9fafb',
+ '100': '#f3f4f6',
+ '200': '#e5e7eb',
+ '300': '#d1d5db',
+ '400': '#9ca3af',
+ '500': '#6b7280',
+ '600': '#4b5563',
+ '700': '#374151',
+ '800': '#1f2937',
+ '900': '#111827',
+ },
},
},
},