enha

lollms_core

@@ -1 +1 @@
-Subproject commit 0b1f2e54d4b2cd69e81202aada4fa3100ae0646b
+Subproject commit 8ac4065bb16445057daa4ab146c71d8275198b26

web/dist/fonts/PTSans/OFL.txt

@@ -0,0 +1,94 @@
+Copyright (c) 2010, ParaType Ltd. (http://www.paratype.com/public),
+with Reserved Font Names "PT Sans" and "ParaType".
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+https://openfontlicense.org
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

web/dist/index.html

@@ -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-GO8UhArc.js"></script>
+    <script type="module" crossorigin src="/assets/index-D4J9inFv.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-tBtoZ6ks.css">
+    <link rel="stylesheet" crossorigin href="/assets/index-Hw2bq5xZ.css">
   </head>
   <body>
     <div id="app"></div>

web/dist/themes/amber.css

@@ -0,0 +1,380 @@
+/* Custom font */
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap');
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  html {
+    @apply scroll-smooth;
+  }
+  @font-face {
+    font-family: 'Roboto';
+    src: url('./fonts/Roboto/Roboto-Regular.ttf') format('truetype');
+  }
+  @font-face {
+    font-family: 'PTSans';
+    src: url('./fonts/PTSans/PTSans-Regular.ttf') format('truetype');
+  }
+}
+
+@layer utilities {
+  .no-scrollbar::-webkit-scrollbar {
+    display: none;
+  }
+
+  .no-scrollbar {
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+  }
+}
+
+.display-none {
+  @apply hidden;
+}
+
+h1 { @apply text-4xl md:text-5xl font-bold text-gray-800 dark:text-gray-200 mb-6; }
+h2 {
+@apply text-3xl font-semibold text-gray-700 dark:text-gray-300 mb-4;
+}
+
+h3 {
+@apply text-2xl font-medium text-gray-600 dark:text-gray-400 mb-3;
+}
+
+h4 {
+@apply text-xl font-medium text-gray-500 dark:text-gray-500 mb-2;
+}
+
+/* Optional: Add a subtle bottom border to headers for added distinction */
+h1, h2{
+@apply border-b border-gray-200 dark:border-gray-700 pb-2;
+}
+
+p {
+  @apply text-base text-gray-600 dark:text-gray-400 break-words;
+}
+
+ul {
+  @apply list-disc ml-0;
+}
+
+li {
+  @apply list-disc ml-5;
+}
+
+ol {
+  @apply list-decimal ml-5;
+}
+
+:root {
+  --color-primary: #d97706;
+  --color-primary-light: #fbbf24;
+  --color-secondary: #b45309;
+  --color-accent: #92400e;
+  --color-light-text-panel: #fef3c7;
+  --color-dark-text-panel: #78350f;
+  --color-bg-light-panel: #fef3c7;
+  --color-bg-light: #fffbeb;
+  --color-bg-light-tone: #fde68a;
+  --color-bg-light-code-block: #fef3c7;
+  --color-bg-light-tone-panel: #fbbf24;
+  --color-bg-light-discussion: #fffbeb;
+  --color-bg-light-discussion-odd: #fef3c7;
+  --color-bg-dark: #292524;
+  --color-bg-dark-tone: #44403c;
+  --color-bg-dark-tone-panel: #57534e;
+  --color-bg-dark-code-block: #78350f;
+  --color-bg-dark-discussion: #44403c;
+  --color-bg-dark-discussion-odd: #292524;
+}
+
+/* For both textarea and input elements */
+textarea, input, select {
+  @apply bg-gray-100 dark:bg-gray-800;
+}
+
+.background-color {
+  @apply bg-gradient-to-br from-amber-50 to-amber-100 dark:from-gray-900 dark:to-gray-800 min-h-screen;
+}
+
+.toolbar-color {
+  @apply  text-gray-800 dark:text-gray-200 bg-gradient-to-r from-amber-100 to-amber-200 dark:from-gray-800 dark:to-gray-700 rounded-full shadow-lg
+}
+
+.panels-color {
+  @apply text-gray-800 dark:text-gray-200 bg-gradient-to-r from-amber-50 to-amber-100 dark:from-gray-800 dark:to-gray-700 rounded shadow-lg;
+}
+
+.unicolor-panels-color {
+  @apply bg-amber-100 dark:bg-gray-800
+}
+
+.chatbox-color {
+  @apply bg-gradient-to-br from-amber-100 to-amber-200 dark:from-gray-800 dark:to-gray-700
+}
+
+/* Base message styling */ 
+.message { @apply relative w-full rounded-lg m-2 shadow-lg border border-gray-200 dark:border-gray-700 flex flex-col flex-grow flex-wrap overflow-visible p-5 pb-3 text-lg; }
+.message:hover {
+@apply border-amber-300 dark:border-amber-700;
+}
+
+/* Light theme */
+.message {
+@apply bg-amber-50 text-gray-800;
+}
+
+/* Dark theme */
+.dark .message {
+@apply bg-gray-800 text-gray-200;
+}
+
+/* Alternating backgrounds for better distinction */
+.message:nth-child(even) {
+@apply bg-amber-100 dark:bg-gray-700;
+}
+
+.message:nth-child(odd) {
+@apply bg-amber-50 dark:bg-gray-800;
+}
+
+/* Additional styling for more professional look */
+.message-header {
+@apply text-xl font-semibold mb-2;
+}
+
+.message-content {
+@apply text-lg leading-relaxed;
+}
+
+/* Body styling */
+body {
+@apply bg-gradient-to-br from-amber-50 to-amber-100 dark:from-gray-900 dark:to-gray-800 min-h-screen text-base;
+}
+
+.discussion{
+  @apply mr-2 bg-gradient-to-r from-amber-200 to-amber-300 dark:from-gray-700 dark:to-gray-600 hover:from-amber-100 hover:to-amber-200 hover:dark:from-gray-600 hover:dark:to-gray-500
+}
+
+.discussion-hilighted{
+  @apply bg-gradient-to-r from-amber-100 to-amber-200 dark:from-gray-700 dark:to-gray-600 hover:from-amber-50 hover:to-amber-100 hover:dark:from-gray-600 hover:dark:to-gray-500
+}
+
+.bg-gradient-welcome {
+  @apply bg-gradient-to-br from-amber-50 to-amber-100 dark:from-gray-900 dark:to-gray-800;
+}
+
+.bg-gradient-progress {
+  @apply bg-gradient-to-r from-amber-100 to-amber-200 dark:from-gray-800 dark:to-gray-700;
+}
+
+.text-gradient-title {
+  @apply text-transparent bg-clip-text bg-gradient-to-r from-amber-600 to-amber-500 dark:from-amber-400 dark:to-amber-300;
+}
+
+.text-subtitle {
+  @apply text-gray-600 dark:text-gray-400;
+}
+
+.text-author {
+  @apply text-gray-500 dark:text-gray-500;
+}
+
+.text-loading {
+  @apply text-gray-700 dark:text-gray-300;
+}
+
+.text-progress {
+  @apply text-amber-600 dark:text-amber-400;
+}
+
+.btn-primary {
+  @apply bg-amber-500 hover:bg-amber-600 text-white font-bold py-2 px-4 rounded;
+}
+
+.btn-secondary {
+  @apply bg-amber-300 hover:bg-amber-400 text-gray-800 font-bold py-2 px-4 rounded;
+}
+
+.card {
+  @apply bg-white dark:bg-gray-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-amber-500 dark:focus:ring-amber-400;
+}
+
+.label {
+  @apply block text-sm font-medium text-gray-600 dark:text-gray-400 mb-1;
+}
+
+.link {
+  @apply text-amber-600 hover:text-amber-700 dark:text-amber-400 dark:hover:text-amber-300;
+}
+
+.navbar-container {
+  @apply  text-gray-800 dark:text-gray-200 bg-gradient-to-r from-amber-100 to-amber-200 dark:from-gray-800 dark:to-gray-700 rounded shadow-lg
+}
+
+.game-menu {
+  @apply flex justify-center items-center relative;
+}
+
+.text-shadow-custom {
+  text-shadow: 1px 1px 0px #fef3c7, -1px -1px 0px #fef3c7, 1px -1px 0px #fef3c7, -1px 1px 0px #fef3c7;
+}
+
+.menu-item {
+  @apply mb-2 px-4 py-2 text-gray-600 dark:text-gray-400 font-bold text-lg transition-all duration-300 ease-in-out;
+  @apply hover:text-amber-600 hover:dark:text-amber-300 hover:transform hover:-translate-y-1;
+}
+
+.menu-item.active-link {
+  @apply rounded-t-md border-amber-500 text-shadow-custom text-amber-700 font-bold text-lg transition-all duration-300 ease-in-out scale-105;
+  @apply hover:text-amber-800 hover:dark:text-amber-200 hover:transform hover:-translate-y-1;
+  /* Glow effect on text */
+  text-shadow: 0 0 10px rgba(245, 158, 11, 0.3);
+}
+
+.menu-item.active-link::before {
+  content: '';
+  position: absolute;
+  bottom: -5px;
+  left: 0;
+  width: 100%;
+  height: 5px;
+  background: linear-gradient(to right, #fbbf24, #f59e0b, #fbbf24); /* Softer amber colors */
+  border-radius: 10px;
+  animation: shimmer 2s infinite;
+}
+
+.dark .menu-item.active-link::before {
+  background: linear-gradient(to right, #92400e, #b45309, #92400e); /* Dark mode softer amber colors */
+}
+
+@keyframes shimmer {
+  0% { background-position: -100% 0; }
+  100% { background-position: 100% 0; }
+}
+
+@keyframes bounce {
+  0%, 100% { transform: translateY(0); }
+  50% { transform: translateY(-5px); }
+}
+
+.feather-emoji {
+  display: inline-block;
+  margin-left: 5px;
+  animation: bounce 2s infinite;
+}
+
+@keyframes lightsaber {
+  0% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.1);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+.app-card {
+  @apply transition-all duration-300 ease-in-out bg-gradient-to-br from-amber-50 to-amber-100 dark:from-gray-800 dark:to-gray-700 text-gray-800 dark:text-gray-200 shadow-md hover:shadow-lg;
+}
+
+.app-card:hover {
+  @apply transform -translate-y-1;
+}
+
+button {
+  @apply transition-all duration-300 ease-in-out;
+}
+
+button:hover {
+  @apply transform -translate-y-0.5;
+}
+
+.scrollbar-thin {
+  scrollbar-width: thin;
+  scrollbar-color: theme('colors.amber.300') theme('colors.amber.100');
+}
+
+.dark .scrollbar-thin {
+  scrollbar-color: theme('colors.gray.600') theme('colors.gray.800');
+}
+
+.scrollbar-thin::-webkit-scrollbar {
+  @apply w-2;
+}
+
+.scrollbar-thin::-webkit-scrollbar-track {
+  @apply bg-amber-100 dark:bg-gray-800 rounded-full;
+}
+
+.scrollbar-thin::-webkit-scrollbar-thumb {
+  @apply bg-amber-300 dark:bg-gray-600 rounded-full;
+}
+
+.scrollbar-thin::-webkit-scrollbar-thumb:hover {
+  @apply bg-amber-400 dark:bg-gray-500;
+}
+
+.btn {
+  @apply font-semibold py-2 px-4 rounded-lg transition-all duration-300 ease-in-out shadow-md flex items-center;
+}
+
+.btn-primary {
+  @apply bg-amber-500 text-white hover:bg-amber-600 focus:ring-4 focus:ring-amber-300 dark:focus:ring-amber-700;
+}
+
+.btn-secondary {
+  @apply bg-amber-200 text-gray-800 hover:bg-amber-300 focus:ring-4 focus:ring-amber-200 dark:bg-gray-700 dark:text-gray-200 dark:hover:bg-gray-600 dark:focus:ring-gray-600;
+}
+
+.search-input {
+  @apply w-full border-b-2 border-amber-200 dark:border-gray-700 py-2 px-4 pl-10 transition-colors duration-300 ease-in-out focus:outline-none focus:border-amber-500 dark:focus:border-amber-400 bg-transparent text-gray-800 dark:text-gray-200;
+}
+
+.scrollbar {
+  @apply scrollbar-thin scrollbar-track-bg-light-tone scrollbar-thumb-bg-light-tone-panel hover:scrollbar-thumb-primary dark:scrollbar-track-bg-dark-tone dark:scrollbar-thumb-bg-dark-tone-panel dark:hover:scrollbar-thumb-primary active:scrollbar-thumb-secondary
+}
+
+.card-title {
+  @apply text-xl font-bold text-gray-800 dark:text-gray-200 mb-2;
+}
+
+.card-content {
+  @apply text-gray-600 dark:text-gray-400;
+}
+
+.card-footer {
+  @apply mt-4 flex justify-between items-center;
+}
+
+.card-footer-button {
+  @apply bg-amber-500 hover:bg-amber-600 text-white font-bold py-2 px-4 rounded;
+}
+
+/* Subcard styles */
+.subcard {
+  @apply bg-amber-50 dark:bg-gray-700 rounded-lg shadow-md p-4;
+}
+
+.subcard-title {
+  @apply text-lg font-bold text-gray-800 dark:text-gray-200 mb-2;
+}
+
+.subcard-content {
+  @apply text-gray-600 dark:text-gray-400;
+}
+
+.subcard-footer {
+  @apply mt-4 flex justify-between items-center;
+}
+
+.subcard-footer-button {
+  @apply bg-amber-500 hover:bg-amber-600 text-white font-bold py-2 px-4 rounded;
+}

web/dist/themes/borg.css

@@ -0,0 +1,265 @@
+/* Borg Collective Theme */
+@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Orbitron:wght@400;500;700&display=swap');
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  html {
+    @apply scroll-smooth;
+  }
+  body {
+    font-family: 'Share Tech Mono', monospace;
+  }
+}
+
+@layer utilities {
+  .no-scrollbar::-webkit-scrollbar {
+    display: none;
+  }
+
+  .no-scrollbar {
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+  }
+}
+
+.display-none {
+  @apply hidden;
+}
+
+h1 { @apply text-4xl md:text-5xl font-bold text-green-400 font-['Orbitron'] mb-6; }
+h2 { @apply text-3xl font-semibold text-green-500 font-['Orbitron'] mb-4; }
+h3 { @apply text-2xl font-medium text-green-600 font-['Orbitron'] mb-3; }
+h4 { @apply text-xl font-medium text-green-400 font-['Orbitron'] mb-2; }
+
+h1, h2 { @apply border-b border-green-600 pb-2; }
+
+p { @apply text-base text-gray-300 break-words; }
+ul { @apply list-disc ml-0; }
+li { @apply list-disc ml-5; }
+ol { @apply list-decimal ml-5; }
+
+:root {
+  --color-primary: #00ff00;
+  --color-primary-light: #40ff40;
+  --color-secondary: #1a1a1a;
+  --color-accent: #00cc00;
+  --color-light-text-panel: #00ff00;
+  --color-dark-text-panel: #40ff40;
+  --color-bg-light-panel: #121212;
+  --color-bg-light: #0a0a0a;
+  --color-bg-light-tone: #1a1a1a;
+  --color-bg-light-code-block: #080808;
+  --color-bg-light-tone-panel: #151515;
+  --color-bg-light-discussion: #0f0f0f;
+  --color-bg-light-discussion-odd: #0d0d0d;
+  --color-bg-dark: #000000;
+  --color-bg-dark-tone: #0a0a0a;
+  --color-bg-dark-tone-panel: #101010;
+  --color-bg-dark-code-block: #080808;
+  --color-bg-dark-discussion: #050505;
+  --color-bg-dark-discussion-odd: #030303;
+}
+
+textarea, input, select {
+  @apply bg-gray-900 border-green-600 text-green-400;
+}
+
+.background-color {
+  @apply bg-gradient-to-br from-gray-900 to-black min-h-screen;
+}
+
+.toolbar-color {
+  @apply text-green-400 bg-gray-900 rounded-lg shadow-md border border-green-600;
+}
+
+.panels-color {
+  @apply text-green-400 bg-gray-900 border border-green-600;
+}
+
+.unicolor-panels-color {
+  @apply bg-gray-900 border border-green-600;
+}
+
+.chatbox-color {
+  @apply bg-black text-green-400;
+}
+
+.message {
+  @apply relative w-full rounded-lg border border-green-600 flex flex-col flex-grow flex-wrap overflow-visible p-5 pb-3 text-lg;
+  @apply bg-gray-900 text-green-400;
+}
+
+.message:hover {
+  @apply border-green-400;
+}
+
+.message:nth-child(even) {
+  @apply bg-gray-900;
+}
+
+.message:nth-child(odd) {
+  @apply bg-gray-800;
+}
+
+.message-header {
+  @apply text-xl font-['Orbitron'] font-semibold mb-2 text-green-400;
+}
+
+.message-content {
+  @apply text-lg leading-relaxed text-gray-300;
+}
+
+body {
+  @apply bg-black text-green-400 min-h-screen text-base;
+}
+
+.discussion {
+  @apply mr-2 text-xs text-green-400;
+}
+
+.discussion-hilighted {
+  @apply bg-gray-800 text-green-400 text-xs;
+}
+
+.bg-gradient-welcome {
+  @apply bg-gradient-to-br from-gray-900 to-black;
+}
+
+.bg-gradient-progress {
+  @apply bg-gradient-to-r from-green-900 to-green-700;
+}
+
+.text-gradient-title {
+  @apply text-transparent bg-clip-text bg-gradient-to-r from-green-400 to-green-600;
+}
+
+.text-subtitle {
+  @apply text-green-500;
+}
+
+.text-author {
+  @apply text-green-400;
+}
+
+.text-loading {
+  @apply text-green-400;
+}
+
+.text-progress {
+  @apply text-green-500;
+}
+
+.btn-primary {
+  @apply bg-green-700 hover:bg-green-600 text-black font-bold py-2 px-4 rounded;
+}
+
+.btn-secondary {
+  @apply bg-gray-800 hover:bg-gray-700 text-green-400 font-bold py-2 px-4 rounded border border-green-600;
+}
+
+.card {
+  @apply bg-gray-900 rounded-lg shadow-md p-6 border border-green-600;
+}
+
+.input {
+  @apply bg-gray-900 border border-green-600 rounded-md px-4 py-2 focus:outline-none focus:ring-2 focus:ring-green-500 text-green-400;
+}
+
+.label {
+  @apply block text-sm font-medium text-green-400 mb-1;
+}
+
+.link {
+  @apply text-green-400 hover:text-green-300;
+}
+
+.navbar-container {
+  @apply text-green-400 bg-gray-900 rounded shadow-lg border border-green-600;
+}
+
+.game-menu {
+  @apply flex justify-center items-center relative;
+}
+
+.text-shadow-custom {
+  text-shadow: 0 0 10px #00ff00, 0 0 20px #00ff00, 0 0 30px #00ff00;
+}
+
+.menu-item {
+  @apply mb-2 px-4 py-2 text-green-400 font-['Orbitron'] font-bold text-lg transition-all duration-300 ease-in-out;
+  @apply hover:text-green-300 hover:transform hover:-translate-y-1;
+}
+
+.menu-item.active-link {
+  @apply rounded-t-md border-green-500 text-green-300 font-['Orbitron'] font-bold text-lg transition-all duration-300 ease-in-out scale-105;
+  text-shadow: 0 0 10px rgba(0, 255, 0, 0.5);
+}
+
+.menu-item.active-link::before {
+  content: '';
+  position: absolute;
+  bottom: -5px;
+  left: 0;
+  width: 100%;
+  height: 5px;
+  background: linear-gradient(to right, #00ff00, #40ff40, #00ff00);
+  border-radius: 10px;
+  animation: shimmer 2s infinite;
+}
+
+@keyframes shimmer {
+  0% { background-position: -100% 0; }
+  100% { background-position: 100% 0; }
+}
+
+.scrollbar-thin {
+  scrollbar-width: thin;
+  scrollbar-color: #00ff00 #1a1a1a;
+}
+
+.scrollbar-thin::-webkit-scrollbar {
+  @apply w-2;
+}
+
+.scrollbar-thin::-webkit-scrollbar-track {
+  @apply bg-gray-900 rounded-full;
+}
+
+.scrollbar-thin::-webkit-scrollbar-thumb {
+  @apply bg-green-600 rounded-full;
+}
+
+.scrollbar-thin::-webkit-scrollbar-thumb:hover {
+  @apply bg-green-500;
+}
+
+.btn {
+  @apply font-['Orbitron'] font-semibold py-2 px-4 rounded-lg transition-all duration-300 ease-in-out shadow-md flex items-center;
+}
+
+.search-input {
+  @apply w-full border-b-2 border-green-600 py-2 px-4 pl-10 transition-colors duration-300 ease-in-out focus:outline-none focus:border-green-400 bg-transparent text-green-400;
+}
+
+.card-title {
+  @apply text-xl font-['Orbitron'] font-bold text-green-400 mb-2;
+}
+
+.card-content {
+  @apply text-gray-300;
+}
+
+.subcard {
+  @apply bg-gray-900 rounded-lg shadow-md p-4 border border-green-600;
+}
+
+.subcard-title {
+  @apply text-lg font-['Orbitron'] font-bold text-green-400 mb-2;
+}
+
+.subcard-content {
+  @apply text-gray-300;
+}

web/dist/themes/default.css

@@ -0,0 +1,329 @@
+/* Soft Bluish Theme */
+@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  html {
+    @apply scroll-smooth;
+  }
+  body {
+    font-family: 'Roboto', sans-serif;
+  }
+}
+
+@layer utilities {
+  .no-scrollbar::-webkit-scrollbar {
+    display: none;
+  }
+
+  .no-scrollbar {
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+  }
+}
+
+.display-none {
+  @apply hidden;
+}
+
+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-blue-300 dark:border-blue-600 pb-2; }
+
+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: #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: #f0faff;
+  --color-bg-light: #ffffff;
+  --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-blue-100 dark:bg-blue-900;
+}
+
+.background-color {
+  @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-blue-700 dark:text-blue-200 bg-blue-200 dark:bg-blue-800 rounded-lg shadow-md;
+}
+
+.panels-color {
+  @apply text-blue-700 dark:text-blue-200 bg-blue-100 dark:bg-blue-800;
+}
+
+.unicolor-panels-color {
+  @apply bg-blue-200 dark:bg-blue-700;
+}
+
+.chatbox-color {
+  @apply bg-blue-50 dark:bg-blue-800;
+}
+
+.message {
+  @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-blue-400 dark:border-blue-500;
+}
+
+.message:nth-child(even) {
+  @apply bg-blue-50 dark:bg-blue-900; /* Darker background for even messages */
+}
+
+.message:nth-child(odd) {
+  @apply bg-blue-100 dark:bg-blue-800; /* Darker background for odd messages */
+}
+
+.message-header {
+  @apply text-xl font-semibold mb-2;
+}
+
+.message-content {
+  @apply text-lg leading-relaxed;
+}
+
+body {
+  @apply bg-blue-100 dark:bg-blue-900 min-h-screen text-base;
+}
+
+.discussion {
+  @apply mr-2 text-xs;
+}
+
+.discussion-hilighted {
+  @apply bg-blue-200 dark:bg-blue-800 text-xs;
+}
+
+.bg-gradient-welcome {
+  @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-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-blue-700 to-blue-500 dark:from-blue-300 dark:to-blue-500;
+}
+
+.text-subtitle {
+  @apply text-blue-600 dark:text-blue-400;
+}
+
+.text-author {
+  @apply text-blue-500 dark:text-blue-400;
+}
+
+.text-loading {
+  @apply text-blue-700 dark:text-blue-300;
+}
+
+.text-progress {
+  @apply text-blue-600 dark:text-blue-400;
+}
+
+.btn-primary {
+  @apply bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded;
+}
+
+.btn-secondary {
+  @apply bg-blue-400 hover:bg-blue-500 text-white font-bold py-2 px-4 rounded;
+}
+
+.card {
+  @apply bg-white dark:bg-blue-800 rounded-lg shadow-md p-6;
+}
+
+.input {
+  @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-blue-700 dark:text-blue-300 mb-1;
+}
+
+.link {
+  @apply text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200;
+}
+
+.navbar-container {
+  @apply text-blue-700 dark:text-blue-200 bg-blue-200 dark:bg-blue-800 rounded shadow-lg;
+}
+
+.game-menu {
+  @apply flex justify-center items-center relative;
+}
+
+.text-shadow-custom {
+  text-shadow: 1px 1px 0px #e0e0e0, -1px -1px 0px #e0e0e0, 1px -1px 0px #e0e0e0, -1px 1px 0px #e0e0e0;
+}
+
+.menu-item {
+  @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-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);
+}
+
+.menu-item.active-link::before {
+  content: '';
+  position: absolute;
+  bottom: -5px;
+  left: 0;
+  width: 100%;
+  height: 5px;
+  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, #6ab7f1, #aaaaaa, #6ab7f1);
+}
+
+@keyframes shimmer {
+  0% { background-position: -100% 0; }
+  100% { background-position: 100% 0; }
+}
+
+@keyframes bounce {
+  0%, 100% { transform: translateY(0); }
+  50% { transform: translateY(-5px); }
+}
+
+.feather-emoji {
+  display: inline-block;
+  margin-left: 5px;
+  animation: bounce 2s infinite;
+}
+
+.app-card {
+  @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 {
+  @apply transform -translate-y-1;
+}
+
+button {
+  @apply transition-all duration-300 ease-in-out;
+}
+
+button:hover {
+  @apply transform -translate-y-0.5;
+}
+
+.scrollbar-thin {
+  scrollbar-width: thin;
+  scrollbar-color: theme('colors.blue.400') theme('colors.blue.200');
+}
+
+.dark .scrollbar-thin {
+  scrollbar-color: theme('colors.blue.600') theme('colors.blue.800');
+}
+
+.scrollbar-thin::-webkit-scrollbar {
+  @apply w-2;
+}
+
+.scrollbar-thin::-webkit-scrollbar-track {
+  @apply bg-blue-200 dark:bg-blue-800 rounded-full;
+}
+
+.scrollbar-thin::-webkit-scrollbar-thumb {
+  @apply bg-blue-400 dark:bg-blue-600 rounded-full;
+}
+
+.scrollbar-thin::-webkit-scrollbar-thumb:hover {
+  @apply bg-blue-500 dark:bg-blue-500;
+}
+
+.btn {
+  @apply font-semibold py-2 px-4 rounded-lg transition-all duration-300 ease-in-out shadow-md flex items-center;
+}
+
+.btn-primary {
+  @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-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-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-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-blue-800 dark:text-blue-100 mb-2;
+}
+
+.card-content {
+  @apply text-blue-600 dark:text-blue-300;
+}
+
+.card-footer {
+  @apply mt-4 flex justify-between items-center;
+}
+
+.card-footer-button {
+  @apply bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded;
+}
+
+.subcard {
+  @apply bg-blue-50 dark:bg-blue-800 rounded-lg shadow-md p-4;
+}
+
+.subcard-title {
+  @apply text-lg font-bold text-blue-800 dark:text-blue-100 mb-2;
+}
+
+.subcard-content {
+  @apply text-blue-600 dark:text-blue-300;
+}
+
+.subcard-footer {
+  @apply mt-4 flex justify-between items-center;
+}
+
+.subcard-footer-button {
+  @apply bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded;
+}

web/dist/themes/lollms_blue.css

@@ -0,0 +1,379 @@
+/* Custom font */
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap');
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  html {
+    @apply scroll-smooth;
+  }
+  @font-face {
+    font-family: 'Roboto';
+    src: url('./fonts/Roboto/Roboto-Regular.ttf') format('truetype');
+  }
+  @font-face {
+    font-family: 'PTSans';
+    src: url('./fonts/PTSans/PTSans-Regular.ttf') format('truetype');
+  }
+}
+
+@layer utilities {
+  .no-scrollbar::-webkit-scrollbar {
+    display: none;
+  }
+
+  .no-scrollbar {
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+  }
+}
+
+.display-none {
+  @apply hidden;
+}
+
+h1 { @apply text-4xl md:text-5xl font-bold text-gray-900 dark:text-gray-100 mb-6; }
+h2 {
+@apply text-3xl font-semibold text-gray-800 dark:text-gray-200 mb-4;
+}
+
+h3 {
+@apply text-2xl font-medium text-gray-700 dark:text-gray-300 mb-3;
+}
+
+h4 {
+@apply text-xl font-medium text-gray-600 dark:text-gray-400 mb-2;
+}
+
+/* Optional: Add a subtle bottom border to headers for added distinction */
+h1, h2{
+@apply border-b border-gray-200 dark:border-gray-700 pb-2;
+}
+
+
+p {
+  @apply text-base text-gray-600 dark:text-gray-300 break-words;
+}
+
+ul {
+  @apply list-disc ml-0;
+}
+
+li {
+  @apply list-disc ml-5;
+}
+
+ol {
+  @apply list-decimal ml-5;
+}
+
+:root {
+  --color-primary: #0e8ef0;
+  --color-primary-light: #3dabff;
+  --color-secondary: #0fd974;
+  --color-accent: #f0700e;
+  --color-light-text-panel: #ffffff;
+  --color-dark-text-panel: #ffffff;
+  --color-bg-light-panel: #7cb5ec;
+  --color-bg-light: #e2edff;
+  --color-bg-light-tone: #b9d2f7;
+  --color-bg-light-code-block: #cad7ed;
+  --color-bg-light-tone-panel: #8fb5ef;
+  --color-bg-light-discussion: #c5d8f8;
+  --color-bg-light-discussion-odd: #d6e7ff;
+  --color-bg-dark: #132e59;
+  --color-bg-dark-tone: #25477d;
+  --color-bg-dark-tone-panel: #4367a3;
+  --color-bg-dark-code-block: #2254a7;
+  --color-bg-dark-discussion: #435E8A;
+  --color-bg-dark-discussion-odd: #284471;
+}
+/* For both textarea and input elements */
+textarea, input, select {
+  @apply bg-gray-100 dark:bg-gray-800;
+}
+
+.background-color {
+  @apply bg-gradient-to-br from-blue-100 to-blue-200 dark:from-blue-900 dark:to-blue-900 min-h-screen;
+}
+
+.toolbar-color {
+  @apply  text-gray-700 dark:text-gray-50 bg-gradient-to-r from-blue-200 to-purple-200 dark:from-blue-800 dark:to-purple-800 rounded-full shadow-lg
+}
+.panels-color {
+  @apply text-gray-700 dark:text-gray-50 bg-gradient-to-r from-blue-100 to-blue-200 dark:from-blue-800 dark:to-blue-900 rounded shadow-lg;
+}
+.unicolor-panels-color {
+  @apply bg-blue-200 dark:bg-blue-800
+}
+.chatbox-color {
+  @apply bg-gradient-to-br from-blue-200 to-blue-300 dark:from-blue-800 dark:to-blue-900
+}
+
+/* Base message styling */ 
+.message { @apply relative w-full rounded-lg m-2 shadow-lg border border-gray-200 dark:border-gray-700 flex flex-col flex-grow flex-wrap overflow-visible p-5 pb-3 text-lg; /* Increased from text-base to text-lg */ }
+.message:hover {
+@apply border-blue-400 dark:border-blue-500;
+}
+
+/* Light theme */
+.message {
+@apply bg-blue-200 text-gray-800;
+}
+
+/* Dark theme */
+.dark .message {
+@apply bg-blue-800 text-gray-200;
+}
+
+/* Alternating backgrounds for better distinction */
+.message:nth-child(even) {
+@apply bg-blue-50 dark:bg-blue-700;
+}
+
+.message:nth-child(odd) {
+@apply bg-blue-200 dark:bg-blue-800;
+}
+
+/* Additional styling for more professional look */
+.message-header {
+@apply text-xl font-semibold mb-2; /* Increased from text-lg to text-xl */
+}
+
+.message-content {
+@apply text-lg leading-relaxed; /* Increased from text-base to text-lg */
+}
+
+/* Body styling */
+body {
+@apply bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-800 dark:to-gray-900 min-h-screen text-base; /* Added text-base for default body text */
+}
+
+.discussion{
+  @apply mr-2 bg-gradient-to-r from-blue-200 to-blue-200 dark:from-blue-900 dark:to-blue-900 text-xs
+}
+.discussion-hilighted{
+  @apply bg-gradient-to-r from-blue-300 to-blue-200 dark:from-blue-800 dark:to-purple-900 text-xs
+}
+
+
+
+.bg-gradient-welcome {
+  @apply bg-gradient-to-br from-blue-100 to-purple-100 dark:from-blue-900 dark:to-purple-900;
+}
+
+.bg-gradient-progress {
+  @apply bg-gradient-to-r from-blue-200 to-purple-200 dark:from-blue-800 dark:to-purple-800;
+}
+
+.text-gradient-title {
+  @apply text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-purple-600 dark:from-blue-400 dark:to-purple-400;
+}
+
+.text-subtitle {
+  @apply text-gray-600 dark:text-gray-300;
+}
+
+.text-author {
+  @apply text-gray-500 dark:text-gray-400;
+}
+
+.text-loading {
+  @apply text-gray-700 dark:text-gray-300;
+}
+
+.text-progress {
+  @apply text-blue-600 dark:text-blue-400;
+}
+
+.btn-primary {
+  @apply bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded;
+}
+
+.btn-secondary {
+  @apply bg-purple-500 hover:bg-purple-600 text-white font-bold py-2 px-4 rounded;
+}
+
+.card {
+  @apply bg-white dark:bg-gray-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-blue-500 dark:focus:ring-blue-400;
+}
+
+.label {
+  @apply block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1;
+}
+
+.link {
+  @apply text-blue-500 hover:text-blue-600 dark:text-blue-400 dark:hover:text-blue-300;
+}
+.navbar-container {
+  @apply  text-gray-700 dark:text-gray-50 bg-gradient-to-r from-blue-200 to-blue-300 dark:from-blue-800 dark:to-blue-900 rounded shadow-lg
+}
+
+.game-menu {
+  @apply flex justify-center items-center relative;
+}
+
+.text-shadow-custom {
+  text-shadow: 1px 1px 0px white, -1px -1px 0px white, 1px -1px 0px white, -1px 1px 0px white;
+}
+.menu-item {
+  @apply mb-2 px-4 py-2 text-green-600 dark:text-green-300 font-bold text-lg transition-all duration-300 ease-in-out;
+  @apply hover:text-red-400 hover:dark:text-red-200 hover:transform hover:-translate-y-1;
+}
+
+.menu-item.active-link {
+  @apply rounded-t-md border-red-500 text-shadow-custom text-red-600 font-bold text-lg transition-all duration-300 ease-in-out scale-105;
+  @apply hover:text-red-700 hover:dark:text-red-300 hover:transform hover:-translate-y-1;
+  /* Glow effect on text */
+  text-shadow: 0 0 10px rgba(255, 100, 100, 0.5);
+}
+
+.menu-item.active-link::before {
+  content: '';
+  position: absolute;
+  bottom: -5px;
+  left: 0;
+  width: 100%;
+  height: 5px;
+  background: linear-gradient(to right, #ff3b3b, #ff7b7b, #ff3b3b); /* Strawberry colors */
+  border-radius: 10px;
+  animation: shimmer 2s infinite;
+}
+
+.dark .menu-item.active-link::before {
+  background: linear-gradient(to right, #8b0000, #ff0000, #8b0000); /* Dark mode strawberry colors */
+}
+
+@keyframes shimmer {
+  0% { background-position: -100% 0; }
+  100% { background-position: 100% 0; }
+}
+
+@keyframes bounce {
+  0%, 100% { transform: translateY(0); }
+  50% { transform: translateY(-5px); }
+}
+.feather-emoji {
+  display: inline-block;
+  margin-left: 5px;
+  animation: bounce 2s infinite;
+}
+
+
+
+@keyframes lightsaber {
+  0% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.1);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+
+
+
+.app-card {
+  @apply transition-all duration-300 ease-in-out bg-gradient-to-br from-blue-200 to-blue-300 dark:from-blue-800 dark:to-blue-900 text-gray-800 dark:text-gray-100 shadow-md hover:shadow-lg;
+}
+
+.app-card:hover {
+  @apply transform -translate-y-1;
+}
+
+button {
+  @apply transition-all duration-300 ease-in-out;
+}
+
+button:hover {
+  @apply transform -translate-y-0.5;
+}
+
+.scrollbar-thin {
+  scrollbar-width: thin;
+  scrollbar-color: theme('colors.blue.300') theme('colors.blue.100');
+}
+
+.dark .scrollbar-thin {
+  scrollbar-color: theme('colors.blue.700') theme('colors.blue.900');
+}
+
+.scrollbar-thin::-webkit-scrollbar {
+  @apply w-2;
+}
+
+.scrollbar-thin::-webkit-scrollbar-track {
+  @apply bg-blue-100 dark:bg-blue-900 rounded-full;
+}
+
+.scrollbar-thin::-webkit-scrollbar-thumb {
+  @apply bg-blue-300 dark:bg-blue-700 rounded-full;
+}
+
+.scrollbar-thin::-webkit-scrollbar-thumb:hover {
+  @apply bg-blue-400 dark:bg-blue-600;
+}
+.btn {
+  @apply font-semibold py-2 px-4 rounded-lg transition-all duration-300 ease-in-out shadow-md flex items-center;
+}
+
+.btn-primary {
+  @apply bg-blue-500 text-white hover:bg-blue-600 focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800;
+}
+
+.btn-secondary {
+  @apply bg-blue-200 text-gray-700 hover:bg-blue-300 focus:ring-4 focus:ring-blue-200 dark:bg-blue-700 dark:text-gray-200 dark:hover:bg-blue-600 dark:focus:ring-blue-600;
+}
+
+.search-input {
+  @apply w-full border-b-2 border-blue-200 dark:border-blue-700 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-gray-800 dark:text-gray-100;
+}
+
+.scrollbar {
+  @apply scrollbar-thin scrollbar-track-bg-light-tone scrollbar-thumb-bg-light-tone-panel hover:scrollbar-thumb-primary dark:scrollbar-track-bg-dark-tone dark:scrollbar-thumb-bg-dark-tone-panel dark:hover:scrollbar-thumb-primary active:scrollbar-thumb-secondary
+}
+
+.card-title {
+  @apply text-xl font-bold text-gray-900 dark:text-white mb-2;
+}
+
+.card-content {
+  @apply text-gray-700 dark:text-gray-300;
+}
+
+.card-footer {
+  @apply mt-4 flex justify-between items-center;
+}
+
+.card-footer-button {
+  @apply bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded;
+}
+
+/* Subcard styles */
+.subcard {
+  @apply bg-gray-100 dark:bg-gray-700 rounded-lg shadow-md p-4;
+}
+
+.subcard-title {
+  @apply text-lg font-bold text-gray-900 dark:text-white mb-2;
+}
+
+.subcard-content {
+  @apply text-gray-700 dark:text-gray-300;
+}
+
+.subcard-footer {
+  @apply mt-4 flex justify-between items-center;
+}
+
+.subcard-footer-button {
+  @apply bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded;
+}

web/dist/themes/sober_gray.css

@@ -0,0 +1,332 @@
+/* Flat Gray Theme */
+@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  html {
+    @apply scroll-smooth;
+  }
+  body {
+    font-family: 'Roboto', sans-serif;
+  }
+}
+
+@layer utilities {
+  .no-scrollbar::-webkit-scrollbar {
+    display: none;
+  }
+
+  .no-scrollbar {
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+  }
+}
+
+.display-none {
+  @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, h2 { @apply border-b border-gray-300 dark:border-gray-600 pb-2; }
+
+p { @apply text-base text-gray-600 dark:text-gray-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-light-text-panel: #ffffff;
+  --color-dark-text-panel: #e0e0e0;
+  --color-bg-light-panel: #f0f0f0;
+  --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;
+}
+
+textarea, input, select {
+  @apply bg-gray-100 dark:bg-gray-800;
+}
+
+.background-color {
+  @apply bg-gray-100 dark:bg-gray-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;
+}
+
+.panels-color {
+  @apply text-gray-700 dark:text-gray-200 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-md;
+}
+
+.unicolor-panels-color {
+  @apply bg-gray-200 dark:bg-gray-700;
+}
+
+.chatbox-color {
+  @apply bg-gray-50 dark:bg-gray-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;
+}
+
+.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;
+}
+
+.message:nth-child(even) {
+  @apply bg-gray-50 dark:bg-gray-800;
+}
+
+.message:nth-child(odd) {
+  @apply bg-gray-100 dark:bg-gray-700;
+}
+
+.message-header {
+  @apply text-xl font-semibold mb-2;
+}
+
+.message-content {
+  @apply text-lg leading-relaxed;
+}
+
+body {
+  @apply bg-gray-100 dark:bg-gray-900 min-h-screen text-base;
+}
+
+.discussion {
+  @apply mr-2 bg-gray-200 dark:bg-gray-500 text-xs;
+}
+
+.discussion-hilighted {
+  @apply bg-gray-300 dark:bg-gray-600 text-xs;
+}
+
+.bg-gradient-welcome {
+  @apply bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-800 dark:to-gray-900;
+}
+
+.bg-gradient-progress {
+  @apply bg-gradient-to-r from-gray-200 to-gray-300 dark:from-gray-700 dark:to-gray-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;
+}
+
+.text-subtitle {
+  @apply text-gray-600 dark:text-gray-400;
+}
+
+.text-author {
+  @apply text-gray-500 dark:text-gray-400;
+}
+
+.text-loading {
+  @apply text-gray-700 dark:text-gray-300;
+}
+
+.text-progress {
+  @apply text-gray-600 dark:text-gray-400;
+}
+
+.btn-primary {
+  @apply bg-gray-600 hover:bg-gray-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;
+}
+
+.card {
+  @apply bg-white dark:bg-gray-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;
+}
+
+.label {
+  @apply block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1;
+}
+
+.link {
+  @apply text-gray-600 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-200;
+}
+
+.navbar-container {
+  @apply text-gray-700 dark:text-gray-200 bg-gray-200 dark:bg-gray-800 rounded shadow-lg;
+}
+
+.game-menu {
+  @apply flex justify-center items-center relative;
+}
+
+.text-shadow-custom {
+  text-shadow: 1px 1px 0px #e0e0e0, -1px -1px 0px #e0e0e0, 1px -1px 0px #e0e0e0, -1px 1px 0px #e0e0e0;
+}
+
+.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;
+}
+
+.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;
+  text-shadow: 0 0 10px rgba(128, 128, 128, 0.5);
+}
+
+.menu-item.active-link::before {
+  content: '';
+  position: absolute;
+  bottom: -5px;
+  left: 0;
+  width: 100%;
+  height: 5px;
+  background: linear-gradient(to right, #4a4a4a, #8a8a8a, #4a4a4a);
+  border-radius: 10px;
+  animation: shimmer 2s infinite;
+}
+
+.dark .menu-item.active-link::before {
+  background: linear-gradient(to right, #6a6a6a, #aaaaaa, #6a6a6a);
+}
+
+@keyframes shimmer {
+  0% { background-position: -100% 0; }
+  100% { background-position: 100% 0; }
+}
+
+@keyframes bounce {
+  0%, 100% { transform: translateY(0); }
+  50% { transform: translateY(-5px); }
+}
+
+.feather-emoji {
+  display: inline-block;
+  margin-left: 5px;
+  animation: bounce 2s infinite;
+}
+
+.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;
+}
+
+.app-card:hover {
+  @apply transform -translate-y-1;
+}
+
+button {
+  @apply transition-all duration-300 ease-in-out;
+}
+
+button:hover {
+  @apply transform -translate-y-0.5;
+}
+
+.scrollbar-thin {
+  scrollbar-width: thin;
+  scrollbar-color: theme('colors.gray.400') theme('colors.gray.200');
+}
+
+.dark .scrollbar-thin {
+  scrollbar-color: theme('colors.gray.600') theme('colors.gray.800');
+}
+
+.scrollbar-thin::-webkit-scrollbar {
+  @apply w-2;
+}
+
+.scrollbar-thin::-webkit-scrollbar-track {
+  @apply bg-gray-200 dark:bg-gray-800 rounded-full;
+}
+
+.scrollbar-thin::-webkit-scrollbar-thumb {
+  @apply bg-gray-400 dark:bg-gray-600 rounded-full;
+}
+
+.scrollbar-thin::-webkit-scrollbar-thumb:hover {
+  @apply bg-gray-500 dark:bg-gray-500;
+}
+
+.btn {
+  @apply font-semibold py-2 px-4 rounded-lg transition-all duration-300 ease-in-out shadow-md flex items-center;
+}
+
+.btn-primary {
+  @apply bg-gray-600 text-white hover:bg-gray-700 focus:ring-4 focus:ring-gray-300 dark:focus:ring-gray-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;
+}
+
+.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;
+}
+
+.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;
+}
+
+.card-title {
+  @apply text-xl font-bold text-gray-800 dark:text-gray-100 mb-2;
+}
+
+.card-content {
+  @apply text-gray-600 dark:text-gray-300;
+}
+
+.card-footer {
+  @apply mt-4 flex justify-between items-center;
+}
+
+.card-footer-button {
+  @apply bg-gray-600 hover:bg-gray-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;
+}
+
+.subcard-title {
+  @apply text-lg font-bold text-gray-800 dark:text-gray-100 mb-2;
+}
+
+.subcard-content {
+  @apply text-gray-600 dark:text-gray-300;
+}
+
+.subcard-footer {
+  @apply mt-4 flex justify-between items-center;
+}
+
+.subcard-footer-button {
+  @apply bg-gray-600 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded;
+}

