dyzulk/trustlab-api
1
0
Fork 0
mirror of https://github.com/dyzulk/trustlab-api.git synced 2026-01-26 05:15:35 +07:00
Code Issues Packages Projects Releases Wiki Activity

feat(ui): port error pages, standardize fonts to Geist, and add health status page

Browse Source
This commit is contained in:
dyzulk
2025-12-31 10:50:50 +07:00
parent 37948c4682
commit dca9ad1799
26 changed files with 1596 additions and 277 deletions
Download Patch File Download Diff File Expand all files Collapse all files

888
resources/css/app.css
View File

@@ -1,11 +1,893 @@
@import 'prismjs/themes/prism.min.css';
@import 'tailwindcss';
@plugin '@tailwindcss/typography';
@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@source '../../storage/framework/views/*.php';
@source '../**/*.blade.php';
@source '../**/*.js';
@theme {
--font-sans: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
'Segoe UI Symbol', 'Noto Color Emoji';
@custom-variant dark (&:is(.dark *));
@font-face {
font-family: 'Geist Sans';
src: url('/fonts/Geist-Variable.woff2') format('woff2');
font-weight: 100 900;
font-display: swap;
font-style: normal;
}
@font-face {
font-family: 'Geist Mono';
src: url('/fonts/GeistMono-Variable.woff2') format('woff2');
font-weight: 100 900;
font-display: swap;
font-style: normal;
}
@theme {
--font-*: initial;
--font-sans: 'Geist Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
--font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
--breakpoint-*: initial;
--breakpoint-2xsm: 375px;
--breakpoint-xsm: 425px;
--breakpoint-3xl: 2000px;
--breakpoint-sm: 640px;
--breakpoint-md: 768px;
--breakpoint-lg: 1024px;
--breakpoint-xl: 1280px;
--breakpoint-2xl: 1536px;
--text-title-2xl: 72px;
--text-title-2xl--line-height: 90px;
--text-title-xl: 60px;
--text-title-xl--line-height: 72px;
--text-title-lg: 48px;
--text-title-lg--line-height: 60px;
--text-title-md: 36px;
--text-title-md--line-height: 44px;
--text-title-sm: 30px;
--text-title-sm--line-height: 38px;
--text-theme-xl: 20px;
--text-theme-xl--line-height: 30px;
--text-theme-sm: 14px;
--text-theme-sm--line-height: 20px;
--text-theme-xs: 12px;
--text-theme-xs--line-height: 18px;
--color-current: currentColor;
--color-transparent: transparent;
--color-white: #ffffff;
--color-black: #101828;
--color-brand-25: #f2f7ff;
--color-brand-50: #ecf3ff;
--color-brand-100: #dde9ff;
--color-brand-200: #c2d6ff;
--color-brand-300: #9cb9ff;
--color-brand-400: #7592ff;
--color-brand-500: #465fff;
--color-brand-600: #3641f5;
--color-brand-700: #2a31d8;
--color-brand-800: #252dae;
--color-brand-900: #262e89;
--color-brand-950: #161950;
--color-blue-light-25: #f5fbff;
--color-blue-light-50: #f0f9ff;
--color-blue-light-100: #e0f2fe;
--color-blue-light-200: #b9e6fe;
--color-blue-light-300: #7cd4fd;
--color-blue-light-400: #36bffa;
--color-blue-light-500: #0ba5ec;
--color-blue-light-600: #0086c9;
--color-blue-light-700: #026aa2;
--color-blue-light-800: #065986;
--color-blue-light-900: #0b4a6f;
--color-blue-light-950: #062c41;
--color-gray-25: #fcfcfd;
--color-gray-50: #f9fafb;
--color-gray-100: #f2f4f7;
--color-gray-200: #e4e7ec;
--color-gray-300: #d0d5dd;
--color-gray-400: #98a2b3;
--color-gray-500: #667085;
--color-gray-600: #475467;
--color-gray-700: #344054;
--color-gray-800: #1d2939;
--color-gray-900: #101828;
--color-gray-950: #0c111d;
--color-gray-dark: #1a2231;
--color-orange-25: #fffaf5;
--color-orange-50: #fff6ed;
--color-orange-100: #ffead5;
--color-orange-200: #fddcab;
--color-orange-300: #feb273;
--color-orange-400: #fd853a;
--color-orange-500: #fb6514;
--color-orange-600: #ec4a0a;
--color-orange-700: #c4320a;
--color-orange-800: #9c2a10;
--color-orange-900: #7e2410;
--color-orange-950: #511c10;
--color-success-25: #f6fef9;
--color-success-50: #ecfdf3;
--color-success-100: #d1fadf;
--color-success-200: #a6f4c5;
--color-success-300: #6ce9a6;
--color-success-400: #32d583;
--color-success-500: #12b76a;
--color-success-600: #039855;
--color-success-700: #027a48;
--color-success-800: #05603a;
--color-success-900: #054f31;
--color-success-950: #053321;
--color-error-25: #fffbfa;
--color-error-50: #fef3f2;
--color-error-100: #fee4e2;
--color-error-200: #fecdca;
--color-error-300: #fda29b;
--color-error-400: #f97066;
--color-error-500: #f04438;
--color-error-600: #d92d20;
--color-error-700: #b42318;
--color-error-800: #912018;
--color-error-900: #7a271a;
--color-error-950: #55160c;
--color-warning-25: #fffcf5;
--color-warning-50: #fffaeb;
--color-warning-100: #fef0c7;
--color-warning-200: #fedf89;
--color-warning-300: #fec84b;
--color-warning-400: #fdb022;
--color-warning-500: #f79009;
--color-warning-600: #dc6803;
--color-warning-700: #b54708;
--color-warning-800: #93370d;
--color-warning-900: #7a2e0e;
--color-warning-950: #4e1d09;
--color-theme-pink-500: #ee46bc;
--color-theme-purple-500: #7a5af8;
--shadow-theme-md: 0px 4px 8px -2px rgba(16, 24, 40, 0.1), 0px 2px 4px -2px rgba(16, 24, 40, 0.06);
--shadow-theme-lg: 0px 12px 16px -4px rgba(16, 24, 40, 0.08),
0px 4px 6px -2px rgba(16, 24, 40, 0.03);
--shadow-theme-sm: 0px 1px 3px 0px rgba(16, 24, 40, 0.1), 0px 1px 2px 0px rgba(16, 24, 40, 0.06);
--shadow-theme-xs: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
--shadow-theme-xl: 0px 20px 24px -4px rgba(16, 24, 40, 0.08),
0px 8px 8px -4px rgba(16, 24, 40, 0.03);
--shadow-datepicker: -5px 0 0 #262d3c, 5px 0 0 #262d3c;
--shadow-focus-ring: 0px 0px 0px 4px rgba(70, 95, 255, 0.12);
--shadow-slider-navigation: 0px 1px 2px 0px rgba(16, 24, 40, 0.1),
0px 1px 3px 0px rgba(16, 24, 40, 0.1);
--shadow-tooltip: 0px 4px 6px -2px rgba(16, 24, 40, 0.05),
-8px 0px 20px 8px rgba(16, 24, 40, 0.05);
--drop-shadow-4xl: 0 35px 35px rgba(0, 0, 0, 0.25), 0 45px 65px rgba(0, 0, 0, 0.15);
--z-index-1: 1;
--z-index-9: 9;
--z-index-99: 99;
--z-index-999: 999;
--z-index-9999: 9999;
--z-index-99999: 99999;
--z-index-999999: 999999;
}
/*
The default border color has changed to `currentColor` in Tailwind CSS v4,
so we've added these compatibility styles to make sure everything still
looks the same as it did with Tailwind CSS v3.
If we ever want to remove these styles, we need to add an explicit border
color utility to any element that depends on these defaults.
*/
@layer base {
*,
::after,
::before,
::backdrop,
::file-selector-button {
border-color: var(--color-gray-200, currentColor);
}
button:not(:disabled),
[role='button']:not(:disabled) {
cursor: pointer;
}
body {
@apply relative font-normal font-sans z-1 bg-gray-50;
}
}
@utility menu-item {
@apply relative flex items-center w-full gap-3 px-3 py-2 font-medium rounded-lg text-theme-sm;
}
@utility menu-item-active {
@apply bg-brand-50 text-brand-500 dark:bg-brand-500/[0.12] dark:text-brand-400;
}
@utility menu-item-inactive {
@apply text-gray-700 hover:bg-gray-100 group-hover:text-gray-700 dark:text-gray-300 dark:hover:bg-white/5 dark:hover:text-gray-300;
}
@utility menu-item-icon {
@apply text-gray-500 group-hover:text-gray-700 dark:text-gray-400;
}
@utility menu-item-icon-active {
@apply text-brand-500 dark:text-brand-400;
}
@utility menu-item-icon-inactive {
@apply text-gray-500 group-hover:text-gray-700 dark:text-gray-400 dark:group-hover:text-gray-300;
}
@utility menu-item-arrow {
@apply relative;
}
@utility menu-item-arrow-active {
@apply rotate-180 text-brand-500 dark:text-brand-400;
}
@utility menu-item-arrow-inactive {
@apply text-gray-500 group-hover:text-gray-700 dark:text-gray-400 dark:group-hover:text-gray-300;
}
@utility menu-dropdown-item {
@apply relative flex items-center gap-3 rounded-lg px-3 py-2.5 text-theme-sm font-medium;
}
@utility menu-dropdown-item-active {
@apply bg-brand-50 text-brand-500 dark:bg-brand-500/[0.12] dark:text-brand-400;
}
@utility menu-dropdown-item-inactive {
@apply text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-white/5;
}
@utility menu-dropdown-item {
@apply text-theme-sm relative flex items-center gap-3 rounded-lg px-3 py-2.5 font-medium;
}
@utility menu-dropdown-item-active {
@apply bg-brand-50 text-brand-500 dark:bg-brand-500/[0.12] dark:text-brand-400;
}
@utility menu-dropdown-item-inactive {
@apply text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-white/5;
}
@utility menu-dropdown-badge {
@apply text-success-600 dark:text-success-500 block rounded-full px-2.5 py-0.5 text-xs font-medium uppercase;
}
@utility menu-dropdown-badge-active {
@apply bg-success-100 dark:bg-success-500/20;
}
@utility menu-dropdown-badge-inactive {
@apply bg-success-50 group-hover:bg-success-100 dark:bg-success-500/15 dark:group-hover:bg-success-500/20;
}
@utility menu-dropdown-badge-pro {
@apply text-brand-600 dark:text-brand-500 block rounded-full px-2.5 py-0.5 text-xs font-medium uppercase;
}
@utility menu-dropdown-badge-pro-active {
@apply bg-brand-100 dark:bg-brand-500/20;
}
@utility menu-dropdown-badge-pro-inactive {
@apply bg-brand-50 group-hover:bg-brand-100 dark:bg-brand-500/15 dark:group-hover:bg-brand-500/20;
}
@utility no-scrollbar {
/* Chrome, Safari and Opera */
&::-webkit-scrollbar {
display: none;
}
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
@utility custom-scrollbar {
&::-webkit-scrollbar {
@apply size-1.5;
}
&::-webkit-scrollbar-track {
@apply rounded-full;
}
&::-webkit-scrollbar-thumb {
@apply bg-gray-200 rounded-full dark:bg-gray-700;
}
}
.dark .custom-scrollbar::-webkit-scrollbar-thumb {
background-color: #344054;
}
@layer utilities {
/* For Remove Date Icon */
input[type='date']::-webkit-inner-spin-button,
input[type='time']::-webkit-inner-spin-button,
input[type='date']::-webkit-calendar-picker-indicator,
input[type='time']::-webkit-calendar-picker-indicator {
display: none;
-webkit-appearance: none;
}
}
.sidebar:hover {
width: 290px;
}
.sidebar:hover .logo {
display: block;
}
.sidebar:hover .logo-icon {
display: none;
}
.sidebar:hover .sidebar-header {
justify-content: space-between;
}
.sidebar:hover .menu-group-title {
display: block;
}
.sidebar:hover .menu-group-icon {
display: none;
}
.sidebar:hover .menu-item-text {
display: inline;
}
.sidebar:hover .menu-item-arrow {
display: block;
}
.sidebar:hover .menu-dropdown {
display: flex;
}
.tableCheckbox:checked ~ span span {
@apply opacity-100;
}
.tableCheckbox:checked ~ span {
@apply border-brand-500 bg-brand-500;
}
/* third-party libraries CSS */
.apexcharts-legend-text {
@apply !text-gray-700 dark:!text-gray-400;
}
.apexcharts-text {
@apply !fill-gray-700 dark:!fill-gray-400;
}
.apexcharts-tooltip.apexcharts-theme-light {
@apply gap-1 !rounded-lg !border-gray-200 p-3 !shadow-theme-sm dark:!border-gray-800 dark:!bg-gray-900;
}
/* .apexcharts-tooltip-marker {
@apply !mr-1.5 !h-1.5 !w-1.5;
} */
.apexcharts-legend-text {
@apply !pl-5 !text-gray-700 dark:!text-gray-400;
}
.apexcharts-tooltip-series-group {
@apply !p-0;
}
.apexcharts-tooltip-y-group {
@apply !p-0;
}
.apexcharts-tooltip-title {
@apply !mb-0 !border-b-0 !bg-transparent !p-0 !text-[10px] !leading-4 !text-gray-800 dark:!text-white/90;
}
.apexcharts-tooltip-text {
@apply !text-theme-xs !text-gray-700 dark:!text-white/90;
}
.apexcharts-tooltip-text-y-value {
@apply !font-medium;
}
.apexcharts-gridline {
@apply !stroke-gray-100 dark:!stroke-gray-800;
}
#chartTwo .apexcharts-datalabels-group {
@apply !-translate-y-24;
}
#chartSeven .apexcharts-datalabels-group .apexcharts-text,
#chartTwo .apexcharts-datalabels-group .apexcharts-text,
#chartThirteen .apexcharts-datalabels-group .apexcharts-text,
#chartTwelve .apexcharts-datalabels-group .apexcharts-text {
@apply !fill-gray-800 !font-semibold dark:!fill-white/90;
}
#chartSixteen .apexcharts-legend {
@apply !p-0 !pl-6;
}
.jvm-container {
@apply !bg-gray-50 dark:!bg-gray-900;
}
.jvm-region.jvm-element {
@apply !fill-gray-300 hover:!fill-brand-500 dark:!fill-gray-700 dark:hover:!fill-brand-500;
}
.jvm-marker.jvm-element {
@apply !stroke-gray-200 dark:!stroke-gray-800;
}
.stocks-slider-outer .swiper-button-next:after,
.stocks-slider-outer .swiper-button-prev:after {
@apply hidden;
}
.stocks-slider-outer .swiper-button-next,
.stocks-slider-outer .swiper-button-prev {
@apply static! mt-0 h-8 w-9 rounded-full border border-gray-200 !text-gray-700 transition hover:bg-gray-100 dark:border-gray-800 dark:bg-gray-800 dark:text-gray-400!;
}
.stocks-slider-outer .swiper-button-next.swiper-button-disabled,
.stocks-slider-outer .swiper-button-prev.swiper-button-disabled {
@apply bg-white opacity-50 dark:bg-gray-900;
}
.stocks-slider-outer .swiper-button-next svg,
.stocks-slider-outer .swiper-button-prev svg {
@apply !h-auto !w-auto;
fill: none;
}
.flatpickr-wrapper {
@apply w-full;
}
.flatpickr-calendar {
@apply mt-2 !rounded-xl bg-black !p-5 !border !border-transparent dark:!border-white/5 !text-gray-500 dark:!bg-gray-dark dark:!text-gray-400 dark:!shadow-theme-xl 2xsm:!w-auto;
}
.flatpickr-time input {
background-color: #f9fafb !important;
}
.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg {
@apply stroke-brand-500;
}
.flatpickr-calendar.arrowTop:before,
.flatpickr-calendar.arrowTop:after {
@apply hidden;
}
.flatpickr-current-month .cur-month,
.flatpickr-current-month input.cur-year {
@apply !h-auto !pt-0 !text-lg !font-medium !text-gray-800 dark:!text-white/90;
}
.flatpickr-prev-month,
.flatpickr-next-month {
@apply !p-0;
}
.flatpickr-weekdays {
@apply h-auto mt-6 mb-4;
}
.flatpickr-weekday {
@apply !text-theme-sm !font-medium !text-gray-500 dark:!text-gray-400;
}
.flatpickr-day {
@apply !flex !items-center !text-theme-sm !font-medium !text-gray-800 dark:!text-white/90 dark:hover:!border-gray-300 dark:hover:!bg-gray-900;
}
.flatpickr-day.nextMonthDay,
.flatpickr-day.prevMonthDay {
@apply !text-gray-400;
}
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
@apply !top-7 dark:!fill-white dark:!text-white;
}
.flatpickr-months .flatpickr-prev-month.flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month.flatpickr-prev-month {
@apply !left-7;
}
.flatpickr-months .flatpickr-prev-month.flatpickr-next-month,
.flatpickr-months .flatpickr-next-month.flatpickr-next-month {
@apply !right-7;
}
span.flatpickr-weekday,
.flatpickr-months .flatpickr-month {
@apply dark:!fill-white dark:!text-white;
}
.flatpickr-day.inRange {
box-shadow:
-5px 0 0 #f9fafb,
5px 0 0 #f9fafb !important;
@apply dark:!shadow-datepicker;
}
.flatpickr-day.inRange,
.flatpickr-day.prevMonthDay.inRange,
.flatpickr-day.nextMonthDay.inRange,
.flatpickr-day.today.inRange,
.flatpickr-day.prevMonthDay.today.inRange,
.flatpickr-day.nextMonthDay.today.inRange,
.flatpickr-day:hover,
.flatpickr-day.prevMonthDay:hover,
.flatpickr-day.nextMonthDay:hover,
.flatpickr-day:focus,
.flatpickr-day.prevMonthDay:focus,
.flatpickr-day.nextMonthDay:focus {
@apply !border-gray-50 !bg-gray-50 dark:!border-0 dark:!border-white/5 dark:!bg-white/5;
}
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.selected,
.flatpickr-day.endRange {
@apply !text-white dark:!text-white;
}
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected.inRange,
.flatpickr-day.startRange.inRange,
.flatpickr-day.endRange.inRange,
.flatpickr-day.selected:focus,
.flatpickr-day.startRange:focus,
.flatpickr-day.endRange:focus,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover,
.flatpickr-day.selected.prevMonthDay,
.flatpickr-day.startRange.prevMonthDay,
.flatpickr-day.endRange.prevMonthDay,
.flatpickr-day.selected.nextMonthDay,
.flatpickr-day.startRange.nextMonthDay,
.flatpickr-day.endRange.nextMonthDay {
background: #465fff;
@apply !border-brand-500 !bg-brand-500 hover:!border-brand-500 hover:!bg-brand-500;
}
.flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n + 1)),
.flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n + 1)),
.flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n + 1)) {
box-shadow: -10px 0 0 #465fff;
}
.flatpickr-months .flatpickr-prev-month svg,
.flatpickr-months .flatpickr-next-month svg,
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
@apply hover:!fill-none;
}
.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg {
fill: none !important;
}
.flatpickr-calendar.static {
@apply right-0;
}
.flatpickr-calendar.hasTime {
width: 300px !important;
}
.flatpickr-calendar.hasTime .flatpickr-time {
border: transparent !important;
}
.fc .fc-view-harness {
@apply max-w-full overflow-x-auto custom-scrollbar;
}
.fc-dayGridMonth-view.fc-view.fc-daygrid {
@apply min-w-[718px];
}
.fc .fc-scrollgrid-section > * {
border-right-width: 0;
border-bottom-width: 0;
}
.fc .fc-scrollgrid {
border-left-width: 0;
}
.fc .fc-toolbar.fc-header-toolbar {
@apply flex-col gap-4 px-6 pt-6 sm:flex-row;
}
.fc-button-group {
@apply gap-2;
}
.fc-button-group .fc-button {
@apply flex h-10 w-10 items-center justify-center !rounded-lg border border-gray-200 bg-transparent hover:border-gray-200 hover:bg-gray-50 focus:shadow-none active:!border-gray-200 active:!bg-transparent active:!shadow-none dark:border-gray-800 dark:hover:border-gray-800 dark:hover:bg-gray-900 dark:active:!border-gray-800;
}
.fc-button-group .fc-button.fc-prev-button:before {
@apply inline-block mt-1;
content: url("data:image/svg+xml,%3Csvg width='25' height='24' viewBox='0 0 25 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16.0068 6L9.75684 12.25L16.0068 18.5' stroke='%23344054' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}
.fc-button-group .fc-button.fc-next-button:before {
@apply inline-block mt-1;
content: url("data:image/svg+xml,%3Csvg width='25' height='24' viewBox='0 0 25 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.50684 19L15.7568 12.75L9.50684 6.5' stroke='%23344054' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}
.dark .fc-button-group .fc-button.fc-prev-button:before {
content: url("data:image/svg+xml,%3Csvg width='25' height='24' viewBox='0 0 25 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16.0068 6L9.75684 12.25L16.0068 18.5' stroke='%2398A2B3' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}
.dark .fc-button-group .fc-button.fc-next-button:before {
content: url("data:image/svg+xml,%3Csvg width='25' height='24' viewBox='0 0 25 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.50684 19L15.7568 12.75L9.50684 6.5' stroke='%2398A2B3' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}
.fc-button-group .fc-button .fc-icon {
@apply hidden;
}
.fc-addEventButton-button {
@apply !rounded-lg !border-0 !bg-brand-500 !px-4 !py-2.5 !text-sm !font-medium hover:!bg-brand-600 focus:!shadow-none;
}
.fc-toolbar-title {
@apply !text-lg !font-medium text-gray-800 dark:text-white/90;
}
.fc-header-toolbar.fc-toolbar .fc-toolbar-chunk:last-child {
@apply rounded-lg bg-gray-100 p-0.5 dark:bg-gray-900;
}
.fc-header-toolbar.fc-toolbar .fc-toolbar-chunk:last-child .fc-button {
@apply !h-auto !w-auto rounded-md !border-0 bg-transparent !px-5 !py-2 text-sm font-medium text-gray-500 hover:text-gray-700 focus:!shadow-none dark:text-gray-400;
}
.fc-header-toolbar.fc-toolbar .fc-toolbar-chunk:last-child .fc-button.fc-button-active {
@apply text-gray-900 bg-white dark:bg-gray-800 dark:text-white;
}
.fc-theme-standard th {
@apply !border-x-0 border-t !border-gray-200 bg-gray-50 !text-left dark:!border-gray-800 dark:bg-gray-900;
}
.fc-theme-standard td,
.fc-theme-standard .fc-scrollgrid {
@apply !border-gray-200 dark:!border-gray-800;
}
.fc .fc-col-header-cell-cushion {
@apply !px-5 !py-4 text-sm font-medium uppercase text-gray-400;
}
.fc .fc-daygrid-day.fc-day-today {
@apply bg-transparent;
}
.fc .fc-daygrid-day {
@apply p-2;
}
.fc .fc-daygrid-day.fc-day-today .fc-scrollgrid-sync-inner {
@apply rounded-sm bg-gray-100 dark:bg-white/[0.03];
}
.fc .fc-daygrid-day-number {
@apply !p-3 text-sm font-medium text-gray-700 dark:text-gray-400;
}
.fc .fc-daygrid-day-top {
@apply flex-row!;
}
.fc .fc-day-other .fc-daygrid-day-top {
opacity: 1;
}
.fc .fc-day-other .fc-daygrid-day-top .fc-daygrid-day-number {
@apply text-gray-400 dark:text-white/30;
}
.event-fc-color {
@apply rounded-lg py-2.5 pl-4 pr-3;
}
.event-fc-color .fc-event-title {
@apply p-0 text-sm font-normal text-gray-700;
}
.fc-daygrid-event-dot {
@apply w-1 h-5 ml-0 mr-3 border-none rounded-sm;
}
.fc-event {
@apply focus:shadow-none;
}
.fc-daygrid-event.fc-event-start {
@apply !ml-3;
}
.event-fc-color.fc-bg-success {
@apply border-success-50 bg-success-50;
}
.event-fc-color.fc-bg-danger {
@apply border-error-50 bg-error-50;
}
.event-fc-color.fc-bg-primary {
@apply border-brand-50 bg-brand-50;
}
.event-fc-color.fc-bg-warning {
@apply border-orange-50 bg-orange-50;
}
.event-fc-color.fc-bg-success .fc-daygrid-event-dot {
@apply bg-success-500;
}
.event-fc-color.fc-bg-danger .fc-daygrid-event-dot {
@apply bg-error-500;
}
.event-fc-color.fc-bg-primary .fc-daygrid-event-dot {
@apply bg-brand-500;
}
.event-fc-color.fc-bg-warning .fc-daygrid-event-dot {
@apply bg-orange-500;
}
.fc-direction-ltr .fc-timegrid-slot-label-frame {
@apply px-3 py-1.5 text-left text-sm font-medium text-gray-500 dark:text-gray-400;
}
.fc .fc-timegrid-axis-cushion {
@apply text-sm font-medium text-gray-500 dark:text-gray-400;
}
.input-date-icon::-webkit-inner-spin-button,
.input-date-icon::-webkit-calendar-picker-indicator {
opacity: 0;
-webkit-appearance: none;
}
.swiper-button-prev svg,
.swiper-button-next svg {
@apply !h-auto w-auto!;
}
.carouselTwo .swiper-button-next:after,
.carouselTwo .swiper-button-prev:after,
.carouselFour .swiper-button-next:after,
.carouselFour .swiper-button-prev:after {
@apply hidden;
}
.carouselTwo .swiper-button-next.swiper-button-disabled,
.carouselTwo .swiper-button-prev.swiper-button-disabled,
.carouselFour .swiper-button-next.swiper-button-disabled,
.carouselFour .swiper-button-prev.swiper-button-disabled {
@apply bg-white/60 opacity-100!;
}
.carouselTwo .swiper-button-next,
.carouselTwo .swiper-button-prev,
.carouselFour .swiper-button-next,
.carouselFour .swiper-button-prev {
@apply h-10 w-10 rounded-full border-[0.5px] border-white/10 bg-white/90 !text-gray-700 shadow-slider-navigation backdrop-blur-[10px];
}
.carouselTwo .swiper-button-prev,
.carouselFour .swiper-button-prev {
@apply !left-3 sm:!left-4;
}
.carouselTwo .swiper-button-next,
.carouselFour .swiper-button-next {
@apply !right-3 sm:!right-4;
}
.carouselThree .swiper-pagination,
.carouselFour .swiper-pagination {
@apply !bottom-3 !left-1/2 inline-flex !w-auto -translate-x-1/2 items-center gap-1.5 rounded-[40px] border-[0.5px] border-white/10 bg-white/60 px-2 py-1.5 shadow-slider-navigation backdrop-blur-[10px] sm:!bottom-5;
}
.carouselThree .swiper-pagination-bullet,
.carouselFour .swiper-pagination-bullet {
@apply !m-0 h-2.5 w-2.5 bg-white opacity-100 shadow-theme-xs duration-200 ease-in-out;
}
.carouselThree .swiper-pagination-bullet-active,
.carouselFour .swiper-pagination-bullet-active {
@apply w-6.5 rounded-xl;
}
.form-check-input:checked ~ span {
@apply border-[6px] border-brand-500 dark:border-brand-500;
}
.taskCheckbox:checked ~ .box span {
@apply opacity-100;
}
.taskCheckbox:checked ~ p {
@apply text-gray-400 line-through;
}
.taskCheckbox:checked ~ .box {
@apply border-brand-500 bg-brand-500 dark:border-brand-500;
}
.task {
transition: all 0.2s ease; /* Smooth transition for visual effects */
}
.task.is-dragging {
border-radius: 0.75rem;
box-shadow:
0px 1px 3px 0px rgba(16, 24, 40, 0.1),
0px 1px 2px 0px rgba(16, 24, 40, 0.06);
opacity: 0.8;
cursor: grabbing; /* Changes the cursor to indicate dragging */
}
.custom-calendar .fc-h-event {
background-color: #0000;
border: none;
color: black;
}
.simplebar-scrollbar:before {
@apply !bg-gray-200 !rounded-full dark:!bg-gray-700 !opacity-100;
}
.dark .simplebar-scrollbar::before {
@apply !bg-gray-700;
}
.simplebar-scrollbar.simplebar-visible:before {
@apply opacity-100;
}
.social-button {
@apply flex h-11 w-11 items-center justify-center gap-2 rounded-full border border-gray-300 bg-white text-sm font-medium text-gray-700 shadow-theme-xs hover:bg-gray-50 hover:text-gray-800 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-white/[0.03] dark:hover:text-gray-200;
}
.edit-button {
@apply flex w-full items-center justify-center gap-2 rounded-full border border-gray-300 bg-white px-4 py-3 text-sm font-medium text-gray-700 shadow-theme-xs hover:bg-gray-50 hover:text-gray-800 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-white/[0.03] dark:hover:text-gray-200 lg:inline-flex lg:w-auto;
}
/* Code Editor */
code[class*='language-'],
pre[class*='language-'] {
text-shadow: none;
color: #344054;
overflow: hidden !important;
font-size: 14px;
margin: 0;
padding: 0;
white-space: pre-wrap;
word-wrap: break-word;
text-align: justify;
}
.dark code[class*='language-'],
.dark pre[class*='language-'] {
text-shadow: none;
color: #98a2b3;
}
.language-html {
background-color: #ffffff !important;
}
.dark .language-html {
background-color: #ffffff00 !important;
}
.token {
text-shadow: none;
font-size: 14px;
}
.token.doctype-tag,
.token.name {
color: #018001;
}
.token.tag {
color: #267f99;
}
.token.selector {
color: #267f99;
}
.token.property {
color: #0070c1;
}
.token.language-css {
color: #1b00ff;
}
.token.attr-name {
color: #98a2b3;
}
.token.attr-value {
color: #a31615;
}
.token.punctuation {
color: #344054;
}
.dark .token.punctuation {
color: #98a2b3;
}
.custom-datepicker .flatpickr-calendar.static.open {
left: 0;
right: auto;
}
.swiper-button-prev, .swiper-button-next {
svg {
fill: none !important;
}
}

5
resources/js/app.js
View File

@@ -1 +1,6 @@
import './bootstrap';
import Alpine from 'alpinejs';
window.Alpine = Alpine;
Alpine.start();

8
resources/views/components/common/common-grid-shape.blade.php Normal file
View File

@@ -0,0 +1,8 @@
<div>
<div class="absolute right-0 top-0 -z-1 w-full max-w-[250px] xl:max-w-[450px]">
<img src="/images/shape/grid-01.svg" alt="grid" />
</div>
<div class="absolute bottom-0 left-0 -z-1 w-full max-w-[250px] rotate-180 xl:max-w-[450px]">
<img src="/images/shape/grid-01.svg" alt="grid" />
</div>
</div>

9
resources/views/components/common/preloader.blade.php Normal file
View File

@@ -0,0 +1,9 @@
<div
x-show="loaded"
x-init="window.addEventListener('DOMContentLoaded', () => {setTimeout(() => loaded = false, 350)})"
class="fixed left-0 top-0 z-999999 flex h-screen w-screen items-center justify-center bg-white dark:bg-black"
>
<div
class="h-16 w-16 animate-spin rounded-full border-4 border-solid border-brand-500 border-t-transparent"
></div>
</div>

92
resources/views/components/ui/flash-message.blade.php Normal file
View File

@@ -0,0 +1,92 @@
@if (session()->has('success') || session()->has('error') || session()->has('warning') || session()->has('info') || session()->has('status'))
@php
$variant = 'info';
$message = '';
$title = '';
if (session()->has('success')) {
$variant = 'success';
$message = session('success');
$title = session('title') ?? 'Success';
} elseif (session()->has('error')) {
$variant = 'error';
$message = session('error');
$title = session('title') ?? 'Error';
} elseif (session()->has('warning')) {
$variant = 'warning';
$message = session('warning');
$title = session('title') ?? 'Warning';
} elseif (session()->has('info')) {
$variant = 'info';
$message = session('info');
$title = session('title') ?? 'Information';
} elseif (session()->has('status')) {
$variant = 'success'; // Default status to success/info style
$message = session('status');
$title = session('title') ?? 'Notification';
}
// Copy styles from ui.alert
$variantClasses = [
'success' => [
'container' => 'border-green-500 bg-green-50 dark:border-green-500/30 dark:bg-green-500/15',
'icon' => 'text-green-500',
],
'error' => [
'container' => 'border-red-500 bg-red-50 dark:border-red-500/30 dark:bg-red-500/15',
'icon' => 'text-red-500',
],
'warning' => [
'container' => 'border-yellow-500 bg-yellow-50 dark:border-yellow-500/30 dark:bg-yellow-500/15',
'icon' => 'text-yellow-500',
],
'info' => [
'container' => 'border-blue-500 bg-blue-50 dark:border-blue-500/30 dark:bg-blue-500/15',
'icon' => 'text-blue-500',
],
];
$icons = [
'success' => '<svg class="fill-current" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M3.70186 12.0001C3.70186 7.41711 7.41711 3.70186 12.0001 3.70186C16.5831 3.70186 20.2984 7.41711 20.2984 12.0001C20.2984 16.5831 16.5831 20.2984 12.0001 20.2984C7.41711 20.2984 3.70186 16.5831 3.70186 12.0001ZM12.0001 1.90186C6.423 1.90186 1.90186 6.423 1.90186 12.0001C1.90186 17.5772 6.423 22.0984 12.0001 22.0984C17.5772 22.0984 22.0984 17.5772 22.0984 12.0001C22.0984 6.423 17.5772 1.90186 12.0001 1.90186ZM15.6197 10.7395C15.9712 10.388 15.9712 9.81819 15.6197 9.46672C15.2683 9.11525 14.6984 9.11525 14.347 9.46672L11.1894 12.6243L9.6533 11.0883C9.30183 10.7368 8.73198 10.7368 8.38051 11.0883C8.02904 11.4397 8.02904 12.0096 8.38051 12.3611L10.553 14.5335C10.7217 14.7023 10.9507 14.7971 11.1894 14.7971C11.428 14.7971 11.657 14.7023 11.8257 14.5335L15.6197 10.7395Z" fill=""></path></svg>',
'error' => '<svg class="fill-current" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M3.6501 12.0001C3.6501 7.38852 7.38852 3.6501 12.0001 3.6501C16.6117 3.6501 20.3501 7.38852 20.3501 12.0001C20.3501 16.6117 16.6117 20.3501 12.0001 20.3501C7.38852 20.3501 3.6501 16.6117 3.6501 12.0001ZM12.0001 1.8501C6.39441 1.8501 1.8501 6.39441 1.8501 12.0001C1.8501 17.6058 6.39441 22.1501 12.0001 22.1501C17.6058 22.1501 22.1501 17.6058 22.1501 12.0001C22.1501 6.39441 17.6058 1.8501 12.0001 1.8501ZM10.9992 7.52517C10.9992 8.07746 11.4469 8.52517 11.9992 8.52517H12.0002C12.5525 8.52517 13.0002 8.07746 13.0002 7.52517C13.0002 6.97289 12.5525 6.52517 12.0002 6.52517H11.9992C11.4469 6.52517 10.9992 6.97289 10.9992 7.52517ZM12.0002 17.3715C11.586 17.3715 11.2502 17.0357 11.2502 16.6215V10.945C11.2502 10.5308 11.586 10.195 12.0002 10.195C12.4144 10.195 12.7502 10.5308 12.7502 10.945V16.6215C12.7502 17.0357 12.4144 17.3715 12.0002 17.3715Z" fill=""></path></svg>',
'warning' => '<svg class="fill-current" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M20.3499 12.0004C20.3499 16.612 16.6115 20.3504 11.9999 20.3504C7.38832 20.3504 3.6499 16.612 3.6499 12.0004C3.6499 7.38881 7.38833 3.65039 11.9999 3.65039C16.6115 3.65039 20.3499 7.38881 20.3499 12.0004ZM11.9999 22.1504C17.6056 22.1504 22.1499 17.6061 22.1499 12.0004C22.1499 6.3947 17.6056 1.85039 11.9999 1.85039C6.39421 1.85039 1.8499 6.3947 1.8499 12.0004C1.8499 17.6061 6.39421 22.1504 11.9999 22.1504ZM13.0008 16.4753C13.0008 15.923 12.5531 15.4753 12.0008 15.4753L11.9998 15.4753C11.4475 15.4753 10.9998 15.923 10.9998 16.4753C10.9998 17.0276 11.4475 17.4753 11.9998 17.4753L12.0008 17.4753C12.5531 17.4753 13.0008 17.0276 13.0008 16.4753ZM11.9998 6.62898C12.414 6.62898 12.7498 6.96476 12.7498 7.37898L12.7498 13.0555C12.7498 13.4697 12.414 13.8055 11.9998 13.8055C11.5856 13.8055 11.2498 13.4697 11.2498 13.0555L11.2498 7.37898C11.2498 6.96476 11.5856 6.62898 11.9998 6.62898Z" fill="#F04438"></path></svg>',
'info' => '<svg class="fill-current" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M3.6501 11.9996C3.6501 7.38803 7.38852 3.64961 12.0001 3.64961C16.6117 3.64961 20.3501 7.38803 20.3501 11.9996C20.3501 16.6112 16.6117 20.3496 12.0001 20.3496C7.38852 20.3496 3.6501 16.6112 3.6501 11.9996ZM12.0001 1.84961C6.39441 1.84961 1.8501 6.39392 1.8501 11.9996C1.8501 17.6053 6.39441 22.1496 12.0001 22.1496C17.6058 22.1496 22.1501 17.6053 22.1501 11.9996C22.1501 6.39392 17.6058 1.84961 12.0001 1.84961ZM10.9992 7.52468C10.9992 8.07697 11.4469 8.52468 11.9992 8.52468H12.0002C12.5525 8.52468 13.0002 8.07697 13.0002 7.52468C13.0002 6.9724 12.5525 6.52468 12.0002 6.52468H11.9992C11.4469 6.52468 10.9992 6.9724 10.9992 7.52468ZM12.0002 17.371C11.586 17.371 11.2502 17.0352 11.2502 16.621V10.9445C11.2502 10.5303 11.586 10.1945 12.0002 10.1945C12.4144 10.1945 12.7502 10.5303 12.7502 10.9445V16.621C12.7502 17.0352 12.4144 17.371 12.0002 17.371Z" fill=""></path></svg>',
];
$containerClass = $variantClasses[$variant]['container'] ?? $variantClasses['info']['container'];
$iconClass = $variantClasses[$variant]['icon'] ?? $variantClasses['info']['icon'];
$icon = $icons[$variant] ?? $icons['info'];
@endphp
<div
x-data="{ show: true }"
x-show="show"
x-init="setTimeout(() => show = false, 8000)"
x-transition:enter="transition ease-out duration-300"
x-transition:enter-start="opacity-0 translate-y-2"
x-transition:enter-end="opacity-100 translate-y-0"
x-transition:leave="transition ease-in duration-200"
x-transition:leave-start="opacity-100 translate-y-0"
x-transition:leave-end="opacity-0 translate-y-2"
class="fixed top-32 right-5 left-5 sm:left-auto z-[999999] sm:w-full sm:max-w-sm"
style="display: none;" {{-- Prevent Flash of Unstyled Content --}}
>
<div class="rounded-xl border p-4 shadow-lg {{ $containerClass }} relative">
<button @click="show = false" class="absolute top-2 right-2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 focus:outline-none">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
</button>
<div class="flex items-start gap-3">
<div class="-mt-0.5 {{ $iconClass }}">
{!! $icon !!}
</div>
<div class="flex-1 pr-4"> {{-- Add padding right for close button --}}
<h4 class="mb-1 text-sm font-semibold text-gray-800 dark:text-white/90">
{{ $title }}
</h4>
<p class="text-sm text-gray-500 dark:text-gray-400">{{ $message }}</p>
</div>
</div>
</div>
</div>
@endif

33
resources/views/errors/403.blade.php Normal file
View File

@@ -0,0 +1,33 @@
@extends('layouts.fullscreen-layout')
@section('content')
@php
$currentYear = date('Y');
@endphp
<div class="relative flex flex-col items-center justify-center min-h-screen p-6 overflow-hidden z-1">
{{-- common grid shape --}}
<x-common.common-grid-shape />
<!-- Centered Content -->
<div class="mx-auto w-full max-w-[242px] text-center sm:max-w-[472px]">
<h1 class="mb-8 font-bold text-gray-800 text-title-md dark:text-white/90 xl:text-title-2xl">
FORBIDDEN
</h1>
<img src="/images/error/403.svg" alt="403" class="dark:hidden" />
<img src="/images/error/403-dark.svg" alt="403" class="hidden dark:block" />
<p class="mt-10 mb-6 text-base text-gray-700 dark:text-gray-400 sm:text-lg">
You don't have permission to access this page.
</p>
<a href="/"
class="inline-flex items-center justify-center rounded-lg border border-gray-300 bg-white px-5 py-3.5 text-sm font-medium text-gray-700 shadow-theme-xs hover:bg-gray-50 hover:text-gray-800 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-white/[0.03] dark:hover:text-gray-200">
Back to home
</a>
</div>
<!-- Footer -->
<p class="absolute text-sm text-center text-gray-500 -translate-x-1/2 bottom-6 left-1/2 dark:text-gray-400">
&copy; {{ $currentYear }} - {{ config('app.name') }}
</p>
</div>
@endsection

33
resources/views/errors/404.blade.php Normal file
View File

@@ -0,0 +1,33 @@
@extends('layouts.fullscreen-layout')
@section('content')
@php
$currentYear = date('Y');
@endphp
<div class="relative flex flex-col items-center justify-center min-h-screen p-6 overflow-hidden z-1">
{{-- common grid shape --}}
<x-common.common-grid-shape />
<!-- Centered Content -->
<div class="mx-auto w-full max-w-[242px] text-center sm:max-w-[472px]">
<h1 class="mb-8 font-bold text-gray-800 text-title-md dark:text-white/90 xl:text-title-2xl">
ERROR
</h1>
<img src="/images/error/404.svg" alt="404" class="dark:hidden" />
<img src="/images/error/404-dark.svg" alt="404" class="hidden dark:block" />
<p class="mt-10 mb-6 text-base text-gray-700 dark:text-gray-400 sm:text-lg">
We can't seem to find the page you are looking for!
</p>
<a href="/"
class="inline-flex items-center justify-center rounded-lg border border-gray-300 bg-white px-5 py-3.5 text-sm font-medium text-gray-700 shadow-theme-xs hover:bg-gray-50 hover:text-gray-800 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-white/[0.03] dark:hover:text-gray-200">
Back to home
</a>
</div>
<!-- Footer -->
<p class="absolute text-sm text-center text-gray-500 -translate-x-1/2 bottom-6 left-1/2 dark:text-gray-400">
&copy; {{ $currentYear }} - {{ config('app.name') }}
</p>
</div>
@endsection

30
resources/views/errors/500.blade.php Normal file
View File

@@ -0,0 +1,30 @@
@extends('layouts.fullscreen-layout')
@section('content')
@php
$currentYear = date('Y');
@endphp
<div class="relative flex flex-col items-center justify-center min-h-screen p-6 overflow-hidden z-1">
<x-common.common-grid-shape />
<div class="mx-auto w-full max-w-[242px] text-center sm:max-w-[472px]">
<h1 class="mb-8 font-bold text-gray-800 text-title-md dark:text-white/90 xl:text-title-2xl">
ERROR
</h1>
<img src="/images/error/500.svg" alt="500" class="dark:hidden" />
<img src="/images/error/500-dark.svg" alt="500" class="hidden dark:block" />
<p class="mt-10 mb-6 text-base text-gray-700 dark:text-gray-400 sm:text-lg">
Something went wrong on our end. Please try again later.
</p>
<a href="/"
class="inline-flex items-center justify-center rounded-lg border border-gray-300 bg-white px-5 py-3.5 text-sm font-medium text-gray-700 shadow-theme-xs hover:bg-gray-50 hover:text-gray-800 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-white/[0.03] dark:hover:text-gray-200">
Back to home
</a>
</div>
<p class="absolute text-sm text-center text-gray-500 -translate-x-1/2 bottom-6 left-1/2 dark:text-gray-400">
&copy; {{ $currentYear }} - {{ config('app.name') }}
</p>
</div>
@endsection

30
resources/views/errors/503.blade.php Normal file
View File

@@ -0,0 +1,30 @@
@extends('layouts.fullscreen-layout')
@section('content')
@php
$currentYear = date('Y');
@endphp
<div class="relative flex flex-col items-center justify-center min-h-screen p-6 overflow-hidden z-1">
<x-common.common-grid-shape />
<div class="mx-auto w-full max-w-[242px] text-center sm:max-w-[472px]">
<h1 class="mb-8 font-bold text-gray-800 text-title-md dark:text-white/90 xl:text-title-2xl">
MAINTENANCE
</h1>
<img src="/images/error/503.svg" alt="503" class="dark:hidden" />
<img src="/images/error/503-dark.svg" alt="503" class="hidden dark:block" />
<p class="mt-10 mb-6 text-base text-gray-700 dark:text-gray-400 sm:text-lg">
The service is currently unavailable. We are performing maintenance.
</p>
<a href="/"
class="inline-flex items-center justify-center rounded-lg border border-gray-300 bg-white px-5 py-3.5 text-sm font-medium text-gray-700 shadow-theme-xs hover:bg-gray-50 hover:text-gray-800 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-white/[0.03] dark:hover:text-gray-200">
Refresh Page
</a>
</div>
<p class="absolute text-sm text-center text-gray-500 -translate-x-1/2 bottom-6 left-1/2 dark:text-gray-400">
&copy; {{ $currentYear }} - {{ config('app.name') }}
</p>
</div>
@endsection

150
resources/views/layouts/fullscreen-layout.blade.php Normal file
View File

@@ -0,0 +1,150 @@
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" class="h-full">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ $title ?? 'Unified Management' }} | {{ config('app.name', 'DyDev Admin') }}</title>
<!-- SEO Meta Tags -->
<meta name="description" content="@yield('meta_description', 'Professional Certificate Authority and API Management System for modern developers. Issue SSL/TLS certificates and manage API keys with ease.')">
<meta name="keywords" content="@yield('meta_keywords', 'certificate authority, ssl manager, api key management, trustlab, security portal')">
<meta name="robots" content="@yield('robots', 'index, follow')">
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:url" content="{{ url()->current() }}">
<meta property="og:title" content="{{ $title ?? 'Unified Management' }} | {{ config('app.name', 'DyDev Admin') }}">
<meta property="og:description" content="@yield('meta_description', 'Professional Certificate Authority and API Management System for modern developers. Issue SSL/TLS certificates and manage API keys with ease.')">
<meta property="og:image" content="{{ asset('images/og-share.png') }}">
<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:url" content="{{ url()->current() }}">
<meta property="twitter:title" content="{{ $title ?? 'Unified Management' }} | {{ config('app.name', 'DyDev Admin') }}">
<meta property="twitter:description" content="@yield('meta_description', 'Professional Certificate Authority and API Management System for modern developers. Issue SSL/TLS certificates and manage API keys with ease.')">
<meta property="twitter:image" content="{{ asset('images/og-share.png') }}">
@yield('meta')
<!-- Scripts -->
@vite(['resources/css/app.css', 'resources/js/app.js'])
<!-- Alpine.js -->
{{-- <script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script> --}}
<!-- Theme Store -->
<script>
document.addEventListener('alpine:init', () => {
Alpine.store('theme', {
init() {
const savedTheme = localStorage.getItem('theme');
const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' :
'light';
this.theme = savedTheme || systemTheme;
this.updateTheme();
},
theme: 'light',
toggle() {
this.theme = this.theme === 'light' ? 'dark' : 'light';
localStorage.setItem('theme', this.theme);
this.updateTheme();
},
updateTheme() {
const html = document.documentElement;
const body = document.body;
if (this.theme === 'dark') {
html.classList.add('dark');
body.classList.add('dark', 'bg-gray-900');
} else {
html.classList.remove('dark');
body.classList.remove('dark', 'bg-gray-900');
}
}
});
Alpine.store('sidebar', {
// Initialize based on screen size
isExpanded: window.innerWidth >= 1280, // true for desktop, false for mobile
isMobileOpen: false,
isHovered: false,
toggleExpanded() {
this.isExpanded = !this.isExpanded;
// When toggling desktop sidebar, ensure mobile menu is closed
this.isMobileOpen = false;
},
toggleMobileOpen() {
this.isMobileOpen = !this.isMobileOpen;
// Don't modify isExpanded when toggling mobile menu
},
setMobileOpen(val) {
this.isMobileOpen = val;
},
setHovered(val) {
// Only allow hover effects on desktop when sidebar is collapsed
if (window.innerWidth >= 1280 && !this.isExpanded) {
this.isHovered = val;
}
}
});
});
</script>
<!-- Apply dark mode immediately to prevent flash -->
<script>
(function() {
const savedTheme = localStorage.getItem('theme');
const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
const theme = savedTheme || systemTheme;
// Add to html immediately (works in <head>)
if (theme === 'dark') {
document.documentElement.classList.add('dark');
} else {
document.documentElement.classList.remove('dark');
}
// Add to body after it's available
document.addEventListener('DOMContentLoaded', () => {
if (theme === 'dark') {
document.body.classList.add('dark', 'bg-gray-900');
} else {
document.body.classList.remove('dark', 'bg-gray-900');
}
});
})();
</script>
</head>
<body x-data="{ 'loaded': true}" x-init="$store.sidebar.isExpanded = window.innerWidth >= 1280;
const checkMobile = () => {
if (window.innerWidth < 1280) {
$store.sidebar.setMobileOpen(false);
$store.sidebar.isExpanded = false;
} else {
$store.sidebar.isMobileOpen = false;
$store.sidebar.isExpanded = true;
}
};
window.addEventListener('resize', checkMobile);">
{{-- Flash Message Component --}}
<x-ui.flash-message />
{{-- preloader --}}
<x-common.preloader/>
{{-- preloader end --}}
@yield('content')
</body>
@stack('scripts')
</html>

307
resources/views/welcome.blade.php
View File

File diff suppressed because one or more lines are too long