Add Notification and new mini desing

frontend/src/components/Console.jsx

@@ -54,32 +54,63 @@ export default function Console({ serverName, token, theme }) {
     }
   };
 
+  // Функция для раскраски логов
+  const colorizeLog = (log) => {
+    // INFO - зеленый
+    if (log.includes('[INFO]') || log.includes('Done (')) {
+      return <span className="text-green-400">{log}</span>;
+    }
+    // WARN - желтый
+    if (log.includes('[WARN]') || log.includes('WARNING')) {
+      return <span className="text-yellow-400">{log}</span>;
+    }
+    // ERROR - красный
+    if (log.includes('[ERROR]') || log.includes('Exception')) {
+      return <span className="text-red-400">{log}</span>;
+    }
+    // Время - серый
+    if (log.match(/^\[\d{2}:\d{2}:\d{2}\]/)) {
+      const time = log.match(/^\[\d{2}:\d{2}:\d{2}\]/)[0];
+      const rest = log.substring(time.length);
+      return (
+        <>
+          <span className="text-gray-500">{time}</span>
+          <span className="text-gray-300">{rest}</span>
+        </>
+      );
+    }
+    // Обычный текст
+    return <span className="text-gray-300">{log}</span>;
+  };
+
   return (
     <div className={`flex flex-col h-full ${theme.primary}`}>
-      <div className={`flex-1 overflow-y-auto p-4 font-mono text-sm ${theme.secondary}`}>
+      {/* Консоль */}
+      <div className={`flex-1 overflow-y-auto p-4 font-mono text-sm ${theme.console || theme.secondary}`}>
         {logs.length === 0 ? (
           <div className={theme.textSecondary}>Консоль пуста. Запустите сервер для просмотра логов.</div>
         ) : (
           logs.map((log, index) => (
-            <div key={index} className={`${theme.text} whitespace-pre-wrap leading-relaxed`}>
-              {log}
+            <div key={index} className="whitespace-pre-wrap leading-relaxed">
+              {colorizeLog(log)}
             </div>
           ))
         )}
         <div ref={logsEndRef} />
       </div>
 
+      {/* Поле ввода команды */}
       <form onSubmit={sendCommand} className={`${theme.border} border-t p-4 flex gap-2`}>
         <input
           type="text"
           value={command}
           onChange={(e) => setCommand(e.target.value)}
-          placeholder="Введите команду..."
-          className={`flex-1 ${theme.input} ${theme.border} border rounded-xl px-4 py-2 ${theme.text} focus:outline-none focus:ring-2 focus:ring-blue-500 transition`}
+          placeholder="Введите команду и нажмите Enter для отправки, используйте стрелки для навигации между предыдущими командами"
+          className={`flex-1 ${theme.input} ${theme.border} border rounded-lg px-4 py-2.5 ${theme.text} placeholder:text-gray-600 focus:outline-none focus:ring-2 focus:ring-green-500 transition`}
         />
         <button
           type="submit"
-          className={`${theme.accent} ${theme.accentHover} px-6 py-2 rounded-xl flex items-center gap-2 text-white transition`}
+          className={`${theme.success} ${theme.successHover} px-6 py-2.5 rounded-lg flex items-center gap-2 text-white font-medium transition shadow-lg`}
         >
           <Send className="w-4 h-4" />
           Отправить