web/dist/themes/strawberry.css

@@ -0,0 +1,378 @@
+/* Custom font */
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap');
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  html {
+    @apply scroll-smooth;
+  }
+  @font-face {
+    font-family: 'Roboto';
+    src: url('./fonts/Roboto/Roboto-Regular.ttf') format('truetype');
+  }
+  @font-face {
+    font-family: 'PTSans';
+    src: url('./fonts/PTSans/PTSans-Regular.ttf') format('truetype');
+  }
+}
+
+@layer utilities {
+  .no-scrollbar::-webkit-scrollbar {
+    display: none;
+  }
+
+  .no-scrollbar {
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+  }
+}
+
+.display-none {
+  @apply hidden;
+}
+
+h1 { @apply text-4xl md:text-5xl font-bold text-gray-900 dark:text-gray-100 mb-6; }
+h2 {
+@apply text-3xl font-semibold text-gray-800 dark:text-gray-200 mb-4;
+}
+
+h3 {
+@apply text-2xl font-medium text-gray-700 dark:text-gray-300 mb-3;
+}
+
+h4 {
+@apply text-xl font-medium text-gray-600 dark:text-gray-400 mb-2;
+}
+
+/* Optional: Add a subtle bottom border to headers for added distinction */
+h1, h2{
+@apply border-b border-gray-200 dark:border-gray-700 pb-2;
+}
+
+
+p {
+  @apply text-base text-gray-600 dark:text-gray-300 break-words;
+}
+
+ul {
+  @apply list-disc ml-0;
+}
+
+li {
+  @apply list-disc ml-5;
+}
+
+ol {
+  @apply list-decimal ml-5;
+}
+
+:root {
+  --color-primary: #0e8ef0;
+  --color-primary-light: #3dabff;
+  --color-secondary: #0fd974;
+  --color-accent: #f0700e;
+  --color-light-text-panel: #ffffff;
+  --color-dark-text-panel: #ffffff;
+  --color-bg-light-panel: #7cb5ec;
+  --color-bg-light: #e2edff;
+  --color-bg-light-tone: #b9d2f7;
+  --color-bg-light-code-block: #cad7ed;
+  --color-bg-light-tone-panel: #8fb5ef;
+  --color-bg-light-discussion: #c5d8f8;
+  --color-bg-light-discussion-odd: #d6e7ff;
+  --color-bg-dark: #132e59;
+  --color-bg-dark-tone: #25477d;
+  --color-bg-dark-tone-panel: #4367a3;
+  --color-bg-dark-code-block: #2254a7;
+  --color-bg-dark-discussion: #435E8A;
+  --color-bg-dark-discussion-odd: #284471;
+}
+/* For both textarea and input elements */
+textarea, input, select {
+  @apply bg-gray-100 dark:bg-gray-800;
+}
+
+.background-color {
+  @apply bg-gradient-to-br from-blue-100 to-blue-200 dark:from-blue-900 dark:to-blue-900 min-h-screen;
+}
+
+.toolbar-color {
+  @apply  text-gray-700 dark:text-gray-50 bg-gradient-to-r from-blue-200 to-purple-200 dark:from-blue-800 dark:to-purple-800 rounded-full shadow-lg
+}
+.panels-color {
+  @apply text-gray-700 dark:text-gray-50 bg-gradient-to-r from-blue-100 to-blue-200 dark:from-blue-800 dark:to-blue-900 rounded shadow-lg;
+}
+.unicolor-panels-color {
+  @apply bg-blue-200 dark:bg-blue-800
+}
+.chatbox-color {
+  @apply bg-gradient-to-br from-blue-200 to-blue-300 dark:from-blue-800 dark:to-blue-900
+}
+
+/* Base message styling */ 
+.message { @apply relative w-full rounded-lg m-2 shadow-lg border border-gray-200 dark:border-gray-700 flex flex-col flex-grow flex-wrap overflow-visible p-5 pb-3 text-lg; /* Increased from text-base to text-lg */ }
+.message:hover {
+@apply border-blue-400 dark:border-blue-500;
+}
+
+/* Light theme */
+.message {
+@apply bg-blue-200 text-gray-800;
+}
+
+/* Dark theme */
+.dark .message {
+@apply bg-blue-800 text-gray-200;
+}
+
+/* Alternating backgrounds for better distinction */
+.message:nth-child(even) {
+@apply bg-blue-50 dark:bg-blue-700;
+}
+
+.message:nth-child(odd) {
+@apply bg-blue-200 dark:bg-blue-800;
+}
+
+/* Additional styling for more professional look */
+.message-header {
+@apply text-xl font-semibold mb-2; /* Increased from text-lg to text-xl */
+}
+
+.message-content {
+@apply text-lg leading-relaxed; /* Increased from text-base to text-lg */
+}
+
+/* Body styling */
+body {
+@apply bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-800 dark:to-gray-900 min-h-screen text-base; /* Added text-base for default body text */
+}
+
+.discussion{
+  @apply mr-2 bg-gradient-to-r from-blue-300 to-blue-400 dark:from-blue-800 dark:to-blue-900 hover:from-blue-100 hover:to-purple-100 hover:dark:from-blue-700 hover:dark:to-purple-700
+}
+.discussion-hilighted{
+  @apply bg-gradient-to-r from-blue-200 to-purple-300 dark:from-blue-800 dark:to-purple-900 hover:from-blue-100 hover:to-purple-100 hover:dark:from-blue-700 hover:dark:to-purple-700
+}
+
+
+.bg-gradient-welcome {
+  @apply bg-gradient-to-br from-blue-100 to-purple-100 dark:from-blue-900 dark:to-purple-900;
+}
+
+.bg-gradient-progress {
+  @apply bg-gradient-to-r from-blue-200 to-purple-200 dark:from-blue-800 dark:to-purple-800;
+}
+
+.text-gradient-title {
+  @apply text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-purple-600 dark:from-blue-400 dark:to-purple-400;
+}
+
+.text-subtitle {
+  @apply text-gray-600 dark:text-gray-300;
+}
+
+.text-author {
+  @apply text-gray-500 dark:text-gray-400;
+}
+
+.text-loading {
+  @apply text-gray-700 dark:text-gray-300;
+}
+
+.text-progress {
+  @apply text-blue-600 dark:text-blue-400;
+}
+
+.btn-primary {
+  @apply bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded;
+}
+
+.btn-secondary {
+  @apply bg-purple-500 hover:bg-purple-600 text-white font-bold py-2 px-4 rounded;
+}
+
+.card {
+  @apply bg-white dark:bg-gray-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-blue-500 dark:focus:ring-blue-400;
+}
+
+.label {
+  @apply block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1;
+}
+
+.link {
+  @apply text-blue-500 hover:text-blue-600 dark:text-blue-400 dark:hover:text-blue-300;
+}
+.navbar-container {
+  @apply  text-gray-700 dark:text-gray-50 bg-gradient-to-r from-blue-200 to-blue-300 dark:from-blue-800 dark:to-blue-900 rounded shadow-lg
+}
+
+.game-menu {
+  @apply flex justify-center items-center relative;
+}
+
+.text-shadow-custom {
+  text-shadow: 1px 1px 0px white, -1px -1px 0px white, 1px -1px 0px white, -1px 1px 0px white;
+}
+.menu-item {
+  @apply mb-2 px-4 py-2 text-green-600 dark:text-green-300 font-bold text-lg transition-all duration-300 ease-in-out;
+  @apply hover:text-red-400 hover:dark:text-red-200 hover:transform hover:-translate-y-1;
+}
+
+.menu-item.active-link {
+  @apply rounded-t-md border-red-500 text-shadow-custom text-red-600 font-bold text-lg transition-all duration-300 ease-in-out scale-105;
+  @apply hover:text-red-700 hover:dark:text-red-300 hover:transform hover:-translate-y-1;
+  /* Glow effect on text */
+  text-shadow: 0 0 10px rgba(255, 100, 100, 0.5);
+}
+
+.menu-item.active-link::before {
+  content: '';
+  position: absolute;
+  bottom: -5px;
+  left: 0;
+  width: 100%;
+  height: 5px;
+  background: linear-gradient(to right, #ff3b3b, #ff7b7b, #ff3b3b); /* Strawberry colors */
+  border-radius: 10px;
+  animation: shimmer 2s infinite;
+}
+
+.dark .menu-item.active-link::before {
+  background: linear-gradient(to right, #8b0000, #ff0000, #8b0000); /* Dark mode strawberry colors */
+}
+
+@keyframes shimmer {
+  0% { background-position: -100% 0; }
+  100% { background-position: 100% 0; }
+}
+
+@keyframes bounce {
+  0%, 100% { transform: translateY(0); }
+  50% { transform: translateY(-5px); }
+}
+.feather-emoji {
+  display: inline-block;
+  margin-left: 5px;
+  animation: bounce 2s infinite;
+}
+
+
+
+@keyframes lightsaber {
+  0% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.1);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+
+
+
+.app-card {
+  @apply transition-all duration-300 ease-in-out bg-gradient-to-br from-blue-200 to-blue-300 dark:from-blue-800 dark:to-blue-900 text-gray-800 dark:text-gray-100 shadow-md hover:shadow-lg;
+}
+
+.app-card:hover {
+  @apply transform -translate-y-1;
+}
+
+button {
+  @apply transition-all duration-300 ease-in-out;
+}
+
+button:hover {
+  @apply transform -translate-y-0.5;
+}
+
+.scrollbar-thin {
+  scrollbar-width: thin;
+  scrollbar-color: theme('colors.blue.300') theme('colors.blue.100');
+}
+
+.dark .scrollbar-thin {
+  scrollbar-color: theme('colors.blue.700') theme('colors.blue.900');
+}
+
+.scrollbar-thin::-webkit-scrollbar {
+  @apply w-2;
+}
+
+.scrollbar-thin::-webkit-scrollbar-track {
+  @apply bg-blue-100 dark:bg-blue-900 rounded-full;
+}
+
+.scrollbar-thin::-webkit-scrollbar-thumb {
+  @apply bg-blue-300 dark:bg-blue-700 rounded-full;
+}
+
+.scrollbar-thin::-webkit-scrollbar-thumb:hover {
+  @apply bg-blue-400 dark:bg-blue-600;
+}
+.btn {
+  @apply font-semibold py-2 px-4 rounded-lg transition-all duration-300 ease-in-out shadow-md flex items-center;
+}
+
+.btn-primary {
+  @apply bg-blue-500 text-white hover:bg-blue-600 focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800;
+}
+
+.btn-secondary {
+  @apply bg-blue-200 text-gray-700 hover:bg-blue-300 focus:ring-4 focus:ring-blue-200 dark:bg-blue-700 dark:text-gray-200 dark:hover:bg-blue-600 dark:focus:ring-blue-600;
+}
+
+.search-input {
+  @apply w-full border-b-2 border-blue-200 dark:border-blue-700 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-gray-800 dark:text-gray-100;
+}
+
+.scrollbar {
+  @apply scrollbar-thin scrollbar-track-bg-light-tone scrollbar-thumb-bg-light-tone-panel hover:scrollbar-thumb-primary dark:scrollbar-track-bg-dark-tone dark:scrollbar-thumb-bg-dark-tone-panel dark:hover:scrollbar-thumb-primary active:scrollbar-thumb-secondary
+}
+
+.card-title {
+  @apply text-xl font-bold text-gray-900 dark:text-white mb-2;
+}
+
+.card-content {
+  @apply text-gray-700 dark:text-gray-300;
+}
+
+.card-footer {
+  @apply mt-4 flex justify-between items-center;
+}
+
+.card-footer-button {
+  @apply bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded;
+}
+
+/* Subcard styles */
+.subcard {
+  @apply bg-gray-100 dark:bg-gray-700 rounded-lg shadow-md p-4;
+}
+
+.subcard-title {
+  @apply text-lg font-bold text-gray-900 dark:text-white mb-2;
+}
+
+.subcard-content {
+  @apply text-gray-700 dark:text-gray-300;
+}
+
+.subcard-footer {
+  @apply mt-4 flex justify-between items-center;
+}
+
+.subcard-footer-button {
+  @apply bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded;
+}

web/package-lock.json

@@ -42,13 +42,14 @@
         "@rushstack/eslint-patch": "^1.2.0",
         "@vitejs/plugin-vue": "^5.1.4",
         "@vue/eslint-config-prettier": "^7.1.0",
-        "autoprefixer": "^10.4.14",
+        "autoprefixer": "^10.4.20",
         "eslint": "^8.34.0",
         "eslint-plugin-vue": "^9.9.0",
-        "postcss": "^8.4.31",
+        "postcss": "^8.4.47",
+        "postcss-cli": "^11.0.0",
         "prettier": "^2.8.4",
         "tailwind-scrollbar": "^3.0.1",
-        "tailwindcss": "^3.3.1",
+        "tailwindcss": "^3.4.14",
         "vite": "^5.1.8"
       }
     },
