feat: Add dashboard chat integration and MCP server
Major changes: - Dashboard: WebSocket-based chat with session management - Dashboard: New chat components (ChatPane, ChatInput, ModeToggle) - Dashboard: Enhanced UI with parallel coordinates chart - MCP Server: New atomizer-tools server for Claude integration - Extractors: Enhanced Zernike OPD extractor - Reports: Improved report generator New studies (configs and scripts only): - M1 Mirror: Cost reduction campaign studies - Simple Beam, Simple Bracket, UAV Arm studies Note: Large iteration data (2_iterations/, best_design_archive/) excluded via .gitignore - kept on local Gitea only. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
@@ -1,34 +1,100 @@
|
||||
@import 'katex/dist/katex.min.css';
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');
|
||||
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
/* CSS Variables - Atomaste Theme (exact colors from website) */
|
||||
:root {
|
||||
--cyan-glow: rgba(0, 212, 230, 0.5);
|
||||
--cyan-primary: #00d4e6;
|
||||
--cyan-dark: #0891b2;
|
||||
--bg-dark: #050a12;
|
||||
--bg-section: #080f1a;
|
||||
--bg-card: rgba(10, 20, 35, 0.6);
|
||||
}
|
||||
|
||||
@layer base {
|
||||
html, body {
|
||||
overflow-x: hidden;
|
||||
max-width: 100vw;
|
||||
}
|
||||
|
||||
body {
|
||||
@apply bg-dark-700 text-dark-50;
|
||||
@apply bg-dark-850 text-gray-400;
|
||||
font-family: 'Inter', system-ui, sans-serif;
|
||||
}
|
||||
|
||||
/* Selection */
|
||||
::selection {
|
||||
background: rgba(0, 212, 230, 0.3);
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
@layer components {
|
||||
.card {
|
||||
@apply bg-dark-600 rounded-lg shadow-lg p-6;
|
||||
/* Glass Morphism Cards - Atomaste Style (darker, more subtle) */
|
||||
.glass {
|
||||
background: rgba(8, 15, 26, 0.85);
|
||||
backdrop-filter: blur(12px);
|
||||
border: 1px solid rgba(0, 212, 230, 0.08);
|
||||
}
|
||||
|
||||
.glass-strong {
|
||||
background: rgba(8, 15, 26, 0.95);
|
||||
backdrop-filter: blur(16px);
|
||||
border: 1px solid rgba(0, 212, 230, 0.1);
|
||||
}
|
||||
|
||||
.card {
|
||||
@apply glass rounded-xl shadow-lg p-6;
|
||||
}
|
||||
|
||||
/* Text Gradients - matching website */
|
||||
.text-gradient {
|
||||
background: linear-gradient(135deg, #00d4e6 0%, #0891b2 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.text-gradient-subtle {
|
||||
background: linear-gradient(135deg, #ffffff 40%, #00d4e6 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
/* Buttons - Atomaste Style (exact match to website) */
|
||||
.btn {
|
||||
@apply px-4 py-2 rounded-md font-semibold transition-all duration-200;
|
||||
@apply px-5 py-2.5 rounded-lg font-semibold transition-all duration-300;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
@apply btn bg-primary-500 text-white hover:bg-primary-600;
|
||||
background: linear-gradient(135deg, #00d4e6 0%, #0891b2 100%);
|
||||
color: #000;
|
||||
font-weight: 600;
|
||||
box-shadow: 0 4px 15px rgba(0, 212, 230, 0.3);
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
box-shadow: 0 6px 25px rgba(0, 212, 230, 0.5);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
@apply btn bg-dark-500 text-dark-50 hover:bg-dark-400;
|
||||
@apply btn glass text-white hover:bg-white/5;
|
||||
border: 1px solid rgba(0, 212, 230, 0.2);
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
border-color: rgba(0, 212, 230, 0.4);
|
||||
}
|
||||
|
||||
.input {
|
||||
@apply bg-dark-500 border border-dark-400 rounded-md px-3 py-2 text-dark-50 focus:outline-none focus:ring-2 focus:ring-primary-500;
|
||||
@apply glass border border-primary-400/20 rounded-lg px-3 py-2 text-dark-50
|
||||
focus:outline-none focus:ring-2 focus:ring-primary-400/50 focus:border-primary-400/40;
|
||||
}
|
||||
|
||||
.badge {
|
||||
@@ -36,38 +102,115 @@
|
||||
}
|
||||
|
||||
.badge-success {
|
||||
@apply badge bg-green-900 text-green-300;
|
||||
@apply badge bg-green-500/10 text-green-400 border border-green-500/20;
|
||||
}
|
||||
|
||||
.badge-warning {
|
||||
@apply badge bg-yellow-900 text-yellow-300;
|
||||
@apply badge bg-yellow-500/10 text-yellow-400 border border-yellow-500/20;
|
||||
}
|
||||
|
||||
.badge-error {
|
||||
@apply badge bg-red-900 text-red-300;
|
||||
@apply badge bg-red-500/10 text-red-400 border border-red-500/20;
|
||||
}
|
||||
|
||||
.badge-info {
|
||||
@apply badge bg-blue-900 text-blue-300;
|
||||
@apply badge bg-primary-500/10 text-primary-400 border border-primary-500/20;
|
||||
}
|
||||
|
||||
/* Animated Border Glow */
|
||||
.border-glow {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.border-glow::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: -2px;
|
||||
border-radius: inherit;
|
||||
background: linear-gradient(45deg, transparent, var(--cyan-primary), transparent);
|
||||
background-size: 400% 400%;
|
||||
animation: borderGlow 3s ease infinite;
|
||||
z-index: -1;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s;
|
||||
}
|
||||
|
||||
.border-glow:hover::before {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Pulse Glow Effect */
|
||||
.pulse-glow {
|
||||
animation: pulseGlow 3s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* 3D Card Effect */
|
||||
.card-3d {
|
||||
transform-style: preserve-3d;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.card-3d:hover {
|
||||
transform: perspective(1000px) rotateX(2deg) rotateY(-2deg) translateZ(10px);
|
||||
}
|
||||
}
|
||||
|
||||
/* Custom scrollbar */
|
||||
/* Animated Grid Background */
|
||||
.grid-bg {
|
||||
background-image:
|
||||
linear-gradient(rgba(0, 212, 230, 0.03) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(0, 212, 230, 0.03) 1px, transparent 1px);
|
||||
background-size: 50px 50px;
|
||||
animation: gridMove 20s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes gridMove {
|
||||
0% { background-position: 0 0; }
|
||||
100% { background-position: 50px 50px; }
|
||||
}
|
||||
|
||||
@keyframes borderGlow {
|
||||
0%, 100% { background-position: 0% 50%; }
|
||||
50% { background-position: 100% 50%; }
|
||||
}
|
||||
|
||||
@keyframes pulseGlow {
|
||||
0%, 100% { box-shadow: 0 0 20px rgba(0, 212, 230, 0.2), 0 0 40px rgba(0, 212, 230, 0.1); }
|
||||
50% { box-shadow: 0 0 40px rgba(0, 212, 230, 0.4), 0 0 80px rgba(0, 212, 230, 0.2); }
|
||||
}
|
||||
|
||||
/* Ambient Glow Orbs */
|
||||
.glow-orb {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
filter: blur(80px);
|
||||
pointer-events: none;
|
||||
animation: orbFloat 8s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes orbFloat {
|
||||
0%, 100% { transform: translate(0, 0) scale(1); }
|
||||
33% { transform: translate(30px, -20px) scale(1.1); }
|
||||
66% { transform: translate(-20px, 20px) scale(0.9); }
|
||||
}
|
||||
|
||||
/* Custom scrollbar - Atomaste Style */
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
@apply bg-dark-700;
|
||||
background: var(--bg-dark);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
@apply bg-dark-500 rounded-full;
|
||||
background: #1a2535;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
@apply bg-dark-400;
|
||||
background: #2a3545;
|
||||
}
|
||||
|
||||
/* KaTeX Math Rendering */
|
||||
|
||||
Reference in New Issue
Block a user