From 4913d345de722198662c37aee35db852b2ab9041 Mon Sep 17 00:00:00 2001 From: Zahirul Iman Date: Tue, 27 May 2025 10:38:19 +0800 Subject: [PATCH] Initial commit: Refactor Niise to corradAF and baseline setup --- .gitignore | 26 +- README.md | 4 +- app.vue | 26 +- assets/css/menu-levels.css | 119 ++ .../{niise-logo.svg => corradAF-logo.svg} | 0 assets/img/logo/lzs-logo.png | Bin 0 -> 12744 bytes assets/style/css/base/theme.css | 50 +- assets/style/css/component/button.css | 167 ++- assets/style/css/component/card.css | 11 +- assets/style/css/example-theme.css | 65 + assets/style/scss/custom/layout/vertical.scss | 59 + assets/style/scss/main.scss | 8 +- components/FontSizeStepper.vue | 78 ++ components/Loading.vue | 30 +- components/layouts/Header.vue | 72 +- components/layouts/sidemenu/index.vue | 21 +- composables/themeList.js | 17 + composables/themeList2.js | 25 + composables/useSiteSettings.js | 342 ++++++ docs/SITE_SETTINGS.md | 161 +++ ecosystem.config.js | 2 +- fixes-summary.md | 122 ++ navigation/index.js | 12 +- nuxt.config.js | 39 +- pages/devtool/config/site-settings/index.vue | 1086 +++++++++++++++++ pages/forgot-password/index.vue | 26 +- pages/login/index.vue | 25 +- pages/notes/index.vue | 30 + pages/register/index.vue | 27 +- plugins/site-settings.client.js | 9 + prisma/schema.prisma | 44 +- server/api/devtool/config/add-custom-theme.js | 90 ++ server/api/devtool/config/site-settings.js | 217 ++++ server/api/devtool/config/upload-file.js | 134 ++ server/utils/buildNuxtTemplate.js | 5 +- templates/form1.vue | 4 - test-site-settings.md | 121 ++ 37 files changed, 3195 insertions(+), 79 deletions(-) create mode 100644 assets/css/menu-levels.css rename assets/img/logo/{niise-logo.svg => corradAF-logo.svg} (100%) create mode 100644 assets/img/logo/lzs-logo.png create mode 100644 assets/style/css/example-theme.css create mode 100644 components/FontSizeStepper.vue create mode 100644 composables/useSiteSettings.js create mode 100644 docs/SITE_SETTINGS.md create mode 100644 fixes-summary.md create mode 100644 pages/devtool/config/site-settings/index.vue create mode 100644 pages/notes/index.vue create mode 100644 plugins/site-settings.client.js create mode 100644 server/api/devtool/config/add-custom-theme.js create mode 100644 server/api/devtool/config/site-settings.js create mode 100644 server/api/devtool/config/upload-file.js create mode 100644 test-site-settings.md diff --git a/.gitignore b/.gitignore index fc55024..969bbc7 100644 --- a/.gitignore +++ b/.gitignore @@ -1,9 +1,25 @@ -node_modules -*.log* +# Nuxt dev/build outputs +.output .nuxt .nitro .cache -.output -.env dist -sw.* + +# Node dependencies +node_modules + +# Logs +*.log + +# Misc +.DS_Store +.fleet +.idea + +# Local env files +.env +.env.* +!.env.example + +# Uploads directory +public/uploads/ diff --git a/README.md b/README.md index 8430b76..7f452fe 100644 --- a/README.md +++ b/README.md @@ -40,4 +40,6 @@ npm run preview ``` Checkout the [deployment documentation](https://v3.nuxtjs.org/guide/deploy/presets) for more information. -# Niise +# corradAF + +This is the base project for corradAF. diff --git a/app.vue b/app.vue index bdbe209..f27c589 100644 --- a/app.vue +++ b/app.vue @@ -1,7 +1,20 @@ diff --git a/assets/css/menu-levels.css b/assets/css/menu-levels.css new file mode 100644 index 0000000..6b324be --- /dev/null +++ b/assets/css/menu-levels.css @@ -0,0 +1,119 @@ +/* Multi-level menu styling */ +.multi-level-menu { + border-left: 2px solid rgba(var(--color-primary), 0.3); +} + +/* Common styles for all menu levels */ +.navigation-item-wrapper a { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + display: flex; + align-items: center; +} + +/* Long menu text handling */ +.navigation-item-wrapper span { + text-overflow: ellipsis; + overflow: hidden; +} + +/* Show full text on hover */ +.navigation-item-wrapper a:hover span { + white-space: normal; + overflow: visible; + position: relative; + z-index: 10; +} + +/* Enhanced tooltip effect for very long menu items */ +.deepest-menu-item a:hover span { + background-color: rgba(var(--sidebar-menu), 0.95); + border-radius: 4px; + padding: 4px 8px; + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); + max-width: 300px; +} + +/* Level-specific styles */ +.second-level-menu { + font-weight: 500; + padding-left: 0.25rem; +} + +.second-level-menu .mx-3, +.second-level-menu .mx-4 { + color: rgba(255, 255, 255, 0.95); + max-width: 200px; +} + +.third-level-menu { + font-style: italic; + padding-left: 0.5rem; +} + +.third-level-menu .mx-3, +.third-level-menu .mx-4 { + color: rgba(255, 255, 255, 0.9); + font-size: 0.95rem; + max-width: 180px; +} + +.deepest-menu-item { + padding-left: 0.75rem; + border-left: 2px solid rgba(var(--color-primary), 0.6); +} + +.deepest-menu-item .mx-3, +.deepest-menu-item .mx-4 { + color: rgba(255, 255, 255, 0.85); + font-size: 0.9rem; + max-width: 160px; +} + +/* Add visual indicators for each level */ +.second-level-menu a::before, +.third-level-menu a::before, +.deepest-menu-item a::before { + content: ''; + display: inline-block; + width: 6px; + height: 6px; + margin-right: 8px; + border-radius: 50%; + flex-shrink: 0; +} + +.second-level-menu a::before { + background-color: rgba(var(--color-primary), 0.8); +} + +.third-level-menu a::before { + background-color: rgba(var(--color-accent), 0.8); + width: 5px; + height: 5px; +} + +.deepest-menu-item a::before { + background-color: rgba(var(--color-secondary), 0.8); + width: 4px; + height: 4px; +} + +/* Resonsive adjustments for different screen sizes */ +@media (max-width: 1200px) { + .second-level-menu .mx-3, + .second-level-menu .mx-4, + .third-level-menu .mx-3, + .third-level-menu .mx-4, + .deepest-menu-item .mx-3, + .deepest-menu-item .mx-4 { + max-width: 140px; + } +} + +@media (max-width: 992px) { + .navigation-item-wrapper span { + max-width: 120px; + } +} \ No newline at end of file diff --git a/assets/img/logo/niise-logo.svg b/assets/img/logo/corradAF-logo.svg similarity index 100% rename from assets/img/logo/niise-logo.svg rename to assets/img/logo/corradAF-logo.svg diff --git a/assets/img/logo/lzs-logo.png b/assets/img/logo/lzs-logo.png new file mode 100644 index 0000000000000000000000000000000000000000..904a2e3b84c991cebfdd47810ac35945164980c5 GIT binary patch literal 12744 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 literal 0 HcmV?d00001 diff --git a/assets/style/css/base/theme.css b/assets/style/css/base/theme.css index 3ea26c4..a6c095c 100644 --- a/assets/style/css/base/theme.css +++ b/assets/style/css/base/theme.css @@ -79,7 +79,7 @@ html[data-theme="biru"] { --color-accent: 255, 204, 0; --color-success: 46, 204, 113; --color-info: 52, 152, 219; - --color-warning: 241, 196, 15; + --color-warning: 246, 141, 32; --color-danger: 231, 76, 60; --text-color: 0, 0, 0; --border-color: 200, 200, 200; @@ -117,7 +117,7 @@ html[data-theme="merah"] { --color-accent: 255, 255, 153; --color-success: 46, 204, 113; --color-info: 52, 152, 219; - --color-warning: 241, 196, 15; + --color-warning: 246, 141, 32; --color-danger: 231, 76, 60; --text-color: 0, 0, 0; --border-color: 200, 200, 200; @@ -155,7 +155,7 @@ html[data-theme="ungu"] { --color-accent: 255, 215, 0; --color-success: 46, 204, 113; --color-info: 52, 152, 219; - --color-warning: 241, 196, 15; + --color-warning: 246, 141, 32; --color-danger: 231, 76, 60; --text-color: 0, 0, 0; --border-color: 200, 200, 200; @@ -193,7 +193,7 @@ html[data-theme="oren"] { --color-accent: 0, 128, 128; --color-success: 46, 204, 113; --color-info: 52, 152, 219; - --color-warning: 241, 196, 15; + --color-warning: 246, 141, 32; --color-danger: 231, 76, 60; --text-color: 0, 0, 0; --border-color: 200, 200, 200; @@ -224,3 +224,45 @@ html[data-theme="oren"] { --tab-radius: 0.5rem; --tw-shadow: #e5eaf2; } + +html[data-theme="LZS"] { + --color-primary: 0, 90, 173; /* #005AAD - Blue */ + --color-secondary: 141, 199, 61; /* #8DC73D - Green */ + --color-accent: 255, 242, 0; /* #FFF200 - Yellow */ + --color-success: 141, 199, 61; /* Using the green for success */ + --color-info: 0, 90, 173; /* Using the blue for info */ + --color-warning: 246, 141, 32; /* Using consistent orange for warning */ + --color-danger: 229, 83, 69; /* Keeping original red for danger */ + --text-color: 0, 0, 0; /* Black text */ + --border-color: 220, 220, 220; /* Light gray for borders */ + --bg-1: 245, 250, 255; /* Very light blue background */ + --bg-2: 255, 255, 255; /* White background */ + --sidebar: 0, 58, 112; /* Darker blue for sidebar - #003A70 */ + --sidebar-menu: 0, 40, 77; /* Even darker blue for sidebar menu - #00284D */ + --sidebar-text: 255, 255, 255; /* White text for sidebar */ + --header: 0, 90, 173; /* Blue header - #005AAD */ + --header-text: 255, 255, 255; /* White text for header */ + --scroll-color: 180, 180, 180; /* Gray scrollbar */ + --scroll-hover-color: 150, 150, 150; /* Darker gray on hover */ + --fk-border-color: 220, 220, 220; /* Light gray for form borders */ + --fk-placeholder-color: 150, 150, 150; /* Gray for placeholders */ + --box-shadow: rgba(0, 90, 173, 0.1) 0px 1px 2px, + rgba(0, 90, 173, 0.08) 0px 0px 2px; /* Blue-tinted shadow */ + --cp-bg: 255, 255, 255; /* White background */ + --rounded-box: 0.5rem; + --rounded-btn: 0.5rem; + --rounded-badge: 1.9rem; + --animation-btn: 0.25s; + --animation-input: 0.2s; + --btn-text-case: uppercase; + --btn-focus-scale: 0.95; + --padding-btn: 0.625rem 1.5rem; + --border-btn: 1px; + --tab-border: 1px; + --tab-radius: 0.5rem; + /* Yellow accents in specific UI elements */ + --active-menu-bg: 255, 242, 0, 0.1; /* Subtle yellow background for active menu items */ + --active-menu-border: 255, 242, 0; /* Yellow border for active menu items */ + --focus-ring: 255, 242, 0, 0.5; /* Yellow focus ring */ + --tw-shadow: #e5eaf2; +} diff --git a/assets/style/css/component/button.css b/assets/style/css/component/button.css index 6b7ead2..b783216 100644 --- a/assets/style/css/component/button.css +++ b/assets/style/css/component/button.css @@ -1,41 +1,89 @@ /* RS Button */ .button { @apply w-fit rounded-lg flex justify-center items-center h-fit; + transition: all 0.2s ease; + position: relative; + overflow: hidden; } +/* Enhanced hover effect with slight 3D transition */ .button[class*="button-"]:hover { - background-image: linear-gradient(rgb(0 0 0/10%) 0 0); + transform: translateY(-2px); + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); +} + +.button[class*="button-"]:active { + transform: translateY(0px); + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } .button[class*="button-"]:disabled { opacity: 0.3; cursor: not-allowed; + transform: none; + box-shadow: none; } +/* Primary Button - Blue with yellow accent */ .button.button-primary { @apply bg-primary text-white; + box-shadow: 0 2px 4px rgba(var(--color-primary), 0.3), + inset 0 1px 0 rgba(255, 255, 255, 0.2); + border: 1px solid rgba(var(--color-primary), 0.8); +} + +.button.button-primary:hover::after { + content: ""; + position: absolute; + bottom: 0; + left: 0; + right: 0; + height: 3px; + background-color: rgb(var(--active-menu-border)); + animation: slide-in 0.3s ease forwards; +} + +@keyframes slide-in { + 0% { transform: scaleX(0); opacity: 0; } + 100% { transform: scaleX(1); opacity: 1; } } .button.button-secondary { @apply bg-secondary text-white; + box-shadow: 0 2px 4px rgba(var(--color-secondary), 0.3), + inset 0 1px 0 rgba(255, 255, 255, 0.2); + border: 1px solid rgba(var(--color-secondary), 0.8); } .button.button-success { @apply bg-success text-white; + box-shadow: 0 2px 4px rgba(var(--color-success), 0.3), + inset 0 1px 0 rgba(255, 255, 255, 0.2); + border: 1px solid rgba(var(--color-success), 0.8); } .button.button-info { @apply bg-info text-white; + box-shadow: 0 2px 4px rgba(var(--color-info), 0.3), + inset 0 1px 0 rgba(255, 255, 255, 0.2); + border: 1px solid rgba(var(--color-info), 0.8); } .button.button-warning { @apply bg-warning text-white; + box-shadow: 0 2px 4px rgba(var(--color-warning), 0.3), + inset 0 1px 0 rgba(255, 255, 255, 0.2); + border: 1px solid rgba(var(--color-warning), 0.8); } .button.button-danger { @apply bg-danger text-white; + box-shadow: 0 2px 4px rgba(var(--color-danger), 0.3), + inset 0 1px 0 rgba(255, 255, 255, 0.2); + border: 1px solid rgba(var(--color-danger), 0.8); } +/* Updated outline buttons */ .button[class*="outline-"]:disabled { opacity: 0.3; cursor: not-allowed; @@ -43,50 +91,68 @@ .button.outline-primary { @apply border border-primary text-primary; + box-shadow: 0 1px 3px rgba(var(--color-primary), 0.1); } .button.outline-primary:hover { @apply bg-primary/5; + box-shadow: 0 3px 6px rgba(var(--color-primary), 0.2); + transform: translateY(-1px); } .button.outline-secondary { @apply border border-secondary text-secondary; + box-shadow: 0 1px 3px rgba(var(--color-secondary), 0.1); } .button.outline-secondary:hover { @apply bg-secondary/5; + box-shadow: 0 3px 6px rgba(var(--color-secondary), 0.2); + transform: translateY(-1px); } .button.outline-success { @apply border border-success text-success; + box-shadow: 0 1px 3px rgba(var(--color-success), 0.1); } .button.outline-success:hover { @apply bg-success/5; + box-shadow: 0 3px 6px rgba(var(--color-success), 0.2); + transform: translateY(-1px); } .button.outline-info { @apply border border-info text-info; + box-shadow: 0 1px 3px rgba(var(--color-info), 0.1); } .button.outline-info:hover { @apply bg-info/5; + box-shadow: 0 3px 6px rgba(var(--color-info), 0.2); + transform: translateY(-1px); } .button.outline-warning { @apply border border-warning text-warning; + box-shadow: 0 1px 3px rgba(var(--color-warning), 0.1); } .button.outline-warning:hover { @apply bg-warning/5; + box-shadow: 0 3px 6px rgba(var(--color-warning), 0.2); + transform: translateY(-1px); } .button.outline-danger { @apply border border-danger text-danger; + box-shadow: 0 1px 3px rgba(var(--color-danger), 0.1); } .button.outline-danger:hover { @apply bg-danger/5; + box-shadow: 0 3px 6px rgba(var(--color-danger), 0.2); + transform: translateY(-1px); } .button[class*="text-"]:disabled { @@ -96,63 +162,162 @@ .button.texts-primary { @apply text-primary; + position: relative; } .button.texts-primary:hover { @apply bg-primary/10; } +.button.texts-primary:after { + content: ''; + position: absolute; + width: 0; + height: 2px; + bottom: 0; + left: 0; + background-color: rgb(var(--color-primary)); + transition: width 0.3s ease; +} + +.button.texts-primary:hover:after { + width: 100%; +} + .button.texts-secondary { @apply text-secondary; + position: relative; } .button.texts-secondary:hover { @apply bg-secondary/10; } +.button.texts-secondary:after { + content: ''; + position: absolute; + width: 0; + height: 2px; + bottom: 0; + left: 0; + background-color: rgb(var(--color-secondary)); + transition: width 0.3s ease; +} + +.button.texts-secondary:hover:after { + width: 100%; +} + .button.texts-success { @apply text-success; + position: relative; } .button.texts-success:hover { @apply bg-success/10; } +.button.texts-success:after { + content: ''; + position: absolute; + width: 0; + height: 2px; + bottom: 0; + left: 0; + background-color: rgb(var(--color-success)); + transition: width 0.3s ease; +} + +.button.texts-success:hover:after { + width: 100%; +} + .button.texts-info { @apply text-info; + position: relative; } .button.texts-info:hover { @apply bg-info/10; } +.button.texts-info:after { + content: ''; + position: absolute; + width: 0; + height: 2px; + bottom: 0; + left: 0; + background-color: rgb(var(--color-info)); + transition: width 0.3s ease; +} + +.button.texts-info:hover:after { + width: 100%; +} + .button.texts-warning { @apply text-warning; + position: relative; } .button.texts-warning:hover { @apply bg-warning/10; } +.button.texts-warning:after { + content: ''; + position: absolute; + width: 0; + height: 2px; + bottom: 0; + left: 0; + background-color: rgb(var(--color-warning)); + transition: width 0.3s ease; +} + +.button.texts-warning:hover:after { + width: 100%; +} + .button.texts-danger { @apply text-danger; + position: relative; } .button.texts-danger:hover { @apply bg-danger/10; } +.button.texts-danger:after { + content: ''; + position: absolute; + width: 0; + height: 2px; + bottom: 0; + left: 0; + background-color: rgb(var(--color-danger)); + transition: width 0.3s ease; +} + +.button.texts-danger:hover:after { + width: 100%; +} + .button-sm { @apply text-xs; padding: var(--padding-btn); + line-height: 1.4; } .button-md { @apply text-sm; padding: var(--padding-btn); + line-height: 1.5; } .button-lg { @apply text-base; padding: var(--padding-btn); + line-height: 1.6; } diff --git a/assets/style/css/component/card.css b/assets/style/css/component/card.css index 064e3d2..398055e 100644 --- a/assets/style/css/component/card.css +++ b/assets/style/css/component/card.css @@ -7,13 +7,18 @@ } .card .card-header { - @apply text-xl p-5 font-medium; + @apply text-xl px-6 py-4 font-medium; + line-height: 1.5; + border-bottom: 1px solid rgb(var(--border-color)); } .card .card-body { - @apply px-5 pb-5; + @apply px-6 py-5; + line-height: 1.6; } .card .card-footer { - @apply px-5 pb-5; + @apply px-6 py-4; + line-height: 1.5; + border-top: 1px solid rgb(var(--border-color)); } diff --git a/assets/style/css/example-theme.css b/assets/style/css/example-theme.css new file mode 100644 index 0000000..5fb0932 --- /dev/null +++ b/assets/style/css/example-theme.css @@ -0,0 +1,65 @@ +/* Example Custom Theme for corradAF Base Project */ +/* This file demonstrates how custom themes should be structured */ +/* Define your custom theme variables here */ +/* For example: +:root { + --primary-color: #yourColor; +} +*/ + +:root { + /* Custom color variables */ + --color-primary: 46, 125, 50; /* Green theme */ + --color-secondary: 117, 117, 117; + --color-success: 76, 175, 80; + --color-info: 33, 150, 243; + --color-warning: 255, 152, 0; + --color-danger: 244, 67, 54; + + /* Custom background colors */ + --bg-primary: 245, 245, 245; + --bg-secondary: 255, 255, 255; +} + +/* Dark theme overrides */ +.dark { + --bg-primary: 18, 18, 18; + --bg-secondary: 30, 30, 30; +} + +/* Custom component styles */ +.btn-primary { + background-color: rgb(var(--color-primary)); + border-color: rgb(var(--color-primary)); +} + +.btn-primary:hover { + background-color: rgba(var(--color-primary), 0.8); + border-color: rgba(var(--color-primary), 0.8); +} + +/* Header customizations */ +.w-header { + background: linear-gradient(135deg, rgb(var(--color-primary)), rgba(var(--color-primary), 0.8)); + color: white; +} + +/* Sidebar customizations */ +.vertical-menu { + background-color: rgb(var(--bg-secondary)); + border-right: 1px solid rgba(var(--color-primary), 0.1); +} + +/* Card customizations */ +.card { + background-color: rgb(var(--bg-secondary)); + border: 1px solid rgba(var(--color-primary), 0.1); + box-shadow: 0 2px 4px rgba(var(--color-primary), 0.1); +} + +/* Example of responsive design */ +@media (max-width: 768px) { + .w-header { + background: rgb(var(--color-primary)); + } +} \ No newline at end of file diff --git a/assets/style/scss/custom/layout/vertical.scss b/assets/style/scss/custom/layout/vertical.scss index 50b8c47..cedeba6 100644 --- a/assets/style/scss/custom/layout/vertical.scss +++ b/assets/style/scss/custom/layout/vertical.scss @@ -105,3 +105,62 @@ $xlarge: 1280px; } } } + +// Custom styles for LZS theme +html[data-theme="LZS"] { + .v-layout { + .active-menu { + position: relative; + transition: all 0.2s ease; + + // Yellow glow on active menu items + &:after { + content: ""; + position: absolute; + left: 0; + top: 0; + height: 100%; + width: 4px; + background-color: rgb(var(--active-menu-border)); + } + + // Icon color for active menu + svg { + color: rgb(var(--active-menu-border)); + } + } + + // Form focus states with yellow accent + input:focus, textarea:focus, select:focus { + outline: 2px solid rgba(var(--focus-ring)); + outline-offset: 2px; + } + + // Button hover with yellow accent + .btn-primary:hover, button.bg-primary:hover { + box-shadow: 0 0 0 2px rgba(var(--active-menu-border), 0.3); + } + + // Card headers with subtle yellow accent + .rs-card { + .card-header { + border-bottom: 1px solid rgba(var(--border-color)); + + h2, h3, h4 { + position: relative; + + &:before { + content: ""; + position: absolute; + left: -10px; + top: 50%; + transform: translateY(-50%); + height: 60%; + width: 3px; + background-color: rgb(var(--active-menu-border)); + } + } + } + } + } +} diff --git a/assets/style/scss/main.scss b/assets/style/scss/main.scss index 0ccae1d..39d59d8 100644 --- a/assets/style/scss/main.scss +++ b/assets/style/scss/main.scss @@ -2,18 +2,20 @@ Notes: This file is the main entry point for the SCSS stylesheet. ================================================================================*/ -@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300..700&display=swap"); +/* Import DM Sans font from Google Fonts */ +@import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap"); + html, body { height: 100%; } #__nuxt { - font-family: "Roboto", sans-serif; + font-family: "DM Sans", sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-weight: 400; - letter-spacing: 0.5px; + letter-spacing: -0.5px; /* Changed from -2px to -0.5px for better readability */ font-size: 14px; } diff --git a/components/FontSizeStepper.vue b/components/FontSizeStepper.vue new file mode 100644 index 0000000..86146a0 --- /dev/null +++ b/components/FontSizeStepper.vue @@ -0,0 +1,78 @@ + + + \ No newline at end of file diff --git a/components/Loading.vue b/components/Loading.vue index 3890013..0d3b1fd 100644 --- a/components/Loading.vue +++ b/components/Loading.vue @@ -1,4 +1,6 @@