@@ -1078,6 +1079,19 @@
       "integrity": "sha512-WJgX9nzTqknM393q1QJDJmoW28kUfEnybeTfVNcNAPnIx210RXm2DiXiHzfNPJNIUUb1tJnz/l4QGtJ30PgWmA==",
       "dev": true
     },
+    "node_modules/@sindresorhus/merge-streams": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/@sindresorhus/merge-streams/-/merge-streams-2.3.0.tgz",
+      "integrity": "sha512-LtoMMhxAlorcGhmFYI+LhPgbPZCkgP6ra1YL604EeF6U98pLlQ3iWIGMdWSC+vWmPBWBNgmDBAhnAobLROJmwg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/@socket.io/component-emitter": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/@socket.io/component-emitter/-/component-emitter-3.1.2.tgz",
@@ -1460,6 +1474,7 @@
           "url": "https://github.com/sponsors/ai"
         }
       ],
+      "license": "MIT",
       "dependencies": {
         "browserslist": "^4.23.3",
         "caniuse-lite": "^1.0.30001646",
@@ -1691,6 +1706,61 @@
       "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz",
       "integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow=="
     },
+    "node_modules/cliui": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/cliui/-/cliui-8.0.1.tgz",
+      "integrity": "sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "string-width": "^4.2.0",
+        "strip-ansi": "^6.0.1",
+        "wrap-ansi": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/cliui/node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/cliui/node_modules/string-width": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/cliui/node_modules/wrap-ansi": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
+      "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
     "node_modules/color-convert": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -2284,6 +2354,16 @@
         "node": ">=0.4.0"
       }
     },
