enhanced server settings section

desktop/views/books/books.html

@@ -109,5 +109,6 @@
 <script src="/src/scripts/updateNotifier.js"></script>
 <script src="/src/scripts/rpc-inapp.js"></script>
 <script src="/src/scripts/auth-guard.js"></script>
+<script src="/src/scripts/settings.js"></script>
 </body>
 </html>

desktop/views/components/settings-modal.html

@@ -42,16 +42,15 @@
 </div>
 
 <style>
-  /* --- AMOLED THEME VARIABLES --- */
+  /* --- THEME VARIABLES (Heredadas y adaptadas de anime.css) --- */
   :root {
-    --amoled-black: #000000;
-    --amoled-surface: #080808;
-    --amoled-field: #0e0e0e;
-    --amoled-border: rgba(255, 255, 255, 0.08);
-    --accent-purple: #8b5cf6;
-    --accent-glow: rgba(139, 92, 246, 0.15);
-    --text-main: #ffffff;
-    --text-dim: #a1a1aa;
+    --modal-bg: #0b0b0b;
+    --modal-sidebar: rgba(255, 255, 255, 0.02);
+    --modal-border: rgba(255, 255, 255, 0.08);
+    --input-bg: rgba(255, 255, 255, 0.04);
+    --accent: #8b5cf6; /* Tu morado principal */
+    --text-primary: #ffffff;
+    --text-secondary: #a1a1aa;
   }
 
   /* --- MODAL BASE --- */
@@ -63,6 +62,7 @@
     align-items: center;
     justify-content: center;
     padding: 20px;
+    font-family: system-ui, -apple-system, sans-serif; /* Coherencia con anime.css */
   }
 
   .modal.hidden { display: none !important; }
@@ -70,55 +70,58 @@
   .modal-overlay {
     position: absolute;
     inset: 0;
-    background: rgba(0, 0, 0, 0.9);
-    backdrop-filter: blur(12px);
+    background: rgba(0, 0, 0, 0.85); /* Un poco menos opaco para profundidad */
+    backdrop-filter: blur(8px);
     z-index: -1;
+    animation: fadeIn 0.3s ease;
   }
 
   .modal-content {
     position: relative;
     display: flex;
-    flex-direction: row; /* Horizontal layout */
-    width: 95%;
-    max-width: 1200px; /* Increased size */
-    height: 85vh;
-    background: var(--amoled-black);
-    border: var(--amoled-border);
-    border-radius: 28px;
+    flex-direction: row;
+    width: 100%;
+    max-width: 1100px;
+    height: 80vh;
+    background: var(--modal-bg);
+    border: 1px solid var(--modal-border);
+    border-radius: 16px; /* Bordes menos exagerados, más elegantes */
     overflow: hidden;
-    box-shadow: 0 0 0 1px var(--amoled-border), 0 24px 60px rgba(0,0,0,0.8);
-    animation: modalScaleUp 0.4s cubic-bezier(0.16, 1, 0.3, 1);
+    box-shadow: 0 40px 80px rgba(0,0,0,0.6);
+    animation: modalSlideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1);
   }
 
   /* --- SIDEBAR --- */
   .modal-sidebar {
-    width: 280px;
-    background: var(--amoled-surface);
-    border-right: var(--amoled-border);
+    width: 260px;
+    background: var(--modal-sidebar);
+    border-right: 1px solid var(--modal-border);
     display: flex;
     flex-direction: column;
-    padding: 2rem;
+    padding: 2rem 1.5rem;
     flex-shrink: 0;
   }
 
+  .sidebar-header { margin-bottom: 2rem; }
+
   .sidebar-title {
-    font-size: 1.4rem;
+    font-size: 1.5rem;
     font-weight: 800;
-    margin-bottom: 2.5rem;
-    color: var(--text-main);
-    letter-spacing: -0.02em;
+    color: var(--text-primary);
+    margin: 0;
+    letter-spacing: -0.03em;
   }
 
-  .nav-list { flex: 1; }
+  .nav-list { flex: 1; display: flex; flex-direction: column; gap: 4px; }
 
   .nav-item {
-    padding: 12px 16px;
-    border-radius: 14px;
+    padding: 10px 14px;
+    border-radius: 8px;
     cursor: pointer;
-    color: var(--text-dim);
+    color: var(--text-secondary);
     transition: all 0.2s ease;
-    margin-bottom: 6px;
-    font-weight: 500;
+    font-weight: 600;
+    font-size: 0.95rem;
     display: flex;
     align-items: center;
     gap: 12px;
@@ -127,22 +130,23 @@
 
   .nav-item:hover {
     background: rgba(255, 255, 255, 0.05);
-    color: var(--text-main);
+    color: var(--text-primary);
   }
 
   .nav-item.active {
-    background: var(--accent-glow);
-    color: var(--accent-purple);
-    box-shadow: inset 3px 0 0 var(--accent-purple);
+    background: var(--accent);
+    color: white;
+    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.25); /* Glow sutil */
   }
 
