ExternalVendorCode/lollms-webui
1
0
Fork 0
mirror of https://github.com/ParisNeo/lollms-webui.git synced 2024-12-19 20:37:51 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

upgraded ui

Browse Source
This commit is contained in:
Saifeddine ALOUI 2024-10-18 01:08:27 +02:00
parent d684126b64
commit 9699134a84
9 changed files with 129 additions and 130 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
endpoints/libraries/lollms_client_js.js
View File

@ -928,14 +928,14 @@ constructor(lollms) {
async translateTextChunk(textChunk, outputLanguage = "french", host_address = null, model_name = null, temperature = 0.1, maxGenerationSize = 3000) {
const translationPrompt = [
`!@>system:`,
`${this.lollms.system_message()}`,
`Translate the following text to ${outputLanguage}.`,
`Be faithful to the original text and do not add or remove any information.`,
`Respond only with the translated text.`,
`Do not add comments or explanations.`,
`!@>text to translate:`,
`${this.lollms.user_message("text to translate")}`,
`${textChunk}`,
`!@>translation:`,
`${this.lollms.ai_message("translation")}`,
].join("\n");
const translated = await this.lollms.generateText(

2
lollms_webui.py
View File

@ -68,7 +68,7 @@ def terminate_thread(thread):
else:
ASCIIColors.yellow("Canceled successfully")# The current version of the webui
lollms_webui_version="Nova XIV 🌟"
lollms_webui_version="v14 (code name Saïph 🌟)"

8
web/dist/assets/index-Bo-yP1OD.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

6
web/dist/assets/index-BS65G-yP.js → web/dist/assets/index-BzEWObzC.js vendored
View File

File diff suppressed because one or more lines are too long

8
web/dist/assets/index-JIVTe9o9.css vendored
View File

File diff suppressed because one or more lines are too long

4
web/dist/index.html vendored
View File

@ -6,8 +6,8 @@
<script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LoLLMS WebUI</title>
<script type="module" crossorigin src="/assets/index-BS65G-yP.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-JIVTe9o9.css">
<script type="module" crossorigin src="/assets/index-BzEWObzC.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-Bo-yP1OD.css">
</head>
<body>
<div id="app"></div>

153
web/src/assets/tailwind.css
View File

@ -1,4 +1,4 @@
/* Flat Gray Theme */
/* Soft Bluish Theme */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');
@tailwind base;
@ -29,82 +29,79 @@
@apply hidden;
}
h1 { @apply text-4xl md:text-5xl font-bold text-gray-800 dark:text-gray-100 mb-6; }
h2 { @apply text-3xl font-semibold text-gray-700 dark:text-gray-200 mb-4; }
h3 { @apply text-2xl font-medium text-gray-600 dark:text-gray-300 mb-3; }
h4 { @apply text-xl font-medium text-gray-500 dark:text-gray-400 mb-2; }
h1 { @apply text-4xl md:text-5xl font-bold text-blue-800 dark:text-blue-100 mb-6; }
h2 { @apply text-3xl font-semibold text-blue-700 dark:text-blue-200 mb-4; }
h3 { @apply text-2xl font-medium text-blue-600 dark:text-blue-300 mb-3; }
h4 { @apply text-xl font-medium text-blue-500 dark:text-blue-400 mb-2; }
h1, h2 { @apply border-b border-gray-300 dark:border-gray-600 pb-2; }
h1, h2 { @apply border-b border-blue-300 dark:border-blue-600 pb-2; }
p { @apply text-base text-gray-600 dark:text-gray-300 break-words; }
p { @apply text-base text-blue-600 dark:text-blue-300 break-words; }
ul { @apply list-disc ml-0; }
li { @apply list-disc ml-5; }
ol { @apply list-decimal ml-5; }
:root {
--color-primary: #4a4a4a;
--color-primary-light: #6a6a6a;
--color-secondary: #8a8a8a;
--color-accent: #3a3a3a;
--color-primary: #4a90e2;
--color-primary-light: #6ab7f1;
--color-secondary: #8ab8e0;
--color-accent: #3a7ca1;
--color-light-text-panel: #ffffff;
--color-dark-text-panel: #e0e0e0;
--color-bg-light-panel: #f0f0f0;
--color-bg-light-panel: #f0faff;
--color-bg-light: #ffffff;
--color-bg-light-tone: #e0e0e0;
--color-bg-light-code-block: #f5f5f5;
--color-bg-light-tone-panel: #d0d0d0;
--color-bg-light-discussion: #f8f8f8;
--color-bg-light-discussion-odd: #f0f0f0;
--color-bg-dark: #2a2a2a;
--color-bg-dark-tone: #3a3a3a;
--color-bg-dark-tone-panel: #4a4a4a;
--color-bg-dark-code-block: #3a3a3a;
--color-bg-dark-discussion: #333333;
--color-bg-dark-discussion-odd: #2d2d2d;
--color-bg-light-tone: #e0f0ff;
--color-bg-light-code-block: #f5faff;
--color-bg-light-tone-panel: #d0e0f0;
--color-bg-light-discussion: #f8faff;
--color-bg-light-discussion-odd: #f0faff;
--color-bg-dark: #0a0a1a; /* Updated to a darker blue */
--color-bg-dark-tone: #151521; /* Updated to a darker blue */
--color-bg-dark-tone-panel: #1c1c2a; /* Updated to a darker blue */
--color-bg-dark-code-block: #151521; /* Updated to a darker blue */
--color-bg-dark-discussion: #0e0e1a; /* Updated to a darker blue */
--color-bg-dark-discussion-odd: #0d0d1a; /* Updated to a darker blue */
}
textarea, input, select {
@apply bg-gray-100 dark:bg-gray-800;
@apply bg-blue-100 dark:bg-blue-900;
}
.background-color {
@apply bg-gray-100 dark:bg-gray-900 min-h-screen;
@apply bg-gradient-to-br from-blue-100 to-purple-300 dark:from-blue-800 dark:to-purple-900 min-h-screen;
}
.toolbar-color {
@apply text-gray-700 dark:text-gray-200 bg-gray-200 dark:bg-gray-800 rounded-lg shadow-md;
@apply text-blue-700 dark:text-blue-200 bg-blue-200 dark:bg-blue-800 rounded-lg shadow-md;
}
.panels-color {
@apply text-gray-700 dark:text-gray-200 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-md;
@apply text-blue-700 dark:text-blue-200 bg-blue-100 dark:bg-blue-800 rounded-lg shadow-md;
}
.unicolor-panels-color {
@apply bg-gray-200 dark:bg-gray-700;
@apply bg-blue-200 dark:bg-blue-700;
}
.chatbox-color {
@apply bg-gray-50 dark:bg-gray-800;
@apply bg-blue-50 dark:bg-blue-800;
}
.message {
@apply relative w-full rounded-lg m-2 shadow-md border border-gray-300 dark:border-gray-600 flex flex-col flex-grow flex-wrap overflow-visible p-5 pb-3 text-lg;
@apply relative w-full rounded-lg border border-blue-300 dark:border-blue-600 flex flex-col flex-grow flex-wrap overflow-visible p-5 pb-3 text-lg;
@apply bg-blue-100 text-blue-900 dark:bg-gradient-to-br dark:from-blue-900 dark:to-blue-800 dark:text-blue-100; /* Added gradient for dark mode */
}
.message:hover {
@apply border-gray-400 dark:border-gray-500;
}
.message {
@apply bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-200;
@apply border-blue-400 dark:border-blue-500;
}
.message:nth-child(even) {
@apply bg-gray-50 dark:bg-gray-800;
@apply bg-blue-50 dark:bg-blue-900; /* Darker background for even messages */
}
.message:nth-child(odd) {
@apply bg-gray-100 dark:bg-gray-700;
@apply bg-blue-100 dark:bg-blue-800; /* Darker background for odd messages */
}
.message-header {
@ -116,71 +113,71 @@ textarea, input, select {
}
body {
@apply bg-gray-100 dark:bg-gray-900 min-h-screen text-base;
@apply bg-blue-100 dark:bg-blue-900 min-h-screen text-base;
}
.discussion {
@apply mr-2 bg-gray-200 dark:bg-gray-700 text-xs;
@apply mr-2 bg-blue-100 dark:bg-blue-900 text-xs;
}
.discussion-hilighted {
@apply bg-gray-300 dark:bg-gray-600 text-xs;
@apply bg-blue-200 dark:bg-blue-800 text-xs;
}
.bg-gradient-welcome {
@apply bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-800 dark:to-gray-900;
@apply bg-gradient-to-br from-blue-100 to-purple-300 dark:from-blue-800 dark:to-purple-900;
}
.bg-gradient-progress {
@apply bg-gradient-to-r from-gray-200 to-gray-300 dark:from-gray-700 dark:to-gray-600;
@apply bg-gradient-to-r from-blue-200 to-blue-300 dark:from-blue-700 dark:to-blue-600;
}
.text-gradient-title {
@apply text-transparent bg-clip-text bg-gradient-to-r from-gray-700 to-gray-500 dark:from-gray-300 dark:to-gray-500;
@apply text-transparent bg-clip-text bg-gradient-to-r from-blue-700 to-blue-500 dark:from-blue-300 dark:to-blue-500;
}
.text-subtitle {
@apply text-gray-600 dark:text-gray-400;
@apply text-blue-600 dark:text-blue-400;
}
.text-author {
@apply text-gray-500 dark:text-gray-400;
@apply text-blue-500 dark:text-blue-400;
}
.text-loading {
@apply text-gray-700 dark:text-gray-300;
@apply text-blue-700 dark:text-blue-300;
}
.text-progress {
@apply text-gray-600 dark:text-gray-400;
@apply text-blue-600 dark:text-blue-400;
}
.btn-primary {
@apply bg-gray-600 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded;
@apply bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded;
}
.btn-secondary {
@apply bg-gray-400 hover:bg-gray-500 text-white font-bold py-2 px-4 rounded;
@apply bg-blue-400 hover:bg-blue-500 text-white font-bold py-2 px-4 rounded;
}
.card {
@apply bg-white dark:bg-gray-800 rounded-lg shadow-md p-6;
@apply bg-white dark:bg-blue-800 rounded-lg shadow-md p-6;
}
.input {
@apply bg-gray-100 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md px-4 py-2 focus:outline-none focus:ring-2 focus:ring-gray-500 dark:focus:ring-gray-400;
@apply bg-blue-100 dark:bg-blue-700 border border-blue-300 dark:border-blue-600 rounded-md px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400;
}
.label {
@apply block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1;
@apply block text-sm font-medium text-blue-700 dark:text-blue-300 mb-1;
}
.link {
@apply text-gray-600 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-200;
@apply text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200;
}
.navbar-container {
@apply text-gray-700 dark:text-gray-200 bg-gray-200 dark:bg-gray-800 rounded shadow-lg;
@apply text-blue-700 dark:text-blue-200 bg-blue-200 dark:bg-blue-800 rounded shadow-lg;
}
.game-menu {
@ -192,13 +189,13 @@ body {
}
.menu-item {
@apply mb-2 px-4 py-2 text-gray-600 dark:text-gray-300 font-bold text-lg transition-all duration-300 ease-in-out;
@apply hover:text-gray-800 hover:dark:text-gray-100 hover:transform hover:-translate-y-1;
@apply mb-2 px-4 py-2 text-blue-600 dark:text-blue-300 font-bold text-lg transition-all duration-300 ease-in-out;
@apply hover:text-blue-800 hover:dark:text-blue-200 hover:transform hover:-translate-y-1;
}
.menu-item.active-link {
@apply rounded-t-md border-gray-500 text-shadow-custom text-gray-800 font-bold text-lg transition-all duration-300 ease-in-out scale-105;
@apply hover:text-gray-900 hover:dark:text-gray-50 hover:transform hover:-translate-y-1;
@apply rounded-t-md border-blue-500 dark:text-blue-300 text-shadow-custom text-blue-800 font-bold text-lg transition-all duration-300 ease-in-out scale-105;
@apply hover:text-blue-900 hover:dark:text-blue-200 hover:transform hover:-translate-y-1;
text-shadow: 0 0 10px rgba(128, 128, 128, 0.5);
}
@ -209,13 +206,13 @@ body {
left: 0;
width: 100%;
height: 5px;
background: linear-gradient(to right, #4a4a4a, #8a8a8a, #4a4a4a);
background: linear-gradient(to right, #4a90e2, #8ab8e0, #4a90e2);
border-radius: 10px;
animation: shimmer 2s infinite;
}
.dark .menu-item.active-link::before {
background: linear-gradient(to right, #6a6a6a, #aaaaaa, #6a6a6a);
background: linear-gradient(to right, #6ab7f1, #aaaaaa, #6ab7f1);
}
@keyframes shimmer {
@ -235,7 +232,7 @@ body {
}
.app-card {
@apply transition-all duration-300 ease-in-out bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-100 shadow-md hover:shadow-lg;
@apply transition-all duration-300 ease-in-out bg-blue-100 dark:bg-blue-800 text-blue-800 dark:text-blue-100 shadow-md hover:shadow-lg;
}
.app-card:hover {
@ -252,11 +249,11 @@ button:hover {
.scrollbar-thin {
scrollbar-width: thin;
scrollbar-color: theme('colors.gray.400') theme('colors.gray.200');
scrollbar-color: theme('colors.blue.400') theme('colors.blue.200');
}
.dark .scrollbar-thin {
scrollbar-color: theme('colors.gray.600') theme('colors.gray.800');
scrollbar-color: theme('colors.blue.600') theme('colors.blue.800');
}
.scrollbar-thin::-webkit-scrollbar {
@ -264,15 +261,15 @@ button:hover {
}
.scrollbar-thin::-webkit-scrollbar-track {
@apply bg-gray-200 dark:bg-gray-800 rounded-full;
@apply bg-blue-200 dark:bg-blue-800 rounded-full;
}
.scrollbar-thin::-webkit-scrollbar-thumb {
@apply bg-gray-400 dark:bg-gray-600 rounded-full;
@apply bg-blue-400 dark:bg-blue-600 rounded-full;
}
.scrollbar-thin::-webkit-scrollbar-thumb:hover {
@apply bg-gray-500 dark:bg-gray-500;
@apply bg-blue-500 dark:bg-blue-500;
}
.btn {
@ -280,27 +277,27 @@ button:hover {
}
.btn-primary {
@apply bg-gray-600 text-white hover:bg-gray-700 focus:ring-4 focus:ring-gray-300 dark:focus:ring-gray-600;
@apply bg-blue-600 text-white hover:bg-blue-700 focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-600;
}
.btn-secondary {
@apply bg-gray-200 text-gray-700 hover:bg-gray-300 focus:ring-4 focus:ring-gray-200 dark:bg-gray-700 dark:text-gray-200 dark:hover:bg-gray-600 dark:focus:ring-gray-600;
@apply bg-blue-200 text-blue-700 hover:bg-blue-300 focus:ring-4 focus:ring-blue-200 dark:bg-blue-700 dark:text-blue-200 dark:hover:bg-blue-600 dark:focus:ring-blue-600;
}
.search-input {
@apply w-full border-b-2 border-gray-300 dark:border-gray-600 py-2 px-4 pl-10 transition-colors duration-300 ease-in-out focus:outline-none focus:border-gray-500 dark:focus:border-gray-400 bg-transparent text-gray-800 dark:text-gray-100;
@apply w-full border-b-2 border-blue-300 dark:border-blue-600 py-2 px-4 pl-10 transition-colors duration-300 ease-in-out focus:outline-none focus:border-blue-500 dark:focus:border-blue-400 bg-transparent text-blue-800 dark:text-blue-100;
}
.scrollbar {
@apply scrollbar-thin scrollbar-track-gray-200 scrollbar-thumb-gray-400 hover:scrollbar-thumb-gray-500 dark:scrollbar-track-gray-700 dark:scrollbar-thumb-gray-600 dark:hover:scrollbar-thumb-gray-500;
@apply scrollbar-thin scrollbar-track-blue-200 scrollbar-thumb-blue-400 hover:scrollbar-thumb-blue-500 dark:scrollbar-track-blue-700 dark:scrollbar-thumb-blue-600 dark:hover:scrollbar-thumb-blue-500;
}
.card-title {
@apply text-xl font-bold text-gray-800 dark:text-gray-100 mb-2;
@apply text-xl font-bold text-blue-800 dark:text-blue-100 mb-2;
}
.card-content {
@apply text-gray-600 dark:text-gray-300;
@apply text-blue-600 dark:text-blue-300;
}
.card-footer {
@ -308,19 +305,19 @@ button:hover {
}
.card-footer-button {
@apply bg-gray-600 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded;
@apply bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded;
}
.subcard {
@apply bg-gray-50 dark:bg-gray-800 rounded-lg shadow-md p-4;
@apply bg-blue-50 dark:bg-blue-800 rounded-lg shadow-md p-4;
}
.subcard-title {
@apply text-lg font-bold text-gray-800 dark:text-gray-100 mb-2;
@apply text-lg font-bold text-blue-800 dark:text-blue-100 mb-2;
}
.subcard-content {
@apply text-gray-600 dark:text-gray-300;
@apply text-blue-600 dark:text-blue-300;
}
.subcard-footer {
@ -328,5 +325,5 @@ button:hover {
}
.subcard-footer-button {
@apply bg-gray-600 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded;
}
@apply bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded;
}

2
web/src/components/Discussion.vue
View File

@ -1,6 +1,6 @@
<template>
<div
:class="selected ? 'discussion-hilighted min-w-[11rem] max-w-[12rem]' : 'discussion min-w-[12rem] max-w-[12rem]'"
:class="selected ? 'discussion-hilighted min-w-[14rem] max-w-[14rem]' : 'discussion min-w-[14rem] max-w-[14rem]'"
class="m-1 py-2 flex flex-row sm:flex-row flex-wrap flex-shrink-0 items-center rounded-md duration-75 group cursor-pointer relative"
:id="'dis-' + id"
@click.stop="selectEvent()"

70
web/src/views/DiscussionsView.vue
View File

@ -52,12 +52,9 @@
</transition>
<transition name="slide-right">
<div v-if="showLeftPanel"
class="relative flex flex-col no-scrollbar shadow-lg min-w-[12rem] max-w-[12rem]"
class="relative flex flex-col no-scrollbar shadow-lg min-w-[15rem] max-w-[15rem]"
>
<!-- LEFT SIDE PANEL -->
<div id="leftPanel" class="flex flex-col flex-grow overflow-y-scroll no-scrollbar "
@dragover.stop.prevent="setDropZoneDiscussion()">
<div class="toolbar discussion">
<div class="toolbar discussion">
<!-- Toolbar container -->
<div class="toolbar-container">
<!-- "+" button -->
@ -160,25 +157,9 @@
<button @click="importDiscussions" class="text-sm hover:text-secondary dark:hover:text-secondary-light">LOLLMS</button>
<button @click="importChatGPT" class="text-sm hover:text-secondary dark:hover:text-secondary-light">ChatGPT</button>
</div>
</div>
</div>
<!-- Search bar -->
<div v-if="isSearch" class="absolute top-0 left-12 w-64 p-4 bg-bg-light dark:bg-bg-dark">
<div class="relative">
<div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
<div class="scale-75">
<i data-feather="search"></i>
</div>
</div>
<div class="absolute inset-y-0 right-0 flex items-center pr-3">
<div class="hover:text-secondary duration-75 active:scale-90" :class="filterTitle ? 'visible' : 'invisible'" title="Clear" @click="filterTitle = ''">
<i data-feather="x"></i>
</div>
</div>
<input type="search" id="default-search" class="block w-full p-2 pl-10 pr-10 text-sm border border-gray-300 rounded-lg bg-bg-light focus:ring-secondary focus:border-secondary dark:bg-bg-dark dark:border-gray-600 dark:placeholder-gray-400 dark:focus:ring-secondary dark:focus:border-secondary" placeholder="Search..." title="Filter discussions by title" v-model="filterTitle" @input="filterDiscussions()" />
</div>
</div>
<!-- Checkbox operations -->
<div v-if="isCheckbox" class="absolute top-0 left-12 w-64 p-4 bg-bg-light dark:bg-bg-dark">
@ -215,7 +196,28 @@
</div>
</div>
</div>
</div>
<!-- Search bar -->
<div v-if="isSearch" class="w-full p-4 bg-bg-light dark:bg-bg-dark">
<div class="relative">
<div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
<div class="scale-75">
<i data-feather="search"></i>
</div>
</div>
<div class="absolute inset-y-0 right-0 flex items-center pr-3">
<div class="hover:text-secondary duration-75 active:scale-90" :class="filterTitle ? 'visible' : 'invisible'" title="Clear" @click="filterTitle = ''">
<i data-feather="x"></i>
</div>
</div>
<input type="search" id="default-search" class="block w-full p-2 pl-10 pr-10 text-sm border border-gray-300 rounded-lg bg-bg-light focus:ring-secondary focus:border-secondary dark:bg-bg-dark dark:border-gray-600 dark:placeholder-gray-400 dark:focus:ring-secondary dark:focus:border-secondary" placeholder="Search..." title="Filter discussions by title" v-model="filterTitle" @input="filterDiscussions()" />
</div>
</div>
<!-- LEFT SIDE PANEL -->
<div id="leftPanel" class="flex flex-col flex-grow overflow-y-scroll overflow-x-hidden custom-scrollbar "
@dragover.stop.prevent="setDropZoneDiscussion()">
<div class="relative flex flex-row flex-grow mb-10 z-0 w-full">
<!-- DISCUSSION LIST -->
<div class="mx-0 flex flex-col flex-grow w-full " :class="isDragOverDiscussion ? 'pointer-events-none' : ''">
@ -245,7 +247,7 @@
</div>
</div>
<div class="flex flex-row">
<div class="absolute h-15 bottom-0 left-0 w-full unicolor-panels-color light-text-panel py-4 cursor-pointer text-light-text-panel dark:text-dark-text-panel hover:text-secondary" @click="showDatabaseSelector">
<div class="h-15 w-full py-4 cursor-pointer text-light-text-panel dark:text-dark-text-panel hover:text-secondary" @click="showDatabaseSelector">
<p class="text-center font-large font-bold text-l drop-shadow-md align-middle">{{ formatted_database_name.replace("_"," ") }}</p>
</div>
</div>
@ -561,20 +563,20 @@ animation: custom-pulse 2s infinite;
.toolbar {
@apply relative w-full;
}
@apply relative w-full;
}
.toolbar-container {
@apply flex items-center h-10; /* h-10 is equivalent to 40px */
}
.toolbar-container {
@apply flex items-center h-10; /* h-10 is equivalent to 40px */
}
.toolbar-button {
@apply bg-transparent border-none cursor-pointer p-2 transition-colors duration-300;
}
.toolbar-button {
@apply bg-transparent border-none cursor-pointer p-2 transition-colors duration-300;
}
.toolbar-button:hover {
@apply text-blue-500; /* Assuming #007bff is close to Tailwind's blue-500 */
}
.toolbar-button:hover {
@apply text-blue-500; /* Assuming #007bff is close to Tailwind's blue-500 */
}
.menu-container {
position: relative;