+    "node_modules/dependency-graph": {
+      "version": "0.11.0",
+      "resolved": "https://registry.npmjs.org/dependency-graph/-/dependency-graph-0.11.0.tgz",
+      "integrity": "sha512-JeMq7fEshyepOWDfcfHK06N3MhyPhz++vtqWhMT5O9A3K42rdsEDpfdVqjaqaAhsw6a+ZqeDvQVtD0hFHQWrzg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6.0"
+      }
+    },
     "node_modules/didyoumean": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
@@ -2868,6 +2948,21 @@
         "url": "https://github.com/sponsors/rawify"
       }
     },
+    "node_modules/fs-extra": {
+      "version": "11.2.0",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-11.2.0.tgz",
+      "integrity": "sha512-PmDi3uwK5nFuXh7XDTlVnS17xJS7vW36is2+w3xcv8SVxiB4NyATf4ctkVY5bkSjX0Y4nbvZCq1/EjtEyr9ktw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "graceful-fs": "^4.2.0",
+        "jsonfile": "^6.0.1",
+        "universalify": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=14.14"
+      }
+    },
     "node_modules/fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
@@ -2895,6 +2990,29 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/get-caller-file": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
+      "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": "6.* || 8.* || >= 10.*"
+      }
+    },
+    "node_modules/get-stdin": {
+      "version": "9.0.0",
+      "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-9.0.0.tgz",
+      "integrity": "sha512-dVKBjfWisLAicarI2Sf+JuBE/DghV4UzNAVe9yhEJuzeREd3JhOTE9cUaJTeSa77fsbQUK3pcOpJfM59+VKZaA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/glob": {
       "version": "7.2.3",
       "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
@@ -2942,6 +3060,34 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/globby": {
+      "version": "14.0.2",
+      "resolved": "https://registry.npmjs.org/globby/-/globby-14.0.2.tgz",
+      "integrity": "sha512-s3Fq41ZVh7vbbe2PN3nrW7yC7U7MFVc5c98/iTl9c2GawNMKx/J648KQRW6WKkuU8GIbbh2IXfIRQjOZnXcTnw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@sindresorhus/merge-streams": "^2.1.0",
+        "fast-glob": "^3.3.2",
+        "ignore": "^5.2.4",
+        "path-type": "^5.0.0",
+        "slash": "^5.1.0",
+        "unicorn-magic": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/graceful-fs": {
+      "version": "4.2.11",
+      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
+      "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
+      "dev": true,
+      "license": "ISC"
+    },
     "node_modules/graphemer": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/graphemer/-/graphemer-1.4.0.tgz",
@@ -3177,6 +3323,19 @@
       "integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==",
       "dev": true
     },