-  /* --- MAIN CONTENT & DYNAMIC INPUTS --- */
+  /* --- MAIN CONTENT area --- */
   .modal-main {
     flex: 1;
     display: flex;
     flex-direction: column;
-    background: var(--amoled-black);
+    background: transparent;
     min-width: 0;
+    position: relative;
   }
 
   .config-wrapper {
@@ -153,52 +157,54 @@
 
   .section-container {
     flex: 1;
-    padding: 3.5rem;
+    padding: 3rem;
     overflow-y: auto;
+    /* Custom Scrollbar sutil */
     scrollbar-width: thin;
-    scrollbar-color: #222 transparent;
+    scrollbar-color: #333 transparent;
   }
 
-  /* Styles for the injected section content */
+  /* --- INPUTS & FORMS (Estilo WaifuBoards/Anime) --- */
   .config-group {
-    margin-bottom: 2.5rem;
-    animation: fadeInSection 0.4s ease-out;
+    margin-bottom: 2rem;
+    animation: fadeInSection 0.3s ease-out;
   }
 
   .config-group label {
     display: block;
-    font-size: 0.75rem;
-    color: var(--accent-purple);
-    margin-bottom: 0.8rem;
-    letter-spacing: 0.05em;
-    font-weight: 800;
+    font-size: 0.8rem;
+    color: var(--text-secondary);
+    margin-bottom: 0.6rem;
+    font-weight: 600;
     text-transform: uppercase;
+    letter-spacing: 0.05em;
   }
 
   .config-input {
     width: 100%;
-    padding: 1rem 1.2rem;
-    background: var(--amoled-field);
-    border: 1px solid #1a1a1a;
-    border-radius: 14px;
-    color: #fff;
+    padding: 0.9rem 1rem;
+    background: var(--input-bg);
+    border: 1px solid var(--modal-border);
+    border-radius: 8px;
+    color: var(--text-primary);
     font-size: 1rem;
-    transition: all 0.25s ease;
+    font-family: inherit;
+    transition: all 0.2s ease;
   }
 
   .config-input:focus {
     outline: none;
-    border-color: var(--accent-purple);
-    background: #121212;
-    box-shadow: 0 0 0 4px var(--accent-glow);
+    border-color: var(--accent);
+    background: rgba(255, 255, 255, 0.08);
+    box-shadow: 0 0 0 1px var(--accent);
   }
 
-  /* --- FOOTER --- */
+  /* --- FOOTER ACTION BAR --- */
   .modal-footer-sticky {
-    padding: 1.5rem 3.5rem;
-    background: rgba(0, 0, 0, 0.8);
+    padding: 1.2rem 3rem;
+    background: rgba(11, 11, 11, 0.8); /* Glass effect */
     backdrop-filter: blur(10px);
-    border-top: var(--amoled-border);
+    border-top: 1px solid var(--modal-border);
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -206,32 +212,34 @@
 
   .footer-hint {
     font-size: 0.85rem;
-    color: var(--text-dim);
+    color: var(--text-secondary);
+    font-weight: 500;
   }
 
   /* --- BUTTONS --- */
   .btn-primary {
-    padding: 0.8rem 2.2rem;
-    background: #ffffff;
-    color: #000000;
+    padding: 0.7rem 2rem;
+    background: white; /* Estilo 'btn-watch' de anime.css */
+    color: black;
     border: none;
-    border-radius: 100px;
-    font-weight: 700;
+    border-radius: 6px;
+    font-weight: 800;
+    font-size: 0.95rem;
     cursor: pointer;
-    transition: transform 0.2s ease;
+    transition: transform 0.2s ease, filter 0.2s;
   }
 
   .btn-primary:hover {
-    transform: translateY(-2px);
-    background: #f0f0f0;
+    transform: scale(1.02);
+    filter: brightness(0.9);
   }
 
   .btn-exit {
-    background: #111;
-    border: 1px solid #222;
-    color: #ef4444;
+    background: transparent;
+    border: 1px solid var(--modal-border);
+    color: #ef4444; /* Rojo error sutil */
     padding: 10px;
-    border-radius: 12px;
+    border-radius: 8px;
     width: 100%;
     cursor: pointer;
     display: flex;
@@ -240,39 +248,63 @@
     gap: 8px;
     font-weight: 600;
     margin-top: auto;
+    transition: background 0.2s;
   }
 
-  /* --- ANIMATIONS & SKELETON --- */
-  @keyframes modalScaleUp {
-    from { opacity: 0; transform: scale(0.97) translateY(10px); }
+  .btn-exit:hover {
+    background: rgba(239, 68, 68, 0.1);
+    border-color: #ef4444;
+  }
+
+  /* --- SKELETON & ANIMATIONS --- */
+  @keyframes modalSlideUp {
+    from { opacity: 0; transform: scale(0.98) translateY(15px); }
     to { opacity: 1; transform: scale(1) translateY(0); }
   }
 
-  @keyframes fadeInSection {
-    from { opacity: 0; transform: translateY(8px); }
-    to { opacity: 1; transform: translateY(0); }
-  }
+  @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
+  @keyframes fadeInSection { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
 
-  .skeleton-loader { display: flex; flex-direction: column; gap: 2rem; }
+  .skeleton-loader { display: flex; flex-direction: column; gap: 1.5rem; }
   .skeleton {
-    background: linear-gradient(90deg, #080808 25%, #121212 50%, #080808 75%);
+    background: linear-gradient(90deg, #111 25%, #1a1a1a 50%, #111 75%);
     background-size: 200% 100%;
-    animation: shimmer 1.5s infinite;
-    border-radius: 12px;
+    animation: shimmer 2s infinite;
+    border-radius: 6px;
   }
-  @keyframes shimmer {
-    0% { background-position: 200% 0; }
-    100% { background-position: -200% 0; }
-  }
-  .title-skeleton { height: 35px; width: 40%; }
-  .field-skeleton { height: 55px; width: 100%; }
+  @keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
 
-  /* Responsive Mobile View */
+  .title-skeleton { height: 28px; width: 30%; margin-bottom: 1rem; }
+  .field-skeleton { height: 48px; width: 100%; }
+
+  /* --- RESPONSIVE --- */
   @media (max-width: 850px) {
-    .modal-content { flex-direction: column; height: 95vh; width: 100vw; border-radius: 0; }
-    .modal-sidebar { width: 100%; height: auto; border-right: none; border-bottom: var(--amoled-border); padding: 1rem; }
-    .sidebar-title { margin-bottom: 1rem; font-size: 1.2rem; }
-    .section-container { padding: 2rem; }
-    .modal-footer-sticky { padding: 1.5rem 2rem; }
+    .modal-content { flex-direction: column; height: 100%; width: 100%; border-radius: 0; border: none; }
+    .modal-sidebar { width: 100%; height: auto; border-right: none; border-bottom: 1px solid var(--modal-border); padding: 1.5rem; }
+    .sidebar-footer { display: none; } /* Ocultar btn salir sidebar en movil */
+    .section-container { padding: 1.5rem; }
+    .modal-footer-sticky { padding: 1rem 1.5rem; }
+
+    /* Añadir un botón de cierre flotante en móvil si fuera necesario,
+       pero el diseño actual debería funcionar bien con scroll */
+  }
+
+  /* --- Estilo para la nueva descripción --- */
+  .config-description {
+    font-size: 0.85rem;
+    color: rgba(255, 255, 255, 0.5); /* Gris sutil */
+
+    /* Ajustes para posición inferior */
+    margin-top: 0.5rem;    /* Espacio entre el input y la descripción */
+    margin-bottom: 0;      /* Ya no necesitamos margen abajo */
+
+    line-height: 1.4;
+    font-weight: 400;
+  }
+
+  /* Ajuste para inputs vacíos (placeholder) */
+  .config-input::placeholder {
+    color: rgba(255, 255, 255, 0.2);
+    font-style: italic;
   }
 </style>

desktop/views/marketplace.html

@@ -71,5 +71,6 @@
 <script src="/src/scripts/titlebar.js"></script>
 <script src="/src/scripts/rpc-inapp.js"></script>
 <script src="/src/scripts/auth-guard.js"></script>
+<script src="/src/scripts/settings.js"></script>
 </body>
 </html>

desktop/views/profile.html

@@ -207,5 +207,6 @@
 <script src="/src/scripts/utils/notification-utils.js"></script>
 <script src="/src/scripts/utils/list-modal-manager.js"></script>
 <script src="/src/scripts/profile.js"></script>
+<script src="/src/scripts/settings.js"></script>
 </body>
 </html>

desktop/views/schedule.html

@@ -92,5 +92,6 @@
     <script src="/src/scripts/schedule/schedule.js"></script>
     <script src="/src/scripts/rpc-inapp.js"></script>
     <script src="/src/scripts/auth-guard.js"></script>
+    <script src="/src/scripts/settings.js"></script>
 </body>
 </html>