+    "node_modules/jsonfile": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
+      "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "universalify": "^2.0.0"
+      },
+      "optionalDependencies": {
+        "graceful-fs": "^4.1.6"
+      }
+    },
     "node_modules/katex": {
       "version": "0.16.11",
       "resolved": "https://registry.npmjs.org/katex/-/katex-0.16.11.tgz",
@@ -3766,6 +3925,19 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/path-type": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/path-type/-/path-type-5.0.0.tgz",
+      "integrity": "sha512-5HviZNaZcfqP95rwpv+1HDgUamezbqdSYTyzjTvwtJSnIH+3vnbmWsItli8OFEndS984VT55M3jduxZbX351gg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/pathe": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/pathe/-/pathe-1.1.2.tgz",
@@ -3845,6 +4017,7 @@
           "url": "https://github.com/sponsors/ai"
         }
       ],
+      "license": "MIT",
       "dependencies": {
         "nanoid": "^3.3.7",
         "picocolors": "^1.1.0",
@@ -3854,6 +4027,89 @@
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/postcss-cli": {
+      "version": "11.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-cli/-/postcss-cli-11.0.0.tgz",
+      "integrity": "sha512-xMITAI7M0u1yolVcXJ9XTZiO9aO49mcoKQy6pCDFdMh9kGqhzLVpWxeD/32M/QBmkhcGypZFFOLNLmIW4Pg4RA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "chokidar": "^3.3.0",
+        "dependency-graph": "^0.11.0",
+        "fs-extra": "^11.0.0",
+        "get-stdin": "^9.0.0",
+        "globby": "^14.0.0",
+        "picocolors": "^1.0.0",
+        "postcss-load-config": "^5.0.0",
+        "postcss-reporter": "^7.0.0",
+        "pretty-hrtime": "^1.0.3",
+        "read-cache": "^1.0.0",
+        "slash": "^5.0.0",
+        "yargs": "^17.0.0"
+      },
+      "bin": {
+        "postcss": "index.js"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "postcss": "^8.0.0"
+      }
+    },
+    "node_modules/postcss-cli/node_modules/lilconfig": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.2.tgz",
+      "integrity": "sha512-eop+wDAvpItUys0FWkHIKeC9ybYrTGbU41U5K7+bttZZeohvnY7M9dZ5kB21GNWiFT2q1OoPTvncPCgSOVO5ow==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antonk52"
+      }
+    },
+    "node_modules/postcss-cli/node_modules/postcss-load-config": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-5.1.0.tgz",
+      "integrity": "sha512-G5AJ+IX0aD0dygOE0yFZQ/huFFMSNneyfp0e3/bT05a8OfPC5FUoZRPfGijUdGOJNMewJiwzcHJXFafFzeKFVA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "lilconfig": "^3.1.1",
+        "yaml": "^2.4.2"
+      },
+      "engines": {
+        "node": ">= 18"
+      },
+      "peerDependencies": {
+        "jiti": ">=1.21.0",
+        "postcss": ">=8.0.9",
+        "tsx": "^4.8.1"
+      },
+      "peerDependenciesMeta": {
+        "jiti": {
+          "optional": true
+        },
+        "postcss": {
+          "optional": true
+        },
+        "tsx": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/postcss-import": {
       "version": "15.1.0",
       "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-15.1.0.tgz",
@@ -3957,6 +4213,33 @@
         "postcss": "^8.2.14"
       }
     },
+    "node_modules/postcss-reporter": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-reporter/-/postcss-reporter-7.1.0.tgz",
+      "integrity": "sha512-/eoEylGWyy6/DOiMP5lmFRdmDKThqgn7D6hP2dXKJI/0rJSO1ADFNngZfDzxL0YAxFvws+Rtpuji1YIHj4mySA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "picocolors": "^1.0.0",
+        "thenby": "^1.3.4"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "postcss": "^8.1.0"
+      }
+    },
     "node_modules/postcss-selector-parser": {
       "version": "6.1.2",
       "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz",
@@ -4027,6 +4310,16 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/pretty-hrtime": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz",
+      "integrity": "sha512-66hKPCr+72mlfiSjlEB1+45IjXSqvVAIy6mocupoww4tBFE9R9IhwwUGoI4G++Tc9Aq+2rxOt0RFU6gPcrte0A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
     "node_modules/prismjs": {
       "version": "1.29.0",
       "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.29.0.tgz",
@@ -4087,6 +4380,16 @@
         "node": ">=8.10.0"
       }
     },
+    "node_modules/require-directory": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
+      "integrity": "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/resolve": {
       "version": "1.22.8",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz",
@@ -4262,6 +4565,19 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/slash": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/slash/-/slash-5.1.0.tgz",
+      "integrity": "sha512-ZA6oR3T/pEyuqwMgAKT0/hAv8oAXckzbkmR0UkUosQ+Mc4RxGoJkRmwHgHufaenlyAgE1Mxgpdcrf75y6XcnDg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14.16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/socket.io-client": {
       "version": "4.8.0",
       "resolved": "https://registry.npmjs.org/socket.io-client/-/socket.io-client-4.8.0.tgz",
@@ -4507,9 +4823,10 @@
       }
     },
     "node_modules/tailwindcss": {
-      "version": "3.4.13",
+      "version": "3.4.14",
-      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.13.tgz",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.14.tgz",
-      "integrity": "sha512-KqjHOJKogOUt5Bs752ykCeiwvi0fKVkr5oqsFNt/8px/tA8scFPIlkygsf6jXrfCqGHz7VflA6+yytWuM+XhFw==",
+      "integrity": "sha512-IcSvOcTRcUtQQ7ILQL5quRDg7Xs93PdJEk1ZLbhhvJc7uj/OAhYOnruEiwnGgBvUtaUAJ8/mhSw1o8L2jCiENA==",
+      "license": "MIT",
       "dependencies": {
         "@alloc/quick-lru": "^5.2.0",
         "arg": "^5.0.2",
@@ -4548,6 +4865,13 @@
       "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==",
       "dev": true
     },
+    "node_modules/thenby": {
+      "version": "1.3.4",
+      "resolved": "https://registry.npmjs.org/thenby/-/thenby-1.3.4.tgz",
+      "integrity": "sha512-89Gi5raiWA3QZ4b2ePcEwswC3me9JIg+ToSgtE0JWeCynLnLxNr/f9G+xfo9K+Oj4AFdom8YNJjibIARTJmapQ==",
+      "dev": true,
+      "license": "Apache-2.0"
+    },
     "node_modules/thenify": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",
@@ -4643,6 +4967,29 @@
       "resolved": "https://registry.npmjs.org/ufo/-/ufo-1.5.4.tgz",
       "integrity": "sha512-UsUk3byDzKd04EyoZ7U4DOlxQaD14JUKQl6/P7wiX4FNvUfm3XL246n9W5AmqwW5RSFJ27NAuM0iLscAOYUiGQ=="
     },
+    "node_modules/unicorn-magic": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/unicorn-magic/-/unicorn-magic-0.1.0.tgz",
+      "integrity": "sha512-lRfVq8fE8gz6QMBuDM6a+LO3IAzTi05H6gCVaUpir2E1Rwpo4ZUog45KpNXKC/Mn3Yb9UDuHumeFTo9iV/D9FQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/universalify": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.1.tgz",
+      "integrity": "sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 10.0.0"
+      }
+    },
     "node_modules/update-browserslist-db": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.1.tgz",
@@ -5036,6 +5383,16 @@
         "node": ">=0.4.0"
       }
     },
+    "node_modules/y18n": {
+      "version": "5.0.8",
+      "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
+      "integrity": "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/yaml": {
       "version": "2.5.1",
       "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.5.1.tgz",
@@ -5047,6 +5404,57 @@
         "node": ">= 14"
       }
     },
+    "node_modules/yargs": {
+      "version": "17.7.2",
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.7.2.tgz",
+      "integrity": "sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "cliui": "^8.0.1",
+        "escalade": "^3.1.1",
+        "get-caller-file": "^2.0.5",
+        "require-directory": "^2.1.1",
+        "string-width": "^4.2.3",
+        "y18n": "^5.0.5",
+        "yargs-parser": "^21.1.1"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/yargs-parser": {
+      "version": "21.1.1",
+      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-21.1.1.tgz",
+      "integrity": "sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/yargs/node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/yargs/node_modules/string-width": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/yocto-queue": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",

web/package.json

@@ -7,7 +7,8 @@
     "build": "vite build",
     "preview": "vite preview",
     "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore",
-    "format": "prettier --write src/"
+    "format": "prettier --write src/",
+    "build:themes": "postcss src/themes/*.css --dir public/themes"
   },
   "dependencies": {
     "@monaco-editor/loader": "^1.4.0",
@@ -44,13 +45,14 @@
     "@rushstack/eslint-patch": "^1.2.0",
     "@vitejs/plugin-vue": "^5.1.4",
     "@vue/eslint-config-prettier": "^7.1.0",
-    "autoprefixer": "^10.4.14",
+    "autoprefixer": "^10.4.20",
     "eslint": "^8.34.0",
     "eslint-plugin-vue": "^9.9.0",
-    "postcss": "^8.4.31",
+    "postcss": "^8.4.47",
+    "postcss-cli": "^11.0.0",
     "prettier": "^2.8.4",
     "tailwind-scrollbar": "^3.0.1",
-    "tailwindcss": "^3.3.1",
+    "tailwindcss": "^3.4.14",
     "vite": "^5.1.8"
   }
 }

web/public/fonts/PTSans/OFL.txt

@@ -0,0 +1,94 @@
+Copyright (c) 2010, ParaType Ltd. (http://www.paratype.com/public),
+with Reserved Font Names "PT Sans" and "ParaType".
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+https://openfontlicense.org
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

web/src/components/Navigation.vue

@@ -1,23 +1,102 @@
 <template>
-  <div class="navbar-container z-60">
+  <div class="sticky top-0 z-50 w-full bg-transparent dark:bg-gray-800">
-    <nav class="game-menu">
+    <nav class="container mx-auto px-4">
-      <RouterLink
+      <div class="flex items-center justify-between h-16">
-        v-for="(link, index) in filteredNavLinks"
+        <!-- Navigation Links -->
-        :key="index"
+        <div class="hidden md:block">
-        :to="{ name: link.route }"
+          <div class="flex items-center space-x-4">
-        class="menu-item"
+            <RouterLink
-        :class="{ 'active-link': isRouteActive(link.route) }"
+              v-for="(link, index) in filteredNavLinks"
-        @click="setActiveIndex(index)"
+              :key="index"
-        ref="menuItems"
+              :to="{ name: link.route }"
+              class="px-3 py-2 rounded-md text-sm font-medium transition-colors duration-200 ease-in-out
+                     hover:bg-gray-100 dark:hover:bg-gray-700
+                     text-gray-700 dark:text-gray-300"
+              :class="{
+                'bg-blue-500 text-white hover:bg-blue-600 dark:bg-blue-600 dark:hover:bg-blue-700': 
+                  isRouteActive(link.route)
+              }"
+              @click="setActiveIndex(index)"
+              ref="menuItems"
+            >
+              <div class="flex items-center space-x-1">
+                {{ link.text }}
+                <span 
+                  v-if="isRouteActive(link.route)" 
+                  class="ml-1 text-xs"
+                  aria-hidden="true"
+                >
+                  ✨
+                </span>
+              </div>
+            </RouterLink>
+          </div>
+        </div>
+
+        <!-- Mobile Menu Button -->
+        <div class="md:hidden">
+          <button 
+            @click="isMobileMenuOpen = !isMobileMenuOpen"
+            class="inline-flex items-center justify-center p-2 rounded-md text-gray-700 dark:text-gray-300
+                   hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none"
+          >
+            <svg 
+              class="h-6 w-6" 
+              :class="{'hidden': isMobileMenuOpen, 'block': !isMobileMenuOpen}"
+              fill="none" 
+              viewBox="0 0 24 24" 
+              stroke="currentColor"
+            >
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
+            </svg>
+            <svg 
+              class="h-6 w-6" 
+              :class="{'block': isMobileMenuOpen, 'hidden': !isMobileMenuOpen}"
+              fill="none" 
+              viewBox="0 0 24 24" 
+              stroke="currentColor"
+            >
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+            </svg>
+          </button>
+        </div>
+      </div>
+
+      <!-- Mobile Menu -->
+      <div 
+        :class="{'block': isMobileMenuOpen, 'hidden': !isMobileMenuOpen}"
+        class="md:hidden"
       >
-        {{ link.text }}
+        <div class="px-2 pt-2 pb-3 space-y-1">
-        <span v-if="isRouteActive(link.route)" class="feather-emoji">🌟</span>
+          <RouterLink
-      </RouterLink>
+            v-for="(link, index) in filteredNavLinks"
+            :key="index"
+            :to="{ name: link.route }"
+            class="block px-3 py-2 rounded-md text-base font-medium transition-colors duration-200 ease-in-out
+                   text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700"
+            :class="{
+              'bg-blue-500 text-white hover:bg-blue-600 dark:bg-blue-600 dark:hover:bg-blue-700': 
+                isRouteActive(link.route)
+            }"
+            @click="setActiveIndex(index); isMobileMenuOpen = false"
+          >
+            <div class="flex items-center justify-between">
+              {{ link.text }}
+              <span 
+                v-if="isRouteActive(link.route)" 
+                class="text-xs"
+                aria-hidden="true"
+              >
+                ✨
+              </span>
+            </div>
+          </RouterLink>
+        </div>
+      </div>
     </nav>
   </div>
 </template>
 
-
 <script setup>
 import { computed, ref, onMounted, watch } from 'vue';
 import { RouterLink, useRoute } from 'vue-router';
@@ -26,6 +105,7 @@ import { store } from '../main';
 const route = useRoute();
 const activeItemIndex = ref(0);
 const menuItems = ref([]);
+const isMobileMenuOpen = ref(false);
 
 const navLinks = [
   { active: true, route: 'discussions', text: 'Discussions' },
@@ -90,11 +170,6 @@ function setActiveIndex(index) {
 
 <script>
 export default {
-  name: 'Navigation',
+  name: 'Navigation'
-  computed: {
-    filteredNavLinks() {
-      return filteredNavLinks.value;
-    }
-  },
 };
 </script>

web/src/components/TopBar.vue

@@ -154,6 +154,31 @@
             </ul>
             </div>
         </div>
+        <select 
+          v-model="currentTheme" 
+          @change="loadTheme(currentTheme)"
+          class="inline-block w-[60px] px-3 py-1.5 text-sm
+                border border-gray-300 rounded-md
+                bg-white dark:bg-gray-800
+                text-gray-700 dark:text-gray-200
+                focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500
+                hover:border-gray-400
+                cursor-pointer
+                appearance-none
+                bg-no-repeat
+                bg-right
+                pr-8 mx-2"
+          style="background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M7%207l3-3%203%203m0%206l-3%203-3-3%22%20stroke%3D%22%239CA3AF%22%20fill%3D%22none%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E');"
+        >
+          <option 
+            v-for="theme in availableThemes" 
+            :key="theme" 
+            :value="theme"
+            class="py-1"
+          >
+            {{ theme }}
+          </option>
+        </select>
         <div v-if="isDarkMode" class="sun text-2xl w-6 hover:text-primary duration-150 cursor-pointer" title="Switch to Light theme" @click="themeSwitch()">
             <i data-feather="sun"></i>
         </div>
@@ -169,7 +194,7 @@
 import Navigation from '@/components/Navigation.vue';
 import ActionButton from '@/components/ActionButton.vue'
 import SocialIcon from '@/components/SocialIcon.vue'
-
+import axios from 'axios'
 import feather from 'feather-icons'
 export default {
   name: 'TopBar',
@@ -180,6 +205,10 @@ export default {
   },
   data() {
     return {
+      currentTheme: localStorage.getItem('preferred-theme') || 'default',
+      availableThemes: ['default', 'borg', 'amber', 'sober_gray', 'strawberry'],
+      isLoading: false,
+      error: null,      
       isInfosMenuVisible: false,
       isVisible: false,
       isPinned: false,
@@ -233,6 +262,27 @@ export default {
         return this.$store.state.isConnected;
     },     
   },
+  async mounted() {
+    try {
+      // Load saved theme preference
+      const savedTheme = localStorage.getItem('preferred-theme')
+      if (savedTheme && this.availableThemes.includes(savedTheme)) {
+        this.currentTheme = savedTheme
+      }
+      
+      // Load the initial theme
+      try {
+        await this.loadTheme(this.currentTheme)
+      } catch (err) {
+        this.error = 'Failed to initialize theme system'
+        console.error(err)
+      }
+      
+    } catch (err) {
+      this.error = 'Failed to initialize theme system'
+      console.error(err)
+    }
+  },  
   async created() {
     this.sunIcon = document.querySelector(".sun");
         this.moonIcon = document.querySelector(".moon");
@@ -247,6 +297,86 @@ export default {
 
   },
   methods: {
+    getSavedTheme() {
+      try {
+        return localStorage.getItem('preferred-theme')
+      } catch (e) {
+        console.warn('Failed to access localStorage:', e)
+        return null
+      }
+    },
+
+    // Safely save theme to localStorage
+    saveTheme(themeName) {
+      try {
+        // Clear some space first
+        this.clearOldStorageItems()
+        localStorage.setItem('preferred-theme', themeName)
+      } catch (e) {
+        console.warn('Failed to save theme preference:', e)
+        // Continue without saving to localStorage
+      }
+    },
+
+    // Helper method to clear space in localStorage
+    clearOldStorageItems() {
+      try {
+        // Remove old or unnecessary items
+        const itemsToKeep = ['preferred-theme'] // Add other critical items here
+        for (let i = 0; i < localStorage.length; i++) {
+          const key = localStorage.key(i)
+          if (!itemsToKeep.includes(key)) {
+            localStorage.removeItem(key)
+          }
+        }
+      } catch (e) {
+        console.warn('Failed to clear localStorage:', e)
+      }
+    },
+
+    async loadTheme(themeName) {
+      this.isLoading = true
+      this.error = null
+      
+      try {
+        // Fetch and apply new theme CSS
+        const response = await axios.get(`/distthemes/${themeName}.css`, {
+          headers: {
+            'Cache-Control': 'no-cache',
+            'Pragma': 'no-cache',
+            'Expires': '0',
+          }
+        });
+        console.log(response)
+        // Remove any existing theme style element
+        const existingStyle = document.getElementById('theme-styles');
+        if (existingStyle) {
+          existingStyle.remove();
+        }
+
+        // Create and append new style element
+        const styleElement = document.createElement('style');
+        styleElement.id = 'theme-styles';
+        styleElement.textContent = response.data;
+        document.head.appendChild(styleElement);
+
+        // Apply theme class to body
+        // document.body.className = `theme-${themeName}`;
+
+        // Safely save theme preference
+        this.saveTheme(themeName);        
+      } catch (error) {
+        console.error(`Failed to load theme: ${themeName}`, error)
+        this.error = `Failed to load theme: ${themeName}`
+      } finally {
+        this.isLoading = false
+      }
+    },
+
+    reloadTheme() {
+      return this.loadTheme(this.currentTheme)
+    },
+      
     themeSwitch() {
         
         if (document.documentElement.classList.contains("dark")) {
@@ -341,7 +471,6 @@ export default {
             //import('highlight.js/styles/tomorrow-night-blue.css');
             import('highlight.js/styles/stackoverflow-light.css');
         })
-        this.sunIcon.classList.add("display-none")
 
     },
     iconToggle() {
@@ -436,4 +565,10 @@ export default {
 .hover-zone {
   opacity: 0;
 }
+
+
+.error {
+  color: red;
+  margin-left: 1rem;
+}
 </style>

web/src/views/DiscussionsView.vue

@@ -36,10 +36,11 @@
                         @click="updateRandomFact">
                         <p class="text-lg text-gray-700 dark:text-gray-300">
                             <span class="font-semibold text-blue-600 dark:text-blue-400">🤔 Fun Fact: </span>
-                            {{ randomFact }}
+                            <span v-html="randomFact"></span>
                         </p>
                     </div>
 
+
                     <!-- Animated Progress Bar -->
                     <div class="w-full h-24 relative overflow-hidden bg-gradient-to-r from-blue-200 to-purple-200 dark:from-blue-800 dark:to-purple-800 rounded-full shadow-lg">
                         <!-- Progress Background -->
@@ -1000,7 +1001,8 @@ export default {
                 "LoLLMs features a built-in code interpreter that can execute multiple programming languages.",
                 "Quantum computers can perform calculations in minutes that would take classical computers thousands of years.",
                 "LoLLMs supports multimodal interactions, allowing users to work with both text and images.",
-                "The name Saïph in Arabic (سيف) means 'sword', symbolizing cutting-edge AI technology."
+                "The name Saïph in Arabic (سيف) means 'sword', symbolizing cutting-edge AI technology.",
+                '<div class="flex items-center justify-center"><iframe width="560" height="315" src="https://www.youtube.com/embed/7pSXGj0dSzE?si=Ov0Y4F2mCRSB61xc" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe></div>'
             ],
             randomFact: "",            
             showPlaceholderModal: false,
@@ -2205,19 +2207,23 @@ export default {
             }
         },
         async selectDiscussion(item) {
+            console.log("Selecting a discussion")
             if(this.isGenerating){
                 this.$store.state.toast.showToast("You are currently generating a text. Please wait for text generation to finish or stop it before trying to select another discussion", 4, false)
                 return;
             }
 
             if (item) {
+                console.log(`Selecting discussion: ${this.currentDiscussion}`)
                 // When discussion is selected it loads the discussion array
                 if (this.currentDiscussion===undefined) {
+                    console.log(`Selecting discussion: ${this.currentDiscussion}`)
                     this.currentDiscussion = item
 
                     this.setPageTitle(item)
 
                     localStorage.setItem('selected_discussion', this.currentDiscussion.id)
+                    console.log(`Saved discussion to : ${this.currentDiscussion.id}`)
 
                     this.load_discussion(item.id, ()=>{
                         if (this.discussionArr.length > 1) {
@@ -2239,6 +2245,7 @@ export default {
                         this.setPageTitle(item)
 
                         localStorage.setItem('selected_discussion', this.currentDiscussion.id)
+                        console.log(`Saved discussion to : ${this.currentDiscussion.id}`)
 
                         this.load_discussion(item.id, ()=>{
                             if (this.discussionArr.length > 1) {
@@ -3252,6 +3259,7 @@ export default {
             if (this.currentDiscussion!=null){
                 this.setPageTitle(item)
                 localStorage.setItem('selected_discussion', this.currentDiscussion.id)
+                console.log(`Saved discussion to : ${this.currentDiscussion.id}`)
                 this.load_discussion(item.id, ()=>{
                     if (this.discussionArr.length > 1) {
                         if (this.currentDiscussion.title === '' || this.currentDiscussion.title === null) {

zoos/personalities_zoo

@@ -1 +1 @@
-Subproject commit 5ab807378495125602c638ecd3034cec240039ec
+Subproject commit f9c5429d84ccbeaa78acf42b68ed908a96151218